/*
Theme Name: マグロの日記
Theme URI: https://travel-maguro.com/
Author: マグロ
Author URI: https://travel-maguro.com/
Description: 旅行ブログ「マグロの日記」の専用テーマ(Cocoon子テーマ)。旅行・グルメ・ロードバイクの記録をSEO・回遊性・収益化を意識して構成。
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: maguro
Template: cocoon-master
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

---
このファイルはWordPressテーマの識別に必要なヘッダーコメント(Cocoon子テーマ
としての `Template: cocoon-master` 宣言を含む)と、確定デザイン
(claude/homepage-design-final.md 他)のCSSを含みます。

Cocoon連携について: 親テーマCocoonのCSS/JSはfunctions.php側で意図的に
dequeueしており(既存の cocoon-child-maguro テーマと同じ方針)、見た目は
すべてこのstyle.cssでコントロールする。ただしCocoonがPHPレベルで生成する
要素(目次 #toc、内部リンクの自動カード化 .blogcard-wrap など)はそのまま
出力されるため、下記「Cocoon要素の再スタイル」セクションで新デザインの
トーンに合わせている。またCocoon本体のコンテナ要素(#container, #content
等)がデフォルトで持つwidth/padding/floatが新レイアウトと干渉しないよう、
「Cocoon干渉リセット」で明示的に無効化している。
*/

/* この旅行ブログは常にライト(クリーム色)配色で表示する方針のため、
   訪問者端末のダークモード設定に関わらず配色を固定する。
   color-scheme:light により、スクロールバーやフォーム部品などブラウザ
   標準UIもライト基調に統一される。将来的に手動切り替えを実装する場合は
   :root[data-theme="dark"] の値をそのまま使えるよう残してある。 */
:root{
  color-scheme: light;
  --paper:#f7f4ee; --paper-raised:#ffffff; --ink:#242019; --ink-soft:#665f52;
  --line:#e1dacb; --line-strong:#c9c0ab; --accent:#5f7451; --accent-tint:#eef2e8;
  --cat-travel:#5f7451; --cat-food:#c1512f; --cat-bike:#2e6e8e; --cat-photo:#4a4a45;
  --serif:'Shippori Mincho','Hiragino Mincho ProN',serif;
  --sans:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',monospace;
}
:root[data-theme="dark"]{
  --paper:#1c1a15; --paper-raised:#252219; --ink:#efe9dc; --ink-soft:#b3aa96;
  --line:#3a3527; --line-strong:#4d4732; --accent:#8fbf9d; --accent-tint:#28352c;
  --cat-travel:#93b17c; --cat-food:#e08262; --cat-bike:#7aaecb; --cat-photo:#a8a49a;
}

*{box-sizing:border-box;}
body{margin:0;background:radial-gradient(1100px 520px at 12% -8%, rgba(95,116,81,.06), transparent 60%), radial-gradient(900px 460px at 100% 0%, rgba(193,81,47,.05), transparent 55%), var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.8;font-size:15.5px;}
img{display:block;width:100%;height:100%;object-fit:cover;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:700;text-wrap:balance;margin:0;}

.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--paper) 94%, transparent);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(120,90,40,.05);}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:linear-gradient(90deg, var(--cat-travel), var(--cat-food) 50%, var(--cat-bike));opacity:.55;}
.site-header .bar{padding:16px clamp(18px, 4vw, 56px) 14px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;position:relative;}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.logo span{color:var(--accent);}
.logo-ring{width:64px;height:64px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;}
.logo-mark{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--paper-raised);background:var(--paper-raised);display:block;}
.search-desktop{display:none;}
.icon-btn{width:37px;height:37px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper-raised);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none;box-shadow:0 2px 6px rgba(120,90,40,.06);color:var(--ink-soft);cursor:pointer;}
.spacer{flex:1;}
.cat-nav{order:5;flex:1 1 100%;padding:8px 2px 0;margin:0;display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;position:relative;}
.cat-nav::-webkit-scrollbar{display:none;}
.cat-pill{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:#fff;padding:6px 14px 6px 6px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(120,90,40,.1);}
.cat-pill img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;border:1.5px solid rgba(255,255,255,.55);}
.cat-pill.is-current{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px currentColor, 0 2px 6px rgba(120,90,40,.1);}

/* ---- モバイル検索パネル / ハンバーガーメニュー(実装追加分) ---- */
.search-mobile-panel{display:flex;align-items:center;gap:9px;margin:0 clamp(18px, 4vw, 56px) 14px;background:var(--paper-raised);border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--ink-soft);}
.search-mobile-panel input{border:none;background:transparent;outline:none;font-family:var(--sans);font-size:13px;color:var(--ink);width:100%;}
.mobile-menu-panel{margin:0 clamp(18px, 4vw, 56px) 14px;background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 8px 20px rgba(120,90,40,.1);}
.mobile-menu-list{list-style:none;margin:0;padding:0;}
.mobile-menu-list li{border-top:1px dashed var(--line);}
.mobile-menu-list li:first-child{border-top:none;}
.mobile-menu-list a{display:block;padding:12px 14px;font-size:13.5px;}
.mobile-menu-list a:hover{color:var(--accent);}
@media (min-width:900px){
  .search-mobile-panel,.mobile-menu-panel{display:none !important;}
}

.wrap{max-width:1180px;margin:0 auto;padding:24px 18px 100px;}
.layout{display:flex;flex-direction:column;gap:44px;}

/* ---- ホームヒーロー(H1+リード文+写真コラージュ) ----
   claude/homepage-design-final.md の合成イメージを参考に、H1・リード文は
   本物のテキストとして実装(SEO評価を維持するため画像化しない)。写真は
   4枚を個別の<img>にして、それぞれ軽い回転・ずらし配置でコラージュ風に
   見せる。中央のマスコット円形アイコンと四隅のステッカーは装飾目的の
   ため alt="" にしている。 */
.home-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:36px;padding:28px 0 8px;}
/* 背景の装飾ブロブ(クリーム色・セージ色の柔らかい有機的な形)。
   写真として書き出さず純粋なCSS(border-radius+blur)で表現しているため
   追加のHTTPリクエストが発生せず、LCP・CLSへの影響もない。 */
