/* 見た目の案 ISLAND(2026-10-15、相棒さんの依頼「お堅い・テキストベースで退屈。見ていて楽しいを。文字の表示に規則性を」)。
   style.css の上に重ねる(chic の代わり)。考え方: 「昼の島の雑誌」。白い砂の地に、海の青・ハイビスカスの赤・太陽の黄の 3 色だけ。
   規則(どのページでも同じにする):
   - 字は Hanken Grotesk 1 つだけ。見出しは太く詰めて(600・字間 -0.02em)、本文は 400。大きさは 5 段だけ
     (--t-hero / --t-h1 / --t-h2 / --t-h3 / 本文)。札(kicker・eyebrow・要点の名前)は全部、同じ小さな太字の丸い札。
   - 角の丸みは 2 つだけ(写真・箱 = --radius、札・ボタン = 999px)。余白は 8 の倍数。
   - 色の役目を固定: 青緑 = リンク・情報、赤 = 行動(ボタン)と強調、黄 = 注意と印。地域は 4 色(南 = 赤、中部 = 夕日、北 = 森、離島 = 海)。
   - 楽しさは「写真を大きく・角を丸く・色の札・波の線・数字を大きく」で出す。動きは触ったときに少し浮くだけ(動きを減らす設定なら止める)。
   字はサイトに置いたもの(site/fonts/。SIL Open Font License 1.1)。Google Fonts から読み込まない(確認役 L076)。 */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/hanken-grotesk-italic-latin.woff2") format("woff2"); }

:root {
  --bg: #fffdf7; --surface: #ffffff; --ink: #10232e; --muted: #546873; --line: #ebe4d3;
  --ocean: #063a5b;            /* 見出しの深い海 */
  --lagoon: #0089a8;           /* リンク・情報 */
  --lagoon-soft: #ddf4f6;
  --coral: #f2435f;            /* 行動・強調(ハイビスカス) */
  --coral-soft: #ffe6ea;
  --sun: #ffb21e; --sun-soft: #fff1cc; --warn-soft: #fff4d6;
  --south: #f2435f; --central: #ff8a3d; --north: #2f9e6a; --islands: #00a6c0;
  --display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(6,58,91,.06), 0 8px 24px rgba(6,58,91,.08);
  --shadow-up: 0 2px 4px rgba(6,58,91,.08), 0 16px 36px rgba(6,58,91,.14);
  --t-hero: clamp(2.6rem, 6.6vw, 4.8rem);
  --t-h1: clamp(2.2rem, 5vw, 3.4rem);
  --t-h2: clamp(1.6rem, 3vw, 2.1rem);
  --t-h3: 1.3rem;
  /* 波の線(区切りに使う)。色は塗りで変えられるよう mask にする */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 T90 6 T120 6 V12 H0Z'/%3E%3C/svg%3E");
}
@media not all /* 暗い表示は今は使わない(末尾の説明) */ {
  :root { --bg: #0b1a24; --surface: #10242f; --ink: #eaf3f5; --muted: #9db4bd; --line: #1f3a48;
          --ocean: #bfe9f5; --lagoon: #4fd0e0; --lagoon-soft: #0f3340; --coral: #ff6f86; --coral-soft: #3a1c24;
          --sun: #ffc24d; --sun-soft: #3a3018; --warn-soft: #3a3018;
          --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.3); --shadow-up: 0 2px 4px rgba(0,0,0,.35), 0 16px 36px rgba(0,0,0,.4); }
}

body { font-size: 18px; line-height: 1.7; }
/* 傾けたカードや、横から入ってくる動きで、ページが横に動かないように(clip は上の固定の頭を壊さない) */
html, body { overflow-x: clip; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--ocean); }
a { color: var(--lagoon); text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--lagoon) 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
/* 札は全部この形(規則): 小さな太字・丸い地 */
.eyebrow, .kicker { display: inline-block; text-transform: none; letter-spacing: 0; font: 600 13px/1 var(--body);
  padding: 7px 12px; border-radius: 999px; background: var(--coral-soft); color: var(--coral); }

/* ── 頭 ── */
.top { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand, .foot-brand { font: 600 23px/1 var(--display); letter-spacing: -.03em; color: var(--ocean); }
.brand span, .foot-brand span { color: var(--coral); margin-left: 3px; }
.top nav { gap: 6px; }
.top nav a { font-size: 15px; font-weight: 600; padding: 7px 12px; border-radius: 999px; color: var(--ink); }
.top nav a:hover { background: var(--lagoon-soft); color: var(--ocean); }

/* ── 表紙: 写真を明るいまま大きく。字は左下に。下に波 ── */
.home-hero-media .home-hero-img, .home-hero-media img { height: clamp(480px, 80vh, 760px); }
.home-hero::after { background: linear-gradient(180deg, rgba(4,30,46,.25) 0%, transparent 30%, transparent 45%, rgba(4,30,46,.72) 100%),
                                linear-gradient(90deg, rgba(4,30,46,.45) 0%, transparent 65%); }
.home-hero-text { bottom: 88px; text-shadow: 0 2px 18px rgba(0,0,0,.3); }
.home-hero-text h1 { font-size: var(--t-hero); letter-spacing: -.035em; line-height: 1.02; max-width: 13ch; }
.home-hero-text p { font-size: 1.2rem; max-width: 44ch; }
.home-hero .kicker { background: var(--sun); color: #3a2400; text-shadow: none; }
/* 写真の下を波で切る(地の色) */
.home-hero-media { position: relative; }
.home-hero-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; z-index: 2;
  background: var(--bg); -webkit-mask: var(--wave) repeat-x bottom / 120px 28px; mask: var(--wave) repeat-x bottom / 120px 28px; }
.home-hero-media figcaption { z-index: 3; bottom: 34px; color: #fff; }
.home-hero-media figcaption a { color: inherit; }

.btn { border-radius: 999px; background: var(--coral); color: #fff; font-weight: 600; padding: 14px 24px; box-shadow: 0 6px 18px rgba(242,67,95,.35);
  transition: transform .15s, box-shadow .15s; }
.btn:hover { filter: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(242,67,95,.42); }
.ctas .btn + .btn, .btn-ghost { background: rgba(255,255,255,.92); color: var(--ocean); border: 0; box-shadow: var(--shadow); }
.flight .btn-ghost { background: var(--lagoon-soft); }

/* ── 直行便の帯: 搭乗券 ── */
.flight { margin-top: -8px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-up); padding: 22px 28px 22px 34px;
  background: var(--surface); position: relative; z-index: 3; overflow: hidden; }
/* 搭乗券の切り取り線(左の色の帯) */
.flight::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(180deg, var(--coral), var(--sun)); }
.flight .route { font: 600 1.5rem/1.25 var(--display); letter-spacing: -.02em; }
.flight .eyebrow { background: var(--lagoon-soft); color: var(--lagoon); }

/* ── 区切りの見出し: 小さな波の線を上に ── */
h2.sec { font-size: var(--t-h2); margin: 88px 0 20px; position: relative; padding-top: 22px; }
h2.sec::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 10px; background: var(--coral);
  -webkit-mask: var(--wave) repeat-x center / 32px 10px; mask: var(--wave) repeat-x center / 32px 10px; }
.dek { font-size: 1.15rem; }

/* ── カード: 丸い写真の箱・触ると浮く ── */
.cards { gap: 24px; }
.card, .region { border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.card:hover, .region:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); }
.card-img { overflow: hidden; }
.card-img img { transition: transform .4s; }
.card:hover .card-img img, .region:hover .card-img img { transform: scale(1.05); }
.card-body { padding: 16px 20px 22px; }
.card-body h3 { font-size: 1.2rem; line-height: 1.25; }
.card-body p { font-size: 15.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 地域: 写真の上に名前。4 つの地域に 4 色の札(並びは 南・中部・北・離島) */
.region { position: relative; overflow: hidden; }
.region .card-img { aspect-ratio: 4 / 5; }
.region .card-body { position: absolute; inset: auto 0 0 0; padding: 64px 18px 18px; background: linear-gradient(180deg, transparent, rgba(4,30,46,.85) 60%); }
.region .card-body h3 { color: #fff; font-size: 1.4rem; margin: 0 0 6px; }
.region .card-body h3::before { content: ""; display: block; width: 36px; height: 6px; border-radius: 999px; margin-bottom: 10px; background: var(--rc, var(--coral)); }
.region .card-body p { color: rgba(255,255,255,.88); font-size: 15px; }
.cards-4 .region:nth-child(1) { --rc: var(--south); }
.cards-4 .region:nth-child(2) { --rc: var(--central); }
.cards-4 .region:nth-child(3) { --rc: var(--north); }
.cards-4 .region:nth-child(4) { --rc: var(--islands); }
/* 4 つの地域は 4 列か 2 列(3+1 にしない) */
@media (max-width: 1080px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cards-4 { grid-template-columns: minmax(0, 1fr); } }

/* ── いつ行くか ── */
.season { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.season thead th { color: var(--ocean); }
.season .rainy td:not(:empty)::before { background: #7fb2d6; border-radius: 999px; }
.season .jelly td:not(:empty)::before { background: var(--sun); border-radius: 999px; }
.season .kings td:not(:empty)::before { background: var(--coral); border-radius: 999px; }

/* ── 記事の頭: 写真の上に題(chic と同じ組み方)。明るい写真のまま、下だけ暗く ── */
.art-head { padding-top: 56px; }
.art-head h1 { font-size: var(--t-h1); letter-spacing: -.03em; line-height: 1.08; }
.article:has(.art-hero) { display: grid; grid-template-columns: minmax(0, 1fr); }
.article:has(.art-hero) > * { width: 100%; min-width: 0; }
.article:has(.art-hero) > .art-head, .article:has(.art-hero) > .wrap-wide { grid-area: 1 / 1; }
.article:has(.art-hero) > .wrap-wide { max-width: none; width: 100%; margin: 0; padding: 0; position: relative; display: flex; background: var(--ocean); }
.article:has(.art-hero) > .wrap-wide::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,30,46,.2) 0%, transparent 30%, rgba(4,30,46,.82) 100%); }
/* 頭の写真の下も波で切る */
.article:has(.art-hero) > .wrap-wide::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px; z-index: 2;
  background: var(--bg); -webkit-mask: var(--wave) repeat-x bottom / 110px 24px; mask: var(--wave) repeat-x bottom / 110px 24px; }
