@charset "utf-8";
/* ============================================================================
   蒼淵潜水（そうえんせんすい）─ 第25号（架空）
   港湾・漁港・ダム・水管橋の潜水調査

   組版の決め（方針 9-3）:
     ・見出しは明朝、本文はゴシック。字間・行間を明示する
     ・余白は広く。段の上下は clamp(58px, 8.8vw, 136px)
     ・主色は「灯（あかり）の橙」1色だけ。
       水の中では橙は7メートルで消える色で、地上から持ち込んだ灯りにしか残らない。
       だから罫・釦・強調・数字の見出しにしか使わない
     ・動きは1画面に1つ
        表紙 = 6本の色柱が、その色の届く深さまで伸びる（一度だけ）
        深さ = 目盛を動かしたときだけ、残っている色が変わる（人が動かす）
        潜る = 深度と時間の折れ線が左から引かれる
        記録 = 断面図の傷の印が順に点く
        相談 = 控えが出るところ
     ・prefers-reduced-motion では、全部「終わった状態」で静止して出す
   端末に入っている書体しか指定しない（外部フォント・外部CDNは1件も読まない）。
   ========================================================================== */

:root{
  --fuka:#0a1317;        /* 地（深い水） */
  --fuka2:#0e1b21;       /* 一段明るい地 */
  --ita:#12222a;         /* 板（囲み） */
  --moji:#e2e9e8;        /* 本文 */
  --usu:#9fb0b0;         /* 薄い文字 */
  --usu2:#748687;        /* さらに薄い */
  --hi:#e08a3c;          /* 灯 ─ 主色。ここだけ */
  --hi-usu:#2a1d12;      /* 灯のごく暗い地 */
  --kei:#1d333c;         /* 罫 */
  --kei2:#16282f;
  --mincho:"游明朝","YuMincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  --gothic:"游ゴシック","YuGothic","Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",system-ui,sans-serif;
  --dan:clamp(58px,8.8vw,136px);
  --wrap:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fuka);color:var(--moji);
  font-family:var(--gothic);
  font-size:15px;line-height:2.04;letter-spacing:.05em;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--mincho);font-weight:500;letter-spacing:.085em;line-height:1.58;margin:0}
p{margin:0}
.wrap{width:min(100% - 36px,var(--wrap));margin-inline:auto}
.wrap-n{width:min(100% - 36px,820px);margin-inline:auto}
.num{font-family:var(--mincho);font-feature-settings:"tnum"}
:focus-visible{outline:2px solid var(--hi);outline-offset:2px}

/* ---------------------------------------------------------------- 頭 */
.atama{position:sticky;top:0;z-index:40;background:rgba(10,19,23,.94);
  border-bottom:1px solid var(--kei);backdrop-filter:saturate(120%) blur(3px)}
