@charset "UTF-8";
/* ============================================================
   アスタカプリント  hinagata（ひな形）記事用パーツ
   hinagata-grid.css   2026-11-06
   ------------------------------------------------------------
   ・ykp-print.css から、hinagata の記事で使う部品だけを抜き出しました
       1. このプリントの特徴（.ykp-feature）
       2. 段階・種類の一覧（.ykp-levels）
       3. 番号つきの道すじ（.ykp-roadmap）
       4. よくある質問（.ykp-qa）
   ・5. のサムネイル一覧（.gk-grid）は hinagata 用に新しく作ったものです
     A4縦とA4横がまざっても、同じ大きさの枠に並びます
   ・ダウンロードの見出し・目次（.yk-dan / .yk-point / .yk-toc / .yk-no）は
     サイト共通のCSSで表示されるので、ここには入れていません
   ============================================================ */

:root {
  --ykp-ink:    #1d2a35;   /* 本文 */
  --ykp-mute:   #5d6b78;   /* 補足 */
  --ykp-paper:  #ffffff;
  --ykp-wash:   #f5f8fa;   /* カードの下地 */
  --ykp-line:   #dde5ec;   /* 罫 */
  --ykp-blue:   #2a63a8;   /* ボタン・リンク */
  --ykp-blue-d: #1b4679;

  /* 段階の色。やさしい水色から、しあげの橙へ */
  --ykp-lv0: #93c0e2;
  --ykp-lv1: #6aa5d6;
  --ykp-lv2: #4687c4;
  --ykp-lv3: #2a63a8;
  --ykp-lv4: #d9822b;
  --ykp-lv5: #b4571c;

  --ykp-r:   10px;         /* 角丸 */
}

/* ============================================================
   1. このプリントの特徴（囲み）
   ============================================================ */
.ykp-feature {
  background: var(--ykp-wash);
  border: 1px solid var(--ykp-line);
  border-left: 5px solid var(--ykp-blue);
  border-radius: var(--ykp-r);
  padding: 18px 22px;
  margin: 28px 0;
}
.ykp-feature > :first-child { margin-top: 0; }
.ykp-feature > :last-child  { margin-bottom: 0; }
.ykp-feature ul { padding-left: 1.1em; margin: 10px 0 0; }
.ykp-feature li { margin: 7px 0; line-height: 1.75; }

/* ============================================================
   2. 段階・種類の一覧
   ------------------------------------------------------------
   1つ＝1行。左にテープ（何マス塗ったか）を置き、
   下へ進むほど塗りが増えます。何段階でも崩れません。
   ============================================================ */
.ykp-levels {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  border-top: 1px solid var(--ykp-line);
}
.ykp-levels > li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 2px 20px;
  align-items: start;
  padding: 13px 4px;
  border-bottom: 1px solid var(--ykp-line);
}

/* テープのバー */
.ykp-tape {
  display: flex;
  gap: 2px;
  width: 132px;
  height: 20px;
  margin-bottom: 7px;
}
.ykp-tape i {
  flex: 1;
  background: #fff;
  border: 1px solid var(--ykp-line);
  border-radius: 2px;
}
.ykp-tape i.on { border-color: transparent; }

.ykp-lv-name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ykp-ink);
}
.ykp-lv-tag {                    /* 「グレー」「100字」などの札 */
  display: inline-block;
  min-width: 2.6em;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 9px;
  vertical-align: 2px;
}
.ykp-lv-ex {                     /* 「白黒印刷」「マス18.5mm」など。名前と同じ行に */
  font-size: .9rem;              /* ykp-print の明朝は分数用なので、ここではゴシックのまま */
  font-weight: 400;
  color: var(--ykp-blue);
  letter-spacing: .03em;
  margin-left: 12px;
  white-space: nowrap;
}
.ykp-lv-desc {
  grid-column: 2;
  grid-row: 2;
  margin: 1px 0 0;
  color: var(--ykp-mute);
  font-size: .93rem;
  line-height: 1.7;
  max-width: 46em;
}
.ykp-levels-note {
  color: var(--ykp-mute);
  font-size: .9rem;
  margin: 12px 0 0;
}

/* 段階ごとの色 */
.ykp-l0 .ykp-tape i.on, .ykp-l0 .ykp-lv-tag { background: var(--ykp-lv0); }
.ykp-l1 .ykp-tape i.on, .ykp-l1 .ykp-lv-tag { background: var(--ykp-lv1); }
.ykp-l2 .ykp-tape i.on, .ykp-l2 .ykp-lv-tag { background: var(--ykp-lv2); }
.ykp-l3 .ykp-tape i.on, .ykp-l3 .ykp-lv-tag { background: var(--ykp-lv3); }
.ykp-l4 .ykp-tape i.on, .ykp-l4 .ykp-lv-tag { background: var(--ykp-lv4); }
.ykp-l5 .ykp-tape i.on, .ykp-l5 .ykp-lv-tag { background: var(--ykp-lv5); }
.ykp-l0 .ykp-lv-ex { color: var(--ykp-lv1); }
.ykp-l4 .ykp-lv-ex, .ykp-l5 .ykp-lv-ex { color: var(--ykp-lv5); }

