/* =====================================================================
   全ページ共通のUI
   ロゴ / ヘッダー / ティッカー / サイトメニュー / リンク一覧 / ブランド / Instagram /
   最下部ロゴ / フッター / セクション見出し / ボタン / タグ / 記事カード
   寸法は Figma（RNu5LGOPoLjkdRDrOWwJcN / 2175:431）の実測に合わせている。
   ===================================================================== */

/* ---------------------------------------------------------------
   ロゴと「目」
   黒目は .c-eye__pupil を transform で動かせるようにしてある。
   --eye-x / --eye-y を書き換えれば視線が動く（将来のアニメーション用）。
   --------------------------------------------------------------- */

.c-logo {
  display: block;
  width: 144px;
  height: auto;
}

.c-logo__letters,
.c-logo-large { fill: var(--color-primary); }

/* ロゴはホバーで薄くしない（他のリンクは薄くなる） */
.c-header-bar__logo:hover,
.c-brand__head a:hover {
  opacity: 1;
}

/* 目は数秒に一度まばたきする。白目ごと縦につぶす（黒目の視線移動とは別の仕掛け） */
@keyframes vialog-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(0.08); }
  96%           { transform: scaleY(1); }
}

.c-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: vialog-blink var(--blink-duration, 6.5s) var(--blink-delay, 0s) infinite;
}

/* 見出しごとに間をずらす（全部そろって瞬きすると機械っぽいため） */
[data-heading="recent"] .c-eye { --blink-delay: 1.3s; }
[data-heading="world"]  .c-eye { --blink-delay: 2.6s; }
[data-heading="japan"]  .c-eye { --blink-delay: 3.9s; }
[data-heading="other"]  .c-eye { --blink-delay: 5.2s; }

@media (prefers-reduced-motion: reduce) {
  .c-eye { animation: none; }
}

.c-eye__white { fill: var(--color-white); }
.c-eye__pupil {
  fill: var(--color-pupil);
  transform: translate(var(--eye-x, 0), var(--eye-y, 0));
  transition: transform var(--duration) var(--easing);
}

/* ---------------------------------------------------------------
   ヘッダーの中身（ページのヘッダーと、開いたメニューの上部で共用）
   PC：上下40・左右80。1行目 ロゴ＋MENU（高さ58）、2行目 紹介文＋Instagram（高さ21）、行間8
   --------------------------------------------------------------- */

/* ヘッダーは全ページで画面の上に固定（スクロールしても残る） */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
}

/* ヘッダーの下端をぼかして、下から流れてくる記事が切れて見えないようにする。
   濃さはスクロール量に応じて app.js が --header-fade で変える（先頭では出さない） */
.l-header::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: var(--space-16);
  /* 濃さは --header-fade-strength で調整（背景色の何％まで乗せるか） */
  background: linear-gradient(
    color-mix(in srgb, var(--color-bg) var(--header-fade-strength, 40%), transparent),
    transparent
  );
  opacity: var(--header-fade, 0);
  pointer-events: none;
}

.c-header-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block: var(--space-40);
}

.c-header-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.c-header-bar__row--sub {
  align-items: flex-start;
}

.c-header-bar__tagline {
  color: var(--color-text-muted);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wide);
}

/* ---------------------------------------------------------------
   スクロールで現れる（data-fade）
   位置は動かさず、そっと濃くなるだけ。1秒・ゆっくり始まってすっと終わる曲線。
   .is-inview は app.js（IntersectionObserver）が一度だけ付ける
   --------------------------------------------------------------- */

.has-js [data-fade] {
  opacity: 0;
  transition: opacity var(--fade-duration, 0.8s) cubic-bezier(0.71, 0.09, 0.22, 1);
}

.has-js [data-fade].is-inview {
  opacity: 1;
}

/* 動きを減らす設定の人には演出なし（最初から見えている） */
@media (prefers-reduced-motion: reduce) {
  .has-js [data-fade] {
    opacity: 1;
    transition: none;
  }
}