.article .art-hero { flex: 1; margin: 0; border-radius: 0; aspect-ratio: auto; min-height: clamp(440px, 66vh, 620px); position: relative; }
.article .art-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article .art-hero.ph span { display: none; }
.article .art-hero figcaption { position: absolute; right: 12px; top: 10px; z-index: 2; margin: 0; padding: 0; font-size: 12px; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.article .art-hero figcaption a { color: inherit; }
.article:has(.art-hero) > .art-head { z-index: 1; align-self: end; padding: 104px 20px 56px; }
.article:has(.art-hero) > .art-head h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.article:has(.art-hero) > .art-head .dek { color: rgba(255,255,255,.92); }
.article:has(.art-hero) > .art-head .meta { color: rgba(255,255,255,.78); }
.article:has(.art-hero) > .art-head .eyebrow { background: var(--sun); color: #3a2400; }
.article:has(.art-hero) .prose { position: relative; padding-top: 16px; }

/* ── 本文: 見出しの規則。h2 = 左に色の棒、h3 = 小さな点 ── */
.prose h2 { font-size: var(--t-h2); margin-top: 2.4em; padding-left: 18px; position: relative; }
.prose h2::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 6px; border-radius: 999px;
  background: linear-gradient(180deg, var(--coral), var(--sun)); }
.prose h3 { font-size: var(--t-h3); margin-top: 1.8em; }
.prose h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--lagoon); margin: 0 10px .15em 0; vertical-align: middle; }
.prose strong { color: var(--ocean); }
.prose blockquote { background: var(--lagoon-soft); border-radius: var(--radius); padding: 16px 22px; border: 0; }
.prose img, .prose figure img { border-radius: var(--radius); }
/* 表: 頭の行に色、1 行おきに薄い地(読み間違いを減らす) */
.prose table { border-radius: 14px; box-shadow: var(--shadow); background: var(--surface); }
.prose thead th { background: var(--ocean); color: #fff; font-weight: 600; font-size: 15px; border: 0; }
.prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--lagoon-soft) 45%, transparent); }
.prose th, .prose td { padding: 10px 14px; border-bottom: 0; }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { .prose thead th { background: #0d4a63; } }

/* 要点の箱: 色ちがいの札を並べる(1 つ目 = 海・2 つ目 = 赤・3 つ目 = 黄・あとは繰り返し) */
.quick { gap: 12px; }
.quick div { border-radius: var(--radius); padding: 14px 18px; background: var(--lagoon-soft); }
.quick div:nth-child(3n+2) { background: var(--coral-soft); }
.quick div:nth-child(3n) { background: var(--sun-soft); }
.quick dt { text-transform: none; letter-spacing: 0; font: 600 13px/1.3 var(--body); color: var(--muted); }
.quick dd { font-size: 1.12rem; font-weight: 600; color: var(--ocean); line-height: 1.3; margin-top: 4px; }
/* 目次: 丸い札の並び */
.toc { border: 0; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.toc p { font: 600 13px/1 var(--body); color: var(--muted); margin-bottom: 12px; }
.toc ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: inline-block; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.toc a::before { content: counter(toc); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 8px;
  background: var(--coral); color: #fff; font-size: 12px; font-weight: 600; }
.toc a:hover { border-color: var(--lagoon); color: var(--lagoon); }
/* 数字の札: 大きく・色つき */
.stats ul { gap: 14px; }
.stats li { border: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 16px; }
.stat-num { font: 600 clamp(1.8rem, 3.6vw, 2.4rem)/1.05 var(--display); letter-spacing: -.03em; color: var(--coral); }
.stats li:nth-child(3n+2) .stat-num { color: var(--lagoon); }
.stats li:nth-child(3n) .stat-num { color: var(--north); }
.best-for li { background: var(--sun-soft); font-weight: 600; }
.maplink { border-radius: 999px; background: var(--lagoon-soft); color: var(--lagoon); font-weight: 600; padding: 6px 14px; }
.maplink::before { content: "📍 "; }
.disclosure, .fresh { border-radius: var(--radius); }
.fresh { background: var(--surface); box-shadow: var(--shadow); border-left: 6px solid var(--lagoon); }
.fresh.stale { border: 0; border-left: 6px solid var(--sun); background: var(--warn-soft); }
.glossary, .good-to-know, .how-checked { border: 0; box-shadow: var(--shadow); }
.good-to-know { border-left: 6px solid var(--sun); background: var(--surface); }
.box-title { font-weight: 600; }
.timeline li::before { background: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }
.updates { border-radius: 0 var(--radius) var(--radius) 0; }
.route { border: 0; border-radius: var(--radius); background: var(--lagoon-soft); }
.video iframe, .yt-load { border-radius: var(--radius); }
.sources { border-top: 0; background: var(--surface); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); }
.credits li, .credits img { border-radius: 14px; }

/* ── 足: 深い海。上を波で ── */
footer { background: var(--ocean); position: relative; margin-top: 96px; color: #cfe6ee; }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { footer { background: #04121a; } }
footer::before { content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px; background: inherit;
  -webkit-mask: var(--wave) repeat-x bottom / 120px 24px; mask: var(--wave) repeat-x bottom / 120px 24px; }
footer a, footer .foot-brand { color: #fff; }
footer .foot-brand span { color: var(--sun); }

/* ── 写真のカードは、机に置いた写真のように(相棒さんの依頼 2026-10-15「少し斜めに・少し重ねて・めくる感じに・右左にも目を動かす」) ──
   写真のあるカードだけ白いふちを付けて、1 枚ごとに違う向きに傾ける。触る・選ぶとまっすぐになって手前に出る(めくる感じ)。 */
.card:has(.card-img img), .region:has(.card-img img) { padding: 10px 10px 0; background: var(--surface);
  transform: rotate(var(--tilt, 0deg)) translateY(var(--drop, 0)); transform-origin: 50% 90%; }
.card:has(.card-img img) .card-img, .region:has(.card-img img) .card-img { border-radius: calc(var(--radius) - 8px); }
.region:has(.card-img img) { padding-bottom: 10px; }
.region:has(.card-img img) .card-body { left: 10px; right: 10px; bottom: 10px; border-radius: 0 0 calc(var(--radius) - 8px) calc(var(--radius) - 8px); }
.cards > li:nth-child(4n+1) { --tilt: -2.2deg; --drop: 0px; }
.cards > li:nth-child(4n+2) { --tilt: 1.6deg;  --drop: 14px; }
.cards > li:nth-child(4n+3) { --tilt: -1deg;   --drop: -6px; }
.cards > li:nth-child(4n+4) { --tilt: 2.4deg;  --drop: 10px; }
.cards > li { position: relative; z-index: 1; }
.card:has(.card-img img):hover, .card:has(.card-img img):focus-within,
.region:has(.card-img img):hover, .region:has(.card-img img):focus-within {
  transform: rotate(0deg) translateY(-8px) scale(1.03); z-index: 3; box-shadow: var(--shadow-up); }
/* 地域: 少しずつ重ねる(隣の写真の端に乗る) */
.cards-4 { gap: 28px 0; padding: 12px 8px 24px; }
.cards-4 > li { margin-inline: -6px; }
@media (max-width: 480px) { .cards-4 > li { margin-inline: 8px; } }

/* ── 記事のカードの列は、横に流す(右に続きがあるのが見える。指や横のスクロールで送る) ── */
.cards:not(.cards-4) { display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 26px 40px 40px 8px; margin-inline: -8px; scroll-padding-inline: 8px; scrollbar-width: thin; scrollbar-color: var(--coral) transparent;
  /* 右の端を薄くして「まだ続く」を見せる */
  -webkit-mask: linear-gradient(90deg, #000 0 calc(100% - 64px), transparent); mask: linear-gradient(90deg, #000 0 calc(100% - 64px), transparent); }
.cards:not(.cards-4) > li { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; }
.cards:not(.cards-4) > li + li { margin-left: -14px; }   /* 隣のカードに少し重ねる */
.cards:not(.cards-4) > li:hover, .cards:not(.cards-4) > li:focus-within { z-index: 4; }
.cards:not(.cards-4)::-webkit-scrollbar { height: 6px; }
.cards:not(.cards-4)::-webkit-scrollbar-thumb { background: var(--coral); border-radius: 999px; }
/* 横に送れることを字でも(見出しの後ろの小さな札) */
section:has(.cards:not(.cards-4)) > h2.sec::after, .related:has(.cards) > h2::after {
  content: "Swipe →"; content: "Swipe →" / "";  /* 読み上げでは読まない(確認役 L206)。対応しないブラウザは前の行 */
  margin-left: 14px; vertical-align: middle; font: 600 13px/1 var(--body); letter-spacing: 0;
  padding: 6px 11px; border-radius: 999px; background: var(--lagoon-soft); color: var(--lagoon); }

/* ── スクロールに合わせた動き(対応するブラウザだけ。動きを減らす設定なら出さない) ──
   縦: 見出しは左から、地域の写真は左右から交互に入ってくる。横: 列の真ん中に来たカードがまっすぐになり、端では傾く(めくる感じ)。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    h2.sec, .prose h2 { animation: slide-from-left linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .cards-4 > li:nth-child(odd)  { animation: drift-left linear both;  animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .cards-4 > li:nth-child(even) { animation: drift-right linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .stats li, .quick div { animation: pop-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .cards:not(.cards-4) > li > .card { animation: flip-through linear both; animation-timeline: view(inline); }
    @keyframes slide-from-left { from { opacity: 0; translate: -60px 0; } }
    @keyframes drift-left  { from { opacity: 0; translate: -80px 30px; rotate: -6deg; } }
    @keyframes drift-right { from { opacity: 0; translate: 80px 30px;  rotate: 6deg; } }
    @keyframes pop-in { from { opacity: 0; scale: .9; translate: 0 20px; } }
    /* 横の列: 入ってくるときは右に傾いて小さく、真ん中でまっすぐ、出ていくときは左に傾く */
    @keyframes flip-through {
      0%   { rotate: 7deg;  scale: .9; opacity: .6; }
      40%, 60% { rotate: 0deg; scale: 1; opacity: 1; }
      100% { rotate: -7deg; scale: .9; opacity: .6; }
    }
  }
}

a:focus-visible, .btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .card:has(.card-img img), .region:has(.card-img img) { transform: rotate(var(--tilt, 0deg)); }
  .card, .region, .btn, .card-img img { transition: none; }
  .card:hover, .region:hover, .btn:hover { transform: none; }
  .card:hover .card-img img, .region:hover .card-img img { transform: none; }
}
@media (max-width: 640px) {
  .home-hero-text { bottom: 56px; }
  .flight { background: var(--surface); margin-top: 8px; }
  h2.sec { margin-top: 64px; }
  .region .card-img { aspect-ratio: 16 / 11; }
  .article .art-hero { min-height: 480px; }
  .article:has(.art-hero) > .art-head { padding: 80px 20px 44px; }
  .top nav a { padding: 6px 8px; font-size: 14px; }
}

/* ── 小さな絵(tools/icons.py)。island では丸い色の札にのせる(相棒さんの依頼 2026-10-15「意味が強い文字にはアイコンで演出」) ──
   見出しは大きな丸(色は絵ごと: 乗り物 = 海・お金と時間 = 黄・場所と行事 = 赤)、要点・行き方は小さな丸 */
.ico { --ic: var(--lagoon); --ic-bg: var(--lagoon-soft); }
.ico-yen, .ico-clock, .ico-calendar, .ico-ticket, .ico-sun, .ico-spark { --ic: #b26b00; --ic-bg: var(--sun-soft); }
.ico-pin, .ico-castle, .ico-flower, .ico-flag, .ico-ball, .ico-food, .ico-bed { --ic: var(--coral); --ic-bg: var(--coral-soft); }
.ico-typhoon, .ico-shield, .ico-info { --ic: var(--ocean); --ic-bg: color-mix(in srgb, var(--ocean) 12%, transparent); }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { .ico-yen, .ico-clock, .ico-calendar, .ico-ticket, .ico-sun, .ico-spark { --ic: var(--sun); } }
.prose h2:has(.ico) { padding-left: 0; display: flex; align-items: center; gap: 14px; }
.prose h2:has(.ico)::before { display: none; }   /* 絵があるときは色の棒の代わりに絵 */
.prose h2 .ico { flex: none; margin: 0; width: 1.7em; height: 1.7em; border-radius: 14px; display: grid; place-items: center;
  background: var(--ic-bg); color: var(--ic); rotate: -6deg; box-shadow: 0 0 0 3px var(--surface), 0 4px 10px rgba(6,58,91,.12); }
.prose h2:nth-of-type(even) .ico { rotate: 5deg; }
.prose h2 .ico svg { width: .95em; height: .95em; }
.quick dt .ico, .route-legs .ico, .prose p .ico, .prose li .ico { width: 1.6em; height: 1.6em; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--ic-bg); color: var(--ic); vertical-align: -.45em; }
.quick dt .ico svg, .route-legs .ico svg, .prose p .ico svg, .prose li .ico svg { width: 1em; height: 1em; }
.route-legs { list-style: none; padding-left: 0; }
.route-legs .ico { background: var(--surface); }   /* 行き方の箱は地が薄い青なので、絵の丸は白に */

/* ── 暮らしの道具で見せる(相棒さんの依頼 2026-10-15「のっぺらぼう。実際に生活で使うアイテムをページに入れて表現豊かに」) ──
   要点 = リングの手帳(罫線の上に字)・行く前に = 付箋・行き方 = 切符・目次 = 索引カード。どれも CSS だけで描く(絵のファイルを増やさない)。
   字の読みやすさを先に: 地はうすい紙の色、字は濃いまま、飾りは端だけ */
:root { --paper: #fffef9; --rule: #d9e6ee; --margin-line: #f6b8c2; --tape: rgba(255, 214, 102, .78); --note: #fff3b0; }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { :root { --paper: #13293a; --rule: #22435a; --margin-line: #6b3542; --tape: rgba(255, 196, 77, .45); --note: #3a3418; } }

/* 要点: リングの手帳。左にリングの穴、赤い余白の線、字は罫線の上 */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 28px; position: relative;
  margin: 32px 0; padding: 28px 24px 18px 64px; border-radius: 6px 18px 18px 6px; background: var(--paper);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line); overflow: visible;
  background-image: linear-gradient(90deg, transparent 50px, var(--margin-line) 50px 52px, transparent 52px); }
/* リング: 左の端に穴と金具 */
.quick::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 26px;
  background: radial-gradient(circle at 13px 13px, var(--bg) 0 5px, #9fb0bb 5.5px 7px, transparent 7.5px) 0 0 / 26px 30px repeat-y; }
/* マスキングテープ(右上) */
.quick::after { content: ""; position: absolute; right: 26px; top: -12px; width: 92px; height: 26px; rotate: 4deg;
  background: var(--tape); box-shadow: 0 1px 2px rgba(0,0,0,.08);
  -webkit-mask: linear-gradient(90deg, transparent, #000 3px calc(100% - 3px), transparent); mask: linear-gradient(90deg, transparent, #000 3px calc(100% - 3px), transparent); }
.quick div, .quick div:nth-child(3n+2), .quick div:nth-child(3n) { background: transparent; border-radius: 0; padding: 0 0 10px;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); animation: none; }
.quick dt { height: 32px; display: flex; align-items: center; gap: 2px; font: 600 13px/1 var(--body); color: var(--coral); letter-spacing: .01em; }
.quick dt .ico { width: 1.7em; height: 1.7em; background: var(--coral-soft); color: var(--coral); vertical-align: 0; }
.quick dd { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 32px; color: var(--ocean); }
@media (max-width: 560px) { .quick { padding-left: 56px; background-image: linear-gradient(90deg, transparent 44px, var(--margin-line) 44px 46px, transparent 46px); } }

/* 行く前に(確かめた日の知らせ)と「行く前に知っておくこと」: 付箋。少し傾けてテープで留める */
.fresh, .good-to-know { position: relative; background: var(--note); border: 0; border-left: 0; border-radius: 2px 2px 14px 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 10px 18px -8px rgba(90,70,0,.28); rotate: -.6deg; padding: 18px 22px 16px; }
.good-to-know { rotate: .5deg; background: color-mix(in srgb, var(--note) 55%, var(--lagoon-soft)); }
.fresh::before, .good-to-know::before { content: ""; position: absolute; left: 50%; top: -11px; width: 84px; height: 22px; translate: -50% 0; rotate: -3deg;
  background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fresh.stale { background: var(--note); border: 0; outline: 2px dashed var(--sun); outline-offset: -8px; }

/* 行き方: 切符。右に切り取り線とミシン目の切り欠き */
.route { position: relative; background: var(--surface); border: 0; border-radius: 12px; box-shadow: var(--shadow);
  padding: 16px 64px 16px 22px; overflow: hidden;
  background-image: linear-gradient(180deg, var(--lagoon) 0 6px, transparent 6px); }
.route::after { content: "TICKET"; content: "TICKET" / ""; position: absolute; right: 0; top: 0; bottom: 0; width: 44px;
  display: grid; place-items: center; writing-mode: vertical-rl; font: 600 11px/1 var(--body); letter-spacing: .3em; color: var(--lagoon);
  border-left: 2px dashed var(--line); background: var(--lagoon-soft); }
.route::before { content: ""; position: absolute; right: 35px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg);
  box-shadow: 0 calc(100cqh + 0px) 0 var(--bg); }
.route figcaption { font-size: 15px; color: var(--muted); text-transform: none; }

/* 目次: 索引カード(上に赤い線、左上にパンチの穴) */
.toc { position: relative; background: var(--paper); border-radius: 6px; padding: 22px 22px 18px 22px;
  background-image: linear-gradient(180deg, transparent 38px, var(--margin-line) 38px 40px, transparent 40px),
                    repeating-linear-gradient(180deg, transparent 0 47px, var(--rule) 47px 48px); }
.toc p { color: var(--coral); }

/* 数字の札: 上に絵の札(数字だけにしない ―― 相棒さん 2026-10-15)。数字の色と絵の色をそろえる */
.stats li { position: relative; padding-top: 16px; }
.stats li .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin: 0 0 12px;
  background: var(--ic-bg); color: var(--ic); rotate: -5deg; box-shadow: 0 0 0 3px var(--surface), 0 4px 10px rgba(6,58,91,.12); }
.stats li:nth-child(even) .ico { rotate: 4deg; }
.stats li .ico svg { width: 26px; height: 26px; }
.stats li .stat-num { color: var(--ic, var(--coral)); }
.stats li:has(.ico-bus) .stat-num, .stats li:has(.ico-train) .stat-num, .stats li:has(.ico-plane) .stat-num, .stats li:has(.ico-boat) .stat-num,
.stats li:has(.ico-car) .stat-num { color: var(--lagoon); }
.stats li:has(.ico-yen) .stat-num, .stats li:has(.ico-clock) .stat-num, .stats li:has(.ico-calendar) .stat-num { color: #c27400; }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { .stats li:has(.ico-yen) .stat-num, .stats li:has(.ico-clock) .stat-num, .stats li:has(.ico-calendar) .stat-num { color: var(--sun); } }
.stats li:has(.ico-pin) .stat-num, .stats li:has(.ico-bed) .stat-num, .stats li:has(.ico-beach) .stat-num, .stats li:has(.ico-flower) .stat-num { color: var(--coral); }
/* いつ行くかの表は、本文の表の縞と色の頭を使わない(後ろのグラフと重なって読みにくいので) */
.prose .season table { box-shadow: none; border-radius: 0; background: transparent; }
.prose .season thead th { background: transparent; color: var(--ocean); }
.prose .season tbody tr:nth-child(even) td { background-color: transparent; }

/* ── 字の強弱(相棒さんの依頼 2026-10-15「字の色が単調。強調したい所は色や大きさを変えて、ぱっと見で入るように。ただの説明だと疲れる」) ──
   規則: 数字(値段・時間・距離)= 赤の太字・少し大きく / 太字 = 黄色の蛍光ペン / 段落の頭の太字(「How to pay.」など)= 青緑の見出し札 /
   最初の段落 = 大きな導入文 / 箇条書きの点 = 赤。1 つの段落で使う色は 2 つまでにする(多すぎると逆に読みにくい) */
.prose > p:first-of-type { font-size: 1.24rem; line-height: 1.6; color: var(--ocean); font-weight: 500; }
.prose .num { color: var(--coral); font-weight: 600; font-size: 1.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose strong { color: var(--ocean); font-weight: 600;
  background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--sun) 45%, transparent) 58% 92%, transparent 92%); padding: 0 2px; }
.prose strong .num { color: var(--coral); }
/* 段落の頭の太字は札にする(見出しの代わりの短い名前) */
.prose p > strong.lead { display: inline-block; background: var(--lagoon-soft); color: var(--lagoon); font-size: .92em;
  padding: 1px 10px; border-radius: 999px; margin-right: 4px; line-height: 1.6; }
.prose ul > li::marker { color: var(--coral); }
.prose ol > li::marker { color: var(--coral); font-weight: 600; }
.prose em { color: var(--ocean); }
.prose a { font-weight: 500; }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { .prose strong { background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--sun) 30%, transparent) 58% 92%, transparent 92%); } }
/* 数字の札の中は札の色づかいのまま(本文の数字の強調を重ねない) */
.prose .stats .num { color: inherit; font-size: inherit; font-weight: inherit; white-space: normal; }

