/* ============================================================
   css/top-new.css — 新 TOP 画面用スタイル
   ============================================================
   本番移行時の対応:
     - [TOKENS]      本番に同等なし。独立したデザイントークンとして追加想定。
     - [RESET]       本番の css/platform.css と競合する可能性。本番ではこの領域不要。
     - [PAGE]        本番の layout.css / ui.css の .page クラスと競合。本番はより汎用。
     - [HEADER]      本番 index/home.html の .c-header 領域。CSS は layout/ui に分散。
     - [TODAY]       本番 css/walk.css 1135〜1412 行目 (.gauge-*) と同じ描画ロジック。
     - [CONN-SHEET]  本番 css/walk.css 1739〜1771 行目 (.conn-sheet 系) と競合。
     - [MENUS/CARDS] 本番に同等なし（新規機能）。walk.css に追記想定。
     - [RECORD]      本番の .top-record-button-images-wrap 相当。差し替え推奨。
     - [BOTTOM-NAV]  本番の #menu (ul/li 構造) の CSS と置き換え。

   詳細は docs/top-production-migration.md 参照。
   ============================================================ */

/* ============================================
   [TOKENS] Design Tokens
   本番: 同等なし。本番 CSS にマージする際は :root に追加する。
   ============================================ */
:root {
  /* Background */
  --color-bg: #ffffff;
  --color-bg-bottommenu: #e3e3e3;

  /* Text */
  --color-text-primary: #333333;
  --color-text-secondary: #585858;

  /* Category colors */
  --color-gogo-primary: #ff790b;
  --color-gogo-light: #fff0e0;
  --color-sokuho-primary: #1eb80b;
  --color-sokuho-light: #e6ffea;
  --color-sokuho-track: #d0f4cc;
  --color-gupa-primary: #ffb200;
  --color-gupa-light: #fffcd0;
  --color-humming-primary: #2a9cfa;
  --color-humming-light: #e9faff;
  --color-sbs-primary: #f36c82;
  --color-sbs-light: #fff0f0;

  /* Typography */
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-num: 'din-2014', 'Noto Sans JP', sans-serif;

  /* Radius */
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 100px;
}

/* ============================================
   [RESET] グローバルリセットは本番で platform.css が担当しているので全削除。
   ============================================ */

/* ============================================
   [PAGE] #home と #home-step7 の役割分担:
     #home        = 本番 .page (position:absolute 100%) の上に乗る「カンバス」。
                    背景・フォント・スクロール可否だけ担当。
     #home-step7  = 実際のレイアウトコンテナ。flex column + gap で全セクションを縦並び。
   本番の .page の SPA 配置ロジックには一切手を出さない。
   ============================================ */
#home.home-page {
  background-color: #ffffff; /* 本番 body の #f2f2f2 を上書き */
  font-family: var(--font-ja);
  color: var(--color-text-primary);
  font-feature-settings: 'palt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: auto; /* 縦スクロール許容 */
}

#home #home-step7 {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px; /* header / today / menus / record-button 間の間隔 */
}

#home *,
#home *::before,
#home *::after {
  box-sizing: border-box;
}

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

#home img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================
   [HEADER] TOP Header (5 icon menu)
   本番: 本番は .c-header / .c-header__inner / .home-icon--X を使って同等 UI を構築。
   本番側の既存 CSS (ui.css / layout.css / walk.css の home-icon 系) と**競合する可能性**。
   本番にマージする場合は .home-icon の既存スタイルを上書きする前提で配置。
   ============================================ */
#home .top-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

#home .top-header__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 52px;
  cursor: pointer;
}

#home .top-header__icon {
  width: 52px;
  height: 52px;
  display: block;
}

#home .top-header__icon img {
  width: 100%;
  height: 100%;
}

#home .top-header__label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-secondary);
  text-align: center;
  letter-spacing: -0.08em;
  white-space: nowrap;
  font-feature-settings: 'pwid' 1;
}

