@charset "UTF-8";
/* ============================================================
   アスタカプリント  プリント記事用パーツ（ykp- は既存の yk- とぶつからない新しい接頭辞）
   ykp-print.css   2026-10-04
   ------------------------------------------------------------
   直したところ
   ・段階カードが行落ちして最後の1つだけ崩れる → 行レイアウトに変更。
     レベルが何段階になっても崩れません。
   ・サムネイルの大きさがばらばら → 画像の枠を固定し object-fit で収める。
     A4縦・A5横のどちらでも同じ大きさの枠に並びます。
   ・既存のA5横の記事は --ykp-ar を指定していないので、
     これまでどおり画像の元の比率で表示されます（崩れません）。
   ============================================================ */

:root {
  --ykp-ink:    #1d2a35;   /* 本文 */
  --ykp-mute:   #5d6b78;   /* 補足 */
  --ykp-paper:  #ffffff;
  --ykp-wash:   #f5f8fa;   /* カードの下地 */
  --ykp-line:   #dde5ec;   /* 罫 */
  --ykp-band:   #fdf4d4;   /* 見出しの帯（既存の色をそのまま） */
  --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;         /* 角丸 */
  --ykp-gap: 18px;

  --ykp-sans:  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
              "BIZ UDPGothic", Meiryo, system-ui, sans-serif;
  /* 分数の数字だけ明朝に。教科書の見え方に近づけます（Webフォントは読み込みません） */
  --ykp-mincho: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
               Georgia, "Times New Roman", serif;
}

/* ============================================================
   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行。左にテープ図（6マスのうち何マス塗ったか）を置き、
   下へ進むほど塗りが増えます。段階が何個でも崩れません。
   ============================================================ */
.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 {                    /* 「Lv2」などの札 */
  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 {                     /* 「1/2・1/3・1/9」など。名前と同じ行にならべます */
  font-family: var(--ykp-mincho);
  font-size: 1.02rem;
  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-dan { margin: 36px 0 44px; }
.ykp-dan > h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ykp-band);
  border-radius: var(--ykp-r);
  margin: 0 0 12px;
  padding: 11px 16px;
  font-size: 1.12rem;
  line-height: 1.5;
}
.ykp-dan > h3 .ykp-no {           /* 左の札 */
  flex: none;
  background: var(--ykp-ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.ykp-point {
  color: var(--ykp-mute);
  font-size: .95rem;
  line-height: 1.85;
  margin: 0 0 18px;
  max-width: 50em;
}

/* 記事内の行き先 */
.ykp-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 26px;
}
.ykp-toc a {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--ykp-line);
  border-radius: 999px;
  background: var(--ykp-paper);
  color: var(--ykp-ink);
  font-size: .92rem;
  text-decoration: none;
}
.ykp-toc a:hover, .ykp-toc a:focus-visible {
  border-color: var(--ykp-blue);
  color: var(--ykp-blue);
}

/* ============================================================
   4. ダウンロードのタイル
   ------------------------------------------------------------
   枚数がいくつでも、幅がいくつでも割り切れる並べ方にしています。
   ============================================================ */
.ykp-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--ykp-gap);
  margin: 0;
  padding: 0;
  align-items: stretch;
}
/* スマホでも2列。1列にすると12本で1万px超のスクロールになります */
@media (max-width: 640px) {
  .ykp-dl { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .ykp-thumb figcaption { padding: 9px 9px 10px; gap: 7px; }
  .ykp-size { font-size: .78rem; line-height: 1.5; }
  .ykp-size b { font-size: .86rem; }
  .ykp-btn { font-size: .85rem; padding: 8px 2px; }
  .ykp-btns { gap: 6px; }
}

.ykp-thumb {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--ykp-paper);
  border: 1px solid var(--ykp-line);
  border-radius: var(--ykp-r);
  overflow: hidden;
}
.ykp-thumb > a {                 /* 画像の枠 */
  display: block;
  background: var(--ykp-wash);
  border-bottom: 1px solid var(--ykp-line);
  line-height: 0;
}
.ykp-thumb img {
  display: block;
  width: 100%;
  height: auto;
  /* --ykp-ar を指定した時だけ枠を固定します。
     指定しない既存記事では、これまでどおり元の比率で出ます。 */
  aspect-ratio: var(--ykp-ar, auto);
  object-fit: contain;
  background: #fff;
}
.ykp-thumb figcaption {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  padding: 12px 13px 13px;
}
.ykp-size {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ykp-mute);
}
.ykp-size b {
  display: block;
  color: var(--ykp-ink);
  font-size: .97rem;
  font-weight: 700;
}

/* タイルの中のテープ図（小） */
.ykp-thumb .ykp-tape {
  width: 100%;
  height: 11px;
  margin: 0 0 2px;
}

/* ボタン。問題＝ぬり、答え＝線だけ。押す順がすぐ分かるように差をつけます */
.ykp-btns { display: flex; gap: 8px; margin-top: auto; }
.ykp-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 4px;
  border-radius: 7px;
  border: 1.5px solid var(--ykp-blue);
  background: var(--ykp-blue);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.ykp-btn:hover, .ykp-btn:focus-visible { background: var(--ykp-blue-d); border-color: var(--ykp-blue-d); color: #fff; }
.ykp-btn.ykp-ans {
  background: var(--ykp-paper);
  color: var(--ykp-blue);
}
.ykp-btn.ykp-ans:hover, .ykp-btn.ykp-ans:focus-visible { background: var(--ykp-wash); color: var(--ykp-blue-d); }

/* ============================================================
   5. 進め方（番号つきの道すじ）
   ============================================================ */
.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;
}
.ykp-roadmap .ykp-soon { color: var(--ykp-mute); font-weight: 700; }

/* ============================================================
   6. よくある質問
   ============================================================ */
.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;
}

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