.home-hero::before,.home-hero::after{content:"";position:absolute;z-index:0;filter:blur(1px);pointer-events:none;}
.home-hero::before{width:380px;height:340px;left:-140px;bottom:-120px;background:#efe6d1;border-radius:58% 42% 38% 62% / 55% 45% 55% 45%;}
.home-hero::after{width:340px;height:300px;right:-110px;top:-90px;background:#e3ebe0;border-radius:42% 58% 62% 38% / 45% 55% 45% 55%;}
.home-hero-text,.home-hero-collage{position:relative;z-index:1;}
.home-hero-text{max-width:520px;}
.home-hero-text h1{font-size:28px;line-height:1.4;margin-bottom:14px;}
.home-hero-text p{font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin:0;}

.home-hero-collage{width:100%;max-width:520px;margin:24px auto 78px;aspect-ratio:1/0.9;}
.hh-photo{position:absolute;display:block;width:52%;border-radius:14px;overflow:hidden;border:5px solid var(--paper-raised);box-shadow:0 10px 26px rgba(120,90,40,.18);background:var(--paper-raised);transition:box-shadow .2s ease,transform .2s ease;}
.hh-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.hh-photo-1{top:0;left:0;aspect-ratio:1000/700;transform:rotate(-3deg);z-index:1;}
.hh-photo-2{top:0;right:0;aspect-ratio:1000/700;transform:rotate(3deg);z-index:1;}
.hh-photo-3{bottom:0;left:0;aspect-ratio:1000/700;transform:rotate(2deg);z-index:1;}
.hh-photo-4{bottom:0;right:0;aspect-ratio:1000/700;transform:rotate(-2deg);z-index:1;}

/* ---- ホームヒーロー写真コラージュ: ホバー時の動き ----
   各写真がカテゴリーページへのリンクになったため、クリックできることが
   伝わるようホバー時に「外枠がわずかに浮き上がる+中の写真が少し拡大」
   させる。既存の.spot-card/.hero-mainと同じ演出パターンに統一している。
   transform/box-shadow/filterのみの変更でレイアウトに影響しないため、
   Core Web Vitals(CLS)への悪影響はない。 */
.home-hero-collage > a:hover .hh-photo{box-shadow:0 16px 34px rgba(120,90,40,.26);}
.home-hero-collage > a:hover .hh-photo img{transform:scale(1.06);}
.home-hero-collage > a:hover .hh-photo-1{transform:rotate(-3deg) translateY(-4px);}
.home-hero-collage > a:hover .hh-photo-2{transform:rotate(3deg) translateY(-4px);}
.home-hero-collage > a:hover .hh-photo-3{transform:rotate(2deg) translateY(-4px);}
.home-hero-collage > a:hover .hh-photo-4{transform:rotate(-2deg) translateY(-4px);}
.home-hero-collage > a:hover .hh-tag{filter:brightness(1.08);}

.hh-mascot-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:contain;background:var(--paper-raised);border:5px solid var(--paper-raised);box-shadow:0 10px 26px rgba(120,90,40,.2);z-index:3;padding:6px;}

.hh-tag{position:absolute;font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;padding:6px 15px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.15);z-index:6;}
.hh-tag-travel{top:29%;left:2%;}
.hh-tag-food{top:29%;right:2%;}
.hh-tag-bike{bottom:-38px;left:50%;transform:translateX(-104%);}
.hh-tag-photo{bottom:-38px;left:50%;transform:translateX(4%);}

.hh-sticker{position:absolute;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.16));z-index:5;}
.hh-sticker-tl{top:-26px;left:-14px;}
.hh-sticker-tr{top:-28px;right:-14px;}
.hh-sticker-bl{bottom:-6px;left:0;}
.hh-sticker-br{bottom:-34px;right:-14px;}

@media (min-width:640px){
  .home-hero-collage{max-width:600px;}
  .hh-sticker{width:76px;height:76px;}
}

/* ---- hero ---- */
.hero-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--accent);margin-bottom:12px;}
.hero-eyebrow .rule{flex:1;height:1px;background:var(--line-strong);opacity:.7;}
.hero-grid{display:grid;grid-template-columns:1fr;gap:14px;}
/* ---- PICK UP(.hero-main / .spot-card)の構造変更 ----
   従来はr-card登場以前の設計で、写真の上に暗いグラデーション(.ov)+白文字の
   タイトルを重ねる「雑誌の表紙」演出だった。しかしサムネイル画像を
   1200×630(タイトル文字を焼き込んだOGP相当サイズ)に統一したことで、
   画像に焼き込まれた文字とCSSで重ねた文字が二重に表示され、可読性が
   落ちる問題が発生した。
   対策として、r-card(新着記事カード)と同じ「画像はそのまま.thumbに
   表示し、タイトル等は画像の外の.bodyに通常のテキストとして表示する」
   構造に変更(front-page.phpのマークアップも.ov/.txtの構成から
   .thumb/.bodyの構成に変更済み)。h2(記事タイトル)は画像に重ねる装飾
   ではなく実体のある見出しテキストとして扱われ、SEO上の意味は変わらず
   保持される。 */
/* ---- PICK UPの左右の高さ揃え ----
   .hero-main(左)と.hero-side(右の2枚)は、どちらも中身の量で高さが決まるため
   放っておくと左右の下端がズレる。かといってグリッドのalign-items:stretchだけで
   引き伸ばすと、以前と同じく.thumbまで一緒に伸びてaspect-ratio(1200:630)が
   無視され、焼き込み文字入りサムネイルがトリミングされてしまう。
   そこで各カードを縦のflexコンテナにし、
     ・.thumb  → flex:none(画像は常に1200:630のまま。絶対に伸びない)
     ・.body   → flex:1 (余った高さはテキスト下の余白だけが吸収する)
   という役割分担にした。これで「写真は原寸比のまま・カードの高さだけ揃う」状態に
   なる。左右どちらが高くなっても反対側が余白で吸収するため、記事タイトルの
   長さが変わっても崩れない。高さの変化はカード内部の余白だけで、画像の
   表示サイズは最初から確定しているためCLSにも影響しない。 */
.hero-main{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--paper-raised);box-shadow:0 14px 34px rgba(120,90,40,.16);transition:box-shadow .2s;}
.hero-main:hover{box-shadow:0 18px 40px rgba(120,90,40,.22);}
.hero-main .thumb{position:relative;flex:none;aspect-ratio:1200/630;}
.hero-main .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.hero-main:hover .thumb img{transform:scale(1.045);}
.hero-main .ribbon{position:absolute;top:16px;left:-38px;z-index:2;transform:rotate(-45deg);background:linear-gradient(135deg,var(--accent),#4a5c40);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:4px 42px;box-shadow:0 3px 10px rgba(0,0,0,.22);}
.hero-main .cta-arrow{position:absolute;right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,color .2s;}
.hero-main:hover .cta-arrow{background:var(--accent);color:#fff;}
.hero-main .body{flex:1;padding:16px 18px 20px;}
.hero-main .badge-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.hero-main .badge.alt{background:none;color:var(--ink-soft);padding:0;font-weight:400;}
.hero-main h2{font-size:19px;line-height:1.5;color:var(--ink);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hero-main .excerpt{font-size:12.5px;color:var(--ink-soft);max-width:44ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hero-side{display:flex;flex-direction:row;gap:14px;}
.spot-card{position:relative;flex:1;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--paper-raised);box-shadow:0 8px 22px rgba(120,90,40,.13);transition:box-shadow .2s,transform .2s;}
.spot-card:hover{box-shadow:0 12px 28px rgba(120,90,40,.2);transform:translateY(-2px);}
.spot-card .thumb{flex:none;aspect-ratio:1200/630;}
.spot-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.spot-card:hover .thumb img{transform:scale(1.06);}
.spot-card .body{flex:1;padding:10px 12px 12px;}
.spot-card .badge{font-size:9px;padding:3px 9px;margin-bottom:7px;}
.spot-card .title{font-size:12.5px;line-height:1.5;color:var(--ink);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.spot-card .meta{display:flex;align-items:center;gap:9px;margin-top:7px;font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);}
.spot-card .rt{display:inline-flex;align-items:center;gap:3px;}

.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:#fff;background:var(--cat-travel);padding:4px 10px;border-radius:999px;}

.ad-slot{position:relative;border:1.5px dashed var(--line-strong);border-radius:14px;padding:20px 12px 16px;text-align:center;background:repeating-linear-gradient(135deg, var(--accent-tint), var(--accent-tint) 12px, rgba(95,116,81,.06) 12px, rgba(95,116,81,.06) 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;}
.ad-slot .tag{position:absolute;top:9px;left:12px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--ink-soft);opacity:.6;}
.ad-slot .dims{display:block;font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);opacity:.55;}
.ad-icon{color:var(--line-strong);}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;}
.section-head h2{font-size:19px;}
.more{font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:nowrap;padding:6px 13px;border:1px solid var(--line);border-radius:999px;transition:background .15s,color .15s,border-color .15s;}
.more:hover{background:var(--accent-tint);color:var(--accent);border-color:var(--accent);}

.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.cards-grid.sparse{grid-template-columns:repeat(auto-fill,minmax(150px,200px));}
.r-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-raised);display:block;box-shadow:0 2px 8px rgba(120,90,40,.06);transition:box-shadow .15s,transform .15s;}
.r-card:hover{box-shadow:0 10px 24px rgba(120,90,40,.13);transform:translateY(-2px);}
/* サムネイル画像は1200×630px(タイトル文字を焼き込んだOGP相当サイズ)で
   作成されているため、コンテナのaspect-ratioを4:3から実際の画像比率
   (1200:630)に合わせた。以前は4:3のコンテナに対しobject-fit:coverで
   左右がトリミングされており、画像に焼き込んだタイトル文字が途中で
   切れて表示が崩れる記事があった。画像比率とコンテナ比率を一致させる
   ことでトリミングが発生しなくなり、サムネイル全体(焼き込み文字も含む)
   がそのまま表示される。 */
