/* =====================
   CSS Variables
   ===================== */
:root {
  --color-black: #373737;
  --color-gray: #888888;
  --color-light-gray: #f8f8f8;
  --color-border: #e8e8e8;
  --color-white: #ffffff;

  --font-en: 'Cormorant Infant', serif;
  --font-jp: 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;

  /* ホバー時のテキスト/要素の薄さ。ここを変えると全体の濃さがまとめて変わる */
  --hover-opacity: 0.6;

  /* 全ページ共通のコンテンツ最大幅（ヘッダー・TOP・一覧・記事詳細で共有） */
  --content-max: 1600px;
}

/* =====================
   Reset & Base
   ===================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* height:100% は付けない：WordPress管理バーが付ける margin-top:32px と
     足し算になって画面下に32pxのはみ出し（余分なスクロール）が出るため。
     全体の高さは body 側の height/min-height:100dvh で確保している。 */
}

body {
  font-family: var(--font-en);
  color: var(--color-black);
  background: #FCFCFC;
  -webkit-font-smoothing: antialiased;

  display: grid;
  grid-template-rows: auto 1fr;
  /* 列を明示しないと暗黙の auto 列になり、中身(ヘッダーのナビ等)の最小幅より
     縮まずSPで横はみ出しする。minmax(0,1fr) で画面幅まで縮められるようにする */
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh; /* Safari iOS: アドレスバーを除いた実際の表示領域 */
  overflow: hidden;
}

body.admin-bar {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

/* アーカイブ・固定ページ：通常スクロールに戻す
   （TOPページのみ overflow:hidden + 100vh が有効） */
body.archive,
body.tax-country,
body.category,
body.page:not(.home),
body.single {
  overflow: auto;
  height: auto;
  min-height: 100dvh; /* コンテンツが少ない時もフッターを画面下に保つ */
}

/* 管理バー表示中（ログイン中の開発時のみ）：管理バーの高さ分を差し引く
   601px以上は32px、782px以下は46px */
body.admin-bar.archive,
body.admin-bar.tax-country,
body.admin-bar.category,
body.admin-bar.page:not(.home),
body.admin-bar.single {
  min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar.archive,
  body.admin-bar.tax-country,
  body.admin-bar.category,
  body.admin-bar.page:not(.home),
  body.admin-bar.single {
    min-height: calc(100dvh - 46px);
  }
}

/* スクリーンリーダー・SEOにだけ届く非表示テキスト */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* =====================
   Header
   ===================== */
.site-header {
  width: 100%;
  padding-top: 24px;
  position: relative;
  z-index: 200;
  background: #FCFCFC;
}

.header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ABOUT は左端、INSTAGRAM は右端、VIA-LOG は中央 */
.header-about { justify-self: start; }
.header-logo  { justify-self: center; }
.header-instagram { justify-self: end; }

.header-about,
.header-instagram {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
}

.header-about:hover,
.header-instagram:hover {
  opacity: var(--hover-opacity);
}


.header-logo {
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}

.header-logo:hover {
  opacity: var(--hover-opacity);
}

.header-logo__img {
  display: block;
  width: 90px;
  height: auto;
}

@media (max-width: 768px) {
  .header-logo__img {
    width: 80px;
  }
}

.logo-dash {
  display: inline-block;
  width: 8px;
  height: 2px;
  background: var(--color-black);
  flex-shrink: 0;
}

.header-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 33px;
  padding: 20px 16px 28px;
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
}

.header-nav__group {
  display: flex;
  align-items: center;
  gap: 33px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* メニューが開いている間はナビリンクを非表示 */
body:has(.site-menu.is-open) .header-nav__group {
  opacity: 0;
  visibility: hidden;
}

/* 左端寄せ：WORLD / JAPAN */
.header-nav__group--left {
  justify-content: flex-start;
}

/* 右端寄せ：FOOD / ARCHITECTURE / TIPS */
.header-nav__group--right {
  justify-content: flex-end;
}

.header-nav a {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
}

.header-nav a:hover {
  opacity: var(--hover-opacity);
}

.header-nav a.current .nav-link__en {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* =====================
   Opening Intro
   ===================== */
/* 白い全画面オーバーレイ。JSで最後にゆっくり溶暗（フェード）して本編へ */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}

/* ロゴ＋ラインを縦に中央寄せ */
.site-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ロゴ：変形させず opacity のみでフェードイン（拡大するとSVGがラスタライズされ粗く見えるため） */
.site-intro__logo {
  width: 80px;
  max-width: 40vw;
  height: auto;
  opacity: 0;
  will-change: opacity;
}

/* ロゴ下に並ぶアイキャッチ（64×64・左から順に出る） */
.site-intro__thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  max-width: 90vw;
}
.site-intro__thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
}

/* スマホでは2段にならないよう、5枚目以降を隠して4枚（1段）に */
@media (max-width: 768px) {
  .site-intro__thumb:nth-child(n+5) {
    display: none;
  }
}

/* JS無効時・セッション初回以外は表示しない（本文をオーバーレイで隠さない） */
html:not(.js) .site-intro,
html.intro-done .site-intro {
  display: none;
}

/* 動きに弱いユーザーへの配慮：アニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
  .site-intro { display: none; }
}

/* =====================
   Top Page
   ===================== */
.top-page {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%; /* 中身が絶対配置なので幅を明示しないと潰れる */
  max-width: var(--content-max);
  margin: 0 auto;
}