/* MENU / CLOSE ボタン。どちらも「文字＋40×16の記号」で、右端・縦の中心がそろう */
.c-menu-button {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-loose);
}

 /* MENU も CLOSE も文字は #666、三本線と×は #888（同じ色でそろえる） */
.c-menu-button { color: var(--color-text-muted); }

/* 3本線。上から 40 / 32 / 20px、8px間隔（Figma） */
.c-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  height: 17px;
}

.c-burger span {
  display: block;
  height: 1px;
  background: var(--color-text-gray);
}

.c-burger span:nth-child(1) { width: 100%; }
.c-burger span:nth-child(2) { width: 80%; }
.c-burger span:nth-child(3) { width: 50%; }

/* MENU / CLOSE も、ホバーは全体を薄くするだけ */
.c-menu-button:hover {
  opacity: var(--hover-opacity);
}

/* ×は三本線と同じ大きさ・同じ色 */
.c-menu-close__icon {
  width: 40px;
  height: 16px;
  color: var(--color-text-gray);
}

/* ---------------------------------------------------------------
   Instagram リンク
   ヘッダー内（small）：アイコン20・間9 / フッター・SPメニュー（large）：アイコン24・間12
   --------------------------------------------------------------- */

.c-instagram {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-text-muted);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}

.c-instagram img {
  width: 24px;
  height: 24px;
}

.c-instagram--small {
  gap: 9px; /* Figma実測 */
}

.c-instagram--small img {
  width: 20px;
  height: 20px;
}

/* ---------------------------------------------------------------
   ティッカー（TOPだけ。最新記事タイトルが流れる帯）
   点線は左右の余白の内側だけ。Figmaの点線（2px描いて2px空ける）を背景で正確に描く
   --------------------------------------------------------------- */

.l-ticker {
  /* 上下の余白は変数にしておく（検証中にURLから切り替えられるようにするため） */
  --ticker-top: var(--space-16);
  --ticker-bottom: var(--space-32);
  padding-block: var(--ticker-top) var(--ticker-bottom);
}

.l-ticker__rail {
  --dash: repeating-linear-gradient(90deg, var(--color-line) 0 2px, transparent 2px 4px);
  display: flex;
  overflow: hidden;
  padding-block: var(--space-8);
  background:
    var(--dash) top / 100% 1px no-repeat,
    var(--dash) bottom / 100% 1px no-repeat;
  /* 両端をうっすら消して、文字が切れて見えないようにする */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.l-ticker__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-16);
  padding-right: var(--space-16);
  /* 実際の長さは app.js が帯の長さから計算して上書きする（一定の速さで流すため） */
  animation: vialog-ticker 90s linear infinite;
}

.l-ticker__item {
  color: var(--color-text-muted);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

/* キーボードでリンクに入ったときだけ止める（マウスを乗せても流れ続ける） */
.l-ticker__rail:focus-within .l-ticker__track {
  animation-play-state: paused;
}

@keyframes vialog-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .l-ticker__track { animation: none; }
  .l-ticker__rail  { overflow-x: auto; }
}

/* ---------------------------------------------------------------
   サイトメニュー（全画面オーバーレイ）
   上部はページのヘッダーと同じ部品なので、開閉してもロゴとボタンの位置が動かない。
   Figma menu-open-pc：ヘッダー → 48 → リンク一覧（左右160）→ 48 → ロゴ（幅1200）＋コピーライト → 下80
   --------------------------------------------------------------- */

.l-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: 0; /* 間隔は各要素の余白で作る（固定バーの下に余白を持たせるため） */
  overflow-y: auto;
  scrollbar-gutter: stable; /* メニュー自身のスクロールバーで中身が動かないように */
  padding-bottom: var(--space-80);
  background: var(--color-bg-footer);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--easing), visibility var(--duration);
}