.r-card .thumb{aspect-ratio:1200/630;}
.r-card .body{padding:11px 12px 14px;}
.r-card .badge{font-size:9px;padding:3px 9px;margin-bottom:8px;}
.r-card .title{font-size:13px;line-height:1.55;color:var(--ink);}
.r-card .date{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--ink-soft);}

.cat-section{margin-top:8px;padding:26px 20px;border-radius:18px;border-left:4px solid var(--cat-c);background:var(--paper-raised);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 3px 12px rgba(120,90,40,.05);}
.cat-section .eyebrow{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--cat-c);margin-bottom:8px;}
.eyebrow-icon{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--paper);}
.cat-section .lede{color:var(--ink-soft);font-size:13px;max-width:60ch;margin:6px 0 18px;}

/* ---- 訪問エリアマップ(都道府県グリッド) ----
   他の無地セクション(新着記事など)と同様、カード枠は付けずページ背景に
   直接配置する。 */
.map-section{margin-top:8px;}
.map-section .eyebrow{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--accent);margin-bottom:8px;}
.map-title-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;border-bottom:2px solid var(--accent);padding-bottom:9px;margin-bottom:2px;width:fit-content;}
.map-title-row h2{margin:0;}
.map-count{font-family:var(--mono);font-style:italic;font-size:12px;color:var(--ink-soft);white-space:nowrap;}
.map-section .lede{color:var(--ink-soft);font-size:13px;max-width:60ch;margin:14px 0 18px;}
.map-layout{display:flex;flex-direction:column;gap:22px;}
.map-figure{width:100%;}
/* 元のpx版でも関東ブロックがマップ基準幅(777px)から数px右にはみ出す
   デザインになっており、それを.jmap-scrollの横スクロールで吸収していた
   (.map-scroll-hintの「横にスクロールできます」はこのため)。#japan-map
   を幅100%のフルードにした今、その数px分は誤差程度で見た目に影響しない
   ため、スクロールバーを出さずoverflow:hiddenで静かに切り詰める。 */
.jmap-scroll{overflow:hidden;container-type:inline-size;}
.map-scroll-hint{display:none;font-size:10.5px;color:var(--ink-soft);margin-top:6px;}

/* ---- 日本地図(地方ブロック単位の絶対配置マップ) ----
   ユーザー提供の japan_map.html / style_map.css の構造・座標を、777×482px
   基準の相対%(#japan-mapは幅100%+aspect-ratio:777/482でフルード化)に
   変換して使用。座標の意味・見た目の比率は元のpx版と同一で、PC幅で
   サイドバーにより地図が777pxを下回っても横スクロールが発生しない
   (以前は.jmap-scrollで横スクロールが必要だったため.map-scroll-hint
   で案内していたが、常に幅に収まるようになったため非表示にしている)。
   色分けは「記事あり=アクセントグリーン」「準備中=ニュートラルグレー」
   の2色のみとし、地方ブロックごとの色分けは行わない(色=記事の有無、
   という意味だけを持たせるため)。
   #japan-map 以下のIDはこの地図専用のため他コンポーネントと衝突しない。
   注意: @media (max-width:776px) 側は絶対配置をやめてflex-wrapで縦積み
   にする全く別レイアウトのため、ここで指定した aspect-ratio:777/482 を
   そのまま引き継ぐと(heightだけauto指定してもaspect-ratioは効いたまま
   なので)高さが幅に対して強制的に縮小され、中身がはみ出して重なって
   見えたり縦スクロールが出たりする。そのため776px以下では
   aspect-ratio:auto で明示的に解除している。 */
.jmap-clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden;}

#japan-map{display:block;width:100%;aspect-ratio:777/482;margin:0;position:relative;}
#japan-map p.area-title{display:none;}
#japan-map div div.area div{
  border:1px solid var(--paper);
  text-align:center;
  /* 元のpx版は777px幅・14px固定フォントで設計されていた。地図を
     フルード化した後、PC幅でサイドバーに押されて777pxよりかなり
     縮む場合(2カラムレイアウトだと450px前後まで縮むことがある)、
     14px固定のままだと都道府県ごとの小さいボックスに文字が収まらず
     隣とぶつかって「ぐちゃぐちゃ」に見える。そこで文字サイズを
     地図の実際の表示幅(1.8cqw ≒ 14px÷777pxの元の比率)に比例させ、
     ボックスが縮んでも元のデザインと同じ文字とボックスの比率を保つ。
     .jmap-scrollにcontainer-type:inline-sizeを指定して基準にしている。
     777pxちょうど、またはそれより広く表示される場合は14pxを超えて
     文字が大きくなりすぎないようclampで上限を設けている。 */
  font-size:clamp(7px, 1.8cqw, 14px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  position:absolute;
  box-sizing:border-box;
  transition:background-color .2s,opacity .2s;
  font-family:var(--sans);
  background-color:var(--accent);
  color:#fff;
}
#japan-map div div.area div:not(.is-empty):hover{opacity:.8;}
#japan-map div div.area div.is-empty{background-color:var(--line);color:var(--ink-soft);cursor:default;}

/* 北海道・東北 */
#hokkaido-touhoku{width:17.503%;height:54.979%;display:block;position:absolute;left:82.111%;}
#hokkaido{width:97.794%;height:26.415%;left:0%;top:0%;}
#aomori{width:68.382%;height:16.226%;left:15.441%;top:36.226%;}
#akita{width:49.265%;height:15.849%;left:2.206%;top:52.453%;}
#iwate{width:49.265%;height:15.849%;left:51.471%;top:52.453%;}
#yamagata{width:49.265%;height:15.849%;left:2.206%;top:68.302%;}
#miyagi{width:49.265%;height:15.849%;left:51.471%;top:68.302%;}
#fukushima{width:49.265%;height:15.849%;left:51.471%;top:84.151%;}

/* 関東 */
#kantou{width:20.335%;height:36.1%;display:block;position:absolute;top:54.979%;left:80.18%;z-index:2;}
#ibaraki{width:32.911%;height:48.851%;left:63.291%;top:0%;}
#tochigi{width:31.646%;height:24.138%;left:31.646%;top:0%;}
#gunma{width:31.646%;height:24.138%;left:0%;top:0%;}
#saitama{width:63.291%;height:24.713%;left:0%;top:24.138%;}
#chiba{width:32.911%;height:48.276%;left:63.291%;top:48.851%;}
#tokyo{width:63.291%;height:24.138%;left:0%;top:48.851%;}
#kanagawa{width:42.405%;height:24.138%;left:0%;top:72.989%;}

