/* ============================================
   温泉のしおり 共通スタイル
   コンセプト：高級温泉旅館のラウンジ × 観光案内所
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --paper:#F5EFE5;
  --paper2:#EFE7D9;
  --crm:#FFFDF9;
  --kinari:#F5EFE5; --kinari-2:#EFE7D9; --white:#FFFDF9;
  --ink:#3B2D21;
  --ink-2:#6B5946;
  --mut:#A2937E;
  --bdr:#E6DCCB;
  --hair:#E6DCCB; --hair-2:#D8CBB4;
  --wood:#6B4F3A;
  --gold:#C3A36A;
  --gold-soft:#D8C49A;
  --kin:#C3A36A;
  --shu:#7A2A33;
  --enji:#7A2A33; --enji-deep:#5E1F27; --enji-light:#8E3A42;
  /* カテゴリ色 */
  --c-tv:#4A7AB5;
  --c-magazine:#5A8A5A;
  --c-podcast:#2F6B75;
  --c-event:#C0473A;
  --c-sns:#A85A72;
  --c-web:#8A5AA0;
  --c-work:#8A5A40;
  --c-photo:#B07A3F;
  --serif:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  --latin:'Cormorant Garamond','Shippori Mincho B1',serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:var(--sans); font-size:15px; line-height:1.95;
  letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--serif); }
/* 和紙テクスチャ */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23p)'/%3E%3C/svg%3E");
}
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:0.78; }
img{ max-width:100%; }
button{ font-family:var(--sans); cursor:pointer; }
input,select{ font-family:var(--sans); }
:focus-visible{ outline:2px solid var(--enji); outline-offset:2px; }

/* ── 湯気アンビエント ───────────────── */
.steam{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.steam span{
  position:absolute; bottom:-30%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,253,247,0.9), rgba(255,253,247,0));
  filter:blur(30px); opacity:0;
  animation:rise 11s ease-in-out infinite;
}
.steam span:nth-child(1){ left:8%;  width:340px; height:420px; animation-delay:0s; }
.steam span:nth-child(2){ left:55%; width:420px; height:520px; animation-delay:3.5s; animation-duration:13s; }
.steam span:nth-child(3){ left:78%; width:280px; height:360px; animation-delay:7s; }
@keyframes rise{
  0%{ transform:translateY(10%) scale(0.9); opacity:0; }
  25%{ opacity:0.5; }
  60%{ opacity:0.3; }
  100%{ transform:translateY(-130%) scale(1.15); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .steam span{ animation:none; opacity:0.18; transform:translateY(-40%); }
  html{ scroll-behavior:auto; }
  .fade-in{ animation:none !important; }
}

/* ── レイアウト ─────────────────────── */
.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
main{ min-height:70vh; }

/* ── ヘッダー ───────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(245,239,229,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
}
.site-header .gnav a, .site-header .unof, .site-header .nav-toggle{ font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif; }
.site-header .brand .name{ font-family:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',serif; }
.site-header .brand .sub{ font-family:'Cormorant Garamond','Shippori Mincho B1',serif; }
.site-header .wrap{
  display:flex; align-items:center; gap:18px; height:70px;
}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand .mark{ width:42px; height:42px; border-radius:50%; flex-shrink:0; border:1.5px solid var(--enji); color:var(--enji); display:flex; align-items:center; justify-content:center; font-size:20px; background:var(--white); }
.brand .brand-tx{ display:flex; flex-direction:column; line-height:1.25; }
.brand .name{ font-family:var(--serif); font-weight:700; font-size:19px; letter-spacing:0.1em; }
.brand .sub{ font-family:var(--latin); font-size:9px; color:var(--mut); letter-spacing:0.3em; }
.unof{ display:inline-flex; align-items:center; gap:6px; font-size:9.5px; font-weight:500; letter-spacing:0.14em; color:var(--enji); border:1px solid rgba(122,42,51,0.45); border-radius:999px; padding:2px 10px; background:rgba(255,253,249,0.7); white-space:nowrap; }
.unof::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--enji); }
.gnav{ display:flex; gap:14px; margin-left:auto; align-items:center; }
.gnav a{
  font-size:12.5px; padding:6px 1px; letter-spacing:0.1em; color:var(--ink-2);
  position:relative;
}
.gnav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--enji); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform 0.34s cubic-bezier(.22,.9,.3,1); }
.gnav a:hover::after, .gnav a.on::after{ transform:scaleX(1); }
.gnav a.on{ color:var(--enji); font-weight:700; }
.h-search{ width:38px; height:38px; border-radius:50%; border:1px solid var(--hair); background:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 0.25s, box-shadow 0.25s; }
.h-search:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(59,45,33,0.1); }
.h-search svg{ width:15px; height:15px; stroke:var(--enji); }
.nav-toggle{ display:none; margin-left:auto; background:none; border:0; padding:8px; }
.nav-toggle i{ display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0; border-radius:2px; }

/* ── 金の罫線・セクション見出し ─────────── */
.section{ padding:54px 0 10px; }
.sec-head{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.sec-head .eyebrow{
  font-family:var(--latin); font-size:11px; letter-spacing:0.42em;
  color:var(--enji); text-transform:uppercase; white-space:nowrap;
}
.sec-head h2{
  font-size:21px; font-weight:700; letter-spacing:0.14em; margin:0; white-space:nowrap;
}
.sec-head .rule{ flex:1; height:1px; background:linear-gradient(90deg, var(--gold-soft), transparent); }
.sec-head .more{ font-size:12px; color:var(--mut); letter-spacing:0.1em; white-space:nowrap; }
.sec-head .more::after{ content:" ›"; color:var(--gold); }

/* ── カード ─────────────────────────── */
.card{
  background:var(--crm); border:1px solid var(--bdr); border-radius:4px;
  padding:18px 20px; position:relative;
}
.card.lift{ transition:transform 0.18s ease, box-shadow 0.18s ease; }
.card.lift:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(73,57,35,0.1); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }

/* ── バッジ・タグ ────────────────────── */
.badge{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.08em;
  padding:2px 8px; border-radius:2px; color:#fff; vertical-align:middle;
}
.tag{
  display:inline-block; font-size:10.5px; padding:2px 9px; border-radius:2px;
  border:1px solid var(--bdr); background:var(--paper); color:var(--mut);
}
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; }

