/* ===============================
   tsushi.com  Global Styles (Unified)
   Theme: Orange / Soft & Rounded
   =============================== */

/* ---- Design Tokens ---- */
:root{
  /* brand */
  --brand:#f97316;
  --brand-600:#ea580c;
  --brand-50:#fff7ed;

  /* text & surface */
  --text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;

  /* borders & radius & shadow */
  --border:#f1f5f9;
  --radius-lg:16px;
  --radius-xl:22px;
  --shadow-soft:0 10px 24px rgba(0,0,0,.06);

  /* header */
  --header-h: 66px;
  --header-bg: #ffffffcc;
  --header-border: #eee;
}

/* ---- Base ---- */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family:'Noto Sans JP',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.small{ font-size:12px; }
.muted{ color:var(--muted); }

/* 重要：レイアウトの器（全ページ共通） */
.container{
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 0 8px;
}

/* ===============================
   Header / Navigation (Unified)
   =============================== */
.site-header{
  position: sticky; top:0; z-index:100;
  backdrop-filter: saturate(1.2) blur(6px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height: var(--header-h);
}
.logo{
  font-weight:800; letter-spacing:.2px; text-decoration:none; color:#111;
  font-size: clamp(20px, 2.6vw, 24px);
  white-space: nowrap;
}
.logo .accent{ color: var(--brand); }

/* hamburger */
.nav-toggle{
  display:none; /* PC 非表示 */
  align-items:center; gap:8px;
  padding:10px 12px; height:40px;
  border-radius:10px; border:1px solid #e9e9e9;
  background:#fff; cursor:pointer;
  font-weight:700; color:#333;
}
.nav-toggle:focus-visible{ outline:3px solid rgba(249,115,22,.35); }

/* desktop nav */
.nav{ justify-self:end; }
.nav .nav-list{
  display:flex; gap:18px; align-items:center; white-space:nowrap;
  list-style:none; margin:0; padding:0;
}
.nav .nav-list a{
  display:inline-block; padding:10px 6px; text-decoration:none;
  color:#333; font-weight:600; font-size:15px;
  border-bottom:2px solid transparent;
}
.nav .nav-list a:hover{ color:var(--brand); border-bottom-color:#ffd7b3; }
.nav .nav-list a.active{ color:var(--brand); border-bottom-color:var(--brand); }

/* mobile drawer (<=960px) */
/* ==== モバイル（〜960px）：右側から半分スライド & オーバーレイ ==== */
@media (max-width: 960px){
  .header-inner{ gap:12px; }
  .nav-toggle{ display: inline-flex; }

  /* ドロワー本体：右側固定、幅は画面の約半分（最大520px） */
  .nav{
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(520px, 50vw);              /* ← 半分くらい */
    background:#fff;
    border-left:1px solid var(--header-border);
    box-shadow: -18px 0 32px rgba(0,0,0,.08);
    z-index: 10000;

    /* 初期は右に隠す */
    transform: translateX(100%);
    opacity: 1;                           /* 不透明のままでOK（スライドのみ） */
    pointer-events: none;
    transition: transform .22s ease;
  }

  /* オープン時：JSが nav に付ける .nav--open を利用 */
  .nav.nav--open{
    transform: translateX(0);
    pointer-events: auto;
  }

  /* 背景の暗幕（オーバーレイ）: nav の疑似要素で生成するので JS 変更不要 */
  .nav::before{
    content:"";
    position: fixed;
    top: var(--header-h);
    right: 50vw;                          /* ← ドロワー以外の左側を覆う */
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .nav.nav--open::before{
    opacity: 1;
    pointer-events: auto;
  }

  /* リストの中身：右寄せのパネル内で左揃え */
  .nav .nav-list{
    background-color: navajowhite;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 14px 20px;
  }
  .nav .nav-list li{
    border-bottom:1px dashed #eee;
  }
  .nav .nav-list li:last-child{
    border-bottom:none;
  }
  .nav .nav-list a{
    padding: 16px 12px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    border-bottom: 2px solid transparent;
  }

  /* 背景スクロールロック（既存の .nav-lock を維持） */
  html.nav-lock, body.nav-lock{ overflow:hidden; }
}

/* desktop 強制整列 */
@media (min-width: 961px){
  .nav-toggle{ display:none !important; }
  .nav{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    background:transparent !important;
    border:0 !important;
  }
  .nav .nav-list{
    display:flex !important; align-items:center !important;
    gap:20px !important; flex-wrap:nowrap !important; white-space:nowrap !important;
  }
  .nav .nav-list a{
    padding:18px 10px !important; font-size:20px !important; font-weight:700 !important;
    color:#1f2937 !important; text-decoration:none !important;
    border-bottom:2px solid transparent !important;
  }
  .nav .nav-list a:hover{
    color:var(--brand) !important; border-bottom-color:#ffd7b3 !important;
  }
  .nav .nav-list a.active{
    color:var(--brand) !important; border-bottom-color:var(--brand) !important;
  }

  /* コンテナ幅を少し広げる */
  .container{ width:min(1100px, 88vw); }
}

/* ロゴとナビの伸縮バランス */
.site-header .logo{ flex:0 1 auto; }
#global-nav{ flex:1 1 auto; min-width:0; }

/* ===============================
   Hero
   =============================== */
.hero{
  padding:56px 0;
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(249,115,22,.10), transparent),
    radial-gradient(300px 150px at 100% 0%, rgba(234,88,12,.08), transparent);
}
.hero .chip{
  display:inline-block; background:var(--brand-50);
  border:1px solid #fed7aa; color:#9a3412;
  padding:8px 12px; border-radius:999px; font-size:12px; font-weight:700;
}
.hero h1{ font-size:36px; line-height:1.28; margin:12px 0; }
.hero h1 .accent{ color:var(--brand); }
.lead{ color:var(--muted); }

/* ===============================
   Forms / Buttons
   =============================== */
.search-bar{
  display:grid;
  grid-template-columns: 1fr auto auto; /* keyword / pref-toggle / search */
  gap:10px; margin-top:16px;
}
.search-bar input,
.search-bar select{
  padding:14px 12px; border:1px solid var(--border);
  border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-soft);
  outline:none;
}
.search-bar select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9ca3af 50%),
    linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position:calc(100% - 16px) calc(1em + 6px), calc(100% - 12px) calc(1em + 6px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}

