@charset "UTF-8";
/* 宇宙旅行.jp 共通デザイン（スマホ）静的なページ用 0.3.16 / 状態: live / 2026-11-04 05:36 UTC
   このファイルはプラグイン uy-design-system が自動で書き出しています。直接書きかえず、プラグインの設定で作り直してください。 */
@media (max-width: 780px) {
/* ---- uy-tokens.css ---- */
/* 宇宙旅行.jp 共通の見た目の決まり（uy-design-system）tokens v0.1.0 / 2026-11-01
   ・色は「役割の名前」で使う（--uy-text、--uy-accent など）。色の値をCSSに直接書かない。
   ・決まりが効くのは「data-uy-mode を付けた要素の中」と「body.uyds-night（星空のページ・スマホの幅だけ）」だけ。
     ページ全体（ルート要素）には置かない（ほかのページが同じ名前の変数を使っていても、見た目を変えないため）。
       data-uy-mode="night"  … 夜で固定（星空のページ）
       data-uy-mode="auto"   … 端末の設定に合わせる（data-uy-pick="day|night" で上書き）
       data-uy-mode="day"    … 昼で固定
       data-uy-mode="pick"   … 昼が基本。切り替えボタンで夜（data-uy-pick="night"）にできる（v0.3.10）
   ・使う側のCSSは予備の値を必ず添える：color: var(--uy-text, #18243a);
   ・文字の大きさは11px未満にしない。押せる所は高さ44px以上。
   ・Zen Dots は評価の記号（S・A・B…）だけに使う（--uy-font-grade）。本文は端末の文字。 */

[data-uy-mode] {
  /* ---- 元の色（配色で変わらない） ---- */
  --uy-navy-950: #020611;
  --uy-navy-900: #050b1c;
  --uy-navy-850: #071126;
  --uy-navy-800: #0a1227;
  --uy-navy-750: #0d1934;
  --uy-navy-700: #14213f;
  --uy-cyan-200: #9ee8ff;
  --uy-cyan-300: #6addff;
  --uy-cyan-600: #0b9ce4;
  --uy-blue-700: #0670b0;
  --uy-gold-200: #ffe7aa;
  --uy-gold-300: #ffd978;
  --uy-gold-700: #8d5c00;
  --uy-violet-300: #af9eff;
  --uy-violet-600: #6b4fd8;
  --uy-grade-blue: #2456c8;
  --uy-grade-slate: #5c6b8a;

  /* ---- 文字 ---- */
  --uy-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --uy-font-grade: "Zen Dots", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  --uy-fs-1: 11px;   /* 注記・タグ */
  --uy-fs-2: 12px;   /* 補足 */
  --uy-fs-3: 13px;   /* 一覧の説明・ボタン */
  --uy-fs-4: 14px;   /* 一覧の題名・本文（詰める） */
  --uy-fs-5: 16px;   /* 本文 */
  --uy-fs-6: 18px;   /* 小見出し・スマホの見出し */
  --uy-fs-7: 22px;   /* ページの題名（スマホ） */
  --uy-fs-8: 28px;   /* PCの見出し */
  --uy-fw-normal: 400;
  --uy-fw-bold: 700;
  --uy-fw-heavy: 900;
  --uy-lh-tight: 1.3;
  --uy-lh: 1.65;
  --uy-ls-head: -0.02em;
  --uy-ls-kicker: 0.08em;

  /* ---- 形・余白 ---- */
  --uy-r-1: 8px;
  --uy-r-2: 12px;
  --uy-r-3: 16px;
  --uy-r-4: 22px;
  --uy-r-full: 999px;
  --uy-sp-1: 4px;
  --uy-sp-2: 8px;
  --uy-sp-3: 12px;
  --uy-sp-4: 16px;
  --uy-sp-5: 24px;
  --uy-sp-6: 32px;
  --uy-tap: 44px;
  --uy-dur: 180ms;
  --uy-ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- 詰め方（既定は「詰める」：一覧・ポータル） ---- */
  --uy-row-pad: 11px;
  --uy-row-thumb-w: 104px;
  --uy-row-thumb-h: 78px;
  --uy-gap: 12px;

  /* ---- 昼（既定） ---- */
  --uy-bg: #f6f8fc;
  --uy-bg-page: #f6f8fc;
  --uy-surface: #ffffff;
  --uy-surface-2: #f0f4fa;
  --uy-surface-accent: #ebf7ff;
  --uy-line: #e2e9f1;
  --uy-line-strong: #c4d5e6;
  --uy-text: #18243a;
  --uy-text-2: #5f6d83;
  --uy-accent: #0670b0;
  --uy-on-accent: #ffffff;
  --uy-accent-soft: #ebf7ff;
  --uy-highlight: #8d5c00;
  --uy-highlight-bg: #fff4dc;
  --uy-highlight-line: #f0c96a;
  --uy-violet: #6b4fd8;
  --uy-success: #1d7a52;
  --uy-warn-text: #715621;
  --uy-warn-bg: #fff7e8;
  --uy-danger: #b3261e;
  --uy-danger-bg: #fdecea;
  --uy-focus: #eba51d;
  --uy-brand-grad: linear-gradient(90deg, #1596d9, #7b5cff);
  --uy-feature-grad: linear-gradient(90deg, rgba(4,10,25,.96) 0%, rgba(4,10,25,.78) 46%, rgba(4,10,25,.1) 100%);
  --uy-shadow-1: 0 2px 12px rgba(20, 40, 67, .05);
  --uy-shadow-2: 0 12px 28px rgba(14, 35, 68, .12);
  /* アイコンの台（v0.3.5）：白い台に、つやのある色の絵柄を乗せる */
  --uy-ictile-bg: linear-gradient(160deg, #ffffff 0%, #f2f6fd 100%);
  --uy-ictile-shadow: 0 4px 12px rgba(36, 92, 186, .12), 0 1px 2px rgba(36, 92, 186, .06), inset 0 0 0 1px rgba(214, 226, 244, .6);
}

/* ---- 夜：星空のページは data-uy-mode="night"（固定）。ポータルは端末が夜の設定のとき・夜を選んだとき。
   夜の色は1組だけ。違いは背景だけ（星空のページは星空のグラデーション、ポータルは無地の紺） ---- */
[data-uy-mode="night"], [data-uy-mode="auto"][data-uy-pick="night"], [data-uy-mode="pick"][data-uy-pick="night"] {
  --uy-bg: #020611;
  --uy-surface: #0a1227;
  --uy-surface-2: #0d1934;
  --uy-surface-accent: rgba(106, 221, 255, .09);
  --uy-line: rgba(155, 210, 255, .16);
  --uy-line-strong: rgba(110, 200, 255, .36);
  --uy-text: #f4f7ff;
  --uy-text-2: #b9c6dd;
  --uy-accent: #6addff;
  --uy-on-accent: #04223a;
  --uy-accent-soft: rgba(106, 221, 255, .12);
  --uy-highlight: #ffd978;
  --uy-highlight-bg: rgba(255, 217, 120, .14);
  --uy-highlight-line: rgba(255, 217, 120, .5);
  --uy-violet: #af9eff;
  --uy-success: #81e4bd;
  --uy-warn-text: #ffe7aa;
  --uy-warn-bg: rgba(255, 217, 120, .1);
  --uy-danger: #ff9c9c;
  --uy-danger-bg: rgba(255, 120, 120, .12);
  --uy-focus: #ffd978;
  --uy-brand-grad: linear-gradient(90deg, #6addff, #af9eff);
  --uy-shadow-1: 0 2px 14px rgba(0, 0, 0, .22);
  --uy-shadow-2: 0 24px 60px rgba(0, 0, 0, .34);
  --uy-ictile-bg: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%);
  --uy-ictile-shadow: 0 3px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(155, 210, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}
[data-uy-mode="night"] {
  --uy-bg-page: radial-gradient(circle at 10% 12%, rgba(82, 101, 255, .12), transparent 30%), radial-gradient(circle at 88% 26%, rgba(106, 221, 255, .08), transparent 32%), linear-gradient(180deg, #020611 0%, #071126 100%);
}
[data-uy-mode="auto"][data-uy-pick="night"], [data-uy-mode="pick"][data-uy-pick="night"] { --uy-bg-page: #071126; }
@media (prefers-color-scheme: dark) {
  [data-uy-mode="auto"]:not([data-uy-pick="day"]) {
    --uy-bg: #020611;
    --uy-surface: #0a1227;
    --uy-surface-2: #0d1934;
    --uy-surface-accent: rgba(106, 221, 255, .09);
    --uy-line: rgba(155, 210, 255, .16);
    --uy-line-strong: rgba(110, 200, 255, .36);
    --uy-text: #f4f7ff;
    --uy-text-2: #b9c6dd;
    --uy-accent: #6addff;
    --uy-on-accent: #04223a;
    --uy-accent-soft: rgba(106, 221, 255, .12);
    --uy-highlight: #ffd978;
    --uy-highlight-bg: rgba(255, 217, 120, .14);
    --uy-highlight-line: rgba(255, 217, 120, .5);
    --uy-violet: #af9eff;
    --uy-success: #81e4bd;
    --uy-warn-text: #ffe7aa;
    --uy-warn-bg: rgba(255, 217, 120, .1);
    --uy-danger: #ff9c9c;
    --uy-danger-bg: rgba(255, 120, 120, .12);
    --uy-focus: #ffd978;
    --uy-brand-grad: linear-gradient(90deg, #6addff, #af9eff);
    --uy-shadow-1: 0 2px 14px rgba(0, 0, 0, .22);
    --uy-shadow-2: 0 24px 60px rgba(0, 0, 0, .34);
    --uy-ictile-bg: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%);
    --uy-ictile-shadow: 0 3px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(155, 210, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
    --uy-bg-page: #071126;
  }
}
/* 昼で固定・ポータルで昼を選んだとき */
[data-uy-mode="day"], [data-uy-mode="auto"][data-uy-pick="day"], [data-uy-mode="pick"]:not([data-uy-pick="night"]) {
  --uy-bg: #f6f8fc;
  --uy-bg-page: #f6f8fc;
  --uy-surface: #ffffff;
  --uy-surface-2: #f0f4fa;
  --uy-surface-accent: #ebf7ff;
  --uy-line: #e2e9f1;
  --uy-line-strong: #c4d5e6;
  --uy-text: #18243a;
  --uy-text-2: #5f6d83;
  --uy-accent: #0670b0;
  --uy-on-accent: #ffffff;
  --uy-accent-soft: #ebf7ff;
  --uy-highlight: #8d5c00;
  --uy-highlight-bg: #fff4dc;
  --uy-highlight-line: #f0c96a;
  --uy-violet: #6b4fd8;
  --uy-success: #1d7a52;
  --uy-warn-text: #715621;
  --uy-warn-bg: #fff7e8;
  --uy-danger: #b3261e;
  --uy-danger-bg: #fdecea;
  --uy-focus: #eba51d;
  --uy-brand-grad: linear-gradient(90deg, #1596d9, #7b5cff);
  --uy-feature-grad: linear-gradient(90deg, rgba(4,10,25,.96) 0%, rgba(4,10,25,.78) 46%, rgba(4,10,25,.1) 100%);
  --uy-shadow-1: 0 2px 12px rgba(20, 40, 67, .05);
  --uy-shadow-2: 0 12px 28px rgba(14, 35, 68, .12);
  /* アイコンの台（v0.3.5）：白い台に、つやのある色の絵柄を乗せる */
  --uy-ictile-bg: linear-gradient(160deg, #ffffff 0%, #f2f6fd 100%);
  --uy-ictile-shadow: 0 4px 12px rgba(36, 92, 186, .12), 0 1px 2px rgba(36, 92, 186, .06), inset 0 0 0 1px rgba(214, 226, 244, .6);
}

/* ---- 詰め方：ゆったり（今夜の星空の道具など） ---- */
[data-uy-density="comfortable"] {
  --uy-row-pad: 16px;
  --uy-row-thumb-w: 112px;
  --uy-row-thumb-h: 92px;
  --uy-gap: 16px;
}

/* ---- 端末の部品（入力欄・スクロールバー）の色。部品の中だけ（body には付けない＝PCの見た目を変えない） ---- */
[data-uy-mode="day"], [data-uy-mode="auto"], [data-uy-mode="pick"] { color-scheme: light; }
[data-uy-mode="night"], [data-uy-mode="auto"][data-uy-pick="night"], [data-uy-mode="pick"][data-uy-pick="night"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  [data-uy-mode="auto"]:not([data-uy-pick="day"]) { color-scheme: dark; }
}

@media (prefers-reduced-motion: reduce) {
  [data-uy-mode] { --uy-dur: 0ms; }
}

/* ---- 星空のページ（body.uyds-night）：スマホの幅で、このプラグインがタブの帯・一覧・格付けを整えるときだけ使う。
   PCの幅ではページ全体に決まりの変数を置かない（ほかのCSSの見た目を変えないため） ---- */
@media (max-width: 780px) {
  .uyds-night {
    --uy-navy-950: #020611;
    --uy-navy-900: #050b1c;
    --uy-navy-850: #071126;
    --uy-navy-800: #0a1227;
    --uy-navy-750: #0d1934;
    --uy-navy-700: #14213f;
    --uy-cyan-200: #9ee8ff;
    --uy-cyan-300: #6addff;
    --uy-cyan-600: #0b9ce4;
    --uy-blue-700: #0670b0;
    --uy-gold-200: #ffe7aa;
    --uy-gold-300: #ffd978;
    --uy-gold-700: #8d5c00;
    --uy-violet-300: #af9eff;
    --uy-violet-600: #6b4fd8;
    --uy-grade-blue: #2456c8;
    --uy-grade-slate: #5c6b8a;
    --uy-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
    --uy-font-grade: "Zen Dots", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
    --uy-fs-1: 11px;
    --uy-fs-2: 12px;
    --uy-fs-3: 13px;
    --uy-fs-4: 14px;
    --uy-fs-5: 16px;
    --uy-fs-6: 18px;
    --uy-fs-7: 22px;
    --uy-fs-8: 28px;
    --uy-fw-normal: 400;
    --uy-fw-bold: 700;
    --uy-fw-heavy: 900;
    --uy-lh-tight: 1.3;
    --uy-lh: 1.65;
    --uy-ls-head: -0.02em;
    --uy-ls-kicker: 0.08em;
    --uy-r-1: 8px;
    --uy-r-2: 12px;
    --uy-r-3: 16px;
    --uy-r-4: 22px;
    --uy-r-full: 999px;
    --uy-sp-1: 4px;
    --uy-sp-2: 8px;
    --uy-sp-3: 12px;
    --uy-sp-4: 16px;
    --uy-sp-5: 24px;
    --uy-sp-6: 32px;
    --uy-tap: 44px;
    --uy-dur: 180ms;
    --uy-ease: cubic-bezier(.2, .7, .2, 1);
    --uy-row-pad: 11px;
    --uy-row-thumb-w: 104px;
    --uy-row-thumb-h: 78px;
    --uy-gap: 12px;
    --uy-bg: #020611;
    --uy-bg-page: radial-gradient(circle at 10% 12%, rgba(82, 101, 255, .12), transparent 30%), radial-gradient(circle at 88% 26%, rgba(106, 221, 255, .08), transparent 32%), linear-gradient(180deg, #020611 0%, #071126 100%);
    --uy-surface: #0a1227;
    --uy-surface-2: #0d1934;
    --uy-surface-accent: rgba(106, 221, 255, .09);
    --uy-line: rgba(155, 210, 255, .16);
    --uy-line-strong: rgba(110, 200, 255, .36);
    --uy-text: #f4f7ff;
    --uy-text-2: #b9c6dd;
    --uy-accent: #6addff;
    --uy-on-accent: #04223a;
    --uy-accent-soft: rgba(106, 221, 255, .12);
    --uy-highlight: #ffd978;
    --uy-highlight-bg: rgba(255, 217, 120, .14);
    --uy-highlight-line: rgba(255, 217, 120, .5);
    --uy-violet: #af9eff;
    --uy-success: #81e4bd;
    --uy-warn-text: #ffe7aa;
    --uy-warn-bg: rgba(255, 217, 120, .1);
    --uy-danger: #ff9c9c;
    --uy-danger-bg: rgba(255, 120, 120, .12);
    --uy-focus: #ffd978;
    --uy-brand-grad: linear-gradient(90deg, #6addff, #af9eff);
    --uy-feature-grad: linear-gradient(90deg, rgba(4,10,25,.96) 0%, rgba(4,10,25,.78) 46%, rgba(4,10,25,.1) 100%);
    --uy-shadow-1: 0 2px 14px rgba(0, 0, 0, .22);
    --uy-shadow-2: 0 24px 60px rgba(0, 0, 0, .34);
    --uy-ictile-bg: linear-gradient(160deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 100%);
    --uy-ictile-shadow: 0 3px 12px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(155, 210, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
  }
}
@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .uyds-night { --uy-dur: 0ms; }
}

/* ---- skin-static.css ---- */
/* 宇宙旅行.jp 共通デザイン：静的なHTMLのページ（/meteor-shower/geminids/ など）v0.1.0（プラグイン 0.3.16）
   このファイルはそのままでは使わない。プラグインが uploads/uy-design-system/static-chrome.css を作るときに、
   決まり（uy-tokens.css）・部品（uy-components.css）・スマホの共通（uyds-site-mobile.css）と一緒に1つにまとめ、
   全体を @media (max-width: 780px) で包んで書き出す（＝PCには効かない）。
   html:not(.uyds-st-off) は書き出すときに置きかわる：公開中は html:not(.uyds-st-off)、確認中は html.uyds-st-on。
   ・ページの元の帯（ロゴ＋4つのカテゴリ）は、共通のヘッダーと同じ高さ・色にしておく。JS（static-chrome.js）が共通のヘッダーに
     入れかえても、下の中身の位置がずれない。JS が読み込めなかったときも、ロゴの帯として残る。
   ・4タブの帯は、ほかの星空のページ（skin-sky-nav.css）と同じ「下線のタブ」。タブがないページには JS が入れる（その場所を先にあけておく）。 */

/* ---- 1. 共通のヘッダー・メニューの中を、ページのCSS（a・p・ul などの指定）から守る ---- */
:where(.uyds) a, :where(.uyds) a:hover, :where(.uyds) a:focus { color: inherit; text-decoration: none; }
:where(.uyds) p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
:where(.uyds) ul, :where(.uyds) ol { margin: 0; padding: 0; list-style: none; }
:where(.uyds) b, :where(.uyds) strong { color: inherit; }

/* ---- 2. 共通のヘッダー・メニューを出す（JS が入れたあと） ---- */
html.uyds-st-ready .uyds-hdr:not([hidden]) { display: block; }
html.uyds-st-ready .uyds-hdr { position: relative; z-index: 30; margin: 0 calc(50% - 50vw); }   /* 元の帯の場所（ページの入れ物の中）で、画面の幅いっぱい */
html.uyds-st-ready .sitebar { display: none !important; }

/* ---- 3. ページの元の帯：共通のヘッダーと同じ高さ（49px＋下の線1px）・色・ロゴの形 ---- */
html:not(.uyds-st-off) .sitebar {
  box-sizing: border-box; display: flex; align-items: center; flex-wrap: nowrap; gap: 0;
  height: 50px; min-height: 50px; margin: 0 calc(50% - 50vw); padding: 0 7px 0 12px;
  border-bottom: 1px solid var(--uy-line, rgba(155, 210, 255, .16)); background: var(--uy-surface, #0a1227);
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden;
}
html:not(.uyds-st-off) .sitebar-logo {
  font-family: var(--uy-font, -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif);
  font-size: 21px; font-weight: 900; letter-spacing: -.06em; line-height: 1.05; white-space: nowrap;
  background: linear-gradient(90deg, #6addff, #af9eff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html:not(.uyds-st-off) .sitebar-nav { display: none; }

/* ---- 4. 4タブの帯（今夜の星空・一緒に観察・天文イベント・星空スポット） ---- */
html:not(.uyds-st-off) .hzl-nav {
  box-sizing: border-box; position: relative; margin: 0 calc(50% - 50vw); padding: 0;
  border-bottom: 1px solid var(--uy-line, rgba(155, 210, 255, .16)); background: var(--uy-surface, #0a1227);
  font-family: var(--uy-font, -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif);
}
html:not(.uyds-st-off) .hzl-nav .hzl-nav-in {
  box-sizing: border-box; display: flex; align-items: stretch; gap: 2px; width: 100%; margin: 0; padding: 0 8px;
  overflow-x: auto; scrollbar-width: none;
}
html:not(.uyds-st-off) .hzl-nav .hzl-nav-in::-webkit-scrollbar { display: none; }
html:not(.uyds-st-off) .hzl-nav .hzl-tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1 0 auto;
  min-height: 44px; padding: 0 9px; border: 0; border-radius: 0; background: none; box-shadow: none; text-shadow: none;
  color: var(--uy-text-2, #b9c6dd); font-size: 13px; font-weight: 900; line-height: 1.2; letter-spacing: 0; white-space: nowrap; text-decoration: none;
}
html:not(.uyds-st-off) .hzl-nav .hzl-tab + .hzl-tab { box-shadow: none; }
html:not(.uyds-st-off) .hzl-nav .hzl-tab:hover,
html:not(.uyds-st-off) .hzl-nav .hzl-tab:focus { background: none; color: var(--uy-text, #f4f7ff); text-decoration: none; }
html:not(.uyds-st-off) .hzl-nav .hzl-tab.hzl-tab-on { background: none; color: var(--uy-accent, #6addff); text-shadow: none; }
html:not(.uyds-st-off) .hzl-nav .hzl-tab.hzl-tab-on::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--uy-accent, #6addff);
}
html:not(.uyds-st-off) .hzl-nav .hzl-tab:focus-visible { outline: 3px solid var(--uy-focus, #ffd978); outline-offset: -3px; }
html:not(.uyds-st-off) .hzl-nav .hzl-nav-n { margin-left: 3px; color: var(--uy-highlight, #ffd978); font-size: 11px; }
/* タブがないページ（各流星群の1ページガイドなど）：JS が帯の下に4タブを入れる。その高さ（44px＋線1px）を先にあけておく。
   入れたら（html に uyds-st-ready が付いたら）余白を外す（入れかえで位置がずれない） */
html:not(.uyds-st-off):not(.uyds-st-ready) .wrap > .sitebar + .hero { margin-top: 45px; }

@media (max-width: 389px) {
  html:not(.uyds-st-off) .hzl-nav .hzl-tab { padding: 0 7px; font-size: 12px; }
}
@media (max-width: 349px) {
  html:not(.uyds-st-off) .hzl-nav .hzl-nav-in { padding: 0 4px; gap: 0; }
  html:not(.uyds-st-off) .hzl-nav .hzl-tab { padding: 0 5px; font-size: 11px; }
  html:not(.uyds-st-off) .hzl-nav .hzl-tab.hzl-tab-on::after { left: 4px; right: 4px; }
}

/* ---- uy-components.css ---- */
/* 宇宙旅行.jp 共通の部品（uy-design-system）components v0.2.0 / 2026-11-01
   ・色・文字・形はすべて uy-tokens.css の名前で書く。部品の名前は uyds- で始める（今のページの uy- と重ならない）。
   ・部品は data-uy-mode を付けた .uyds の中で使う（決まりの変数はそこにしかない）。
   ・このプラグインのヘッダー・ポータル・メニューは、ふだんは出さない（display:none）。スマホの幅だけ uyds-site-mobile.css で出す。
   ・広い画面の切り替えは、画面の幅ではなく入れ物の幅で決める（.uyds に container-type を付ける）。
   ・1つの画面で「主ボタン（塗り）」は1つまで。ほかは副ボタン・文字ボタン。 */

.uyds { container-type: inline-size; container-name: uyds; font-family: var(--uy-font); color: var(--uy-text); background: var(--uy-bg-page); font-size: var(--uy-fs-4); line-height: var(--uy-lh); -webkit-font-smoothing: antialiased; }
.uyds *, .uyds *::before, .uyds *::after { box-sizing: border-box; }
/* 下地の打ち消しは :where() で強さ0にする（部品のクラスが必ず勝つように） */
:where(.uyds) a { color: inherit; text-decoration: none; }
:where(.uyds) :where(button, input) { font: inherit; letter-spacing: inherit; text-transform: none; }
:where(.uyds) button { margin: 0; }
.uyds :focus-visible { outline: 3px solid var(--uy-focus); outline-offset: 2px; }
:where(.uyds) img { max-width: 100%; display: block; }
.uyds [hidden] { display: none !important; }
:where(.uyds) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.uyds) input[type="search"] { -webkit-appearance: none; appearance: none; }

/* 1. 見出しの型：英字の小見出し（何のための場所か）＋見出し＋一言 */
.uyds-head { display: grid; gap: 3px; margin: 0 0 var(--uy-sp-3); }
.uyds-kicker { margin: 0; font-size: var(--uy-fs-1); font-weight: var(--uy-fw-heavy); letter-spacing: var(--uy-ls-kicker); color: var(--uy-accent); }
.uyds-title { margin: 0; font-size: var(--uy-fs-6); font-weight: var(--uy-fw-heavy); line-height: var(--uy-lh-tight); letter-spacing: var(--uy-ls-head); text-wrap: balance; color: var(--uy-text); }
.uyds-title.is-page { font-size: var(--uy-fs-7); }
.uyds-lead { margin: 0; font-size: var(--uy-fs-3); color: var(--uy-text-2); line-height: 1.6; }
.uyds-more { display: inline-flex; align-items: center; gap: 2px; min-height: var(--uy-tap); color: var(--uy-accent); font-size: var(--uy-fs-2); font-weight: var(--uy-fw-heavy); white-space: nowrap; }
.uyds-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--uy-sp-2); }
@container uyds (min-width: 700px) {
  .uyds-title { font-size: clamp(18px, 2.6cqi, 28px); }
  .uyds-title.is-page { font-size: var(--uy-fs-8); }
  .uyds-lead { font-size: var(--uy-fs-4); }
}

/* 2. カード（面）。is-feature は「今夜の注目」など、いちばんの注目だけ */
.uyds-card { background: var(--uy-surface); border: 1px solid var(--uy-line); border-radius: var(--uy-r-3); padding: var(--uy-sp-4); box-shadow: var(--uy-shadow-1); }
.uyds-card.is-feature { border-color: var(--uy-highlight-line); background: linear-gradient(150deg, var(--uy-highlight-bg), var(--uy-surface) 62%); }
.uyds-card.is-flat { box-shadow: none; }
a.uyds-card { display: block; transition: border-color var(--uy-dur) var(--uy-ease); }
a.uyds-card:hover { border-color: var(--uy-line-strong); }

/* 3. 一覧の行（小さな絵＋題名＋説明）。ポータル・天文イベント一覧・検索結果で共通 */
.uyds-list { display: grid; }
.uyds-row { display: grid; grid-template-columns: var(--uy-row-thumb-w) minmax(0, 1fr); gap: var(--uy-gap); align-items: center; padding: var(--uy-row-pad) 0; border-bottom: 1px solid var(--uy-line); min-height: var(--uy-tap); color: inherit; }
.uyds-row:last-child { border-bottom: 0; }
.uyds-row__b { display: block; min-width: 0; }
.uyds-row > img, .uyds-row__art { width: 100%; height: var(--uy-row-thumb-h); object-fit: cover; border-radius: var(--uy-r-2); background: var(--uy-surface-2); }
.uyds-row__t { display: block; margin: 0; font-size: var(--uy-fs-4); font-weight: var(--uy-fw-heavy); line-height: 1.42; letter-spacing: -.01em; color: var(--uy-text); }
.uyds-row__d { margin: 4px 0 0; font-size: var(--uy-fs-2); line-height: 1.5; color: var(--uy-text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.uyds-row.is-dated .uyds-row__t { line-height: 1.4; }
.uyds-row.is-dated > .uyds-stars { align-self: start; margin-top: 2px; }
.uyds-row__m .uyds-ic { width: 14px; height: 14px; margin-right: 2px; }
.uyds-row__m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: var(--uy-fs-1); color: var(--uy-text-2); font-weight: var(--uy-fw-bold); }
a.uyds-row:hover .uyds-row__t { color: var(--uy-accent); }
/* 日付つきの行（天文イベント） */
.uyds-row.is-dated { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; }
.uyds-date { display: grid; justify-items: start; gap: 1px; font-variant-numeric: tabular-nums; }
.uyds-date b { font-size: var(--uy-fs-6); font-weight: var(--uy-fw-heavy); line-height: 1.1; color: var(--uy-highlight); letter-spacing: -.02em; }
.uyds-date small { font-size: var(--uy-fs-1); color: var(--uy-text-2); }
.uyds-tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 6px; background: var(--uy-accent-soft); color: var(--uy-accent); font-size: var(--uy-fs-1); font-weight: var(--uy-fw-bold); line-height: 1.6; }
.uyds-tag.is-gold { background: var(--uy-highlight-bg); color: var(--uy-highlight); }
.uyds-tag.is-plain { background: var(--uy-surface-2); color: var(--uy-text-2); }

/* 4. 絞り込み（チップ）：選んでいるものだけ塗る */
.uyds-chips { display: flex; gap: var(--uy-sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.uyds-chips::-webkit-scrollbar { display: none; }
.uyds-chip { flex: none; min-height: var(--uy-tap); padding: 0 15px; border: 1px solid var(--uy-line); border-radius: var(--uy-r-full); background: var(--uy-surface); color: var(--uy-text-2); font-size: var(--uy-fs-3); font-weight: var(--uy-fw-bold); white-space: nowrap; cursor: pointer; }
.uyds-chip.is-on { background: var(--uy-accent); border-color: var(--uy-accent); color: var(--uy-on-accent); font-weight: var(--uy-fw-heavy); }

/* 5. タブ（下線）：ページの切り替え・ジャンル */
.uyds-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0 8px; background: var(--uy-surface); border-bottom: 1px solid var(--uy-line); }
.uyds-tabs::-webkit-scrollbar { display: none; }
.uyds-tab { position: relative; flex: none; min-height: var(--uy-tap); display: inline-flex; align-items: center; padding: 0 12px; border: 0; background: none; color: var(--uy-text-2); font-size: var(--uy-fs-3); font-weight: var(--uy-fw-heavy); white-space: nowrap; cursor: pointer; }
.uyds-tab.is-on { color: var(--uy-accent); }
.uyds-tab.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--uy-accent); }

/* 6. ボタン：主（塗り・1画面に1つ）／副（枠）／文字／注目（金） */
.uyds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--uy-tap); padding: 0 18px; border: 1px solid transparent; border-radius: var(--uy-r-full); font-size: var(--uy-fs-3); font-weight: var(--uy-fw-heavy); line-height: 1.2; cursor: pointer; text-align: center; transition: filter var(--uy-dur) var(--uy-ease); }
.uyds-btn.is-primary { background: var(--uy-accent); color: var(--uy-on-accent); }
.uyds-btn.is-primary:hover { filter: brightness(1.08); }
.uyds-btn.is-secondary { background: var(--uy-surface); color: var(--uy-accent); border-color: var(--uy-line-strong); }
.uyds-btn.is-text { background: none; color: var(--uy-accent); padding: 0 6px; }
.uyds-btn.is-soft { background: var(--uy-accent-soft); color: var(--uy-accent); border-color: var(--uy-line-strong); }   /* ヘッダーの検索など、どのページにも出る操作 */
.uyds-btn.is-highlight { background: var(--uy-highlight-bg); color: var(--uy-highlight); border-color: var(--uy-highlight-line); }
.uyds-btn.is-block { display: flex; width: 100%; border-radius: var(--uy-r-2); }

/* 7. 評価の印：等級（Zen Dots・意味ごとに色が決まっている）と星の数 */
.uyds-grade { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--uy-r-1); font-family: var(--uy-font-grade); font-size: 15px; line-height: 1; letter-spacing: .02em; }
.uyds-grade.g-sss, .uyds-grade.g-ss { background: #0a1430; color: #f5c04a; border-color: #f5c04a; }
.uyds-grade.g-s { background: #f5c04a; color: #241a00; }
.uyds-grade.g-a { background: var(--uy-grade-blue); color: #ffffff; }
.uyds-grade.g-b { background: var(--uy-grade-slate); color: #ffffff; }
.uyds-grade.g-c { background: #dce2ec; color: #253049; }
.uyds-grade.g-d { background: transparent; color: var(--uy-text-2); border: 1px dashed var(--uy-line-strong); }
.uyds-gradeline { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.uyds-gradeline dt { margin: 0; }
.uyds-gradeline dd { margin: 0; font-size: var(--uy-fs-2); color: var(--uy-text-2); line-height: 1.45; }
.uyds-gradeline dd b { display: block; color: var(--uy-text); font-size: var(--uy-fs-3); }
.uyds-stars { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 0 10px; border: 1px solid var(--uy-highlight-line); border-radius: var(--uy-r-full); background: var(--uy-highlight-bg); color: var(--uy-highlight); font-size: var(--uy-fs-2); font-weight: var(--uy-fw-heavy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.uyds-stars.is-none { border-color: var(--uy-line); background: var(--uy-surface-2); color: var(--uy-text-2); font-weight: var(--uy-fw-bold); }

/* 8. 注意書き：ふつう／確認（金）／安全（赤：太陽を見ない など） */
.uyds-note { margin: 0; padding: 10px 12px; border: 1px solid var(--uy-line); border-radius: var(--uy-r-2); background: var(--uy-surface-2); color: var(--uy-text-2); font-size: var(--uy-fs-2); line-height: 1.65; }
.uyds-note.is-warn { background: var(--uy-warn-bg); color: var(--uy-warn-text); border-color: var(--uy-highlight-line); }
.uyds-note.is-safety { background: var(--uy-danger-bg); color: var(--uy-danger); border-color: transparent; border-left: 3px solid var(--uy-danger); border-radius: 0 var(--uy-r-2) var(--uy-r-2) 0; }

/* 9. アイコン：操作は線のアイコン（SVG）。ジャンルの入口だけ立体の絵。絵文字は使わない */
.uyds-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.uyds-ictile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--uy-r-2); background: var(--uy-accent-soft); color: var(--uy-accent); }
.uyds-ictile.is-gold { background: var(--uy-highlight-bg); color: var(--uy-highlight); }
.uyds-iconbtn { display: grid; place-items: center; width: var(--uy-tap); height: var(--uy-tap); border: 0; border-radius: var(--uy-r-2); background: none; color: var(--uy-text); cursor: pointer; }
.uyds-iconbtn:hover { background: var(--uy-surface-2); }

/* 10. 小窓（下から出る画面）：上に「戻る」と題名 */
.uyds-sheet { background: var(--uy-surface); border: 1px solid var(--uy-line); border-radius: var(--uy-r-4) var(--uy-r-4) 0 0; box-shadow: var(--uy-shadow-2); overflow: hidden; }
.uyds-sheet__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--uy-sp-2); padding: 8px 12px; border-bottom: 1px solid var(--uy-line); }
.uyds-sheet__title { font-size: var(--uy-fs-3); font-weight: var(--uy-fw-bold); color: var(--uy-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uyds-sheet__body { padding: var(--uy-sp-4); }

/* ---- ポータル（トップ・ヘッダー）：添付デモの並びを決まりで組む ---- */
.uyds-mast { background: var(--uy-surface); border-bottom: 1px solid var(--uy-line); }
.uyds-brandrow { display: flex; align-items: center; justify-content: space-between; gap: var(--uy-sp-2); height: 56px; padding: 0 8px 0 16px; }
.uyds-logo { display: flex; flex-direction: column; min-width: 0; }
.uyds-logo b { font-size: 22px; font-weight: var(--uy-fw-heavy); letter-spacing: -.06em; line-height: 1.05; white-space: nowrap; background: var(--uy-brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uyds-logo small { margin-top: 3px; font-size: var(--uy-fs-1); letter-spacing: .12em; color: var(--uy-text-2); font-weight: var(--uy-fw-bold); line-height: 1; }
.uyds-actions { display: flex; gap: 2px; }
.uyds-search { display: flex; gap: var(--uy-sp-2); padding: 0 12px 12px; }
.uyds-search__box { flex: 1; min-width: 0; height: var(--uy-tap); display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1.5px solid var(--uy-line-strong); border-radius: var(--uy-r-2); background: var(--uy-surface); color: var(--uy-text-2); font-size: var(--uy-fs-3); }
.uyds-search__box span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.uyds-search__box input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--uy-text); font-size: 16px; /* 16px 未満だと iPhone が入力時に拡大する */ box-shadow: none; }
.uyds-search__box input::placeholder { color: var(--uy-text-2); opacity: 1; font-size: var(--uy-fs-3); }
.uyds-search__box:focus-within { border-color: var(--uy-accent); }
.uyds-search .uyds-btn { border-radius: var(--uy-r-2); padding: 0 16px; }
a.uyds-strip { color: var(--uy-text); }
.uyds-strip { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; background: var(--uy-surface-accent); border-bottom: 1px solid var(--uy-line); }
.uyds-strip__t { flex: 1; min-width: 0; }
.uyds-strip__t b { display: block; font-size: var(--uy-fs-2); line-height: 1.35; }
.uyds-strip__t small { display: block; font-size: var(--uy-fs-1); color: var(--uy-text-2); line-height: 1.35; }
.uyds-genres { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 10px 6px 8px; background: var(--uy-surface); border-bottom: 1px solid var(--uy-line); }
.uyds-genres::-webkit-scrollbar { display: none; }
.uyds-genre { flex: none; width: 72px; word-break: keep-all; overflow-wrap: anywhere; display: grid; justify-items: center; gap: 5px; padding: 2px 0; color: var(--uy-text); font-size: var(--uy-fs-1); font-weight: var(--uy-fw-bold); line-height: 1.25; text-align: center; }
.uyds-genre img { width: 44px; height: 44px; border-radius: 13px; box-shadow: var(--uy-shadow-1); }
.uyds-sec { padding: var(--uy-sp-4) 12px 0; }
.uyds-band { height: 8px; background: var(--uy-bg); border-block: 1px solid var(--uy-line); }
.uyds-panel { background: var(--uy-surface); }
.uyds-foot { padding: 22px 16px 28px; text-align: center; font-size: var(--uy-fs-1); color: var(--uy-text-2); line-height: 1.8; }
.uyds-foot b { display: block; font-size: var(--uy-fs-3); color: var(--uy-text); }
@container uyds (min-width: 700px) {
  .uyds-brandrow { height: 64px; padding: 0 20px; }
  .uyds-search { max-width: 640px; }
  .uyds-genres { justify-content: center; }
  .uyds-genre { width: 84px; font-size: var(--uy-fs-2); }
  .uyds-genre img { width: 52px; height: 52px; }
  .uyds-sec { padding: var(--uy-sp-5) 24px 0; }
  .uyds-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; padding: 0 24px; }
}

/* ---- 星空のページの共通部分（夜で固定） ---- */
.uyds-line { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--uy-line-strong); border-radius: var(--uy-r-2); background: var(--uy-surface); color: var(--uy-text); font-size: var(--uy-fs-3); font-weight: var(--uy-fw-heavy); line-height: 1.45; }
.uyds-line.is-hot { border-color: var(--uy-highlight-line); background: linear-gradient(135deg, var(--uy-highlight-bg), var(--uy-surface) 70%); }
.uyds-line .uyds-ictile { width: 34px; height: 34px; border-radius: 50%; }
.uyds-line > span:nth-child(2) { flex: 1; min-width: 0; }
.uyds-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--uy-sp-2); }
.uyds-tool { display: grid; align-content: start; gap: 6px; min-height: 104px; padding: 12px 10px; border: 1px solid var(--uy-line); border-radius: var(--uy-r-3); background: var(--uy-surface); color: var(--uy-text); }
.uyds-tool b { font-size: var(--uy-fs-3); line-height: 1.35; font-weight: var(--uy-fw-heavy); }
.uyds-tool small { font-size: var(--uy-fs-1); color: var(--uy-text-2); line-height: 1.4; }
.uyds-dl { display: grid; gap: 6px; margin: 10px 0 0; }
.uyds-dl > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start; }
.uyds-dl dt { margin: 0; padding: 2px 0; border-radius: 6px; background: var(--uy-highlight-bg); color: var(--uy-highlight); font-size: var(--uy-fs-1); font-weight: var(--uy-fw-heavy); text-align: center; }
.uyds-dl dd { margin: 0; font-size: var(--uy-fs-2); color: var(--uy-text-2); line-height: 1.6; }
@container uyds (min-width: 700px) {
  .uyds-tools { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---- このプラグインのヘッダー・メニュー・ポータル（ふだんは出さない。スマホの幅だけ uyds-site-mobile.css で出す） ---- */
.uyds-hdr, .uyds-drawer, .uyds-portal { display: none; }
.uyds-anchor { display: none; height: 0; overflow: hidden; } /* スマホの幅だけ出す（移動先の目印） */
.uyds-hdr { background: var(--uy-surface); } /* 重なり順は持たない（今夜の星空の全画面の小窓より下に来るように） */
.uyds-hdr .uyds-genres { border-bottom: 1px solid var(--uy-line); }
.uyds-logo { color: var(--uy-text); }
.uyds-logo.is-image img { width: auto; height: 36px; }
.uyds-iconbtn { color: var(--uy-text); }
.uyds-iconbtn .is-day-icon { display: none; }
[data-uy-mode="night"] .uyds-iconbtn .is-day-icon, [data-uy-mode="auto"][data-uy-pick="night"] .uyds-iconbtn .is-day-icon, [data-uy-mode="pick"][data-uy-pick="night"] .uyds-iconbtn .is-day-icon { display: inline; }
[data-uy-mode="night"] .uyds-iconbtn .is-night-icon, [data-uy-mode="auto"][data-uy-pick="night"] .uyds-iconbtn .is-night-icon, [data-uy-mode="pick"][data-uy-pick="night"] .uyds-iconbtn .is-night-icon { display: none; }
@media (prefers-color-scheme: dark) {
  [data-uy-mode="auto"]:not([data-uy-pick="day"]) .uyds-iconbtn .is-day-icon { display: inline; }
  [data-uy-mode="auto"]:not([data-uy-pick="day"]) .uyds-iconbtn .is-night-icon { display: none; }
}
/* メニューの小窓（全画面）：上に「閉じる」と題名 */
.uyds-drawer { position: fixed; inset: 0; z-index: 100050; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--uy-bg); }
.uyds-drawer__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--uy-sp-2); min-height: 56px; padding: 6px 12px; background: var(--uy-surface); border-bottom: 1px solid var(--uy-line); }
.uyds-drawer__close { min-height: 40px; padding: 0 14px; }
.uyds-drawer__body { display: grid; gap: var(--uy-sp-2); padding: var(--uy-sp-3) 12px 40px; }
.uyds-drawer__body .uyds-search { padding: 0; }
.uyds-drawer__lab { margin: var(--uy-sp-3) 0 0; font-size: var(--uy-fs-1); font-weight: var(--uy-fw-heavy); letter-spacing: var(--uy-ls-kicker); color: var(--uy-text-2); }
.uyds-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; padding: var(--uy-sp-3) 4px; border: 1px solid var(--uy-line); border-radius: var(--uy-r-3); background: var(--uy-surface); }
.uyds-quick .uyds-genre { width: auto; }
.uyds-menu { border: 1px solid var(--uy-line); border-radius: var(--uy-r-3); background: var(--uy-surface); padding: 0 14px; }
.uyds-menu__list > .uyds-menu__item + .uyds-menu__item { border-top: 1px solid var(--uy-line); }
.uyds-menu__item > a, .uyds-menu__item > span { display: flex; align-items: center; min-height: 48px; padding: 6px 0; color: var(--uy-text); font-size: var(--uy-fs-4); font-weight: var(--uy-fw-heavy); line-height: 1.45; }
.uyds-menu__item > a[aria-current="page"] { color: var(--uy-accent); }
.uyds-menu__sub { display: grid; padding: 0 0 8px 12px; border-left: 2px solid var(--uy-line); margin-left: 2px; }
.uyds-menu__sub .uyds-menu__item > a, .uyds-menu__sub .uyds-menu__item > span { min-height: 44px; font-size: var(--uy-fs-4); font-weight: var(--uy-fw-normal); color: var(--uy-text-2); }
html.uyds-lock, html.uyds-lock body { overflow: hidden; }
/* ポータル（トップ） */
.uyds-portal { background: var(--uy-bg); }
.uyds-portal .uyds-tabs { position: relative; }
.uyds-portal .uyds-sec { padding-bottom: var(--uy-sp-4); }
.uyds-portal .uyds-headrow .uyds-head { margin: 0 0 var(--uy-sp-2); }
.uyds-portal__more, .uyds-portal__go { margin-top: var(--uy-sp-3); }
.uyds-portal__more .uyds-ic { transform: rotate(90deg); }
.uyds-portal__note { margin-top: var(--uy-sp-3); }
.uyds-portal__end { border-bottom: 0; }
.uyds-admin-note { padding: 8px 12px; background: #fff4dc; color: #715621; font-size: 13px; }
/* トップ：ロゴの段と検索の段をつなげる */
.uyds-hdr > .uyds-mast:first-child:not(:only-child) { border-bottom: 0; }
.uyds-mast--sub .uyds-search { padding-top: 0; }

/* ---- テーマ（Astra など）の飾りに負けないように ----
   Astra は button・button:hover・input[type=search]:focus・ul・h2・a:hover などに全体の飾りを付ける。
   ここで、押したとき・選んだときも含めて、部品の形と色を強めに決め直す。 */
.uyds .uyds-title { margin: 0; font-size: var(--uy-fs-6); font-weight: var(--uy-fw-heavy); line-height: var(--uy-lh-tight); letter-spacing: var(--uy-ls-head); color: var(--uy-text); clear: none; }
.uyds .uyds-title.is-page { font-size: var(--uy-fs-7); }
.uyds .uyds-kicker, .uyds .uyds-lead, .uyds .uyds-note, .uyds .uyds-drawer__lab { margin-left: 0; margin-right: 0; }
.uyds .uyds-kicker, .uyds .uyds-lead { margin-top: 0; margin-bottom: 0; }
.uyds .uyds-menu__list, .uyds .uyds-menu__sub { margin: 0; list-style: none; }
.uyds .uyds-menu__list { padding: 0; }
.uyds .uyds-menu__sub { padding: 0 0 8px 12px; margin-left: 2px; }
.uyds .uyds-tab, .uyds .uyds-tab:hover, .uyds .uyds-tab:focus, .uyds .uyds-tab:active {
  padding: 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--uy-text-2);
  font-size: var(--uy-fs-3); font-weight: var(--uy-fw-heavy); line-height: 1.2; text-decoration: none;
}
.uyds .uyds-tab.is-on, .uyds .uyds-tab.is-on:hover, .uyds .uyds-tab.is-on:focus, .uyds .uyds-tab.is-on:active { color: var(--uy-accent); }
.uyds .uyds-btn, .uyds .uyds-btn:hover, .uyds .uyds-btn:focus, .uyds .uyds-btn:active { padding: 0 18px; font-size: var(--uy-fs-3); font-weight: var(--uy-fw-heavy); line-height: 1.2; text-decoration: none; border-width: 1px; border-style: solid; }
.uyds .uyds-btn.is-primary, .uyds .uyds-btn.is-primary:hover, .uyds .uyds-btn.is-primary:focus, .uyds .uyds-btn.is-primary:active { background: var(--uy-accent); color: var(--uy-on-accent); border-color: transparent; }
.uyds .uyds-btn.is-secondary, .uyds .uyds-btn.is-secondary:hover, .uyds .uyds-btn.is-secondary:focus, .uyds .uyds-btn.is-secondary:active { background: var(--uy-surface); color: var(--uy-accent); border-color: var(--uy-line-strong); }
.uyds .uyds-btn.is-soft, .uyds .uyds-btn.is-soft:hover, .uyds .uyds-btn.is-soft:focus, .uyds .uyds-btn.is-soft:active { background: var(--uy-accent-soft); color: var(--uy-accent); border-color: var(--uy-line-strong); }
.uyds .uyds-search .uyds-btn { padding: 0 16px; border-radius: var(--uy-r-2); }
.uyds .uyds-iconbtn, .uyds .uyds-iconbtn:hover, .uyds .uyds-iconbtn:focus, .uyds .uyds-iconbtn:active { padding: 0; border: 0; background: none; box-shadow: none; color: var(--uy-text); }
.uyds .uyds-iconbtn:hover { background: var(--uy-surface-2); }
.uyds .uyds-search__box input, .uyds .uyds-search__box input:focus, .uyds .uyds-search__box input:hover {
  height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--uy-text); font-size: 16px; line-height: 1.3;
}
.uyds a.uyds-more, .uyds a.uyds-more:hover, .uyds a.uyds-more:focus, .uyds .uyds-strip .uyds-more { color: var(--uy-accent); }
.uyds a.uyds-genre, .uyds a.uyds-genre:hover, .uyds a.uyds-genre:focus, .uyds a.uyds-strip, .uyds a.uyds-strip:hover, .uyds a.uyds-strip:focus,
.uyds a.uyds-row, .uyds a.uyds-row:hover, .uyds a.uyds-row:focus, .uyds a.uyds-logo:hover, .uyds a.uyds-logo:focus { color: var(--uy-text); text-decoration: none; }
.uyds .uyds-menu__item > a:hover, .uyds .uyds-menu__item > a:focus { color: var(--uy-accent); text-decoration: none; }
.uyds .uyds-menu__sub .uyds-menu__item > a:hover, .uyds .uyds-menu__sub .uyds-menu__item > a:focus { color: var(--uy-accent); }
.uyds-portal .uyds-portal__pane .uyds-sec { padding-top: 4px; }
.uyds-portal .uyds-portal__pane .uyds-headrow { padding-top: 12px; }
/* ポータルの中に出すとき（ヘッダーを差し替えていない端末・テーマ） */
.uyds-portal__top .uyds-mast--sub .uyds-search { padding-top: 12px; }
.uyds-portal__top .uyds-genres { border-bottom: 1px solid var(--uy-line); }

/* 2026-11-01 v0.2.0: モバイルの「7入口＋8タブ」。PCのデザインには適用しない。 */
@media (max-width: 780px) {
  .uyds-portal, .uyds-hdr { --uy-row-thumb-w: 84px; --uy-row-thumb-h: 63px; --uy-row-pad: 7px; --uy-gap: 10px; }
  .uyds-hdr .uyds-brandrow { height: 49px; padding-left: 12px; padding-right: 7px; }
  .uyds-hdr .uyds-logo b { font-size: 21px; }
  .uyds-hdr .uyds-logo small { font-size: 11px; margin-top: 2px; }
  .uyds-hdr .uyds-search { padding: 0 10px 6px; gap: 6px; }
  .uyds-portal__top .uyds-search { padding: 7px 10px 5px; }
  .uyds .uyds-search__box { height: 44px; }
  .uyds .uyds-search .uyds-btn { min-height: 44px; padding: 0 13px; }
  /* 4つ＋3つ（2段目は均等幅）で、7ジャンルすべてを視界に入れる。 */
  .uyds-hdr .uyds-genres, .uyds-portal__top .uyds-genres, .uyds-drawer .uyds-quick {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    overflow: visible; gap: 0 0; padding: 6px 5px 5px;
  }
  .uyds-hdr .uyds-genres > .uyds-genre, .uyds-portal__top .uyds-genres > .uyds-genre,
  .uyds-drawer .uyds-quick > .uyds-genre {
    grid-column: span 3; width: auto; min-width: 0; min-height: 68px;
    display: grid; align-content: center; justify-items: center; gap: 3px;
    padding: 2px 0; font-size: 11px; line-height: 1.25;
    white-space: nowrap; word-break: normal; overflow-wrap: normal;
  }
  .uyds-hdr .uyds-genres > .uyds-genre:nth-child(n+5), .uyds-portal__top .uyds-genres > .uyds-genre:nth-child(n+5),
  .uyds-drawer .uyds-quick > .uyds-genre:nth-child(n+5) { grid-column: span 4; }
  .uyds-hdr .uyds-genres > .uyds-genre img, .uyds-portal__top .uyds-genres > .uyds-genre img,
  .uyds-drawer .uyds-quick > .uyds-genre img { width: 42px; height: 42px; border-radius: 12px; }
  .uyds-drawer .uyds-quick { border: 1px solid var(--uy-line); border-radius: var(--uy-r-3); padding: 8px 5px; }
  .uyds-portal .uyds-tabs { padding-inline: 7px; gap: 1px; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
  .uyds-portal .uyds-tab { min-height: 42px; font-size: 12px; scroll-snap-align: start; }
  .uyds-portal .uyds-portal__pane .uyds-headrow { padding-top: 8px; }
  .uyds-portal .uyds-portal__pane .uyds-sec { padding: 0 12px 12px; }
  .uyds-portal .uyds-portal__pane .uyds-head { gap: 2px; margin-bottom: 4px; }
  .uyds-portal .uyds-portal__pane .uyds-title { font-size: 16px; line-height: 1.35; }
  .uyds-portal .uyds-portal__pane .uyds-lead { font-size: 12px; line-height: 1.4; }
  .uyds-portal .uyds-row__t { font-size: 13px; line-height: 1.35; }
  .uyds-portal .uyds-row__d { margin-top: 2px; font-size: 12px; line-height: 1.35; -webkit-line-clamp: 1; }
  .uyds-portal .uyds-row__m { margin-top: 3px; }
  .uyds-portal .uyds-tag { padding: 0 5px; line-height: 1.5; }
  .uyds-portal .uyds-portal__more, .uyds-portal .uyds-portal__go { min-height: 44px; margin-top: 8px; font-size: 12px; }
  .uyds-portal .uyds-portal__note { margin-top: 8px; font-size: 11px; line-height: 1.45; }
  .uyds-portal__upcoming { margin-top: 14px; border-top: 1px solid var(--uy-line); padding-top: 9px; }
  .uyds-portal__upcoming h3 { color: var(--uy-text); font-size: 13px; font-weight: 700; line-height: 1.4; margin: 0 0 4px; }
  .uyds-portal__upcoming .uyds-row { grid-template-columns: 42px minmax(0,1fr); gap: 9px; padding: 8px 0; }
  .uyds-portal__upcoming .uyds-row .uyds-stars { display: none; }
  .uyds-portal__upcoming .uyds-date b { font-size: 16px; }
  .uyds-portal__upcoming .uyds-date small { font-size: 11px; }
}
@media (min-width: 600px) and (max-width: 780px) {
  .uyds-hdr .uyds-genres, .uyds-portal__top .uyds-genres, .uyds-drawer .uyds-quick { grid-template-columns: repeat(7, minmax(0,1fr)); }
  .uyds-hdr .uyds-genres > .uyds-genre, .uyds-portal__top .uyds-genres > .uyds-genre, .uyds-drawer .uyds-quick > .uyds-genre,
  .uyds-hdr .uyds-genres > .uyds-genre:nth-child(n+5), .uyds-portal__top .uyds-genres > .uyds-genre:nth-child(n+5), .uyds-drawer .uyds-quick > .uyds-genre:nth-child(n+5) { grid-column: auto; }
}
@media (max-width: 349px) {
  .uyds-hdr .uyds-genres > .uyds-genre, .uyds-portal__top .uyds-genres > .uyds-genre,
  .uyds-drawer .uyds-quick > .uyds-genre { font-size: 11px; letter-spacing: -.03em; }
  .uyds-hdr .uyds-genres > .uyds-genre img, .uyds-portal__top .uyds-genres > .uyds-genre img,
  .uyds-drawer .uyds-quick > .uyds-genre img { width: 39px; height: 39px; }
  .uyds-portal, .uyds-hdr { --uy-row-thumb-w: 74px; --uy-row-thumb-h: 56px; --uy-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .uyds-portal .uyds-tabs { scroll-behavior: auto; }
}

/* v0.2.1: 上段は人気ページに直行するショートカット。下段はジャンルで探すタブ。 */
@media (max-width: 780px) {
  .uyds-shortcuts-label, .uyds-category-label {
    margin: 0; padding: 3px 11px 0; font-size: 10px; line-height: 1.25;
    letter-spacing: .01em; font-weight: 700; color: var(--uy-text-2); background: var(--uy-surface);
  }
  .uyds-shortcuts-label { padding-top: 5px; }
  .uyds-category-label { padding-top: 5px; padding-bottom: 2px; }
  .uyds-hdr .uyds-genres, .uyds-portal__top .uyds-genres { padding-top: 3px; }
  .uyds-hdr .uyds-genres img, .uyds-portal__top .uyds-genres img, .uyds-drawer .uyds-quick img {
    object-fit: cover; object-position: center; background: var(--uy-surface); aspect-ratio: 1;
  }
  .uyds-genre:focus-visible { outline: 2px solid var(--uy-accent); outline-offset: 2px; border-radius: 7px; }
}

/* v0.3.0：一覧の画像（各ページの本物の画像）と、トップの今の本文を開くボタン */
.uyds-row > img.is-photo { background: var(--uy-surface-2); box-shadow: inset 0 0 0 1px var(--uy-line); }
.uyds-orig { padding: 12px 12px 4px; }
.uyds a.uyds-orig__open, .uyds a.uyds-orig__open:hover, .uyds a.uyds-orig__open:focus {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 12px 12px 14px;
  border: 1px solid var(--uy-line-strong); border-radius: var(--uy-r-3);
  background: linear-gradient(135deg, var(--uy-accent-soft), var(--uy-surface) 70%); color: var(--uy-text); text-decoration: none;
}
.uyds-orig__t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.uyds-orig__t small { font-size: var(--uy-fs-1); font-weight: var(--uy-fw-heavy); letter-spacing: var(--uy-ls-kicker); color: var(--uy-accent); line-height: 1.3; }
.uyds-orig__t b { font-size: 15px; font-weight: var(--uy-fw-heavy); line-height: 1.35; color: var(--uy-text); }
.uyds-orig__t span { font-size: var(--uy-fs-2); line-height: 1.45; color: var(--uy-text-2); }
.uyds-orig__go { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--uy-accent-soft); color: var(--uy-accent); }
.uyds-orig__go .uyds-ic { width: 18px; height: 18px; transform: rotate(90deg); transition: transform var(--uy-dur) var(--uy-ease); }
html.uyds-orig-open .uyds-orig__go .uyds-ic { transform: rotate(-90deg); }

/* v0.3.2 ホーム：ジャンル・施設上段6件と、人気コンテンツ下段6件。
   メニュー内のジャンル一覧や、タブ・PCの表示には影響させない。 */
@media (max-width: 780px) {
  .uyds-hdr .uyds-shortcuts-section, .uyds-portal__top .uyds-shortcuts-section {
    min-width: 0; width: 100%; background: var(--uy-surface); border-bottom: 1px solid var(--uy-line);
  }
  .uyds-hdr .uyds-shortcuts-label, .uyds-portal__top .uyds-shortcuts-label {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-height: 17px; margin: 0; padding: 4px 12px 0; font-size: 10px;
    font-weight: 700; line-height: 1.3; color: var(--uy-text-2);
  }
  .uyds-hdr .uyds-shortcuts-label--features, .uyds-portal__top .uyds-shortcuts-label--features {
    padding-top: 5px; border-top: 1px solid var(--uy-line);
  }
  .uyds-shortcuts-hint { font-weight: 500; font-size: 10px; color: var(--uy-text-2); white-space: nowrap; }
  .uyds-shortcuts-hint span { padding-left: 2px; font-size: 14px; vertical-align: -1px; }
  .uyds-hdr .uyds-genres.uyds-shortcuts-row, .uyds-portal__top .uyds-genres.uyds-shortcuts-row {
    /* 上下を同一カラム幅に。両列でアイコン中心のX座標を一致させる。 */
    --uyds-shortcut-column-width: clamp(86px, calc((100% - 22px) / 4.25), 104px);
    display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
    gap: 6px; margin: 0; padding: 3px 10px 6px;
    max-width: 100%; width: 100%; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 10px;
    border-bottom: 0;
  }
  .uyds-hdr .uyds-genres.uyds-shortcuts-row::-webkit-scrollbar,
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row::-webkit-scrollbar { display: none; }
  /* 上段も6件。約4件＋次のアイコンを少し見せ、横スワイプを示す。 */
  .uyds-hdr .uyds-genres.uyds-shortcuts-row--portals > .uyds-genre,
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row--portals > .uyds-genre,
  .uyds-hdr .uyds-genres.uyds-shortcuts-row--portals > .uyds-genre:nth-child(n+5),
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row--portals > .uyds-genre:nth-child(n+5) {
    flex: 0 0 var(--uyds-shortcut-column-width);
    width: auto; min-width: 0; grid-column: auto;
    min-height: 65px; padding: 2px 0; gap: 2px;
    display: grid; align-content: center; justify-items: center;
    font-size: 10px; line-height: 1.25; letter-spacing: -.04em;
    white-space: nowrap; overflow-wrap: normal;
    scroll-snap-align: start;
  }
  /* 下段は約4.5個が見え、右端に次のカードが覗く配置でスワイプを示す。 */
  .uyds-hdr .uyds-genres.uyds-shortcuts-row--features > .uyds-genre,
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row--features > .uyds-genre,
  .uyds-hdr .uyds-genres.uyds-shortcuts-row--features > .uyds-genre:nth-child(n+5),
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row--features > .uyds-genre:nth-child(n+5) {
    flex: 0 0 var(--uyds-shortcut-column-width);
    width: auto; min-width: 0; grid-column: auto;
    min-height: 65px; padding: 2px 0; gap: 2px;
    display: grid; align-content: center; justify-items: center;
    font-size: 10px; line-height: 1.25; letter-spacing: -.035em;
    white-space: nowrap; overflow-wrap: normal;
    scroll-snap-align: start;
  }
  .uyds-hdr .uyds-shortcuts-row .uyds-genre img,
  .uyds-portal__top .uyds-shortcuts-row .uyds-genre img {
    display: block; width: 43px; height: 43px; border-radius: 12px; object-fit: cover;
  }
  .uyds-hdr .uyds-shortcuts-row > .uyds-genre:focus-visible,
  .uyds-portal__top .uyds-shortcuts-row > .uyds-genre:focus-visible {
    outline: 2px solid var(--uy-accent); outline-offset: -2px;
  }
}
@media (min-width: 680px) and (max-width: 780px) {
  .uyds-hdr .uyds-genres.uyds-shortcuts-row, .uyds-portal__top .uyds-genres.uyds-shortcuts-row {
    justify-content: center;
  }
  /* 6件全てが見える幅ではスワイプ誘導を出さない。 */
  .uyds-shortcuts-section .uyds-shortcuts-hint { display: none; }
}
@media (max-width: 349px) {
  .uyds-hdr .uyds-genres.uyds-shortcuts-row--portals > .uyds-genre,
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row--portals > .uyds-genre { font-size: 10px; }
  .uyds-hdr .uyds-shortcuts-row .uyds-genre img, .uyds-portal__top .uyds-shortcuts-row .uyds-genre img {
    width: 40px; height: 40px;
  }
}


/* v0.3.3 / v0.3.4 下段「人気のコンテンツ」だけ正式名称を2行まで表示。
   上段、ドロワーメニュー、カードのタブ、PCレイアウトには影響しない。 */
@media (max-width: 780px) {
  .uyds-hdr .uyds-genres.uyds-shortcuts-row--features > .uyds-genre,
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row--features > .uyds-genre {
    /* v0.3.4: ラベルは2行でも幅を変更しない（5件目以降の例外指定も廃止）。 */
    min-height: 82px;
    white-space: normal;
  }
  .uyds-hdr .uyds-shortcuts-row--features .uyds-shortcut-feature-label,
  .uyds-portal__top .uyds-shortcuts-row--features .uyds-shortcut-feature-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    width: 100%;
    min-height: 2.6em;
    max-height: 2.6em;
    overflow: hidden;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
    line-height: 1.3;
    text-align: center;
    font-size: 11px;
    letter-spacing: -.035em;
  }
}

/* v0.3.5 アイコンの台。絵柄（assets/img/ui/icons/）は背景が透明で、台はここで描く。
   昼は白い台＋やわらかい影、夜（星空のページ・夜を選んだポータル）は暗いガラス調の台。
   大きさ・角の丸み・並びは今までの指定のまま（ここでは変えない）。 */
.uyds .uyds-genre img {
  background: var(--uy-ictile-bg, linear-gradient(160deg, #ffffff 0%, #f2f6fd 100%));
  box-shadow: var(--uy-ictile-shadow, 0 4px 12px rgba(36, 92, 186, .12), inset 0 0 0 1px rgba(214, 226, 244, .6));
  transition: transform var(--uy-dur, 180ms) var(--uy-ease, ease);
}
.uyds .uyds-genre:active img { transform: translateY(1px) scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .uyds .uyds-genre img { transition: none; }
  .uyds .uyds-genre:active img { transform: none; }
}

/* v0.3.10 上段「ジャンルから探す」・下段「人気のコンテンツへ」のアイコンを詰める。
   間は空けず、1列の幅を画面の約1/5.3に（375pxで約69px＝5つと6つ目が少し見える）。上下の列の位置は今までどおりそろえる。 */
@media (max-width: 780px) {
  .uyds-hdr .uyds-genres.uyds-shortcuts-row, .uyds-portal__top .uyds-genres.uyds-shortcuts-row {
    --uyds-shortcut-column-width: clamp(66px, calc(100% / 5.3), 84px);
    gap: 0; padding-left: 4px; padding-right: 4px; scroll-padding-inline: 4px;
  }
  .uyds-hdr .uyds-genres.uyds-shortcuts-row > .uyds-genre,
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row > .uyds-genre { letter-spacing: -.05em; }
  .uyds-hdr .uyds-shortcuts-row--features .uyds-shortcut-feature-label,
  .uyds-portal__top .uyds-shortcuts-row--features .uyds-shortcut-feature-label { font-size: 10px; letter-spacing: -.05em; }
}
@media (max-width: 359px) {
  .uyds-hdr .uyds-genres.uyds-shortcuts-row > .uyds-genre,
  .uyds-portal__top .uyds-genres.uyds-shortcuts-row > .uyds-genre,
  .uyds-hdr .uyds-shortcuts-row--features .uyds-shortcut-feature-label,
  .uyds-portal__top .uyds-shortcuts-row--features .uyds-shortcut-feature-label { letter-spacing: -.08em; }
  /* 昼・夜のボタンが増えた分、狭い画面でもロゴの下の英字を1行に */
  .uyds-hdr .uyds-logo small { white-space: nowrap; letter-spacing: .04em; }
  .uyds-hdr .uyds-actions { gap: 0; }
  .uyds-hdr .uyds-brandrow { padding-left: 10px; padding-right: 4px; }
}
/* 6つ全部が入る幅（512px以上）では、まん中にそろえて「左右にスワイプ」を出さない */
@media (min-width: 512px) and (max-width: 780px) {
  .uyds-hdr .uyds-genres.uyds-shortcuts-row, .uyds-portal__top .uyds-genres.uyds-shortcuts-row { justify-content: center; }
  .uyds-shortcuts-section .uyds-shortcuts-hint { display: none; }
}

/* ---- uyds-site-mobile.css ---- */
/* 宇宙旅行.jp 共通デザイン：スマホの幅だけ（media="(max-width: 780px)" で読み込む） v0.1.0
   ・このプラグインのヘッダーは、Astra のスマホ用ヘッダー（#ast-mobile-header）があるページでだけ出し、そのときだけ Astra 側をしまう。
     :has() が使えない古いブラウザでは、何も変えない（Astra のヘッダーのまま）。 */

body:has(#ast-mobile-header) .uyds-hdr { display: block; }
body:has(#ast-mobile-header):has(.uyds-hdr) #ast-mobile-header,
body:has(#ast-mobile-header):has(.uyds-hdr) #ast-fixed-header { display: none !important; }

/* メニューの小窓。JSが動くときは .is-open だけで開く。JSが動かないときは #uyds-drawer へのリンク（:target）で開く */
.uyds-drawer.is-open, html:not(.uyds-js) .uyds-drawer:target { display: block; }

/* ポータル（トップ）：画面の幅いっぱい */
.uyds-portal { display: block; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.uyds-anchor { display: block; }
/* 検索・今夜の星空・ジャンルの入口は、ヘッダーに出ているときはポータル側を隠す（同じものを2つ並べない） */
body:has(#ast-mobile-header):has(.uyds-hdr .uyds-mast--sub) .uyds-portal .uyds-portal__top { display: none; }

/* 星空のページ：パンくずも夜の色に（ヘッダーとタブの帯のあいだを白い帯にしない） */
body.uyds-night.uyds-hdr-on .ast-header-breadcrumb,
body.uyds-night.uyds-hdr-on .ast-breadcrumbs-wrapper,
body.uyds-night.uyds-hdr-on #breadcrumbs,
body.uyds-night.uyds-hdr-on .rank-math-breadcrumb { background: var(--uy-surface, #0a1227); color: var(--uy-text-2, #b9c6dd); border-color: var(--uy-line, rgba(155,210,255,.16)); }
body.uyds-night.uyds-hdr-on .ast-header-breadcrumb { border-bottom: 1px solid var(--uy-line, rgba(155,210,255,.16)); }
body.uyds-night.uyds-hdr-on .ast-breadcrumbs-wrapper :is(ul, li, span, .trail-items, .ast-breadcrumbs),
body.uyds-night.uyds-hdr-on #breadcrumbs span,
body.uyds-night.uyds-hdr-on .rank-math-breadcrumb span { color: var(--uy-text-2, #b9c6dd); }
body.uyds-night.uyds-hdr-on .ast-breadcrumbs-wrapper a,
body.uyds-night.uyds-hdr-on #breadcrumbs a,
body.uyds-night.uyds-hdr-on .rank-math-breadcrumb a { color: var(--uy-accent, #6addff); }
body.uyds-night.uyds-hdr-on .ast-breadcrumbs-wrapper { font-size: var(--uy-fs-2, 12px); }

/* トップの今の本文：ポータルの下では、ボタンを押すまでたたんでおく（スマホの幅だけ）。
   ・JSが動くとき：ボタンで html.uyds-orig-open が付いて開く。
   ・JSが動かないとき：ボタン（#uyds-after-portal へのリンク）で :target になって開く。 */
html:not(.uyds-orig-open) body.uyds-orig-collapse #uyds-after-portal:not(:target) ~ * { display: none !important; }

/* v0.3.11 ページ独自の「本文へ移動」リンクを出さない（スマホで新しいヘッダーを出しているときだけ）。
   どれも「上にずらして隠す」作りで、ヘッダーが変わるとロゴの上に出てしまい、ロゴを押せなくなる（流星群カレンダーで発生）。
   テーマ（Astra）の「本文へ移動」（キーボードで移動したときだけ出る）はそのまま残すので、読み上げ・キーボードの利用者も本文へ移動できる。
   流星群カレンダー／天の川／宇宙とは？／宇宙タイピング（2ページ）の4種類。 */
body.uyds-hdr-on #uy-meteor-page .uy-m-skip,
body.uyds-hdr-on #uy-mw-page .mw-skip,
body.uyds-hdr-on #uy-space .uy-skip,
body.uyds-hdr-on #uytp .uytp-skip { display: none !important; }


}