/* =========================================================
   株式会社関モクヒロックス | Stylesheet
   ----------------------------------------------------------
   Direction C — INK CINEMA (v2)
   墨の全面キャンバス × 生成りの明朝 × 効かせ色のオレンジ。
   「整った掛軸」をやめ、映画ポスター／演劇フライヤーのような
   大胆で非対称な構成へ。縦書き×横書きの混在、行の重なり、
   画面端の裁ち落とし、大きなオレンジの環。影は使わない。
========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* 墨 (ink) */
  --c-ink:#141414;
  --c-ink-2:#1a1a1a;
  --c-ink-3:#1F1F1F;
  --c-ink-deep:#0E0E0E;      /* CTAで締める最も深い漆黒 */

  /* 生成り・紙 (paper / kinari) */
  --c-paper:#F7F3EC;
  --c-paper-2:#F1ECE1;
  --c-paper-3:#E9E2D4;

  /* 紙面のテキスト（暖色グレー） */
  --c-text:#191512;
  --c-text-2:#514B43;
  --c-text-3:#786F63;
  --c-text-4:#9A9182;
  --c-border:rgba(25,21,18,.16);
  --c-border-soft:rgba(25,21,18,.10);

  /* 生成り on 墨（可読性：本文は .78 以上） */
  --c-cream:#F5F1EA;
  --c-cream-88:rgba(245,241,234,.88);
  --c-cream-80:rgba(245,241,234,.80);
  --c-cream-60:rgba(245,241,234,.60);
  --c-cream-42:rgba(245,241,234,.42);
  --c-cream-line:rgba(245,241,234,.16);
  --c-cream-line-2:rgba(245,241,234,.09);

  /* 効かせ色 */
  --c-brand:#EB6101;       /* 正式ブランドオレンジ（支給ロゴ準拠） */
  --c-brand-deep:#C24E00;

  --ff-mincho:"Zen Old Mincho","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --ff-en:"Inter","Helvetica Neue",Arial,sans-serif;

  --header-h:76px;
  --pad:clamp(24px,6vw,96px);
  --maxw:1280px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-out2:cubic-bezier(.16,1,.3,1);

  /* 和紙・漆のグレイン（ダーク面 0.25〜0.35 以下） */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ff-jp);
  color:var(--c-text);
  background:var(--c-paper);
  line-height:1.85;
  font-weight:400;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease-out),opacity .3s var(--ease-out)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--c-brand);color:#fff}

.en{font-family:var(--ff-en);letter-spacing:.02em}
.mincho{font-family:var(--ff-mincho)}
.nb{white-space:nowrap}
.br-pc{display:inline}
@media (max-width:767px){.br-pc{display:none}}
.no-scroll{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 共通インナー */
.page-hero__wrap,.catch__inner,.ledger__inner,.figures__inner,.cta-band__inner,.footer-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
}

/* =========================================================
   INDEX — INK CINEMA ポスター（TOP・1画面完結 100dvh）
========================================================= */
body.ink-stage{
  height:100vh;height:100dvh;overflow:hidden;
  background:
    radial-gradient(115% 120% at 88% 6%,var(--c-ink-3) 0%,var(--c-ink) 52%,#101010 100%);
  color:var(--c-cream);
  font-family:var(--ff-jp);
}
body.ink-stage::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.28;background-image:var(--grain);background-size:180px 180px;
}

.poster{
  --poster-pad:clamp(26px,3.4vw,54px);
  position:relative;z-index:1;
  width:100%;height:100vh;height:100dvh;overflow:hidden;
  padding:var(--poster-pad) clamp(28px,4vw,70px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  row-gap:clamp(14px,2vh,26px);
}

/* ---- 上部：社名（左）＋ナビ（右） ---- */
.poster__head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
}
.poster__brand{
  font-family:var(--ff-mincho);
  font-size:15px;line-height:1.5;letter-spacing:.09em;font-weight:600;color:var(--c-cream);
}
.poster__brand .en{
  display:block;font-family:var(--ff-en);font-size:10px;letter-spacing:.2em;
  font-weight:500;color:var(--c-cream-42);margin-top:5px;
}
.poster__brand .brand__logo{height:32px}
.poster__nav{
  display:flex;flex-wrap:wrap;gap:clamp(20px,2.4vw,34px);
  font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-align:right;
}
.poster__nav a{
  position:relative;color:var(--c-cream);padding-bottom:5px;display:inline-block;
  transition:color .3s var(--ease-out);
}
.poster__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--c-brand);
  transform:scaleX(0);transform-origin:right center;transition:transform .4s var(--ease-out2);
}
.poster__nav a:hover{color:var(--c-brand)}
.poster__nav a:hover::after{transform:scaleX(1);transform-origin:left center}
.poster__nav .bk{opacity:.4;margin:0 1px}

/* ---- 中央ステージ（重なり・裁ち落としのポスター面） ---- */
.poster__stage{position:relative;overflow:hidden}

