/* ==========================================================================
   午後のクレープ LP — セクション別レイアウト
   デザイン: Claude Design / 修正版.dc.html（lp/project/）
   数値はデザインファイルの指定をそのまま移植しています。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 共通ユーティリティ
   -------------------------------------------------------------------------- */

/* セクションの左右余白（スマホでは 22px に縮む） */
.lp-pad { padding-left: 40px; padding-right: 40px; }

/* セクションの上下余白（スマホでは 64px に縮む） */
.lp-tight { padding-top: 112px; padding-bottom: 112px; }

/* 段組み。スマホで 1 列になるもの */
.lp-grid { display: grid; }

/* 段組み。スマホで 2 列になるもの（写真タイルなど） */
.lp-grid-2 { display: grid; }

/* ゴシック体で組むセクション */
.lp-gothic,
.lp-gothic h1, .lp-gothic h2, .lp-gothic h3, .lp-gothic h4,
.lp-gothic p, .lp-gothic span, .lp-gothic a, .lp-gothic div, .lp-gothic li,
.lp-gothic label, .lp-gothic input, .lp-gothic textarea, .lp-gothic button {
  font-family: var(--font-sans);
}
.lp-gothic h1, .lp-gothic h2, .lp-gothic h3, .lp-gothic h4 { font-weight: 500; }

/* セクション見出しの上に置く英字ラベルと、その下の短い区切り線 */
.lp-eyebrow { font-family: var(--font-sans); font-size: 13px; letter-spacing: .3em; }
.lp-rule {
  width: 54px; height: 1px; margin: 14px auto 46px;
  background: var(--color-accent-300); opacity: .9;
}
.lp-rule--tight { margin-bottom: 44px; }
.lp-rule--contact { margin-bottom: 40px; }
.lp-rule--wide { margin-bottom: 52px; }
.lp-rule--faint { background: var(--color-neutral-100); opacity: .4; }
.lp-rule--paper { background: var(--color-bg); opacity: .5; }

/* 枠いっぱいに写真を敷く。data-pan-y があれば JS が表示位置を調整する */
.lp-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: block;
}

/* 写真の見せたい部分が右端にある場合に使う */
.lp-photo--right { object-position: 100% 50%; }

/* デザインで拡大して切り抜いた写真（data-zoom 付き）。
   JS が枠に対する％で大きさと位置を書き込むので、枠より大きくなれるようにしておく。
   JS が動くまでは左上基準で枠いっぱいに敷かれる。 */
.lp-photo--zoom { inset: auto; left: 0; top: 0; max-width: none; }

/* --------------------------------------------------------------------------
   1. ヘッダー（固定）
   -------------------------------------------------------------------------- */
.lp-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 22px 40px;
  background: rgba(32, 30, 29, .72);
  backdrop-filter: blur(10px);
}

/* ロゴ（トップへのリンク）。メニューの項目と同じく、ホバーで色は変えない */
.lp-header__brand {
  font-size: 15px; letter-spacing: .22em;
  color: var(--color-bg); text-decoration: none;
}
.lp-header__brand:hover { color: var(--color-bg); }

.lp-nav {
  display: flex; align-items: center; gap: 30px; margin-left: auto;
  font-family: var(--font-sans); font-size: 14px; letter-spacing: .1em;
}
.lp-nav a { color: var(--color-bg); }
.lp-nav__ig { display: flex; align-items: center; }