/* ============================================
   [TODAY] Today section — 360px 固定、リングは absolute で右上固定
   本番: 本番の gauge 関連は css/walk.css 1135〜1412 行目に集中。
   今回のブロックは以下の本番 CSS を上書きする想定:
     - #gauge-container svg (transform: scale を外す)
     - div.gradient の conic-gradient（色・from 角度を変更）
     - .gauge > path, .trail > path (stroke-width, 位置調整)
     - .gauge-disp 系は不使用（新 .ring__info で代替）
   本番にマージする時は walk.css の該当行を丸ごと置き換えるのが楽。
   ============================================ */
#home .today {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: 204px; /* リング高さに固定（子の height:100% のため） */
}

#home .today__heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-left: 4px;
  margin-bottom: 12px; /* balloon との間隔 */
}

#home .today__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
  letter-spacing: 0.0125em;
}

#home .today__date {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-num);
  color: var(--color-text-secondary);
  font-feature-settings: 'pwid' 1;
}

#home .today__date-num {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

#home .today__date-slash {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

#home .today__date-week {
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-left: 2px;
}

/* Left column: 見出し + 吹き出し + マスコット
   flex column + height:100% にしておかないと mascot の margin-top:auto が効かない */
#home .today__left {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 画像（speech-bubble_01〜03.png）を walk_add.js:updateHomeBalloon() が達成率に応じて差し替える。
   吹き出しの背景色・ツノは画像に含まれるので、CSS はサイズ・位置のみ。 */
#home .balloon {
  display: block;
  width: 140px;
  height: auto;
}

#home .today__mascot {
  width: 120px;
  height: auto;
  margin-top: auto;
  margin-left: 24px;
  pointer-events: none;
  position: absolute;
  bottom: 0;
}

/* ============================================
   Ring gauge — 本番 walk.css の描画ロジックを流用
   - foreignObject + conic-gradient でカラー円盤
   - .gauge の mix-blend-mode:lighten でアーク形状の透過マスク
   - .trail の mix-blend-mode:darken で未達成のグレー帯
   本番では JS が stroke-dasharray と .complete/.uncomplete opacity を動的更新
   ============================================ */
#home .today__ring {
  position: absolute;
  right: 0;
  top: 0;
  width: 204px;
  height: 204px;
}

#home .today__ring .gauge-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0; /* 本番 walk.css:1135 の top: -12px を打ち消す */
}

#home .today__ring #gauge-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

#home .today__ring #gauge-container svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none; /* 本番 walk.css:1158 の max-width: 275px を打ち消す */
  transform: none; /* 本番 walk.css:1159 の scale(-1,-1) を打ち消す */
  /* パスを「頂上スタート・時計回り」に書き換えたのでフリップ不要 */
}

#home .today__ring #gauge-container div.gradient {
  width: 100%;
  height: 100%;
  animation: none; /* 本番 walk.css:1169 の animation: changeBg を打ち消す */
  background: conic-gradient(
    from 0deg,
    #ffde00 0%,
    #acff00 30%,
    #1cab1b 75%,
    #289941 85%,
    #ffde00 100%
  );
}

#home .today__ring #gauge-container div.gradient.complete {
  /* 目標達成時のカラー（全緑系）。
     初期 opacity:0（非表示）。walk.js の updateGauge() が達成時に opacity:1 にする。 */
  background: conic-gradient(
    from 180deg,
    #00b743 0%,
    #009402 12.5%,
    #aafd01 30%,
    #19a800 50%,
    #00d201 70%,
    #00dc8f 82.5%,
    #00b743 98%
  );
  opacity: 0;
}

#home .today__ring #gauge-container div.gradient.uncomplete {
  /* 未達成時のカラー（初期表示）。
     初期 opacity:1。walk.js の updateGauge() が達成時に opacity:0 にする。 */
  opacity: 1;
}

#home .today__ring #gauge-container .gauge {
  mix-blend-mode: lighten;
}

#home .today__ring #gauge-container .gauge > rect {
  fill: white;
}

