/* ============ hero（見本 1981×793 を実測して合わせた。ヒーロー高さ＝幅の35.1%） ============ */
.hero{
  position:relative;overflow:hidden;color:var(--white);
  background:
    radial-gradient(ellipse 22% 55% at 47% 58%,rgba(38,86,156,.55),rgba(38,86,156,0) 70%),
    linear-gradient(180deg,#072145 0%,#0a2752 55%,#062043 100%);
  height:max(35.1vw,560px);
  padding:max(7.3vw,64px) 0 0;
}
.hero__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:0}
.hero__ghost{
  position:absolute;left:1.2vw;bottom:-.2em;
  font-family:'Alfa Slab One',var(--en);font-size:11.6vw;line-height:1;
  letter-spacing:-.01em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.09);
  transform:scaleX(.74);transform-origin:left bottom;
  isolation:isolate;
}
/* 影は白い縁取りの線のまわりだけ（文字の中は背景の青のまま）：同じ文字を太い暗い線で描き、ぼかして後ろに敷く */
.hero__ghost::before{
  content:attr(data-t);position:absolute;left:0;top:0;z-index:-1;
  -webkit-text-stroke:.42vw rgba(0,5,22,.5);
  filter:blur(.28vw);transform:translate(.12vw,.2vw);
}
/* 赤い線3本（見本の位置・角度・太さ） */
.hero__line{position:absolute;display:block;transform-origin:0 50%}
.hero__line--a{left:0;top:92.5%;width:21vw;height:.76vw;background:var(--red);transform:rotate(8.9deg)}
.hero__line--c{left:33.6vw;top:83.2%;width:12.4vw;height:.6vw;transform:rotate(-16.8deg);
  background:linear-gradient(90deg,rgba(217,48,44,0),rgba(217,48,44,.55) 45%,rgba(217,48,44,.6))}
.hero__line--b{left:86vw;top:55.8%;width:16vw;height:.78vw;background:var(--red);transform:rotate(-15deg)}

/* 写真：ヒーロー全面に置き、見本の形で切り抜き、左側を紺に溶かす */
.hero__media{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .slider{position:absolute;inset:0;width:auto;max-width:none}
.hero .slides{
  position:absolute;inset:0;aspect-ratio:auto;border-radius:0;
  -webkit-clip-path:polygon(43% 9.1%,72.7% 0,99.05% 0,90.3% 80.4%,43% 94.5%);
  clip-path:polygon(43% 9.1%,72.7% 0,99.05% 0,90.3% 80.4%,43% 94.5%);
  -webkit-mask-image:linear-gradient(90deg,transparent 43.5%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.85) 52%,#000 55%);
  mask-image:linear-gradient(90deg,transparent 43.5%,rgba(0,0,0,.45) 48%,rgba(0,0,0,.85) 52%,#000 55%);
}
.hero .slides .slide{left:43%;width:57%}
.hero .slides .slide>img{object-position:center 28%}
.hero .dots{position:absolute;left:69.8%;top:90.2%;transform:translateX(-50%);margin:0;gap:18px;z-index:3;pointer-events:auto}
.hero .dot{width:13px;height:13px}
/* 手書きの一文：顔にかからないよう写真の上には置かず、予約ボタンの右隣（紺の上）に白文字で */
.hero__btns{align-items:center}
.hero__hand{flex:0 0 auto;margin:-34px 0 -34px 1.4vw;width:clamp(200px,15vw,270px);pointer-events:none}
.hero__hand img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 6px rgba(10,20,50,.45))}