/* 1点だけの強いグラフィック：裁ち落としの大きなオレンジ環（SVGストロークドロー） */
.poster__ring{
  position:absolute;pointer-events:none;z-index:0;
  right:-9vw;top:-16%;
  width:clamp(360px,44vw,640px);aspect-ratio:1;
  overflow:visible;
}
.poster__ring circle{
  stroke:rgba(235,97,1,.62);stroke-width:1.5;fill:none;
  vector-effect:non-scaling-stroke;
  transform:rotate(-90deg);transform-origin:50% 50%;
}
/* 副次アクセント：左の細いオレンジ罫（スパイン） */
.poster__seal{
  position:absolute;z-index:0;pointer-events:none;
  left:0;top:12%;width:2px;height:clamp(110px,20vh,190px);
  background:linear-gradient(180deg,var(--c-brand),rgba(235,97,1,0));
}

/* ステートメント：左寄せ横書きの2行スタック（小見出し→特大タイトル） */
.poster__statement{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:clamp(10px,1.4vh,20px);
  padding-left:clamp(30px,4vw,72px);
}
.poster__statement .s-vert{
  writing-mode:horizontal-tb;
  font-family:var(--ff-mincho);font-weight:500;
  font-size:clamp(30px,3.3vw,50px);line-height:1.2;letter-spacing:.12em;
  color:var(--c-cream-88);font-feature-settings:"palt" 0;
  padding-left:.14em;
}
.poster__statement .s-horz{
  font-family:var(--ff-mincho);font-weight:600;
  font-size:clamp(72px,10.5vw,168px);line-height:.98;letter-spacing:.02em;
  color:var(--c-cream);white-space:nowrap;font-feature-settings:"palt" 0;
}
.poster__statement .s-horz .dot{color:var(--c-brand)}

/* 説明文（ポスターのロギング的コピー） */
.poster__logline{
  position:absolute;z-index:3;left:0;bottom:0;
  max-width:clamp(280px,30vw,356px);
  padding-top:16px;border-top:1px solid var(--c-cream-line);
  font-size:14px;line-height:2.02;letter-spacing:.02em;color:var(--c-cream-80);
  text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;
}
.poster__logline::before{
  content:"";position:absolute;left:0;top:-1px;width:52px;height:2px;background:var(--c-brand);
}

/* ---- 最下部：メタ（クレジット） ---- */
.poster__credits{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--ff-en);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  color:var(--c-cream-60);
}
.poster__credits .c-name{color:var(--c-cream-80)}
.poster__credits .dim{color:var(--c-cream-42)}

/* ---- ポスター レスポンシブ ---- */
@media (max-width:1023px){
  .poster__statement .s-horz{font-size:clamp(72px,12vw,150px);left:clamp(64px,20vw,220px)}
  .poster__statement .s-vert{font-size:clamp(30px,4.6vw,52px)}
  .poster__logline{max-width:44vw}
}
@media (max-width:767px){
  body.ink-stage{height:auto;min-height:100dvh;overflow-y:auto;overflow-x:hidden}
  .poster{
    height:auto;min-height:100dvh;overflow:visible;
    padding:26px 22px 30px;row-gap:0;
    grid-template-rows:auto 1fr auto;
  }
  .poster__head{flex-direction:column;gap:22px;align-items:flex-start}
  .poster__nav{text-align:left;gap:22px}
  /* ステートメント＋説明文を下寄せに束ね、上部の空きはリングの弧で埋める。
     テキストとクレジットを近づけて下端の死に余白を解消 */
  .poster__stage{
    position:relative;overflow:visible;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-top:clamp(40px,10vh,96px);
  }
  .poster__ring{width:min(82vw,360px);right:-14vw;top:2%}
  .poster__seal{top:6%}
  .poster__statement{position:relative;inset:auto;min-height:0;display:block;padding-left:0;gap:0}
  .poster__statement .s-vert{
    position:relative;left:auto;top:auto;
    writing-mode:horizontal-tb;
    font-size:clamp(28px,8vw,44px);letter-spacing:.06em;color:var(--c-cream);
    display:block;
  }
  .poster__statement .s-horz{
    position:relative;left:auto;bottom:auto;
    display:block;margin-top:6px;white-space:normal;
    font-size:clamp(52px,17vw,96px);line-height:1.02;
  }
  .poster__logline{
    position:relative;left:auto;bottom:auto;max-width:none;margin-top:40px;
  }
  .poster__credits{
    flex-direction:column;align-items:flex-start;gap:9px;margin-top:clamp(28px,5vh,48px);font-size:10px;
  }
}

/* =========================================================
   ABOUT — Header
   デフォルト＝墨ヒーロー上（透明・生成り文字）。
   スクロールで紙面に乗ると is-solid で反転（JS）。
========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height:var(--header-h);
  color:var(--c-cream);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out);
}
.site-header.is-solid{
  color:var(--c-text);
  background:rgba(247,243,236,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--c-border);
}
.header-inner{
  height:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:14px}
/* 正式SHロゴマーク（ベクター・オレンジ地に白のSH） */
.brand__mark{
  height:30px;width:auto;flex:none;display:block;
}
.brand__txt{display:flex;flex-direction:column;line-height:1.25}
.brand__jp{font-family:var(--ff-mincho);font-size:15px;font-weight:600;letter-spacing:.06em}
.brand__en{font-family:var(--ff-en);font-size:9.5px;letter-spacing:.16em;opacity:.6;margin-top:3px}