.post-grid {
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* =====================
   アーカイブ一覧グリッド（WORLD / JAPAN / FOOD 等）
   TOPページのスクロールギャラリーとは別コンテキスト
   ===================== */
.post-grid--list {
  /* TOPページの設定をリセット */
  height: auto;
  position: static;
  overflow: visible;

  /* 3カラムグリッド。minmax(0,1fr) で長いタイトル等による列の膨張（はみ出し）を防ぐ */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 16px;
  padding: 40px 16px 48px;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* アーカイブ用カードのリセット＆上書き */
.post-grid--list .post-card {
  display: block; /* TOPの grid-template-rows をリセット */
  backface-visibility: visible;
  transform: none;
}

/* アーカイブ用：画像エリアを正方形で固定 */
.post-grid--list .post-card__image-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  will-change: clip-path;
}

.post-grid--list .post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-grid--list .post-card__image--placeholder {
  width: 100%;
  height: 100%;
}

/* 記事なしメッセージ */
.no-posts {
  padding: 60px 40px;
  font-size: 14px;
  color: #888;
  letter-spacing: 0.08em;
}

/* ページ送り（番号のみ・矢印なし） */
.post-pagination {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上揃え。currentのborder-bottom分は下に足されるだけなので数字の上端は揃う */
  gap: 24px;
  padding: 0 0 80px;
}
.post-pagination .page-numbers {
  font-family: var(--font-en);
  font-size: 20px;
  line-height: 1;
  color: var(--color-black);
  text-decoration: none;
}
.post-pagination a.page-numbers {
  color: #999;
  transition: color 0.3s ease;
}
.post-pagination a.page-numbers:hover {
  color: var(--color-black);
}
.post-pagination .page-numbers.current {
  color: var(--color-black);
}
.post-pagination .page-numbers.dots {
  color: #999;
}

@media (max-width: 768px) {
  .post-pagination {
    gap: 24px;
    padding: 0 0 80px;
  }
  .post-pagination .page-numbers {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .post-grid--list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 32px 16px 40px;
  }

  /* 一覧カードはTOPページ用の重ね表示（position:absolute / visibility:hidden /
     pointer-events:none）を打ち消して常に表示・クリック可能にする。
     これを忘れるとSPで一覧記事が消える・タップしても詳細へ飛べない。 */
  .post-grid--list .post-card {
    position: static;
    inset: auto;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ペアの重ね表示制御 */
.post-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  padding: 0 16px;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  visibility: hidden;
}

.post-pair.is-active {
  pointer-events: auto;
  visibility: visible;
  z-index: 1;
}

.post-pair.is-incoming {
  pointer-events: none;
  visibility: visible;
  z-index: 2;
}

.post-pair.is-incoming .post-card__meta {
  transition: none;
}

/* =====================
   Post Card
   ===================== */
.post-card {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.post-card__image-wrap {
  display: block;
  overflow: hidden;
  min-height: 0;
  position: relative;
  will-change: clip-path;
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.post-card:hover .post-card__image {
  transform: scale(1.05);
}

.post-card__image--placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-light-gray);
}

.post-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 2px 24px;
  overflow: hidden;
}

.post-card__meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  clip-path: inset(0 0 -4px 0); /* transform された子要素を確実にクリップ（下は padding 分だけ開ける） */
  /* padding-bottom: 3px; */ /* ディセンダー（g や y の下部）が切れないよう余白 */
}

.post-card__meta-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  clip-path: inset(0 0 -3px 0);
  padding: 0 2px 2px;
}

.post-card__title {
  font-family: 'Cormorant Infant', var(--font-jp); /* serif を挟まず日本語フォントへ直接フォールバック */
  font-size: 16px;
  font-weight: 300; /* W3 = Light */
  line-height: 1.8; /* 180% */
  letter-spacing: 0.04em; /* 4% */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.post-card__title a {
  color: var(--color-black);
  transition: opacity 0.2s;
}

.post-card__title a:hover {
  opacity: var(--hover-opacity);
}

.post-card__date {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.05em;
}

.post-card__country {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.post-card__flag-dots {
  display: flex;
  gap: 2px;
  align-items: center;
}

.post-card__flag-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex-shrink: 0;
}

.post-card__flag-dot--white {
  box-shadow: inset 0 0 0 1px #DDDDDD;
}

.post-card__country-name {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.08em;
}

.post-card__category {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.1em;
}

/* =====================
   PC ナビ用ハンバーガー
   ===================== */
.menu-toggle--mobile {
  display: none; /* スマホのみ表示 */
}

.menu-toggle--nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-black);
}

/* MENU ラベル */
.menu-toggle__label {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

/* 三本線 → X のアイコン（PC: SVG, モバイル: HTML span） */
.menu-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle__svg {
  display: block;
  overflow: visible;
  width: 15px;  /* 20px → 縮小 */
  height: 9px;  /* 12px → 縮小 */
}

/* PC SVG rect：fillで描画＋transform-boxで左端を基点に */
.menu-toggle__svg .menu-toggle__bar {
  fill: #888888;
  transform-box: fill-box;
  transform-origin: left center; /* 左寄せ：scaleX を左端から縮める */
  transition: transform 0.4s ease-out, opacity 0.2s ease;
}

/* Hamburger: 左端基点で scaleX → 各バーが左寄せに見える */
.menu-toggle__svg .menu-toggle__bar--1 { transform: scaleX(1); }     /* 20px 表示 */
.menu-toggle__svg .menu-toggle__bar--2 { transform: scaleX(0.75); }  /* 15px 表示 */
.menu-toggle__svg .menu-toggle__bar--3 { transform: scaleX(0.5); }   /* 10px 表示 */

/* X 形成：回転は center 基点でないとズレるため上書き */
.menu-toggle--nav.is-open .menu-toggle__bar--1 {
  transform-origin: center;
  transform: translate(0, 5px) rotate(45deg) scaleX(0.8);
}
.menu-toggle--nav.is-open .menu-toggle__bar--2 {
  opacity: 0;
}
.menu-toggle--nav.is-open .menu-toggle__bar--3 {
  transform-origin: center;
  transform: translate(0, -5px) rotate(-45deg) scaleX(0.8);
}

/* モバイル用ハンバーガー（HTML span 構造） */
.menu-toggle--mobile .menu-toggle__bar {
  display: block;
  height: 1px;
  background: #888888;
  transition: transform 0.3s, opacity 0.3s, width 0.3s;
}

.menu-toggle--mobile .menu-toggle__bar:nth-child(1) { width: 24px; }
.menu-toggle--mobile .menu-toggle__bar:nth-child(2) { width: 17px; }
.menu-toggle--mobile .menu-toggle__bar:nth-child(3) { width: 12px; }

.menu-toggle--mobile.is-open .menu-toggle__bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
  width: 20px;
}
.menu-toggle--mobile.is-open .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle--mobile.is-open .menu-toggle__bar:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
  width: 20px;
}

/* =====================
   サイトメニュー（PC・スマホ共通）
   ===================== */
.site-menu {
  position: fixed;
  top: 120px;
  left: 0;
  width: 100%;
  /* 背景を画面全幅で覆い、後ろのTOPギャラリーが左右に見切れないようにする
     （中身は .site-menu__inner で中央1240pxに維持） */
  max-width: none;
  max-height: calc(100vh - 120px);
  background: #FCFCFC;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain; /* スクロールが背景に伝わるのを防ぐ */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.site-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-menu__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* SP ヘッダーバー（PC では非表示） */
.site-menu__topbar {
  display: none;
}

/* PC 閉じるボタン（ヘッダーの MENU トグルに役割統合済のため非表示） */
.site-menu__close-pc {
  display: none !important;
}

@media (min-width: 769px) {

  /* PC: COUNTRYサブヘッダーはセクションラベルで代替するため非表示 */
  .site-menu__country-hd {
    display: none;
  }

  /* PC: WORLD側とPURPOSE側で列幅が違い、同じ比率だと画像高さがズレるため、
     高さを固定して両側を揃える（幅はobject-fit:coverで吸収） */
  .site-menu__region-img-wrap,
  .site-menu__purpose-img-wrap {
    aspect-ratio: auto;
    height: 100px;
  }
}

/* ボディ：2カラムグリッド（2fr 1fr：COUNTRY側が2画像、PURPOSE側が1画像） */
.site-menu__body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0;
  padding: 20px 80px 0;
}

.site-menu__col--country {
  padding-right: 64px;
  border-right: 1px solid var(--color-border);
}

.site-menu__col--purpose {
  padding-left: 64px;
}

/* セクションラベル（COUNTRY / PURPOSE） */
.site-menu__section-label {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--color-gray);
  margin-bottom: 24px;
  text-align: left;
}

/* COUNTRY見出しはWORLDへのリンク（aタグでも見た目はラベルのまま、ホバーで反応） */
a.site-menu__section-label--link {
  display: inline-block;
  color: var(--color-gray);
  text-decoration: none;
  transition: opacity 0.2s;
}
a.site-menu__section-label--link:hover {
  opacity: var(--hover-opacity);
}

/* COUNTRY ヘッダー（SPのみ表示） */
.site-menu__country-hd {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  cursor: default;
}

.site-menu__country-title {
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* アコーディオンアイコン（閉：＋ / 開：—） */
.site-menu__hd-icon {
  display: block;
  width: 11px;
  height: 11px;
  position: relative;
  flex-shrink: 0;
}

.site-menu__hd-icon::before,
.site-menu__hd-icon::after {
  content: '';
  display: block;
  position: absolute;
  background: #888888;
  top: 50%;
  left: 50%;
}

/* 横棒（常に表示） */
.site-menu__hd-icon::before {
  width: 11px;
  height: 1px;
  transform: translate(-50%, -50%);
}

/* 縦棒 */
.site-menu__hd-icon::after {
  width: 1px;
  height: 11px;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s, transform 0.25s;
}

/* PC: COUNTRYヘッダーは常に— (縦棒非表示) */
.site-menu__country-hd .site-menu__hd-icon::after {
  opacity: 0;
}

/* 地域ヘッダーは + （閉）→ — （開） */
.site-menu__region-hd .site-menu__hd-icon::after {
  opacity: 1;
}

.site-menu__region-trigger.is-open .site-menu__hd-icon::after {
  opacity: 0;
}

/* 地域ヘッダーはSPのみクリック可能 */

/* 地域グリッド（PC: 2カラム常時表示） */
.site-menu__regions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 32px;
}

/* 地域トリガー（画像＋名前まとめてクリック要素） */
.site-menu__region-trigger {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s;
}

.site-menu__region-trigger:hover {
  opacity: var(--hover-opacity);
}

/* 地域名 */
.site-menu__region-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

/* ホバー時または開いている時に線を表示 */
.site-menu__region-trigger:hover .site-menu__region-hd,
.site-menu__region-trigger.is-open .site-menu__region-hd {
  border-bottom-color: var(--color-border);
}

/* 国リスト */
.site-menu__country-grid {
}

/* PC: アイコン非表示（PCはホバーで常時展開） */
.site-menu__region-hd .site-menu__hd-icon {
  display: none;
}

.site-menu__region-name {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 0.06em;
}

/* パノラマ画像（3:1）— FOODと同サイズ固定 */
.site-menu__region-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  background: var(--color-light-gray);
}


.site-menu__region-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-menu__region-trigger:hover .site-menu__region-img {
  transform: scale(1.05);
}

/* 国リスト（GSAPで高さ制御。初期はheight:0で閉じている／JS未実行時のFOUC対策） */
.site-menu__country-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* 画面幅が狭いと2カラムでは見切れるので1カラム化 */
@media (max-width: 1200px) {
  .site-menu__country-grid {
    grid-template-columns: 1fr;
  }
}

.site-menu__country-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  letter-spacing: 0.08em;
  color: var(--color-black);
  transition: filter 0.2s;
  /* FOUC対策：初期はGSAPで非表示状態（hoverで開く時にフェード） */
  opacity: 0;
}

.site-menu__country-name {
  font-size: 14px;
}

/* GSAPがopacityをインライン制御するため filter で独立してホバー演出 */
.site-menu__country-item:hover {
  filter: opacity(var(--hover-opacity));
}

.site-menu__country-flags {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.site-menu__flag-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex-shrink: 0;
}

.site-menu__flag-dot--white {
  box-shadow: inset 0 0 0 1px #ddd;
}

/* PURPOSE リスト */
.site-menu__purpose-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-menu__purpose-item {
  display: flex;
  flex-direction: column;
  color: var(--color-black);
  transition: opacity 0.2s;
}

.site-menu__purpose-item:hover {
  opacity: var(--hover-opacity);
}

.site-menu__purpose-img-wrap {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-light-gray);
}

.site-menu__purpose-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-menu__purpose-item:hover .site-menu__purpose-img {
  transform: scale(1.05);
}

.site-menu__purpose-name {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: 0.12em;
  padding: 8px 0; /* WORLD側(region-hd)の上下8pxに揃える */
}

/* =====================
   サイトメニュー SP
   ===================== */
