@charset "UTF-8";

#kobe {
    padding-top: 1.15rem;
}
/* ==========================================================================
   BORDER BREAK!! in HDC KOBE  LP
   --------------------------------------------------------------------------
   ・サイト共通の common.css（hdc.asahi.co.jp）の上に読み込む前提
   ・rem の基準は common.css に準拠
       1440px以上      : 1rem = 100px（デザイン px ÷ 100 = rem）
       768〜1439px     : 1rem = 6.944vw（1440px 基準で伸縮）
       767px以下（SP） : 1rem = 26.67vw（375px 基準で 1rem = 100px）
   ・クラス名は common.css との衝突を避けるため「lp-」接頭辞の BEM 形式
   ・LP用のスタイルは main.lp-main 内に限定（ヘッダー・フッターは common.css のまま）

   目次
     01. 変数
     02. ベース / common.css の上書き
     03. ユーティリティ
     04. LPメニュー（右上の鉢アイコン）
     05. MV ／ 植物フレームの固定エリア
     06. ページ内ナビ
     07. 共通パーツ（見出し・ボタン・バッジ など）
     08. INFORMATION
     09. SHOP
     10. PRESENT
     11. RALLY
     12. ACCESS
   ========================================================================== */


/* ==========================================================================
   01. 変数
   ========================================================================== */
:root {
  /* カラー */
  --c-green: #c3d552;
  --c-main: #004348;
  --c-pink: #ce435d;
  --c-red: #d32d25;
  --c-text: #231815;
  --c-white: #fff;

  /* フォント */
  /* 基本は Noto Sans JP（英数字も含む）。
     ポイントになる英数字（英字見出し・日付・TEL など）だけ --ff-en で Lexend にする
     ※ --ff-en 内の日本語は自動的に Noto Sans JP で表示される */
  --ff-ja: "Noto Sans JP", "游ゴシック体", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --ff-en: "Lexend", var(--ff-ja);
  --ff-access: "Zen Kaku Gothic New", var(--ff-ja); /* ACCESS セクション用 */

  /* サイト共通ヘッダーの高さ（初期値。script.js で実際の高さに上書き） */
  --header-h: 1.7rem;

  /* 点線（ドット）
     background: var(--dot-bg); で 2px の点を 4px 間隔に並べる。
     要素の高さ（幅）を --dot-line にすると3列、--dot-pitch の半分で1列になる。
     SP は点の大きさ・間隔を半分にする（デザインに合わせて細かく） */
  --dot: radial-gradient(circle, var(--c-main) 1px, transparent 1.5px);
  --dot-pitch: 4px;
  --dot-line: 10px;
  --dot-bg: var(--dot) calc(var(--dot-pitch) / -4) calc(var(--dot-pitch) / -4) / var(--dot-pitch) var(--dot-pitch);

  --transition: .3s ease;
}

@media (max-width: 767px) {
  :root {
    --header-h: 1.12rem;
    --dot: radial-gradient(circle, var(--c-main) .5px, transparent .8px);
    --dot-pitch: 2px;
    --dot-line: 5px;
  }
}


/* ==========================================================================
   02. ベース / common.css の上書き
   ========================================================================== */
/* common.css の overflow:hidden は position: sticky（MVのパララックス）を
   無効にしてしまうため、はみ出しの非表示はそのままに clip へ置き換える */
body,
#main {
  overflow: clip;
}

/* common.css の「#header + * { margin-top }」「#main { padding-top }」を
   打ち消すため ID で指定（本番の #wrapper は header.php が出すので .lp は付かない） */
#wrapper {
  margin-top: 0;
}

/* 本番では header.php がパンくずを出すため非表示にする */
.topicPath {
  display: none;
}

#main.lp-main {
  padding-top: 0;
}

/* ヘッダー下の余白を実際のヘッダー高さに合わせる
   （ヘッダーのサブナビを外したことで common.css の値と差が出るため） */
body#kobe {
  padding-top: var(--header-h);
}

/* common.css／common.js の「loading="lazy" の画像をスクロールでフェードイン」を
   LP内では無効にする（遅延読み込み自体は有効のまま） */
#main.lp-main img[loading="lazy"] {
  opacity: 1;
  transition: none;
}

/* LP本体（フッターなど共通部分に影響しないよう main に限定） */
.lp-main {
  color: var(--c-main);
  font-family: var(--ff-ja);
  font-size: .16rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
}

:where(.lp-main) *,
:where(.lp-main) *::before,
:where(.lp-main) *::after {
  box-sizing: border-box;
}

:where(.lp-main) a {
  color: inherit;
  text-decoration: none;
}

/* 文中のリンク（Instagram のアカウント名など） */
.lp-link {
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: opacity var(--transition);
}

.lp-link:hover {
  opacity: .7;
}

:where(.lp-main) img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

:where(.lp-main) figure {
  margin: 0;
}

:where(.lp-main) ul,
:where(.lp-main) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.lp-main) em {
  font-style: normal;
}

.lp-container {
  max-width: 12.4rem;
  margin: 0 auto;
  padding: 0 .2rem;
}

@media (max-width: 767px) {
  .lp-container {
    padding: 0 .125rem;
  }
}


/* ==========================================================================
   03. ユーティリティ
   ========================================================================== */
.u-sp {
  display: none;
}

@media (max-width: 767px) {
  .u-pc {
    display: none;
  }

  .u-sp {
    display: inline;
  }
}

/* スクリーンリーダー用（視覚的に非表示） */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   04. LPメニュー（右上の鉢アイコン）
   ========================================================================== */
