/* ====================
 * Design Tokens
 * ==================== */
:root{
  --teal:#6dc1e3; --teal-600:#4ca0c2; --teal-50:#e9f5f3;
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --white:#fff;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.10); --shadow-sm:0 4px 14px rgba(0,0,0,.08);
  --z-header:50; --z-drawer:60; --z-backdrop:55;
  /* chips（リストや駅ピルで使用） */
  --chip:#f2f7f6; 
  --chip-border:#cfe7e3;
}

*{box-sizing:border-box}
html,body{margin:0}
a{color:inherit;text-decoration:none}
button{border:0;background:none;color:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

body{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
/* ====================
 * Header 
 * ==================== */
.site-header{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--white); box-shadow:0 1px 0 var(--line);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
}
.header-inner{
  max-width:1400px; margin:0 auto; padding:10px 16px; display:grid;
  grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
}

/* Logo */
.logo{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.logo-mark{font-weight:800;letter-spacing:.2px;color:#2a2a2a}
.logo-sub{font-size:12px;color:var(--muted)}

/* Desktop nav */
.main-nav{display:flex;gap:24px;align-items:center}
.nav-link{display:flex;align-items:center;gap:8px;color:#374151;font-weight:600}
.nav-link .icon{width:22px;height:22px;display:inline-flex}
.nav-link svg{width:100%;height:100%;stroke:#6dc1e3;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-link:hover{color:var(--teal)}
.nav-link:hover svg{stroke:var(--teal)}

/* Actions */
.header-actions{display:flex;align-items:center;gap:12px}
.link-facility{font-weight:600;color:#4ca0c2}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--teal-600)}
.btn-outline{border:2px solid var(--teal);color:var(--teal);background:transparent}
.btn-outline:hover{background:var(--teal-50)}

/* Mobile action icons */
.header-mobile-actions{display:none;gap:8px;margin-left:auto}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.icon-btn:hover{background:var(--teal-50)}
.icon-btn svg{width:22px;height:22px;stroke:#374151;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ========== Drawer (mobile) ========== */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(92vw,360px); height:100vh;
  background:var(--white); box-shadow:-12px 0 30px rgba(0,0,0,.15);
  transform:translateX(100%); transition:transform .28s ease; z-index:var(--z-drawer);
  display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;justify-content:flex-end;padding:12px}
.close-btn svg{width:24px;height:24px;stroke:#6b7280;fill:none;stroke-width:2}
.drawer-nav{padding:4px 16px 24px}
.drawer-item{display:flex;align-items:center;gap:12px;padding:14px 4px;color:#111827;font-weight:700}
.drawer-item + .drawer-item{border-top:1px solid var(--line)}
.drawer-item .icon{width:24px;height:24px}
.drawer-item svg{width:100%;height:100%;stroke:#374151;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drawer-divider{border:0;border-top:1px solid var(--line);margin:16px 0}
.drawer-btn{width:100%;margin:10px 0}
.drawer-link-sub{display:block;text-align:center;margin-top:4px;color:#4ca0c2;font-weight:600}

/* Backdrop */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:var(--z-backdrop);
}

/* ========== Responsive ========== */
@media (max-width: 1024px){
  .main-nav{display:none}
  .header-actions{display:none}
  .header-mobile-actions{display:flex}
}
@media (min-width: 1025px){
  /* 高さをPC版に寄せる */
  .header-inner{padding:14px 20px}
}

/* ====================
 * Hero & Search
 * ==================== */
/* ===== Hero Layout ===== */
.hero{background:#fff;border-top:1px solid #eee}
.hero-inner{
  max-width:1400px;margin:0 auto;display:grid;gap:24px;align-items:stretch;
  grid-template-columns:1.1fr .9fr; padding:16px 16px 0;
}
.hero-visual{position:relative;margin:0;border-radius:10px;overflow:hidden}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
.hero-badges{position:absolute;left:24px;bottom:24px;right:24px;color:#111}
.ribbon{
  display:inline-block;background:var(--teal);color:#fff;font-weight:800;
  padding:6px 12px;border-radius:999px;box-shadow:var(--shadow)
}
.hero-title{font-size:36px;line-height:1.2;margin:.6rem 0 0;font-weight:900;color:#111}
.hero-title .accent{color:var(--teal)}
.hero-note{margin:.5rem 0 0;color:#374151;background:rgba(255,255,255,.75);display:inline-block;padding:4px 8px;border-radius:8px}

/* ===== Search Card ===== */
.search-card{
  background:var(--teal);border-radius:16px;padding:18px;box-shadow:var(--shadow);
  align-self:start; color:#fff;
}
.search-heading{
  margin:0 0 12px; font-size:22px; font-weight:900; display:flex; align-items:center; gap:8px;
}
.search-heading::after{content:"！";color:#fff0} /* 余白調整用の微細トリック */

.search-form{background:#ffffff; border-radius:12px; padding:28px 14px 14px 14px}
.field{display:block;margin-bottom:12px}
.label{display:block;font-weight:700;margin:0 0 6px;color:#111}
#companySearch > label:nth-child(1){margin-bottom:0;}
.input-wrap{
  position:relative; border:2px solid #e6f1ef; background:#f4faf9; border-radius:999px;
}
.input-wrap select{
  appearance:none;-webkit-appearance:none; width:100%; border:0; background:transparent;
  padding:14px 44px 14px 18px; font-size:16px; color:#111; outline:none;
}
.input-wrap:focus-within{box-shadow:0 0 0 3px rgba(57,162,151,.18)}
.chev{position:absolute; right:14px; top:50%; transform:translateY(-50%); width:22px;height:22px; fill:none; stroke:#6b7280; stroke-width:2}

.error{display:block;min-height:18px;font-size:12px;color:#b42318;margin:6px 8px 0}

/* checks */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:8px 0 14px;padding:0;border:0}
.check{display:flex;align-items:center;gap:10px;color:#111}
.check input{width:18px;height:18px}
.q{
  width:18px;height:18px;border-radius:50%;background:#e9f5f3;color:#2c857c;
  font-weight:800;line-height:18px;text-align:center;cursor:pointer
}
.q:focus{outline:3px solid rgba(57,162,151,.3)}

/* Buttons */
.btn-primary{background:#6dc1e3;color:#fff;box-shadow:var(--shadow);border:0}
.btn-primary:hover{background:var(--teal-600)}
.btn-outline{border:2px solid #bfe1dd;color:#4ca0c2;background:#fff}
.btn-outline:hover{background:#f4faf9}
.w-full{width:100%}
.btn-map{margin-top:12px}

/* --- Button base tokens --- */
:root{
  --btn-pad-y: 12px;
  --btn-pad-x: 16px;
  --btn-radius: 999px;          /* pill をデフォルトに */
  --btn-weight: 800;
}

/* --- Button base (唯一の .btn 定義) --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  font-weight:var(--btn-weight);
  white-space:nowrap;
  gap:8px;
  cursor:pointer;
}

/* SVGなどの内側アイコンはここで統一 */
.btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }

/* --- Variants (必要な時だけ付ける) --- */
/* サイズ */
.btn-sm{ --btn-pad-y: 8px;  --btn-pad-x: 12px; font-weight:700; }   /* 細め＆コンパクト */
.btn-lg{ --btn-pad-y: 14px; --btn-pad-x: 20px; }

/* 角丸（丸pillではなくカードと同じ角）にしたい時 */
.btn--rounded{ --btn-radius: var(--radius); }

/* 見出しボタンほど強調しない（太さだけ下げる） */
.btn--light{ --btn-weight: 700; }





/* ===== Notice ===== */
.notice{border-top:1px solid var(--line);background:#fff}
.notice-inner{
  max-width:1400px;margin:16px auto 0; padding:12px 16px; border:2px solid #cfe7e3;
  border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.notice-left{display:flex;align-items:center;gap:10px;color:#0c322e}
.notice .badge{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#f5fff8;color:#2fa66d;border:2px solid #bbebcf;font-weight:800
}
.notice-link{display:inline-flex;align-items:center;gap:6px;color:#1f8076;font-weight:800}
.notice-link svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ===== Quick Search ===== */
.quick-search{background:#f8faf9;border-top:1px solid #eef2f2;margin-top:10px}
.quick-form{
  max-width:1400px;margin:0 auto;padding:14px 16px;display:flex;gap:12px;align-items:center
}
.qs-wrap{flex:1; position:relative}
.qs-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:#8a9a98;fill:none;stroke-width:2}
#q{
  width:100%;padding:12px 14px 12px 38px;border-radius:999px;border:2px solid #e4ecea;background:#fff;
  font-size:16px;outline:none
}
#q:focus{box-shadow:0 0 0 3px rgba(57,162,151,.18)}

/* ===== SP Quick 2 Tiles ===== */
.sp-quick-grid{
  display:none; max-width:1400px; margin:16px auto 0; padding:0 16px 6px;
  grid-template-columns:1fr 1fr; gap:14px;
}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:#6dc1e3; color:#fff; border-radius:16px; padding:18px 10px; font-weight:900; box-shadow:var(--shadow)
}
.tile svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hero-inner{grid-template-columns:1fr; padding:0 0 0}
  .hero-visual{border-radius:0}
  .hero-badges{left:16px; right:16px; bottom:16px}
  .hero-title{font-size:28px}
  .search-card{border-radius:0; margin:0 16px; transform:translateY(-40px)}
  .notice-inner{border-radius:12px; margin:0 16px}
  .quick-form{padding:12px 16px}
  .sp-quick-grid{display:grid}
  .checks{grid-template-columns:1fr 1fr}
}

@media (max-width: 560px){
  .checks{grid-template-columns:1fr}
}

/* ====================
 * Finder (地域/駅/特徴)
 * ==================== */
.finder{background:#fff}
.finder-inner{max-width:1400px;margin:0 auto;padding:24px 16px 64px}

/* ===== Blocks ===== */
.block{margin-bottom:40px}
.block-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.block-title{
  margin:0 0 12px; font-size:24px; line-height:1.25; color:var(--ink); font-weight:900;
}
.title-icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e9f5f3;color:var(--teal);margin-right:6px}
.title-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* see all */
.see-all{
  display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;
  background:transparent;border:0;color:#1f8076;font-weight:700;cursor:pointer
}
.see-all svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.see-all[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ===== Region lists ===== */
.region-lists{display:grid;gap:16px}
.region-group{border-top:1px solid var(--line);padding-top:16px}
.region-group:first-child{border-top:0;padding-top:0}
.region-group .area-title{font-weight:800;margin:0 0 8px;color:#374151}
.pref-line{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:baseline}
.pref-name{font-weight:800;margin-right:6px;white-space:nowrap}
.city-links{display:flex;flex-wrap:wrap;gap:10px 12px}
.city-links a{
  color:#1d776f;text-decoration:underline;text-underline-offset:2px;white-space:nowrap
}

/* すべて表示の折りたたみ（初期は1エリア分だけ見せる想定） */
.region-lists.collapsed .region-group:not(.is-primary){display:none}

/* ===== Station chips ===== */
.station-groups{display:grid;gap:14px;margin-top:8px}
.station-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start}
.station-label{font-weight:800;color:#374151;padding-top:8px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  background:var(--chip);border:1px solid var(--chip-border);border-radius:999px;padding:8px 12px;
  font-weight:700;color:#334155;display:inline-flex;align-items:center;gap:6px;cursor:pointer
}
.pill:hover{border-color:#cfe7e3}
.pill:focus{outline:3px solid rgba(57,162,151,.28);outline-offset:2px}

/* ===== Feature cards ===== */
.feature-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:8px
}
.feature-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  border:2px solid #cfe7e3;border-radius:14px;padding:18px;background:#f8fbfb;cursor:pointer;
  transition:transform .08s ease, box-shadow .2s
}
.feature-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.feature-icon{
  width:56px;height:56px;border-radius:12px;display:grid;place-items:center;border:2px solid #bfe1dd;background:#e9f5f3;color:var(--teal)
}
.feature-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2}
.feature-name{font-weight:800;color:#374151}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .station-row{grid-template-columns:96px 1fr}
}
@media (max-width:640px){
  .block-title{font-size:20px}
  .station-row{grid-template-columns:1fr;gap:8px}
  .station-label{padding-top:0}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .city-links a{font-size:14px}
}

/* ====================
 * Helpful & Featured
 * ==================== */
.container{max-width:1400px;margin:0 auto;padding:0 16px}

/* ===== Section Titles ===== */
.sec-title{margin:0 0 16px;font-size:26px;font-weight:900;color:var(--ink)}
.sec-title.on-dark{color:#fff}

/* ===== Helpful Articles ===== */
.helpful{background:#f7f9f9;padding:28px 0}
.helpful-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.help-card{
  background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column
}
.help-hero{
  aspect-ratio: 16 / 9; width:100%; object-fit:cover; display:block;
}
.help-body{padding:12px}
.help-h3{margin:8px 0 12px;font-size:18px;font-weight:900;color:#334155}
.help-list{display:grid;gap:0;border-top:1px dashed var(--line)}
.help-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 10px;border-bottom:1px dashed var(--line);color:#111827
}
.help-item:last-child{border-bottom:0}
.help-item:hover .help-text{text-decoration:underline}
.help-text{flex:1;line-height:1.6}
.help-arrow{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;color:#1c7a72;background:#e9f5f3
}
.help-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ===== Featured Municipalities ===== */
.featured{background:var(--teal);padding:36px 0 48px}
.featured-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.city-card{
  position:relative; overflow:hidden; border-radius:20px; min-height:220px;
  box-shadow:var(--shadow-sm); background:#ccc; color:#fff;
}
.city-card::after{ /* vignette */
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.05) 60%);
}
.city-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.city-card:hover .city-img{transform:scale(1.03)}
.city-name{
  position:absolute; left:20px; bottom:18px; z-index:1; font-weight:900;
  font-size:32px; letter-spacing:.04em; text-shadow:0 2px 10px rgba(0,0,0,.35)
}
.city-card:focus-within{outline:4px solid rgba(255,255,255,.35); outline-offset:2px; border-radius:20px}
.city-link{
  position:absolute; inset:0; z-index:2; /* 全面クリック */
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .helpful-grid{grid-template-columns:1fr 1fr}
  .featured-row{grid-template-columns:1fr 1fr}
  .city-name{font-size:28px}
}
@media (max-width:640px){
  .sec-title{font-size:22px}
  .helpful{padding:20px 0}
  .helpful-grid{grid-template-columns:1fr;gap:14px}
  .help-item{padding:16px 8px}
  .featured{padding:24px 0 36px}
  .featured-row{grid-template-columns:1fr}
  .city-card{min-height:200px;border-radius:18px}
  .city-name{left:16px;bottom:14px;font-size:26px}
}

/* ====================
 * FAQ & Recruit CTA
 * ==================== */
.faq-section{background:#fff;padding:24px 0 0}
.sec-title.center{text-align:center}

.faq-list{max-width:960px;margin:0 auto}
.faq-item{border-top:1px solid #e6ecea;padding:16px 0}
.faq-item:first-child{border-top:0}

.faq-q{
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  display:flex; align-items:flex-start; gap:10px; padding:8px 0; color:#111827;
  font-weight:900; font-size:20px; line-height:1.4;
}
.faq-q:hover{color:#116e66}
.faq-q[aria-expanded="true"]{color:#4ca0c2}
.faq-qicon{flex:0 0 auto; width:24px;height:24px;color:#21a69a;display:grid;place-items:center;margin-top:2px}
.faq-qicon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}

.faq-a{margin-left:34px}
.faq-ans-inner{display:flex;gap:10px;align-items:flex-start;border-left:4px solid #e9f5f3;padding-left:12px}
.faq-aicon{flex:0 0 auto;width:22px;height:22px;color:#7cc1ba;display:grid;place-items:center;margin-top:2px}
.faq-aicon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}
.faq-a p{margin:0 0 10px;color:#374151;line-height:1.9}
.faq-link{color:#1a8077;text-decoration:underline;text-underline-offset:3px}

/* Recruit CTA */
.recruit-cta{padding:28px 0}
.recruit-card{position:relative;border-radius:18px;overflow:hidden;background:#f5f7f7}
.recruit-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.96);opacity:.85}
.recruit-body{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:34px 16px; min-height:220px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 65%, rgba(255,255,255,.86) 100%);
}
.recruit-title{margin:0;color:#0a1015;font-weight:900;font-size:28px;text-align:center}
.btn.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;
  border:2px solid #7bcac3;background:transparent;color:#157d74;font-weight:900
}
.btn.btn-ghost:hover{background:#eef8f7}
.btn.btn-ghost svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* Stats note */
.stats-note{padding:10px 0 40px;color:#4b5563}
.stats-copy{margin:0 0 6px;text-align:center;font-weight:700}
.stats-copy .accent{color:#1f8b82}
.stats-foot{margin:0 auto;max-width:1000px;text-align:center;font-size:13px;color:#6b7280}

/* Responsive */
@media (max-width: 768px){
  .faq-q{font-size:18px}
  .faq-a{margin-left:34px}
  .recruit-title{font-size:24px}
}

/* ====================
 * Footer
 * ==================== */
:root{
  --footer-bg:#ab8874;        /* スクショのダークブラウン寄り */
  --footer-fg:#f6f7f7;
  --footer-link:#ffffff;
  --footer-link-muted:#e3e3e3;
  --footer-accent:#a7fff4;    /* extアイコンなどの差し色（控えめ） */
}
.site-footer{background:var(--footer-bg);color:var(--footer-fg)}
.footer-inner{
  max-width:1400px;margin:0 auto;padding:32px 16px;display:grid;gap:24px;
  grid-template-columns: 1.6fr 1fr;
}

/* ブロック共通 */
.f-block{margin-bottom:18px}
.f-title{
  margin:0 0 10px; font-weight:900; font-size:20px; color:#fff;
}

/* 左：地方→都道府県 */
.region-grid{display:grid;gap:14px}
.region{
  display:grid;grid-template-columns: 160px 1fr;gap:10px;align-items:start
}
.region-name{
  font-weight:800;color:#fff;opacity:.95;white-space:nowrap
}
.pref-list{
  display:grid;grid-template-columns:repeat(5, minmax(90px, auto));gap:8px 16px
}
.pref-list a{
  color:var(--footer-link);text-decoration:underline;text-underline-offset:2px;
  font-weight:700; white-space:nowrap;
}
.pref-list a:hover{opacity:.9}

/* 右カラムリスト */
.f-right{display:grid;gap:16px;align-content:start}
.f-list{list-style:none;margin:0;padding:0;display:grid;gap:8px 16px;
  grid-template-columns:repeat(2, minmax(140px, 1fr))}
.f-list a{color:var(--footer-link);text-decoration:underline;text-underline-offset:2px}
.f-list a:hover{opacity:.9}
.f-list .ext{position:relative;padding-right:18px}
.f-list .ext::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:14px;height:14px; border:2px solid var(--footer-link-muted); border-left:0; border-bottom:0;
  clip-path: polygon(0 0,100% 0,100% 100%,70% 100%,70% 30%,0 30%);
  opacity:.9;
}

/* コピーライト */
.footer-copy{text-align:center;padding:8px 16px 28px;color:#e1e1e1}
.footer-copy p{margin:0;font-weight:700}



/* ===== Footer layout override ===== */
/* デスクトップ時：左1.2 / 右1.8 にして右カラムを広く */
.footer-inner{
  grid-template-columns: 1.2fr 1.8fr;
}
/* 左「都道府県」ブロック自体をコンパクトに（見出し列をさらに絞る） */
.region{
  grid-template-columns: 120px 1fr; /* 160px → 120px */
}
/* 都道府県リンクの列数を5 → 4列へ（左ブロックの実幅を圧縮） */
.pref-list{
  grid-template-columns: repeat(4, minmax(90px, auto));
}
/* 右カラムの密度を少し上げる（列幅の下限を縮める） */
.f-list{
  grid-template-columns: repeat(2, minmax(120px, 1fr)); /* 140px → 120px */
}



/* ===== Responsive ===== */
@media (max-width: 1024px){
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .f-list{grid-template-columns:1fr 1fr}
  .region{grid-template-columns:120px 1fr}
  .pref-list{grid-template-columns:repeat(3, minmax(90px,1fr))}
}
@media (max-width: 640px){
  .f-title{font-size:18px}
  .region{grid-template-columns:1fr;gap:6px}
  .pref-list{grid-template-columns:repeat(3, minmax(120px,1fr))}
  .f-list{grid-template-columns:1fr}
}








/* ========== Tooltip（共通） ========== */
.tooltip{position:absolute;max-width:min(84vw,420px);z-index:70;background:#111827;color:#fff;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.18)}


/* ====================
 * Stories Slider（事例・インタビュー）
 * ==================== */
.stories { background:#fff; padding:24px 0 }
.stories-slider{ position:relative }
.stories-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(80%, 360px);
  gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 6px 2px;
}
.story-card{
  position:relative; border-radius:18px; overflow:hidden; min-height:240px;
  box-shadow:var(--shadow); background:#ccc; color:#fff; scroll-snap-align:start;
}
.story-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.1) 55%);
}
.story-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease }
.story-card:hover .story-img{ transform:scale(1.03) }
.story-body{ position:absolute; left:16px; right:16px; bottom:14px; z-index:1 }
.story-tag{ display:inline-block; font-weight:800; background:rgba(255,255,255,.18); padding:4px 8px; border-radius:999px; backdrop-filter:blur(2px) }
.story-title{ margin:8px 0 2px; font-weight:900; font-size:20px; text-shadow:0 2px 10px rgba(0,0,0,.35) }
.story-meta{ font-size:13px; opacity:.9 }
.stories-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px;height:40px;border-radius:999px;background:#fff;border:2px solid #e6ecea;
  display:grid;place-items:center;box-shadow:var(--shadow)
}
.stories-nav svg{ width:20px;height:20px;stroke:#374151;fill:none;stroke-width:2 }
.stories-nav.prev{ left:-4px } .stories-nav.next{ right:-4px }
@media (min-width:1024px){
  .stories-track{ grid-auto-columns:420px }
  .story-title{ font-size:22px }
}

/* wish list */
.pill.small{background:#e9f5f3;border:2px solid #bfe1dd;color:#4ca0c2;border-radius:999px;padding:4px 8px;font-weight:800;font-size:12px}

/* 気になるボタン（共通） */
.btn.wish {
  position: relative;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* 追加済み（ON） */
.btn.wish.is-on {
  background: #e6f7ee;        /* 薄い緑系 */
  color: #107a42;              /* 文字色 */
  border-color: #84d8ac;       /* 境界線 */
  box-shadow: 0 0 0 2px rgba(16,122,66,.12) inset;
}

/* hover時 少し濃く */
.btn.wish.is-on:hover {
  background: #d9f2e6;
  border-color: #5ec793;
}

/* アイコン風の前置き（任意） */
.btn.wish.is-on::before {
  content: '✓ ';
  font-weight: 700;
}
.btn.wish:not(.is-on)::before {
  content: '★ ';
  font-weight: 700;
}


/* ====================
 * List / Wish 共通
 * ==================== */
.breadcrumb{background:#fff;border-top:1px solid var(--line)}
.breadcrumb ol{max-width:1400px;margin:0 auto;padding:10px 16px;list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{text-decoration:underline;text-underline-offset:2px;color:#1a8077}
.breadcrumb li{color:#6b7280}
.breadcrumb li+li::before{content:"›";margin:0 4px;color:#9ca3af}

.list-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.list-head h1{margin:0;font-size:24px;font-weight:900;color:#111827}


@media (max-width: 768px) {
  .list-head{display: block;}
  .list-head h1{display: block;margin-bottom:15px;}
  #q{width:100%;}
}


.map-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

.filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin-bottom:10px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{display:inline-flex;align-items:center}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1.8px solid var(--chip-border);background:var(--chip);border-radius:999px;padding:8px 12px;font-weight:800;color:#334155}
.chip input:checked + span{background:var(--teal);border-color:var(--teal);color:#fff}
.chip span:hover{cursor:pointer;background:#e9f5f3;border:2px solid #bfe1dd;color:#4ca0c2}

.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap}
.filter-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sort{flex:1 1 160px;min-width:140px}
.sort select,.sort input{width:100%;border:2px solid #e5e7eb;border-radius:10px;padding:8px 10px;background:#fff;font:inherit}
.result-count{color:#374151;flex:1 1 100%}

@media (max-width:640px){
  .filter-bar{gap:10px}
  .filter-controls{gap:10px}
  .sort{flex:1 1 100%;min-width:0}
  /* .btn.btn-outline[type="submit"]{width:100%} */
}

.list-wrap{display:grid;gap:16px}
.card{display:grid;grid-template-columns:280px 1fr;gap:16px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.card-media{position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:180px}
.flag{position:absolute;left:10px;top:10px;background:var(--teal);color:#fff;font-weight:900;border-radius:999px;padding:6px 10px;font-size:12px;box-shadow:var(--shadow)}
.card-body{padding:12px 12px 16px}
.labels{display:flex;gap:8px;margin-bottom:6px}
.card-title{margin:.2rem 0 .6rem;font-size:20px;font-weight:900}
.card-link{text-decoration:underline;text-underline-offset:3px}
.meta{display:grid;gap:6px;margin:8px 0 10px}
.meta-label{color:#6b7280;font-weight:700}
.meta-val{color:#111827}
.badge-list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px;padding:0;list-style:none}
.badge{border:1.8px solid var(--chip-border);background:var(--chip);border-radius:999px;padding:6px 10px;font-weight:800;color:#334155}
.price{color:#0c322e;margin:8px 0 12px}
.card-ctas{display:flex;gap:10px;flex-wrap:wrap}

.pager{display:flex;align-items:center;gap:6px;justify-content:center;padding:12px 0}
.p-btn,.p-num{display:inline-grid;place-items:center;min-width:36px;min-height:36px;border-radius:10px;border:1.8px solid #dbe7e5;background:#fff;color:#334155;font-weight:800}
.p-btn[disabled]{opacity:.5}
.p-num.is-current{background:var(--teal);color:#fff;border-color:var(--teal)}
.p-ellipsis{padding:0 4px;color:#6b7280}

.facets{display:grid;grid-template-columns:2fr 2fr 1.4fr;gap:16px;padding:8px 0 28px}
.facet{border:1px solid var(--line);border-radius:14px;background:#fff}
.facet-title{margin:0;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:900}
.facet-grid,.city-grid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px;padding:12px 14px}
.facet-link,.city-grid a{color:#1a8077;text-decoration:underline;text-underline-offset:2px}

@media (max-width:1024px){
  .card{grid-template-columns:1fr}
  .facets{grid-template-columns:1fr;gap:12px}
}
@media (max-width:640px){
  .list-head h1{font-size:20px}
  .meta-row{grid-template-columns:1fr}
}

/* ====================
 * Detail Page (detail.php)
 * ==================== */
/* hero-card */
.hero-card{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:stretch;padding:14px 0}
.head-left{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.title{margin:.4rem 0 .6rem;font-size:24px;font-weight:900;color:#111}
.meta{display:grid;gap:6px;margin:8px 0}
.meta .row{display:grid;grid-template-columns:80px 1fr;gap:8px}
.meta .k{color:#6b7280;font-weight:700}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.share{display:flex;gap:10px;margin-top:6px}
.share a{text-decoration:underline;text-underline-offset:2px;color:#1a8077}

.head-img{position:relative;border-radius:14px;overflow:hidden}
.head-img img{width:100%;height:100%;object-fit:cover;min-height:220px;display:block}
/* .flag は共通化済み（重複定義しない） */

/* about / features */
.about .section{padding:20px 0}
.sec-h2{margin:0 0 10px;font-weight:900;font-size:22px;color:#111827;text-align:center}
.about .lead{font-weight:800;text-align:center;margin:.2rem 0;color:#374151}
.about .txt{max-width:880px;margin:8px auto 0;color:#374151;line-height:1.9}

.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.feat{display:grid;grid-template-columns:180px 1fr;gap:12px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.feat img{width:100%;height:100%;object-fit:cover;min-height:120px}
.feat-body{padding:10px}
.feat-h3{margin:4px 0 6px;font-size:16px;font-weight:900}
.feat-txt{margin:0;color:#374151}

/* feature-tags */
.feature-tags .tag-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px}
.feature-tags .tag{display:inline-block;border:1.8px solid var(--chip-border);background:var(--chip);border-radius:999px;padding:10px 12px;font-weight:800;color:#1a8077;text-align:center}

/* spec */
.spec .spec-body{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px}
.spec-img img{width:100%;height:100%;object-fit:cover;border-radius:10px;min-height:180px}
.table{margin:0;display:grid;gap:0}
.table > div{display:grid;grid-template-columns:180px 1fr;gap:10px;border-top:1px solid var(--line);padding:12px 6px}
.table > div:first-child{border-top:0}
.table dt{font-weight:800;color:#6b7280}
.table dd{margin:0}

/* FAQ（アコーディオン） */
.faq-section{padding:24px 0}
.faq-list{max-width:960px;margin:0 auto}
.faq-item{border-top:1px solid #e6ecea;padding:16px 0}
.faq-item:first-child{border-top:0}
.faq-q{
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:flex-start;gap:10px;padding:8px 0;color:#111827;font-weight:900;font-size:20px
}
.faq-q:hover{color:#4ca0c2}
.faq-q[aria-expanded="true"]{color:#0c766b}
.faq-qicon{flex:0 0 auto;width:24px;height:24px;color:#21a69a;display:grid;place-items:center;margin-top:2px}
.faq-qicon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}
.faq-a{margin-left:34px}
.faq-ans-inner{display:flex;gap:10px;align-items:flex-start;border-left:4px solid #e9f5f3;padding-left:12px}
.faq-aicon{flex:0 0 auto;width:22px;height:22px;color:#7cc1ba;display:grid;place-items:center;margin-top:2px}
.faq-aicon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}

/* nearby */
.near-head{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.near-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.near-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.near-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.near-body{padding:10px}
.near-h3{margin:.2rem 0 .4rem;font-size:16px;font-weight:900}
.near-meta{color:#6b7280}

/* similar */
.similar{padding:10px 0 28px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-link{border:1.8px solid var(--chip-border);background:var(--chip);border-radius:999px;padding:8px 12px;font-weight:800;color:#334155}

/* ====================
 * Highlights（Mamable編集部より）
 * ==================== */
.hl-block{ padding:14px; }
.hl-title{
  margin:0 0 10px; font-weight:900; font-size:18px; color:#0c322e;
  display:flex; align-items:center; gap:8px;
}
.hl-title .tag{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--teal-50); color:var(--teal); border:2px solid #bfe1dd; font-weight:900; font-size:12px;
}
.hl-list{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
  grid-template-columns:repeat(2, minmax(240px, 1fr));
}
@media (max-width:768px){ .hl-list{ grid-template-columns:1fr; } }
.hl-item{
  position:relative; display:flex; gap:10px; align-items:flex-start;
  border:1.8px solid #cfe7e3; background:#f8fbfb; border-radius:12px;
  padding:10px 12px 10px 44px; transition:transform .08s ease, box-shadow .18s ease;
}
.hl-item:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.hl-item::before{
  content:""; position:absolute; left:12px; top:10px; width:22px; height:22px; border-radius:50%;
  background:var(--teal-50); border:2px solid #bfe1dd;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="%23fff" d="M9.2 16.2 5.5 12.5 4.1 13.9 9.2 19l10.7-10.7-1.4-1.4z"/></svg>') center / 12px 12px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="%23fff" d="M9.2 16.2 5.5 12.5 4.1 13.9 9.2 19l10.7-10.7-1.4-1.4z"/></svg>') center / 12px 12px no-repeat;
  background-color:#6dc1e3;
}
.hl-text{ margin:0; color:#374151; line-height:1.7; font-weight:700; }
.hl-meta{ margin:.2rem 0 0; color:#6b7280; font-size:13px; line-height:1.5; }
.hl-badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  border:1.8px solid #bfe1dd; color:#4ca0c2; background:#e9f5f3;
  padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px;
}
/* コンパクト版 */
.hl-block.compact{ padding:10px }
.hl-block.compact .hl-title{ font-size:16px; margin-bottom:8px }
.hl-block.compact .hl-list{ gap:8px }
.hl-block.compact .hl-item{ padding:8px 10px 8px 40px }
.hl-block.compact .hl-item::before{ left:10px; top:8px }
.hl-block.compact .hl-text{ font-size:14px }

/* ========== FAQ（ガイド版・JS不要） ========== */
.faq-guidance { background:#fff; padding:24px 0 12px; }
.faq-guidance__inner { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.faq-guidance__title { margin: 0 0 8px; font-weight: 900; font-size: 22px; color: #111827; text-align: center; }
.faq-guidance__note {
  margin: 0 auto 12px; max-width: 820px; color:#374151; line-height:1.8;
  border-left:4px solid #e9f5f3; padding:10px 12px; border-radius:4px; background:#f9fbfb;
}
.u-strong { font-weight: 800; color:#0c766b; }

.faq-guidance__list { display: grid; gap: 10px; margin-top: 10px; }
.faq-guidance__item {
  border:1px solid var(--line, #e6ecea);
  border-radius:14px; background:#fff; overflow:hidden;
}
.faq-guidance__q {
  list-style:none; cursor:pointer; display:flex; gap:10px; align-items:flex-start;
  padding:14px 12px; font-weight:900; color:#111827; font-size:18px;
}
.faq-guidance__q::-webkit-details-marker { display:none; }
.faq-guidance__qicon { flex:0 0 auto; width:22px; height:22px; color:#21a69a; display:grid; place-items:center; margin-top:2px; }
.faq-guidance__q:hover { color:#4ca0c2; }

.faq-guidance__a { padding:0 12px 14px 48px; }
.faq-guidance__a p { margin:0; color:#374151; line-height:1.9; }

.faq-guidance__item[open] .faq-guidance__qicon svg path:first-child { opacity:0; transition:opacity .15s ease; }

.faq-guidance__cta { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:16px 0 4px; }
.faq-guidance__cta .btn { min-width:200px; }

/* facility overview（表＋地図） */
.facility-overview{ margin-top:40px; background:#fff; }
.facility-overview .ov-title{
  font-size:1.5rem; font-weight:700; text-align:center; margin-bottom:8px;
}
.facility-overview .ov-title span{
  display:block; font-size:.9rem; color:#62a39c; letter-spacing:.05em;
}
.ov-table{ width:100%; border-collapse:collapse; border-top:2px solid #62a39c; }
.ov-table th,.ov-table td{
  padding:12px 16px; border-bottom:1px solid #ddd; text-align:left; vertical-align:top;
}
.ov-table th{ width:20%; font-weight:600; color:#333; background:#fafafa; }
.ov-map{ margin-top:8px; }
.ov-map iframe{ border-radius:6px; width:100%; height:240px; }
.ov-maplink{ margin-top:4px; }
.ov-maplink a{ color:#1a73e8; text-decoration:underline; font-size:.9rem; }

/* nearby org（カードグリッド） */
.nearby-org{ margin-top:40px; }
.nb-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.nb-title{ font-size:1.5rem; font-weight:700; }
.nb-mapbtn{
  display:inline-block; padding:8px 12px; border:1px solid #88c4b9; color:#3b8f84;
  border-radius:999px; text-decoration:none; font-size:.9rem;
}
.nb-mapbtn:hover{ background:#e9f6f3; }
.nb-grid{
  list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:16px;
}
.nb-card{
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.nb-link{ display:block; color:inherit; text-decoration:none; }
.nb-thumb{ aspect-ratio:16/9; overflow:hidden; }
.nb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.nb-meta{ padding:10px 12px 14px; }
.nb-sub{
  font-size:.85rem; color:#777; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nb-title-sm{
  margin-top:4px; font-weight:700; font-size:1.05rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== Responsive (Detail) ===== */
@media (max-width:1024px){
  .hero-card{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .spec .spec-body{grid-template-columns:1fr}
  .near-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .title{font-size:20px}
  .meta .row{grid-template-columns:1fr}
  .feature-tags .tag-grid{grid-template-columns:1fr}
  .near-grid{grid-template-columns:1fr}
  .ov-table th{ width:35%; }
  .ov-table td{ display:block; }
  .ov-table th,.ov-table td{ padding:10px; }
}
@media (max-width:1024px){ .nb-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .nb-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .nb-grid{ grid-template-columns:1fr; } }


/* index: フォームの無効表示 */
#city:disabled { color:#777; }



/* 2カラムレイアウト */
.l-2col {
  display: grid;
  gap: 24px;
}

/* メイン→サイドバーの順に縦積み（スマホ） */
.main-col { order: 1; }
.sidebar  { order: 2; }

@media (min-width: 768px) {
  .l-2col {
    grid-template-columns: 1fr 320px; /* メイン / サイド幅 */
    align-items: start;
  }
}

/* サイドバーUI */
.sidebar {
  position: relative;
}
.side-filters {
  position: sticky;
  top: 16px;        /* ヘッダー分を適宜調整 */
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--c-border, #e3e3e3);
  border-radius: 12px;
  background: #fff;
}

.sf-block { display: grid; gap: 8px; }
.sf-h { font-size: 1rem; font-weight: 700; }
.sf-label { font-size: .9rem; color: #555; }
.sf-select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #ddd; }
.sf-help { font-size: .85rem; color: #777; margin: 0; }

.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-actions { display: grid; gap: 8px; }


/* === list/wish の上部ツールバー調整 ===================== */
.list-toolbar,
.filter-bar {                       /* どちらでも効くように */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
}

/* 左側：並び替えのまとまり */
.list-toolbar .sort-only,
.filter-bar .filter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* セレクトを“横幅いっぱい”にしない */
.list-toolbar .sort select,
.filter-bar   .sort select {
  width: auto !important;          /* 既存の width:100% を打ち消す */
  min-width: 160px;
  max-width: 260px;
  padding: 8px 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 9999px;           /* pill 形状 */
  background: #fff;
  line-height: 1.2;
}

/* 件数表示が折り返されないように */
.list-toolbar .result-count,
.filter-bar   .result-count {
  margin-left: auto;
  white-space: nowrap;
  color: #6b7280;                  /* サブ情報っぽく */
  font-size: 0.95rem;
}

/* スマホでは縦積みにしてセレクトは全幅 */
@media (max-width: 768px) {
  .list-toolbar,
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .list-toolbar .sort-only,
  .filter-bar .filter-controls {
    width: 100%;
  }
  .list-toolbar .sort select,
  .filter-bar   .sort select {
    width: 100% !important;
    max-width: none;
  }
  .list-toolbar .result-count,
  .filter-bar   .result-count {
    margin-left: 0;
    align-self: flex-end;
  }
}



/* ===== スマホの検索フォーム最適化 ===== */
.quick-form{
  display:flex;
  align-items:center;
  gap: 10px;
  max-width: 720px;               /* タブレット以上で伸びすぎないように */
}

.quick-form .qs-wrap{
  flex: 1 1 auto;                  /* 入力欄を最大化 */
  min-width: 0;                    /* はみ出し防止 */
}

.quick-form input[type="search"]{
  width: 100%;
  height: 44px;                    /* ボタンと揃える */
  padding: 10px 14px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 9999px;           /* pill 形状 */
  box-sizing: border-box;
  font-size: 16px;                 /* iOSズーム防止 */
  background: #fff;
}

.quick-form .btn{
  height: 44px;                    /* 入力欄と同じ高さ */
  padding: 0 16px;                 /* でかすぎ防止 */
  border-radius: 9999px;
  white-space: nowrap;
}

/* フォーカス時のわかりやすさ */
.quick-form input[type="search"]:focus{
  outline: none;
  border-color: #7cc8be;
  box-shadow: 0 0 0 3px rgba(124,200,190,.2);
}

/* 画面がとても狭い時は縦積み */
@media (max-width: 360px){
  .quick-form{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .quick-form .btn{
    width: 100%;
  }
}

/* h1{white-space: nowrap;} */


/* =========================
 * Blog detail: 横はみ出し完全ガード
 * ========================= */
@media (max-width: 768px) {

  /* まずはページ全体で横オーバーフローを封じる（最終防御） */
  html, body { overflow-x: hidden; }

  /* 記事コンテナ自体が広がらないように */
  .blog-detail article,
  .blog-detail .post-body {
    max-width: 100%;
    width: 100%;
    overflow-wrap: anywhere;   /* 超長単語/URLも折り返す */
    word-break: break-word;
    box-sizing: border-box;
  }

  /* 共通：すべての直下要素も「親幅の中に収める」 */
  .blog-detail article *,
  .blog-detail .post-body * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 画像/動画/埋め込みは親幅まで。高さは自動 */
  .blog-detail article img,
  .blog-detail article video,
  .blog-detail article canvas,
  .blog-detail article iframe,
  .blog-detail article svg,
  .blog-detail .post-body img,
  .blog-detail .post-body video,
  .blog-detail .post-body canvas,
  .blog-detail .post-body iframe,
  .blog-detail .post-body svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* YouTube等の16:9埋め込みを安全に */
  .blog-detail .embed,
  .blog-detail article .embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
  }
  .blog-detail .embed iframe,
  .blog-detail article .embed iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  }

  /* 表は横スクロール領域にして、ページ幅を押し広げない */
  .blog-detail article table,
  .blog-detail .post-body table {
    display: block;           /* table-layout依存のはみ出しを防止 */
    width: 100%;
    overflow-x: auto;         /* 表だけ内部スクロール */
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }

  /* pre/code は横スクロールにする（折り返しでもOKなら下の1行を有効化） */
  .blog-detail article pre,
  .blog-detail .post-body pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre;          /* ← 折り返したいなら 'pre-wrap' に変更 */
  }
  /* 長いURL/連続文字での突き抜け対策（段落・リンク） */
  .blog-detail article p,
  .blog-detail article a,
  .blog-detail .post-body p,
  .blog-detail .post-body a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* figure の余白で微妙にはみ出すケースのケア */
  .blog-detail article figure,
  .blog-detail .post-body figure {
    margin-left: 0;
    margin-right: 0;
  }

  /* もし外枠コンテナが原因なら（padding含めてはみ出す） */
  .blog-detail .container {
    max-width: 980px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* デバッグ用（必要時だけ）：はみ出し犯を可視化
  * .blog-detail * { outline: 1px dashed rgba(255,0,0,.25); }
  */
}

@media (max-width: 768px) {
  main{width:98%;margin-left:1%;}
}