@media (max-width: 768px) {

  /* top / max-height は JS で実測値を動的にセット（main.js: updateMenuPosition） */

  .site-menu__inner {
    padding: 16px 16px 60px;
  }

  /* SP ヘッダーバー */
  /* SP: topbar は非表示（ヘッダーの × で代用） */
  .site-menu__topbar {
    display: none;
  }

  .site-menu__topbar-logo {
    display: flex;
    align-items: center;
  }

  .site-menu__topbar-logo__img {
    display: block;
    height: 22px;
    width: auto;
  }

  .site-menu__topbar-dash {
    display: inline-block;
    width: 7px;
    height: 1.5px;
    background: var(--color-black);
    flex-shrink: 0;
  }

  /* × 閉じるボタン */
  .site-menu__close-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
  }

  .site-menu__close-btn span {
    display: block;
    width: 20px;
    height: 1px;
    background: #888888;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
  }

  .site-menu__close-btn span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .site-menu__close-btn span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* 1カラム */
  .site-menu__body {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .site-menu__col--country {
    padding-right: 0;
    border-right: none;
  }

  .site-menu__col--purpose {
    padding-left: 0;
    margin-top: 64px; /* SPは縦積みなのでCOUNTRYとの間に余白を確保 */
  }

  /* COUNTRYアコーディオンヘッダーは非表示（常時展開） */
  .site-menu__country-hd {
    display: none;
  }

  /* 地域一覧：2カラム（minmax(0,1fr)で左右均等を強制） */
  .site-menu__regions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-height: none;
    overflow: visible;
    gap: 20px;
  }

  /* SP: 地域ヘッダーに + / — アイコンを表示 */
  .site-menu__region-hd .site-menu__hd-icon {
    display: block;
  }

  /* SP: クリック可能 */
  .site-menu__region-hd {
    cursor: pointer;
  }
}

/* =====================
   Mobile ( ~768px )
   ===================== */
@media (max-width: 768px) {

  /* ヘッダー：ABOUT・INSTAGRAM も表示 */
  .header-about,
  .header-instagram {
    font-size: 14px;
  }

  /* INSTAGRAM → INSTA に短縮（ABOUTと文字数を揃える） */
  .header-instagram__gram {
    display: none;
  }

  .site-header {
    padding-top: 12px;
    padding-bottom: 0;
  }

  /* header-nav：左右リンクを隠してハンバーガーのみ中央表示
     下余白は0（一覧ページはグリッド側に上余白があるため） */
  .header-nav {
    display: flex;
    justify-content: center;
    padding: 8px 16px 0px 16px;
    gap: 0;
  }

  /* TOP（home）はギャラリーが直下に来るため、ヘッダー下に余白を残す */
  body.home .header-nav {
    padding-bottom: 16px;
  }

  .header-nav__group--left,
  .header-nav__group--right {
    display: none;
  }

  /* PC用ナビハンバーガーをモバイルでも表示（MENUテキストは非表示） */
  .menu-toggle--nav {
    display: inline-flex;
  }

  /* SP: アイコンをひと回り大きく */
  .menu-toggle__svg {
    width: 22px;
    height: 14px;
  }

  .menu-toggle__label {
    display: none;
  }

  /* モバイル専用ハンバーガーは不要 */
  .menu-toggle--mobile {
    display: none;
  }

  /* カード：1列全幅表示 */
  .post-pair {
    display: block;
  }

  /* 画像は全幅、テキストは16px余白 */
  .post-card__meta {
    padding-left: 16px;
    padding-right: 16px;
  }

  .post-pair.is-mobile-active {
    visibility: visible !important;
    pointer-events: none;
  }

  .post-card {
    position: absolute;
    inset: 0 16px; /* 左右に16pxの余白 */
    display: grid;
    grid-template-rows: 1fr auto;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
    min-height: 0;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  /* テキスト部分の左右padding：PCと揃えて2px・下に8px追加 */
  .post-card__meta {
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 32px;
  }

  /* JS実行前のフォールバック：最初のペアの1枚目は必ず表示 */
  .post-pair.is-active .post-card:first-child {
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
  }

  .post-card.is-card-active {
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
  }

  .post-card.is-card-incoming {
    visibility: visible;
    pointer-events: none;
    z-index: 2;
  }

  /* SP: section label（COUNTRY / PURPOSE）下余白 */
  .site-menu__section-label {
    margin-bottom: 32px;
  }

  /* SP: FOODなどのテキスト余白をASIA等（region-hd padding:8px 2px）に揃える */
  .site-menu__purpose-name {
    padding: 8px 0;
  }

  /* SP: PURPOSEも2カラム */
  .site-menu__purpose-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }

  /* SP: タップ時に薄くしない */
  .site-menu__region-trigger:hover {
    opacity: 1;
  }

  /* SP: 国名リストは1カラム（地域が2カラムのため幅が狭い） */
  .site-menu__country-grid {
    grid-template-columns: 1fr;
    max-width: none;
    padding-left: 2px;
    padding-right: 2px;
  }
}

/* =============================================
   アクティブフィルター（絞り込みタグ）
   Figma仕様: H=22(hug), padding=4, gap=8, border=1px inside line/gray
   ============================================= */

.active-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0px 40px 0;
}

/* チップ共通：メニューの site-menu__country-item と同スタイル＋枠線 */
.filter-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 8px;
  border: 1px solid #DDDDDD;
  background: #fff;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 国旗ドット群：メニューの site-menu__country-flags と同じ */
.filter-chip__flag {
  display: flex;
  align-items: center;
  gap: 2px;           /* メニューと同じ gap */
  flex-shrink: 0;
}

/* ドットサイズ：メニューの site-menu__flag-dot と同じ 8px */
.filter-chip__flag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

/* 白は輪郭線（メニューと同じ box-shadow 方式） */
.filter-chip__flag-dot--white {
  box-shadow: inset 0 0 0 1px #ddd;
}