.l-menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* メニューの上部（ロゴとCLOSE）は、メニューをスクロールしても位置を変えない。
   下にも余白を持たせて、下から流れてくる文字が切れて見えないようにする */
.l-menu .c-header-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: var(--space-40); /* 紹介文の下 → COUNTRYなど（PC。32→40、オーナー指示 2026-10-07。SPは下で24px） */
  background: var(--color-bg-footer);
}

/* バーの下端をぼかして、下から流れてくる文字がふっと消えるようにする */
.l-menu .c-header-bar::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* 1行分より高くとり、上の3割は背景色のまま。文字が半分だけ残って切れて見えるのを防ぐ */
  height: var(--space-56);
  background: linear-gradient(var(--color-bg-footer) 30%, transparent);
  opacity: var(--menu-fade, 0); /* スクロールした分だけ濃くする（app.js） */
  pointer-events: none;
}

.l-menu__body {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(var(--page-gutter), 11.111vw, 160px);
}

.l-menu__foot {
  margin-top: var(--space-48); /* リンク一覧 → 大きいロゴ */
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: clamp(var(--page-gutter), 8.333vw, var(--page-gutter-wide));
}

/* ---------------------------------------------------------------
   リンク一覧（メニューとフッターで共有）
   COUNTRY と JAPAN の間はフッター64px・メニュー80px（Figma準拠）
   --------------------------------------------------------------- */

/* 1440px幅では1行に収まる。狭い画面では入りきらない列を次の行へ回す */
.c-sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-40) var(--space-80);
  align-items: flex-start;
}

.c-sitemap__pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-40) var(--space-64);
  align-items: flex-start;
}

.l-menu .c-sitemap__pair {
  column-gap: var(--space-80);
}

.c-sitemap__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.c-sitemap__title {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.c-sitemap__regions {
  display: flex;
  gap: var(--space-40);
  align-items: flex-start;
  padding-left: var(--space-16);
}

/* 国の少ない地域（北米・南米・アフリカ）は1列に縦積みする */
.c-sitemap__region-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.c-sitemap__region {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.c-sitemap__region-name {
  color: var(--color-text-gray);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}

.c-sitemap__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-left: var(--space-4);
}

/* JAPAN と CATEGORY は2列グリッド */
.c-sitemap__grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-16) var(--space-40);
  padding-left: var(--space-16);
}

/* 地方は「北から順に上から下へ」読ませたいので、行ではなく列方向に流す */
.c-sitemap__grid--columns {
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
}

.c-sitemap__link {
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   ブランド情報（フッター左上：ロゴ＋紹介文＋Instagram）
   --------------------------------------------------------------- */

.c-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.c-brand__head {
  display: flex;
  flex-direction: column;
  gap: 13px; /* Figma実測（ロゴ下端から紹介文まで） */
}

.c-brand__text {
  color: var(--color-text-muted);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wide);
}

/* ---------------------------------------------------------------
   最下部の大きいロゴ＋コピーライト（メニューとフッターで共有）
   --------------------------------------------------------------- */

.c-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* 大きいロゴは窓の中を下から上がってくる。--reveal（0→1）は app.js がスクロール量から入れる */
.c-bottom__window {
  display: block;
  overflow: hidden;
}

.c-logo-large {
  display: block;
  width: 100%;
  height: auto;
}

/* 動かすのは SVG そのものではなく、包んだ span。
   SVG要素はCSSのtransformの効き方がブラウザによって違うため */
.c-bottom__slide {
  display: block;
}

.l-footer .c-bottom__slide {
  transform: translateY(calc(100% * (1 - var(--reveal, 1))));
  transition: transform 0.25s linear; /* スクロールに少しだけ遅れて追いつく（動きが見えるように） */
}

/* メニューの中の大きいロゴは、開いた瞬間に下からせり上がる（スクロールを待たない） */
.l-menu .c-bottom__slide {
  transform: translateY(100%);
  transition: transform 0.9s var(--easing) 0.2s;
}

