/* ==========================================================
   lp.css
   LP（ファーストビューの下に続くイベント紹介ページ）のデザイン土台。
   コンセプト：「晴れた高円寺で手に入れる、一冊の古い散歩手帖」

   ※ すべて #lp（下のLP）と #mv-title（ファーストビュー内のタイトル
     カード）の中だけに効く書き方にしています。
     ゲーム画面（雨の画面・パズル）には影響しません。
   ※ タイトルカードとLPは、最初の雨の状態から常に表示されています
     （ゲームの進行で変わるのは、ファーストビューの天候・背景などの演出だけ）
========================================================== */


/* ==========================================================
   デザインの基本値（色・フォント・余白）
   色や大きさを変えたいときは、まずここを変更します
========================================================== */

#lp,
#omikuji-modal,
#site-header,
#site-menu,
#mv-title {
  /* 配色 */
  --lp-paper:      #f2e6cc;   /* 生成り（紙） */
  --lp-paper-deep: #e6d3ac;   /* 濃い紙（カード・表） */
  --lp-green:      #1f4a44;   /* 深緑 */
  --lp-red:        #9b3a24;   /* 赤茶 */
  --lp-ink:        #2a2420;   /* 墨（本文） */
  --lp-mustard:    #c8952e;   /* 芥子（細い飾り） */
  --lp-ink-soft:   #5a4f45;   /* 補足文字 */
  --lp-line:       rgba(42, 36, 32, 0.28); /* 細い線 */

  /* フォント */
  --lp-font-mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --lp-font-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

  /* 幅（ファーストビューと同じ列幅） */
  --lp-w: min(100vw, var(--mv-max-w, 480px));
  --lp-pad-x: 20px;

  /* 紙の質感（画像を使わずCSSで作る細かなザラつき） */
  --lp-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .14 .5 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================
   LP 全体
========================================================== */

#lp {
  position: relative;
  z-index: 25;                    /* 雨(21)より手前、人物(30)より奥 */
  width: var(--lp-w);
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom);
  color: var(--lp-ink);
  font-family: var(--lp-font-gothic);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  word-break: auto-phrase;        /* 対応ブラウザでは、日本語を文節の区切りで折り返す */
  background-color: var(--lp-paper);
  background-image:
    var(--lp-noise),
    radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.35), transparent 55%),
    radial-gradient(ellipse at 85% 60%, rgba(150, 110, 60, 0.10), transparent 60%);
  -webkit-text-size-adjust: 100%;
}

#lp *,
#lp *::before,
#lp *::after {
  box-sizing: border-box;
}

#lp img {
  display: block;
  max-width: 100%;
  height: auto;
}

#lp a {
  color: inherit;
}

#lp p {
  margin: 0 0 1em;
}


/* ==========================================================
   ファーストビュー → LP のつなぎ（紙のギザギザの縁だけ、控えめに）
========================================================== */

#lp .lp-edge {
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10'%3E%3Cpath d='M0 10V5l8 2 7-3 9 3 7-4 9 3 8-1 9 3 9-4 8 3 9-2 9 3 8-4 9 3 9-2 9 3 8-3 9 2 8-3 9 3 9-1 8 3 9-4 8 2 5 0v5z' fill='%23f2e6cc'/%3E%3C/svg%3E") repeat-x left bottom / 200px 10px;
}



/* ==========================================================
   セクション共通
========================================================== */

#lp .lp-section {
  position: relative;
  padding: 56px var(--lp-pad-x);
}

#lp .lp-section + .lp-section {
  border-top: 1px dashed var(--lp-line);
}

/* 深緑のセクション（ストーリーなど） */
#lp .lp-section--green {
  color: var(--lp-paper);
  background-color: var(--lp-green);
  background-image: var(--lp-noise);
  border-top: none;
}

#lp .lp-section--green + .lp-section {
  border-top: none;
}