/* --- 開閉ボタン ---
   htdocs_動き の .hamburger-menu と同じ構成：
   ・鉢の形は背景画像（通常：menu-btn.svg ／ hover・開いた時：menu-btn-active.svg）
   ・中の線は CSS（.lp-menu__bar と ::before / ::after）で「≡ → ×」にアニメーション
   ・サイズはボタン幅 --w を基準に算出（画像は 61×81） */
.lp-menu__btn {
  --w: .61rem;
  --bar-w: calc(var(--w) * 26 / 61);  /* 線の長さ */
  --bar-gap: calc(var(--w) * 7 / 61); /* 線の間隔 */

  position: fixed;
  top: calc(var(--header-h) + .35rem);
  right: .5rem;
  z-index: 92;
  width: var(--w);
  height: calc(var(--w) * 81 / 61);
  padding: 0;
  border: 0;
  background: url(../img/menu-btn.svg) center / 100% 100% no-repeat;
  cursor: pointer;
  /* 画面の高さの半分までスクロールしたら表示（.is-visible は script.js で付与） */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transition), visibility var(--transition);
}

.lp-menu.is-visible .lp-menu__btn,
.lp-menu.is-open .lp-menu__btn {
  visibility: visible;
  opacity: 1;
}

.lp-menu.is-open .lp-menu__btn {
  background-image: url(../img/menu-btn-active.svg);
}

@media (hover: hover) {
  .lp-menu__btn:hover {
    background-image: url(../img/menu-btn-active.svg);
  }
}

/* 線（中央）※鉢の器部分の中心に配置 */
.lp-menu__bar,
.lp-menu__bar::before,
.lp-menu__bar::after {
  position: absolute;
  height: 1px;
  background: #000;
}

.lp-menu__bar {
  top: 69%;
  left: calc(50% - var(--bar-w) / 2);
  width: var(--bar-w);
  transition: background 0ms 300ms;
}

.lp-menu__bar::before,
.lp-menu__bar::after {
  content: "";
  right: 0;
}

/* 上の線 */
.lp-menu__bar::before {
  top: calc(var(--bar-gap) * -1);
  width: 100%;
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms cubic-bezier(.23, 1, .32, 1);
}

/* 下の線（短め・右寄せ） */
.lp-menu__bar::after {
  top: var(--bar-gap);
  width: 62%;
  transition: top 300ms 300ms cubic-bezier(.23, 1, .32, 1), width 300ms 300ms, transform 300ms cubic-bezier(.23, 1, .32, 1);
}

/* 開いた時：中央の線を消し、上下の線を重ねて回転させ「×」に */
.lp-menu.is-open .lp-menu__bar {
  background: transparent;
}

.lp-menu.is-open .lp-menu__bar::before,
.lp-menu.is-open .lp-menu__bar::after {
  top: 0;
  width: 100%;
}

.lp-menu.is-open .lp-menu__bar::before {
  transform: rotate(-45deg);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
}

.lp-menu.is-open .lp-menu__bar::after {
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(.23, 1, .32, 1), width 300ms, transform 300ms 300ms cubic-bezier(.23, 1, .32, 1);
}

/* --- パネル --- */
.lp-menu__panel {
  position: fixed;
  top: var(--header-h);
  right: 0;
  z-index: 91;
  width: 5rem;
  height: calc(100vh - var(--header-h));
  padding: 1.05rem 0 .8rem;
  overflow-y: auto;
  background: var(--c-green);
  box-shadow: -.1rem 0 .3rem rgba(0, 0, 0, .15);
  /* ベースの .main-menu（jQuery の fadeIn / fadeOut 500ms）と同じフェード */
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s ease, visibility .5s;
}

.lp-menu.is-open .lp-menu__panel {
  visibility: visible;
  opacity: 1;
}

.lp-menu__logo {
  width: 3.1rem;
  margin: 0 auto;
}

.lp-menu__list {
  width: 2.62rem;
  margin: .96rem auto 0;
}

.lp-menu__list li {
  position: relative;
  padding-top: var(--dot-line);
}

.lp-menu__list li::before,
.lp-menu__list li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--dot-line);
  background: var(--dot-bg);
}

.lp-menu__list li::before {
  top: 0;
}

.lp-menu__list li:last-child {
  padding-bottom: var(--dot-line);
}

.lp-menu__list li:last-child::after {
  bottom: 0;
}

.lp-menu__link {
  display: block;
  padding: .2rem 0 .22rem;
  text-align: center;
  line-height: 1.2;
  transition: opacity var(--transition);
}