/* 国名 / カテゴリ名：メニューの site-menu__country-name と同じ */
.filter-chip__label {
  color: var(--color-black);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* × ボタン：チップ内に旗→ラベル→×の順でインライン配置（縦は中央揃え） */
.filter-chip__remove {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  transition: opacity 0.2s;
}

.filter-chip__remove:hover {
  opacity: 0.6;
}

@media (max-width: 768px) {
  .active-filters {
    padding: 20px 16px 0;
  }
}

/* 画像幅が300px未満になる幅（644px）で1カラムに戻す */
@media (max-width: 644px) {
  .site-menu__regions {
    grid-template-columns: 1fr;
  }
  .site-menu__purpose-list {
    grid-template-columns: 1fr;
  }

  /* 1カラム時：画像・テキストはコンテナの左右余白（inner padding 16px）いっぱいまで広げる。
     画像比率は .site-menu__region-img-wrap の aspect-ratio:3/1 で自動維持される。 */
  .site-menu__region,
  .site-menu__purpose-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .site-menu__region-trigger {
    width: 100%;
    max-width: none;
  }
  /* 国リストは2カラムのまま幅いっぱいに */
  .site-menu__country-grid {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
  .site-menu__purpose-img-wrap {
    max-width: none;
  }
  .site-menu__purpose-name {
    width: 100%;
    max-width: none;
    text-align: left;
  }
}

/* =====================
   記事詳細ページ（single.php）※PC実装（Figma: detail / node 1708-4234）
   - レイアウト：左メインカラム + 右関連サイドバー（384px）
   - メインカラム：画像(2:1) → 日付/カテゴリ → タイトル/国 → INFORMATION → INDEX → 概要 → 本文
   - 本文は max 720px、heroと情報枠はカラム幅いっぱい
   ===================== */
/* main要素に限定（WordPressはbodyにも .single を付けるため、.single 単体だと二重適用になる） */
main.single {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 16px 96px;
  color: var(--color-black);
  box-sizing: border-box;
}

/* ---------- 縦1カラム：メイン（中央寄せ） + 下部OTHER（全幅） ---------- */
.single__layout {
  display: flex;
  flex-direction: column;
}

/* ---------- メインカラム（中央寄せ 800px） ---------- */
.single__main {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* === FV（画像 + 日付/カテゴリ + タイトル/国） === */
.single-fv {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.single-fv__image {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1; /* Figma 800:400 */
  overflow: hidden;
}
.single-fv__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.single-fv__img--placeholder {
  background: var(--color-light-gray);
  width: 100%;
  height: 100%;
}

.single-fv__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 1px;
}
.single-fv__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* 日付（左上） */
.single-fv__dates {
  display: flex;
  align-items: center;
  gap: 6px;
}
.single-fv__date,
.single-fv__date-modified {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.28px;
  text-transform: uppercase;
}
.single-fv__date-icon {
  font-size: 12px;
  color: var(--color-gray);
  line-height: 1;
}

/* カテゴリ（右上） */
.single-fv__categories {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.single-fv__category {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.28px;
  text-transform: uppercase;
}
.single-fv__category a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.single-fv__category a:hover {
  opacity: var(--hover-opacity);
}
.single-fv__sep {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 12px;
  color: var(--color-black);
}

/* カテゴリ＋国を右側にまとめる（国名をカテゴリの右に置く） */
.single-fv__meta-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

/* タイトル（左下） */
.single-fv__title {
  font-family: 'Cormorant Infant', var(--font-jp); /* 英字はCormorant、日本語はヒラギノにフォールバック */
  font-weight: 300;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: 1.04px;
  margin: 0;
  color: var(--color-black);
}

/* 国（右下） */
.single-fv__country {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.single-fv__flag {
  display: flex;
  gap: 2px;
}
.single-fv__flag-dot {
  width: 8px;
  height: 8px;
  display: block;
}
.single-fv__flag-dot--white {
  border: 0.5px solid #ddd;
  background: #fff;
}
.single-fv__country-name {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.56px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* === INFORMATION + INDEX グループ（グレー枠の幅を広い方に自動で揃える） === */
.single-info-group {
  display: grid;
  grid-template-columns: minmax(400px, max-content); /* 400px以上・広い方の内容幅に合わせる */
  justify-content: start;
  gap: 32px;
}
/* グループ内では各ボックスはトラック幅いっぱい（＝広い方に揃う） */
.single-info-group > .single-facility,
.single-info-group > .single-index {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* === INFORMATION（施設情報・グレー枠 + 2列グリッド） === */
.single-facility {
  width: fit-content;
  min-width: 400px;
  max-width: 100%;
  padding: 24px 32px;
  background: #f7f7f7;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.single-facility__heading {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  margin: 0;
  color: var(--color-black);
}
.single-facility__list {
  /* 1項目=1行で縦に積む（2列と1列が混在すると不揃いに見えるため、PCでも常に1行ずつ） */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.single-facility__row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  min-width: 0;
  font-family: var(--font-jp); /* 営業日などの数字も日本語フォントで揃える */
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-black);
}
.single-facility__label {
  width: 80px;
  letter-spacing: 0.9px;
  margin: 0;
  flex-shrink: 0;
}
.single-facility__value {
  letter-spacing: 1.2px;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  /* ぶら下げインデント：折り返した行が「：」の真下に来ないよう、2行目以降を1文字ぶん字下げして本文頭に揃える */
  padding-left: 1em;
  text-indent: -1em;
}
.single-facility__value::before {
  content: "：";
}
/* 長文の項目（--full）は幅が広がりすぎて枠からはみ出さないよう、値の折り返し幅に上限を設ける */
.single-facility__row--full .single-facility__value {
  max-width: 460px;
  min-width: 0;
  flex: 1 1 auto;
}

/* === INDEX（目次・背景なし・40pxインデント） === */
.single-index {
  width: fit-content;
  min-width: 400px;
  max-width: 100%;
  padding: 24px 32px;
  background: #f7f7f7;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.single-index__title {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--color-black);
}
.single-index__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.single-index__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
}
.single-index__num {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 1.28px;
  color: var(--color-black);
  flex-shrink: 0;
}
.single-index__link {
  font-family: 'Cormorant Infant', var(--font-jp); /* 英字はCormorant、日本語はヒラギノにフォールバック */
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 1.28px;
  color: var(--color-black);
  text-decoration: none;
  transition: opacity 0.2s;
}
.single-index__link:hover {
  opacity: var(--hover-opacity);
}

/* === 概要（抜粋・max 720px） === */
.single-summary {
  width: 100%;
  max-width: 720px;
  font-family: var(--font-jp);
  font-weight: 300;
  color: var(--color-black);
  margin-bottom: -40px; /* メインの gap:40px を打ち消し、概要文と本文の間隔を本文側の余白に任せる */
}
.single-summary p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
  margin: 0;
}
.single-summary p + p {
  margin-top: 24px;
}

/* === 本文（max 720px、可変） === */
.single-content {
  width: 100%;
  max-width: 720px;
  font-family: var(--font-jp);
  color: var(--color-black);
}
.single-content > * + * {
  margin-top: 24px;
}
/* 本文の最初の要素の上マージン（PC40px / SP24px）。
   目次と本文の間隔は .single__main の gap（PC40px / SP28px）が別に効いているため、
   h2 の margin-top がそのまま乗ると最初の見出しだけ広くなりすぎる（PC104px / SP68px）。
   ここで上書きして、目次の下端からの空きを PC80px / SP52px にそろえる。 */
.single-content > *:first-child {
  margin-top: 40px !important;
}
.single-content p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
  margin: 24px 0;
}
.single-content h2 {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 0.96px;
  text-align: left;
  margin-top: 64px !important;
  padding-bottom: 0;
  scroll-margin-top: 24px;
}
.single-content h3 {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  text-align: left;
  margin-top: 32px !important;
  padding-bottom: 0;
}
.single-content h4 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.72px;
  margin-top: 24px !important;
  padding-bottom: 0;
}
.single-content h5 {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.64px;
  margin-top: 0 !important;
  padding-bottom: 0;
}
.single-content img,
.single-content figure {
  display: block;
  width: 100%;
  height: auto;
}
.single-content figure img {
  margin: 0;
}
.single-content figure figcaption {
  font-size: 12px;
  color: var(--color-gray);
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.5px;
}
.single-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.single-content a:hover {
  opacity: var(--hover-opacity);
}
.single-content ul,
.single-content ol {
  padding-left: 1.5em;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.64px;
}
.single-content blockquote {
  border-left: 3px solid var(--color-border);
  padding: 8px 0 8px 24px;
  color: var(--color-gray);
  font-style: italic;
}

/* ---------- 関連記事 OTHER（本文下：PC3列グリッド / SP縦並び） ---------- */
.single__aside {
  min-width: 0;
  margin-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Fin装飾：PCでは非表示（SPのみ表示） */
.single-fin {
  display: none; /* SP のメディアクエリで flex に */
  align-items: center;
  gap: 24px;
  margin-bottom: 40px; /* Fin装飾の下に余白 */
}
.single-fin__line {
  flex: 1;
  border-top: 1px solid var(--color-border);
  height: 0;
}
.single-fin__text {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.96px;
  color: var(--color-gray);
  white-space: nowrap;
}

/* OTHER見出し：PCは中央寄せ */
.single__aside-title {
  display: block;
  text-align: center;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-black);
  margin: 0;
}

/* カード一覧：PCは3列グリッド（全幅） */
.single__related {
  display: grid;
  /* 1fr=minmax(auto,1fr) は中身より縮まないため、長い nowrap タイトルで列が広がる。
     minmax(0,1fr) で列幅を均等に固定し、画像の正方形維持とタイトルの … 省略を効かせる */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  min-width: 0;
}

/* VIEW ALL：OTHERカードの下・中央寄せの一覧リンク（左に戻る矢印） */
.single__view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding-top: 20px;
  padding-right: 24px;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--color-black);
  text-decoration: none;
  transition: opacity 0.2s;
}
.single__view-all:hover {
  opacity: var(--hover-opacity);
}
.single__view-all-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.related-card__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.related-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* 幅に対して正方形。カードが広がっても縦長にならない */
  overflow: hidden;
}
.related-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  /* ホバー時のズーム（一覧カード .post-card__image と同じ挙動に統一） */
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.related-card__link:hover .related-card__img {
  transform: scale(1.05);
}
.related-card__img--placeholder {
  background: var(--color-light-gray);
  width: 100%;
  height: 100%;
}
/* テキスト周りは一覧カード（post-card）と共通の見た目に揃える */
.related-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.related-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.related-card__row--top {
  padding: 0 2px;
}
.related-card__row--bottom {
  padding: 0 2px;
}
.related-card__title {
  font-family: 'Cormorant Infant', var(--font-jp); /* 英字はCormorant、日本語はヒラギノにフォールバック */
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  margin: 0;
  min-width: 0;            /* flex内で省略を効かせるため */
  overflow: hidden;
  white-space: nowrap;     /* 1行で省略（一覧と同じ） */
  text-overflow: ellipsis;
}
.related-card__country {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.related-card__flag {
  display: flex;
  gap: 2px;
  align-items: center;
}
.related-card__flag-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex-shrink: 0;
}
.related-card__flag-dot--white {
  box-shadow: inset 0 0 0 1px #DDDDDD;
}
.related-card__country-name {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.08em;
}
.related-card__date {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.05em;
}
.related-card__category {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.1em;
}