/* 濃い紙のセクション（同じ地が続く単調さを避け、リズムをつける） */
#lp .lp-section--alt {
  background-color: #eadbb9;
  background-image: var(--lp-noise);
}

/* 地の色が変わる境目：紙のギザギザの縁（その区画の色で、上の区画に少し重ねる）
   ファーストビュー下端の縁と同じ形で、「紙をめくって次のページへ」進む感覚にする */
#lp .lp-section--torn {
  border-top: none;
}

/* 濃い紙のセクションでは、カードを明るい紙にしてくっきり見せる */
#lp .lp-section--alt .lp-card {
  background-color: #f7eedb;
}

/* 生成りのセクションでも縁が見えるよう、地の色をはっきり持たせる */
#lp .lp-section--torn:not(.lp-section--alt):not(.lp-section--green) {
  background-color: var(--lp-paper);
  background-image: var(--lp-noise);
}

#lp .lp-section--torn::before,
#lp .lp-footer::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 10px;
  background-color: inherit;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10'%3E%3Cpath d='M0 10V5l8 2 7-3 9 3 7-4 9 3 8-1 9 3 9-4 8 3 9-2 9 3 8-4 9 3 9-2 9 3 8-3 9 2 8-3 9 3 9-1 8 3 9-4 8 2 5 0v5z'/%3E%3C/svg%3E") repeat-x left bottom / 200px 10px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='10' viewBox='0 0 200 10'%3E%3Cpath d='M0 10V5l8 2 7-3 9 3 7-4 9 3 8-1 9 3 9-4 8 3 9-2 9 3 8-4 9 3 9-2 9 3 8-3 9 2 8-3 9 3 9-1 8 3 9-4 8 2 5 0v5z'/%3E%3C/svg%3E") repeat-x left bottom / 200px 10px;
}

/* 本文を作る前の仮置き（STEP I で本文に置き換える） */
#lp .lp-placeholder {
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed var(--lp-line);
  color: var(--lp-ink-soft);
  font-size: 13px;
  text-align: center;
}

#lp .lp-section--green .lp-placeholder,
#lp .lp-footer .lp-placeholder {
  border-color: rgba(242, 230, 204, 0.35);
  color: rgba(242, 230, 204, 0.75);
}


/* ==========================================================
   見出し（英字ラベル＋和文＋手描き風の下線）
========================================================== */

#lp .lp-heading {
  margin: 0 0 28px;
}

#lp .lp-heading__en {
  display: block;
  margin-bottom: 2px;
  color: var(--lp-red);
  font-family: var(--lp-font-mincho);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2em;
}

#lp .lp-heading__ja {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 12px;
  font-family: var(--lp-font-mincho);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

/* 手描き風の破線（少し波打つ線） */
#lp .lp-heading__ja::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: 0;
  width: min(100%, 150px);
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='8' viewBox='0 0 150 8'%3E%3Cpath d='M1 5c12-3 22 2 34-1s22 2 34-1 24 2 36-1 26 2 44-1' fill='none' stroke='%232a2420' stroke-width='2.2' stroke-linecap='round' stroke-dasharray='7 5'/%3E%3C/svg%3E") no-repeat left center / 150px 8px;
}

#lp .lp-section--green .lp-heading__en {
  color: var(--lp-mustard);
}

/* 見出しの番号札（手帖・事件ファイルのページ番号のように） */
#lp .lp-heading__no {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 5px 0;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

#lp .lp-section--green .lp-heading__ja::after {
  filter: invert(92%) sepia(12%) saturate(300%) brightness(105%);
}


/* ==========================================================
   タイトルカード（ファーストビュー内。LPを解放したときに登場）
   構図：左＝縦長のタイトルカード／右＝街並みが縦に見える余白
   ・カードの上端は「画面の高さ×topRatio」（門とランタンの下）
   ・倍率は JS が計算（幅÷360。人物の頭より下がりすぎる画面では小さく）
   ・位置と大きさの数値は js/config.js の titleCard で調整
   ・ロゴとサブタイトルは正式ロゴの画像（assets-web/logo/）
========================================================== */