.lp-menu__en {
  font-family: var(--ff-en);
  display: block;
  font-size: .3rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.lp-menu__ja {
  display: block;
  margin-top: .06rem;
  font-size: .13rem;
  font-weight: 700;
  letter-spacing: .1em;
}

@media (hover: hover) {
  .lp-menu__link:hover {
    opacity: .7;
  }
}

@media (max-width: 767px) {
  /* SPは特設ページ（/kobe/specialevent/2610_15tekutekupan/）の .hdc-header と同じ動き：
     開くとボタンとパネルが 0.5秒で上へ 0.6rem 移動しながら、パネルがフェードイン。
     パネルはサイトヘッダーの上に全画面で重ねる */
  .lp-menu__btn {
    --w: .305rem;

    top: .85rem;
    right: .25rem;
    z-index: 1001;
    transition: top .5s ease, opacity var(--transition), visibility var(--transition);
  }

  .lp-menu.is-open .lp-menu__btn {
    top: .25rem;
  }

  .lp-menu__panel {
    top: .6rem;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: .64rem 0 .6rem;
    box-shadow: none;
    transition: top .5s ease, opacity .5s ease, visibility .5s;
  }

  .lp-menu.is-open .lp-menu__panel {
    top: 0;
  }

  .lp-menu__logo {
    width: 1.64rem;
  }

  .lp-menu__list {
    width: 1.31rem;
    margin-top: .47rem;
  }

  .lp-menu__link {
    padding: .11rem 0 .09rem;
  }

  .lp-menu__en {
    font-size: .14rem;
  }

  .lp-menu__ja {
    margin-top: .04rem;
    font-size: .065rem;
  }
}


/* ==========================================================================
   05. MV ／ 植物フレームの固定エリア
   --------------------------------------------------------------------------
   .lp-stage（MV〜RALLY）の間、植物フレームを画面に固定し、
   ロゴ・イントロ・各セクションがその上を流れていくパララックス表現。
   ・フレームは position: sticky で固定（margin-bottom をマイナスにして後続と重ねる）
   ・フレームの大きさはデザインと同じ比率（横幅の83.3%）。ただし画面の高さが足りない場合は、
     フレーム全体が画面（ヘッダーの下）に収まるまで縮める（ロゴも同じ比率で縮む）
   ・スクロールし始めからヘッダー直下に固定する
   ・コンテンツは背景を持たず透過（白いページ内ナビのみフレームを覆う）
   ========================================================================== */
.lp-stage {
  --gap: 0px;                            /* フレーム上の余白 */
  /* フレームの表示幅：1600 / 1920。画面が低い場合はフレーム全体が収まる幅まで縮める */
  --fw: min(83.333vw, calc((100vh - var(--header-h)) / .9375));
  --fh: calc(var(--fw) * 3000 / 3200);   /* フレームの表示高さ */
  --frame-box-h: calc(var(--gap) + var(--fh));

  position: relative;
  background: var(--c-green);
}

/* --- 植物フレーム（固定） --- */
.lp-stage__frame {
  position: sticky;
  /* スクロールし始めからヘッダー直下に固定 */
  top: var(--header-h);
  z-index: 0;
  height: var(--frame-box-h);
  margin-bottom: calc(var(--frame-box-h) * -1);
  pointer-events: none;
}

.lp-stage__frame img {
  position: absolute;
  top: var(--gap);
  left: 50%;
  width: var(--fw);
  max-width: none; /* SPは画面幅より大きく表示するため、リセットの max-width: 100% を解除 */
  transform: translateX(-50%);
}

/* --- MV --- */
.lp-mv {
  position: relative;
  z-index: 1;
}

/* ロゴ：1画面目のフレーム内に配置（高さはフレーム下端まで） */
.lp-mv__visual {
  position: relative;
  height: calc(var(--gap) + var(--fh));
}

/* デザイン上のフレーム（1600×1500）内での位置：左 428 / 上 372 / 幅 794 */
.lp-mv__logo {
  position: absolute;
  top: calc(var(--gap) + var(--fw) * .2325);
  left: calc(50% - var(--fw) * .2325);
  width: calc(var(--fw) * .496);
  margin: 0;
}

/* --- イントロ（日時・リード文） --- */
.lp-mv__intro {
  margin-bottom: 1.3rem;
  padding: .4rem .2rem 0;
  text-align: center;
}

.lp-mv__date {
  display: inline-block;
}

.lp-mv__days {
  font-family: var(--ff-en);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.lp-mv__month {
  margin-top: .08rem;
  font-size: .65rem;
  letter-spacing: -0.05em;
}

.lp-mv__slash {
  margin-left: .02rem;
  font-weight: 400;
}

.lp-mv__day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lp-mv__dayNum {
  font-size: .9rem;
}

.lp-mv__week {
  margin-left: .1rem;
  font-size: .54rem;
  letter-spacing: .03em;
}

.lp-mv__time {
  margin-top: .12rem;
  font-size: .3rem;
  letter-spacing: 0;
}

.lp-mv__dot {
  margin: .18rem -.1rem 0 -.06rem;
  font-size: .5rem;
}

.lp-mv__place {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: .22rem;
  font-size: .36rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
}

.lp-mv__station {
  margin-left: .25rem;
  padding: 0 .12rem;
  border: 1px solid currentColor;
  font-size: .17rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .1em;
}

.lp-mv__lead {
  margin-top: .65rem;
  font-size: .4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.lp-mv__num {
  font-family: var(--ff-en);
  color: var(--c-pink);
  font-size: .68rem;
  line-height: 1;
}

.lp-mv__num span {
  font-size: .4rem;
}

.lp-mv__text {
  margin-top: .5rem;
  font-size: .22rem;
  font-weight: 500;
  line-height: 2.1;
  /* letter-spacing: .1em; */
}

@media (max-width: 767px) {
  /* SPはフレームを画面幅より少し大きく（左右の植物が少し切れる）、上に余白をとる。
     ロゴの位置・大きさはフレームに対して PC と同じ比率 */
  .lp-stage {
    --gap: .25rem;
    --fw: 106.4vw; /* 399 / 375 */
  }

  .lp-mv__intro {
    margin-bottom: .47rem;
    padding: .3rem .125rem 0;
  }

  .lp-mv__month {
    margin-top: .04rem;
    font-size: .3rem;
  }

  .lp-mv__dayNum {
    font-size: .45rem;
  }

  .lp-mv__week {
    margin-left: .05rem;
    font-size: .26rem;
  }

  .lp-mv__time {
    margin-top: .08rem;
    font-size: .15rem;
  }

  .lp-mv__dot {
    margin-top: .1rem;
    font-size: .28rem;
  }

  /* SPは「HDC神戸」の下に駅名を置く */
  .lp-mv__place {
    flex-direction: column;
    margin-top: .175rem;
    font-size: .18rem;
  }

  .lp-mv__station {
    margin: .045rem 0 0;
    padding: 0 .06rem;
    font-size: .09rem;
  }

  .lp-mv__lead {
    margin-top: .255rem;
    font-size: .19rem;
    line-height: 1.85;
  }

  .lp-mv__num {
    font-size: .35rem;
    line-height: .8; /* 行の高さが広がらないように */
  }

  .lp-mv__num span {
    font-size: .19rem;
  }

  .lp-mv__text {
    margin-top: .26rem;
    font-size: .14rem;
    line-height: 1.8;
    letter-spacing: .08em;
  }
}


/* ==========================================================================
   06. ページ内ナビ
   ========================================================================== */
.lp-nav {
  position: relative;
  z-index: 3;
  padding: .4rem .2rem .5rem;
  background: var(--c-white);
}

.lp-nav__list {
  display: flex;
  justify-content: center;
}

.lp-nav__item {
  position: relative;
  width: 2.98rem;
}

/* 区切りの点線（縦3列） */
.lp-nav__item::before,
.lp-nav__item:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--dot-line);
  background: var(--dot-bg);
}

.lp-nav__item::before {
  left: 0;
}

.lp-nav__item:last-child::after {
  right: 0;
}

.lp-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 2rem;
  /* 点線の分を除いた範囲で中央に揃える */
  padding: .38rem 0 0 var(--dot-line);
  line-height: 1.2;
  transition: opacity var(--transition);
}

