/* ============================================================
   CLÉ SIESTE ／ 特集ページ用パーツ CSS
   ------------------------------------------------------------
   ショップ管理 > ニュース管理 で作る特集ページの
   本文に貼るパーツ群のスタイル。

   ・クラスはすべて ft- 接頭辞。テーマ既存のクラスとは衝突しない
   ・色とフォントは cle-common.css の --cle-* トークンを参照する
     （このCSSだけを他所で読む場合に備えて、下でフォールバック値も
       持たせている）
   ・テーマに追加したあと、ニュース管理の本文にパーツHTMLを貼れば
     このスタイルが当たる
   ============================================================ */

   .ft-page {
    --ft-bg:        var(--cle-bg, #f4ede1);
    --ft-paper:     var(--cle-paper, #faf6ef);
    --ft-ink:       var(--cle-ink, #1e1a16);
    --ft-ink-soft:  var(--cle-ink-soft, #5f564d);
    --ft-line:      var(--cle-line, rgba(90, 74, 56, .16));
    --ft-jp:        var(--cle-font-jp, 'Noto Sans JP', sans-serif);
    --ft-mincho:    var(--cle-font-mincho, 'Noto Serif JP', serif);
    --ft-en:        var(--cle-font-en, 'Cormorant Garamond', serif);
  
    /* パーツ間の余白。ここを変えると全体のリズムが変わる */
    --ft-gap: 64px;
  
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 96px;
    color: var(--ft-ink);
    font: 400 14px/2 var(--ft-jp);
  }
  
  /* パーツは縦に積むだけで間隔が揃う */
  .ft-page > * { margin: 0 0 var(--ft-gap); }
  .ft-page > *:last-child { margin-bottom: 0; }
  
  /* ------------------------------------------------------------
     01 ページ冒頭（タイトル＋リード）
     ------------------------------------------------------------ */
  .ft-hero { text-align: center; padding: 48px 0 8px; }
  .ft-hero__en {
    margin: 0 0 18px;
    font-family: var(--ft-en);
    font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--ft-ink-soft);
  }
  .ft-hero__title {
    margin: 0 0 24px; color: var(--ft-ink);
    font-family: var(--ft-mincho); font-weight: 300;
    font-size: 34px; line-height: 1.6; letter-spacing: .08em;
  }
  .ft-hero__lead {
    max-width: 640px; margin: 0 auto;
    font-size: 14px; line-height: 2.1; color: var(--ft-ink-soft);
  }
  
  /* ------------------------------------------------------------
     02 見出し
     ------------------------------------------------------------ */
  .ft-h2 {
    margin: 0 0 28px; color: var(--ft-ink);
    font-family: var(--ft-mincho); font-weight: 300;
    font-size: 24px; line-height: 1.7; letter-spacing: .08em;
    text-align: center;
  }
  .ft-h2 small {
    display: block; margin-top: 10px;
    font-family: var(--ft-en); font-size: 11px;
    letter-spacing: .24em; text-transform: uppercase; color: var(--ft-ink-soft);
  }
  .ft-h3 {
    margin: 0 0 16px; color: var(--ft-ink);
    font-family: var(--ft-mincho); font-weight: 400;
    font-size: 17px; line-height: 1.8; letter-spacing: .06em;
  }
  
  /* 見出しと直後の本文はくっつける */
  .ft-page > .ft-h2, .ft-page > .ft-h3 { margin-bottom: 20px; }
  
  /* ------------------------------------------------------------
     03 本文
     ------------------------------------------------------------ */
  .ft-text {
    max-width: 720px; margin-left: auto; margin-right: auto;
    font-size: 14px; line-height: 2.1; color: var(--ft-ink-soft);
  }
  .ft-text b, .ft-text strong { color: var(--ft-ink); font-weight: 500; }
  .ft-text a { color: var(--ft-ink); text-decoration: underline; text-underline-offset: .2em; }
  
  /* ------------------------------------------------------------
     04 画像（1枚）
     ------------------------------------------------------------ */
  .ft-image { margin-left: 0; margin-right: 0; }
  .ft-image img { display: block; width: 100%; height: auto; }
  .ft-image figcaption {
    margin-top: 12px;
    font-size: 11.5px; letter-spacing: .04em; color: var(--ft-ink-soft); text-align: center;
  }
  
  /* ------------------------------------------------------------
     05 画像＋テキスト（左右組み）
     ft-split--rev を足すと画像が右になる
     ------------------------------------------------------------ */
  .ft-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
  .ft-split img { display: block; width: 100%; height: auto; }
  .ft-split--rev .ft-split__media { order: 2; }
  .ft-split__body .ft-h3 { margin-top: 0; }
  .ft-split__body p {
    margin: 0; font-size: 13.5px; line-height: 2.1; color: var(--ft-ink-soft);
  }
  
  /* ------------------------------------------------------------
     06 カラム（2列・3列）
     ------------------------------------------------------------ */
  .ft-cols { display: grid; gap: 32px; }
  .ft-cols--2 { grid-template-columns: repeat(2, 1fr); }
  .ft-cols--3 { grid-template-columns: repeat(3, 1fr); }
  .ft-cols img { display: block; width: 100%; height: auto; margin-bottom: 14px; }
  .ft-cols h4 {
    margin: 0 0 8px; color: var(--ft-ink);
    font-family: var(--ft-mincho); font-weight: 400; font-size: 15px; letter-spacing: .04em;
  }
  .ft-cols p { margin: 0; font-size: 13px; line-height: 1.95; color: var(--ft-ink-soft); }
  
  /* ------------------------------------------------------------
     07 商品カード
     ------------------------------------------------------------ */
  .ft-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  /* 2点だけ並べるとき（レイヤリングの組み合わせなど）は中央寄せで少し小さく */
  .ft-items--2 { grid-template-columns: repeat(2, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; }
  .ft-item { display: block; color: inherit; text-decoration: none; }
  .ft-item img { display: block; width: 100%; height: auto; background: var(--ft-paper); }
  .ft-item__brand {
    margin: 16px 0 6px;
    font-family: var(--ft-en); font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ft-ink-soft);
  }
  .ft-item__name {
    margin: 0 0 8px; color: var(--ft-ink);
    font-family: var(--ft-mincho); font-weight: 400; font-size: 14.5px; line-height: 1.7;
  }
  .ft-item__price { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: var(--ft-ink-soft); }
  .ft-item:hover .ft-item__name { text-decoration: underline; text-underline-offset: .2em; }
  
  /* ------------------------------------------------------------
     08 引用
     ------------------------------------------------------------ */
  .ft-quote {
    color: var(--ft-ink); max-width: 680px; margin-left: auto; margin-right: auto;
    padding: 0 0 0 26px; border-left: 1px solid var(--ft-line);
    font-family: var(--ft-mincho); font-weight: 300;
    font-size: 17px; line-height: 2.1; letter-spacing: .04em;
  }
  .ft-quote cite {
    display: block; margin-top: 14px;
    font-family: var(--ft-jp); font-style: normal;
    font-size: 12px; letter-spacing: .06em; color: var(--ft-ink-soft);
  }
  
  /* ------------------------------------------------------------
     09 注釈ボックス
     ------------------------------------------------------------ */
  .ft-note {
    max-width: 720px; margin-left: auto; margin-right: auto;
    background: var(--ft-paper); border: 1px solid var(--ft-line);
    padding: 26px 30px;
  }
  .ft-note h4 {
    margin: 0 0 10px; color: var(--ft-ink);
    font-family: var(--ft-mincho); font-weight: 400; font-size: 14.5px; letter-spacing: .04em;
  }
  .ft-note p { margin: 0; font-size: 13px; line-height: 2; color: var(--ft-ink-soft); }
  
  /* ------------------------------------------------------------
     10 ボタン
     ------------------------------------------------------------ */
  .ft-btns { text-align: center; }
  .ft-btn {
    display: inline-block; min-width: 260px;
    padding: 17px 34px;
    background: var(--ft-ink); color: var(--cle-white, #fffdf9);
    font-size: 13px; letter-spacing: .12em; text-align: center; text-decoration: none;
    transition: opacity .25s;
  }
  .ft-btn:hover { opacity: .78; }
  .ft-btn--line { background: transparent; color: var(--ft-ink); border: 1px solid var(--ft-ink); }
  
  /* ------------------------------------------------------------
     11 区切り線
     ------------------------------------------------------------ */
  .ft-rule { height: 1px; background: var(--ft-line); border: 0; }
  
  /* ------------------------------------------------------------
     12 動画（YouTube / Vimeo の埋め込み）
     ------------------------------------------------------------ */
  .ft-video { position: relative; padding-top: 56.25%; }
  .ft-video iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }
  
  /* 横幅いっぱいのパーツ（カバー画像・帯）を置いたページでは、
     画面の右に余計な横スクロールが出ないようにする */
  html:has(.ft-cover), html:has(.ft-band) { overflow-x: hidden; }
  
  /* ------------------------------------------------------------
     13 カバー画像（横幅いっぱい・文字のせ）
     ページ冒頭を写真で見せたいとき。ft-hero の代わりに使う
     ------------------------------------------------------------ */
  .ft-cover {
    position: relative; overflow: hidden;
    /* 画面の端から端まで広げる */
    margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
    min-height: 58vh; display: flex; align-items: center; justify-content: center;
  }
  .ft-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ft-cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20, 16, 12, .22), rgba(20, 16, 12, .58));
  }
  .ft-cover__inner {
    position: relative; z-index: 1;
    max-width: 760px; padding: 88px 24px; text-align: center; color: var(--cle-white, #fffdf9);
  }
  .ft-cover__en {
    margin: 0 0 18px; font-family: var(--ft-en);
    font-size: 13px; letter-spacing: .28em; text-transform: uppercase; opacity: .9;
  }
  .ft-cover__title {
    margin: 0 0 20px; color: inherit;
    font-family: var(--ft-mincho); font-weight: 300;
    font-size: 38px; line-height: 1.55; letter-spacing: .08em;
  }
  .ft-cover__lead { margin: 0; font-size: 13.5px; line-height: 2.1; opacity: .92; }
  
  /* ------------------------------------------------------------
     14 背景色の帯（横幅いっぱい）
     区切りたい話題を、色を変えて見せる。中にパーツを入れられる
     ft-band--paper（明るい）／ ft-band--deep（少し濃い）／
     ft-band--dark（暗い。文字は自動で明るくなる）
     ------------------------------------------------------------ */
  .ft-band {
    margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
    padding: 76px 0; background: var(--ft-paper);
  }
  .ft-band__inner { max-width: 900px; margin: 0 auto; padding: 0 20px; }
  .ft-band__inner > * { margin: 0 0 32px; }
  .ft-band__inner > *:last-child { margin-bottom: 0; }
  .ft-band--deep { background: var(--cle-paper-strong, #f2ece1); }
  .ft-band--dark {
    background: #221c15;
    /* 帯の中だけ文字色を入れ替える。中のパーツはそのまま使える */
    --ft-ink: #ede7db;
    --ft-ink-soft: #b9b0a0;
    --ft-line: rgba(237, 231, 219, .22);
    --ft-paper: #2c251c;
    color: var(--ft-ink);
  }
  
  /* ------------------------------------------------------------
     スマートフォン
     ------------------------------------------------------------ */
  @media (max-width: 768px) {
    .ft-page { --ft-gap: 44px; padding: 0 20px 64px; font-size: 13.5px; }
    .ft-hero { padding: 32px 0 4px; }
    .ft-hero__title { font-size: 25px; }
    .ft-h2 { font-size: 20px; }
    .ft-split { grid-template-columns: 1fr; gap: 20px; }
    .ft-split--rev .ft-split__media { order: 0; }   /* スマホでは画像が上 */
    .ft-cols--2, .ft-cols--3 { grid-template-columns: 1fr; gap: 28px; }
    .ft-items { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .ft-note { padding: 20px 22px; }
    .ft-cover { min-height: 72vw; }
    .ft-cover__inner { padding: 56px 20px; }
    .ft-cover__title { font-size: 26px; }
    .ft-band { padding: 48px 0; }
    .ft-btn { min-width: 0; width: 100%; }
  }