/* 宇宙旅行.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; }
}