/* 左の文字 */
.hero__inner{position:relative;z-index:3;width:100%;padding:0 20px 0 7.57vw}
.hero__copy{max-width:52vw;padding-left:1.4vw}
.hero__head{margin-left:-1.4vw;padding-left:1.6vw;border-left:1px solid rgba(255,255,255,.55);padding-top:1.6vw;padding-bottom:0}
.hero__catch{display:block;margin:-5.9vw 0 -.1vw -.6vw;width:36vw}
.hero__catch img{display:block;width:100%;height:auto}
.hero__title{
  font-family:'Shippori Mincho B1','Zen Kaku Gothic New',serif;font-weight:800;
  font-size:4.65vw;line-height:1.2;letter-spacing:.03em;
  color:var(--white);white-space:nowrap;margin:0;
}
.hero__title .sm{font-size:.7em}
.hero__title .ac{color:#8fc6f1}
.hero__en{
  display:flex;align-items:center;gap:1vw;
  font-family:var(--jp);font-weight:500;font-size:.9vw;letter-spacing:.26em;
  margin:.5vw 0 2.4vw;
}
.hero__en::before{content:"";width:2.5vw;height:1px;background:rgba(255,255,255,.75);flex:0 0 auto}
.hero__lead{font-size:.87vw;line-height:1.58;letter-spacing:.07em;color:var(--white);margin:0 0 1.75vw}
.hero__btns{display:flex;gap:1.26vw;flex-wrap:wrap}
.hbtn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:.8vw;
  width:14.4vw;height:3.35vw;padding:0 1.4vw 0 1.7vw;
  border-radius:4px;text-decoration:none;font-weight:700;font-size:.95vw;letter-spacing:.12em;
  transition:background-color .2s,color .2s;
}
.hbtn .ic{width:1.8em;height:1.8em;flex:0 0 auto}
.hbtn .lb{flex:1}
.hbtn .ar{width:1.3em;height:1.3em;flex:0 0 auto;transition:transform .2s}
@media (hover:hover){ .hbtn:hover .ar{transform:translateX(4px)} }
.hbtn--fill{background:var(--white);color:var(--navy)}
@media (hover:hover){ .hbtn--fill:hover{background:#e8eef8} }

/* ============ message ============ */
.msg__grid{display:grid;grid-template-columns:1fr 400px;gap:48px;align-items:start}
.msg__body p{margin-bottom:12px}
.msg__body p:last-child{margin-bottom:0}

/* ============ pickup ============ */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pick__item{
  position:relative;
  border:3px solid var(--navy);border-radius:6px;background:var(--white);
  box-shadow:0 6px 16px rgba(30,47,110,.10);
}
.pick__ph{border:0;border-bottom:3px solid var(--navy);border-radius:3px 3px 0 0}
.pick__ph--elesas{background:#eceef0}
.pick__ph--elesas>img{object-position:center}
.pick__body{padding:20px}
.pick__no{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--navy);color:var(--white);
  font-family:var(--en);font-size:17px;letter-spacing:.1em;line-height:1.5;
  padding:2px 10px;
}
.pick__no b{font-weight:400}
.pick__title{font-weight:900;font-size:20px;color:var(--navy);line-height:1.6;margin-bottom:10px}
.pick__txt{font-size:17px;line-height:1.85}
/* M・NET のカード：連携先の病院へ（カード全体が押せる） */
.pick__item--link{cursor:pointer}
.pick__more{margin-top:16px}
.pick__cat{display:block;font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--red);margin-bottom:6px}
@media (hover:hover){ .pick__item--link:hover .gobtn{background:var(--red)} }
/* スナップ写真の帯：左右3段ずつ、段ごとに向きを変えて横に流れ続ける（乗せると止まる・画面外と「動きを減らす」設定では止める） */
.snaps{--th:clamp(200px,16vw,310px);display:grid;grid-template-columns:1fr minmax(300px,24vw) 1fr;align-items:center;padding:64px 0;background:var(--white);overflow:hidden}
.snaps__side{display:flex;flex-direction:column;gap:10px;min-width:0}
.snaps__lane{overflow:hidden;height:var(--th)}
.snaps__track{display:flex;width:max-content;height:100%;animation:snapsFlow var(--dur,80s) linear infinite}
.snaps__lane--rev .snaps__track{animation-direction:reverse}
.snaps.is-off .snaps__track,.snaps.is-paused .snaps__track{animation-play-state:paused}
@media (hover:hover){ .snaps__lane:hover .snaps__track{animation-play-state:paused} }  /* スマホは触った段が :hover のまま止まり続けるので、マウスの端末だけ */
/* 流れを止める／動かすボタン（動くものを止められるように） */
.snaps{position:relative}
.snaps__pause{position:absolute;right:16px;bottom:16px;z-index:2;width:40px;height:40px;border-radius:50%;border:2px solid var(--navy);background:var(--white);color:var(--navy);display:grid;place-items:center;cursor:pointer;padding:0}
.snaps__pause:focus-visible{background:var(--navy);color:var(--white)}
@media (hover:hover){ .snaps__pause:hover{background:var(--navy);color:var(--white)} }
.snaps__pause:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.snaps__pause svg{width:16px;height:16px}
.snaps__pause .i-play,.snaps.is-paused .snaps__pause .i-pause{display:none}
.snaps.is-paused .snaps__pause .i-play{display:block}
@media (prefers-reduced-motion:reduce){ .snaps__pause{display:none} }
.snaps__set{display:flex;height:100%}
.snaps__set img{display:block;height:100%;width:auto;margin-right:10px;border:5px solid var(--white);border-radius:3px;box-shadow:0 2px 8px rgba(30,47,110,.18);background:var(--white)}
@keyframes snapsFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.snaps__center{display:flex;justify-content:center;margin:0 20px}
.snaps__copy{display:block;height:calc(var(--th) * 2.4);width:auto;max-width:100%;object-fit:contain}
/* 縦書きは場面が画面に入ったら（reveal の .in）、上から書いていくように現れる。右の行（0.2〜1.4秒）の途中から左の行（0.75〜1.75秒）を重ねて書き始める
   （右と左を別々の時間で動かすため、マスクの高さを登録したカスタムプロパティ --wr／--wl で持つ。対応していないブラウザは書き終わりの状態で出る） */
@property --wr{syntax:"<percentage>";inherits:false;initial-value:125%}
@property --wl{syntax:"<percentage>";inherits:false;initial-value:125%}
@media (prefers-reduced-motion:no-preference){
  .js .snaps__center.reveal .snaps__copy{
    --wr:0%;--wl:0%;
    -webkit-mask-image:linear-gradient(#000 82%,transparent),linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent),linear-gradient(#000 82%,transparent);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right top,left top;mask-position:right top,left top;
    -webkit-mask-size:50% var(--wr),50% var(--wl);mask-size:50% var(--wr),50% var(--wl)
  }
  .js .snaps__center.reveal.in .snaps__copy{animation:snapsWriteR 1.2s cubic-bezier(.45,.05,.35,1) .2s both,snapsWriteL 1s cubic-bezier(.45,.05,.35,1) .75s both}
}
@keyframes snapsWriteR{from{--wr:0%}to{--wr:125%}}
@keyframes snapsWriteL{from{--wl:0%}to{--wl:125%}}
@media (prefers-reduced-motion:reduce){ .snaps__track{animation:none} }
@media (max-width:768px){
  .snaps{--th:160px;grid-template-columns:1fr;gap:18px;padding:44px 0}
  .snaps__side .snaps__lane:nth-child(3){display:none}
  .snaps__copy{height:360px}
}

/* ============ 予約CTA帯 ============ */
.cta{position:relative;overflow:hidden;background:var(--navy);color:var(--white);padding:84px 0 88px}
/* 背景のブルドッグ（薄く）：左＝走る／右＝力こぶ／その内側＝グッドサイン */
/* 柔道ブルドッグ（左＝背負い投げ・右＝巴投げ。どちらも左右交互にくり返す動画。動画をそのまま出すとブラウザの色変換で紺がずれて四角が見えるので、1コマずつキャンバスに描いて紺の背景だけ透明に抜く。動きを減らす設定・JS無しは組み合いの静止画） */
.cta__judo{--jw:clamp(280px,26vw,390px);--jx:max(0px,calc(50% - 228px - var(--jw)));position:absolute;bottom:-20px;width:var(--jw);aspect-ratio:1;z-index:1;pointer-events:none;user-select:none;}
.cta__judo>*{position:absolute;inset:0;display:block;width:100%;height:100%}
.cta__judo video{opacity:0}
.judo__cv{display:none}
.cta__judo.is-live .judo__cv{display:block}
.cta__judo.is-live .judo__still{visibility:hidden}
.cta__judo--l{left:var(--jx)}
.cta__judo--r{right:var(--jx)}
@media (max-width:1060px){
  .cta{padding-top:24px}
  .cta__judos{display:flex;justify-content:center;margin:-10px auto -14px}
  .cta__judo{position:relative;left:auto;right:auto;bottom:auto;width:min(46vw,280px)}
}
.cta__inner{position:relative;z-index:2;text-align:center}
.cta__en{font-family:var(--en);font-size:14px;letter-spacing:.32em;color:rgba(255,255,255,.72);margin-bottom:10px}
.cta__title{font-weight:900;font-size:32px;letter-spacing:.06em;line-height:1.5;margin-bottom:8px}
.cta__sub{font-weight:700;font-size:17px;letter-spacing:.06em;line-height:1.7;color:rgba(255,255,255,.9);margin-bottom:26px}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ news ============ */
.news__grid{max-width:760px;margin:0 auto}
.news__list li{display:flex;gap:20px;padding:16px 0;border-top:3px double var(--navy)}
.news__list li:last-child{border-bottom:3px double var(--navy)}
.news__date{font-family:var(--en);font-size:16px;color:var(--navy);letter-spacing:.06em;flex:0 0 auto;padding-top:2px}
.news__txt{font-size:17px}

/* ============ responsive（index 専用） ============ */

@media (min-width:1061px) and (max-width:1500px){
  .hero__catch{width:max(36vw,420px);margin-top:-74px}
  .hero__title{font-size:max(4.65vw,54px)}
  .hero__en{font-size:max(.9vw,12px)}
  .hero__lead{font-size:max(.87vw,14px)}
  .hbtn{width:max(14.4vw,210px);height:max(3.35vw,50px);font-size:max(.95vw,14px)}
}
@media (max-width:1060px){
  .hero__grid,.msg__grid{grid-template-columns:1fr;gap:32px}
  .slider{margin-left:auto;margin-right:auto}
  .pick{grid-template-columns:repeat(2,1fr)}
  .hero{display:block;height:auto;min-height:0;padding:0 0 56px;background:linear-gradient(180deg,#0a2752 0%,#072145 100%)}
  .hero__inner{padding:0 20px}
  .hero__copy{max-width:none;padding-left:22px}
  .hero__head{margin-left:-22px;padding-left:24px;padding-top:30px}
  .hero__catch{width:min(100%,460px);margin:-34px 0 12px -6px}
  .hero__en{font-size:13px;gap:14px;margin:18px 0 22px}
  .hero__en::before{width:36px}
  .hero__lead{font-size:15px;margin-bottom:24px}
  .hero__btns{gap:12px}
  .hbtn{width:auto;min-width:220px;height:52px;font-size:15px;padding:0 18px 0 20px;gap:12px}
  .hero .slides .slide{left:0;width:100%}
  .hero__line--c{display:none}
  .hero__line--a{top:auto;bottom:10px;width:40vw;height:6px}
  .hero__copy{max-width:none}
  .hero__title{font-size:clamp(28px,6.4vw,46px)}
  .hero__media{position:relative;left:auto;right:auto;top:auto;bottom:auto;height:64vw;margin-top:0}
  .hero__inner{margin-top:28px}
  .hero .slides{-webkit-clip-path:polygon(0 6%,100% 0,100% 90%,0 100%);clip-path:polygon(0 6%,100% 0,100% 90%,0 100%);-webkit-mask-image:none;mask-image:none}
  .hero__hand{width:clamp(200px,58vw,280px);margin:4px 0 0 auto}
  .hero .dots{left:50%;top:auto;bottom:4%}
  .hero .dots{left:50%;transform:translateX(-50%);bottom:4%}
  .hero__line--b{display:none}
}
@media (max-width:768px){
  .news__list li{flex-direction:column;gap:4px}
  .hero{padding:0 0 52px}
  .hero__inner{padding:0 16px}
  .hero__en{font-size:min(12px,2.55vw);letter-spacing:.08em;gap:8px;white-space:nowrap}
  .hero__en::before{width:18px}
  .hero__btns{gap:10px;flex-wrap:wrap}
  .hero__hand{flex:0 0 100%;display:flex;justify-content:flex-end;width:auto;margin:6px 0 0}
  .hero__hand img{width:clamp(200px,62vw,280px)}
  .hero__btns .hbtn{flex:1 1 0;min-width:0;height:46px;font-size:14px;letter-spacing:.06em;padding:0 12px;gap:8px}
  .hero__btns .hbtn .ic{width:1.6em;height:1.6em}
  .hero__btns .hbtn .lb{white-space:nowrap}
  .cta__title{font-size:24px}
  .cta__btns .btn{flex:1 1 100%}
  .pick{grid-template-columns:1fr}
}
@media (max-width:400px){
  .news__txt{font-size:15px}
  .hero__btns .hbtn{font-size:13px;letter-spacing:.03em;padding:0 10px;gap:6px;justify-content:center}
  .hero__btns .hbtn .lb{flex:0 0 auto}
  .hero__btns .hbtn .ar{display:none}
  .hero__title{font-size:26px}
  .hero__catch{width:min(100%,300px)}
}

/* ============ opening（#intro） ============
   JSが <html class="intro-on"> を付けたときだけ出す（JS無効なら出ない）。
   降ってくる（introDrop）→ 吠える（動画）→ 透過ロゴ .intro__fly がヘッダーのロゴへ飛ぶ。
   ヘッダーのロゴは飛び終わり（.intro-landed）まで隠しておく */
#intro{display:none}
.intro-on #intro{
  display:flex;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:200;overflow:hidden;
  background:#101836 radial-gradient(circle min(44vmin,352px) at 50% 48%,#2E4486,#101836) no-repeat;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .55s ease;
}
.intro-on #intro.is-out{opacity:0;pointer-events:none}
.intro__patch{
  width:min(80vmin,640px);aspect-ratio:1;
  background:#101836;
  transform:scale(3.2);opacity:0;
}
#intro.is-go .intro__patch{
  animation:introDrop .75s ease-out both;
  position:relative;
}
/* 動画は隠し、背景を抜いた絵を canvas に描く（輪が拳の後ろを通るように）。抜けない環境（no-key）は動画をそのまま表示 */
.intro__patch video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;-webkit-mask-image:radial-gradient(circle at 50% 46%,#000 64%,transparent 78%);mask-image:radial-gradient(circle at 50% 46%,#000 64%,transparent 78%)}
.intro__canvas{display:block;position:relative;width:100%;height:100%;z-index:1}
.intro__patch.no-key video{opacity:1;position:relative;z-index:1}
.intro__patch.no-key .intro__canvas{display:none}
.intro__ribbon,.intro__loading,.intro__fly{z-index:2}
.intro__fly{position:absolute;width:79.7%;height:auto;left:10.15%;top:19%;opacity:0;pointer-events:none}
/* リボンは動画中で動かないので、白縁の欠けを元ロゴのリボンで上書き */
.intro__ribbon{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* 円周を回るローディングの弧（白→赤の先端） */
.intro__ring{
  position:absolute;left:50%;top:50%;width:98%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,255,255,.42) 0 55%,rgba(255,255,255,1) 93%,var(--red) 93% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));
  animation:introSpin 1.4s linear infinite;
}
#intro.is-flying .intro__ribbon,#intro.is-flying .intro__ring,#intro.is-flying .intro__loading{visibility:hidden}
.intro__loading{
  position:absolute;left:0;right:0;top:87%;text-align:center;pointer-events:none;
  font-family:var(--en);font-size:clamp(13px,2.4vmin,18px);letter-spacing:.42em;color:rgba(255,255,255,.85);
  animation:introPulse 1.4s ease-in-out infinite;
}
@keyframes introPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes introSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#intro.is-flying .intro__patch video,#intro.is-flying .intro__canvas{visibility:hidden}
html.intro-lock{overflow:hidden}
.intro-on:not(.intro-landed) .brand__mark img{visibility:hidden}
@keyframes introDrop{
  0%{transform:scale(3.2);opacity:0}
  30%{opacity:1}
  70%{transform:scale(.9)}
  86%{transform:scale(1.05)}
  100%{transform:scale(1);opacity:1}
}
@media (max-width:768px){
  .intro__patch{width:min(94vw,94vmin)}
}

/* ============ motion（index 専用） ============ */

/* --- hero slider --- */
/* 写真が小さいため拡大しすぎない */
.slider{width:100%;max-width:600px}
.slides{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:6px}
.slides .slide{position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.slides .slide>img{display:block;width:100%;height:100%;object-fit:cover}
/* 面色はプレースホルダ（.ph）のスライドだけ。
   JSが無いときは重なり順で1枚目だけが見える。 */
.hero .slide{border-color:rgba(255,255,255,.35)}
.hero .slide.ph::after{color:rgba(255,255,255,.85)}
.slides .slide:nth-child(1){z-index:5}
.slides .slide:nth-child(2){z-index:4}
.slides .slide:nth-child(3){z-index:3}
.slides .slide:nth-child(4){z-index:2}
.slides .slide:nth-child(5){z-index:1}
.slides .slide:nth-child(n+6){z-index:0}
.slides .slide.ph:nth-child(1){background:#39487F}
.slides .slide.ph:nth-child(2){background:#425085}
.slides .slide.ph:nth-child(3){background:#39487F}
.slides .slide.ph:nth-child(4){background:#4B598B}
.slides .slide.ph:nth-child(5){background:#3D4C82}
.dots{display:flex;justify-content:center;gap:9px;margin-top:12px}
.dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--white);background:transparent;flex:0 0 auto}
.dot.is-on{background:var(--white)}
.star{display:inline-block}

/* --- stagger index --- */
.pick .pick__item:nth-child(3n+1){--i:0}
.pick .pick__item:nth-child(3n+2){--i:1}
.pick .pick__item:nth-child(3n+3){--i:2}
@media (hover:hover){ .pick__item:hover{transform:translateY(-3px);border-color:var(--red)} }

@media (prefers-reduced-motion:no-preference){
  .pick__item{transition:transform .2s ease,border-color .2s ease}
  .dot{transition:background-color .3s ease}

  /* 1. ヒーロー写真スライドショー（クロスフェード1.2秒＋6秒かけて1→1.06） */
  .js .slides .slide{opacity:0;z-index:1;transform:scale(1);transition:opacity 1.2s ease,transform 6s ease-out}
  .js .slides .slide.is-on{opacity:1;z-index:2;transform:scale(1.06)}

  /* 2b. ヒーローの斜めストライプが左下から走り込む */
  .js .hero__line--a{animation:lineRun .9s cubic-bezier(.2,.8,.3,1) both}

  /* 2c. ゴースト文字は字間が締まる */
  .js .hero__ghost{animation:ghostIn 1s ease-out both}

  /* 2d. ネームテープが貼り付く */
  .js .tape{animation:tapeOn .45s cubic-bezier(.2,1.4,.4,1) .4s backwards}

  /* 2e. オープニング表示中は 2〜2d を開始前の状態で止めておき、
         <html> に .intro-done が付いた瞬間に動かす */
  .intro-on:not(.intro-done) .hero__line--a,
  .intro-on:not(.intro-done) .hero__ghost,
  .intro-on:not(.intro-done) .tape{animation-play-state:paused}

  /* 5. ★番号 */
  .js .pick__item.in .star{animation:starPop .35s cubic-bezier(.2,1.5,.4,1) calc(.3s + var(--i,0)*80ms) backwards}
}

@keyframes stripeRun{from{transform:translate(-16%,16%) rotate(-14deg)}to{transform:translate(0,0) rotate(-14deg)}}
@keyframes lineRun{from{transform:rotate(8.9deg) scaleX(0)}to{transform:rotate(8.9deg) scaleX(1)}}
@keyframes ghostIn{from{letter-spacing:.3em}to{letter-spacing:.05em}}
@keyframes tapeOn{from{opacity:0;transform:rotate(-2deg) scale(.8)}to{opacity:1;transform:rotate(-2deg) scale(1)}}
@keyframes starPop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}

/* ============ パートナー企業 ============ */
.partner{max-width:760px;margin:0 auto;display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center;position:relative;cursor:pointer;padding:28px 36px}
.partner__logo{margin:0}
.partner__logo img{display:block;width:100%;height:auto}
.partner__cat{font-family:var(--en);font-size:14px;letter-spacing:.16em;color:var(--red);margin-bottom:6px}
.partner__name{font-weight:900;font-size:30px;letter-spacing:.06em;color:var(--navy);line-height:1.4;margin-bottom:10px}
.partner__txt{font-size:17px;line-height:1.8;margin-bottom:20px}
@media (hover:hover){ .partner:hover .gobtn{background:var(--red)} }
@media (max-width:640px){
  .partner{grid-template-columns:1fr;gap:20px;text-align:center;padding:24px 20px}
  .partner__logo{width:150px;justify-self:center}
  .partner__name{font-size:26px}
}