#mv-title {
  --fvt-scale: 1;
  position: absolute;
  z-index: 25;                    /* 雨(21)より手前、人物(30)より奥 */
  top: var(--fvt-top, 249px);
  left: calc(var(--fvt-left, -6px) * var(--fvt-scale));
  width: var(--fvt-width, 232px);
  color: var(--lp-ink);
  font-family: var(--lp-font-gothic);
  transform: scale(var(--fvt-scale));
  transform-origin: left top;
  user-select: none;
  -webkit-user-select: none;
}

#mv-title .lp-title-card {
  position: relative;
  padding: 14px 8px 12px 14px;   /* 左端が画面から少しはみ出す分、左の余白を多めに */
  background-color: #f7eedb;
  background-image: var(--lp-noise);
  border: 1px solid rgba(42, 36, 32, 0.3);
  /* 浮いた濃い影ではなく、風景に貼った紙のような薄い影 */
  box-shadow:
    0 0 0 3px #f7eedb,
    0 0 0 4px rgba(42, 36, 32, 0.18),
    3px 5px 10px rgba(0, 0, 0, 0.28);
  transform: rotate(-1deg);
}

/* クリップ留め（左上。紙の上の縁に挟む） */
#mv-title .lp-clip {
  position: absolute;
  top: -30px;
  left: 24px;
  width: 16px;
  height: 42px;
  transform: rotate(-8deg);
}

/* 先頭の2行＋右側の小さなてるてる坊主。下に細い区切り線 */
#mv-title .lp-title__head {
  position: relative;             /* てるてる坊主のタップ範囲（.lp-title__teru-hit）の基準 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(42, 36, 32, 0.35);
}

#mv-title .lp-title__lead {
  margin: 2px 0 0;
  font-family: var(--lp-font-mincho);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}

#mv-title .lp-title__teru {
  flex: none;
  width: 36px;                    /* 正式素材（縦長）。高さは縦横比のまま自動 */
  height: auto;
  margin: -12px 0 -8px 0;
  transform: rotate(5deg);
  /* 回転の中心＝頭と服の中心（上のひもの輪を除いた本体の中心）。
     逆さになっても本体の位置がずれず、ひもの輪だけが下へ回る */
  transform-origin: 50% 63%;
}

/* てるてる坊主のタップ範囲（STEP T）
   パズル② retry が解放された後だけ表示（main.js が hidden を外す）。
   見た目は透明で、てるてる坊主より少し大きめの範囲を指で押しやすくする */
#mv-title .lp-title__teru-hit {
  position: absolute;
  top: -12px;
  right: -8px;
  width: 52px;
  height: 92px;                   /* 晴れた後は逆さ（ひもの輪が下）なので、下側まで含める */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#mv-title .lp-title__teru-hit[hidden] {
  display: none;
}

/* 正式ロゴ（画像）。元画像の縦横比のまま表示（高さは自動）
   幅は、以前の文字ロゴ＋点線の矢印とほぼ同じ高さになる値 */
#mv-title .lp-logo {
  margin: 0;
  line-height: 0;
}

#mv-title .lp-logo__img {
  display: block;
  width: 184px;
  height: auto;
}

/* サブタイトル（画像）。カードの中の幅いっぱい */
#mv-title .lp-title__band {
  margin: 9px 0 0;
  line-height: 0;
}

#mv-title .lp-title__band-img {
  display: block;
  width: 100%;
  height: auto;
}

#mv-title .lp-title__intro {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
}

/* ボタンは横並び（文字は2行。高さ48px） */
#mv-title .lp-title__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
}

#mv-title .lp-title__actions .lp-btn {
  gap: 4px;
  min-height: 48px;
  padding: 5px 6px;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

#mv-title .lp-title__actions .lp-btn__arrow {
  width: 14px;
  height: 14px;
}