/* 中部 */
#tyubu{width:34.749%;height:43.776%;position:absolute;left:56.371%;top:46.266%;}
#nigata{width:31.481%;height:19.905%;left:68.519%;top:0%;}
#toyama{width:24.815%;height:19.905%;left:43.704%;top:0%;}
#ishikawa{width:18.519%;height:27.014%;left:25.185%;top:0%;}
#fukui{width:25.185%;height:19.905%;left:0%;top:0%;z-index:2;}
#nagano{width:24.815%;height:40.284%;left:43.704%;top:19.905%;}
#yamanashi{width:24.815%;height:19.905%;left:43.704%;top:60.19%;}
#gifu{width:18.519%;height:26.066%;left:25.185%;top:27.014%;}
#shizuoka{width:24.815%;height:19.905%;left:43.704%;top:80.095%;}
#aichi{width:18.519%;height:27.014%;left:25.185%;top:53.081%;}

/* 近畿 */
#kinki{width:23.938%;height:43.776%;position:absolute;left:41.184%;top:46.266%;}
#kyoto{width:36.022%;height:39.81%;left:27.419%;top:0%;}
#shiga{width:36.559%;height:19.905%;left:63.441%;top:19.905%;}
#osaka{width:36.022%;height:40.284%;left:27.419%;top:39.81%;}
#nara{width:18.28%;height:40.284%;left:63.441%;top:39.81%;}
#mie{width:18.28%;height:40.284%;left:81.72%;top:39.81%;}
#wakayama{width:60.753%;height:19.905%;left:32.796%;top:80.095%;}
#hyougo{width:27.419%;height:46.445%;left:0%;top:0%;}

/* 中国 */
#tyugoku{width:19.434%;height:20.332%;position:absolute;left:21.75%;top:46.266%;}
#tottori{width:33.113%;height:50%;left:66.887%;top:0%;}
#okayama{width:33.113%;height:50%;left:66.887%;top:50%;}
#shimane{width:33.775%;height:50%;left:33.113%;top:0%;}
#hiroshima{width:33.775%;height:50%;left:33.113%;top:50%;}
#yamaguchi{width:33.113%;height:100%;left:0%;top:0%;}

/* 四国 */
#shikoku{width:23.681%;height:17.427%;position:absolute;left:21.75%;top:72.614%;}
#kagawa{width:50%;height:50%;right:0%;top:0%;}
#ehime{width:50%;height:50%;left:0%;top:0%;}
#tokushima{width:50%;height:50%;right:0%;top:50%;}
#kouchi{width:50%;height:50%;left:0%;top:50%;}

/* 九州・沖縄 */
#kyusyu{width:19.562%;height:51.245%;position:absolute;left:0%;top:48.755%;}
#fukuoka{width:32.895%;height:20.243%;left:66.447%;top:0%;}
#saga{width:32.895%;height:20.243%;left:33.553%;top:0%;}
#nagasaki{width:32.895%;height:20.243%;left:0.658%;top:0%;}
#oita{width:32.895%;height:20.243%;left:66.447%;top:20.243%;}
#kumamoto{width:32.895%;height:40.486%;left:33.553%;top:20.243%;}
#miyazaki{width:32.895%;height:20.243%;left:66.447%;top:40.486%;}
#kagoshima{width:44.737%;height:19.838%;left:54.605%;top:60.729%;}
#okinawa{width:32.895%;height:20.243%;left:0.658%;top:79.757%;}

@media (max-width:776px){
  .jmap-scroll{overflow:visible;padding-bottom:0;}
  #japan-map{display:block;width:100%;aspect-ratio:auto;height:auto;}
  #japan-map p.area-title{display:block;width:100%;font-size:14px;font-family:var(--mono);letter-spacing:.04em;text-align:center;margin:20px 0 10px;color:var(--ink-soft);}
  /* 501px〜776px(小型タブレット等)は、地方ブロックごとに独立した
     ミニ地図として縦に積む表示にする。
     以前は各地方ブロック(#kantou等)をposition:staticにしていたが、
     中の都道府県div(position:absolute、left/top/width/heightは
     すべて「元の地方ブロック自身の大きさ」に対する%で設計されている)
     の基準となる位置指定コンテキスト(containing block)が
     .area(position:relativeだが中身が全部position:absoluteのため
     高さ0に潰れる)にすり替わってしまい、結果として全都道府県が
     成り行きでtop:0・高さ0に潰れて同じ位置に重なって表示され、
     文字だけがはみ出して「ぐちゃぐちゃ」に見えていた。
     地方ブロック自身をposition:relativeにし、777×482基準の
     幅%・高さ%から算出した本来の縦横比(aspect-ratio)と、
     コンテナ幅に比例する幅(cqw、フォントサイズと同じ考え方)を
     明示的に与えることで、中の都道府県divが正しい大きさの
     コンテナを基準に配置されるようにしている。.areaは
     position:staticに戻し、位置指定には関与させない。 */
  #hokkaido-touhoku,#kantou,#tyubu,#kinki,#tyugoku,#shikoku,#kyusyu{
    display:block;position:relative;left:auto;top:auto;margin:0 auto 6px;
  }
  #hokkaido-touhoku{width:17.503cqw;aspect-ratio:136/265;}
  #kantou{width:20.335cqw;aspect-ratio:158/174;}
  #tyubu{width:34.749cqw;aspect-ratio:270/211;}
  #kinki{width:23.938cqw;aspect-ratio:186/211;}
  #tyugoku{width:19.434cqw;aspect-ratio:151/98;}
  #shikoku{width:23.681cqw;aspect-ratio:184/84;}
  #kyusyu{width:19.562cqw;aspect-ratio:152/247;}
  #japan-map div div.area{display:block;position:static;width:100%;height:auto;}
  .map-scroll-hint{display:none;}
}
@media (max-width:500px){
  #japan-map div div.area{display:flex;flex-wrap:wrap;width:100%;}
  #japan-map div div.area a{height:auto;width:25%;}
  #japan-map div div.area div{display:block;border-radius:0;position:static;height:auto;font-size:12.5px;width:100%;padding:9px 4px;}
}
/* ユーザー要望によりサイドバー(凡例+都道府県ランキング+CTAボタン)を非表示にし、
   空いたスペース分マップを大きく表示する */
.map-stats{display:none;}
.map-legend{display:flex;gap:16px;font-size:11.5px;color:var(--ink-soft);}
.map-legend .sw{display:inline-flex;align-items:center;gap:6px;}
.map-legend .dot{width:10px;height:10px;border-radius:3px;display:inline-block;}
.map-legend .dot.on{background:var(--accent);}
.map-legend .dot.off{background:var(--line);border:1px solid var(--line-strong);}
.map-ranking{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.map-ranking h3{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 10px;}
.pref-rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.pref-rank-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;padding:7px 10px;border-radius:8px;background:var(--paper-raised);border:1px solid transparent;transition:background .15s ease,border-color .15s ease;}
a.pref-rank-item:hover{background:var(--accent-tint);border-color:var(--line);}
.pref-rank-item .pname{font-weight:600;color:var(--ink);}
.pref-rank-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.map-cta{align-self:flex-start;}
@media (min-width:900px){
  .map-layout{flex-direction:row;align-items:flex-start;gap:32px;}
  .map-figure{flex:1;min-width:0;}
}

/* ==========================================================================
   カテゴリーアーカイブページ共通(category-travel.php 他)
   確定デザイン: claude/travel-archive-design-final.md 他
   ========================================================================== */