.lp-nav__icon {
  width: .6rem;
  height: .42rem;
  object-fit: contain;
}

.lp-nav__en {
  font-family: var(--ff-en);
  margin-top: .18rem;
  margin-right: -.03em; /* 字間の末尾の余白を打ち消して中央に揃える */
  font-size: .3rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.lp-nav__ja {
  margin-top: .06rem;
  margin-right: -.1em;
  font-size: .15rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.lp-nav__item:last-child .lp-nav__link {
  padding-right: var(--dot-line);
}

@media (hover: hover) {
  .lp-nav__link:hover {
    opacity: .7;
  }
}

@media (max-width: 767px) {
  /* SPは2×2：中央に縦の点線、2行の間に横の点線（交差部分は空ける） */
  .lp-nav {
    padding: .145rem .095rem .095rem;
  }

  .lp-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: .19rem;
  }

  .lp-nav__item {
    width: auto;
  }

  .lp-nav__item::before,
  .lp-nav__item:last-child::after {
    content: none;
  }

  /* 縦の点線（左列の右端＝中央） */
  .lp-nav__item:nth-child(odd)::after {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--dot-line) / -2);
    bottom: 0;
    width: var(--dot-line);
    background: var(--dot-bg);
  }

  /* 横の点線（1行目の下） */
  .lp-nav__item:nth-child(-n+2)::before {
    content: "";
    top: auto;
    bottom: calc((.19rem + var(--dot-line)) / -2);
    left: 0;
    width: calc(100% - .09rem);
    height: var(--dot-line);
  }

  .lp-nav__item:nth-child(2)::before {
    left: .09rem;
  }

  .lp-nav__link,
  .lp-nav__item:last-child .lp-nav__link {
    height: 1.56rem;
    padding: .29rem 0 0;
  }

  /* 中央の点線の分を除いた範囲で中央に揃える */
  .lp-nav__item:nth-child(odd) .lp-nav__link {
    padding-right: calc(var(--dot-line) / 2);
  }

  .lp-nav__item:nth-child(even) .lp-nav__link {
    padding-left: calc(var(--dot-line) / 2);
  }

  .lp-nav__icon {
    width: .38rem;
    height: .3rem;
  }

  .lp-nav__en {
    margin-top: .14rem;
    font-size: .19rem;
  }

  .lp-nav__ja {
    margin-top: .05rem;
    margin-right: -.05em;
    font-size: .1rem;
    letter-spacing: .05em;
  }
}


/* ==========================================================================
   07. 共通パーツ
   ========================================================================== */
/* --- セクション ---
   余白は下側に持たせる（上に持たせるとアンカー移動時に見出しの上が空きすぎるため） */
.lp-contents {
  position: relative;
  z-index: 1;
  padding-top: 2rem;
}

.lp-section {
  padding-bottom: 2.6rem;
}

.lp-section:last-child {
  padding-bottom: 2.1rem;
}

/* アンカーリンクの着地位置（固定ヘッダー分＋少しの余白） */
.lp-section,
.lp-access {
  scroll-margin-top: calc(var(--header-h) + .5rem);
}

@media (max-width: 767px) {
  .lp-contents {
    padding-top: .72rem;
  }

  .lp-section {
    padding-bottom: 1.5rem;
  }

  .lp-section:last-child {
    padding-bottom: .8rem;
  }

  /* SPのサイトヘッダーは固定されない（スクロールで流れる）ため、ヘッダー分はずらさない */
  .lp-section,
  .lp-access {
    scroll-margin-top: .3rem;
  }
}

/* --- 背景パネル ---
   固定された植物フレームの上でも文字が読めるよう、.lp-container の範囲に
   四辺をぼかした緑の面を敷く（img/bg.png と同じく「長方形をぼかした」見た目）。
   ・緑の面を filter: blur でぼかし、角まで自然に溶けるようにする
   ・四辺とも、ぼかしの分だけ要素から少しはみ出させる（端の文字やアイコンが薄くならないように）
   ・--panel-blur：ぼかしの強さ（未指定時は var() の第2引数の値） */
