/* ルーム別・エリア別ページ共通。トップの index.html とパレットを合わせている */
:root{
  --bg:#f7f5ef; --paper:#fff; --ink:#17211c; --muted:#65746b;
  --line:#e2e5dc; --green:#00a86b; --deep:#083f2a; --soft:#e8f7f0;
  --shadow:0 16px 40px rgba(20,35,28,.10);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:1.8; -webkit-text-size-adjust:100%;
}
a{color:#087647}
img{max-width:100%;height:auto}

.site-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 20px; background:var(--deep); color:#fff;
}
.brand{color:#fff; text-decoration:none; font-weight:950; letter-spacing:-.02em; font-size:16px}
.areanav{display:flex; gap:7px; flex-wrap:wrap}
.areanav a{
  color:#fff; text-decoration:none; font-size:12px; font-weight:900;
  border:1px solid rgba(255,255,255,.34); border-radius:999px; padding:5px 11px;
}
.areanav a:hover{background:rgba(255,255,255,.14)}

.wrap{max-width:820px; margin:0 auto; padding:22px 18px 40px}

.crumbs{font-size:12px; color:var(--muted); margin:0 0 14px; font-weight:800}
.crumbs a{color:var(--muted)}
.crumbs i{font-style:normal; margin:0 6px; opacity:.6}

h1{font-size:clamp(25px,5.4vw,34px); line-height:1.32; letter-spacing:-.03em; margin:0 0 10px}
h2{font-size:21px; letter-spacing:-.02em; margin:0 0 10px}
h3{font-size:15px; margin:16px 0 6px}
.lede{color:var(--muted); margin:0 0 14px}
.note{font-size:13px; color:var(--muted)}

.tags{list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0 0 20px}
.tags li{
  background:var(--soft); border:1px solid #cdeadb; color:#0b5c3c;
  border-radius:999px; padding:5px 10px; font-size:12px; font-weight:900;
}

.block{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:20px; margin:0 0 18px; box-shadow:var(--shadow);
}
.block.memo{background:#fff8e7; border-color:#f0e2bd}
.block > :last-child{margin-bottom:0}

.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:340px}
th,td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
thead th{background:#f2f6f3; font-size:13px; white-space:nowrap}
tbody th{background:#f7faf8; width:36%; white-space:nowrap}

.linklist{margin:6px 0 0; padding-left:20px}
.linklist li{margin:3px 0}

.actions{margin:0 0 18px}
.btn{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:#111827; color:#fff; border:1px solid #111827;
  border-radius:999px; padding:11px 16px; font-size:14px; font-weight:900;
}
.more{font-weight:900; text-decoration:none}
.more:hover{text-decoration:underline}

.cardlist{list-style:none; padding:0; margin:0; display:grid; gap:9px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cardlist a{
  display:block; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:15px; padding:12px 14px; background:#f7faf8;
}
.cardlist a:hover{border-color:var(--green); background:#fff}
.cardlist b{display:block; font-size:14px; line-height:1.45}
.cardlist span{display:block; font-size:12px; color:var(--muted); margin-top:3px}

/* ルームページの見出し画像。ロゴは余白を残して収め、写真は切り抜く */
.roomshot{
  margin:0 0 18px; background:linear-gradient(135deg,var(--soft),#fff);
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
}
.roomshot img{display:block; width:100%}
.roomshot.logo img{height:200px; object-fit:contain; padding:18px; background:#fff}
.roomshot.photo img{height:230px; object-fit:cover}

/* エリアページのサムネ */
.thumb{display:block; margin:0 0 12px; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.thumb img{display:block; width:100%; height:132px; object-fit:contain; background:#fff; padding:10px}

.roomrow{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:20px; margin:0 0 16px; box-shadow:var(--shadow);
}
.roomrow h2{margin:0 0 4px; font-size:19px}
.roomrow h2 a{text-decoration:none}
.roomrow h2 a:hover{text-decoration:underline}
.roomrow .meta{font-size:13px; color:var(--muted); margin:0 0 12px; font-weight:800}
.roomrow > :last-child{margin-bottom:0}

.site-foot{
  border-top:1px solid var(--line); margin-top:26px;
  padding:24px 18px 40px; text-align:center; color:var(--muted); font-size:13px;
}
.site-foot p{margin:0 0 8px}

@media(max-width:560px){
  .wrap{padding:16px 14px 32px}
  .block,.roomrow{padding:16px; border-radius:17px}
  tbody th{width:42%}
}