/* =====================
   VIA-LOG ブロックスタイル（記事本文内で使う独自バリエーション）
   ===================== */

/* --- ギャラリー：複数画像を横並びに（本文用の figure 全幅指定を解除） --- */
.single-content .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  --wp--style--unstable-gallery-gap: 16px;
  gap: 16px;
}
.single-content .wp-block-gallery figure.wp-block-image {
  width: auto;
  flex-grow: 1;
  margin: 0;
}

/* --- ギャラリー：密着（ギャップなし、画像と画像がくっつく） --- */
.wp-block-gallery.is-style-vialog-tight {
  --wp--style--unstable-gallery-gap: 0;
  gap: 0 !important;
}
.wp-block-gallery.is-style-vialog-tight .wp-block-image,
.wp-block-gallery.is-style-vialog-tight figure {
  margin: 0 !important;
}

/* --- ギャラリー：広め（32pxギャップ） --- */
.wp-block-gallery.is-style-vialog-roomy {
  --wp--style--unstable-gallery-gap: 32px;
  gap: 32px !important;
}

/* --- カラム：密着 --- */
.wp-block-columns.is-style-vialog-tight {
  gap: 0 !important;
  margin-bottom: 24px;
}
.wp-block-columns.is-style-vialog-tight > .wp-block-column {
  padding: 0;
}

/* --- カラム：標準（24pxギャップ） --- */
.wp-block-columns.is-style-vialog-medium {
  gap: 24px !important;
}