/* 正式ロゴ ロックアップ（フル版）— 地色に応じて濃/淡2バージョンを切替 */
.brand__logo{height:30px;width:auto;display:block}
.brand__logo--light{display:none}
.site-header.is-solid .brand__logo--dark{display:none}
.site-header.is-solid .brand__logo--light{display:block}

.nav{display:flex;align-items:center;gap:38px}
.nav__link{
  font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.08em;
  position:relative;padding:6px 0;display:inline-flex;align-items:baseline;gap:6px;
}
.nav__link::before{
  content:"[" attr(data-letter) "]";
  font-family:var(--ff-en);font-size:11px;font-weight:600;
  opacity:.42;transition:opacity .3s var(--ease-out),color .3s var(--ease-out);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--ease-out2);
}
.nav__link:hover::before{opacity:.9}
.nav__link:hover::after,
.nav__link.is-current::after{transform:scaleX(1);transform-origin:left center}
.nav__link.is-current::before{opacity:1;color:var(--c-brand)}
.nav-toggle{display:none}

@media (max-width:1023px){
  .nav{
    position:fixed;left:0;right:0;top:var(--header-h);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--c-ink);color:var(--c-cream);
    padding:20px var(--pad) 40px;
    transform:translateY(-120%);visibility:hidden;opacity:0;pointer-events:none;
    transition:transform .55s var(--ease-out2),opacity .35s var(--ease-out),visibility 0s linear .35s;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{
    transform:translateY(0);visibility:visible;opacity:1;pointer-events:auto;
    transition:transform .55s var(--ease-out2),opacity .35s var(--ease-out),visibility 0s linear 0s;
  }
  .nav__link{
    padding:20px 0;border-bottom:1px solid var(--c-cream-line);
    font-size:16px;justify-content:space-between;color:var(--c-cream);
  }
  .nav__link::after{display:none}
  .nav__link::before{content:"[" attr(data-letter) "]  " attr(data-en);opacity:.5;font-size:11px}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:32px;height:32px;position:relative;z-index:60;color:currentColor;
  }
  .nav-toggle span{display:block;width:100%;height:1.5px;background:currentColor;
    transition:transform .4s var(--ease-out),opacity .3s}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:14px;padding:19px 32px;
  background:var(--c-ink);color:var(--c-cream);border:1px solid var(--c-ink);
  font-family:var(--ff-jp);font-size:13.5px;font-weight:600;letter-spacing:.08em;
  transition:background .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out);
}
.btn--brand{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.btn--brand:hover{background:transparent;color:var(--c-brand)}
.btn .arrow{display:inline-block;font-family:var(--ff-en);transition:transform .4s var(--ease-out)}
.btn:hover .arrow{transform:translateX(6px)}

/* =========================================================
   Shared labels
========================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--ff-en);font-size:11px;letter-spacing:.22em;font-weight:600;
  color:var(--c-text-3);
}
.eyebrow__dot{width:6px;height:6px;background:var(--c-brand);flex:none}

/* =========================================================
   ABOUT — Page Hero（墨・特大明朝の裁ち落とし）
========================================================= */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--header-h) + clamp(70px,12vh,128px)) 0 clamp(64px,10vh,110px);
  background:radial-gradient(120% 130% at 84% 6%,var(--c-ink-3) 0%,var(--c-ink) 58%);
  color:var(--c-cream);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.26;background-image:var(--grain);background-size:180px 180px;
}
/* 裁ち落としのオレンジ環（パララックス対象のため実要素） */
.page-hero__ring{
  position:absolute;pointer-events:none;z-index:-1;
  right:-8vw;top:-30%;width:clamp(340px,40vw,560px);aspect-ratio:1;
  border-radius:50%;border:1.5px solid rgba(235,97,1,.5);
  will-change:transform;
}
.page-hero__wrap{position:relative}
.page-hero__breadcrumb{
  display:flex;gap:14px;font-family:var(--ff-en);font-size:11px;
  letter-spacing:.18em;color:var(--c-cream-60);margin-bottom:34px;
}
.page-hero__breadcrumb span{opacity:.6}
.page-hero__breadcrumb b{font-weight:600;color:var(--c-cream)}
.page-hero__eyebrow{
  font-family:var(--ff-en);font-size:12px;font-weight:600;letter-spacing:.22em;
  color:var(--c-cream-42);margin-bottom:20px;
}
.page-hero__title{
  font-family:var(--ff-mincho);font-weight:700;
  font-size:clamp(46px,7.8vw,110px);line-height:1.02;letter-spacing:.01em;
  color:var(--c-cream);margin-left:-.04em;
  word-break:keep-all;
}
.page-hero__title .dot{color:var(--c-brand)}
.page-hero__lead{
  margin-top:34px;max-width:42ch;
  font-size:15px;line-height:2.15;color:var(--c-cream-80);
  text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;
}
.page-hero__lead--wide{max-width:40em}

