@charset "utf-8";
/* ナイアガラ開発 — Wired editorial system
   出典：DESIGN-wired.md（鎌田さん指定）
   白地・純黒・ヘアライン・角ゼロ・写真主導のマガジングリッド。装飾色を持たない。 */

/* ---------- tokens ---------- */
:root{
  --ink:#000;
  --ink-soft:#1a1a1a;
  --body:#757575;
  --hairline:#e0e0e0;
  --canvas:#fff;
  --canvas-soft:#f5f5f5;
  /* ===== ブランドカラー（名刺の地の色） =====
     --brand      #05a5a8 … 名刺そのものの色。罫・下線・見出しの印など「面より線」で使う
     --brand-deep #046f72 … 本文が乗る面（ヘッダー・フッター・パネル・主ボタン）に使う。
                            白文字の可読性を確保するため名刺より一段深い（白との対比 6:1）
     --c4g        #4a378c … コード・フォー・グンマの紫紺。C4G関連の面でのみ使う */
  --brand:#05a5a8;
  --brand-deep:#046f72;
  --c4g:#4a378c;
  --link:#046f72;
  --accent:var(--brand);
  --accent-dk:var(--brand-deep);

  --f-display:"Playfair Display","Noto Serif JP",Georgia,"Times New Roman",serif;
  --f-serif:"Lora","Noto Serif JP",Georgia,serif;
  --f-sans:"Inter","Noto Sans JP","Helvetica Neue",Helvetica,Arial,sans-serif;

  --xxs:2px; --xs:4px; --sm:8px; --md:12px; --lg:16px; --xl:20px;
  --2xl:24px; --3xl:32px; --4xl:48px; --5xl:72px;

  --pad:clamp(20px,5vw,40px);
  --maxw:1400px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--f-serif);font-size:17px;font-weight:400;line-height:1.75;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

/* browser surfaces */
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--canvas-soft)}
::-webkit-scrollbar-thumb{background:var(--brand-deep)}
html{scrollbar-color:var(--brand-deep) var(--canvas-soft)}

a{color:inherit}
.honbun a,.footer a,.byline a{text-underline-offset:.22em;text-decoration-thickness:1px}
.honbun a{color:var(--link)}

.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:8px;z-index:99;background:var(--ink);color:var(--canvas);padding:12px 20px;font-family:var(--f-sans);font-weight:700}
.rule{border:0;border-top:1px solid var(--hairline);margin:0}
.rule--ink{border-top:2px solid var(--ink)}

