/* ==========================================================================
   トップページ (front-page.php) 専用スタイル
   Figma node 113:27（お宝かんてい団__TOP）を参照して実装。
   モバイルファースト（Figmaの基準幅は412px）。

   ※ 元は768px / 1024pxでPC寄りに拡張する@media (min-width...)を
   　各所に用意していたが、今回はSP版のみデザインが存在し、PC幅でも
   　SP版をそのまま480px幅で中央表示する方針に変更したため、それらの
   　ブロックはすべて到達不可能な閾値（min-width: 99999px）にして
   　無効化している（common.css側の「PC幅での表示方針」を参照）。
   　SP表示（768px未満）への影響をゼロにするため、削除ではなく
   　無効化のみに留めている。
   ========================================================================== */

.l-top {
  overflow-x: hidden;
  background: var(--color-bg);
}

.l-top .l-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

@media (min-width: 99999px) {
  .l-top .l-container {
    max-width: 720px;
  }
}

@media (min-width: 99999px) {
  .l-top .l-container {
    max-width: 1000px;
    padding: 0 var(--space-md);
  }
}

.l-top img {
  max-width: 100%;
  height: auto;
  display: block;
}

.u-sp-only {
  display: inline;
}

@media (min-width: 99999px) {
  .u-sp-only {
    display: none;
  }
}

/* 電話予約リボンは共通ヘッダー側(assets/css/common.css の .l-header__ribbon)に統合済み */

/* --------------------------------------------------------------------------
   メインビジュアル (l-top__mv)
   -------------------------------------------------------------------------- */
.l-top__mv {
  position: relative;
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  background: linear-gradient(180deg, var(--color-bg-cream) 0%, #fff 60%);
  text-align: center;
}

/* FV（スライダー）直後は買取品目セクション（金色）に直結させるため下余白を詰める */
.l-top__mv--hero {
  padding-bottom: var(--space-xs);
}

.l-top__mv-bg {
  position: relative;
  margin: 0 auto var(--space-md);
}

.l-top__mv-bg-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 0;
  opacity: 0.9;
}

/* 円形切り抜きはせず、FV画像そのままのサイズ（比率）で表示する */
.l-top__mv-photo {
  position: relative;
  z-index: 1;
  width: 100%;
}

/*
 * メインビジュアル画像スライダー（4枚をクロスフェード）
 * aspect-ratioは固定せず「画像そのものの比率」を保つが、非表示スライドは
 * position:absoluteで文書の流れから外し、表示中(is-active)のスライドだけを
 * position:relativeで通常の流れに残すことで、コンテナの高さは常に
 * 「今表示している画像」の実サイズだけで決まるようにしている。
 * （以前はCSS Gridの重ね配置で、非表示スライドの高さまで含めてコンテナが
 * 　伸びてしまい、表示中の画像の下に余白ができるバグがあった）
 */
.l-top__mv-slider {
  position: relative;
}

.l-top__mv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.l-top__mv-slide.is-active {
  position: relative;
  opacity: 1;
  z-index: 1;
}

.l-top__mv-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.l-top__mv-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
}

.l-top__mv-slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.l-top__mv-slider-dots button.is-active {
  background: #fff;
}

/*
 * 「買えないものはない！」＋ロゴ、その下に長文コピー。
 * このセクションだけ背景を白にし、「不用品売るなら当店にお任せ」の
 * スタンプ部分は削除（添付デザイン参照）。
 */
.l-top__mv--intro {
  background: #fff;
}

.l-top__mv-intro-inner {
  max-width: 400px;
}

.l-top__mv-motto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0 auto var(--space-lg);
}

.l-top__mv-motto-text-wrap {
  text-align: left;
}

/*
 * 前バージョン通り、「買えないものはない！」の3行部分だけを回転させて
 * 「斜め右上がり」に見せる。「を目指して」(.l-top__mv-motto-sub)は
 * この回転の対象に含めず、横書きのまま下に配置する。
 */
.l-top__mv-motto-text {
  margin: 0;
  line-height: 1.15;
  transform: rotate(-6deg);
}

.l-top__mv-motto-text01,
.l-top__mv-motto-text02,
.l-top__mv-motto-text03 {
  display: block;
  font-family: "Yuji Syuku", serif;
  color: #1a1a1a;
}

