@charset "UTF-8";

/* ==========================================================================
   #おこめぼーのある育児 ハッシュタグキャンペーン
   ========================================================================== */

:root {
  --c-yellow: #f5e38c;
  --c-cream: #fdf9ea;
  --c-orange: #e17f00;
  --c-orange-deep: #cf7420;
  --c-brown: #c9822a;
  --c-red: #c8553a;
  --c-green: #4aa79a;
  --c-green-deep: #3b9085;
  --c-pink: #f4e0dc;
  --c-text: #3a3a3a;
  --c-sub: #555;
  --c-white: #fff;

  --card-w: 880px;
  --gutter: clamp(14px, 4vw, 32px);
  --radius: clamp(14px, 2.4vw, 24px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- base ----------
   サイト共通の header_2.php / footer.php に挟まれるため、
   body ではなく .okomebo を起点にし、サイト共通CSS（style.css / 2508_navi.css）の
   要素セレクタ（p, ul, ol, a, h1〜h6, label など）をこの中だけ打ち消す。
   リセットは :where() で詳細度を (0,1,0) に抑え、下の各クラス指定が勝つようにしている。 */

html { scroll-behavior: smooth; }

/* サイト共通ヘッダー（position: fixed）の高さ。
   共通CSSの body margin-top（PC 132px / SP 48px）だと僅かに潜り込むので実寸に合わせる */
:root { --header-h: 132.19px; }  /* 84px + 48.19px */
@media (max-width: 768px) {       /* 共通CSSのSP切り替え幅に合わせる */
  :root { --header-h: 50px; }
}
body { margin-top: var(--header-h); }

.okomebo *,
.okomebo *::before,
.okomebo *::after { box-sizing: border-box; }

.okomebo {
  color: var(--c-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: clamp(14px, 3.6vw, 17px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  background: var(--c-yellow) url(../images/paper.png) repeat top center / 500px auto;
  overflow-x: clip;
}

.okomebo :where(img, svg) { max-width: 100%; height: auto; vertical-align: middle; }
.okomebo :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}
.okomebo :where(h1, h2, h3, h4, h5, h6) { font-weight: bold; }
.okomebo :where(p) { font-size: inherit; line-height: inherit; text-align: inherit; }
.okomebo :where(ul, ol) { list-style: none; }
.okomebo :where(a) { color: inherit; text-decoration: underline; transition: none; }
.okomebo :where(label) { display: inline; max-width: none; margin: 0; }
/* サイト共通の a:hover（半透明＋下線）を無効化。.btn:hover など個別指定はこれより強い */
.okomebo a:where(:hover, :focus) { opacity: 1; text-decoration: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pc { display: none; }
.nw { white-space: nowrap; }

/* ---------- スクロール出現 ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   上部の帯
   ========================================================================== */

.ticker {
  --c-vermilion: #e2472b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.6em, 2.4vw, 1.2em);
  padding: .7em 10px;
  color: var(--c-white);
  background: var(--c-vermilion);
  font-size: clamp(10px, 3vw, 14px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  white-space: nowrap;
}
.ticker li + li {
  display: flex;
  align-items: center;
  gap: clamp(.6em, 2.4vw, 1.2em);
}
.ticker li + li::before {
  content: "";
  flex: none;
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: #ffd84d;
}

/* ==========================================================================
   ファーストビュー
   ========================================================================== */

.fv {
  position: relative;
  background: var(--c-cream);
  padding: clamp(14px, 3vw, 28px) 0 clamp(8px, 2vw, 16px);
  overflow: hidden;
}

.fv__inner {
  display: grid;
  grid-template-columns: 56% 44%;
  align-items: start;
  /* 縦積みのまま広げすぎると写真や商品が巨大になるので、幅を抑える */
  max-width: 620px;
  margin: 0 auto;
  padding: 0 clamp(8px, 2.4vw, 20px);
}

/* ポラロイド写真：白フチ・影・傾きはCSSで付ける */
.fv__photos {
  position: relative;
  aspect-ratio: 560 / 260;
}
.fv__polaroid {
  position: absolute;
  aspect-ratio: 1 / 1.06;
  padding: clamp(3px, .8vw, 8px);
  background: var(--c-white);
  box-shadow: 0 4px 12px rgba(120, 80, 20, .22);
  object-fit: cover;
  animation: fv-drop .9s var(--ease-pop) both;
}
.fv__polaroid--1 { left: 1%;  top: 6%;  width: 40%; rotate: -8deg; object-position: 50% 50%; animation-delay: .15s; }
.fv__polaroid--2 { left: 38%; top: 16%; width: 29%; rotate: 2deg;  object-position: 68% 50%; animation-delay: .3s; }
.fv__polaroid--3 { left: 66%; top: 4%;  width: 33%; rotate: 8deg;  object-position: 55% 50%; animation-delay: .45s; }

.fv__pile {
  position: relative;
  padding-top: 4%;
}
/* 白背景のJPGなので、乗算で下地になじませる（親にアニメーションを掛けると乗算が効かない） */
.fv__pile-img {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
  animation: fv-rise .9s var(--ease-out) .5s both;
}
.fv__ribbon {
  position: absolute;
  right: -2%;
  top: -5%;
  width: 36%;
  transform-origin: 50% 0;
  animation: fv-pop .7s var(--ease-pop) .9s both, fv-sway 3.2s ease-in-out 1.6s infinite;
}

/* スマホ・タブレットは画面中央に揃え、商品パッケージはリード文の左上に小さく添える */
.fv__title {
  grid-column: 1 / -1;
  position: relative;
  margin-top: clamp(30px, 9vw, 60px);
  padding: 0 2%;
  text-align: center;
}
.fv__pack {
  position: absolute;
  z-index: 1;
  left: 3%;
  top: 0;
  width: 15%;
  transform: translateY(-96%) rotate(-8deg);
  filter: drop-shadow(0 6px 10px rgba(120, 80, 20, .18));
  animation: fv-rise .9s var(--ease-out) .7s both;
}
/* 文字はインラインSVG。白フチと影はここで付ける（単位はSVG内の座標なので拡大縮小に追従） */
.fv__lead {
  display: block;
  width: 64%;
  margin: 0 auto clamp(14px, 3.8vw, 30px);
  overflow: visible;
  animation: fv-rise .8s var(--ease-out) .6s both;
}
.fv__lead-shadow { filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, .15)); }
.fv__lead-outline {
  fill: var(--c-white);
  stroke: var(--c-white);
  stroke-width: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fv__lead-fill {
  fill: #d98000;
  stroke: #d98000;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fv__logo { animation: fv-pop .9s var(--ease-pop) .8s both; }
.fv__logo > * { display: block; }
/* 主役のハッシュタグを最大に、ほかの行は小さくして差をつける */
.fv__logo-main { width: 100%; }
.fv__logo-sub { width: 78%; margin: 6.5% auto 0; }
.fv__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
  margin-top: clamp(14px, 3.8vw, 30px);
  animation: fv-rise .8s var(--ease-out) 1.1s both;
}
.fv__how {
  width: fit-content;
  max-width: 100%;
  margin: clamp(16px, 4.2vw, 32px) auto 0;
  padding: .45em 1.4em;
  border-radius: 999px;
  color: var(--c-white);
  background: var(--c-orange);
  font-size: clamp(13px, 3.5vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .06em;
  animation: fv-rise .8s var(--ease-out) 1.3s both;
}
/* スマホは開催期間が読めるサイズを優先 */
.fv__badge { width: 23%; animation: fv-pulse 2.4s ease-in-out 2s infinite; }
.fv__date { width: 62%; }

@keyframes fv-drop {
  from { opacity: 0; transform: translateY(-36px) rotate(-6deg) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes fv-rise {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes fv-pop {
  from { opacity: 0; scale: .86; }
  to   { opacity: 1; scale: 1; }
}
@keyframes fv-sway {
  0%, 100% { rotate: -3deg; }
  50%      { rotate: 4deg; }
}
@keyframes fv-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.06; }
}

/* ==========================================================================
   写真の帯（無限スクロール）
   ========================================================================== */

/* 帯全体をデザインと同じ右上がりに傾ける。傾けたぶんの高さを上下の余白で確保 */
.band {
  --slope: 3.5deg;
  position: relative;
  padding: 3.1vw 0; /* tan() 非対応ブラウザ用 */
  padding: calc(50vw * tan(var(--slope))) 0;
  background: linear-gradient(var(--c-cream) 0 50%, transparent 50%);
  overflow: hidden;
}
.band__slant {
  margin: 0 -6vw;
  rotate: calc(var(--slope) * -1);
}
.band__edge {
  display: block;
  width: 100%;
  height: clamp(18px, 3.4vw, 46px);
  fill: var(--c-orange);
}
.band__edge--top { margin-bottom: -1px; }
.band__edge--bottom { margin-top: -1px; }
.band__body {
  background: var(--c-orange);
  padding: clamp(6px, 1.5vw, 16px) 0;
}

.marquee {
  --item: clamp(150px, 26vw, 250px);
  --gap: clamp(10px, 2vw, 22px);
  padding: clamp(8px, 1.6vw, 16px) 0;
}
.marquee__track {
  display: flex;
  width: max-content;
}
.marquee.is-ready .marquee__track {
  animation: marquee var(--duration, 40s) linear infinite;
}

.marquee__item {
  flex: none;
  width: var(--item);
  margin-right: var(--gap);
  padding: clamp(5px, .9vw, 9px);
  background: var(--c-white);
  box-shadow: 0 6px 14px rgba(90, 45, 0, .28);
}
.marquee__item > * {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
/* 4枚目（テーブルの写真）は商品が切れない位置で切り抜く。7枚1組で繰り返すので 7n+4 */
.marquee__item:nth-child(7n+4) > * { object-position: 24% 50%; }

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   リード
   ========================================================================== */

.intro {
  padding: clamp(28px, 6vw, 56px) var(--gutter) clamp(36px, 7vw, 72px);
}
.intro__inner {
  position: relative;
  max-width: var(--card-w);
  margin: 0 auto;
}
.intro__pack {
  display: block;
  width: clamp(84px, 19%, 170px);
  margin: 0 auto clamp(8px, 2vw, 16px);
  rotate: 8deg;
  filter: drop-shadow(0 6px 10px rgba(120, 80, 20, .18));
}
.intro__text {
  text-align: center;
  font-size: clamp(14px, 3.7vw, 19px);
  line-height: 1.9;
  letter-spacing: .08em;
  word-break: auto-phrase;
}
.intro__text p + p { margin-top: 1.8em; }

/* ==========================================================================
   カード共通
   ========================================================================== */

.section {
  padding: 0 var(--gutter) clamp(28px, 5vw, 48px);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.card {
  max-width: var(--card-w);
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--c-white);
  box-shadow: 0 10px 30px rgba(170, 120, 20, .14);
  overflow: hidden;
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 9vw, 74px);
  padding: 10px 16px;
  color: var(--c-white);
  background: var(--c-orange) url(../images/orange.png) center / 100% 100%;
}
.card__head > * {
  width: auto;
  height: clamp(20px, 4.2vw, 32px);
}
.card__body {
  padding: clamp(24px, 5vw, 48px) clamp(16px, 6vw, 84px) clamp(32px, 6vw, 60px);
}

.note {
  color: var(--c-sub);
  font-size: clamp(11px, 2.9vw, 15px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
}

/* ---------- ボタン ---------- */

.btn,
.btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: clamp(56px, 13vw, 84px);
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--c-white);
  background: var(--c-green);
  box-shadow: 0 6px 0 var(--c-green-deep);
  font-size: clamp(14px, 3.8vw, 24px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s;
}
.btn2 {
  background: #00B900;
  box-shadow: 0 6px 0 #029c02;
}
.btn__icon { flex: none; width: 1.5em; height: 1.5em; }
.btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--c-green-deep); }
.btn:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }

.follow { margin-top: clamp(28px, 6vw, 52px); }
.follow__lead {
  margin-bottom: clamp(10px, 2vw, 14px);
  font-size: clamp(14px, 3.7vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.follow__lead::before,
.follow__lead::after {
  display: inline-block;
  font-weight: 400;
}
.follow__lead::before { content: "＼"; }
.follow__lead::after  { content: "／"; }
.follow .btn + .btn { margin-top: clamp(16px, 3vw, 28px); }

/* ==========================================================================
   プレゼント商品
   ========================================================================== */

.prize {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(10px, 2.4vw, 22px);
}
.prize + .prize { margin-top: clamp(36px, 7vw, 68px); }

.prize__badge { width: clamp(72px, 17vw, 112px); }
.prize__lead {
  font-size: clamp(13px, 3.4vw, 22px);
  font-weight: 700;
  line-height: 1.4;
}
.prize__name {
  font-size: clamp(16px, 4.5vw, 36px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
}
.prize__img {
  grid-column: 1 / -1;
  justify-self: center;
  width: 86%; /* A〜C賞は同じ幅に揃える */
  margin-top: clamp(14px, 3vw, 26px);
}
.prize__img--wide { width: 100%; }

.coupon {
  margin-top: clamp(36px, 7vw, 68px);
  padding: clamp(24px, 5vw, 48px) clamp(14px, 4vw, 40px) clamp(28px, 5.5vw, 56px);
  border-radius: var(--radius);
  background: var(--c-pink);
  text-align: center;
  margin-bottom: 50px;
}
.coupon__title { color: var(--c-red); }
.coupon__title > * { display: block; width: min(100%, 520px); margin: 0 auto; }
.coupon__name {
  display: inline-block;
  margin-top: clamp(12px, 3vw, 28px);
  font-size: clamp(16px, 4.4vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}
.coupon__img {
  display: block;
  width: min(78%, 320px);
  margin: clamp(12px, 2.6vw, 22px) auto 0;
  transition: transform .5s var(--ease-pop);
}
.coupon.is-in .coupon__img { animation: coupon-wiggle .9s var(--ease-out) .5s both; }

@keyframes coupon-wiggle {
  0%   { rotate: 0deg; }
  30%  { rotate: -4deg; }
  60%  { rotate: 3deg; }
  100% { rotate: 0deg; }
}

/* ==========================================================================
   投稿の対象商品
   ========================================================================== */

.products__brand {
  font-size: clamp(18px, 5vw, 32px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.products__brand span {
  display: block;
  width: fit-content;
  margin: 0 auto .2em;
  padding: 0 .5em;
  border-inline: 3px solid currentColor;
  color: var(--c-brown);
  font-size: .86em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
}
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 20px) 4%;
  margin-top: clamp(18px, 4vw, 32px);
}
.products li {
  width: 28%;
  font-size: clamp(12px, 3.2vw, 17px);
  line-height: 1.4;
  text-align: center;
}
.products li > :first-child {
  display: block;
  width: 100%;
  margin-bottom: .6em;
  transition: transform .4s var(--ease-pop);
}
/* ひじきのり・しらすおかかは画像内の余白が広いので、見た目の大きさを揃える */
.products li:nth-child(n+4) > :first-child { scale: 1.07; }

/* ==========================================================================
   応募方法
   ========================================================================== */

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(10px, 2.4vw, 22px);
}
.step + .step { margin-top: clamp(20px, 4vw, 36px); }
.step__badge { width: clamp(62px, 14vw, 94px); }
.step__title {
  font-size: clamp(14px, 3.8vw, 22px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}
.step__hashtag {
  display: block;
  width: min(100%, 21em);
}
.step__desc {
  margin-top: .6em;
  font-size: clamp(12px, 3.1vw, 16px);
  font-weight: 700;
  line-height: 1.6;
}
.step__note { margin-top: .5em; }
.step__illust {
  grid-column: 1 / -1;
  justify-self: center;
  width: clamp(150px, 36%, 240px);
  margin-top: clamp(14px, 3vw, 26px);
}
.step__illust--person { width: clamp(100px, 23%, 150px); }

/* ==========================================================================
   当選者の発表
   ========================================================================== */

.info li {
  display: grid;
  grid-template-columns: clamp(56px, 14vw, 112px) 1fr;
  align-items: center;
  gap: clamp(14px, 4vw, 44px);
  font-size: clamp(13px, 3.5vw, 20px);
  font-weight: 700;
  line-height: 1.6;
}
.info li + li { margin-top: clamp(22px, 4.5vw, 40px); }
.info li > :first-child { justify-self: center; width: 100%; color: var(--c-brown); }

/* ==========================================================================
   応募規約
   ========================================================================== */

.terms {
  color: var(--c-sub);
  font-size: clamp(12px, 3.2vw, 16px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .02em;
}
.terms dt { font-weight: 500; }
.terms dt::before { content: "■"; }
.terms dd + dt { margin-top: 1.75em; }
.terms dd p + p { margin-top: .2em; }
.terms a { color: inherit; text-underline-offset: .2em; }

/* ==========================================================================
   よくあるご質問
   ========================================================================== */

.faq__item { border-bottom: 2px dotted #e3c98f; }
.faq__item:first-child { border-top: 2px dotted #e3c98f; }

.faq__q button {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7em;
  width: 100%;
  padding: 1.1em 2.4em 1.1em 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}
.faq__q button::before,
.faq__q button::after {
  content: "";
  position: absolute;
  right: .3em;
  top: 50%;
  width: 1em;
  height: 3px;
  border-radius: 3px;
  background: var(--c-orange);
  translate: 0 -50%;
  transition: rotate .35s var(--ease-out);
}
.faq__q button::after { rotate: 90deg; }
.faq__q button[aria-expanded="true"]::after { rotate: 0deg; }
.faq__q button:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }

.faq__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  color: var(--c-white);
  background: var(--c-orange);
  font-size: .95em;
  line-height: 1;
  letter-spacing: 0;
}
.faq__a .faq__mark { color: var(--c-orange); background: #fbeed9; }

.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.js .faq__a { grid-template-rows: 0fr; }
.js .faq__a.is-open { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.js .faq__a:not(.is-open) .faq__a-inner { visibility: hidden; transition: visibility 0s .4s; }
.faq__a p {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  padding: 0 0 1.2em;
  font-weight: 400;
  line-height: 1.7;
}

/* ==========================================================================
   投稿ギャラリー
   ========================================================================== */

.gallery {
  padding: clamp(36px, 7vw, 64px) var(--gutter) clamp(40px, 7vw, 64px);
  /* background: var(--c-white); */
}
.gallery__inner { max-width: var(--card-w); margin: 0 auto; text-align: center; }
.gallery__title { color: var(--c-brown); }
.gallery__title > * { display: block; margin: 0 auto; width: min(86%, 480px); }
.gallery__embed { margin-top: clamp(20px, 4.5vw, 40px); }
/* 埋め込みコードは 1020×1020 固定なので、幅いっぱい・正方形で可変にする */
.gallery__embed .snapwidget-widget {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: none;
  overflow: hidden;
}
.gallery__more {
  display: inline-grid;
  place-items: center;
  min-width: 160px;
  min-height: 40px;
  margin-top: clamp(20px, 4vw, 32px);
  border: 1.5px solid #aaa;
  border-radius: 999px;
  color: #999;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .2s, border-color .2s, background-color .2s;
}

/* ==========================================================================
   スマホ用 追従CTA
   ========================================================================== */

.dock {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 252, 240, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 16px rgba(120, 80, 0, .12);
  translate: 0 110%;
  transition: translate .45s var(--ease-out);
}
.dock.is-show { translate: 0 0; }
.btn--dock {
  min-height: 46px;
  padding: 4px 10px;
  box-shadow: 0 3px 0 var(--c-green-deep);
  font-size: 14px;
  letter-spacing: .04em;
}
.btn--dock:active { transform: translateY(3px); }
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

/* ==========================================================================
   ホバー（マウス操作のみ）
   ========================================================================== */

@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--c-green-deep); background: #52b3a5; }
  .btn--dock:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--c-green-deep); }
  .products li:hover > :first-child { transform: translateY(-6px) rotate(-3deg); }
  .gallery__more:hover { color: var(--c-white); border-color: var(--c-orange); background: var(--c-orange); }
}

/* ==========================================================================
   タブレット以上
   ========================================================================== */

@media (min-width: 600px) {
  .pc { display: inline; }
  .sp { display: none; }

  .intro__pack {
    position: absolute;
    right: 0;
    top: -4%;
    margin: 0;
  }

  .prize__img:not(.prize__img--wide),
  .step__illust { grid-column: 2; justify-self: start; }
  .prize__img { width: 88%; }
  .prize__img--wide { width: 100%; }
  .step__illust { margin-left: 16%; }
  .step__illust--person { margin-left: 26%; }

  .products { flex-wrap: nowrap; gap: 3%; }
  .products li { width: auto; flex: 1; }
}

@media (min-width: 768px) {
  .dock { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   PC：ファーストビューを横に広げる
   ========================================================================== */

@media (min-width: 960px) {
  .fv { padding: clamp(28px, 3vw, 48px) 0 clamp(12px, 1.5vw, 24px); }
  .fv__inner {
    /* 画面が広いほど全体を大きくする（中央カラムは画面幅の50%、上限1060px） */
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(460px, 50vw, 1060px)) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(12px, 2vw, 40px);
    max-width: 2000px;
    padding: 0 clamp(20px, 3vw, 48px);
  }

  .fv__photos { grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1.15; max-width: clamp(300px, 24vw, 500px); width: 100%; justify-self: end; }
  .fv__polaroid--1 { left: 2%;  top: 2%;  width: 50%; }
  .fv__polaroid--2 { left: 52%; top: 24%; width: 42%; }
  .fv__polaroid--3 { left: 10%; top: 52%; width: 44%; }

  /* 文字は中央カラムの中央に揃える。商品パッケージはスマホと同じくリード文の左上 */
  .fv__title { grid-column: 2; grid-row: 1; margin-top: clamp(40px, 5vw, 90px); padding: 0; }
  .fv__pack { left: 1%; width: 14%; transform: translateY(-62%) rotate(-8deg); }
  .fv__lead { width: 52%; }
  .fv__logo-sub { width: 74%; }
  /* 狭めのPC幅でも開催期間が読めるよう、下限を設ける */
  .fv__badge { width: max(17%, 104px); }
  .fv__date { width: max(42%, 280px); }
  .fv__how { font-size: clamp(17px, 1.35vw, 26px); }

  .fv__pile { grid-column: 3; grid-row: 1; padding-top: 12%; max-width: clamp(360px, 28vw, 600px); width: 100%; }
  .fv__ribbon { right: -4%; top: -9%; width: 40%; }

  .marquee { --item: clamp(220px, 17vw, 360px); }
}

/* ==========================================================================
   動きを減らす設定
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .marquee { overflow-x: auto; }
}

/* ==========================================================================
   確認用の簡易パスワード（公開時は削除）
   ========================================================================== */

.gate { display: none; }
.is-locked body { padding: 0; background: var(--c-cream); }
.is-locked body > :not(.okomebo),
.is-locked .okomebo > :not(.gate) { display: none !important; }
.is-locked .okomebo { background: none; }
.is-locked .gate {
  display: grid;
  gap: 14px;
  width: min(100% - 32px, 340px);
  margin: 22vh auto 0;
  padding: 32px 24px;
  border-radius: var(--radius);
  background: var(--c-white);
  box-shadow: 0 10px 30px rgba(170, 120, 20, .14);
  text-align: center;
}
.gate__title { color: var(--c-orange); font-size: 18px; font-weight: 700; }
.gate__label { font-size: 14px; }
.gate__input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e3c98f;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  text-align: center;
}
.gate__input:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; }
.gate__error { color: var(--c-red); font-size: 13px; font-weight: 700; }
.gate__btn {
  padding: 12px;
  border: 0;
  border-radius: 999px;
  color: var(--c-white);
  background: var(--c-green);
  font: inherit;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
}