/* ============================================================
   ROUTELESS 紹介LP（intro.html）専用。トークン・ナビ・ボタン・FAQ・フッターは style.css を流用
   ============================================================ */
.intro h2{margin:0;font:900 clamp(34px,4.6vw,64px)/1.25 var(--f-jp);letter-spacing:.01em}
.intro h2.en{font-family:var(--f-en);font-style:italic;font-weight:900;font-stretch:66%;line-height:.88;letter-spacing:-.005em}
.intro .nav .entry{font:700 12.5px/1 var(--f-jp);font-style:normal;letter-spacing:.04em}
.intro section{padding:clamp(96px,12vw,170px) 0}
.i-note{margin:26px 0 0;font:500 12px/1.8 var(--f-jp);color:var(--ink-3)}
.i-note.dk{color:#8d8f88}
.sp{display:none}

/* ===== hero ===== */
.i-hero{min-height:100svh;display:grid;align-items:end;overflow:hidden;padding:0!important}
.i-hero-bg{position:absolute;inset:0}
.i-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform:scale(1.06);animation:heroZoom 9s var(--ease) forwards}
@keyframes heroZoom{to{transform:none}}
.i-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,12,.94) 0%,rgba(12,13,12,.72) 38%,rgba(12,13,12,.12) 72%),linear-gradient(0deg,rgba(12,13,12,.9),transparent 42%)}
.i-hero-route{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.i-hero-route path{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:6 9;filter:url(#rough);opacity:.9}
.i-hero-route circle{fill:none;stroke:var(--accent);stroke-width:2.6;opacity:0;animation:cpIn .5s var(--ease) forwards}
.i-hero-route circle:nth-of-type(1){animation-delay:1.2s}.i-hero-route circle:nth-of-type(2){animation-delay:1.7s}.i-hero-route circle:nth-of-type(3){animation-delay:2.2s}
@keyframes cpIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.i-hero-route circle{transform-box:fill-box;transform-origin:center}
.i-hero-in{position:relative;z-index:2;padding:130px var(--gut) clamp(70px,11vh,120px);max-width:880px}
.i-hero .tag{display:flex;align-items:center;gap:10px;margin:0 0 26px;font:600 11px/1 var(--f-mono);letter-spacing:.18em}
.i-hero .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.i-hero-h{margin:0}
.i-hero-h .en{display:block;font-size:clamp(64px,10.5vw,168px)}
.i-hero-h .en b{color:var(--accent)}
.i-hero-h .jp{display:block;margin-top:clamp(18px,2.4vw,30px);font:900 clamp(28px,3.6vw,50px)/1.35 var(--f-jp)}
.i-hero-sub{margin:22px 0 0;font:500 15px/2 var(--f-jp);color:#d6d5ce}
.i-hero-sub strong{color:var(--white)}
.i-hero-sub em{font-style:normal;color:var(--accent);font-weight:700}
.i-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px}
.i-hero-cta .btn{font:700 15px/1 var(--f-jp);font-style:normal;padding:17px 24px}
.i-next{position:absolute;z-index:2;right:var(--gut);bottom:clamp(70px,11vh,120px);display:grid;gap:6px;padding:18px 22px 16px;background:rgba(12,13,12,.62);border:1px solid rgba(204,236,88,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none;transition:border-color .25s,transform .4s var(--ease)}
.i-next:hover{border-color:var(--accent);transform:translateY(-3px)}
.i-next .k{font:600 10px/1 var(--f-mono);letter-spacing:.18em;color:var(--accent)}
.i-next .d{font-size:44px}
.i-next .d small{font-size:.42em;margin-left:6px;color:var(--mute)}
.i-next .p{font:700 13px/1 var(--f-jp)}

/* ===== what ===== */
.i-what-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:clamp(50px,6vw,80px)}
.i-what-head p{margin:0;font:500 15px/2.05 var(--f-jp);color:var(--ink-2)}
.i-what-head p strong{color:var(--ink);background:linear-gradient(transparent 62%,rgba(204,236,88,.75) 62%)}
.i-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.i-steps li{position:relative;background:#F4F1EA;border:1px solid var(--cream-2);padding:24px 24px 30px}
.i-steps li:nth-child(2){transition-delay:.12s}.i-steps li:nth-child(3){transition-delay:.24s}
.i-steps .art{aspect-ratio:11/8;margin:-4px -4px 18px;display:grid;place-items:center}
.i-steps .art svg{width:100%;height:100%}
.i-steps .draw{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.6s var(--ease-io) .5s}
.i-steps .d2{stroke-dasharray:5 5}
.i-steps li.in .draw:not(.d2){stroke-dashoffset:0}
.i-steps .clock{transition:stroke-dashoffset 2s var(--ease-io) .6s;stroke-dashoffset:327}
.i-steps li.in .clock{stroke-dashoffset:70}
.i-steps .n{position:absolute;top:16px;left:20px;font-size:26px;color:var(--accent-d)}
.i-steps h3{margin:0 0 10px;font:900 22px/1.4 var(--f-jp)}
.i-steps p{margin:0;font:500 14px/1.95 var(--f-jp);color:var(--ink-2)}

/* ===== why ===== */
.intro .i-why-h{margin-bottom:clamp(60px,8vw,110px)}
.i-why-h .en{display:block;font-size:clamp(64px,11vw,180px)}
.i-why-h .en b{color:var(--accent)}
.i-why-h .jp{display:block;margin-top:20px;font:900 clamp(20px,2.2vw,28px)/1.5 var(--f-jp)}
.i-reason{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;margin-bottom:clamp(70px,9vw,130px)}
.i-reason:last-child{margin-bottom:0}
.i-reason.rev .ph{order:2}
.i-reason .ph{margin:0;aspect-ratio:4/5;max-height:680px}
.i-reason .ph img{transition:transform 1.4s var(--ease)}
.i-reason.in .ph img{transform:scale(1.0)}
.i-reason .ph img{transform:scale(1.08)}
.i-reason .tx{position:relative}
.i-reason .n{display:block;font-size:clamp(90px,11vw,170px);color:transparent;-webkit-text-stroke:1.5px var(--accent);line-height:.8;margin-bottom:18px}
.i-reason .k{margin:0 0 14px;font-size:20px;color:var(--mute)}
.i-reason h3{margin:0 0 20px;font:900 clamp(28px,3.4vw,46px)/1.35 var(--f-jp)}
.i-reason p:last-child{margin:0;font:500 15px/2.05 var(--f-jp);color:#cfcec7;max-width:30em}

/* ===== for you ===== */
.i-for{padding-top:0!important}
.i-for-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;border-top:1px solid var(--line);padding-top:clamp(70px,9vw,120px)}
.i-for h2{font-size:clamp(30px,3.8vw,54px)}
.i-for h2 .hl{color:var(--accent)}
.i-for .lead{margin:22px 0 0;font:500 15px/2 var(--f-jp);color:#cfcec7}
.i-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.i-checks li{display:flex;gap:16px;align-items:center;padding:18px 20px;background:var(--night-2);border:1px solid var(--line);font:700 15.5px/1.6 var(--f-jp)}
.i-checks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--accent);background:radial-gradient(circle,var(--accent) 0 38%,transparent 40%)}

/* ===== flow ===== */
.i-flow h2{margin-bottom:clamp(40px,5vw,70px)}
.i-flow-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:f}
.i-flow-list li{position:relative;padding:26px 24px 0 0;border-top:2px solid var(--ink)}
.i-flow-list li::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--ink)}
.i-flow-list li:nth-child(2){transition-delay:.1s}.i-flow-list li:nth-child(3){transition-delay:.2s}.i-flow-list li:nth-child(4){transition-delay:.3s}.i-flow-list li:nth-child(5){transition-delay:.4s}
.i-flow-list span a{color:var(--accent-d);font-weight:700;text-underline-offset:3px}
.i-flow-list li:last-child::after{content:"";position:absolute;top:-9px;right:0;width:16px;height:16px;background:var(--accent-d);clip-path:polygon(0 0,100% 50%,0 100%)}
.i-flow-list small{display:block;font-size:40px;color:var(--accent-d);margin-bottom:12px}
.i-flow-list b{display:block;font:900 20px/1.4 var(--f-jp);margin-bottom:10px}
.i-flow-list span{display:block;font:500 14px/1.95 var(--f-jp);color:var(--ink-2)}