#home .today__ring #gauge-container .gauge > path {
  stroke: black;
  stroke-width: 12;
  /* 初期値は 0% 進捗（walk.js 起動前の状態）。total=288 スケール。
     walk.js の updateGauge() が $(this).css("stroke-dasharray", filled+" "+(288-filled))
     で動的に上書きする。プレビュー時の 75% 表示は HTML の
     <path stroke-dasharray="216 72"> インライン属性で表現。 */
  stroke-dasharray: 0 288;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  fill: none;
  transform-origin: 55px 55px;
}

#home .today__ring #gauge-container .trail {
  mix-blend-mode: darken;
}

#home .today__ring #gauge-container .trail > path {
  stroke: #f4f4f4;
  stroke-width: 12;
  stroke-linecap: round;
  fill: none;
  transform-origin: 55px 55px;
}

#home .today__ring #gauge-container .highlight {
  mix-blend-mode: overlay;
  transform-origin: 55px 55px;
  /* animation-fill-mode: backwards で delay 中も 0% キーフレームの値を適用。
     これがないと delay の 0.5s 間、デフォルトの opacity:1 & rotation:0 で
     ハイライトが 6 時方向に一瞬出てしまう。 */
  animation:
    ring-rotate 4s 0.5s infinite ease-in-out backwards,
    ring-opacity 4s 0.5s infinite linear backwards;
}

/* ハイライト位置:
   - 0% 〜 10%: 頂上で固定（rotation 180deg）。フェードイン中に動かない
   - 10% 〜 45%: 頂上から時計回りに 360° 一周（540deg に到達）
   - 45% で opacity=0 に切り替わるため、頂上到達の瞬間には透明で再フラッシュしない */
@keyframes ring-rotate {
  0% {
    transform: rotateZ(180deg);
  }
  10% {
    transform: rotateZ(180deg);
  }
  45% {
    transform: rotateZ(540deg);
  }
  100% {
    transform: rotateZ(540deg);
  }
}

@keyframes ring-opacity {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ----- Figma デザインに準拠したリング内オーバーレイ ----- */
#home .today__ring .ring__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#home .today__ring .ring__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
  font-feature-settings: 'pwid' 1;
  white-space: nowrap;
  margin-bottom: 2px;
}

#home .today__ring .ring__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

#home .today__ring .ring__value-num {
  font-family: var(--font-num);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  font-feature-settings:
    'kern' 0,
    'lnum' 1,
    'pnum' 1;
}

#home .today__ring .ring__value-unit {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

#home .today__ring .ring__goal {
  height: 22px;
  min-width: 108px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--color-sokuho-primary);
  border-radius: var(--radius-pill);
  color: #ffffff;
  font-family: var(--font-num);
  white-space: nowrap;
}

#home .today__ring .ring__goal-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.5;
}

#home .today__ring .ring__goal-num {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1.5;
}

#home .today__ring .ring__goal-unit {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -0.1em;
  line-height: 1.5;
}

/* ============================================
   [CONN-SHEET] 接続案内オーバーレイ（ヘルスケア / Google Fit / App ストアバッジ）
   本番: css/walk.css 1739〜1771 行目（.conn-sheet, #home-step-web .store-wrapper 等）。
   本番は .conn-sheet を `position: absolute; top: 150px; width: 90%; max-width: 320px`
   で配置している（今回は Figma 仕様に合わせてリング領域 204×204 の内側 160×160 に小さめ配置）。
   本番にマージする場合は walk.css 該当行を置き換え。
   invisible クラスの制御は interface.js が担当。
   ============================================ */
#home .today .conn-sheet {
  position: absolute;
  top: 22px; /* リング枠を見せるため内側に寄せる */
  right: 22px;
  width: 160px;
  height: 160px;
  z-index: 5;
}

#home .today .conn-sheet.invisible {
  display: none;
}

#home .today .conn-sheet__inner {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: var(--radius-l);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}

#home .today .conn-sheet__inner p {
  margin: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary);
}