.l-menu.is-open .c-bottom__slide {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .l-footer .c-bottom__slide,
  .l-menu .c-bottom__slide {
    transform: none;
    transition: none;
  }
}

.c-bottom__copy {
  color: var(--color-text-muted);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wide);
  text-align: center;
}

/* ---------------------------------------------------------------
   フッター
   --------------------------------------------------------------- */

.l-footer {
  background: var(--color-bg-footer);
}

.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  padding-block: var(--space-80);
}

.l-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-40);
}

.l-footer__top .c-sitemap {
  padding-top: 21px; /* Figma実測。ロゴの文字の高さに見出しをそろえる */
}

/* ---------------------------------------------------------------
   セクション見出し（PICKUP / RECENT / WORLD / JAPAN / OTHER）
   「目つき」の1文字だけ Alien Block の 80px（Figmaの 60×80 の箱）。
   残りの文字は Roboto 500 の 32px で、上端から 28px 下げて置く。
   目の位置は文字の形ごとに違うので data-heading で指定する。
   --------------------------------------------------------------- */

.c-section__heading {
  display: flex;
  align-items: flex-end;
  gap: var(--space-20);
}

.c-section__en {
  display: flex;
  align-items: flex-start;
  color: var(--color-primary);
}

.c-section__text {
  padding-top: var(--text-top, 28px);
  font-family: var(--font-en);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: var(--lh-loose);
  letter-spacing: var(--text-ls, 0);
}

.c-section__char--eye {
  position: relative;
  margin-inline: var(--eye-gap-before, 0) var(--eye-gap-after, 0);
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 80px;
  line-height: var(--lh-none);
}

.c-section__char--eye .c-eye {
  position: absolute;
  top: var(--eye-top);
  left: var(--eye-left);
  /* 目の大きさ・位置は文字サイズに比例させる（PC 80px→20px、SP 56px→14px）。
     px固定にするとSPで目だけ大きく見えてしまう */
  width: 0.25em;
  height: 0.25em;
}

/* 目の位置（装飾文字の箱の左上からの距離）と、装飾文字の前後の間隔。
   Figmaでは見出しごとに手で配置されているので、実測値をそのまま入れている */
/* 装飾文字の前後の間隔も em（文字サイズ比）にして、SPでも同じ見え方にする */
[data-heading="pickup"] { --eye-left: 0.35em;  --eye-top: 0.25em;   --eye-gap-after: -0.0125em; --text-ls: 0.02em; }
[data-heading="recent"] { --eye-left: 0.375em; --eye-top: 0.2625em; --eye-gap-after: 0.0625em; }
[data-heading="world"]  { --eye-left: 0.325em; --eye-top: 0.475em;  --eye-gap-before: 0.05em; --eye-gap-after: 0.05em; --text-top: 25px; }
[data-heading="japan"]  { --eye-left: 0.375em; --eye-top: 0.25em;   --eye-gap-before: 0.0375em; --eye-gap-after: -0.05em; }
[data-heading="other"]  { --eye-left: 0.375em; --eye-top: 0.25em;   --eye-gap-after: 0.0625em; --text-top: 25px; }

/* 日本語ラベル。下端から12px上に置く（Figma：箱38pxのうち文字26px＋下余白12px） */
.c-section__jp {
  padding-bottom: var(--space-12);
  color: var(--color-text);
  font-family: var(--font-en); /* Figma：Roboto 700（日本語は角ゴシックで表示される） */
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   ボタン（一覧をみる / 一覧へ戻る）
   Figma：余白 上下8・左32・右22、文字と矢印の間16、角丸4、枠線は内側1px、矢印18
   枠線を内側に描くので box-shadow の inset を使う（外寸が増えない）
   --------------------------------------------------------------- */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-8) 22px var(--space-8) var(--space-32);
  border-radius: var(--radius-button);
  box-shadow: inset 0 0 0 1px var(--color-text);
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: var(--fs-sm); /* 14px（オーナー指示。Figmaは16px） */
  font-weight: 700;
  line-height: 28px; /* 高さ44 = 上下の余白16 + 28 */
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

