/* =========================================================
   株式会社ロワーズ ブログ（お店の読みもの）
   色や文字はホームページ（index.html）と同じにしています。
   ========================================================= */
:root{
  --bg:#f4f1e8; --bg-2:#ebe6d9; --ink:#1a1a1a; --ink-2:#57524a;
  --line:#d5cebe; --dark:#14120f; --gold:#c0a172; --gold-d:#7d5e2e;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --en:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:2.05;letter-spacing:.05em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold-d)}
:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}

/* ヘッダー */
.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top .in{max-width:1080px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--en);font-size:1.15rem;letter-spacing:.3em;color:var(--ink);text-decoration:none}
.brand small{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.2em;opacity:.7}
.top nav a{font-size:.78rem;letter-spacing:.14em;color:var(--ink);text-decoration:none;margin-left:18px}

/* パンくず（いまどこにいるか） */
.crumb{max-width:760px;margin:22px auto 0;padding:0 20px;font-size:.75rem;color:var(--ink-2)}
.crumb a{color:var(--ink-2)}

/* 記事 */
.post{max-width:760px;margin:0 auto;padding:20px 20px 80px}
.post .cat{font-family:var(--en);font-style:italic;color:var(--gold-d);letter-spacing:.12em;font-size:.95rem}
.post h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,4.6vw,2.05rem);line-height:1.6;letter-spacing:.08em;margin:6px 0 18px}
.byline{font-size:.8rem;color:var(--ink-2);border-left:3px solid var(--gold);padding:6px 0 6px 14px;margin-bottom:28px;line-height:1.8}
.byline strong{font-weight:400;color:var(--ink)}
.hero-img{margin:0 0 8px;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.hero-img img{width:100%;height:100%;object-fit:cover}
.cap{font-size:.75rem;color:var(--ink-2);margin-bottom:30px}
.post h2{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:.1em;line-height:1.7;
  margin:52px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.post h3{font-family:var(--serif);font-weight:400;font-size:1.08rem;margin:30px 0 8px}
.post p{margin:0 0 18px}
.post ul,.post ol{margin:0 0 20px 1.4em}
.post li{margin:4px 0}
.post strong{font-weight:400;background:linear-gradient(transparent 62%,rgba(192,161,114,.35) 62%)}

/* 先に答え（AIや急いでいる人向けの要約） */
.answer{background:#fff;border:1px solid var(--line);padding:22px 24px;margin:0 0 34px}
.answer .t{font-family:var(--serif);font-size:.95rem;letter-spacing:.14em;color:var(--gold-d);margin-bottom:6px}
.answer ul{margin:0 0 0 1.2em}

/* 情報の表 */
.facts{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:.92rem}
.facts th,.facts td{border-top:1px solid var(--line);padding:12px 8px;text-align:left;vertical-align:top;line-height:1.8}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:1px solid var(--line)}
.facts th{width:30%;font-weight:400;color:var(--ink-2);white-space:nowrap}

/* よくある質問 */
.faq dt{font-family:var(--serif);font-weight:400;margin-top:20px}
.faq dt::before{content:"Q. ";color:var(--gold-d)}
.faq dd{margin:4px 0 0;padding-left:1.6em}
.faq dd::before{content:"A. ";margin-left:-1.6em;color:var(--gold-d)}

/* 予約ボタン */
.cta-box{background:var(--dark);color:#f4f1e8;padding:30px 24px;margin:48px 0 0;text-align:center}
.cta-box .n{font-family:var(--serif);font-size:1.15rem;letter-spacing:.14em}
.cta-box p{font-size:.85rem;opacity:.85;margin:6px 0 18px}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-block;border:1px solid var(--gold);color:#f4f1e8;text-decoration:none;padding:12px 22px;font-size:.85rem;letter-spacing:.12em}
.btn.main{background:var(--gold);color:var(--dark)}

/* 記事の中の写真 */
.fig{margin:6px 0 24px}
.fig img{width:100%;height:auto}
.fig figcaption{font-size:.75rem;color:var(--ink-2);margin-top:6px}

/* 地図 */
.map{aspect-ratio:4/3;margin:0 0 26px;border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0}

/* 写真待ちの枠（写真が届いたら差し替え） */
.photo-wait{border:1px dashed var(--gold-d);color:var(--gold-d);padding:28px 16px;text-align:center;font-size:.85rem;margin:0 0 24px}

/* 関連記事 */
.related{margin-top:56px}
.related h2{margin-top:0}
.cards{list-style:none;margin:0!important;display:grid;gap:14px}
.cards a{display:block;background:#fff;border:1px solid var(--line);padding:16px 18px;text-decoration:none;color:var(--ink);line-height:1.7}
.cards .k{display:block;font-size:.72rem;color:var(--gold-d);letter-spacing:.1em}

/* ブログ一覧 */
.list-head{max-width:760px;margin:40px auto 0;padding:0 20px}
.list-head .en{font-family:var(--en);font-style:italic;color:var(--gold-d);letter-spacing:.14em}
.list-head h1{font-family:var(--serif);font-weight:400;font-size:1.7rem;letter-spacing:.16em;margin:4px 0 10px}
.list-head p{font-size:.9rem;color:var(--ink-2)}
.list{max-width:760px;margin:26px auto 80px;padding:0 20px}

/* フッター */
footer{background:var(--dark);color:rgba(244,241,232,.75);font-size:.75rem;text-align:center;padding:30px 20px;line-height:2}
footer a{color:rgba(244,241,232,.9)}

@media (max-width:560px){
  .top nav a{margin-left:12px;font-size:.72rem}
  .facts th{width:34%;white-space:normal}
  .answer{padding:18px}
}