.atama-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0}
.yagou{display:flex;align-items:baseline;gap:9px;text-decoration:none;flex:0 0 auto}
.yagou b{font-family:var(--mincho);font-size:19px;letter-spacing:.17em;font-weight:500}
.yagou span{font-size:9px;letter-spacing:.26em;color:var(--usu2)}
.michi{display:flex;gap:20px;list-style:none;margin:0;padding:0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.michi::-webkit-scrollbar{display:none}
.michi a{font-size:13px;text-decoration:none;letter-spacing:.09em;color:var(--usu);
  padding-bottom:3px;border-bottom:1px solid transparent;white-space:nowrap;transition:color .18s ease}
.michi a:hover{color:var(--hi);border-bottom-color:var(--hi)}
.michi a[aria-current="page"]{color:var(--moji);border-bottom-color:var(--hi)}
@media(max-width:760px){
  .atama-in{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 0 9px}
  .michi{gap:16px;width:100%;padding-bottom:2px}
  .michi a{font-size:12px}
}

/* ---------------------------------------------------------------- 表紙 */
.hyoushi{padding:clamp(38px,6.6vw,86px) 0 0}
.hyoushi h1{font-size:clamp(28px,7vw,57px);line-height:1.42;letter-spacing:.05em}
.hyoushi h1 small{display:block;font-family:var(--gothic);font-size:11px;
  letter-spacing:.28em;color:var(--hi);margin-bottom:20px;line-height:2.1}
.hyoushi-honbun{margin-top:26px;max-width:33em;color:var(--usu)}
.e{margin:clamp(30px,5vw,58px) 0 0;position:relative}
.e svg{width:100%;height:auto;border:1px solid var(--kei);background:#071014}
.e figcaption{font-size:11.5px;color:var(--usu2);letter-spacing:.12em;margin-top:10px;line-height:1.95}

/* ---------------------------------------------------------------- 段 */
.dan{padding:var(--dan) 0}
.dan-ita{background:var(--fuka2);border-block:1px solid var(--kei2)}
.dan-shime{padding:clamp(48px,7vw,94px) 0}
.midashi{font-size:clamp(21px,3.5vw,33px);line-height:1.54}
.soe{font-size:11px;letter-spacing:.28em;color:var(--hi);margin-bottom:16px}
.honbun{margin-top:22px;color:var(--usu);max-width:34em}
.honbun + .honbun{margin-top:1.1em}
.honbun b{color:var(--moji);font-weight:500}

/* 数字の帯 */
.kazu{display:grid;gap:1px;background:var(--kei);border:1px solid var(--kei);
  grid-template-columns:repeat(2,1fr);margin-top:clamp(28px,4vw,46px)}
.kazu div{background:var(--fuka);padding:22px 18px}
.kazu b{display:block;font-family:var(--mincho);font-size:clamp(26px,4.6vw,38px);
  letter-spacing:.04em;line-height:1.2;font-weight:500;color:var(--hi)}
.kazu b i{font-style:normal;font-size:14px;letter-spacing:.1em;margin-left:4px;color:var(--usu)}
.kazu p{font-size:12px;color:var(--usu2);letter-spacing:.1em;margin-top:8px;line-height:1.85}
@media(min-width:800px){.kazu{grid-template-columns:repeat(4,1fr)}}

/* 二段組 */
.futatsu{display:grid;gap:clamp(26px,4vw,56px);align-items:start}
@media(min-width:860px){.futatsu{grid-template-columns:1fr 1fr}}

/* 工程 */
.kotei{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--kei)}
.kotei li{display:grid;grid-template-columns:76px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--kei)}
.kotei .hi{font-family:var(--mincho);font-size:15px;color:var(--hi);letter-spacing:.02em;padding-top:3px}
.kotei h3{font-size:17px;margin-bottom:6px}
.kotei p{font-size:13.5px;color:var(--usu);line-height:1.97}
@media(max-width:560px){.kotei li{grid-template-columns:62px 1fr;gap:12px}}

/* 札（断り・箇条） */
.fuda{list-style:none;margin:clamp(28px,4vw,46px) 0 0;padding:0;display:grid;gap:1px;
  background:var(--kei);border:1px solid var(--kei)}
@media(min-width:820px){.fuda{grid-template-columns:repeat(3,1fr)}}
.fuda li{background:var(--fuka);padding:24px clamp(18px,3vw,30px)}
.fuda h3{font-size:18px;margin-bottom:8px}
.fuda h3 span{font-family:var(--gothic);font-size:11px;letter-spacing:.2em;color:var(--hi);
  display:block;margin-bottom:9px}
.fuda p{font-size:13.5px;color:var(--usu);line-height:1.97}

/* 表 */
.yoko{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hyou{width:100%;border-collapse:collapse;margin-top:clamp(24px,3.4vw,40px);font-size:13.5px;min-width:520px}
.hyou th,.hyou td{border-bottom:1px solid var(--kei);padding:14px 10px;text-align:left;vertical-align:top}
.hyou th{font-weight:500;color:var(--usu);letter-spacing:.08em}
.hyou thead th{color:var(--moji);border-bottom:1px solid var(--usu2);font-size:12px;letter-spacing:.15em}
.hyou td{font-family:var(--mincho);font-size:15px}
.hyou td small{font-family:var(--gothic);font-size:12px;color:var(--usu2);display:block;line-height:1.8}

/* 釦 */
.botan{display:inline-block;font-family:var(--gothic);font-size:13.5px;letter-spacing:.14em;
  text-decoration:none;color:var(--fuka);background:var(--hi);
  padding:15px 30px;border:1px solid var(--hi);transition:background .18s ease,color .18s ease}
.botan:hover{background:transparent;color:var(--hi)}
.botan-usu{background:transparent;color:var(--hi)}
.botan-usu:hover{background:var(--hi);color:var(--fuka)}

/* 引用のような一行 */
.ichigyou{font-family:var(--mincho);font-size:clamp(19px,3vw,27px);line-height:1.8;
  letter-spacing:.09em;border-left:2px solid var(--hi);padding-left:clamp(16px,3vw,28px);
  margin-top:clamp(26px,4vw,44px);max-width:26em}

/* ---------------------------------------------------------------- 深さの目盛（人が動かす） */
.fukasa{margin-top:clamp(30px,4.6vw,52px);border:1px solid var(--kei);background:var(--ita)}
.fukasa-ue{padding:clamp(20px,3vw,30px) clamp(18px,3vw,30px) 8px}
.fukasa label{font-size:12px;letter-spacing:.18em;color:var(--usu2);display:block;margin-bottom:14px}
.fukasa input[type=range]{width:100%;accent-color:var(--hi);height:26px}
.fukasa-m{font-family:var(--mincho);font-size:clamp(30px,6vw,46px);color:var(--hi);line-height:1.1}
.fukasa-m i{font-style:normal;font-size:15px;letter-spacing:.12em;margin-left:5px;color:var(--usu)}
.iro{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--kei);
  border-top:1px solid var(--kei);border-bottom:1px solid var(--kei)}
