/* =========================================
   TOP 共通スタイル（PCベース）
   - SP/タブレットの調整はファイル末尾へ集約
   - 数値はすべて元の値を維持
   UPDATED: 2025-11-12
========================================= */


/* =========================================
   Utilities / Base
========================================= */

/* アクセシビリティ用の視覚的非表示 */
.visuallyHidden,
.vh {
  position: absolute;
  clip: rect(0,0,0,0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* TOPページ共通の幅制御 */
.top .container {
  width: 1100px;                 /* 基準幅 */
  max-width: calc(100% - 40px);  /* 画面左右20pxずつの余白 */
  margin: 0 auto;                /* 中央寄せ */
}

/* セクション見出し（共通） */
.secTitle {
  font-size: 28px;               /* 見出しサイズ */
  font-weight: 700;
  margin: 64px 0 24px;           /* 上64 / 下24 の余白 */
}

/* =========================================
   Buttons
========================================= */

.btn {
  display: inline-block;
  padding: 12px 20px;            /* ボタンの内側余白 */
  border-radius: 999px;          /* Pill形状 */
  text-decoration: none;
  border: 1px solid transparent; /* 透過枠（ホバー時などの揺れ防止） */
}

.btnPrimary { 
  background: #7F5539;
  color: #fff;
  width: 165px; 
}
.btnGhost { 
  background: #fff;
  color: #7F5539;
  border-color: #7F5539;
  width: 165px; 
 }


/* =========================================
   Hero
========================================= */

.hero      { position: relative; }
.heroInner { position: relative; }

.hero img {
  width: 100%;
  object-fit: cover;
  object-position: center center; /* デフォルト中央 */
  display: block;
}

/* コピー（タイトル＋リード＋ボタンの塊） */
.heroCopy {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;    /* 横方向中央 */
  align-items: end;         /* 縦方向下寄せ */
  padding-bottom: 45px;     /* 画面下からの距離（ヒーロー上の配置） */
  text-align: center;
  color: #fff;
  text-shadow:
    0 0 4px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.35),
    0 0 12px rgba(0,0,0,0.3);
}

/* ボタン部分は影を外す（読みやすさ） */
.heroActions { text-shadow: none; }

/* ヒーロータイトル */
.heroTitle {
  font-size: clamp(28px, 5vw, 56px); /* 画面幅に応じた可変 */
  letter-spacing: .04em;
  margin: 0 0 8px;                   /* 下の余白8px */
}

/* ヒーローリード */
.heroLead {
  font-size: clamp(14px, 1.6vw, 18px); /* 画面幅で可変 */
  margin: 0 0 8px;                     /* リードとボタンの間隔 */
}

/* === Hero（スライド） === */
.heroSlides {
  position: relative;
  width: 100%;
  height: clamp(480px, 70vw, 640px); /* hero写真の高さ調整ポイント */
  overflow: hidden;
}

.heroSlide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.02);            /* 切替時の微ズーム */
  transition: opacity .8s ease, transform .8s ease;
}

.heroSlide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ヒーローナビ（左右ボタンのコンテナ） */
.heroNav {
  position: absolute;
  inset: auto 0 12px 0;              /* 下12pxに配置 */
  display: flex;
  justify-content: space-between;
  padding: 0 16px;                   /* 左右余白16px */
  pointer-events: none;              /* コンテナ自体はクリック不可 */
}

.heroNav button {
  pointer-events: auto;              /* ボタンのみクリック可 */
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.25);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;                 /* ボタンの押しやすさ */
  cursor: pointer;
}

/* ヒーロードット（インジケータ） */
.heroDots {
  position: absolute;
  bottom: 14px;                      /* 画面下から14px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;                          /* ドット間の距離 */
}

.heroDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(0,0,0,.2);
  cursor: pointer;
}

.heroDot.is-active { background: #fff; }


/* =========================================
   Cards（汎用カード・グリッド）
========================================= */

.cardGrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;                          /* カード間の余白 */
}