/* ---- パンくずリスト(指示書の必須要件。ヘッダー直下に表示) ---- */
.breadcrumb{margin:14px 0 2px;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;font-family:var(--mono);font-size:11px;color:var(--ink-soft);}
.breadcrumb li{display:flex;align-items:center;}
.breadcrumb li:not(:last-child)::after{content:"/";color:var(--line-strong);margin:0 8px;}
.breadcrumb a{color:var(--ink-soft);transition:color .15s;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb span[aria-current]{color:var(--ink);}

/* ---- カテゴリーヒーロー(横長の写真バナー) ---- */
.cat-hero{position:relative;border-radius:18px;overflow:hidden;margin-top:12px;aspect-ratio:16/7;box-shadow:0 14px 34px rgba(120,90,40,.16);}
.cat-hero img{width:100%;height:100%;object-fit:cover;}
.cat-hero .ov{position:absolute;inset:0;background:linear-gradient(0deg, rgba(20,16,10,.84) 0%, rgba(20,16,10,.22) 55%, rgba(20,16,10,0) 85%);}
.cat-hero .txt{position:absolute;left:0;right:0;bottom:0;padding:22px clamp(18px, 4vw, 40px) 26px;color:#fff;}
.cat-hero .eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;margin-bottom:10px;color:#fff;opacity:.92;}
.cat-hero .eyebrow img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.6);}
.cat-hero h1{font-size:25px;color:#fff;margin-bottom:8px;}
.cat-hero .lede{font-size:13px;max-width:56ch;opacity:.92;margin-bottom:12px;color:#fff;}
.cat-hero .count-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);padding:5px 12px;border-radius:999px;backdrop-filter:blur(2px);color:#fff;}
.cat-hero.no-photo{background:linear-gradient(135deg, var(--cat-c, var(--accent)), color-mix(in srgb, var(--cat-c, var(--accent)) 55%, #1c1a15));aspect-ratio:16/6;}
.cat-hero.no-photo .txt{position:static;padding:26px clamp(18px, 4vw, 40px);}
@media (max-width:640px){
  .cat-hero{aspect-ratio:4/5;}
  .cat-hero.no-photo{aspect-ratio:auto;}
  .cat-hero h1{font-size:21px;}
}

/* ---- 都道府県フィルター(横スクロールのピル) ---- */
.filter-row{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 6px;scrollbar-width:none;}
.filter-row::-webkit-scrollbar{display:none;}
.filter-pill{flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);background:var(--paper-raised);border:1px solid var(--line);padding:7px 14px;border-radius:999px;white-space:nowrap;transition:border-color .15s,color .15s,background .15s;}
.filter-pill:hover{border-color:var(--accent);color:var(--accent);}
.filter-pill.is-current{background:var(--accent);border-color:var(--accent);color:#fff;}
.filter-pill .count{font-size:10px;opacity:.75;}
.filter-pill.is-empty{opacity:.45;cursor:default;pointer-events:none;border-style:dashed;}

/* ---- カテゴリー内 人気記事ミニランキング(TOP3) ---- */
.mini-rank-section{margin-top:20px;}
.mini-rank-section h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:12px;text-transform:uppercase;}
.mini-rank{display:flex;flex-direction:column;gap:2px;}
@media (min-width:640px){
  .mini-rank{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .mini-rank .rank-item{position:relative;flex-direction:column;align-items:stretch;background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:12px;border-top:none;}
  .mini-rank .rank-item.top{margin:0;padding:12px;}
  .mini-rank .rank-item .rank-thumb{width:100%;height:110px;border-radius:10px;margin-bottom:8px;}
  .mini-rank .rank-num{position:absolute;top:8px;left:8px;box-shadow:0 2px 6px rgba(0,0,0,.18);}
}

/* ---- 記事カードの追加メタ行(都道府県+読了時間。カテゴリーアーカイブ用) ---- */
.card-meta{display:flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--ink-soft);flex-wrap:wrap;}
.card-meta .pref{background:var(--accent-tint);color:var(--accent);padding:2px 8px;border-radius:999px;}
.card-meta .date{display:inline;margin-top:0;margin-left:auto;}

/* ---- ページネーション ---- */
.pagination{display:flex;justify-content:center;gap:6px;margin-top:26px;flex-wrap:wrap;}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--ink-soft);background:var(--paper-raised);}
.pagination a:hover{border-color:var(--accent);color:var(--accent);}
.pagination span.current{background:var(--accent);border-color:var(--accent);color:#fff;}
.pagination span.dots{border-color:transparent;background:transparent;}

.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.gallery-grid .g-item{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;display:block;}
.gallery-grid .g-cap{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:10px;color:#fff;background:rgba(20,16,10,.5);padding:3px 8px;border-radius:5px;backdrop-filter:blur(2px);}

.sidebar{display:flex;flex-direction:column;gap:22px;}
.side-card{position:relative;background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 4px 16px rgba(120,90,40,.08);overflow:hidden;}
.profile-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--cat-travel), var(--cat-food) 50%, var(--cat-bike));}
.side-card .label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:12px;display:block;}
.rank-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.rank-head .label{margin-bottom:0;}
.rank-period{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--accent);background:var(--accent-tint);padding:3px 10px;border-radius:999px;flex:none;}
.rank-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px dashed var(--line);}
.rank-item:first-child{border-top:none;}
.rank-item.top{background:linear-gradient(90deg, rgba(211,165,69,.14), rgba(211,165,69,0));margin:0 -18px 2px;padding:10px 18px;border-radius:10px;}
.rank-num{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--accent);width:24px;height:24px;border-radius:50%;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;flex:none;}
.rank-item:first-child .rank-num{color:#fff;background:linear-gradient(155deg,#d3a545,#b5842c);box-shadow:0 2px 6px rgba(181,132,44,.35);}
.rank-thumb{width:52px;height:40px;border-radius:6px;overflow:hidden;flex:none;}
.rank-title{font-size:12.5px;line-height:1.5;}
.cat-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;}
.cat-list li{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px dashed var(--line);font-size:13px;}
.cat-list li:first-child{border-top:none;}
.cat-list .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:9px;box-shadow:0 0 0 3px var(--paper);}
.cat-list .count{font-family:var(--mono);font-size:11px;color:var(--ink-soft);}