.l-top__mv-motto-text01 {
  font-size: 30px;
}

.l-top__mv-motto-text02 {
  font-size: 30px;
}

.l-top__mv-motto-text03 {
  font-size: 42px;
}

/* 「ない！」の下あたりに来るよう右にオフセット。右に寄せすぎていたので位置を調整 */
.l-top__mv-motto-sub {
  font-family: "Yuji Syuku", serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 6px 0 0 30px;
}

.l-top__mv-motto-logo {
  width: 120px;
  flex: 0 0 auto;
}

/*
 * コピー本文。段落ごとにpタグで分けて余白（空行）を作り、
 * 引用行(「」)は少しインデント。「買えないものはない」だけ
 * マーカー風のハイライトを敷く。
 */
.l-top__mv-copy {
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.85;
  color: #1a1a1a;
}

.l-top__mv-copy p {
  margin: 0 0 var(--space-sm);
}

.l-top__mv-copy-quote {
  padding-left: 1em;
}

.l-top__mv-copy-mark {
  background: linear-gradient(transparent 55%, var(--color-bg-pink) 55%);
  padding: 0 2px;
}

@media (min-width: 99999px) {
  .l-top__mv-intro-inner {
    max-width: 640px;
  }

  .l-top__mv-copy {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   買取品目多数！(l-top__items)
   金色の斑点背景＋商品写真＋「買取品目」ボックス、という構成。
   旧デザイン（暗い写真背景＋丸ピル羅列）から全面差し替え。
   -------------------------------------------------------------------------- */
.l-top__items {
  position: relative;
  padding: var(--space-sm) 0 var(--space-lg);
  color: #fff;
  text-align: center;
  background: var(--color-accent);
}

.l-top__items-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.l-top__items-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-top__items .l-container {
  position: relative;
  z-index: 1;
}

/*
 * starアイコンをposition:absoluteで浮かせることで、レイアウト幅の計算から外し、
 * 「＼取り扱い品目多数！／」というテキスト部分だけが正しく中央に来るようにする。
 * (inline-flexで星を並びに含めると、星の分だけ見た目の中心が左にズレていた)
 */
.l-top__items-heading {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  margin: 0 auto var(--space-md);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.l-top__items-heading-slash {
  font-weight: 900;
}

.l-top__items-heading-star {
  position: absolute;
  top: -8px;
  right: -18px;
  width: 16px;
}

.l-top__items-photo {
  max-width: 320px;
  margin: 0 auto var(--space-md);
}

.l-top__items-box {
  background: var(--color-bg-cream);
  border-radius: 16px;
  padding: var(--space-md) var(--space-sm);
  margin-bottom: var(--space-md);
}

/*
 * <p>タグで実装（h2ではない）。Lightning標準の見出し装飾（下線・アイコン等）は
 * h1〜h6タグに対して付与されるため、タグ自体をpにすることで装飾を持ち込まない。
 * 念のため border/background/疑似要素もリセットしておく。
 */
.l-top__items-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 var(--space-sm);
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.l-top__items-title::before,
.l-top__items-title::after {
  content: none;
  display: none;
}

.l-top__items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1px;
  column-gap: 6px;
}

.l-top__items-list li {
  background: rgba(255, 255, 255, 0.55);
  color: #1a1a1a;
  border-radius: 18px;
  padding: 14px 6px;
  font-size: 15px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  text-align: center;
}

.l-top__items-list-full {
  grid-column: 1 / -1;
  font-size: 17px !important;
}

.l-top__items-note {
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
}

@media (min-width: 99999px) {
  .l-top__items-heading {
    font-size: 26px;
  }

  .l-top__items-heading-star {
    width: 22px;
  }

  .l-top__items-photo {
    max-width: 420px;
  }

  .l-top__items-box {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .l-top__items-title {
    font-size: 26px;
  }

  .l-top__items-list li {
    font-size: 17px;
    padding: 16px 8px;
  }

  .l-top__items-list-full {
    font-size: 20px !important;
  }

  .l-top__items-note {
    font-size: 17px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   共通見出し
   -------------------------------------------------------------------------- */
.l-top__section-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--space-md);
  position: relative;
}

/*
 * 「簡単ステップで個人出張買取！」は<p>タグに変更済み（Lightning標準の
 * 見出し装飾を持ち込まないため）。同じクラスを使う他のh2見出しにも
 * 影響しないよう、リセットは背景/枠線/疑似要素のみに留めている。
 */
.l-top__flow-title {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 var(--space-md);
  padding: 0;
  color: #1a1a1a;
  border: none;
  background: none;
  box-shadow: none;
}

.l-top__flow-title::before,
.l-top__flow-title::after {
  content: none;
  display: none;
}

@media (min-width: 99999px) {
  .l-top__section-title {
    font-size: 28px;
  }

  .l-top__flow-title {
    font-size: 26px;
  }
}

/* --------------------------------------------------------------------------
   選ばれる理由 (l-top__reasons)
   -------------------------------------------------------------------------- */
/*
 * セクション全体を単色 #AA2B2B（--color-primaryと同値）にし、
 * 写真コラージュ（丸型2枚＋お皿装飾＋花ロゴ）は廃止。
 * 代わりに1枚の背景写真(PNG)の上に、下からグラデーションでテキストを
 * 乗せた角丸カードのみを表示する構成に変更。
 */
.l-top__reasons {
  padding: var(--space-lg) 0;
  background: var(--color-primary);
  color: #fff;
}

/*
 * どちらも<h2>/<h3>ではなく<p>タグで実装（Lightning標準の見出し装飾が
 * h1〜h6タグに対して付与されるのを避けるため）。念のため
 * border/background/疑似要素もリセットしておく。
 */
.l-top__reasons .l-top__section-title {
  color: #fff;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
}

.l-top__reasons .l-top__section-title::before,
.l-top__reasons .l-top__section-title::after {
  content: none;
  display: none;
}

.l-top__reasons-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.l-top__reasons-card-bg {
  width: 100%;
  display: block;
}

.l-top__reasons-card-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-lg) var(--space-sm) var(--space-sm);
  background: linear-gradient(180deg, rgba(250, 245, 235, 0) 0%, rgba(250, 245, 235, 0.92) 40%, rgba(250, 245, 235, 0.97) 100%);
  text-align: center;
}

.l-top__reasons-card-text p {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: #1a1a1a;
  margin: 0;
}

.l-top__reasons-card-text p + p {
  margin-top: var(--space-sm);
}

.l-top__reasons-subtitle {
  color: #fff;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  padding: 0 var(--space-sm);
  border: none;
  background: none;
  box-shadow: none;
}

.l-top__reasons-subtitle::before,
.l-top__reasons-subtitle::after {
  content: none;
  display: none;
}

.l-top__reasons-text {
  color: #fff;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  margin: 0 0 var(--space-sm);
  padding: 0 var(--space-sm);
}

.l-top__reasons-text--quote {
  padding-left: calc(var(--space-sm) + 1em);
}

@media (min-width: 99999px) {
  .l-top__reasons-card-text p {
    font-size: 15px;
  }

  .l-top__reasons-subtitle {
    font-size: 20px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .l-top__reasons-text {
    font-size: 16px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   初めての方へ (l-top__first-time)
   -------------------------------------------------------------------------- */
.l-top__first-time {
  padding: var(--space-lg) 0;
  background: #fff;
}

/* <h2>ではなく<p>タグ。Lightning標準の見出し装飾を持ち込まないため */
.l-top__first-time-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 var(--space-md);
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.l-top__first-time-title::before,
.l-top__first-time-title::after {
  content: none;
  display: none;
}

.l-top__first-time-avatar {
  position: relative;
  width: 220px;
  margin: 0 auto var(--space-lg);
}

.l-top__first-time-avatar-img {
  width: 100%;
  display: block;
}

.l-top__first-time-note {
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: #1a1a1a;
  margin: 0;
}

@media (min-width: 99999px) {
  .l-top__first-time-title {
    font-size: 28px;
  }

  .l-top__first-time-avatar {
    width: 280px;
  }

  /* PC版もSP版と同じ縦積みレイアウトのまま、幅と文字サイズだけ広げる */
  .l-top__first-time-note {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   買取店選びで、損をしないでください (l-top__store-choice)
   -------------------------------------------------------------------------- */
.l-top__store-choice {
  position: relative;
  padding: var(--space-lg) 0;
}

.l-top__store-choice-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.l-top__store-choice-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-top__store-choice .l-container {
  position: relative;
  z-index: 1;
}

.l-top__store-choice-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
}

.l-top__store-choice-heading-icon {
  width: 84px;
  flex: 0 0 auto;
}

.l-top__store-choice-heading-text {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-primary);
  margin: 0;
}

.l-top__store-choice-lead {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  color: #1a1a1a;
  margin: 0 0 var(--space-md);
}

.l-top__store-choice-text {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  color: #1a1a1a;
  margin: 0 0 var(--space-md);
}

.l-top__store-choice-text--quote {
  font-weight: 700;
}

@media (min-width: 99999px) {
  .l-top__store-choice-heading-icon {
    width: 100px;
  }

  .l-top__store-choice-heading-text {
    font-size: 30px;
  }

  .l-top__store-choice-lead,
  .l-top__store-choice-text {
    font-size: 16px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   ステップ系セクション（個人出張買取 / 郵送オンライン査定買取）
   -------------------------------------------------------------------------- */
.l-top__flow {
  position: relative;
  padding: var(--space-lg) 0;
  color: #1a1a1a;
}

.l-top__flow-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.l-top__flow-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --visitは背景写真そのもの(カード込みで既に配色済み)を活かすため白の被せなし */
.l-top__flow--mail .l-top__flow-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
}

.l-top__flow .l-container {
  position: relative;
  z-index: 1;
}

.l-top__flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  counter-reset: none;
}

.l-top__flow-step {
  position: relative;
  text-align: center;
}

/*
 * 郵送オンライン査定買取セクション：各ステップ（番号・カード・アイコン・
 * キャプション込み）は1枚ずつ画像化。コード側は画像を並べ、
 * カード間だけ赤い下向き三角の矢印をCSSで追加する。
 */
.l-top__flow-steps--mail .l-top__flow-step {
  padding: 0;
}

.l-top__flow-steps--mail .l-top__flow-step:not(:last-child) {
  margin-bottom: 28px;
}

.l-top__flow-steps--mail .l-top__flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 16px solid var(--color-primary);
}

.l-top__flow-step-image {
  width: 65%;
  max-width: 230px;
  margin: 0 auto;
  display: block;
}

.l-top__flow-step-annotation {
  text-align: center;
  font-size: 11px;
  margin-top: var(--space-sm);
  color: #1a1a1a;
  opacity: 0.85;
}

/*
 * Step1〜4は六角形バッジ・トンボ線・イラストを含めて1枚ずつ画像化。
 * コード側は画像を並べるだけ（コードでの再現をやめたため
 * l-top__flow-step-icon等の旧スタイルはこのセクションでは使わない）。
 */
/* カードを少し縮小し、間隔も詰めて背景画像の高さに4枚がきちんと収まるようにする */
.l-top__flow-steps--cards {
  gap: var(--space-sm);
  align-items: center;
}

.l-top__flow-step-card {
  width: 85%;
  max-width: 340px;
}

.l-top__flow-step-card img {
  width: 100%;
  display: block;
}

@media (min-width: 99999px) {
  .l-top__flow-step-card {
    width: 70%;
    max-width: 480px;
  }
}

.l-top__flow-mail-badge {
  text-align: center;
  margin-bottom: var(--space-lg);
  font-weight: 700;
  color: #1a1a1a;
}

.l-top__flow-mail-badge p {
  font-size: 18px;
  margin: 0;
}

.l-top__flow-mail-badge small {
  font-size: 12px;
}

@media (min-width: 99999px) {
  /* 画像の実サイズ(246×233px)が小さいため、拡大しすぎるとぼやける。
     等倍に近いサイズに留める */
  .l-top__flow-steps--mail .l-top__flow-step-image {
    width: auto;
    max-width: 246px;
  }
}

/* --------------------------------------------------------------------------
   高価買取のポイント (l-top__points)
   -------------------------------------------------------------------------- */
.l-top__points {
  padding: var(--space-lg) 0;
  background: var(--color-bg-cream);
}

/* <h2>ではなく<p>タグ。Lightning標準の見出し装飾を持ち込まないため */
.l-top__points-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 var(--space-lg);
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.l-top__points-title::before,
.l-top__points-title::after {
  content: none;
  display: none;
}

.l-top__points-visual {
  display: block;
  max-width: 320px;
  margin: 0 auto var(--space-lg);
}

/*
 * 各項目は「番号→細い下線→説明文」の縦並び。
 * 下線は項目全体の下ではなく、番号のすぐ下に敷く（添付デザイン参照）。
 */
.l-top__points-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.l-top__points-item {
  display: flex;
  flex-direction: column;
}

/*
 * 下線は単色ではなく、番号の文字幅ぶんだけアクセントカラー、
 * 残りはグレーの2色構成（添付デザイン参照）。border-bottomだと
 * 単色にしかできないため、::afterのグラデーションで表現している。
 */
.l-top__points-no {
  position: relative;
  font-weight: 700;
  font-size: 32px;
  color: var(--color-accent);
  line-height: 1;
  padding-bottom: 8px;
  margin-bottom: var(--space-sm);
}

.l-top__points-no::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(to right, var(--color-accent) 0, var(--color-accent) 52px, #ccc 52px, #ccc 100%);
}

.l-top__points-item p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  color: #1a1a1a;
}

@media (min-width: 99999px) {
  .l-top__points-visual {
    max-width: 420px;
  }

  .l-top__points-list {
    max-width: 420px;
  }

  .l-top__points-item p {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   業者向け実績 (l-top__business)
   -------------------------------------------------------------------------- */
.l-top__business {
  position: relative;
  padding: var(--space-lg) 0;
  background: #f6c9be;
}

/* セクション全体（タイトル・本文ボックス・リード文・カード一覧）の左右に
   通常のl-containerより少し多めの余白を追加する */
.l-top__business .l-container {
  padding-left: calc(var(--space-sm) + 12px);
  padding-right: calc(var(--space-sm) + 12px);
}

@media (min-width: 99999px) {
  .l-top__business .l-container {
    padding-left: calc(var(--space-md) + 12px);
    padding-right: calc(var(--space-md) + 12px);
  }
}

/* <h2>ではなく<p>タグ。Lightning標準の見出し装飾を持ち込まないため */
.l-top__business-title {
  text-align: left;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 var(--space-md);
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.l-top__business-title::before,
.l-top__business-title::after {
  content: none;
  display: none;
}

.l-top__business-title-accent {
  color: var(--color-primary);
}

/* 3つの本文段落をまとめて包む白い角丸ボックス */
.l-top__business-intro-box {
  margin-bottom: var(--space-md);
}

.l-top__business-intro {
  background: #fff;
  border-radius: 20px;
  padding: var(--space-md);
}

.l-top__business-intro p {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  margin: 0 0 1.4em;
  color: #1a1a1a;
}

.l-top__business-intro p:last-child {
  margin-bottom: 0;
}

.l-top__business-lead {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  margin: 0 0 var(--space-md);
  color: #1a1a1a;
}

/*
 * align-items:centerにするとliが画像の実サイズ(natural size)に
 * shrink-to-fitしてしまい、素材ごとに書き出しキャンバスの横幅が
 * 微妙に違う（395px/398px/375px等）ため画像ごとに表示幅がずれる。
 * liはデフォルトのstretchでコンテナ幅いっぱいに広げ、画像側は
 * width:100%+max-width+margin:0 autoで中央寄せする。
 */
.l-top__business-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.l-top__business-card {
  width: 100%;
}

.l-top__business-card-image {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
}

@media (min-width: 99999px) {
  .l-top__business-title {
    font-size: 30px;
  }

  .l-top__business-intro p,
  .l-top__business-lead {
    font-size: 15px;
  }

  .l-top__business-card-image {
    max-width: 460px;
  }
}

/* --------------------------------------------------------------------------
   よくある質問 (l-top__faq)
   -------------------------------------------------------------------------- */
.l-top__faq {
  padding: var(--space-lg) 0;
  background: var(--color-bg-cream);
}

/* <h2>ではなく<p>タグ。Lightning標準の見出し装飾を持ち込まないため */
.l-top__faq-title {
  text-align: center;
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
}

.l-top__faq-title::before,
.l-top__faq-title::after {
  content: none;
  display: none;
}

.l-top__faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.l-top__faq-item {
  background: var(--color-accent);
  border-radius: 6px;
  color: #fff;
  padding: var(--space-sm) var(--space-md);
}

.l-top__faq-question {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
}

.l-top__faq-question::-webkit-details-marker {
  display: none;
}

.l-top__faq-toggle {
  font-size: 20px;
  transition: transform 0.2s ease;
}

.l-top__faq-item[open] .l-top__faq-toggle {
  transform: rotate(45deg);
}

.l-top__faq-answer {
  background: #fff;
  color: #1a1a1a;
  border-radius: 4px;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  font-size: 14px;
  line-height: 1.8;
}

.l-top__faq-more {
  text-align: center;
  margin-top: var(--space-md);
}

.l-top__faq-more a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   お問い合わせ誘導 (l-top__contact-cta)
   -------------------------------------------------------------------------- */
.l-top__contact-cta {
  padding: var(--space-lg) 0;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
}

.l-top__contact-cta-text {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.l-top__contact-cta-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.l-top__contact-cta-icon {
  width: 26px;
}

.l-top__contact-cta-hours {
  font-size: 12px;
  margin: 4px 0 var(--space-md);
  opacity: 0.9;
}

.l-top__contact-cta-btn {
  display: inline-block;
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 32px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   店舗情報 (l-top__stores)
   -------------------------------------------------------------------------- */
.l-top__stores {
  padding: var(--space-lg) 0;
  background: #fff;
}

/* 現状のコーディングだと左右いっぱいに広がりすぎるため、少し余白を追加する */
.l-top__stores .l-container {
  padding-left: calc(var(--space-sm) + 12px);
  padding-right: calc(var(--space-sm) + 12px);
}

@media (min-width: 99999px) {
  .l-top__stores .l-container {
    padding-left: calc(var(--space-md) + 12px);
    padding-right: calc(var(--space-md) + 12px);
  }
}

/* <h2>ではなく<p>タグ。Lightning標準の見出し装飾を持ち込まないため */
.l-top__stores-title {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
}

.l-top__stores-title::before,
.l-top__stores-title::after {
  content: none;
  display: none;
}

.l-top__stores-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.l-top__stores-card {
  background: var(--color-bg-pink);
  border-radius: 20px;
  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.15);
  padding: var(--space-md);
  text-align: center;
}

.l-top__stores-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: var(--space-md);
}

.l-top__stores-name {
  display: block;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  border-radius: 10px;
  padding: 12px 24px;
}

@media (min-width: 99999px) {
  /* PC版もSP版と同じ縦積みレイアウトのまま、カード幅だけ少し絞って中央寄せ */
  .l-top__stores-card {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   運営会社概要 (l-top__company)
   -------------------------------------------------------------------------- */
.l-top__company {
  padding: var(--space-lg) 0;
  background: var(--color-footer);
  color: #fff;
  text-align: center;
}

/* 1段目：ロゴ単体 */
.l-top__company-logo {
  width: 160px;
  margin: 0 0 var(--space-md);
}

/* 2段目：運営会社概要＋会社情報（左揃え） */
.l-top__company-body {
  text-align: left;
  margin-bottom: var(--space-md);
}

/* 「運営会社概要」とCONTACTボタンを同じ行に横並びで配置 */
.l-top__company-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.l-top__company-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  background: #fff;
  color: #1a1a1a;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  border-radius: 999px;
  padding: 10px 24px;
  text-decoration: none;
}

.l-top__company-contact-icon {
  width: 14px;
  height: 14px;
}

/* <h2>ではなく<p>タグ。Lightning標準の見出し装飾を持ち込まないため */
.l-top__company-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.l-top__company-title::before,
.l-top__company-title::after {
  content: none;
  display: none;
}

.l-top__company-info {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

/* 3段目：著作権表記は中央揃えのまま */
.l-top__company-copyright {
  text-align: center;
  font-size: 11px;
  opacity: 0.85;
}