/* ハンバーガーボタン。980px 以下でだけ出す */
.lp-burger {
  display: none; margin-left: auto;
  flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.lp-burger span { display: block; width: 24px; height: 1.5px; background: var(--color-bg); }

/* ログイン中は画面上部に WordPress の管理バー（黒帯）が出るので、その高さぶん下げる。
   管理バーは 782px 以下で 46px に太くなり、600px 以下では固定表示をやめて
   ページと一緒にスクロールするため、そこでは下げる必要がない。 */
body.admin-bar .lp-header,
body.admin-bar .lp-drawer { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .lp-header,
  body.admin-bar .lp-drawer { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .lp-header,
  body.admin-bar .lp-drawer { top: 0; }
}

/* --------------------------------------------------------------------------
   2. スマホ用のメニュー（全画面）
   -------------------------------------------------------------------------- */
.lp-drawer {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background: rgba(28, 26, 25, .97);
  font-family: var(--font-sans); font-size: 19px; letter-spacing: .12em;
}
.lp-drawer[hidden] { display: none; }
.lp-drawer a { color: var(--color-bg); display: flex; }
.lp-drawer__close {
  position: absolute; top: 22px; right: 34px;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0;
  color: var(--color-bg); font-size: 26px; cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. ヒーロー
   紙の質感の背景を全面に敷き、その上にクマとロゴを載せる。
   -------------------------------------------------------------------------- */
.lp-hero {
  position: relative; height: 100vh; min-height: 640px; overflow: hidden;
  color: var(--color-bg);
}

/* 背景（全面） */
.lp-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ロゴの横幅。デザインの指定（58vw、最大 940px）に、画面の高さによる上限を足したもの。
   背の低い画面（ノートPC）でヘッダーやキャッチコピーに重ならないようにするため。 */
.lp-hero { --lp-logo-w: min(58vw, 88vh, 940px); }

/* 右下のキャッチコピー画像。
   横幅はデザインの指定（41vw、最大 630px）。左端がロゴの右下（®のあたり）に少し重なるのは
   デザインどおりで、本人了承済み。背の低い画面ではロゴを覆いすぎないよう画面の高さでも抑える。 */
.lp-hero { --lp-tag-w: clamp(330px, min(41vw, 60vh), 630px); }
.lp-hero__tagline {
  position: absolute; z-index: 4;
  right: clamp(0px, .6vw, 12px); bottom: clamp(44px, 7.5vh, 88px);
  width: var(--lp-tag-w); height: auto;
  pointer-events: none;
  transform: rotate(-8deg); transform-origin: right bottom;
  filter: drop-shadow(0 2px 10px rgba(10, 14, 18, .45));
}

/* 中央のクマ・ロゴ。2つをひと組にして、メインビジュアル全体の上下左右中央に置く */
.lp-hero__copy {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 40px; box-sizing: border-box;
  text-align: center; pointer-events: none;
}
/* クマの横幅は、デザインの指定（34vw、最大 540px）と画面の高さの小さい方。
   高さの係数はロゴ（88vh）とデザイン上の比率（クマ : ロゴ ≒ 0.59 : 1）を保った値で、
   1366×660 程度のノートPCでも固定ヘッダーの下に潜らない。 */
.lp-hero__mascot { display: block; width: min(34vw, 52vh, 540px); height: auto; margin: 0 0 8px; }
/* 見出しはロゴ画像。line-height:0 で画像の下にできる行間の余白を消す */
.lp-hero__title { margin: 0; line-height: 0; }
.lp-hero__logo {
  display: block;
  width: var(--lp-logo-w); height: auto;
  filter: drop-shadow(0 2px 3px rgba(10, 14, 18, .45))
          drop-shadow(0 6px 22px rgba(10, 14, 18, .35));
}

/* --------------------------------------------------------------------------
   4. About（素材へのこだわり）
   -------------------------------------------------------------------------- */
.lp-about { padding: 112px 0 45px; }
.lp-about__inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.lp-about__title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 50px); line-height: 1.5; letter-spacing: .04em;
}
.lp-about__lead {
  margin: 38px auto 0; max-width: 30em;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 18px); line-height: 2.3; letter-spacing: .04em;
}

.lp-about__points {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 52px 36px; margin-top: 88px;
  text-align: center; font-family: var(--font-sans);
}
.lp-point__no {
  margin: 0 0 14px;
  font-size: 24px; letter-spacing: .24em; color: var(--color-accent-300);
}
.lp-point__name {
  margin: 0 0 14px;
  font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.48; letter-spacing: .04em;
}
.lp-point__body {
  margin: 0;
  font-size: 15.5px; line-height: 2.1; letter-spacing: .03em;
  color: var(--color-neutral-300);
}
.lp-point__note { font-size: 13px; }

