/* ===================== v17：表紙の英字の動き／表紙の下の英単語の帯／流れの写真／得られるもの再提案 ===================== */

/* ---------- 表紙の下の帯：フードテックの英単語が流れ続ける（東京LPの写真の帯を、英単語に置き換えた版） ---------- */
.wtape{position:relative;overflow:hidden;background:#03140b;border-top:1px solid rgba(255,255,255,.08);padding:clamp(18px,2vw,26px) 0}
.wtape__in{display:flex;align-items:center;gap:clamp(22px,2.4vw,36px);width:max-content;animation:wtape 70s linear infinite}
.wtape:hover .wtape__in{animation-play-state:paused}
.wtape span{font-family:var(--f-en);font-weight:600;font-size:clamp(30px,3.6vw,56px);line-height:1;letter-spacing:.02em;color:rgba(255,255,255,.94);white-space:nowrap}
.wtape span.o{color:transparent;-webkit-text-stroke:1.2px rgba(181,255,220,.75)}
.wtape i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c3)}
@keyframes wtape{to{transform:translateX(calc(-50% - clamp(22px,2.4vw,36px) / 2))}}
html.static .wtape__in{animation:none}
@media (max-width:900px){.wtape{padding:14px 0}.wtape span{font-size:28px}.wtape__in{gap:18px}.wtape i{width:7px;height:7px}}

/* ---------- 得られるもの v17：共通（明朝の一語・事実の行）。写真は明るく編集した版を使うので、明るさの補正は外す ---------- */
.gn img{filter:none}
.gn__ph img[src*="P1111612"]{transform:none!important}
.gn__num{display:none}
.gn__w{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:clamp(34px,3.4vw,52px);line-height:1.2;letter-spacing:.08em;color:var(--v6-ink)}
.gn__tx h3{font-size:clamp(19px,1.6vw,22px)}
.gn__fact{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 0;margin-top:22px!important;padding-top:16px;border-top:1px solid var(--v6-hair);font-size:13px!important;font-weight:700;letter-spacing:.06em;color:var(--v6-ink)!important}
.gn__fact b{font-family:var(--f-en);font-weight:600;font-size:22px;letter-spacing:-.01em;margin:0 .15em;background:var(--iris2);-webkit-background-clip:text;background-clip:text;color:transparent}
.gn__fact i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--c3);margin:0 14px;transform:translateY(-3px)}

/* g1：明朝の一語を見出しの上に置き、写真が開いたあとに浮かぶ */
html[data-gn="g1"] .gn__tx h3{margin-top:18px;padding-top:0;border-top:0}
html[data-gn="g1"] .gn__tx>p:not(.gn__w):not(.gn__fact){margin-top:12px}
html[data-gn="g1"] .gn__ph{aspect-ratio:4/3}
html[data-gn="g1"] .gn__it:nth-child(2) .gn__ph img{width:100%;margin-left:0}
@media (max-width:900px){.gn__w{font-size:32px}}
.gn img[src*="P1111634"]{object-position:50% 40%}
html[data-gn="g1"] .gn__it:nth-child(2) .gn__ph{aspect-ratio:3/2}