/* --- 画像：横幅いっぱい（記事幅826pxを超えて表示） --- */
.single-content .wp-block-image.is-style-vialog-fullbleed {
  max-width: 1248px;
  width: calc(100vw - 32px);
  margin-left: calc(50% - 50vw + 16px);
  margin-right: calc(50% - 50vw + 16px);
}
.single-content .wp-block-image.is-style-vialog-fullbleed img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 段落：リード文 --- */
.wp-block-paragraph.is-style-vialog-lead,
p.is-style-vialog-lead {
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.72px;
  font-weight: 400;
  color: var(--color-black);
}

/* --- 段落：キャプション --- */
.wp-block-paragraph.is-style-vialog-caption,
p.is-style-vialog-caption {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: var(--color-gray);
  text-align: center;
  margin-top: -16px; /* 上の画像との距離を詰める */
}

/* --- 引用：VIA-LOG引用（左罫線 + 斜体 + Cormorant） --- */
.wp-block-quote.is-style-vialog-quote {
  border-left: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 32px 24px;
  margin: 48px 0;
  background: transparent;
  font-style: normal;
  color: var(--color-black);
}
.wp-block-quote.is-style-vialog-quote p {
  font-family: var(--font-en), var(--font-jp);
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 0.4px;
  text-align: center;
  font-weight: 400;
}
.wp-block-quote.is-style-vialog-quote cite {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-gray);
  font-style: normal;
}

/* =====================
   記事詳細ページ SP（max-width: 768px）※Figma: node 1714-4656
   ===================== */
@media (max-width: 768px) {

  main.single {
    padding: 24px 0 80px;
  }

  /* 2カラム → 縦1カラム（関連記事は本文下のOTHERへ） */
  .single__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .single__main {
    gap: 28px;
    padding: 0 20px;
  }

  /* FV画像：SPは横長にせず正方形 1:1（横長にしない） */
  .single-fv__image {
    aspect-ratio: 1 / 1;
  }

  /* FVヘッダー：日付/カテゴリは横並び、タイトル→国は縦積み */
  .single-fv__head {
    gap: 8px;
  }
  /* 日付・カテゴリの行：画面端から左右4pxあける */
  .single-fv__head-row--top {
    padding: 0 4px;
    gap: 12px;
  }
  .single-fv__head-row--bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* 日付は縮めず、カテゴリ＋国の右まとまりに残り幅を割り当てる */
  .single-fv__dates {
    flex-shrink: 0;
  }
  .single-fv__meta-right {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* カテゴリが多くて溢れたら … で省略（国名は省略せず右に残す） */
  .single-fv__categories {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .single-fv__category {
    display: inline;
  }
  .single-fv__sep {
    margin: 0 2px;
  }
  .single-fv__country {
    flex-shrink: 0;
  }
  .single-fv__title {
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.88px;
  }

  /* INFORMATION + INDEX グループ：SPは全幅・縦並び */
  .single-info-group {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* INFORMATION：枠は残し1列に */
  .single-facility {
    width: 100%;
    min-width: 0;
    padding: 24px;
    gap: 14px;
  }
  .single-facility__list {
    row-gap: 12px;
  }
  /* SPは横幅が狭いので、長い項目の値の幅制限を外して画面いっぱいに使う */
  .single-facility__row--full .single-facility__value {
    max-width: none;
  }
  /* 長い項目（--full）はSPだとラベル＋値を横並びにすると窮屈なので、ラベルを上・値を下の縦並びにする */
  .single-facility__row--full {
    flex-direction: column;
    gap: 2px;
  }
  .single-facility__row--full .single-facility__label {
    width: auto;
  }
  /* 縦並び時はラベルが上に来るので、値頭の「：」とぶら下げインデントを外して左揃えにする */
  .single-facility__row--full .single-facility__value {
    padding-left: 0;
    text-indent: 0;
  }
  .single-facility__row--full .single-facility__value::before {
    content: none;
  }

  /* INDEX：INFORMATIONと同じ全幅・余白に */
  .single-index {
    width: 100%;
    min-width: 0;
    padding: 24px;
    gap: 14px;
  }

  /* 概要文の下打ち消し：SPはメインのgapが28pxなので-28pxで合わせる
     （PCの-40pxのままだと引きすぎて本文が概要文に食い込む） */
  .single-summary {
    margin-bottom: -28px;
  }

  /* 本文：幅いっぱい */
  .single-content {
    max-width: none;
  }
  .single-content > * + * {
    margin-top: 28px;
  }
  .single-content > *:first-child {
    margin-top: 24px !important;
  }
  .single-content h2 {
    font-size: 20px;
    margin-top: 40px !important;
  }
  .single-content h3 {
    font-size: 18px;
    margin-top: 24px !important;
  }
  .single-content h4 {
    font-size: 16px;
    margin-top: 16px !important;
  }
  .single-content p {
    margin: 16px 0;
  }

  /* ===== 関連記事（SP：Fin + OTHER 縦並びフルカード） ===== */
  .single__aside {
    margin-top: 44px; /* Finの上＝OTHERの上が見た目で揃う値（OTHERは大文字の内側余白ぶん+約3px） */
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Fin装飾を表示・OTHER見出しは中央寄せ */
  .single-fin {
    display: flex;
  }
  .single__aside-title {
    text-align: center;
  }

  /* カード：3列グリッド → 縦並びに */
  .single__related {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .related-card__meta {
    gap: 8px;
  }
}

/* --- ブロックスタイル レスポンシブ --- */
@media (max-width: 768px) {
  .wp-block-gallery.is-style-vialog-roomy {
    --wp--style--unstable-gallery-gap: 16px;
    gap: 16px !important;
  }
  .single-content .wp-block-image.is-style-vialog-fullbleed {
    width: calc(100vw - 40px);
    margin-left: calc(50% - 50vw + 20px);
    margin-right: calc(50% - 50vw + 20px);
  }
  .wp-block-paragraph.is-style-vialog-lead,
  p.is-style-vialog-lead {
    font-size: 16px;
  }
  .wp-block-quote.is-style-vialog-quote {
    padding: 24px 16px;
    margin: 32px 0;
  }
  .wp-block-quote.is-style-vialog-quote p {
    font-size: 16px;
  }
}

/* =====================
   フッター（Figma: W1280 / H70内包 / padding 24px 10px）
   ===================== */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 10px;
  box-sizing: border-box;
}

.site-footer__copy {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-gray);
  margin: 0;
}

/* =====================
   ABOUTページ
   ===================== */
.about-page {
  padding: 60px 80px 80px;
}

/* エントランスアニメーション用初期状態（JS有効時のみ） */
html.js .about-image {
  clip-path: inset(100% 0% 0% 0%);
  will-change: clip-path;
}
html.js .about-heading,
html.js .about-body p,
html.js .about-travel__question,
html.js .about-travel__answer {
  opacity: 0;
  transform: translateY(15%);
}

.about-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 64px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.about-image__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.about-image__placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-light-gray);
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 2px;
}

.about-heading {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.12em;
  margin: 0;
}

.about-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: 0.08em;
  margin: 0;
}