/* --------------------------------------------------------------------------
   5. 写真ストリップ（4枚並び）
   -------------------------------------------------------------------------- */
.lp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.lp-strip__cell { position: relative; aspect-ratio: 1 / 1; }

/* --------------------------------------------------------------------------
   6. 流れる文字（マーキー）
   -------------------------------------------------------------------------- */
/* position/z-index/contain は iPhone 対策。
   iOS の WebKit は、transform でアニメーションする要素の幅を「ページの幅」として
   数えてしまい、overflow: hidden だけでは止められない（ページ全体が縮小可能になる）。
   親をスタッキングコンテキストにすると、ここで切れているものとして扱われる。 */
.lp-marquee {
  position: relative; z-index: 0; contain: paint;
  overflow: hidden; padding: 22px 0;
}
.lp-marquee__track {
  display: flex; width: max-content;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(39px, 4.7vw, 68px); letter-spacing: .2em;
  color: var(--color-bg); white-space: nowrap;
  animation: lp-marquee 60s linear infinite;
}
.lp-marquee__track--reverse { animation-name: lp-marquee-rev; }
.lp-marquee__track span { padding-right: 1.2em; }

/* --------------------------------------------------------------------------
   7. メニュー（テキストと写真を市松に並べる）
   -------------------------------------------------------------------------- */
.lp-menu { padding: 90px 0 0; }
.lp-menu__inner { max-width: 1180px; margin: 0 auto; }
.lp-menu-grid { grid-template-columns: 1fr 1fr; gap: 0; }

.lp-menu__panel {
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(320px, 44vw, 600px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--color-panel); color: var(--color-bg);
  text-align: center;
}
.lp-menu__photo { position: relative; min-height: clamp(320px, 44vw, 600px); }

.lp-menu__tag { align-self: center; }
.lp-menu__label { font-size: 12px; letter-spacing: .26em; color: var(--color-bg); }
.lp-menu__name {
  margin: 18px 0 0;
  font-size: clamp(22px, 2.6vw, 36px); line-height: 1.4; letter-spacing: .04em;
  color: var(--color-bg);
}
.lp-menu__name--pickup { margin-top: 20px; }
.lp-menu__body {
  margin: 20px 0 0;
  font-size: 15px; line-height: 2.05; letter-spacing: .03em;
  color: var(--color-neutral-100);
}
.lp-menu__body--dim { color: var(--color-bg); opacity: .88; }
/* 商品名の下に添える「— ひなたクレープ —」 */
.lp-menu__sub {
  margin: 12px 0 0;
  font-size: clamp(14px, 1.5vw, 18px); letter-spacing: .08em;
  color: var(--color-neutral-100);
}
.lp-menu__btn {
  align-self: center; margin-top: 28px;
  color: var(--color-bg); border-color: var(--color-bg);
}

/* ラインナップの見出し */
.lp-lineup-head { margin: 96px 0 0; text-align: center; scroll-margin-top: 80px; }
.lp-lineup-head .lp-eyebrow { color: var(--color-bg); }
.lp-lineup-head h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 40px); letter-spacing: .05em;
}
.lp-lineup-head__sub {
  margin: 12px 0 0;
  font-size: clamp(14px, 1.5vw, 18px); letter-spacing: .08em;
  color: var(--color-neutral-200);
}

/* --------------------------------------------------------------------------
   8. ひなたクレープ ラインナップ（旬の4種）
   -------------------------------------------------------------------------- */