.iro div{background:var(--ita);padding:16px 6px 14px;text-align:center}
.iro span{display:block;width:100%;height:30px;margin-bottom:9px;
  transition:filter .35s ease,opacity .35s ease}
.iro b{font-size:11px;letter-spacing:.1em;font-weight:400;color:var(--usu)}
.iro small{display:block;font-size:10px;color:var(--usu2);letter-spacing:.06em;margin-top:2px}
.iro .kieta span{filter:grayscale(1) brightness(.34)}
.iro .kieta b{color:var(--usu2)}
.fukasa-shita{padding:clamp(18px,3vw,26px) clamp(18px,3vw,30px) clamp(20px,3vw,28px)}
.fukasa-shita p{font-size:13.5px;color:var(--usu);line-height:1.95}
.fukasa-shita p b{color:var(--moji);font-weight:500}

/* ---------------------------------------------------------------- 現れ */
.deru{opacity:0;transform:translateY(16px);transition:opacity .72s ease,transform .72s ease}
.deru.mieta{opacity:1;transform:none}

/* 表紙の色柱が、届く深さまで伸びる（一度だけ） */
#mizubashira .obi{transform-box:fill-box;transform-origin:top center;transform:scaleY(0);
  transition:transform 1.25s cubic-bezier(.22,.7,.3,1)}
#mizubashira.ochita .obi{transform:scaleY(1)}
#mizubashira .obi:nth-of-type(1){transition-delay:.05s}
#mizubashira .obi:nth-of-type(2){transition-delay:.18s}
#mizubashira .obi:nth-of-type(3){transition-delay:.31s}
#mizubashira .obi:nth-of-type(4){transition-delay:.44s}
#mizubashira .obi:nth-of-type(5){transition-delay:.57s}
#mizubashira .obi:nth-of-type(6){transition-delay:.70s}
#mizubashira .akari{opacity:0;transition:opacity 1s ease 1.15s}
#mizubashira.ochita .akari{opacity:1}

/* 折れ線（潜る） */
.senhiki{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);
  transition:stroke-dashoffset 2.1s cubic-bezier(.3,.7,.3,1) .15s}
.mieta .senhiki,.senhiki.hiita{stroke-dashoffset:0}

/* 傷の印（記録） */
.kizu{opacity:0;transition:opacity .5s ease}
.mieta .kizu{opacity:1}
.mieta .kizu:nth-of-type(1){transition-delay:.25s}
.mieta .kizu:nth-of-type(2){transition-delay:.45s}
.mieta .kizu:nth-of-type(3){transition-delay:.65s}
.mieta .kizu:nth-of-type(4){transition-delay:.85s}
.mieta .kizu:nth-of-type(5){transition-delay:1.05s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .deru{opacity:1;transform:none;transition:none}
  #mizubashira .obi{transform:scaleY(1);transition:none}
  #mizubashira .akari{opacity:1;transition:none}
  .senhiki{stroke-dashoffset:0;transition:none}
  .kizu{opacity:1;transition:none}
  .iro span{transition:none}
}

/* ---------------------------------------------------------------- 記録（事例） */
.ken{list-style:none;margin:clamp(30px,4.4vw,52px) 0 0;padding:0;display:grid;gap:clamp(22px,3vw,34px)}
.ken li{border:1px solid var(--kei);background:var(--fuka2);padding:clamp(22px,3.4vw,34px)}
.ken .kan{font-size:11px;letter-spacing:.24em;color:var(--hi);margin-bottom:12px}
.ken h3{font-size:clamp(18px,2.6vw,23px);margin-bottom:14px;line-height:1.6}
.ken dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:18px 0 0;font-size:13px}
.ken dt{color:var(--usu2);letter-spacing:.12em;white-space:nowrap}
.ken dd{margin:0;color:var(--moji)}
.ken p{font-size:13.5px;color:var(--usu);line-height:1.97}