/* ── 立体感(相棒さんの依頼 2026-10-15「ページに立体感をつけてください」) ──
   光は左上から 1 つ(どの部品も同じ向きの影)。地 → 紙 → カード → 札 の 4 段の高さで、上の段ほど影を長く・柔らかく */
:root {
  --lift-1: 0 1px 1px rgba(6,58,91,.06), 0 2px 4px rgba(6,58,91,.06);
  --lift-2: 0 1px 1px rgba(6,58,91,.05), 0 4px 8px rgba(6,58,91,.07), 0 12px 24px rgba(6,58,91,.08);
  --lift-3: 0 2px 2px rgba(6,58,91,.05), 0 8px 16px rgba(6,58,91,.08), 0 24px 48px rgba(6,58,91,.12);
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.9);   /* 上の縁の光 */
}
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { :root { --edge-hi: inset 0 1px 0 rgba(255,255,255,.07); } }
/* 地: 光のにじみ(左上が明るく、右下に海の色)。動かさない */
body { background:
  radial-gradient(1200px 700px at 8% -5%, color-mix(in srgb, var(--sun) 12%, transparent), transparent 70%),
  radial-gradient(1000px 800px at 105% 40%, color-mix(in srgb, var(--lagoon) 10%, transparent), transparent 70%),
  radial-gradient(900px 600px at -10% 90%, color-mix(in srgb, var(--coral) 7%, transparent), transparent 70%),
  var(--bg); background-attachment: fixed; }
/* 記事の本文は、頭の写真の上に重なる紙(写真から少し持ち上がって見える) */
.article:has(.art-hero) > .prose { position: relative; z-index: 2; margin-top: -40px; background: var(--surface);
  border-radius: 28px 28px 0 0; padding-top: 36px; box-shadow: 0 -18px 40px -24px rgba(4,30,46,.35), var(--edge-hi); }
@media (max-width: 760px) { .article:has(.art-hero) > .prose { border-radius: 22px 22px 0 0; margin-top: -28px; } }
/* カード・箱: 段ごとの影と、上の縁の光 */
.card, .region, .season, .toc, .stats li, .sources, .glossary, .how-checked { box-shadow: var(--lift-2), var(--edge-hi); }
.card:hover, .region:hover, .stats li:hover { box-shadow: var(--lift-3), var(--edge-hi); }
/* 触ると奥行きのある傾き(画面の奥へ少し倒れる) */
.cards { perspective: 1200px; }
.card:has(.card-img img):hover, .region:has(.card-img img):hover { transform: rotateX(4deg) rotateY(-5deg) translateY(-10px) scale(1.03); }
/* 手帳: 下に紙が何枚か重なっている */
.quick { box-shadow: var(--edge-hi), inset 0 0 0 1px var(--line),
  5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--line), 10px 10px 0 -1px var(--paper), 10px 10px 0 0 var(--line), var(--lift-3); }
