/* ============================================================
   extra.css ― 追加デザイン（site.css のあとに読み込む）
   侍ページ／特設ページ：フルページパネルの強調表現、
   双胴船シミュレーション、バーメニュー、全体的な文字サイズ調整
   ============================================================ */

/* ---- 全体的に少し大きく（この2ページのみ） ---- */
.prose p{font-size:clamp(17.5px,1.35vw,20px);line-height:2.05}
.lede{font-size:clamp(17px,1.4vw,21px)}
.dl dd{font-size:clamp(15.5px,1.15vw,17.5px)}
.notes li{font-size:clamp(15px,1.1vw,17px)}

/* ============================================================
   why-full パネル：雑誌的なレイアウト
   左＝見出し・数値・巨大ワード ／ 右下＝説明文
   ============================================================ */
.why-full .body{
  max-width:1180px;width:100%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(28px,5vw,80px);align-items:end;
}
.why-full .body > .kicker{grid-column:1;grid-row:1;align-self:end}
.why-full .body > h3{grid-column:1;grid-row:2}
.why-full .body > .stat,
.why-full .body > .big{grid-column:1;grid-row:3}
.why-full .body > p{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0 0 6px}
.why-full .body > .note{grid-column:1;grid-row:4;margin-top:10px;font-size:13.5px;letter-spacing:.06em;color:var(--dim)}