/* カテゴリ色ユーティリティ */
.cat-tv{ --cat:var(--c-tv); } .cat-magazine{ --cat:var(--c-magazine); }
.cat-podcast{ --cat:var(--c-podcast); } .cat-event{ --cat:var(--c-event); }
.cat-sns{ --cat:var(--c-sns); } .cat-web{ --cat:var(--c-web); }
.cat-work{ --cat:var(--c-work); } .cat-photo{ --cat:var(--c-photo); }

/* ── ボタン ─────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--wood); color:var(--wood); background:transparent;
  padding:10px 26px; font-size:13.5px; font-weight:600; letter-spacing:0.16em;
  border-radius:3px; transition:0.18s;
}
.btn:hover{ background:var(--wood); color:var(--paper); opacity:1; }
.btn.fill{ background:var(--wood); color:var(--paper); }
.btn.fill:hover{ background:var(--ink); border-color:var(--ink); }
.btn.shu{ border-color:var(--shu); color:var(--shu); }
.btn.shu:hover{ background:var(--shu); color:#fff; }

/* ── 検索窓 ─────────────────────────── */
.searchbox{
  display:flex; align-items:center; gap:0;
  border:1px solid var(--bdr); border-radius:4px; background:var(--crm);
  overflow:hidden;
}
.searchbox input{
  flex:1; border:0; background:transparent; padding:13px 18px;
  font-size:14px; color:var(--ink); outline:none;
}
.searchbox button{
  border:0; background:var(--wood); color:var(--paper);
  padding:13px 24px; font-size:13px; letter-spacing:0.2em;
}