@media (max-width: 560px) {
  .ykp-levels > li { grid-template-columns: 1fr; gap: 3px; padding: 12px 2px; }
  .ykp-lv-name, .ykp-lv-desc { grid-column: 1; }
  .ykp-lv-name { grid-row: 2; }
  .ykp-lv-desc { grid-row: 3; }
  .ykp-lv-ex { display: block; margin: 2px 0 0; white-space: normal; }
  .ykp-tape { grid-row: 1; width: 104px; height: 15px; margin-bottom: 3px; }
}

/* ============================================================
   3. 番号つきの道すじ（原稿用紙の選び方・書き方）
   ============================================================ */
.ykp-roadmap {
  list-style: none;
  counter-reset: yk;
  margin: 24px 0;
  padding: 0;
}
.ykp-roadmap > li {
  counter-increment: yk;
  position: relative;
  padding: 0 0 20px 44px;
  border-left: 2px solid var(--ykp-line);
  margin-left: 13px;
}
.ykp-roadmap > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ykp-roadmap > li::before {
  content: counter(yk);
  position: absolute;
  left: -14px;
  top: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ykp-blue);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.ykp-roadmap > li.is-here::before { background: var(--ykp-lv4); }
.ykp-roadmap strong { font-size: 1rem; }
.ykp-roadmap span {
  display: block;
  color: var(--ykp-mute);
  font-size: .92rem;
  line-height: 1.75;
  margin-top: 3px;
}

/* ============================================================
   4. よくある質問
   ============================================================ */
.ykp-qa { margin: 24px 0; }
.ykp-qa > details {
  border: 1px solid var(--ykp-line);
  border-radius: var(--ykp-r);
  margin-bottom: 10px;
  background: var(--ykp-paper);
}
.ykp-qa > details[open] { background: var(--ykp-wash); }
.ykp-qa summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 44px 14px 16px;
  position: relative;
  font-weight: 700;
  line-height: 1.6;
}
.ykp-qa summary::-webkit-details-marker { display: none; }
.ykp-qa summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ykp-blue);
  border-bottom: 2px solid var(--ykp-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.ykp-qa > details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ykp-qa .ykp-a {
  padding: 0 16px 16px;
  color: var(--ykp-mute);
  line-height: 1.9;
  margin: 0;
}

/* ============================================================
   5. サムネイル一覧（hinagata 用）
   ------------------------------------------------------------
   <div class="gk-grid"> の中に <figure class="gk-card is-tate|is-yoko"> を並べる
   ・サムネイルは正方形の枠の中央に置くので、縦長・横長で枠の大きさが変わらない
   ・列数は画面幅に合わせて自動（PC 3〜4列／スマホ 2列）
   ============================================================ */
.gk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 20px 16px;
  margin: 1.2em 0 2em;
}

.gk-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--ykp-paper);
  border: 1px solid var(--ykp-line);
  border-radius: var(--ykp-r);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.gk-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

/* サムネイルの枠（正方形・うすい台紙） */
.gk-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--ykp-wash);
  border-bottom: 1px solid var(--ykp-line);
  overflow: hidden;
}
.gk-thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 28px);
  max-height: calc(100% - 28px);
  width: auto;
  height: auto;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);   /* 紙のふち */
}
/* 縦長は高さいっぱい、横長は幅いっぱい（同じA4なので見た目の大きさがそろう） */
.gk-card.is-tate .gk-thumb img { height: calc(100% - 28px); }
.gk-card.is-yoko .gk-thumb img { width: calc(100% - 28px); }

/* 説明とボタン */
.gk-card figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 12px;
  text-align: center;
  flex: 1;
}
.gk-name {
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ykp-ink);
}
.gk-spec {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--ykp-mute);
}
.gk-size {                       /* マスの大きさ（小さな札） */
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eaf1f9;
  color: var(--ykp-blue);
  font-size: .75rem;
  line-height: 1.5;
}
.gk-btn {
  margin-top: auto;              /* ボタンをカードの下にそろえる */
  display: inline-block;
  min-width: 6em;
  padding: 6px 16px;
  border-radius: 7px;
  background: var(--ykp-blue);
  color: #fff !important;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color .12s ease;
}
.gk-btn:hover, .gk-btn:focus-visible { background: var(--ykp-blue-d); }

/* スマホ：2列 */
@media (max-width: 560px) {
  .gk-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
  }
  .gk-thumb img { max-width: calc(100% - 20px); max-height: calc(100% - 20px); }
  .gk-card.is-tate .gk-thumb img { height: calc(100% - 20px); }
  .gk-card.is-yoko .gk-thumb img { width: calc(100% - 20px); }
  .gk-name { font-size: .88rem; }
  .gk-spec { font-size: .72rem; }
}

/* ============================================================
   6. 動きを減らす設定のとき
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gk-card, .gk-btn, .ykp-qa summary::after {
    transition: none !important;
  }
  .gk-card:hover { transform: none; }
}