.about-body p + p {
  margin-top: 16px;
}

.about-travel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 4px;
}

.about-travel__question {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  margin: 0;
}

.about-travel__answer {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* 国名（SINGAPORE等）だけ少し小さく */
.about-travel__answer .js-travel-name {
  font-size: 16px;
}

.about-travel__flags {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.about-travel__dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex-shrink: 0;
}

.about-travel__dot--white {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px #DDDDDD;
}

.about-travel__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

.about-travel__link:hover {
  opacity: var(--hover-opacity);
}

@media (max-width: 768px) {
  .about-page {
    padding: 24px 0 120px;
  }

  /* SP：PC用の改行は非表示 */
  .about-body br {
    display: none;
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: none;
  }

  /* SP：画像は左右16px余白付き */
  .about-image {
    padding: 0 16px;
    box-sizing: border-box;
  }

  .about-image__img,
  .about-image__placeholder {
    aspect-ratio: 1 / 1;
    width: 100%;
  }

  /* SP：テキストエリア */
  .about-text {
    padding: 0 16px;
    gap: 20px;
  }

  .about-body p {
    font-size: 14px;
  }
}

/* =====================
   デフォルト固定ページ（page.php：プライバシーポリシー等）
   ===================== */
main.page-default {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 80px 80px;
}
.page-default__inner {
  max-width: 720px;
  margin: 0 auto;
}
.page-default__title {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 1.12px;
  margin-bottom: 48px;
}
@media (max-width: 768px) {
  main.page-default {
    padding: 40px 16px 64px;
  }
  .page-default__title {
    font-size: 22px;
    margin-bottom: 32px;
  }
}

/* =====================
   記事紹介カード（本文中で他の記事を紹介するブロック / vialog/post-card）
   Figmaの構成（枠線1px + 左サムネ + 右にタイトル/国/カテゴリ）をベースに、
   本文幅720pxに合わせてサムネ160×120・余白16pxへ縮めた寸法を採用している。
   概要文はオーナー判断で不採用。
   ===================== */
.vialog-post-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
  /* Figmaのstrokeは「内側」。borderだと外側に1pxずつ増えて高さが236pxになるため、
     内側シャドウで枠線を描き、カード全体を設計どおりの234pxに保つ */
  box-shadow: inset 0 0 0 1px #dddddd;
  background: var(--color-white);
  color: var(--color-black);
  text-decoration: none;
}
/* 本文内リンクの下線・ホバー透過を打ち消す（カードは画像のズームだけで反応させる） */
.single-content .vialog-post-card,
.single-content .vialog-post-card:hover {
  text-decoration: none;
  opacity: 1;
}

/* --- 左：サムネイル（幅160px固定、高さはカードの高さに合わせて伸びる） ---
   タイトルが2行になるなど文字量が増えたときに画像側だけ余白が空かないよう、
   align-self:stretch で右カラムと同じ高さまで伸ばす。最低でも100px（8:5）は確保する。 */
.vialog-post-card__thumb {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: 160px;
  height: auto;
  min-height: 100px;
  overflow: hidden;
  background: var(--color-light-gray);
}
.vialog-post-card__img {
  /* 高さが可変なので絶対配置で枠いっぱいに敷く */
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;   /* 本文用の img { width:100% } を上書き */
  height: 100% !important;
  object-fit: cover;
  margin: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vialog-post-card:hover .vialog-post-card__img {
  transform: scale(1.05);
}
.vialog-post-card__img--placeholder {
  background: var(--color-light-gray);
}
/* Figmaの左上グラデーション（白い写真でも枠に負けないようにする陰影） */
.vialog-post-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(259deg, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.2) 100%);
  pointer-events: none;
}

/* --- 右：テキスト --- */
.vialog-post-card__body {
  flex: 1 1 0;
  min-width: 0;  /* flex内で長いタイトルがはみ出さないように */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vialog-post-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vialog-post-card__title {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #444444;
  overflow-wrap: anywhere;
  /* 長いタイトルでもカードの高さが暴れないよう2行で打ち切る */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 国（左）とカテゴリ（右）を両端に */
.vialog-post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;   /* 幅が足りないときはカテゴリを次の行に逃がす */
  gap: 6px 12px;
}
.vialog-post-card__country {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.vialog-post-card__flag {
  display: flex;
  align-items: center;
  gap: 2px;
}
.vialog-post-card__flag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.vialog-post-card__flag-dot--white {
  box-shadow: inset 0 0 0 1px #dddddd;  /* 白い国旗色が背景に溶けないよう縁取り */
}
.vialog-post-card__country-name {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-black);
}
.vialog-post-card__cats {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
}
.vialog-post-card__cat-sep {
  font-weight: 400;
  font-size: 12px;
}
/* 編集画面で未公開記事を選んだときの注意書き */
.vialog-post-card__notice {
  padding: 16px;
  border: 1px dashed #dddddd;
  color: var(--color-gray);
  font-size: 14px;
}

/* --- SP：サムネを小さくして横並びを維持（デザインはPC版のみのため独自調整） --- */
@media (max-width: 768px) {
  .vialog-post-card {
    gap: 12px;
    padding: 12px;
  }
  .vialog-post-card__thumb {
    width: 110px;
    min-height: 69px;   /* PCと同じ 8:5 を最低値として維持 */
  }
  .vialog-post-card__title {
    font-size: 14px;
  }
  .vialog-post-card__meta {
    gap: 6px 8px;
  }
  .vialog-post-card__country-name,
  .vialog-post-card__cats {
    font-size: 13px;
  }
  .vialog-post-card__cat-sep {
    font-size: 11px;   /* PCと同じく国名・カテゴリより2px小さく */
  }
}