/* 付箋: 下の角が少しめくれて影が濃い */
.fresh, .good-to-know { box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 14px 16px -12px rgba(90,70,0,.45), 12px 16px 18px -14px rgba(90,70,0,.35); }
/* 切符: 少し浮かせる */
.route { box-shadow: var(--lift-2), var(--edge-hi); }
/* ボタン: 下に厚み(押すと沈む) */
.btn { box-shadow: 0 4px 0 color-mix(in srgb, var(--coral) 70%, #000), 0 10px 22px rgba(242,67,95,.3); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 color-mix(in srgb, var(--coral) 70%, #000), 0 14px 26px rgba(242,67,95,.36); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--coral) 70%, #000), 0 4px 10px rgba(242,67,95,.3); }
.ctas .btn + .btn, .btn-ghost { box-shadow: 0 4px 0 color-mix(in srgb, var(--ocean) 18%, #fff), var(--lift-2); }
/* 見出しの絵の札・数字の札の絵: ふくらみ(上が明るく、下に影) */
.prose h2 .ico, .stats li .ico { background-image: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 60%);
  box-shadow: 0 0 0 3px var(--surface), 0 6px 12px -2px rgba(6,58,91,.22), inset 0 -3px 0 rgba(6,58,91,.08); }
/* 表紙の写真: スクロールで少し奥へ(対応するブラウザだけ・動きを減らす設定では止める) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-hero-media img, .article .art-hero img { animation: depth-zoom linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes depth-zoom { to { scale: 1.12; translate: 0 6%; } }
  }
}
/* 紙は本文より左右に広く(箱が紙の端に付かないように) */
.article:has(.art-hero) > .prose { max-width: 820px; padding-inline: 50px; }
@media (max-width: 860px) { .article:has(.art-hero) > .prose { max-width: none; margin-inline: 10px; padding-inline: 18px; width: auto; box-sizing: border-box; } }   /* 幅 100% に左右 10px を足して右が 20px 画面の外に出ていた(相棒さんの確認 2026-10-18「携帯で見切れませんか」) */
/* 絵のアイコンは色の丸を外し、絵そのものを大きく・影で浮かせる */
.ico.ico-img { background: none !important; box-shadow: none !important; border-radius: 0; }
.ico.ico-img img { filter: drop-shadow(0 6px 8px rgba(6,58,91,.22)); }
.prose h2 .ico.ico-img { width: 2.1em; height: 2.1em; rotate: -4deg; }
.stats li .ico.ico-img { width: 72px; height: 72px; margin: -6px 0 6px -6px; }
.quick dt .ico.ico-img, .route-legs .ico.ico-img, .prose p .ico.ico-img, .prose li .ico.ico-img { width: 2em; height: 2em; vertical-align: -.6em; }

/* ── 素材の変化(相棒さんの依頼 2026-10-15「同じカードばかり。木目調のカードなど変化を」) ──
   木目(明るい木)・黒板・クラフト紙・海のガラス・コルク を、絵の素材(SVG の模様)と色だけで描く。字が読める濃さを先に決めてある */
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .22' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .25 0 0 0 0 .1 1.6 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}
/* 木目(明るいメープル。字は濃い茶) */
.mat-wood, .stats li:nth-child(4n+1) {
  background: var(--grain) 0 0 / 600px 300px, linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.04)), #e2bf8f;
  color: #3b2412; box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(90,50,15,.18); }
.stats li:nth-child(4n+1) span { color: #5a3a1e; }
.stats li:nth-child(4n+1) .stat-num { color: #7a2a12; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
/* 黒板(字はチョークの白と黄) */
.stats li:nth-child(4n+2) { background: var(--noise), radial-gradient(120% 90% at 30% 20%, #3c5a4c, #24382f);
  box-shadow: var(--lift-2), inset 0 0 0 6px #8a5a32, inset 0 0 0 7px rgba(0,0,0,.3); }
.stats li:nth-child(4n+2) span { color: rgba(255,255,255,.82); }
.stats li:nth-child(4n+2) .stat-num { color: #ffe27a; text-shadow: 0 0 1px rgba(255,255,255,.4); }
/* クラフト紙(字は濃い茶) */
.mat-kraft, .stats li:nth-child(4n+3) { background: var(--noise), linear-gradient(160deg, #d8b98d, #c9a674); color: #3b2a16; }
.stats li:nth-child(4n+3) span { color: #4d3820; }
.stats li:nth-child(4n+3) .stat-num { color: #8a1f2d; }
/* 海のガラス(後ろが透けてにじむ) */
.stats li:nth-child(4n+4) { background: linear-gradient(150deg, rgba(160,232,236,.75), rgba(64,184,204,.55)); backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -10px 24px rgba(0,90,120,.12); }
.stats li:nth-child(4n+4) span { color: #0b3a4f; }
.stats li:nth-child(4n+4) .stat-num { color: #063a5b; }
.stats li .ico:not(.ico-img) { box-shadow: 0 4px 10px rgba(0,0,0,.18); }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ {
  .stats li:nth-child(4n+4) { background: linear-gradient(150deg, rgba(40,120,140,.6), rgba(10,60,80,.6)); }
  .stats li:nth-child(4n+4) span, .stats li:nth-child(4n+4) .stat-num { color: #e6f7fa; }
}

/* 記事のカードの列: 1 枚ごとに下の札の素材を変える(白い写真の札・クラフト紙・木目) */
.cards:not(.cards-4) > li:nth-child(3n+2) .card { background: var(--noise), linear-gradient(160deg, #e2c79e, #d2b07f); }
.cards:not(.cards-4) > li:nth-child(3n+2) .card-body h3 { color: #3b2a16; }
.cards:not(.cards-4) > li:nth-child(3n+2) .card-body p { color: #4d3820; }
.cards:not(.cards-4) > li:nth-child(3n) .card { background: var(--grain) 0 0 / 600px 300px, #e6c597; }
.cards:not(.cards-4) > li:nth-child(3n) .card-body h3 { color: #3b2412; }
.cards:not(.cards-4) > li:nth-child(3n) .card-body p { color: #5a3a1e; }

/* 出典: コルクの板に留めた白いカード */
.sources { background: var(--noise), radial-gradient(circle at 30% 30%, #c9965f, #b07c47); padding: 18px; box-shadow: var(--lift-2), inset 0 0 0 1px rgba(0,0,0,.08); }
.sources > * { position: relative; }
.sources h2 { display: inline-block; background: #fffdf6; padding: 6px 16px; border-radius: 4px; rotate: -1.5deg; box-shadow: 0 3px 6px rgba(0,0,0,.2); color: var(--ocean); margin: 0 0 12px; }
.sources ul { background: #fffdf6; border-radius: 4px; padding: 14px 18px 14px 36px; box-shadow: 0 4px 10px rgba(0,0,0,.22); color: #4a5a63; margin: 0;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, #e3ecf1 27px 28px); line-height: 28px; }
.sources ul::before { content: ""; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a9c, #d6283f); box-shadow: 0 2px 3px rgba(0,0,0,.35); }   /* 画びょう */
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { .sources h2, .sources ul { background-color: #f3efe4; } }
/* 数字の札の説明の中の数字(span.num)は、行を割らない(.stats li span の display:block に当たっていた) */
.stats li span.num { display: inline; margin: 0; color: inherit; }
/* 記事のカードの素材は、写真の札(白いふち)の地より強く当てる */
.cards:not(.cards-4) > li:nth-child(3n+2) .card:has(.card-img img) { background: var(--noise), linear-gradient(160deg, #e2c79e, #d2b07f); }
.cards:not(.cards-4) > li:nth-child(3n) .card:has(.card-img img) { background: var(--grain) 0 0 / 600px 300px, #e6c597; }
/* (カードは li そのもの ―― li.card に当てる) */
.cards:not(.cards-4) > li.card:nth-child(3n+2), .cards:not(.cards-4) > li.card:nth-child(3n+2):has(.card-img img) { background: var(--noise), linear-gradient(160deg, #e2c79e, #d2b07f); }
.cards:not(.cards-4) > li.card:nth-child(3n), .cards:not(.cards-4) > li.card:nth-child(3n):has(.card-img img) { background: var(--grain) 0 0 / 600px 300px, #e6c597; }
.cards:not(.cards-4) > li.card:nth-child(3n+2) h3, .cards:not(.cards-4) > li.card:nth-child(3n) h3 { color: #3b2412; }
.cards:not(.cards-4) > li.card:nth-child(3n+2) .card-body p, .cards:not(.cards-4) > li.card:nth-child(3n) .card-body p { color: #5a3a1e; }
/* 行き方の図(island): 切符の地の上で。乗り物の札は乗り物の色(バス = 海・モノレール = 赤・飛行機 = 紺・船 = 青緑) */
.route { padding-right: 60px; }
.rt-sum > div { border: 0; box-shadow: var(--lift-1), var(--edge-hi); }
.rt-sum > div:nth-child(2) .ico { background: var(--sun-soft); color: #b26b00; }
.rt-sum > div:nth-child(3) .ico { background: var(--coral-soft); color: var(--coral); }
.rt-ride { background: color-mix(in srgb, var(--lagoon-soft) 70%, var(--surface)); }
.rt-monorail .rt-line { background: var(--coral); }
.rt-flight .rt-line { background: var(--ocean); }
.rt-ferry .rt-line { background: var(--islands); }
.rt-sign { box-shadow: var(--lift-1); rotate: -3deg; }
.rt-end .rt-sign { rotate: 3deg; }
.rt-sign .ico.ico-img, .rt-line .ico.ico-img, .rt-chip .ico.ico-img, .rt-sum .ico.ico-img { width: 30px; height: 30px; }
@media (max-width: 560px) { .route { padding-right: 52px; } .rt-ride { margin-left: 50px; } }
.prose .route .num { color: inherit; font-size: inherit; font-weight: inherit; }
.prose .rt-sign .ico:not(.ico-img) { background: none; width: auto; height: auto; }
.prose .rt-sign .ico svg { width: 26px; height: 26px; }
.prose .rt-line .ico:not(.ico-img) { background: rgba(255,255,255,.22); color: #fff; }

/* ── 画びょうで留める(相棒さんの依頼 2026-10-15「ボードになっているので、アイコンをピンで刺すなどの演出を」) ──
   アイコンの札(数字の札・見出し・行き方の標識)の上の真ん中に、丸い頭の画びょう。頭の色は赤・黄・青緑を順に。影は左上の光に合わせて右下へ */
.stats li .ico, .prose h2 .ico, .rt-sign, .quick dt .ico { position: relative; overflow: visible; }
.stats li .ico::after, .prose h2 .ico::after, .rt-sign::after {
  content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--pin, #ff6b81) 22%, color-mix(in srgb, var(--pin, #ff6b81) 70%, #000) 100%);
  box-shadow: 2px 3px 3px rgba(0,0,0,.28), 4px 7px 6px -2px rgba(0,0,0,.18); rotate: 0deg; }
.stats li:nth-child(3n+2) .ico, .prose h2:nth-of-type(3n+2) .ico, .rt-stop:nth-child(3n+2) .rt-sign { --pin: #ffc23d; }
.stats li:nth-child(3n) .ico, .prose h2:nth-of-type(3n) .ico, .rt-stop:nth-child(3n) .rt-sign { --pin: #2ec4c9; }
/* 絵のアイコン(写真のような絵)は、絵の上の端を留める */
.stats li .ico.ico-img::after, .prose h2 .ico.ico-img::after { top: -2px; }
/* 要点の手帳の札は、画びょうでなくクリップ */
.quick dt .ico::after { content: ""; position: absolute; right: -5px; top: -6px; width: 7px; height: 16px; border: 2px solid #9aa9b3;
  border-radius: 4px 4px 6px 6px; border-bottom-color: transparent; rotate: 18deg; }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { .quick dt .ico::after { border-color: #6f8794; border-bottom-color: transparent; } }

/* 箇条書き: 1 行ずつ区切って並べる(場所・停留所の一覧が横に続かず、上から順に目で追える ―― 相棒さん 2026-10-15) */
:is(.prose, .prose .band) > ul:not([class]) { list-style: none; padding: 0; margin: 1em 0 1.4em; border-radius: 14px; background: var(--surface); box-shadow: var(--lift-1), var(--edge-hi); overflow: hidden; }
:is(.prose, .prose .band) > ul:not([class]) > li { position: relative; padding: 10px 16px 10px 42px; margin: 0; }
:is(.prose, .prose .band) > ul:not([class]) > li + li { border-top: 1px dashed var(--line); }
:is(.prose, .prose .band) > ul:not([class]) > li::before { content: ""; position: absolute; left: 16px; top: 1.05em; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--coral) 30%, color-mix(in srgb, var(--coral) 70%, #000)); box-shadow: 1px 2px 2px rgba(0,0,0,.2); }
:is(.prose, .prose .band) > ul:not([class]) > li:nth-child(3n+2)::before { background: radial-gradient(circle at 35% 30%, #fff 0 10%, #ffc23d 30%, #c98a00); }
:is(.prose, .prose .band) > ul:not([class]) > li:nth-child(3n)::before { background: radial-gradient(circle at 35% 30%, #fff 0 10%, #2ec4c9 30%, #138a8e); }

/* ── アイコンを「ボードに貼った写真」に(相棒さんの依頼 2026-10-15「写真みたいなイラストにして、写真をボードに貼っている感じに」) ──
   白いふちの小さなプリント(下のふちを広く)の中に、明るい空色の地と絵。画びょうで上を留め、1 枚ずつ傾きを変える */
.stats li .ico.ico-img, .prose h2 .ico.ico-img {
  width: 84px; height: 92px; padding: 6px 6px 14px; border-radius: 3px; display: block;
  background: #fffefa !important; box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 8px 14px -4px rgba(0,0,0,.28) !important; rotate: -4deg; }
.stats li .ico.ico-img img, .prose h2 .ico.ico-img img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 1px; padding: 4px; filter: drop-shadow(0 4px 4px rgba(6,58,91,.25));
  background: radial-gradient(120% 90% at 30% 20%, #ffffff, #d9f1f6 60%, #bfe3ee); }
.stats li:nth-child(even) .ico.ico-img, .prose h2:nth-of-type(even) .ico.ico-img { rotate: 3.5deg; }
.stats li:nth-child(3n) .ico.ico-img img, .prose h2:nth-of-type(3n) .ico.ico-img img { background: radial-gradient(120% 90% at 30% 20%, #fff, #ffeedd 60%, #ffd9c4); }
.stats li:nth-child(3n+2) .ico.ico-img img, .prose h2:nth-of-type(3n+2) .ico.ico-img img { background: radial-gradient(120% 90% at 30% 20%, #fff, #fff4cf 60%, #ffe7a3); }
.stats li .ico.ico-img::after, .prose h2 .ico.ico-img::after { top: -6px; }
.stats li .ico.ico-img { margin: -2px 0 12px; }
.prose h2 .ico.ico-img { width: 64px; height: 70px; padding: 5px 5px 11px; font-size: 16px; }
/* 要点の手帳・行き方の札の中の絵は、地を付けずに絵だけ(小さいので) */
.quick dt .ico.ico-img img, .rt-sign .ico.ico-img img, .rt-chip .ico.ico-img img, .rt-sum .ico.ico-img img, .rt-line .ico.ico-img img { filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.rt-sign:has(.ico-img) { background: #fffefa; }
.prose .rt-sign .ico.ico-img { width: 36px; height: 36px; }
/* プリントの下のふちに、何の絵かを手書きのように(相棒さんの指摘 2026-10-15「何のアイコンか分かりにくい」) */
.stats li .ico.ico-img, .prose h2 .ico.ico-img { padding-bottom: 22px; height: 104px; }
.prose h2 .ico.ico-img { height: 84px; padding-bottom: 20px; }
.stats li .ico.ico-img::before, .prose h2 .ico.ico-img::before { content: attr(data-label); position: absolute; left: 0; right: 0; bottom: 3px;
  text-align: center; font: italic 600 12px/1 var(--body); color: #42525c; letter-spacing: .02em; }
.prose h2 .ico.ico-img::before { font-size: 11px; }

/* アイコンが背景つきの写真になったので(相棒さんの指定 2026-10-15「もっと実写で、バックも」): プリントの中は写真をいっぱいに、
   小さな所(手帳・行き方の札)は丸く切った写真に */
.stats li .ico.ico-img img, .prose h2 .ico.ico-img img { object-fit: cover; padding: 0; background: #ddd !important; filter: none; }
.quick dt .ico.ico-img img, .rt-sign .ico.ico-img img, .rt-chip .ico.ico-img img, .rt-sum .ico.ico-img img, .rt-line .ico.ico-img img,
.prose p .ico.ico-img img, .prose li .ico.ico-img img { object-fit: cover; border-radius: 50%; filter: none; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.2); }

/* ── 全体の色を少し落ち着かせる(相棒さんの依頼 2026-10-15「ページ全体の色を落ち着かすために、もうちょっと暗めに」) ──
   地は白い砂からやや濃い砂色に、紙は生成りに。赤・青緑・黄は彩度を少し下げ、明るさを少し落とす。字の濃さ(読みやすさ)はそのまま */
:root {
  --bg: #efe9dd; --surface: #faf6ee; --paper: #f6f0e3; --line: #e0d6c3; --ink: #14242d; --muted: #4f626c;
  --ocean: #0b3550; --lagoon: #0a7891; --lagoon-soft: #d7ebec; --coral: #d64a5e; --coral-soft: #f6dfe1;
  --sun: #eaa22a; --sun-soft: #f7e8c3; --warn-soft: #f6ead0; --note: #f6e9a8;
  --south: #d64a5e; --central: #e5803f; --north: #2f8c62; --islands: #0d93a9;
}
body { background:
  radial-gradient(1200px 700px at 8% -5%, color-mix(in srgb, var(--sun) 8%, transparent), transparent 70%),
  radial-gradient(1000px 800px at 105% 40%, color-mix(in srgb, var(--lagoon) 7%, transparent), transparent 70%),
  var(--bg); background-attachment: fixed; }
.top { background: color-mix(in srgb, var(--surface) 90%, transparent); }
/* 写真も少しだけ落ち着かせる(色を変えたと分かるほどにはしない) */
.home-hero-media img, .article .art-hero img, .card-img img { filter: saturate(.9) brightness(.96); }
/* 直行便の帯の「便の名前」(p.route)は、行き方の切符(figure.route)とは別物。切符の見た目を当てない */
.flight p.route { background: none; box-shadow: none; padding: 0; margin: 6px 0; border-radius: 0; overflow: visible; }
.flight p.route::before, .flight p.route::after { content: none; }
/* 横に送る列の左の端で、傾けた 1 枚目が切れないように余白を広げる */
.cards:not(.cards-4) { padding-left: 22px; scroll-padding-inline: 22px; margin-inline: -22px; }

/* もう一段落ち着かせる(相棒さんの依頼 2026-10-15「もうちょっと暗めに」)。地と紙をもう一段濃く、アクセントももう一段控えめに */
:root {
  --bg: #e4ddcf; --surface: #f3eee3; --paper: #efe8d8; --line: #d3c8b2; --ink: #122029; --muted: #4a5b64;
  --ocean: #0a304a; --lagoon: #0a6f86; --lagoon-soft: #cfe2e2; --coral: #c9475a; --coral-soft: #efd8d9;
  --sun: #dc9a2c; --sun-soft: #efdfb9; --warn-soft: #efe2c6; --note: #eedf9f;
}
.home-hero-media img, .article .art-hero img, .card-img img { filter: saturate(.86) brightness(.93); }
.home-hero::after { background: linear-gradient(180deg, rgba(4,30,46,.32) 0%, transparent 30%, transparent 42%, rgba(4,30,46,.78) 100%),
                                linear-gradient(90deg, rgba(4,30,46,.5) 0%, transparent 65%); }

/* ── 鉛筆の落書き(相棒さんの依頼 2026-10-15「沖縄の地図を鉛筆で描いたようなラフなイラストをバックに。落書きのようなアクセントを」) ──
   site/img/sketch-okinawa.svg は自分たちで描いた略図(おおよその緯度・経度から。正確な地図ではない背景の飾り)。
   ページの右にうっすら固定して、字の後ろに来ても読みやすい薄さにする。区切りの見出しの下線は鉛筆のなぐり書きに */
body::before { content: ""; position: fixed; z-index: -1; pointer-events: none; right: -60px; top: 70px; width: min(560px, 60vw); height: calc(min(560px, 60vw) * 1.1);
  background: url("/img/sketch-okinawa.svg") center / contain no-repeat; opacity: .55; rotate: 4deg; }
@media (max-width: 760px) { body::before { opacity: .3; right: -40px; width: 80vw; height: 88vw; } }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { body::before { filter: invert(1); opacity: .25; } }
body { isolation: isolate; }
/* 区切りの見出し: 鉛筆でぐるぐる下線と、小さな矢印の落書き */
h2.sec::before { -webkit-mask: none; mask: none; background: none; width: 120px; height: 16px; top: auto; bottom: -14px;
  border-bottom: 3px solid color-mix(in srgb, var(--coral) 75%, #333); border-radius: 0 0 60% 40% / 0 0 100% 100%; rotate: -2deg; opacity: .8; }
h2.sec { padding-top: 0; padding-bottom: 6px; }
h2.sec::after { font-family: "Segoe Print", "Bradley Hand", cursive; }
/* 本文の見出しの横にも鉛筆の丸囲み(絵のアイコンが無い見出しだけ) */
.prose h2:not(:has(.ico))::after { content: ""; display: inline-block; width: 26px; height: 14px; margin-left: 10px; vertical-align: middle;
  border: 2px solid color-mix(in srgb, var(--sun) 80%, #333); border-radius: 50% 40% 55% 45%; rotate: -12deg; opacity: .6; }

/* ── カードをもっと立体的に(相棒さんの依頼 2026-10-15) ──
   厚み(下と右の縁を濃く)・上の縁の光・長くやわらかい影・触ると持ち上がって影が伸びる */
:root {
  --thick: 0 2px 0 color-mix(in srgb, var(--line) 60%, #8a7a60), 0 4px 0 color-mix(in srgb, var(--line) 40%, #6d6048);
  --float: 0 10px 18px -6px rgba(40,30,10,.28), 0 26px 44px -14px rgba(40,30,10,.32);
}
.card, .region, .stats li, .season, .toc, .route, .rt-sum > div, .flight, .quick {
  box-shadow: var(--edge-hi), var(--thick), var(--float); }
.card:hover, .region:hover, .stats li:hover {
  box-shadow: var(--edge-hi), var(--thick), 0 18px 26px -8px rgba(40,30,10,.32), 0 40px 60px -18px rgba(40,30,10,.36); }
.quick { box-shadow: var(--edge-hi), inset 0 0 0 1px var(--line),
  5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--line), 10px 10px 0 -1px var(--paper), 10px 10px 0 0 var(--line), var(--float); }
/* 写真の札の白いふちに厚み */
.card:has(.card-img img), .region:has(.card-img img) { border-bottom: 3px solid color-mix(in srgb, var(--surface) 70%, #9a8a70); }
/* 数字の札の素材にも厚み */
.stats li:nth-child(4n+1) { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #b48a58, 0 5px 0 #8e6a40, var(--float); }
.stats li:nth-child(4n+3) { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 0 #a8844f, 0 5px 0 #86663a, var(--float); }
.stats li:nth-child(4n+4) { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 rgba(20,110,130,.45), var(--float); }
/* 数字の札のプリントは四角い写真のまま(.prose li の小さな丸い写真の決まりを当てない) */
.prose .stats li .ico.ico-img img { border-radius: 1px; box-shadow: none; }
/* 落書きは茶色の鉛筆に(相棒さんの依頼 2026-10-15「色を茶色めに」) */
h2.sec::before { border-bottom-color: #7a5532; }
.prose h2:not(:has(.ico))::after { border-color: #8a6236; }

/* ── 本文の合間の絵(tools/spots.py)。字の横に置き、白いふちの写真の切り抜きのように少し傾けて、マスキングテープで留める ── */
.prose .spot { width: min(300px, 42%); margin: 0 0 12px 22px; float: right; rotate: 3deg; position: relative; shape-outside: margin-box; }
.prose .spot-left { float: left; margin: 0 22px 12px 0; rotate: -3deg; }
.prose .spot img { width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(40,30,10,.3)); }
.prose .spot::after { content: ""; position: absolute; left: 50%; top: -4px; width: 70px; height: 20px; translate: -50% 0; rotate: -4deg;
  background: var(--tape); opacity: .8; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.prose h2 { clear: both; }
@media (max-width: 640px) { .prose .spot, .prose .spot-left { float: none; width: 72%; margin: 4px auto 16px; display: block; } }
/* 本文の合間に貼った写真(tools/spots.py の spot-photo): 白いふちのプリント。下のふちにクレジット(ライセンスの表示は必ず見える濃さで) */
.prose .spot-photo { background: #fffdf8; padding: 10px 10px 8px; border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 12px 20px -8px rgba(40,30,10,.35), 0 26px 40px -18px rgba(40,30,10,.3); }
.prose .spot-photo img { filter: none; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1px; }
.prose .spot-photo figcaption { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.35; color: #5b6a72; }
.prose .spot-photo figcaption a { color: inherit; }

/* ── 大きな節ごとに地の色を変える(相棒さんの依頼 2026-10-15「上から下までバックの色が同じ。大きな節で変えてもいい」) ──
   記事: 見出しごとの節(tools/spots.py の bands)を、紙の幅いっぱいの帯にする。紙 → 海 → 砂 → 珊瑚 の順。境目はやわらかい波
   トップ: 「When to go」「Latest guides」「How we pick places」を画面の幅いっぱいの帯に */
.prose .band { margin: 28px -50px 0; padding: 6px 50px 30px; position: relative; border-radius: 22px; }
.prose .band > h2:first-child { margin-top: 1.2em; }
.prose .band-1 { background: linear-gradient(180deg, #d3e6e5, #dcebe8); }
.prose .band-2 { background: linear-gradient(180deg, #eadfc6, #efe6d2); }
.prose .band-3 { background: linear-gradient(180deg, #f0ddd6, #f3e5df); }
.prose .band-1::before, .prose .band-2::before, .prose .band-3::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px;
  background: inherit; -webkit-mask: var(--wave) repeat-x bottom / 90px 12px; mask: var(--wave) repeat-x bottom / 90px 12px; border-radius: 0; }
/* 帯の色に合わせて、帯の中の箱は少し明るく */
.prose .band-1 :is(.route, .toc, .season, .stats li:nth-child(4n+4)), .prose .band-2 .route, .prose .band-3 .route { background-color: var(--surface); }
/* 見出しの絵のプリントの傾きを、節ごとに変える(前は h2 の順番で変えていた) */
.prose .band-1 h2 .ico, .prose .band-3 h2 .ico { rotate: 5deg; }
@media (max-width: 860px) { .prose .band { margin-inline: -18px; padding-inline: 18px; border-radius: 16px; } }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ {
  .prose .band-1 { background: #123a44; } .prose .band-2 { background: #2d281c; } .prose .band-3 { background: #34232a; }
}
/* トップ: 帯を画面の幅いっぱいに(中身の幅はそのまま) */
#when, main > section.wrap:has(.cards:not(.cards-4)), .method { position: relative; padding-top: 8px; padding-bottom: 36px; }
#when { box-shadow: 0 0 0 100vmax #d6e7e5; clip-path: inset(-10px -100vmax); background: #d6e7e5; }
main > section.wrap:has(.cards:not(.cards-4)) { box-shadow: 0 0 0 100vmax #e9dec4; clip-path: inset(-10px -100vmax); background: #e9dec4; }
.method { box-shadow: 0 0 0 100vmax #efdcd5; clip-path: inset(-10px -100vmax); background: #efdcd5; margin-bottom: 0; }
#when > h2.sec, main > section.wrap:has(.cards:not(.cards-4)) > h2.sec, .method > h2.sec { margin-top: 48px; }

/* 厚みのあるカードは、上の面を白に(相棒さんの依頼 2026-10-15「立体に表現しているので色を変えて。上を白で」)。
   地(砂・紙の色)と同じ色だと、厚みと影があっても板に見えないため */
:root { --face: #fffdf8; }
@media not all /* 暗い表示は今は使わない(末尾の説明) */ { :root { --face: #1a2f3b; } }
.season, .toc, .route, .rt-sum > div, .flight, .glossary, .how-checked, .card, .region,
.prose .band-1 :is(.route, .toc, .season), .prose .band-2 .route, .prose .band-3 .route { background-color: var(--face); }
.season { background: var(--face); }
.season .season-scroll tbody th { background: var(--face); }   /* 横に動かしたときの行の名前の地も白に */
.card:has(.card-img img), .region:has(.card-img img) { background: var(--face); }
.toc { background-image: linear-gradient(180deg, transparent 38px, var(--margin-line) 38px 40px, transparent 40px),
                         repeating-linear-gradient(180deg, transparent 0 47px, #e6eef2 47px 48px); }
/* 説明図の箱も、地と同じ色ではなく白に(相棒さんの依頼 2026-10-15「バックと同じ色ではなく白で」)。薄い影で板に見せる */
.dg-bg { fill: var(--face); stroke: color-mix(in srgb, var(--line) 80%, #9a8a70); }
.diagram svg :is(.dg-bg, .dg-free, .dg-paid) { filter: drop-shadow(0 3px 3px rgba(40,30,10,.18)); }
/* 合間の写真の横には段落だけを流し、箇条書き・表・図・札は写真の下から始める(横で狭くなって釣り合いが崩れないように) */
.prose :is(ul, ol, table, .route, .stats, .season, .diagram, .timeline, .glossary, .good-to-know, .quick) { clear: both; }
/* 左右のボタン: 白い丸に厚み(島の見た目) */
.rail-btn { background: var(--face); box-shadow: 0 3px 0 color-mix(in srgb, var(--line) 50%, #8a7a60), 0 10px 22px rgba(40,30,10,.28); }
.rail-btn:active { translate: 0 2px; box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 50%, #8a7a60), 0 4px 10px rgba(40,30,10,.25); }
/* スクロールバーは出さない(上で付けた赤い細いバーを打ち消す ―― 相棒さんの依頼 2026-10-15) */
.cards:not(.cards-4) { scrollbar-width: none; }
.cards:not(.cards-4)::-webkit-scrollbar { display: none; height: 0; }
/* PC(マウス)ではボタンで送るので「Swipe →」の札は出さない(指で触る端末だけ) */
@media (hover: hover) and (pointer: fine) {
  section:has(.cards:not(.cards-4)) > h2.sec::after, .related:has(.cards) > h2::after { content: none; }
}

/* 暗い表示(端末のダークモード)は今は使わない(2026-10-17、公開の前に見つけた)。この見た目は「昼の島の雑誌」で、白いカード・紙・
   木目などの色を直に書いた所が多く、ダークモードで地だけ暗くなると、本文と行き方の表の字が暗い地に暗い字で読めなくなっていた。
   上の暗い表示の段は「@media not all」で止めてあり(ダークモードの見た目を作るときに戻す)、ここで style.css の暗い表示も打ち消す。 */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  .season .temp td::before { opacity: calc(.14 + var(--v, 0) * .34); }
  .season .rain td::before { opacity: .3; }
  .season .typh td::before { opacity: calc(var(--v, 0) * .32); }
}

/* ── 背景を実写寄りの絵に(相棒さんの依頼 2026-10-17「パステル風が強くてしっくりこない。実写寄りのバック(今は単色)に。明るくかっこよく」
   「写真じゃなくてよい。実写寄りのイラスト、デザインでいい」「写真のところではなく、バックの話」) ──
   site/img/bg/ は ChatGPT(Codex)で描いた背景の絵(人・文字・建物なし。docs/art/style.md・写真の出典のページに AI の絵と書く)。
   単色・パステルの地と帯を、白い砂・ラグーン・空と海・浅い珊瑚の海・水平線に替える。字の後ろには白い薄い幕を重ねて読みやすさを保つ。
   鉛筆の地図の落書きは、絵の背景と重なってうるさいので外す。写真の暗くする加工もやめて明るく(ChatGPT のレビュー 14) */
:root { --veil: rgba(255, 253, 248, .58); --veil-strong: rgba(255, 253, 248, .74); }
/* ページ全体の地は明るい昼の砂浜(相棒さんの依頼 2026-10-17「砂浜を明るい昼に戻しましょう。同じ構図で時間だけを昼に」。
   いったん夕焼けにした絵と同じ構図で描き直したもの)。真ん中は紙で隠れ、左右に見える */
body { background: linear-gradient(rgba(255, 253, 248, .12), rgba(255, 253, 248, .12)), url("/img/bg/bg-sand-day-wide.webp") center / cover fixed, #ece6da; }
body::before { content: none; }
.home-hero-media img, .article .art-hero img, .card-img img { filter: none; }
/* トップも記事と同じ形に(相棒さんの依頼 2026-10-17「トップも記事と同じ形に」): 頭の写真の下を、真ん中の 1 枚の紙(.home-paper)にまとめる。
   前の「画面の幅いっぱいの帯」(#when・Latest guides・.method の box-shadow 100vmax)は打ち消し、帯は記事の節と同じ「紙の中の角の丸い絵の帯」にする */
.home-paper { position: relative; z-index: 2; max-width: 920px; margin: -40px auto 72px; padding: 36px 50px 44px;
  background: var(--surface); border-radius: 28px; box-shadow: 0 -18px 40px -24px rgba(4,30,46,.35), var(--edge-hi), var(--float); }
.home-paper > section.wrap:not(.flight) { max-width: none; margin-inline: 0; padding-inline: 0; }
.home-paper > .flight { max-width: none; margin-inline: 0; }
#when, .method, .home-paper > section:has(.cards:not(.cards-4)) { box-shadow: none; clip-path: none; background: none; margin-bottom: 0; }
#when, .home-paper > section:has(.cards:not(.cards-4)), .method { margin: 32px -30px 0; padding: 6px 30px 32px; border-radius: 22px; position: relative; }
#when { background: linear-gradient(var(--veil-strong), var(--veil-strong)), url("/img/bg/bg-lagoon.webp") center / cover; }
.home-paper > section:has(.cards:not(.cards-4)) { background: linear-gradient(var(--veil), var(--veil)), url("/img/bg/bg-reef.webp") center / cover; }
.method { background: linear-gradient(var(--veil-strong), var(--veil-strong)), url("/img/bg/bg-sky-sea.webp") center 35% / cover; }
#when > h2.sec, .home-paper > section:has(.cards:not(.cards-4)) > h2.sec, .method > h2.sec { margin-top: 28px; }
.home-paper .flight { margin-top: 0; }
.home-paper .sea + .flight { margin-top: 36px; }
@media (max-width: 960px) { .home-paper { margin-inline: 10px; padding: 28px 18px 32px; border-radius: 22px; }
  #when, .home-paper > section:has(.cards:not(.cards-4)), .method { margin-inline: -8px; padding-inline: 12px; border-radius: 16px; } }
main { isolation: isolate; }
/* 記事の節の帯: 海・砂・空の絵に白い幕 */
.prose .band-1 { background: linear-gradient(var(--veil-strong), var(--veil-strong)), url("/img/bg/bg-lagoon.webp") center / cover; }
.prose .band-2 { background: linear-gradient(var(--veil-strong), var(--veil-strong)), url("/img/bg/bg-sand.webp") center / cover; }
.prose .band-3 { background: linear-gradient(var(--veil-strong), var(--veil-strong)), url("/img/bg/bg-sky-sea.webp") center / cover; }
.prose .band-1::before, .prose .band-2::before, .prose .band-3::before { content: none; }

/* ── ChatGPT のデザインのレビュー(2026-10-17)で見つかった不具合の直し(相棒さんの依頼「不具合もまとめて直して」) ── */
/* 6: 本文のリンクの色を、色のついた地の上でも字の濃さの基準(WCAG AA 4.5:1)に届く濃さに */
:root { --lagoon: #08667b; }
/* 2: 連絡フォームの同意の文(build で文とリンクを 1 つの span にまとめた)。チェックの箱と文の 2 列に */
.contact-form .consent label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.contact-form .consent label a { overflow-wrap: normal; }
/* 5: 横に動かせる表は、端に影を出して「まだ続く」と分かるように(動かせないときは影が出ない)。季節の表はスマホで一言そえる */
.prose table, .season-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10,48,74,.22), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10,48,74,.22), transparent) right center / 14px 100% no-repeat scroll,
    var(--surface); }
.season-scroll { background-color: var(--face); }
@media (max-width: 760px) {
  .season::after { content: "Swipe the table to see all 12 months →"; display: block; margin: 10px 2px 0; font-size: 14px; color: var(--muted); }
}
/* 7: スマホの上のメニューを指で押しやすく(高さ 44px) */
@media (max-width: 760px) {
  /* 1 行に収める(2 行に折れると、上に固定の頭が高くなって本文が隠れる)。入りきらない幅では横に送れる */
  .top nav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 14.5px; white-space: nowrap; flex: none; }
}
/* 11: スマホでは見出しの絵を小さく、見出しの字が細い列で折れないように */
@media (max-width: 560px) {
  .prose h2:has(.ico) { align-items: flex-start; gap: 10px; }
  .prose h2 .ico.ico-img { width: 1.5em; height: 1.5em; margin-top: 2px; }
}
/* 15: 足元のリンクを、スマホでは押しやすい札の並びに */
@media (max-width: 760px) {
  footer p:has(> a[href="/about/"]) { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 0; }
  footer p:has(> a[href="/about/"]) a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
}

/* ── トップの「Where to go」: 大きな沖縄の地図の上に、4 枚の札をピンで貼ってゆらす(tools/build.py の region_map。相棒さんの依頼 2026-10-17
   「地図を大きくし、その中にカードをペタッとはってスイング」「位置関係は正しいほうがいい」) ──
   PC: 地図(ラグーンの地の板)を紙の幅いっぱいに敷き、札はそれぞれの地域の近くの海の上に置く。札はピンを軸にゆっくり揺れ、触ると止まって
   地図のその地域が光り、印が脈打つ。スマホ・狭い幅: 札が小さくなりすぎるので、地図の下に札を 2 列で並べる */
.region-board { position: relative; margin-top: 18px; }
.region-map { position: relative; border-radius: 22px; overflow: hidden;
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), url("/img/bg/bg-lagoon.webp") center / cover;
  box-shadow: var(--edge-hi), var(--thick), var(--float); }
/* 板の縦横比は地図の viewBox(1313 × 1210)と同じにして、札の位置 % と矢印の先をそろえる */
.region-map svg { display: block; width: 100%; height: auto; aspect-ratio: 1313 / 1210; }
.region-map .rm-cap { position: absolute; left: 28%; right: 28%; bottom: 10px; margin: 0; text-align: center; }   /* 左右の札(1〜26%・74%〜)に重ならない真ん中に */
/* 印から札への矢印: 地域の色の実線(白いふちどりで、海の絵の上でもはっきり見える)。札に触るとその矢印が太くなる */
.region-map .rm-link-halo { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; opacity: .9; }
.region-map .rm-link { fill: none; stroke: var(--ocean); stroke-width: 5; stroke-linecap: round; transition: stroke-width .25s ease; }
.region-map .rm-link-south { stroke: var(--south); } .region-map .rm-link-central { stroke: var(--central); }
.region-map .rm-link-north { stroke: var(--north); } .region-map .rm-link-islands { stroke: var(--islands); }
@media (min-width: 861px) {
  .region-board .cards-4 { position: absolute; inset: 0; display: block; padding: 0; margin: 0; pointer-events: none; }
  /* 札の枠はピンがはみ出せるように(前は overflow: hidden でピンの頭が切れていた) */
  .region-board .cards-4 > li { position: absolute; width: 25%; margin: 0; pointer-events: auto; animation: none; overflow: visible; }
  /* 島の左右の 2 列に置き、札どうしは重ねない(左: 北部・離島、右: 中部・南部) */
  .region-board .cards-4 > li:nth-child(1) { left: 74%; top: 64%; }   /* 那覇・南部: 右下 */
  .region-board .cards-4 > li:nth-child(2) { left: 74%; top: 30%; }   /* 北谷・中部: 右上 */
  .region-board .cards-4 > li:nth-child(3) { left: 1%; top: 3%; }     /* 本部・北部: 左上 */
  .region-board .cards-4 > li:nth-child(4) { left: 1%; top: 66%; }    /* 離島: 左下(慶良間の下) */
  /* 札は「写真が上・字が下」に(小さい札で字を写真に重ねると写真が隠れるため) */
  .region-board .region { background: var(--face); }
  .region-board .region .card-img { aspect-ratio: 16 / 10; }
  .region-board .region .card-body { position: static; padding: 8px 12px 10px; background: var(--face); }
  .region-board .region .card-body h3 { color: var(--ocean); font-size: 1.02rem; margin: 0 0 2px; }
  .region-board .region .card-body h3::before { width: 28px; height: 5px; margin-bottom: 6px; }
  .region-board .region .card-body p { color: var(--muted); font-size: 12.5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .region-board:has(.region:nth-child(1):is(:hover, :focus-within)) .rm-link-south,
  .region-board:has(.region:nth-child(2):is(:hover, :focus-within)) .rm-link-central,
  .region-board:has(.region:nth-child(3):is(:hover, :focus-within)) .rm-link-north,
  .region-board:has(.region:nth-child(4):is(:hover, :focus-within)) .rm-link-islands { stroke-width: 9; }
  /* 揺れ: ピン(上の真ん中)を軸に、札ごとに少しずつずらして */
  .region-board .cards-4 > li { transform-origin: 50% -6px; }
  .region-board .cards-4 > li::before { content: ""; position: absolute; z-index: 3; left: 50%; top: -9px; width: 16px; height: 16px; translate: -50% 0;
    border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a99, var(--coral) 55%, #8e2333); box-shadow: 0 3px 4px rgba(0,0,0,.35); }
  .region-board .cards-4 > li .region { transform: none; }
}
@keyframes rb-swing { from { rotate: -2.6deg; } to { rotate: 2.6deg; } }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .region-board .cards-4 > li { animation: rb-swing 3.2s ease-in-out infinite alternate; }
  .region-board .cards-4 > li:nth-child(2) { animation-duration: 3.7s; animation-delay: -1.1s; }
  .region-board .cards-4 > li:nth-child(3) { animation-duration: 3.4s; animation-delay: -2s; }
  .region-board .cards-4 > li:nth-child(4) { animation-duration: 4s; animation-delay: -.6s; }
  .region-board .cards-4 > li:is(:hover, :focus-within) { animation-play-state: paused; z-index: 4; }
}
@media (max-width: 860px) {
  .region-board .cards-4 { margin-top: 18px; }
  .region-map :is(.rm-link, .rm-link-halo) { display: none; }   /* 札は地図の下に並ぶので、結ぶ矢印は出さない */
  .region-map .rm-cap { position: static; padding: 0 14px 10px; }
}
/* 指で触る端末では「札に触ると」ができないので、言い方を変える */
.region-map .rm-touch { display: none; }
@media (hover: none) { .region-map .rm-hover { display: none; } .region-map .rm-touch { display: inline; } }
.region-map .rm-ie { fill: #efe3c8; stroke: #6b4a2e; stroke-width: 1.6; stroke-linejoin: round; }   /* まわりの小さな島は地域の色を付けない(伊是名は北部、津堅・伊計は中部) */
.region-map .rm-coast { fill: none; stroke: #6b4a2e; stroke-width: 3; stroke-linejoin: round; opacity: .75; }
.region-map .rm-sea { fill: none; stroke: #0a6f86; stroke-width: 3; stroke-linecap: round; opacity: .35; }
.region-map .rm-zone rect, .region-map .rm-islet { fill: var(--rc); fill-opacity: .28; transition: fill-opacity .25s ease; }
.region-map .rm-islet { stroke: #6b4a2e; stroke-width: 2; }
.region-map .rm-south { --rc: var(--south); } .region-map .rm-central { --rc: var(--central); }
.region-map .rm-north { --rc: var(--north); } .region-map .rm-islands { --rc: var(--islands); }
.region-map .rm-dot { fill: var(--rc); stroke: #fff; stroke-width: 3; }
.region-map .rm-pulse { fill: var(--rc); opacity: 0; transform-box: fill-box; transform-origin: center; }
.region-map text { font: 600 30px var(--display); fill: var(--ocean); paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 6px;
  transition: fill .25s ease; }
.region-map .rm-note, .region-map .rm-n { font-size: 22px; font-weight: 500; fill: var(--muted); }
.region-map .rm-cap { margin: 4px 2px 0; font-size: 13px; color: var(--muted); }
.region-map a { cursor: pointer; }
/* 光らせる: 地図の地域に触ったとき、または対応する札に触ったとき(札の並び = south・central・north・islands) */
.region-map .rm-zone:hover rect, .region-map .rm-zone:focus-visible rect, .region-map .rm-zone:hover .rm-islet,
.region-board:has(.region:nth-child(1):is(:hover, :focus-within)) .rm-south rect,
.region-board:has(.region:nth-child(2):is(:hover, :focus-within)) .rm-central rect,
.region-board:has(.region:nth-child(3):is(:hover, :focus-within)) .rm-north rect,
.region-board:has(.region:nth-child(4):is(:hover, :focus-within)) .rm-islands .rm-islet { fill-opacity: .7; }
.region-map .rm-zone:is(:hover, :focus-visible) text,
.region-board:has(.region:nth-child(1):is(:hover, :focus-within)) .rm-south text,
.region-board:has(.region:nth-child(2):is(:hover, :focus-within)) .rm-central text,
.region-board:has(.region:nth-child(3):is(:hover, :focus-within)) .rm-north text,
.region-board:has(.region:nth-child(4):is(:hover, :focus-within)) .rm-islands text { fill: var(--coral); }
@keyframes rm-pulse { from { opacity: .55; scale: 1; } to { opacity: 0; scale: 3.2; } }
@media (prefers-reduced-motion: no-preference) {
  .region-map .rm-zone:is(:hover, :focus-visible) .rm-pulse,
  .region-board:has(.region:nth-child(1):is(:hover, :focus-within)) .rm-south .rm-pulse,
  .region-board:has(.region:nth-child(2):is(:hover, :focus-within)) .rm-central .rm-pulse,
  .region-board:has(.region:nth-child(3):is(:hover, :focus-within)) .rm-north .rm-pulse,
  .region-board:has(.region:nth-child(4):is(:hover, :focus-within)) .rm-islands .rm-pulse { animation: rm-pulse 1.1s ease-out infinite; }
}

/* ── トップの最初の「沖縄の海」(tools/build.py の home_page の sea。相棒さんの依頼 2026-10-18「最初に沖縄の印象付ける内容を。沖縄といえば海です!!」) ──
   紙のいちばん上に、大きな海の写真と大きな見出し、3 つの要点(絵の札つき)、関連の記事へのボタン、出典 */
.home-paper > .sea { margin: 0; padding: 0; max-width: none; }
.sea .sea-media { position: relative; margin: 0 -22px; }
.sea .sea-media figure { margin: 0; }
.sea .sea-media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 22px; display: block;
  box-shadow: var(--edge-hi), var(--thick), var(--float); }
.sea .sea-media figcaption { position: absolute; right: 14px; bottom: 10px; margin: 0; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; color: #fff; background: rgba(4,30,46,.55); }
.sea .sea-media figcaption a { color: inherit; }
.sea .sea-text { margin-top: 22px; }
.sea .eyebrow { display: inline-block; }
.sea h2.sec { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 6px 0 10px; color: var(--ocean); }
.sea .dek { font-size: 1.15rem; line-height: 1.6; max-width: 46em; }
.sea-points { list-style: none; padding: 0; margin: 22px 0 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sea-points li { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 16px 18px 18px; border-radius: 16px; background: var(--face);
  box-shadow: var(--edge-hi), var(--thick), var(--float); }
.sea-points li .ico { flex: none; width: 56px; height: 56px; }
.sea-points li .ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.sea-points h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--ocean); }
.sea-points p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.sea-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.sea-src { color: var(--muted); font-size: 13px; }
.sea-src a { color: inherit; }
@media (max-width: 860px) { .sea-points { grid-template-columns: minmax(0, 1fr); } .sea .sea-media { margin: 0 -8px; } }

/* ── 頭の写真の下の波(相棒さんの依頼 2026-10-18「この波線が気になります。きれいに」) ──
   前は地の色(クリーム)の波を写真の上に重ねていたが、地が砂浜の絵になってから色が合わず、波の下に写真の暗い帯も残っていた。
   重ねるのをやめ、写真そのものの下のふちを波の形に切り抜く(下に見えるのはページの背景そのもの) */
:root { --wave-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C20 0 60 0 80 8 S140 16 160 8 V0 H0Z'/%3E%3C/svg%3E"); }
.article:has(.art-hero) > .wrap-wide::before, .home-hero-media::after { content: none; }
.article:has(.art-hero) > .wrap-wide, .home-hero-media {
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 17px) no-repeat, var(--wave-cut) left bottom / 320px 18px repeat-x;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - 17px) no-repeat, var(--wave-cut) left bottom / 320px 18px repeat-x; }
@media (max-width: 860px) {
  .article:has(.art-hero) > .wrap-wide, .home-hero-media {
    -webkit-mask-size: 100% calc(100% - 11px), 200px 12px; mask-size: 100% calc(100% - 11px), 200px 12px; }
}

/* ── トップ: 「Read these first」と全部の記事の一覧(相棒さんの依頼 2026-10-18「トップは記事全部の一覧を」「知っておいた方がイイ記事は別で」) ── */
.essentials .ess-list { list-style: none; counter-reset: ess; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.essentials .ess-list li { counter-increment: ess; }
.essentials .ess-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: start; height: 100%; box-sizing: border-box;
  padding: 14px 16px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .2s ease; }
.essentials .ess-list a::before { content: counter(ess); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lagoon); color: #fff; font-weight: 700; font-size: 18px; }
.essentials .ess-list a:hover, .essentials .ess-list a:focus-visible { transform: translateY(-2px); }
.essentials .ess-list strong { font-size: 16.5px; line-height: 1.3; }
.essentials .ess-list span { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 4px; }
.guide-index { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 28px;
  padding: 20px 22px; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); }
.guide-index h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: var(--lagoon); }
.guide-index ul { margin: 0; padding: 0; list-style: none; }
.guide-index li { padding: 5px 0; border-bottom: 1px dashed rgba(0,0,0,.12); line-height: 1.35; }
.guide-index li:last-child { border-bottom: 0; }
.guide-index a { color: inherit; text-decoration: none; }
.guide-index a:hover, .guide-index a:focus-visible { color: var(--lagoon); text-decoration: underline; }
@media (max-width: 860px) { .essentials .ess-list { grid-template-columns: minmax(0, 1fr); } .guide-index li { padding: 9px 0; } }
/* 一覧の 1 本ずつの下に、太い鉛筆でさーっと引いた線(相棒さんの依頼 2026-10-18「太い鉛筆でさーーって線を引いて 1 つの記事をわかるように」)。
   点線の区切りの代わり。線は描き始めが濃く、終わりがかすれて細くなる。鉛筆の粒はノイズでにじませる。2 本の形を交互に使って同じ線に見せない */
:root {
  --pencil-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3ClinearGradient id='f'%3E%3Cstop offset='0' stop-color='%233d3d42' stop-opacity='.85'/%3E%3Cstop offset='.75' stop-color='%233d3d42' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%233d3d42' stop-opacity='.15'/%3E%3C/linearGradient%3E%3Cpath filter='url(%23g)' fill='url(%23f)' d='M3 7.5 C40 5.2 90 6.8 150 6 S250 5.4 297 6.6 L296 7.6 C250 8.4 200 9.2 150 9 S60 9.6 4 10.6 Z'/%3E%3C/svg%3E");
  --pencil-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.2'/%3E%3C/filter%3E%3ClinearGradient id='f'%3E%3Cstop offset='0' stop-color='%233d3d42' stop-opacity='.8'/%3E%3Cstop offset='.7' stop-color='%233d3d42' stop-opacity='.62'/%3E%3Cstop offset='1' stop-color='%233d3d42' stop-opacity='.12'/%3E%3C/linearGradient%3E%3Cpath filter='url(%23g)' fill='url(%23f)' d='M2 6.2 C60 7.6 110 5.6 160 6.4 S255 7.8 298 7 L297 8 C250 9.6 210 8.6 160 9.4 S70 8.4 3 10 Z'/%3E%3C/svg%3E");
}
.guide-index li { position: relative; border-bottom: 0; padding-bottom: 15px; }
.guide-index li::after { content: ""; position: absolute; left: -4px; right: 4%; bottom: 0; height: 12px; pointer-events: none;
  background: var(--pencil-a) center / 100% 100% no-repeat; rotate: -.6deg; }
.guide-index li:nth-child(even)::after { background-image: var(--pencil-b); right: 10%; rotate: .5deg; }
.guide-index li:last-child { border-bottom: 0; }
/* 「Read these first」の札を 1 枚ずつ少しだけ違う濃さに(相棒さんの依頼 2026-10-18「元の色で同じ系統の色を若干暗くしたぐらい」)。
   色は変えず、元の紙の色に砂色を少しずつ混ぜて暗さだけを変える。番号の丸は元のまま */
.essentials .ess-list li:nth-child(6n+2) a { background: color-mix(in srgb, var(--surface), #8a7656 5%); }
.essentials .ess-list li:nth-child(6n+3) a { background: color-mix(in srgb, var(--surface), #8a7656 8%); }
.essentials .ess-list li:nth-child(6n+4) a { background: color-mix(in srgb, var(--surface), #8a7656 3%); }
.essentials .ess-list li:nth-child(6n+5) a { background: color-mix(in srgb, var(--surface), #8a7656 9%); }
.essentials .ess-list li:nth-child(6n+6) a { background: color-mix(in srgb, var(--surface), #8a7656 6%); }
/* 一覧の組の名前(PLAN YOUR TRIP など)を、ペンでさっと 1 周書いたような丸で囲む(相棒さんの依頼 2026-10-18「鉛筆でまるで囲めますか」
   →「ちょっとださい。さっとかっこよく」)。線は太さが変わる 1 本の帯で、少しずつ広がりながら 1 周と少し回り、書き始めと書き終わりは細くかすれる
   (形は楕円をたどる式で作った。下の弧がいちばん太い)。組ごとに傾きを少し変える */
.guide-index h3 { position: relative; display: inline-block; padding: 12px 22px 12px; margin: 0 0 10px -4px; }
.guide-index h3::before { content: ""; position: absolute; inset: -7px -14px -9px -12px; pointer-events: none; rotate: -3deg;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 202 61' preserveAspectRatio='none'%3E%3Cpath fill='%23243038' fill-opacity='.82' d='M38.0 25.4 L35.2 26.4 L32.5 27.5 L30.0 28.5 L27.7 29.5 L25.6 30.6 L23.7 31.6 L22.0 32.7 L20.5 33.8 L19.2 34.9 L18.1 36.1 L17.3 37.3 L16.7 38.5 L16.3 39.7 L16.2 41.0 L16.3 42.3 L16.7 43.6 L17.3 44.8 L18.3 46.0 L19.4 47.2 L20.8 48.3 L22.5 49.3 L24.3 50.2 L26.4 51.2 L28.7 52.0 L31.2 52.9 L33.8 53.6 L36.7 54.3 L39.7 55.0 L43.0 55.6 L46.4 56.2 L49.9 56.7 L53.6 57.1 L57.5 57.5 L61.5 57.8 L65.6 58.0 L69.8 58.2 L74.1 58.4 L78.6 58.4 L83.0 58.4 L87.6 58.3 L92.2 58.2 L96.9 58.0 L101.6 57.7 L106.3 57.4 L111.1 56.9 L115.8 56.5 L120.5 55.9 L125.2 55.3 L129.8 54.7 L134.4 54.0 L138.9 53.2 L143.3 52.3 L147.7 51.5 L151.9 50.5 L156.1 49.5 L160.1 48.5 L163.9 47.4 L167.7 46.2 L171.2 45.1 L174.6 43.8 L177.9 42.6 L180.9 41.3 L183.8 40.0 L186.5 38.6 L188.9 37.2 L191.2 35.8 L193.2 34.4 L195.0 33.0 L196.6 31.5 L197.9 30.0 L199.0 28.5 L199.9 27.0 L200.5 25.4 L200.8 23.8 L200.8 22.3 L200.6 20.8 L200.1 19.3 L199.3 17.8 L198.3 16.5 L197.0 15.1 L195.5 13.9 L193.7 12.7 L191.8 11.5 L189.5 10.4 L187.1 9.4 L184.5 8.4 L181.6 7.5 L178.6 6.6 L175.3 5.8 L171.9 5.0 L168.3 4.3 L164.5 3.7 L160.5 3.1 L156.4 2.6 L152.1 2.1 L147.7 1.8 L143.2 1.5 L138.6 1.3 L133.8 1.1 L129.0 1.0 L124.1 1.0 L119.2 1.1 L114.2 1.2 L109.1 1.4 L104.1 1.7 L99.0 2.0 L93.9 2.5 L88.8 3.0 L83.8 3.5 L78.8 4.1 L73.9 4.8 L69.0 5.6 L64.2 6.4 L59.5 7.3 L54.9 8.3 L50.5 9.3 L46.1 10.3 L41.9 11.4 L37.9 12.6 L34.0 13.8 L30.3 15.1 L26.7 16.3 L23.4 17.7 L20.2 19.0 L17.3 20.4 L14.6 21.9 L12.1 23.4 L9.9 24.9 L7.9 26.4 L6.1 27.9 L4.6 29.5 L3.3 31.1 L2.3 32.7 L1.6 34.3 L1.2 35.9 L1.0 37.5 L1.1 39.1 L1.5 40.6 L2.2 42.1 L3.1 43.6 L4.4 45.0 L5.8 46.3 L7.6 47.6 L9.6 48.8 L11.8 50.0 L14.2 51.1 L16.9 52.1 L19.9 53.1 L23.0 54.0 L26.3 54.9 L29.9 55.6 L33.6 56.4 L37.6 57.0 L41.7 57.6 L46.0 58.1 L50.4 58.5 L55.0 58.8 L59.7 59.1 L64.5 59.4 L69.4 59.5 L69.4 59.2 L64.5 59.0 L59.7 58.8 L55.0 58.5 L50.4 58.0 L46.0 57.5 L41.8 56.9 L37.7 56.3 L33.8 55.5 L30.1 54.7 L26.6 53.9 L23.3 53.0 L20.2 52.0 L17.4 51.0 L14.7 49.9 L12.4 48.8 L10.3 47.6 L8.4 46.4 L6.8 45.2 L5.4 43.9 L4.4 42.6 L3.5 41.4 L3.0 40.1 L2.6 38.8 L2.6 37.5 L2.8 36.2 L3.2 34.9 L3.9 33.5 L4.8 32.2 L6.0 30.8 L7.4 29.4 L9.1 28.0 L11.1 26.6 L13.3 25.2 L15.7 23.8 L18.3 22.5 L21.2 21.1 L24.3 19.8 L27.6 18.5 L31.0 17.2 L34.7 16.0 L38.5 14.8 L42.5 13.7 L46.7 12.6 L51.0 11.5 L55.4 10.5 L60.0 9.6 L64.6 8.7 L69.4 7.9 L74.2 7.1 L79.1 6.4 L84.1 5.8 L89.1 5.2 L94.1 4.8 L99.2 4.3 L104.2 4.0 L109.2 3.7 L114.2 3.5 L119.2 3.4 L124.1 3.3 L129.0 3.3 L133.8 3.4 L138.5 3.6 L143.1 3.8 L147.5 4.1 L151.9 4.4 L156.1 4.9 L160.2 5.4 L164.1 5.9 L167.8 6.6 L171.4 7.3 L174.8 8.0 L178.0 8.8 L181.0 9.7 L183.7 10.6 L186.3 11.5 L188.6 12.5 L190.7 13.6 L192.5 14.6 L194.1 15.7 L195.4 16.8 L196.5 18.0 L197.4 19.1 L198.0 20.2 L198.4 21.3 L198.5 22.4 L198.4 23.5 L198.1 24.6 L197.6 25.8 L196.8 27.0 L195.8 28.2 L194.6 29.4 L193.1 30.7 L191.4 31.9 L189.5 33.2 L187.3 34.4 L184.9 35.7 L182.4 36.9 L179.6 38.1 L176.6 39.3 L173.4 40.4 L170.1 41.6 L166.6 42.7 L162.9 43.7 L159.1 44.7 L155.1 45.7 L151.0 46.6 L146.9 47.5 L142.6 48.4 L138.2 49.2 L133.7 49.9 L129.2 50.6 L124.6 51.2 L120.0 51.8 L115.3 52.3 L110.7 52.8 L106.0 53.2 L101.3 53.5 L96.7 53.8 L92.1 54.0 L87.5 54.2 L83.0 54.3 L78.6 54.3 L74.2 54.3 L69.9 54.2 L65.8 54.1 L61.7 53.9 L57.8 53.6 L54.0 53.3 L50.4 52.9 L46.9 52.5 L43.6 52.0 L40.4 51.5 L37.5 50.9 L34.7 50.3 L32.1 49.6 L29.7 48.9 L27.6 48.2 L25.6 47.4 L23.9 46.6 L22.4 45.8 L21.2 45.0 L20.1 44.2 L19.3 43.4 L18.6 42.6 L18.2 41.7 L18.0 40.9 L18.0 40.0 L18.2 39.0 L18.6 38.0 L19.2 36.9 L20.1 35.8 L21.2 34.7 L22.6 33.5 L24.2 32.4 L26.0 31.2 L28.0 30.1 L30.2 29.0 L32.7 27.8 L35.3 26.8 L38.1 25.7Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.guide-index .gi-group:nth-child(even) h3::before { rotate: 2deg; }
.guide-index .gi-group:nth-child(3n) h3::before { rotate: -1deg; }
/* 「Read these first」の札に、紙が少し浮いて見える影(相棒さんの依頼 2026-10-18「カードに影をつけて」)。触ると少し深く */
.essentials .ess-list a { box-shadow: 0 1px 2px rgba(60,45,25,.14), 0 6px 14px -4px rgba(60,45,25,.22), 0 14px 26px -12px rgba(60,45,25,.18);
  transition: transform .2s ease, box-shadow .2s ease; }
.essentials .ess-list a:hover, .essentials .ess-list a:focus-visible { box-shadow: 0 2px 4px rgba(60,45,25,.16), 0 12px 22px -6px rgba(60,45,25,.28), 0 22px 36px -14px rgba(60,45,25,.22); }
/* 「How we pick places」の帯だけ、ほかの帯の左右の余白が .home-paper > section.wrap の 0 に負けて、字が帯の端にくっついていた
   (相棒さんの指摘 2026-10-18「文字の位置が境目ぎりぎりすぎ」)。ほかの帯と同じ余白に */
.home-paper > section.method.wrap { padding-inline: 34px; }
@media (max-width: 960px) { .home-paper > section.method.wrap { padding-inline: 16px; } }

/* ── トップのレビュー(2026-10-18、相棒さんの依頼「全部お願いします」)で見つけたもの ── */
/* 1. 足の上の波: 波の絵(横 10:縦 1)を 120×24 の箱に入れていたので、絵が箱の上下の真ん中に縮んで置かれ、波と足の間に
   6px のすき間(明るい筋)が出ていた。箱の縦横を絵と同じ比にして、すき間を無くす */
footer::before { top: -15px; height: 16px; -webkit-mask-size: 160px 16px; mask-size: 160px 16px; }
/* 2. 横に流れる札の左右のボタンが、札の題の頭を隠していた。PC では列の左右に余白をとり、ボタンをそこへ出す */
@media (hover: hover) and (pointer: fine) {
  .has-rail { padding-inline: 58px; }
  .rail-prev { left: 2px; } .rail-next { right: 2px; }
}
/* 4. 頭の大きな海の写真のすぐ下に、また大きな海の写真が続いていた。慶良間の写真は小さくして、説明の右に置く */
@media (min-width: 861px) {
  .home-paper > .sea .sea-media { float: right; width: 42%; margin: 4px 0 18px 26px; }
  .home-paper > .sea .sea-media img { aspect-ratio: 4 / 3; border-radius: 18px; }
  .home-paper > .sea .sea-points { clear: both; }
}
@media (max-width: 860px) { .home-paper > .sea .sea-media img { aspect-ratio: 16 / 9; } }
/* 7. 頭の写真の出典が写真に溶けて読めなかった。うすい黒の札にのせる */
.home-hero-media figcaption { right: 14px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.45); font-size: 12px; color: #fff; }
/* 7 の続き: 頭の写真の下を波に切り抜いた(mask)ため、写真の箱が独立した重なりになり、写真全体にかける暗いかげり(.home-hero::after)が
   出典の札の上にかぶって読めなかった。かげりを写真の箱の中(出典の札の下)に移す */
.home-hero::after { content: none; }
.home-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; -webkit-mask: none; mask: none; height: auto;
  background: linear-gradient(180deg, rgba(4,30,46,.32) 0%, transparent 30%, transparent 42%, rgba(4,30,46,.78) 100%),
              linear-gradient(90deg, rgba(4,30,46,.5) 0%, transparent 65%); }

/* 見出し帯の 5 つの項目を携帯の幅で 1 行に収める(最後の項目が見切れていた ―― 相棒さんの確認 2026-10-18) */
@media (max-width: 520px) { .top nav .nx { display: none; } }
@media (max-width: 380px) { .top nav a { padding-inline: 6px; font-size: 14px; } }