#home .today .conn-sheet__button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: var(--color-sokuho-primary);
  color: #ffffff;
  padding: 8px 24px;
  border-radius: 999px;
  font-family: var(--font-ja);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#home .today #home-step-google .home-step-google-exec {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  max-width: 250px;
}

#home .today #home-step-google .home-step-google-exec img {
  display: block;
  max-width: 100%;
  height: auto;
}

#home .today #home-step-web .store-wrapper {
  display: block;
  width: 100%;
  max-width: 110px; /* 小さめの conn-sheet (160) に収まるサイズ */
  margin: 0 auto;
}

#home .today #home-step-web .store-wrapper a {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

#home .today #home-step-web img {
  display: block;
  width: 100%;
  height: auto; /* アスペクト比維持 */
}

/* ============================================
   [MENUS/CARDS] Menus (activity cards) — 新規機能
   本番: 同等なし。本番 .top-sokuiku-button-wrap は画像ボタンだけの構成で全く別物。
   本番にマージする場合は walk.css の下の方に新規ブロックとして追加する。
   ============================================ */
#home .menus {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

#home .menus__grid {
  display: grid;
  /* minmax(0, 1fr) で、card__title の nowrap で content が広がっても
     2 カラムが均等 50%/50% に維持される */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

#home .card {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 10px; /* 上下 16 / 左右 10 */
  border-radius: var(--radius-l);
  min-height: 124px;
  color: var(--color-text-primary);
}

#home .card--gogo {
  background-color: var(--color-gogo-light);
}

#home .card--sokuho {
  background-color: var(--color-sokuho-light);
}

#home .card--gupa {
  background-color: var(--color-gupa-light);
}

#home .card--humming {
  background-color: var(--color-humming-light);
}

#home .card--sbs {
  background-color: var(--color-sbs-light);
}

#home .card--wide {
  min-height: 125px;
  padding: 16px 10px;
}

#home .card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

#home .card__icon {
  width: 32px;
  height: 32px;
  display: block;
}

#home .card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
  letter-spacing: 0;
  font-feature-settings: 'palt' 1;
  white-space: nowrap; /* GO!GO!ウォーク などの長いタイトルを改行させない */
  margin: 0;
}

#home .card--wide .card__title {
  font-size: 22px;
  line-height: 1;
}

#home .card__metric {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-text-primary);
}

#home .card__num {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

#home .card__unit {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.0125em;
  margin-left: 2px;
}

/* Action cluster on right side of card */
#home .card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 37px;
  flex-shrink: 0;
}

#home .card__action-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

#home .card__action-btn {
  width: 30px;
  height: 30px;
  display: block;
}

#home .card__action-btn img {
  width: 100%;
  height: 100%;
  display: block;
}

#home .card__action-text {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  letter-spacing: -0.1em;
  white-space: nowrap;
}

/* Per-category accent colors */
#home .card--gogo .card__action-label,
#home .card--gogo .card__action-text {
  color: var(--color-gogo-primary);
}

#home .card--sokuho .card__action-label,
#home .card--sokuho .card__action-text {
  color: var(--color-sokuho-primary);
}

#home .card--gupa .card__action-label,
#home .card--gupa .card__action-text {
  color: var(--color-gupa-primary);
}

#home .card--humming .card__action-label,
#home .card--humming .card__action-text {
  color: var(--color-humming-primary);
}

#home .card--sbs .card__action-label,
#home .card--sbs .card__action-text {
  color: var(--color-sbs-primary);
}

/* ============================================
   [RECORD] Record button (outlined green)
   本番: 本番は .top-record-button-images-wrap の img-button で画像ボタン構成。
   今回は Figma 仕様の「緑枠 + アイコン + テキスト」ボタンに差し替え。
   本番にマージする場合はその画像ボタン領域を丸ごと置き換え。
   ============================================ */
