/* 長崎リラクログ 共通スタイル｜中間トーン（親しみ × 上質） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500;600&display=swap');

:root{
  --bg:#FBF7F0;        /* 生成り */
  --surface:#FFFFFF;
  --green:#3E5C50;     /* 深い緑（ヘッダー・信頼） */
  --green-mid:#4F7360; /* 中間の緑（アクセント） */
  --green-tint:#E7EFE8;
  --accent:#C07A45;    /* くすみ銅（予約ボタン・温かさ＋上質） */
  --accent-dark:#9c6135;
  --ink:#2E2E2C;       /* 文字（黒すぎない） */
  --ink-sub:#6B665E;
  --ink-faint:#9A958C;
  --line:rgba(0,0,0,0.12);
  --radius:12px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Noto Sans JP',sans-serif; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.serif{font-family:'Noto Serif JP',serif;}
.wrap{max-width:880px; margin:0 auto; padding:0 18px;}

/* ヘッダー */
.site-header{background:var(--green); color:#EDEAE0; position:sticky; top:0; z-index:10;}
.site-header .inner{max-width:880px; margin:0 auto; padding:13px 18px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.brand{font-size:19px; font-weight:600; letter-spacing:0.04em; display:flex; align-items:center; gap:6px;}
.brand .serif{font-weight:600;}
.nav{display:flex; gap:16px; font-size:13px; color:#C9D2CB;}
.nav a:hover{color:#fff;}

/* ヒーロー */
.hero{background:var(--bg); padding:34px 0 26px;}
.hero .badge{display:inline-block; background:#F0E2D3; color:var(--accent-dark);
  font-size:12.5px; font-weight:500; border-radius:20px; padding:5px 14px; margin-bottom:14px;}
.hero h1{font-size:26px; line-height:1.5; margin:0 0 14px; color:var(--ink);}
.hero p{font-size:14.5px; color:var(--ink-sub); margin:0 0 18px; max-width:580px;}
.tags{display:flex; flex-wrap:wrap; gap:8px;}
.tag{font-size:12.5px; color:var(--green-mid); background:var(--green-tint);
  border-radius:20px; padding:6px 14px;}

/* セクション */
section{padding:26px 0;}
.sec-title{font-size:19px; font-weight:700; color:var(--ink); margin:0 0 4px;
  display:flex; align-items:center; gap:8px;}
.sec-title i{color:var(--accent);}
.sec-rule{width:34px; height:2px; background:var(--accent); margin:0 0 18px;}

/* 目的別カード */
.purpose-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px;}
.purpose{background:var(--surface); border:0.5px solid var(--line); border-radius:var(--radius); padding:16px;}
.purpose i{font-size:22px; color:var(--green-mid);}
.purpose .t{font-size:14.5px; font-weight:700; margin:8px 0 3px;}
.purpose .s{font-size:12.5px; color:var(--ink-faint);}

/* 店リスト（カード型） */
.store-list{display:flex; flex-direction:column; gap:11px;}
.store{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:0.5px solid var(--line); border-radius:var(--radius); padding:14px 16px;}
.store .info .name{font-size:15px; font-weight:700; color:var(--ink);}
.store .info .meta{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.store .info .name a:hover{color:var(--green-mid);}

/* ボタン */
.btn-reserve{background:var(--accent); color:#fff; font-size:13px; font-weight:500;
  border-radius:10px; padding:9px 18px; white-space:nowrap; display:inline-block;
  transition:background .15s;}
.btn-reserve:hover{background:var(--accent-dark);}
.btn-detail{display:inline-block; font-size:13px; color:var(--green-mid); font-weight:500;
  border:0.5px solid var(--green-mid); border-radius:10px; padding:8px 16px;}
.btn-detail:hover{background:var(--green-tint);}

/* 回数バッジ */
.vb{display:inline-block; font-size:11.5px; font-weight:500; border-radius:20px;
  padding:3px 10px; white-space:nowrap;}
.v100{background:var(--accent); color:#fff;}
.v50{background:#D7E3DA; color:#2F4A3E;}
.v30{background:#E7EFE8; color:#4F7360;}
.vlow{background:#ECE8E1; color:#8A857C;}

/* エリア見出し */
.area-head{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700;
  color:var(--green); margin:22px 0 10px;}
.area-head i{color:var(--accent);}
.area-head .count{font-size:12px; font-weight:500; color:var(--ink-faint);}

/* 比較テーブル（全店一覧） */
.table-wrap{background:var(--surface); border:0.5px solid var(--line); border-radius:var(--radius); overflow:hidden;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead tr{background:var(--green); color:#EDEAE0; text-align:left;}
th{padding:11px 12px; font-weight:500;}
td{padding:11px 12px; border-bottom:0.5px solid rgba(0,0,0,0.07); color:#3a3a3a; vertical-align:top;}
tbody tr:nth-child(even){background:#FAF6EF;}
tbody tr:last-child td{border-bottom:none;}
.sub{font-size:11.5px; color:var(--ink-faint);}

/* 個別店ページ */
.store-hero{background:var(--green); color:#EDEAE0; padding:30px 0;}
.store-hero .badge{display:inline-block; background:rgba(255,255,255,0.14); color:#E7D9C5;
  font-size:12px; border-radius:20px; padding:4px 12px; margin-bottom:12px;}
.store-hero h1{font-size:23px; line-height:1.5; margin:0 0 8px; color:#F3EFE4;}
.store-hero .lead{font-size:13.5px; color:#C9D2CB; margin:0;}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:20px 0;}
.fact{background:var(--surface); border:0.5px solid var(--line); border-radius:var(--radius); padding:13px 15px;}
.fact .k{font-size:11.5px; color:var(--ink-faint);}
.fact .v{font-size:15px; font-weight:700; color:var(--ink); margin-top:2px;}
.body-block{background:var(--surface); border:0.5px solid var(--line); border-radius:var(--radius); padding:20px; margin:16px 0;}
.body-block h2{font-size:17px; margin:0 0 10px; color:var(--ink);}
.placeholder{background:#FFF6E9; border:1px dashed #E0B274; border-radius:8px;
  padding:12px 14px; color:#9c6135; font-size:13px; margin:8px 0;}
.cta-box{background:var(--green-tint); border-radius:var(--radius); padding:18px; text-align:center; margin:20px 0;}
.cta-box p{margin:0 0 12px; font-size:14px; color:var(--green);}

/* 「今日行ける店」導線 */
.today{background:var(--green); color:#EDEAE0; padding:24px 0 26px;}
.today .head{font-size:19px; font-weight:700; color:#F3EFE4; margin:0 0 4px;
  display:flex; align-items:center; gap:8px;}
.today .head i{color:#D9B583;}
.today .sub{font-size:13px; color:#C9D2CB; margin:0 0 16px;}
.today .label{font-size:12px; color:#A9B7AD; letter-spacing:0.05em; margin:14px 0 8px;}
.today-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.today-btn{display:flex; align-items:center; gap:9px; background:var(--accent); color:#fff;
  border-radius:10px; padding:13px 15px; font-size:14px; font-weight:500; transition:background .15s;}
.today-btn:hover{background:var(--accent-dark);}
.today-btn i{font-size:19px;}
.today-btn.alt{background:rgba(255,255,255,0.09); color:#EDEAE0; border:0.5px solid rgba(255,255,255,0.25);}
.today-btn.alt:hover{background:rgba(255,255,255,0.16);}
.today .note{font-size:11.5px; color:#9EACA2; margin:16px 0 0;}

/* お問い合わせフォーム埋め込み */
.form-embed{margin:10px 0;}
.form-embed iframe{width:100%; min-height:720px; border:0.5px solid var(--line);
  border-radius:var(--radius); background:#fff;}

/* PR表記・注意 */
.pr-note{font-size:11.5px; color:var(--ink-faint); margin:8px 0 0;}
.disclaimer{background:#fff; border:0.5px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; font-size:12px; color:var(--ink-sub); margin:18px 0;}

/* フッター */
footer{background:var(--green); color:#C9D2CB; margin-top:30px; padding:24px 0;}
footer .inner{max-width:880px; margin:0 auto; padding:0 18px; font-size:12.5px;}
footer a{color:#E7D9C5;}
.back-link{display:inline-block; margin:18px 0; font-size:13px; color:var(--green-mid);}

@media(max-width:560px){
  .hero h1{font-size:22px;}
  .nav{font-size:12px; gap:12px;}
  .store{flex-direction:column; align-items:stretch;}
  .store .btn-reserve{text-align:center;}
}