/* =====================================================================
   misosil.com トップ「PULSE」
   コンセプト「一筆書き」: 全画面 canvas に、ページの最初から最後まで
   途切れない1本の線を描き、セクションごとに形を変える（main.js）。
   - 状態クラス（html）:
       .js          … インライン1行で付与。ローダーとヒーローの初期非表示だけに使う
       .is-motion   … main.js が GSAP を初期化できたとき（reduced-motion では付かない）
       .has-line    … 全画面 canvas の線が動いているとき（静的な SVG 線画を隠す）
       .is-static   … reduced-motion / ライブラリ欠落 / 初期化失敗。全内容を静的に表示
       .is-loading  … ローダー表示中
   - 固定（sticky）は .is-pinned（products / technology）が付いたときだけ。
   ===================================================================== */

/* 自己ホストの Web フォント（本番の CSP は font-src 'self'）。ページで使う文字だけのサブセットで、
   ファイル名は中身の sha256 の先頭8桁（作り直すとファイル名とここの参照が変わる） */
@font-face{
  font-family:"Inter Tight";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("/assets/site/fonts/inter-tight.0bc1aa95.woff2") format("woff2");
}
@font-face{
  font-family:"Noto Sans JP";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("/assets/site/fonts/noto-sans-jp.e9973da0.woff2") format("woff2");
}

:root{
  --paper:#ffffff;
  --paper-2:#f6f7f9;
  --ink:#0e1626;
  --gray:#667085;
  --dim:#7d8798;
  --line:#e5e7eb;

  --tofu:#2b6be0;
  --instantwin:#d42a22;
  --asari:#efe3d3;
  --adspam:#12805c;
  --bottle:#0e1626;
  --bottle-line:#3ad1b0;

  --f-en:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --f-ja:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --f-base:"Inter Tight","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;

  --g:clamp(20px, 4.45vw, 64px);            /* 左右の余白（全セクション共通の左端） */
  --hd-h:72px;
  --sec-gap:clamp(112px, 16vh, 200px);
  --vh:100vh;

  --fs-body:clamp(.9375rem, .88rem + .2vw, 1.0625rem);
  --fs-small:clamp(.8125rem, .78rem + .12vw, .9rem);
  --fs-micro:clamp(.6875rem, .66rem + .1vw, .78rem);
  --fs-sec:clamp(2rem, 3.2vw, 3rem);         /* Products / Technology / About 共通 */

  /* ヒーロー見出し: ADRENALINE. のインク幅 = font-size × 6.09（実測）。
     フォールバック描画の余裕を見て 6.3 で割る */
  --side-w:40px;
  --side-gap:clamp(20px, 3vw, 48px);
  --fs-hero:clamp(2.75rem, calc((100vw - 2 * var(--g) - var(--side-w) - var(--side-gap)) / 6.3), 17rem);

  --ease-out:cubic-bezier(.16,1,.3,1);       /* ≒ expo.out */
  --ease-io:cubic-bezier(.76,0,.24,1);       /* ≒ power4.inOut */
}
@supports (height:100svh){:root{--vh:100svh}}