/* ---- author / E-E-A-T profile card ---- */
.profile-card{text-align:center;padding-top:22px;}
.profile-card .avatar-ring{width:70px;height:70px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:conic-gradient(from 180deg, var(--cat-travel), var(--cat-food), var(--cat-bike), var(--cat-travel));}
.profile-card .avatar{width:62px;height:62px;border-radius:50%;display:block;object-fit:cover;border:2.5px solid var(--paper-raised);background:var(--paper);}
.profile-card .p-name{font-family:var(--serif);font-weight:700;font-size:15px;}
.profile-card .p-handle{display:flex;align-items:center;justify-content:center;gap:5px;font-family:var(--mono);font-weight:400;font-size:10.5px;color:var(--ink-soft);margin-top:5px;}
.profile-card .p-bio{font-size:12.5px;color:var(--ink-soft);line-height:1.7;margin:10px 0 12px;}
.profile-card .p-stats{display:flex;border-top:1px dashed var(--line);margin-bottom:14px;padding-top:12px;}
.profile-card .p-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;}
.profile-card .p-stat+.p-stat{border-left:1px dashed var(--line);}
.profile-card .p-stat .n{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);}
.profile-card .p-stat .l{font-family:var(--mono);font-size:9px;color:var(--ink-soft);}
.profile-card .p-link{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:#fff;background:var(--accent);padding:8px 16px;border-radius:999px;transition:background .15s;}
.profile-card .p-link:hover{background:#4a5c40;}

.site-footer{border-top:1px solid var(--line);margin-top:20px;padding:34px 18px 60px;text-align:center;}
.footer-illust{display:block;width:100%;max-width:220px;height:auto;margin:0 auto 20px;border-radius:16px;box-shadow:0 8px 22px rgba(120,90,40,.14);}
.site-footer .logo{justify-content:center;display:flex;margin-bottom:8px;}
.site-footer p{font-size:12px;color:var(--ink-soft);margin:4px 0;}

@media (min-width:640px){
  .cards-grid{grid-template-columns:repeat(3,1fr);}
  .cards-grid.sparse{grid-template-columns:repeat(auto-fill,minmax(160px,210px));}
}
@media (min-width:900px){
  body{font-size:16px;}
  .search-desktop{display:flex;align-items:center;gap:9px;background:var(--paper-raised);border:1px solid var(--line);border-radius:999px;padding:9px 16px;width:250px;color:var(--ink-soft);box-shadow:inset 0 1px 3px rgba(120,90,40,.05);transition:border-color .15s;}
  .search-desktop:focus-within{border-color:var(--accent);}
  .search-desktop input{border:none;background:transparent;outline:none;font-family:var(--sans);font-size:13px;color:var(--ink);width:100%;}
  .search-mobile{display:none;}
  .cat-nav{order:0;flex:0 0 auto;padding:0;overflow:visible;}
  .layout{display:grid;grid-template-columns:2.1fr 1fr;align-items:start;gap:48px;}
  .sidebar{position:sticky;top:88px;}
  /* align-items:stretchで左右のカラムの高さを揃える。
     かつて同じstretchを使っていた頃は、spot-card側にaspect-ratio:autoを
     当てて写真ごと引き伸ばしていたためサムネイルがトリミングされていたが、
     現在は各カードが縦flexで「.thumbはflex:none・.bodyがflex:1」の構成
     (base側で指定済み)になっているため、伸びるのはテキスト下の余白だけで
     写真は1200:630のまま保たれる。したがってstretchを安全に使える。 */
  .hero-grid{grid-template-columns:1.6fr 1fr;align-items:stretch;}
  .hero-side{flex-direction:column;}
  .hero-main h2{font-size:21px;}
  /* 左カラムが引き伸ばされた分の余白を、空白ではなく本文で埋めたほうが
     クリック前の情報量が増える(=回遊率に効く)ため、PCでは抜粋を3行に
     増やして余白を圧縮する。 */
  .hero-main .excerpt{-webkit-line-clamp:3;}
  .cards-grid{grid-template-columns:repeat(3,1fr);}
  .cards-grid.sparse{grid-template-columns:repeat(auto-fill,minmax(180px,220px));}
  .gallery-grid{grid-template-columns:repeat(4,1fr);}

  .home-hero{flex-direction:row;align-items:center;gap:32px;padding:24px 0 8px;}
  /* 頂いた実寸レイアウト(1440×740pxのリファレンス、.tm-collage:720×628px、
     写真330×280px・4隅マスコット122〜128px・中央マスコット230px)を、
     このサイトの%ベースのレスポンシブ設計に変換して反映。
     ・flex比率はリファレンスの実寸(テキスト幅520:コラージュ幅720)を
       そのままgrow値として使用。コラージュが主役になるよう以前より
       写真エリアの比率を高めた。
     ・.home-hero-collageのmax-widthをリファレンスと同じ720pxに設定し、
       aspect-ratioも720:628の実比率に合わせた。
     ・写真は以前の「四隅ぴったり重なり気味」の配置から、リファレンス通り
       上下左右に余白を持たせた本物の2×2グリッド配置に変更(insetは
       top 2.55%・bottom 4.46%・left/right 2.5%)。あわせて写真自体の
       アスペクト比も1000:700(横長)から33:28(よりスクエア)に変更。
     ・回転の掛け方をリファレンスに合わせて変更:以前は写真を囲む外枠
       (.hh-photo-N)ごと回転させていたが、リファレンスでは外枠は
       回転させず、中の<img>だけを±2度回転させている。ホバー時の
       浮き上がり(translateY)は外枠側、拡大(scale)は写真側と役割を
       分離した。
     ・マスコットは中央32%(リファレンス230/720とほぼ一致)、四隅は
       17.8%・16.9%とし、リファレンスの±9度回転を再現。
     ・コラージュが大きくなった分、右側のステッカーがはみ出す量も
       最大約26pxまで増えるため、.home-hero-collageの右マージンを
       24px→32pxに拡大し、.home-hero(overflow:hidden)の右端で
       クリップされないよう安全マージンを確保した。
     ※以下2点は今回のCSSだけでは再現していません(マークアップ変更が
       必要なため見送り):
       1) 右下マスコット裏の白い円形の背景装飾
       2) タグ(旅行/ごはん等のピル)を各写真の端に直付けする配置
          (現状どおりコラージュ全体を基準にした位置のまま) */
  .home-hero-text{flex:520;min-width:0;}
  .home-hero-text h1{font-size:34px;}
  .home-hero-text p{font-size:14px;}
  /* 下マージン84pxは、以前ロードバイク・フォトギャラリーのマグロ君が
     写真の下端からはみ出していた頃の安全バッファだった。両マグロ君を
     写真の上端に移動させたことで、コラージュの下にはみ出す要素が
     無くなったため、余白を24pxまで詰めている。上のマージン(20px)は
     四隅マスコット(上段は写真の上端から-3.2%はみ出す)の安全バッファを
     兼ねているため、クリップ防止のためそのまま残している。 */
  .home-hero-collage{flex:720;min-width:0;max-width:720px;aspect-ratio:720/628;margin:20px 32px 24px 0;}
  .hh-photo{width:45.8%;}
  .hh-photo-1{top:2.55%;left:2.5%;aspect-ratio:33/28;transform:none;}
  .hh-photo-2{top:2.55%;right:2.5%;aspect-ratio:33/28;transform:none;}
  .hh-photo-3{bottom:4.46%;left:2.5%;aspect-ratio:33/28;transform:none;}
  .hh-photo-4{bottom:4.46%;right:2.5%;aspect-ratio:33/28;transform:none;}
  .hh-photo-1 img{transform:rotate(-2deg);}
  .hh-photo-2 img{transform:rotate(2deg);}
  .hh-photo-3 img{transform:rotate(2deg);}
  .hh-photo-4 img{transform:rotate(-2deg);}
  .home-hero-collage > a:hover .hh-photo-1{transform:translateY(-4px);}
  .home-hero-collage > a:hover .hh-photo-2{transform:translateY(-4px);}
  .home-hero-collage > a:hover .hh-photo-3{transform:translateY(-4px);}
  .home-hero-collage > a:hover .hh-photo-4{transform:translateY(-4px);}
  .home-hero-collage > a:hover .hh-photo-1 img{transform:rotate(-2deg) scale(1.06);}
  .home-hero-collage > a:hover .hh-photo-2 img{transform:rotate(2deg) scale(1.06);}
  .home-hero-collage > a:hover .hh-photo-3 img{transform:rotate(2deg) scale(1.06);}
  .home-hero-collage > a:hover .hh-photo-4 img{transform:rotate(-2deg) scale(1.06);}
  .hh-sticker{width:auto;height:auto;}
  .hh-mascot-center{width:32%;}
  .hh-sticker-tl{width:17.8%;aspect-ratio:1/1;top:-3.2%;left:-3.6%;transform:rotate(-9deg);}
  .hh-sticker-tr{width:17.8%;aspect-ratio:1/1;top:-3.2%;right:-3.6%;transform:rotate(9deg);}
  /* ロードバイク(左下写真)・フォトギャラリー(右下写真)のマグロ君を、
     元の「自分の写真の下端」から「自分の写真の上端」に移動。旅行・
     ごはん(上段)のマグロ君が写真の上に乗っているのと同じ見え方に
     揃えるため、上段ステッカー(top:-3.2%)と写真上端(top:2.55%)の
     差分(5.75%)を、下段写真の上端(50.99%=100%-bottom4.46%-写真高44.55%)
     から引いて算出したtop:45.24%を採用。左右のはみ出し量(left/right)は
     元の値のまま変更していない。 */
  .hh-sticker-bl{width:16.9%;aspect-ratio:1/1;top:45.24%;left:-3.3%;transform:rotate(-9deg);}
  .hh-sticker-br{width:16.9%;aspect-ratio:1/1;top:45.24%;right:-3.1%;transform:rotate(9deg);}

  /* ---- タグ(旅行/ごはん/ロードバイク/フォトギャラリー)の位置(デスクトップ)----
     以前は上段2枚(旅行・ごはん)だけが写真の中腹(top:29%)に乗り、下段2枚
     (ロードバイク・フォトギャラリー)はコラージュ全体の下に横並びの
     ペアとして中央寄せされていた。ご指示の参考画像では、4枚とも
     「自分の写真の下端」に個別に掛かるよう統一されているため、それに
     合わせて各タグをそれぞれの写真の下端付近(左列は左寄せ、右列は
     右寄せ)に再配置し、下段2枚はcenter寄せ用のleft:50%+transformを
     解除して左右individually指定に変更した。 */
  .hh-tag-travel{top:38%;left:6%;}
  .hh-tag-food{top:38%;right:6%;}
  .hh-tag-bike{top:auto;bottom:8%;left:6%;right:auto;transform:none;}
  .hh-tag-photo{top:auto;bottom:8%;left:auto;right:6%;transform:none;}
}

/* ==========================================================================
   Cocoon連携: 干渉リセット・Cocoon生成要素の再スタイル
   (親テーマCocoonの既定CSSは無効化しているが、Cocoonがコンテナ要素の
   width/padding/floatが新レイアウトと干渉しないよう、
   「Cocoon干渉リセット」で明示的に無効化している。
   ========================================================================== */
body{width:100% !important;max-width:100% !important;}
#container,#contents,#content,.container,.contents,
#main,#main-container,#wrapper{
  width:100% !important;max-width:100% !important;padding:0 !important;
  margin:0 !important;float:none !important;background:var(--paper) !important;
}
.entry-content,.post-content,.singular-entry-content{
  background:var(--paper) !important;
}

/* ---- Cocoon目次(TOC)の再デザイン ----
   目次自体はCocoonがthe_content()フィルターで自動生成するため、
   テンプレート側では何も呼び出す必要がない。ここでは見た目だけを
   新デザインのトーンに合わせている。 */
.toc-checkbox,#toc-checkbox,input[id="toc-checkbox"],.toc>input[type="checkbox"]{
  display:none !important;
}
#toc,.toc{
  background:var(--paper-raised) !important;
  border:1px solid var(--line) !important;
  border-top:2px solid var(--accent) !important;
  border-radius:0 0 6px 6px !important;
  padding:18px 24px 22px !important;
  margin:2em 0 !important;
  max-width:100% !important;
  box-shadow:none !important;
}
.toc-title,#toc .toc-title{
  font-family:var(--mono) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  color:var(--accent) !important;
  margin-bottom:12px !important;
  padding-bottom:10px !important;
  border-bottom:1px solid var(--line) !important;
  text-transform:uppercase !important;
  display:block !important;
}
.toc ol,.toc ul,#toc ol,#toc ul{
  list-style:none !important;padding:0 !important;margin:0 !important;
  counter-reset:toc-item !important;
}
.toc li,#toc li{
  font-size:14px !important;line-height:1.8 !important;padding:4px 0 !important;
  counter-increment:toc-item !important;
}
.toc>ol>li::before,.toc>ul>li::before,#toc>ol>li::before,#toc>ul>li::before{
  content:counter(toc-item) ". " !important;color:var(--accent) !important;font-weight:700 !important;
}
.toc a,#toc a{color:var(--ink-soft) !important;text-decoration:none !important;transition:color .18s !important;}
.toc a:hover,#toc a:hover{color:var(--accent) !important;}
.toc ol ol,.toc ul ul,#toc ol ol,#toc ul ul{
  counter-reset:toc-sub !important;padding-left:1.4em !important;margin-top:2px !important;
}
.toc ol ol li,.toc ul ul li,#toc ol ol li,#toc ul ul li{
  font-size:13px !important;padding:3px 0 !important;counter-increment:toc-sub !important;
}
.toc ol ol li::before,.toc ul ul li::before,#toc ol ol li::before,#toc ul ul li::before{
  content:counter(toc-sub) ". " !important;color:var(--ink-soft) !important;font-weight:400 !important;
}

