@charset "UTF-8";

/* ==========================================================================
   カスタマーサポート（新規）／ショールーム（新規）ページ 共通パーツ

   対象ページ：
     ・カスタマーサポート … .aby-page.aby-page-customer
     ・ショールーム       … .aby-page.aby-page-showroom

   このファイルは support-faq.css と併用します。ページの土台（.aby-page／
   フォント・配色トークン等）は support-faq.css のものを再利用し、他ページと
   トンマナを統一しています。本ファイルには、この2ページに共通する
   固有パーツ（FVヒーロー画像・中央寄せの見出し・2カラム詳細ブロック・
   スタッフインタビュー・画像未定プレースホルダー）を追加します。

   ・すべて .aby-landing- プレフィックスでスコープしており、他のCSSファイルと
     クラス名の重複はありません。
   ========================================================================== */

/* --------------------------------------------------------------------------
   FVヒーロー画像（PC/SP切り替え）：XD仕様に合わせ、画面幅いっぱいに広げる。

   注意：.aby-page 自体が max-width:1000px; overflow:hidden; の
   ボックスのため、この中に置いたままでは vw 基準の幅指定であっても
   .aby-page の枠でクリップされて画面幅いっぱいになりません
   （また、vw基準の指定はスマホでアドレスバーの表示/非表示に伴い
   viewport高さ・幅の再計算が起きるたびに横方向のガタつき「ブレ」の
   原因にもなります）。そのため .aby-landing-hero は HTML 側で
   .aby-page の外側（直前の兄弟要素）に配置し、単純に body 幅
   いっぱいの通常ブロックとして描画する形にしています。
   -------------------------------------------------------------------------- */

.aby-landing-hero {
  position: relative;
  overflow: hidden;
  background: #eee;
}
.aby-landing-hero img { display: block; width: 100%; height: auto; aspect-ratio: 2608 / 1082; }

.aby-landing-hero__overlay {
  position: absolute;
  left: 60px; bottom: 56px;
  max-width: 460px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.aby-landing-hero__overlay h2 {
  font-family: var(--abyp-serif); font-size: 32px; font-weight: 600;
  margin: 0 0 18px; letter-spacing: .06em;
}
.aby-landing-hero__overlay p { font-size: 14px; line-height: 1.9; margin: 0; }

/* 中央配置バリエーション（ご利用ガイド等、画像中央にテキストを重ねるパターン） */
.aby-landing-hero__overlay--center {
  left: 50%; right: auto; bottom: auto; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 640px;
  width: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.aby-landing-hero__overlay--center h2 {
  font-size: 30px; letter-spacing: .12em; margin: 0;
}

/* --------------------------------------------------------------------------
   中央寄せの見出し（サポート体制／電話相談窓口詳細／スタッフインタビュー等）
   -------------------------------------------------------------------------- */

.aby-landing-title {
  text-align: center;
  font-family: var(--abyp-serif); font-size: 24px; font-weight: 600; color: var(--abyp-text);
  margin: 0 0 30px;
  padding-bottom: 16px;
  position: relative;
}
.aby-landing-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 40px; height: 2px; background: var(--abyp-gold);
}
.aby-landing-lead {
  text-align: center; max-width: 680px; margin: 0 auto 70px;
  font-size: 15px; line-height: 2; color: var(--abyp-text);
}

/* --------------------------------------------------------------------------
   2カラム詳細ブロック（電話相談窓口詳細／ショールームについて 等）
   -------------------------------------------------------------------------- */

.aby-landing-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px 60px;
  max-width: 900px; margin: 0 auto 70px;
  padding: 34px 40px;
  border: 1px solid var(--abyp-line-soft);
}
.aby-landing-cols__label {
  font-family: var(--abyp-serif); font-size: 15px; font-weight: 600; color: var(--abyp-gold);
  margin: 0 0 10px;
}
.aby-landing-cols__body { font-size: 14.5px; line-height: 1.9; color: var(--abyp-text); }
.aby-landing-cols__body p { margin: 0 0 .6em; }
.aby-landing-cols__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   スタッフインタビュー
   -------------------------------------------------------------------------- */

.aby-landing-interview { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 70px; }
.aby-landing-interview:last-child { margin-bottom: 0; }
.aby-landing-interview__photo { flex: 0 0 280px; }
.aby-landing-interview__body { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.aby-landing-interview__quote {
  font-family: var(--abyp-serif); font-size: 21px; font-weight: 600; line-height: 1.6;
  color: var(--abyp-text); margin: 0 0 12px;
}
.aby-landing-interview__byline { font-size: 12.5px; color: #777; margin: 0 0 26px; }
.aby-landing-interview__heading {
  font-family: var(--abyp-serif); font-size: 16.5px; font-weight: 600; color: var(--abyp-text);
  margin: 0 0 14px; line-height: 1.6;
}
.aby-landing-interview__text { font-size: 14px; line-height: 1.95; color: #444; }

/* --------------------------------------------------------------------------
   画像未挿入プレースホルダー（サイズ表記つき枠）
   -------------------------------------------------------------------------- */

.aby-landing-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #f7f7f7; border: 1px dashed #bbb; color: #888;
  font-size: 13px; line-height: 1.8; padding: 20px;
}
.aby-landing-placeholder span { display: block; }
.aby-landing-placeholder .aby-landing-placeholder__size { font-size: 12px; color: #aaa; margin-top: 4px; }

/* --------------------------------------------------------------------------
   ページ下部の関連ページ導線（カスタマーサポートページ）
   -------------------------------------------------------------------------- */

.aby-landing-links {
  display: flex; justify-content: center; gap: 40px;
  margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--abyp-line-soft);
}
.aby-landing-links a {
  font-size: 14.5px; color: var(--abyp-gold); text-decoration: underline;
}

/* --------------------------------------------------------------------------
   ショールーム：ご予約・アクセス情報
   -------------------------------------------------------------------------- */

.aby-landing-contact-block { max-width: 900px; margin: 0 auto 70px; font-size: 14.5px; line-height: 2; color: var(--abyp-text); }
.aby-landing-contact-block strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   スマートフォン
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* SP画像（guideFVsp.jpg／showroomFVsp.jpg等、1007×1078px）はPC画像と縦横比が
     異なるため、SP側の比率を明示して読み込み前のガタつき（CLS）を防止 */
  .aby-landing-hero img { aspect-ratio: 1007 / 1078; }
  .aby-landing-hero__overlay { left: 24px; right: 24px; bottom: 28px; max-width: none; }
  .aby-landing-hero__overlay h2 { font-size: 24px; margin-bottom: 12px; }
  .aby-landing-hero__overlay p { font-size: 13px; }
  .aby-landing-hero__overlay--center {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    max-width: none; width: calc(100% - 48px);
  }
  .aby-landing-hero__overlay--center h2 { font-size: 22px; }

  .aby-landing-title { font-size: 20px; margin-bottom: 24px; }
  .aby-landing-lead { margin-bottom: 46px; }

  .aby-landing-cols { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; margin-bottom: 46px; }

  .aby-landing-interview { flex-direction: column; gap: 20px; margin-bottom: 46px; }
  .aby-landing-interview__photo { flex: none; width: 100%; }
  .aby-landing-interview__quote { font-size: 19px; }

  .aby-landing-links { flex-direction: column; align-items: center; gap: 16px; }
  .aby-landing-contact-block { margin-bottom: 46px; }
}