/* =========================================================
 * layout.css（整頓版・全文）
 * 役割：ページ全体の骨格・配置ルール
 *
 * ここに入れる：
 * - コンテナ幅 / 余白 / セクション間隔
 * - ヒーロー（page-hero）
 * - パンくず
 * - ページ構造としての整列・配置
 *
 * ここに入れない：
 * - ボタン・カード等のUI部品 → components.css
 * - 本文（h2,p,ul 等）の見た目 → common.css
 * ======================================================= */


/* =========================================================
 * 1. スクロール挙動
 * ======================================================= */
html{
  scroll-behavior: smooth;
}


/* =========================================================
 * 2. コンテナ共通
 * - 「トップ以外」は page-header / page-content を常に 1100px コンテナへ
 * - パンくずは header.php 直下に集約（breadcrumb-wrap 側で同じコンテナ）
 * ======================================================= */
body:not(.home) .site-main :is(.page-header, .page-content){
  max-width: var(--container);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}

/* ページヘッダー位置 */
body:not(.home) .site-main .page-header{
  margin: 32px auto 0;
}

/* 本文エリア */
body:not(.home) .site-main .page-content{
  margin: 0 auto 56px;
}


/* =========================================================
 * 3. ページタイトル（レイアウト観点）
 * ※ 色やフォント強調は common.css ではなく base/layout 側
 * ======================================================= */
body:not(.home) .site-main .page-header .page-title,
.faq-archive-header{
  margin: 0 0 16px;
}


/* =========================================================
 * 4. ヒーロー共通
 * - 高さ400px / 角丸なし
 * ======================================================= */
.page-hero{
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: #e9eef3;
}

.page-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ヒーロー内テキスト */
.page-hero__inner{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 24px;
}

.page-hero__title{
  margin: 0;
}


/* =========================================================
 * 5. FAQアーカイブ（既存互換）
 * ======================================================= */
.site-main--faq-archive{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}



/* =========================================================
 * 6. パンくず
 * ======================================================= */
 .breadcrumb{
  font-size: 14px;
  line-height: 1.6;
}

.breadcrumb a{
  font-size: inherit;
}

@media (max-width: 768px){
  .breadcrumb{
    font-size: 13px;
  }
}

.breadcrumb-list .sep{
  margin: 0 6px;
  font-size: 0.85em;
  color: #666;
}
 
 
.breadcrumb-wrap{
  max-width: var(--container);
  margin: 12px auto 24px;
  padding: 0 var(--gutter);
}

.page-hero + .breadcrumb-wrap{
  margin-top: 16px;
}

/* Breadcrumb（折り返し前提で安定） */
.breadcrumb-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-list > li{
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  white-space: normal;       /* ← nowrap をやめる */
}

/* 長いラベルがある時だけ自然に折る */
.breadcrumb-list a{
  overflow-wrap: anywhere;
}

/* 区切り文字 */
.breadcrumb-list .sep{
  margin: 0 6px;
  color: #666;
}