/* ---- Cocoonブログカード(内部リンクの自動カード化)の再デザイン ----
   本文中に記事URLを単独で貼ると、Cocoonが自動でカード化する機能。
   マークアップ生成もCocoon任せのため、テンプレート側の対応は不要。 */
.blogcard-wrap{
  border:1px solid var(--line) !important;border-radius:4px !important;
  box-shadow:none !important;overflow:hidden !important;background:var(--paper-raised) !important;
  transition:border-color .2s,box-shadow .2s,transform .2s !important;margin:1.8em 0 !important;
}
.blogcard-wrap:hover{
  border-color:var(--accent) !important;transform:translateY(-2px) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.08) !important;
}
.blogcard{display:flex !important;align-items:stretch !important;padding:0 !important;
  border-left:0 !important;border-top:3px solid var(--accent) !important;border-radius:0 !important;
  min-height:96px !important;}
.blogcard-thumbnail{width:130px !important;min-width:130px !important;max-width:130px !important;
  height:auto !important;min-height:90px !important;float:none !important;margin:0 !important;
  padding:0 !important;overflow:hidden !important;flex-shrink:0 !important;}
.blogcard-thumbnail img{width:100% !important;height:100% !important;object-fit:cover !important;
  display:block !important;border-radius:0 !important;transition:transform .4s ease !important;}
.blogcard-wrap:hover .blogcard-thumbnail img{transform:scale(1.05) !important;}
.blogcard-content{flex:1 !important;padding:14px 20px !important;max-height:none !important;
  margin:0 !important;display:flex !important;flex-direction:column !important;
  justify-content:center !important;gap:6px !important;}
.blogcard-title{font-family:var(--serif) !important;font-size:14px !important;font-weight:700 !important;
  line-height:1.6 !important;color:var(--ink) !important;margin:0 !important;padding:0 !important;
  transition:color .18s !important;}
.blogcard-wrap:hover .blogcard-title{color:var(--accent) !important;}
.blogcard-snipet,.blogcard-snippet{display:none !important;}
.blogcard-footer{display:flex !important;align-items:center !important;gap:8px !important;
  position:static !important;margin:0 !important;padding:0 !important;}
.blogcard-site-name,.blogcard-domain{font-size:10px !important;color:var(--ink-soft) !important;letter-spacing:.08em !important;}
.blogcard-date{margin-left:auto !important;font-size:10px !important;color:var(--accent) !important;
  background:none !important;border:none !important;padding:0 !important;white-space:nowrap !important;letter-spacing:.1em !important;}