/* ---------- g3（改）：流れる写真の帯の下に、明朝の一語が並ぶ3列。列の間は細い縦線、事実は列の下端にそろえる ---------- */
html[data-gn="g3"] .gn__mqin img{aspect-ratio:4/3;height:clamp(220px,24vw,320px)}
html[data-gn="g3"] .gn__items{margin-top:72px;gap:0;grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-gn="g3"] .gn__it{display:flex;flex-direction:column;padding:8px clamp(24px,3vw,44px) 0;border-left:1px solid var(--v6-hair)}
html[data-gn="g3"] .gn__it:first-child{border-left:0;padding-left:0}
html[data-gn="g3"] .gn__it:last-child{padding-right:0}
html[data-gn="g3"] .gn__it::before{content:none}
html[data-gn="g3"] .gn__tx{display:flex;flex-direction:column;height:100%}
html[data-gn="g3"] .gn__w{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html[data-gn="g3"] .gn__it.in .gn__w,html.static .gn__w{opacity:1;transform:none}
html[data-gn="g3"] .gn__it:nth-child(2) .gn__w{transition-delay:.15s}html[data-gn="g3"] .gn__it:nth-child(3) .gn__w{transition-delay:.3s}
html[data-gn="g3"] .gn__tx h3{margin-top:22px}
html[data-gn="g3"] .gn__fact{margin-top:auto!important}
html[data-gn="g3"] .gn__tx>p:not(.gn__w):not(.gn__fact){margin-bottom:22px}
@media (max-width:900px){
  html[data-gn="g3"] .gn__items{grid-template-columns:1fr;gap:0;margin-top:40px}
  html[data-gn="g3"] .gn__it,html[data-gn="g3"] .gn__it:first-child{border-left:0;padding:28px 0;border-top:1px solid var(--v6-hair)}
}
/* g3 見直し1：一語は折り返さない大きさに／事実の行は、数字の有無で高さが変わらないよう行の高さを固定 */
html[data-gn="g3"] .gn__w{font-size:clamp(28px,2.7vw,40px);white-space:nowrap;letter-spacing:.06em}
.gn__fact{min-height:56px;align-items:center;line-height:1}
.gn__fact b{line-height:1}
html[data-gn="g3"] .gn__tx h3{font-size:clamp(18px,1.45vw,20px)}
@media (max-width:900px){html[data-gn="g3"] .gn__w{font-size:30px}}

/* ---------- g4 縦長の写真3枚：写真の下端に明朝の一語を重ね、その下に文。画面に入ると下から順に立ち上がり、触れると写真がゆっくり寄る ---------- */
html[data-gn="g4"] .gn__items{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
html[data-gn="g4"] .gn__it{position:relative;display:flex;flex-direction:column;opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html[data-gn="g4"] .gn__it.in,html.static .gn__it{opacity:1;transform:none}
html[data-gn="g4"] .gn__it:nth-child(2){transition-delay:.15s}html[data-gn="g4"] .gn__it:nth-child(3){transition-delay:.3s}
html[data-gn="g4"] .gn__ph{position:relative;aspect-ratio:4/5}
html[data-gn="g4"] .gn__ph img{transition:transform 1.4s var(--ease)}
html[data-gn="g4"] .gn__it:hover .gn__ph img{transform:scale(1.05)}
html[data-gn="g4"] .gn__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(8,14,10,.72) 100%)}
html[data-gn="g4"] .gn__tx{display:flex;flex-direction:column;flex:1}
html[data-gn="g4"] .gn__w{position:absolute;left:24px;right:24px;top:0;aspect-ratio:4/5;display:flex;align-items:flex-end;padding-bottom:22px;color:#fff;font-size:clamp(28px,2.6vw,40px);white-space:nowrap;z-index:1;pointer-events:none;width:auto}
html[data-gn="g4"] .gn__tx h3{margin-top:24px}
html[data-gn="g4"] .gn__fact{margin-top:auto!important}
html[data-gn="g4"] .gn__tx>p:not(.gn__w):not(.gn__fact){margin-bottom:20px;font-size:15px}
@media (max-width:900px){
  html[data-gn="g4"] .gn__items{grid-template-columns:1fr;gap:48px;margin-top:36px}
  html[data-gn="g4"] .gn__ph,html[data-gn="g4"] .gn__w{aspect-ratio:4/3}
  html[data-gn="g4"] .gn__w{font-size:30px}
}
.gn__ph img[src*="P1111641"]{object-position:50% 70%}
.gn__lead{white-space:nowrap}

/* ---------- 表紙の英字の動き（?ha=a1〜a3）。1文字ずつ <i> に分け、各文字に同じ虹色を画面基準で敷く（つなぎ目が出ない） ---------- */
.v10n2 .v10__hand i{display:inline-block;font-style:normal;
  background:linear-gradient(100deg,#f4fff8 0%,#b5ffdc 24%,#a8f0f2 46%,#c7dcff 66%,#efdcff 84%,#fff6e6 100%);background-size:100vw 100svh;background-attachment:fixed;
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* a1 光が文字を走る：書き終わったあと、白い光が左上から右下へ、文字を1つずつ通り抜ける（6秒ごと） */
html[data-ha="a1"] .fv10.is-in .v10n2 .v10__hand i{animation:haGlow 6.5s ease-in-out infinite;animation-delay:calc(2.6s + var(--l) * .35s + var(--c) * .07s)}
@keyframes haGlow{0%,14%,100%{filter:none}6%{filter:brightness(1.9) drop-shadow(0 0 14px rgba(190,255,225,.85))}}

/* a2 1文字ずつ芽吹く：文字が下から伸びて立ち上がり、その後は風に揺れる葉のように、わずかに順番に傾く */
html[data-ha="a2"] .v10n2 .v10__hand span{clip-path:none!important}
html[data-ha="a2"] .v10n2 .v10__hand i{transform-origin:50% 100%;transform:scaleY(0);opacity:0}
html[data-ha="a2"] .fv10.is-in .v10n2 .v10__hand i{animation:haGrow 1s cubic-bezier(.3,1.5,.5,1) both,haSway 5s ease-in-out infinite;animation-delay:calc(.3s + var(--l) * .45s + var(--c) * .06s),calc(3s + var(--c) * .18s)}
@keyframes haGrow{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
@keyframes haSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}

/* a3 コードのように組み上がる：文字が記号から1字ずつ確定していく（処理は recipe.js）。確定した字だけ光る */
html[data-ha="a3"] .v10n2 .v10__hand span{clip-path:none!important}
html[data-ha="a3"] .v10n2 .v10__hand i.sc{opacity:.55}
html[data-ha="a3"] .v10n2 .v10__hand i.ok{animation:haLock .6s ease-out}
@keyframes haLock{0%{filter:brightness(2) drop-shadow(0 0 12px rgba(190,255,225,.9))}100%{filter:none}}

html.static .v10n2 .v10__hand i{animation:none!important;transform:none!important;opacity:1!important}
/* a1 見直し1：明るさの変化では淡い文字に差が出ないので、光の帯が文字の上を左から右へ通り抜ける形に（7秒ごと） */
html[data-ha="a1"] .fv10.is-in .v10n2 .v10__hand i{animation:none;
  background-image:linear-gradient(105deg,transparent 0 42%,rgba(120,255,190,.0) 44%,#ffffff 50%,rgba(120,255,190,.9) 53%,transparent 58% 100%),linear-gradient(100deg,#f4fff8 0%,#b5ffdc 24%,#a8f0f2 46%,#c7dcff 66%,#efdcff 84%,#fff6e6 100%);
  background-size:200vw 100svh,100vw 100svh;background-repeat:no-repeat;background-attachment:fixed;
  -webkit-background-clip:text;background-clip:text;animation:haSweep 7s cubic-bezier(.5,0,.4,1) 2.4s infinite}
@keyframes haSweep{0%{background-position:-150vw 0,0 0}45%,100%{background-position:60vw 0,0 0}}
/* a1 見直し2：画面基準の背景（fixed）は描き直されないので、各文字の位置（--x,--y）を測って虹色と光の帯を合わせる。帯は --t（0→1）で動かす */
@property --t{syntax:'<number>';inherits:false;initial-value:0}
.v10n2 .v10__hand i{background-attachment:scroll!important;
  background-image:linear-gradient(105deg,transparent 38%,#fff 48%,#ffffff 50%,#4dffa8 55%,transparent 64%),linear-gradient(100deg,#f4fff8 0%,#b5ffdc 24%,#a8f0f2 46%,#c7dcff 66%,#efdcff 84%,#fff6e6 100%)!important;
  background-size:calc(var(--W,800px) * 1.2) var(--H,400px),var(--W,800px) var(--H,400px)!important;background-repeat:no-repeat!important;
  background-position:calc((var(--t) * 2.6 - 1.3) * var(--W,800px) - var(--x,0px)) calc(-1 * var(--y,0px)),calc(-1 * var(--x,0px)) calc(-1 * var(--y,0px))!important}
html[data-ha="a1"] .fv10.is-in .v10n2 .v10__hand i{animation:haT 7s cubic-bezier(.45,0,.35,1) 2.4s infinite!important}
@keyframes haT{0%{--t:0}50%,100%{--t:1}}
.fv10:not(.is-in) .v10n2 .v10__hand{visibility:hidden} /* 入場まで隠す（仮の書体を見せない） */
html[data-ha="a3"] .v10n2 .v10__hand i{text-align:center} /* 記号の間も幅を固定（幅は recipe.js で測る） */

/* 表紙のキャッチコピーは最初から表示（動かすのは英字だけ） */
.v10n2 .v10__tate{opacity:1!important;transform:none!important;transition:none!important}