/* ホバーは文字ごと薄くするだけ（アイコンは動かさない） */
.c-button:hover {
  opacity: var(--hover-opacity);
}

.c-button__arrow {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------------
   タグ（国・カテゴリ）
   高さ28・左右12。国タグの色は data-region から引く（色は tokens.css だけで管理）
   --------------------------------------------------------------- */

.c-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tag-h);
  padding-inline: var(--space-12);
  border-radius: var(--radius);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.c-tag--country { background: var(--color-tag-default); }
.c-tag--country[data-region="asia"]          { background: var(--color-region-asia); }
.c-tag--country[data-region="europe"]        { background: var(--color-region-europe); }
.c-tag--country[data-region="north-america"] { background: var(--color-region-north-america); }
.c-tag--country[data-region="south-america"] { background: var(--color-region-south-america); }
.c-tag--country[data-region="africa"]        { background: var(--color-region-africa); }

.c-tag--category { background: var(--color-tag-category); }

/* ---------------------------------------------------------------
   記事カード
   種類（variant）ごとに違うのは、画像の幅・並べ方・文字の大きさだけ。画像はどれも 3:2。
     pickup：TOPのPICKUP。横並び、画像560・間40、本文は高さ290で上下中央
     row   ：RECENT・一覧。横並び、画像360・間40、本文は上下いっぱいに均等配置
     grid  ：WORLD・JAPAN。横並び、画像280・間24
     stack ：関連記事。縦積み、画像→本文の間8
     inline：本文中の記事紹介カード。横並び、画像200・間24、日付なし
   --------------------------------------------------------------- */

.c-card {
  --thumb-w: 280px;
  --card-gap: var(--space-40);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--card-gap);
}

.c-card--pickup { --thumb-w: 560px; }
.c-card--row    { --thumb-w: 360px; }
.c-card--grid   { --card-gap: var(--space-24); }
.c-card--inline { --thumb-w: 200px; --card-gap: var(--space-24); }

.c-card__thumb {
  position: relative;
  flex: 0 1 var(--thumb-w);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
}

/* 右下をうっすら暗くして、白っぽい写真でも輪郭が出るようにする（Figmaのグラデーション） */
.c-card:not(.c-card--pickup) .c-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(254deg, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.2) 99.6%);
  pointer-events: none;
}

.c-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--easing);
}

.c-card__img--placeholder {
  background: var(--color-bg-footer);
}

.c-card:hover .c-card__img {
  transform: scale(1.04);
}

.c-card__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  row-gap: var(--space-24); /* 本文が画像より長いときの最低限の間隔 */
  align-self: stretch;
  min-width: 0;
  padding-block: var(--space-8) var(--space-20);
}

.c-card__date {
  color: var(--color-text-gray);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-tight);
}

.c-card__title {
  /* タイトルは2行まで（3行目以降は「…」で切る）。高さは中身なりで、
     タグの位置は「同じ行のカードで高さをそろえ、タグを下端に置く」ことでそろえている */
  --title-lines: 2;
  --title-lh: var(--lh-title);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines);
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-jp);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: var(--title-lh);
  letter-spacing: var(--ls-wide);
}

/* ---------------------------------------------------------------
   記事カードの上のカーソル（乗り物）
   ヒコーキ・バス・電車からランダムに1つ出す。クリックすると煙を吐いて走り出す。
   位置や切り替えは app.js。マウスがある環境だけ使う
   --------------------------------------------------------------- */

.c-vehicle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-vehicle);
  display: none;
  pointer-events: none;
  will-change: transform;
}

.c-vehicle.is-active {
  display: block;
}

.c-vehicle__item {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  transform: translate(-50%, -50%);
}