/* 詳細度0（:where）にして、要素側の position 指定（例：ロゴの absolute）を優先させる */
:where(.lp-panel) {
  position: relative;
  isolation: isolate; /* ::before を要素内の最背面に留める */
}

.lp-panel::before {
  --blur: var(--panel-blur, .4rem);

  content: "";
  position: absolute;
  inset: calc(var(--blur) * -1);
  z-index: -1;
  background: var(--c-green);
  filter: blur(var(--blur));
  pointer-events: none;
}

@media (max-width: 767px) {
  .lp-panel {
    --panel-blur: .15rem;
  }

  /* SPはコンテナが画面幅いっぱいのため、はみ出さずに一回り小さくして植物を見せる
     （左右は画面端から少し内側、上下は要素の範囲まで） */
  .lp-panel::before {
    inset: 0 .1rem;
  }
}

/* --- セクション見出し --- */
.lp-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto .6rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* 下線の点線（横3列） */
.lp-heading::after {
  content: "";
  width: 100%;
  max-width: 9.02rem;
  height: var(--dot-line);
  margin-top: .32rem;
  background: var(--dot-bg);
}

.lp-heading__icon {
  width: .6rem;
  height: .42rem;
  margin-bottom: .12rem;
  object-fit: contain;
}

.lp-heading__en {
  font-family: var(--ff-en);
  font-size: .46rem;
  letter-spacing: .03em;
}

.lp-heading__ja {
  margin-top: .1rem;
  font-size: .15rem;
  letter-spacing: .1em;
}

/* アイコン・点線なし（ACCESS） */
.lp-heading--simple::after {
  content: none;
}

@media (max-width: 767px) {
  .lp-heading {
    margin-bottom: .26rem;
  }

  .lp-heading::after {
    max-width: 2.5rem;
    margin-top: .14rem;
  }

  .lp-heading__icon {
    width: .38rem;
    height: .3rem;
    margin-bottom: .045rem;
  }

  .lp-heading__en {
    font-size: .215rem;
  }

  .lp-heading__ja {
    margin-top: .06rem;
    font-size: .11rem;
    letter-spacing: .03em;
  }
}

/* --- キャッチ（白いマーカー） --- */
.lp-catch {
  font-size: .36rem;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .03em;
  text-align: center;
}

.lp-catch__line {
  padding: 0 .15rem;
  background: linear-gradient(transparent 58%, var(--c-white) 58%, var(--c-white) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lp-catch__em {
  color: var(--c-pink);
}

/* キャッチ内の数字（ポイント）は Lexend */
.lp-catch__num {
  font-family: var(--ff-en);
}

/* --- リード文 --- */
.lp-lead {
  margin-top: .35rem;
  font-size: .18rem;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: .1em;
  text-align: center;
}

@media (max-width: 767px) {
  .lp-catch {
    font-size: .175rem;
    line-height: 1.7;
  }

  .lp-catch__line {
    padding: 0 .08rem;
  }

  .lp-lead {
    margin-top: .15rem;
    font-size: .13rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .05em;
    font-feature-settings: "palt"; /* デザインに合わせ、約物・かなを詰める */
  }
}

/* --- 注釈 --- */
.lp-notes {
  font-size: .15rem;
  line-height: 1.8;
  letter-spacing: .05em;
}

.lp-notes--center {
  width: fit-content;
  margin: .3rem auto 0;
}

/* PCは注釈を2つずつ1行に並べる */
@media (min-width: 768px) {
  .lp-notes--pair li {
    display: inline;
  }

  .lp-notes--pair li:nth-child(odd)::after {
    content: "\3000"; /* 全角スペース */
  }

  .lp-notes--pair li:nth-child(even)::after {
    content: "\A";
    white-space: pre;
  }
}

@media (max-width: 767px) {
  /* SPは折り返した行を「※」の後ろにそろえる */
  .lp-notes {
    font-size: .105rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .02em;
    font-feature-settings: "palt";
  }

  .lp-notes li {
    padding-left: 1em;
    text-indent: -1em;
  }

  .lp-notes--center {
    margin-top: .23rem;
  }
}

/* --- ボタン（矢印付きの角丸） --- */
.lp-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  max-width: 100%;
  height: .5rem;
  padding: 0 .5rem;
  border: 1px solid var(--c-main);
  border-radius: .25rem;
  background: var(--c-white);
  color: var(--c-main);
  font-size: .18rem;
  font-weight: 700;
  letter-spacing: .15em;
  transition: opacity var(--transition);
}

/* 矢印（＞） */
.lp-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .3rem;
  width: .08rem;
  height: .08rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* 濃色＋三角矢印（ACCESS） */
.lp-btn--dark {
  width: 4rem;
  height: .6rem;
  border-radius: .3rem;
  background: var(--c-main);
  color: var(--c-white);
  font-size: .24rem;
}

.lp-btn--dark::after {
  right: .45rem;
  width: 0;
  height: 0;
  border: .08rem solid transparent;
  border-left: .12rem solid currentColor;
  border-right: 0;
  transform: translateY(-50%);
}

@media (hover: hover) {
  .lp-btn:hover {
    opacity: .7;
  }
}

@media (max-width: 767px) {
  /* 文字は矢印の分だけ左に寄せる */
  .lp-btn {
    width: 2.5rem;
    height: .41rem;
    padding: 0 .3rem 0 .15rem;
    border-radius: .205rem;
    font-size: .125rem;
    letter-spacing: .02em;
    white-space: nowrap;
  }

  .lp-btn--dark {
    padding: 0 .3rem;
  }

  .lp-btn::after {
    right: .17rem;
    width: .07rem;
    height: .07rem;
    border-width: 1px;
  }

  .lp-btn--dark {
    width: 2.5rem;
    height: .4rem;
    border-radius: .2rem;
    font-size: .15rem;
  }

  .lp-btn--dark::after {
    right: .25rem;
    width: 0;
    height: 0;
    border-width: .055rem 0 .055rem .08rem;
  }
}

/* --- 入場方法のご案内（バナー） --- */
.lp-guide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 5rem;
  max-width: 100%;
  height: 1.5rem;
  margin: .85rem auto 0;
  background: url(../img/guide-bg.jpg) center / cover no-repeat;
  color: var(--c-white);
}