.cardGrid-3 { grid-template-columns: repeat(3, 1fr); }
.cardGrid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.card img {
  width: 100%;
  height: 180px;                      /* サムネ固定高 */
  object-fit: cover;
  display: block;
}

.cardBody { padding: 14px 16px 18px; } /* 上14 / 横16 / 下18 */

.cardTitle { font-size: 18px; margin: 0 0 6px; }
.cardText  { font-size: 14px; color: #555; margin: 0; }
.cardMeta  { font-size: 12px; color: #777; margin: 4px 0 0; }


/* =========================================
   PICK UP 都市（横スクロールレール）
========================================= */

.citiesRail {
  display: flex;
  overflow: auto;
  gap: 16px;
  scroll-snap-type: x mandatory;
  padding: 6px 4px;                   /* レールの上下左右余白 */
}

.cityCard {
  flex: 0 0 240px;                    /* 1カードの幅 */
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
}

.cityCard img {
  width: 100%;
  height: 150px;                      /* カバー画像高 */
  object-fit: cover;
  display: block;
}

.cityName { font-size: 16px; padding: 10px 12px; margin: 0; }

.railNav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.railNav button {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
}


/* =========================================
   読み物（メディアリスト：共通ベース）
========================================= */

.listMedia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

.media {
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: flex;                      /* 画像＋本文 横並び */
}

.media img {
  width: 40%;                         /* 画像の占有幅 */
  height: 160px;                      /* サムネ固定高 */
  object-fit: cover;
}

.mediaBody {
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mediaBody h3 { font-size: 18px; margin: 0 0 6px; }
.mediaBody p  { font-size: 14px; margin: 0; color: #555; }


/* =========================================
   共通セクション間隔
========================================= */

/* 直後のセクションの余白（ゼロ指定） */
section + section { margin-top: 0; }


/* =========================================
   ① Feature Journeys
========================================= */
.featuresJourneys {
  background: #FAF9F7;
  padding: 20px 0 72px 0;            /* 上20 / 下72 */
}

.featuresJourneys .secTitle.en {
  text-align: center;
  margin-bottom: 6px;
}

.featuresJourneys .secSub {
  text-align: center;
  margin-bottom: 28px;
  color: #7F5539;
  font-size: 14px;
}

/* グリッド設定：1列にメインカード、サブカード2列 */
.fjGrid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;  /* SP版は1列（縦並び） */
}

.fjCard {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.fjCard--lead {
  grid-column: span 1;  /* メインカードは1列幅 */
  width: 100%;  /* 横幅いっぱいに */
}

.fjCard--sub {
  grid-column: span 1;  /* サブカードは1列 */
}

.fjLink {
  display: grid;
  grid-template-rows: auto 1fr;      /* 画像→本文 */
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.fjFigure { position: relative; }

.fjFigure img {
  width: 100%;
  aspect-ratio: 16 / 9;              /* 通常16:9 */
  object-fit: cover;
  display: block;
}

.fjCard--lead .fjFigure img { aspect-ratio: 5 / 3; } /* リードは5:3 */

.fjBadge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #7F5539;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.fjBody { padding: 14px 16px 18px; }            /* 上14 / 下18 */
.fjCard--lead .fjBody { padding-top: 12px; }

.fjKicker {
  font-size: 12px;
  color: #7F5539;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.fjTitle {
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 0 0 6px;
  line-height: 1.35;
}

.fjExcerpt { font-size: 14px; color: #555; margin: 0; }

.fjCard:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
  transition: 0.25s ease;
}

/* サムネ列（leadのみ） */
.fjCard--lead .fjThumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 6px auto 0;
  max-width: 92%;
}

.fjCard--lead .fjThumb {
  flex: 0 0 auto;
  width: 30%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #E7E0DA;
  opacity: 0.95;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.fjCard--lead .fjThumb:hover { opacity: 1; transform: translateY(-2px); }
.fjCard--lead .fjThumb.is-active { outline: 2px solid #7F5539; opacity: 1; }

/* ============================
   レスポンシブ対応（PC版）
============================ */
@media (min-width: 768px) {
  .fjGrid {
    grid-template-columns: 1fr 1fr; /* PC版は2列 */
  }

  /* メインカードは2列分の幅を占める */
  .fjCard--lead {
    grid-column: span 2;  /* メインカードを横幅いっぱいに */
  }

  /* サブカードは1列ずつ */
  .fjCard--sub {
    grid-column: span 1; /* サブカード */
  }
}



/* =========================================
   ② Travel Essentials（Digest）
========================================= */

.travelEssentials {
  padding: 20px 0 72px 0;            /* 上20 / 下72 */
}

.travelEssentials .secTitle.en {
  text-align: center;
  margin-bottom: 6px;
}

.travelEssentials .secSub {
  text-align: center;
  margin-bottom: 28px;
  color: #7F5539;
  font-size: 14px;
}

/* グリッド：PC 4列 */
.digestGrid.cardGrid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  gap: 24px;
}

/* カード */
.digestCard {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.digestCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* 画像（16:9枠） */
.digestThumb {
  aspect-ratio: 16 / 9;              /* サムネ比率 */
  overflow: hidden;
}

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

/* 本文 */
.digestMeta { padding: 14px 16px 16px; } /* 上14 / 下16 */

.digestTitle {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 6px;
  /* 2行で省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.digestExcerpt {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 10px;
  opacity: .9;
  /* 2行で省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 注意：cardMeta は上部の汎用と数値が違う（ここは digest 用） */
.cardMeta {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cardMeta .dot { opacity: .5; }

/* draft（執筆中） */
.digestLink.is-disabled {
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.digestCard.is-draft { opacity: .9; }

.digestCard.is-draft .digestThumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.08));
}

.badgeDraft {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  background: #E5E7EB;
  color: #374151;                    /* グレー系（ブランドに合わせて調整可） */
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* View all ボタン（共通ボタンがあればそれを使ってOK） */
.digestMore { text-align: right; margin-top: 20px; }

.btnMore {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #ccc;
  text-decoration: none;
  font-size: 14px;
  transition: background-color .2s ease, border-color .2s ease;
}

.btnMore:hover { background: #f7f7f7; border-color: #bbb; }


/* =========================================
   ③ City Moments
========================================= */

.cityMoments {
  background: #FAF9F7;
  padding: 20px 0px 72px 0px;
}

.cityMoments .secTitle.en {
  text-align: center;
  margin-bottom: 6px;
}

.cityMoments .secSub {
  text-align: center;
  margin-bottom: 28px;
  color: #7F5539;
  font-size: 14px;
}

/* グリッド→横レール化 */
.cmGrid {
  list-style: none;
  margin: 0;
  padding: 0 4px 8px;                /* レール上下左右余白 */
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.cmCard {
  flex: 0 0 320px;                    /* カード幅 */
  scroll-snap-align: start;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #EAE6E0;
  transition: transform .22s ease, box-shadow .22s ease;
}

.cmFigure img {
  width: 100%;
  aspect-ratio: 4 / 3;               /* 4:3 比率 */
  object-fit: cover;
  display: block;
}

/* スクロールバー */
.cmGrid::-webkit-scrollbar { height: 6px; }
.cmGrid::-webkit-scrollbar-thumb { background: #E0D8CF; border-radius: 999px; }
.cmGrid::-webkit-scrollbar-track { background: transparent; }

/* Coming Soon バッジ */
.cmFigure { position: relative; }

.cmBadge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #7F5539;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: .03em;
}

.cmCard.is-coming img {
  filter: grayscale(.6);
  opacity: .6;
}

.cmLink.is-disabled {
  pointer-events: none;
  cursor: default;
}

/* テキスト */
.cmBody   { padding: 14px 16px 16px; }
.cmName   { font-size: 18px; margin: 0 0 6px; color: #222; }

.cmExcerpt {
  font-size: 14px;
  color: #555;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Coming はクリック不可＆少し淡く */
.cmCard.is-coming { opacity: 0.7; pointer-events: none; }

.cmNav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.cmNav .cmPrev,
.cmNav .cmNext {
  appearance: none;
  border: 1px solid #E0D8CF;
  background: #fff;
  color: #7F5539;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 34px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.cmNav .cmPrev:hover,
.cmNav .cmNext:hover { background: #F3EEE9; transform: translateY(-1px); }


/* =========================================
   ④ The Italian Edit  ※ .reads でスコープ
========================================= */

.reads {
  background-color: #FAF9F7;
  padding: 20px 0px 72px 0px;
}

.reads .secTitle.en {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  font-size: 28px;
  margin-bottom: 4px;
}

.reads .secSub {
  text-align: center;
  font-size: 14px;
  color: #7F5539;
  margin-bottom: 40px;
}

/* Italian Edit の見た目上書き（数値そのまま） */
.reads .listMedia {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

.reads .media {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.reads .media:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.reads .media img {
  width: 100%;
  aspect-ratio: 16 / 9;              /* サムネ比率 */
  object-fit: cover;
  display: block;
}

.reads .mediaBody { padding: 16px 18px 20px; }

.reads .mediaBody h3 {
  font-size: 18px;
  color: #222;
  margin: 0 0 8px;
}

.reads .mediaBody p {
  font-size: 14px;
  color: #555;
  margin: 0;
}


/* =========================================
   Links / CTA
========================================= */

/* 1) 全ページ：基本リンクは下線なし */
a { text-decoration: none; }

/* = CTA 二択 = */
.ctaWrap {
  display: grid;
  grid-template-columns: 1fr 1fr;    /* 2分割 */
  gap: 16px;
  margin: 48px 0 64px;               /* 上48 / 下64 */
}

.ctaItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  border-radius: 16px;
  border: 1px solid #7F5539;
  text-decoration: none;
}

.ctaPlan   { background: #7F5539; color: #fff; }
.ctaBasics { background: #fff;   color: #7F5539; }


/* =========================================
   動きが苦手なユーザー配慮
========================================= */

@media (prefers-reduced-motion: reduce) {
  .heroSlide,
  .heroSlide.is-active {
    transition: none;
  }
}


/* ============ <=768px（Smartphone） ============ */
@media (max-width: 768px) {

  /* -----------------------------
     見出し・サブタイトル・本文の文字サイズをPCの80%に
     ※ コメントの「← 元」はPC値 / 設定値は80%
  ----------------------------- */
  .featuresJourneys, .cityMoments,.travelEssentials {
  padding: 20px 0 0px 0;
  }   


  /* 共通見出し */
  .secTitle {
    margin: 40px 0 16px;   /* 余白は既存SP仕様のまま */
    font-size: 22.4px;     /* 28px ← 元：28px の80% */
  }

  /* 共通サブタイトル（secSub系はPC 14px） */
  .featuresJourneys .secSub,
  .travelEssentials .secSub,
  .cityMoments .secSub,
  .reads .secSub {
    font-size: 11.2px;     /* 14px ← 元：14px の80% */
  }

  /* Italian Edit 見出し（PC 28px） */
  .reads .secTitle.en {
    font-size: 22.4px;     /* 28px ← 元：28px の80% */
  }

  /* Hero内の文字 */
  .heroTitle {
    font-size: clamp(22.4px, 4vw, 44.8px); /* clamp(28px,5vw,56px) の80% */
  }
  .heroLead {
    font-size: clamp(11.2px, 1.28vw, 14.4px); /* clamp(14px,1.6vw,18px) の80% */
  }

  /* カード系テキスト */
  .cardTitle { font-size: 14.4px; }  /* 18px → 14.4px */
  .cardText  { font-size: 11.2px; }  /* 14px → 11.2px */
  .cardMeta  { font-size:  9.6px; }  /* 12px → 9.6px */

  /* City Moments テキスト */
  .cmName    { font-size: 14.4px; }  /* 18px → 14.4px */
  .cmExcerpt { font-size: 11.2px; }  /* 14px → 11.2px */

  /* Feature Journeys テキスト */
  .fjKicker  { font-size:  9.6px; }  /* 12px → 9.6px */
  .fjTitle   { font-size: clamp(13.4px, 1.66vw, 16.6px); } /* clamp(18px,2.2vw,22px) → 80% */
  .fjExcerpt { font-size: 10.2px; }  /* 14px → 11.2px */

  /* Travel Essentials（Digest）本文 */
  .digestTitle   { font-size: 12.8px; } /* 16px → 12.8px */
  .digestExcerpt { font-size: 11.2px; } /* 14px → 11.2px */

  /* Italian Edit（.reads）本文 */
  .reads .mediaBody h3 { font-size: 14.4px; } /* 18px → 14.4px */
  .reads .mediaBody p  { font-size: 11.2px; } /* 14px → 11.2px */


  /* -----------------------------
     レイアウト（既存SP指定は踏襲）
  ----------------------------- */

  /* カード/グリッド */
  .cardGrid-3 { grid-template-columns: 1fr; }     /* 3列→1列 */
  .cardGrid-4 { grid-template-columns: 1fr 1fr; } /* 4列→2列 */

  .card img { height: 160px; }                    /* サムネ高（既存） */

  /* メディアリスト（縦並び） */
  .listMedia { grid-template-columns: 1fr; }
  .media     { flex-direction: column; }          /* 既存：共通.media はflex */

  .media img {
    width: 100%;
    height: 160px;
  }

  /* CTA：1カラム化 */
  .ctaWrap { grid-template-columns: 1fr; }


.btnPrimary { 
  background: #7F5539;
  color: #fff;
  font-size: 10px;
  padding: 6px 12px;
  width: 110px; 
}
.btnGhost { 
  background: #fff;
  color: #7F5539;
  border-color: #7F5539;
  font-size: 10px;
  padding: 6px 12px;
  width: 110px; 
 }


  /* Hero：ボタン縦積み */
  .heroActions .btn + .btn {
    margin-left: 0;
    margin-top: 8px;
  }

  /* Italian Edit：共通見出しのSPサイズ（上で22.4px設定済み） */
  .secTitle.en { font-size: 22.4px; } /* 22px → 22.4px（80%に厳密化） */


  /* -----------------------------
     Italian Edit を flex → block に変更
     ※ 共通 .media の flex を無効化
  ----------------------------- */
.listMedia {
    display: block !important;
  }

  .media {
    display: block !important; /* 縦積み */
    margin-bottom: 25px !important; /* 各記事の間に余白 */
  }

  .media img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .mediaBody {
    display: block !important;
    padding: 16px 18px 20px;
  }

  /* -----------------------------
     既存SPの他要素（踏襲）
  ----------------------------- */
  /* excerptのテキストの長さを調整 */
  .fjExcerpt {
    white-space: normal;      /* テキストが折り返すように設定 */
    overflow: visible;        /* テキストが溢れた場合、表示する */
    text-overflow: unset;     /* 省略表示しないように */
    font-size: 11.2px;          /* SP版のフォントサイズ調整 */
    line-height: 1.6;         /* 行間調整 */
  }
  /* Feature Journeys：1カラム化 */
  .fjGrid { grid-template-columns: 1fr; }
  .fjCard--lead { grid-row: auto; }

  .fjCard--lead .fjThumbs {
    gap: 6px;
    max-width: 90%;
  }
  .fjCard--lead .fjThumb {
    width: 23%;
    border-radius: 6px;
  }

/* 特集カード内の .fjBody の調整 */
.fjBody {
  height: auto !important;           /* 高さを自動調整（最適な高さに） */
  padding: 16px;                     /* 内部の余白調整 */
  min-height: 120px !important;      /* 最小高さを120pxに設定（確実に高さを確保） */
  flex-grow: 0 !important;           /* 高さが内容に応じて調整されるように */
  box-sizing: border-box;            /* padding をボックスの計算に含める */
}


  /* City Moments：横レールのまま（指定踏襲） */
  .cmGrid { grid-template-columns: 1fr; } /* ※ 横スクロール運用でも影響なし */
}