:root {
  --main: #42525B; --deep: #2B383F;
  --kinari: #F6F2EA; --white: #FFFFFF;
  --ink: #23292A; --sub: #596360;
  --rule: color-mix(in srgb, var(--main) 16%, transparent);
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --gutter: clamp(16px, 5vw, 56px);
  --wide: 1120px;
}
html[data-iro="mori"]   { --main: #2F4A3B; --deep: #1E3127; }
html[data-iro="kurumi"] { --main: #5A4233; --deep: #3B2B21; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { font-family: var(--gothic); color: var(--ink); background: var(--white); line-height: 1.9; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.nb { display: inline-block; }
.center { text-align: center; }
h1, h2, h3 { text-wrap: balance; word-break: auto-phrase; }
p, dd, figcaption, summary, .a { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--main); outline-offset: 3px; }

/* 見出し */
.sec-head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head h2 { font: 600 clamp(24px, 3.2vw, 32px)/1.5 var(--mincho); letter-spacing: .08em; color: var(--main); }
.sec-head p { margin-top: 12px; color: var(--sub); font-size: 15px; }
.sec { padding: clamp(72px, 10vw, 128px) var(--gutter); }
.sec.kinari { background: var(--kinari); }
.inner { max-width: var(--wide); margin: 0 auto; }

/* 見出しを挟む葉の飾り */
.leaf { display: inline-flex; align-items: center; gap: 16px; }
.leaf::before, .leaf::after { content: ""; flex: none; width: 60px; height: 24px; background: var(--leaf, var(--main)); opacity: .8;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 26'><path d='M62 15Q36 15.5 6 10.5' stroke='black' stroke-width='1.3' fill='none' stroke-linecap='round'/><path d='M50.0 15.1C48.5 9.4 42.6 6.9 37.9 8.1C39.2 12.8 44.3 16.6 50.0 15.1Z'/><path d='M42.0 15.2C36.6 13.7 32.0 17.3 30.7 21.7C35.2 22.8 40.6 20.6 42.0 15.2Z'/><path d='M31.0 14.4C29.6 9.4 24.4 7.6 20.4 8.8C21.7 12.8 26.1 16.0 31.0 14.4Z'/><path d='M23.0 13.4C18.4 12.4 14.6 15.8 13.9 19.6C17.7 20.3 22.2 18.1 23.0 13.4Z'/><path d='M14.0 12.0C12.8 8.2 8.8 7.1 5.8 8.3C6.9 11.4 10.3 13.6 14.0 12.0Z'/><path d='M7.0 10.6C5.4 7.7 2.2 7.6 0.1 9.4C1.5 11.7 4.5 12.8 7.0 10.6Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 26'><path d='M62 15Q36 15.5 6 10.5' stroke='black' stroke-width='1.3' fill='none' stroke-linecap='round'/><path d='M50.0 15.1C48.5 9.4 42.6 6.9 37.9 8.1C39.2 12.8 44.3 16.6 50.0 15.1Z'/><path d='M42.0 15.2C36.6 13.7 32.0 17.3 30.7 21.7C35.2 22.8 40.6 20.6 42.0 15.2Z'/><path d='M31.0 14.4C29.6 9.4 24.4 7.6 20.4 8.8C21.7 12.8 26.1 16.0 31.0 14.4Z'/><path d='M23.0 13.4C18.4 12.4 14.6 15.8 13.9 19.6C17.7 20.3 22.2 18.1 23.0 13.4Z'/><path d='M14.0 12.0C12.8 8.2 8.8 7.1 5.8 8.3C6.9 11.4 10.3 13.6 14.0 12.0Z'/><path d='M7.0 10.6C5.4 7.7 2.2 7.6 0.1 9.4C1.5 11.7 4.5 12.8 7.0 10.6Z'/></svg>") center/contain no-repeat; }
.leaf::after { transform: scaleX(-1); }
.leaf.left::after { display: none; }
.leaf.left { align-items: flex-start; }
.leaf.left::before { margin-top: .55em; }
@media (max-width: 560px) { .leaf { gap: 10px; } .leaf::before, .leaf::after { width: 42px; height: 17px; } }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 3px; background: var(--main); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; letter-spacing: .04em; white-space: nowrap; transition: background .2s; }
.btn:hover { background: var(--deep); }
.btn.line { background: transparent; color: var(--main); border: 1px solid var(--main); }
.btn.line:hover { background: color-mix(in srgb, var(--main) 8%, transparent); }
.more { display: inline-block; margin-top: 28px; color: var(--main); font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* サンプル表示 */
.sample-note { position: fixed; left: 12px; bottom: 12px; z-index: 60; background: rgba(35,41,42,.82); color: #fff; font-size: 13px; line-height: 1.6; padding: 6px 12px; border-radius: 3px; }

/* ヘッダー */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; height: 72px; padding: 0 var(--gutter); color: #fff; transition: background .3s, color .3s; }
.hd::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; background: linear-gradient(rgba(0,0,0,.38), transparent); transition: opacity .3s; }
.hd.solid { background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.hd.solid::before { opacity: 0; }
.logo { font: 600 22px var(--mincho); letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.logo small { display: block; font: 400 11px var(--gothic); letter-spacing: .14em; opacity: .85; margin-top: -2px; }
.gnav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.gnav a { text-decoration: none; white-space: nowrap; }
.gnav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.hd .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.menu-btn { display: none; margin-left: auto; min-height: 44px; padding: 0 6px; font-size: 14px; white-space: nowrap; }
@media (max-width: 960px) {
  .gnav, .hd .tel { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 6px; }
  .hd { gap: 10px; height: 64px; }
  .hd .btn { padding: 0 14px; }
}
@media (max-width: 400px) {
  .logo { font-size: 19px; letter-spacing: .08em; }
  .logo small { font-size: 10px; letter-spacing: .08em; }
  .hd .btn { padding: 0 12px; font-size: 13px; }
}
.drawer { position: fixed; inset: 0; z-index: 70; background: var(--white); padding: 24px var(--gutter); transform: translateY(-100%); visibility: hidden; overflow-y: auto; transition: transform .35s, visibility 0s .35s; display: flex; flex-direction: column; }
.drawer.open { transform: none; visibility: visible; transition: transform .35s; }
.drawer .close { align-self: flex-end; min-height: 44px; padding: 0 6px; font-size: 14px; }
.drawer nav { display: grid; gap: 4px; margin-top: 16px; }
.drawer nav a { font: 600 20px/2.4 var(--mincho); text-decoration: none; color: var(--main); border-bottom: 1px solid var(--rule); }
.drawer .btn { margin-top: 24px; }

/* ファーストビュー */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; }
.hero .slide { position: absolute; inset: 0; background: center/cover; opacity: 0; transform: scale(1.06); transition: opacity 2.4s ease, transform 9s linear; }
.hero .slide.on { opacity: 1; transform: scale(1); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(20,26,28,.55)); }
.hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(96px, 14vh, 150px); z-index: 3; }
.hero-copy h1 { font: 600 clamp(30px, 5vw, 56px)/1.5 var(--mincho); letter-spacing: .1em; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-copy p { margin-top: 14px; font-size: clamp(14px, 1.6vw, 17px); letter-spacing: .06em; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero-copy .btn { margin-top: 26px; }
.hero-ctrl { position: absolute; right: var(--gutter); bottom: 28px; z-index: 3; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.hero-ctrl button { min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }

/* 空室検索 */
.search { position: relative; z-index: 5; margin: -56px var(--gutter) 0; }
.search form { max-width: 960px; margin: 0 auto; background: var(--white); border-radius: 6px; box-shadow: 0 10px 34px rgba(20,30,34,.14); display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; gap: 0; padding: 10px; }
.search label { display: grid; padding: 6px 16px; border-right: 1px solid var(--rule); font-size: 13px; color: var(--sub); }
.search label:nth-of-type(4) { border-right: 0; }
.search input, .search select { border: 0; font: 500 16px var(--gothic); color: var(--ink); background: transparent; padding: 4px 0; min-height: 36px; }
.search .btn { min-height: 56px; padding: 0 28px; }
.search .hint { max-width: 960px; margin: 12px auto 0; font-size: 14px; color: var(--sub); text-align: center; }
@media (max-width: 760px) {
  .search form { grid-template-columns: 1fr 1fr; }
  .search label:nth-of-type(1) { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--rule); }
  .search label:nth-of-type(2), .search label:nth-of-type(4) { border-right: 0; }
  .search label:nth-of-type(3) { border-right: 1px solid var(--rule); }
  .search label:nth-of-type(2), .search label:nth-of-type(3) { border-bottom: 1px solid var(--rule); }
  .search .btn { grid-column: 1 / -1; margin-top: 8px; }
}

/* お知らせ */
.news { padding: 56px var(--gutter) 24px; }
.news ul { max-width: 860px; margin: 0 auto; list-style: none; border-top: 1px solid var(--rule); }
.news li a { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 15px; }
.news time { color: var(--sub); font-size: 14px; }
@media (max-width: 560px) { .news li a { grid-template-columns: 1fr; gap: 0; } }

/* コンセプト */
.concept .inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.concept .ph { aspect-ratio: 1; border-radius: 50%; background: center/cover;  }
.concept h2 { font: 600 clamp(26px, 3.4vw, 36px)/1.6 var(--mincho); color: var(--main); letter-spacing: .08em; }
.concept p { margin-top: 22px; color: var(--sub); }
@media (max-width: 860px) { .concept .inner { grid-template-columns: 1fr; } .concept .ph { max-width: 420px; width: 86%; margin: 0 auto; } }

/* 四季 */
.shiki .frame { position: relative; max-width: var(--wide); margin: 0 auto; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; cursor: pointer; }
.shiki .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.shiki .frame img.on { opacity: 1; }
.shiki .tabs { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.shiki .tabs button { min-height: 44px; min-width: 64px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; font-size: 15px; color: var(--sub); }
.shiki .tabs button[aria-pressed="true"] { background: var(--main); border-color: var(--main); color: #fff; }
.shiki .cap { text-align: center; margin-top: 14px; color: var(--sub); font-size: 15px; min-height: 2em; }
.shiki .tap { position: absolute; right: 14px; bottom: 12px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 3px; }

/* 客室 */
.rooms .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 48px); }
.room .sl { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 6px; }
.room .sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.room .sl img.on { opacity: 1; }
.room .sl .prev, .room .sl .next { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; }
.room .sl .prev { left: 0; } .room .sl .next { right: 0; }
.room .sl .prev::after, .room .sl .next::after { content: "‹"; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.88); color: var(--main); font-size: 26px; line-height: 38px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); opacity: .85; transition: opacity .2s; }
.room .sl .next::after { content: "›"; left: auto; right: 10px; }
.room .sl:hover .prev::after, .room .sl:hover .next::after, .room .sl button:focus-visible::after { opacity: 1; }
.room .sl .count { position: absolute; right: 10px; bottom: 10px; z-index: 3; background: rgba(0,0,0,.5); color: #fff; font-size: 13px; padding: 2px 10px; border-radius: 999px; }
.room .badge { position: absolute; left: 10px; top: 10px; z-index: 3; background: var(--white); color: var(--main); font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 3px; }
.room h3 { font: 600 21px/1.5 var(--mincho); color: var(--main); margin-top: 16px; }
.room .spec { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--sub); margin-top: 4px; }
.room p { margin-top: 8px; font-size: 15px; color: var(--sub); }
.room .price { margin-top: 10px; font-size: 15px; }
.room .price b { font: 600 22px var(--mincho); color: var(--ink); }
.rooms .note { margin-top: 28px; font-size: 15px; color: var(--sub); text-align: center; }
.rooms .center { text-align: center; }
@media (max-width: 760px) { .rooms .grid { grid-template-columns: 1fr; } }

/* カフェバー */
.cafe .inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.cafe .ph { aspect-ratio: 4/3.4; border-radius: 999px 999px 6px 6px; background: center/cover; }
.cafe h2 { font: 600 clamp(24px, 3vw, 32px)/1.6 var(--mincho); color: var(--main); }
.cafe p { margin-top: 18px; color: var(--sub); }
.cafe .spec { margin-top: 18px; font-size: 14px; color: var(--sub); border-top: 1px solid var(--rule); }
.cafe .spec div { display: grid; grid-template-columns: 6em 1fr; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.cafe .spec dt { color: var(--main); font-weight: 500; }
.cafe .sound { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cafe .sound .btn[aria-pressed="true"] { background: var(--main); color: #fff; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; height: 4px; background: currentColor; }
[aria-pressed="true"] .eq i { animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s !important; } .eq i:nth-child(3) { animation-delay: .4s !important; }
@keyframes eq { 50% { height: 14px; } }
.cafe .vol { font-size: 14px; color: var(--sub); }
@media (max-width: 860px) { .cafe .inner { grid-template-columns: 1fr; } }

/* ダイニング（濃い色の山場） */
.dining { background: var(--deep); color: #E8EDEE; }
.dining .sec-head h2 { color: #fff; }
.dining { --leaf: #C6D0D3; }
.dining .sec-head p { color: #C9D2D5; }
.dining .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dining figure img { aspect-ratio: 16/10; width: 100%; object-fit: cover; border-radius: 6px; }
.dining figcaption { margin-top: 12px; font-size: 15px; color: #D3DADC; }
.dining figcaption b { display: block; font: 600 18px var(--mincho); color: #fff; }
.dining .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); margin-top: clamp(48px, 7vw, 80px); align-items: center; }
.dining .row img { aspect-ratio: 3/2; width: 100%; object-fit: cover; border-radius: 50% / 50%; }
.dining .row h3 { font: 600 22px/1.6 var(--mincho); color: #fff; }
.dining .row p { margin-top: 12px; color: #D3DADC; font-size: 15px; }
.dining .more { color: #fff; }
@media (max-width: 760px) { .dining .two, .dining .row { grid-template-columns: 1fr; } }

/* アクティビティ */
.act .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.act .card img { aspect-ratio: 3/4; width: 100%; object-fit: cover; border-radius: 6px; }
.act .card h3 { margin-top: 12px; font: 600 18px var(--mincho); color: var(--main); }
.act .card .when { font-size: 14px; color: var(--sub); }
.act .card p { font-size: 14px; color: var(--sub); margin-top: 4px; line-height: 1.8; }
.act .center { text-align: center; }
@media (max-width: 860px) { .act .cards { grid-template-columns: repeat(2, 1fr); } }

/* グランピング */
.glamp .inner { position: relative; border-radius: 6px; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; background: center/cover; color: #fff; }
.glamp .inner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,26,28,.78), rgba(20,26,28,.35) 55%, transparent 80%), linear-gradient(transparent 50%, rgba(20,26,28,.45)); }
@media (max-width: 760px) { .glamp .inner::after { background: linear-gradient(transparent 15%, rgba(20,26,28,.82) 60%); } }
.glamp .txt { position: relative; z-index: 1; padding: clamp(24px, 4vw, 48px); max-width: 640px; }
.glamp .season { display: inline-block; background: var(--white); color: var(--main); font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 3px; }
.glamp h2 { font: 600 clamp(24px, 3vw, 32px)/1.5 var(--mincho); margin-top: 12px; }
.glamp p { margin-top: 10px; font-size: 15px; }
.glamp .btn { margin-top: 20px; background: var(--white); color: var(--main); }

/* スパ・館内 */
.kannai .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kannai img { aspect-ratio: 4/3; width: 100%; object-fit: cover; border-radius: 6px; }
.kannai h3 { margin-top: 12px; font: 600 19px var(--mincho); color: var(--main); }
.kannai p { font-size: 14px; color: var(--sub); margin-top: 4px; }
.kannai .center { text-align: center; }
@media (max-width: 760px) { .kannai .grid { grid-template-columns: 1fr; } }

/* よくある質問 */
.faq .list { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 4px; position: relative; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font: 600 18px var(--mincho); color: var(--main); margin-right: 12px; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 14px; font-size: 22px; color: var(--main); }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 4px 20px 30px; color: var(--sub); font-size: 15px; }
.faq .center { text-align: center; }

/* アクセス */
.access .inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.access .map { aspect-ratio: 4/3; border-radius: 6px; background: var(--kinari) center/cover; display: grid; place-items: center; color: var(--sub); font-size: 14px; border: 1px solid var(--rule); }
.access dl div { display: grid; grid-template-columns: 7em 1fr; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.access dt { color: var(--main); font-weight: 500; }
.access dd { color: var(--sub); }
@media (max-width: 760px) { .access .inner { grid-template-columns: 1fr; } }

/* 下の予約 */
.cta { background: var(--kinari); text-align: center; }
.cta h2 { font: 600 clamp(24px, 3vw, 30px)/1.6 var(--mincho); color: var(--main); }
.cta p { color: var(--sub); margin-top: 10px; }
.cta .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.cta .perk { max-width: 640px; margin: 28px auto 0; padding: 16px 20px; background: var(--white); border-radius: 6px; font-size: 14px; color: var(--sub); text-align: left; }
.cta .perk b { color: var(--main); }

/* フッター */
.ft { background: var(--deep); color: #D3DADC; padding: 64px var(--gutter) 96px; font-size: 14px; }
.ft .inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; }
.ft .logo { color: #fff; }
.ft nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
.ft nav a { text-decoration: none; }
.ft .copy { max-width: var(--wide); margin: 40px auto 0; font-size: 13px; opacity: .8; }
@media (max-width: 760px) { .ft .inner { grid-template-columns: 1fr; } }

/* 浮かぶボタン（スマホ） */
.float { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; grid-template-columns: 1fr 2fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); box-shadow: 0 -1px 0 var(--rule); transform: translateY(110%); transition: transform .3s; }
.float.show { transform: none; }
.float .btn { min-height: 48px; padding: 0 10px; }
@media (max-width: 760px) { .float { display: grid; } .sample-note { bottom: 80px; } }

/* 見本切り替え */
.switch { position: fixed; right: 12px; bottom: 12px; z-index: 60; display: flex; gap: 4px; background: rgba(255,255,255,.95); padding: 6px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.15); font-size: 13px; }
.switch button { min-height: 36px; padding: 0 10px; border-radius: 4px; }
.switch button[aria-pressed="true"] { background: var(--main); color: #fff; }
@media (max-width: 760px) { .switch { bottom: 80px; } }

/* ===== 下層ページ ===== */
.page-hero { position: relative; height: clamp(320px, 52vh, 520px); color: #fff; background: center/cover; display: flex; align-items: flex-end; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), transparent 35%, rgba(20,26,28,.5)); }
.page-hero .ttl { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(32px, 6vh, 56px); }
.page-hero h1 { font: 600 clamp(30px, 4.4vw, 46px)/1.4 var(--mincho); letter-spacing: .12em; }
.page-hero p { margin-top: 6px; font-size: 15px; letter-spacing: .06em; }
.crumb { padding: 14px var(--gutter); font-size: 14px; color: var(--sub); }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; max-width: var(--wide); margin: 0 auto; }
.crumb li + li::before { content: "›"; margin-right: 6px; }
.crumb a { text-decoration: none; }
.jump { position: sticky; top: 72px; z-index: 30; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--rule); }
.jump ul { list-style: none; display: flex; justify-content: center; gap: 4px; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
.jump a { display: block; white-space: nowrap; padding: 14px 14px 12px; font-size: 14px; text-decoration: none; color: var(--sub); border-bottom: 2px solid transparent; }
.jump a.cur { color: var(--main); border-bottom-color: var(--main); font-weight: 500; }
@media (max-width: 960px) { .jump { top: 64px; } .jump ul { justify-content: flex-start; } }

/* 比較表 */
.compare .tbl-wrap { max-width: var(--wide); margin: 0 auto; overflow-x: auto; }
.compare table { width: 100%; min-width: 820px; margin: 0 auto; border-collapse: collapse; font-size: 15px; background: var(--white); }
.compare th, .compare td { padding: 14px 12px; border-bottom: 1px solid var(--rule); text-align: center; white-space: nowrap; }
.compare thead th { font: 600 16px var(--mincho); color: var(--main); border-bottom: 2px solid var(--main); }
.compare tbody th { text-align: left; color: var(--main); font-weight: 500; width: 9em; }
.compare td b { font: 600 18px var(--mincho); }
.compare .ring { display: inline-block; font-size: 13px; padding: 1px 10px; border-radius: 999px; background: color-mix(in srgb, var(--main) 10%, transparent); color: var(--main); }
.compare .note { max-width: var(--wide); margin: 14px auto 0; font-size: 15px; color: var(--sub); }
.compare .cards { display: none; }
@media (max-width: 760px) {
  .compare .tbl-wrap { display: none; }
  .compare .cards { display: grid; gap: 12px; }
  .compare .cards article { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 16px; }
  .compare .cards h3 { font: 600 18px var(--mincho); color: var(--main); }
  .compare .cards dl { display: grid; grid-template-columns: 6em 1fr; gap: 4px 8px; margin-top: 8px; font-size: 14px; }
  .compare .cards dt { color: var(--sub); }
  .compare .cards a { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--main); }
}

/* タイプ別の詳細 */
.type { scroll-margin-top: 130px; }
.type .inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.type.alt .inner > .room-photos { order: 2; }
.type .room-photos .sl { aspect-ratio: 3/2; }
.type .thumbs { display: flex; gap: 6px; margin-top: 8px; }
.type .thumbs button { width: 64px; aspect-ratio: 3/2; border-radius: 3px; background: center/cover; opacity: .55; outline-offset: 2px; }
.type .thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--main); }
.type .tag { font-size: 13px; color: var(--main); font-weight: 700; letter-spacing: .06em; }
.type h2 { font: 600 clamp(24px, 3vw, 30px)/1.5 var(--mincho); color: var(--main); margin-top: 4px; }
.type .lead { margin-top: 14px; color: var(--sub); }
.type dl.spec { margin-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; }
.type dl.spec div { display: grid; grid-template-columns: 6em 1fr; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.type dl.spec dt { color: var(--main); font-weight: 500; }
.type .price { margin-top: 18px; font-size: 15px; }
.type .price b { font: 600 28px var(--mincho); }
.type .price small { display: block; font-size: 14px; color: var(--sub); }
.type .btn { margin-top: 18px; }
.type figure.madori { margin-top: 28px; background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 12px; cursor: zoom-in; }
.type figure.madori figcaption { font-size: 13px; color: var(--sub); margin-bottom: 6px; }
@media (max-width: 860px) { .type .inner { grid-template-columns: 1fr; } .type.alt .inner > .room-photos { order: 0; } }

/* グランピング（客室ページ） */
.gl-block .inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.gl-block .imgs { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.gl-block .imgs img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.gl-block .imgs img:first-child { grid-row: span 2; aspect-ratio: 4/5; }
.gl-block .season { display: inline-block; background: var(--main); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 3px; }
.gl-block .open-state { margin-top: 12px; font-size: 14px; color: var(--main); font-weight: 500; }
@media (max-width: 860px) { .gl-block .inner { grid-template-columns: 1fr; } }

/* すべてのお部屋に */
.amenity ul { list-style: none; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.amenity li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.amenity li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--main); margin: 0 10px 2px 0; vertical-align: middle; opacity: .6; }
@media (max-width: 760px) { .amenity ul { grid-template-columns: 1fr 1fr; gap: 0 20px; } }
@media (max-width: 480px) { .amenity ul { grid-template-columns: 1fr; } }

/* 拡大表示 */
.zoom-view { position: fixed; inset: 0; z-index: 90; background: rgba(20,26,28,.86); display: none; place-items: center; padding: 24px; cursor: zoom-out; }
.zoom-view.open { display: grid; }
.zoom-view img { max-width: min(1100px, 100%); max-height: 90vh; background: #fff; border-radius: 6px; }

/* 写真と文章の2列（左右交互） */
.feature .inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature.alt .inner > .ph { order: 2; }
.feature .ph img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; }
.feature .ph.arch img { aspect-ratio: 4/4.4; border-radius: 999px 999px 6px 6px; }
.feature .ph.oval img { border-radius: 50% / 50%; }
.feature .tag { font-size: 13px; color: var(--main); font-weight: 700; letter-spacing: .06em; }
.feature h2 { font: 600 clamp(24px, 3vw, 30px)/1.5 var(--mincho); color: var(--main); margin-top: 4px; }
.feature .lead { margin-top: 14px; color: var(--sub); }
.feature .sign { margin-top: 14px; text-align: right; font: 400 15px var(--mincho); color: var(--main); }
.feature dl.spec { margin-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; }
.feature dl.spec div { display: grid; grid-template-columns: 7em 1fr; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.feature dl.spec dt { color: var(--main); font-weight: 500; }
.feature .sub-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.feature .sub-photos img { aspect-ratio: 1; }
.feature .sound { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.feature .sound .btn[aria-pressed="true"] { background: var(--main); color: #fff; }
.feature .vol { font-size: 14px; color: var(--sub); }
@media (max-width: 860px) { .feature .inner { grid-template-columns: 1fr; } .feature.alt .inner > .ph { order: 0; } }

/* 二つの窓 */
.windows .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: var(--wide); margin: 0 auto; }
.windows figure img { aspect-ratio: 16/10; width: 100%; object-fit: cover; border-radius: 6px; }
.windows figcaption { margin-top: 12px; font-size: 15px; color: var(--sub); }
.windows figcaption b { display: block; font: 600 19px var(--mincho); color: var(--main); }
@media (max-width: 760px) { .windows .two { grid-template-columns: 1fr; } }

/* 今月のコース（濃い色の山場） */
.course { background: var(--deep); color: #E8EDEE; --leaf: #C6D0D3; }
.course .sec-head h2 { color: #fff; }
.course .sec-head p { color: #C9D2D5; }
.course .wrap { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.course .pics { display: grid; gap: 10px; }
.course .pics img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; }
.course ol { list-style: none; counter-reset: c; columns: 2; column-gap: 40px; }
.course li { break-inside: avoid; counter-increment: c; padding: 12px 0 12px 44px; position: relative; border-bottom: 1px solid rgba(255,255,255,.14); }
.course li::before { content: counter(c, cjk-ideographic); position: absolute; left: 0; top: 12px; font: 600 15px var(--mincho); color: #C6D0D3; }
.course li b { display: block; font: 600 17px var(--mincho); color: #fff; }
.course li span { font-size: 14px; color: #C9D2D5; }
.course .note { margin-top: 18px; font-size: 14px; color: #C9D2D5; }
@media (max-width: 860px) { .course .wrap { grid-template-columns: 1fr; } .course ol { columns: 1; } }

/* ご相談 */
.consult .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--wide); margin: 0 auto; }
.consult .card { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 22px; }
.consult .card h3 { font: 600 18px var(--mincho); color: var(--main); }
.consult .card p { margin-top: 8px; font-size: 15px; color: var(--sub); }
@media (max-width: 760px) { .consult .grid { grid-template-columns: 1fr; } }

/* 季節の切り替え（アクティビティ） */
.seasons .tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 28px; }
.seasons .tabs button { min-height: 44px; min-width: 72px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; font-size: 15px; color: var(--sub); background: var(--white); }
.seasons .tabs button[aria-selected="true"] { background: var(--main); border-color: var(--main); color: #fff; }
.seasons .panel { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.seasons .panel[hidden] { display: none; }
.seasons .panel img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; border-radius: 6px; }
.seasons .panel h3 { font: 600 clamp(22px, 2.6vw, 26px)/1.5 var(--mincho); color: var(--main); }
.seasons .panel .when { font-size: 13px; color: var(--main); font-weight: 700; letter-spacing: .06em; }
.seasons .panel .lead { margin-top: 10px; color: var(--sub); font-size: 15px; }
.prog { margin-top: 18px; border-top: 1px solid var(--rule); }
.prog div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.prog dt { font-weight: 500; }
.prog dd { color: var(--sub); font-size: 14px; }
.prog dd.price { grid-row: 1; grid-column: 2; text-align: right; color: var(--ink); white-space: nowrap; }
.prog dd.detail { grid-column: 1 / -1; }
@media (max-width: 860px) { .seasons .panel { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .seasons .panel:not([hidden]) { animation: fadein .6s ease; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* 通年のカード */
.year .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: var(--wide); margin: 0 auto; }
.year img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.year h3 { margin-top: 12px; font: 600 18px var(--mincho); color: var(--main); }
.year .meta { font-size: 14px; color: var(--sub); }
.year p { margin-top: 4px; font-size: 14px; color: var(--sub); line-height: 1.8; }
@media (max-width: 860px) { .year .grid { grid-template-columns: repeat(2, 1fr); } }

/* 申し込みの流れ */
.steps ol { list-style: none; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.steps li { counter-increment: s; background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 22px; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--main); color: #fff; font: 600 15px var(--mincho); margin-bottom: 10px; }
.steps li b { display: block; font: 600 17px var(--mincho); color: var(--main); }
.steps li span { font-size: 14px; color: var(--sub); }
.steps .note { max-width: 900px; margin: 16px auto 0; font-size: 14px; color: var(--sub); }
@media (max-width: 760px) { .steps ol { grid-template-columns: 1fr; } }

/* 館内図 */
.floors .sp-hint { display: none; font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.floors figure { max-width: var(--wide); margin: 0 auto; background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 16px; cursor: zoom-in; }
.floors .list { max-width: var(--wide); margin: 20px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.floors .list div { border-top: 2px solid var(--main); padding-top: 10px; }
.floors .list b { font: 600 18px var(--mincho); color: var(--main); }
.floors .list p { font-size: 14px; color: var(--sub); margin-top: 4px; }
@media (max-width: 760px) { .floors .sp-hint { display: block; } .floors figure { overflow-x: auto; } .floors figure img { min-width: 640px; } .floors .list { grid-template-columns: 1fr; } }

/* アクセスページ */
.map-block .inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.map-block .map-img { width: 100%; border-radius: 6px; border: 1px solid var(--rule); background: var(--white); }
.map-block .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.map-block dl div { display: grid; grid-template-columns: 6em 1fr; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.map-block dl { border-top: 1px solid var(--rule); }
.map-block dt { color: var(--main); font-weight: 500; }
.map-block dd { color: var(--sub); }
@media (max-width: 860px) { .map-block .inner { grid-template-columns: 1fr; } }
.route .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: var(--wide); margin: 0 auto; }
.route .card { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 24px; }
.route .card h3 { font: 600 20px var(--mincho); color: var(--main); }
.route .card ol { margin: 12px 0 0 1.2em; color: var(--sub); font-size: 15px; }
.route .card li { padding: 4px 0; }
.route .warn { max-width: var(--wide); margin: 16px auto 0; background: var(--white); border-left: 4px solid var(--main); border-radius: 0 6px 6px 0; padding: 18px 22px; }
.route .warn b { font: 600 17px var(--mincho); color: var(--main); }
.route .warn p { margin-top: 6px; font-size: 15px; color: var(--sub); }
@media (max-width: 760px) { .route .grid { grid-template-columns: 1fr; } }
.faq-all .group { max-width: 860px; margin: 0 auto 40px; }
.faq-all .group h3 { font: 600 20px var(--mincho); color: var(--main); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.faq-all .group h3 a { font: 500 14px var(--gothic); color: var(--main); }
.faq-all .list { border-top: 1px solid var(--rule); }
.contact .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
.contact .card { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 24px; text-align: center; }
.contact .card h3 { font: 600 18px var(--mincho); color: var(--main); }
.contact .card .big { display: block; margin: 8px 0; font: 600 26px var(--mincho); color: var(--ink); text-decoration: none; }
.contact .card p { font-size: 14px; color: var(--sub); }
.contact .card .btn { margin-top: 12px; }
@media (max-width: 760px) { .contact .grid { grid-template-columns: 1fr; } }

/* 白い欄にうっすら年輪 */
.sec { position: relative; }
.sec:not(.kinari):not(.dining):not(.course):not(.cta):not(.glamp) { overflow: hidden; }
.sec:not(.kinari):not(.dining):not(.course):not(.cta):not(.glamp)::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(520px, 62vw, 860px); aspect-ratio: 1; right: calc(clamp(520px, 62vw, 860px) * -.42); top: -18%;
  background: var(--main); opacity: .07;
  -webkit-mask: url("../photos/nenrin.svg") center/contain no-repeat; mask: url("../photos/nenrin.svg") center/contain no-repeat;
}
.sec:not(.kinari):nth-of-type(even)::before { right: auto; left: calc(clamp(520px, 62vw, 860px) * -.42); top: auto; bottom: -22%; transform: rotate(140deg); }
.sec > * { position: relative; z-index: 1; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }