/* ============================================================
   Brainship Marine Technology — 静水 (Quiet Water)
   トンマナ方向 B / ブランド定義 5-0
   明るい紙・大きな余白・写真が面を占める・文字は最小
   ============================================================ */

:root{
  --paper:#ffffff;
  --paper-2:#f6f6f3;
  --paper-3:#eceee9;
  --ink:#10171d;
  --ink-2:#4d5860;
  /* .muted（注釈・出典・免責）に使う。#8b939a は対白 3.12 で WCAG AA 4.5 に
     届いていなかったため 2026-08-07 に変更。現行は 白 5.20 / --paper-2 4.80 */
  --ink-3:#646e77;
  --line:#e2e4df;
  --brand:#396f98;     /* 基幹色。ロゴ・見出しの強調・図版の主色。小さい文字には使わない */
  --sea:#2b4d68;       /* 文字の青。リンクと小さい文字（白との比 8.88） */
  --hull:#213241;      /* 濃色地。反転で使う地。上のロゴ・文字は白 */

  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:"Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",system-ui,sans-serif;
  --mark:Optima,"Hiragino Mincho ProN","Palatino Linotype",serif;

  --gut:clamp(1.25rem,5vw,4rem);
  --stack:clamp(4rem,9vw,7.5rem);
}

/* ページ遷移。対応ブラウザだけが効き、非対応では何も起きない。
   個別要素のフェードインは入れない（再訪のたびに待たされて煩わしくなるため）。
   ここでやっているのは「前のページから次のページへの繋ぎ」だけ。 */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.95;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:var(--sea); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible,button:focus-visible{outline:2px solid var(--sea); outline-offset:3px;}

/* ---------- 骨格 ---------- */
.wrap{max-width:1180px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut);}
.narrow{max-width:760px;}
.section{padding-block:var(--stack);}
.section--tint{background:var(--paper-2);}
.section--edge{border-top:1px solid var(--line);}

/* ---------- ヘッダー ---------- */
.site-head{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.6rem var(--gut);
}
.site-head--solid{position:static; border-bottom:1px solid var(--line); background:var(--paper);}
.site-head--over .wordmark,.site-head--over .nav a{color:#fff;}
/* ロゴ。色を焼き込んだ SVG を <img> で出し、地の明暗で切り替える。
   CSS マスクだと file:// で読み込めず、ローカルで開いたとき消えるため使わない。
   広い画面は2行版（副題が 8px を確保できる 33px）、狭い画面は1行版。 */
.wordmark{display:block; line-height:0;}
/* 既定は全部非表示にし、画面幅と地の明暗で1つだけ出す。
   詳細度を揃えるため、表示の指定はすべてメディアクエリの中で完結させる。 */
.wordmark img{display:none; width:auto;}
@media(min-width:721px){
  .wordmark img{height:33px;}
  .site-head .wordmark .b.two{display:block;}
  .site-head--over .wordmark .b.two{display:none;}
  .site-head--over .wordmark .w.two{display:block;}
}
@media(max-width:720px){
  .wordmark img{height:20px;}
  .site-head .wordmark .b.one{display:block;}
  .site-head--over .wordmark .b.one{display:none;}
  .site-head--over .wordmark .w.one{display:block;}
}
/* promo の製品ロゴ */
.mk{display:block; height:clamp(20px,2.8vw,28px); width:auto;}

.nav{display:flex; flex-wrap:wrap; gap:1.6rem; font-size:12px; letter-spacing:.14em;}
.nav a{color:var(--ink-2); text-decoration:none;}
.nav a:hover{color:var(--ink); text-decoration:none;}
.nav a[aria-current="page"]{color:var(--ink); border-bottom:1px solid currentColor; padding-bottom:2px;}

/* ---------- ヒーロー ----------
   【重要】白抜き文字は必ず色を明示する。グローバルの `p{color:var(--ink-2)}` は
   要素への直接指定なので、親の color:#fff を継承より優先して打ち消す。
   これに気づかず「読めない」の原因をスクリムだと誤診し、濃くするほど悪化させた。 */
.hero{position:relative; isolation:isolate;}
.hero img{width:100%; height:min(78vh,720px); object-fit:cover;}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(6,14,22,.42) 0, rgba(6,14,22,.08) 30%,
    rgba(6,14,22,.28) 58%, rgba(6,14,22,.62) 100%);
}
.hero-copy{position:absolute; z-index:2; left:var(--gut); right:var(--gut);
  bottom:clamp(2.5rem,7vw,5rem); color:#fff;}
/* 白抜き領域の中の p は親の色を継承させる（グローバル p 指定の打ち消し対策） */
.hero-copy p,.promo .inner p{color:inherit;}
.hero-copy .line{
  color:#fff;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,5.2vw,3.6rem); line-height:1.5; letter-spacing:.04em;
  text-wrap:balance; margin:0;
  text-shadow:0 1px 3px rgba(0,10,20,.45), 0 2px 30px rgba(0,10,20,.5);
}
.hero-copy .kicker{margin:1.4rem 0 0; font-size:11.5px; letter-spacing:.22em;
  color:rgba(255,255,255,.88); text-shadow:0 1px 4px rgba(0,10,20,.5);
  padding-right:.22em;}
/* 狭い画面では1行に収まらず、行末がビューポート右端に接触していた（390px で
   右余白 4px を実測）。文字を詰めるのではなく、社名を別行に落として解く。 */
@media(max-width:560px){
  .hero-copy .kicker .sep{display:none;}
  .hero-copy .kicker .b{display:block; margin-top:.5em;}
}
.hero--center::after{
  background:
    radial-gradient(ellipse 72% 58% at 50% 50%, rgba(6,14,22,.46), rgba(6,14,22,0) 100%),
    linear-gradient(180deg, rgba(6,14,22,.34), rgba(6,14,22,.24) 45%, rgba(6,14,22,.40));
}
.hero--center .hero-copy{bottom:auto; top:50%; transform:translateY(-50%); text-align:center;}
.hero--center .hero-mark{color:rgba(255,255,255,.9); font-family:var(--mark);
  font-size:clamp(1rem,2.4vw,1.5rem); letter-spacing:.6em; padding-left:.6em; margin:0 0 2.2rem;
  text-shadow:0 1px 4px rgba(0,10,20,.5);}

/* ---------- 見出し・本文 ---------- */
/* 見出しを置かない節で、eyebrow の直後に立つ一文 */
.section-lede{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.15rem,2.3vw,1.55rem); line-height:1.75; letter-spacing:.04em;
  max-width:44ch; margin:0; text-wrap:balance;
}
.eyebrow{font-size:10.5px; letter-spacing:.24em; color:var(--sea); margin:0 0 1.1rem; font-weight:600;}
h1.page-title{font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,4vw,2.7rem);
  line-height:1.5; letter-spacing:.04em; margin:0 0 1.2rem; text-wrap:balance;}