.lp-guide__title {
  font-size: .28rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
}

.lp-guide__btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.2rem;
  height: .3rem;
  margin-top: .18rem;
  border-radius: .15rem;
  background: var(--c-main);
  font-size: .16rem;
  font-weight: 700;
  letter-spacing: .1em;
  transition: opacity var(--transition);
}

.lp-guide__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .2rem;
  width: .07rem;
  height: .07rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media (hover: hover) {
  .lp-guide__btn:hover {
    opacity: .7;
  }
}

@media (max-width: 767px) {
  .lp-guide {
    width: 2.5rem;
    height: .75rem;
    margin-top: .5rem;
  }

  .lp-guide__title {
    font-size: .15rem;
    letter-spacing: .06em;
  }

  .lp-guide__btn {
    width: 1.37rem;
    height: .185rem;
    margin-top: .08rem;
    font-size: .1rem;
    font-weight: 500;
  }

  .lp-guide__btn::after {
    right: .12rem;
    width: .045rem;
    height: .045rem;
    border-width: 1px;
  }
}

/* --- 先着バッジ（赤いギザギザ） --- */
.lp-badge {
  position: absolute;
  top: -.32rem;
  right: -.6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.45rem;
  height: 1.45rem;
  background: url(../img/badge.svg) center / contain no-repeat;
  color: var(--c-white);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
}

.lp-badge__pre,
.lp-badge__unit {
  font-size: .17rem;
}

.lp-badge__num {
  font-size: .46rem;
  line-height: 1.05;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .lp-badge {
    top: -.16rem;
    right: -.105rem;
    width: .72rem;
    height: .72rem;
  }

  .lp-badge__pre,
  .lp-badge__unit {
    font-size: .09rem;
  }

  .lp-badge__num {
    font-size: .25rem;
  }
}

/* --- 参加方法（枠付きリスト） --- */
.lp-howto {
  width: 7.5rem;
  max-width: 100%;
  margin: 1rem auto 0;
  border-bottom: 1px solid var(--c-main);
}

.lp-howto__title {
  display: flex;
  align-items: center;
  font-size: .2rem;
  font-weight: 700;
  letter-spacing: .15em;
}

/* 見出し左右の線 */
.lp-howto__title::before,
.lp-howto__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-main);
}

.lp-howto__title span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.2rem;
  height: .32rem;
  margin: 0 .15rem;
  border: 1px solid var(--c-main);
}

.lp-howto__list {
  margin: -.08rem 0 .1rem;
  padding: .35rem .3rem .3rem .65rem;
  border-right: 1px solid var(--c-main);
  border-left: 1px solid var(--c-main);
  font-size: .2rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: .08em;
}

.lp-howto__list li {
  display: flex;
  align-items: baseline;
}

/* 丸数字：デザインと同じ ❶❷❸… の文字を使う（数字の部分は抜きになり、背景の緑が見える）
   ※ @counter-style は古い Safari で使えないため、番号ごとに文字を指定する */
.lp-howto__list li::before {
  flex-shrink: 0;
  margin-right: .3em;
  color: var(--c-main);
  letter-spacing: 0;
}

.lp-howto__list li:nth-child(1)::before { content: "\2776"; }
.lp-howto__list li:nth-child(2)::before { content: "\2777"; }
.lp-howto__list li:nth-child(3)::before { content: "\2778"; }
.lp-howto__list li:nth-child(4)::before { content: "\2779"; }
.lp-howto__list li:nth-child(5)::before { content: "\277A"; }

@media (max-width: 767px) {
  .lp-howto {
    width: 2.5rem;
    margin-top: .5rem;
  }

  .lp-howto__title {
    font-size: .14rem;
    font-weight: 500;
    letter-spacing: .1em;
  }

  .lp-howto__title span {
    width: 1.35rem;
    height: .21rem;
    margin: 0 .075rem;
  }

  .lp-howto__list {
    margin: -.105rem 0 .05rem;
    padding: .3rem .1rem .2rem .2rem;
    font-size: .125rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .08em;
    font-feature-settings: "palt";
  }
}


/* ==========================================================================
   08. INFORMATION
   ========================================================================== */
.lp-info__list {
  max-width: 9rem;
  margin: .75rem auto 0;
}

.lp-info__row {
  display: flex;
  align-items: flex-start;
}

.lp-info__row + .lp-info__row {
  margin-top: .55rem;
}

.lp-info__row--center {
  align-items: center;
}

.lp-info__label {
  flex-shrink: 0;
  width: 1.6rem;
  margin: .08rem .25rem 0 0;
  background: var(--c-white);
  font-size: .18rem;
  font-weight: 500;
  line-height: .3rem;
  letter-spacing: .1em;
  text-align: center;
}