/* =========================================================
   ABOUT — 3-line catch（生成り紙面）
========================================================= */
.catch{
  padding-block:clamp(84px,14vh,148px);
  background:var(--c-paper);border-bottom:1px solid var(--c-border-soft);
}
.catch__inner{display:flex;flex-direction:column;gap:clamp(14px,2.4vh,26px)}
.catch__line{
  font-family:var(--ff-mincho);font-weight:500;
  font-size:clamp(18px,2vw,28px);line-height:1.9;letter-spacing:.04em;color:var(--c-text);
  text-wrap:pretty;word-break:keep-all;
}
.catch__line em{
  font-style:normal;font-weight:700;color:var(--c-text);
}
@media (max-width:767px){
  .catch__line{font-size:clamp(16px,4.4vw,22px);letter-spacing:.015em;line-height:1.85}
}

/* =========================================================
   ABOUT — Company Info（生成り紙面・帳票）
========================================================= */
.ledger{padding-block:clamp(84px,12vh,132px);background:var(--c-paper)}
.ledger__head{
  display:grid;grid-template-columns:1.35fr 1fr;gap:24px 56px;align-items:end;
  grid-template-areas:"eb eb" "ttl lead";
  margin-bottom:56px;
}
.ledger__head .eyebrow{grid-area:eb}
.ledger__title{
  grid-area:ttl;
  font-family:var(--ff-mincho);font-weight:700;
  font-size:clamp(28px,3.8vw,52px);line-height:1.2;letter-spacing:.02em;color:var(--c-text);
  word-break:keep-all;
}
.ledger__lead{grid-area:lead}
.ledger__title small{
  display:block;font-family:var(--ff-en);font-size:11px;font-weight:600;
  letter-spacing:.2em;color:var(--c-text-4);margin-top:20px;
}
.ledger__lead{font-size:15px;line-height:2.1;color:var(--c-text-2);max-width:44ch;text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}