h2.lead{font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem,3vw,2.15rem);
  line-height:1.62; letter-spacing:.04em; margin:0 0 1.6rem; text-wrap:balance;}
h3{font-family:var(--serif); font-weight:500; font-size:clamp(1.05rem,2vw,1.3rem);
  line-height:1.7; letter-spacing:.03em; margin:0 0 .7rem;}
p{margin:0 0 1.3rem; color:var(--ink-2);}
p.tight{margin-bottom:.6rem;}
p strong,li strong{color:var(--ink); font-weight:600;}
.muted{color:var(--ink-3); font-size:13px; line-height:1.9;}

/* ---------- 3カラム / 2カラム ---------- */
.cols{display:grid; gap:clamp(2rem,4vw,3.4rem);}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.col-item{border-top:1px solid var(--line); padding-top:1.3rem;}
.col-item p{margin:0; font-size:14.5px;}

/* ---------- 図版 ---------- */
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:center; gap:0;}
.split > .txt{padding:clamp(2.2rem,5vw,4.5rem) var(--gut);}
.split > .txt > p{max-width:46ch;}
.split img{width:100%; height:100%; min-height:340px; object-fit:cover;}
.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1rem,2.5vw,2rem);}
figure{margin:0;}
figure img{width:100%; height:clamp(220px,26vw,340px); object-fit:cover;}
figcaption{font-size:11.5px; letter-spacing:.1em; color:var(--ink-3); margin-top:.9rem;}
/* 説明を担う figcaption（何が船に載るか）。ラベルではなく本文として読ませる */
#hardware figcaption{font-size:13px; letter-spacing:0; line-height:1.85; color:var(--ink-2); max-width:52ch;}
#hardware figcaption strong{color:var(--ink); font-weight:600;}
#hardware figure img{height:auto; background:var(--paper-2);}
/* 画面ショットは細部が読めることが目的。枠を付けて紙面から切り離す */
#hardware > .wrap > figure > img{border:1px solid var(--line); background:#0b0e11;}

/* ---------- 発話ログ ---------- */
.log{display:grid; gap:2.2rem;}
.log-row{display:grid; grid-template-columns:76px 1fr; gap:1.6rem; align-items:baseline;}
.log-row .who{font-size:10.5px; letter-spacing:.16em; color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:.5em;}
.log-row .said{font-size:clamp(1rem,1.8vw,1.15rem); line-height:1.9; color:var(--ink-2);}
.log-row.is-helva .who{color:#a9762f;}
.log-row.is-helva .said{font-family:var(--serif); color:var(--ink); font-size:clamp(1.05rem,2vw,1.3rem);}
.log-note{font-size:11.5px; letter-spacing:.1em; color:var(--ink-3); margin-top:2rem;}

/* ---------- 表 ---------- */
.table{width:100%; border-collapse:collapse; font-size:14.5px;}
.table th,.table td{text-align:left; vertical-align:top; padding:1rem 1.2rem 1rem 0; border-bottom:1px solid var(--line);}
.table th{width:clamp(120px,22%,220px); font-weight:600; color:var(--ink); white-space:nowrap;}
.table td{color:var(--ink-2);}
.table ol{margin:0; padding-left:1.3rem;}
.table li{margin:.2rem 0;}

/* ---------- 導線 ---------- */
.cta{display:inline-flex; align-items:center; gap:.7rem; font-size:13px; letter-spacing:.12em;
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:.3rem; text-decoration:none;}
.cta:hover{text-decoration:none; color:var(--sea); border-color:var(--sea);}
.cta::after{content:"→"; font-size:1.05em;}

.promo{position:relative;}
/* 背景写真だけを対象にする。子孫セレクタだと .inner の中のロゴ img まで
   巨大に引き伸ばしてしまう（詳細度も .mk より高いので勝つ） */
.promo > img{width:100%; height:clamp(320px,44vw,520px); object-fit:cover;}
.promo .inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; color:#fff; gap:1.6rem; padding:var(--gut);
  background:linear-gradient(180deg,rgba(6,16,26,.42),rgba(6,16,26,.52));}