.lp-lineup-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 96px;
}
.lp-lineup__col { display: flex; flex-direction: column; }
.lp-lineup__caption { padding: 22px 14px; text-align: center; font-family: var(--font-sans); }
.lp-lineup__month {
  margin: 0;
  font-size: 16px; letter-spacing: .2em; color: var(--color-accent-300);
}
.lp-lineup__fruit {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.5vw, 20px); font-weight: 500; letter-spacing: .04em;
  color: var(--color-bg);
}
.lp-lineup__photo {
  position: relative; aspect-ratio: 1 / 1;
  background: linear-gradient(150deg, #f4f5f6 0%, #eceae6 45%, #ddd7d1 100%);
}

/* --------------------------------------------------------------------------
   9. イベント系クレープ / ゲリラ販売クレープ / 出張クレープ
   見出し・段組み・一覧の部品は3セクションで共用する。
   -------------------------------------------------------------------------- */
.lp-seasonal__head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.lp-seasonal__head h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 40px); letter-spacing: .05em;
}
.lp-seasonal__head p {
  margin: 0;
  font-size: 15.5px; line-height: 2.1; letter-spacing: .04em;
  color: var(--color-neutral-300);
}
.lp-seasonal__inner { max-width: 1180px; margin: 0 auto; }
.lp-seasonal__grid {
  grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.lp-season-list { display: grid; gap: 0; padding-left: clamp(0px, 8vw, 140px); }
.lp-season-list__row {
  display: flex; gap: 28px; padding: 16px 0;
  font-size: clamp(15px, 1.7vw, 19px); letter-spacing: .04em;
}
.lp-season-list__month {
  min-width: 7em; align-self: center; text-align: right;
  font-size: 16px; letter-spacing: .2em; color: var(--color-accent-300);
}
.lp-seasonal__photo {
  position: relative; aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, #e3e2e0 0%, #d8cfc6 45%, #bfaea0 100%);
}
/* 写真の下の注記 */
.lp-seasonal__caption {
  margin: 10px 0 0;
  font-size: 11px; line-height: 1.6; letter-spacing: .02em; text-align: right;
  color: var(--color-neutral-200);
}

/* 箇条書き（ゲリラ販売）。行頭に小さな丸を置く */
.lp-season-list__row--dot { gap: 16px; align-items: center; }
.lp-season-list__dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent-300);
}
/* 項目名＋複数行の内容（出張クレープ）。項目名は1行目に揃える */
.lp-season-list__month--top { min-width: 4em; align-self: flex-start; padding-top: 2px; }
.lp-season-list__text { line-height: 1.9; }

/* ゲリラ販売・出張クレープ。上の余白はセクションではなく見出し側に持たせる */
.lp-extra { padding-top: 0; }
.lp-extra__head { padding-top: 112px; }
.lp-extra__photo {
  position: relative; aspect-ratio: 8 / 5;
  background: linear-gradient(150deg, #e3e2e0 0%, #d8cfc6 45%, #bfaea0 100%);
}

/* --------------------------------------------------------------------------
   10. アクセス
   -------------------------------------------------------------------------- */
.lp-access { background: var(--color-panel); color: var(--color-bg); }
.lp-access__head { text-align: center; }
.lp-access__head .lp-eyebrow { color: var(--color-bg); }
.lp-access__grid {
  max-width: 1180px; margin: 0 auto;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 56px; align-items: start;
}
.lp-access__dl {
  margin: 0; display: grid;
  grid-template-columns: 6em 1fr; row-gap: 22px; column-gap: 20px;
  font-size: 16px; line-height: 1.9; letter-spacing: .03em;
  color: var(--color-bg);
}
.lp-access__dl dt {
  padding-top: 4px;
  font-size: 13px; letter-spacing: .16em; color: var(--color-neutral-200);
}
.lp-access__dl dd { margin: 0; }
/* アクセス欄のリンク。淡い水色の下線を引く（住所・Instagram 共通） */
.lp-access__link {
  color: var(--color-bg);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: var(--color-accent-300);
}
/* 外部リンクを表すアイコン。付けたいリンクにだけ入れる */
.lp-access__link svg {
  display: inline-block; vertical-align: baseline; margin-left: 7px;
}
.lp-access__note { font-size: 14px; color: var(--color-neutral-200); }
/* 複数行になる注記は行間を詰める。dl の行間（1.9）を打ち消すため block にしている */
.lp-access__note--tight { display: block; line-height: 1.5; }
/* 項目のあいだに引く区切り線（dt を線として使う）。
   ラベル用の padding-top を打ち消さないと、線が 4px の太さになってしまう。 */
/* セレクタを .lp-access__dl から書き始めているのは、上の `.lp-access__dl dt`
   （ラベル用の padding-top: 4px）より優先度を高くするため。
   これが無いと padding のぶん線が 4px の太さになる。 */
.lp-access__dl .lp-access__sep {
  grid-column: 1 / -1; height: 1px; padding-top: 0; margin: 18px 0 2px;
  background: var(--color-text); opacity: .2;
}
.lp-access__map { display: grid; gap: 18px; }
.lp-access__map img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   11. Instagram
   -------------------------------------------------------------------------- */
.lp-ig__inner { max-width: 1280px; margin: 0 auto; }
.lp-ig__head { text-align: center; }
.lp-ig__head .lp-eyebrow { color: var(--color-accent-300); }
.lp-ig-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.lp-ig__cell {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--color-neutral-800);
}
.lp-ig__more-wrap { display: flex; justify-content: center; margin-top: 44px; }
.lp-ig__more {
  padding-bottom: 6px;
  font-family: var(--font-sans); font-size: 13px; letter-spacing: .22em;
  color: var(--color-bg);
  border-bottom: 1px solid var(--color-accent-300);
}