/* ==========================================================
   ボタン（LP内・タイトルカード共通）
========================================================== */

:is(#lp, #mv-title, #omikuji-modal, #site-menu) .lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 20px;
  border: 1.5px solid var(--lp-red);
  border-radius: 3px;
  font-family: var(--lp-font-gothic);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

:is(#lp, #mv-title, #omikuji-modal, #site-menu) .lp-btn--primary {
  background: var(--lp-red);
  color: #fbf3e2;
  box-shadow: 0 3px 0 #6e2716;
}

:is(#lp, #mv-title, #omikuji-modal, #site-menu) .lp-btn--secondary {
  background: #f7eedb;
  color: var(--lp-red);
  box-shadow: 0 3px 0 rgba(155, 58, 36, 0.25);
}

:is(#lp, #mv-title, #omikuji-modal, #site-menu) .lp-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #6e2716;
}

:is(#lp, #mv-title, #omikuji-modal, #site-menu) .lp-btn__arrow {
  width: 18px;
  height: 18px;
  flex: none;
}


/* ==========================================================
   カード（細い二重枠の紙）
========================================================== */

#lp .lp-card {
  position: relative;
  padding: 20px 18px;
  background: var(--lp-paper-deep);
  background-image: var(--lp-noise);
  border: 1px solid rgba(42, 36, 32, 0.35);
  outline: 1px solid rgba(42, 36, 32, 0.2);
  outline-offset: -6px;
}

#lp .lp-card__title {
  margin: 0 0 6px;
  font-family: var(--lp-font-mincho);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

#lp .lp-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

#lp .lp-card__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  color: var(--lp-green);
}

/* 基本情報（2列×2段） */
#lp .lp-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 6px;
}

#lp .lp-info-grid__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 10px;
}

#lp .lp-info-grid__item:nth-child(odd)  { border-right: 1px dashed var(--lp-line); }
#lp .lp-info-grid__item:nth-child(-n+2) { border-bottom: 1px dashed var(--lp-line); }

#lp .lp-info-grid__icon {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--lp-green);
}

#lp .lp-info-grid__label {
  display: block;
  color: var(--lp-ink-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

#lp .lp-info-grid__value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}


/* ==========================================================
   写真フレーム（ポラロイド風＋マスキングテープ）
========================================================== */

#lp .lp-photo {
  position: relative;
  margin: 0;
  padding: 8px 8px 26px;
  background: #fbf7ee;
  box-shadow: 0 6px 14px rgba(42, 36, 32, 0.25);
  transform: rotate(var(--lp-tilt, -2deg));
}

#lp .lp-photo::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 64px;
  height: 20px;
  background: rgba(200, 149, 46, 0.55);
  transform: translateX(-50%) rotate(3deg);
}

#lp .lp-photo__img,
#lp .lp-photo__dummy {
  display: block;
  width: 100%;
  height: auto;                   /* HTMLの width/height は縦横比の目安。高さは下の比率で決める */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#lp .lp-photo__dummy {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #d8ccb4 0 10px, #cfc2a8 10px 20px);
  color: rgba(42, 36, 32, 0.55);
  font-size: 12px;
  letter-spacing: 0.2em;
}

#lp .lp-photo__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  color: var(--lp-ink-soft);
  font-family: var(--lp-font-mincho);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}


/* ==========================================================
   番号付きステップ（縦の道のり）
========================================================== */

#lp .lp-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

#lp .lp-steps__item {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 26px;
}

/* 次の番号へつながる点線 */
#lp .lp-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 4px;
  left: 19px;
  border-left: 2px dotted var(--lp-green);
}

#lp .lp-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--lp-green);
  color: var(--lp-paper);
  font-family: var(--lp-font-mincho);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--lp-paper), 0 0 0 4px var(--lp-green);
}

#lp .lp-steps__text {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}


/* ==========================================================
   チェックリスト
========================================================== */

#lp .lp-check {
  margin: 0;
  padding: 0;
  list-style: none;
}