#home .record-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 56px;
  padding: 16px;
  border: 1px solid var(--color-sokuho-primary);
  border-radius: var(--radius-l);
  background-color: transparent;
  color: var(--color-sokuho-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  cursor: pointer;
}

#home .record-button__icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* ============================================
   [MONITOR] Health Monitor button (Figma 3432-10357)
   record-button と同じアウトラインスタイル。文字のみ。
   record-button との間は 24px (parent gap 20px + margin-top 4px)
   ============================================ */
#home .monitor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 16px;
  border: 1px solid var(--color-sokuho-primary);
  border-radius: var(--radius-l);
  background-color: transparent;
  color: var(--color-sokuho-primary);
  font-family: var(--font-ja);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-top: 4px; /* parent gap 20px + 4px = 24px (vs record-button) */
}

/* ============================================
   [BOTTOM-NAV] Bottom Navigation
   本番: public_dev/index.html の 1272〜1311 行目 <div id="menu"><ul><li>...</li></ul></div>
   を本 <nav id="menu" class="bottom-nav">...</nav> で丸ごと置換する想定。

   重要: 本番 walk.css の以下のルールが **ID 優先度** で勝つため、
   ここでは `#menu` を付与して specificity を上げて上書きする:
     walk.css:11  #menu { background-color: #2edb0f; color: #ffffff; z-index: 10; }

   本番 walk.css の `#menu ul li ...` ルール群は、新構造に ul/li がないので
   セレクタ不一致で無視される（削除も不要）。

   JS フック:
     utils.js 30-31: $("#menu a") → a はそのまま子にあるのでヒット
     walk.js 58:     $("#menu a").on("click", ...) → 同上
   ============================================ */
/* bottom-nav の外側に余白を作るための wrapper（pill を画面端から離す） */
.bottom-nav-wrap {
  padding: 0 16px 16px;
}

#menu.bottom-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 80px;
  padding: 8px;
  background-color: var(--color-bg-bottommenu);
  color: inherit;
  border-radius: 40px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

#menu .bottom-nav__item {
  flex: 1;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50px;
  text-decoration: none;
}

/* 選択状態（本番 utils.js:30-31 が付与する .selected クラスに連動） */
#menu .bottom-nav__item.selected {
  background-color: #ffffff;
}

/* アイコン本体（<div> の背景画像で表現。本番 walk.css:83-118 と同じ方式） */
#menu .bottom-nav__item-icon {
  max-width: 84px;
  max-height: 67px;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ラベル（アイコン下の小さいテキスト。Figma 仕様） */
.bottom-nav__item-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  white-space: nowrap;
}

/* 各タブの通常時・選択時アイコン */
#menu .menu-home .bottom-nav__item-icon {
  background-image: url('../img/icon_bottom-nav01.svg');
}
#menu .menu-home.selected .bottom-nav__item-icon {
  background-image: url('../img/icon_bottom-nav01--active.svg');
}

#menu .menu-group .bottom-nav__item-icon {
  background-image: url('../img/icon_bottom-nav02.svg');
}
#menu .menu-group.selected .bottom-nav__item-icon {
  background-image: url('../img/icon_bottom-nav02--active.svg');
}

#menu .menu-msh .bottom-nav__item-icon {
  background-image: url('../img/icon_bottom-nav03.svg');
}
#menu .menu-msh.selected .bottom-nav__item-icon {
  background-image: url('../img/icon_bottom-nav03--active.svg');
}

#menu .menu-gallery .bottom-nav__item-icon {
  background-image: url('../img/icon_bottom-nav04.svg');
}
#menu .menu-gallery.selected .bottom-nav__item-icon {
  background-image: url('../img/icon_bottom-nav04--active.svg');
}