.promo .ln{color:#fff; text-shadow:0 1px 3px rgba(0,10,20,.45); font-family:var(--serif); font-size:clamp(1.3rem,3.2vw,2.1rem); line-height:1.6; letter-spacing:.04em; margin:0; text-wrap:balance;}
.promo .cta{color:#fff; border-color:rgba(255,255,255,.7);}
.promo .cta:hover{color:#fff; border-color:#fff;}

/* ---------- 申込み ---------- */
.signup{max-width:520px; margin-inline:auto; text-align:center; display:grid; gap:1.4rem; justify-items:center;}
.signup .field{width:100%; display:flex; gap:.8rem; border-bottom:1px solid var(--ink); padding-bottom:.7rem;}
.signup input{flex:1; border:0; background:transparent; font:inherit; font-size:15px; color:var(--ink); padding:0;}
.signup input::placeholder{color:var(--ink-3);}
.signup-msg{margin:0; font-size:13.5px; line-height:1.8; color:var(--ink-2);}
.signup-msg[data-ok="0"]{color:#a8332a;}
.signup button[disabled]{opacity:.45; cursor:default;}
.signup .apply{display:flex; gap:.7rem; align-items:flex-start; text-align:left; width:100%;
  font-size:14px; line-height:1.7; color:var(--ink); cursor:pointer;}
.signup .apply input{width:18px; height:18px; margin:.35rem 0 0; flex:none; accent-color:var(--sea); cursor:pointer;}
.signup .apply b{font-weight:600;}
.signup .apply span{display:block; font-size:12.5px; color:var(--ink-2); margin-top:.2rem;}
.signup button{border:0; background:transparent; font:inherit; font-size:13px; letter-spacing:.12em;
  color:var(--ink); cursor:pointer; white-space:nowrap;}

/* ---------- フッター ---------- */
.site-foot{border-top:1px solid var(--line); padding-block:3.2rem 4rem; font-size:12.5px; color:var(--ink-3);}
.site-foot .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2rem; margin-bottom:2.4rem;}
.site-foot h4{font-size:10.5px; letter-spacing:.2em; color:var(--ink-2); margin:0 0 .9rem; font-weight:600; font-family:var(--sans);}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem;}
.site-foot a{color:var(--ink-2);}
.site-foot .base{display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  border-top:1px solid var(--line); padding-top:1.6rem;}

/* ---------- 事業スケジュール ---------- */
.road{list-style:none; margin:0; padding:0;}
.road li{display:grid; grid-template-columns:clamp(5rem,12vw,7.5rem) 1fr; gap:clamp(1rem,3vw,2.2rem);
  padding:clamp(1.3rem,3vw,1.9rem) 0; border-top:1px solid var(--line);}
.road li:last-child{border-bottom:1px solid var(--line);}
.road .yr{font-size:12.5px; letter-spacing:.16em; color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:.45em;}
.road .yr b{display:block; font-size:10px; letter-spacing:.2em; color:var(--sea); font-weight:600; margin-top:.5em;}
.road h3{margin:0 0 .5rem;}
.road p{margin:0; font-size:14.5px;}
.road .is-now h3{color:var(--ink);}
.road .is-now{background:linear-gradient(90deg,rgba(43,77,104,.05),rgba(43,77,104,0) 60%);}

/* ページ全体の着地。本文の一部ではなく、独立した一行として置く */
.tagline{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.75rem,4.6vw,2.9rem); line-height:1.55; letter-spacing:.1em;
  text-align:center; text-wrap:balance;
  margin:clamp(4rem,9vw,7rem) auto 0; max-width:24ch;
}
/* 本文の途中に置く図版。テキスト幅に合わせる */
.inline-fig{margin:2.4rem 0; }
.inline-fig img{width:100%; height:auto; display:block;}

.notice{background:var(--paper-3); border-left:2px solid var(--sea); padding:1.1rem 1.4rem; font-size:13.5px; color:var(--ink-2);}
.notice p:last-child{margin-bottom:0;}

@media (max-width:640px){
  body{font-size:15px; line-height:1.9;}
  .site-head{flex-direction:column; align-items:flex-start; gap:.9rem;}
  .nav{gap:1.1rem;}
  .log-row{grid-template-columns:1fr; gap:.4rem;}
  .log-row .who{padding-top:0;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important;}}