/* =========================================================
   Claude Code講座が主役の並び（2026-10-23 #65）
   planhat.css / toss-study.css の上に重ねる。色はサイトの緑・クリーム・金だけを使う。
   ========================================================= */

/* ---------- 見出しラベル: 英大文字・字間・前の短い横線をやめる ---------- */
.eyebrow { font-family: var(--font-jp); font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.eyebrow::before { content: none; }
.reveal { opacity: 1; transform: none; }
.case-index { font-size: 14px; letter-spacing: .04em; font-weight: 700; }
.profile__roma { font-size: 1.5rem; letter-spacing: .02em; text-transform: none; }
.dtable th { font-size: 1.4rem; letter-spacing: .02em; text-transform: none; }
.footer__col h4 { font-size: 1.4rem; letter-spacing: .04em; text-transform: none; }
.modal__body .sub { font-size: 1.4rem; letter-spacing: .04em; text-transform: none; }
/* G.A.I.N.S. の窓: 中だけスクロールでき、端まで来ても後ろのページは動かない。iPhone のツールバーに下端が隠れないよう見えている高さ（dvh）に合わせる（#69） */
.modal__panel { max-height: 88vh; max-height: 88dvh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.blk__badge { letter-spacing: .06em; }
.selected-works__head .eyebrow { justify-content: center; }

/* ---------- 小さすぎる字を読める大きさに ---------- */
.system-app>small { font-size: 13px; }
.loop-note small { font-size: 12px; }
.showcase__foot { font-size: 14px; }
.creds__meta { font-size: 1.4rem; letter-spacing: .02em; }
.gcard__go { font-size: 1.4rem; }
.workcard__go { font-size: 1.4rem; }

/* ---------- ハンバーガー（アイコン用フォントを使わない） ---------- */
.burger-lines, .burger-lines::before, .burger-lines::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.burger-lines { position: relative; }
.burger-lines::before, .burger-lines::after { content: ""; position: absolute; left: 0; }
.burger-lines::before { top: -7px; }
.burger-lines::after { top: 7px; }
.nav__burger[aria-expanded="true"] .burger-lines { background: transparent; }
.nav__burger[aria-expanded="true"] .burger-lines::before { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .burger-lines::after { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu a { font-family: var(--font-jp); font-size: clamp(2.4rem, 6.4vw, 4.2rem); letter-spacing: 0; }

/* ---------- 最初の画面 ---------- */
.vision__eyebrow { font-size: 15px; letter-spacing: .04em; font-weight: 700; color: #3d6745; gap: 0; }
.vision__eyebrow>span.vision__cross { font-size: 1em; letter-spacing: 0; color: #b69141; padding: 0 .15em; border-left: 0; }
.vision h1 { flex-direction: column; gap: 6px; margin: 18px 0 14px; font-size: clamp(48px, 6vw, 86px); line-height: 1.1; letter-spacing: -.03em; }
.vision__kicker { display: block; font-family: var(--font-jp); font-size: clamp(20px, 2.1vw, 30px); font-weight: 700; letter-spacing: .02em; color: #3d6745; }
.vision__lead { font-size: clamp(19px, 1.9vw, 26px); margin: 8px 0; }
.vision__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 0; margin: 12px 0 22px; font-size: 17px; color: #52634f; }
.vision__meta>span::before { content: "｜"; color: #a9b8a3; margin: 0 .5em; }
.vision__price { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 20px; font-size: 15px; color: #23352b; }
.vision__price b { margin: 0 .15em 0 .35em; font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vision__actions { flex-wrap: wrap; gap: 12px 28px; }
.study-btn { gap: 0; padding: 17px 36px; font-size: 16px; }
.study-text-link { font-size: 16px; }
/* 最初の画面の下段＝こんな方へ（顔と認定マークはすぐ下の自己紹介で出すので重ねない） */
.vision__fit { max-width: 900px; margin: 30px auto 0; }
.vision__fit-h { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #3d6745; }
.vision__fit ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vision__fit li { display: flex; align-items: center; position: relative; padding: 14px 18px 14px 50px; border: 1px solid #dbe5d3; border-radius: 16px; background: #ffffffe6; text-align: left; font-size: 16px; font-weight: 700; line-height: 1.6; color: #23352b; }
.vision__fit .ln { display: inline-block; }
.vision__fit li::before { content: "✓"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #3d6745; color: #fff; font-size: 13px; }

/* 文字の量が増えた分、業務画面の絵を下げる */
@media (min-width: 900px) {
  .toss-study .work-scene { top: 600px; }
  .vision__pin { height: 1020px; }
}
@media (min-width: 900px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .study-motion .vision h1 { font-size: clamp(48px, 5.6vw, 80px); margin: 14px 0 10px; }
  .study-motion .vision__lead { font-size: clamp(19px, 1.8vw, 24px); }
  .study-motion .toss-study .work-scene, .study-motion .work-scene { top: max(74%, 560px); transform: translateX(-50%) scale(.8); }
}
@media (min-width: 900px) and (max-height: 800px) {
  .study-motion .vision h1 { font-size: 58px; }
  .study-motion .vision__lead { font-size: 20px; }
  .study-motion .vision__kicker { font-size: 20px; }
  .study-motion .vision__price { margin: 10px 0 14px; }
  .study-motion .vision__fit { margin-top: 20px; }
  .study-motion .vision__fit li { padding: 12px 14px 12px 46px; font-size: 15px; }
  .study-motion .vision__eyebrow { font-size: 14px; }
  .study-motion .toss-study .work-scene, .study-motion .work-scene { top: max(70%, 470px); transform: translateX(-50%) scale(.7); }
}
/* スマホ・タブレットは3Dを使わず、業務画面の絵を文字の下に縮めて置く */
@media (max-width: 899px) {
  .vision__pin { height: auto; min-height: 0; padding-bottom: 320px; }
  .vision h1 { font-size: clamp(40px, 11vw, 72px); }
  .toss-study .work-scene, .work-scene { top: auto; bottom: 0; transform: translateX(-50%) scale(.62); transform-origin: center bottom; }
  .scene-success { bottom: 24px; }
}
@media (max-width: 600px) {
  .vision__copy { padding: 30px 16px 0; }
  .vision__eyebrow { font-size: 14px; }
  .vision h1 { font-size: clamp(36px, 11.2vw, 48px); margin: 14px 0 10px; }
  .vision__kicker { font-size: clamp(17px, 4.9vw, 21px); }
  .vision__lead { font-size: 19px; }
  .vision__lead span { white-space: normal; display: block; }
  .vision__meta { flex-direction: column; align-items: center; font-size: 15px; }
  .vision__meta>span::before { content: none; }
  .vision__price { flex-direction: column; align-items: center; gap: 2px; }
  .vision__price b { font-size: 26px; }
  .vision__actions { flex-direction: column; gap: 4px; }
  .vision__fit { margin-top: 22px; }
  .vision__fit ul { grid-template-columns: 1fr; gap: 8px; max-width: 340px; margin: 0 auto; }
  .vision__fit li { padding: 13px 14px 13px 48px; font-size: 15.5px; }
  .study-btn { width: 100%; max-width: 320px; padding: 15px 20px; font-size: 16px; }
  .vision__pin { padding-bottom: 236px; }
  .toss-study .work-scene, .work-scene { bottom: 0; transform: translateX(-50%) scale(.48); }
  .scene-success { display: none; }
}
@media (max-width: 360px) {
  .vision__pin { padding-bottom: 200px; }
  .toss-study .work-scene, .work-scene { transform: translateX(-50%) scale(.4); }
}

/* ---------- 講座でやること ---------- */
/* デモ①②は同じ形: ラベル＋2〜3行の説明＋端末（PCではピン留めの中に入る） */
.course-demo-head { margin: 0 0 1.8rem; }
.course-demo-label { display: inline-block; margin: 0 0 1rem; padding: .5rem 1.4rem; border-radius: 99px; background: var(--espresso); color: #fff; font-size: 1.5rem; font-weight: 700; }
.course-demo-text { margin: 0; font-family: var(--font-jp); font-size: clamp(1.7rem, 1.7vw, 2rem); font-weight: 700; line-height: 1.7; color: var(--ink); }
.course-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; margin-top: clamp(4rem, 6vw, 7rem); }
.course-kit__col { padding: 3rem 3.2rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.course-kit h3 { margin: 0 0 1.6rem; font-family: var(--font-jp); font-size: 2.2rem; font-weight: 700; }
.course-kit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.course-kit li { padding-left: 2.6rem; position: relative; font-size: 1.7rem; font-weight: 700; line-height: 1.6; }
.course-kit li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--terra); font-weight: 700; }
.course-kit li small { display: block; font-size: 1.5rem; font-weight: 400; color: var(--ink-soft); }
@media (max-width: 760px) {
  .course-kit { grid-template-columns: 1fr; gap: 1.6rem; }
  .course-kit__col { padding: 2.4rem 2.2rem; }
}

/* ---------- 料金と受講生特典 ---------- */
/* 助成金が使えた場合（目を止める一番大きな数字・条件はすぐ横に置く） */
.price-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.4rem, 4vw, 5.6rem); align-items: center; margin: 0 0 clamp(4rem, 5vw, 5.6rem); padding: clamp(2.8rem, 4.4vw, 5.2rem); border-radius: 26px; background: var(--cream); color: var(--ink); }
.price-sub__label { display: inline-block; margin: 0 0 1.6rem; padding: .7rem 1.6rem; border-radius: 99px; background: var(--amber); color: #1f3320; font-size: 1.6rem; font-weight: 700; }
.price-sub__num { margin: 0; font-family: var(--font-display); font-size: clamp(7rem, 9.4vw, 12rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--terra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-sub__num small { margin-right: .8rem; font-family: var(--font-jp); font-size: 2.6rem; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.price-sub__num span { margin-left: .4rem; font-family: var(--font-jp); font-size: 3rem; font-weight: 700; letter-spacing: 0; }
.price-sub__tax { margin: 1.4rem 0 0; font-size: 1.6rem; color: var(--ink-soft); }
.price-sub__terms { list-style: none; margin: 0; padding: 0 0 0 clamp(2.4rem, 3.6vw, 4.4rem); border-left: 1px solid var(--line); display: grid; gap: .8rem; }
.price-sub__terms li { position: relative; padding-left: 1.6rem; font-size: 1.5rem; line-height: 1.75; }
.price-sub__terms li::before { content: "・"; position: absolute; left: -.2rem; color: var(--terra); font-weight: 700; }
.price-cards__lead { margin: 0 0 1.6rem; font-size: 1.7rem; font-weight: 700; color: var(--paper-ink); }

.price-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
.price-card { padding: 3.2rem 3.6rem; border: 1px solid var(--line-dark); border-radius: 22px; background: #ffffff08; }
.price-card--on { border: 2px solid var(--amber); background: #ffffff10; }
.price-card h3 { margin: 0 0 1.2rem; font-family: var(--font-jp); font-size: 2.2rem; font-weight: 700; }
.price-card__num { margin: 0; font-family: var(--font-display); font-size: clamp(5rem, 6vw, 7.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price-card__num span { margin-left: .3rem; font-family: var(--font-jp); font-size: 2.4rem; font-weight: 700; letter-spacing: 0; }
.price-card__tax { margin: 1rem 0 0; font-size: 1.5rem; color: var(--paper-soft); }
.price-note { margin: 2rem 0 0; font-size: 1.6rem; line-height: 1.8; color: var(--paper-soft); }

/* 受講生特典（ARIAの初回参加費 154,000円→0円 を大きな数字で見せる） */
.perk { margin-top: clamp(4.8rem, 7vw, 8rem); padding: clamp(3.2rem, 5vw, 5.6rem) clamp(2.4rem, 5vw, 5.6rem); border-radius: 26px; background: #2d5535; border: 2px solid var(--amber); }
.perk__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.4rem, 4vw, 5.6rem); align-items: center; margin: 0 0 3.6rem; }
.perk__label { display: inline-block; margin: 0 0 2rem; padding: .7rem 1.6rem; border-radius: 99px; background: var(--amber); color: #1f3320; font-size: 1.5rem; font-weight: 700; }
.perk__h { margin: 0 0 2rem; font-family: var(--font-jp); font-size: clamp(3rem, 4vw, 4.6rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.perk__h em { font-style: normal; color: var(--amber); }
.perk__h .nw, .perk__key .nw, .perk__zero-cap .nw, .price-sub__tax .nw { white-space: nowrap; }
.perk__p { margin: 0; font-size: 1.7rem; line-height: 1.9; color: var(--paper-soft); }
.perk__zero { padding: clamp(2.4rem, 3vw, 3.6rem) 2rem; border-radius: 22px; background: #00000026; text-align: center; }
.perk__zero-cap { margin: 0 0 1.2rem; font-size: 1.6rem; font-weight: 700; color: var(--paper-soft); }
.perk__zero-was { margin: 0; font-size: 2.2rem; font-weight: 700; color: var(--paper-soft); font-variant-numeric: tabular-nums; }
.perk__zero-was span { margin-right: .8rem; font-size: 1.5rem; }
.perk__zero-was s { text-decoration-thickness: 2px; }
.perk__zero-now { margin: 1.6rem 0 0; line-height: 1; color: var(--amber); }
.perk__zero-now span { display: block; margin: 0 0 .2rem; font-size: 1.8rem; font-weight: 700; color: var(--paper-ink); }
.perk__zero-now b { font-family: var(--font-display); font-size: clamp(11rem, 13vw, 16rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.perk__zero-now small { margin-left: .4rem; font-family: var(--font-jp); font-size: 3.6rem; font-weight: 700; }
.perk__zero-month { margin: 1.4rem 0 0; font-size: 1.4rem; color: var(--paper-soft); }
.perk__list { list-style: none; margin: 0 0 3rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2.4rem; }
.perk__list li { position: relative; padding-left: 2.4rem; font-size: 1.6rem; line-height: 1.7; }
.perk__list li::before { content: "✓"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.perk__key { margin: 0 0 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--line-dark); font-family: var(--font-jp); font-size: clamp(1.9rem, 2.2vw, 2.4rem); font-weight: 700; line-height: 1.65; }
.perk__small { margin: 0; font-size: 1.4rem; line-height: 1.9; color: var(--paper-soft); }
.perk__small a { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 4px; display: inline-block; margin-top: .6rem; min-height: 44px; line-height: 44px; }
.price-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 2.8rem; }
.price-cta p { margin: 0; font-size: 1.5rem; line-height: 1.8; color: var(--paper-soft); }
@media (max-width: 760px) {
  .price-sub { grid-template-columns: 1fr; padding: 2.8rem 2.4rem; }
  .price-sub__label { padding: .6rem 1.2rem; font-size: 1.4rem; }
  .price-sub__num { font-size: clamp(5.6rem, 17vw, 8rem); }
  .price-sub__num small { display: block; margin: 0 0 .6rem; font-size: 2rem; }
  .price-sub__terms { padding: 2rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .price-cards { grid-template-columns: 1fr; gap: 1.6rem; }
  .price-card { padding: 2.6rem 2.4rem; }
  .perk__top { grid-template-columns: 1fr; }
  .perk__list { grid-template-columns: 1fr; }
  .perk__key { font-size: 1.8rem; }
  .bni-refer { padding: 1.6rem; border-radius: 20px; }
  .bni-refer .refer__ask { padding: 2.6rem 1.8rem; }
  .bni-refer .refer__pro { padding: 2rem 1.6rem; }
  .bni-refer .refer__ask-q { font-size: 2rem; }
}

/* ---------- 教える人 ---------- */
#profile .sec__head { max-width: 86rem; }
.profile__name { font-family: var(--font-jp); }
.facts { list-style: none; margin: clamp(4rem, 5vw, 5.6rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.facts li { padding: 2.6rem 2.8rem; border-radius: 18px; background: var(--paper); }
.facts b { display: block; font-family: var(--font-display); font-size: clamp(3.2rem, 3.4vw, 4.4rem); font-weight: 800; line-height: 1; color: var(--terra); letter-spacing: -.03em; }
.facts b small { margin-left: .2rem; font-family: var(--font-jp); font-size: 1.5rem; font-weight: 700; letter-spacing: 0; }
.facts span { display: block; margin-top: 1.2rem; font-size: 1.6rem; line-height: 1.7; color: var(--ink-soft); }
@media (min-width: 920px) { #profile .profile { align-items: center; } }
#profile .creds { margin-top: clamp(4rem, 6vw, 6rem); padding: 2.8rem 3.2rem; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; }
#profile .creds__badge { margin: 0; padding: 0; }
#profile .creds__name { color: var(--ink); }
#profile .creds__meta { color: var(--ink-soft); }
#profile .creds__p { color: var(--ink-soft); font-size: 1.6rem; }
#profile .ningen { margin: clamp(5rem, 7vw, 8rem) 0 0; }
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr; gap: 1rem; }
  .facts li { display: flex; align-items: baseline; gap: 1.6rem; padding: 1.6rem 1.8rem; }
  .facts span { margin-top: 0; }
  .facts span br { display: none; }
  #profile .creds { grid-template-columns: 1fr; padding: 2.4rem 2.2rem; }
}

/* ---------- BNIの方へ ---------- */
.bni-sec .bni-cta { margin-top: 0; }
.bni-cta__eyebrow { letter-spacing: .02em; font-size: 13px; }
.bni-refer { margin-top: clamp(4rem, 6vw, 6rem); padding: clamp(2.4rem, 4vw, 4.8rem); border-radius: 26px; background: var(--espresso); color: var(--paper-ink); }
.bni-refer .refer__pro { margin-top: 0; }
.bni-refer .refer__ask { margin-top: clamp(2.4rem, 4vw, 4rem); }
.gains-wrap { margin-top: clamp(5rem, 8vw, 9rem); }
.gains-wrap h3 small { display: block; margin-top: .6rem; font-size: 1.7rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.gains-wrap .lead { margin: 0 0 3.2rem; }
.gains-pdf { margin-top: 3.2rem; }

/* ---------- ほかにやっていること ---------- */
.others-list { list-style: none; margin: 0 0 3.2rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; }
.others-list li { padding: 2.2rem 0; border-top: 1px solid #c9d6c2; }
.others-list h3 { margin: 0 0 .6rem; font-family: var(--font-jp); font-size: 2rem; font-weight: 700; }
.others-list p { margin: 0; font-size: 1.55rem; line-height: 1.8; color: var(--ink-soft); }
.gallery--small { margin-bottom: 3.2rem; }
.gallery--small .gtile { aspect-ratio: 16/9; }
.gtile__play { font-size: 2.2rem; }
.workcards--small .workcard__media { aspect-ratio: 21/9; }
.workcards--small .workcard__title { font-size: clamp(2rem, 2.2vw, 2.4rem); }
@media (max-width: 760px) {
  .others-list { grid-template-columns: 1fr; }
}

/* ---------- ボタン ---------- */
.btn--light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.bni-cta__btn { gap: 0; }

/* 下からふわっと（.reveal → .in）をやめたので、.in 待ちで隠れていた写真をはじめから出す */
/* 2026-11-09 写真は切り抜かず、元の写真の水色の壁だけを淡いグレーに塗り替えたもの（切り抜きは髪の間が粗く見えた）。
   枠の地は白にして、角の丸みに濃い緑がにじまないようにする */
.profile__photo, .has-motion .profile__photo { background: var(--paper); }
.has-motion .profile__photo img { opacity: 1; filter: none; transform: none; }

/* スマホでも説明用デモの字は12px以上 */
@media (max-width: 600px) {
  .termcard__body { font-size: 12.5px; }
  .loop-note p { font-size: 12px; }
}
.vision__price>span { white-space: nowrap; }
@media (max-width: 360px) {
  .vision__price { font-size: 14px; }
  .vision__price b { font-size: 22px; }
}

/* 前の並びの #refer #services などで共有されたリンクを、近い節へ着地させる */
.anchor-alias { display: block; height: 0; overflow: hidden; }

/* SNSボタン（アイコン用フォントの代わりにSVG。色は planhat.css の .sns--fb/ig/tt） */
.sns-ico { width: 1.8rem; height: 1.8rem; flex: none; fill: currentColor; }
.btn .sns-ico { margin: 0; }
.icon-btn.sns { color: #fff; }
.icon-btn .sns-ico { width: 2rem; height: 2rem; }
.sns-ico--line { fill: none; stroke: currentColor; stroke-width: 2; }
.sns-ico--line .dot { fill: currentColor; stroke: none; }
.booking__fb { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 2rem; }
.booking__fb p { margin: 0; font-size: 1.6rem; color: var(--ink-soft); }
@media (max-width: 600px) {
  .perk__h { font-size: 2.4rem; }
}

/* ---------- 3時間の流れ（時間割を全部見せる） ---------- */
.tt { padding: clamp(2.4rem, 3.6vw, 4.4rem); border-radius: 22px; background: #fff; }
.tt__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0 0 1.6rem; font-family: var(--font-jp); font-size: clamp(2rem, 2.2vw, 2.6rem); font-weight: 700; }
.tt__h span { font-size: 1.5rem; font-weight: 500; color: var(--ink-soft); }
.tt__list { list-style: none; margin: 0; padding: 0; }
.tt__row { display: grid; grid-template-columns: clamp(12rem, 16vw, 17rem) minmax(0, 1fr); gap: clamp(1.6rem, 3vw, 4rem); padding: 2.2rem 0; border-top: 1px solid var(--line); }
.tt__time { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 1.9vw, 2.2rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.tt__time span { display: block; margin-top: .4rem; font-family: var(--font-jp); font-size: 1.5rem; font-weight: 700; color: var(--terra); }
.tt__note { margin: 1.6rem 0 0; font-size: 1.5rem; color: var(--ink-soft); }
.tt__body h3 { margin: 0 0 .6rem; font-family: var(--font-jp); font-size: clamp(2rem, 2.2vw, 2.4rem); font-weight: 700; line-height: 1.4; }
.tt__body p { margin: 0; font-size: 1.6rem; line-height: 1.85; color: var(--ink-soft); }
.tt__row--prep .tt__time { font-family: var(--font-jp); color: var(--ink-soft); }
@media (max-width: 600px) {
  .tt__row { grid-template-columns: 1fr; gap: .6rem; }
}

/* ---------- 受ける前と受けたあと（#060 セグメントコントロール） ----------
   Motion Prompt #060 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#060
   灰色の台・角丸10を等分し、選択部分（角丸8・影 blur 6）が0.25秒 easeInOut（3乗）で滑る。選ばれた文字は白。
   下の書類は選択部分と同時に #140 ページめくりで切り替える。--e は js/course.js が入れる */
.cmp-wrap { margin-top: clamp(6rem, 8vw, 9rem); }
.cmp__lead { margin: 0 0 2rem; font-size: 1.6rem; color: var(--ink-soft); }
.cmp { --e: 0; padding: clamp(2rem, 3vw, 3.6rem); border-radius: 18px; background: #fff; box-shadow: 0 20px 40px -28px rgba(35,53,43,.45); }
.cmp__seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 40rem); padding: 4px; border-radius: 10px; background: #edf1e8; }
.cmp__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 8px; background: var(--espresso); box-shadow: 0 2px 6px rgba(35,53,43,.2); transform: translateX(calc(var(--e) * 100%)); }
.cmp__btn { position: relative; z-index: 1; min-height: 44px; padding: .8rem 1rem; border-radius: 8px; font-family: var(--font-jp); font-size: 1.6rem; font-weight: 700; color: #5d6b60; }
.cmp__btn[aria-pressed="true"] { color: #fff; }
.cmp__btn:focus-visible { outline: 3px solid #669ab1; outline-offset: 2px; }
/* #140 ページめくり（Motion Prompt #140 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#140）
   2枚のページを重ね、上のページを折り目より向こうだけ残す（clip-path）。めくれた裏面と折り目の影は上の SVG に js/course.js が描く */
.cmp__book { position: relative; display: grid; margin-top: clamp(2rem, 2.6vw, 2.8rem); }
.cmp__page { grid-area: 1 / 1; position: relative; z-index: 1; padding: clamp(1.6rem, 2.2vw, 2.4rem); border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cmp__page--1 { background: #f3f8ee; border-color: #d6e4cc; }
.cmp__page.is-top { z-index: 2; }
.cmp__curl { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }   /* 見本と同じく紙の枠の外には描かない */
.cmp__fold { fill: url(#cmp-fold-shade); }
.cmp__flap { stroke: rgba(255,255,255,.8); stroke-width: 2; filter: drop-shadow(4px 4px 7px rgba(0,0,0,.35)); }
.cmp__title { margin: 0 0 1.6rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1.6rem; font-family: var(--font-jp); font-size: clamp(1.8rem, 2vw, 2.4rem); font-weight: 700; }
.cmp__how { font-size: clamp(1.5rem, 1.6vw, 1.8rem); color: #b0552f; }
.cmp__page--1 .cmp__how { color: var(--terra); }
.cmp__docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.8rem, 1.2vw, 1.6rem); }
.cmp__docs li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; height: clamp(16rem, 18vw, 20rem); padding: 1.2rem; border: 1.5px dashed #c9d3c3; border-radius: 8px; background: #fbfcf8; overflow: hidden; }
.cmp__docs li.is-typing { border-style: solid; }
.cmp__docs li.is-done { border-style: solid; border-color: #cfe0c6; background: #fff; }
.cmp__fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--a) * 100%); background: repeating-linear-gradient(#eef5e8 0 14px, #e1ecd8 14px 18px); }
.cmp__docs b, .cmp__docs em { position: relative; }
.cmp__docs b { font-size: clamp(1.3rem, 1.3vw, 1.5rem); }
.cmp__docs em { font-style: normal; font-size: clamp(1.2rem, 1.2vw, 1.4rem); font-weight: 700; color: #8a4a2c; }
.cmp__docs li.is-done em { color: #2f5a35; }
.cmp-wrap .demo-disclaimer { margin-top: 1.4rem; font-size: 1.4rem; color: var(--ink-soft); }
@media (max-width: 760px) {
  .cmp__docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp__docs li { height: 13rem; padding: 1rem; }
  .cmp__seg { width: 100%; }
}

/* ---------- 押せるカード（#081 ホバーで浮き上がる） ----------
   Motion Prompt #081 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#081
   乗ったら0.3秒で上へ10px（easeOut 3乗）・影 ぼかし6→22px／下へ2→12px／濃さ0.08→0.22。離れたら同じ0.3秒で戻る */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .workcard, .bni-cta, .gtile { transform: translateY(0); box-shadow: 0 2px 6px rgba(35,53,43,.08); transition: transform .3s cubic-bezier(.33, 1, .68, 1), box-shadow .3s cubic-bezier(.33, 1, .68, 1), background .3s, border-color .3s; }
  .workcard:hover, .bni-cta:hover, .gtile:hover { transform: translateY(-10px); box-shadow: 0 12px 22px rgba(35,53,43,.22); }
}

/* ---------- デモ①② ----------
   JSが動かない・視差効果オフのときは2面を縦に並べるだけ。.cube-3d で同じ場所に重ねて入れ替え、.cube-live（PC）でピン留め
   （2026-11-08 までは Motion Prompt #139 のキューブで回していた） */
.cube-stage { margin-top: clamp(6rem, 8vw, 9rem); }
.cube-nav { display: none; flex-wrap: wrap; gap: .8rem; margin: 0 0 2rem; }
.cube-3d .cube-nav { display: flex; }
.cube-nav__btn { min-height: 44px; padding: .8rem 1.8rem; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-family: var(--font-jp); font-size: 1.5rem; font-weight: 700; color: var(--ink-soft); }
.cube-nav__btn[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: #fff; }
.cube-nav__btn:focus-visible { outline: 3px solid #669ab1; outline-offset: 3px; }
.cube__face { position: relative; padding: clamp(2rem, 3vw, 3.6rem); border-radius: 22px; background: #fff; }
.cube__face + .cube__face { margin-top: 2rem; }
.cube__face .case { margin-top: 0; }
.cube-3d .cube .course-demo-label { display: none; }
.cube__shade, .cube__floor { display: none; }
.cube-3d .cube { --w: 1000px; --h: 520px; --phi: 0; --sa: 0; --sb: .55; --fw: .95; position: relative; height: var(--h); }
/* 2026-11-08 本人「くるくる回るデザイン微妙」→ 回さずに同じ場所で入れ替える。
   --phi（0〜90）を進み具合に使い、①は左へ24pxずれながら消え、②は右から24pxずれながら出る。影と床は使わない */
.cube-3d .cube__box { position: absolute; inset: 0; }
.cube-3d .cube__face { position: absolute; inset: 0; margin: 0; overflow: hidden; box-shadow: 0 10px 30px rgba(35,53,43,.08); }
.cube-3d .cube__face--a { opacity: calc(1 - var(--phi) / 90); transform: translateX(calc(var(--phi) / 90 * -24px)); }
.cube-3d .cube__face--b { opacity: calc(var(--phi) / 90); transform: translateX(calc((90 - var(--phi)) / 90 * 24px)); }
.cube-live { height: 330vh; }   /* ①を見る・回す・②を見る ぶんだけ止める */
.cube-live .cube-pin { position: sticky; top: max(88px, calc(50vh - var(--ph, 600px) / 2 + 38px)); }

/* ---------- フッターの社名（#133 テキストマスク） ----------
   Motion Prompt #133 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#133 */
.footer__mask { display: none; }
.footer__word.is-mask { position: relative; }
.footer__word.is-mask .footer__word-text { position: absolute; left: 0; top: 0; visibility: hidden; }
.footer__word.is-mask .footer__mask { display: block; max-width: 100%; }
/* PCでは面の幅を絞って中央に置く */
@media (min-width: 900px) {
  .cube-3d .cube { max-width: 860px; margin: 0 auto; }
  .cube-3d .cube-nav { justify-content: center; }
}

/* X（旧Twitter）のボタン。ブランドの黒地に白 */
.icon-btn.sns--x { background: #000; border-color: #000; }
.icon-btn.sns--x .sns-ico { width: 1.8rem; height: 1.8rem; }