/* 森のグランピング おきび（制作例）。demo_src/base.css と demo_src/themes/okibi.css から書き出し */
/* ===== 全デモ共通の部品（デモ9以降）。色や形は各デモの themes/○○.css の :root で決める ===== */
:root {
  --main: #333; --main-dark: #222; --on-main: #fff;
  --accent: #888; --accent-dark: #666; --on-accent: #fff;
  --pale: #f6f6f6; --pale2: #fbfbfb;
  --bg: #fff; --paper: #fff; --ink: #2a2a2a; --muted: #666; --line: #e3e3e3;
  --radius: 14px; --btn-radius: 999px;
  --head: "Noto Sans JP", sans-serif; --head-weight: 700;
  --sans: "Noto Sans JP", "Yu Gothic", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.9; letter-spacing: .03em; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: var(--head-weight); line-height: 1.5; margin: 0; letter-spacing: .05em; }
p { margin: 0 0 1em; }
figure { margin: 0; }
.nw { white-space: nowrap; display: inline-block; }
@media (min-width: 820px) { .sp, .sp-only { display: none !important; } }
.kakuu { display: inline-block; font-size: 11px; color: var(--muted); border: 1px dashed currentColor; border-radius: 6px; padding: 0 6px; margin-left: 4px; vertical-align: 2px; font-weight: 400; letter-spacing: 0; }

/* 制作例の帯 */
.demo-band { background: #2a2a2a; color: #fff; font-size: 12px; line-height: 1.6; letter-spacing: .02em; text-align: center; padding: 8px 16px; }
.demo-band a { color: #F3DDA8; margin-left: .5em; white-space: nowrap; }

/* ヘッダー */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 10px 16px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.logo__mark { flex: none; }
.logo__text { font-family: var(--head); font-weight: var(--head-weight); font-size: 18px; line-height: 1.25; white-space: nowrap; }
.logo__text small { display: block; font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 420px) { .logo__text { font-size: 16px; letter-spacing: .02em; } }
.nav-toggle { border: 1px solid var(--main); background: #fff; color: var(--main); white-space: nowrap; flex: none; font: inherit; font-size: 13px; padding: 5px 12px; border-radius: var(--btn-radius); cursor: pointer; }
.site-nav { display: none; }
.site-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); max-height: calc(100svh - 120px); overflow-y: auto; box-shadow: 0 14px 20px -16px rgba(0, 0, 0, .3); }
.site-nav ul { list-style: none; margin: 0; padding: 4px 16px 14px; }
.site-nav a { display: block; padding: 12px 4px; text-decoration: none; border-bottom: 1px solid var(--line); font-weight: 500; }
.site-nav a[aria-current="page"], .site-nav a.is-parent { color: var(--main); }
.nav-cta { display: none; }
@media (min-width: 1040px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: block; position: static; background: none; border: 0; max-height: none; box-shadow: none; }
  .site-nav ul { display: flex; gap: 22px; padding: 0; }
  .site-nav a { border: 0; padding: 4px 0; font-size: 14px; }
  .site-nav a[aria-current="page"], .site-nav a.is-parent, .site-nav a:hover { color: var(--main); box-shadow: 0 2px 0 var(--main); }
  .site-nav .nav-hide-pc { display: none; }
  .nav-cta { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: var(--btn-radius); background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
  .nav-cta:hover { background: var(--accent-dark); }
}

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 28px; white-space: nowrap; border-radius: var(--btn-radius); border: 2px solid var(--main); background: var(--main); color: var(--on-main); font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--main-dark); border-color: var(--main-dark); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--line { background: #fff; color: var(--main); }
.btn--line:hover { background: var(--pale); color: var(--main-dark); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row--center { justify-content: center; }
.btn-row .btn { flex: 1 1 200px; }
@media (min-width: 820px) { .btn-row .btn { flex: 0 0 auto; } }

/* 共通のかたまり */
.section { padding: 72px 16px; }
.section--pale { background: var(--pale); }
.section--main { background: var(--main); color: var(--on-main); }
@media (min-width: 820px) { .section { padding: 100px 24px; } }
.container { max-width: 1060px; margin: 0 auto; }
.container--narrow { max-width: 780px; margin: 0 auto; }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .15em; color: var(--accent-dark); margin-bottom: 6px; }
.section-title h2 { font-size: 25px; }
@media (min-width: 820px) { .section-title h2 { font-size: 30px; } }
@media (max-width: 819px) { .section-title h2, .page-head h1 { letter-spacing: .02em; } }
.section-title p { color: var(--muted); margin: 12px auto 0; max-width: 600px; }
.section--main .section-title span { color: var(--on-main); opacity: .8; }
.section--main .section-title p { color: var(--on-main); opacity: .85; }
.note { font-size: 13px; color: var(--muted); }
.lead { max-width: 660px; margin: 0 auto; text-align: center; }
.lead p { line-height: 2.2; }
@media (max-width: 819px) { .lead { text-align: left; } .lead p br { display: none; } }

/* カードの並び */
.cards { display: grid; gap: 18px; }
@media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 22px; } .cards--2 { grid-template-columns: repeat(2, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.card__num { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 999px; background: var(--main); color: var(--on-main); font-family: var(--head); font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { margin: 0; font-size: 15px; }
.card__label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--main-dark); background: var(--pale); border-radius: 999px; padding: 1px 12px; margin-bottom: 6px; }
.card__img { margin: -24px -22px 16px; }
.card__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
a.card { display: block; text-decoration: none; transition: transform .2s, box-shadow .2s; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -22px rgba(0, 0, 0, .5); }
.card__more { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--main); }
.card__more::after { content: " →"; }

/* 写真と文 */
.media { display: grid; gap: 26px; align-items: center; }
@media (min-width: 820px) { .media { grid-template-columns: 1fr 1fr; gap: 54px; } .media--reverse .media__img { order: 2; } }
.media__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.media__label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--accent-dark); margin-bottom: 4px; }
.media h2 { font-size: 23px; margin-bottom: 14px; }
.checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.checks li { position: relative; padding: 10px 14px 10px 42px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.checks li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--main); }
.checks li::after { content: ""; position: absolute; left: 19px; top: 50%; width: 8px; height: 4px; margin-top: -4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* 料金表 */
.price-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 15px; border-radius: var(--radius); overflow: hidden; }
.price-table th, .price-table td { padding: 15px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.price-table thead th { background: var(--main); color: var(--on-main); font-size: 14px; }
.price-table tbody th { white-space: nowrap; }
.price-table td.yen { font-family: var(--head); font-weight: 700; white-space: nowrap; text-align: right; }
.price-table small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
@media (max-width: 819px) {
  .price-table thead { display: none; }
  .price-table tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 12px; border-bottom: 1px solid var(--line); }
  .price-table th, .price-table td { padding: 2px 0; border: 0; }
  .price-table td.yen { grid-row: 1; grid-column: 2; }
  .price-table td.sub { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
}

/* 数字で見る */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 820px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 18px; } .stats--4 { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 12px 16px; text-align: center; }
.stat__label { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0; }
.stat__num { font-family: var(--head); font-weight: 800; font-size: 38px; line-height: 1.2; color: var(--main); margin: 4px 0; }
.stat__num small { font-size: 15px; margin-left: 2px; }
.stat p { font-size: 12px; color: var(--muted); margin: 0; }

/* 流れ */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: f; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(var(--flow-cols, 4), 1fr); gap: 16px; } }
.flow li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; }
.flow li::before { counter-increment: f; content: counter(f); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; margin-bottom: 8px; }
.flow h3 { font-size: 17px; margin-bottom: 4px; }
.flow p { margin: 0; font-size: 14px; color: var(--muted); }

/* 年表・1日の流れ */
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; }
.timeline li { display: grid; grid-template-columns: 82px 1fr; gap: 0 20px; padding: 0 0 22px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 92px; top: 12px; bottom: -4px; border-left: 2px solid var(--line); }
.timeline li:last-child::before { display: none; }
.timeline time { font-family: var(--head); font-weight: 700; color: var(--main); text-align: right; }
.timeline div { position: relative; padding-left: 14px; }
.timeline div::before { content: ""; position: absolute; left: -15px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.timeline h3 { font-size: 17px; margin-bottom: 2px; }
.timeline p { margin: 0; font-size: 14px; color: var(--muted); }

/* 人の紹介・社員の声 */
.people { display: grid; gap: 18px; }
@media (min-width: 820px) { .people { grid-template-columns: repeat(var(--people-cols, 3), 1fr); gap: 22px; } }
.person { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; border-top: 4px solid var(--main); }
.person__role { display: inline-block; font-size: 12px; font-weight: 700; color: var(--main-dark); background: var(--pale); border-radius: 999px; padding: 1px 12px; margin-bottom: 6px; }
.person h3 { font-size: 18px; }
.person__meta { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.person p { margin: 0; font-size: 15px; }
.quote-mark { font-family: var(--head); font-size: 34px; line-height: 1; color: var(--accent); display: block; }

/* 表 */
.info-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--paper); }
.info-table th, .info-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.info-table th { width: 7.5em; font-weight: 700; white-space: nowrap; font-size: 14px; color: var(--main-dark); }
.info-table td .note { display: block; }
@media (max-width: 819px) { .info-table { font-size: 14px; } .info-table th { width: 5.6em; white-space: normal; } }
.two { display: grid; gap: 28px; align-items: start; }
@media (min-width: 820px) { .two { grid-template-columns: 1fr 1fr; gap: 48px; } }
.map-box { display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius); border: 1px dashed #b9b9b9; background: repeating-linear-gradient(45deg, #f6f6f3, #f6f6f3 12px, #eeeeea 12px, #eeeeea 24px); color: var(--muted); text-align: center; padding: 16px; }
.photo-under img { margin-top: 16px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.legal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px; font-size: 14px; }
.legal h3 { font-size: 16px; margin-bottom: 8px; }
.legal dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.legal dt { font-weight: 700; color: var(--main-dark); }
.legal dd { margin: 0; }