.c-vehicle__item.is-current {
  display: block;
}

.c-vehicle__item svg {
  display: block;
  width: var(--vehicle-w, 32px);
  max-width: none; /* base.css の max-width:100% は親の幅が0なので効かせない */
  height: auto;
}


@media (hover: hover) and (pointer: fine) {
  /* 乗り物が出ている間は、もとのカーソルを消す */
  .c-card,
  .c-card__link {
    cursor: none;
  }

  /* カードの中のタグは別のリンクなので、普通の指マークに戻す */
  .c-card .c-tag {
    cursor: pointer;
  }
}

/* カード全体をクリック領域にする。タグは上に重ねて個別リンクとして残す */
.c-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* タグは1行だけ。入りきらないタグは2行目に回るが、高さを1行分に切って見せない。
   app.js が2行目に回ったタグに .is-overflow を付け、Tabでも選べないようにする */
.c-card__tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  height: var(--tag-h);
  overflow: hidden;
}

.c-tag.is-overflow {
  visibility: hidden;
}

/* --- pickup --- */
.c-card--pickup .c-card__body {
  flex-basis: 576px;
  flex-grow: 0;
  align-self: center;
  justify-content: flex-start;
  row-gap: 0; /* 間隔はタイトルの margin-top（64px）とタグの margin-top:auto で決める */
  height: 293px; /* Figma：上8 + 日付25 + 64 + タイトル2行64 + 80 + タグ28 + 下24 */
  padding-bottom: var(--space-24);
}

.c-card--pickup .c-card__title {
  --title-lh: var(--lh-body);
  margin-top: var(--space-64);
  font-size: var(--fs-lg);
  letter-spacing: 0.08em; /* Figma：20pxに1.6px */
}

.c-card--pickup .c-card__tags {
  margin-top: auto;
}

/* --- row --- */
.c-card--row .c-card__body {
  max-width: 680px;
}

/* --- grid --- */
/* 2行分の高さを確保してあるので、カードの高さは常に186px（Figma） */
.c-card--grid .c-card__body {
  row-gap: var(--space-24);
  padding-bottom: var(--space-24);
}

/* --- stack（関連記事）--- */
.c-card--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
}

.c-card--stack .c-card__thumb {
  flex: none;
  width: 100%;
}

.c-card--stack .c-card__body {
  justify-content: flex-start;
  row-gap: 0;
  padding: var(--space-8) var(--space-4) var(--space-20);
}

.c-card--stack .c-card__title {
  margin-bottom: var(--space-20); /* タイトル → タグ の最低間隔 */
  margin-top: var(--space-8);
  font-size: var(--fs-base);
}

/* タグはカードの下端にそろえる。横に並んだカードは高さがそろうので、
   1行のタイトルと2行のタイトルが混ざってもタグの高さが合う */
.c-card--stack .c-card__tags {
  margin-top: auto;
}

/* --- inline（本文中の記事紹介）--- */
.c-card--inline .c-card__body {
  justify-content: center;
  row-gap: var(--space-16);
  padding-block: 0;
}

/* ---------------------------------------------------------------
   タブレット幅（769〜1100px）
   画像の幅を固定のままにすると本文が極端に細くなるので、画像を割合で縮める
   --------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1100px) {
  .c-card--pickup { --thumb-w: 45%; }
  .c-card--row    { --thumb-w: 36%; }
  .c-card--grid   { --thumb-w: 40%; }

  .c-card--pickup .c-card__body {
    flex: 1 1 0;
    height: auto;
    align-self: stretch;
  }

  .c-card--pickup .c-card__title {
    margin-top: var(--space-24);
  }

  .l-footer__top {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------
   SP
   --------------------------------------------------------------- */