.lp-info__row--center .lp-info__label {
  margin-top: 0;
}

.lp-info__space {
  display: inline-block;
  width: 1.5em;
}

.lp-info__body {
  flex: 1;
  margin: 0;
}

.lp-info__dates {
  font-size: .22rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .03em;
}

.lp-info__num {
  font-family: var(--ff-en);
  font-size: .4rem;
  line-height: 1;
  font-weight: 600;
}

.lp-info__time {
  margin-left: .2rem;
}

.lp-info__dates + .lp-notes {
  margin-top: .15rem;
  letter-spacing: .02em;
}

/* --- TEL --- */
.lp-tel {
  font-family: var(--ff-en);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
}

.lp-tel__pre {
  font-size: .32rem;
}

.lp-tel__num {
  font-size: .46rem;
  font-weight: 600;
}

@media (max-width: 767px) {
  .lp-info__list {
    max-width: 2.5rem;
    margin-top: 0;
  }

  .lp-info__row,
  .lp-info__row--center {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-info__row + .lp-info__row {
    margin-top: .5rem;
  }

  .lp-info__label {
    width: 100%;
    margin: 0 0 .24rem;
    font-size: .14rem;
    line-height: .225rem;
  }

  .lp-info__dates {
    padding-left: .33rem;
    font-size: .15rem;
    line-height: 1.4;
    font-feature-settings: "palt";
  }

  .lp-info__dates li + li {
    margin-top: .14rem;
  }

  .lp-info__num {
    font-size: .25rem;
  }

  .lp-info__day,
  .lp-info__time {
    display: block;
  }

  .lp-info__time {
    margin: .015rem 0 0;
    font-size: .135rem;
    letter-spacing: .02em;
  }

  .lp-info__dates + .lp-notes {
    margin-top: .2rem;
    font-size: .1rem;
    letter-spacing: 0;
  }

  .lp-info__dates + .lp-notes li + li {
    margin-top: .07rem;
  }

  .lp-tel {
    text-align: center;
  }

  .lp-tel__pre {
    font-size: .16rem;
  }

  .lp-tel__num {
    font-size: .25rem;
  }
}


/* ==========================================================================
   09. SHOP
   ========================================================================== */
.lp-shop__list {
  display: grid;
  grid-template-columns: repeat(3, 3.4rem);
  justify-content: center;
  gap: .32rem .3rem;
  margin-top: .55rem;
}

.lp-shop__img {
  overflow: hidden;
  border-radius: .1rem;
  aspect-ratio: 1 / 1;
}

.lp-shop__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-shop__name {
  margin-top: .1rem;
  font-size: .18rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
}

.lp-shop__more {
  margin-top: .8rem;
  text-align: center;
}

/* 店舗一覧の下の「…and more」（その他の出店店舗のリンク先が届くまでの仮） */
.lp-shop__andmore {
  margin-top: .5rem;
  font-size: .3rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
}

.lp-shop__andmore + .lp-guide {
  margin-top: .5rem;
}

@media (max-width: 767px) {
  .lp-shop__list {
    grid-template-columns: repeat(2, 1fr);
    gap: .17rem .1rem;
    margin-top: .45rem;
  }

  .lp-shop__img {
    border-radius: .06rem;
  }

  .lp-shop__name {
    margin-top: .06rem;
    font-size: .11rem;
    font-weight: 500;
    letter-spacing: .03em;
  }

  .lp-shop__more {
    margin-top: .43rem;
  }

  .lp-shop__andmore {
    margin-top: .3rem;
    font-size: .2rem;
  }

  .lp-shop__andmore + .lp-guide {
    margin-top: .25rem;
  }

  .lp-shop__more + .lp-guide {
    margin-top: .25rem;
  }
}


/* ==========================================================================
   10. PRESENT
   ========================================================================== */
.lp-present__list {
  margin-top: 1.05rem;
}

.lp-prize {
  position: relative;
  width: 7rem;
  max-width: 100%;
  margin: 0 auto;
}

/* 景品同士の区切り（点線） */
.lp-prize + .lp-prize {
  margin-top: .75rem;
  padding-top: .75rem;
}

.lp-prize + .lp-prize::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--dot-pitch) / 2);
  background: var(--dot-bg);
}

.lp-prize__img {
  overflow: hidden;
  border-radius: .1rem;
}

.lp-prize__img img {
  width: 100%;
}

/* --- 左上の丸タグ --- */
.lp-prize__tag {
  position: absolute;
  top: -.5rem;
  left: -1rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-main);
  color: var(--c-white);
  text-align: center;
}

.lp-prize + .lp-prize .lp-prize__tag {
  top: .25rem;
}

.lp-prize__tagInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -.02vw 0 0 0;
  transform: rotate(-10deg);
}

.lp-prize__ticket {
  padding: .02rem .18rem;
  background: var(--c-white);
  color: var(--c-main);
  font-size: .18rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
}

.lp-prize__ticket + .lp-prize__ticket {
  margin-top: .08rem;
}

.lp-prize__name {
  margin-top: .1rem;
  font-size: .3rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .05em;
}

/* 2つ目のバッジ位置（区切り線の分ずらす） */
.lp-prize + .lp-prize .lp-badge {
  top: .43rem;
}

