- を scroll-snap の横スクロールトラックにし、
*
- （cover + deck の 1 記事分）を 1 スライド = 100vw にする。
*
* JS (assets/hero-carousel.js) は矢印・ドットの注入と snap 位置の
* 同期のみ。JS 無効時も「横スワイプできるトラック」として機能する
* プログレッシブエンハンスメント構成。自動送りはしない
* （ヒーロー写真をじっくり見せる設計意図のため）。
* ============================================================ */
/* ナビ (矢印/ドット) の absolute 基準 */
.tr-hero-carousel {
position: relative;
}
/* トラック: viewport 幅いっぱいに breakout して横スクロール化。
* has-global-padding の左右 30px はスライド幅の計算を狂わせるので撤廃 */
.tr-hero-carousel .wp-block-post-template {
display: flex !important;
flex-wrap: nowrap;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
/* JS 有効時のみスクロールバーを消す（無効時は操作アフォーダンスとして残す） */
.tr-hero-carousel.tr-carousel-ready .wp-block-post-template {
scrollbar-width: none;
}
.tr-hero-carousel.tr-carousel-ready .wp-block-post-template::-webkit-scrollbar {
display: none;
}
/* スライド: constrained layout の max-width:720 + margin:auto を解除し
* 1 スライド = 100vw に固定。column flex にして deck を下方向に伸ばし、
* 抜粋の長短差によるスライド間の高さ揺れを吸収する */
.tr-hero-carousel .wp-block-post-template > li,
.tr-hero-carousel .wp-block-post-template > .wp-block-post {
flex: 0 0 100vw;
width: 100vw;
max-width: none !important;
margin: 0 !important;
display: flex;
flex-direction: column;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.tr-hero-carousel .wp-block-post-template > li > .tr-hero-deck,
.tr-hero-carousel .wp-block-post-template > .wp-block-post > .tr-hero-deck {
flex: 1 1 auto;
}
/* スライド内の cover / deck: 既存の 100vw breakout (margin: calc(50%-50vw))
* は「縦積み時に li から viewport 幅へ脱出する」ための補正。カルーセルでは
* li 自体が 100vw なので解除し、li にぴったり収める（デスクトップ +30px /
* モバイル +16px の補正ルールより高い詳細度で上書き） */
.tr-hero-carousel .wp-block-post-template > li .wp-block-cover.alignfull,
.tr-hero-carousel .wp-block-post-template > .wp-block-post .wp-block-cover.alignfull,
.tr-hero-carousel .wp-block-post-template > li .tr-hero-deck,
.tr-hero-carousel .wp-block-post-template > .wp-block-post .tr-hero-deck {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ─── 矢印・ドットの位置は cover 高から導く ───
* ★以前は cover 高を変えるたびに矢印(37.5vh = 75vh の半分)とドット(70vh - 2.25rem)が
* 取り残され、実害が出ていた。cover を 62vh / モバイル 58vh に下げた時点で
* モバイルのドットは写真の 81px 下＝白いパネルの上に落ち、白いドットが完全に不可視だった。
* 高さの単一ソースを変数にして、矢印もドットもここから計算する。
* ⚠ デスクトップ値は home.html の cover インライン min-height と一致させること
* （インラインスタイルは CSS より強いので、cover 本体はテンプレート側が正）。 */
.tr-hero-carousel {
--tr-hero-h: 62vh;
}
/* ─── 矢印（JS 注入。デスクトップのみ。位置は cover 高の中央） ─── */
.tr-carousel-arrow {
position: absolute;
top: calc(var(--tr-hero-h) / 2);
transform: translateY(-50%);
z-index: 20;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
background: rgba(14, 22, 38, 0.45);
color: #fff;
cursor: pointer;
padding: 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background-color 0.2s ease, opacity 0.2s ease;
}
.tr-carousel-arrow:hover {
background: rgba(14, 22, 38, 0.8);
}
.tr-carousel-arrow:focus-visible {
outline: 2px solid var(--wp--preset--color--tr-accent, #247A76);
outline-offset: 2px;
}
.tr-carousel-arrow[disabled] {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.tr-carousel-arrow--prev { left: 1.25rem; }
.tr-carousel-arrow--next { right: 1.25rem; }
.tr-carousel-arrow svg { display: block; }
/* ─── ドット（JS 注入。写真下端の少し上・中央） ─── */
.tr-carousel-dots {
position: absolute;
top: calc(var(--tr-hero-h) - 3.25rem);
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
gap: 0.25rem;
}
/* ドット本体 9px + 透明 padding でタップ領域 44px（WCAG 2.2 Target Size 最小）を確保 */
.tr-carousel-dot {
box-sizing: content-box;
width: 10px;
height: 10px;
padding: 17px;
margin: -8px 0; /* 44px の当たりは保ちつつ、見た目の帯は 28px に収める */
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.45);
background-clip: content-box;
cursor: pointer;
transition: background-color 0.2s ease;
}
.tr-carousel-dot:hover {
background-color: rgba(255, 255, 255, 0.75);
background-clip: content-box;
}
.tr-carousel-dot:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.9);
outline-offset: -4px;
}
.tr-carousel-dot[aria-current="true"] {
background-color: #fff;
background-clip: content-box;
}
/* モバイル: 矢印なし（スワイプ + ドット）。cover 高だけ差し替えればドットは追従する */
@media (max-width: 781px) {
.tr-hero-carousel {
--tr-hero-h: 58vh;
}
.tr-carousel-arrow {
display: none;
}
}
/* ============================================================
* 国チョーザー（geographic「行き先を選ぶ」意思決定モジュール）
* v0.5.22: カテゴリ着地を「記事一覧」から「属性で絞る意思決定面」へ。
* カードは .tr-photo-card を継承し、日数/ベスト時期/予算/空路/初心者度チップと
* テーマタグを付与。絞り込みは assets/country-chooser.js（外部 enqueue）で処理する
* （LiteSpeed の JS 最適化下では shortcode 内の inline script が実行されないため）。
* ============================================================ */
.tr-country-chooser {
width: 100%;
}
/* モバイルは絞り込みを折り畳み。デスクトップは summary を隠して常時展開（open 固定） */
.tr-cc-details {
margin-bottom: var(--wp--preset--spacing--sm, 16px);
}
.tr-cc-summary {
cursor: pointer;
list-style: none;
padding: 0.5rem 0;
font-family: var(--wp--preset--font-family--inter);
font-size: 0.85rem;
font-weight: 600;
color: var(--wp--preset--color--tr-ink, #1A2332);
}
.tr-cc-summary::-webkit-details-marker {
display: none;
}
.tr-cc-summary::before {
content: "▾ ";
}
.tr-cc-details:not([open]) .tr-cc-summary::before {
content: "▸ ";
}
@media (min-width: 782px) {
.tr-cc-summary {
display: none;
}
}
.tr-cc-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-bottom: var(--wp--preset--spacing--md, 24px);
}
.tr-cc-fgroup {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.tr-cc-fgroup--toggles {
margin-left: auto;
}
.tr-cc-chipbtn,
.tr-cc-toggle {
font-family: var(--wp--preset--font-family--inter);
font-size: 0.78rem;
font-weight: 600;
line-height: 1;
padding: 0.42rem 0.72rem;
border-radius: 999px;
cursor: pointer;
background: var(--wp--preset--color--tr-surface, #ffffff);
color: var(--wp--preset--color--tr-ink-soft, #4a5568);
border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tr-cc-chipbtn:hover,
.tr-cc-toggle:hover {
border-color: var(--wp--preset--color--tr-accent, #247A76);
color: var(--wp--preset--color--tr-accent, #247A76);
}
.tr-cc-chipbtn.is-active,
.tr-cc-toggle.is-active {
background: var(--wp--preset--color--tr-accent, #247A76);
color: #ffffff;
border-color: var(--wp--preset--color--tr-accent, #247A76);
}
.tr-cc-sort {
font-family: var(--wp--preset--font-family--inter);
font-size: 0.78rem;
color: var(--wp--preset--color--tr-muted, #6b7280);
}
.tr-cc-sort select {
font: inherit;
margin-left: 0.3rem;
padding: 0.32rem 0.45rem;
border-radius: 6px;
border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5);
background: #ffffff;
color: var(--wp--preset--color--tr-ink, #1A2332);
}
.tr-cc-count {
width: 100%;
margin: 0;
font-family: var(--wp--preset--font-family--inter);
font-size: 0.75rem;
color: var(--wp--preset--color--tr-muted, #6b7280);
}
/* 0 件時の空状態（JS が .is-hidden を付け外し） */
.tr-cc-empty {
margin: var(--wp--preset--spacing--md, 24px) 0 0;
padding: var(--wp--preset--spacing--lg, 32px);
border: 1px dashed var(--wp--preset--color--tr-rule, #d9dee5);
border-radius: 6px;
text-align: center;
font-family: var(--wp--preset--font-family--inter);
font-size: 0.85rem;
color: var(--wp--preset--color--tr-ink-soft, #4a5568);
background: var(--wp--preset--color--tr-surface-soft, #f6f8fa);
}
.tr-cc-empty.is-hidden {
display: none;
}
/* 明るい写真の上でも eyebrow / タイトルが沈まないよう、情報量の多いカードは
* オーバーレイを上端から効かせる（.tr-photo-card の既定は上端 0.05 で薄い）。
* 既定は a.tr-photo-card (0,1,1) なので、こちらも a. を付けて詳細度で上回る必要がある。
* var(--card-photo) のフォールバック（紺グラデ）は .tr-photo-card と揃える。 */
a.tr-country-card,
a.tr-itin-card {
background-image:
linear-gradient(180deg, rgba(14, 22, 38, 0.28) 0%, rgba(14, 22, 38, 0.55) 45%, rgba(14, 22, 38, 0.92) 100%),
var(--card-photo, linear-gradient(150deg, #24466E 0%, #16294A 55%, #0E1626 100%));
}
.tr-country-card .tr-pc-eyebrow,
.tr-itin-card .tr-pc-eyebrow {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.45);
}
/* カード拡張（.tr-photo-card を土台に、意思決定属性を積む）
* min-height は a. 付き（背景と同じ理由。詳細度で a.tr-photo-card の 210px に勝つ必要がある） */
a.tr-country-card {
min-height: 360px;
}
.tr-country-card {
justify-content: flex-end;
}
.tr-country-card.is-hidden {
display: none !important;
}
.tr-country-card .tr-cc-meta {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin: 0.5rem 0 0.55rem;
}
.tr-country-card .tr-cc-chip {
font-family: var(--wp--preset--font-family--inter);
font-size: 0.68rem;
font-weight: 600;
line-height: 1;
padding: 0.3rem 0.46rem;
border-radius: 4px;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.tr-country-card .tr-cc-level--1 {
background: rgba(36, 122, 118, 0.9);
}
.tr-country-card .tr-cc-level--2 {
background: rgba(198, 160, 79, 0.9);
}
.tr-country-card .tr-cc-level--3 {
background: rgba(180, 90, 70, 0.9);
}
.tr-country-card .tr-cc-tags {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.5rem;
}
.tr-country-card .tr-cc-tag {
font-family: var(--wp--preset--font-family--inter);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.82);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
@media (max-width: 781px) {
.tr-cc-fgroup--toggles {
margin-left: 0;
}
a.tr-country-card {
min-height: 320px;
}
}
/* ─────────────────────────────────────────────────────────
* テーマハブの意思決定モジュール
* 1) .tr-theme-match — 「こんな気分なら → この体験」（[tr_theme_match]）
* 2) .tr-cc-sig — 国カード上の代表体験（[tr_theme_countries]）
* 絞り込み UI とカードは国チョーザー（.tr-country-chooser）をそのまま再利用するので、
* ここではテーマハブ固有の差分だけを足す。
* ───────────────────────────────────────────────────────── */
.tr-theme-match {
margin: var(--wp--preset--spacing--md) 0;
}
.tr-tm-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.tr-tm-card {
display: flex;
flex-direction: column;
padding: 1.1rem 1.15rem 0.9rem;
border: 1px solid rgba(31, 58, 95, 0.14);
border-left: 3px solid var(--wp--preset--color--tr-accent);
border-radius: 10px;
background: #fff;
}
.tr-tm-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.3rem;
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
color: var(--wp--preset--color--tr-ink);
}
.tr-tm-icon {
font-size: 1.2rem;
line-height: 1;
}
.tr-tm-desc {
margin: 0 0 0.75rem;
font-size: 0.84rem;
line-height: 1.65;
color: var(--wp--preset--color--tr-ink-soft);
}
.tr-tm-list {
list-style: none;
margin: auto 0 0;
padding: 0;
border-top: 1px solid rgba(31, 58, 95, 0.1);
}
.tr-tm-list li + li {
border-top: 1px solid rgba(31, 58, 95, 0.06);
}
a.tr-tm-item {
display: flex;
align-items: baseline;
gap: 0.55rem;
padding: 0.6rem 0.2rem;
text-decoration: none;
color: inherit;
transition: background-color 0.15s ease;
}
a.tr-tm-item:hover,
a.tr-tm-item:focus-visible {
background: rgba(36, 122, 118, 0.07);
}
.tr-tm-flag {
font-size: 1.05rem;
line-height: 1;
}
.tr-tm-body {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.tr-tm-country {
font-weight: 700;
font-size: 0.9rem;
color: var(--wp--preset--color--tr-primary);
}
.tr-tm-sig {
font-size: 0.8rem;
line-height: 1.5;
color: var(--wp--preset--color--tr-ink-soft);
}
/* 矢印は常に描画して場所を確保し、可視性だけ切り替える。
* hover 時に content で文字を足すと行幅が変わり、折り返しが動いてカードが跳ねる。 */
.tr-tm-sig::after {
content: " →";
color: var(--wp--preset--color--tr-accent);
opacity: 0;
transition: opacity 0.15s ease;
}
a.tr-tm-item:hover .tr-tm-sig::after,
a.tr-tm-item:focus-visible .tr-tm-sig::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.tr-tm-sig::after {
transition: none;
}
}
/* 国カード（テーマ文脈）: pitch の下に代表体験を1行足す */
.tr-country-card .tr-cc-sig {
display: block;
margin-top: 0.45rem;
font-size: 0.76rem;
font-weight: 600;
line-height: 1.45;
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
/* ================================================================
* Phase 3: 国ハブ ファクトバー（[tr_decide] 内 / tr_facts_bar()）
* 「日数・予算・空路・はじめて度・ベスト時期」を図で即比較できるようにする。
* 図（メーター/12か月ストリップ）は情報なので、必ず同じ内容の文字を併記している。
* ================================================================ */
.tr-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.1rem 1.4rem;
margin: 1.25rem 0 1.4rem;
padding: 1.1rem 0;
border-top: 1px solid var(--wp--preset--color--tr-rule);
border-bottom: 1px solid var(--wp--preset--color--tr-rule);
}
.tr-fact-label {
margin: 0 0 0.3rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wp--preset--color--tr-muted);
}
.tr-fact-value {
margin: 0 0 0.45rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: var(--wp--preset--color--tr-ink);
}
.tr-fact-of {
font-size: 0.78em;
font-weight: 400;
color: var(--wp--preset--color--tr-muted);
}
.tr-fact-sub {
margin: 0.4rem 0 0;
font-size: 0.72rem;
line-height: 1.5;
color: var(--wp--preset--color--tr-muted);
}
/* 日数スケール: 3日〜14日以上の軸上に、その国のレンジを帯で示す */
.tr-scale {
position: relative;
display: block;
height: 6px;
border-radius: 999px;
background: var(--wp--preset--color--tr-rule);
}
.tr-scale-fill {
position: absolute;
top: 0;
bottom: 0;
border-radius: 999px;
background: var(--wp--preset--color--tr-accent);
}
/* メーター（予算 4段 / はじめて度 3段） */
.tr-meter {
display: flex;
gap: 3px;
}
.tr-meter-seg {
flex: 1;
height: 6px;
border-radius: 999px;
background: var(--wp--preset--color--tr-rule);
}
/* 予算は「はじめて度」と別軸なので色も分ける。
* tr-gold の実値は #75B5B0（ティール系）で tr-accent とほぼ同色に見えるため使わない。 */
.tr-meter--budget .tr-meter-seg.is-on {
background: var(--wp--preset--color--tr-primary);
}
.tr-meter--level .tr-meter-seg.is-on {
background: var(--wp--preset--color--tr-accent);
}
/* 12か月ストリップ */
.tr-months {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2px;
}
.tr-month {
padding: 0.3rem 0;
border-radius: 2px;
font-size: 0.6rem;
font-weight: 600;
text-align: center;
color: var(--wp--preset--color--tr-muted);
background: var(--wp--preset--color--tr-rule);
}
.tr-month.is-best {
color: #fff;
background: var(--wp--preset--color--tr-accent);
}
.tr-month.is-alt {
color: var(--wp--preset--color--tr-ink);
background: rgba(36, 122, 118, 0.3);
}
.tr-legend {
display: inline-block;
width: 0.6rem;
height: 0.6rem;
margin-right: 0.28rem;
border-radius: 2px;
vertical-align: -1px;
}
.tr-legend.is-best {
background: var(--wp--preset--color--tr-accent);
}
.tr-legend.is-alt {
margin-left: 0.7rem;
background: rgba(36, 122, 118, 0.3);
}
/* チップ（直行/経由・テーマ） */
.tr-chip {
display: inline-block;
padding: 0.14rem 0.55rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.tr-chip--direct {
color: #17635f;
background: rgba(36, 122, 118, 0.16);
}
.tr-chip--via {
color: var(--wp--preset--color--tr-ink-soft);
background: rgba(26, 35, 50, 0.08);
}
.tr-chip--theme {
font-weight: 600;
color: var(--wp--preset--color--tr-muted);
background: transparent;
border: 1px solid var(--wp--preset--color--tr-rule);
}
.tr-fact-tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
/* 12 か月ストリップとテーマチップは横幅が要るので広い画面では 2 カラム分使う */
@media (min-width: 720px) {
.tr-fact--season {
grid-column: span 2;
}
}
/* ─── 言語スイッチャ（ヘッダー右端・[tr_lang_switch]）─── */
.tr-lang-switch{display:flex;gap:.45em;align-items:center;font-size:var(--wp--preset--font-size--xs);letter-spacing:.06em;white-space:nowrap;font-family:var(--wp--preset--font-family--inter);}
.tr-lang-switch .is-current{color:var(--wp--preset--color--tr-muted);font-weight:600;}
.tr-lang-switch .tr-ls-sep{color:var(--wp--preset--color--tr-rule);}
.tr-lang-switch a{color:var(--wp--preset--color--tr-ink-soft);text-decoration:none;}
/* タップ領域を 44px 級に拡大（padding+負マージンでレイアウト位置は不変。実測 18×22px → 基準未満だった） */
.tr-lang-switch a,.tr-lang-switch .is-current{padding:.9em .55em;margin:-.9em -.55em;}
.tr-lang-switch a:hover{color:var(--wp--preset--color--tr-accent);text-decoration:underline;}
/* ─── 3言語以上で自動的にこちら: 🌐 ドロップダウン（ネイティブ・JS不要） ─── */ details.tr-lang-dd{position:relative;display:inline-block;} details.tr-lang-dd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.35em;padding:.9em .55em;margin:-.9em -.55em;color:var(--wp--preset--color--tr-ink-soft);} details.tr-lang-dd>summary::-webkit-details-marker{display:none;} details.tr-lang-dd>summary:hover{color:var(--wp--preset--color--tr-accent);} details.tr-lang-dd .tr-ls-caret{font-size:.8em;transition:transform .15s;} details.tr-lang-dd[open] .tr-ls-caret{transform:rotate(180deg);} .tr-lang-dd-menu{position:absolute;right:0;top:calc(100% + .8em);margin:0;padding:.35em;list-style:none;background:var(--wp--preset--color--tr-surface);border:1px solid var(--wp--preset--color--tr-rule);border-radius:6px;box-shadow:0 8px 24px rgba(26,35,50,.12);min-width:10.5em;z-index:60;} .tr-lang-dd-menu li{margin:0;} .tr-lang-dd-menu a,.tr-lang-dd-menu .is-current{display:block;padding:.7em .9em;margin:0;border-radius:4px;text-decoration:none;color:var(--wp--preset--color--tr-ink-soft);} .tr-lang-dd-menu a:hover{background:var(--wp--preset--color--tr-wash, #f4f6f8);color:var(--wp--preset--color--tr-accent);text-decoration:none;} .tr-lang-dd-menu .is-current{color:var(--wp--preset--color--tr-muted);font-weight:600;} .tr-lang-dd-menu .tr-ls-check{color:var(--wp--preset--color--tr-accent);} /* ─── 護照セレクタ + 入境要件 (cn) ──────────────────────────── 査証は読者の護照で結論が反対になる (美国: 新加坡=ESTA可 / 马来西亚=要签证)。 全プロファイルをサーバ側で出し、JS は絞り込みのみ。JS が落ちても全部読める。 */ .tr-passport { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--tr-ink) 12%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--wp--preset--color--tr-accent) 5%, transparent); } .tr-passport-label { margin: 0; font-size: .82rem; font-weight: 700; color: var(--wp--preset--color--tr-ink); } .tr-passport-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .tr-passport-chip { padding: .28rem .7rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--tr-ink) 20%, transparent); border-radius: 999px; background: #fff; color: var(--wp--preset--color--tr-ink); font-size: .78rem; line-height: 1.5; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .tr-passport-chip:hover { border-color: var(--wp--preset--color--tr-accent); color: var(--wp--preset--color--tr-accent); } .tr-passport-chip.is-on { background: var(--wp--preset--color--tr-accent); border-color: var(--wp--preset--color--tr-accent); color: #fff; font-weight: 700; } .tr-passport-chip:focus-visible { outline: 2px solid var(--wp--preset--color--tr-primary); outline-offset: 2px; } .tr-fact--visa .tr-visa-list { margin: .2rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; } .tr-visa-row { display: grid; grid-template-columns: minmax(5.5em, auto) 1fr; gap: .5rem; align-items: baseline; font-size: .84rem; line-height: 1.55; } .tr-visa-row[hidden] { display: none; } .tr-visa-who { font-weight: 700; color: var(--wp--preset--color--tr-primary); white-space: nowrap; } .tr-visa-req { color: var(--wp--preset--color--tr-ink); } @media (max-width: 600px) { .tr-visa-row { grid-template-columns: 1fr; gap: 0; } .tr-visa-who { font-size: .78rem; } } /* 記事本文の入境要件モジュール [tr_visa] ───────────────────── ★本文のカード型要素は .wp-block-post-content a:not(…) の下線エフェクトと 衝突しうるが、これはリンクではない (aside) ので :not() チェーンは不要。 */ .tr-visa-box { margin: 1.6rem 0; padding: 1rem 1.1rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--tr-ink) 14%, transparent); border-left: 3px solid var(--wp--preset--color--tr-accent); border-radius: 8px; background: color-mix(in srgb, var(--wp--preset--color--tr-accent) 4%, transparent); } .tr-visa-box-title { margin: 0 0 .6rem; font-size: .9rem; font-weight: 700; color: var(--wp--preset--color--tr-primary); } .tr-visa-box-note { margin: .6rem 0 0; font-size: .76rem; line-height: 1.6; color: color-mix(in srgb, var(--wp--preset--color--tr-ink) 68%, transparent); } .tr-visa-box .tr-visa-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; } /* ── 記事内の国地図（make-country-map.ts が生成する SVG） ── サイズは SVG 側の viewBox と width:100% に委ねる。 ★モバイルでラベルを読みやすくする試みの記録（どちらも失敗・再挑戦しないこと）: 1) height を伸ばす → preserveAspectRatio="meet" のため中身は拡大されず上下に余白が出るだけ 2) text に font-size:em を掛ける → SVG 内では viewBox 単位に対する相対値になり文字が暴走 → 可読性は生成側（make-country-map.ts）のフォントサイズ設計で担保する。 */ .tr-geomap { display: block; width: 100%; height: auto; } /* ★モバイルは図を最低幅まで拡大し、はみ出しを横スクロールで見せる。 本文幅358px のままだとラベルが6〜10px に潰れて読めない（実測）。620px あれば 同じラベルが16px 前後になる。作法は既存の .tr-value-props（横スクロール化）と同じ。 */ .tr-geomap-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; } @media (max-width: 600px) { .tr-geomap-wrap > .tr-geomap { min-width: 540px; } } /* ── 暗い背景の上の muted テキスト（フッター等） ── tr-muted (#6F6862) は白地では 5.48:1 で問題ないが、tr-ink (#1A2332) の上では 2.88:1 と AA に届かない。同じトークンでも背景で可否が変わるので、暗い面では明るい変種へ差し替える。 */ .wp-block-group[style*="tr-ink"] .has-tr-muted-color, .site-footer .has-tr-muted-color, footer .has-tr-muted-color { color: #9A948C !important; /* #1A2332 上で 5.25:1 */ } /* ── tr-gold テキストの使い分け ── tr-gold (#75B5B0) は紺地/黒地の上では 4.9〜6:1 で読めるが、白地では 2.34:1 と不足する。 ★サイト内では暗い面での使用が多数派なので、既定は gold のまま。 明るい面に置かれている箇所だけを名指しでアクセントへ倒す。 ⚠ 逆（既定をアクセントにして暗い面を除外）を試したところ、フッターの見出しや 暗いセクションの eyebrow が 3.10:1 に落ちた。除外漏れのほうが起きやすい。 */ .tr-category-eyebrow, .wp-block-post-content .has-tr-gold-color, .entry-content .has-tr-gold-color, /* 国ハブの節見出しは本文ブロックの外（site-content 直下のグループ）にある */ .site-content .wp-block-group.alignwide .has-tr-gold-color:not(.tr-explore-eyebrow) { color: var(--wp--preset--color--tr-accent) !important; } /* ── 読み上げ専用（視覚的には隠すが支援技術には読ませる） ── display:none や visibility:hidden はスクリーンリーダーからも消えるので使わない。 */ .tr-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── ⑥⑦ モバイルの可読性とタップ標的 ── ★実測: 本文まわりに 10.4〜12.8px の文字が多数（写真クレジット10.4px・日付11.2px・ カテゴリチップ11.2px）。日本語は英字より小さく見えるため、装飾以外は 12px を下限にする。 タップ標的は指の接触面（約9mm≒44px）を確保する。 */ @media (max-width: 781px) { /* ★既存の .tr-hero-credit { font-size: 0.65rem !important } と同じ !important 同士に なるため、セレクタの詳細度を上げないと勝てない（実測: 10.4px のままだった）。 */ /* 既存は .wp-block-cover.alignfull .tr-hero-credit = (0,3,0)。これを上回る必要がある。 */ .wp-block-cover.alignfull .tr-hero-credit.wp-block-paragraph, .wp-block-cover .tr-hero-credit.wp-block-paragraph, .tr-photo-credit, figcaption.wp-element-caption { font-size: 12px !important; } /* 世界地図ウィジェット・カテゴリ見出し・カード日付など、残りの小さい文字。 ★世界地図のラベルは 10.0px と最小だった。地図の可読性そのものに関わる。 */ .tr-wm-back, .tr-wm-caption, .tr-wm-label .txt, .tr-wm-label .en, .tr-wm-card .txt, .tr-wm-card .en, .tr-wm-card .go, .wp-block-group .tr-category-eyebrow, .tr-category-eyebrow, /* 既存規則の詳細度に勝つため、親クラスを重ねて指定する */ .tr-article-card .tr-card-date, .wp-block-cover.alignfull .tr-hero-overlay .tr-hero-eyebrow, .wp-block-cover.alignfull .wp-block-cover__inner-container .tr-hero-eyebrow, .wp-block-group .tr-hero-eyebrow, .tr-card-date, .tr-card-eyebrow, .tr-card-eyebrow a, .tr-hero-eyebrow, .tr-fact-label, .wp-block-post-terms a { font-size: 11.5px !important; } /* 記事内の統計カード（本文にインライン font-size:11px を持つ）とバッジ類 */ .wp-block-post-content div[style*="font-size:11px"], .tr-aff-badge, .tr-share-label { font-size: 11.5px !important; } .tr-byline, .tr-byline * { font-size: 12.5px !important; } /* 国カード／記事カードのメタ表示。1枚に日数・時期・予算・空路・レベル・タグを詰めるため 10.4〜11.2px まで縮んでいた。日本語の下限として 11.5px を確保し、 溢れは折り返しで吸収する（カードの高さは可変なので破綻しない）。 */ .tr-cc-chip, .tr-cc-tag, .tr-pc-eyebrow, .tr-photo-card time, .tr-article-card time, .wp-block-post-date, .taxonomy-category a { font-size: 11.5px !important; } .tr-cc-meta, .tr-cc-tags { flex-wrap: wrap; } /* 言語切替・ナビ項目などの小さすぎる標的（実測 116x38px）を 44px 以上に */ .wp-block-navigation__responsive-container-content a, .tr-lang-switcher a, .wp-block-navigation-item__content { min-height: 44px; display: flex; align-items: center; } /* チップ類は視覚サイズを保ったまま、擬似要素で当たり判定だけ広げる */ .tr-cc-chipbtn, .tr-cat-chip, .taxonomy-category a { position: relative; } .tr-cc-chipbtn::after, .tr-cat-chip::after, .taxonomy-category a::after { content: ''; position: absolute; inset: 50% 0 0 0; transform: translateY(-50%); min-height: 44px; } } /* ============================================================================ * v0.5.72: トップページを「在庫リスト」から「選ぶ入り口」へ * * 実測（1440×900 / 390×844）で判明した構造上の問題: * - トップ全長 PC 10.2 画面 / SP 14.1 画面 * - うち「国から探す」だけが SP 5,111px = 6.1 画面（全体の 43%）。 * 18か国＋周遊の写真カード 20 枚を 1 列で並べただけで、絞り込み UI が無かった。 * - その結果「したいことから探す」（＝わくわくの本体）が SP 8.4 画面目に沈んでいた。 * - 世界地図とカード列は同じ 18 か国を続けて 2 回見せているだけで連動していなかった。 * ========================================================================== */ /* ─── (1) ヒーロー直下のクイックチップ [tr_trip_chips] ─── * 上から 3 画面に「触ると何かが変わる」操作が 1 つも無かったので、最初の一手をここに置く。 */ .tr-trip-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 0.9rem var(--wp--preset--spacing--md, 24px); } .tr-trip-chips-lead { font-family: var(--wp--preset--font-family--inter); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--wp--preset--color--tr-muted, #6b7280); flex: 0 0 auto; } .tr-trip-chips-list { display: flex; flex-wrap: wrap; gap: 0.45rem; } /* a. を付けて詳細度を上げる（本文由来の a ルールに負けないため）。 * 当たり判定は 44px（WCAG 2.2 Target Size 最小）を padding で確保する。 */ a.tr-trip-chip { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0.55rem 0.95rem; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); border-radius: 999px; background: var(--wp--preset--color--tr-surface, #ffffff); font-family: var(--wp--preset--font-family--inter); font-size: 0.82rem; font-weight: 600; line-height: 1; color: var(--wp--preset--color--tr-ink-soft, #4a5568); text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } a.tr-trip-chip:hover { border-color: var(--wp--preset--color--tr-accent, #247A76); color: var(--wp--preset--color--tr-accent, #247A76); } a.tr-trip-chip:focus-visible { outline: 2px solid var(--wp--preset--color--tr-accent, #247A76); outline-offset: 2px; } a.tr-trip-chip.is-active { background: var(--wp--preset--color--tr-accent, #247A76); border-color: var(--wp--preset--color--tr-accent, #247A76); color: #ffffff; } @media (max-width: 781px) { .tr-trip-chips { gap: 0.45rem 0.6rem; padding: 0.85rem var(--wp--preset--spacing--md, 16px); } .tr-trip-chips-lead { flex-basis: 100%; } /* 横スクロールの帯にして、チップ列で縦を消費しない */ .tr-trip-chips-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--wp--preset--spacing--md, 16px)); padding: 0 var(--wp--preset--spacing--md, 16px); } .tr-trip-chips-list::-webkit-scrollbar { display: none; } a.tr-trip-chip { flex: 0 0 auto; } } /* ─── (2) トップ「国から探す」の絞り込みバー（紺の上に載る） ─── * .tr-cc-chipbtn の既定は明背景向けの白チップなので、暗いセクション用に反転する。 */ /* ★constrained レイアウトの子は max-width:contentSize(720px) を受ける。 * 以前はグリッド(.tr-photo-grid)が直接の子で、その幅指定で 1100px に広がっていたが、 * .tr-country-chooser で包んだ結果ラッパ側が 720px に絞られ、カードが縮んだ。 * 隣の世界地図(.tr-wm)は max-width:100% を持つので広いまま＝地図とカードの幅が食い違う。 * 包んだ側にも同じ逃げを持たせる（geographic 着地のチョーザーには影響しない）。 */ .tr-cgrid { margin-top: var(--wp--preset--spacing--md, 24px); max-width: 100%; } /* テーマカードは写真になったので、文字カード時代の 720px では 1 枚 229px と窮屈 * （「アートと建築で選ぶ次の旅」が 2 行に折れる）。国カードと同じ幅に揃える。 */ .tr-theme-explorer { max-width: 100%; } .tr-cgrid-bar { gap: 0.4rem; margin-bottom: 0.75rem; } .tr-cgrid .tr-cc-chipbtn { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.82rem; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.88); } .tr-cgrid .tr-cc-chipbtn:hover { background: rgba(255, 255, 255, 0.14); border-color: #43B9B2; color: #ffffff; } .tr-cgrid .tr-cc-chipbtn.is-active { background: #43B9B2; border-color: #43B9B2; color: #0E1626; } /* 紺の上では tr-muted (#6b7280) が 2.5:1 しかない。白の 70% で 8.6:1 を確保する。 */ .tr-cgrid .tr-cc-count { margin-bottom: 0.6rem; color: rgba(255, 255, 255, 0.7); } .tr-cgrid .tr-cc-empty { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); } /* 絞り込みで落ちたカード / 初期表示件数を超えたカード。 * 別クラスにしてあるのは、展開したときに絞り込みで落としたカードまで * 出てきてしまわないようにするため（country-chooser.js の collapse()）。 */ .tr-cc-grid > .is-hidden, .tr-cc-grid > .is-collapsed { display: none !important; } .tr-cc-more { display: block; width: 100%; max-width: 320px; min-height: 48px; margin: var(--wp--preset--spacing--md, 24px) auto 0; padding: 0.8rem 1.4rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: transparent; font-family: var(--wp--preset--font-family--inter); font-size: 0.9rem; font-weight: 600; color: #ffffff; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .tr-cc-more:hover { background: rgba(255, 255, 255, 0.1); border-color: #43B9B2; } .tr-cc-more:focus-visible { outline: 2px solid #43B9B2; outline-offset: 2px; } .tr-cc-more[hidden] { display: none; } /* ─── (3) テーマカードの写真化 [tr_theme_explorer] ─── * 食・夜あそび・絶景という「わくわくの本体」が文字だけのカードで、すぐ隣の * 「国から探す」は写真カード 18 枚 ＝ 視覚的な扱いが逆転していた。 * ★ .tr-funnel-card と併用する前提（写真が無いテーマは文字カードのまま）。 */ a.tr-theme-card { position: relative; justify-content: flex-end; min-height: 210px; border: none; border-top: 3px solid var(--wp--preset--color--tr-accent, #247A76); background-image: linear-gradient(180deg, rgba(14, 22, 38, 0.25) 0%, rgba(14, 22, 38, 0.6) 45%, rgba(14, 22, 38, 0.93) 100%), var(--card-photo, linear-gradient(150deg, #24466E 0%, #16294A 55%, #0E1626 100%)); background-size: cover; background-position: center; overflow: hidden; } /* 写真の上に載る文字。コントラストは写真次第で保証できないので、 * 「明るい色＋濃い影」で背景に依らず読めるようにする（.tr-photo-card と同じ方針）。 */ .tr-theme-card .tr-funnel-card-q { color: #C8E4E1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 10px rgba(0, 0, 0, 0.45); } .tr-theme-card .tr-funnel-card-a { color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); } .tr-theme-card .tr-funnel-card-sub { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .tr-theme-card:hover { box-shadow: 0 14px 32px rgba(14, 22, 38, 0.3); } @media (max-width: 781px) { a.tr-theme-card { min-height: 168px; } } /* ─── (4) 最新記事: モバイルを 2 列に ─── * 6 件を 1 列で積むと SP で 2.1 画面ぶんになる。トップの役目が「行き先を選ぶ入り口」なら * ここは俯瞰できればよいので 2 列に畳む。1 件目のフィーチャー（2×2 span）は * モバイルでは横 2 列ぶんを使い、以降を 2 列で流す。 */ @media (max-width: 781px) { .tr-article-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--wp--preset--spacing--sm, 16px) !important; } .tr-article-grid .wp-block-post-template > li:first-child { grid-column: span 2; grid-row: auto; } .tr-article-grid .tr-card-title { font-size: 0.95rem !important; } /* 2 列では抜粋まで置くと 1 枚が縦に伸びるので、題名と日付に絞る （1 件目のフィーチャーカードだけは抜粋を残す） */ .tr-article-grid .wp-block-post-template > li:not(:first-child) .tr-card-excerpt { display: none; } } /* ─── フレーズブック（[tr_phrasebook]・語学学習軸） ─── * 全レベル・全エントリはサーバ側 DOM に出ており、tr-phrasebook.js が is-hidden で * 絞り込むだけ（クローキング回避・JS 無効でも全件読める）。フラッシュカードは * ルートの .is-mode-cards + エントリの .is-flipped で答え（.tr-pb-back）を出し入れする。 */ .tr-phrasebook { margin: var(--wp--preset--spacing--md, 24px) 0; } .tr-pb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: var(--wp--preset--spacing--sm, 16px); } .tr-pb-fgroup { display: flex; flex-wrap: wrap; gap: 0.35rem; } .tr-pb-modes { margin-left: auto; } .tr-pb-chipbtn, .tr-pb-toggle, .tr-pb-mode { font-family: var(--wp--preset--font-family--inter); font-size: 0.78rem; font-weight: 600; line-height: 1; padding: 0.42rem 0.72rem; border-radius: 999px; cursor: pointer; background: var(--wp--preset--color--tr-surface, #ffffff); color: var(--wp--preset--color--tr-ink-soft, #4a5568); border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); transition: background 0.2s, color 0.2s, border-color 0.2s; } .tr-pb-chipbtn:hover, .tr-pb-toggle:hover, .tr-pb-mode:hover { border-color: var(--wp--preset--color--tr-accent, #247A76); color: var(--wp--preset--color--tr-accent, #247A76); } .tr-pb-chipbtn.is-active, .tr-pb-toggle.is-active, .tr-pb-mode.is-active { background: var(--wp--preset--color--tr-accent, #247A76); color: #ffffff; border-color: var(--wp--preset--color--tr-accent, #247A76); } /* レベルタブは意思決定の第一軸なので、場面チップよりわずかに強く見せる */ .tr-pb-levels .tr-pb-chipbtn { font-size: 0.85rem; padding: 0.5rem 0.9rem; } .tr-pb-hint, .tr-pb-count { margin: 0 0 var(--wp--preset--spacing--sm, 16px); font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-pb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--wp--preset--spacing--sm, 16px); } .tr-pb-entry { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); border-radius: 8px; background: var(--wp--preset--color--tr-surface, #ffffff); } .tr-pb-entry.is-hidden { display: none; } .tr-pb-entry.is-learned { background: var(--wp--preset--color--tr-surface-soft, #f6f8fa); } .tr-pb-text { margin: 0; font-weight: 700; font-size: 1.02rem; line-height: 1.45; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-pb-altline { margin: 0; font-size: 0.82rem; color: var(--wp--preset--color--tr-ink-soft, #4a5568); } .tr-pb-pron { margin: 0; font-family: var(--wp--preset--font-family--inter); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--wp--preset--color--tr-accent, #247A76); } .tr-pb-gloss { margin: 0; font-size: 0.92rem; line-height: 1.6; } .tr-pb-note { margin: 0.25rem 0 0; padding-top: 0.4rem; border-top: 1px dashed var(--wp--preset--color--tr-rule, #d9dee5); font-size: 0.8rem; line-height: 1.6; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-pb-metabar { display: flex; flex-wrap: wrap; /* 聞く/ゆっくり/覚えた の3ボタン＋場面タグが狭幅でも崩れないように */ align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.35rem; } .tr-pb-tag { font-family: var(--wp--preset--font-family--inter); font-size: 0.68rem; font-weight: 600; padding: 0.22rem 0.55rem; border-radius: 999px; background: var(--wp--preset--color--tr-surface-soft, #f6f8fa); color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-pb-tools { display: flex; gap: 0.35rem; } .tr-pb-speak, .tr-pb-learn { font-family: var(--wp--preset--font-family--inter); font-size: 0.72rem; font-weight: 600; line-height: 1; padding: 0.35rem 0.6rem; border-radius: 999px; cursor: pointer; background: var(--wp--preset--color--tr-surface, #ffffff); color: var(--wp--preset--color--tr-ink-soft, #4a5568); border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); } .tr-pb-speak:hover, .tr-pb-learn:hover { border-color: var(--wp--preset--color--tr-accent, #247A76); color: var(--wp--preset--color--tr-accent, #247A76); } .tr-pb-entry.is-learned .tr-pb-learn { background: var(--wp--preset--color--tr-accent, #247A76); color: #ffffff; border-color: var(--wp--preset--color--tr-accent, #247A76); } /* ── フラッシュカードモード: 答え（訳・発音・注記）を伏せ、押すとめくる ── */ .tr-phrasebook.is-mode-cards .tr-pb-entry { cursor: pointer; min-height: 120px; justify-content: center; } .tr-phrasebook.is-mode-cards .tr-pb-entry:focus-visible { outline: 2px solid var(--wp--preset--color--tr-accent, #247A76); outline-offset: 2px; } .tr-phrasebook.is-mode-cards .tr-pb-back, .tr-phrasebook.is-mode-cards .tr-pb-tag { display: none; } .tr-phrasebook.is-mode-cards .tr-pb-entry.is-flipped .tr-pb-back { display: block; } .tr-pb-empty { margin: var(--wp--preset--spacing--md, 24px) 0 0; padding: var(--wp--preset--spacing--lg, 32px); border: 1px dashed var(--wp--preset--color--tr-rule, #d9dee5); border-radius: 6px; text-align: center; font-family: var(--wp--preset--font-family--inter); font-size: 0.85rem; color: var(--wp--preset--color--tr-ink-soft, #4a5568); background: var(--wp--preset--color--tr-surface-soft, #f6f8fa); } .tr-pb-empty.is-hidden { display: none; } @media (max-width: 781px) { .tr-pb-modes { margin-left: 0; } .tr-pb-list { grid-template-columns: 1fr; } } /* ── 早見表（[tr_phrasebook ui="sheet"]・カンニングシート）── * 印刷・スクリーンショットでの携帯を想定した密な表。JS は印刷ボタンの表示のみ。 */ .tr-pb-sheetbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.25rem; } .tr-pb-sheetnote { margin: 0; font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-pb-print { font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; font-weight: 600; line-height: 1; padding: 0.42rem 0.72rem; border-radius: 999px; cursor: pointer; background: var(--wp--preset--color--tr-surface, #ffffff); color: var(--wp--preset--color--tr-ink-soft, #4a5568); border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); } .tr-pb-print:hover { border-color: var(--wp--preset--color--tr-accent, #247A76); color: var(--wp--preset--color--tr-accent, #247A76); } h3.tr-pb-sheet-scene { margin: 1.4rem 0 0.5rem; font-size: 1.02rem; } table.tr-pb-sheet { width: 100%; border-collapse: collapse; margin: 0 0 0.5rem; font-size: 0.85rem; line-height: 1.5; } .tr-pb-sheet th, .tr-pb-sheet td { border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; } .tr-pb-sheet th { font-weight: 600; width: 40%; color: var(--wp--preset--color--tr-ink, #1A2332); background: var(--wp--preset--color--tr-surface, #ffffff); } .tr-pb-sheet-pron { width: 27%; font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; color: var(--wp--preset--color--tr-accent, #247A76); } .tr-pb-sheet-gloss { font-size: 0.82rem; } @media (max-width: 600px) { /* 幅が足りない画面ではカナ列を落とし、英語と意味の2列に絞る（読み仮名は詳細ページで） */ .tr-pb-sheet-pron { display: none; } .tr-pb-sheet th { width: 52%; } } @media print { .tr-pb-print { display: none; } table.tr-pb-sheet { font-size: 9pt; } .tr-pb-sheet th, .tr-pb-sheet td { padding: 3pt 5pt; } } /* ── 語学学習サブサイトのローカルナビ（single-learning.html）── * 全学習ページ共通の「サブサイトの顔」。タイトルバンド直下に貼り付く帯。 */ .tr-learning-navband { border-bottom: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); background: var(--wp--preset--color--tr-surface, #ffffff); } .tr-learning-nav { display: flex; gap: 0.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: var(--wp--preset--font-family--inter); } /* タブ風（下線インジケータ）はやめ、通常のリンクとして描く。実体はページ遷移なので、 * 「その場で切り替わるタブ」という誤った期待を見た目で作らない（2026-07-29）。 * 体感の速さは wp_head の speculationrules（prerender）が補う。 */ .tr-learning-nav { gap: 1.1rem; } .tr-learning-nav a { flex: 0 0 auto; padding: 0.7rem 0; font-size: 0.8rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; color: var(--wp--preset--color--tr-accent, #247A76); white-space: nowrap; } .tr-learning-nav a:hover { color: var(--wp--preset--color--tr-primary, #1F3A5F); } /* ── 語学学習 UI/UX 改善（2026-07-28）── * ①ローカルナビの現在地（aria-current は render_block_core/html が注入） * ②スタッツ帯（[tr_phrasebook_stats]） * ③モバイルのタイトル帯を詰め、ツールまでのスクロールを短縮 */ /* 現在地はリンクに見せない（押しても同じページの再読込にしかならないため無効化） */ .tr-learning-nav a.is-current { color: var(--wp--preset--color--tr-ink, #1A2332); font-weight: 700; text-decoration: none; pointer-events: none; cursor: default; } .tr-pb-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.25rem 0 0.75rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.8rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-pb-stats strong { color: var(--wp--preset--color--tr-ink, #1A2332); font-weight: 700; } @media (max-width: 781px) { .tr-learning-head { padding-top: var(--wp--preset--spacing--lg) !important; padding-bottom: var(--wp--preset--spacing--sm) !important; } .tr-learning-head .wp-block-post-excerpt__excerpt { font-size: 0.9rem; line-height: 1.65; } } /* ── 語学学習サブサイトのカラーパレット（body.tr-learning スコープ・2026-07-28）── * 「楽しく学べる」ための色分け。飾りではなく意味を持たせる: * レベル3色（初級=緑/中級=琥珀/上級=紫）・場面8色（チップ・カード・早見表で一貫）。 * 選択状態は「淡い地＋濃い色文字＋色枠」方式（白文字塗り潰しよりコントラスト事故が起きない）。 * dot/border は中間色（--lp-*）、文字は濃色（--lp-*-deep）、地は color-mix の淡色 * （非対応ブラウザは直前に宣言したグレーへフォールバック）。 */ body.tr-learning { --lp-beginner: #3F9E63; --lp-beginner-deep: #2C7A49; --lp-inter: #E8A33A; --lp-inter-deep: #A96F0E; --lp-adv: #8E5AC8; --lp-adv-deep: #6E41A3; --lp-basics: #2A8E89; --lp-basics-deep: #1D6E6A; --lp-airport: #3B82C4; --lp-airport-deep: #2A6398; --lp-transport: #5B6BD6; --lp-transport-deep: #4550B8; --lp-hotel: #8E5AC8; --lp-hotel-deep: #6E41A3; --lp-restaurant: #E8833A;--lp-restaurant-deep: #B55A14; --lp-shopping: #D6558E; --lp-shopping-deep: #AD3268; --lp-trouble: #D64545; --lp-trouble-deep: #AD2F2F; --lp-smalltalk: #4CAF6E; --lp-smalltalk-deep: #337E4D; } /* タイトル帯: やわらかな3色グラデーション（テキストは既存のまま） */ body.tr-learning .tr-learning-head { background-image: linear-gradient(120deg, #EDf8F6 0%, #FDF6EA 48%, #F3EEFB 100%); } /* ── レベルチップ: 常時カラードット＋選択で色付け ── */ body.tr-learning .tr-pb-levels .tr-pb-chipbtn::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.4em; border-radius: 50%; background: var(--lp-dot, #9aa3ad); vertical-align: 0.02em; } body.tr-learning .tr-pb-chipbtn[data-pb-level="travel"] { --lp-dot: var(--lp-beginner); --lp-c: var(--lp-beginner); --lp-deep: var(--lp-beginner-deep); } body.tr-learning .tr-pb-chipbtn[data-pb-level="daily"] { --lp-dot: var(--lp-inter); --lp-c: var(--lp-inter); --lp-deep: var(--lp-inter-deep); } body.tr-learning .tr-pb-chipbtn[data-pb-level="advanced"] { --lp-dot: var(--lp-adv); --lp-c: var(--lp-adv); --lp-deep: var(--lp-adv-deep); } /* ── 場面チップ: 場面色のドット ── */ body.tr-learning .tr-pb-scenes .tr-pb-chipbtn:not([data-pb-scene=""])::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.4em; border-radius: 50%; background: var(--lp-dot, #9aa3ad); vertical-align: 0.02em; } body.tr-learning [data-pb-scene="basics"] { --lp-dot: var(--lp-basics); --lp-c: var(--lp-basics); --lp-deep: var(--lp-basics-deep); } body.tr-learning [data-pb-scene="airport"] { --lp-dot: var(--lp-airport); --lp-c: var(--lp-airport); --lp-deep: var(--lp-airport-deep); } body.tr-learning [data-pb-scene="transport"] { --lp-dot: var(--lp-transport); --lp-c: var(--lp-transport); --lp-deep: var(--lp-transport-deep); } body.tr-learning [data-pb-scene="hotel"] { --lp-dot: var(--lp-hotel); --lp-c: var(--lp-hotel); --lp-deep: var(--lp-hotel-deep); } body.tr-learning [data-pb-scene="restaurant"] { --lp-dot: var(--lp-restaurant); --lp-c: var(--lp-restaurant); --lp-deep: var(--lp-restaurant-deep); } body.tr-learning [data-pb-scene="shopping"] { --lp-dot: var(--lp-shopping); --lp-c: var(--lp-shopping); --lp-deep: var(--lp-shopping-deep); } body.tr-learning [data-pb-scene="trouble"] { --lp-dot: var(--lp-trouble); --lp-c: var(--lp-trouble); --lp-deep: var(--lp-trouble-deep); } body.tr-learning [data-pb-scene="smalltalk"] { --lp-dot: var(--lp-smalltalk); --lp-c: var(--lp-smalltalk); --lp-deep: var(--lp-smalltalk-deep); } /* 選択状態: 淡い地＋色枠＋濃色文字（レベル・場面チップ共通。--lp-c を持つものだけ） */ body.tr-learning .tr-pb-chipbtn.is-active[data-pb-level], body.tr-learning .tr-pb-chipbtn.is-active[data-pb-scene]:not([data-pb-scene=""]) { background: #f1f3f5; background: color-mix(in srgb, var(--lp-c) 14%, white); border-color: var(--lp-c); color: var(--lp-deep); } /* ── エントリカード: 場面色の左ボーダー＋場面タグの色付け ── */ body.tr-learning .tr-pb-entry { border-left: 3px solid var(--lp-c, var(--wp--preset--color--tr-rule, #d9dee5)); } body.tr-learning .tr-pb-entry .tr-pb-tag { background: #f1f3f5; background: color-mix(in srgb, var(--lp-c, #9aa3ad) 14%, white); color: var(--lp-deep, #6b7280); } /* 「覚えた」は成功の緑（達成感の色） */ body.tr-learning .tr-pb-entry.is-learned { background: #f3faf5; background: color-mix(in srgb, var(--lp-beginner) 7%, white); } body.tr-learning .tr-pb-entry.is-learned .tr-pb-learn { background: var(--lp-beginner); border-color: var(--lp-beginner); color: #ffffff; } /* ── フラッシュカードモード: 場面色の淡い地＋浮き上がり ── */ body.tr-learning .tr-phrasebook.is-mode-cards .tr-pb-entry { background: #f7f8f9; background: color-mix(in srgb, var(--lp-c, #9aa3ad) 7%, white); border-color: transparent; border-left: 3px solid var(--lp-c, #9aa3ad); box-shadow: 0 1px 3px rgba(26, 35, 50, 0.08); transition: transform 0.12s, box-shadow 0.12s; } body.tr-learning .tr-phrasebook.is-mode-cards .tr-pb-entry:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(26, 35, 50, 0.12); } body.tr-learning .tr-phrasebook.is-mode-cards .tr-pb-entry.is-flipped { background: #ffffff; border-color: var(--lp-c, #9aa3ad); } /* ── 早見表: 場面見出しに色ドット＋色下線 ── */ body.tr-learning h3.tr-pb-sheet-scene { padding-bottom: 0.25rem; border-bottom: 2px solid var(--lp-c, var(--wp--preset--color--tr-rule, #d9dee5)); } body.tr-learning h3.tr-pb-sheet-scene::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.45em; border-radius: 50%; background: var(--lp-c, #9aa3ad); vertical-align: 0.08em; } body.tr-learning .tr-pb-sheet-scene--basics { --lp-c: var(--lp-basics); } body.tr-learning .tr-pb-sheet-scene--airport { --lp-c: var(--lp-airport); } body.tr-learning .tr-pb-sheet-scene--transport { --lp-c: var(--lp-transport); } body.tr-learning .tr-pb-sheet-scene--hotel { --lp-c: var(--lp-hotel); } body.tr-learning .tr-pb-sheet-scene--restaurant { --lp-c: var(--lp-restaurant); } body.tr-learning .tr-pb-sheet-scene--shopping { --lp-c: var(--lp-shopping); } body.tr-learning .tr-pb-sheet-scene--trouble { --lp-c: var(--lp-trouble); } body.tr-learning .tr-pb-sheet-scene--smalltalk { --lp-c: var(--lp-smalltalk); } /* ── ツール/言語カード: 上辺のカラーバー＋ホバーで持ち上げ ── */ body.tr-learning a.tr-funnel-card { border-top: 4px solid var(--lp-basics); transition: transform 0.12s, box-shadow 0.12s; } body.tr-learning .tr-funnel-router-grid a.tr-funnel-card:nth-child(1) { border-top-color: var(--lp-inter); } body.tr-learning .tr-funnel-router-grid a.tr-funnel-card:nth-child(2) { border-top-color: var(--lp-airport); } body.tr-learning .tr-funnel-router-grid a.tr-funnel-card:nth-child(3) { border-top-color: var(--lp-adv); } body.tr-learning .tr-funnel-router-grid a.tr-funnel-card:nth-child(4) { border-top-color: var(--lp-smalltalk); } body.tr-learning a.tr-funnel-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26, 35, 50, 0.12); } /* ── スタッツ帯: 数字に色を散らす ── */ body.tr-learning .tr-pb-stats span:nth-child(1) strong { color: var(--lp-basics-deep); } body.tr-learning .tr-pb-stats span:nth-child(2) strong { color: var(--lp-restaurant-deep); } body.tr-learning .tr-pb-stats span:nth-child(3) strong { color: var(--lp-adv-deep); } body.tr-learning .tr-pb-stats span:nth-child(4) { color: var(--lp-beginner-deep); font-weight: 600; } /* ── デッキ（1枚ずつ）モード: スマホアプリ風のカードめくり ── * スマホでは mode="cards" ページが自動でこの表示になる（JS の matchMedia 判定）。 * 全カードは DOM にあり、.is-deck-current の1枚だけを表示する。 */ .tr-pb-deckbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--wp--preset--spacing--sm, 16px); font-family: var(--wp--preset--font-family--inter); } .tr-pb-deckbar button { font-family: var(--wp--preset--font-family--inter); font-size: 0.82rem; font-weight: 600; line-height: 1; padding: 0.55rem 0.85rem; border-radius: 999px; cursor: pointer; background: var(--wp--preset--color--tr-surface, #ffffff); color: var(--wp--preset--color--tr-ink-soft, #4a5568); border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); } .tr-pb-deckbar button:hover { border-color: var(--wp--preset--color--tr-accent, #247A76); color: var(--wp--preset--color--tr-accent, #247A76); } .tr-pb-deck-count { font-size: 0.85rem; color: var(--wp--preset--color--tr-muted, #6b7280); min-width: 4.2em; text-align: center; font-variant-numeric: tabular-nums; } .tr-pb-deck-hint { font-size: 0.72rem; color: var(--wp--preset--color--tr-muted, #6b7280); } @media (min-width: 782px) { .tr-pb-deck-hint { display: none; /* スワイプの案内はタッチ端末向け */ } } .tr-phrasebook.is-mode-deck .tr-pb-list { grid-template-columns: 1fr; } .tr-phrasebook.is-mode-deck .tr-pb-entry { display: none; } .tr-phrasebook.is-mode-deck .tr-pb-entry.is-deck-current { display: flex; min-height: 320px; justify-content: center; touch-action: pan-y; max-width: 560px; margin: 0 auto; width: 100%; } .tr-phrasebook.is-mode-deck .tr-pb-entry.is-deck-current .tr-pb-text { font-size: 1.4rem; line-height: 1.5; } .tr-phrasebook.is-mode-deck .tr-pb-entry.is-deck-current .tr-pb-gloss { font-size: 1.05rem; } /* ── 全画面学習モード（.tr-phrasebook.is-fullscreen）── * オーバーレイ方式が本体（iOS Safari は要素 fullscreen 非対応）。対応環境では * Fullscreen API を併用してブラウザ UI ごと消す。ヘッダー・チャットボット等より前面。 */ body.tr-pb-fs-lock { overflow: hidden; } .tr-phrasebook.is-fullscreen { position: fixed; inset: 0; z-index: 99990; margin: 0; padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2rem) max(1.5rem, env(safe-area-inset-bottom)); overflow-y: auto; background: #FDFDFC; background-image: linear-gradient(120deg, #EDF8F6 0%, #FDF6EA 48%, #F3EEFB 100%); } .tr-pb-fs-close { display: none; } .tr-phrasebook.is-fullscreen .tr-pb-fs-close { display: flex; align-items: center; justify-content: center; position: fixed; top: max(0.75rem, env(safe-area-inset-top)); right: 0.9rem; z-index: 99991; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); background: #ffffff; color: var(--wp--preset--color--tr-ink, #1A2332); font-size: 1rem; cursor: pointer; box-shadow: 0 2px 6px rgba(26, 35, 50, 0.12); } .tr-phrasebook.is-fullscreen .tr-pb-filters { padding-right: 3rem; /* ✕ボタンと重ならないように */ } .tr-phrasebook.is-fullscreen .tr-pb-list { max-width: 640px; margin: 0 auto; } .tr-phrasebook.is-fullscreen.is-mode-deck .tr-pb-entry.is-deck-current { min-height: min(62vh, 560px); } .tr-phrasebook.is-fullscreen.is-mode-deck .tr-pb-entry.is-deck-current .tr-pb-text { font-size: clamp(1.4rem, 4.5vw, 1.8rem); } .tr-phrasebook.is-fullscreen .tr-pb-deckbar { justify-content: center; } /* ── 操作の手がかり（アフォーダンス）強化（2026-07-28）── * 「タップでめくれる」「スワイプで次へ」を注釈文でなくカード自身に語らせる。 */ .tr-pb-tap-hint, .tr-pb-tap-hint-back { display: none; } /* 伏せているカード: 「👆 タップで答えを見る」ピルを常時表示 */ .tr-phrasebook.is-mode-cards .tr-pb-entry:not(.is-flipped) .tr-pb-tap-hint { display: inline-flex; align-self: center; margin-top: 0.6rem; padding: 0.42rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px dashed var(--lp-c, #9aa3ad); color: var(--lp-deep, #4a5568); font-family: var(--wp--preset--font-family--inter); font-size: 0.78rem; font-weight: 600; line-height: 1; } /* めくったカード: 小さく「もう一度タップで戻る」 */ .tr-phrasebook.is-mode-cards .tr-pb-entry.is-flipped .tr-pb-tap-hint-back { display: block; text-align: center; margin-top: 0.5rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.7rem; color: var(--wp--preset--color--tr-muted, #6b7280); } /* デッキモード: カード左右に ‹ › のスワイプ手がかり */ .tr-phrasebook.is-mode-deck .tr-pb-entry.is-deck-current::before, .tr-phrasebook.is-mode-deck .tr-pb-entry.is-deck-current::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.7rem; line-height: 1; color: rgba(26, 35, 50, 0.22); pointer-events: none; } .tr-phrasebook.is-mode-deck .tr-pb-entry.is-deck-current::before { content: "‹"; left: 0.4rem; } .tr-phrasebook.is-mode-deck .tr-pb-entry.is-deck-current::after { content: "›"; right: 0.4rem; } /* めくり: 答えがふわっと現れる（状態変化を目で伝える） */ @media (prefers-reduced-motion: no-preference) { .tr-phrasebook.is-mode-cards .tr-pb-entry.is-flipped .tr-pb-back { animation: tr-pb-reveal 0.18s ease-out; } .tr-phrasebook.is-mode-cards .tr-pb-entry:not(.is-flipped) .tr-pb-tap-hint { animation: tr-pb-pulse 2.4s ease-in-out infinite; } /* 初回のみ: カードが横に揺れて「スワイプできる」を身振りで伝える（JS が is-deck-intro を付与） */ .tr-phrasebook.is-deck-intro .tr-pb-entry.is-deck-current { animation: tr-pb-nudge 1.5s ease-in-out 0.6s 2; } } @keyframes tr-pb-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes tr-pb-pulse { 0%, 100% { opacity: 0.82; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } } @keyframes tr-pb-nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-14px); } 55% { transform: translateX(7px); } } /* ── 例文（回答面の「例」）とデッキの大ボタン（2026-07-29）── */ .tr-pb-ex { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.45rem; margin: 0.35rem 0 0; padding: 0.5rem 0.65rem; border-radius: 6px; background: var(--wp--preset--color--tr-surface-soft, #f6f8fa); background: color-mix(in srgb, var(--lp-c, #9aa3ad) 7%, white); font-size: 0.85rem; line-height: 1.55; } .tr-pb-ex-label { flex: 0 0 auto; font-family: var(--wp--preset--font-family--inter); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.16rem 0.4rem; border-radius: 4px; background: var(--lp-c, #6b7280); color: #ffffff; } .tr-pb-ex-en { font-weight: 600; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-pb-ex-gloss { flex-basis: 100%; font-size: 0.78rem; color: var(--wp--preset--color--tr-muted, #6b7280); } /* デッキ用の大きな前後ボタン（カード直下・親指ゾーン） */ .tr-pb-deck-actions { display: flex; gap: 0.6rem; max-width: 640px; margin: 0.9rem auto 0; } .tr-pb-deck-actions button { font-family: var(--wp--preset--font-family--inter); font-weight: 700; cursor: pointer; border-radius: 10px; padding: 0.95rem 1rem; font-size: 0.95rem; line-height: 1; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); background: var(--wp--preset--color--tr-surface, #ffffff); color: var(--wp--preset--color--tr-ink-soft, #4a5568); } .tr-pb-deck-actions .tr-pb-deck-next--primary { flex: 1; background: var(--wp--preset--color--tr-accent, #247A76); border-color: var(--wp--preset--color--tr-accent, #247A76); color: #ffffff; } .tr-pb-deck-actions .tr-pb-deck-next--primary:hover { filter: brightness(1.08); } /* ── 語学学習サブサイトの専用ヘッダー（single-learning.html・2026-07-29）── * 旅行サイトの大ナビの代わりに、ワードマーク＋学習ナビ＋戻りリンクだけの軽い chrome。 * sticky でツール操作中もナビに手が届く。 */ .tr-learning-header { position: sticky; top: 0; z-index: 9000; background: var(--wp--preset--color--tr-surface, #ffffff); border-bottom: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); padding: 0 var(--wp--preset--spacing--md, 24px); } .tr-lh-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 0.85rem; } .tr-lh-brand { font-family: var(--wp--preset--font-family--playfair); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--wp--preset--color--tr-ink, #1A2332); text-decoration: none; white-space: nowrap; } .tr-lh-brand:hover { color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-lh-learning { margin-left: 0.5rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--tr-accent, #247A76); } .tr-lh-back { font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; font-weight: 600; color: var(--wp--preset--color--tr-muted, #6b7280); text-decoration: none; white-space: nowrap; } .tr-lh-back:hover { color: var(--wp--preset--color--tr-accent, #247A76); text-decoration: underline; } @media (max-width: 781px) { .tr-lh-brand { font-size: 1.1rem; } } /* 例文の再生ボタン（アイコンのみのコンパクト版・2026-07-29） */ .tr-pb-ex-tools { display: inline-flex; gap: 0.3rem; margin-left: 0.45rem; vertical-align: middle; } .tr-pb-speak--ex { padding: 0.22rem 0.45rem; font-size: 0.78rem; line-height: 1; border-radius: 999px; cursor: pointer; background: var(--wp--preset--color--tr-surface, #ffffff); border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); } .tr-pb-speak--ex:hover { border-color: var(--wp--preset--color--tr-accent, #247A76); } /* ── [tr_alphabet]: アルファベット読み方表（発音ガイド・2026-07-29）── セル全体が再生ボタン。JS 無効時は disabled のまま静的な表として読める。 母音セル（--vowel）は暖色で強調（母音が5つだけという構造を目でも掴ませる）。 */ .tr-pb-alpha { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.8em, 1fr)); gap: 0.5rem; } .tr-pb-alpha li { margin: 0; } .tr-pb-alpha-btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.12rem; width: 100%; height: 100%; padding: 0.55rem 0.25rem 0.5rem; border-radius: 12px; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); background: var(--wp--preset--color--tr-surface, #ffffff); font-family: var(--wp--preset--font-family--inter); line-height: 1.25; cursor: pointer; } .tr-pb-alpha-btn[disabled] { cursor: default; } .tr-pb-alpha-btn:not([disabled]):hover { border-color: var(--wp--preset--color--tr-accent, #247A76); box-shadow: 0 2px 10px rgba(31, 58, 95, 0.14); } .tr-pb-alpha-btn--vowel { background: color-mix(in srgb, var(--lp-inter, #E8A33A) 13%, white); border-color: color-mix(in srgb, var(--lp-inter, #E8A33A) 45%, white); } .tr-pb-alpha-letter { font-size: 1.35rem; font-weight: 800; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-pb-alpha-kana { font-size: 0.72rem; font-weight: 600; color: var(--wp--preset--color--tr-ink-soft, #4a5568); } .tr-pb-alpha-note { font-size: 0.6rem; color: var(--wp--preset--color--tr-muted, #6b7280); text-align: center; } /* 🔊 の目印は音声が使える（＝disabled が外れた）ときだけ出す */ .tr-pb-alpha-btn::after { content: "🔊"; font-size: 0.6rem; opacity: 0.5; margin-top: 0.1rem; } .tr-pb-alpha-btn[disabled]::after { content: none; } @media (max-width: 480px) { .tr-pb-alpha { grid-template-columns: repeat(auto-fill, minmax(4em, 1fr)); gap: 0.4rem; } .tr-pb-alpha-letter { font-size: 1.15rem; } } /* ── [tr_phonics]: つづり→音 対応表（発音ガイド・2026-07-31）── 行＝パターン｜音の読み｜例語チップ（押すと再生）｜注記。ゼブラで行を追いやすく。 例語チップは [tr_alphabet] と同じ disabled 契約（JS 無効でも語とカナは読める）。 */ .tr-pb-phonics { margin: 1.2rem 0; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); border-radius: 12px; overflow: hidden; } .tr-pb-ph-row { display: grid; grid-template-columns: 9.5em 1fr; gap: 0.25rem 0.9rem; align-items: start; padding: 0.65rem 0.9rem; border-top: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); } .tr-pb-ph-row:first-child { border-top: none; } .tr-pb-ph-row:nth-child(even) { background: var(--wp--preset--color--tr-surface-soft, #f6f8fa); } .tr-pb-ph-pattern { display: block; font-family: var(--wp--preset--font-family--inter); font-size: 1.02rem; font-weight: 800; line-height: 1.3; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-pb-ph-kana { display: block; font-size: 0.72rem; font-weight: 700; line-height: 1.35; color: var(--wp--preset--color--tr-accent, #247A76); } .tr-pb-ph-body { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .tr-pb-ph-chip { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.32rem 0.6rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); background: var(--wp--preset--color--tr-surface, #ffffff); font-family: var(--wp--preset--font-family--inter); font-size: 0.85rem; font-weight: 600; line-height: 1.2; color: var(--wp--preset--color--tr-ink, #1A2332); cursor: pointer; } .tr-pb-ph-chip small { font-size: 0.68rem; font-weight: 500; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-pb-ph-chip[disabled] { cursor: default; } /* 🔊 の目印は音声が使える（＝disabled が外れた）ときだけ */ .tr-pb-ph-chip::before { content: "🔊"; font-size: 0.68rem; opacity: 0.55; align-self: center; } .tr-pb-ph-chip[disabled]::before { content: none; } .tr-pb-ph-chip:not([disabled]):hover { border-color: var(--wp--preset--color--tr-accent, #247A76); } .tr-pb-ph-note { flex-basis: 100%; margin: 0.1rem 0 0; font-size: 0.74rem; line-height: 1.55; color: var(--wp--preset--color--tr-muted, #6b7280); } @media (max-width: 600px) { .tr-pb-ph-row { grid-template-columns: 1fr; gap: 0.35rem; } .tr-pb-ph-head { display: flex; align-items: baseline; gap: 0.55rem; } } /* ── [tr_mouth]: 口の図（唇・歯・舌の使い方）── ★図は assets/mouth/{id}.svg（Wikimedia Commons の CC0 発音断面図を着色・切り取り・ 目印焼き込み。生成は travelers-route/scripts/build-mouth-svg.py）。 目印の意味は全図共通: 触れる＝ターコイズの輪／触れない＝オレンジの破線／ 息＝青の矢印／震え＝赤の波線。 */ .tr-pb-mouths { display: grid; gap: 0.9rem; margin: 1.2rem 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .tr-pb-mouth { margin: 0; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); border-radius: 14px; overflow: hidden; background: var(--wp--preset--color--tr-surface, #ffffff); } .tr-m-stage { position: relative; } /* 前＋横の二枚組。横は舌が主役の音だけ付くので、1枚のときは自然に横幅いっぱいになる */ .tr-m-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.5rem; padding: 0.4rem 0.4rem 0; } .tr-m-view { text-align: center; } .tr-pb-mouth .tr-m { display: block; width: 100%; height: auto; background: #ffffff; } .tr-m-viewlabel { display: block; font-family: var(--wp--preset--font-family--inter); font-size: 0.68rem; font-weight: 700; color: var(--wp--preset--color--tr-muted, #6b7280); padding-top: 0.15rem; } /* 図の上に重ねる一言。ほおの空白（左上）に置き、引き出し線が要点を指す */ .tr-m-call { position: absolute; left: 4.5%; top: 8%; max-width: 46%; box-sizing: border-box; padding: 0.26rem 0.5rem; border: 1.5px solid #1f3a5f; border-radius: 999px; background: #ffffff; font-family: var(--wp--preset--font-family--inter); font-size: 0.72rem; font-weight: 700; line-height: 1.4; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-pb-mouth figcaption { padding: 0.7rem 0.85rem 0.85rem; font-family: var(--wp--preset--font-family--inter); } .tr-m-label { margin: 0 0 0.5rem; font-size: 0.92rem; font-weight: 800; line-height: 1.35; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-m-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; } .tr-m-parts li { display: grid; grid-template-columns: 1.4em 2.4em 1fr; align-items: baseline; gap: 0.3rem; margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--wp--preset--color--tr-ink-soft, #4a5568); } .tr-m-part { font-size: 0.9rem; } .tr-m-partname { font-weight: 700; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-m-tip { margin: 0.55rem 0 0; padding-top: 0.5rem; border-top: 1px dashed var(--wp--preset--color--tr-rule, #d9dee5); font-size: 0.75rem; line-height: 1.6; color: var(--wp--preset--color--tr-muted, #6b7280); } /* ── 語学カテゴリ着地の意思決定モジュール [tr_learning_index] ── 地理カテゴリの国チョーザー・体験カテゴリのテーマ列と同じ役割。 ⚠ カード全体をリンクにせず、見出しとツールを別々のリンクにしている。 「コースの入口へ行きたい」と「早見表を今すぐ開きたい」は別の意図で、 カード全体を1リンクにすると後者が1タップ余計になるため。 */ .tr-li-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; } .tr-li-card { padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-top: 3px solid var(--wp--preset--color--tr-accent, #2A8E89); border-radius: 2px; background: var(--wp--preset--color--tr-white, #fff); } a.tr-li-title { display: block; font-family: var(--wp--preset--font-family--playfair); font-size: 1.3rem; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--tr-ink, #1A2332); text-decoration: none; background-image: none; /* 本文の下線エフェクトを打ち消す（style.css の :not() チェーン参照） */ } a.tr-li-title:hover { color: var(--wp--preset--color--tr-accent, #2A8E89); } .tr-li-meta { margin: 0.3rem 0 0.8rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.78rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-li-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; } a.tr-li-tool { padding: 0.32rem 0.7rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 999px; font-family: var(--wp--preset--font-family--inter); font-size: 0.78rem; line-height: 1.5; color: var(--wp--preset--color--tr-ink-soft, #4b5563); text-decoration: none; background-image: none; } a.tr-li-tool:hover { border-color: var(--wp--preset--color--tr-accent, #2A8E89); color: var(--wp--preset--color--tr-accent, #2A8E89); } /* ── 4択クイズ [tr_phrasebook mode="quiz"] ── ★クイズ中は一覧を隠す。同じ画面に答えが並んでいたらクイズにならない。 ただし DOM からは消さない（SSR 原則。JS 無効なら一覧が全部読める）。 */ .tr-phrasebook.is-mode-quiz .tr-pb-list { display: none; } .tr-phrasebook.is-mode-quiz .tr-pb-count, .tr-phrasebook.is-mode-quiz .tr-pb-deckbar, .tr-phrasebook.is-mode-quiz .tr-pb-hint { display: none; } .tr-pb-quiz { margin: 1rem 0 0; padding: 1.2rem 1.2rem 1rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 4px; background: var(--wp--preset--color--tr-white, #fff); } .tr-pb-quiz-progress { margin: 0 0 0.8rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.8rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-pb-quiz-progress strong { color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-pb-quiz-few { margin: 0.5rem 0; font-size: 0.9rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-pb-quiz-q { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 700; line-height: 1.5; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-pb-quiz-choices { display: grid; gap: 0.5rem; } .tr-pb-quiz-choice { padding: 0.7rem 0.9rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 3px; background: var(--wp--preset--color--tr-white, #fff); font-family: var(--wp--preset--font-family--inter); font-size: 0.98rem; line-height: 1.5; text-align: left; color: var(--wp--preset--color--tr-ink, #1A2332); cursor: pointer; } .tr-pb-quiz-choice:hover:not(:disabled) { border-color: var(--wp--preset--color--tr-accent, #2A8E89); background: var(--wp--preset--color--tr-surface, #f7f7f5); } .tr-pb-quiz-choice:disabled { cursor: default; } /* ★正解は必ず色で示す（誤答したときも「どれが正解か」が同じ画面で分かる） */ .tr-pb-quiz-choice.is-correct { border-color: #2A8E89; background: rgba(42, 142, 137, 0.1); font-weight: 700; } .tr-pb-quiz-choice.is-wrong { border-color: #d64545; background: rgba(214, 69, 69, 0.08); text-decoration: line-through; } .tr-pb-quiz-feedback { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-pb-quiz-ok { color: #2A8E89; font-weight: 700; } .tr-pb-quiz-ng { color: #d64545; font-weight: 700; } .tr-pb-quiz-answer { font-weight: 700; } .tr-pb-quiz-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .tr-pb-quiz-next, .tr-pb-quiz-reset { padding: 0.5rem 1rem; border-radius: 999px; font-family: var(--wp--preset--font-family--inter); font-size: 0.85rem; cursor: pointer; } .tr-pb-quiz-next { border: 1px solid var(--wp--preset--color--tr-accent, #2A8E89); background: var(--wp--preset--color--tr-accent, #2A8E89); color: #fff; } .tr-pb-quiz-reset { border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); background: transparent; color: var(--wp--preset--color--tr-muted, #6b7280); } /* ── 1件目フィーチャーカードを使わないグリッド（--flat） ── ★語学記事はアイキャッチを持たない。写真前提の扱い（2×2に拡大・白文字を写真に重ねる）を 写真なしで当てると、**白地に白文字**になってタイトルが消える（本番で実測）。 写真の有無で見た目が壊れる装飾は、写真を持つ面にだけ効かせる。 */ .tr-article-grid--flat .wp-block-post-template > li:first-child { grid-column: auto; grid-row: auto; } .tr-article-grid--flat .wp-block-post-template > li:first-child .tr-article-card { position: static; justify-content: flex-start; min-height: 0; height: auto; padding: 0; } .tr-article-grid--flat .wp-block-post-template > li:first-child .tr-card-eyebrow { width: auto; padding: 0; background: none; } .tr-article-grid--flat .wp-block-post-template > li:first-child .tr-card-eyebrow a { color: var(--wp--preset--color--tr-accent, #247A76) !important; } .tr-article-grid--flat .wp-block-post-template > li:first-child .tr-card-title { font-size: var(--wp--preset--font-size--md) !important; line-height: 1.4 !important; } .tr-article-grid--flat .wp-block-post-template > li:first-child .tr-card-title a { color: var(--wp--preset--color--tr-ink, #1A2332) !important; text-shadow: none; } .tr-article-grid--flat .wp-block-post-template > li:first-child .tr-card-excerpt p { color: var(--wp--preset--color--tr-ink-soft, #4b5563) !important; } .tr-article-grid--flat .wp-block-post-template > li:first-child .tr-card-date { color: var(--wp--preset--color--tr-muted, #6b7280) !important; } @media (max-width: 781px) { .tr-article-grid--flat .wp-block-post-template > li:first-child { grid-column: auto; } .tr-article-grid--flat .wp-block-post-template > li:first-child .tr-article-card { min-height: 0; } } /* ★ファネルカードが4枚のとき（＝学習コーナーのあるロケール）は 2×2 にする。 auto-fit の minmax(220px) だと本文幅 720px に3列しか入らず、4枚目だけが 次の行に取り残されて崩れて見えた（本番で実測）。4列に詰めると1枚165pxで 日本語が窮屈になるので、詰めるのではなく段を揃える。 */ @media (min-width: 560px) { .tr-funnel-router-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* ⚠ 画面幅を広げても4列にはしない。この面は constrained レイアウトで **本文幅が約 720px に固定**されているため、ビューポートが 1280px でも 4列だと1枚165pxのままで日本語が窮屈になる（実測）。 広げるべきはカードの幅であって列数ではない。 */ /* ── 聞き取り（type="heard" ／ 音声で出題）── */ /* ★一覧に混ざったとき「自分が言う文」と読み違えないようにする印。 type チップで絞れるだけでは、すべて表示のときに区別がつかない。 */ .tr-pb-heardtag { display: inline-block; margin: 0 0 0.35rem; padding: 0.15em 0.6em; border-radius: 999px; background: var(--wp--preset--color--tr-surface-deep, #eef1f4); font-family: var(--wp--preset--font-family--inter); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-pb-quiz-modes { margin: 0 0 0.9rem; } .tr-pb-quiz-listen { padding: 0.4rem 0.9rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 999px; background: transparent; font-family: var(--wp--preset--font-family--inter); font-size: 0.82rem; color: var(--wp--preset--color--tr-ink-soft, #4b5563); cursor: pointer; } .tr-pb-quiz-listen.is-active { border-color: var(--wp--preset--color--tr-accent, #2A8E89); background: rgba(42, 142, 137, 0.1); color: var(--wp--preset--color--tr-accent, #2A8E89); font-weight: 700; } /* 音声出題の設問エリア。★大きめにする——ここが「問題文」なので、 小さな再生アイコンだと何を押せばいいのか分からない。 */ .tr-pb-quiz-audio { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; } .tr-pb-quiz-replay { padding: 0.7rem 1.2rem; border: 1px solid var(--wp--preset--color--tr-accent, #2A8E89); border-radius: 3px; background: var(--wp--preset--color--tr-accent, #2A8E89); font-family: var(--wp--preset--font-family--inter); font-size: 0.95rem; color: #fff; cursor: pointer; } .tr-pb-quiz-replay[data-pb-slow] { background: transparent; color: var(--wp--preset--color--tr-accent, #2A8E89); } /* ── 出発日から逆算する学習プラン ── ⚠ 名前は tr-plan。トップの [tr_trip_chips]（.tr-trip-chips）とは別物で、 「どっちの trip か」で迷わないように接頭辞を分けてある。 ★読み物ではなく操作卓なので本文より一段浮かせるが、派手にはしない—— ここが目立ちすぎると、道具を使いに来た人の視線が先に奪われる。 */ .tr-plan { margin: 0 0 1.6rem; padding: 0.9rem 1.1rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-left: 3px solid var(--wp--preset--color--tr-accent, #2A8E89); border-radius: 3px; background: var(--wp--preset--color--tr-surface, #f7f7f5); font-family: var(--wp--preset--font-family--inter); } .tr-plan-set { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; } .tr-plan-label { font-size: 0.85rem; color: var(--wp--preset--color--tr-ink-soft, #4b5563); } .tr-plan-date { padding: 0.35rem 0.6rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 3px; font-family: inherit; font-size: 0.9rem; background: #fff; } .tr-plan-body { margin-top: 0.7rem; } .tr-plan-count, .tr-plan-today { margin: 0 0 0.3rem; font-size: 0.95rem; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-plan-days { font-size: 1.3rem; color: var(--wp--preset--color--tr-accent, #2A8E89); } .tr-plan-step { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.7; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-plan-clear { padding: 0.2rem 0.6rem; border: none; background: none; font-family: inherit; font-size: 0.75rem; color: var(--wp--preset--color--tr-muted, #6b7280); text-decoration: underline; cursor: pointer; } /* ── オフライン保存 ── 学習プランの中に置く（出発が近い人の目に入る場所） */ .tr-off { margin: 0.8rem 0 0.6rem; padding-top: 0.7rem; border-top: 1px dashed var(--wp--preset--color--tr-rule, #e5e7eb); } .tr-off-save { padding: 0.45rem 0.9rem; border: 1px solid var(--wp--preset--color--tr-primary, #1F3A5F); border-radius: 999px; background: transparent; font-family: inherit; font-size: 0.85rem; color: var(--wp--preset--color--tr-primary, #1F3A5F); cursor: pointer; } .tr-off-save:hover { background: var(--wp--preset--color--tr-primary, #1F3A5F); color: #fff; } .tr-off-note, .tr-off-doing, .tr-off-done, .tr-off-fail { margin: 0.4rem 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-off-done { color: var(--wp--preset--color--tr-accent, #2A8E89); font-weight: 700; } .tr-off-fail { color: #d64545; } /* ── 現地語のひとこと [tr_greetings] ── ★4語しか無いのだから、表よりも「意味 → 現地語 → カナ」の縦の並びのほうが読みやすい。 国ハブでは本文の末尾に、by-country 記事では16か国が縦に続く。 */ .tr-gr-wrap { margin-top: 2.2rem; } .tr-gr-h { margin: 0 0 0.6rem; font-family: var(--wp--preset--font-family--playfair); font-size: var(--wp--preset--font-size--h3); } .tr-gr-lead, .tr-gr-note { margin: 0 0 0.8rem; font-size: 0.9rem; line-height: 1.7; color: var(--wp--preset--color--tr-ink-soft, #4b5563); } .tr-gr-country { margin: 1.8rem 0 0.5rem; font-family: var(--wp--preset--font-family--playfair); font-size: 1.2rem; } .tr-gr-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.7rem; } .tr-gr-item { padding: 0.7rem 0.9rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-left: 3px solid var(--wp--preset--color--tr-accent, #2A8E89); border-radius: 2px; background: var(--wp--preset--color--tr-white, #fff); } .tr-gr-mean { display: block; font-family: var(--wp--preset--font-family--inter); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-gr-word { display: block; margin: 0.15rem 0 0.1rem; font-size: 1.1rem; font-weight: 700; line-height: 1.4; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-gr-pron { display: block; font-family: var(--wp--preset--font-family--inter); font-size: 0.82rem; color: var(--wp--preset--color--tr-accent, #2A8E89); } .tr-gr-tip { display: block; margin-top: 0.35rem; font-size: 0.76rem; line-height: 1.6; color: var(--wp--preset--color--tr-ink-soft, #4b5563); } /* ── 検索・場面リンク・絞り込み印刷（提案E） ── */ .tr-pb-searchbox { margin: 0 0 0.7rem; } .tr-pb-search { width: 100%; max-width: 22rem; padding: 0.45rem 0.8rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 999px; font-family: var(--wp--preset--font-family--inter); font-size: 0.9rem; background: #fff; } .tr-pb-scenelink { margin: 0.5rem 0 0; font-size: 0.85rem; } /* ★印刷では操作 UI を落とし、隠れている行も出さない。 「いま画面に見えているものがそのまま紙になる」を守る。 */ @media print { .tr-pb-filters, .tr-pb-searchbox, .tr-pb-deckbar, .tr-pb-quiz, .tr-plan, .tr-off, .tr-pb-scenelinks, .tr-pb-hint, .tr-pb-learn, .tr-pb-speak { display: none !important; } .tr-pb-entry.is-hidden { display: none !important; } .tr-pb-entry { break-inside: avoid; } } /* ★早見表の「ここから下は相手が言うこと」。紙に印が残らない以上、節で分けるしかない。 */ .tr-pb-sheet-sub { margin: 0.6rem 0 0.2rem; padding: 0.15rem 0.5rem; display: inline-block; border-radius: 2px; background: var(--wp--preset--color--tr-surface-deep, #eef1f4); font-family: var(--wp--preset--font-family--inter); font-size: 0.72rem; font-weight: 700; color: var(--wp--preset--color--tr-primary, #1F3A5F); } @media print { .tr-pb-sheet-sub { background: none; border-bottom: 1px solid #000; padding: 0; } } /* ★カナで書き表せない区別がある言語の但し書き。ツールの限界を先に言うためのものなので、 注意書きらしく見せる（読み飛ばされると意味がない）。印刷にも残す。 */ .tr-pb-caveat { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border-left: 3px solid var(--wp--preset--color--tr-accent, #2A8E89); background: var(--wp--preset--color--tr-surface-deep, #eef1f4); border-radius: 0 3px 3px 0; font-size: 0.82rem; line-height: 1.7; color: var(--wp--preset--color--tr-ink, #1A2332); } @media print { .tr-pb-caveat { background: none; border-left: 2pt solid #000; font-size: 8.5pt; } } /* ★国ハブ「現地語のひとこと」からコースへの導線。挨拶4語の下に1行。 */ .tr-gr-course { margin: 0.8rem 0 0; } .tr-gr-course-link { display: inline-block; padding: 0.5rem 0.9rem; border: 1px solid var(--wp--preset--color--tr-accent, #2A8E89); border-radius: 4px; font-size: 0.85rem; font-weight: 700; color: var(--wp--preset--color--tr-accent, #2A8E89); text-decoration: none; } .tr-gr-course-link:hover { background: var(--wp--preset--color--tr-accent, #2A8E89); color: #fff; } /* ★自分の進み具合（stats 帯の中）。実績ゼロのときは JS が hidden のままにする。 */ .tr-pb-progress { color: var(--wp--preset--color--tr-accent, #2A8E89); font-weight: 700; } /* ★この言葉が使える国。登録簿の countries を逆向きに使った枠（国ハブ→コースの片道だった）。 */ .tr-pb-usedin { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--wp--preset--color--tr-ink-soft, #4A5160); } .tr-pb-usedin a { font-weight: 700; } .tr-pb-usedin-sep { opacity: 0.5; } /* ★音のポイント。caveat の直後に畳んで置く（ツールを使いに来た人の手前に表を広げない）。 */ .tr-pb-sp { margin: 0 0 1rem; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); border-radius: 4px; background: var(--wp--preset--color--tr-surface, #fff); } .tr-pb-sp-sum { padding: 0.6rem 0.9rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-pb-sp-lead, .tr-pb-sp-tip { margin: 0 0.9rem 0.7rem; font-size: 0.78rem; line-height: 1.8; color: var(--wp--preset--color--tr-ink-soft, #4A5160); } .tr-pb-sp-row { padding-top: 0.2rem; border-top: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); } h4.tr-pb-sp-h { margin: 0.7rem 0.9rem 0.4rem; font-size: 0.85rem; font-weight: 700; } ul.tr-pb-sp-items { margin: 0 0.9rem 0.5rem; padding: 0; list-style: none; } .tr-pb-sp-items li { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; padding: 0.25rem 0; } .tr-pb-sp-word { font-weight: 700; font-size: 1.05rem; } .tr-pb-sp-kana { font-family: var(--wp--preset--font-family--inter); font-size: 0.76rem; color: var(--wp--preset--color--tr-accent, #2A8E89); } .tr-pb-sp-gloss { font-size: 0.78rem; color: var(--wp--preset--color--tr-ink-soft, #4A5160); } /* 紙には出さない（🔊 が押せない場所で音の表は意味を持たない） */ @media print { .tr-pb-sp { display: none; } } /* ★会話で通す。ペアを Q→A の順に並べ、相手＝左／自分＝右のやりとりとして見せる。 並べ替えは JS が style.order を書く（DOM は動かさない＝絞り込み・検索・デッキを壊さない）。 */ /* ⚠ order（flex）で並べ替えてはいけない。見た目しか変わらず、読み上げと Tab 順は DOM のまま残る（実測で質問と答えが10項目離れて逆順になっていた）。 並べ替えは JS が DOM でやり、ここは左右の振り分けにだけ flex を使う。 */ .tr-phrasebook.is-mode-dialogue .tr-pb-list { display: flex; flex-direction: column; gap: 0.5rem; } .tr-phrasebook.is-mode-dialogue .tr-pb-entry { max-width: 82%; border-radius: 12px; } /* 相手が言うこと＝左寄せ。data 属性で当てるので、type が増えても CSS 側は追わなくていい。 */ .tr-phrasebook.is-mode-dialogue .tr-pb-entry[data-pb-type="heard"] { align-self: flex-start; border-bottom-left-radius: 3px; background: var(--wp--preset--color--tr-surface-deep, #eef1f4); } /* 自分が言うこと＝右寄せ */ .tr-phrasebook.is-mode-dialogue .tr-pb-entry:not([data-pb-type="heard"]) { align-self: flex-end; border-bottom-right-radius: 3px; border-color: var(--wp--preset--color--tr-accent, #2A8E89); } /* 会話中はペアのリンクを出さない（隣に並んでいるものへ飛ばせても意味がない） */ .tr-phrasebook.is-mode-dialogue .tr-pb-pair { display: none; } @media (max-width: 600px) { .tr-phrasebook.is-mode-dialogue .tr-pb-entry { max-width: 92%; } } /* ★今日の10枚。毎日戻ってくる理由を作る枠なので、絞り込み UI より前・一段強い見た目で置く。 */ .tr-pb-today { margin: 0 0 1rem; padding: 0.9rem 1rem; border: 1px solid var(--wp--preset--color--tr-rule, #d9dee5); border-left: 4px solid var(--wp--preset--color--tr-accent, #2A8E89); border-radius: 4px; background: var(--wp--preset--color--tr-surface, #fff); } .tr-pb-today-go { padding: 0.55rem 1.1rem; border: 0; border-radius: 4px; background: var(--wp--preset--color--tr-accent, #2A8E89); color: #fff; font-weight: 700; font-size: 0.95rem; cursor: pointer; } .tr-pb-today-go[aria-pressed="true"] { background: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-pb-today-lead { margin: 0.5rem 0 0; font-size: 0.8rem; line-height: 1.7; color: var(--wp--preset--color--tr-ink-soft, #4A5160); } .tr-pb-today-done { margin: 0.5rem 0 0; font-size: 0.85rem; font-weight: 700; color: var(--wp--preset--color--tr-accent, #2A8E89); } @media print { .tr-pb-today { display: none; } } /* ★会話ペア（⇄）。往復の相手の札へ飛ぶリンク。リンク先はハイライトして 「どこに飛んだのか」を見失わせない（ページ内ジャンプは着地が分かりにくい）。 */ .tr-pb-pair { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--wp--preset--color--tr-ink-soft, #4A5160); } .tr-pb-pair-label { font-weight: 700; font-size: 0.7rem; color: var(--wp--preset--color--tr-accent, #2A8E89); } .tr-pb-pair a { text-decoration: underline; text-underline-offset: 2px; } .tr-pb-pair.is-hidden { display: none; } /* デッキ（1枚ずつ）モードでは相手の札が常に display:none なので、ペアのリンクは丸ごと隠す。 JS の実在判定は「見えている札どうし」用で、デッキはモードとして跳び先が無い。 */ .tr-phrasebook.is-mode-deck .tr-pb-pair { display: none; } .tr-pb-entry:target { outline: 2px solid var(--wp--preset--color--tr-accent, #2A8E89); outline-offset: 2px; scroll-margin-top: 6rem; /* スティッキーヘッダーに隠れない着地位置 */ } /* 印刷では飛べないのでリンクの下線だけ落とす（本文は残す＝対の情報は紙でも役に立つ） */ @media print { .tr-pb-pair a { text-decoration: none; } } /* ★早見表に出す注意書き（★/⚠ の付いた note だけ）。行の直下にぶら下げて、 どのフレーズの話かを見失わせない。列を増やすと表が縦に潰れるので増やさない。 ⚠ 600px 以下では上の規則が .tr-pb-sheet-pron を display:none にするため、 データ行は 2 セル・この行は colspan=3 になる。表の列数は colspan を含む最大値で 決まり、セルの無い 3 列目は幅 0 に潰れるので、両者の右端は揃う。 ★colspan は CSS で変えられない以上、ここは「揃うことを当てにしている」箇所。 カナ列の隠し方を変えるときは一緒に見直す。 */ .tr-pb-sheet-noterow td { border-top: 0; padding-top: 0; padding-left: 1.2rem; font-size: 0.74rem; line-height: 1.6; color: var(--wp--preset--color--tr-ink-soft, #55617a); background: var(--wp--preset--color--tr-surface-deep, #eef1f4); } @media print { .tr-pb-sheet-noterow td { font-size: 8pt; background: none; padding-left: 8pt; } } /* ── 歴史軸 [tr_timeline]（出来事 ⇄ 現物）── ★年号を左の細い列に、右に見出し・本文・現物チップ。年表の「線」は左列の border で描く。 現物チップは a 要素なので、本文の下線エフェクト（.wp-block-post-content a:not(…)）から .tr-hx-tg を除外してある（上の :not() チェーン参照）。 */ .tr-hx-wrap { margin-top: 2.4rem; } .tr-hx-h { margin: 0 0 0.4rem; font-family: var(--wp--preset--font-family--playfair); font-size: var(--wp--preset--font-size--h3); } .tr-hx-lead { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.7; color: var(--wp--preset--color--tr-ink-soft, #4b5563); } .tr-hx-filters { margin: 0 0 1.2rem; padding: 0.9rem 1rem 0.6rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 8px; background: var(--wp--preset--color--tr-surface, #f7f8fa); } .tr-hx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; } .tr-hx-chips-legend { flex: 0 0 auto; min-width: 5.5em; font-family: var(--wp--preset--font-family--inter); font-size: 0.72rem; font-weight: 700; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-hx-chip { padding: 0.28rem 0.7rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--tr-ink, #1A2332) 20%, transparent); border-radius: 999px; background: #fff; color: var(--wp--preset--color--tr-ink, #1A2332); font-size: 0.78rem; line-height: 1.5; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .tr-hx-chip:hover { border-color: var(--wp--preset--color--tr-accent, #2A8E89); color: var(--wp--preset--color--tr-accent, #2A8E89); } .tr-hx-chip.is-on { background: var(--wp--preset--color--tr-accent, #2A8E89); border-color: var(--wp--preset--color--tr-accent, #2A8E89); color: #fff; font-weight: 700; } .tr-hx-chip:focus-visible { outline: 2px solid var(--wp--preset--color--tr-primary, #1F3A5F); outline-offset: 2px; } .tr-hx-home-toggle, .tr-hx-ms-only-toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0.4rem; font-size: 0.82rem; } .tr-hx-ms-only-toggle { margin-left: 1rem; } /* 「節目だけ」の間、現物系の絞り込みは効かない（JS が無視する）ので見た目でも無効化する */ .tr-hx--ms-only [data-hx-filter="kind"], .tr-hx--ms-only [data-hx-filter="thread"], .tr-hx--ms-only [data-hx-filter="country"], .tr-hx--ms-only .tr-hx-home-toggle { opacity: 0.45; pointer-events: none; } .tr-hx-count { margin: 0; font-family: var(--wp--preset--font-family--inter); font-size: 0.78rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-hx-count [data-hx-count] { font-weight: 700; color: var(--wp--preset--color--tr-ink, #1A2332); } /* ★.wp-block-post-content ol / h3 / li + li（詳細度 0,1,1）に負けないよう .tr-hx を前置して (0,2,x) にする。 素の .tr-hx-title だと h3 の margin-top 2.25rem が勝ち、見出しが年号列より下にずれる。 */ .tr-hx .tr-hx-list { margin: 0; padding: 0; list-style: none; line-height: inherit; } .tr-hx .tr-hx-ev { margin: 0; display: grid; grid-template-columns: minmax(5.2em, auto) 1fr; gap: 0 1rem; padding: 0.9rem 0; border-top: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); } .tr-hx .tr-hx-ev:first-child { border-top: 0; } .tr-hx .tr-hx-ev + .tr-hx-ev { margin-top: 0; } .tr-hx .tr-hx-ev[hidden] { display: none; } .tr-hx-year { padding-top: 0.15rem; /* ★Playfair は数字（.tr-hx-yn）だけに当てる。列ごと Playfair にすると、和文グリフの無い 「年・前・頃」がフォールバック書体に落ちてサイズと基線がちぐはぐになる（読みにくいと指摘あり）。 数字大・単位小の常套に分ける */ font-size: 0.78rem; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--tr-accent, #2A8E89); text-align: right; white-space: nowrap; } .tr-hx-yn { font-family: var(--wp--preset--font-family--playfair); font-size: 1.15rem; line-height: 1; } .tr-hx-body { min-width: 0; } .tr-hx h3.tr-hx-title { margin: 0 0 0.35rem; font-family: var(--wp--preset--font-family--playfair); font-size: 1.05rem; line-height: 1.45; } .tr-hx .tr-hx-ev--compact h3.tr-hx-title { font-size: 0.98rem; } .tr-hx p.tr-hx-desc { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.8; } .tr-hx p.tr-hx-home { margin: 0 0 0.5rem; padding: 0.45rem 0.7rem; border-left: 3px solid var(--wp--preset--color--tr-primary, #1F3A5F); background: var(--wp--preset--color--tr-surface-deep, #eef1f4); border-radius: 0 3px 3px 0; font-size: 0.84rem; line-height: 1.7; } .tr-hx-home-label { display: inline-block; margin-right: 0.3rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.7rem; font-weight: 700; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-hx .tr-hx-tangibles { margin: 0.2rem 0 0; padding: 0; list-style: none; line-height: inherit; display: flex; flex-wrap: wrap; gap: 0.4rem; } a.tr-hx-tg { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 6px; background: #fff; color: var(--wp--preset--color--tr-ink, #1A2332); font-size: 0.82rem; line-height: 1.4; text-decoration: none; transition: border-color .15s, background .15s; } a.tr-hx-tg:hover { border-color: var(--wp--preset--color--tr-accent, #2A8E89); background: color-mix(in srgb, var(--wp--preset--color--tr-accent) 6%, #fff); } .tr-hx .tr-hx-tangibles li { margin: 0; } .tr-hx .tr-hx-tangibles li + li { margin-top: 0; } .tr-hx-tg-name { font-weight: 600; } .tr-hx-tg-via { font-size: 0.72rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-hx-tg-flag { font-size: 0.85rem; } .tr-hx p.tr-hx-src { margin: 0.4rem 0 0; font-size: 0.72rem; } .tr-hx-src a { color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-hx-empty { margin: 1rem 0; font-size: 0.9rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-hx-more { margin: 0.8rem 0 0; font-size: 0.9rem; font-weight: 600; } @media (max-width: 600px) { .tr-hx .tr-hx-ev { grid-template-columns: 1fr; gap: 0.2rem; } .tr-hx-year { text-align: left; font-size: 0.72rem; } .tr-hx-yn { font-size: 1.05rem; } .tr-hx-chips-legend { min-width: 100%; } /* トグル2つは縦に積む（横並び用の margin-left が折り返し後の字下げになっていた。16周目） */ .tr-hx-home-toggle, .tr-hx-ms-only-toggle { display: flex; } .tr-hx-ms-only-toggle { margin-left: 0; } } @media print { .tr-hx-filters { display: none !important; } .tr-hx .tr-hx-ev[hidden] { display: none !important; } .tr-hx .tr-hx-ev { break-inside: avoid; } } /* ── 歴史軸・物語層（2026-08-24 改訂: 学び→行くの順）── 「物語で読む」が学びの主リンク、現物チップは「📍 行くなら」に退く。 .tr-hx--embed は物語ページの章下に [tr_event] で埋め込むカード（安定アンカー ev-{id} 付き）。 */ .tr-hx p.tr-hx-story { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; } .tr-hx-story-link { white-space: nowrap; } .tr-hx p.tr-hx-go-label { margin: 0 0 0.3rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.72rem; font-weight: 700; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-hx--embed { margin: 1.2rem 0 2rem; padding: 0.4rem 1.1rem 0.9rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-left: 3px solid var(--wp--preset--color--tr-accent, #2A8E89); border-radius: 8px; background: var(--wp--preset--color--tr-surface, #f7f8fa); scroll-margin-top: 5rem; /* アンカー着地時にヘッダーへ潜らない */ } .tr-hx--embed .tr-hx-ev { border-top: 0; } /* ── 歴史軸・冒頭サマリ「大きな流れ」（A1）と時代区切り（A2）、物語の要約・章目次（A3）── ストリップは上から読むと あらすじ、押すと時代の絞り込み。66件の羅列を「5つの章」に見せる。 */ .tr-hx-flow { margin: 0 0 1.2rem; } .tr-hx-flow-lead { margin: 0 0 0.7rem; font-size: 0.9rem; line-height: 1.7; color: var(--wp--preset--color--tr-ink-soft, #4b5563); } .tr-hx .tr-hx-flow-strip { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .tr-hx .tr-hx-flow-strip li { margin: 0; } .tr-hx .tr-hx-flow-strip li + li { margin-top: 0; } button.tr-hx-flow-item { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; padding: 0.55rem 0.8rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-left: 3px solid var(--wp--preset--color--tr-accent, #2A8E89); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; } button.tr-hx-flow-item:hover { background: color-mix(in srgb, var(--wp--preset--color--tr-accent, #2A8E89) 6%, #fff); } button.tr-hx-flow-item.is-on { background: color-mix(in srgb, var(--wp--preset--color--tr-accent, #2A8E89) 12%, #fff); border-color: var(--wp--preset--color--tr-accent, #2A8E89); } button.tr-hx-flow-item:focus-visible { outline: 2px solid var(--wp--preset--color--tr-primary, #1F3A5F); outline-offset: 2px; } .tr-hx-flow-era { font-family: var(--wp--preset--font-family--playfair); font-size: 1rem; font-weight: 700; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-hx-flow-range { font-size: 0.7rem; color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-hx-flow-text { flex: 1 1 12em; font-size: 0.88rem; line-height: 1.6; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-hx-flow-count { margin-left: auto; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--wp--preset--color--tr-surface-deep, #eef1f4); font-size: 0.72rem; font-weight: 700; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-hx .tr-hx-era-sep { margin: 0; display: flex; align-items: baseline; gap: 0.6rem; padding: 1.4rem 0 0.35rem; border-top: 0; border-bottom: 2px solid var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-hx .tr-hx-era-sep[hidden] { display: none; } .tr-hx .tr-hx-era-sep + .tr-hx-ev { border-top: 0; } .tr-hx-era-sep-label { font-family: var(--wp--preset--font-family--playfair); font-size: 1.15rem; font-weight: 900; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-hx-era-sep-range { font-size: 0.75rem; color: var(--wp--preset--color--tr-muted, #6b7280); } /* 物語ページ: 冒頭の要約と章の目次（A3）。アンカーは ch-*（明示 id）と ev-*（出来事）だけを使う */ .tr-hx-abstract { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--wp--preset--color--tr-accent, #2A8E89); background: var(--wp--preset--color--tr-surface, #f7f8fa); border-radius: 0 6px 6px 0; } .tr-hx-abstract-title { margin: 0 0 0.4rem; font-family: var(--wp--preset--font-family--inter); font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--tr-primary, #1F3A5F); } .tr-hx-abstract ul { margin: 0; padding: 0 0 0 1.2em; } .tr-hx-abstract li { margin: 0; font-size: 0.92rem; line-height: 1.8; } .tr-hx-chapters { margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .wp-block-post-content a.tr-hx-chapter { padding: 0.3rem 0.7rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 999px; background: #fff; font-size: 0.82rem; text-decoration: none; color: var(--wp--preset--color--tr-ink, #1A2332); } .wp-block-post-content a.tr-hx-chapter:hover { border-color: var(--wp--preset--color--tr-accent, #2A8E89); color: var(--wp--preset--color--tr-accent, #2A8E89); } h2[id^="ch-"] { scroll-margin-top: 5rem; } /* ── 歴史軸・モバイルのフィルタ折りたたみ（B6）── ★.tr-hx--collapsible は JS が生きているときだけ付く。素の SSR ではトグルが消え全フィルタ表示 （LiteSpeed で JS が落ちても絞り込み UI が使える側に倒す）。 */ .tr-hx-filters-toggle { display: none; } @media (max-width: 600px) { .tr-hx--collapsible .tr-hx-filters-toggle { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 0 0.4rem; padding: 0.35rem 0.8rem; border: 1px solid var(--wp--preset--color--tr-rule, #e5e7eb); border-radius: 999px; background: #fff; font-size: 0.82rem; font-weight: 700; color: var(--wp--preset--color--tr-primary, #1F3A5F); cursor: pointer; } .tr-hx--collapsible .tr-hx-filters-toggle[aria-expanded="true"] span { transform: rotate(180deg); } .tr-hx--collapsible .tr-hx-filters-toggle[aria-expanded="false"] + .tr-hx-filters-body { display: none; } } /* 国ハブ注入の1行サマリ（B5） */ .tr-hx-country-note { margin: 0 0 0.8rem; font-size: 0.92rem; line-height: 1.8; color: var(--wp--preset--color--tr-ink-soft, #4b5563); } /* ── 歴史軸・現物の実走写真（出来事カードの代表写真）── ★float なので desktop の3列グリッドでも mobile の1列でも本文が回り込む。 150x150 の正方サムネイル固定（WP が必ず生成する唯一の予測可能な名前）。 */ .tr-hx img.tr-hx-photo, .tr-hx svg.tr-hx-photo { float: right; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; margin: 0 0 0.5rem 0.8rem; } .tr-hx .tr-hx-ev--compact img.tr-hx-photo, .tr-hx .tr-hx-ev--compact svg.tr-hx-photo { width: 64px; height: 64px; } @media (max-width: 600px) { .tr-hx img.tr-hx-photo, .tr-hx svg.tr-hx-photo { width: 76px; height: 76px; } } @media print { .tr-hx img.tr-hx-photo, .tr-hx svg.tr-hx-photo { display: none; } } /* ── 歴史軸・絵本調シーン（物語の章冒頭のフラットイラスト）── 実データの概念図（tr-geomap）と同じ配色のベクター場面絵。横スクロール不要（自身が縮む）。 */ svg.tr-hx-scene { display: block; width: 100%; height: auto; border-radius: 10px; margin: 0.4rem 0 1.4rem; } @media print { svg.tr-hx-scene { max-height: 220px; } } /* ── 歴史軸・世界史の骨格（節目の文脈行）── 現物カードの間に挟まる細い行。カードと違い「行くなら」を持たない＝背骨の年表。 */ .tr-hx .tr-hx-ms { margin: 0; display: grid; grid-template-columns: minmax(5.2em, auto) 1fr; gap: 0 1rem; padding: 0.28rem 0; border-top: 0; } .tr-hx .tr-hx-ms + .tr-hx-ms { margin-top: 0; } .tr-hx .tr-hx-ms[hidden] { display: none; } .tr-hx .tr-hx-ms .tr-hx-year { opacity: 0.75; } .tr-hx .tr-hx-ms .tr-hx-year .tr-hx-yn { font-size: 0.95rem; } .tr-hx-ms-body { align-self: center; font-size: 0.85rem; color: var(--wp--preset--color--tr-ink-soft, #4b5563); border-left: 3px dotted var(--wp--preset--color--tr-rule, #d5dae2); padding-left: 0.7rem; line-height: 1.6; } .tr-hx-ms-title { font-weight: 600; color: var(--wp--preset--color--tr-ink, #1A2332); } .tr-hx-ms-note { color: var(--wp--preset--color--tr-muted, #6b7280); } .tr-hx-ms-icon { font-size: 0.8rem; } .tr-hx-ms-src { font-size: 0.7rem; opacity: 0.75; white-space: nowrap; } /* 「出／典」と字の途中で折れる（実測 2026-09-04） */ .tr-hx-ms-story { font-size: 0.8rem; font-weight: 600; white-space: nowrap; } /* 色は本文リンク既定（プライマリ）。出来事カードの物語リンクと同じ。accent を書いても .wp-block-post-content a:not() に負ける（実測 2026-09-04） */ @media (max-width: 600px) { .tr-hx .tr-hx-ms { grid-template-columns: 1fr; gap: 0; } .tr-hx .tr-hx-ms .tr-hx-year { text-align: left; } }