/* 画像のLP（lp-brain・c1 から）。lp.css の上に重ねて、色を黄色と黒・ボタンを緑にする（#788・#790・#794）
   画像は縦に並べて、スマホの幅でそのまま見せる。PCでは真ん中に1列で置く */
body.imglp {
  --ink: #0e0e0e;
  --night: #0e0e0e;
  --panel: #f2f2f0;
  --yellow: #ffd43b;
  --accent: #1faf5a;      /* 緑はボタンだけ */
  --accent-dark: #137a3e;
  --accent-tint: #e8f6ee;
  --danger: #d93025;
  --danger-tint: #fdecea;
  --col: 560px;
  background: var(--night);
}

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.page { max-width: var(--col); margin: 0 auto; background: var(--paper); }

/* 1〜9枚目の画像 */
.slices { background: var(--night); }
.slice { position: relative; overflow: hidden; }
.slice img { display: block; width: 100%; height: auto; }
.slice__hit { position: absolute; border-radius: 12px; }
.slice__hit:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* 見出し：黒い太字に黄色の下線 */
.imglp .sec { padding: var(--sp-7) 0; }
.imglp .sec__title { font-size: var(--fs-xl); border-bottom-color: var(--yellow); }
.imglp .faq summary::before { color: var(--ink); background: var(--yellow); padding: 0 4px; margin-right: 6px; border-radius: 2px; content: "Q"; }

/* フォーム */
.imglp .sec--form { border-top: 6px solid var(--yellow); }
.imglp .req { background: var(--ink); }
.imglp .choices input { accent-color: var(--ink); }
.imglp .choices label:has(input:checked) { background: #fff6cc; border-color: var(--ink); }
.imglp .field.is-error input, .imglp .field.is-error select { border-color: var(--danger); background: var(--danger-tint); }
.imglp .err, .imglp .form__msg { color: var(--danger); }
.imglp .btn { border-radius: 12px; font-weight: 900; }

/* 1列のまま（PCでもフォームを横に並べない） */
.imglp .form-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
.imglp .form-grid__head { position: static; }
.imglp .foot__grid { grid-template-columns: 1fr; gap: var(--sp-2); }
.imglp .form { padding: var(--sp-5) var(--sp-4); }

/* お礼のページ */
.imglp[data-page="thanks"] .page, .imglp[data-page="thanks"] { background: var(--night); }
.imglp[data-page="thanks"] main { background: var(--paper); }
.imglp[data-page="thanks"] .wrap { max-width: var(--col); }

/* 活用できるAI（最初の画面の予約ボタンの下の、横に流れる帯）。黒地・色つきのロゴを白い台に・黄色は線だけ */
.ai { background: var(--night); color: var(--paper); padding: var(--sp-4) 0 var(--sp-4); overflow: hidden; border-top: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); }
.ai__title { margin: 0 var(--side) var(--sp-3); font-size: var(--fs-s); font-weight: 900; letter-spacing: 0.08em; line-height: 1.4; }
.ai__title em { font-style: normal; color: var(--yellow); }
.ai__view { display: flex; width: max-content; animation: ai-flow 22s linear infinite; }
.ai__view:hover, .ai__view:active { animation-play-state: paused; }
.ai__track { display: flex; gap: var(--sp-3); padding-right: var(--sp-3); margin: 0; list-style: none; }
.ai-card { flex: 0 0 auto; display: grid; grid-template-columns: 40px auto; grid-template-rows: auto auto; column-gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); }
.ai-card__logo { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; background: var(--paper); border-radius: 8px; }
.ai-card__logo img { width: 24px; height: 24px; }
.ai-card b { font-size: var(--fs-m); font-weight: 900; line-height: 1.2; white-space: nowrap; }
.ai-card span { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; line-height: 1.3; }
@keyframes ai-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 動きを減らす設定の人には、流さずに指で横に動かす形にする */
@media (prefers-reduced-motion: reduce) {
  .ai__view { animation: none; width: auto; overflow-x: auto; padding: 0 var(--side); }
  .ai__track[aria-hidden="true"] { display: none; }
}

/* 実績（活用できるAIの帯のすぐ下）。2×2のカード・数字だけを大きく黄色で */
.sns { background: var(--night); color: var(--paper); padding: var(--sp-6) var(--side); border-bottom: 3px solid var(--yellow); }
.sns__title { text-align: center; font-size: var(--fs-xl); font-weight: 900; font-style: italic; margin-bottom: var(--sp-4); }
.sns__title em { font-style: inherit; display: inline-block; padding-bottom: var(--sp-1); border-bottom: 4px solid var(--yellow); }
.sns__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.sns__grid li { background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); padding: var(--sp-4) var(--sp-2); text-align: center; }
.sns__label { font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); }
.sns__num { font-size: var(--fs-m); font-weight: 900; font-style: italic; line-height: 1; margin-top: var(--sp-2); white-space: nowrap; }
.sns__num b { font-family: var(--font-num); font-size: clamp(1.8em, 9vw, 2.4em); color: var(--yellow); margin-right: 2px; }
.sns__note { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: var(--sp-3); line-height: 1.6; }