/* ---- 多言語版アイコン（lang-en / lang-pt 切り替え。core.js applyLang が body に lang-{ja,en,pt} を付与） ---- */
.lang-en #menu .menu-home .bottom-nav__item-icon { background-image: url('../img/icon_bottom_en/icon_bottom-nav01-en.svg'); }
.lang-en #menu .menu-home.selected .bottom-nav__item-icon { background-image: url('../img/icon_bottom_en/icon_bottom-nav01--active-en.svg'); }
.lang-en #menu .menu-group .bottom-nav__item-icon { background-image: url('../img/icon_bottom_en/icon_bottom-nav02-en.svg'); }
.lang-en #menu .menu-group.selected .bottom-nav__item-icon { background-image: url('../img/icon_bottom_en/icon_bottom-nav02--active-en.svg'); }
.lang-en #menu .menu-msh .bottom-nav__item-icon { background-image: url('../img/icon_bottom_en/icon_bottom-nav03-en.svg'); }
.lang-en #menu .menu-msh.selected .bottom-nav__item-icon { background-image: url('../img/icon_bottom_en/icon_bottom-nav03--active-en.svg'); }
.lang-en #menu .menu-gallery .bottom-nav__item-icon { background-image: url('../img/icon_bottom_en/icon_bottom-nav04-en.svg'); }
.lang-en #menu .menu-gallery.selected .bottom-nav__item-icon { background-image: url('../img/icon_bottom_en/icon_bottom-nav04--active-en.svg'); }

.lang-pt #menu .menu-home .bottom-nav__item-icon { background-image: url('../img/icon_bottom_po/icon_bottom-nav01-po.svg'); }
.lang-pt #menu .menu-home.selected .bottom-nav__item-icon { background-image: url('../img/icon_bottom_po/icon_bottom-nav01--active-po.svg'); }
.lang-pt #menu .menu-group .bottom-nav__item-icon { background-image: url('../img/icon_bottom_po/icon_bottom-nav02-po.svg'); }
.lang-pt #menu .menu-group.selected .bottom-nav__item-icon { background-image: url('../img/icon_bottom_po/icon_bottom-nav02--active-po.svg'); }
.lang-pt #menu .menu-msh .bottom-nav__item-icon { background-image: url('../img/icon_bottom_po/icon_bottom-nav03-po.svg'); }
.lang-pt #menu .menu-msh.selected .bottom-nav__item-icon { background-image: url('../img/icon_bottom_po/icon_bottom-nav03--active-po.svg'); }
.lang-pt #menu .menu-gallery .bottom-nav__item-icon { background-image: url('../img/icon_bottom_po/icon_bottom-nav04-po.svg'); }
.lang-pt #menu .menu-gallery.selected .bottom-nav__item-icon { background-image: url('../img/icon_bottom_po/icon_bottom-nav04--active-po.svg'); }

/* 多言語対応のため、言語ごとに微調整が必要なスタイルはルート要素に言語クラスを付与して制御する。 */

.lang-en #home .today__title, .lang-pt #home .today__title {
  font-size: 14px; /* 英語は日本語より少し小さめ */
}

.lang-en #home .today__date-num, .lang-pt #home .today__date-num {
  font-size: 16px; /* 英語は日本語より少し小さめ */
}

.lang-en #home .today__date-week, .lang-pt #home .today__date-week {
  font-size: 12px;
}

.lang-en #home .card__title, .lang-pt #home .card__title {
  white-space: wrap;
}

.lang-en #home .card__action-label, .lang-pt #home .card__action-label {
  font-size: 10px;
  white-space: wrap;
}

/* ============================================
   [LANDSCAPE PC] 横長 (4:3 以上) でサイドバー化
   walk.css:2019 の旧 @media は ul/li 構造前提なので新 bottom-nav には効かない。
   ここで row-reverse 時の bottom-nav-wrap / #menu を縦サイドバーに組み替える。
   ============================================ */
@media all and (orientation: landscape) and (min-aspect-ratio: 4/3) {
  .bottom-nav-wrap {
    flex: 0 0 275px;
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
  }

  #menu.bottom-nav {
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    border-radius: 24px;
    gap: 12px;
    justify-content: flex-start;
  }

  #menu .bottom-nav__item {
    flex: 0 0 auto;
    width: 100%;
    height: 80px;
  }
}