/* =========================================
   SIENA Feature Page 専用スタイル
========================================= */

.featurePage.is-siena {
  background: #fffaf1;   /* あたたかいベージュ */
  color: #2A2A2A;        /* やわらかいダークグレー（本文色） */
}

.featurePage.is-siena .container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 導入 HERO */
.featHero .featKicker {
  font-size: 12px; /* PC版 */
  color: #7F5539;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.featHero .featTitle {
  font-size: 30px; /* PC版 */
  font-weight: 700;
  margin: 0 0 10px;
}
.featHero .featLead {
  font-size: 16px; /* PC版 */
  line-height: 1.9;
  color: #2f2f2f;
  margin: 0;
}

/* 章レイアウト */
.featSection {
  margin: 36px 0 0 0;
}

.featBodyText {
  margin: 10px 0 18px;
  line-height: 1.9;
  color: #222;
}

/* 特集ページの小見出し（sub heading） */
.featSectionSub {
  font-size: 14px; /* PC版 */
  letter-spacing: .05em;
  color: #7F5539;
  margin: 6px 0 20px;
  text-align: left; /* ← A案：左揃え */
}

/* ===============================
   Siena Feature — Chapter 1
   ※見出し系は common.css を使用
================================ */

/* 章の上下余白（必要に応じて調整） */
#ch1.featSection .container { padding-top: 8px; }

/* 段落（横幅いっぱい＝コンテナ幅いっぱい） */
#ch1 .featIntro,
#ch1 .featBodyText {
  margin: 0 0 20px;
  line-height: 1.9;
}

/* メイン写真（コンテナ幅いっぱい） */
#ch1 .featHero {
  margin: 12px 0 18px;
}
#ch1 .featHero a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
#ch1 .featHero img {
  width: 100%;
  height: auto;              /* フル幅・高さは比率維持 */
  display: block;
  object-fit: cover;         /* 万一のため */
}

/* キャプションは従来踏襲 */
#ch1 .caption {
  font-size: 12px; /* PC版 */
  color: #777;
  margin-top: 6px;
}

/* サブ写真2枚：横並び。合計幅＝メイン写真の幅（同じコンテナ幅） */
#ch1 .featGallery.-pair {
  --gap: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
#ch1 .featGallery.-pair .fgItem a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
#ch1 .featGallery.-pair .fgItem img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* SP：可読性優先で2枚→1列。必要ならここを2列のままに変更可 */
@media (max-width: 768px) {
  #ch1 .featGallery.-pair {
    grid-template-columns: 1fr;
  }

  .featHero .featKicker {
    font-size: 9.6px; /* PC版 12px の 80% */
  }
  .featHero .featTitle {
    font-size: 24px; /* PC版 30px の 80% */
  }
  .featHero .featLead {
    font-size: 12.8px; /* PC版 16px の 80% */
  }

  .featSectionSub {
    font-size: 11.2px; /* PC版 14px の 80% */
  }
}

/* ===============================
   CH2: Duomo & Piccolomini
   （common.css の見出し/サブに依存）
================================= */
#ch2 { margin-top: 64px; }
#ch2 .featSectionHead { margin-bottom: 20px; }

#ch2 .featBodyText {
  line-height: 1.9;
  margin: 0 0 24px;
  /* 左寄せのまま container の幅に従う */
}

#ch2 .featPhoto {
  margin: 0;
}

#ch2 .featPhoto img,
#ch2 .featMediaImage img {
  width: 100%;
  height: auto;            /* フル幅、縦は画像比率に委ねる */
  display: block;
  border-radius: 12px;
}

#ch2 .featPhoto.-full {
  margin: 8px 0 24px;
}

#ch2 .caption {
  font-size: 12px; /* PC版 */
  color: #777;
  margin-top: 6px;
}

/* 2枚横並び（メイン1枚と同じ総幅で揃う） */
#ch2 .featGrid.twoUp {
  --gap: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin: 0 0 28px;
}

/* 写本：左写真 × 右テキスト（メディアブロック） */
#ch2 .featMedia {
  --gap: 20px;
  display: grid;
  grid-template-columns: 5fr 7fr; /* 画像:テキスト ≒ 5:7 */
  gap: var(--gap);
  align-items: center;
  margin: 8px 0 8px;
}

