@charset "UTF-8";
/* =========================================================
   ふるさとズ 5th Anniversary LP
   ブレイクポイント：タブレット 1024px以下 / スマホ 767px以下
========================================================= */

:root {
  --c-main: #fc7572;
  --c-black: #282121;
  --c-pale: #ffefef;
  --c-gray: #e4e4e4;
  --c-line: #c3c3c3;
  --c-cream: #fef8f1;
  --f-base: "Noto Sans JP", sans-serif;
  --f-zen: "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
  --f-script: "Arizonia", cursive;
  --f-num: "Abril Fatface", serif;
  --f-year: "Roboto Condensed", sans-serif;
  --wave-h: calc(100vw * 253 / 1440);
  --container: 1196px;
  --side: max(20px, calc((100vw - var(--container)) / 2));
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-base); color: var(--c-black); background: #fff; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
small { font-size: inherit; }

.u-sp { display: none; }
.u-nowrap { white-space: nowrap; } /* 途中で改行させたくない言葉に使う */
@media (max-width: 767px) {
  .u-sp { display: inline; }
  .u-pc { display: none; }
}

/* ---------- 共通：ホバー ---------- */
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-main); outline-offset: 3px; }

/* ---------- 共通：スクロールで表示 ---------- */
html.js .js-fade { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
html.js .js-fade.is-show { opacity: 1; transform: none; }
/* ふわっと表示の設定が、ボタンのホバー（色・浮き上がり）の滑らかさを打ち消さないように、ホバー用の変化も含める */
html.js .js-fade.is-show {
  transition: opacity 1s ease, transform 1s ease,
    color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease, filter .4s ease,
    translate .4s cubic-bezier(.22, 1, .36, 1), scale .4s cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 共通：波 ---------- */
.wave { display: block; width: 100%; height: var(--wave-h); pointer-events: none; }
.wave--top { margin-bottom: -1px; }
.wave--bottom { position: absolute; left: 0; top: calc(100% - 1px); transform: rotate(180deg); z-index: 3; }

/* ---------- 共通：見出し（英字＋和文） ---------- */
.sec-ttl { position: relative; display: flex; flex-direction: column; align-items: center; }
.sec-ttl__en { font-family: var(--f-script); font-weight: 400; line-height: 1.2; white-space: nowrap; }
.sec-ttl__ja { position: relative; display: block; }

/* ---------- 共通：ピル型見出し ---------- */
.pill-ttl {
  width: fit-content; margin: 0 auto; padding: 2px 30px; border-radius: 50px;
  background: linear-gradient(90deg, #ffbd96, #fc7572) center / cover;
  background-image: url(../img/texture_gradient.webp), linear-gradient(90deg, #ffbd96, #fc7572);
  background-size: 110% 1000%; background-position: center;
  font-family: var(--f-zen); font-weight: 500; font-size: 26px; letter-spacing: .1em; color: #fff; line-height: 1.5;
}
@media (max-width: 767px) { .pill-ttl { font-size: 19px; padding: 2px 22px; } }

/* =========================================================
   オープニング
========================================================= */
.opening {
  position: fixed; inset: 0; z-index: 1000; background: #fff6f4;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s ease, visibility .8s;
}
html.is-loading { overflow: hidden; }
html.is-loading:not(.is-opening) .opening { opacity: 1; visibility: visible; }
html.is-loading:not(.is-opening) .js-petal,
html.is-loading:not(.is-opening) .js-bloom { opacity: 0; }
html.is-loading .js-final { opacity: 0; transform: translateY(24px); }
.js-final { transition: opacity 1.2s ease, transform 1.2s ease; }

/* =========================================================
   固定背景（FV〜コンセプト）
========================================================= */
.fv-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #fbd3d2; pointer-events: none; }
.fv-bg__stage {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 180vh); aspect-ratio: 1440 / 800;
  transform: translate(-50%, -50%);
}
.fv-bg__flower { position: absolute; left: 4.86%; top: -26.75%; width: 90.28%; }
.fv-bg__flower img { width: 100%; }
.fv-bg__overlay { position: absolute; inset: -10% 0 0; background: #ff8282; mix-blend-mode: multiply; opacity: .5; }
.fv-bg__dim { position: absolute; inset: 0; background: #f6827c; opacity: 0; }

.petal { position: absolute; left: var(--x); top: var(--y); width: var(--w); will-change: transform, opacity; }
.petal img { display: block; width: 100%; filter: blur(var(--b, 7px)); transform: rotate(var(--r, 0deg)); }
.petal--02  { --x: 67.99%; --y: -30.38%; --w: 60.14%; }
.petal--04l { --x: -24.65%; --y: 57.63%; --w: 76.46%; }
.petal--03l { --x: 68.33%; --y: 41.5%;   --w: 66.32%; }
.petal--01  { --x: -38.47%; --y: -48.5%;  --w: 65.94%; }
.petal--03s { --x: 80.76%; --y: 18.75%;  --w: 15.69%; --b: 3.5px; }
.petal--03r { --x: 30.9%;  --y: 10.86%;  --w: 8.4%;   --r: 106.94deg; }
.petal--04s { --x: 10.14%; --y: 61.75%;  --w: 17.15%; --b: 4px; }

@media (max-width: 767px) {
  .fv-bg__stage { width: 100%; height: 100%; aspect-ratio: auto; }
  .fv-bg__flower { left: -40vw; top: 50%; width: 180vw; transform: translateY(-50%); }
  .fv-bg__flower.js-bloom { translate: 0 -50%; transform: none; }
  .petal--02  { --x: 55vw;  --y: -22vh; --w: 110vw; }
  .petal--04l { --x: -80vw; --y: 58vh;  --w: 140vw; }
  .petal--03l { --x: 50vw;  --y: 70vh;  --w: 120vw; }
  .petal--01  { --x: -75vw; --y: -30vh; --w: 110vw; }
  .petal--03s { --x: 74vw;  --y: 16vh;  --w: 36vw; }
  .petal--03r { --x: 14vw;  --y: 11vh;  --w: 18vw; }
  .petal--04s { --x: -4vw;  --y: 66vh;  --w: 40vw; }
}

/* =========================================================
   ヘッダー
========================================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 20px 40px;
  background: url(../img/header_bg.png) center top / 100% 100% no-repeat;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1320px; margin: 0 auto; }
.header__logo { display: flex; align-items: center; gap: 16px; }
.header__logo-5th { width: 54px; }
.header__logo-line { width: 1px; height: 47px; background: rgba(252, 117, 114, .4); }
.header__logo-main { width: 156px; margin-left: -8px; }
.header__nav-list { display: flex; align-items: center; gap: 16px; }
.header__nav-link { font-weight: 700; font-size: 14px; color: #2e0808; }
.header__nav-btn { display: block; padding: 10px 20px; border-radius: 40px; font-weight: 700; font-size: 14px; line-height: 1.2; }
.header__nav-btn--main { background: linear-gradient(90deg, #fd7e72, #ff9d7c 50%, #ff987c); color: #fff; }
.header__nav-btn--sub { background: #fff; border: 1px solid #cecece; color: var(--c-black); }
.header__nav-btn--sub { display: flex; align-items: center; gap: 10px; }
.header__nav-icon { flex: 0 0 16px; width: 16px; height: 16px; background: url(../img/icon_external_gray.svg) center / contain no-repeat; transition: translate .4s cubic-bezier(.22, 1, .36, 1); }
.header__menu-btn { display: none; }

@media (max-width: 1024px) {
  .header { padding: 12px 16px 28px; }
  .header__logo { gap: 10px; }
  .header__logo-5th { width: 38px; }
  .header__logo-line { height: 34px; }
  .header__logo-main { width: 112px; margin-left: -4px; }
  .header__menu-btn {
    position: relative; z-index: 2; display: block; width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(90deg, #fd7e72, #ff9d7c);
  }
  .header__menu-btn span { position: absolute; left: 14px; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s, opacity .3s; }
  .header__menu-btn span:nth-child(1) { top: 17px; }
  .header__menu-btn span:nth-child(2) { top: 23px; }
  .header__menu-btn span:nth-child(3) { top: 29px; }
  .is-menu-open .header__menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .is-menu-open .header__menu-btn span:nth-child(2) { opacity: 0; }
  .is-menu-open .header__menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .header__nav {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 246, 244, .97); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  }
  .is-menu-open .header__nav { opacity: 1; visibility: visible; }
  .header__nav-list { flex-direction: column; gap: 28px; }
  .header__nav-link { font-size: 18px; }
  .header__nav-btn { padding: 14px 32px; font-size: 16px; }
}

/* =========================================================
   FV
========================================================= */
main { position: relative; z-index: 2; }
.fv { position: relative; height: 100vh; height: 100svh; min-height: 560px; }
.fv__inner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 47px; padding: 110px 20px 0; }
.fv__catch { width: min(810px, 88vw); }
.fv__catch img { width: 100%; filter: drop-shadow(0 7px 0 var(--c-main)); }
.fv__scroll { position: relative; display: block; width: 146px; height: 146px; transition: opacity 1.2s ease .3s, transform 1.2s ease .3s, scale .4s cubic-bezier(.22, 1, .36, 1); }
.fv__scroll-circle { width: 100%; animation: spin 24s linear infinite; }
.fv__scroll-arrow { position: absolute; left: 50%; top: 50%; width: 34px; margin: -17px 0 0 -17px; animation: bob 2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px); } }

@media (max-width: 767px) {
  .fv__inner { gap: 36px; padding-top: 70px; }
  .fv__catch img { filter: drop-shadow(0 3px 0 var(--c-main)); }
  .fv__scroll { width: 110px; height: 110px; }
  .fv__scroll-arrow { width: 26px; margin: -13px 0 0 -13px; }
}

/* =========================================================
   コンセプト（固定背景の上を流れる）
========================================================= */
.concept { position: relative; padding: 80px 20px 100px; color: #fff; text-align: center; text-shadow: 0 0 18px rgba(214, 78, 78, .35); }
.concept__inner { max-width: 810px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 38px; }
.concept__lead { font-family: var(--f-zen); font-weight: 700; font-size: 34px; line-height: 1.35; max-width: 408px; }
.concept__lead span { display: inline-block; }
.concept__hiraku { position: relative; width: 318px; height: 167px; overflow: hidden; }
.concept__hiraku img { position: absolute; left: -.02%; top: -22.75%; width: 239.82%; max-width: none; height: 154.95%; }
.concept__text { display: flex; flex-direction: column; gap: 24px; font-family: var(--f-zen); font-weight: 500; font-size: 20px; line-height: 2; }
.concept__btn { display: inline-block; padding: 10px 40px; border-radius: 50px; background: #fff; color: var(--c-main); font-weight: 700; font-size: 18px; line-height: 2; text-shadow: none; }

@media (max-width: 767px) {
  .concept { padding: 40px 20px 60px; }
  .concept__inner { gap: 28px; }
  .concept__lead { font-size: 24px; }
  .concept__hiraku { width: 230px; height: 121px; }
  .concept__text { font-size: 15px; gap: 20px; }
  .concept__btn { font-size: 16px; padding: 8px 36px; }
}

/* =========================================================
   5年の歩み
========================================================= */
.history { position: relative; z-index: 2; }
.history__body { padding: 0 0 40px; background: var(--c-cream); display: flex; flex-direction: column; gap: 80px; }
.history__body > * { position: relative; z-index: 2; }
/* 花びらは「波＋本体」の形で切り抜き、まっすぐな切れ目が出ないようにする */
.history__decos {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  -webkit-mask: url(../img/wave.svg) left top / 100% var(--wave-h) no-repeat, linear-gradient(#000, #000) left var(--wave-h) / 100% 100% no-repeat;
          mask: url(../img/wave.svg) left top / 100% var(--wave-h) no-repeat, linear-gradient(#000, #000) left var(--wave-h) / 100% 100% no-repeat;
}
.history__deco { position: absolute; }
.history__deco img { width: 100%; }
.history__deco--r { left: 47.4%; top: calc(var(--wave-h) - 56px); width: 949px; opacity: .3; }
.history__deco--r img { transform: rotate(180deg); filter: blur(12px); }
.history__deco--l { left: 6.2%; top: calc(var(--wave-h) - 40px); width: 273px; }
.history__deco--l img { transform: rotate(100.86deg); filter: blur(17px); }

.sec-ttl--history .sec-ttl__en { font-size: 187.5px; color: #fed7d6; }
.sec-ttl--history .sec-ttl__ja { width: 345px; margin-top: -112px; }

.history__slider { position: relative; }
.history__track {
  position: relative; display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 0 var(--side); scroll-padding-left: var(--side);
  scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
}
.history__track::-webkit-scrollbar { display: none; }
.history__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.history__track::after { content: ""; flex: 0 0 1px; }
.history__year { flex: 0 0 auto; display: flex; flex-direction: column; gap: 16px; }
.history__year-num { font-family: var(--f-year); font-weight: 600; font-size: 50px; line-height: 1.2; color: var(--c-main); opacity: .5; transition: opacity .4s; }
.history__year.is-active .history__year-num { opacity: 1; }
.history__cards { display: flex; gap: 34px; flex: 1; }

.h-card { flex: 0 0 463px; display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #fff; border-radius: 8px; scroll-snap-align: start; }
.h-card__head { display: flex; align-items: center; gap: 8px; }
.h-card__month { flex: 0 0 60px; padding: 3px 0; border: 1px solid var(--c-main); border-radius: 2px; text-align: center; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--c-main); }
.h-card__ttl { font-weight: 700; font-size: 18px; line-height: 1.4; letter-spacing: .04em; color: var(--c-main); }
.h-card__img { aspect-ratio: 415 / 231; } /* 画像の縦横比（415×231）を保ったまま表示 */
.h-card__img img { width: 100%; height: 100%; object-fit: cover; }
.h-card__txt { margin-top: 8px; font-size: 16px; line-height: 1.6; }

.history__ctrl { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--container); margin: 30px auto 0; padding: 0 20px; box-sizing: content-box; }
.history__arrows { display: flex; gap: 14px; }
.history__arrow { width: 69px; height: 69px; }
.history__arrow:disabled { opacity: .4; cursor: default; }
.history__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.history__tabs button { padding: 6px 14px; border: 1px solid var(--c-main); border-radius: 40px; background: #fff; font-family: var(--f-year); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--c-main); transition: background .3s, color .3s; }
.history__tabs button.is-active { background: var(--c-main); color: #fff; }

.stats { display: flex; align-items: center; gap: 0; width: min(1194px, calc(100% - 40px)); margin: 0 auto; }
.stats__label { flex: 0 0 auto; padding-right: 40px; text-align: center; }
.stats__label-ttl { font-weight: 500; font-size: 26px; color: var(--c-main); line-height: 1.4; }
.stats__label-note { margin-top: 10px; font-weight: 500; font-size: 12px; }
.stats__items { flex: 1; display: flex; gap: 24px; }
.stats__item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; background: #fff; border-radius: 8px; color: var(--c-main); font-weight: 700; white-space: nowrap; }
.stats__icon { flex: 0 0 auto; width: 64px; height: 64px; }
.stats__item-ttl { font-size: 24px; }
.stats__item-val { display: flex; align-items: center; gap: 3px; font-size: 20px; }
.stats__num { font-family: var(--f-num); font-weight: 400; font-size: 70px; line-height: 1.2; }

@media (max-width: 1024px) {
  .stats { flex-direction: column; gap: 20px; }
  .stats__label { padding: 0; }
  .stats__items { width: 100%; }
}
@media (max-width: 767px) {
  .history__body { gap: 48px; }
  .history__deco--r { width: 520px; left: 30%; }
  .history__deco--l { width: 160px; left: -4%; }
  .sec-ttl--history .sec-ttl__en { font-size: 96px; }
  .sec-ttl--history .sec-ttl__ja { width: 210px; margin-top: -60px; }
  .history__track { gap: 16px; }
  .history__year-num { font-size: 36px; }
  .history__cards { gap: 16px; }
  .h-card { flex-basis: min(300px, 80vw); padding: 18px; }
  .h-card__month { flex-basis: 52px; font-size: 15px; }
  .h-card__ttl { font-size: 15px; }
  .h-card__txt { font-size: 14px; }
  .history__ctrl { flex-direction: column-reverse; gap: 20px; margin-top: 24px; }
  .history__arrow { width: 52px; height: 52px; }
  .history__tabs { justify-content: center; gap: 6px; }
  .history__tabs button { font-size: 15px; padding: 5px 11px; }
  .stats__items { flex-direction: column; gap: 12px; }
  .stats__label-ttl { font-size: 20px; }
  .stats__item { padding: 10px 16px; }
  .stats__icon { width: 44px; height: 44px; }
  .stats__item-ttl { font-size: 18px; }
  .stats__item-val { font-size: 16px; }
  .stats__num { font-size: 52px; }
}

/* =========================================================
   キャンペーン
========================================================= */
.campaign { position: relative; z-index: 1; background: #fff; }
.campaign__main {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 70px;
  padding: calc(var(--wave-h) + 40px) 20px 60px;
  background: linear-gradient(180deg, #ffb1aa, #feaf94 50%, #fff);
}
.campaign__main::before {
  content: ""; position: absolute; left: 0; top: -18.67%; z-index: -1; width: 100%; height: 86.37%;
  background: url(../img/fv_flower.webp) center / cover no-repeat; mix-blend-mode: multiply;
}

.campaign__head { position: relative; width: min(919px, 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.campaign__en { position: absolute; left: 50%; top: -105px; transform: translateX(-50%); font-family: var(--f-script); font-size: 250px; line-height: 1.1; color: #ffa198; white-space: nowrap; pointer-events: none; }
.campaign__ttl { position: relative; width: min(506px, 100%); }
.campaign__ttl-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- タイトルのアニメーション ----------
   ・上の行：1文字ずつ下から跳ねるように現れる
   ・下の2行：線で描かれたあと、白く塗られる（手書き風）
   ・--d（待ち時間）と --len（線の長さ）は js/main.js で1パーツずつ設定 */
html.js .js-ttl-anim :is(path, circle) { opacity: 0; }
.js-ttl-anim.is-play .campaign__ttl-sub :is(path, circle) {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: ttlPop .7s cubic-bezier(.34, 1.56, .64, 1) var(--d) both;
}
.js-ttl-anim.is-play .campaign__ttl-main :is(path, circle) {
  stroke: #fff; stroke-width: 1.6; stroke-linejoin: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: ttlDraw 1.2s ease-out var(--d) both;
}
@keyframes ttlPop {
  0%   { opacity: 0; transform: translateY(14px) scale(.4) rotate(-12deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ttlDraw {
  0%   { opacity: 1; stroke-dashoffset: var(--len); fill-opacity: 0; }
  55%  { stroke-dashoffset: 0; fill-opacity: 0; }
  100% { opacity: 1; stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .js-ttl-anim :is(path, circle) { opacity: 1; }
  .js-ttl-anim.is-play :is(path, circle) { animation: none !important; }
}
.campaign__period { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; color: #fff; font-weight: 700; }
.campaign__period-label { padding: 3px 7px 3px 13px; border: 1px solid #fff; border-radius: 40px; font-size: 18px; letter-spacing: .3em; line-height: 1.3; }
.campaign__period-date { font-size: 23px; }

.campaign__gift { width: min(720px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; font-weight: 700; font-size: 27px; line-height: 1.5; text-align: center; }
.campaign__gift img { width: 373px; }

.steps { width: min(950px, 100%); padding: 42px 40px; background: #fff; border-radius: 10px; }
.steps__ttl { padding: 11px; border-radius: 31px; background: linear-gradient(90deg, #ffaf8a, #ff7f44); font-family: var(--f-zen); font-weight: 700; font-size: 27px; letter-spacing: .12em; line-height: 1; color: #fff; text-align: center; }
.steps__list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.steps__item { display: flex; align-items: center; gap: 34px; padding: 18px 30px 18px 0; border-bottom: 1px solid var(--c-gray); }
.steps__num { flex: 0 0 69px; height: 65px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--c-pale); font-family: var(--f-num); font-size: 26px; color: var(--c-main); }
.steps__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.steps__txt { font-weight: 500; font-size: 18px; line-height: 1.6; }
.steps__link { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px; border: 1px solid var(--c-main); border-radius: 30px; font-weight: 500; font-size: 14px; color: var(--c-main); }

.campaign__ai { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-family: var(--f-zen); font-weight: 700; font-size: 36px; letter-spacing: .08em; line-height: 2; color: var(--c-main); margin-top: -10px; }
.campaign__ai-mark { display: block; width: 97px; height: auto; overflow: visible; }

/* 「愛」のアニメーション：画面に入ったら2回ドクンと鼓動する */
.js-ai-anim.is-play { transform-origin: 50% 55%; animation: aiBeat 1.1s ease-in-out .15s 1 both; }
@keyframes aiBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.18) rotate(-4deg); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12) rotate(3deg); }
  70% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .js-ai-anim.is-play { animation: none; }
}


@media (max-width: 767px) {
  .campaign__main { gap: 44px; padding-top: calc(var(--wave-h) + 50px); padding-bottom: 24px; }
  .campaign__en { top: -40px; font-size: 96px; }
  .campaign__ttl { width: min(330px, 100%); }
  .campaign__period { flex-wrap: wrap; justify-content: center; padding: 8px 10px; }
  .campaign__period-label { font-size: 14px; }
  .campaign__period-date { font-size: 16px; }
  .campaign__gift { font-size: 18px; gap: 12px; }
  .campaign__gift img { width: 260px; }
  .steps { padding: 24px 16px; }
  .steps__ttl { font-size: 20px; }
  .steps__item { gap: 14px; padding: 16px 0; }
  .steps__num { flex-basis: 48px; height: 48px; font-size: 20px; }
  .steps__txt { font-size: 15px; }
  .steps__link { font-size: 12px; }
  .campaign__ai { font-size: 22px; line-height: 1.6; gap: 4px; }
  .campaign__ai-mark { width: 64px; }
}

/* ---------- プレゼント ---------- */
.prize { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 50px 20px 100px; background: #fff; }
.prize::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(../img/confetti.webp) left top / 1440px 960px; opacity: .3; }
.prize::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#fff, rgba(255,255,255,0) 217px), linear-gradient(0deg, #fff, rgba(255,255,255,0) 315px); }
.prize__ribbon-top { width: min(684px, 100%); }
.prize__lead { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; line-height: 1.5; text-align: center; }
.prize__lead-sub { font-size: 27px; }
.prize__lead img { width: min(518px, 100%); }
.prize__lead-main { font-size: 38px; }
.prize__list { display: flex; gap: 24px; }
.prize__item {
  position: relative; width: 220px; height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: url(../img/prize_circle.webp) center / 100% no-repeat; color: #fff; padding-top: 6px;
}

.prize__amount { display: flex; align-items: center; justify-content: center; width: 136px; padding-bottom: 2px; border-bottom: 1px solid #fff; font-family: var(--f-zen); font-weight: 700; line-height: 2; white-space: nowrap; }
.prize__num { font-family: var(--f-num); font-weight: 400; font-size: 95px; line-height: 1.14; }
.prize__man { font-size: 38px; }
.prize__unit { font-size: 18px; letter-spacing: -.1em; }
.prize__people { font-weight: 700; font-size: 19px; line-height: 2; }
.prize__desc { font-size: 16px; line-height: 2; text-align: center; color: #000; }
.prize__link { display: inline-flex; align-items: center; gap: 18px; padding: 30px 40px; font-weight: 700; font-size: 18px; }
.prize__link img { width: 24px; }
.prize__brands { width: min(719px, 100%); border: 1px solid var(--c-line); border-radius: 44px; overflow: hidden; }
.prize__brands img { width: 100%; }
.prize__notes { width: min(719px, 100%); display: flex; flex-direction: column; gap: 16px; background: rgba(255, 255, 255, .8); font-size: 10px; letter-spacing: .08em; line-height: 1.6; }
.prize__notes ul { list-style: disc; padding-left: 15px; }
.prize__notes-main { color: #000; }
.prize__notes-sub { padding-top: 16px; border-top: 1px solid var(--c-gray); color: var(--c-black); }
.prize__notes a { text-decoration: underline; }

@media (max-width: 767px) {
  .prize { padding: 24px 16px 70px; gap: 20px; }
  .prize__lead-sub { font-size: 17px; }
  .prize__lead img { width: 280px; }
  .prize__lead-main { font-size: 24px; }
  .prize__list { gap: 8px; }
  .prize__item { width: 104px; height: 104px; padding-top: 0; }
  .prize__amount { width: 70px; padding-bottom: 0; line-height: 1.6; }
  .prize__man { font-size: 17px; }
  .prize__unit { font-size: 9px; }
  .prize__num { font-size: 44px; line-height: 1.1; }
  .prize__people { font-size: 11px; line-height: 1.6; }
  .prize__desc { font-size: 13px; text-align: left; line-height: 1.8; }
  .prize__desc br { display: none; }
  .prize__link { padding: 16px 20px; font-size: 16px; gap: 12px; }
  .prize__brands { border-radius: 24px; }
}

/* ---------- 対象の自治体・店舗 ---------- */
.target { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: 90px 20px 160px; }
.target::before { content: ""; position: absolute; left: -24.07%; top: -28.04%; z-index: -2; width: 148.17%; height: 149.91%; background: url(../img/bg_petals.webp) center / cover no-repeat; }
.target::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#fff, rgba(255,255,255,0) 217px), linear-gradient(0deg, var(--c-cream), rgba(254,248,241,0) 217px); }
.target__bg { display: none; }
.target__inner { display: flex; flex-direction: column; align-items: center; gap: 73px; max-width: 1195px; margin: 0 auto; }
.target__inner > .pill-ttl { margin-bottom: -29px; }

.target__box { width: 100%; display: flex; align-items: center; justify-content: center; gap: 52px; padding: 40px 60px; background: #fff; border-radius: 10px; }
.target__map { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.target__map-svg { display: block; width: 326px; height: auto; overflow: visible; }
.map-region { opacity: .45; cursor: pointer; outline: none; transition: opacity .35s, filter .35s; }
.map-region.is-active { opacity: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .12)); }
.map-region:focus-visible { opacity: .8; filter: drop-shadow(0 0 3px var(--c-main)); }
.target__regions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 368px; }
.target__regions button { --c: var(--c-main); padding: 3px 16px; border: 1px solid var(--c-line); border-radius: 30px; font-weight: 500; font-size: 16px; line-height: 1.5; color: #878787; transition: background .3s, color .3s, border-color .3s; }
.target__regions button.is-active { background: var(--c); border-color: var(--c); color: #fff; }

.target__list { scroll-margin-top: 110px; flex: 0 1 585px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.target__list-head { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.target__region-label { padding: 4px 8px; border-radius: 4px; background: #a686d5; font-weight: 700; font-size: 18px; line-height: 1.4; color: #fff; transition: background .3s; }
.target__filter { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: #878787; }
.target__filter[hidden] { display: none; }
.target__select { max-width: 260px; padding: 6px 32px 6px 12px; border: 1px solid var(--c-line); border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23878787' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center / 12px 8px no-repeat; font: inherit; font-size: 14px; color: var(--c-black, #282121); appearance: none; -webkit-appearance: none; cursor: pointer; }
.target__select:focus-visible { outline: 2px solid var(--c, var(--c-main)); outline-offset: 1px; }
.target__cities { align-self: stretch; display: flex; flex-direction: column; gap: 32px; margin-top: -9px; }
.target__city-block { display: flex; flex-direction: column; gap: 24px; animation: listIn .5s ease both; }
@keyframes listIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.target__city { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-weight: 700; font-size: 18px; }
.target__city span { flex: 0 0 auto; font-weight: 500; font-size: 13px; color: #878787; }
.target__cities.is-append .target__city-block { animation: none; }
.target__shops li.is-new { animation: listIn .5s ease both; }
.target__empty { padding: 40px 0; color: #878787; text-align: center; }
.target__count { margin-top: -8px; font-size: 13px; color: #878787; }
.target__count[hidden] { display: none; }
.target__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.target__more[hidden], .target__close[hidden] { display: none; }
.target__shops a { display: block; }
.target__shops img { transition: scale .5s cubic-bezier(.22, 1, .36, 1); }
.target__shops li { overflow: hidden; }
.target__shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.target__shop-img { display: block; overflow: hidden; border: 1px solid #e4e4e4; }
.target__shops img { display: block; width: 100%; aspect-ratio: 179 / 126; object-fit: cover; }
.target__shops p { margin-top: 8px; font-weight: 500; font-size: 16px; }
.target__more { padding: 12px 28px; border: 1px solid var(--c-main); border-radius: 40px; font-weight: 700; font-size: 14px; color: var(--c-main); }
.target__close { padding: 12px 28px; border: 1px solid var(--c-line); border-radius: 40px; font-weight: 700; font-size: 14px; color: #878787; }
/* パソコン：店舗が多くても地方を選び直せるよう、地図を画面に残す */
@media (min-width: 1025px) and (min-height: 700px) {
  .target__map { align-self: flex-start; position: sticky; top: 100px; }
}

.aigatari { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.aigatari__head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.aigatari__sub { font-family: var(--f-zen); font-weight: 700; font-size: 24px; color: var(--c-main); }
.aigatari__head img { width: 255px; }
.aigatari__lead { font-size: 16px; text-align: center; line-height: 1.5; }
.aigatari__list { display: flex; justify-content: center; gap: 24px; width: 100%; }
.staff { flex: 0 1 382px; display: flex; flex-direction: column; gap: 17px; padding: 24px 16px; background: #fff; border-radius: 8px; }
.staff__prof { display: flex; align-items: center; gap: 17px; }
.staff__img { flex: 0 0 114px; width: 114px; }
.staff__name { font-weight: 500; font-size: 19px; line-height: 1.6; }
.staff__name span { margin-right: 4px; font-size: 14px; color: #515151; }
.staff__txt { margin-top: 8px; font-weight: 500; font-size: 14px; line-height: 1.6; }
.staff__btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 6px; border: 1px solid var(--c-main); border-radius: 30px; font-weight: 500; font-size: 14px; color: var(--c-main); }
/* coming soon（投稿公開前）：カードに .is-coming-soon があるときだけ表示し、「投稿を見てみる」を隠す */
.staff__soon { display: none; padding-bottom: 5px; border-radius: 30px; background: #b1b1b1; font-family: var(--f-num); font-size: 22px; letter-spacing: .08em; line-height: 1.6; color: #fff; text-align: center; user-select: none; }
.staff.is-coming-soon .staff__btn { display: none; }
.staff.is-coming-soon .staff__soon { display: block; }

@media (max-width: 1024px) {
  .target__box { flex-direction: column; padding: 32px 24px; gap: 32px; }
  .target__list { flex-basis: auto; width: 100%; }
  .aigatari__list { flex-direction: column; align-items: center; }
  .staff { flex-basis: auto; width: min(420px, 100%); }
}
@media (max-width: 767px) {
  .target { padding: 70px 16px 110px; }
  /* スマホ：背景を縦いっぱいに引き伸ばすと拡大されて粗く見えるため、画面1枚分の大きさで止めて表示する */
  .target { overflow: clip; }
  .target::before { display: none; }
  .target__bg { display: block; position: absolute; inset: 0; z-index: -2; }
  .target__bg-inner { position: sticky; top: 0; height: 100vh; height: 100lvh; background: url(../img/bg_petals.webp) center / cover no-repeat; }
  .target__inner { gap: 56px; }
  .target__inner > .pill-ttl { margin-bottom: -24px; }
  .target__box { padding: 28px 16px; }
  .target__map-svg { width: 240px; }
  .target__regions { width: 100%; gap: 8px; }
  .target__regions button { font-size: 14px; padding: 3px 12px; }
  .target__region-label { font-size: 15px; }
  .target__filter { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; font-size: 13px; }
  .target__select { max-width: none; font-size: 16px; }
  .target__city span { font-size: 12px; }
  .target__city { font-size: 16px; }
  .target__shops { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .target__shops p { font-size: 13px; }
  .aigatari { gap: 32px; }
  .aigatari__sub { font-size: 17px; }
  .aigatari__head img { width: 190px; }
  .aigatari__lead { font-size: 14px; }
  .aigatari__lead br { display: none; }
  .staff__img { flex-basis: 84px; width: 84px; }
  .staff__name { font-size: 17px; }
  .staff__name span { font-size: 12px; }
  .staff__txt { font-size: 13px; }
  .staff__soon { font-size: 19px; }
}

/* ---------- 応募概要 ---------- */
.overview { padding: 0 20px 180px; background: linear-gradient(180deg, var(--c-cream), var(--c-cream) 86.5%, #fff); }
.overview__box { position: relative; max-width: 952px; margin: 0 auto; padding: 60px 40px; background: #fff; border-radius: 20px; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.overview__box::before, .overview__box::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, rgba(252,117,114,0), var(--c-main) 15%, var(--c-main) 85%, rgba(252,117,114,0)); }
.overview__box::before { top: 0; border-radius: 20px 20px 0 0; }
.overview__box::after { bottom: 0; }
.overview__ttl { position: relative; padding-bottom: 8px; font-weight: 700; font-size: 26px; letter-spacing: .2em; margin-right: -.2em; }
.overview__ttl::after { content: ""; position: absolute; left: 0; right: .2em; bottom: 0; height: 3px; background: linear-gradient(90deg, #ffbd96, var(--c-main)); }
.overview__list { width: min(622px, 100%); display: flex; flex-direction: column; gap: 32px; font-size: 16px; }
.overview__row { display: flex; align-items: flex-start; gap: 47px; padding-bottom: 32px; border-bottom: 1px solid var(--c-line); }
.overview__row dt { flex: 0 0 112px; font-weight: 700; color: var(--c-main); line-height: 1.6; }
.overview__row dd { flex: 1; line-height: 2; }
.overview__row dd ul { list-style: disc; padding-left: 24px; }
.overview__row dd ol { list-style: decimal; padding-left: 24px; }
.overview__terms { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: -24px; font-size: 14px; color: #878787; text-align: center; }
.overview__terms-btn { padding: 12px 36px; border: 1px solid var(--c-main); border-radius: 40px; font-weight: 700; font-size: 16px; color: var(--c-main); background: #fff; }
.overview__insta { display: flex; align-items: stretch; }
.overview__insta-icon { flex: 0 0 77px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--c-main); border-right: 0; border-radius: 4px 0 0 4px; }
.overview__insta-icon img { width: 36px; }
.overview__insta-txt { display: flex; align-items: center; gap: 18px; padding: 30px 40px; background: var(--c-main); border: 1px solid var(--c-main); border-radius: 0 4px 4px 0; font-weight: 700; font-size: 18px; color: #fff; }
.overview__insta-txt img { width: 24px; }
.overview__row dd.overview__dd--tight { line-height: 1.6; }
.overview__row dd .overview__gap { margin-top: 1em; } /* 段落の間を1行あける */
.overview__link { color: var(--c-main); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.overview__row dt { white-space: nowrap; }

@media (max-width: 767px) {
  .overview { padding: 0 16px 110px; }
  .overview__box { padding: 40px 20px; gap: 36px; }
  .overview__ttl { font-size: 21px; }
  .overview__list { gap: 20px; font-size: 14px; }
  .overview__row { flex-direction: column; gap: 6px; padding-bottom: 20px; }
  .overview__row dt { flex-basis: auto; }
  .overview__row dd { line-height: 1.8; }
  .overview__row dd ul { padding-left: 20px; }
  .overview__row dd ol { padding-left: 20px; }
  .overview__insta { width: 100%; }
  .overview__insta-icon { flex-basis: 56px; }
  .overview__insta-icon img { width: 28px; }
  .overview__insta-txt { flex: 1; justify-content: center; gap: 10px; padding: 18px 14px; font-size: 14px; }
  .overview__insta-txt img { width: 18px; }
}

/* =========================================================
   代表インタビュー
========================================================= */
/* 下の余白は、SNSの波が被さる量に合わせて画面幅で伸び縮みさせる（ボタンが波に隠れないように） */
.interview { position: relative; z-index: 1; overflow-x: clip; padding: 0 20px calc(var(--wave-h) * .75 + 40px); background: #fff; }
.interview__deco { position: absolute; pointer-events: none; }
.interview__deco img { width: 100%; filter: blur(32px); }
.interview__deco--l { left: -126px; top: 265px; width: 431px; }
.interview__deco--r { right: 2.5%; top: 503px; width: 335px; }
.interview__deco--t { right: 2.9%; top: 93px; width: 252px; }

.sec-ttl--interview .sec-ttl__en { font-size: 210px; color: #ffdddc; }
.sec-ttl--interview .sec-ttl__ja { width: 445px; margin-top: -118px; }

.interview__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; margin-top: 50px; }
.interview__movie { position: relative; width: min(830px, 100%); aspect-ratio: 16 / 9; background: #d9d9d9; }
.interview__movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.interview__movie-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9a9a9a; font-size: 14px; }
.interview__note { display: inline-flex; align-items: center; gap: 18px; padding: 30px 40px; border: 1px solid var(--c-line); border-radius: 4px; background: #fff; font-weight: 700; font-size: 18px; }

@media (max-width: 767px) {
  .interview { padding-bottom: calc(var(--wave-h) * .75 + 30px); }
  .interview__deco--l { width: 240px; left: -100px; top: 200px; }
  .interview__deco--r { width: 180px; top: 360px; right: -40px; }
  .interview__deco--t { width: 150px; top: 40px; right: -20px; }
  .sec-ttl--interview .sec-ttl__en { font-size: 96px; }
  .sec-ttl--interview .sec-ttl__ja { width: 250px; margin-top: -56px; }
  .interview__body { margin-top: 28px; gap: 28px; }
  .interview__note { padding: 18px 28px; font-size: 16px; gap: 12px; }
}

/* =========================================================
   SNS
========================================================= */
/* 波をインタビューの下に大きく被せる */
.sns { position: relative; z-index: 2; margin-top: calc(var(--wave-h) * -.75); pointer-events: none; }
.sns__body { pointer-events: auto; } /* 波の透明部分はマウスを通し、下のボタンを押せるようにする */
.sns__body { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 10px 20px 40px; background: var(--c-cream); }
.sns__list { display: flex; justify-content: center; gap: 24px; margin-top: 0; }
.sns__card { position: relative; width: 220px; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #fff; border: 1px solid var(--c-line); border-radius: 8px; text-align: center; line-height: 1.4; }
.sns__card::after { content: ""; position: absolute; top: 11px; right: 14px; width: 19px; height: 19px; background: url(../img/icon_external_gray.svg) center / contain no-repeat; }
.sns__icon { width: 60px; height: 60px; }
.sns__icon--x, .sns__icon--note { width: 50px; height: 50px; margin: 5px; }
.sns__name { display: block; font-weight: 700; font-size: 22px; }
.sns__id { display: block; margin-top: -10px; font-size: 14px; color: #929292; }
.sns__other { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; font-size: 16px; }
.sns__other ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
.sns__other a { display: flex; align-items: center; gap: 8px; }
.sns__other img { width: 24px; }

@media (max-width: 1024px) {
  .sns__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: 100%; max-width: 480px; }
}
@media (max-width: 767px) {
  .sns__body { gap: 28px; }
  .sns__list { gap: 12px; }
  .sns__card { width: auto; min-width: 0; height: 150px; gap: 14px; }
  .sns__card::after { top: 8px; right: 8px; width: 15px; height: 15px; }
  .sns__icon { width: 46px; height: 46px; }
  .sns__icon--x, .sns__icon--note { width: 42px; height: 42px; }
  .sns__name { font-size: 18px; }
  .sns__id { font-size: 12px; }
  .sns__other { flex-direction: column; font-size: 14px; }
}

/* =========================================================
   フッター
========================================================= */
.footer {
  position: relative; z-index: 1; min-height: 572px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(11.1vw, 100px) 20px 30px;
  background: #fc8175; overflow: hidden; isolation: isolate;
  color: #fff;
}
.footer__bg { position: absolute; inset: 0; z-index: -1; container-type: size; pointer-events: none; }
/* 花の大きさ：Figmaどおり幅の約114%。回転しても四隅にすき間が出ないよう、足りない画面では自動で大きくする */
.footer__flower {
  position: absolute; left: 50%; top: 50%;
  width: 113.93%;
  width: max(113.93cqw, calc(hypot(100cqw, 100cqh) * 1.06));
  aspect-ratio: 4059 / 3835;
  background: url(../img/bg_petals.webp) center / 100% 100% no-repeat;
  translate: -50% -50%;
  animation: flowerSpin 120s linear infinite; /* 1周120秒でゆっくり回転 */
  will-change: rotate;
}
@keyframes flowerSpin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .footer__flower { animation: none; } }
.footer__main { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer__en { font-family: var(--f-script); font-size: 132px; line-height: 1.3; white-space: nowrap; }
.footer__btn { display: inline-flex; align-items: center; gap: 18px; padding: 26px 40px; border: 1px solid #fff; border-radius: 4px; font-weight: 700; font-size: 18px; }
.footer__copy { width: min(1195px, 100%); margin-top: 60px; padding-top: 24px; border-top: 1px solid #fff; font-weight: 500; font-size: 12px; text-align: center; }

@media (max-width: 767px) {
  .footer { min-height: 0; padding-top: calc(var(--wave-h) + 30px); }
  .footer__en { font-size: 64px; }
  .footer__btn { padding: 18px 22px; font-size: 15px; gap: 10px; }
  .footer__copy { margin-top: 48px; }
}

/* =========================================================
   ホバー演出（マウス操作できる端末のみ）
   ※「translate」「scale」を使い、スクロール時のふわっと表示（transform）と干渉しないようにしています
========================================================= */
.header__logo,
.header__nav-link,
.header__nav-btn,
.concept__btn,
.history__arrow,
.history__arrow img,
.history__tabs button,
.h-card,
.h-card__img img,
.steps__link,
.steps__link img,
.target__regions button,
.target__more,
.overview__terms-btn,
.target__close,
.staff__btn,
.staff__btn img,
.interview__note,
.interview__note img,
.prize__link,
.prize__link img,
.overview__insta,
.overview__insta-txt img,
.sns__card,
.sns__icon,
.sns__card::after,
.sns__other a,
.sns__other img,
.footer__btn,
.footer__btn img {
  transition-property: color, background-color, background-position, border-color, box-shadow, opacity, translate, scale, filter;
  transition-duration: .4s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
.h-card__img { overflow: hidden; border-radius: 2px; }
.header__nav-link { position: relative; }
.header__nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #fd7e72, #ff9d7c); scale: 0 1; transition: scale .4s cubic-bezier(.22, 1, .36, 1);
}
.header__nav-btn--main { background-size: 200% 100%; background-image: linear-gradient(90deg, #fd7e72, #ff9d7c 25%, #ff987c 50%, #fd7e72 75%, #ff9d7c); }

@media (hover: hover) {
  /* ヘッダー */
  .header__logo:hover { opacity: .7; }
  .header__nav-link:hover::after { scale: 1 1; }
  .header__nav-btn--main:hover { background-position: 100% 0; translate: 0 -2px; box-shadow: 0 6px 16px rgba(252, 117, 114, .35); }
  .header__nav-btn--sub:hover { border-color: var(--c-main); color: var(--c-main); translate: 0 -2px; box-shadow: 0 6px 16px rgba(252, 117, 114, .18); }
  .header__nav-btn--sub:hover .header__nav-icon { background-image: url(../img/icon_external_pink_card.svg); translate: 2px -2px; }

  /* FV：スクロール */
  .fv__scroll:hover { scale: 1.08; }

  /* コンセプト */
  .concept__btn:hover { background: var(--c-main); color: #fff; translate: 0 -3px; box-shadow: 0 10px 24px rgba(214, 78, 78, .3); }

  /* 5年の歩み */
  .history__arrow:not(:disabled):hover { scale: 1.08; }
  #js-history-prev:not(:disabled):hover img { translate: -3px 0; }
  #js-history-next:not(:disabled):hover img { translate: 3px 0; }
  .history__tabs button:not(.is-active):hover { background: var(--c-pale); }

  /* キャンペーン：リンクボタン（塗りつぶし＋矢印が動く） */
  .steps__link:hover,
  .target__more:hover,
  .overview__terms-btn:hover,
  .staff__btn:hover { background: var(--c-main); color: #fff; }
  .target__close:hover { border-color: #878787; color: #282121; }
  .steps__link:hover img,
  .staff__btn:hover img,
  .interview__note:hover img { filter: brightness(0) invert(1); }
  .steps__link[target="_blank"]:hover img,
  .staff__btn:hover img,
  .interview__note:hover img { translate: 2px -2px; }
  .steps__link[href^="#"]:hover img { translate: 0 3px; }

  /* 地方タブ：それぞれの地方の色でふちどり */
  .target__regions button:not(.is-active):hover,
  .target__regions button.is-hover:not(.is-active) { border-color: var(--c); color: var(--c); }
  .map-region:not(.is-active):hover { opacity: .8; }
  .target__shops a:hover img { scale: 1.06; }
  .target__shops a:hover p { color: var(--c-main); }

  /* えらべるPayについて */
  .prize__link:hover { color: var(--c-main); }
  .prize__link:hover img { translate: 3px -3px; }

  /* 応募概要：インスタグラムをチェック */
  .overview__insta:hover { opacity: 1; translate: 0 -3px; filter: drop-shadow(0 8px 16px rgba(252, 117, 114, .3)); }
  .overview__insta:hover .overview__insta-txt img { translate: 2px -2px; }
  .prize__notes a:hover { color: var(--c-main); }

  /* 代表インタビュー */
  .interview__note:hover { background: var(--c-main); border-color: var(--c-main); color: #fff; translate: 0 -3px; box-shadow: 0 10px 24px rgba(252, 117, 114, .3); }

  /* SNS */
  .sns__card:hover { translate: 0 -6px; border-color: var(--c-main); box-shadow: 0 14px 30px rgba(252, 117, 114, .16); }
  .sns__card:hover .sns__icon { scale: 1.1; }
  .sns__card:hover::after { background-image: url(../img/icon_external_pink_card.svg); translate: 2px -2px; }
  .sns__other a:hover { color: var(--c-main); }
  .sns__other a:hover img { scale: 1.15; }

  /* フッター */
  .footer__btn:hover { background: rgba(255, 255, 255, .2); translate: 0 -3px; box-shadow: 0 10px 24px rgba(160, 40, 40, .2); }
  .footer__btn:hover img { translate: 2px -2px; }
}

/* 動きを減らす設定の人には、移動・拡大のホバーを出さない */
@media (prefers-reduced-motion: reduce) {
  * { translate: none !important; scale: none !important; }
}

/* =========================================================
   モーダル（ふるさとズとは？）
   ・中身が画面より長いときは、モーダルの中でスクロールできる
========================================================= */
.concept__btn { cursor: pointer; }
html.is-modal-open { overflow: hidden; }

.modal {
  position: fixed; inset: 0; z-index: 2000; display: flex; padding: 40px 20px;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(30, 14, 14, .7); cursor: pointer; /* 暗い背景。ここをクリック／タップすると閉じる */
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  position: relative; width: min(688px, 100%); margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 40px;
  background: #fff; cursor: auto; border-top: 5px solid var(--c-main); border-bottom: 5px solid var(--c-main); border-radius: 10px;
  outline: none; translate: 0 24px; transition: translate .5s cubic-bezier(.22, 1, .36, 1);
}
.modal.is-open .modal__box { translate: 0 0; }
.modal__head { width: 224px; padding-bottom: 16px; border-bottom: 2px solid var(--c-main); text-align: center; font-weight: 700; line-height: 1.6; }
.modal__en { font-size: 16px; color: var(--c-main); }
.modal__ttl { font-size: 28px; }
.modal__body { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: -16px; font-size: 16px; line-height: 1.6; text-align: center; }
.modal__body strong { font-weight: 700; }
.modal__body p { text-wrap: balance; word-break: auto-phrase; } /* 文節の区切りで自然に改行する */
.modal__point { font-weight: 700; font-size: 18px; color: var(--c-main); }
.modal__logo { width: 200px; }
.modal__movie { position: relative; width: 100%; aspect-ratio: 432 / 243; background: #e2e2e2; }
.modal__movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 応募規約のモーダル：文章が長いので左寄せ・少し広め */
.modal__box--terms { width: min(800px, 100%); }
.terms { width: 100%; font-size: 15px; line-height: 1.8; text-align: left; }
.terms > * + * { margin-top: 12px; }
.terms__name { font-weight: 700; font-size: 17px; text-align: center; }
.terms h3 { margin-top: 32px; padding-bottom: 6px; border-bottom: 1px solid var(--c-line); font-weight: 700; font-size: 16px; color: var(--c-main); }
.terms ul { list-style: disc; padding-left: 1.5em; }
.terms ol { list-style: decimal; padding-left: 1.5em; }
.terms li + li { margin-top: 4px; }
.terms li ul { margin-top: 4px; list-style: circle; }
.terms__note { font-size: 14px; color: #555; }
.terms__org { padding-top: 12px; border-top: 1px solid var(--c-line); }
.terms__link { color: var(--c-main); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.modal__close { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 28px; border: 1px solid var(--c-main); border-radius: 40px; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--c-main); transition: background-color .4s, color .4s; }
.modal__close img { width: 14px; transition: filter .4s, rotate .4s; }
@media (hover: hover) {
  .modal__close:hover { background: var(--c-main); color: #fff; }
  .modal__close:hover img { filter: brightness(0) invert(1); rotate: 90deg; }
}

@media (max-width: 767px) {
  .modal { padding: 56px 24px; } /* 指でタップしやすいよう、白い枠のまわりの暗い部分を広めに取る */
  .modal__box { gap: 28px; padding: 32px 18px; }
  .modal__head { width: 190px; padding-bottom: 12px; }
  .modal__en { font-size: 14px; }
  .modal__ttl { font-size: 22px; }
  .modal__body { gap: 18px; margin-top: -8px; font-size: 14px; }
  .modal__point { font-size: 15px; }
  .modal__logo { width: 160px; }
  .terms { font-size: 13px; }
  .terms__name { font-size: 15px; }
  .terms h3 { margin-top: 24px; font-size: 15px; }
  .terms__note { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .modal__box { transition: none; }
}