/* フォームの先頭の「限定」の一行（#812・#813）。黒地に黄色の文字で、年商と役職の欄の前に置く */
.imglp .form__limit { margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); background: var(--ink); color: var(--yellow); font-weight: 900; font-size: var(--fs-s); line-height: 1.5; border-radius: 8px; }

/* 予約（TimeRexのように、日にち→時間→4つの項目・#818）。白い台の上に、選んだ所だけ黒地に黄色 */
.imglp .book { background: var(--paper); border-radius: var(--radius); padding: var(--sp-5) var(--sp-4); }
.imglp .book__step { display: flex; align-items: center; gap: var(--sp-2); font-weight: 900; margin: var(--sp-5) 0 var(--sp-3); }
.imglp .book > .book__step:first-child, .imglp .book__form > .book__step:first-child { margin-top: 0; }
.imglp .book__step b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: var(--fs-s); }
.imglp .book__week, .imglp .book__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.imglp .book__week { margin-bottom: 6px; text-align: center; font-size: var(--fs-xs); font-weight: 900; color: var(--muted, #555); }
.imglp .book__day { display: grid; gap: 2px; padding: 8px 0; border: 1px solid #d6d6d2; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.imglp .book__day b { font-size: var(--fs-s); }
.imglp .book__day small { font-size: var(--fs-xs); font-weight: 900; color: var(--accent-dark); }
.imglp .book__day:disabled { background: #ececea; color: #9a9a96; cursor: default; }
.imglp .book__day:disabled small { color: #9a9a96; }
.imglp .book__day[aria-pressed="true"], .imglp .book__time[aria-pressed="true"] { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.imglp .book__day[aria-pressed="true"] small { color: var(--yellow); }
.imglp .book__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.imglp .book__time { padding: 12px 0; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 900; cursor: pointer; }
.imglp .book__day:focus-visible, .imglp .book__time:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.imglp .book__hint, .imglp .book__loading { grid-column: 1 / -1; margin: 0; font-size: var(--fs-s); color: #555; }
.imglp .book__form { padding: 0; margin-top: var(--sp-5); }
.imglp .book__picked { margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); background: #f2f2f0; border-radius: 8px; font-weight: 900; font-size: var(--fs-s); }
.imglp .book__picked.is-set { background: #fff6cc; border-left: 4px solid var(--yellow); }

/* 予約が決まった画面：事前の質問 */
.imglp .thanks__at { margin: var(--sp-3) 0; padding: var(--sp-3); background: #fff6cc; border-left: 4px solid var(--yellow); font-weight: 900; }
.imglp .answer { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 6px solid var(--yellow); }
.imglp .answer__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-l, 1.25em); font-weight: 900; }
.imglp .answer__lead { margin: var(--sp-2) 0 var(--sp-4); }
.imglp .answer__done { margin-top: var(--sp-5); padding: var(--sp-4); background: #fff6cc; border-radius: 8px; }
/* 320px でも「11/10」が2行に割れないように */
.imglp .book__day b { white-space: nowrap; font-size: clamp(11px, 3.6vw, 15px); }

/* 実績の段の続き：支援の事例とインスタのプロフィール（#829） */
.sns__sub { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-m); font-weight: 900; text-align: center; }
.case { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.case__card { background: #1c1c1c; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius); padding: var(--sp-4); }
.case__tag { display: inline-block; padding: 2px 8px; background: var(--yellow); color: var(--ink); font-size: var(--fs-xs); font-weight: 900; border-radius: 4px; }
.case__head { margin-top: var(--sp-2); font-weight: 900; line-height: 1.5; }
.case__nums { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-3) 0; font-weight: 900; white-space: nowrap; }
.case__nums span { font-size: var(--fs-m); color: rgba(255, 255, 255, 0.7); }
.case__nums b { color: var(--yellow); }
.case__nums .case__after { font-family: var(--font-num); font-size: clamp(1.6em, 8vw, 2em); font-style: italic; color: var(--yellow); }
.case__card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-2); margin: 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.8); line-height: 1.6; }
.case__card dt { font-weight: 900; color: var(--paper); }
.case__card dd { margin: 0; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.16); background: #fff; }
.shot figcaption { margin-top: var(--sp-2); font-size: 11px; color: rgba(255, 255, 255, 0.6); text-align: center; }
.shot figcaption b { display: block; font-size: var(--fs-s); color: var(--paper); }
.shot figcaption span { display: block; margin-top: 2px; font-size: var(--fs-s); font-weight: 900; color: var(--yellow); }