/* 013 凪代造舟所 — 共通スタイル
   配色・余白・部品仕様は design-system/013-nagishiro-boatworks/MASTER.md に従う。
   書体だけは方針書(外部フォント禁止)により端末標準へ差し替えている。 */

:root{
  --ink:#1C1917;
  --ink-2:#44403C;
  --gold:#A16207;
  --gold-lite:#D9A441;
  --bg:#FAFAF9;
  --fg:#0C0A09;
  --muted:#E8ECF0;
  --line:#D6D3D1;
  --sea:#17313F;
  --sea-2:#0E1E27;
  --paper:#FFFFFF;
  --on-sea:#E8E4DE;

  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-2xl:48px; --space-3xl:64px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px rgba(0,0,0,.10);
  --shadow-lg:0 10px 15px rgba(0,0,0,.10);
  --shadow-xl:0 20px 25px rgba(0,0,0,.15);

  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E","MS PMincho",serif;
  --gothic:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--gothic); font-size:16px; line-height:1.85;
  letter-spacing:.02em; overflow-x:hidden;
}
img,svg,canvas{max-width:100%; display:block}
a{color:var(--ink); text-underline-offset:.25em}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}
.wrap{width:min(100% - 40px,var(--wrap)); margin-inline:auto}
.narrow{width:min(100% - 40px,760px); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:0; background:var(--gold); color:#fff; padding:10px 16px; z-index:200}
.skip:focus{left:12px; top:12px}

/* ---------- ヘッダ ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(250,250,249,.94); border-bottom:1px solid var(--line);
}
.site-head__in{display:flex; align-items:center; gap:var(--space-md); min-height:64px; position:relative}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand__mark{width:34px; height:34px; flex:0 0 auto}
.brand__name{font-family:var(--mincho); font-size:18px; letter-spacing:.14em; line-height:1.25}
.brand__en{display:block; font-family:var(--gothic); font-size:9px; letter-spacing:.3em; color:var(--ink-2)}
.nav{margin-left:auto}
.nav__list{display:flex; gap:var(--space-lg); list-style:none; margin:0; padding:0}
.nav__list a{font-size:13.5px; letter-spacing:.1em; text-decoration:none; color:var(--ink-2); padding:6px 0; border-bottom:1px solid transparent; transition:color 200ms ease,border-color 200ms ease}
.nav__list a:hover{color:var(--ink); border-bottom-color:var(--gold)}
.nav__list a[aria-current=page]{color:var(--ink); border-bottom-color:var(--gold)}
.navbtn{display:none; margin-left:auto; cursor:pointer; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-family:inherit; font-size:13px; color:var(--ink); transition:background 200ms ease}
.navbtn:hover{background:var(--muted)}

/* ---------- 見出し ---------- */
h1,h2,h3{font-family:var(--mincho); font-weight:600; letter-spacing:.06em; line-height:1.45; color:var(--ink)}
h1{font-size:clamp(28px,5.2vw,44px); margin:0 0 var(--space-md)}
h2{font-size:clamp(22px,3.4vw,30px); margin:0 0 var(--space-md)}
h3{font-size:clamp(17px,2.2vw,20px); margin:0 0 var(--space-sm)}
.eyebrow{font-family:var(--gothic); font-size:11px; letter-spacing:.34em; color:var(--gold); margin:0 0 var(--space-sm)}
.lead{font-size:clamp(15px,1.7vw,17px); color:var(--ink-2)}

section{padding:var(--space-3xl) 0}
.section-sea{background:var(--sea); color:var(--on-sea)}
.section-sea h2,.section-sea h3{color:#F5F1EA}
.section-sea .eyebrow{color:var(--gold-lite)}
.section-sea .lead{color:#C8C2B8}
.section-muted{background:var(--muted)}

/* ---------- ボタン ---------- */
.btn{display:inline-block; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600;
  padding:12px 24px; border-radius:8px; text-decoration:none; transition:background 200ms ease,color 200ms ease,box-shadow 200ms ease}
.btn-primary{background:var(--gold); color:#fff; border:2px solid var(--gold)}
.btn-primary:hover{background:#8A5406; border-color:#8A5406}
.btn-secondary{background:transparent; color:var(--ink); border:2px solid var(--ink)}
.btn-secondary:hover{background:var(--ink); color:#fff}
.section-sea .btn-secondary{color:#F5F1EA; border-color:#F5F1EA}
.section-sea .btn-secondary:hover{background:#F5F1EA; color:var(--sea)}
.btnrow{display:flex; flex-wrap:wrap; gap:var(--space-md); margin-top:var(--space-xl)}

/* ---------- カード ---------- */
.grid{display:grid; gap:var(--space-lg)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:var(--space-lg);
  box-shadow:var(--shadow-sm); transition:box-shadow 200ms ease,border-color 200ms ease}
a.card{display:block; text-decoration:none; color:inherit; cursor:pointer}
a.card:hover{box-shadow:var(--shadow-lg); border-color:var(--gold)}
.card__fig{border-radius:8px; overflow:hidden; background:var(--muted); margin-bottom:var(--space-md)}
.card__meta{font-size:12px; letter-spacing:.16em; color:var(--gold); margin:0 0 6px}
.card p{margin:0; font-size:14.5px; color:var(--ink-2)}
.card__more{display:inline-block; margin-top:var(--space-md); font-size:13px; font-weight:600; color:var(--gold)}

/* ---------- 表 ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--paper)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px}
th,td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:var(--muted); font-family:var(--gothic); font-size:12.5px; letter-spacing:.12em; color:var(--ink-2); white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- 各種 ---------- */
.kv{list-style:none; margin:0; padding:0}
.kv li{display:flex; gap:var(--space-md); padding:12px 0; border-bottom:1px solid var(--line)}
.kv b{flex:0 0 8.5em; font-weight:600; font-size:13.5px; color:var(--ink-2)}
.pagehead{background:var(--sea); color:var(--on-sea); padding:var(--space-3xl) 0 var(--space-2xl)}
.pagehead h1{color:#F7F4EF}
.pagehead .lead{color:#C8C2B8}
.crumbs{font-size:12px; letter-spacing:.1em; color:#A8B8C1; margin-bottom:var(--space-lg)}
.crumbs a{color:#A8B8C1}
.note{font-size:13px; color:var(--ink-2); background:var(--muted); border-left:3px solid var(--gold); padding:var(--space-md); border-radius:0 8px 8px 0}
.figcap{font-size:12px; color:var(--ink-2); margin-top:var(--space-sm); letter-spacing:.04em}

details{border:1px solid var(--line); border-radius:10px; background:var(--paper); margin-bottom:var(--space-sm)}
summary{cursor:pointer; padding:14px var(--space-lg); font-weight:600; font-size:14.5px; list-style:none; transition:background 200ms ease}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋"; float:right; color:var(--gold)}
details[open] summary::after{content:"−"}
summary:hover{background:var(--muted)}
details .body{padding:0 var(--space-lg) var(--space-lg); font-size:14.5px; color:var(--ink-2)}

/* ---------- フォーム ---------- */
.field{margin-bottom:var(--space-lg)}
.field label{display:block; font-size:13px; font-weight:600; letter-spacing:.08em; margin-bottom:6px}
.input,textarea,select{width:100%; padding:12px 16px; border:1px solid var(--line); border-radius:8px;
  font-size:16px; font-family:inherit; background:var(--paper); color:var(--fg); transition:border-color 200ms ease,box-shadow 200ms ease}
.input:focus,textarea:focus,select:focus{border-color:var(--ink); outline:none; box-shadow:0 0 0 3px rgba(28,25,23,.13)}
textarea{min-height:150px; resize:vertical; line-height:1.8}
.req{color:var(--gold); font-size:11px; margin-left:6px; letter-spacing:.1em}

/* ---------- フッタ ---------- */
.site-foot{background:var(--sea-2); color:#AFC0C9; padding:var(--space-3xl) 0 var(--space-xl); font-size:13.5px}
.site-foot h4{font-family:var(--mincho); color:#F0EBE3; font-size:15px; margin:0 0 var(--space-md); letter-spacing:.1em}
.site-foot a{color:#AFC0C9; text-decoration:none}
.site-foot a:hover{color:#fff; text-decoration:underline}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:8px}
.foot-cols{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--space-2xl)}
.disclaimer{margin-top:var(--space-2xl); padding-top:var(--space-lg); border-top:1px solid rgba(255,255,255,.14);
  font-size:12px; line-height:1.9; color:#93A7B1}
.disclaimer strong{color:#D9CFC0}

/* ---------- 現れる動き ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 600ms ease,transform 600ms ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none} }

/* ---------- 演出の主題 A:スクロール連動の3D ---------- */
.stage{position:relative; height:560vh; background:var(--sea-2)}
.stage__sticky{position:sticky; top:0; height:100vh; min-height:520px; overflow:hidden}
#hull-canvas,#hull-still{position:absolute; inset:0; width:100%; height:100%}
#hull-still svg{width:100%; height:100%}
.stage__ui{position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column; justify-content:space-between; padding:var(--space-2xl) 0}
.stage__top{color:#F5F1EA}
.stage__top h1{color:#F7F4EF; text-shadow:0 2px 24px rgba(0,0,0,.55); margin-bottom:var(--space-sm)}
.stage__top p{max-width:30em; color:#C6CFD5; text-shadow:0 2px 16px rgba(0,0,0,.6); margin:0}
.stage__cap{display:flex; align-items:flex-end; gap:var(--space-lg)}
.stage__num{font-family:var(--mincho); font-size:clamp(40px,7vw,72px); line-height:1; color:var(--gold-lite); opacity:.9; letter-spacing:.02em}
.stage__capbody{max-width:34em}
.stage__capbody h2{color:#F7F4EF; margin-bottom:6px; font-size:clamp(19px,2.6vw,26px); text-shadow:0 2px 20px rgba(0,0,0,.6)}
.stage__capbody p{margin:0; color:#C6CFD5; font-size:14.5px; line-height:1.9; text-shadow:0 2px 16px rgba(0,0,0,.6)}
.stage__dots{display:flex; gap:10px; margin-top:var(--space-lg)}
.stage__dot{width:34px; height:3px; background:rgba(255,255,255,.24); border-radius:2px; display:block}
.stage__dot[aria-current=step]{background:var(--gold-lite)}
.stage__hint{margin-top:var(--space-lg); font-size:11.5px; letter-spacing:.28em; color:#8FA3AD}
.stage__motion{pointer-events:auto; margin-top:var(--space-md)}
.stage__motion .btn{background:var(--gold-lite); color:#1B1408; border:2px solid var(--gold-lite)}
.stage__note{font-size:12.5px; color:#C6CFD5; margin:var(--space-sm) 0 0; max-width:28em}

@media (max-width:640px){
  .stage{height:480vh}
  .stage__ui{padding:var(--space-xl) 0}
  .stage__cap{flex-direction:column; align-items:flex-start; gap:var(--space-sm)}
  .stage__num{font-size:34px}
  .stage__dot{width:26px}
}

@media (max-width:860px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr 1fr; gap:var(--space-xl)}
}
@media (max-width:640px){
  section{padding:var(--space-2xl) 0}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .navbtn{display:block}
  .nav{position:absolute; left:-20px; right:-20px; top:100%; background:var(--bg); border-bottom:1px solid var(--line); margin:0}
  .nav[hidden]{display:none}
  .nav__list{flex-direction:column; gap:0; padding:var(--space-sm) 20px var(--space-lg)}
  .nav__list a{display:block; padding:12px 0; border-bottom:1px solid var(--line)}
  .kv li{flex-direction:column; gap:2px}
  .kv b{flex:none}
  .site-head__in{min-height:56px}
  .pagehead{padding:var(--space-2xl) 0 var(--space-xl)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}