/* ============================================================
   WEBCAN 共通デザインシステム（TOP: /site/index.html を正として踏襲）
   下層ページ共通のトークン・コンポーネント。各ページはこれを読み込む。
   ============================================================ */
:root{
  --black:#141414;--black-soft:#1b1b1b;--white:#f5f5f2;--gray:#ececea;--gray-dark:#9d9d99;
  --ink:#181818;--indigo:#1e3a5f;--indigo-light:#315b8c;
  --line-dark:#f5f5f233;--line-light:#1414142e;--field-line:#c9c9c4;
  --shell:min(1280px, calc(100vw - 96px));
  --font-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-en:Inter,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--black);scroll-padding-top:96px}
body{background:var(--white);color:var(--ink);font-family:var(--font-jp);line-height:1.5;font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
ul{list-style:none}
img,svg{display:block;max-width:100%}
b,strong{font-weight:bolder}
:focus-visible{outline:2px solid var(--indigo-light);outline-offset:3px}
/* layout */
.shell{width:var(--shell);margin-inline:auto}
.shell--narrow{width:min(860px, calc(100vw - 48px));margin-inline:auto}
.dark-section{background:var(--black);color:var(--white)}
.light-section{background:var(--white);color:var(--ink)}
.section-pad{padding:150px 0}
.skip-link{position:fixed;top:10px;left:10px;z-index:999;background:var(--white);color:var(--black);padding:12px 18px;transform:translateY(-180%)}
.skip-link:focus{transform:none}
/* labels & type */
.section-label{display:flex;align-items:baseline;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line-light);color:var(--ink);letter-spacing:.13em;text-transform:uppercase;font-family:var(--font-en);font-size:13px;font-weight:800}
.section-label--light{color:var(--white);border-color:var(--line-dark)}
.section-label__jp{color:var(--gray-dark);letter-spacing:.08em;font-family:var(--font-jp);font-size:11px;font-weight:500}
.section-intro{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:12vw;padding:100px 0 80px}
.section-intro h2{margin:0;font-size:clamp(38px,4.6vw,64px);font-weight:750;line-height:1.24;letter-spacing:-.05em}
.section-intro h2 em{font-style:normal;color:var(--indigo-light)}
.section-intro>p{max-width:440px;margin:0 0 6px;font-size:14px;line-height:2.05}
.light-section .section-intro>p{color:#5f5f5c}
.dark-section .section-intro>p{color:#a8a8a3}
.brand{font-family:var(--font-en);font-size:20px;font-weight:900;letter-spacing:.22em}
.brand span{color:var(--indigo-light)}
/* buttons */
.button{display:inline-flex;justify-content:space-between;align-items:center;gap:32px;min-height:56px;padding:0 24px;border:1px solid var(--indigo-light);letter-spacing:.04em;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.button svg,.text-link svg,.header-cta svg{flex:none;transition:transform .3s}
.button:hover svg,.text-link:hover svg,.header-cta:hover svg{transform:translateX(5px)}
.button--primary{background:var(--indigo);color:#fff}
.button--primary:hover{background:#274b77;border-color:#274b77}
.button--outline{background:0 0;color:var(--white)}
.button--outline:hover{background:var(--indigo)}
.button--large{min-width:460px;min-height:68px;padding-inline:30px}
.text-link{display:inline-flex;align-items:center;gap:26px;padding-bottom:10px;border-bottom:1px solid currentColor;font-size:13px;font-weight:700}
/* reveal & progress */
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
[data-reveal].is-visible{opacity:1;transform:none}
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--indigo-light);z-index:1000;transition:width .12s linear}
/* header (sticky, bilingual) */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:1px solid transparent;color:#fff;transition:background .35s ease,border-color .35s ease}
.site-header.is-scrolled{background:rgba(18,18,18,.9);border-bottom-color:var(--line-dark);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-header__inner{display:flex;justify-content:space-between;align-items:center;height:88px}
.site-header .brand{color:#fff}
.site-nav{display:flex;align-items:center;gap:38px;color:#a8a8a3;font-family:var(--font-en);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.site-nav a{display:flex;flex-direction:column;gap:3px;align-items:flex-start;transition:color .25s}
.site-nav a:hover{color:#fff}
.site-nav a[aria-current=page]{color:#fff}
.site-nav a[aria-current=page] .nav-en{border-bottom:2px solid var(--indigo-light);padding-bottom:2px}
.site-nav .nav-jp,.header-cta .nav-jp{font-family:var(--font-jp);font-size:9px;letter-spacing:.06em;text-transform:none;color:#8f8f8a;font-weight:500}
.header-cta{display:inline-flex;align-items:center;gap:14px;color:#c3c3bf;font-family:var(--font-en);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:color .25s}
.header-cta:hover{color:#fff}
.header-cta__labels{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
/* desktop: メニューラッパーは透過（brand/nav/cta のflexレイアウトを維持）、ハンバーガーは非表示 */
.site-header__menu{display:contents}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;margin:0;background:transparent;border:0;cursor:pointer}
.nav-toggle span{display:block;width:100%;height:2px;background:#f5f5f2;transition:transform .3s,opacity .2s}
.site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* footer */
.site-footer{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;min-height:100px;border-top:1px solid var(--line-dark)}
.site-footer p,.site-footer>a:last-child{margin:0;color:#6f6f6b;font-family:var(--font-en);font-size:8px;font-weight:700;letter-spacing:.15em}
.site-footer p{text-align:center}
.site-footer>a:last-child{justify-self:end}
/* generic page hero */
.page-hero{position:relative;overflow:hidden;padding:170px 0 100px}
.page-hero::after{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:96px 96px;-webkit-mask-image:linear-gradient(#000,#0000 92%);mask-image:linear-gradient(#000,#0000 92%)}
.page-hero .shell{position:relative;z-index:1}
.page-hero__ghost{position:absolute;top:16%;left:-1.2vw;z-index:0;color:#f5f5f208;font-family:var(--font-en);font-weight:900;font-size:clamp(100px,17vw,260px);line-height:.8;letter-spacing:-.08em;white-space:nowrap;pointer-events:none}
.page-hero__eyebrow{margin:0 0 26px;color:#999994;font-family:var(--font-en);font-size:10px;font-weight:700;letter-spacing:.22em}
.page-hero h1{margin:0;max-width:16em;font-size:clamp(38px,4.8vw,72px);font-weight:750;line-height:1.3;letter-spacing:-.05em}
.page-hero h1 em{color:#fff;font-style:normal;font-weight:800}
.page-hero__sub{margin:32px 0 0;max-width:34em;color:#aeaea9;font-size:14px;line-height:2.05}
/* final cta */
.final-cta{position:relative;isolation:isolate;min-height:700px;overflow:hidden}
.final-cta__ghost{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:-1;color:#f5f5f209;font-family:var(--font-en);font-size:clamp(90px,15vw,230px);font-weight:900;line-height:1;letter-spacing:-.08em;white-space:nowrap;pointer-events:none}
.final-cta__inner{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:620px;padding:110px 0 90px;text-align:center}
.final-cta .section-label{align-self:stretch;text-align:left}
.final-cta__kicker{margin-top:90px;color:#999994;font-family:var(--font-en);font-size:10px;font-weight:700;letter-spacing:.22em}
.final-cta h2{margin:0;max-width:1000px;font-size:clamp(40px,5.2vw,76px);font-weight:780;line-height:1.28;letter-spacing:-.06em}
.final-cta__copy{max-width:640px;margin:44px auto;color:#a3a39e;font-size:13px;line-height:2}
.final-cta small{color:#777773;font-size:10px;letter-spacing:.04em}
/* responsive */
@media (max-width:1024px){:root{--shell:min(100% - 56px, 920px)}.section-intro{gap:7vw}}
@media (max-width:760px){
  :root{--shell:calc(100% - 40px)}
  .section-pad{padding:104px 0}
  .site-header__inner{height:64px}
  .site-header .brand{font-size:16px}
  /* SP: ハンバーガー表示 ＋ ナビ/CTA をドロップダウンパネルに */
  .nav-toggle{display:flex}
  .site-header__menu{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;background:rgba(18,18,18,.98);border-bottom:1px solid var(--line-dark);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .site-header.nav-open .site-header__menu{display:flex}
  .site-header__menu .site-nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .site-header__menu .site-nav a{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;padding:15px 4px;border-bottom:1px solid var(--line-dark)}
  .site-header__menu .site-nav a .nav-en{font-size:13px}
  .site-header__menu .site-nav a .nav-jp{font-size:11px}
  .site-header__menu .header-cta{justify-content:center;gap:10px;padding:18px 4px 6px;color:#fff}
  .site-header__menu .header-cta__labels{flex-direction:row;align-items:baseline;gap:8px}
  .page-hero{padding:120px 0 76px}
  .page-hero__ghost{top:14%;font-size:32vw}
  .page-hero h1{font-size:clamp(32px,8.5vw,48px);line-height:1.4}
  .section-intro{grid-template-columns:1fr;gap:30px;padding:72px 0 56px}
  .section-intro h2{font-size:clamp(30px,8.5vw,46px)}
  .button--large{min-width:0;width:100%}
  .site-footer{grid-template-columns:1fr auto;min-height:130px}
  .site-footer p{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}