/* サンプル宿サイト共通の土台（色・書体は各サイトの theme.css で上書き） */
:root{
  --bg:#f7f4ee;--ink:#222;--mute:#666;--line:#ddd;--accent:#7a2e3a;--accent-ink:#fff;--sub:#1b1a18;--sub-ink:#fff;
  --head-font:serif;--body-font:"Noto Sans JP",sans-serif;--en-font:serif;--wrap:1160px;--head-h:84px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body-font);color:var(--ink);background:var(--bg);letter-spacing:.05em;line-height:1.9;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.hd{font-family:var(--head-font)}
.en{font-family:var(--en-font);letter-spacing:.3em}

/* ヘッダー */
.site-header{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--head-h);display:flex;align-items:center;gap:36px;padding:0 44px;transition:background .3s,color .3s,box-shadow .3s;color:#fff}
.site-header.solid,body:not(.is-top) .site-header{background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--head-font);white-space:nowrap}
.logo .mon{width:38px;height:38px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:17px;flex:none}
.logo b{font-size:21px;font-weight:600;letter-spacing:.18em;display:block;line-height:1.3}
.logo small{display:block;font-size:10px;letter-spacing:.3em;opacity:.75;line-height:1.2}
.gnav{display:flex;gap:28px;margin-left:auto;font-size:13px;white-space:nowrap}
.gnav a{position:relative;padding:6px 0}
.gnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s}
.gnav a:hover::after,.gnav a.cur::after{right:0}
.h-tel{font-size:13px;white-space:nowrap}
.h-btn{background:var(--accent);color:var(--accent-ink);padding:12px 22px;font-size:13px;white-space:nowrap}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;color:inherit;cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .3s,opacity .3s}
.burger::before{top:15px}.burger span{top:22px}.burger::after{top:29px}
.menu-open .burger::before{transform:translateY(7px) rotate(45deg)}
.menu-open .burger span{opacity:0}
.menu-open .burger::after{transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:35;background:var(--sub);color:var(--sub-ink);padding:110px 32px 40px;display:flex;flex-direction:column;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer a{font-family:var(--head-font);font-size:19px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);letter-spacing:.15em}
.drawer .d-btn{margin-top:26px;background:var(--accent);color:var(--accent-ink);text-align:center;border:1px solid rgba(255,255,255,.4)}
.menu-open .drawer{opacity:1;pointer-events:auto}

/* 下層ページのヒーロー */
.page-hero{position:relative;height:62vh;min-height:380px;max-height:600px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5))}
.page-hero .in{position:relative;z-index:1;padding:0 0 56px}
.page-hero .en{font-size:13px;display:block;opacity:.85}
.page-hero h1{font-family:var(--head-font);font-weight:600;font-size:clamp(30px,4vw,46px);letter-spacing:.2em;margin-top:6px}
.crumb{font-size:12px;color:var(--mute);padding:18px 0}
.crumb a{text-decoration:underline}

/* セクション */
.sec{padding:110px 0}
.sec.tint{background:rgba(0,0,0,.03)}
.sec-t{text-align:center;margin-bottom:56px}
.sec-t .en{display:block;font-size:13px;color:var(--accent)}
.sec-t h2{font-family:var(--head-font);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:.16em;margin-top:8px;line-height:1.6}
.sec-t p{color:var(--mute);margin-top:18px;font-size:15px;line-height:2.1}
.lead{max-width:760px;margin:0 auto;text-align:center}
.lead h2{font-family:var(--head-font);font-weight:600;font-size:clamp(22px,2.8vw,32px);line-height:2;letter-spacing:.14em}
.lead p{margin-top:26px;color:var(--mute);line-height:2.3;font-size:15px}

/* 画像とテキストの交互 */
.rows{display:grid;gap:100px}
.row{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center}
.row:nth-child(even) .row-img{order:2}
.row:nth-child(even){grid-template-columns:1fr 1.15fr}
.row-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.row .en{font-size:12px;color:var(--accent)}
.row h3{font-family:var(--head-font);font-weight:600;font-size:clamp(21px,2.3vw,28px);line-height:1.7;letter-spacing:.12em;margin-top:6px}
.row p{margin-top:18px;color:#444;font-size:15px;line-height:2.1}
.spec{margin-top:22px;border-top:1px solid var(--line);font-size:14px}
.spec div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.spec dt{color:var(--mute)}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-size:13px;letter-spacing:.2em;border-bottom:1px solid currentColor;padding-bottom:4px}