/* ---------- type ---------- */
.d-hero{font-family:var(--f-display);font-size:clamp(34px,6.2vw,64px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.d-lg{font-family:var(--f-display);font-size:clamp(28px,4.2vw,48px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
.d-md{font-family:var(--f-display);font-size:clamp(24px,2.6vw,32px);line-height:1.16;letter-spacing:-.008em;text-wrap:balance}
.d-sm{font-family:var(--f-display);font-size:clamp(20px,2vw,26px);line-height:1.22}
.d-xs{font-family:var(--f-sans);font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.014em}
.lead{font-family:var(--f-serif);font-size:19px;line-height:1.75;letter-spacing:.006em;text-wrap:pretty}
.serif{font-family:var(--f-serif);font-size:17px;line-height:1.8}
.sans{font-family:var(--f-sans);font-size:17px;line-height:1.5}
.sm{font-family:var(--f-sans);font-size:14px;line-height:1.5;letter-spacing:.03em}
.sm-b{font-family:var(--f-sans);font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.03em}
.cap{font-family:var(--f-sans);font-size:12px;line-height:1.5;color:var(--body)}
.eyebrow{
  font-family:var(--f-sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  display:block;margin-bottom:var(--md);
}
.eyebrow::before{
  content:"";display:block;width:28px;height:3px;
  background:var(--accent);margin-bottom:var(--sm);
}
.panel--ink .eyebrow{color:#fff}
.muted{color:var(--body)}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:#fff;border-bottom:4px solid var(--brand)}
.masthead__band{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-block:var(--lg);gap:var(--md);
}
.wordmark{
  grid-column:2;justify-self:center;text-align:center;
  font-family:var(--f-display);font-size:clamp(22px,3.4vw,34px);line-height:1;
  letter-spacing:.01em;text-decoration:none;white-space:nowrap;
}
.masthead__right{grid-column:3;justify-self:end;display:flex;gap:var(--sm);align-items:center}
.masthead__left{grid-column:1;justify-self:start;color:#fff;font-family:var(--f-sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:47.99em){
  .masthead__band{grid-template-columns:1fr auto;padding-block:var(--md)}
  .wordmark{grid-column:1;justify-self:start;text-align:left}
  .masthead__left{display:none}
  .masthead__right{grid-column:2}
}

.nav{border-bottom:2px solid var(--ink);background:var(--canvas)}
.nav ul{display:flex;flex-wrap:wrap;column-gap:var(--xl);row-gap:0}
.nav ul::-webkit-scrollbar{display:none}
.nav a{
  display:block;padding:var(--md) 0;
  font-family:var(--f-sans);font-size:14px;font-weight:700;letter-spacing:.04em;
  text-decoration:none;white-space:nowrap;color:var(--ink);
}
.nav a:hover{text-decoration:underline;text-underline-offset:.3em}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.3em;text-decoration-color:var(--accent)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sm);
  padding:var(--md) var(--xl);min-height:44px;border:1px solid var(--ink);
  font-family:var(--f-sans);font-size:16px;font-weight:700;letter-spacing:.3px;line-height:1.25;
  text-decoration:none;border-radius:0;cursor:pointer;
  transition:background .16s linear,color .16s linear;
}
.btn--primary{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.btn--primary:hover{background:#fff;color:var(--brand-deep)}
/* ティールの地の上に置く主ボタンは白抜きにする */
.masthead .btn--primary{background:#fff;color:var(--brand-deep);border-color:#fff}
.masthead .btn--primary:hover{background:transparent;color:#fff;border-color:#fff}
.btn--outline{background:var(--canvas);color:var(--ink)}
.btn--outline:hover{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.btn--sm{padding:var(--sm) var(--lg);min-height:38px;font-size:14px}
.btn--inv{background:var(--canvas);color:var(--ink);border-color:var(--canvas)}
.btn--inv:hover{background:transparent;color:var(--canvas)}

/* ---------- sections ---------- */
.band{padding-block:var(--4xl)}
.band--tight{padding-block:var(--3xl)}
.band+.band{border-top:1px solid var(--hairline)}
.band__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lg);flex-wrap:wrap;margin-bottom:var(--2xl)}
.band__head h2{font-family:var(--f-display)}

/* hero */
.hero{display:grid;gap:var(--3xl)}
@media (min-width:64em){.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:var(--4xl)}}
.hero__body{max-width:34em}
.hero .lead{margin-top:var(--xl)}
.hero__cta{margin-top:var(--2xl);display:flex;gap:var(--md);flex-wrap:wrap}

/* figures */
figure{margin:0}
.fig figcaption{margin-top:var(--sm);font-family:var(--f-sans);font-size:12px;line-height:1.5;color:var(--body)}
.ratio{position:relative;background:var(--canvas-soft);overflow:hidden}
.ratio>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-16x9{aspect-ratio:16/9}
.r-4x3{aspect-ratio:4/3}
.r-1x1{aspect-ratio:1/1}
.r-3x4{aspect-ratio:3/4}

/* card grids */
.grid{display:grid;gap:var(--3xl)}
.grid--2{grid-template-columns:1fr}
@media (min-width:48em){.grid--2{grid-template-columns:repeat(2,1fr)}}
.grid--3{grid-template-columns:1fr}
@media (min-width:48em){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64em){.grid--3{grid-template-columns:repeat(3,1fr)}}
.grid--4{grid-template-columns:repeat(2,1fr);gap:var(--2xl)}
@media (min-width:64em){.grid--4{grid-template-columns:repeat(4,1fr)}}

.card>*+*{margin-top:var(--md)}
.card a{text-decoration:none}
.card a:hover{text-decoration:underline;text-underline-offset:.22em}

/* story rows */
.rows{border-top:2px solid var(--ink)}
.rows>li{border-bottom:1px solid var(--hairline)}
.rows__a{
  display:grid;grid-template-columns:1fr;gap:var(--lg);
  padding-block:var(--2xl);text-decoration:none;
}
@media (min-width:48em){.rows__a{grid-template-columns:200px minmax(0,1fr);gap:var(--2xl);align-items:start}}
.rows__a:hover .rows__h{text-decoration:underline;text-underline-offset:.2em}
.rows__meta{display:flex;gap:var(--md);flex-wrap:wrap;margin-bottom:var(--sm)}
.chip{
  font-family:var(--f-sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--ink);padding:2px 8px;
}
.chip--soft{border-color:var(--hairline);color:var(--body);font-weight:400}
.chip--accent{border-color:var(--accent-dk);color:var(--accent-dk)}
.rows__h{font-family:var(--f-display);font-size:clamp(21px,2.3vw,30px);line-height:1.2;margin-bottom:var(--md);text-wrap:balance}
.rows__p{max-width:44em}

/* byline / meta line */
.byline{font-family:var(--f-serif);font-size:13px;font-weight:700;line-height:2.2;letter-spacing:.108px;color:var(--body)}

/* definition strip */
.strip{border-top:4px solid var(--accent);border-bottom:2px solid var(--ink);display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:64em){.strip{grid-template-columns:repeat(4,1fr)}}
.strip>div{padding:var(--2xl) var(--lg);border-left:1px solid var(--hairline)}
.strip>div:nth-child(2n+1){border-left:0}
@media (min-width:64em){.strip>div:nth-child(2n+1){border-left:1px solid var(--hairline)}.strip>div:first-child{border-left:0}}
.strip dt{font-family:var(--f-sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-bottom:var(--sm)}
.strip dd{margin:0;font-family:var(--f-display);font-size:clamp(20px,2.2vw,28px);line-height:1.25}

/* pull / quote block */
.pull{border-top:4px solid var(--accent);padding-top:var(--xl);max-width:34em}
.pull p{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);line-height:1.3}

/* soft panel */
.panel{background:var(--canvas-soft);padding:var(--3xl)}
.panel--ink{background:var(--ink);color:#fff;border-top:4px solid var(--brand)}
.panel--ink .muted{color:#bdbdbd}

/* honbun (long form) */
.honbun{max-width:38em}
.honbun>*+*{margin-top:var(--xl)}
.honbun h3{font-family:var(--f-display);font-size:clamp(21px,2vw,26px);line-height:1.25;margin-top:var(--4xl)}
.honbun ul{list-style:disc;padding-left:1.25em}
.honbun li+li{margin-top:var(--sm)}

/* table */
.tbl{width:100%;border-collapse:collapse;font-family:var(--f-sans);font-size:15px}
.tbl th,.tbl td{border-bottom:1px solid var(--hairline);padding:var(--lg) var(--md);text-align:left;vertical-align:top;line-height:1.7}
.tbl thead th{background:var(--canvas-soft);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.tbl tbody th{font-weight:700;white-space:nowrap;width:9em}
.scroll-x{overflow-x:auto}

/* form */
.form{max-width:38em}
.field+.field{margin-top:var(--2xl)}
.field label{display:block;font-family:var(--f-sans);font-size:14px;font-weight:700;letter-spacing:.03em;margin-bottom:var(--sm)}
.field .hint{font-weight:400;color:var(--body);margin-left:var(--sm)}
.req{font-weight:700;color:var(--accent-dk);border-bottom:2px solid var(--accent);margin-left:var(--sm)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-sans);font-size:17px;line-height:1.5;
  padding:var(--md) var(--lg);border:1px solid var(--ink);border-radius:0;
  background:var(--canvas);color:var(--ink);min-height:48px;
}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--body)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.field input:disabled,.field textarea:disabled{background:var(--canvas-soft);color:var(--body)}

/* footer */
.footer{background:var(--ink);color:#fff;padding-block:var(--5xl);margin-top:var(--4xl);border-top:4px solid var(--brand)}
.footer a{color:var(--canvas);text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:.24em}
.footer__grid{display:grid;gap:var(--3xl)}
@media (min-width:48em){.footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer__wm{font-family:var(--f-display);font-size:30px;line-height:1;margin-bottom:var(--lg)}
.footer h2{font-family:var(--f-sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--lg);color:#bdbdbd}
.footer li+li{margin-top:var(--sm)}
.footer address{font-style:normal;font-family:var(--f-sans);font-size:14px;line-height:1.9;color:#e6e6e6}
.footer__base{
  border-top:1px solid #333;margin-top:var(--4xl);padding-top:var(--xl);
  display:flex;justify-content:space-between;gap:var(--lg);flex-wrap:wrap;
  font-family:var(--f-sans);font-size:12px;color:#bdbdbd;letter-spacing:.06em;
}

/* one authored motion: the cover story settles in once */
@media (prefers-reduced-motion:no-preference){
  .settle{animation:settle .7s cubic-bezier(.16,1,.3,1) both}
  .settle-2{animation-delay:.07s}
  @keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- SNS ---------- */
.sns{display:flex;gap:var(--md);align-items:center;flex-wrap:wrap}
.sns a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid currentColor;
  transition:background .16s linear,color .16s linear,border-color .16s linear;
}
.sns a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.sns svg{width:19px;height:19px;fill:currentColor}
.sns__note{font-family:var(--f-sans);font-size:12px;color:#bdbdbd;letter-spacing:.04em}

/* ---------- フェロー ---------- */
.fellows{display:grid;gap:var(--2xl);grid-template-columns:repeat(2,1fr)}
@media (min-width:48em){.fellows{grid-template-columns:repeat(3,1fr);gap:var(--3xl)}}
.fellow figure{margin-bottom:var(--lg)}
.fellow h3{font-family:var(--f-sans);font-size:16px;font-weight:700;letter-spacing:.02em;margin-bottom:var(--xs)}
.fellow .role{
  font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dk);margin-bottom:var(--sm);display:block;
}
.fellow p{font-family:var(--f-serif);font-size:15px;line-height:1.75}


/* ---------- FDE（ヒーロー内の要点） ---------- */
.fde{
  margin-top:var(--2xl);padding:var(--xl) var(--2xl);
  border:1px solid var(--hairline);border-top:4px solid var(--accent);
  background:var(--canvas-soft);max-width:34em;
}
.fde__t{
  font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-dk);margin-bottom:var(--sm);
}
.fde__b{font-family:var(--f-serif);font-size:16px;line-height:1.8}

/* ---------- 写真枠を外した状態のレイアウト調整（2026-08-27） ----------
   図版を伴わない段組みは、残った1カラムを全幅に戻す。
   写真を入れ直せば :has() が外れて自動的に元の2段組みに戻る。            */
.hero:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.hero:has(> :only-child) .hero__body{max-width:42em}
.grid--2:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.rows__a:has(> :only-child){grid-template-columns:minmax(0,1fr)}

/* ---------- 書影つきの本カード（2026-08-27） ---------- */
.books{align-items:start}
.book__cover{display:block;border:1px solid var(--hairline);background:var(--canvas-soft);line-height:0}
.book__cover img{display:block;width:100%;height:auto}
a.book__cover{transition:border-color .16s linear}
a.book__cover:hover{border-color:var(--ink)}
.book .chip{margin-top:var(--md)}
.book__buy{margin-top:var(--md)}

/* 代表の顔写真：原寸357pxを超えて拡大しない */
.portrait{max-width:340px}
.book__by{font-family:var(--f-sans);font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--accent-dk);margin-top:var(--xs)}

/* ---------- 黒い面（ヘッダー・フッター・CTA）の上での調整 ---------- */
.masthead .wordmark{color:#fff}
/* キーカラーは「点」で使う：見出し・罫・ボタン・現在地の下線だけ */
.footer h2{color:var(--brand)}
.footer a{color:#fff}
.footer a:hover{color:var(--brand)}
.footer .sns a:hover{background:var(--brand);color:#000;border-color:var(--brand)}
.footer__base{color:#8a8a8a}
.footer address{color:#e0e0e0}
.footer address a{color:#fff}
.footer__wm img{opacity:1}

/* ヘッダーの相談ボタン＝黒地にキーカラーを一点だけ置く */
.masthead .btn--primary{background:var(--brand);color:#000;border-color:var(--brand)}
.masthead .btn--primary:hover{background:transparent;color:var(--brand)}

/* CTAパネルの中のボタン */
.panel--ink .btn--inv{background:var(--brand);color:#000;border-color:var(--brand)}
.panel--ink .btn--inv:hover{background:transparent;color:var(--brand);border-color:var(--brand)}

/* コード・フォー・グンマ関連の面では、団体の紫紺を差し色にする */
.c4g-mark .eyebrow::before{background:var(--c4g)}
.c4g-mark .pull{border-top-color:var(--c4g)}
.c4g-mark .chip--accent{border-color:var(--c4g);color:var(--c4g)}

/* 名刺の地の色は明るいので、上に乗せる文字は大きい見出しと白抜きボタンに限る */
.masthead .btn--primary{background:#fff;color:var(--brand-deep);border-color:#fff}
.masthead .btn--primary:hover{background:var(--brand-deep);color:#fff;border-color:#fff}

/* 本文中のリンクは、色と下線で「押せる」と分かるようにする */
p.serif a:not(.btn),p.lead a:not(.btn),p.cap a:not(.btn),.tbl a:not(.btn),address a{
  color:var(--brand-deep);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.22em;
}
p.serif a:not(.btn):hover,p.lead a:not(.btn):hover,p.cap a:not(.btn):hover{
  background:var(--brand);color:#fff;text-decoration-color:transparent;
}
/* ティールの地の上では白のまま */
.footer address a,.panel--ink a:not(.btn){color:#fff}

/* ---------- ロゴ（2026-08-27） ---------- */
.wordmark img{height:clamp(26px,3.6vw,42px);width:auto;display:block}
.footer__wm img{height:34px;width:auto;display:block}

/* ---------- ナビを追従させる ---------- */
.nav{position:sticky;top:0;z-index:50}
.nav ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav ul::-webkit-scrollbar{display:none}
@media (min-width:80em){.nav ul{flex-wrap:wrap;overflow-x:visible}}
.nav--stuck{box-shadow:0 6px 20px rgba(0,0,0,.13)}

/* ---------- よくある質問（折りたたみ・2026-08-28） ---------- */
.qa{max-width:42em;border-top:1px solid var(--hairline)}
.qa details{border-bottom:1px solid var(--hairline)}
.qa summary{
  list-style:none;cursor:pointer;padding:var(--xl) 2.2em var(--xl) 0;position:relative;
  font-family:var(--f-display);font-size:clamp(17px,1.7vw,21px);line-height:1.5;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:.4em;top:50%;width:11px;height:11px;
  border-right:2px solid var(--brand-deep);border-bottom:2px solid var(--brand-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.qa details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.qa summary:hover{color:var(--brand-deep)}
.qa summary:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}
.qa details>p{
  font-family:var(--f-serif);font-size:16px;line-height:1.95;
  padding:0 0 var(--2xl);margin:0;max-width:38em;
}

/* ---------- カバー（ファーストビュー・2026-09-07） ----------
   黒い面に社名を大きく置いて、まず名前で当てる。
   診断アプリは同じ面の下に一行分だけ置き、挨拶がわりに触ってもらう。 */
.cover{
  background:var(--ink);color:#fff;
  border-bottom:4px solid var(--brand);
  padding-block:clamp(var(--3xl),7vw,var(--5xl));
  position:relative;overflow:hidden;
}
/* 背景に細い罫を敷く。紙面の版面のような手触りを出すため */
/* 背景動画。文字を読ませるため、暗幕と縦罫を上に重ねる */
.cover__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;
  /* 素材の青をブランドのティール寄りに寄せ、彩度を落として文字を邪魔させない */
  filter:saturate(.55) hue-rotate(-24deg) brightness(.62) blur(1px);
}
.cover::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 46%,rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 96px);
}
/* 動きを好まない設定の人には、静止画だけを見せる */
@media (prefers-reduced-motion:reduce){
  .cover__video{display:none}
  .cover{background-image:url("/assets/img/cover-poster.jpg");background-size:cover;background-position:center}
}
.cover>.shell{position:relative;z-index:2}

.cover__eyebrow{
  font-family:var(--f-sans);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:var(--lg);
}
.cover__eyebrow::before{
  content:"";display:block;width:28px;height:3px;background:var(--brand);margin-bottom:var(--md);
}
/* 社名。ここが「まず目に入る」ところ */
.cover__name{
  font-family:var(--f-display);
  font-size:clamp(40px,9.5vw,124px);line-height:1.02;letter-spacing:.02em;
  margin:0;text-wrap:nowrap;
}
.cover__h{
  font-family:var(--f-display);
  font-size:clamp(21px,3.2vw,42px);line-height:1.35;
  margin-top:clamp(var(--lg),2vw,var(--2xl));max-width:16em;
}
.cover__h::before{
  content:"";display:block;width:64px;height:2px;background:var(--brand);margin-bottom:var(--xl);
}
.cover__lead{
  font-family:var(--f-serif);font-size:clamp(15px,1.35vw,18px);line-height:1.95;
  color:#d6d6d6;margin-top:var(--xl);max-width:36em;
}
.cover__cta{margin-top:var(--2xl);display:flex;gap:var(--md);flex-wrap:wrap}
.btn--ghost{background:transparent;color:#fff;border-color:#fff}
.btn--ghost:hover{background:#fff;color:var(--ink)}
.cover .btn--primary{background:var(--brand);color:#000;border-color:var(--brand)}
.cover .btn--primary:hover{background:#fff;color:#000;border-color:#fff}

@media (prefers-reduced-motion:no-preference){
  .cover__name{animation:coverin .8s cubic-bezier(.16,1,.3,1) both}
  .cover__h{animation:coverin .8s cubic-bezier(.16,1,.3,1) .08s both}
  .cover__lead,.cover__cta{animation:coverin .8s cubic-bezier(.16,1,.3,1) .16s both}
  @keyframes coverin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  /* キーカラーの線が一度だけ横に走る */
  .cover::after{
    content:"";position:absolute;left:0;top:0;height:3px;width:100%;
    background:linear-gradient(90deg,transparent,var(--brand),transparent);
    animation:coversweep 2.6s cubic-bezier(.4,0,.2,1) .3s both;
  }
  @keyframes coversweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
}

/* 診断アプリ ― 挨拶がわりの一行 */
.tryout{
  margin-top:clamp(var(--3xl),5vw,var(--4xl));
  border:1px solid #3a3a3a;border-left:4px solid var(--brand);
  padding:var(--2xl);display:grid;gap:var(--xl);
}
@media (min-width:64em){.tryout{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:var(--3xl)}}
.tryout__tag{
  font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:var(--sm);
}
.tryout__t{font-family:var(--f-serif);font-size:17px;line-height:1.8}
.tryout__t strong{color:#fff}
.tryout__n{font-family:var(--f-sans);font-size:12.5px;line-height:1.8;color:#9a9a9a;margin-top:var(--sm)}
.tryout__f{display:grid;gap:var(--md)}
@media (min-width:30em){.tryout__f{grid-template-columns:minmax(0,1fr) auto}}
.tryout__f input{
  width:100%;padding:13px var(--lg);min-height:48px;
  background:#000;color:#fff;border:1px solid #4a4a4a;
  font-family:var(--f-sans);font-size:16px;
}
.tryout__f input::placeholder{color:#6a6a6a}
.tryout__f input:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-color:var(--brand)}

/* 箇条書き（強みの例） */
.checks{max-width:40em;margin-top:var(--2xl);border-top:1px solid var(--hairline)}
.checks li{
  font-family:var(--f-serif);font-size:16px;line-height:1.85;
  padding:var(--lg) 0 var(--lg) 1.8em;border-bottom:1px solid var(--hairline);position:relative;
}
.checks li::before{
  content:"";position:absolute;left:.25em;top:1.55em;
  width:9px;height:5px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}

/* 診断の入力欄。白い面（プロダクトページ）でも使えるようにする */
.band .tryout__f input{background:#fff;color:var(--ink);border-color:var(--ink)}
.band .tryout__f input::placeholder{color:#8a8a8a}