/* =========================================================
   共通の土台。ここに置くのは単位・色・書体・リビールの仕組み・地の質感だけで、
   レイアウトの指定は style-e.css 以下が持つ。
   ========================================================= */

/* ---- 単位系。カンプの px を calc(N * var(--px)) でそのまま書くための可変1px ----
   三角関数で単位を剥がす書き方（tan(atan2(100vw,1px))）は使わない。
   WebKit では 100vw を渡した時点で結果が 0 になり、calc で組んだ幅と余白が全て潰れる。
   しかも @supports は true を返すのでフォールバックにも落ちない。
   「長さ ÷ 数 ＝ 長さ」で素直に組めば全ブラウザで同じ結果になる。 */
:root{
  /* SPカンプ 390 基準。390px 幅のとき --px はちょうど 1px */
  --px: calc(100vw / 390);
}
@media (min-width:768px){
  /* PCカンプ 1512 基準。min() で「1512px 以上は拡大しない」を作る */
  :root{ --px: min(1px, calc(100vw / 1512)); }
}

:root{
  --ink:#00123D;
  --fg:#F5F2EC;
  --fg-soft:rgba(245,242,236,.62);
  --fg-faint:rgba(245,242,236,.40);
  --rule:rgba(245,242,236,.18);
  --rule-strong:rgba(245,242,236,.30);
  --panel:rgba(245,242,236,.045);
  /* 反転面（Contact・サイネージの導線）で使う紙色側の一式 */
  --acc-bg:#F5F2EC; --acc-fg:#00123D; --acc-muted:#6E6B62; --acc-rule:#C9C3B6;

  --ease-out-quad:cubic-bezier(.25,.46,.45,.94);
  --ease-out-cubic:cubic-bezier(.215,.61,.355,1);
  --ease-out-quart:cubic-bezier(.165,.84,.44,1);
  --ease-out-quint:cubic-bezier(.23,1,.32,1);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);

  --step:70ms; --base-delay:0ms;

  --f-en:'Fraunces',serif;
  --f-jp:'Zen Kaku Gothic New',sans-serif;
  --f-mn:'Shippori Mincho',serif;
  --f-logo:'Poppins',sans-serif;

  --pad: clamp(22px, 5.5vw, calc(96 * var(--px)));
  --maxw: calc(1360 * var(--px));

  /* 文字は clamp の一次式。下限を必ず持たせる */
  --t-body: clamp(13.5px, 12.2px + .28vw, 16.5px);
  --t-small: clamp(11.5px, 10.6px + .2vw, 14px);
  --t-label: clamp(10.5px, 9.8px + .16vw, 12.5px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 章へのアンカーを持つのはトップだけなので、そこにだけ効かせる */
html:has(.pat-e){scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html:has(.pat-e){scroll-behavior:auto} }
body{font-family:var(--f-jp);background:var(--ink);color:var(--fg);
  line-height:1.9;letter-spacing:.02em;font-weight:400;overflow-x:hidden;
  font-feature-settings:"palt"}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--fg);color:var(--ink)}

/* ---- リビール ----
   隠す指定は .js-anim の下だけに書く。JSが動かない環境では最初から読める状態にする。 */
.js-anim [data-reveal]{opacity:0;transform:translateY(calc(20 * var(--px)));
  transition:opacity .9s var(--ease-out-quart), transform 1s var(--ease-out-quart);
  transition-delay:calc(var(--base-delay) + var(--i,0) * var(--step))}
.js-anim [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js-anim [data-reveal],.js-anim [data-reveal].is-in{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- 質感 ---- */
.grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
/* ヒーロー映像の網点。黒ドットとわずかに明るい地で輝度を相殺し、映像を暗くしない */
.dots{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.62) 24%,rgba(255,255,255,.24) 29%,rgba(255,255,255,.24) 100%);
  background-size:4px 4px}

/* ---- ローディング。JSが動く環境にだけ出し、必ず明ける（core-x.js の ready） ---- */
.pre{display:none}
.js-anim .pre{position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:grid;place-items:center;gap:calc(24 * var(--px));grid-auto-flow:row;
  transition:opacity .7s var(--ease-out-quad), visibility .7s}
.pre img{width:min(42vw, calc(280 * var(--px)))}
.pre i{display:block;width:min(50vw, calc(220 * var(--px)));height:1px;background:var(--rule);position:relative;overflow:hidden}
.pre i::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(0);
  animation:preFill 1.3s var(--ease-out-quad) forwards}
@keyframes preFill{to{transform:scaleX(1)}}
html.is-ready .pre{opacity:0;visibility:hidden;pointer-events:none}

/* ---- 無限マーキー ----
   同じ内容を2組並べて -50% まで動かす。継ぎ目が生まれない。
   1要素で 0→-50%→+50% と飛ばす方法は軽いが、
   文字列が画面幅より短いと戻る瞬間に隙間が見える。 */
.mq{overflow:hidden}
.mq-track{display:flex;width:max-content;white-space:nowrap;will-change:transform;
  animation:marq 40s linear infinite}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .mq-track{animation:none} }

/* ---- 開閉メニュー（開閉の制御は core-x.js の menu） ---- */
.menu{position:fixed;inset:0;z-index:900;background:var(--ink);color:var(--fg);
  display:flex;align-items:center;padding:var(--pad);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .7s var(--ease-out-quint),visibility .7s}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible}
.menu nav{display:flex;flex-direction:column;gap:10px}
.menu nav a{font-weight:700;font-size:clamp(32px,18px + 5.4vw,68px);line-height:1.15;letter-spacing:.03em}
.menu-btn{position:fixed;z-index:901;display:flex;flex-direction:column;gap:6px;padding:10px}
.menu-btn span{width:26px;height:1.5px;background:currentColor;display:block;transition:.4s var(--ease-out-quart)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.7px) rotate(-45deg)}

/* ---- 共通の小物 ---- */
.en{font-family:var(--f-en)}
.mn{font-family:var(--f-mn)}
.label{font-family:var(--f-en);font-weight:700;font-size:var(--t-label);letter-spacing:.24em;color:var(--fg-soft)}
/* 数字と単位のあいだで折れると読みにくい語をくくる（「2営業日以内」など） */
.nb{white-space:nowrap}