.blogcard-date::after{content:"\00a0記事を読む →" !important;}
@media (max-width:580px){
  .blogcard{flex-direction:column !important;}
  .blogcard-thumbnail{width:100% !important;min-width:100% !important;max-width:100% !important;height:130px !important;min-height:130px !important;}
  .blogcard-content{padding:12px 14px !important;}
}


/* ---- 料理ジャンルタイル(ごはんカテゴリーの第2フィルター) ----
   claude/food-archive-design-final.md: イラスト(現状はインラインSVG
   アイコンで代用)+ラベル+件数の縦積みカード。0件のジャンルは
   is-empty で非活性(破線ボーダー・グレースケール・「準備中」表示)にし、
   空のアーカイブには絶対にリンクしない。 */
.genre-tiles{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 6px;scrollbar-width:none;}
.genre-tiles::-webkit-scrollbar{display:none;}
.genre-tile{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;padding:12px 8px 10px;border-radius:16px;background:var(--paper-raised);border:1px solid var(--line);text-align:center;transition:border-color .15s,transform .15s,background .15s;}
a.genre-tile:hover{border-color:var(--accent);transform:translateY(-2px);}
.genre-tile-icon{width:38px;height:38px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;}
.genre-tile-label{font-size:12px;font-weight:600;color:var(--ink);}
.genre-tile-count{font-family:var(--mono);font-size:10px;color:var(--ink-soft);}
.genre-tile.is-current{border-color:var(--accent);background:var(--accent-tint);}
.genre-tile.is-current .genre-tile-icon{background:var(--accent);color:#fff;}
.genre-tile.is-empty{opacity:.5;border-style:dashed;cursor:default;}
.genre-tile.is-empty .genre-tile-icon{filter:grayscale(1);}

/* ---- ライド実績サマリー(ロードバイクカテゴリー専用) ----
   claude/bike-archive-design-final.md 4章: 総走行距離・総獲得標高・
   ライド回数・平均速度を自動集計して表示。モバイル2列×2行、
   PC(640px以上)は4列。 */
.ride-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px;}
.stat-cell{background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:16px 14px;text-align:center;}
.stat-value{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--ink);}
.stat-value .stat-unit{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-soft);margin-left:2px;}
.stat-label{font-size:12px;color:var(--ink);margin-top:2px;}
.stat-caption{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--ink-soft);margin-top:2px;}
@media (min-width:640px){
  .ride-stats{grid-template-columns:repeat(4,1fr);}
}

/* ---- 注目記事カード(ロードバイクカテゴリー。記事数が少ないうちの
   単独記事レイアウト) ---- */
.feature-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper-raised);box-shadow:0 6px 20px rgba(120,90,40,.08);margin-bottom:18px;transition:box-shadow .15s,transform .15s;}
.feature-card:hover{box-shadow:0 12px 28px rgba(120,90,40,.14);transform:translateY(-2px);}
.feature-card .thumb{aspect-ratio:4/3;}
.feature-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;}
.feature-card .title{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink);}
.feature-card .excerpt{font-size:13px;color:var(--ink-soft);line-height:1.8;margin:0;}
@media (min-width:640px){
  .feature-card{flex-direction:row;}
  .feature-card .thumb{width:42%;aspect-ratio:auto;flex:none;}
  .feature-card .body{flex:1;justify-content:center;}
}

/* ---- 更新予告ノート(ロードバイクカテゴリー。ページネーションの代わり) ---- */
.update-note{border:1.5px dashed var(--line-strong);border-radius:14px;padding:20px;text-align:center;margin-top:24px;background:var(--accent-tint);}
.update-note p{font-size:13px;color:var(--ink-soft);margin:0 0 12px;line-height:1.8;}
.update-note a{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--accent);border:1px solid var(--accent);padding:7px 16px;border-radius:999px;transition:background .15s,color .15s;}
.update-note a:hover{background:var(--accent);color:#fff;}


/* ---- フォトギャラリーページ: カテゴリー別フィルター ----
   claude/gallery-archive-design-final.md: 都道府県フィルターと同じ
   「横スクロールピル」の文法だが、カテゴリーごとにヘッダーの
   カテゴリーピルと同じブランドカラーで色分けする。クリックはJSによる
   表示切り替えのみで画像の再取得を伴わないため、Core Web Vitals
   (特にINP)への悪影響がない。 */
.cat-filter-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.cat-filter-wrap::-webkit-scrollbar{display:none;}
.cat-filter{display:flex;gap:8px;width:max-content;padding:2px 2px 14px;}
.cat-filter-pill{--pill-color:var(--ink);flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);background:var(--paper-raised);border:1px solid var(--line-strong);padding:7px 14px;border-radius:999px;transition:background .15s,color .15s,border-color .15s;cursor:pointer;}
.cat-filter-pill:hover{border-color:var(--pill-color);color:var(--pill-color);}
.cat-filter-pill.active{background:var(--pill-color);color:#fff;border-color:var(--pill-color);}
.cat-filter-pill .n{opacity:.7;font-size:10px;}

/* ---- フォトギャラリーページ: 写真グリッド+ライトボックス ----
   JS不要のcheckbox方式ライトボックス(:checked ~ セレクタ)で拡大表示を
   実装。追加のライブラリ・画面遷移が発生しないためLCP・INP・CLSの
   いずれにも悪影響を与えない。クリックした写真の元記事へのリンクを
   併記して回遊性を確保する。
   ※トップページの簡易プレビュー(.gallery-grid/.g-item)とは別物のため
   クラス名を分けている(.photo-grid/.photo-item)。 */
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.photo-item{position:relative;}
.gallery-tile{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:1/1;box-shadow:0 2px 8px rgba(120,90,40,.06);cursor:pointer;transition:box-shadow .15s,transform .15s;}
.gallery-tile:hover{box-shadow:0 10px 24px rgba(120,90,40,.14);transform:translateY(-2px);}
.gallery-tile .ov{position:absolute;inset:0;background:linear-gradient(0deg, rgba(20,16,10,.8) 0%, rgba(20,16,10,0) 58%);}
.gallery-tile .txt{position:absolute;left:0;right:0;bottom:0;padding:10px 11px;color:#fff;}
.g-badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;color:#fff;padding:3px 9px;border-radius:999px;}
.g-loc{display:flex;align-items:center;gap:4px;font-size:11px;margin-top:6px;line-height:1.4;color:#fff;}
.g-loc svg{flex:none;}

.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s;}
.lb-toggle:checked ~ .lightbox{opacity:1;pointer-events:auto;}
.lb-backdrop{position:absolute;inset:0;background:rgba(15,12,8,.86);cursor:pointer;}
.lb-panel{position:relative;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;background:var(--paper-raised);border-radius:16px;overflow-x:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);}
.lb-panel img{width:100%;height:auto;max-height:56vh;object-fit:cover;display:block;}
.lb-info{padding:16px 18px 20px;}
.lb-loc{font-family:var(--serif);font-weight:700;font-size:15px;margin:9px 0 4px;color:var(--ink);}
.lb-link{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-family:var(--mono);font-size:12px;color:#fff;background:var(--accent);padding:9px 16px;border-radius:999px;transition:background .15s;}
.lb-link:hover{background:#4a5c40;}
.lb-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(20,16,10,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;backdrop-filter:blur(2px);z-index:1;}

.gallery-note{font-size:12.5px;color:var(--ink-soft);font-style:italic;border-left:3px solid var(--line-strong);padding:2px 0 2px 14px;margin:20px 0 0;}

@media (min-width:640px){
  .photo-grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:900px){
  .photo-grid{grid-template-columns:repeat(4,1fr);gap:16px;}
}