/* よくある質問 */
.faq { max-width: 800px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 46px 16px 54px; position: relative; font-weight: 700; font-family: var(--head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "問"; position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--main); color: var(--on-main); display: grid; place-items: center; font-size: 13px; }
.faq summary::after { content: "＋"; position: absolute; right: 18px; top: 15px; color: var(--main); }
.faq details[open] summary::after { content: "−"; }
.faq__a { padding: 0 20px 18px 54px; }

/* フォーム（送信されない見本） */
.form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 18px; max-width: 780px; margin: 0 auto; }
@media (min-width: 820px) { .form { padding: 40px 44px; } }
.form h3 { font-size: 20px; margin-bottom: 14px; }
.form__row { margin-bottom: 18px; }
.form__row label, .form legend { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.form__req { font-size: 11px; color: #fff; background: var(--accent-dark); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .form textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #cfcfcf; border-radius: 10px; background: #fcfcfc; }
.form textarea { min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--main); outline-offset: 1px; background: #fff; }
.form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.form__checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.form__check { display: flex; gap: 8px; align-items: center; font-weight: 500; font-size: 15px; }
.form__check input { width: 20px; height: 20px; accent-color: var(--main); }
.form__note { font-size: 13px; color: var(--muted); margin-top: 10px; text-align: center; }
.forms { display: grid; gap: 24px; }
@media (min-width: 960px) { .forms { grid-template-columns: 1fr 1fr; } .forms .form { margin: 0; } }

/* 予約・問い合わせの帯 */
.cta { text-align: center; background: var(--main); color: var(--on-main); border-radius: calc(var(--radius) + 8px); padding: 40px 20px; }
.cta h2 { font-size: 24px; margin-bottom: 8px; }
@media (max-width: 819px) { .cta h2 { font-size: 21px; letter-spacing: .02em; } }
.cta p { opacity: .9; margin-bottom: 18px; }
.cta__tel { font-family: var(--head); font-weight: 700; font-size: 26px; opacity: 1 !important; margin-bottom: 4px !important; letter-spacing: .06em; }
.cta__btns { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
@media (min-width: 720px) { .cta__btns { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.cta .btn--line { border-color: #fff; }
.cta .btn span { line-height: 1.35; }
.cta .btn small { display: block; font-size: 11px; font-weight: 500; opacity: .85; }

/* 下層ページの見出し */
.page-head { background: var(--pale); padding: 18px 16px 46px; }
.page-head__inner { max-width: 1060px; margin: 0 auto; }
.crumb { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 22px; font-size: 12px; color: var(--muted); }
.crumb li + li::before { content: "›"; margin-right: 6px; }
.crumb a { color: var(--main); }
.page-head span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--accent-dark); }
.page-head h1 { font-size: 26px; }
.page-head p { color: var(--muted); margin: 8px 0 0; max-width: 36em; }
@media (min-width: 820px) { .page-head { padding: 22px 24px 66px; } .page-head h1 { font-size: 34px; } }

/* 口コミの入口（エンレビューの見本） */
.review__inner { display: grid; gap: 44px; max-width: 920px; margin: 0 auto; align-items: center; }
@media (min-width: 820px) { .review__inner { grid-template-columns: 290px 1fr; gap: 64px; } }
.pop-stand { margin: 0 auto; width: 100%; max-width: 250px; text-align: center; }
.pop { background: #fff; border-radius: var(--radius); overflow: hidden; text-align: center; box-shadow: 0 20px 32px -22px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); }
.pop__head { background: var(--main); color: var(--on-main); padding: 14px 14px 12px; font-family: var(--head); font-weight: 700; }
.pop__head small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .1em; opacity: .9; }
.pop__head p { margin: 2px 0 0; font-size: 16px; line-height: 1.5; }
.pop__body { padding: 16px 14px; }
.pop__qr { display: block; width: 132px; height: 132px; margin: 0 auto 10px; }
.pop__small { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 0; }
.pop-stand__base { height: 10px; width: 64%; margin: 0 auto; border-radius: 0 0 8px 8px; background: var(--line); }
.pop-stand figcaption { font-size: 12px; color: var(--muted); margin-top: 16px; }
.review__text > p { margin-bottom: 22px; }
.steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.steps__num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--pale); color: var(--main-dark); display: grid; place-items: center; font-weight: 700; }
.steps b { display: block; font-family: var(--head); font-size: 16px; line-height: 1.5; }
.steps small { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; }
.btn--review { width: 100%; max-width: 360px; }
.demo-note { font-size: 12px; color: var(--muted); border-left: 3px solid var(--accent); padding: 4px 0 4px 10px; margin-top: 16px; }
.rv-dialog { width: min(540px, calc(100% - 24px)); max-height: calc(100svh - 24px); border: 0; padding: 0; border-radius: var(--radius); background: #fff; color: var(--ink); }
.rv-dialog::backdrop { background: rgba(20, 20, 20, .55); }
.rv-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: var(--main); color: var(--on-main); position: sticky; top: 0; }
.rv-head strong { font-family: var(--head); }
.rv-close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: inherit; padding: 4px 8px; }
.rv-body { padding: 20px 18px 24px; }
.rv-progress { font-size: 12px; font-weight: 700; color: var(--main); margin-bottom: 6px; }
.rv-bar { height: 6px; background: var(--pale); border-radius: 6px; margin-bottom: 18px; overflow: hidden; }
.rv-bar span { display: block; height: 100%; background: var(--main); transition: width .2s; }
.rv-q { font-family: var(--head); font-weight: 700; font-size: 19px; margin-bottom: 16px; }
.rv-choices { display: grid; gap: 10px; }
.rv-choice { min-height: 52px; padding: 10px 16px; text-align: left; border: 1px solid #cfcfcf; background: #fff; border-radius: 12px; font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); }
.rv-choice:hover, .rv-choice:focus-visible { border-color: var(--main); background: var(--pale); }
.rv-text { width: 100%; min-height: 110px; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid #cfcfcf; border-radius: 12px; }
.rv-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.rv-back { border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.rv-draft-label { display: inline-block; background: var(--accent-dark); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-bottom: 8px; }
.rv-draft { width: 100%; min-height: 170px; padding: 12px; font: inherit; font-size: 15px; line-height: 1.8; border: 2px solid var(--main); border-radius: 12px; }

/* フッター */
.site-footer { background: var(--main-dark); color: rgba(255, 255, 255, .88); padding: 56px 16px 28px; font-size: 14px; }
.site-footer__inner { max-width: 1060px; margin: 0 auto; display: grid; gap: 30px; }
@media (min-width: 820px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr; } }
.site-footer .logo__text { color: #fff; }
.site-footer .logo__text small { color: rgba(255, 255, 255, .7); }
.site-footer__info { margin-top: 16px; line-height: 2; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { text-decoration: underline; }
.site-footer a { color: rgba(255, 255, 255, .9); }
.footer-tel { display: inline-block; margin-top: 6px; color: #fff !important; font-family: var(--head); font-weight: 700; font-size: 21px; text-decoration: none; }
.copyright { text-align: center; font-size: 12px; color: rgba(255, 255, 255, .6); margin: 40px 0 0; }

/* スマホの下に固定するボタン */
.bottom-bar { display: none; }
@media (max-width: 819px) {
  body { padding-bottom: 64px; }
  .bottom-bar { display: grid; grid-template-columns: 1fr 1.4fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 16px -12px rgba(0, 0, 0, .3); }
  .bottom-bar--3 { grid-template-columns: repeat(3, 1fr); }
  .bottom-bar a { display: grid; place-items: center; height: 60px; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--main-dark); line-height: 1.3; text-align: center; }
  .bottom-bar a + a { border-left: 1px solid var(--line); }
  .bottom-bar a:last-child { background: var(--accent); color: var(--on-accent); border-left: 0; }
  .bottom-bar small { display: block; font-size: 10px; font-weight: 500; opacity: .85; }
}

/* 上に戻るボタン */
.to-top { position: fixed; right: 16px; bottom: 24px; z-index: 40; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: var(--main); color: var(--on-main); border: 0; cursor: pointer; line-height: 1; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s, background .2s; }
.to-top span { font-size: 18px; font-weight: 700; }
.to-top small { font-size: 9px; font-weight: 700; margin-top: 2px; }
.to-top:hover { background: var(--main-dark); }
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 819px) { .to-top { bottom: 76px; right: 12px; width: 46px; height: 46px; } }

/* お知らせ（制作例のため〜） */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #2a2a2a; color: #fff; font-size: 14px; padding: 12px 18px; border-radius: 12px; width: max-content; max-width: calc(100% - 32px); text-align: center; transition: opacity .2s, transform .2s; }
@media (max-width: 819px) { .toast { bottom: 80px; } }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* スクロールでふわっと出す */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== ここから下は、各デモらしさ（themes/○○.css） ===== */

/* 森のグランピング おきび：夜の森の紺緑（#1C2B2D）と、焚き火の橙（#E08A2E）。朝もやの生成りの地（#EFEEE8）と、夜の地（#131D1E）を区切りごとに切りかえる。
   見出しは細い明朝（Hina Mincho）。最初の画面は、横長の動画の下の端を山の稜線の形に切り抜き、稜線の下の夜の地に3つの入口を並べる。
   そらいろの雰囲気（2026-10-20）：箱を使わない・細い見出し・広い余白・写真を暗く敷いた帯・等高線の地 */
:root {
  --main: #1C2B2D; --main-dark: #131D1E; --on-main: #EDE6D8;
  --accent: #E08A2E; --accent-dark: #C47320; --on-accent: #18120B;
  --pale: #E4E3DB; --pale2: #F7F6F1;
  --bg: #EFEEE8; --paper: #F7F6F1; --ink: #1F2A2B; --muted: #5B6563; --line: #D3D1C7;
  --label: #9A5A17; --night: #131D1E; --night-ink: #EDE6D8;
  --radius: 2px; --btn-radius: 2px;
  --head: "Hina Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; --head-weight: 400;
}
body { background: var(--bg); color: var(--ink); }
@media (min-width: 820px) { body { font-size: 16px; line-height: 2.1; } }
h1, h2, h3 { letter-spacing: .12em; }
.pc-only { display: none; }
@media (min-width: 820px) { .pc-only { display: inline; } }
.text-link { display: inline-block; margin-top: 14px; color: var(--label); text-underline-offset: 5px; font-size: 14px; letter-spacing: .08em; }
.text-link::after { content: " →"; }

/* 夜の地：中の色をまとめて切りかえる */
.s-night, .ofv, .dark-band, .yoyaku-band, .page-head {
  --ink: #EDE6D8; --muted: #A9B1AA; --line: rgba(237, 230, 216, .16); --label: #EBA75C; --paper: #1A2627; --pale: #22302F;
  color: var(--ink);
}
.s-night { background: var(--night); }

/* ヘッダー（夜の紺緑） */
.site-header { background: rgba(19, 29, 30, .95); border-bottom: 1px solid rgba(237, 230, 216, .12); }
.site-header .logo__text { color: var(--night-ink); letter-spacing: .12em; font-size: 17px; }
.site-header .logo__text small { color: #A9B1AA; letter-spacing: .06em; }
.logo__mark { width: 34px; height: 34px; }
.site-footer .logo__mark circle:first-child { fill: #22302F; }
.nav-toggle { background: transparent; border-color: rgba(237, 230, 216, .6); color: var(--night-ink); border-radius: 2px; }
.site-nav.is-open { background: var(--night); border-bottom: 1px solid rgba(237, 230, 216, .12); }
.site-nav a { color: var(--night-ink); border-bottom-color: rgba(237, 230, 216, .12); font-weight: 400; }
.site-nav a[aria-current="page"], .site-nav a.is-parent { color: #EBA75C; }
@media (min-width: 1040px) {
  .site-nav ul { gap: 20px; }
  .site-nav a { font-size: 13px; letter-spacing: .06em; }
  .site-nav a[aria-current="page"], .site-nav a.is-parent, .site-nav a:hover { color: #EBA75C; box-shadow: 0 1px 0 var(--accent); }
  .nav-cta { font-weight: 500; border-radius: 2px; letter-spacing: .08em; }
}
@media (max-width: 420px) { .site-header .logo__text { font-size: 15px; } .site-header .logo__text small { font-size: 9px; letter-spacing: .02em; } }

/* ボタン（細く、角を小さく） */
.btn { font-weight: 500; letter-spacing: .1em; border-width: 1px; background: var(--main); border-color: var(--main); color: var(--on-main); }
.btn:hover { background: #0E1617; border-color: #0E1617; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: #EBA75C; border-color: #EBA75C; color: var(--on-accent); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: rgba(127, 127, 127, .08); color: var(--ink); }
.btn span { line-height: 1.4; text-align: center; }
.btn small { display: block; font-size: 10px; font-weight: 400; letter-spacing: .06em; opacity: .85; }
.btn--night { background: var(--night); border-color: var(--night); color: var(--night-ink); }
.btn--night:hover { background: #000; border-color: #000; }
.btn--night-line { background: transparent; border-color: var(--night); color: var(--night); }
.btn--night-line:hover { background: rgba(19, 29, 30, .1); }

/* ボタンの上の小さな1行 */
.btn-hint { display: inline-block; position: relative; margin: 6px 0 14px; padding: 3px 14px; border-radius: 999px; background: var(--pale); color: var(--label); font-size: 12px; letter-spacing: .08em; line-height: 1.7; }
.btn-hint::after { content: ""; position: absolute; left: 22px; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--pale); }

/* ===== 1 最初の画面：動画の下の端を稜線で切り抜き、その下の夜の地に3つの入口 ===== */
.fv.ofv { background: var(--night); padding: 0 0 34px; }
.ofv__media { position: relative; height: min(125vw, 58svh); min-height: 380px; overflow: hidden; background: #2B3A3B; }
.ofv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ofv__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(170deg, rgba(10, 16, 17, .72) 0%, rgba(10, 16, 17, .38) 34%, rgba(10, 16, 17, 0) 56%); }
.ofv__text { position: relative; z-index: 2; padding: 26px 22px 0; color: #F3EEE4; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.ofv__small { display: block; font-size: 11px; letter-spacing: .2em; margin-bottom: 12px; opacity: .92; }
.ofv h1 { font-weight: 400; font-size: clamp(19px, calc((100vw - 44px) / 10.2), 30px); line-height: 1.7; letter-spacing: .12em; margin-bottom: 14px; }
.ofv__line { display: block; white-space: nowrap; }
.ofv__name { font-family: var(--head); font-size: 15px; letter-spacing: .26em; margin: 0 0 4px; }
.ofv__hours { font-size: 11px; line-height: 1.8; letter-spacing: .06em; margin: 0; opacity: .92; }
.ofv__ridge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; width: 100%; height: 64px; display: block; }
.ofv__ridge .r1 { fill: var(--night); }
.ofv__ridge .r2 { fill: rgba(19, 29, 30, .55); }
.ofv__below { position: relative; padding: 4px 16px 0; max-width: 1120px; margin: 0 auto; }
.ofv__doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ofv__doors li + li { border-left: 1px solid rgba(237, 230, 216, .2); }
.ofv__doors a { display: block; text-align: center; text-decoration: none; padding: 6px 4px 8px; color: var(--ink); }
.ofv__doors small { display: block; font-size: 10px; letter-spacing: .04em; color: var(--muted); line-height: 1.5; }
.ofv__doors b { display: block; font-family: var(--head); font-weight: 400; font-size: 15px; letter-spacing: .08em; line-height: 1.6; margin: 2px 0; }
.ofv__doors span { display: block; font-size: 10px; color: #EBA75C; letter-spacing: .02em; line-height: 1.5; }
.ofv__cta { text-align: center; margin-top: 18px; }
.ofv__cta .btn-hint { margin-bottom: 12px; }
.ofv__cta .btn { min-width: 260px; }
@media (min-width: 820px) {
  .fv.ofv { padding-bottom: 44px; }
  .ofv__media { height: calc(100svh - 300px); min-height: 440px; max-height: 720px; }
  .ofv__ridge { height: 120px; }
  .ofv__text { position: absolute; left: 0; top: 0; padding: 0; margin: 64px 0 0 max(40px, calc((100vw - 1120px) / 2)); }
  .ofv__small { font-size: 13px; margin-bottom: 18px; }
  .ofv h1 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.75; margin-bottom: 22px; }
  .ofv__name { font-size: 18px; }
  .ofv__hours { font-size: 13px; }
  .ofv__below { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; padding: 0 40px; }
  .ofv__doors a { padding: 10px 16px 12px; transition: color .2s; }
  .ofv__doors a:hover b { color: #EBA75C; }
  .ofv__doors small { font-size: 12px; }
  .ofv__doors b { font-size: 21px; }
  .ofv__doors span { font-size: 12px; }
  .ofv__cta { margin-top: 0; text-align: left; }
}

/* 最初の画面の下：お知らせ1行（夜の地のまま） */
.news-line { display: flex; gap: 14px; align-items: baseline; padding: 15px max(20px, calc((100vw - 1040px) / 2)); text-decoration: none; font-size: 13px; background: var(--night); color: #EDE6D8; border-top: 1px solid rgba(237, 230, 216, .12); }
.news-line__label { font-family: var(--head); color: #EBA75C; letter-spacing: .2em; white-space: nowrap; }
.news-line time { color: #A9B1AA; letter-spacing: .05em; white-space: nowrap; }
.news-line span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-line::after { content: "→"; margin-left: auto; color: #EBA75C; }

/* ===== 区切り（余白を広く） ===== */
.section2 { padding: 96px 20px; }
@media (min-width: 820px) { .section2 { padding: 140px 28px; } }
.s-paper { background: var(--paper); }
.s-pale { background: #DCE2DE; }
.container--mid { max-width: 820px; margin: 0 auto; }
/* 業種に合った地：山あいの地図の、薄い等高線 */
.s-contour { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='rgba(28,43,45,.13)' stroke-width='1.2'%3E%3Cpath d='M332 300 L332 303 L330 307 L328 309 L325 312 L322 314 L320 316 L317 318 L313 319 L310 319 L306 319 L303 319 L300 318 L297 318 L294 317 L291 317 L288 317 L285 316 L282 315 L279 313 L278 310 L277 308 L276 305 L275 303 L274 300 L273 297 L272 294 L272 291 L273 287 L275 284 L278 282 L282 281 L286 280 L290 279 L293 279 L297 280 L300 280 L303 281 L306 282 L308 284 L310 286 L312 287 L314 288 L317 289 L320 290 L324 292 L328 294 L331 297Z'/%3E%3Cpath d='M364 300 L363 307 L360 313 L356 319 L350 324 L345 328 L339 332 L333 335 L326 338 L320 339 L313 339 L306 338 L300 337 L294 336 L289 335 L283 335 L276 334 L269 333 L264 330 L259 326 L256 321 L254 316 L252 310 L251 305 L249 300 L247 294 L245 288 L244 281 L246 275 L250 269 L257 264 L264 261 L272 260 L279 259 L287 259 L293 259 L300 260 L306 262 L311 265 L316 268 L320 272 L324 275 L328 277 L334 279 L341 281 L349 284 L356 288 L361 293Z'/%3E%3Cpath d='M396 300 L395 310 L391 320 L384 328 L376 336 L367 342 L359 348 L350 353 L340 356 L329 358 L319 358 L309 357 L300 355 L291 353 L283 352 L274 352 L264 351 L254 349 L245 345 L238 339 L234 331 L231 324 L229 316 L226 308 L223 300 L220 291 L217 282 L217 272 L219 262 L226 253 L235 247 L246 242 L257 240 L269 238 L280 238 L290 239 L300 240 L309 243 L317 247 L324 253 L330 258 L335 262 L342 265 L351 268 L361 271 L373 275 L384 282 L392 290Z'/%3E%3Cpath d='M427 300 L427 314 L421 327 L412 338 L401 348 L390 356 L378 364 L366 371 L353 375 L339 378 L325 378 L312 376 L300 373 L289 371 L277 370 L265 369 L252 368 L239 365 L227 360 L218 352 L211 342 L208 331 L205 321 L202 311 L198 300 L193 288 L190 276 L189 262 L192 249 L201 238 L213 229 L228 223 L243 220 L259 218 L273 217 L287 218 L300 220 L312 224 L323 230 L332 237 L340 244 L347 249 L356 254 L368 257 L382 261 L397 267 L411 276 L422 287Z'/%3E%3Cpath d='M459 300 L458 317 L451 333 L440 347 L426 360 L412 371 L398 380 L383 388 L366 394 L349 397 L332 397 L315 395 L300 391 L286 389 L271 387 L256 386 L240 385 L224 382 L209 375 L197 365 L189 352 L184 339 L181 326 L177 313 L172 300 L167 286 L162 270 L161 253 L166 236 L176 222 L191 211 L210 204 L229 199 L248 197 L266 197 L284 198 L300 200 L315 205 L329 212 L340 221 L350 230 L359 237 L370 242 L385 247 L402 252 L421 259 L439 269 L453 284Z'/%3E%3Cpath d='M491 300 L490 321 L481 340 L468 357 L451 372 L435 385 L417 396 L399 406 L379 413 L359 416 L338 416 L318 414 L300 410 L283 407 L266 405 L248 404 L228 402 L208 398 L191 390 L177 378 L167 363 L161 347 L157 331 L153 316 L147 300 L140 283 L135 264 L133 243 L139 224 L151 206 L170 193 L192 184 L215 179 L238 177 L260 176 L280 177 L300 180 L318 186 L334 195 L348 205 L360 215 L371 224 L384 231 L401 236 L423 242 L446 251 L467 263 L483 280Z'/%3E%3Cpath d='M523 300 L522 324 L511 346 L495 366 L477 384 L457 399 L437 412 L416 424 L393 432 L369 436 L344 436 L321 433 L300 428 L280 424 L260 422 L239 421 L216 419 L193 414 L172 405 L156 391 L145 373 L138 355 L134 337 L128 319 L121 300 L113 280 L107 258 L106 234 L112 211 L126 191 L148 175 L174 165 L201 159 L227 156 L253 156 L277 157 L300 160 L321 167 L340 177 L356 189 L369 201 L383 212 L398 219 L418 226 L443 232 L470 242 L495 257 L514 277Z'/%3E%3Cpath d='M555 300 L553 327 L542 353 L523 376 L502 396 L480 413 L456 428 L432 441 L406 451 L378 455 L351 455 L324 451 L300 446 L277 442 L254 440 L230 438 L204 436 L178 430 L154 420 L135 404 L123 384 L115 363 L110 342 L104 321 L96 300 L87 277 L79 252 L78 225 L85 198 L102 175 L126 158 L156 146 L187 139 L217 136 L246 135 L274 136 L300 140 L324 148 L346 160 L364 173 L379 187 L395 199 L412 208 L435 215 L463 223 L494 234 L523 251 L544 274Z'/%3E%3Cpath d='M672 650 L672 653 L670 657 L668 660 L666 662 L662 664 L659 666 L656 667 L653 669 L650 671 L647 672 L644 673 L640 673 L636 673 L633 672 L630 670 L627 669 L623 668 L619 667 L615 666 L611 664 L607 661 L604 658 L603 654 L604 650 L605 646 L608 643 L611 640 L614 638 L617 635 L620 634 L624 633 L627 632 L631 632 L634 632 L637 632 L640 631 L643 630 L647 628 L652 627 L657 626 L661 627 L665 629 L668 632 L670 636 L671 639 L672 643 L672 647Z'/%3E%3Cpath d='M704 650 L703 657 L701 663 L697 669 L691 674 L685 678 L678 681 L672 685 L667 688 L661 691 L654 694 L647 696 L640 697 L633 696 L626 693 L620 690 L613 688 L607 686 L599 684 L590 681 L582 678 L574 672 L569 666 L567 658 L568 650 L571 643 L576 636 L581 630 L587 625 L594 621 L600 618 L608 615 L615 614 L622 614 L628 614 L634 614 L640 612 L647 609 L654 606 L664 603 L673 603 L683 604 L691 609 L696 615 L700 622 L702 629 L703 636 L704 643Z'/%3E%3Cpath d='M736 650 L735 660 L731 670 L725 679 L717 686 L707 692 L698 697 L689 702 L680 707 L671 712 L662 716 L651 719 L640 720 L629 719 L619 715 L609 711 L600 707 L590 703 L578 701 L565 697 L552 692 L541 684 L533 673 L530 662 L531 650 L536 639 L544 629 L552 620 L561 613 L570 606 L581 601 L591 598 L602 597 L613 597 L623 597 L631 596 L640 593 L650 589 L662 584 L675 580 L690 579 L704 581 L716 588 L724 597 L730 607 L733 618 L735 629 L736 640Z'/%3E%3Cpath d='M768 650 L767 664 L762 677 L753 689 L742 698 L730 706 L717 713 L705 719 L693 726 L682 732 L669 738 L655 743 L640 744 L625 741 L612 737 L599 731 L587 726 L573 721 L558 717 L540 713 L523 705 L508 695 L497 681 L493 666 L495 650 L502 635 L512 622 L523 610 L535 600 L547 592 L561 585 L575 581 L590 579 L604 579 L617 579 L628 578 L640 574 L653 568 L669 562 L687 556 L707 555 L726 559 L741 567 L753 579 L760 593 L764 608 L766 622 L768 636Z'/%3E%3Cpath d='M800 650 L798 667 L792 683 L782 698 L768 711 L752 720 L736 729 L721 736 L707 745 L692 753 L676 761 L659 766 L640 767 L622 764 L605 758 L589 751 L573 745 L557 739 L537 734 L516 728 L494 719 L475 706 L462 689 L457 670 L459 650 L467 631 L479 615 L493 600 L508 588 L524 577 L541 569 L559 563 L577 561 L595 561 L611 561 L625 559 L640 555 L656 548 L676 539 L699 533 L724 531 L747 536 L766 546 L781 561 L790 579 L795 597 L798 615 L800 633Z'/%3E%3Cpath d='M832 650 L830 671 L823 690 L810 708 L793 723 L774 735 L755 744 L737 754 L720 763 L702 774 L683 783 L662 789 L640 790 L618 787 L598 780 L579 771 L560 763 L540 757 L517 751 L491 744 L465 733 L442 717 L426 697 L420 674 L423 650 L433 628 L447 608 L464 590 L482 575 L501 562 L521 553 L543 546 L565 543 L586 543 L605 543 L623 541 L640 536 L660 527 L683 517 L711 510 L740 508 L768 513 L792 526 L809 544 L820 565 L826 587 L830 608 L832 629Z'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='rgba(28,43,45,.13)' stroke-width='1.2'%3E%3Cpath d='M332 300 L332 303 L330 307 L328 309 L325 312 L322 314 L320 316 L317 318 L313 319 L310 319 L306 319 L303 319 L300 318 L297 318 L294 317 L291 317 L288 317 L285 316 L282 315 L279 313 L278 310 L277 308 L276 305 L275 303 L274 300 L273 297 L272 294 L272 291 L273 287 L275 284 L278 282 L282 281 L286 280 L290 279 L293 279 L297 280 L300 280 L303 281 L306 282 L308 284 L310 286 L312 287 L314 288 L317 289 L320 290 L324 292 L328 294 L331 297Z'/%3E%3Cpath d='M364 300 L363 307 L360 313 L356 319 L350 324 L345 328 L339 332 L333 335 L326 338 L320 339 L313 339 L306 338 L300 337 L294 336 L289 335 L283 335 L276 334 L269 333 L264 330 L259 326 L256 321 L254 316 L252 310 L251 305 L249 300 L247 294 L245 288 L244 281 L246 275 L250 269 L257 264 L264 261 L272 260 L279 259 L287 259 L293 259 L300 260 L306 262 L311 265 L316 268 L320 272 L324 275 L328 277 L334 279 L341 281 L349 284 L356 288 L361 293Z'/%3E%3Cpath d='M396 300 L395 310 L391 320 L384 328 L376 336 L367 342 L359 348 L350 353 L340 356 L329 358 L319 358 L309 357 L300 355 L291 353 L283 352 L274 352 L264 351 L254 349 L245 345 L238 339 L234 331 L231 324 L229 316 L226 308 L223 300 L220 291 L217 282 L217 272 L219 262 L226 253 L235 247 L246 242 L257 240 L269 238 L280 238 L290 239 L300 240 L309 243 L317 247 L324 253 L330 258 L335 262 L342 265 L351 268 L361 271 L373 275 L384 282 L392 290Z'/%3E%3Cpath d='M427 300 L427 314 L421 327 L412 338 L401 348 L390 356 L378 364 L366 371 L353 375 L339 378 L325 378 L312 376 L300 373 L289 371 L277 370 L265 369 L252 368 L239 365 L227 360 L218 352 L211 342 L208 331 L205 321 L202 311 L198 300 L193 288 L190 276 L189 262 L192 249 L201 238 L213 229 L228 223 L243 220 L259 218 L273 217 L287 218 L300 220 L312 224 L323 230 L332 237 L340 244 L347 249 L356 254 L368 257 L382 261 L397 267 L411 276 L422 287Z'/%3E%3Cpath d='M459 300 L458 317 L451 333 L440 347 L426 360 L412 371 L398 380 L383 388 L366 394 L349 397 L332 397 L315 395 L300 391 L286 389 L271 387 L256 386 L240 385 L224 382 L209 375 L197 365 L189 352 L184 339 L181 326 L177 313 L172 300 L167 286 L162 270 L161 253 L166 236 L176 222 L191 211 L210 204 L229 199 L248 197 L266 197 L284 198 L300 200 L315 205 L329 212 L340 221 L350 230 L359 237 L370 242 L385 247 L402 252 L421 259 L439 269 L453 284Z'/%3E%3Cpath d='M491 300 L490 321 L481 340 L468 357 L451 372 L435 385 L417 396 L399 406 L379 413 L359 416 L338 416 L318 414 L300 410 L283 407 L266 405 L248 404 L228 402 L208 398 L191 390 L177 378 L167 363 L161 347 L157 331 L153 316 L147 300 L140 283 L135 264 L133 243 L139 224 L151 206 L170 193 L192 184 L215 179 L238 177 L260 176 L280 177 L300 180 L318 186 L334 195 L348 205 L360 215 L371 224 L384 231 L401 236 L423 242 L446 251 L467 263 L483 280Z'/%3E%3Cpath d='M523 300 L522 324 L511 346 L495 366 L477 384 L457 399 L437 412 L416 424 L393 432 L369 436 L344 436 L321 433 L300 428 L280 424 L260 422 L239 421 L216 419 L193 414 L172 405 L156 391 L145 373 L138 355 L134 337 L128 319 L121 300 L113 280 L107 258 L106 234 L112 211 L126 191 L148 175 L174 165 L201 159 L227 156 L253 156 L277 157 L300 160 L321 167 L340 177 L356 189 L369 201 L383 212 L398 219 L418 226 L443 232 L470 242 L495 257 L514 277Z'/%3E%3Cpath d='M555 300 L553 327 L542 353 L523 376 L502 396 L480 413 L456 428 L432 441 L406 451 L378 455 L351 455 L324 451 L300 446 L277 442 L254 440 L230 438 L204 436 L178 430 L154 420 L135 404 L123 384 L115 363 L110 342 L104 321 L96 300 L87 277 L79 252 L78 225 L85 198 L102 175 L126 158 L156 146 L187 139 L217 136 L246 135 L274 136 L300 140 L324 148 L346 160 L364 173 L379 187 L395 199 L412 208 L435 215 L463 223 L494 234 L523 251 L544 274Z'/%3E%3Cpath d='M672 650 L672 653 L670 657 L668 660 L666 662 L662 664 L659 666 L656 667 L653 669 L650 671 L647 672 L644 673 L640 673 L636 673 L633 672 L630 670 L627 669 L623 668 L619 667 L615 666 L611 664 L607 661 L604 658 L603 654 L604 650 L605 646 L608 643 L611 640 L614 638 L617 635 L620 634 L624 633 L627 632 L631 632 L634 632 L637 632 L640 631 L643 630 L647 628 L652 627 L657 626 L661 627 L665 629 L668 632 L670 636 L671 639 L672 643 L672 647Z'/%3E%3Cpath d='M704 650 L703 657 L701 663 L697 669 L691 674 L685 678 L678 681 L672 685 L667 688 L661 691 L654 694 L647 696 L640 697 L633 696 L626 693 L620 690 L613 688 L607 686 L599 684 L590 681 L582 678 L574 672 L569 666 L567 658 L568 650 L571 643 L576 636 L581 630 L587 625 L594 621 L600 618 L608 615 L615 614 L622 614 L628 614 L634 614 L640 612 L647 609 L654 606 L664 603 L673 603 L683 604 L691 609 L696 615 L700 622 L702 629 L703 636 L704 643Z'/%3E%3Cpath d='M736 650 L735 660 L731 670 L725 679 L717 686 L707 692 L698 697 L689 702 L680 707 L671 712 L662 716 L651 719 L640 720 L629 719 L619 715 L609 711 L600 707 L590 703 L578 701 L565 697 L552 692 L541 684 L533 673 L530 662 L531 650 L536 639 L544 629 L552 620 L561 613 L570 606 L581 601 L591 598 L602 597 L613 597 L623 597 L631 596 L640 593 L650 589 L662 584 L675 580 L690 579 L704 581 L716 588 L724 597 L730 607 L733 618 L735 629 L736 640Z'/%3E%3Cpath d='M768 650 L767 664 L762 677 L753 689 L742 698 L730 706 L717 713 L705 719 L693 726 L682 732 L669 738 L655 743 L640 744 L625 741 L612 737 L599 731 L587 726 L573 721 L558 717 L540 713 L523 705 L508 695 L497 681 L493 666 L495 650 L502 635 L512 622 L523 610 L535 600 L547 592 L561 585 L575 581 L590 579 L604 579 L617 579 L628 578 L640 574 L653 568 L669 562 L687 556 L707 555 L726 559 L741 567 L753 579 L760 593 L764 608 L766 622 L768 636Z'/%3E%3Cpath d='M800 650 L798 667 L792 683 L782 698 L768 711 L752 720 L736 729 L721 736 L707 745 L692 753 L676 761 L659 766 L640 767 L622 764 L605 758 L589 751 L573 745 L557 739 L537 734 L516 728 L494 719 L475 706 L462 689 L457 670 L459 650 L467 631 L479 615 L493 600 L508 588 L524 577 L541 569 L559 563 L577 561 L595 561 L611 561 L625 559 L640 555 L656 548 L676 539 L699 533 L724 531 L747 536 L766 546 L781 561 L790 579 L795 597 L798 615 L800 633Z'/%3E%3Cpath d='M832 650 L830 671 L823 690 L810 708 L793 723 L774 735 L755 744 L737 754 L720 763 L702 774 L683 783 L662 789 L640 790 L618 787 L598 780 L579 771 L560 763 L540 757 L517 751 L491 744 L465 733 L442 717 L426 697 L420 674 L423 650 L433 628 L447 608 L464 590 L482 575 L501 562 L521 553 L543 546 L565 543 L586 543 L605 543 L623 541 L640 536 L660 527 L683 517 L711 510 L740 508 L768 513 L792 526 L809 544 L820 565 L826 587 L830 608 L832 629Z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 860px auto, 760px auto; background-position: left -260px top -200px, right -220px bottom -260px; }

/* 見出し（小さな日本語のひとこと＋短い線を上に。細く大きく） */
.title2 { margin-bottom: 48px; }
.title2 span { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .28em; color: var(--label); margin-bottom: 12px; }
.title2 span::before { content: ""; width: 26px; border-top: 1px solid var(--accent); }
.title2 h2 { font-size: 25px; line-height: 1.75; letter-spacing: .14em; }
.title2 p { color: var(--muted); margin: 18px 0 0; max-width: 640px; }
.title2--center { text-align: center; }
.title2--center p { margin-left: auto; margin-right: auto; }
@media (min-width: 820px) { .title2 h2 { font-size: 34px; } .title2 { margin-bottom: 56px; } }
@media (max-width: 819px) { .title2 h2 { letter-spacing: .08em; } }

/* 細い横線で区切った行 */
.rows { margin: 0; }
.rows > div { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.rows > div:first-child { border-top: 1px solid var(--line); }
.rows dt { font-family: var(--head); font-size: 17px; letter-spacing: .1em; line-height: 1.7; }
.rows dt small { display: block; font-family: var(--sans); font-size: 12px; color: var(--label); letter-spacing: .08em; }
.rows dd { margin: 0; color: var(--muted); font-size: 15px; }
.rows dd small { display: block; font-size: 13px; color: var(--muted); }
.rows .why { margin-top: 6px; color: var(--label); }
@media (min-width: 820px) { .rows > div { grid-template-columns: 13em 1fr; gap: 28px; padding: 22px 0; } }
.rows--spec > div { padding: 14px 0; }
.rows--spec dt { font-family: var(--sans); font-size: 13px; color: var(--label); letter-spacing: .06em; }
.rows--spec dd { color: var(--ink); }
@media (min-width: 820px) { .rows--spec > div { grid-template-columns: 9.5em 1fr; gap: 20px; padding: 16px 0; } }
.note-line { font-size: 13px; color: var(--muted); margin: 22px 0 0; padding-left: 18px; position: relative; }
.note-line::before { content: ""; position: absolute; left: 2px; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.note-line--center { text-align: center; padding-left: 0; }
.note-line--center::before { position: static; display: inline-block; margin-right: 10px; vertical-align: 2px; }

/* 頭に小さな橙の点がつく行 */
.dots { list-style: none; margin: 0; padding: 0; }
.dots li { position: relative; padding: 18px 0 18px 26px; border-bottom: 1px solid var(--line); line-height: 1.8; }
.dots li:first-child { border-top: 1px solid var(--line); }
.dots li::before { content: ""; position: absolute; left: 4px; top: 30px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dots--small { margin-top: 36px; }
.dots--small li { font-size: 14px; color: var(--muted); padding: 12px 0 12px 24px; }
.dots--small li::before { top: 23px; }
@media (min-width: 820px) { .dots li::before { top: 33px; } }

/* ===== 2 こんなときに ===== */
.worry2 { display: grid; gap: 44px; }
.worry2__small { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .24em; color: var(--label); margin-bottom: 18px; }
.worry2__small::before { content: ""; width: 26px; border-top: 1px solid var(--accent); }
.worry2__big { font-family: var(--head); font-size: 26px; line-height: 1.75; letter-spacing: .12em; margin: 0 0 22px; }
.worry2__lead { color: var(--muted); margin: 0; }
@media (min-width: 820px) { .worry2 { grid-template-columns: .95fr 1.05fr; gap: 90px; align-items: start; } .worry2__big { font-size: 36px; } .worry2 > div:first-child { position: sticky; top: 130px; } }

/* しないこと：箱ではなく、上下の線で */
.promise2 { max-width: 760px; margin: 84px auto 0; padding: 40px 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.container--mid .promise2 { margin-top: 0; }
.promise2__title { font-family: var(--head); font-size: 20px; letter-spacing: .2em; text-align: center; margin: 0 0 20px; }
.promise2 ul { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.promise2 li { position: relative; padding: 8px 0 8px 34px; }
.promise2 li::before { counter-increment: p; content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-family: var(--head); color: var(--label); }

/* ===== 3 おきびの一日：左の写真が止まって、右の時刻が流れる ===== */
.day { display: grid; gap: 40px; }
.day__photo { display: none; }
.day__list { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.day__list::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; border-left: 1px solid var(--line); }
.day__list li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 0 14px; padding: 0 0 46px 22px; }
.day__list li::before { content: ""; position: absolute; left: -4px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--night); border: 1px solid var(--accent); }
.day__list li:last-child { padding-bottom: 0; }
.day__list time { font-family: var(--head); font-size: 21px; color: var(--label); letter-spacing: .04em; line-height: 1.6; }
.day__list h3 { font-size: 20px; margin: 0 0 6px; line-height: 1.6; }
.day__list p { margin: 0; color: var(--muted); font-size: 14px; }
.day__thumb { margin: 16px 0 0; }
.day__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 820px) {
  .day { grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
  .day__photo { display: block; position: sticky; top: 130px; aspect-ratio: 4 / 5; overflow: hidden; }
  .day__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
  .day__img.is-on { opacity: 1; }
  .day__thumb { display: none; }
  .day__list { padding-top: 10px; }
  .day__list li { grid-template-columns: 84px 1fr; padding-bottom: 40px; }
  .day__list li:last-child { padding-bottom: 20px; }
  .day__list time { font-size: 26px; }
  .day__list h3 { font-size: 23px; }
  .day__list p { font-size: 14px; line-height: 2; }
}
.s-night .btn-row { margin-top: 64px; }

/* ===== 4 泊まり方を選ぶ：大きな写真を左右交互に ===== */
.stays2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 80px; }
.stay2__photo { position: relative; margin: 0; }
.stay2__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 820px) { .stay2__photo img { aspect-ratio: 16 / 10; } }
.stay2__no { position: absolute; left: 0; bottom: -18px; font-family: var(--head); font-size: 44px; line-height: 1; color: var(--accent); letter-spacing: .02em; padding-right: 10px; background: var(--bg); padding-top: 6px; }
.stay2__body { padding-top: 34px; }
.stay2__small { display: inline-block; font-size: 12px; letter-spacing: .14em; color: #fff; background: var(--main); padding: 2px 12px; margin-bottom: 12px; }
.stay2 h3 { font-size: 25px; line-height: 1.6; margin-bottom: 14px; }
.stay2 p { color: var(--muted); }
.spec { margin: 22px 0 0; }
.spec > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.spec > div:first-child { border-top: 1px solid var(--line); }
.spec dt { color: var(--label); letter-spacing: .04em; }
.spec dd { margin: 0; }
.spec dd small { display: block; font-size: 12px; color: var(--muted); }
@media (min-width: 820px) {
  .stays2 { gap: 100px; }
  .stay2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: center; }
  .stay2:nth-child(even) .stay2__photo { order: 2; }
  .stay2__body { padding-top: 0; }
  .stay2__no { font-size: 64px; bottom: -24px; }
  .stay2 p { margin-bottom: 0; }
  .spec { margin-top: 18px; }
  .stay2 h3 { font-size: 30px; }
  .spec { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .spec > div { align-content: start; }
  .spec > div { font-size: 14px; grid-template-columns: 1fr; gap: 0; padding: 10px 0; }
  .spec > div:nth-child(2) { border-top: 1px solid var(--line); }
  .spec dt { font-size: 12px; }
}

/* ===== 5 写真を暗く敷いた帯 ===== */
.dark-band { position: relative; display: grid; place-items: center; min-height: 460px; padding: 90px 22px; overflow: hidden; background: var(--night); }
.dark-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dark-band::before { content: ""; position: absolute; inset: 0; background: rgba(10, 18, 19, .6); z-index: 1; }
.dark-band__inner { position: relative; z-index: 2; text-align: center; max-width: 760px; }
.dark-band__small { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .28em; color: #EBA75C; margin-bottom: 16px; }
.dark-band__small::before, .dark-band__small::after { content: ""; width: 22px; border-top: 1px solid var(--accent); }
.dark-band__big { font-family: var(--head); font-size: 26px; line-height: 1.8; letter-spacing: .16em; margin-bottom: 22px; }
.dark-band__inner p:not(.dark-band__big) { opacity: .92; line-height: 2.2; margin: 0; }
@media (max-width: 819px) { .dark-band__inner p:not(.dark-band__big) { text-align: left; } .dark-band__inner p br:not(.sp) { display: none; } }
@media (min-width: 820px) { .dark-band { min-height: 540px; } .dark-band__big { font-size: 38px; } }

/* ===== 6 お食事：写真2枚を大小ずらして重ねる ===== */
.food2 { display: grid; gap: 60px; align-items: center; }
.food2__photos { position: relative; padding-bottom: 70px; }
.food2__big { width: 88%; aspect-ratio: 4 / 3; object-fit: cover; }
.food2__small { position: absolute; right: 0; bottom: 0; width: 50%; margin: 0; }
.food2__small img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid var(--paper); }
.food2__small figcaption { font-size: 12px; color: var(--muted); margin-top: 2px; text-align: right; }
.rows--food > div { padding: 18px 0; }
.rows--food dd { font-size: 14px; }
@media (min-width: 820px) { .food2 { grid-template-columns: 1.1fr 1fr; gap: 90px; } .food2__photos { padding-bottom: 90px; } .rows--food > div { grid-template-columns: 7em 1fr; gap: 18px; } }

/* ===== 7 途中のご予約の帯（焚き火の橙・細い帯） ===== */
.yoyaku-band { background: var(--accent); --ink: #18120B; --muted: #3A2A16; --label: #3A2A16; --pale: rgba(255, 255, 255, .45); color: var(--ink); padding: 44px 20px; }
.yoyaku-band__inner { max-width: 1040px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; text-align: center; }
.yoyaku-band__text { font-family: var(--head); font-size: 22px; letter-spacing: .14em; margin: 0; }
.yoyaku-band .btn-hint { color: #2B1E0E; }
.yoyaku-band__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.yoyaku-band__btns .btn { min-width: 150px; }
@media (min-width: 820px) { .yoyaku-band { padding: 46px 28px; } .yoyaku-band__inner { grid-template-columns: 1fr auto; text-align: left; justify-items: start; gap: 40px; align-items: center; } .yoyaku-band__text { font-size: 28px; } }

/* ===== 8 焚き火の手ほどき（大きな数字）と、横に流れる季節 ===== */
.fire-wrap { display: grid; gap: 44px; }
.fire-wrap__photo { margin: 0; }
.fire-wrap__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fire { list-style: none; margin: 0; padding: 0; }
.fire li { display: grid; grid-template-columns: 66px 1fr; gap: 0 10px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.fire li:first-child { border-top: 1px solid var(--line); }
.fire__num { font-family: var(--head); font-size: 40px; line-height: 1; color: var(--accent); letter-spacing: .02em; }
.fire h3 { font-size: 19px; margin: 0 0 4px; line-height: 1.6; }
.fire p { margin: 0; font-size: 14px; color: var(--muted); }
@media (min-width: 820px) { .fire-wrap { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .fire-wrap__photo img { aspect-ratio: 5 / 4; } .fire__num { font-size: 52px; } .fire li { grid-template-columns: 90px 1fr; padding: 20px 0; } .fire h3 { font-size: 22px; } .fire p { font-size: 15px; } }
.season-head { font-family: var(--head); font-size: 22px; letter-spacing: .18em; text-align: center; margin: 110px 0 30px; }
.season-head::before, .season-head::after { content: ""; display: inline-block; width: 28px; border-top: 1px solid var(--accent); vertical-align: middle; margin: 0 14px; }
.seasons { overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: thin; }
.seasons ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 18px; }
.seasons li { scroll-snap-align: start; }
.seasons figure { position: relative; margin: 0; }
.seasons img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.season__tag { position: absolute; left: 0; top: 0; background: var(--night); color: #EDE6D8; font-family: var(--head); font-size: 18px; letter-spacing: .1em; padding: 6px 14px; }
.seasons p { margin: 14px 0 0; font-size: 14px; color: var(--muted); line-height: 1.9; }
.seasons__hint { text-align: center; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
@media (min-width: 820px) { .seasons { margin: 0; padding: 0; overflow: visible; } .seasons ul { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 24px; } .seasons li:nth-child(even) { margin-top: 40px; } .seasons img { aspect-ratio: 4 / 3; } }
.s-contour .season-head { margin-top: 100px; }

/* ===== 9 安心してすごすために ===== */
.safe2 { display: grid; gap: 40px; }
.safe2__photo { margin: 0; }
.safe2__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.safe2__photo figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.safe2 .title2 { margin-bottom: 36px; }
@media (min-width: 820px) { .safe2 { grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: start; } .safe2__head { position: sticky; top: 130px; } .rows--wide > div { grid-template-columns: 11em 1fr; } }

/* ===== 10 料金の目安（点線で金額までつなぐ）と、泊まれる日 ===== */
.price2 { display: grid; gap: 84px; }
@media (min-width: 900px) { .price2 { grid-template-columns: 1.3fr 1fr; gap: 90px; align-items: start; } }
.leader { list-style: none; margin: 0; padding: 0; }
.leader li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.leader li:first-child { border-top: 1px solid var(--line); }
.leader__row { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.leader__name { font-family: var(--head); font-size: 16px; letter-spacing: .06em; line-height: 1.6; }
.leader__sub { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.leader i { flex: 1 1 20px; min-width: 20px; border-bottom: 1px dotted var(--muted); transform: translateY(-5px); opacity: .7; }
.leader b { font-weight: 500; white-space: nowrap; color: var(--ink); font-size: 15px; letter-spacing: .04em; }
.leader li > small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.leader--mt { margin-top: 40px; }
@media (min-width: 820px) { .leader__name { font-size: 18px; } .leader b { font-size: 17px; } .leader li > small { font-size: 13px; } }
@media (max-width: 480px) { .leader__row { flex-wrap: wrap; } .leader b { margin-left: auto; } }
.ptable { width: 100%; border-collapse: collapse; text-align: center; }
.ptable th, .ptable td { padding: 16px 6px; border-bottom: 1px solid var(--line); line-height: 1.6; }
.ptable thead th { font-weight: 400; font-size: 12px; color: var(--label); border-top: 1px solid var(--ink); letter-spacing: .06em; }
.ptable tbody th { font-family: var(--head); font-weight: 400; text-align: left; font-size: 16px; }
.ptable tbody th small { display: block; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.ptable td { font-size: 16px; white-space: nowrap; }
@media (min-width: 820px) { .ptable tbody th { font-size: 19px; } .ptable td { font-size: 19px; } }
.hours { width: 100%; border-collapse: collapse; text-align: center; font-size: 14px; }
.hours th, .hours td { padding: 14px 2px; border-bottom: 1px solid var(--line); }
.hours thead th { font-weight: 400; color: var(--muted); border-top: 1px solid var(--ink); }
.hours tbody th { font-weight: 400; font-size: 12px; white-space: nowrap; text-align: left; padding-right: 8px; }
.hours td { color: var(--label); }
.hours td.off { color: var(--muted); background: rgba(91, 101, 99, .07); }
.hours__note { font-size: 12px; color: var(--muted); margin: 14px 0 0; line-height: 1.9; }

/* ===== 11 私たちのこと：写真を大小ずらして重ねる・大きな数字 ===== */
.owner2 { display: grid; gap: 64px; align-items: center; }
.owner2__photos { position: relative; padding-bottom: 60px; }
.owner2__big { width: 88%; aspect-ratio: 4 / 3; object-fit: cover; }
.owner2__small { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid var(--paper); }
.owner2__one { padding: 24px 0; border-top: 1px solid var(--line); }
.owner2__one h3 { font-size: 20px; line-height: 1.6; margin-bottom: 10px; }
.owner2__one h3 small { display: block; font-family: var(--sans); font-size: 12px; color: var(--label); letter-spacing: .08em; }
.owner2__one p { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.mini { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; }
.mini > div { display: flex; gap: 10px; }
.mini dt { color: #fff; background: var(--main); padding: 0 10px; font-size: 12px; line-height: 1.9; height: fit-content; margin-top: 2px; }
.mini dd { margin: 0; }
@media (min-width: 820px) { .owner2 { grid-template-columns: 1.05fr 1fr; gap: 90px; } .owner2__photos { padding-bottom: 80px; } }
.numbers2 { list-style: none; margin: 90px auto 0; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 36px; text-align: center; }
.numbers2 li { padding: 0 8px; }
.numbers2 li:nth-child(even) { border-left: 1px solid var(--line); }
.numbers2 b { display: block; font-family: var(--head); font-weight: 400; font-size: 46px; line-height: 1.2; color: var(--label); letter-spacing: .02em; }
.numbers2 span { display: block; font-size: 12px; color: var(--muted); letter-spacing: .04em; line-height: 1.6; }
.numbers2__note { text-align: center; font-size: 12px; color: var(--muted); margin: 22px 0 0; }
@media (min-width: 820px) { .numbers2 { grid-template-columns: repeat(4, 1fr); } .numbers2 li + li { border-left: 1px solid var(--line); } .numbers2 b { font-size: 64px; } .numbers2 span { font-size: 13px; } }

/* ===== 12 お知らせ（薄い紺緑の地） ===== */
.news { list-style: none; margin: 0; padding: 0; }
.news li { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 16px; align-items: baseline; padding: 22px 2px; border-bottom: 1px solid rgba(28, 43, 45, .18); }
.news li:first-child { border-top: 1px solid rgba(28, 43, 45, .18); }
.news time { font-size: 13px; color: var(--muted); letter-spacing: .05em; }
.news__cat { font-size: 12px; letter-spacing: .1em; color: #EDE6D8; background: var(--main); padding: 1px 12px; white-space: nowrap; }
.news p { margin: 0; letter-spacing: .06em; }
@media (max-width: 819px) { .news li { grid-template-columns: auto 1fr; } .news li .news__cat { justify-self: start; } .news p { grid-column: 1 / -1; } }
.news__note { font-size: 12px; color: var(--muted); margin: 14px 0 0; }

/* ===== 13 空き状況とアクセス ===== */
.reserve2 { display: grid; gap: 70px; }
@media (min-width: 900px) { .reserve2 { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.reserve2__tel { font-family: var(--head); font-size: 30px; letter-spacing: .1em; margin: 34px 0 4px; }
.reserve2__btns { display: grid; gap: 10px; max-width: 460px; }
.reserve2__btns .btn { min-height: 58px; }
.reserve2__photo { margin: 28px 0 0; }
.reserve2__photo--first { margin-top: 0; margin-bottom: 30px; }
.reserve2__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.reserve2__photo figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.reserve2__road { margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.reserve2__road b { display: block; font-family: var(--head); font-weight: 400; font-size: 17px; color: var(--ink); letter-spacing: .1em; margin-bottom: 4px; }
.map-embed { aspect-ratio: 4 / 3; width: 100%; background: #2A3637; overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.7); }
.map-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.cal__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 12px; }
.cal__head b { font-family: var(--head); font-weight: 400; font-size: 17px; letter-spacing: .08em; }
.cal__tag { font-size: 12px; letter-spacing: .1em; color: var(--on-accent); background: var(--accent); padding: 2px 12px; white-space: nowrap; }
.cal table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.cal th { font-weight: 400; font-size: 12px; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line); }
.cal th.sun { color: #D9826B; }
.cal td { padding: 6px 0 8px; font-size: 13px; line-height: 1.3; border-bottom: 1px solid var(--line); }
.cal td i { display: block; font-style: normal; font-size: 13px; margin-top: 2px; }
.cal td.ok i { color: var(--label); }
.cal td.few i { color: var(--ink); }
.cal td.full { color: var(--muted); }
.cal td.full i { color: var(--muted); }
.cal td.off { color: var(--muted); background: rgba(127, 127, 127, .1); }
.cal td.off i { font-size: 10px; }
.cal__legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--muted); }
.cal__legend b { font-weight: 400; color: var(--label); margin-right: 4px; }
.cal__legend .lg-off::before { content: ""; display: inline-block; width: 14px; height: 10px; background: rgba(127, 127, 127, .2); margin-right: 6px; vertical-align: -1px; }
.cal__demo { font-size: 12px; color: var(--muted); margin: 10px 0 0; }

/* ===== 14 ページの最後の大きな写真 ===== */
.last-photo { position: relative; margin: 0; }
.last-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.last-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night), transparent 22%); pointer-events: none; }
@media (min-width: 820px) { .last-photo img { aspect-ratio: 16 / 6; } }
.photo-band { margin: 0; }
.photo-band img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 820px) { .photo-band img { aspect-ratio: 16 / 5.5; } }

/* ===== 下層ページ ===== */
.page-head { position: relative; background: var(--night); padding: 22px 20px 92px; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; background: var(--bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 58 L80 46 L170 62 L250 34 L330 50 L420 22 L500 40 L590 30 L670 52 L760 36 L850 56 L930 28 L1010 18 L1090 38 L1180 48 L1270 30 L1360 50 L1440 40 L1440 90 L0 90 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 58 L80 46 L170 62 L250 34 L330 50 L420 22 L500 40 L590 30 L670 52 L760 36 L850 56 L930 28 L1010 18 L1090 38 L1180 48 L1270 30 L1360 50 L1440 40 L1440 90 L0 90 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.page-head .crumb { color: var(--muted); }
.page-head .crumb a { color: #EBA75C; }
.page-head span { font-weight: 400; font-size: 12px; letter-spacing: .28em; color: #EBA75C; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.page-head span::before { content: ""; width: 26px; border-top: 1px solid var(--accent); }
.page-head h1 { font-size: 28px; letter-spacing: .14em; line-height: 1.6; }
.page-head p { color: var(--muted); margin-top: 14px; }
@media (min-width: 820px) { .page-head { padding: 28px 28px 150px; } .page-head::after { height: 90px; } .page-head h1 { font-size: 42px; } }

/* 写真と文（左右交互） */
.alt { display: grid; gap: 44px; align-items: center; }
.alt__photos { display: grid; gap: 14px; }
.alt__photos figure { margin: 0; }
.alt__photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.alt__photos figure + figure { width: 62%; margin-left: auto; margin-top: -60px; position: relative; }
.alt__photos figure + figure img { border: 8px solid var(--bg); aspect-ratio: 4 / 3; }
.s-paper .alt__photos figure + figure img { border-color: var(--paper); }
.alt > div > p { color: var(--muted); }
.alt .rows--spec { margin-top: 26px; }
@media (min-width: 820px) {
  .alt { grid-template-columns: 1.1fr 1fr; gap: 84px; }
  .alt--reverse .alt__photos { order: 2; }
  .alt__photos figure + figure { margin-top: -110px; width: 56%; }
}
.two2 { display: grid; gap: 80px; }
@media (min-width: 900px) { .two2 { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } }
.two2 > div > p { color: var(--muted); }

/* はじめての方へ：時刻の流れ */
.timeline2 { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline2 li { display: grid; grid-template-columns: 70px 1fr; gap: 0 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.timeline2 li:first-child { border-top: 1px solid var(--line); }
.timeline2 time { font-family: var(--head); font-size: 22px; color: var(--label); line-height: 1.5; }
.timeline2 h3 { font-size: 19px; margin-bottom: 4px; }
.timeline2 p { margin: 0; color: var(--muted); font-size: 14px; }
@media (min-width: 820px) { .timeline2 li { grid-template-columns: 110px 1fr; } .timeline2 time { font-size: 26px; } .timeline2 p { font-size: 15px; } }

/* キャンプ区画の配置図の絵 */
.sitemap { margin: 30px 0 0; }
.sitemap svg { width: 100%; height: auto; display: block; background: #E3E6DD; }
.sitemap figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; }
.sm-river { fill: none; stroke: #9DB7B5; stroke-width: 12; stroke-linecap: round; }
.sm-road { fill: none; stroke: #CBC4B2; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 2 0; }
.sm-lots rect { fill: #F7F6F1; stroke: var(--main); stroke-width: 1.2; }
.sm-num text { font-family: var(--head); font-size: 16px; fill: var(--main); text-anchor: middle; }
.sm-tree circle { fill: #7E9A80; opacity: .8; }
.sm-hut { fill: var(--main); }
.sm-text { font-size: 11px; fill: #3F4B49; }
.sm-text--river { fill: #4E7472; }

/* よくある質問：箱をやめて、線で */
.faq-group { max-width: 820px; margin: 0 auto 72px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__head { font-size: 22px; letter-spacing: .18em; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.faq-group__head::before { content: ""; width: 26px; border-top: 1px solid var(--accent); }
.faq { gap: 0; max-width: none; }
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { font-weight: 400; padding: 20px 40px 20px 46px; letter-spacing: .06em; line-height: 1.7; }
.faq summary::before { content: "問"; background: transparent; color: var(--label); border: 1px solid var(--accent); width: 28px; height: 28px; left: 2px; top: 19px; border-radius: 50%; font-family: var(--head); }
.faq summary::after { color: var(--label); top: 20px; right: 6px; }
.faq__a { padding: 0 8px 22px 46px; color: var(--muted); }

/* 予約フォーム：外の枠をやめる */
.form { background: transparent; border: 0; padding: 0; }
.form__row label, .form legend { font-weight: 500; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .form textarea { border-radius: 2px; border-color: #C9C6BA; background: #fff; }
.form input:focus, .form select:focus, .form textarea:focus { outline-color: var(--accent); }
.form__req { background: var(--main); border-radius: 2px; }
.form__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form__nums label { display: grid; gap: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
.form__nums input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #C9C6BA; border-radius: 2px; background: #fff; }
@media (min-width: 820px) { .form__nums { grid-template-columns: repeat(4, 1fr); } }
.form__check input { accent-color: var(--accent); }

/* 下層ページの最後のご予約（夜の地・箱なし） */
.cta2__inner { text-align: center; max-width: 760px; }
.cta2__small { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .28em; color: var(--label); margin-bottom: 12px; }
.cta2__small::before, .cta2__small::after { content: ""; width: 22px; border-top: 1px solid var(--accent); }
.cta2 h2 { font-size: 26px; letter-spacing: .14em; margin-bottom: 14px; }
.cta2 p { color: var(--muted); }
.cta2__tel { font-family: var(--head); font-size: 30px; letter-spacing: .1em; color: var(--ink) !important; margin: 28px 0 8px; }
.cta2__btns { display: grid; gap: 10px; max-width: 520px; margin: 0 auto; }
@media (min-width: 720px) { .cta2__btns { grid-template-columns: 1fr 1fr; } }
@media (min-width: 820px) { .cta2 h2 { font-size: 34px; } }

/* フッター */
.site-footer { background: #0E1617; }
.site-footer .logo__text { font-size: 18px; letter-spacing: .12em; }
.footer-tel { font-family: var(--head); font-weight: 400; letter-spacing: .08em; }

/* スマホの下の固定ボタン */
@media (max-width: 819px) {
  .bottom-bar { background: var(--night); border-top-color: rgba(237, 230, 216, .14); }
  .bottom-bar a { color: var(--night-ink); font-weight: 500; }
  .bottom-bar a + a { border-left-color: rgba(237, 230, 216, .14); }
  .bottom-bar a:last-child { background: var(--accent); color: var(--on-accent); }
}
.to-top { background: var(--accent); color: var(--on-accent); }
.to-top:hover { background: #EBA75C; }
.day__more { text-align: center; margin: 56px 0 0; }