/* --------------------------------------------------------------------------
   12. お問い合わせ
   -------------------------------------------------------------------------- */
.lp-contact__head { text-align: center; }
.lp-contact__head .lp-eyebrow { color: var(--color-accent-300); }
.lp-contact__lead {
  margin: 0 auto 44px; max-width: 26em;
  font-size: 16px; line-height: 2.1; letter-spacing: .04em;
  color: var(--color-neutral-300);
}
.lp-contact__form { display: grid; gap: 20px; max-width: 560px; margin: 0 auto; }
.lp-contact__actions {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; margin-top: 6px;
}

/* Contact Form 7 の出力をデザインに合わせる。
   プラグインが吐き出すクラス名に、テーマの部品スタイルを当て直している。 */
.lp-contact__form .wpcf7-form { display: grid; gap: 20px; }
.lp-contact__form .wpcf7-form p { margin: 0; }
.lp-contact__form .wpcf7-form label {
  display: block; margin-bottom: 5px;
  font-size: 13px; letter-spacing: .12em; color: var(--color-accent-300);
}
.lp-contact__form .wpcf7-form-control-wrap { display: block; }
.lp-contact__form input[type="text"],
.lp-contact__form input[type="email"],
.lp-contact__form input[type="tel"],
.lp-contact__form input[type="url"],
.lp-contact__form input[type="date"],
.lp-contact__form input[type="number"],
.lp-contact__form select,
.lp-contact__form textarea {
  width: 100%; min-height: 36px; padding: 6px 10px; box-sizing: border-box;
  font: inherit; font-size: 14px;
  color: var(--color-bg); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 32%, transparent);
  border-radius: var(--radius-md);
}
.lp-contact__form textarea { min-height: 90px; resize: vertical; }
.lp-contact__form ::placeholder { color: var(--color-neutral-500); opacity: 1; }
.lp-contact__form input:focus-visible,
.lp-contact__form textarea:focus-visible,
.lp-contact__form select:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* 送信ボタン */
.lp-contact__form input[type="submit"],
.lp-contact__form .wpcf7-submit {
  display: block; margin: 6px auto 0;
  min-height: 48px; padding: 0 24px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 15px; line-height: 1.2; letter-spacing: .06em;
  color: var(--color-bg); background: var(--color-accent);
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer;
}
.lp-contact__form .wpcf7-submit:hover { background: var(--color-accent-600); }
.lp-contact__form .wpcf7-submit:active { background: var(--color-accent-700); }

/* 同意チェックボックス。
   上の「.wpcf7-form label」は項目名（お名前など）向けの指定なので、
   役割の違うこのラベルは色・字間を戻し、チェックボックスと文字を横一列に揃える。 */