.ledger__table{border-top:2px solid var(--c-text)}
.ledger__table dl{
  display:grid;grid-template-columns:240px 1fr;align-items:baseline;
  gap:32px;padding:24px 6px;border-bottom:1px solid var(--c-border-soft);
  transition:background .4s var(--ease-out),padding-left .4s var(--ease-out);
}
.ledger__table dl:hover{background:var(--c-paper-2);padding-left:22px}
.ledger__table dt{
  font-family:var(--ff-mincho);font-size:17px;font-weight:600;letter-spacing:.06em;color:var(--c-text);
  white-space:nowrap;
}
.ledger__table .val{font-size:15px;line-height:2;color:var(--c-text-2);word-break:keep-all;overflow-wrap:anywhere}
.ledger__table .val strong{color:var(--c-text);font-weight:700}
.ledger__table .map-link{
  display:inline-flex;align-items:center;gap:6px;margin-left:12px;
  font-size:11.5px;color:var(--c-brand);font-weight:600;letter-spacing:.04em;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.ledger__table .map-link:hover{color:var(--c-brand-deep)}
@media (max-width:1023px){
  .ledger__head{grid-template-columns:1fr;grid-template-areas:"eb" "ttl" "lead";gap:22px;margin-bottom:44px}
}
@media (max-width:767px){
  .ledger__table dl{grid-template-columns:1fr;gap:5px;padding:20px 0}
  .ledger__table dl:hover{padding-left:0}
  .ledger__table dt{font-size:16px}
  .ledger__table .val{margin-top:2px}
}

/* =========================================================
   ABOUT — Numbers（生成り紙面・特大）
========================================================= */
.figures{padding-block:clamp(84px,12vh,130px);background:var(--c-paper-2);border-top:1px solid var(--c-border-soft)}
.figures__head{
  display:grid;grid-template-columns:1.35fr 1fr;gap:24px 56px;align-items:end;
  grid-template-areas:"eb eb" "ttl lead";
  margin-bottom:52px;
}
.figures__head .eyebrow{grid-area:eb}
.figures__title{
  grid-area:ttl;
  font-family:var(--ff-mincho);font-weight:700;
  font-size:clamp(25px,3.3vw,44px);line-height:1.28;letter-spacing:.02em;color:var(--c-text);
}
.figures__lead{grid-area:lead}
.figures__title small{
  display:block;font-family:var(--ff-en);font-size:11px;font-weight:600;
  letter-spacing:.2em;color:var(--c-text-4);margin-top:18px;
}
.figures__lead{font-size:15px;line-height:2.1;color:var(--c-text-2);max-width:44ch;text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.figures__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--c-text);
}
.fig{
  padding:44px 30px 40px;border-right:1px solid var(--c-border-soft);
  display:flex;flex-direction:column;gap:16px;
}
.fig:last-child{border-right:0}
.fig__label{
  position:relative;padding-left:16px;
  font-family:var(--ff-en);font-size:10px;color:var(--c-text-3);
  letter-spacing:.2em;font-weight:700;text-transform:uppercase;
}
.fig__label::before{content:"";position:absolute;left:0;top:.35em;width:7px;height:7px;background:var(--c-brand)}
.fig__value{
  font-family:var(--ff-en);font-size:clamp(42px,4.6vw,72px);
  font-weight:800;line-height:.9;color:var(--c-text);letter-spacing:-.03em;
  display:flex;align-items:baseline;
}
.fig__unit{
  font-family:var(--ff-mincho);font-size:.26em;color:var(--c-text-2);
  margin-left:9px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
}
.fig__note{font-size:13px;color:var(--c-text-3);line-height:1.8;text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@media (max-width:1023px){
  .figures__head{grid-template-columns:1fr;grid-template-areas:"eb" "ttl" "lead";gap:20px;margin-bottom:40px}
  .figures__grid{grid-template-columns:repeat(2,1fr)}
  .fig{padding:34px 22px}
  .fig:nth-child(2n){border-right:0}
  .fig:nth-child(1),.fig:nth-child(2){border-bottom:1px solid var(--c-border-soft)}
}
@media (max-width:479px){
  .figures__grid{grid-template-columns:1fr}
  .fig{border-right:0;border-bottom:1px solid var(--c-border-soft)}
  .fig:last-child{border-bottom:0}
}

/* =========================================================
   ABOUT — CTA band（漆黒で締める）
========================================================= */
.cta-band{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--c-ink-deep);color:var(--c-cream);
  padding-block:clamp(84px,14vh,138px);
}
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.26;background-image:var(--grain);background-size:180px 180px;
}
.cta-band__ring{
  position:absolute;pointer-events:none;z-index:-1;
  left:-6vw;bottom:-40%;width:clamp(300px,36vw,520px);aspect-ratio:1;
  border-radius:50%;border:1.5px solid rgba(235,97,1,.42);
  will-change:transform;
}
.cta-band__inner{
  display:grid;grid-template-columns:1fr auto;gap:56px;align-items:end;
}
.cta-band h2{
  font-family:var(--ff-mincho);font-weight:700;
  font-size:clamp(25px,3.2vw,44px);line-height:1.5;letter-spacing:.03em;color:var(--c-cream);
  word-break:keep-all;
}
.cta-band h2 em{
  font-style:normal;
  background-image:linear-gradient(var(--c-brand),var(--c-brand));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px;padding-bottom:.1em;
}
.cta-band p{margin-top:26px;color:var(--c-cream-60);font-size:14.5px;line-height:2;max-width:46ch;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
@media (max-width:1023px){
  .cta-band__inner{grid-template-columns:1fr;gap:34px}
}
@media (max-width:767px){
  .cta-band h2{font-size:22px;line-height:1.55}
}

/* =========================================================
   ABOUT — Footer（墨）
========================================================= */
.site-footer{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--c-ink);color:var(--c-cream);
  padding:clamp(72px,10vh,104px) 0 34px;
}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.22;background-image:var(--grain);background-size:180px 180px;
}
.footer-inner{display:grid;gap:64px}
.footer-top{
  display:grid;grid-template-columns:1fr 1fr;gap:72px;
  padding-bottom:60px;border-bottom:1px solid var(--c-cream-line);
}
.footer-brand .brand__mark{color:#fff}
.footer-brand .brand__jp{color:var(--c-cream)}
.footer-brand .brand__en{color:var(--c-cream-60)}
.footer-brand .brand__logo{height:32px}
.footer-tagline{
  font-family:var(--ff-mincho);font-weight:700;
  font-size:clamp(44px,5.4vw,80px);line-height:1.02;margin-top:40px;letter-spacing:.03em;color:var(--c-cream);
}
.footer-tagline em{font-style:normal;color:var(--c-brand)}
.footer-nav{display:grid;gap:44px}
.footer-nav__title{
  font-family:var(--ff-en);font-size:11px;letter-spacing:.2em;color:var(--c-cream-42);margin-bottom:20px;
}
.footer-nav__list{display:grid;gap:15px}
.footer-nav__list a{font-size:14px;font-weight:500;color:var(--c-cream);letter-spacing:.04em}
.footer-nav__list a:hover{color:var(--c-brand)}
.footer-info{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}
.footer-info dt{font-family:var(--ff-en);font-size:10px;letter-spacing:.2em;color:var(--c-cream-42);margin-bottom:12px}
.footer-info dd{font-size:13px;color:var(--c-cream-80);line-height:1.85}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--ff-en);font-size:11px;letter-spacing:.14em;color:var(--c-cream-42);
}
@media (max-width:1023px){
  .footer-top{grid-template-columns:1fr;gap:52px}
  .footer-info{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column;gap:10px;align-items:flex-start}
}

