/* ===================== v8：インパクト重視の表紙（方向の違う5案） ===================== */
/* 参考：a リクルート新卒採用（モノクロ写真＋手書きの大文字＋縦書き）／b SmartHR採用（白い帯の大見出し＋鮮やかなグラデ＋網点）
         c 文字の形で写真を抜く大見出し／d 日本のポスター（縦書きの明朝）／e メルカリ採用（明るい色面＋大文字＋写真） */
.fv8{position:relative;color:var(--v6-ink)}
.v8{display:none;position:relative;min-height:100svh;overflow:hidden}
html[data-fv="a"] .v8a,html[data-fv="b"] .v8b,html[data-fv="c"] .v8c,html[data-fv="d"] .v8d,html[data-fv="e"] .v8e{display:block}
.v8__date{font-size:14px;font-weight:500;letter-spacing:.06em}
.v8__date i{display:inline-block;width:1px;height:.9em;background:currentColor;opacity:.35;margin:0 12px;vertical-align:-1px}
.v8__cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.v8__btn{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 30px;border-radius:999px;background:var(--v6-ink);color:#fff;font-size:15px;font-weight:700;letter-spacing:.06em;transition:background .25s,color .25s}
.v8__btn::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--c3)}
.v8__sub{font-size:14px;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:2px}
.v8__sub::after{content:" →"}
.v8 em{font-style:normal;font-family:var(--f-en);font-weight:500;margin-left:.4em;letter-spacing:.02em}

/* ヘッダー：表紙の上では透明。暗い写真の案（a・d）は白文字 */
html[data-fv] .rc .hdr:not(.is-scrolled),html[data-fv] .hdr:not(.is-scrolled){background:transparent;box-shadow:none;backdrop-filter:none}
html[data-fv="a"] .hdr:not(.is-scrolled) .logo,html[data-fv="a"] .hdr:not(.is-scrolled) .nav a,
html[data-fv="d"] .hdr:not(.is-scrolled) .logo,html[data-fv="d"] .hdr:not(.is-scrolled) .nav a{color:#fff!important}
html[data-fv="a"] .hdr:not(.is-scrolled) .logo b,html[data-fv="d"] .hdr:not(.is-scrolled) .logo b{color:#fff}
html[data-fv="a"] .hdr:not(.is-scrolled) .cta,html[data-fv="d"] .hdr:not(.is-scrolled) .cta{background:#fff;color:var(--v6-ink)}

/* ---------- a 映画×手書き ---------- */
.v8a{background:#0b0d0c;color:#fff}
.v8a__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:brightness(.7)}
.v8a::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 60% 45%,transparent 30%,rgba(0,0,0,.55) 100%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 40%)}
.v8a>*:not(img){position:relative;z-index:2}
.v8a__hand{position:absolute!important;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));right:var(--gut);top:24svh;font-family:"Zen Kurenaido",var(--f-jp);font-size:clamp(48px,8.2vw,124px);line-height:1.18;letter-spacing:.02em;
  background:linear-gradient(100deg,#d9ffe9 0%,#7ff0c6 22%,#8fd3ff 44%,#d7b8ff 66%,#ffd2a8 86%,#fff3c9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 30px rgba(0,0,0,.35))}
.v8a__hand span{display:block}
.v8a__hand span+span{padding-left:1.2em}
.v8a__name{position:absolute!important;right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));top:calc(var(--hd) + 40px);writing-mode:vertical-rl;font-size:17px;font-weight:700;letter-spacing:.24em;line-height:1}
.v8a__name em{margin:.6em 0 0;font-size:15px;letter-spacing:.12em}
.v8a__foot{position:absolute!important;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));bottom:48px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.v8a .v8__btn{background:#fff;color:var(--v6-ink)}
.v8a .v8__date{color:rgba(255,255,255,.88)}
/* 動き：手書きの文字を左から書くように出す */
.v8a__hand span{clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.6,.05,.25,1)}
.fv8.is-in .v8a__hand span{clip-path:inset(0 -5% 0 0)}
.fv8.is-in .v8a__hand span+span{transition-delay:1.1s}
.v8a__bg{transform:scale(1.08);transition:transform 6s ease-out}
.fv8.is-in .v8a__bg{transform:none}