@media (max-width: 767px) {
  /* 最後が注釈なので、他のセクションより下の余白を詰める */
  .lp-present {
    padding-bottom: 1.32rem;
  }

  .lp-present__list {
    margin-top: .435rem;
  }

  .lp-prize {
    width: 3.25rem;
  }

  .lp-prize + .lp-prize {
    margin-top: .245rem;
    padding-top: .25rem;
  }

  /* 区切りの点線は見出しの点線と同じ幅 */
  .lp-prize + .lp-prize::before {
    left: calc(50% - 1.25rem);
    right: auto;
    width: 2.5rem;
  }

  .lp-prize__img {
    border-radius: .06rem;
  }

  .lp-prize__tag {
    top: -.1rem;
    left: -.1rem;
    width: 1.1rem;
    height: 1.1rem;
  }

  .lp-prize + .lp-prize .lp-prize__tag {
    top: .15rem;
  }

  .lp-prize__tagInner {
    margin: 0;
  }

  .lp-prize__ticket {
    padding: 0 .045rem;
    font-size: .084rem;
    line-height: 1.35;
  }

  .lp-prize__ticket + .lp-prize__ticket {
    margin-top: .035rem;
  }

  .lp-prize__name {
    margin-top: .05rem;
    font-size: .132rem;
    letter-spacing: .03em;
  }

  .lp-prize + .lp-prize .lp-badge {
    top: .09rem;
  }
}


/* ==========================================================================
   11. RALLY
   ========================================================================== */
.lp-rally__visual {
  position: relative;
  width: 7rem;
  max-width: 100%;
  margin: .7rem auto 0;
}

.lp-rally__img {
  overflow: hidden;
  border-radius: .1rem;
}

.lp-rally__img img {
  width: 100%;
}

/* 画像の下（左寄せ）の注釈 */
.lp-rally__note {
  margin-top: .1rem;
  font-size: .15rem;
  line-height: 1.8;
  letter-spacing: .05em;
}

@media (max-width: 767px) {
  .lp-rally__visual {
    width: 3.25rem;
    margin-top: .46rem;
  }

  .lp-rally__visual .lp-badge {
    top: -.31rem;
  }

  .lp-rally__img {
    border-radius: .06rem;
  }

  .lp-rally__note {
    margin-top: .06rem;
    font-size: .105rem;
    line-height: 1.45;
    letter-spacing: .02em;
    font-feature-settings: "palt";
  }
}


/* ==========================================================================
   12. ACCESS
   ========================================================================== */
.lp-access {
  position: relative;
  z-index: 3;
  padding: 1.5rem 0 1.1rem;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--ff-access);
}

.lp-access .lp-heading {
  margin-bottom: .55rem;
  color: var(--c-main);
  font-family: var(--ff-ja); /* 見出しは他セクションと同じ書体（ACCESS 内の Zen Kaku Gothic New を打ち消す） */
}

.lp-access .lp-heading__ja {
  margin-top: .15rem;
}

.lp-access__img {
  width: 8.45rem;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 845 / 430;
}

.lp-access__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-access__body {
  margin-top: .7rem;
  text-align: center;
}

.lp-access__logo img {
  width: auto;
  height: .48rem;
}

.lp-access__station {
  display: inline-block;
  min-width: 2.55rem;
  margin-top: .15rem;
  padding: 0 .2rem;
  border: 1px solid currentColor;
  font-size: .22rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
}

.lp-access__address {
  margin-top: .6rem;
  font-size: .2rem;
  letter-spacing: .2em;
}

.lp-access__tel {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: .1rem;
  line-height: 1.2;
}

.lp-access__telLabel {
  margin-right: .2rem;
  font-size: .16rem;
  letter-spacing: .1em;
}

.lp-access__telNum {
  font-size: .36rem;
  font-weight: 600;
  letter-spacing: .05em;
}

.lp-access__telNum a {
  font-size: .46rem;
}

.lp-access__text {
  font-size: .2rem;
  line-height: 1.85;
  letter-spacing: -.01em;
  max-width: 41%;
  text-align: left;
  margin: .5rem auto 0;
  text-align: justify;
}

.lp-access__text strong {
  color: var(--c-red);
  font-weight: 700;
}

.lp-access__more {
  margin-top: .55rem;
}

@media (max-width: 767px) {
  .lp-access {
    padding: .62rem 0 .65rem;
  }

  .lp-access .lp-heading {
    margin-bottom: .2rem;
  }

  .lp-access .lp-heading__ja {
    margin-top: .06rem;
  }

  .lp-access__img {
    width: 3.25rem;
  }

  .lp-access__body {
    margin-top: .36rem;
  }

  .lp-access__logo img {
    height: .34rem;
  }

  .lp-access__station {
    min-width: 1.755rem;
    margin-top: .13rem;
    padding: 0;
    font-size: .145rem;
    line-height: 1.55;
  }

  .lp-access__address {
    margin-top: .33rem;
    font-size: .125rem;
    letter-spacing: .16em;
  }

  .lp-access__tel {
    margin-top: .02rem;
  }

  .lp-access__telLabel {
    margin-right: .1rem;
    font-size: .115rem;
  }

  .lp-access__telNum {
    font-size: .21rem;
  }

  .lp-access__telNum a {
    font-size: .285rem;
  }

  .lp-access__text {
    /* 改行位置は HTML の <br class="u-sp"> で指定 */
    width: fit-content;
    max-width: 100%;
    margin-top: .26rem;
    font-size: .12rem;
    line-height: 1.875;
    letter-spacing: .04em;
    font-feature-settings: "palt";
    text-align: left;
  }

  .lp-access__more {
    margin-top: .31rem;
  }
}

#footer {
    margin-top: 0 !important;
}
.globalNavi__list {
    display: none !important;
}