/* ── テーブル ───────────────────────── */
table.sheet{ border-collapse:collapse; width:100%; font-size:13px; background:var(--crm); }
table.sheet th, table.sheet td{ border-bottom:1px solid var(--bdr); padding:9px 12px; text-align:left; }
table.sheet thead th{
  font-size:11px; letter-spacing:0.14em; color:var(--mut); font-weight:600;
  border-bottom:1.5px solid var(--gold-soft); background:var(--paper2);
}

/* ── フィルタチップ ───────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  font-size:12px; padding:5px 14px; border-radius:999px;
  border:1px solid var(--bdr); background:var(--crm); color:var(--mut);
  letter-spacing:0.06em;
}
.chip.on{ background:var(--wood); border-color:var(--wood); color:var(--paper); font-weight:600; }

/* ── フッター ───────────────────────── */
.site-footer{ position:relative; margin-top:54px; background:var(--enji-deep); color:#F2E9DC; padding:34px 0 30px; font-size:11.5px; }
.site-footer .wrap{ display:flex; gap:32px; align-items:center; flex-wrap:wrap; font-size:11.5px; }
.site-footer .foot-links{ width:100%; margin:0 0 4px; font-family:var(--serif); font-size:13px; letter-spacing:.06em; }
.site-footer .foot-links a{ display:inline; padding:0; color:var(--gold); border-bottom:1px solid transparent; opacity:1; }
.site-footer .foot-links a:hover{ border-bottom-color:var(--gold); }
.site-footer .foot-links .fdot{ margin:0 0.7em; opacity:.5; }
.site-footer .fb{ display:flex; align-items:center; gap:11px; }
.site-footer .fb .mk{ width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(242,233,220,0.55); display:flex; align-items:center; justify-content:center; font-size:16px; }
.site-footer .fb .jp{ font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:0.1em; display:block; line-height:1.4; }
.site-footer .fb .un2{ font-size:9.5px; opacity:0.85; letter-spacing:0.1em; display:block; }
.site-footer .links{ display:flex; gap:20px; flex-wrap:wrap; }
.site-footer a{ opacity:0.92; border-bottom:1px solid transparent; }
.site-footer a:hover{ opacity:1; border-bottom-color:rgba(242,233,220,0.5); }
.site-footer .legal{ margin-left:auto; text-align:right; font-size:10px; opacity:0.85; line-height:1.9; max-width:380px; }
@media (max-width:768px){ .site-footer .legal{ margin-left:0; text-align:left; } }
.site-footer .foot-ask{ white-space:nowrap; }
.site-footer .foot-contact a{ color:var(--gold-soft); border-bottom:1px solid rgba(216,196,154,.4); padding-bottom:1px; }
.site-footer .foot-contact a:hover{ opacity:1; color:#fff; }

/* ── 縦書きアクセント ─────────────────── */
.vert{
  writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:0.32em;
}

/* ── フェードイン ─────────────────────── */
.fade-in{ animation:fadein 0.5s ease both; }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* ── 空表示 ─────────────────────────── */
.empty{
  text-align:center; padding:44px 20px; color:var(--mut); font-size:13px;
  border:1px dashed var(--bdr); border-radius:4px; background:var(--crm);
}

/* ============================================
   レスポンシブ（1440 / 1024 / 768 / 480）
   ============================================ */
@media (max-width:1024px){
  .wrap{ padding:0 22px; }
  .grid3{ grid-template-columns:1fr 1fr; }
  .site-footer .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  body{ font-size:15px; }
  .gnav{
    display:none; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1px solid var(--bdr); padding:8px 0 14px;
  }
  .gnav.open{ display:flex; }
  .gnav a{ padding:12px 28px; font-size:14px; }
  .gnav a::after{ display:none; }
  .gnav a.on{ color:var(--enji); font-weight:700; }
  .nav-toggle{ display:block; }
  .unof{ display:none; }
  .grid2,.grid3{ grid-template-columns:1fr; }
  .section{ padding:40px 0 6px; }
  .sec-head h2{ font-size:18px; }
  .site-footer .cols{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:480px){
  .wrap{ padding:0 16px; }
  .brand .sub{ display:none; }
  .sec-head{ gap:10px; }
  .sec-head .eyebrow{ display:none; }
}