.lp-contact__form .wpcf7-acceptance label {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 0;
  font-size: 15px; line-height: 1.7; letter-spacing: .04em;
  color: var(--color-bg);
  cursor: pointer;
}
.lp-contact__form .wpcf7-acceptance input[type="checkbox"] {
  flex: none; width: 16px; height: 16px; margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
/* Contact Form 7 が付ける左余白を打ち消す */
.lp-contact__form .wpcf7-list-item { margin: 0; }

/* 送信結果・エラーの表示 */
.lp-contact__form .wpcf7-response-output {
  margin: 0; padding: 12px 16px;
  font-size: 14px; line-height: 1.8; text-align: center;
  border-color: color-mix(in srgb, var(--color-neutral-100) 32%, transparent);
}
.lp-contact__form .wpcf7-not-valid-tip { font-size: 13px; color: var(--color-accent-2-400); }
.lp-contact__form .wpcf7-spinner { margin: 0 auto; }

/* --------------------------------------------------------------------------
   13. フッター
   -------------------------------------------------------------------------- */
.lp-footer { padding: 64px 40px 52px; text-align: center; color: var(--color-bg); }
.lp-footer__name {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: .06em;
  color: var(--color-bg);
}
.lp-footer__romaji { margin-top: 12px; font-size: 11px; letter-spacing: .34em; }
.lp-footer__social { display: flex; justify-content: center; margin-top: 30px; }
.lp-footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; color: var(--color-bg);
}
.lp-footer__copy {
  margin-top: 22px;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: .08em; opacity: .7;
}

/* --------------------------------------------------------------------------
   14. アニメーション定義
   -------------------------------------------------------------------------- */
/* 流れる文字 */
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lp-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* --------------------------------------------------------------------------
   15. スマホ・タブレット（980px 以下）
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .lp-pad { padding-left: 22px; padding-right: 22px; }
  .lp-tight { padding-top: 64px; padding-bottom: 64px; }

  /* 1列に畳む段組み */
  .lp-grid { grid-template-columns: 1fr; gap: 30px; }
  /* 2列で残す段組み（写真タイル） */
  .lp-grid-2 { grid-template-columns: 1fr 1fr; row-gap: 0; }

  .lp-marquee { padding-top: 4px; padding-bottom: 4px; }

  /* ナビをハンバーガーに切り替える */
  .lp-nav { display: none; }
  .lp-burger { display: flex; margin-right: -12px; height: 32px; }
  .lp-header { padding: 12px 18px; }

  .lp-hero { height: 88vh; min-height: 560px; padding: 0; --lp-tag-w: clamp(330px, 41vw, 630px); }
  .lp-hero__tagline { bottom: 40px; }
  .lp-hero__logo { width: min(92vw, 560px); }
  /* デザインのままだと右下のキャッチコピーがロゴに重なって読めなくなるので、
     クマとロゴはキャッチコピーの上側（下端から 150px = コピーの高さ + 40px）に収め、
     背の低い画面ではクマを画面の高さに合わせて縮める。 */
  .lp-hero__copy { top: 0; bottom: 150px; padding: 76px 22px 0; transform: translateY(-1.5vh); }
  .lp-hero__mascot { width: min(340px, 40vh); }

  /* 写真ストリップは2列×2段。小麦・いちご／チョコレート・生クリーム の順に並べ替える */
  .lp-strip > :nth-child(2) { order: 3; }
  .lp-strip > :nth-child(3) { order: 4; }
  .lp-strip > :nth-child(4) { order: 2; }

  /* メニューは1列。テキスト→写真の順に読めるよう並び替える */
  .lp-menu-grid { grid-template-columns: 1fr; }
  .lp-menu-grid > :nth-child(1) { order: 1; }
  .lp-menu-grid > :nth-child(2) { order: 2; }
  .lp-menu-grid > :nth-child(4) { order: 3; }
  .lp-menu-grid > :nth-child(3) { order: 4; }
  .lp-menu-grid > :nth-child(5) { order: 5; }
  .lp-menu-grid > :nth-child(6) { order: 6; }
  .lp-menu__panel { margin-top: 40px; }

  .lp-ig-grid { row-gap: 30px; }
  .lp-lineup-strip { margin-top: 64px; }
  .lp-season-list { padding-left: 0; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; }

  /* 見出し側に持たせた上余白は、スマホではセクション側（.lp-tight の 64px）に任せる */
  .lp-extra__head { padding-top: 0; }
}