/* ===== events ===== */
.i-ev-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 60px;align-items:end;margin-bottom:clamp(44px,6vw,80px)}
.i-ev-head .sec-no{grid-column:1/-1;margin:0}
.i-ev-head h2.en{font:900 clamp(60px,9vw,150px)/.88 var(--f-en);font-style:italic;font-stretch:66%}
.i-ev-head h2 b{color:var(--accent)}
.i-ev-head p{margin:0;font:500 15px/2 var(--f-jp);color:#cfcec7}
.i-ev-head p strong{color:var(--accent)}
.i-ev-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
/* 開催予定が1本だけのとき、2カラムの片側が空いて見えないよう中央に寄せる */
.i-ev-list:has(.i-ev:only-child){grid-template-columns:minmax(0,560px);justify-content:center}
.i-ev{background:var(--night-2);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .3s}
.i-ev:hover{border-color:#4a4e50}
.i-ev:nth-child(2){transition-delay:.12s}
.i-ev .ph{margin:0;aspect-ratio:16/10}
.i-ev .chip{position:absolute;left:16px;top:16px;z-index:2;padding:7px 10px;background:var(--accent);color:var(--night);font:600 10px/1 var(--f-mono);letter-spacing:.16em}
.i-ev .bd{padding:26px clamp(20px,2.4vw,32px) 30px;display:flex;flex-direction:column;flex:1}
.i-ev .date{display:flex;align-items:baseline;gap:12px;margin:0 0 6px}
.i-ev .date .en{font-size:clamp(56px,6vw,84px);line-height:.85}
.i-ev .date .dw{font:600 13px var(--f-mono);letter-spacing:.14em;color:var(--accent)}
.i-ev .date .tm{font-size:30px;color:var(--mute);margin-left:auto}
.i-ev h3{margin:10px 0 10px;font:900 clamp(22px,2.2vw,28px)/1.4 var(--f-jp)}
.i-ev .desc{margin:0 0 20px;font:500 14px/1.95 var(--f-jp);color:#c3c2bb}
.i-ev dl{margin:0 0 26px;display:grid;border-top:1px solid var(--line)}
.i-ev dl div{display:grid;grid-template-columns:5.5em 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font:500 13.5px/1.6 var(--f-jp)}
.i-ev dt{color:var(--mute)}
.i-ev dd{margin:0}
.i-ev dd b{font:900 20px/1 var(--f-en);font-stretch:80%;color:var(--accent)}
.i-ev dd.tbd{color:var(--mute)}
.i-ev .btn{margin-top:auto;justify-content:center;font:700 15px/1 var(--f-jp);font-style:normal;padding:18px}

/* ===== faq ===== */
.i-faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(30px,5vw,80px)}

/* ===== cta ===== */
.i-cta{min-height:min(88svh,780px);display:grid;align-items:center;overflow:hidden}
.i-cta-bg{position:absolute;inset:0}
.i-cta-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.i-cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,12,.93),rgba(12,13,12,.55) 55%,rgba(12,13,12,.2))}
.i-cta-in{position:relative;z-index:2;padding:0 var(--gut)}
.i-cta h2{font-size:clamp(66px,10vw,170px)}
.i-cta h2 b{color:var(--accent)}
.i-cta .jp{margin:28px 0 34px;font:900 clamp(20px,2.2vw,30px)/1.5 var(--f-jp)}
.i-cta .btn{font:700 15px/1 var(--f-jp);font-style:normal;padding:17px 24px}
.i-foot .f-row{color:var(--mute)}