#ch2 .featMediaText {
  line-height: 1.9;
}

/* ===== SP ===== */
@media (max-width: 768px) {
  #ch2 .featBodyText { margin: 0 0 20px; padding: 0 4px; }
  #ch2 .featGrid.twoUp { grid-template-columns: 1fr; gap: 12px; }
  #ch2 .featMedia { grid-template-columns: 1fr; gap: 14px; }
}

/* ========================================
   CH3：Siena Streets & Quiet Rhythm
======================================== */

#ch3 {
  margin-top: 64px;
}

/* 本文（第1・2章と統一：左寄せ、container幅いっぱい） */
#ch3 .featBodyText {
  line-height: 1.9;
  margin: 0 0 24px;
}

/* メイン写真（横幅いっぱい） */
#ch3 .featPhoto.-full {
  margin: 8px 0 28px;
}
#ch3 .featPhoto img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

#ch3 .caption {
  font-size: 12px; /* PC版 */
  color: #777;
  margin-top: 6px;
}

/* 交互レイアウト（2カラム） */
#ch3 .featGrid.twoCol {
  --gap: 24px;
  display: grid;
  grid-template-columns: 5fr 7fr; /* 画像:文章 = 約 42% : 58% */
  gap: var(--gap);
  align-items: center;
  margin: 32px 0 40px;
}

/* Aブロック → 左写真 / 右本文 */
#ch3 .twoCol.-revA figure { order: 1; }
#ch3 .twoCol.-revA .featBodyText { order: 2; }

/* Bブロック → 左本文 / 右写真 */
#ch3 .twoCol.-revB .featBodyText { order: 1; }
#ch3 .twoCol.-revB figure { order: 2; }

/* 交互レイアウトの写真 */
#ch3 .twoCol figure img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* SP：縦積み（テキスト → 写真の順に統一） */
@media (max-width: 768px) {

  #ch3 .featGrid.twoCol {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* SP時は “テキスト → 写真” で読みやすさ優先 */
  #ch3 .twoCol.-revA .featBodyText { order: 1; }
  #ch3 .twoCol.-revA figure        { order: 2; }

  #ch3 .twoCol.-revB .featBodyText { order: 1; }
  #ch3 .twoCol.-revB figure        { order: 2; }
}

/* ========================================
   CH4：Siena Food
======================================== */

#ch4 {
  margin-top: 64px;
}

#ch4 .featBodyText {
  line-height: 1.9;
  margin: 0 0 24px;
}

/* 写真サイズ：2章・3章と完全統一 */
#ch4 .featPhoto {
  margin: 0;
}

#ch4 .featPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* 2枚横並び（パニーニ／料理） */
#ch4 .featGrid.pairImgs {
  --gap: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin: 28px 0 36px;
}

/* 親 figure の aspect-ratio を他章と統一 */
#ch4 .pairImgs figure {
  aspect-ratio: 3 / 2; /* 他章の2枚横並びと同じバランス */
  overflow: hidden;
}

/* ジュース：左写真 × 右本文 */
#ch4 .featSplit {
  --gap: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
  margin: 36px 0 40px;
}

#ch4 .featSplit .featText {
  line-height: 1.9;
}

#ch4 .caption {
  font-size: 12px; /* PC版 */
  color: #777;
  margin-top: 6px;
}

/* SP（スマホ） */
@media (max-width: 768px) {

  #ch4 .featGrid.pairImgs {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #ch4 .pairImgs figure {
    aspect-ratio: 3 / 2;
  }

  #ch4 .featSplit {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* SPは写真→本文の順でも自然に読める */
}

/* ========== Chapter 5: Palio ========== */

/* 本文（常に左寄せ、章1と同トーン） */
#ch5 .featBodyText p {
  margin: 0 0 1.1em;
  line-height: 1.9;
  text-align: left;
}

/* 2枚横並び（他章と同寸を“変数”で統一） */
:root {
  /* 他章の2枚横並びと合わせる比率。必要なら 4/3 などに変更可 */
  --feat-duo-aspect: 3 / 2;
  --feat-gap: 12px;
}
#ch5 .featDuo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feat-gap);
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
}
#ch5 .duoItem figure { margin: 0; }
#ch5 .duoItem img {
  width: 100%;
  aspect-ratio: var(--feat-duo-aspect);
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
#ch5 .caption {
  font-size: 12px; /* PC版 */
  color: #777;
  margin-top: 6px;
}