/* ---------------------------------------------------------------- 相談（帳） */
.chou{border:1px solid var(--kei);background:var(--ita);margin-top:clamp(30px,4.6vw,54px)}
.gyou{padding:clamp(22px,3.4vw,32px) clamp(18px,3vw,32px);border-bottom:1px solid var(--kei)}
.gyou:last-of-type{border-bottom:0}
.gyou h3{font-size:17px;margin-bottom:6px}
.gyou h3 span{font-family:var(--gothic);font-size:11px;letter-spacing:.24em;color:var(--hi);
  display:block;margin-bottom:9px}
.gyou .setsu{font-size:12.5px;color:var(--usu2);line-height:1.9;margin-bottom:16px}
.tama{display:flex;flex-wrap:wrap;gap:9px}
.tama button{font-family:var(--gothic);font-size:13px;letter-spacing:.08em;color:var(--usu);
  background:transparent;border:1px solid var(--kei);padding:11px 17px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.tama button:hover{border-color:var(--hi);color:var(--moji)}
.tama button[aria-pressed="true"]{background:var(--hi);border-color:var(--hi);color:var(--fuka)}
.ire{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-end}
.ire label{font-size:12px;letter-spacing:.14em;color:var(--usu2);display:block;margin-bottom:8px}
.ire input,.ire select{font-family:var(--gothic);font-size:15px;color:var(--moji);
  background:var(--fuka);border:1px solid var(--kei);padding:12px 14px;width:min(100%,220px)}
.ire input:focus,.ire select:focus{border-color:var(--hi);outline:none}
.oshi{padding:clamp(22px,3.4vw,32px) clamp(18px,3vw,32px)}
.oshi button{font-family:var(--gothic);font-size:14px;letter-spacing:.16em;color:var(--fuka);
  background:var(--hi);border:1px solid var(--hi);padding:16px 34px;cursor:pointer;
  transition:background .18s ease,color .18s ease}
.oshi button:hover{background:transparent;color:var(--hi)}

/* 控え */
.hikae{margin-top:clamp(26px,4vw,44px);opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease}
.hikae.deta{opacity:1;transform:none}
.hikae:empty{margin:0}
.hikae h3{font-size:19px;margin-bottom:10px}
.hikae .gaku{font-family:var(--mincho);font-size:clamp(26px,5vw,40px);color:var(--hi);
  line-height:1.3;margin:18px 0 6px}
.hikae .gaku i{font-style:normal;font-size:13px;letter-spacing:.12em;margin-left:8px;color:var(--usu)}
.hikae dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:20px 0 0;
  font-size:13px;border-top:1px solid var(--kei);padding-top:18px}
.hikae dt{color:var(--usu2);letter-spacing:.12em;white-space:nowrap}
.hikae dd{margin:0;color:var(--moji)}
.hikae .chui{font-size:12px;color:var(--usu2);line-height:1.95;margin-top:20px;
  border-left:2px solid var(--hi);padding-left:14px}
.hikae .mada{font-size:13.5px;line-height:1.9}
@media(prefers-reduced-motion:reduce){.hikae{opacity:1;transform:none;transition:none}}

/* ---------------------------------------------------------------- 足 */
.ashi{background:#060e11;border-top:1px solid var(--kei);margin-top:clamp(56px,8vw,110px);
  padding:clamp(44px,6vw,76px) 0 clamp(30px,4vw,46px)}
.ashi-in{display:grid;gap:clamp(26px,4vw,50px)}
@media(min-width:820px){.ashi-in{grid-template-columns:1.4fr 1fr 1fr}}
.ashi b{font-family:var(--mincho);font-size:18px;letter-spacing:.14em;font-weight:500}
.ashi p,.ashi li{font-size:12.5px;color:var(--usu2);line-height:2.05;letter-spacing:.06em}
.ashi ul{list-style:none;margin:0;padding:0}
.ashi a{text-decoration:none}
.ashi a:hover{color:var(--hi)}
.kokuchi{margin-top:clamp(34px,5vw,58px);padding-top:22px;border-top:1px solid var(--kei);
  font-size:11.5px;color:#5d6d6e;line-height:2.1;letter-spacing:.04em}
.kokuchi b{font-family:var(--gothic);font-size:11.5px;color:var(--usu2);letter-spacing:.04em}