:root{
    --bg:#F4F5F1;
    --bg-deep:#ECEEE7;
    --card:#FFFFFF;
    --ink:#16233A;
    --ink-soft:#57626F;
    --ink-faint:#8B9199;
    --line:#E2E4DC;
    --line-soft:#EAEBE3;
    --trust:#1D3557;
    --trust-deep:#0F2038;
    --cta:#E8542B;
    --cta-deep:#A6431E;
    --gold:#C99A3E;
    --cream:#F4EDE1;
    --slate:#33424F;

    /* ===== 共通spacing system(デスクトップ既定値) =====
       サイト全体で「同じ種類のUIは同じ余白」を保証するための変数群。
       ページ個別にpx値を書くのではなく、必ずこの変数を参照すること。 */
    --space-page-x:28px;      /* ページ横方向の基本余白(Header/Hero/一覧/Hub共通) */
    --space-section-y:24px;   /* セクション間の縦方向の間隔 */
    --space-list-row-y:14px;  /* article-list 1行あたりの上下padding */
    --space-list-gap:14px;    /* thumbnailとtext本文の間隔 */
  }
  @media (max-width:640px){
    :root{
      --space-page-x:16px;     /* モバイルはページ横方向の余白をすべて16pxに統一 */
      --space-section-y:16px;
      --space-list-row-y:10px; /* 記事一覧の密度をモバイルではさらに上げる */
      --space-list-gap:10px;
    }
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Zen Kaku Gothic New', sans-serif;
    font-feature-settings:"palt"; letter-spacing:.01em;
    -webkit-font-smoothing:antialiased;
  }
  .serif{font-family:'Shippori Mincho', serif;}
  a{color:inherit;} img,svg{display:block;}

  /* ===== HEADER ===== */
  header{border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--bg-deep), var(--bg) 85%); overflow:hidden; position:relative;}
  .wave-deco{position:absolute; right:-30px; top:-50px; width:320px; opacity:.5; z-index:0;}
  .head-inner{
    max-width:1160px; margin:0 auto; padding:18px var(--space-page-x); position:relative; z-index:1;
    display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  }
  .brand-block{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;}
  .brand-link{display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit; flex:1; min-width:0;}
  .brand-mark{width:52px; height:52px; flex-shrink:0; object-fit:contain;}
  .brand-text{flex:1; min-width:0;}
  .brand-name{font-size:26px; font-weight:600; letter-spacing:.04em; line-height:1; white-space:nowrap;}
  .brand-tagline{margin-top:6px; font-size:11.5px; letter-spacing:.06em; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .head-meta{text-align:right; font-size:12px; color:var(--ink-faint); letter-spacing:.05em; line-height:1.8;}
  .head-meta b{color:var(--trust); font-weight:700;}

  .head-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}
  .head-icon-btn{
    display:flex; align-items:center; justify-content:center; width:38px; height:38px;
    border-radius:50%; border:none; background:transparent; color:var(--trust); cursor:pointer;
    text-decoration:none; transition:background .15s;
  }
  .head-icon-btn:hover{background:var(--bg-deep);}
  .head-icon-btn svg{width:21px; height:21px;}

  .nav-menu-panel{border-top:1px solid var(--line-soft); background:var(--card);}
  .nav-menu-inner{max-width:1160px; margin:0 auto; padding:18px var(--space-page-x); display:flex; gap:40px; flex-wrap:wrap;}
  .nav-menu-label{font-size:11px; color:var(--ink-faint); letter-spacing:.08em; margin-bottom:10px;}
  .nav-menu-links{display:flex; flex-wrap:wrap; gap:8px 16px;}
  .nav-menu-links a{font-size:13.5px; color:var(--ink); text-decoration:none;}
  .nav-menu-links a:hover{color:var(--trust); text-decoration:underline;}

  .mission-strip{border-top:1px solid var(--line-soft); background:var(--bg);}
  .mission-inner{max-width:760px; margin:0 auto; padding:22px var(--space-page-x); text-align:center;}
  .mission-tagline{font-size:20px; font-weight:700; color:var(--ink); margin:0 0 8px;}
  .mission-text{font-size:15px; line-height:1.9; color:var(--ink-soft); margin:0;}
  .mission-text strong{color:var(--trust); font-weight:700;}

  /* ===== HERO(トップページのみ) ===== */
  .hero{position:relative; overflow:hidden; background:var(--trust-deep);}
  .hero-visual{
    width:100%; height:280px; object-fit:cover; display:block;
    object-position:center 45%; /* 富士山・江の島・水平線が収まる位置(desktop既定) */
  }
  .hero-overlay{
    position:absolute; inset:0; display:flex; align-items:center;
    /* 実写真(明るい海・空)を暗くしすぎないよう、Hero差し替え後にopacityを弱めた。
       文字の可読性はtext-shadowと合わせて確保する。 */
    background:linear-gradient(180deg, rgba(15,32,56,.10) 0%, rgba(15,32,56,.40) 100%);
  }
  .hero-inner{max-width:1160px; margin:0 auto; padding:0 var(--space-page-x); width:100%;}
  .hero-tagline{color:#fff; font-size:30px; font-weight:700; margin:0 0 12px; line-height:1.4; text-shadow:0 2px 14px rgba(0,0,0,.55);}
  .hero-sub{color:#EEF3F6; font-size:14px; line-height:1.85; margin:0; text-shadow:0 1px 10px rgba(0,0,0,.5);}

  /* ===== カテゴリーナビゲーション(トップページのみ) =====
     デスクトップは横一列(7個とも余裕で収まる幅のため)。
     モバイルは後述のmedia queryで4列×2段のgridに切り替え、
     横スクロールなしで7カテゴリー全部を一目で見せる。 */
  .cat-nav{background:var(--card); border-bottom:1px solid var(--line-soft);}
  .cat-nav-track{
    max-width:1160px; margin:0 auto; padding:16px var(--space-page-x);
    display:flex; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .cat-nav-track::-webkit-scrollbar{display:none; height:0;}
  .cat-nav-item{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; width:64px;}
  .cat-nav-icon{
    width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .cat-nav-icon svg{width:24px; height:24px;}
  .cat-nav-label{font-size:11px; color:var(--ink-soft); white-space:nowrap; text-align:center;}

  @media (max-width:760px){ .brand-name{font-size:27px;} }

  /* ===== FILTER BAR(エリア検索・キーワード絞り込みのみ。カテゴリーは上部のcat-navへ集約) ===== */
  .filterbar{background:rgba(244,245,241,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);}
  .filter-inner{max-width:1160px; margin:0 auto; padding:10px var(--space-page-x); display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
  .chip-row{display:flex; gap:8px; flex-wrap:wrap;}
  .chip{font-size:13px; padding:7px 15px; border-radius:3px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); cursor:pointer; letter-spacing:.03em; transition:.15s; white-space:nowrap;}
  .chip:hover{border-color:var(--cta);}
  .chip.active{background:var(--cta); color:#fff; border-color:var(--cta-deep);}
  .filter-right{display:flex; align-items:center; gap:10px; margin-left:auto;}
  select, input[type=text]{font-family:'Zen Kaku Gothic New',sans-serif; font-size:13px; padding:7px 10px; border-radius:3px; border:1px solid var(--line); background:var(--card); color:var(--ink);}
  input[type=text]{width:190px;}
  input[type=text]:focus, select:focus{outline:2px solid var(--cta);}

  /* ===== コンテンツレイアウト ===== */
  main{max-width:1300px; margin:0 auto; padding:24px var(--space-page-x) 80px;}
  /* ハブページ(area/category/pagination)の<main>は左右paddingを持たせない。
     .hub-page-wrapが既に同じvar(--space-page-x)を左右paddingとして持っているため、
     main側でも重ねると「main 16px + hub-page-wrap 16px = 実質32px」のように
     二重加算されてしまう(TOPページはcontent-mainに追加paddingが無いためこの
     問題が起きず、Category/Areaだけ余白が広く見える原因になっていた)。
     全breakpoint共通でmain側を0にし、.hub-page-wrap側だけを唯一の余白源にする。 */
  .hub-main{padding-left:0; padding-right:0;}
  .content-layout{display:block;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
  .section-title{font-size:18px; margin:0;}
  #resultCount{font-size:12px; color:var(--ink-faint); margin:0; letter-spacing:.03em;}

  /* ===== 新着記事一覧・関連記事(コンパクトな横リスト型) =====
     大きなカードUIをやめ、[thumbnail][category badge+headline+date][>]の
     横1行リストにする。1画面で3〜5記事程度を確認できる情報密度を狙う。
     カード間はshadow付きの大きなmarginではなく、薄いdividerで区切る。 */
  .article-list{display:flex; flex-direction:column;}
  .list-item{
    display:flex; align-items:center; gap:var(--space-list-gap); padding:var(--space-list-row-y) 0;
    text-decoration:none; color:inherit; border-bottom:1px solid var(--line-soft);
  }
  .list-item:first-child{padding-top:2px;}
  .list-item-icon{
    width:60px; height:60px; flex-shrink:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .list-item-icon svg{width:26px; height:26px;}
  .list-item-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
  .list-item-meta{display:flex; align-items:center; gap:6px;}
  .list-item-badge{color:#fff; font-size:9.5px; font-weight:700; padding:1px 7px; border-radius:3px; letter-spacing:.02em; white-space:nowrap;}
  .list-item-area{font-size:10.5px; color:var(--ink-faint);}
  .list-item-title{
    font-size:13.5px; line-height:1.45; color:var(--ink); font-weight:600;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .list-item-date{font-size:10.5px; color:var(--ink-faint);}
  .list-item-chevron{flex-shrink:0; font-size:18px; color:var(--ink-faint); line-height:1;}
  .empty-state{text-align:center; padding:60px 20px; color:var(--ink-faint); font-size:14px; border:1px dashed var(--line); border-radius:4px;}

  /* ===== MODAL ===== */
  .overlay{position:fixed; inset:0; background:rgba(15,20,25,.6); z-index:100; display:none; align-items:flex-start; justify-content:center; padding:5vh 20px; overflow-y:auto;}
  .overlay.open{display:flex;}
  .modal{background:#fff; max-width:760px; width:100%; border-radius:4px; margin-bottom:5vh; box-shadow:0 30px 60px rgba(0,0,0,.28);}
  .modal-art{height:230px; position:relative; overflow:hidden;}
  .modal-art img{width:100%; height:100%; object-fit:cover; display:block;}
  .modal-art-badge{
    position:absolute; left:16px; top:16px; color:#fff; font-size:12px; font-weight:700;
    padding:5px 13px; border-radius:3px; letter-spacing:.02em;
  }
  .modal-close{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9); border:none; cursor:pointer; font-size:16px; color:var(--ink); display:flex; align-items:center; justify-content:center; z-index:2;}
  .modal-body{padding:30px 36px 40px;}
  .modal-eyebrow{font-size:11.5px; color:var(--ink-faint); display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .modal-eyebrow-date{color:var(--ink-faint); letter-spacing:.03em;}
  .modal-eyebrow-badge{color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:3px;}
  .modal-eyebrow-area{background:var(--bg-deep); color:var(--ink-soft);}
  .modal-title{font-family:'Shippori Mincho',serif; font-size:26px; font-weight:700; margin:10px 0 6px; line-height:1.5; color:var(--trust);}
  .modal-dek{font-size:13.5px; color:var(--ink-soft); margin-bottom:16px; line-height:1.8; border-left:3px solid var(--cta); padding-left:12px;}
  .modal-text{font-size:14.5px; line-height:2.1; color:var(--ink); white-space:pre-line; text-align:justify; text-justify:inter-character;}
  .modal-tags{margin-top:24px; display:flex; gap:8px; flex-wrap:wrap;}
  .tag-pill{font-size:11px; color:var(--ink-soft); border:1px solid var(--line); padding:4px 11px; border-radius:20px;}

  /* ===== Share row(X / Facebook / LINE / リンクをコピー) ===== */
  .share-row{display:flex; gap:10px; margin:4px 0 22px;}
  .share-btn{
    display:flex; align-items:center; justify-content:center; width:36px; height:36px;
    border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
    cursor:pointer; transition:.15s;
  }
  .share-btn svg{width:16px; height:16px;}
  .share-btn:hover{border-color:var(--trust); color:var(--trust);}
  .share-btn-x{background:#000; border-color:#000; color:#fff;}
  .share-btn-x:hover{background:#1a1a1a; color:#fff; border-color:#1a1a1a;}
  .share-btn-fb{background:#1877F2; border-color:#1877F2; color:#fff;}
  .share-btn-line{background:#06C755; border-color:#06C755; color:#fff;}
  .share-btn-fb:hover{background:#1877F2; color:#fff; border-color:#1877F2;}
  .share-btn-line:hover{background:#06C755; color:#fff; border-color:#06C755;}
  .share-btn-copied{background:var(--trust); color:#fff; border-color:var(--trust);}

  /* ===== FOOTER ===== */
  footer{border-top:1px solid var(--line); background:var(--bg-deep); padding:0 0 34px; position:relative; overflow:hidden;}
  .foot-wave{width:100%; height:60px; display:block; position:relative;}
  .foot-inner{max-width:1160px; margin:0 auto; padding:8px var(--space-page-x) 0; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .foot-closing{flex-basis:100%; text-align:center; padding-bottom:24px; border-bottom:1px solid var(--line); margin-bottom:24px;}
  .foot-closing-text{font-size:22px; color:var(--trust); line-height:1.5; margin:0 0 14px;}
  .foot-closing .sns-row{justify-content:center; margin-top:0;}
  .foot-mission{max-width:540px; font-size:13px; line-height:1.9; color:var(--ink-soft);}
  .foot-mission .serif{font-size:17px; color:var(--ink); display:block; margin-bottom:8px;}
  .foot-note{font-size:11.5px; color:var(--ink-faint); line-height:1.9; max-width:320px;}
  .foot-links a{color:var(--ink-soft); text-decoration:underline; margin-right:12px; cursor:pointer;}
  .foot-links a:hover{color:var(--trust);}
  .static-modal-body{padding:34px 38px 44px; font-size:13.5px; line-height:2; color:var(--ink);}
  .static-modal-body h3{font-family:'Shippori Mincho',serif; font-size:21px; margin:26px 0 10px;}
  .static-modal-body h3:first-child{margin-top:0;}
  .static-modal-body p{margin:0 0 12px;}
  .static-modal-close{position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; background:var(--bg-deep); border:none; cursor:pointer; font-size:16px; color:var(--ink); display:flex; align-items:center; justify-content:center;}

  /* ===== SNS follow icons ===== */
  .sns-row{display:flex; gap:8px; margin-top:10px;}
  .sns-icon{
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:.15s; flex-shrink:0;
  }
  .sns-icon:hover{transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,.18);}
  .sns-icon svg{width:15px; height:15px;}

  /* ===== PICK UP carousel (松プラン想定スロット) ===== */
  .pickup-section{max-width:1160px; margin:var(--space-section-y) auto 0; padding:0 var(--space-page-x);}
  .pickup-section-title{font-size:15px; font-weight:700; color:var(--ink); margin-bottom:12px; font-family:'Shippori Mincho',serif;}
  .pickup-viewport{
    position:relative;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:2px 0 18px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .pickup-viewport::-webkit-scrollbar{ display:none; height:0; }
  .pickup-track{
    display:flex; gap:18px;
  }
  .pickup-card{
    flex:0 0 auto; width:min(560px,86vw);
    scroll-snap-align:center; scroll-snap-stop:always;
    background:var(--card); border-radius:8px; overflow:hidden; cursor:pointer;
    opacity:.4; transform:scale(.94); transition:opacity .3s, transform .3s;
    box-shadow:0 4px 16px rgba(15,32,56,.06);
    text-decoration:none; color:inherit;
  }
  .pickup-card.active{ opacity:1; transform:scale(1); box-shadow:0 14px 34px rgba(15,32,56,.14); }
  .pickup-card-img{position:relative; height:230px; overflow:hidden;}
  .pickup-card-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .pickup-card-img .pickup-tag{position:absolute; left:14px; top:14px;}
  .pickup-card-body{padding:16px 20px 20px;}
  .pickup-tag{color:#fff; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:3px;}
  .pickup-area{font-size:11.5px; color:var(--ink-faint);}
  .pickup-card-title{font-family:'Shippori Mincho',serif; font-weight:700; font-size:17px; line-height:1.5; margin-bottom:8px;}
  .pickup-card-dek{font-size:12.5px; color:var(--ink-soft); line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .pickup-card-meta{display:flex; gap:10px; align-items:center; margin-top:10px; font-size:11px; color:var(--ink-faint);}
  .pickup-date{color:var(--ink-faint);}

  .pickup-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px;}
  .pickup-arrow{
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--card);
    color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:.15s; flex-shrink:0;
  }
  .pickup-arrow:hover{border-color:var(--trust); color:var(--trust);}
  .pickup-dots{display:flex; gap:7px; align-items:center;}
  .pickup-dot{width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:.2s; flex-shrink:0;}
  .pickup-dot.active{background:var(--trust); width:20px; border-radius:5px;}

  @media (max-width:640px){
    .pickup-card{width:86vw;}
    .pickup-card-img{height:180px;}
    /* main/.filter-inner/.mission-inner/.hub-page-wrap/.head-inner/.nav-menu-inner/
       .cat-nav-track/.hero-inner の左右paddingは、:root内のvar(--space-page-x)が
       このmedia query内で16pxに再定義されるため、ここで個別に上書きする必要はない
       (共通spacing systemに一本化)。ここでは、それ以外の付加的な調整のみ行う。 */
    /* 記事ページの<main>だけは左右paddingを0にする。
       main{}のvar(--space-page-x)は記事一覧・ハブページ用で、記事ページでこれが
       article-page-wrap/modal-bodyのpaddingと二重に加算されないようにする
       (main 16px + article-page-wrap 0 + modal-body 16px = 実質32pxになっていた問題の修正)。
       クラスセレクタのためmain{}より詳細度が高く、常にこちらが優先される。 */
    .article-main{padding-left:0; padding-right:0;}
    .filter-inner{justify-content:flex-end;}
    /* カテゴリーナビゲーション: 横スクロール式だと「イベント」「暮らし」等が
       画面外に隠れてしまうため、モバイルでは4列×2段のgridに切り替え、
       7カテゴリー全部をスクロールなしで一目に表示する。 */
    .cat-nav-track{
      display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
      overflow-x:visible;
      row-gap:14px; column-gap:4px;
    }
    .cat-nav-item{width:100%; min-width:0; justify-self:stretch;}
    .cat-nav-icon{width:48px; height:48px; margin:0 auto;}
    .cat-nav-icon svg{width:21px; height:21px;}
    .cat-nav-label{font-size:10px; max-width:100%; overflow:hidden; text-overflow:ellipsis;}

    /* ヘッダーはロゴ+ブランド名+タグラインを左、検索/メニューアイコンを右に
       配置するだけのシンプルな1段構成になったため(SNS列は撤去済み)、
       複雑な折り返しは不要。ブランド名のサイズだけモバイル用に少し落とす。 */
    .brand-mark{width:42px; height:42px;}
    .brand-name{font-size:22px;}
    .brand-tagline{font-size:10.5px;}
    .head-inner{gap:8px;}

    /* Hero(トップページ)をモバイル向けに少しコンパクトにする */
    /* Mobileは横幅に対して高さが低く、実質ほぼ元画像そのままに近い比率になるため、
       富士山・江の島が収まる位置をやや高め(42%)に設定。 */
    .hero-visual{height:220px; object-position:center 42%;}
    .hero-tagline{font-size:23px;}
    .hero-sub{font-size:12.5px;}

    /* 記事カード(.modal)をviewportに対してほぼ全幅にする。
       article-page-wrap自体の左右paddingは無くし、その代わりに
       breadcrumb/related-articles/back-to-topなど「カードの外側」の
       各要素へ個別にvar(--space-page-x)のpaddingを持たせることで、
       カードの白背景はviewport端まで広がりつつ、テキスト位置は揃った状態を保つ。 */
    /* 記事ページ全体(外側wrapper〜白いカード)の背景色をモバイルでは統一し、
       「別の色のページに白いカードが浮いている」ように見えないようにする。
       ハブページ(area/category)はこの対象に含めない(元々カード構造を持たず、
       ページ全体がbodyの背景色のままで正しく機能しているため)。 */
    .article-page-wrap{padding-left:0; padding-right:0; background:var(--card);}
    .modal-body{padding-left:var(--space-page-x); padding-right:var(--space-page-x);}
    .breadcrumb{padding-left:var(--space-page-x); padding-right:var(--space-page-x);}
    .related-articles{padding-left:var(--space-page-x); padding-right:var(--space-page-x);}
    .back-to-top{margin-left:var(--space-page-x);}
    /* カードの縁取り(border)を外し、背景色との境界を目立たなくする。
       ブランドカラー・box-shadowの仕様自体は変更しない(元々box-shadow:noneのまま)。*/
    .article-modal-static{border:none; border-radius:0;}
    .modal-art{height:200px;}
    .modal-title{font-size:21px;}
  }

  @media (max-width:400px){
    .pickup-card{width:90vw;}
  }

  /* ===== modal official-link / video ===== */
  .modal-linkbtn{
    display:inline-flex; align-items:center; gap:6px; margin-top:18px;
    font-size:12.5px; font-weight:700; color:#fff; background:var(--trust);
    padding:9px 18px; border-radius:3px; text-decoration:none; letter-spacing:.03em;
  }
  .modal-linkbtn:hover{background:var(--trust-deep);}
  .modal-infobox{background:var(--bg-deep); border-radius:4px; padding:16px 18px; margin:24px 0 20px;}
  .modal-info-row{display:flex; gap:10px; font-size:13px; line-height:1.7; color:var(--ink); margin-bottom:6px;}
  .modal-info-row:last-child{margin-bottom:0;}
  .modal-info-label{flex-shrink:0; width:64px; font-size:11px; color:var(--ink-faint); font-weight:700; letter-spacing:.04em; padding-top:2px;}
  .modal-info-row a{color:var(--trust); text-decoration:underline;}
  .modal-sns-row{display:flex; gap:8px; flex-wrap:wrap;}
  .modal-sns-row .modal-sns-chip{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; color:#fff;
    text-decoration:none; flex-shrink:0;
  }
  .modal-sns-row .modal-sns-chip svg{display:block;}
  .modal-map{width:100%; height:220px; border:0; border-radius:4px; margin-bottom:20px; display:block;}
  .modal-video{position:relative; width:100%; padding-top:56.25%; margin-top:20px; background:#000; border-radius:3px; overflow:hidden;}
  .modal-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

  /* ===== related housing block (暮らし記事の下に表示) ===== */
  .related-estate{
    margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft);
  }
  .related-estate-label{font-size:11px; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:8px;}
  .related-estate-btn{
    display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
    color:var(--ink); background:var(--bg-deep); border:1px solid var(--line);
    padding:9px 16px; border-radius:3px; cursor:pointer;
  }
  .related-estate-btn:hover{border-color:var(--trust); color:var(--trust);}

/* ===== 記事個別ページ用(1記事1URL化: Phase 1で追加) ===== */
.article-page-wrap{max-width:760px; margin:0 auto; padding:28px 20px 60px;}
.back-to-top{display:inline-block; font-size:12.5px; color:var(--ink-soft); text-decoration:none; margin-bottom:14px;}
.back-to-top:hover{color:var(--trust);}
.article-modal-static{box-shadow:none; border:1px solid var(--line-soft);}
.breadcrumb{font-size:11.5px; color:var(--ink-faint); margin-bottom:10px;}
.breadcrumb a{color:var(--ink-faint); text-decoration:underline;}
a.card{text-decoration:none; color:inherit;}

/* ===== 関連記事(Phase 3) ===== */
.related-articles{margin-top:32px; padding-top:24px; border-top:1px solid var(--line-soft);}
.related-articles-title{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:14px;}
.related-articles-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
@media (max-width:520px){ .related-articles-grid{grid-template-columns:1fr;} }
.related-card{display:flex; gap:10px; text-decoration:none; color:inherit; border:1px solid var(--line-soft); border-radius:4px; overflow:hidden; transition:.15s;}
.related-card:hover{border-color:var(--trust); box-shadow:0 4px 10px rgba(15,32,56,.08);}
.related-card-art{width:84px; flex-shrink:0;}
.related-card-art svg{width:100%; height:100%; display:block;}
.related-card-body{padding:8px 10px 8px 0; display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0;}
.related-card-eyebrow{font-size:10px; color:var(--ink-faint);}
.related-card-title{font-size:12.5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* ===== パンくずリスト(Phase 3で強化: 実リンク化) ===== */
.breadcrumb{font-size:11.5px; color:var(--ink-faint); margin-bottom:14px; display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.breadcrumb a{color:var(--ink-faint); text-decoration:underline;}
.breadcrumb a:hover{color:var(--trust);}
.breadcrumb-sep{opacity:.5; margin:0 2px;}
.breadcrumb span[aria-current]{color:var(--ink-soft);}

/* ===== ページネーション(Phase 3) ===== */
.pagination{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:28px 0 10px;}
.pagination-link{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px;
  padding:0 10px; border-radius:3px; border:1px solid var(--line); background:var(--card);
  color:var(--ink-soft); font-size:13px; text-decoration:none; transition:.15s;
}
.pagination-link:hover{border-color:var(--trust); color:var(--trust);}
.pagination-link.active{background:var(--cta); color:#fff; border-color:var(--cta-deep);}

/* ===== 地域/カテゴリハブページ(Phase 3) ===== */
.hub-page-wrap{max-width:1160px; margin:0 auto; padding:28px var(--space-page-x) 60px;}
.hub-page-wrap-top{padding-bottom:14px;}
.hub-page-wrap-bottom{padding-top:14px;}
.hub-hero{width:100%; height:180px; object-fit:cover; display:block;}
.hub-heading-row{display:flex; align-items:center; gap:14px; margin:6px 0 6px;}
.hub-heading-icon{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.hub-heading-icon svg{width:20px; height:20px;}
.hub-heading-row .hub-title{margin:0;}
.hub-title{font-size:26px; margin:6px 0 6px;}
.hub-subtitle{font-size:13px; color:var(--ink-soft); margin-bottom:24px;}

/* Phase 3: カテゴリチップは実リンクの<a>に変更したため、通常状態のスタイルのみ使う */
.chip{text-decoration:none; display:inline-block;}

/* ===== フッター内「エリアから探す」リンク(Phase 3追加分) ===== */
.foot-area-links{margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.foot-area-links-label{font-size:11px; color:var(--ink-faint); letter-spacing:.04em; margin-right:2px;}
.foot-area-links a{font-size:12px; color:var(--ink-soft); text-decoration:underline;}
.foot-area-links a:hover{color:var(--trust);}

/* ===== 終了イベントバナー(Phase 4: Event Lifecycle v1) ===== */
.event-ended-banner{
  display:inline-block; font-size:12.5px; font-weight:700; color:#8a4b12;
  background:#FBEBD1; border:1px solid #E8C98A; border-radius:4px;
  padding:8px 12px; margin:10px 0 4px;
}

/* ======================================================================
   RESPONSIVE BREAKPOINT SYSTEM(明示的な3層構成)
   ------------------------------------------------------------------
   Mobile   : < 640px            (上部の @media (max-width:640px) 群)
   Tablet   : 640px – 1023px     (このブロック)
   Desktop  : >= 1024px          (このブロック直後)
   ------------------------------------------------------------------
   「840pxをそのまま引き伸ばしたデスクトップ」にならないよう、
   Tabletだけの調整値をここに集約する。既存の無条件ルール(media query
   無し)は主にDesktop向けの既定値として機能しているため、Desktop側は
   最小限の追加のみで足りる。
   ====================================================================== */

@media (min-width:640px) and (max-width:1023px){
  /* Header: ロゴ/タイトル/タグラインの余白をモバイルより広く */
  .head-inner{padding-top:22px; padding-bottom:22px;}

  /* Hero: モバイルの220pxとデスクトップの280pxの中間、Tabletらしい比率に */
  .hero-visual{height:320px; object-position:center 44%;}
  .hero-tagline{font-size:27px;}

  /* Category Navigation: 7個を1列で表示(4+3のgridはモバイル専用) */
  /* (min-width:640px なので、上のmax-width:640pxのgridルールは適用されず、
     自動的にデフォルトのflex横一列ルールが使われる。追加調整は無し) */

  /* PICK UP: モバイルの86vwより少し小さく、2枚目の存在が分かるサイズに */
  .pickup-card{width:min(480px, 62vw);}
  .pickup-card-img{height:210px;}

  /* Article list: サムネイルをモバイルより少し大きく */
  .list-item-icon{width:72px; height:72px;}
  .list-item-icon svg{width:30px; height:30px;}
  .list-item-title{font-size:14.5px;}

  /* コンテンツ幅: Desktopの1300px/1160pxよりTabletに合わせて少し狭く */
  main{max-width:900px;}
  .hub-page-wrap{max-width:820px;}
  .hero-inner, .cat-nav-track, .pickup-section, .filter-inner{max-width:900px;}
}

@media (min-width:1024px){
  /* Desktop: PCの画面幅を活かす。中央max-widthは既存の無条件ルール
     (main:1300px, hub-page-wrap/hero-inner/cat-nav-track/pickup-section:1160px)
     をそのまま使うため、ここでは「Tabletより明確に広い」ことを保証する
     追加のみ行う。1440px幅で本文がいっぱいに伸びることは無い
     (article-page-wrap/modalはmax-width:760pxで別途頭打ちにしている)。 */
  .hero-visual{height:380px; object-position:center 46%;}
  .hero-tagline{font-size:34px;}
  .pickup-card{width:min(560px, 40vw);}
}

/* Editorial inline images */
.modal-text p{margin:0 0 1.35em}
.article-inline-image{margin:1.8rem 0 2rem}
.article-inline-image img{display:block;width:100%;height:auto;border-radius:12px}
.article-inline-image figcaption{margin-top:.55rem;font-size:.82rem;line-height:1.6;color:#6b7280}

/* User-supplied editorial photos: preserve the full frame instead of cropping. */
.modal-art:has(> img[src*="/assets/images/articles/"]){height:auto;background:#f4f4f2;overflow:visible}
.modal-art:has(> img[src*="/assets/images/articles/"]) > img{width:100%;height:auto;object-fit:contain;display:block}
.pickup-card-img:has(> img[src*="/assets/images/articles/"]){background:#f4f4f2}
.pickup-card-img:has(> img[src*="/assets/images/articles/"]) > img{object-fit:contain}

/* Drawer navigation: shared across desktop, tablet and mobile */
.nav-menu-scrim[hidden]{display:none!important}
.nav-menu-scrim{position:fixed;inset:0;background:rgba(15,32,56,.48);z-index:1000}
.nav-menu-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);max-width:100%;overflow-y:auto;background:var(--card);z-index:1001;box-shadow:-16px 0 46px rgba(0,0,0,.12);transform:translateX(105%);transition:transform .25s ease;border-top:0;visibility:hidden}
.nav-menu-panel.is-open{transform:translateX(0);visibility:visible}
.nav-menu-panel .nav-menu-inner{display:flex;flex-direction:column;gap:26px;max-width:none;padding:32px 26px}
.nav-menu-close{align-self:flex-end;cursor:pointer;font-size:30px;border:0;background:transparent;color:var(--ink);padding:2px 8px}
.nav-menu-panel .nav-menu-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.nav-menu-panel .nav-menu-links a{font-size:15px;padding:7px 0}
body.drawer-open{overflow:hidden}
.foot-note a.footer-email{color:inherit;text-decoration:none!important;overflow-wrap:anywhere}
.foot-note a.footer-email:hover{text-decoration:none!important;color:var(--trust)}
@media(prefers-reduced-motion:reduce){.nav-menu-panel{transition:none}}

/* New unified top-page navigation */
.area-nav{background:var(--card);border-bottom:1px solid var(--line-soft)}.area-nav-inner{max-width:1160px;margin:auto;padding:20px var(--space-page-x)}.area-nav-title{font-size:16px;margin:0 0 15px}.area-nav-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.area-nav-item,.nav-cat-link{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;min-width:0}.area-nav-icon{display:flex;align-items:center;justify-content:center;border:2px solid var(--area-color);color:var(--area-color);background:white;border-radius:50%;height:54px;width:54px;flex-shrink:0}.area-nav-icon svg{height:25px;width:25px}.area-nav-label,.nav-icon-label{font-size:12px;color:var(--ink-soft);white-space:nowrap}.nav-menu-panel .nav-menu-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 3px}.nav-menu-panel .nav-menu-links a{padding:0}.nav-menu-panel .cat-nav-icon{width:43px;height:43px}.nav-menu-panel .cat-nav-icon svg{width:21px;height:21px}.nav-menu-panel .area-nav-icon{width:44px;height:44px}.nav-menu-panel .area-nav-icon svg{width:23px;height:23px}.nav-menu-panel .area-nav-label,.nav-menu-panel .nav-icon-label{font-size:10px}.nav-submit-pending{border-top:1px solid var(--line-soft);padding:16px 0 0;display:flex;flex-direction:column;gap:4px;font-weight:700}.nav-submit-pending small{font-weight:400;font-size:11px;color:var(--ink-faint)}.list-item-icon{border-radius:8px;overflow:hidden}.list-item-photo{height:100%;width:100%;object-fit:cover}.pickup-pause{border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink-soft);padding:6px 10px;font-size:12px;cursor:pointer}
@media(max-width:639px){.area-nav-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 2px}.area-nav-icon{width:48px;height:48px}.pickup-card{width:72vw}.pickup-viewport{margin:0 -16px}.pickup-track{gap:12px}.pickup-card-img{height:160px}}
@media(min-width:640px) and (max-width:1023px){.area-nav-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.site-search-scrim[hidden]{display:none!important}.site-search-scrim{position:fixed;inset:0;background:rgba(15,32,56,.42);z-index:1100}.site-search-panel{position:fixed;top:0;left:0;right:0;max-height:85vh;overflow-y:auto;z-index:1101;background:var(--card);transform:translateY(-110%);visibility:hidden;transition:transform .2s ease;box-shadow:0 20px 50px #14253d33}.site-search-panel.is-open{transform:translateY(0);visibility:visible}.site-search-inner{max-width:760px;margin:auto;padding:26px var(--space-page-x)}.site-search-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:700}.site-search-top button{border:0;background:none;font-size:29px;cursor:pointer}#siteSearchInput{width:100%;padding:15px;border:1px solid var(--line);border-radius:5px;font:inherit;background:var(--bg)}.site-search-results{padding-top:14px}.site-search-results a{display:block;padding:13px 4px;text-decoration:none;border-bottom:1px solid var(--line-soft)}.site-search-results small{display:block;color:var(--ink-faint);font-size:11px;margin-bottom:5px}.site-search-results strong{font-size:14px}@media(prefers-reduced-motion:reduce){.site-search-panel{transition:none}}

/* Navigation clarity adjustments (Oct 11) */
.cat-nav-heading{max-width:1160px;margin:0 auto;padding:18px var(--space-page-x) 0;font-size:16px;color:var(--ink);font-weight:700}
.cat-nav-track{padding-top:14px}
.list-item-area{display:inline-flex;align-items:center;max-width:100%;padding:2px 7px;border-radius:3px;background:#e4eff6;color:#265d7a;font-size:10px;font-weight:700;line-height:1.4;white-space:nowrap}
.pickup-pause{width:32px;height:32px;min-width:32px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
.pickup-pause svg{width:14px;height:14px;display:block}
.pickup-pause:hover{border-color:var(--trust);color:var(--trust)}
.pickup-pause:focus-visible{outline:2px solid var(--trust);outline-offset:2px}

/* Consistent 8-column region navigation from tablet to desktop; mobile stays 4x2 */
@media(min-width:640px){.area-nav-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}}
/* Area labels reuse the eight distinct navigation badge colors */
.list-item-area{background:color-mix(in srgb,var(--item-area-color) 13%,white);color:var(--item-area-color);border:1px solid color-mix(in srgb,var(--item-area-color) 25%,white);font-weight:700}

/* Article detail labels share navigation taxonomy colors with listing cards. */
.modal-eyebrow-badge.modal-eyebrow-area{background:color-mix(in srgb,var(--item-area-color) 13%,white);color:var(--item-area-color);border:1px solid color-mix(in srgb,var(--item-area-color) 25%,white);padding:2px 9px}