/* ---------- テーマ（セクション／パネル／ヘッダー共通）。--stroke は線の色 ---------- */
[data-theme="paper"]{--bg:var(--paper);--fg:var(--ink);--fg-2:var(--gray);--rule:var(--line);--pill-bg:var(--ink);--pill-fg:#fff;--stroke:var(--ink)}
[data-theme="paper2"]{--bg:var(--paper-2);--fg:var(--ink);--fg-2:#5f6b7d;--rule:#e1e4e8;--pill-bg:var(--ink);--pill-fg:#fff;--stroke:var(--ink)}
[data-theme="tofu"]{--bg:var(--tofu);--fg:#fff;--fg-2:#fff;--rule:rgba(255,255,255,.42);--pill-bg:var(--ink);--pill-fg:#fff;--stroke:#fff}
[data-theme="instantwin"]{--bg:var(--instantwin);--fg:#fff;--fg-2:#fff;--rule:rgba(255,255,255,.42);--pill-bg:var(--ink);--pill-fg:#fff;--stroke:#fff}
[data-theme="asari"]{--bg:var(--asari);--fg:var(--ink);--fg-2:var(--ink);--rule:rgba(14,22,38,.28);--pill-bg:var(--ink);--pill-fg:#fff;--stroke:var(--ink)}
[data-theme="adspam"]{--bg:var(--adspam);--fg:#fff;--fg-2:#fff;--rule:rgba(255,255,255,.42);--pill-bg:var(--ink);--pill-fg:#fff;--stroke:#fff}
[data-theme="bottle"]{--bg:var(--bottle);--fg:#fff;--fg-2:#fff;--rule:rgba(255,255,255,.3);--pill-bg:#fff;--pill-fg:var(--ink);--stroke:var(--bottle-line)}
[data-theme]{background-color:var(--bg);color:var(--fg)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;               /* タップ時の青い面を出さない（フォーカスは :focus-visible の輪で示す） */
  scroll-padding-top:calc(var(--hd-h) + 16px);
  scrollbar-width:thin;scrollbar-color:var(--ink) var(--paper);
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-base);font-size:var(--fs-body);line-height:1.9;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--ink);color:var(--paper)}
[data-theme="tofu"] ::selection,[data-theme="instantwin"] ::selection,[data-theme="adspam"] ::selection,[data-theme="bottle"] ::selection{background:#fff;color:var(--ink)}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[lang="en"]{font-family:var(--f-en)}
main{display:block}
main:focus,[tabindex="-1"]:focus{outline:none}

/* Lenis（vendor/lenis.css 相当の必要分） */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}

/* SplitText の出力（.w 単語 / .c 文字）。マスクは下だけ切る */
.split-vis{display:block}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.c-mask{display:inline-block;overflow:visible!important;clip-path:inset(-.35em -.4em -.22em -.4em)}

/* JP 行のマスク（行単位で立ち上げる。行内は通常の禁則で折り返す） */
.mask{display:block;overflow:clip;overflow-clip-margin:.08em}
.mask + br{display:none}
.mask-in{display:block}

/* スキップリンク */
.skip{
  position:fixed;left:var(--g);top:12px;z-index:300;
  background:var(--ink);color:#fff;padding:.7em 1.2em;font-size:var(--fs-small);line-height:1;
  transform:translateY(-200%);transition:transform .4s var(--ease-out);
}
.skip:focus-visible{transform:none;outline-color:var(--ink)}

/* ---------- リンクの下線: hover in で左から引かれ、hover out で右へ抜ける ---------- */
.u{position:relative;display:inline-block}
.u::after{
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .7s var(--ease-out);
}
.u:hover::after,.u:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
/* 本文中の単独リンクは常時うすい下線を持ち、hover で濃い線が走る */
.panel-link::before,.contact-cta::before{
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:1px;background:currentColor;opacity:.32;
}
.arrow{display:inline-block;margin-left:.45em;transition:transform .6s var(--ease-out)}
.panel-link:hover .arrow,.ft-media a:hover .arrow{transform:translate(.15em,-.15em)}
.contact-cta:hover .arrow{transform:translateX(.25em)}

/* ======================= 全画面の線（main.js が生成） ======================= */
.line-canvas{position:fixed;left:0;top:0;width:100%;height:100%;z-index:45;pointer-events:none}
/* 標準のスクロールで面が固定されないレイアウト: ページ側に載せる（高さは main.js が画面より上下に広く取り、位置は毎フレーム合わせる） */
.line-canvas.is-page{position:absolute}
.has-line .line-static,.has-line .pv,.has-line .divider-svg,.has-line .contact-base{visibility:hidden}

/* BPM: ヘッダーの中（ロゴの右。モバイルは Menu の左）。色はヘッダーのテーマに従う */
.hd-bpm{
  display:inline-flex;align-items:center;gap:8px;margin-left:clamp(20px,2.4vw,36px);
  font:400 var(--fs-micro)/1 var(--f-en);letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap;
  pointer-events:none;
}
.bpm-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;transition:transform .5s var(--ease-out)}
.bpm-dot.is-beat{transform:scale(1.9);transition:none}
.bpm-num{min-width:3ch}
.bpm-unit{color:var(--fg-2)}
.hd-bpm.is-waiting .bpm-num,.hd-bpm.is-waiting .bpm-unit{visibility:hidden}

/* ======================= loader ======================= */
.loader{display:none}
.js .loader{
  display:block;position:fixed;inset:0;z-index:40;
  background:var(--paper);color:var(--ink);
  animation:loader-failsafe .01s 4s forwards;     /* main.js が来なかったときの保険 */
}
.js .loader.is-live{animation:none}
@keyframes loader-failsafe{to{visibility:hidden}}
.loader-mark{position:absolute;left:var(--g);bottom:var(--g);font:700 clamp(1.25rem,2vw,1.75rem)/1 var(--f-en);letter-spacing:-.03em}
.loader-count{
  position:absolute;right:var(--g);bottom:calc(var(--g) - .06em);
  font:300 clamp(4.5rem,14vw,13rem)/.78 var(--f-en);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
  transform-origin:0 0;
}
.loader-unit{position:absolute;right:var(--g);bottom:calc(var(--g) + clamp(4.5rem,14vw,13rem) * .78 + 10px);font:400 var(--fs-micro)/1 var(--f-en);letter-spacing:.08em;color:var(--gray)}
/* ローダーの数字がヘッダーの BPM 表示へ飛ぶ間だけ使う */
.bpm-fly{position:fixed;left:0;top:0;z-index:60;margin:0;font:300 clamp(4.5rem,14vw,13rem)/.78 var(--f-en);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--ink);transform-origin:0 0;pointer-events:none;white-space:nowrap}
.is-loading .hd,.js .loader:not(.is-off) ~ .hd{visibility:hidden;animation:failsafe-show .01s 4s forwards}

/* ======================= header ======================= */
.hd{
  position:absolute;left:0;right:0;top:0;z-index:50;
  height:var(--hd-h);padding:0 var(--g);
  display:flex;align-items:center;justify-content:flex-start;
  font-family:var(--f-en);
  transition:transform .8s var(--ease-out);              /* 色は transition しない（ワイプの縁で2色に描き分ける） */
}
.js .hd{position:fixed}
html:not(.js) .hd{position:relative}
html:not(.js) .hero{padding-top:clamp(12px,3.2vh,44px)}
.hd.is-hidden{transform:translateY(-101%)}
.hd:focus-within,.hd.is-menu-open{transform:none}
.hd-mark{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(1.25rem,1.6vw,1.5rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.hd-nav{display:flex;align-items:center;margin-left:auto;gap:clamp(20px,2.6vw,40px);font-size:var(--fs-small);font-weight:500;letter-spacing:.005em;line-height:1}
.hd-nav .u{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.hd-nav .u::after{bottom:12px}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 1.35em;border-radius:999px;
  background:var(--pill-bg);color:var(--pill-fg);
}
/* フォーカスリングはピルの外側＝ヘッダーの地に描くので、地の前景色で */
.pill:focus-visible{outline-color:var(--fg)}
.pill-in{display:block}
/* ワイプの縁がヘッダーを横切る間だけ、縁より下を入ってくる面の色で描く2枚目（main.js が複製し clip-path で切る） */
.hd-ghost{position:absolute;inset:0;display:none;align-items:center;justify-content:flex-start;padding:0 var(--g);pointer-events:none}
.hd-ghost.is-on{display:flex}
/* ヘッダーが動いている間（端数の位置）に、下端のアンチエイリアスで1枚目の地が細い線として覗かないよう 1px 延ばす */
.hd-ghost::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--bg)}

/* モバイルメニュー（.js のときだけボタンを出す） */
.menu-btn{display:none;align-items:center;gap:12px;min-height:44px;margin-left:18px;font:500 var(--fs-small)/1 var(--f-en);letter-spacing:.02em}
.menu-btn-icon{position:relative;width:22px;height:10px}
.menu-btn-icon i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .6s var(--ease-out)}
.menu-btn-icon i:first-child{top:0}
.menu-btn-icon i:last-child{bottom:0}
.hd.is-menu-open .menu-btn-icon i:first-child{transform:translateY(4.25px) rotate(45deg)}
.hd.is-menu-open .menu-btn-icon i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
.menu{
  position:fixed;inset:0;z-index:-1;background:var(--paper);color:var(--ink);
  padding:calc(var(--hd-h) + 28px) var(--g) 64px;display:flex;flex-direction:column;justify-content:flex-end;
}
.menu-list{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line)}
.menu-list li{border-bottom:1px solid var(--line)}
.menu-list a{display:flex;align-items:baseline;gap:16px;padding:14px 0 10px;overflow:clip}   /* 行ごとのマスク（開き途中に字の断片を見せない） */
.menu-num{font:300 .875rem/1 var(--f-en);color:var(--gray);font-variant-numeric:tabular-nums;width:1.6em}
.menu-txt{font:800 clamp(2.5rem,12vw,4.5rem)/.9 var(--f-en);letter-spacing:-.045em;display:block}

/* ======================= hero ======================= */
/* 高さは内容に合わせる（空白で埋めない）。線はタイトル直下、キャッチはその直下 */
.hero{
  position:relative;min-height:min(var(--vh), 760px);
  display:grid;grid-template-columns:minmax(0,1fr) var(--side-w);column-gap:var(--side-gap);align-content:start;
  padding:calc(var(--hd-h) + clamp(12px,3.2vh,44px)) var(--g) clamp(96px,13vh,128px);
}
.hero-main{display:flex;flex-direction:column;min-width:0}
.hero-title{
  font-family:var(--f-en);font-size:var(--fs-hero);font-weight:800;line-height:.86;
  letter-spacing:-.045em;text-transform:uppercase;
  margin-left:-.035em;                                   /* M の左サイドベアリングを光学的に揃える */
}
.hero-line{display:block}
/* 線のスロット: 高さ = 拍の山の上限（H1 の字高 0.727em × 0.6）＋余白。基線はスロットの下端 */
.hero-pulse{
  position:relative;height:calc(var(--fs-hero) * .44 + 10px);
  margin:clamp(14px,2vh,26px) calc(-1 * var(--g)) 0;
}
.line-static{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.line-static path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.hero-ja{margin-top:clamp(16px,2.4vh,30px);font-size:clamp(1.125rem,1.75vw,1.625rem);font-weight:500;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.hero-scroll{
  position:absolute;left:var(--g);bottom:clamp(30px,4.4vh,48px);display:flex;align-items:center;gap:14px;
  font:500 var(--fs-micro)/1 var(--f-en);letter-spacing:.18em;text-transform:uppercase;color:var(--gray);
}
.hero-scroll-rule{display:block;width:40px;height:1px;background:currentColor}

/* 右端の縦書き */
.hero-side{display:flex;flex-direction:column;align-items:center;padding-top:.35em}
.hero-vert{writing-mode:vertical-rl;font-size:clamp(.9375rem,1.05vw,1.0625rem);font-weight:500;line-height:1.5;letter-spacing:.16em;white-space:nowrap}

/* JS 有効時、ヒーローは演出開始まで隠す（main.js が来なければ 3s で強制表示） */
.js .hero-main > *,.js .hero-side,.js .hero-scroll{visibility:hidden;animation:failsafe-show .01s 3s forwards}
.hero.is-ready .hero-main > *,.hero.is-ready .hero-side,.hero.is-ready .hero-scroll{visibility:visible;animation:none}
@keyframes failsafe-show{to{visibility:visible}}

/* ======================= statement ======================= */
.statement{padding:clamp(120px,24vh,300px) var(--g) clamp(120px,22vh,280px)}
.statement-text{
  font-family:var(--f-base);font-size:clamp(1.5rem,3.6vw,3.25rem);font-weight:500;line-height:1.75;
  letter-spacing:.01em;max-width:22em;word-break:keep-all;overflow-wrap:anywhere;
}

/* ======================= divider ======================= */
.divider{position:relative;height:40px;margin:0 var(--g);color:var(--ink);overflow:hidden}
.divider::before{content:"";position:absolute;left:0;right:0;top:29.5px;height:1px;background:var(--line)}
.products + .divider{display:none}            /* 色面の終わりがそのまま区切りになる */
.divider-svg{position:absolute;left:0;top:0;width:160px;height:40px}
.divider-blip{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}

/* ======================= section head（3つとも同じスケール） ======================= */
.sec-head{padding:0 var(--g)}
.sec-num{display:block;font:300 clamp(.875rem,1vw,1rem)/1 var(--f-en);letter-spacing:.06em;color:var(--gray);font-variant-numeric:tabular-nums}
.sec-title{font:700 var(--fs-sec)/.95 var(--f-en);letter-spacing:-.04em;margin-top:.55em}
.sec-lead{font-size:clamp(1.125rem,1.85vw,1.75rem);font-weight:500;line-height:1.6;margin-top:clamp(20px,2.4vw,36px);word-break:keep-all;overflow-wrap:anywhere}
.sec-rule{display:block;height:1px;margin:clamp(48px,8vh,96px) calc(-1 * var(--g)) 0}

/* ======================= products ======================= */
.products{padding-top:var(--sec-gap)}
.products .sec-head{padding-bottom:clamp(64px,10vh,120px)}
.stage{position:relative}
.ticks{display:none}
.panel{position:relative;overflow:hidden}
.panel-inner{
  position:relative;min-height:88vh;min-height:88svh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;
  column-gap:clamp(24px,4vw,72px);
  padding:calc(var(--hd-h) + clamp(12px,3vh,40px)) var(--g) clamp(64px,9vh,96px);
}
.panel-top{grid-column:1 / -1;display:flex;align-items:center;gap:18px;min-height:44px}
.count{display:inline-flex;align-items:flex-start;font:300 clamp(1rem,1.25vw,1.25rem)/1 var(--f-en);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.count-reel{display:inline-block;height:1em;overflow:hidden}
.count-reel > span{display:block;height:1em}
.count-of{margin-left:.5em}
.panel-name{
  grid-column:1 / -1;margin-top:clamp(14px,3.5vh,44px);
  font:800 clamp(3rem,9vw,9.5rem)/.9 var(--f-en);letter-spacing:-.045em;
  margin-left:-.04em;
}
.panel-body{grid-column:1;grid-row:3;align-self:end;max-width:30em;padding-top:clamp(24px,4vh,48px)}
.panel-tag{font-size:clamp(1.25rem,1.95vw,1.875rem);font-weight:500;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.panel-desc{margin-top:clamp(12px,1.8vh,20px);font-size:var(--fs-body);line-height:1.9;color:var(--fg-2);word-break:keep-all;overflow-wrap:anywhere}
.panel-link{display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(10px,2vh,24px);font:500 var(--fs-small)/1.4 var(--f-en);letter-spacing:.01em}
.panel-link::before,.panel-link::after{bottom:8px}
.panel-visual{grid-column:2;grid-row:3;min-height:0;align-self:stretch;position:relative;color:var(--stroke);margin-top:clamp(24px,4vh,48px)}
.pv{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pv path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.pv circle{fill:currentColor}

/* ---- 固定（デスクトップ横長）: position:sticky。スクロール量 = トラック − 100vh ---- */
.products.is-pinned .stage{height:calc(var(--vh) * 5)}
.products.is-pinned .stage-pin{position:sticky;top:0;height:var(--vh);overflow:hidden}
.products.is-pinned .panel{position:absolute;inset:0}
.products.is-pinned .panel-inner{
  height:100%;min-height:0;
  grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-rows:auto auto minmax(0,1fr);
  padding-bottom:clamp(64px,10vh,104px);
}
.products.is-pinned .panel-top{grid-row:1}
.products.is-pinned .panel-name{grid-row:2}
.products.is-pinned .panel-body{grid-row:3}
.products.is-pinned .ticks{
  display:flex;position:absolute;z-index:10;right:var(--g);
  top:calc(var(--hd-h) + clamp(12px,3vh,40px));height:44px;align-items:center;gap:2px;
  color:var(--fg);
}
/* 目盛りの2枚目（縁より下＝入ってくる面の色）。縁が横切る間だけ表示 */
.products.is-pinned .ticks-ghost{pointer-events:none}
.products.is-pinned .ticks-ghost:not(.is-on){display:none}
.tick{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:400 var(--fs-micro)/1 var(--f-en);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tick::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:1px;background:currentColor;opacity:.5;transform-origin:0 50%;transition:opacity .4s}
.tick:hover::after,.tick:focus-visible::after{opacity:1}
.tick:focus-visible{outline-offset:-2px}
.tick:focus-visible .tick-num{font-weight:700}
.tick.is-active::after{opacity:1;transform:scaleY(2)}
/* 目盛りクリックで飛んでいる間、目的・出発以外のパネルの文字（番号・タグライン・説明・リンク）は見せない（main.js の mute） */
.panel.is-muted .panel-top,.panel.is-muted .panel-body{visibility:hidden}

/* パネルごとに絵のスロットの位置と大きさを変える（文言の左端は固定） */
/* 01 折れ線: 名前の下を全幅で横切る帯。本文はその下 */
.products.is-pinned .panel--tofu .panel-inner{grid-template-rows:auto auto minmax(0,1fr) auto}
.products.is-pinned .panel--tofu .panel-visual{grid-column:1 / -1;grid-row:3;margin:clamp(28px,5vh,56px) 0 clamp(28px,5vh,48px)}
.products.is-pinned .panel--tofu .panel-body{grid-row:4;padding-top:0}
/* 02 的: 右の全高。右端からはみ出す */
.products.is-pinned .panel--instantwin .panel-visual{grid-row:1 / 4;margin:clamp(56px,9vh,96px) 0 0 0}
/* 03 扇: 右下の地平に置く。地平は本文の下を通る */
.products.is-pinned .panel--asari .panel-body{margin-bottom:clamp(40px,6vh,64px)}
.products.is-pinned .panel--asari .panel-visual{margin:clamp(20px,3vh,36px) 0 0 -4vw}
/* 04 格子: 右の中段。線は格子の上辺から入る */
.products.is-pinned .panel--adspam .panel-visual{margin:clamp(24px,4.5vh,56px) 0 clamp(72px,13vh,140px)}
/* 05 ボトル: 右の全高。本文は名前の直下 */
.products.is-pinned .panel--bottle .panel-body{align-self:start}
.products.is-pinned .panel--bottle .panel-visual{grid-row:1 / 4;margin:clamp(8px,2vh,24px) 0 0 4vw}

/* ======================= technology ======================= */
.tech{padding-top:var(--sec-gap)}
.tech-pin{padding:0 0 var(--sec-gap)}
.tech.is-pinned .tech-track{height:calc(var(--vh) + 130vh)}
.tech.is-pinned .tech-pin{
  position:sticky;top:0;height:var(--vh);display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hd-h) + 2vh) 0 clamp(56px,8vh,80px);
}
.tech-display{
  padding:0 var(--g);margin-top:clamp(24px,4.5vh,56px);
  font:800 clamp(2.5rem, calc((100vw - 2 * var(--g)) / 10.4), 9.25rem)/.9 var(--f-en);
  letter-spacing:-.045em;text-transform:uppercase;
}
.tech-display .tl{display:block;margin-left:-.035em}
/* BUILT ON の行マスク: 下は行の箱ちょうどで切る（立ち上がり途中に下の DATA, の行へ字の頭が出ない） */
.tl-mask{display:block;clip-path:inset(-.25em -.3em 0 -.3em);padding-bottom:.02em}
.tl-in{display:block}
.tw{position:relative;display:inline-block;color:var(--dim)}
.tw-ink{position:absolute;left:0;top:0;color:var(--ink);clip-path:inset(-25% 100% -35% -6%);white-space:nowrap}
.tech-note{padding:0 var(--g);margin-top:clamp(24px,4vh,48px);font-size:var(--fs-body);line-height:1.9;max-width:calc(34em + 2 * var(--g));word-break:keep-all;overflow-wrap:anywhere}
.tech-items{
  margin:clamp(36px,6vh,72px) var(--g) 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);
}
.tech-item{position:relative;padding-top:clamp(20px,3vh,32px)}
.ti-rule{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.ti-num{display:block;font:300 clamp(1.75rem,2.8vw,2.75rem)/1 var(--f-en);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ti-title{font:700 clamp(1.25rem,1.6vw,1.625rem)/1.2 var(--f-en);letter-spacing:-.02em;margin-top:clamp(14px,2vh,22px)}
.ti-text{margin-top:.6em;font-size:var(--fs-body);line-height:1.9;color:var(--gray);word-break:keep-all;overflow-wrap:anywhere}
.ti-num,.ti-title{transition:opacity .6s var(--ease-out)}
.is-motion .ti-rule{background:var(--line)}
.is-motion .tech-item .ti-num{opacity:.5}                /* 未到達でも大きい文字の 3:1 を保つ（実測 3.44） */
.is-motion .tech-item .ti-title{opacity:.66}
.is-motion .tech-item.is-active .ti-num,.is-motion .tech-item.is-active .ti-title{opacity:1}

/* ======================= about ======================= */
.about{padding:var(--sec-gap) 0}
.about-grid{padding:0 var(--g);margin-top:clamp(28px,3.6vw,56px)}
.about-title{font-size:clamp(1.625rem,3vw,2.75rem);font-weight:500;line-height:1.55;word-break:keep-all;overflow-wrap:anywhere}
.about{--ab-gap:clamp(64px,9vh,104px)}
.about-body{margin-top:var(--ab-gap);max-width:36em;font-size:var(--fs-body);line-height:1.9;word-break:keep-all;overflow-wrap:anywhere}
.co{margin-top:clamp(72px,11vh,128px);max-width:40em}
.co-title{font-size:var(--fs-small);font-weight:500;line-height:1;letter-spacing:.06em;color:var(--gray)}
.co-year{display:flex;flex-direction:column;gap:12px;margin:clamp(20px,3vh,32px) 0 clamp(24px,3.4vh,40px)}
.co-year-label{font-size:var(--fs-micro);line-height:1.6;letter-spacing:.06em;color:var(--gray)}
.co-year-num{font:300 clamp(4rem,8vw,7.5rem)/.8 var(--f-en);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-left:-.05em}
.co-list{border-top:1px solid var(--line)}
.co-row{padding:16px 0 14px;border-bottom:1px solid var(--line)}
.co-row dt{font-size:var(--fs-micro);line-height:1.6;letter-spacing:.06em;color:var(--gray)}
.co-row dd{margin-top:2px;font-size:var(--fs-body);line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
/* no-JS / reduced: 問いの最後の「か。」の右に ecg-large の静的な線（通常モードは canvas の線）。
   基線は通常モードと同じ「問いの下端 + 本文までの 42%」。山は問いの字面の上端まで（Noto Sans JP の字高から em で算出）。
   599px 以下は「か。」の右に空きが無いので、列の右端に問いへ届かない低い山（通常モードも同じ） */
.about-peak,.about-peak-rule{display:none}
html:not(.js) .about-title,.is-static .about-title{position:relative}
html:not(.js) .about-title .mask,.is-static .about-title .mask{overflow:visible}
html:not(.js) .about-peak,.is-static .about-peak{display:inline-block;position:relative;width:0;height:0;vertical-align:baseline}
html:not(.js) .about-peak-rule,.is-static .about-peak-rule{display:block;position:absolute;left:calc(-1 * var(--g));right:calc(-1 * var(--g));bottom:calc(var(--ab-gap) * -.42 - 1px);height:2px;background:currentColor}
.about-peak-svg{position:absolute;overflow:visible;max-width:none;
  --ph:calc(3.02em + var(--ab-gap) * .42);
  left:calc(.9em - var(--ph) * .24);top:-2.561em;width:calc(var(--ph) * .48);height:var(--ph)}
.about-peak-svg path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:599px){
  html:not(.js) .about-peak,.is-static .about-peak{position:static}
  .about-peak-svg{left:auto;right:0;top:auto;bottom:calc(var(--ab-gap) * -.42);width:1.1em;height:calc(var(--ab-gap) * .42 - 10px)}
}
/* 1024px 以上: 左に問いと本文、右に会社情報（dt / dd を横並びの表組み） */
@media (min-width:1024px){
  .about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);column-gap:clamp(48px,6vw,112px);align-items:start}
  .co{margin-top:0;max-width:none}
  .co-year{margin-top:24px}
  .co-row{display:grid;grid-template-columns:8.5em minmax(0,1fr);column-gap:24px;align-items:baseline}
  .co-row dd{margin-top:0}
  html:not(.js) .about-peak-rule,.is-static .about-peak-rule{right:calc(clamp(48px,6vw,112px) * -.5)}
}

/* ---- Founders: 会社情報と同じ様式（灰色の小見出し → 罫線 → 行）。2名は並列項目で、1024px 以上は About の2カラムと同じ列に横並び。
   名前は Inter Tight 700。写真は未掲載（.fd-photo は hidden） ---- */
.fd{padding:0 var(--g);margin-top:clamp(72px,11vh,128px);--fs-fd:clamp(1.5rem,2.5vw,2.25rem)}
.fd-title{display:flex;align-items:baseline;gap:.9em;font-size:var(--fs-small);font-weight:500;line-height:1;letter-spacing:.06em;color:var(--gray)}
.fd-title-ja{font-size:var(--fs-micro)}
.fd-list{margin-top:clamp(20px,3vh,32px);max-width:40em;border-top:1px solid var(--line)}             /* 〜1023px は会社情報の表と同じ幅 */
.fd-item{padding:clamp(28px,4vh,44px) 0 clamp(32px,4.6vh,52px);border-bottom:1px solid var(--line)}
.fd-item:last-child{border-bottom:0}                       /* 下端の罫線は引かない（直後の区切り線と2本並ばない）。2名の間の罫線は残す */
.fd-photo{margin:0 0 clamp(20px,3vh,32px);max-width:22rem;aspect-ratio:4 / 5;overflow:hidden;background:var(--paper-2)}
.fd-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.fd-name{margin:0 0 0 -.03em;font:700 var(--fs-fd)/1.06 var(--f-en);letter-spacing:-.03em}
.fd-role{margin-top:clamp(10px,1.4vh,16px);font-size:var(--fs-small);font-weight:500;line-height:1.6;letter-spacing:.04em;color:var(--gray);word-break:keep-all}
.fd-bio{margin-top:clamp(14px,2vh,22px);max-width:30em;font-size:var(--fs-body);line-height:1.9;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@media (min-width:1024px){
  .fd-list{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);column-gap:clamp(48px,6vw,112px);align-items:start}
  .fd-item{border-bottom:0}
}

/* ======================= closing ======================= */
.closing{padding:clamp(112px,20vh,240px) var(--g) clamp(120px,22vh,260px)}
.contact{font:800 clamp(4.5rem,15vw,17rem)/.86 var(--f-en);letter-spacing:-.05em}
.contact-link{display:inline-block}
.contact-link:focus-visible{outline-offset:8px}
.contact-word{display:block;margin-left:-.04em}
.contact-line{position:relative;display:block;height:clamp(40px,4.4vw,72px);margin:0 calc(-1 * var(--g))}
.contact-base{position:absolute;left:var(--g);right:var(--g);top:clamp(14px,1.6vw,24px);height:2px;background:currentColor}
/* ホバー / フォーカス中に語の右上へ出る BPM（main.js が生成・配置） */
.closing{position:relative}
.contact-bpm{position:absolute;left:0;top:0;display:flex;align-items:flex-start;gap:.12em;opacity:0;pointer-events:none;white-space:nowrap;
  font:300 48px/.74 var(--f-en);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.contact-bpm-unit{font-size:max(11px,.16em);font-weight:400;line-height:1;letter-spacing:.08em;color:var(--gray);margin-top:.1em}
.contact-cta{margin-top:clamp(16px,2.4vw,32px);font-size:clamp(1rem,1.3vw,1.25rem);font-weight:500;padding-block:10px}
.contact-cta::before,.contact-cta::after{bottom:6px}

/* ======================= footer ======================= */
.ft{position:relative;padding:clamp(28px,4vw,56px) var(--g) clamp(28px,3.4vw,48px);overflow:hidden;font-family:var(--f-en)}
.ft-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;column-gap:clamp(24px,3.4vw,56px);row-gap:16px}
.ft-id{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,24px);flex-wrap:wrap}
.ft-mark{font-size:clamp(1.25rem,1.6vw,1.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.2;padding-block:10px}
.ft-copy{font-size:var(--fs-micro);color:var(--fg-2);letter-spacing:.02em;white-space:nowrap}
.ft-nav,.ft-social{display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.2vw,32px);font-size:var(--fs-small);font-weight:500;line-height:1}
.ft-nav a,.ft-social a,.ft-media a{display:inline-flex;align-items:center;min-height:44px}
.ft-social a,.ft-nav a{min-width:44px;justify-content:center}
.ft-nav .u::after,.ft-social .u::after,.ft-media .u::after{bottom:12px}
.ft-media{display:flex;align-items:center;gap:14px;font-size:var(--fs-small);font-weight:500;line-height:1;font-family:var(--f-base)}
.ft-label{font-size:var(--fs-micro);color:var(--fg-2);letter-spacing:.04em}
.ft-social{padding-left:clamp(18px,2.2vw,32px);border-left:1px solid var(--rule)}
/* 下の .12em（線の通り道）は margin で取る（padding だとページ末尾で端数の位置になり、headless の撮影で ft-en の字の断片が最下行に出た） */
/* 締めのワードマーク「misosil」（Inter Tight 800）。字の大きさ F = 内容幅 × .267（字の幅 ≒ 3.0F で内容幅の 8 割。右の 2 割で線が1拍して点で止まる）。
   語の箱（line-height .86）は overflow: clip のマスク。線はその下端より下を通る（main.js の signPath と同じ比率） */
.ft-sign{position:relative;margin:clamp(32px,4.4vw,72px) calc(-1 * var(--g)) .12em;padding:0 var(--g);font-size:calc((100vw - 2 * var(--g)) * .267);line-height:1;color:var(--ink)}
.ft-word{display:block;font:800 1em/.86 var(--f-en);letter-spacing:-.045em;margin-left:-.041em;overflow:clip;white-space:nowrap}
.ft-word-in{display:block}
.ft-sign-static{position:absolute;left:var(--g);bottom:-.12em;width:calc(100% - 2 * var(--g));height:.6em;overflow:visible}
.ft-sign-static path{fill:none;stroke:currentColor;stroke-width:clamp(2.5px,calc((100vw - 2 * var(--g)) * .00427),8px);vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.ft-sign-static ellipse{fill:currentColor}
.has-line .ft-sign-static{visibility:hidden}
.ft-en{margin-top:clamp(20px,2.6vw,36px);display:flex;flex-wrap:wrap;column-gap:.35em;font-size:var(--fs-micro);font-weight:500;line-height:1.75;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}

/* ======================= cursor（difference で全テーマ上で見える） ======================= */
.cursor{
  position:fixed;left:0;top:0;z-index:150;width:30px;height:30px;margin:-15px 0 0 -15px;
  pointer-events:none;opacity:0;transition:opacity .3s;mix-blend-mode:difference;
}
.cursor-ring{position:absolute;inset:0;border:1.5px solid #fff;border-radius:50%}
.cursor.is-on{opacity:1}

/* ======================= motion-mode のみ ======================= */
.is-motion.has-footer-reveal main{position:relative;z-index:1;background:var(--paper)}
.is-motion.has-footer-reveal .ft{position:sticky;bottom:0;z-index:0}

/* ======================= 縦長のタブレット（769px 以上で縦 > 横） =======================
   2列だと絵が小さく中央が空くので、絵を全幅で本文の下に置く */
@media (min-width:769px) and (max-aspect-ratio:1/1){
  /* 縦長ではヒーローの高さを内容に合わせる（下に空白を作らない） */
  .hero{min-height:0}
  /* 縦書きが線の高さまで下りてくるので、静的な線は縦書きの手前で止める（canvas の線は背面を通して余白を取る） */
  .hero-pulse .line-static{clip-path:inset(-50% calc(var(--g) + var(--side-w) + 10px) 0 0)}
  .panel-inner{grid-template-rows:auto auto auto minmax(0,1fr)}
  .panel-body{grid-column:1 / -1;grid-row:3;max-width:34em;align-self:start}
  .panel-visual{grid-column:1 / -1;grid-row:4;margin-top:clamp(28px,4vh,48px)}
  .products.is-pinned .panel-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr)}
  .products.is-pinned .panel .panel-body{grid-row:3;align-self:start;margin-bottom:0}
  .products.is-pinned .panel .panel-name{grid-column:1}
  .products.is-pinned .panel .panel-visual{grid-column:1;grid-row:4;margin:clamp(32px,5vh,64px) 0 0}
  .products.is-pinned .panel--instantwin .panel-visual{margin-right:calc(-1 * var(--g))}
  .products.is-pinned .panel--tofu .panel-inner{grid-template-rows:auto auto auto minmax(0,1fr)}
  .products.is-pinned .panel--tofu .panel-body{padding-top:clamp(24px,4vh,48px)}
}

/* ======================= 769–1199px: フッターの行は2段 ======================= */
@media (min-width:769px) and (max-width:1199px){
  .ft-row{grid-template-columns:minmax(0,1fr) auto}
  .ft-media{grid-column:1;grid-row:2}
  .ft-social{grid-column:2;grid-row:2}
}

/* ======================= 769–1024px ======================= */
@media (max-width:1024px) and (min-width:769px){
  .panel-name{font-size:clamp(3rem,9.6vw,9.5rem)}
}

/* ======================= 768px 以下（769 未満。768.x の隙間を作らない） ======================= */
@media not all and (min-width:769px){
  :root{--hd-h:60px;--sec-gap:clamp(88px,13vh,128px);--fs-hero:clamp(2.6rem, calc((100vw - 2 * var(--g)) / 6.3), 8rem)}
  .hd-nav{gap:16px}
  .js .hd-nav{display:none}
  .js .menu-btn{display:flex}
  html:not(.js) .hd{height:auto;flex-wrap:wrap;padding-block:8px;row-gap:0}
  html:not(.js) .hd-nav{flex-wrap:wrap;gap:0 16px;margin-left:0;width:100%}

  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-bottom:40px}
  .statement{padding-top:clamp(48px,8vh,80px)}            /* 最初の画面の下に空白を残さない（ステートメントを引き上げる） */
  .hero-scroll{display:none}
  .hero-side{flex-direction:column;align-items:flex-start;padding-top:20px}
  .hd-bpm{margin-left:auto}
  .hero-vert{writing-mode:horizontal-tb;font-size:1rem;letter-spacing:.06em;white-space:normal;word-break:keep-all}
  .hv-l{display:block}                                     /* 「つくろう、まだない」/「あたりまえを。」をスペースの位置で改行（半角スペースを行の中に残さない） */

  .panel-inner{display:flex;flex-direction:column;min-height:80vh;min-height:80svh;padding:64px var(--g) 64px}
  .panel-name{font-size:clamp(2.75rem,13vw,5.5rem)}
  .panel-body{padding-top:28px;max-width:none;align-self:stretch}
  .panel-visual{width:100%;max-width:520px;aspect-ratio:4 / 3;margin-top:44px;align-self:flex-start}
  .panel--bottle .panel-visual{aspect-ratio:1 / 1}

  .tech-items{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .tech-display{font-size:clamp(2.5rem,12.2vw,6rem)}
  .about{--ab-gap:clamp(56px,10vh,88px)}

  .ft-row{grid-template-columns:minmax(0,1fr)}
  .ft-sign{margin-top:28px}
  .ft-sign-static path{stroke-width:3.5px}
  .ft-sign-static ellipse{rx:15px;ry:15px}
  .ft-social{padding-left:0;border-left:0;column-gap:0}
  /* 「X」: 44px の箱の中で中央に置き、箱を左へずらして字の左端を列の左端にそろえる。
     X と Facebook の字の間隔（箱の右の余白）はナビの字の間隔（18px）とほぼ同じ */
  .ft-social li:first-child a{justify-content:center;margin-left:calc(-22px + .31em)}
  .ft-media{flex-wrap:wrap;row-gap:0}
  /* フッターのナビは「Products Technology About」／「Contact Privacy Policy」の2行に折り返す
     （幅なりに Privacy Policy だけが2行目に回らないよう、About の後で必ず改行する。並び・Tab の順は DOM のまま） */
  .ft-nav::after{content:"";flex-basis:100%;height:0;order:1}
  .ft-nav a[href="/contact/"],.ft-nav a[href="/privacypolicy/"]{order:2}
  .contact{font-size:clamp(4rem,22vw,10rem)}
}

/* ======================= reduced motion ======================= */
@media (prefers-reduced-motion: reduce){
  .js .loader{display:none}
  .js .hero-main > *,.js .hero-side,.js .hero-scroll{visibility:visible;animation:none}
  .hd{transition:none}
  .u::after,.arrow,.ti-num,.ti-title,.menu-btn-icon i{transition:none}
  .cursor{display:none}
}

@media (pointer:coarse){
  .cursor{display:none}
}