/* カード */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card h3{font-family:var(--head-font);font-weight:600;font-size:19px;letter-spacing:.12em;margin-top:16px}
.card p{font-size:14px;color:#555;margin-top:8px;line-height:1.95}
.card .tag{display:inline-block;font-size:11px;letter-spacing:.1em;border:1px solid currentColor;padding:1px 10px;margin-top:12px;color:var(--accent)}

/* タイル（トップの3本柱） */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;color:#fff;display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))}
.tile .t{position:absolute;z-index:1;left:28px;bottom:28px}
.tile .t .en{font-size:12px;display:block}
.tile .t b{font-family:var(--head-font);font-weight:600;font-size:24px;letter-spacing:.25em}

/* 宿泊プラン */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.plan{background:#fff;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line)}
.plan img{width:100%;aspect-ratio:16/10;object-fit:cover}
.plan .b{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1}
.plan .lbl{font-size:11px;letter-spacing:.12em;color:var(--accent)}
.plan h3{font-family:var(--head-font);font-weight:600;font-size:18px;line-height:1.7;margin-top:6px}
.plan p{font-size:13.5px;color:#555;margin-top:10px;line-height:1.9}
.plan .price{margin-top:auto;padding-top:18px;font-family:var(--head-font);font-size:24px;font-weight:600}
.plan .price small{font-size:12px;font-family:var(--body-font);color:var(--mute);margin-left:4px}
.plan .go{display:block;text-align:center;margin-top:14px;background:var(--accent);color:var(--accent-ink);padding:12px;font-size:13px;letter-spacing:.2em}

/* お知らせ */
.news{max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
.news li{list-style:none;display:grid;grid-template-columns:120px 90px 1fr;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line);font-size:14px;align-items:center}
.news time{color:var(--mute);font-family:var(--en-font);letter-spacing:.1em}
.news .cat{font-size:11px;text-align:center;border:1px solid var(--line);padding:2px 0}

/* 表 */
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:16px 18px;text-align:left;vertical-align:top}
.tbl th{width:200px;font-weight:500;color:var(--mute);background:rgba(0,0,0,.02)}

/* アクセス */
.map{position:relative;aspect-ratio:16/8;background:
  linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/40px 40px,#ece8df;display:grid;place-items:center;color:var(--mute);font-size:13px}
.map::before{content:"";position:absolute;left:12%;right:20%;top:58%;height:10px;background:#d8d1c2;transform:rotate(-8deg)}
.map .pin{position:relative;z-index:1;text-align:center}
.map .pin i{display:block;width:26px;height:26px;margin:0 auto 8px;background:var(--accent);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.route div{background:#fff;padding:26px;box-shadow:0 1px 0 var(--line)}
.route b{font-family:var(--head-font);font-size:17px;display:block}
.route p{font-size:14px;color:#555;margin-top:8px;line-height:1.9}

/* 予約帯 */
.reserve{position:relative;padding:120px 0;color:#fff;text-align:center;overflow:hidden}
.reserve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reserve::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.reserve .in{position:relative;z-index:1}
.reserve h2{font-family:var(--head-font);font-weight:600;font-size:clamp(22px,3vw,32px);letter-spacing:.2em}
.reserve p{margin-top:16px;font-size:14px;opacity:.9}
.reserve .btns{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.reserve .btns a{min-width:240px;padding:18px 20px;font-size:14px;letter-spacing:.2em;border:1px solid #fff}
.reserve .btns a.p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* フォーム（予約リクエスト・宴会のお問い合わせ） */
.form{max-width:760px;margin:0 auto;background:#fff;padding:48px 52px;box-shadow:0 1px 0 var(--line)}
.form .f{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.form label{font-size:14px}
.form label em{font-style:normal;font-size:10px;background:var(--accent);color:var(--accent-ink);padding:1px 6px;margin-left:8px}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);padding:11px 12px;font-size:15px;font-family:inherit;background:#fcfbf9}
.form textarea{height:110px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .submit{display:block;width:100%;margin-top:30px;background:var(--accent);color:var(--accent-ink);border:0;padding:18px;font-size:15px;letter-spacing:.2em;cursor:pointer;font-family:inherit}
.form .note{font-size:12px;color:var(--mute);margin-top:14px;text-align:center}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto 50px}
.steps3 div{text-align:center;background:#fff;padding:24px 16px}
.steps3 b{display:block;font-family:var(--en-font);color:var(--accent);font-size:13px;letter-spacing:.2em}
.steps3 span{font-size:14px;display:block;margin-top:4px}

/* フッター */
.site-footer{background:var(--sub);color:var(--sub-ink);padding:80px 0 40px;font-size:13px}
.f-top{display:grid;grid-template-columns:1.2fr 1fr;gap:60px}
.f-info p{margin-top:18px;opacity:.8;line-height:2}
.f-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;align-content:start}
.f-nav a{opacity:.85;padding:4px 0}
.f-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;opacity:.6;font-size:11px}
.spbar{display:none}
.sample-mark{position:fixed;left:8px;bottom:8px;z-index:60;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:3px 8px;letter-spacing:.05em}

/* ふわっと表示 */
.fx{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s}
.fx.in{opacity:1;transform:none}
.noanim .fx{opacity:1;transform:none;transition:none}

@media (max-width:1100px){
  .gnav,.h-tel,.h-btn{display:none}
  .burger{display:block}
  .site-header{padding:0 16px 0 24px}
}
@media (max-width:760px){
  :root{--head-h:64px}
  .wrap{padding:0 20px}
  .logo .mon{width:32px;height:32px;font-size:14px}
  .logo b{font-size:17px}
  .logo small{display:none}
  .sec{padding:76px 0}
  .row,.row:nth-child(even){grid-template-columns:1fr;gap:26px}
  .row:nth-child(even) .row-img{order:0}
  .rows{gap:64px}
  .cards,.cards.c2,.cards.c4,.plans,.route,.steps3{grid-template-columns:1fr}
  .cards.c4{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:16/10}
  .news li{grid-template-columns:1fr;gap:4px}
  .news .cat{width:80px}
  .tbl th{width:110px}
  .tbl th,.tbl td{padding:12px}
  .map{aspect-ratio:4/3}
  .form{padding:30px 20px}
  .form .f{grid-template-columns:1fr;gap:6px}
  .f-top{grid-template-columns:1fr;gap:36px}
  .f-bottom{flex-direction:column;gap:6px;padding-bottom:60px}
  .spbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:30}
  .spbar a{padding:17px 0;text-align:center;font-size:14px;letter-spacing:.12em}
  .page-hero{height:48vh;min-height:300px;max-height:420px}
  .sample-mark{bottom:62px}
}