/* ---------- b 文字の帯×グラデ ---------- */
.v8b{background:linear-gradient(125deg,#08583c 0%,#12a36a 28%,#5fd6a5 48%,#bfeee0 62%,#ffd9b0 82%,#ff9e6e 100%)}
.v8b::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) 1.1px,transparent 1.6px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(110deg,transparent 30%,#000 60%,transparent 95%);mask-image:linear-gradient(110deg,transparent 30%,#000 60%,transparent 95%)}
.v8b__tx{position:relative;padding:calc(var(--hd) + 9svh) 0 0}
.v8b__big span,.v8b__small span{display:table;background:#fff;color:var(--v6-ink)}
.v8b__big span{font-size:clamp(44px,7vw,108px);font-weight:900;line-height:1.24;letter-spacing:.01em;padding:.02em .22em .06em max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));margin-bottom:.12em}
.v8b__small{margin-top:22px}
.v8b__small span{font-size:15px;font-weight:700;letter-spacing:.06em;padding:4px 12px 4px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));margin-bottom:6px}
.v8b__small span:first-child{font-size:17px}
.v8b__cta{position:absolute;right:0;bottom:0;display:flex}
.v8b__cta a{display:flex;align-items:center;gap:40px;height:64px;padding:0 28px;font-size:15px;font-weight:700;letter-spacing:.06em}
.v8b__cta a::after{content:"→";font-size:18px}
.v8b__sub{background:#fff}
.v8b__btn{background:var(--v6-ink);color:#fff}
.v8b__btn:hover{background:var(--c1)}
/* 動き：帯が左から伸びて文字が出る */
.v8b__big span,.v8b__small span{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.fv8.is-in .v8b__big span,.fv8.is-in .v8b__small span{clip-path:inset(0 0 0 0)}
.fv8.is-in .v8b__big span:nth-child(2){transition-delay:.12s}.fv8.is-in .v8b__big span:nth-child(3){transition-delay:.24s}
.fv8.is-in .v8b__small span{transition-delay:.45s}.fv8.is-in .v8b__small span+span{transition-delay:.55s}
.v8b{background-size:160% 160%;animation:v8grad 14s ease-in-out infinite alternate}
@keyframes v8grad{from{background-position:0% 30%}to{background-position:100% 70%}}

/* ---------- c 文字で写真を抜く ---------- */
.v8c{background:#fff;display:none;flex-direction:column;justify-content:flex-end;padding:calc(var(--hd) + 3svh) 0 44px}
html[data-fv="c"] .v8c{display:flex}
.v8c__big{padding:0 max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));font-size:clamp(50px,10.4vw,150px);font-weight:900;line-height:1.08;letter-spacing:-.01em;
  background:url(/hiroshimahackathon/img/v6-p348689.webp) 50% 40%/cover;-webkit-background-clip:text;background-clip:text;color:transparent}
.v8c__big span{display:block}
.v8c__row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;margin:4svh max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut))) 0;padding-top:22px;border-top:2px solid var(--v6-ink)}
.v8c__name{font-size:18px;font-weight:700;letter-spacing:.04em}
.v8c__name em{color:var(--c1)}
.v8c .v8__date{color:var(--v6-ink2)}
.v8c__big{background-position:50% 30%;transition:background-position 8s ease-out}
.fv8.is-in .v8c__big{background-position:50% 60%}
.v8c__big span{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.fv8.is-in .v8c__big span{opacity:1;transform:none}
.fv8.is-in .v8c__big span:nth-child(2){transition-delay:.12s}.fv8.is-in .v8c__big span:nth-child(3){transition-delay:.24s}

/* ---------- d 縦書きポスター ---------- */
.v8d{background:#0d150f;color:#fff}
.v8d__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9)}
.v8d::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.45),transparent 50%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%)}
.v8d>*:not(img){position:relative;z-index:2}
.v8d__tate{position:absolute!important;right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));top:calc(var(--hd) + 5svh);writing-mode:vertical-rl;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:clamp(44px,6.4vw,96px);line-height:1.35;letter-spacing:.08em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.v8d__tate span{display:block}
.v8d__tate span+span{padding-top:2.2em}
.v8d__foot{position:absolute!important;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));bottom:52px;display:grid;gap:14px}
.v8d__name{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:.04em}
.v8d .v8__date{color:rgba(255,255,255,.88)}
.v8d .v8__cta{margin-top:12px}
.v8d .v8__btn{background:#fff;color:var(--v6-ink)}
.v8d__tate span{opacity:0;transform:translateY(-24px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.fv8.is-in .v8d__tate span{opacity:1;transform:none}
.fv8.is-in .v8d__tate span+span{transition-delay:.5s}
.v8d__bg{transform:scale(1.1);transition:transform 8s ease-out}
.fv8.is-in .v8d__bg{transform:scale(1.02)}

/* ---------- e 色面×写真の束 ---------- */
.v8e{background:#c9f26a}
.v8e__ghost{position:absolute;right:-.06em;bottom:-.2em;font-size:clamp(160px,30vw,440px);font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(18,60,30,.08);white-space:nowrap}
.v8e__photos{position:absolute;right:max(var(--gut),calc((100vw - var(--wrap))/2));top:calc(var(--hd) + 4svh);width:min(48vw,640px);height:calc(100svh - var(--hd) - 8svh)}
.v8e__photos img{position:absolute;object-fit:cover;border-radius:6px;box-shadow:0 30px 60px -30px rgba(10,30,15,.55)}
.v8e__photos img:nth-child(1){left:0;top:4%;width:46%;height:56%}
.v8e__photos img:nth-child(2){left:52%;top:0;width:48%;height:40%}
.v8e__photos img:nth-child(3){left:52%;top:46%;width:30%;height:34%}
.v8e__photos img:nth-child(4){left:14%;top:66%;width:34%;height:30%}
.v8e__tx{position:relative;padding:calc(var(--hd) + 13svh) 0 0 max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));max-width:56%}
.v8e__name{font-size:clamp(46px,6vw,92px);font-weight:900;line-height:1.08;letter-spacing:-.005em}
.v8e__name span{display:block}
.v8e__name em{font-size:.5em;font-weight:600;color:#14532d}
.v8e__copy{margin-top:26px;font-size:clamp(18px,1.6vw,23px);font-weight:700;letter-spacing:.05em}
.v8e .v8__date{margin-top:14px}
.v8e .v8__cta{margin-top:30px}
.v8e__photos img{opacity:0;transform:translateY(30px) scale(.97);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.fv8.is-in .v8e__photos img{opacity:1;transform:none}
.fv8.is-in .v8e__photos img:nth-child(2){transition-delay:.12s}.fv8.is-in .v8e__photos img:nth-child(3){transition-delay:.24s}.fv8.is-in .v8e__photos img:nth-child(4){transition-delay:.36s}

html.static .fv8 *{transition:none!important;animation:none!important}
html.static .v8a__hand span,html.static .v8b__big span,html.static .v8b__small span{clip-path:none}
html.static .v8c__big span,html.static .v8d__tate span,html.static .v8e__photos img{opacity:1;transform:none}

/* ---------- スマホ ---------- */
@media (max-width:900px){
  .v8{min-height:100svh}
  .v8a__hand{top:20svh;font-size:clamp(40px,11.5vw,60px);left:20px;right:20px}
  .v8a__hand span+span{padding-left:0}
  .v8a__name{font-size:14px;right:20px;top:calc(var(--hd) + 20px);display:none}
  .v8a__foot,.v8d__foot{left:20px;right:20px;bottom:28px;flex-direction:column;align-items:stretch}
  .v8a__foot::before{content:"広島AIフードテックハッカソン 2026";font-size:17px;font-weight:700;letter-spacing:.04em}
  .v8__btn{width:100%;justify-content:space-between}
  .v8b__tx{padding-top:calc(var(--hd) + 6svh)}
  .v8b__big span{font-size:clamp(34px,10.5vw,52px);padding-left:16px}
  .v8b__small span{padding-left:16px;font-size:13px}
  .v8b__small span:first-child{font-size:15px}
  .v8b__cta{left:0;flex-direction:column}
  .v8b__cta a{justify-content:space-between;height:58px}
  .v8b__btn{order:-1}
  .v8c{padding-bottom:28px}
  .v8c__big{font-size:clamp(40px,13vw,64px);padding:0 16px}
  .v8c__row{grid-template-columns:1fr;gap:12px;margin:24px 16px 0}
  .v8d__tate{font-size:clamp(34px,10vw,52px);right:18px;top:calc(var(--hd) + 18px)}
  .v8d__name{font-size:19px}
  .v8e__photos{position:relative;right:auto;top:auto;width:auto;height:34svh;margin:calc(var(--hd) + 12px) 16px 0}
  .v8e__tx{max-width:none;padding:22px 16px 32px}
  .v8e__name{font-size:clamp(38px,11vw,54px)}
  .v8e__copy{font-size:16px;margin-top:14px}
}
/* 見直し1 */
/* a：2行目が折り返さない大きさに */
.v8a__hand{font-size:clamp(44px,6.6vw,104px);white-space:nowrap;top:22svh}
/* b：右側が白っぽく間延びしたので、色を濃くし網点を大きく */
.v8b{background:linear-gradient(125deg,#064a33 0%,#0f9a63 30%,#2fc99a 50%,#7fdcd0 64%,#ffc48a 84%,#ff7f50 100%);background-size:160% 160%}
.v8b::before{background-image:radial-gradient(rgba(255,255,255,.5) 1.6px,transparent 2.2px);background-size:10px 10px}
/* c：白い部分で文字が消えるので、全面が緑の空撮写真に */
.v8c__big{background-image:url(/hiroshimahackathon/img/v6-p11733071.webp)}
/* e：写真が名称に重ならないように */
.v8e__tx{max-width:50%}
.v8e__photos{width:min(44vw,600px)}
@media (max-width:900px){
  .v8a__hand{white-space:normal;font-size:clamp(38px,10.5vw,56px)}
  .v8e__tx{max-width:none}
  .v8e__photos{width:auto}
}
/* d：縦書きの「AI」を横倒しにせず立てる */
.v8d__tate,.v8a__name{text-orientation:upright}
/* d：2行目（10字）が画面の高さに収まる大きさに。行は折り返さない */
.v8d__tate{font-size:clamp(36px,calc((100svh - var(--hd) - 90px) / 11.2),92px);top:calc(var(--hd) + 24px)}
.v8d__tate span{white-space:nowrap}
.v8d__tate span+span{padding-top:1.6em}
/* d 見直し2：字数×行の高さで計算し直す（10字＋ずらし1.2字ぶん） */
.v8d__tate{letter-spacing:.04em;font-size:clamp(30px,calc((100svh - var(--hd) - 80px) / 12.6),88px)}
.v8d__tate span+span{padding-top:1.2em}
@media (max-width:900px){.v8d__tate{font-size:calc(52svh / 12.6)}}