@media (max-width: 768px) {
  /* ヘッダー（Figma：上20・左右20・下40（TOPは下にティッカーが続くので20）。MENUの文字とInstagramは出さない） */
  .c-header-bar {
    padding-block: var(--space-20) var(--space-40);
  }

  .home .l-header .c-header-bar {
    padding-bottom: var(--space-20);
  }

  .c-menu-button__label,
  .l-header .c-instagram {
    display: none;
  }

  .c-burger,
  .c-menu-close__icon {
    width: 32px;
  }

  /* Figma top-sp：32 / 20 / 12px */
  .c-burger span:nth-child(2) { width: 62.5%; }
  .c-burger span:nth-child(3) { width: 37.5%; }

  /* SPもヘッダーを固定する。ただし148pxのままだと画面の18%を占めるので、
     スクロールしたら紹介文の行をたたんで「ロゴ＋MENU」だけの帯（82px）に縮める */
  .l-header .c-header-bar__row--sub {
    overflow: hidden;
    max-height: 60px;
    opacity: 1;
    transition: max-height var(--duration) var(--easing), opacity var(--duration) var(--easing),
      margin-top var(--duration) var(--easing);
  }

  .l-header.is-compact .c-header-bar {
    padding-block: var(--space-12);
  }

  .l-header.is-compact .c-header-bar__row--sub {
    max-height: 0;
    margin-top: calc(-1 * var(--space-8)); /* 行の間隔ぶんも詰める */
    opacity: 0;
  }

  .l-ticker {
    --ticker-top: var(--space-12);
    --ticker-bottom: var(--space-24);
  }

  /* メニュー（紹介文の代わりにInstagramを大きめに出す） */
  .l-menu {
    padding-bottom: var(--space-32);
  }

  /* Instagramはロゴの直下（Figma menu-open-sp：間0） */
  .l-menu .c-header-bar {
    gap: 0;
    padding-bottom: var(--space-24);
  }

  .l-menu .c-header-bar::after {
    height: var(--space-24);
  }

  .l-menu__body {
    margin-top: var(--space-16);
  }

  .l-menu__foot {
    margin-top: var(--space-40);
  }

  .l-menu .c-header-bar__tagline {
    display: none;
  }

  .l-menu .c-header-bar__row--sub {
    justify-content: flex-start;
  }

  .l-menu .c-instagram {
    gap: var(--space-12);
  }

  .l-menu .c-instagram img {
    width: 24px;
    height: 24px;
  }

  .l-menu__body,
  .l-menu__foot {
    padding-inline: var(--page-gutter);
  }

  /* リンク一覧（Figma：見出し14px、見出し→一覧24px、地域名→国名16px、地域どうし40px） */
  .c-sitemap,
  .c-sitemap__pair,
  .l-menu .c-sitemap__pair {
    flex-direction: column;
    gap: var(--space-40);
    width: 100%;
  }

  .c-sitemap__group {
    gap: var(--space-24);
  }

  .c-sitemap__title {
    font-size: var(--fs-sm);
  }

  .c-sitemap__regions {
    flex-direction: column;
    gap: var(--space-40);
    padding-left: var(--space-8);
  }

  .c-sitemap__region {
    gap: var(--space-16);
  }

  /* 3列。列の幅は中身の文字に合わせ、列の間は40px（Figma準拠）。
     auto にしておくと、長い名前が入って画面幅を超えるときだけ列が縮んで折り返す */
  .c-sitemap__links,
  .c-sitemap__grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: var(--space-16) var(--space-40);
    padding-left: 0;
  }

  .c-sitemap__grid {
    padding-left: var(--space-8);
  }

  .c-sitemap__grid--columns {
    grid-auto-flow: row;
    grid-template-rows: none;
  }

  .c-sitemap__link {
    white-space: normal;
  }

  /* ブランド（フッター：ロゴ直下に紹介文、Instagramまで16px） */
  .c-brand       { gap: var(--space-16); }
  .c-brand__head { gap: 0; }
  .c-brand__text { font-size: var(--fs-2xs); }

  .c-bottom {
    gap: var(--space-24);
  }

  .l-footer__inner {
    gap: var(--space-48);
    padding-block: var(--space-32);
  }

  .l-footer__top {
    flex-direction: column;
    gap: var(--space-40);
  }

  .l-footer__top .c-sitemap {
    padding-top: 0;
  }

  /* セクション見出し：目つきの文字 56px（Figmaの 42×56 の箱）、残りの文字 24px。目は 20px のまま */
  .c-section__text {
    --text-top: 28px;
    font-size: var(--fs-xl);
    line-height: var(--lh-none);
  }

  .c-section__char--eye {
    font-size: 56px;
  }

  /* 目の位置・文字の間隔は em 指定なので、文字が56pxになれば自動で縮む（個別指定は不要） */
  /* PICKUP以外はFigmaの見出しの箱が7px高い（56→63px）ので、下に余白を足して見出し→カードの間隔をそろえる */
  .c-section__heading:not([data-heading="pickup"]) { padding-bottom: 7px; }

  /* 日本語ラベル。Figmaでは見出しごとにサイズが違う
     （新着記事・海外記事・日本記事＝16px／ピックアップ・関連記事＝14px） */
  .c-section__jp {
    padding-bottom: 1px;
    font-size: var(--fs-base);
  }

  [data-heading="pickup"] .c-section__jp,
  [data-heading="other"] .c-section__jp {
    padding-bottom: 5px;
    font-size: var(--fs-sm);
  }

  /* 関連記事（OTHER）の英字だけ行間1.8（Figma detail-sp） */
  [data-heading="other"] .c-section__text {
    --text-top: 15px;
    line-height: var(--lh-loose);
  }

  /* ボタン：横幅いっぱい・高さ44（指で押しやすいよう上下2pxずつ広げた。Figmaは40）、文字14px */
  .c-button {
    width: 100%;
    padding-block: 10px;
    padding-right: 26px;
    font-size: var(--fs-sm);
    line-height: 24px;
  }

  .c-button__arrow {
    width: 16px;
    height: 16px;
  }

  /* 記事カード：どの種類も画像を上に積む
     （Figma：画像→本文8、本文の余白 上8・左右4・下24、日付→タイトル8、タイトル→タグ20、タイトル16px） */
  .c-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
  }

  .c-card__thumb {
    flex: none;
    width: 100%;
  }

  .c-card .c-card__body {
    flex: none;
    align-self: stretch; /* PCのPICKUPの「上下中央」が縦並びでは横の中央寄せになってしまうため戻す */
    justify-content: flex-start;
    gap: 0;
    height: auto;
    max-width: none;
    padding: var(--space-8) var(--space-4) var(--space-20);
  }

  .c-card--pickup .c-card__body {
    padding-bottom: var(--space-24);
  }

  .c-card .c-card__title {
    --title-lh: var(--lh-body);
    margin-top: var(--space-8);
    margin-bottom: 0; /* 縦1列なので間隔はタグ側の margin-top だけで作る */
    font-size: 17px; /* オーナー指示（Figmaは16px） */
    letter-spacing: 0.08em;
  }

  .c-card .c-card__tags {
    margin-top: var(--space-20);
  }

  /* 本文中の記事紹介カード（Figma detail-sp：画像→本文18、本文の左右8、タイトル18px→タグ16） */
  .c-card.c-card--inline {
    gap: 18px;
  }

  .c-card.c-card--inline .c-card__body {
    padding: 0 var(--space-8);
  }

  .c-card.c-card--inline .c-card__title {
    margin-top: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-title);
    letter-spacing: var(--ls-wide);
  }

  .c-card.c-card--inline .c-card__tags {
    margin-top: var(--space-16);
  }

  /* 本文中の記事カードのまわりの余白（オーナー指定：上40・左右16・下8） */
  .wp-block-vialog-post-card {
    padding: var(--space-40) var(--space-16) var(--space-8);
  }
}