#lp .lp-check li {
  position: relative;
  padding: 8px 0 8px 34px;
  border-bottom: 1px dashed var(--lp-line);
  line-height: 1.6;
}

#lp .lp-check li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--lp-ink);
  background: #fbf7ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M4 11l5 5 10-12' fill='none' stroke='%239b3a24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}


/* ==========================================================
   Q&A（タップで開閉）
========================================================== */

#lp .lp-faq {
  border-bottom: 1px dashed var(--lp-line);
}

#lp .lp-faq summary {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px 32px 14px 0;
  font-weight: 700;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
}

#lp .lp-faq summary::-webkit-details-marker {
  display: none;
}

/* 開閉の印（＋ → −） */
#lp .lp-faq summary::after {
  content: "+";
  position: absolute;
  top: 12px;
  right: 4px;
  color: var(--lp-red);
  font-size: 20px;
  line-height: 1;
}

#lp .lp-faq[open] summary::after {
  content: "−";
}

#lp .lp-faq__q,
#lp .lp-faq__a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  font-family: var(--lp-font-mincho);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

#lp .lp-faq__q {
  background: var(--lp-green);
  color: var(--lp-paper);
}

#lp .lp-faq__a {
  border: 1.5px solid var(--lp-red);
  color: var(--lp-red);
}

#lp .lp-faq__answer {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 16px;
  line-height: 1.8;
}


/* ==========================================================
   開催情報などの表
========================================================== */

#lp .lp-table {
  margin: 0;
}

#lp .lp-table__row {
  display: grid;
  grid-template-columns: 7.2em 1fr;    /* 「キット受取場所」「推奨プレイ時間」が1行に収まる幅 */
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--lp-line);
}

#lp .lp-table dt {
  color: var(--lp-green);
  font-weight: 700;
}

#lp .lp-table dd {
  margin: 0;
}


/* ==========================================================
   LP本文の各セクション（STEP I）
========================================================== */

/* イベント概要：本文の下に基本情報カード */
#lp #lp-about .lp-info-grid {
  margin-top: 22px;
}

/* ストーリー：写真2枚（テープで貼った紙） */
#lp .lp-story-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 4px 24px;
}

#lp .lp-story__closing {
  margin: 0;
  font-family: var(--lp-font-mincho);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

/* 魅力：アイコン＋見出し＋説明の横長カードを縦に並べる（スマホで読みやすく） */
#lp .lp-points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#lp .lp-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

#lp .lp-point__icon {
  width: 38px;
  height: 38px;
  flex: none;
  margin-top: 2px;
  color: var(--lp-green);
}

/* ストーリーの本文（改行位置はいただいた文章どおり。
   画面幅で折り返す場合は、対応ブラウザでは文節の区切りで折り返す） */
#lp .lp-story__text p {
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: 0;              /* いただいた改行位置で1行に収まりやすくする */
  word-break: auto-phrase;
}

#lp #lp-story {
  padding-left: 16px;
  padding-right: 16px;
}

/* 魅力：見出しの上の番号 */
#lp .lp-point__num {
  display: block;
  color: var(--lp-red);
  font-family: var(--lp-font-mincho);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

/* 参加方法：見出し＋説明文の2段のステップ */
#lp .lp-steps--detail .lp-steps__item {
  align-items: flex-start;
}

#lp .lp-steps--detail .lp-steps__text {
  display: block;
  padding-top: 8px;
}

#lp .lp-steps__desc {
  display: block;
  margin-top: 2px;
  color: var(--lp-ink-soft);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;
}

/* 開催情報：表の中の注意書き */
#lp .lp-table__note {
  grid-column: 1 / -1;            /* 項目名の列も使って全幅で表示 */
  margin: -4px 0 0;
  color: var(--lp-ink-soft);
  font-size: 12px;
  line-height: 1.7;
}

/* 参加方法の直後の購入ボタン */
#lp .lp-mid-cta {
  margin-top: 8px;
}

