/* ============================================================
   トップページ（1画面＝1メッセージ）
   site.css のトークンを引き継ぎ、動きと全幅の絵で見せる
   ============================================================ */

:root {
  --void: #f5f4f1;   /* 明るい紙色。暗いのは映像のときだけ */
}

body.lp { background: var(--void); }

/* ---- ヘッダー：ヒーローの上では透過、スクロールで白に ---- */
.lp .site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
.lp .site-head, .lp .site-head a { color: #fff; }
.lp .site-head .logo span { mix-blend-mode: normal; }
.lp .site-head .cta { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.lp .site-head .cta:hover { background: #fff; color: var(--ink); }
.lp .site-head nav a:hover, .lp .site-head nav a[aria-current] { border-bottom-color: #fff; }
.lp.scrolled .site-head { background: rgba(255, 255, 255, .96); border-bottom-color: var(--hair); backdrop-filter: blur(8px); }
.lp.scrolled .site-head, .lp.scrolled .site-head a { color: var(--ink); }
.lp.scrolled .site-head .cta { background: var(--ink); border-color: var(--ink); color: #fff; }
.lp.scrolled .site-head .cta:hover { background: #fff; color: var(--ink); }
.lp.scrolled .site-head nav a:hover, .lp.scrolled .site-head nav a[aria-current] { border-bottom-color: var(--blue); }

/* ---- 全画面の面 ---- */
.screen {
  position: relative; min-height: 100svh; padding: 0;
  display: grid; align-items: center;
  overflow: clip; isolation: isolate;
}
.screen > .media { position: absolute; inset: 0; z-index: -2; }
.screen > .media img, .screen > .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.screen > .scrim { position: absolute; inset: 0; z-index: -1; }
.screen .inner { width: min(var(--wrap), 100%); margin: 0 auto; padding: clamp(96px, 14vh, 180px) var(--gutter); }

.scrim.dark { background: linear-gradient(180deg, rgba(8, 11, 13, .62) 0%, rgba(8, 11, 13, .22) 42%, rgba(8, 11, 13, .68) 100%); }
.scrim.soft { background: linear-gradient(90deg, rgba(8, 11, 13, .82) 0%, rgba(8, 11, 13, .42) 52%, rgba(8, 11, 13, .12) 100%); }

/* ---- ヒーロー ---- */
.hero .inner { display: grid; gap: clamp(20px, 3vh, 40px); justify-items: start; }
.hero .eyebrow { color: rgba(255, 255, 255, .78); font-size: clamp(10px, 1.1vw, 12px); font-weight: 700; letter-spacing: .34em; }
.statement {
  font-family: var(--serif); font-weight: 800; color: #fff;
  font-size: clamp(44px, 9.6vw, 150px); line-height: 1.08; letter-spacing: .04em; white-space: nowrap;
}
.statement em { font-style: normal; }
.hero .note-line { color: rgba(255, 255, 255, .82); font-size: clamp(14px, 1.5vw, 18px); line-height: 2.1; max-width: 32em; }
.scroll-cue { position: absolute; left: var(--gutter); bottom: clamp(20px, 5vh, 46px); z-index: 2; display: flex; align-items: center; gap: .9em; color: rgba(255, 255, 255, .7); font-size: 10px; font-weight: 700; letter-spacing: .28em; }
.scroll-cue::after { content: ""; width: 64px; height: 1px; background: currentColor; transform-origin: left; animation: cue 2.6s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleX(.25); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }

/* ---- 一文だけの面 ---- */
.oneline .inner { display: grid; justify-items: start; }
.oneline p { max-width: 12em; }
.oneline p {
  font-family: var(--serif); font-weight: 800; color: #fff;
  font-size: clamp(26px, 5.2vw, 76px); line-height: 1.55; letter-spacing: .05em;
}
.oneline.light p { color: var(--ink); }
.oneline .tail { margin-top: 1.6em; font-family: var(--sans); font-weight: 500; font-size: clamp(13px, 1.4vw, 16px); line-height: 2.2; letter-spacing: .04em; color: rgba(255, 255, 255, .75); max-width: 34em; }
.oneline.light .tail { color: var(--slate); }

/* ---- 章（数字＋見出し＋一行） ---- */
.chapter .inner { display: grid; gap: clamp(14px, 2.4vh, 26px); justify-items: start; }
.chapter h2 { max-width: 20em; word-break: keep-all; overflow-wrap: anywhere; } /* 折り返しは <wbr> の位置だけ */
.chapter .num { max-width: none; white-space: nowrap; }
.chapter p { max-width: 34em; }
.chapter .num { font-family: var(--serif); font-weight: 800; color: #fff; opacity: .55; font-size: clamp(12px, 1.2vw, 14px); letter-spacing: .3em; }
.chapter h2 { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(30px, 5.4vw, 74px); line-height: 1.35; letter-spacing: .05em; }
.chapter p { color: rgba(255, 255, 255, .82); font-size: clamp(13px, 1.4vw, 16px); line-height: 2.2; letter-spacing: .03em; }

/* ---- コンテンツ（映像・ゲーム） ---- */
.work { position: relative; background: var(--void); border-top: 1px solid var(--hair); }
.work .inner { width: min(var(--wrap), 100%); margin: 0 auto; padding: clamp(56px, 11vh, 132px) var(--gutter); display: grid; gap: clamp(22px, 4vw, 56px); grid-template-columns: 1fr 1fr; align-items: center; }
.work .shot { position: relative; overflow: hidden; border-radius: 2px; background: #05070a; aspect-ratio: 16 / 10; }
.work .shot img, .work .shot video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.work:hover .shot img { transform: scale(1.04); }
.work .kind { font-size: 10px; font-weight: 700; letter-spacing: .3em; color: var(--slate); }
.work h3 { margin-top: 1.1em; font-family: var(--serif); font-weight: 800; color: var(--ink); font-size: clamp(24px, 3.4vw, 46px); line-height: 1.4; letter-spacing: .05em; }
.work p { margin-top: 1em; color: var(--slate); font-size: clamp(13px, 1.35vw, 15px); line-height: 2.1; max-width: 34em; }
.work .act { margin-top: 1.8em; }
.work:nth-child(even) .shot { order: 2; }
@media (max-width: 860px) { .work .inner { grid-template-columns: 1fr; } .work:nth-child(even) .shot { order: 0; } }

/* ---- 暗い面に置くボタン ---- */
.btn-line {
  display: inline-flex; align-items: center; gap: .9em; cursor: pointer;
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .1em;
  padding: 1.05em 2.3em; border-radius: 2px; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.btn-line::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-line.solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-line.solid:hover { background: transparent; color: var(--ink); }

/* ---- プログラムの一覧（行で見せる） ---- */
.index-list { background: var(--void); padding: clamp(56px, 11vh, 132px) var(--gutter); }
.index-list .head { max-width: var(--wrap); margin: 0 auto clamp(24px, 5vh, 52px); }
.index-list .head span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .3em; color: var(--slate); margin-bottom: 1em; }
.index-list .head h2 { font-family: var(--serif); font-weight: 800; color: var(--ink); font-size: clamp(26px, 4vw, 52px); letter-spacing: .05em; }
.rows { max-width: var(--wrap); margin: 0 auto; border-top: 1px solid var(--ink); }
.row-link {
  position: relative; display: grid;
  grid-template-columns: clamp(96px, 14vw, 190px) minmax(0, 1fr) auto 2.2em;
  gap: clamp(14px, 2.4vw, 34px); align-items: center;
  padding: clamp(14px, 2.2vh, 22px) 0; border-bottom: 1px solid var(--hair);
  text-decoration: none; color: var(--ink);
  transition: padding-left .45s cubic-bezier(.16, 1, .3, 1), background .3s;
}
.row-link .thumb { display: block; overflow: hidden; border-radius: 2px; background: #e9e7e2; aspect-ratio: 16 / 10; }
.row-link .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.row-link .body { display: grid; gap: .28em; min-width: 0; }
.row-link .n { font-size: 11px; letter-spacing: .2em; color: var(--slate); }
.row-link .t { font-family: var(--serif); font-weight: 800; font-size: clamp(18px, 2.3vw, 30px); letter-spacing: .04em; line-height: 1.35; }
.row-link .note2 { font-size: clamp(12px, 1.25vw, 14px); line-height: 1.9; color: var(--slate); }
.row-link .k { font-size: 11px; letter-spacing: .12em; color: var(--slate); text-align: right; white-space: nowrap; }
.row-link .go { position: relative; }
.row-link .go::before, .row-link .go::after { content: ""; position: absolute; right: 0; top: 50%; background: var(--ink); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.row-link .go::before { width: 22px; height: 1px; }
.row-link .go::after { width: 9px; height: 1px; transform: rotate(38deg); transform-origin: right center; }
.row-link:hover { background: rgba(0, 0, 0, .02); padding-left: clamp(8px, 1.2vw, 18px); }
.row-link:hover .thumb img { transform: scale(1.06); }
.row-link:hover .go::before { transform: translateX(6px); }
.row-link:hover .go::after { transform: translateX(6px) rotate(38deg); }
@media (max-width: 760px) {
  .row-link { grid-template-columns: clamp(84px, 26vw, 120px) minmax(0, 1fr); }
  .row-link .k, .row-link .go { display: none; }
}
.hover-shot {
  position: fixed; z-index: 5; width: min(30vw, 380px); aspect-ratio: 4 / 3; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .3s, transform .5s cubic-bezier(.16, 1, .3, 1);
  border-radius: 2px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.hover-shot.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hover-shot img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .hover-shot { display: none; } .row-link { grid-template-columns: 3em 1fr; } .row-link .k { display: none; } }

/* ---- 締め ---- */
.closing-screen .inner { text-align: center; display: grid; justify-items: center; gap: clamp(18px, 3vh, 34px); }
.closing-screen h2 { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(30px, 6vw, 88px); line-height: 1.35; letter-spacing: .06em; }
.closing-screen p { color: rgba(255, 255, 255, .78); font-size: clamp(13px, 1.4vw, 16px); line-height: 2.2; }

/* ---- 小さな事実の帯（講師・実績） ---- */
.facts-band { background: #fff; color: var(--ink); padding: clamp(48px, 9vh, 104px) var(--gutter); border-top: 1px solid var(--hair); }
.facts-band .inner { max-width: var(--wrap); margin: 0 auto; display: grid; gap: clamp(22px, 4vw, 54px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.facts-band h3 { font-size: 11px; font-weight: 700; letter-spacing: .28em; color: var(--slate); margin-bottom: 1.4em; }
.facts-band li { list-style: none; font-size: 13px; line-height: 2.2; color: var(--slate); }
.facts-band .faces { display: flex; gap: 8px; margin-bottom: 1.2em; }
.facts-band .faces img { width: 54px; height: 54px; object-fit: cover; filter: grayscale(.25); border-radius: 2px; }
.facts-band a { color: var(--ink); }

/* ---- 出現アニメーション ---- */
.js .rise { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.js .rise.on { opacity: 1; transform: none; }
.rise.d1 { transition-delay: .12s; }
.rise.d2 { transition-delay: .24s; }
.rise.d3 { transition-delay: .36s; }
.js .zoom { transform: scale(1.1); transition: transform 2.4s cubic-bezier(.16, 1, .3, 1); }
.js .zoom.on { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .rise, .zoom { transition: none; opacity: 1; transform: none; }
  .scroll-cue::after { animation: none; }
}

/* ---- 下層ページの先頭 ---- */
.page-hero { min-height: 62svh; }
.page-hero .inner { display: grid; gap: clamp(14px, 2.4vh, 26px); justify-items: start; }
.page-hero .crumb { margin-bottom: .4em; }
.page-hero .crumb { color: rgba(255, 255, 255, .7); font-size: 12px; }
.page-hero .crumb a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.page-hero .crumb a:hover { color: #fff; }
.page-hero h1 { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(30px, 5.6vw, 76px); line-height: 1.3; letter-spacing: .05em; }
.page-hero p { color: rgba(255, 255, 255, .84); font-size: clamp(13px, 1.45vw, 17px); line-height: 2.1; max-width: 40em; }
body:not(.lp) .site-head { position: sticky; top: 0; z-index: 40; }


/* 暗い面の上のボタンは白抜きに */
.screen .btn-line { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.screen .btn-line:hover { background: #fff; color: var(--ink); }
.screen .btn-line.solid { background: #fff; color: var(--ink); border-color: #fff; }
.screen .btn-line.solid:hover { background: transparent; color: #fff; }
.work .shot { background: #e9e7e2; }

/* 明るい写真の上でも読めるように */
.screen .inner { text-shadow: 0 2px 18px rgba(8, 11, 13, .45); }

/* ============================================================
   下層ページの作り込み（動きと見せ場）
   ============================================================ */

/* 進行バー */
.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--ink); width: 0; z-index: 60; transition: width .1s linear; }

/* ページの入り */
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.js main { animation: page-in .7s cubic-bezier(.16, 1, .3, 1) both; }   /* body に animation を付けると position:fixed が壊れる */

/* 見出しのワイプ */
.js .wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1); }
.js .wipe.on { clip-path: inset(0 0 0 0); }

/* 章番号つきの区切り */
.sec-head .en { position: relative; }
.js .sec-head.rise .en::before { transition: width .8s cubic-bezier(.16, 1, .3, 1) .1s; }

/* コンテンツ映像の枠 */
.loop { margin: 0; position: relative; overflow: hidden; border-radius: 2px; background: #05070a; }
.loop video, .loop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.loop figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; padding: 1.4em 1.6em .9em;
  background: linear-gradient(180deg, rgba(8, 11, 13, 0), rgba(8, 11, 13, .78));
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .18em;
}
.loop.wide { aspect-ratio: 16 / 8; }
.loop.tall { aspect-ratio: 4 / 3; }
.loop .tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255, 255, 255, .92); color: var(--ink); border-radius: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; padding: .5em .9em;
}

/* 段階（研修の流れ）を線でつなぐ */
.steps { counter-reset: s; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.steps > li { list-style: none; display: grid; grid-template-columns: 5.5em 1fr; gap: clamp(12px, 2vw, 32px); padding: clamp(18px, 3vh, 34px) 0; border-bottom: 1px solid var(--hair); position: relative; }
.steps > li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 3vw, 38px);
  color: var(--hair); line-height: 1;
}
.steps h3 { font-family: var(--serif); font-weight: 800; font-size: clamp(17px, 2vw, 24px); letter-spacing: .04em; }
.steps p { margin-top: .6em; font-size: clamp(13px, 1.3vw, 15px); line-height: 2; color: var(--slate); max-width: 46em; }
.steps > li:hover::before { color: var(--ink); transition: color .4s; }

/* 成果（身につく力）を大きく */
.gains { display: grid; gap: clamp(14px, 2.2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gains li { list-style: none; background: #fff; border: 1px solid var(--hair); border-radius: 2px; padding: clamp(18px, 2.4vw, 28px); font-size: clamp(13px, 1.35vw, 15px); line-height: 2; color: #2c3740; position: relative; overflow: hidden; }
.gains li::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.gains li.on::after, .gains li:hover::after { transform: scaleY(1); }
.gains li:nth-child(even)::after { background: var(--green); }

/* ページ内の行き来 */
.subnav { position: sticky; top: 56px; z-index: 30; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair); }
.subnav .in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: clamp(14px, 2.4vw, 30px); overflow-x: auto; }
.subnav a { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-decoration: none; color: var(--slate); padding: 14px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover, .subnav a.current { color: var(--ink); border-bottom-color: var(--ink); }

/* 隣のプログラムへ */
.nextprev { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border-top: 1px solid var(--hair); }
.nextprev a { display: grid; gap: .5em; padding: clamp(22px, 3.4vh, 38px) 0; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--hair); transition: padding-left .4s cubic-bezier(.16, 1, .3, 1); }
.nextprev a:hover { padding-left: 14px; }
.nextprev .lab { font-size: 10px; font-weight: 700; letter-spacing: .24em; color: var(--slate); }
.nextprev .ttl { font-family: var(--serif); font-weight: 800; font-size: clamp(18px, 2.2vw, 26px); }

/* 写真の視差 */
.js .par { will-change: transform; }

/* ---- よくある質問：開閉を動きで ---- */
.qa details { position: relative; }
.qa summary { position: relative; padding-right: 2.2em; transition: color .25s; }
.qa summary::after { content: ""; position: absolute; right: .3em; top: .62em; width: 12px; height: 1px; background: var(--ink); }
.qa summary::marker { content: ""; }
.qa details:not([open]) summary::before { content: "Q"; }
.qa summary span.plus { position: absolute; right: .3em; top: .62em; width: 12px; height: 1px; background: var(--ink); transform: rotate(90deg); transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s; }
.qa details[open] summary span.plus { transform: rotate(0deg); opacity: .4; }
.qa details[open] summary { color: var(--blue-d); }   /* 水色の文字は明るい地で読みにくいので濃い青 */
@keyframes qa-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.qa details[open] p { animation: qa-open .45s cubic-bezier(.16, 1, .3, 1) both; }

/* ---- 事実の表：行に触れると線が伸びる ---- */
.facts div { position: relative; transition: background .3s; }
.facts div::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--ink); transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.facts div:hover { background: rgba(0, 0, 0, .015); }
.facts div:hover::after { width: 100%; }

/* ---- 問い合わせ ---- */
.form input, .form select, .form textarea { transition: border-color .25s, box-shadow .25s; }
.form input:focus, .form select:focus, .form textarea:focus { box-shadow: 0 0 0 3px rgba(0, 164, 227, .12); }

/* ---- リンクの下線を伸ばす ---- */
main a:not(.btn):not(.btn-line):not(.row-link):not(.cta):not(.logo) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .45s cubic-bezier(.16, 1, .3, 1);
  text-decoration: none;
}
main a:not(.btn):not(.btn-line):not(.row-link):not(.cta):not(.logo):hover { background-size: 100% 1px; }

/* ---- 章の見出しの下に細い線を引く ---- */
.sec-head h2 { display: inline-block; }

/* ---- カード・タイルの持ち上がり ---- */
.card, .tile { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s, border-color .3s; }
.card:hover, .tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(18, 24, 28, .08); }
.card > img, .tile img { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.card:hover > img, .tile:hover img { transform: scale(1.04); }
.card, .tile { overflow: hidden; }

/* 問い合わせの項目名と必須の並び */
.form label { grid-auto-flow: row; }
.form label > span:first-child, .form label { position: relative; }
.form .req { position: absolute; top: 0; right: 0; }
.form label { padding-right: 3.5em; }

/* ============================================================
   下層ページにも「見せ場」を：全画面の一文／貼りつく映像／大きな数字
   ============================================================ */

/* 全画面の一文（プログラムの核心を、絵の上に置く） */
.statement-screen { min-height: 86svh; }
.statement-screen .inner { display: grid; justify-items: start; gap: clamp(16px, 2.6vh, 30px); }
.statement-screen .lab { font-size: 10px; font-weight: 700; letter-spacing: .3em; color: rgba(255, 255, 255, .72); }
.statement-screen q {
  quotes: none; display: block; max-width: 18em;
  font-family: var(--serif); font-weight: 800; color: #fff;
  font-size: clamp(28px, 5vw, 66px); line-height: 1.5; letter-spacing: .05em;
}
.statement-screen .by { color: rgba(255, 255, 255, .72); font-size: clamp(12px, 1.3vw, 15px); line-height: 2; max-width: 34em; }

/* 貼りつく映像＋流れる本文 */
.pair { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.pair .stick { position: sticky; top: 110px; }
.pair .stick .loop { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .pair { grid-template-columns: 1fr; } .pair .stick { position: static; } }

/* 大きな数字（章の区切り） */
.bignum { font-family: var(--serif); font-weight: 800; font-size: clamp(56px, 13vw, 190px); line-height: .9; color: var(--hair); letter-spacing: .02em; }
.head-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 44px); align-items: end; margin-bottom: clamp(24px, 5vh, 52px); }
@media (max-width: 720px) { .head-row { grid-template-columns: 1fr; } .bignum { font-size: clamp(42px, 18vw, 90px); } }

/* 節の見出しをもっと大きく */
.sec-head h2 { font-size: clamp(28px, 4.4vw, 56px); }
.page-hero h1 { font-size: clamp(34px, 6.4vw, 92px); }

/* 濃い面の節（白抜き） */
section.ink { background: var(--ink); color: #fff; }
section.ink .sec-head h2, section.ink h3, section.ink .steps h3 { color: #fff; }
section.ink .sec-head .en, section.ink .sec-head p, section.ink p, section.ink .steps p { color: rgba(255, 255, 255, .76); }
section.ink .steps, section.ink .steps > li { border-color: rgba(255, 255, 255, .18); }
section.ink .steps > li::before { color: rgba(255, 255, 255, .3); }
section.ink .steps > li:hover::before { color: #fff; }
section.ink .gains li { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .86); }
section.ink .facts { border-color: rgba(255, 255, 255, .2); }
section.ink .facts div { border-color: rgba(255, 255, 255, .14); }
section.ink .facts dt { color: rgba(255, 255, 255, .6); }
section.ink .note { color: rgba(255, 255, 255, .55); }

/* ---- 設計の考え方：What と How を並べる ---- */
.matrix { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 900px) { .matrix { grid-template-columns: 1fr; } }
.matrix .lab { font-size: 10px; font-weight: 700; letter-spacing: .28em; color: var(--slate); margin-bottom: 1.4em; }
.ways { border-top: 1px solid var(--hair); }
.ways li { list-style: none; display: grid; gap: .35em; padding: clamp(14px, 2vh, 20px) 0; border-bottom: 1px solid var(--hair); }
.ways b { font-size: clamp(14px, 1.5vw, 17px); letter-spacing: .03em; }
.ways span { font-size: 13px; line-height: 1.95; color: var(--slate); }
.ways a { justify-self: start; font-size: 12px; font-weight: 700; color: var(--ink); }
.ways a::before { content: "→ "; color: var(--blue); }

/* 節の下の一行 */
.index-list .head .lead-under { margin-top: 1em; color: var(--slate); font-size: clamp(13px, 1.4vw, 16px); line-height: 2.05; max-width: 42em; }
.row-link.all { background: rgba(0, 0, 0, .02); }
.row-link.all .n { color: var(--blue-d); font-weight: 700; }

/* ---- 流れの行（最終）：番号／見出し／説明の3列 ---- */
.steps > li {
  position: relative; display: grid;
  grid-template-columns: 76px minmax(150px, 230px) minmax(0, 1fr);
  column-gap: clamp(16px, 2.4vw, 36px); row-gap: .4em;
  align-items: baseline; padding: clamp(20px, 3vh, 30px) 0;
}
.steps > li::before { position: static; grid-column: 1; grid-row: 1; }
.steps > li h3 { grid-column: 2; grid-row: 1; padding-left: 0; white-space: nowrap; }
.steps > li p { grid-column: 3; grid-row: 1; margin-top: 0; max-width: 42em; }
@media (max-width: 860px) {
  .steps > li { grid-template-columns: 60px minmax(0, 1fr); }
  .steps > li h3 { white-space: normal; }
  .steps > li p { grid-column: 2; grid-row: 2; }
}

/* ---- 3期のサイクル：紙の帳簿のように ---- */
.cycle {
  margin: clamp(26px, 4vh, 44px) 0 0; padding: clamp(26px, 4vw, 52px);
  background: linear-gradient(160deg, #12181c 0%, #102029 62%, #12181c 100%);
  color: #fff; position: relative; overflow: hidden;
}
.cycle::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
}
.cycle > * { position: relative; }
.cycle figcaption { display: grid; gap: .7em; margin-bottom: clamp(24px, 4vh, 40px); }
.cycle .lab { font-family: var(--latin); font-size: 11px; font-weight: 700; letter-spacing: .3em; color: #7fd4f5; }
.cycle figcaption p { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.55; letter-spacing: .04em; color: #fff; }

.cycle-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 38px); }
.cycle-rows > li { list-style: none; position: relative; padding-top: clamp(16px, 2.4vh, 22px); border-top: 2px solid rgba(255, 255, 255, .22); }
.cycle-rows > li.last { border-top-color: var(--blue); }
.cycle-rows > li::after {
  content: ""; position: absolute; top: -8px; right: calc(clamp(18px, 2.6vw, 38px) / -2 - 5px);
  width: 14px; height: 14px; border-right: 1px solid rgba(255, 255, 255, .5); border-top: 1px solid rgba(255, 255, 255, .5);
  transform: rotate(45deg);
}
.cycle-rows > li.last::after { display: none; }

.cycle .term { display: grid; gap: .3em; margin-bottom: clamp(14px, 2vh, 20px); }
.cycle .kanji { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.8vw, 34px); letter-spacing: .1em; }
.cycle .term .en { font-family: var(--latin); font-size: 10px; font-weight: 700; letter-spacing: .28em; color: rgba(255, 255, 255, .5); }

.cycle .acts { display: grid; }
.cycle .acts li {
  list-style: none; display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; gap: .2em .8em;
  padding: clamp(12px, 1.8vh, 16px) 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.cycle .acts .n { font-family: var(--latin); font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #8ec31f; }
.cycle .acts b { font-family: var(--serif); font-weight: 700; font-size: clamp(16px, 1.8vw, 20px); letter-spacing: .05em; }
.cycle .acts .d { grid-column: 2; font-size: clamp(12.5px, 1.3vw, 14px); line-height: 1.85; color: rgba(255, 255, 255, .7); }
.cycle-note { margin-top: clamp(20px, 3vh, 30px); font-size: clamp(13px, 1.4vw, 16px); color: rgba(255, 255, 255, .8); }
@media (max-width: 860px) {
  .cycle-rows { grid-template-columns: 1fr; }
  .cycle-rows > li::after { display: none; }
}

/* ---- カードをやめる：枠と影を外し、罫線と余白で見せる ---- */
.card {
  background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--ink);
  padding-top: clamp(16px, 2.2vh, 22px);
}
.card::before { display: none; }
.card > img { aspect-ratio: 16 / 10; }
.card .in { padding: clamp(14px, 2vh, 20px) 0 0; }
.card:hover { transform: none; box-shadow: none; }
.card:hover h3 { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

.tile { background: transparent; box-shadow: none; border: 0; }
.tile::before { display: none; }
.tile .in { padding: clamp(12px, 1.8vh, 16px) 0 0; }
.tile:hover { transform: none; box-shadow: none; }
.tile h4 { border-top: 0; }

.gains { counter-reset: g; gap: clamp(18px, 2.4vw, 32px); }
.gains li {
  background: transparent; box-shadow: none; padding: clamp(16px, 2.2vh, 22px) 0 0;
  border-top: 1px solid rgba(18, 24, 28, .25);
}
.gains li::before {
  counter-increment: g; content: counter(g, decimal-leading-zero);
  position: static; display: block; width: auto; height: auto; background: none;
  font-family: var(--latin); font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--blue-d); margin-bottom: .9em;
}
.js .gains li.on::before { width: auto; }
section.ink .gains li { background: transparent; box-shadow: none; border-top-color: rgba(255, 255, 255, .3); }
section.ink .gains li::before { color: #8ec31f; }

.how-grid article { background: transparent; box-shadow: none; padding: clamp(16px, 2.2vh, 22px) 0 0; border-top: 1px solid rgba(18, 24, 28, .22); }
.how-grid article::before { display: none; }
.lean article { background: transparent; box-shadow: none; padding: clamp(18px, 2.4vh, 24px) 0 0; border-top: 1px solid rgba(255, 255, 255, .3); }
.lean article::before { display: none; }
.vtx li { background: transparent; backdrop-filter: none; padding: clamp(14px, 2vh, 20px) 0 clamp(14px, 2vh, 20px) clamp(16px, 2vw, 22px); }

/* 濃い面の中の文字は必ず白で（本文色の指定に負けないように） */
.cycle, .cycle p, .cycle li, .cycle b, .cycle span { color: #fff; }
.cycle .acts .d, .cycle-note, .cycle .term .en { color: rgba(255, 255, 255, .72); }
.cycle .lab { color: #7fd4f5; }
.cycle .acts .n { color: #8ec31f; }
section.ink p, section.ink li, section.ink dd, section.ink figcaption { color: rgba(255, 255, 255, .88); }
section.ink .note { color: rgba(255, 255, 255, .6); }
.statement-screen q, .chapter h2, .oneline p, .closing-screen h2, .cta-band h2 { color: #fff; }
.statement-screen .by, .chapter p, .oneline .tail, .closing-screen p, .cta-band p, .hero .note-line, .page-hero p { color: rgba(255, 255, 255, .9); }

/* ---- 携帯でも道に迷わないように：メニューを出す ---- */
@media (max-width: 760px) {
  .site-head {
    display: grid; grid-template-columns: auto auto; grid-template-areas: "logo cta" "nav nav";
    row-gap: 6px; height: auto; padding-top: 10px; padding-bottom: 0; align-items: center;
  }
  .site-head .logo { grid-area: logo; }
  .site-head .cta { grid-area: cta; justify-self: end; padding: .7em 1.2em; font-size: 11px; }
  .site-head nav {
    grid-area: nav; display: flex; gap: 18px; overflow-x: auto; padding: 4px 0 8px;
    font-size: 12px; scrollbar-width: none;
  }
  .site-head nav::-webkit-scrollbar { display: none; }
  .site-head nav a { white-space: nowrap; }
  .lp .site-head { background: rgba(10, 14, 16, .55); backdrop-filter: blur(6px); }
  .lp.scrolled .site-head { background: rgba(255, 255, 255, .96); }
  body:not(.lp) .site-head { background: #fff; }
  .subnav { top: 92px; }
  .page-hero .inner { padding-block: clamp(96px, 16vh, 150px) clamp(36px, 8vh, 64px); }
  .page-hero .crumb { font-size: 11px; }
}
@media (max-width: 760px) {
  .page-hero h1 { font-size: clamp(30px, 9vw, 44px); }
  .statement-screen q { font-size: clamp(26px, 8.4vw, 40px); }
  .chapter h2, .oneline p, .closing-screen h2 { font-size: clamp(28px, 9vw, 46px); }
  .sec-head h2 { font-size: clamp(24px, 7.4vw, 36px); }
  .index-list .head h2 { font-size: clamp(24px, 7.4vw, 36px); }
  .cta-band h2 { font-size: clamp(24px, 7vw, 34px); }
}

/* ---- 「身につく力」：装飾の重複を掃除して、番号＋罫線だけに ---- */
.gains li, .gains li:nth-child(even) { background: transparent; box-shadow: none; border: 0; border-top: 1px solid rgba(18, 24, 28, .28); padding: clamp(16px, 2.2vh, 22px) 0 0; }
.gains li::before, .gains li:nth-child(even)::before, .js .gains li.on::before {
  position: static; display: block; width: auto; height: auto;
  background: none; background-image: none; transform: none; transition: none;
  counter-increment: g; content: counter(g, decimal-leading-zero);
  font-family: var(--latin); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--blue-d);
  margin-bottom: .9em;
}
.gains li::after { content: none; }
section.ink .gains li { border-top-color: rgba(255, 255, 255, .32); }
section.ink .gains li::before { color: #8ec31f; }
/* 透かしの番号とラベルが重ならないように */
.head-row .sec-head { padding-left: clamp(12px, 12vw, 200px); }
.head-row .bignum { top: -.06em; }
@media (max-width: 860px) { .head-row .sec-head { padding-left: 0; } .head-row .bignum { position: static; display: block; margin-bottom: .1em; opacity: .3; } }

/* ---- トップ：体験（籠城）の枠。デモはこの中で動く ---- */
.try-top .try-frame { position: relative; max-width: var(--wrap); margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: #141210; }
.try-top .try-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.try-top .try-over {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1.2em;
  padding: clamp(20px, 5vw, 64px);
  background: linear-gradient(0deg, rgba(8, 12, 16, .85) 0%, rgba(8, 12, 16, .35) 55%, rgba(8, 12, 16, 0) 100%);
}
.try-top .try-over .t { font-family: var(--serif); font-weight: 800; color: #fff; font-size: clamp(22px, 3.4vw, 44px); letter-spacing: .05em; }
.try-top .try-over .btn { background: #fff; color: var(--ink); }
.try-top .try-frame.playing .try-over { display: none; }
@media (max-width: 720px) { .try-top .try-frame { aspect-ratio: 3 / 4; } }
.try-top .try-frame.revealing { aspect-ratio: auto; }
@media (max-width: 720px) { .try-top .try-frame.playing:not(.revealing) { aspect-ratio: 9 / 16; } }

/* ---- 私たちについて：アート・サイエンス・クラフトを PC 1画面に（左＝図と3要素、右＝偏ると） ---- */
section.philo { padding-top: clamp(48px, 7vh, 80px); padding-bottom: clamp(48px, 7vh, 80px); }
.philo .sec-head p { max-width: 52em; }
.philo-body { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(20px, 3vh, 32px); }
.philo-body .philo-stage { display: grid; grid-template-columns: 1fr; gap: clamp(10px, 1.6vh, 16px); margin-top: 0; }
.philo-body .tri { max-width: 320px; justify-self: center; }
.philo-body .vtx { gap: 8px; }
.philo-body .vtx li { grid-template-columns: 5.2em 5.6em 1fr; align-items: baseline; gap: .8em; padding: .7em 0 .7em 1em; }
.philo-body .vtx b { font-size: clamp(17px, 1.7vw, 20px); }
.philo-body .vtx .d { font-size: 13.5px; line-height: 1.6; }
.philo-side .philo-note { margin-top: 0; font-size: clamp(17px, 1.9vw, 22px); line-height: 1.6; }
.philo-side .lean { grid-template-columns: 1fr; gap: 10px; margin-top: clamp(14px, 2vh, 20px); }
.philo-side .lean article { display: grid; grid-template-columns: 7.5em 1fr; column-gap: 1.2em; align-items: baseline; padding: 14px 18px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); border-top: 0; }
.philo-side .lean-t { grid-column: 1 / -1; }
.philo-side .lean-n { margin-top: .25em; font-size: clamp(19px, 1.9vw, 23px); }
.philo-side .lean-d { margin-top: .25em; font-size: 13.5px; line-height: 1.7; }
.philo-side .philo-close { margin-top: clamp(14px, 2vh, 22px); }
@media (max-width: 860px) {
  .philo-body { grid-template-columns: 1fr; }
  .philo-body .vtx li { grid-template-columns: 1fr; gap: .2em; }
  .philo-side .lean article { grid-template-columns: 1fr; }
}
.philo .sec-head h2 { font-size: clamp(26px, 3.2vw, 42px); }
.philo .sec-head p { margin-top: .6em; line-height: 1.9; }
.philo-body .tri { max-width: 250px; }
.philo-body .vtx li { grid-template-columns: 5.6em max-content 1fr; padding: .55em 0 .55em 1em; }
.philo-body .vtx b { white-space: nowrap; }
.philo-side .lean article { grid-template-columns: max-content 1fr; padding: 12px 18px; }
.philo-side .lean-n { white-space: nowrap; }
@media (max-width: 860px) { .philo-body .vtx li, .philo-side .lean article { grid-template-columns: 1fr; } .philo-side .lean-n { white-space: normal; } }
section.philo { padding-top: clamp(28px, 4vh, 44px); padding-bottom: clamp(28px, 4vh, 44px); }
.philo-body { margin-top: clamp(12px, 2vh, 20px); align-items: center; }
.philo-body .tri { max-width: 220px; }
.philo-body .vtx { gap: 4px; }
.philo-body .vtx li { padding: .4em 0 .4em 1em; }
.philo-side .lean { gap: 8px; margin-top: 12px; }
.philo-side .lean article { padding: 10px 16px; }
.philo-side .lean-n { margin-top: .1em; }
.philo-side .philo-close { margin-top: 12px; }

/* 画面には出さず、読み上げ用に残す */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 三角形が主役：大きく、3要素の説明は角に書き込む */
.philo-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.philo-body .tri { max-width: 560px; width: 100%; }
.philo-body .tri { max-width: 500px; }
.philo-body { margin-top: 8px; }
.philo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.philo-body .tri { max-width: 480px; }
.philo-side .lean { gap: 6px; }
.philo-side .lean article { padding: 8px 16px; }
.philo-side .philo-close { margin-top: 10px; }
/* スマホ：上の指定が 860px 以下の1列を上書きしていたので最後に戻す。図は幅いっぱい、角の小さい説明は図の下の一覧に */
@media (max-width: 860px) {
  .philo-body { grid-template-columns: 1fr; }
  .philo-body .tri { max-width: 480px; }
  .philo .tri .lbl text[font-size="26"] { font-size: 36px; }
  .philo .tri .lbl text[font-size="13"] { display: none; }
  .philo .tri text[font-size="12"] { font-size: 18px; }
  .philo-stage .vtx.sr-only { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}

/* ---- 研修プログラム：WHAT 4 と HOW 4 を1枚の格子に（左右の行の高さをそろえる） ---- */
.wh-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 64px); }
.wh-grid .block-lab { padding-bottom: .8em; border-bottom: 1px solid var(--ink); }
.wh-cell { padding: clamp(14px, 2vh, 18px) 0; border-bottom: 1px solid var(--hair); }
.wh-cell h4 { font-family: var(--sans); font-weight: 700; font-size: clamp(15px, 1.4vw, 17px); letter-spacing: .02em; }
.wh-cell .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: .6em; }
.wh-cell .tags li { font-size: 12px; line-height: 1.4; padding: .35em .75em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 164, 227, .25); }
.wh-cell .tags li.etc { background: transparent; box-shadow: none; color: var(--slate); }
.wh-cell.how p { margin-top: .6em; font-size: 13px; line-height: 1.8; color: var(--slate); }
@media (max-width: 860px) {
  .wh-grid { grid-template-columns: 1fr; }
  .wh-cell.what { order: 1; }
  .wh-grid .block-lab:nth-of-type(2) { order: 2; margin-top: 28px; }
  .wh-cell.how { order: 3; }
}
.wh-note { margin-top: clamp(16px, 2.4vh, 24px); font-size: 13px; color: var(--slate); }
.wh-cell.how p.why { margin-top: .5em; font-size: 13px; line-height: 1.8; color: var(--ink); }
.wh-cell.how p.why b { display: inline-block; margin-right: .6em; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--blue-d, #0b7fb4); }
/* 手法の良さ：見出しは付けず、細い線を添えた明朝の一文で */
.wh-cell.how p.why { margin-top: .7em; padding-left: .9em; border-left: 2px solid rgba(0, 164, 227, .45); font-family: var(--serif); font-weight: 600; font-size: 14px; line-height: 1.8; color: var(--ink); }
/* 別ブランドへのリンク（サイト準備中の間は押しても動かない） */
.brand-link { color: var(--blue-d, #0b7fb4); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.brand-link.soon { cursor: default; pointer-events: none; }
.soon-tag { display: inline-block; margin-left: .4em; padding: .05em .5em; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--slate); border: 1px solid var(--hair); border-radius: 999px; vertical-align: .15em; }
.philo .head-row { margin-bottom: 0; }
.philo .head-row .sec-head p { margin-top: .4em; }
.philo-body { margin-top: 0; }
/* 代表の写真：スクロールでついてこないように（本文と一緒に流す） */
.message .who { position: static; }
.cta-band .cta-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.cta-band .cta-row { justify-content: center; }
.cta-band .btn-line { color: #fff; border-color: rgba(255, 255, 255, .6); }
.cta-band .btn-line:hover { background: #fff; color: var(--ink); }
/* 帯のボタン2つ：上の余白は行に付け、大きさをそろえる */
.cta-band .cta-row { margin-top: clamp(20px, 3vh, 34px); align-items: stretch; }
.cta-band .cta-row > .btn, .cta-band .cta-row > .btn-line { margin: 0; padding: 18px 42px; font-size: 15px; line-height: 1.6; display: inline-flex; align-items: center; }

/* ---- お問い合わせ：フォームをやめてメールに ---- */
.mailbox { display: grid; gap: clamp(14px, 2.4vh, 22px); justify-items: start; }
.mail-addr { display: flex; align-items: center; gap: .6em; font-family: var(--latin), var(--sans); font-weight: 700; font-size: clamp(22px, 3vw, 36px); letter-spacing: .02em; color: var(--ink); word-break: break-all; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: stretch; }
.mail-actions > .btn, .mail-actions > .btn-line { margin: 0; padding: 18px 36px; font-size: 15px; line-height: 1.6; display: inline-flex; align-items: center; }
.mail-hint { margin-top: .6em; padding: 16px 20px; background: #fff; box-shadow: 0 0 0 1px var(--hair); max-width: 40em; }
.mail-hint .lab { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--blue-d, #0b7fb4); margin-bottom: .5em; }
.mail-hint ul { list-style: none; display: grid; gap: .3em; }
.mail-hint li { font-size: 14px; line-height: 1.8; padding-left: 1em; position: relative; }
.mail-hint li::before { content: "・"; position: absolute; left: 0; }
.mail-addr .kari-badge { display: inline-block; background: #9a5a00; color: #fff; border-radius: 3px; font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .2em; padding: .5em .55em .5em .75em; }

/* ---- 見出し：英字の小見出しを上に置く1列に（見出し・説明・中身の左端をそろえる） ---- */
.sec-head { grid-template-columns: minmax(0, 1fr); gap: .5em; }
.sec-head .en, .sec-head h2, .sec-head p { grid-column: 1; }
.sec-head .en { padding-top: 0; }
.sec-head p { margin-top: .4em; max-width: 44em; }
.head-row .sec-head { padding-left: 0; }
/* 身につく力：行の幅を本文の上限で狭めない（ページ幅いっぱいに） */
.prog .gains { max-width: none; }
.prog .gains li { max-width: none; }
body.prog .gains { max-width: none; }
/* お問い合わせ：左にアドレスとボタン、右に「書いていただけると助かること」（右半分を空けない） */
.mailbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 72px); align-items: start; justify-items: stretch; }
.mailbox .mail-addr, .mailbox .mail-actions, .mailbox .mail-copied { grid-column: 1; }
.mailbox .mail-hint { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none; }
@media (max-width: 860px) { .mailbox { grid-template-columns: 1fr; } .mailbox .mail-hint { grid-column: 1; grid-row: auto; } }

/* ---- 研修プログラム：設計の考え方（WHAT × HOW ＝ PROGRAM） ---- */
.wx { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(20px, 3vw, 52px); align-items: start; margin-top: clamp(28px, 4vh, 44px); }
.wx-lab { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--ink); padding-bottom: .9em; border-bottom: 2px solid var(--ink); }
.wx-lab span { margin-right: .9em; font-family: var(--latin); font-size: 11px; letter-spacing: .24em; color: var(--blue-d); }
.wx-col.how .wx-lab span { color: var(--green-d); }
.wx ol { list-style: none; margin: 0; padding: 0; counter-reset: wx; }
.wx li { counter-increment: wx; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: .4em; padding: clamp(16px, 2.4vh, 22px) 0; border-bottom: 1px solid var(--hair); }
.wx li::before { content: counter(wx, decimal-leading-zero); grid-row: span 2; padding-top: .55em; font-family: var(--latin); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--blue-d); }
.wx-col.how li::before { color: var(--green-d); }
.wx li b { font-family: var(--sans); font-weight: 700; font-size: clamp(18px, 1.7vw, 21px); letter-spacing: .03em; line-height: 1.5; }
.wx li span { margin-top: .3em; font-size: 13px; line-height: 1.75; color: var(--slate); }
.wx-op { align-self: center; margin: 0; font-family: var(--latin); font-weight: 200; font-size: clamp(44px, 5vw, 72px); line-height: 1; color: var(--blue); }
.wx-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1.4em; margin-top: clamp(28px, 4vh, 44px); padding: clamp(20px, 3vh, 30px) clamp(22px, 3vw, 40px); background: var(--ink); color: #fff; }
.wx-out .cap { font-family: var(--latin); font-size: 11px; font-weight: 700; letter-spacing: .24em; color: #7fd4f5; }
.wx-out b { font-family: var(--serif); font-weight: 800; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: .03em; font-feature-settings: "palt"; }
.wx-out .d { font-size: 13px; color: rgba(255, 255, 255, .75); }
@media (max-width: 760px) {
  .wx { grid-template-columns: 1fr; }
  .wx-op { justify-self: center; }
}

/* ---- 仕上げ（2026-10-03 全体の見直し） ---- */
/* 日本語を語の途中で折り返さない（対応ブラウザのみ）。短い中央寄せの文は行の長さをそろえる */
h1, h2, h3, h4, q, .row-link .t { word-break: auto-phrase; }   /* 語の区切りでの改行は見出しだけ。長い文に使うと行末がガタガタになる */
.cta-band h2, .cta-band p, .closing-screen h2, .closing-screen p, .statement-screen q, .page-hero p { text-wrap: balance; }
.lead-copy, .sec-head p, .tile p, .qa details p { text-wrap: pretty; }
/* プログラムの行：860px 以下の指定が、760px 以下のサムネイル幅（後ろに書いた 3em）を上書きして豆粒になっていた */
@media (max-width: 860px) {
  .row-link { grid-template-columns: clamp(88px, 24vw, 150px) minmax(0, 1fr); }
  .row-link .k, .row-link .go { display: none; }
}
/* 「実施について」などの表：スマホでは項目名を上に置き、本文を全幅に */
@media (max-width: 600px) {
  .facts div { grid-template-columns: 1fr; gap: .25em; }
}
/* 相談の帯のボタン：スマホで2つの幅をそろえる */
@media (max-width: 600px) {
  .cta-band .cta-row { flex-direction: column; align-items: center; }
  .cta-band .cta-row > a { width: min(100%, 300px); justify-content: center; text-align: center; }
}
/* 講師のタグ：青と緑が交互になる意味のない色分けをやめ、1色に */
.profile .tags li:nth-child(even) { border-color: rgba(0, 164, 227, .35); color: var(--blue-d); background: var(--blue-l); }

/* 見出しの明朝体を Noto Serif JP に（Zen Old Mincho は字詰め palt が効かず、カタカナが間延びしていた）。明朝を使う所すべてで字詰め */
.band .cap p,
.bignum,
.card h3,
.chapter .num,
.chapter h2,
.closing-screen h2,
.creed .no,
.creed h3,
.cta-band h2,
.cycle .acts b,
.cycle .kanji,
.cycle figcaption p,
.demo .battles li b,
.demo .box,
.demo .chapter,
.demo .choice .k,
.demo .closing,
.demo .cover .lead,
.demo .cover .title,
.demo .flash,
.demo .law .law-name,
.demo .ledger caption,
.demo .ledger-h,
.demo .reveal h2,
.demo .row .arrow,
.demo .row .old,
.demo .rules li b,
.demo .rules li::before,
.demo .rules-h,
.demo .rv-nav .rv-no,
.demo .scale .side,
.demo .stats,
.demo .titlecard .t,
.demo .verdict,
.demo .war-end,
.demo .war-h,
.demo .war-row .who,
.demo .war-row b,
.design-eq .box .ttl,
.design-eq .op,
.field-head .what,
.flag .body p b,
.flag .headline,
.index-list .head h2,
.lean-n,
.message .who .name,
.name,
.nextprev .ttl,
.numbered > li::before,
.numbered h3,
.oneline p,
.page-head h1,
.page-hero h1,
.person .name,
.philo-note,
.portrait .name,
.profile .name,
.prog .try-frame .try-over h3,
.pull p,
.pull::before,
.qa summary::before,
.quote p,
.row-link .t,
.sec-head h2,
.statement,
.statement-screen q,
.steps > li::before,
.steps h3,
.triad-def dt,
.try h3,
.try-top .try-over .t,
.ttl,
.vtx b,
.wh-cell.how p.why,
.what-grid h4,
.work h3,
.wx-out b,
h1,
h2,
h3 { font-feature-settings: "palt"; }

/* 進行バー：color.css の青→緑のグラデーションを、上の「黒・2px」が上書きしてヘッダーの上の黒い線になっていた */
.progress { height: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); }
/* ブラウザのスクロールバー：太い灰色の標準 → 細く、サイトの墨色を薄く */
html { scrollbar-width: thin; scrollbar-color: rgba(20, 32, 42, .38) transparent; }

/* ---- スマホの崩れ（2026-10-04 実機の指摘） ---- */
/* 全画面の写真：iPhone の Safari で height:100% が効かず、写真が元の縦横比のまま途中で切れていた → 写真そのものを枠に貼り付ける */
.screen > .media img, .screen > .media video, .page-hero .media img, .page-hero .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* お問い合わせのボタン：スマホでは幅をそろえて全幅に */
@media (max-width: 600px) {
  .mail-actions { flex-direction: column; }
  .mail-actions > .btn, .mail-actions > .btn-line { width: 100%; justify-content: center; }
}
/* 動画・図の枠：視差の拡大（1.06倍）が枠そのものに掛かり、本文の左右の線からはみ出していた → 枠は動かさない */
figure.loop.par { transform: none !important; }
/* 私たちについて：代表・講師の写真がスマホで幅220〜260pxのまま左に寄り、右が空いていた → 全幅にして、顔が入るよう横長に切る */
@media (max-width: 860px) {
  .message .who, .profile .shotwrap { max-width: none; width: 100%; }
  .message .who img, .profile .shotwrap img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 22%; }
}
/* スマホのヘッダー：1段にして「ロゴ ― お問い合わせ ― ≡」。メニューは ≡ を押すと下に開く */
.menu-btn { display: none; }
@media (max-width: 760px) {
  .site-head { grid-template-columns: 1fr auto auto; grid-template-areas: "logo cta btn"; column-gap: 10px; row-gap: 0; padding-top: 8px; padding-bottom: 8px; }
  .site-head .cta { grid-area: cta; }
  .menu-btn { grid-area: btn; display: grid; align-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 9px; border: 1px solid currentColor; border-radius: 2px; color: inherit; }
  .menu-btn span { display: block; height: 2px; background: currentColor; transition: transform .25s, opacity .25s; }
  .site-head.open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-head.open .menu-btn span:nth-child(2) { opacity: 0; }
  .site-head.open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-head nav {
    grid-column: 1 / -1; grid-row: 2; display: none; flex-direction: column; gap: 0; padding: 6px 0 4px; overflow: visible; font-size: 15px;
  }
  .site-head.open nav { display: flex; }
  .site-head nav a { padding: 14px 0; border-bottom: 1px solid var(--hair) !important; }
  .site-head nav a:last-child { border-bottom: 0 !important; }
  .site-head nav a[aria-current] { color: var(--blue-d); font-weight: 700; }
  .lp .site-head.open { background: rgba(10, 14, 16, .94); }
  .lp .site-head.open nav a { border-bottom-color: rgba(255, 255, 255, .18) !important; }
  .lp.scrolled .site-head.open { background: #fff; }
  .lp.scrolled .site-head.open nav a { border-bottom-color: var(--hair) !important; }
  .subnav { top: 56px; }
}

/* ---- スマホの崩れ（2026-10-04 全ページ見直し） ---- */
@media (max-width: 760px) {
  /* トップの講師の顔5枚：左に寄って右が空いていた → 全幅に5等分 */
  .facts-band .faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .facts-band .faces img { width: 100%; height: auto; aspect-ratio: 1; }
  /* BTD・タカハシの上部のイラスト：見せたい部分が見出しの下に隠れる → 右側を見せる */
  .page-hero .media img[src*="hero-btd"], .page-hero .media img[src*="hero-takahashi"] { object-position: 78% 50%; }
  /* 「中身は、一切ゆるめない。」などの段落：中央寄せの短い文以外は、行をそろえて読みやすく */
  .lead-copy, .sec-head p { text-wrap: wrap; }
}