@media print{
  .site-header,.cta-band{display:none}
  body{background:#fff;color:#000}
}

/* =========================================================
   MOTION LAYER — アニメーション実装
   ----------------------------------------------------------
   方針: 強い減速easing×二層duration。
   ・FV（poster / page-hero）＝ロード直後のCSS自動再生（LCP保護・no-JS安全）
   ・スクロール出現＝IO発火・一度きり・html.js配下限定
   ・reduced-motion＝末尾のブロックで全停止（即時表示）
========================================================= */
:root{
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}

@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes m-mask-rise{
  from{clip-path:inset(100% 0 0 0);transform:translateY(36px)}
  to{clip-path:inset(0 0 0 0);transform:none}
}
@keyframes m-ring{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
@keyframes m-scale-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-scale-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---- TOP poster：入場コレオグラフィ（CSS自動再生） ---- */
.poster__brand{animation:m-rise .8s var(--ease-out-quint) .12s both}
.poster__nav{animation:m-rise .8s var(--ease-out-quint) .24s both}
.poster__statement .s-horz{animation:m-mask-rise 1.15s var(--ease-out-expo) .22s both}
.poster__statement .s-vert{animation:m-fade 1.2s var(--ease-out-quint) .6s both}
/* 環は「線が描かれる」ストロークドローで入場（transformはマウス視差が所有） */
.poster__ring circle{animation:ring-draw 1.9s var(--ease-out-expo) var(--ring-d,.4s) both}
@keyframes ring-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.poster__seal{transform-origin:top center;animation:m-scale-y .9s var(--ease-out-expo) .95s both}
.poster__logline{animation:m-rise .9s var(--ease-out-quint) .82s both}
.poster__logline::before{transform-origin:left center;animation:m-scale-x .7s var(--ease-out-expo) 1.1s both}
.poster__credits{animation:m-fade .9s var(--ease-out-quint) 1.1s both}

/* ---- 下層 page-hero：入場コレオグラフィ（CSS自動再生） ---- */
.site-header{animation:m-fade .7s ease .05s both}
.page-hero__breadcrumb{animation:m-rise .7s var(--ease-out-quint) .1s both}
.page-hero__eyebrow{animation:m-rise .7s var(--ease-out-quint) .2s both}
.page-hero__title{animation:m-mask-rise 1.1s var(--ease-out-expo) .28s both}
.page-hero__lead{animation:m-rise .9s var(--ease-out-quint) .52s both}
.page-hero__ring{animation:m-fade 1.5s var(--ease-out-quint) .45s both}

/* ---- 文字分割リビール（js-chars：JSが1文字ずつ .ch を生成） ----
   横書き=1文字ずつマスクライズ／縦書き=フェードのみ（縦組みでtransformは破綻するため）
   句点等の要素ユニット(.dot)は最後にポップ。a11y=親見出しのaria-labelで読み上げ */
.js-chars .ch{display:inline-block}
.js-chars.is-split{animation:none}
.s-vert{--chd:var(--vert-d,.28s)}
.s-horz{--chd:var(--stmt-d,.5s)}
.page-hero__title{--chd:var(--hero-d,.3s)}
.js-chars .ch{
  animation:ch-rise .95s var(--ease-out-expo) both;
  animation-delay:calc(var(--chd,.3s) + var(--ch-i,0) * .07s);
}
.s-vert .ch{
  animation-name:m-fade;animation-duration:1.05s;
  animation-timing-function:var(--ease-out-quint);
  animation-delay:calc(var(--chd,.58s) + var(--ch-i,0) * .05s);
}
.js-chars .dot.ch{
  animation-name:dot-pop;animation-duration:.65s;
  animation-timing-function:cubic-bezier(.34,1.56,.64,1);
  animation-delay:calc(var(--chd,.3s) + var(--ch-i,0) * .07s + .12s);
}
@keyframes ch-rise{
  from{clip-path:inset(100% 0 0 0)}
  to{clip-path:inset(-.25em 0 0 0)}
}
@keyframes dot-pop{
  from{opacity:0;transform:scale(.3)}
  62%{opacity:1;transform:scale(1.1)}
  to{opacity:1;transform:scale(1)}
}

/* ---- スクロールリビール（IO・一度きり・html.js配下限定） ----
   出現はanimationで行い、各要素固有のhover用transitionを潰さない */
.js .js-reveal,
.js .js-reveal-group > *{opacity:0}
.js .js-reveal.is-inview{animation:m-rise .9s var(--ease-out-quint) both}
.js .js-reveal-group.is-inview > *{
  animation:m-rise .85s var(--ease-out-quint) both;
  animation-delay:var(--reveal-delay,0s);
}

/* ---- 行マスク（js-lines：JSが<br>区切りで .line>.line__inner を生成） ---- */
/* マスクはclip-pathで行う（overflow+padding方式はem下線のクリップと
   高さ丸めの累積ズレを生むため不採用）。終端は負insetで下線・ルビ余白を確保 */
.js-lines .line{display:block}
.js .js-lines .line__inner{
  display:block;
  clip-path:inset(100% 0 0 0);
  transform:translateY(.55em);
  transition:clip-path 1.05s var(--ease-out-expo),transform 1.05s var(--ease-out-expo);
  transition-delay:calc(var(--line-i,0) * .12s);
}
.js .js-lines.is-inview .line__inner{
  clip-path:inset(-.5em 0 -.5em 0);
  transform:none;
}

/* ---- カウントアップ（数字幅のガタつき防止） ---- */
.js-counter{font-variant-numeric:tabular-nums}

/* ---- ヘッダー出し入れ（下スクロールで退避・上スクロールで復帰） ---- */
.site-header{
  transition:background .4s var(--ease-out),color .4s var(--ease-out),
    border-color .4s var(--ease-out),transform .5s var(--ease-out-quint);
}
.site-header.is-hidden{transform:translateY(-100%)}

/* ---- ページ遷移（cross-document View Transitions・未対応は通常遷移） ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .45s var(--ease-out-quint) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- 見出しの折返し調整（figures：単独行防止） ---- */
.figures__title{font-size:clamp(34px,4.2vw,58px);word-break:keep-all}

/* ---- ローディング（初回のみ・控えめ） ----
   has-loader は head のインラインscriptが初回訪問時のみ付与。
   no-JS＝クラスが付かないため表示されない（全画面白幕事故の防止） */
.loader{display:none}
html.has-loader .loader{
  position:fixed;inset:0;z-index:999;
  display:grid;place-items:center;
  background:var(--c-ink);
  clip-path:inset(0);
  transition:clip-path .75s var(--ease-out-expo),visibility 0s .75s;
}
/* 幕が上がるカーテンワイプで退場 → ヒーロー入場へ受け渡す */
html.has-loader .loader.is-done{clip-path:inset(0 0 100% 0);visibility:hidden}
.loader__inner{transition:opacity .35s ease,transform .5s var(--ease-out-quint)}
html.has-loader .loader.is-done .loader__inner{opacity:0;transform:translateY(-24px)}
.loader__inner{display:grid;justify-items:center;gap:20px}
.loader__mark{
  display:block;width:128px;height:64px;
  animation:m-rise .7s var(--ease-out-quint) .05s both;
}
.loader__bar{
  width:128px;height:2px;background:var(--c-cream-line-2);
  position:relative;overflow:hidden;
  animation:m-fade .5s ease .2s both;
}
.loader__bar::before{
  content:"";position:absolute;inset:0;background:var(--c-brand);
  transform:scaleX(0);transform-origin:left center;
  animation:loader-fill 1s var(--ease-out-quart) .3s both;
}
@keyframes loader-fill{to{transform:scaleX(1)}}

/* ローダー表示中（初回訪問）はヒーロー入場を約0.9s待たせて受け渡す */
html.has-loader{--stmt-d:1.34s;--vert-d:1.12s;--ring-d:1.3s;--hero-d:1.2s}
html.has-loader .poster__brand{animation-delay:1.02s}
html.has-loader .poster__nav{animation-delay:1.14s}
html.has-loader .poster__seal{animation-delay:1.85s}
html.has-loader .poster__logline{animation-delay:1.72s}
html.has-loader .poster__logline::before{animation-delay:2s}
html.has-loader .poster__credits{animation-delay:2s}
html.has-loader .site-header{animation-delay:.95s}
html.has-loader .page-hero__breadcrumb{animation-delay:1s}
html.has-loader .page-hero__eyebrow{animation-delay:1.1s}
html.has-loader .page-hero__title{animation-delay:1.18s}
html.has-loader .page-hero__lead{animation-delay:1.42s}
html.has-loader .page-hero__ring{animation-delay:1.35s}

/* ---- reduced-motion：全停止・即時表示（省略禁止の標準ブロック） ---- */
@media (prefers-reduced-motion: reduce){
  .poster__brand,.poster__nav,
  .poster__statement .s-horz,.poster__statement .s-vert,
  .poster__ring,.poster__seal,
  .poster__logline,.poster__logline::before,.poster__credits,
  .site-header,
  .page-hero__breadcrumb,.page-hero__eyebrow,.page-hero__title,.page-hero__lead,
  .page-hero__ring,.cta-band__ring,.poster__ring circle{animation:none !important}
  .js-chars .ch,.js-chars.is-split{animation:none !important;opacity:1 !important;transform:none !important;clip-path:none !important}
  html.has-loader .loader{display:none !important}
  .loader__mark,.loader__bar,.loader__bar::before{animation:none !important}
  .js .js-reveal,
  .js .js-reveal-group > *{opacity:1 !important;animation:none !important;transform:none !important}
  .js .js-lines .line__inner{transform:none !important;clip-path:none !important;transition:none !important}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important}
  html{scroll-behavior:auto !important}
}

/* =========================================================
   LIGHT × BLUE THEME OVERRIDE  （2026-07-14 追加・青版）
   墨面→白面／生成りの文字→黒・グレー文字／
   ブランドオレンジ #EB6101 → コーポレートブルー #0B63CE。
   末尾＝ソース順で既存宣言を上書き。現行(html/)には無い青版専用。
========================================================= */
:root{
  --c-ink:#FFFFFF;   --c-ink-2:#FFFFFF;  --c-ink-3:#F4F7FB;  --c-ink-deep:#EAF1FB;
  --c-paper:#FFFFFF; --c-paper-2:#F4F7FB; --c-paper-3:#EAEFF6;
  --c-text:#16202B;  --c-text-2:#39434F; --c-text-3:#586472; --c-text-4:#6E7A86;
  --c-border:rgba(20,32,45,.14); --c-border-soft:rgba(20,32,45,.08);
  --c-cream:#16202B;
  --c-cream-88:rgba(22,32,43,.92); --c-cream-80:rgba(22,32,43,.74);
  --c-cream-60:rgba(22,32,43,.58); --c-cream-42:rgba(22,32,43,.50);
  --c-cream-line:rgba(20,32,45,.12); --c-cream-line-2:rgba(20,32,45,.07);
  --c-brand:#0B63CE; --c-brand-deep:#0A4FA6;
}
body{background:var(--c-paper);color:var(--c-text)}

/* --- TOP poster：白面・黒文字・青アクセント --- */
body.ink-stage{
  background:radial-gradient(120% 130% at 88% 6%,#FFFFFF 0%,#F4F7FB 60%,#EAEFF6 100%);
  color:var(--c-text);
}
body.ink-stage::before{opacity:.05}
.poster__ring circle{stroke:rgba(11,99,206,.48)}
.poster__seal{background:linear-gradient(180deg,var(--c-brand),rgba(11,99,206,0))}

/* --- Header：淡色地用ロゴ（濃文字＋青マーク）を常時表示 --- */
.brand__logo--dark{display:none}
.brand__logo--light{display:block}
.site-header.is-solid .brand__logo--dark{display:none}
.site-header.is-solid .brand__logo--light{display:block}
.site-header.is-solid{background:rgba(255,255,255,.9);color:var(--c-text)}

/* --- Buttons：既定＝濃紺ソリッド／brand＝青 --- */
.btn{background:#16202B;border-color:#16202B;color:#fff}
.btn:hover{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.btn--brand{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.btn--brand:hover{background:transparent;color:var(--c-brand)}

/* --- page-hero：白面・黒文字・青環 --- */
.page-hero{background:radial-gradient(120% 130% at 84% 6%,#FFFFFF 0%,#F4F7FB 62%)}
.page-hero::before{opacity:.05}
.page-hero__ring{border-color:rgba(11,99,206,.4)}

/* --- CTA band：淡青面で締める --- */
.cta-band{background:var(--c-ink-deep);color:var(--c-text)}
.cta-band::before{opacity:.06}
.cta-band__ring{border-color:rgba(11,99,206,.34)}

/* --- Footer：白面・黒/グレー文字 --- */
.site-footer{background:#FFFFFF;color:var(--c-text);border-top:1px solid var(--c-border)}
.site-footer::before{opacity:.05}

/* --- Loader：白幕・青バー --- */
html.has-loader .loader{background:#FFFFFF}

/* --- Mobile nav overlay：白面 --- */
@media (max-width:1023px){
  .nav{background:#FFFFFF;color:var(--c-text);border-bottom:1px solid var(--c-border)}
  .nav__link{color:var(--c-text)}
}

::selection{background:var(--c-brand);color:#fff}

/* =========================================================
   LEGAL（プライバシーポリシー等の読み物ページ・青版）
========================================================= */
.legal{padding-block:clamp(64px,10vh,110px);background:var(--c-paper)}
.legal__inner{width:100%;max-width:860px;margin-inline:auto;padding-inline:var(--pad)}
.legal__intro{
  font-size:15px;line-height:2.05;color:var(--c-text-2);
  padding-bottom:clamp(28px,4vh,40px);margin-bottom:clamp(28px,4vh,40px);
  border-bottom:1px solid var(--c-border-soft);
  text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;
}
.legal__block{margin-bottom:clamp(34px,5vh,52px)}
.legal__block:last-child{margin-bottom:0}
.legal__h{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--ff-mincho);font-weight:700;
  font-size:clamp(18px,2vw,23px);line-height:1.5;letter-spacing:.02em;color:var(--c-text);
  margin-bottom:16px;
}
.legal__h .n{
  font-family:var(--ff-en);font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--c-brand);flex:none;
}
.legal__block p{font-size:14.5px;line-height:2.05;color:var(--c-text-2);text-wrap:pretty;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.legal__block p + p{margin-top:12px}
.legal__list{margin-top:10px;display:grid;gap:9px}
.legal__list li{
  position:relative;padding-left:18px;
  font-size:14.5px;line-height:1.95;color:var(--c-text-2);
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;
}
.legal__list li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--c-brand)}
.legal__meta{
  margin-top:clamp(40px,6vh,64px);padding-top:24px;border-top:1px solid var(--c-border-soft);
  font-size:13px;line-height:1.9;color:var(--c-text-3);
}
.legal__meta dt{font-family:var(--ff-en);font-size:10px;letter-spacing:.2em;color:var(--c-text-4);margin-bottom:6px}

/* =========================================================
   SP 横はみ出し対策（2026-07-15）
   iOS Safari は body だけの overflow-x:hidden では装飾リング等の
   はみ出しを抑えきれず横スクロールが発生する。overflow-x:clip
   （スクロールコンテナを作らず横だけ切る）で根絶。縦スクロール
   ・固定ヘッダー・Lenisには影響しない。
========================================================= */
html,body{overflow-x:clip}
@media (max-width:767px){
  /* TOPポスターはモバイルで overflow:visible のためリング(SVG)が溢れる→再クリップ */
  body.ink-stage{overflow-x:clip}
  .poster,.poster__stage{overflow-x:clip}
  /* 3行キャッチが keep-all で折り返せずボックス外へ溢れる→折り返す */
  .catch__line{overflow-wrap:anywhere;word-break:normal}
}