/* チケット購入：紙のチケット風の枠 */
#lp .lp-ticket__box {
  position: relative;
  padding: 26px 20px 22px;
  border: 1.5px dashed var(--lp-red);
  outline: 4px solid #f7eedb;
  outline-offset: -8px;
  background: #f7eedb;
  text-align: center;
}

/* チケットの切り込み（左右の半円。区画の地の色でくり抜いて見せる） */
#lp .lp-ticket__box::before,
#lp .lp-ticket__box::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eadbb9;
  transform: translateY(-50%);
}

#lp .lp-ticket__box::before { left: -12px; }
#lp .lp-ticket__box::after  { right: -12px; }

/* 赤い「謎」の印 */
#lp .lp-ticket__stamp {
  position: absolute;
  top: -14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--lp-red);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #f7eedb, inset 0 0 0 3px var(--lp-red);
  background: #f7eedb;
  color: var(--lp-red);
  font-family: var(--lp-font-mincho);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
  transform: rotate(-12deg);
}

#lp .lp-ticket__lead {
  margin: 0 0 18px;
  font-family: var(--lp-font-mincho);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

#lp .lp-btn--large {
  min-height: 58px;
  font-size: 16px;
}

/* 販売ページのURLが未設定の間のメインボタン「チケット販売準備中」（STEP AW。js/main.js が付ける）
   押せないことが分かるよう、赤の塗りをやめて紙の地に点線の枠 */
#lp .lp-btn.is-pending,
#lp .lp-btn.is-pending:active {
  background: var(--lp-paper-deep);
  color: var(--lp-ink-soft);
  border: 1.5px dashed rgba(155, 58, 36, 0.55);
  box-shadow: none;
  transform: none;
  cursor: default;
}

#lp .lp-ticket__note {
  margin: 12px 0 0;
  color: var(--lp-ink-soft);
  font-size: 12px;
}


/* ==========================================================
   フッター
========================================================== */

#lp .lp-footer {
  position: relative;
  padding: 36px var(--lp-pad-x) 40px;
  color: rgba(242, 230, 204, 0.8);
  background: var(--lp-green);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

#lp .lp-footer__title {
  margin: 0 0 14px;
  color: var(--lp-paper);
  font-family: var(--lp-font-mincho);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

#lp .lp-footer__title span {
  font-size: 12px;
  letter-spacing: 0.1em;
}

#lp .lp-footer__info {
  margin: 0 0 16px;
}

#lp .lp-footer__info div {
  display: flex;
  justify-content: center;
  gap: 10px;
}

#lp .lp-footer__info dt {
  color: var(--lp-mustard);
  font-weight: 700;
}

#lp .lp-footer__info dd {
  margin: 0;
}

#lp .lp-footer a {
  color: var(--lp-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* SNS（URLが入ったものだけ表示） */
#lp .lp-footer__sns {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

#lp .lp-footer__sns[hidden],
#lp .lp-footer__sns li[hidden] {
  display: none;
}

#lp .lp-footer__top {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border: 1px solid rgba(242, 230, 204, 0.5);
  border-radius: 2px;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.08em;
}

#lp .lp-footer__copy {
  margin: 0;
  font-size: 11px;
  opacity: 0.75;
}


/* ==========================================================
   画面下に固定のチケットボタン（STEP J）
========================================================== */

#lp .lp-sticky {
  position: fixed;
  z-index: 900;                   /* パズルのモーダル(1000)より下 */
  left: 50%;
  bottom: 0;
  width: var(--lp-w);
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  background: rgba(242, 230, 204, 0.95);
  border-top: 1px solid var(--lp-line);
  box-shadow: 0 -4px 12px rgba(42, 36, 32, 0.12);
  transform: translate(-50%, 110%);
  transition: transform 0.3s ease;
}

#lp .lp-sticky.is-visible {
  transform: translate(-50%, 0);
}

#lp .lp-sticky .lp-btn {
  min-height: 46px;
}