/* テキスト左＋写真右のスプリット */
#ch5 .featSplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--feat-gap);
  align-items: center;
  margin: 24px 0 28px;
}
#ch5 .splitText p { margin: 0; line-height: 1.9; }
#ch5 .splitImage { margin: 0; }
#ch5 .splitImage img {
  width: 100%;
  aspect-ratio: var(--feat-duo-aspect); /* 2枚横並びと同寸感で統一 */
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* SP */
@media (max-width: 768px) {
  #ch5 .featDuo { grid-template-columns: 1fr; }
  #ch5 .featSplit { grid-template-columns: 1fr; }
  /* テキスト→写真の順で縦積み（記述順でOK） */
}

/* ===== Afterword（静かに左寄せで流す） ===== */
.featSection.-afterword .featBodyText {
  margin: 16px 0 28px;     /* ← 他章と同じ余白 */
  line-height: 1.9;        /* ← 他章の本文と統一 */
  text-align: left;        /* ← センター禁止、左寄せで統一 */
}

/* 段落間の調整（他章と同じ）*/
.featSection.-afterword .featBodyText p + p {
  margin-top: 12px;
}


/* CTAリンク（中央配置のままでも静か） */
.featAfterCta {
  margin-top: 28px;
  text-align: right;       /* ← これも左に寄せるともっと落ち着く */
}

/* リンクそのものの見え方は今のままでも可 */
.afLink {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: border-color .2s ease, transform .2s ease;
}


.afLink:hover {
  border-color: #999;
  transform: translateY(-1px);
}

.afArrow { display: inline-block; }

.featurePage.is-siena .afLink {
  color: #7F5539; /* トスカーナ系ブラウン */
  text-decoration: none;
}

.featurePage.is-siena .afLink:hover {
  color: #5E3E2A; /* 少し濃くするだけ */
}

/* SP調整 */
@media (max-width: 768px) {
  .featSection.-afterword .featBodyText {
    padding: 0 8px; /* 端の詰まりを軽減 */
  }
}

/* Siena特集だけ画像クリック無効化 */
.featurePage.is-siena a:has(> img) {
  pointer-events:none; cursor:default;
}
/* ===============================
   SP版のみ適用（768px 以下） 
================================= */
@media (max-width: 768px) {
  .featHero .featKicker {
    font-size: 9.6px; /* PC版 12px の 80% */
  }
  .featHero .featTitle {
    font-size: 24px; /* PC版 30px の 80% */
  }
  .featHero .featLead {
    font-size: 12.8px; /* PC版 16px の 80% */
  }
  .featIntro P {
    font-size: 12.8px; /* PC版 16px の 80% */
  }
  .featSectionSub {
    font-size: 11.2px; /* PC版 14px の 80% */
  }
 .featMediaText p ,.splitText p {
    font-size: 12.8px; /* PC版 16px の 80% */
  }
  .featBodyText p {
    font-size: 12.8px; /* PC版 16px の 80% */
  }
  /* コンテナの幅を100%に調整 */
  .featurePage.is-siena .container {
    padding: 20px;  /* パディングの調整 */
    max-width: 100%;
  }

  /* 画像の調整 */
  .featHero img,
  .featGrid .featPhoto img {
    width: 100%;    /* 画像がはみ出さないように */
    height: auto;
    object-fit: cover;
  }

  /* 画像がはみ出すのを防ぐ */
  .featHero a,
  .featGrid .fgItem a {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  
 .featurePage.is-siena .container {
    width: 100%;  /* コンテナが100%の幅で表示 */
    max-width: 100%;  /* 最大幅も100%に設定 */
    padding: 20px;  /* パディング調整 */
  }

  /* 必要であれば他の調整 */
  .featHero, .featSection, .featBodyText {
    margin: 0;  /* 不要なマージンを削除 */
    padding: 0; /* 不要なパディングを削除 */
  }

@media (max-width: 768px) {
  .featBodyText p {
    text-align: justify;
  }
@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}
}
}