.btn{
  background:var(--brand); color:#fff; border:none;
  border-radius:var(--radius-lg); padding:14px 18px;
  font-weight:800; display:inline-block; box-shadow:var(--shadow-soft);
  cursor:pointer; transition:background .15s ease, transform .05s ease;
}
.btn:hover{ background:var(--brand-600); }
.btn:active{ transform:translateY(1px); }
.btn-outline{
  border:1px solid var(--border); padding:14px 18px;
  border-radius:var(--radius-lg); background:#fff; font-weight:700;
  display:inline-block; cursor:pointer;
}
.btn.wide{ display:block; text-align:center; width:100%; }

/* ===============================
   Filter Panels (共通)
   =============================== */
.filter-toggle{ margin-top:10px; }
.filter-panel{
  margin-top:12px; padding:16px;
  border:1px solid var(--border); background:#fff;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-soft);
}
.filter-head{ font-weight:800; margin-bottom:10px; }

/* grid（pref/feature） */
.feature-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;
}
@media (max-width:520px){ .feature-grid{ grid-template-columns:1fr; } }

/* pill check */
.check-pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:999px; padding:8px 12px;
  background: var(--brand-50); color:#9a3412; font-size:14px; cursor:pointer;
}
.check-pill input{ accent-color: var(--brand); }

/* ===============================
   Sections / Layout
   =============================== */
.section{ padding:40px 0; border-top:1px solid var(--border); }
.grid-2{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* ===============================
   Stat Cards (Home)
   =============================== */
.card-metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.card-metrics > div{
  background:var(--brand-50); border:1px solid #fed7aa;
  border-radius:var(--radius-lg); padding:24px; text-align:center;
  box-shadow:var(--shadow-soft);
}
.card-metrics .big{ font-size:28px; font-weight:800; }

/* ===============================
   Cards (List)
   =============================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  border:1px solid var(--border); border-radius:var(--radius-xl);
  overflow:hidden; background:#fff; box-shadow:var(--shadow-soft);
}
.card .thumb{
  display:block; aspect-ratio:16/10; background:#eee;
  background-size:cover; background-position:center;
}
.card-body{ padding:14px; }

/* Chips / Tags */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip{
  font-size:12px; background:var(--brand-50);
  border:1px solid #fed7aa; color:#9a3412;
  padding:6px 10px; border-radius:999px;
}

/* ===============================
   Detail / Sidebar
   =============================== */
.sidebar .info{
  display:grid; gap:10px; border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:14px; background:#fff;
  box-shadow:var(--shadow-soft); margin-bottom:12px;
}
.hero-img{
  width:100%; border-radius:var(--radius-xl); border:1px solid var(--border);
}

/* ===============================
   Forms (Generic)
   =============================== */
.form{ display:grid; gap:12px; max-width:520px; }
.form input, .form select, .form textarea{
  width:100%; padding:14px 12px; border:1px solid var(--border);
  border-radius:var(--radius-lg); outline:none; background:#fff; box-shadow:var(--shadow-soft);
}
.form .consent{ font-size:12px; color:var(--muted); }

/* ===============================
   Pagination
   =============================== */
.pagination{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.pagination a{
  border:1px solid var(--border); padding:8px 12px; border-radius:12px;
  text-decoration:none; color:var(--text); background:#fff;
  box-shadow:var(--shadow-soft);
}
.pagination a.active{
  background:var(--brand); color:#fff; border-color:var(--brand);
}

/* ===============================
   Footer
   =============================== */
.site-footer{
  border-top:1px solid var(--border); padding:28px 0; margin-top:40px; background:#fff;
}
.site-footer h4{ margin:0 0 8px 0; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.site-footer a:hover{ color:var(--brand); }

/* ===============================
   Responsive (共通)
   =============================== */
@media (max-width: 1024px){
  .grid-2{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width: 800px){
  .grid-4{ grid-template-columns:1fr 1fr; }
  .search-bar{ grid-template-columns:1fr; } /* モバイルは1列 */
  .cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px){
  .cards{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr; }
}

/* ===============================
   Typo fix / Typography (PC)
   =============================== */
@media (min-width: 961px){
  body, input, button, select, textarea{ font-size:16px; }
  h1{ font-size: clamp(32px, 4.4vw, 44px); }
  h2{ font-size: clamp(24px, 2.6vw, 28px); } /* ← font-size 修正 */
  h3{ font-size: clamp(21px, 2.0vw, 22px); }
}