.why-full.alt .body{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.why-full.alt .body > .kicker,
.why-full.alt .body > h3,
.why-full.alt .body > .stat,
.why-full.alt .body > .big,
.why-full.alt .body > .note{grid-column:2}
.why-full.alt .body > p{grid-column:1;text-align:left}

/* 文字を大きく */
.why-full h3{font-size:clamp(34px,4.8vw,70px)}
html[data-lang="ja"] .why-full h3,
html[data-lang="zh"] .why-full h3{font-size:clamp(28px,3.9vw,58px);line-height:1.28}
.why-full p{font-size:clamp(19px,1.6vw,23px);line-height:1.95;max-width:42ch;color:#d6dae0}

/* ---- 文中の強調（金の明朝） ---- */
.why-full .hl{
  font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:400;
  color:var(--accent-hi);font-size:1.22em;letter-spacing:.02em;
}
html[data-lang="ja"] .why-full .hl{font-family:"Shippori Mincho",serif;font-style:normal;font-size:1.1em}
html[data-lang="zh"] .why-full .hl{font-family:"Noto Serif SC",serif;font-style:normal;font-size:1.1em}

/* ---- 数値の見出し（360° / 2 など） ---- */
.why-full .stat{display:flex;align-items:baseline;gap:20px;margin:16px 0 4px;flex-wrap:wrap}
.why-full .stat b{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(84px,12.5vw,190px);line-height:.9;color:var(--accent-hi);letter-spacing:-.02em;
  opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.why-full.in .stat b{opacity:1;transform:none}
.why-full .stat small{
  font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  max-width:18ch;line-height:1.8;
}
.why-full.alt .stat{flex-direction:row-reverse;justify-content:flex-start}
.why-full.alt .stat small{text-align:right}

/* ---- 巨大ワード（無音／無臭、安心 など） ---- */
.why-full .big{display:flex;flex-wrap:wrap;gap:clamp(26px,6vw,84px);margin:16px 0 6px}
.why-full .big span{
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.why-full .big span:nth-child(2){transition-delay:.28s}
.why-full.in .big span{opacity:1;transform:none}
.why-full .big b{
  font-family:"Shippori Mincho",serif;font-weight:500;
  font-size:clamp(72px,11.5vw,172px);line-height:1;letter-spacing:.02em;color:#f4efe4;
}
html[data-lang="en"] .why-full .big b{font-family:"Cormorant Garamond",serif;font-weight:300;font-style:italic;letter-spacing:0}
html[data-lang="zh"] .why-full .big b{font-family:"Noto Serif SC",serif}
.why-full .big small{margin-top:10px;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-hi)}
.why-full.alt .big{justify-content:flex-end}
.why-full.alt .big span{align-items:flex-end;text-align:right}
.why-full.alt .body > .note{text-align:right}

/* ============================================================
   双胴船シミュレーション（SVGアニメーション）
   ============================================================ */
/* 双胴船パネル：左下＝見出し・数値 ／ 右上〜中＝説明文 ／ 右下＝シミュレーション */
.why-full.has-sim{align-items:stretch}
.why-full.has-sim .body{
  min-height:100%;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:1fr auto auto auto;align-items:end;
}
.why-full.has-sim .body > .kicker{grid-column:1;grid-row:2}
.why-full.has-sim .body > h3{grid-column:1;grid-row:3}
.why-full.has-sim .body > .stat{grid-column:1;grid-row:4}
.why-full.has-sim .body > p{grid-column:2;grid-row:1;align-self:start;margin:clamp(96px,16svh,180px) 0 0}
.why-full.has-sim .body > .sim{grid-column:2;grid-row:2 / span 3;align-self:end;justify-self:end;width:100%;max-width:560px;margin:0}
.sim svg{width:100%;height:auto;display:block;overflow:visible}
.sim .wave{fill:rgba(201,163,95,.16)}
.sim .wave1{animation:simWave 4.2s linear infinite}
.sim .wave2{fill:rgba(201,163,95,.09);animation:simWave 6.5s linear infinite reverse}
@keyframes simWave{to{transform:translateX(-150px)}}
.sim .hull{fill:#0f1216;stroke:var(--accent-hi);stroke-width:1.6;stroke-linejoin:round}
.sim .deck{fill:#141a21;stroke:var(--accent-hi);stroke-width:1.4}
.sim .mono{transform-box:fill-box;transform-origin:50% 60%;animation:simRock 4.2s ease-in-out infinite}
@keyframes simRock{
  0%{transform:translateY(0) rotate(-8deg)}
  50%{transform:translateY(-10px) rotate(8deg)}
  100%{transform:translateY(0) rotate(-8deg)}
}
.sim .cat{transform-box:fill-box;transform-origin:50% 60%;animation:simBob 4.2s ease-in-out infinite}
@keyframes simBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2px) rotate(.6deg)}}
.sim .lbl{font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;fill:var(--dim)}
.sim .lbl.on{fill:var(--accent-hi)}
.sim .glyph{font-family:"Shippori Mincho",serif;font-size:13px;fill:var(--accent-hi)}
.sim .glass{fill:none;stroke:var(--accent-hi);stroke-width:1.2}
.sim .wine{fill:rgba(201,163,95,.55)}

/* ============================================================
   バーメニュー：大きく、濃く、厚く
   ============================================================ */
.bmenu .m-note{margin-top:18px;color:var(--accent-hi);font-size:17px;letter-spacing:.08em;font-weight:500}
.bmenu-grid h3{font-size:26px;font-weight:500;color:var(--accent-hi);letter-spacing:.34em}
.bmenu-grid li{font-size:22px;font-weight:500;color:#f4efe4;letter-spacing:.05em;margin-top:20px}
.bmenu .bmenu-grid li i{font-size:20px !important;color:#e6e1d6 !important;margin-top:6px;font-weight:400;font-style:italic;letter-spacing:.06em;line-height:1.4;white-space:nowrap}
.bmenu{max-width:940px}
.bmenu-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,90px);row-gap:clamp(36px,5svh,56px)}
.bmenu-grid li{white-space:nowrap}
@media(max-width:560px){.bmenu-grid{grid-template-columns:1fr}.bmenu-grid li{white-space:normal}}
.bmenu .m-welcome{margin-top:clamp(28px,4svh,44px);font-size:16.5px;color:var(--accent-hi);letter-spacing:.04em;line-height:1.9;font-weight:500}
.bmenu .m-disc{margin-top:10px;font-size:14px;color:#b9bec6}

/* ---- モバイル ---- */
@media(max-width:820px){
  .why-full .body,.why-full.alt .body{display:block}
  .why-full .body > p{margin-top:18px}
  .why-full.has-sim .body > .sim{margin-top:22px}
  .why-full.has-sim .body > p{margin-top:18px}
  .why-full.has-sim{align-items:flex-end}
  .why-full .stat b{font-size:72px}
  .why-full .big{gap:26px}
  .why-full .big b{font-size:60px}
  .bmenu-grid li{font-size:19px}
}
.sim .sim-cap{margin-top:8px;font-size:13px;color:var(--dim);letter-spacing:.04em;line-height:1.7}

/* ---- 法務対応：イメージ注記・大切なご案内 ---- */
.img-note{position:absolute;right:14px;bottom:12px;z-index:3;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.55);pointer-events:none}
.lg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,36px) clamp(28px,4vw,56px);margin-top:clamp(28px,4vh,44px)}
.lg-grid h3{font-size:15.5px;letter-spacing:.08em;color:var(--accent-hi);font-weight:500}
.lg-grid p{margin-top:8px;font-size:14.5px;line-height:1.9;color:#d6dae0}
@media(max-width:820px){.lg-grid{grid-template-columns:1fr}}