/* ===== floating CTA (mobile) ===== */
.i-float{position:fixed;z-index:60;left:12px;right:12px;bottom:calc(12px + max(env(safe-area-inset-bottom), var(--browser-ui-bottom, 0px)));display:none;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:var(--accent);color:var(--night);text-decoration:none;font:700 13px/1.3 var(--f-jp);box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateY(160%);transition:transform .5s var(--ease)}
.i-float small{font:600 10px var(--f-mono);letter-spacing:.14em;margin-right:4px}
.i-float b{white-space:nowrap}
.i-float.show{transform:none}

/* ===== responsive ===== */
@media (max-width:900px){
  /* スマホのFV：写真を上に見せ、文字はその下の黒地に置く */
  .i-hero{display:block;min-height:0;padding-bottom:64px!important}
  .i-hero-bg{position:relative;height:min(52svh,440px);overflow:hidden}
  .i-hero-bg img{object-position:74% 38%}
  .i-hero-bg::after{background:linear-gradient(0deg,var(--night) 0%,rgba(12,13,12,.35) 34%,rgba(12,13,12,0) 60%),linear-gradient(180deg,rgba(12,13,12,.55),transparent 22%)}
  .i-hero-in{padding:0 var(--gut);margin-top:-86px}
  .i-hero .tag{margin-bottom:16px;font-size:10px;letter-spacing:.12em}
  .i-hero-h .en{font-size:clamp(58px,17vw,84px)}
  .i-hero-h .jp{margin-top:14px;font-size:clamp(25px,7vw,32px)}
  .i-hero-sub{margin-top:16px}
  .i-hero-cta{margin-top:24px}
  .i-next{position:relative;left:auto;right:auto;bottom:auto;margin:28px var(--gut) 0;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:16px}
  .i-next .k{grid-column:1/-1}
  .i-next .d{font-size:38px}
  .i-hero-route{display:none}
  .i-what-head,.i-reason,.i-for-grid,.i-ev-head,.i-ev-list,.i-faq-grid{grid-template-columns:1fr}
  .i-reason.rev .ph{order:0}
  .i-reason .ph{aspect-ratio:4/4.4}
  .i-steps{grid-template-columns:1fr}
  .i-flow-list{grid-template-columns:1fr;gap:0}
  .i-flow-list li{border-top:0;border-left:2px solid var(--ink);padding:0 0 34px 28px}
  .i-flow-list li::before{top:0;left:-8px}
  .i-flow-list li:last-child::after{display:none}
  .i-flow-list small{font-size:32px;margin-bottom:6px}
  .i-float{display:flex}
  .i-foot{padding-bottom:96px}
}
@media (max-width:520px){
  .sp{display:inline}
  .i-hero-sub{font-size:14px}
  .i-hero-cta{gap:18px}
  .i-ev .date .tm{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .i-hero-bg img{animation:none;transform:none}
  .i-hero-route circle{animation:none;opacity:1}
  .i-reason .ph img{transform:none;transition:none}
  .i-steps .draw,.i-steps .clock{transition:none}
}