@charset "utf-8";
/* Earthing MIYAMA — PCビュー
   トークンは承認済みモック（knowledge/clients/earthing-miyama/mocks/）に合わせる。
   明朝＝しっとり・生成りの白＝明るめ・広い余白。暗い面は「火」の章だけ。
   ※スマホビューは次の工程で作る（山田 2026-09-21・台帳 dl-20260921-203248-1456）。 */

:root{
  --cream:#FAF8F4;
  --cream-tint:#F4F1EA;
  --ink:#2A2724;
  --sub:#6B635B;
  --red:#A8442A;
  --red-soft:#C4795F;
  --dark:#1A1512;
  --dark-sub:#D9D3CC;
  --rule:#D8D2C9;
  --rule-dark:#3A2F28;

  --mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;

  --wrap:1180px;
  --gutter:48px;
  --sec-y:140px;

  /* 写真の角丸（山田 2026-09-21「写真は角丸に」）。装飾の角丸カードは増やさず、写真にだけ効かせる */
  --r-photo:14px;
  --r-photo-sm:10px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:17px;
  line-height:2.0;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* 日本語の本文は行を右端まで埋める。文節で改行しない */
p,li,dd{text-align:justify; text-justify:inter-ideograph}

.skip{
  position:absolute; left:-9999px; top:0; background:var(--red); color:#fff;
  padding:12px 20px; z-index:200;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--red); outline-offset:3px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}
.wrap--after-scape{margin-top:72px}
.center{text-align:center}

/* ── ヘッダー ───────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:22px 0;
}
.site-header__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:40px;
}
.site-header__logo img{width:52px; height:auto}
.site-nav{
  display:flex; gap:30px; margin-left:auto;
  font-family:var(--mincho); font-size:17px; letter-spacing:.14em;
}
.site-nav a{text-decoration:none; color:#fff; opacity:.92; transition:opacity .2s}
.site-nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:6px}

.site-header.is-stuck{
  background:rgba(250,248,244,.96);
  box-shadow:0 1px 0 var(--rule);
  padding:14px 0;
  backdrop-filter:saturate(1.2) blur(6px);
}
.site-header.is-stuck .site-nav a{color:var(--ink)}
.site-header.is-stuck .site-header__logo img{filter:brightness(0) saturate(100%) invert(15%) sepia(6%) saturate(600%) hue-rotate(340deg)}

/* ── ボタン ─────────────────────────────────────────────────
   下から色が満ちる／線が伸びる。装飾のアイコンは足さない。 */
.btn{
  display:inline-block; position:relative; text-decoration:none;
  background-color:var(--red); color:#fff;
  background-image:linear-gradient(#8E3420,#8E3420);
  background-repeat:no-repeat; background-position:center bottom; background-size:100% 0;
  font-family:var(--gothic); letter-spacing:.2em; line-height:1;
  padding:22px 46px; font-size:16px;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, transform .2s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.btn::after{
  content:""; display:inline-block; vertical-align:middle;
  width:26px; height:1px; background:currentColor; margin:-2px 0 0 20px;
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.btn:hover{background-size:100% 100%; box-shadow:0 10px 30px rgba(42,39,36,.18)}
.btn:hover::after{width:44px}
.btn:active{transform:translateY(1px)}

.btn--header{padding:15px 28px; font-size:14px; letter-spacing:.16em}
.btn--header::after{width:18px; margin-left:14px}
.btn--header:hover::after{width:28px}
.btn--big{padding:28px 64px; font-size:18px}
.btn--big::after{width:34px; margin-left:26px}
.btn--big:hover::after{width:54px}

/* 写真の上に置くボタン。白い細枠で、hoverで白く満ちる */
.btn--ghost{
  background-color:transparent; color:#fff;
  background-image:linear-gradient(#fff,#fff);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
}
.btn--ghost:hover{color:var(--ink); box-shadow:inset 0 0 0 1px #fff, 0 10px 30px rgba(0,0,0,.25)}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::after{transition:none}
}

/* ── ファーストビュー ─────────────────────────────────────────
   背景は4枚のスライドショー。ゆっくり入れ替わりながら、わずかに寄っていく。 */
.hero{position:relative; min-height:100vh; display:grid; align-items:end; overflow:hidden}
.hero__slides{position:absolute; inset:0; z-index:0}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%;
  opacity:0; transition:opacity 1.8s ease;
}
.hero__img.is-on{opacity:1; animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{ from{transform:scale(1.0)} to{transform:scale(1.07)} }
@media (prefers-reduced-motion:reduce){
  .hero__img{transition:none}
  .hero__img.is-on{animation:none}
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.40) 0, rgba(0,0,0,0) 340px),
    linear-gradient(to top, rgba(0,0,0,.80) 0, rgba(0,0,0,.52) 34%, rgba(0,0,0,.10) 66%);
}
/* ロゴはヘッダーにあるので、ファーストビューでは重ねない */
.hero__body{position:relative; z-index:2; text-align:center; padding:0 var(--gutter) 120px}
.hero__title{
  font-family:var(--mincho); font-weight:400; color:#fff;
  font-size:clamp(40px,4.6vw,68px); line-height:1.5; letter-spacing:.14em;
  margin:0 0 20px;
}
.hero__sub{
  color:rgba(255,255,255,.94); font-size:18px; letter-spacing:.1em; margin:0 0 48px;
  text-align:center;
}
.hero__cta{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:0}

/* ── セクション共通 ─────────────────────────────────────────
   真っ白な面を続けない。明るい面にもごくうすい階調を入れる。 */
.sec{padding:var(--sec-y) 0; background:linear-gradient(180deg,#FBF9F6 0%,#F5F2EB 100%)}
.sec--tint{background:linear-gradient(180deg,#F3F0E8 0%,#EDE8DF 100%)}
.sec--dark{background:var(--dark); color:var(--dark-sub); position:relative; overflow:hidden}

/* 写真を背景に敷く章。白い文字を載せる */
.sec--photo{
  position:relative; overflow:hidden; color:#fff;
  padding:200px 0; background:var(--dark);
}
.sec--photo .sec__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; border-radius:0;
}
.sec--photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(20,16,14,.78) 0%, rgba(20,16,14,.46) 58%, rgba(20,16,14,.30) 100%),
    linear-gradient(180deg, rgba(20,16,14,.50) 0%, rgba(20,16,14,.28) 40%, rgba(20,16,14,.62) 100%);
}
.sec--photo > .wrap{position:relative; z-index:2}
.sec--photo .h2{color:#fff}
.sec--photo .mark{color:var(--red-soft)}
.sec--photo .lede{color:rgba(255,255,255,.92)}
.sec--photo .note{color:rgba(255,255,255,.72)}

/* 火の章にも、うっすら写真を敷く */
.sec--dark .sec__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.16; z-index:0;
}
.sec--dark > .wrap{position:relative; z-index:2}

.mark{
  font-family:var(--mincho); color:var(--red); font-size:20px; letter-spacing:.3em;
  margin:0 0 26px; text-align:left;
}
.mark--dark{color:var(--red-soft)}

.h2{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(30px,3.2vw,46px); line-height:1.55; letter-spacing:.1em;
  margin:0 0 48px;
}
.sec--dark .h2{color:var(--cream)}

.lede{font-size:18px; max-width:52em; margin:0 0 56px}
.sec--dark .lede{color:var(--dark-sub)}

.note{font-size:15px; color:var(--sub); margin:18px 0 0}
.sec--dark .note{color:#A49A91}

/* ── 2カラム ───────────────────────────────────────────────── */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start}
/* 写真は本文より少し広く取って主役にする */
.cols--text-media{grid-template-columns:1fr 1.15fr}
.cols--media-text{grid-template-columns:1.5fr 1fr; align-items:center}
.cols--media-text .cols__media{order:-1}
.cols--media-text .cols__media img{width:100%; aspect-ratio:3/2; object-fit:cover}
.cols__text > p:first-child{margin-top:0}
.cols__media figcaption,
figure figcaption{
  font-size:14px; color:var(--sub); margin-top:12px; letter-spacing:.06em; text-align:left;
}
.sec--dark figcaption{color:#A49A91}
figure{margin:0}

/* ── 事実の並び ─────────────────────────────────────────────── */
.facts{margin:52px 0 0}
.facts > div{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:baseline;
  padding:22px 0; border-top:1px solid var(--rule);
}
.facts > div:last-child{border-bottom:1px solid var(--rule)}
.facts dt{font-family:var(--mincho); font-size:26px; letter-spacing:.06em; white-space:nowrap}
.facts dd{margin:0; font-size:15px; color:var(--sub)}
.facts--access dt{font-family:var(--gothic); font-size:16px; color:var(--sub)}
.facts--access dd{font-size:21px; color:var(--ink); font-family:var(--gothic)}

/* ── 写真グリッド ───────────────────────────────────────────── */
.grid{display:grid; gap:32px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr); margin-top:32px}
.grid img{width:100%; aspect-ratio:3/2; object-fit:cover}
.grid--3 img{aspect-ratio:4/3}
.figure--wide img{width:100%; aspect-ratio:16/7; object-fit:cover}

/* 写真は角丸。ロゴとファビコンには効かせない */
.cols__media img,
.grid img,
.figure--wide img,
.gallery img,
.owner__photo img{border-radius:var(--r-photo)}
.grid--4 img,
.gallery--small img{border-radius:var(--r-photo-sm)}

/* 拡大できる写真。押せることが分かるように、わずかに反応させる */
.zoom{cursor:zoom-in; display:block; border:0; padding:0; background:none; width:100%}
.zoom img{transition:transform .35s ease, filter .35s ease}
.zoom:hover img{transform:scale(1.015); filter:brightness(1.03)}
@media (prefers-reduced-motion:reduce){ .zoom img{transition:none} .zoom:hover img{transform:none} }

/* ── 温度 ───────────────────────────────────────────────────── */
.temps{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:72px 0 0}
.temps > div{border-top:1px solid var(--rule-dark); padding-top:24px}
.temps dt{font-family:var(--mincho); font-size:46px; color:var(--cream); line-height:1.2}
.temps dd{margin:8px 0 0; font-size:15px; color:#A49A91}

.temps-inline{
  list-style:none; display:flex; gap:48px; padding:0; margin:40px 0 0;
  font-family:var(--mincho); font-size:44px; letter-spacing:.04em;
}
.temps-inline li{text-align:left}

/* ── 一日の流れ（写真つき） ─────────────────────────────────
   チェックインからチェックアウトまでを、左右交互の大きな写真で追う。 */
.day{list-style:none; padding:0; margin:0}
.day > li{
  display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,5vw,80px);
  align-items:center; padding:clamp(48px,5vw,72px) 0; border-top:1px solid var(--rule);
}
.day > li:first-child{border-top:0; padding-top:0}
.day > li:nth-child(even) .day__media{order:-1}
.day__media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-photo)}
.day__t{
  font-family:var(--mincho); font-size:clamp(34px,3.4vw,46px); color:var(--red);
  letter-spacing:.06em; line-height:1; margin:0 0 18px; display:block;
}
.day__h{
  font-family:var(--mincho); font-weight:400; font-size:clamp(22px,2.2vw,30px);
  letter-spacing:.06em; margin:0 0 16px;
}
.day__p{margin:0; font-size:16px; color:var(--sub)}
.day__tail{
  margin:56px 0 0; padding-top:32px; border-top:1px solid var(--rule);
  font-size:16px; color:var(--sub);
}

/* ── 一日の流れ（旧・一覧型。ほかで使う場合に残す） ───────────── */
.timeline{list-style:none; padding:0; margin:0}
.timeline li{
  display:grid; grid-template-columns:96px 1fr; gap:28px; align-items:baseline;
  padding:20px 0; border-top:1px solid var(--rule);
}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.timeline__t{color:var(--red); font-size:15px; letter-spacing:.08em}
.timeline__d{font-size:18px}

/* ── 水の章の温度（写真の上） ───────────────────────────────── */
.temps-hero{display:flex; gap:clamp(32px,5vw,72px); margin:56px 0 0; list-style:none; padding:0; flex-wrap:wrap}
.temps-hero li{
  font-family:var(--mincho); font-size:clamp(38px,4.4vw,64px); color:#fff;
  letter-spacing:.04em; line-height:1.2; text-align:left;
}
.temps-hero li small{
  display:block; font-family:var(--gothic); font-size:14px; letter-spacing:.14em;
  color:rgba(255,255,255,.7); margin-top:10px;
}

/* ── 料金 ─────────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.plan{
  position:relative; padding:48px 44px; background:rgba(255,255,255,.72);
  border:1px solid var(--rule); border-radius:var(--r-photo);
}
.plan--pick{background:#fff; box-shadow:0 18px 48px rgba(42,39,36,.10)}
.plan--wide{grid-column:1 / -1}
.plan__tag{
  display:inline-block; font-size:12px; letter-spacing:.2em; color:#fff; background:var(--red);
  padding:7px 14px; border-radius:99px; margin:0 0 18px;
}
.plan h3{font-family:var(--mincho); font-weight:400; font-size:32px; letter-spacing:.08em; margin:0 0 18px}
.plan__time{font-size:16px; color:var(--sub); margin:0 0 14px}
.plan__price{font-family:var(--mincho); font-size:34px; margin:0 0 6px; letter-spacing:.04em; line-height:1.4}
.plan__price small{font-family:var(--gothic); font-size:15px; color:var(--sub); letter-spacing:.1em; margin-right:10px}
.plan__price span{color:var(--rule); margin:0 10px; font-size:22px}
.plan__note{font-size:15px; color:var(--sub); margin:18px 0 0; padding-top:18px; border-top:1px solid var(--rule)}
.notes{list-style:none; padding:0; margin:56px 0 0; border-top:1px solid var(--rule)}
.notes li{font-size:15px; color:var(--sub); padding:16px 0; border-bottom:1px solid var(--rule)}
.center .btn--big{margin-top:64px}

/* ── 支度（設備の情報図） ───────────────────────────────────
   建物ごとに「何が・いくつ」あるかを数字で示す情報図。
   見出しを言い換えるだけの装飾アイコンは置かない（.claude/rules/hp-icon-quality.md）。 */
.amenity{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 56px}
.amenity__place{padding:0 40px; border-left:1px solid var(--rule)}
.amenity__place:first-child{padding-left:0; border-left:0}
.amenity__place h3{
  font-family:var(--mincho); font-weight:400; font-size:26px; letter-spacing:.08em; margin:0 0 6px;
}
.amenity__where{font-size:14px; color:var(--sub); margin:0 0 24px}
.amenity__items{list-style:none; padding:0; margin:0}
.amenity__items li{
  display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--rule);
}
.amenity__items li:last-child{border-bottom:1px solid var(--rule)}
.amenity__items .n{
  font-family:var(--mincho); font-size:26px; line-height:1.1; color:var(--ink); text-align:right;
}
.amenity__items .n small{font-size:13px; font-family:var(--gothic); color:var(--sub); margin-left:3px}
.amenity__items .t{font-size:15px; color:var(--sub); text-align:left}
.amenity__free{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:28px 0; margin:0 0 40px;
}
.amenity__free h3{font-family:var(--gothic); font-weight:400; font-size:15px; color:var(--red); letter-spacing:.14em; margin:0 0 16px}
.amenity__free p{margin:0; font-size:16px; color:var(--sub)}
.bring{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.bring h3{font-family:var(--gothic); font-weight:400; font-size:15px; color:var(--red); letter-spacing:.14em; margin:0 0 16px}
.bring p{margin:0; font-size:17px}
.bring .big{font-family:var(--mincho); font-size:26px; letter-spacing:.06em; margin-bottom:8px}

/* ── 予約の流れ ─────────────────────────────────────────────── */
.flow{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.flow li{padding:0 40px; border-left:1px solid var(--rule)}
.flow li:first-child{padding-left:0; border-left:0}
.flow__n{font-family:var(--mincho); font-size:34px; color:var(--red); display:block; margin-bottom:16px}
.flow h3{font-family:var(--mincho); font-weight:400; font-size:24px; letter-spacing:.06em; margin:0 0 14px}
.flow p{font-size:15px; color:var(--sub); margin:0}

/* ── 人 ─────────────────────────────────────────────────────── */
.words{margin:0 0 56px; padding:0; border:0}
.words p{
  font-family:var(--mincho); font-size:26px; line-height:2.0; letter-spacing:.08em;
  margin:0 0 40px; text-align:left;
}
.owner{display:grid; grid-template-columns:400px 1fr; gap:64px; align-items:start; margin-top:64px; padding-top:56px; border-top:1px solid var(--rule)}
.owner__photo img{width:100%; aspect-ratio:4/5; object-fit:cover}
.owner__photo figcaption{font-size:14px; color:var(--sub); margin-top:12px}
.owner__name{font-family:var(--mincho); font-size:30px; letter-spacing:.1em; margin:0 0 4px}
.owner__kana{font-size:14px; color:var(--sub); letter-spacing:.14em; margin:0 0 28px}
.owner__body p{margin:0 0 20px; font-size:17px}
.owner__body p:last-child{margin-bottom:0}

/* ── ギャラリー ─────────────────────────────────────────────
   行の高さを固定して、写真の縦横比が違っても列がそろうようにする。
   説明は拡大表示のほうに出すので、ここには置かない。 */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px; grid-auto-flow:dense; gap:16px;
}
.gallery figure{margin:0; height:100%}
.gallery .zoom{height:100%}
.gallery img{width:100%; height:100%; object-fit:cover; aspect-ratio:auto}
.gallery .span2{grid-column:span 2}
.gallery .big{grid-column:span 2; grid-row:span 2}

/* 拡大表示 */
.lb{
  position:fixed; inset:0; z-index:300; background:rgba(20,17,15,.94);
  display:none; align-items:center; justify-content:center; padding:56px;
}
.lb[open],.lb.is-open{display:flex}
.lb__img{max-width:min(1400px,94vw); max-height:80vh; object-fit:contain; border-radius:var(--r-photo-sm)}
.lb__cap{
  position:absolute; left:0; right:0; bottom:26px; text-align:center;
  color:var(--dark-sub); font-size:15px; padding:0 80px;
}
.lb__btn{
  position:absolute; background:none; border:0; color:#fff; cursor:pointer;
  width:56px; height:56px; font-size:0; opacity:.8;
}
.lb__btn:hover{opacity:1}
.lb__btn::before{
  content:""; display:block; width:16px; height:16px; margin:auto;
  border-right:1.5px solid #fff; border-bottom:1.5px solid #fff;
}
.lb__close{top:22px; right:22px}
.lb__close::before{width:22px; height:22px; border:0; background:
  linear-gradient(#fff,#fff) center/100% 1.5px no-repeat,
  linear-gradient(#fff,#fff) center/1.5px 100% no-repeat; transform:rotate(45deg)}
.lb__prev{left:14px; top:50%; transform:translateY(-50%)}
.lb__prev::before{transform:rotate(135deg)}
.lb__next{right:14px; top:50%; transform:translateY(-50%)}
.lb__next::before{transform:rotate(-45deg)}

/* ── 景観 ───────────────────────────────────────────────────── */
.scape{position:relative; margin:0; padding:0}
.scape img{width:100%; aspect-ratio:2.46/1; object-fit:cover; display:block; border-radius:0}
.scape figcaption{
  max-width:var(--wrap); margin:16px auto 0; padding-inline:var(--gutter);
  font-size:14px; color:var(--sub); text-align:left;
}

/* ── BBQ・焚き火（写真の上の章） ───────────────────────────── */
.bbq{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:64px 0 0}
.bbq > div{padding:0 36px; border-left:1px solid rgba(255,255,255,.22)}
.bbq > div:first-child{padding-left:0; border-left:0}
.bbq h3{
  font-family:var(--mincho); font-weight:400; font-size:24px; letter-spacing:.06em;
  color:#fff; margin:0 0 14px;
}
.bbq p{margin:0; font-size:15px; color:rgba(255,255,255,.82)}

/* 焚き火の章に置く、庭の卓の写真 */
.bbq__shot{margin:56px 0 0}
.bbq__shot img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-photo)}
.bbq__shot figcaption{color:rgba(255,255,255,.72); font-size:14px; margin-top:12px; text-align:left}

/* ── 食材 ───────────────────────────────────────────────────── */
.food-list{margin:40px 0 0}
.food-list > div{padding:24px 0; border-top:1px solid var(--rule)}
.food-list > div:last-child{border-bottom:1px solid var(--rule)}
.food-list dt{font-family:var(--mincho); font-size:23px; letter-spacing:.06em; margin:0 0 8px}
.food-list dd{margin:0; font-size:15px; color:var(--sub)}
.food-list__where{display:block; color:var(--red); font-size:13px; letter-spacing:.1em; margin:0 0 8px}

/* ── 周辺 ───────────────────────────────────────────────────── */
.around__head{
  font-family:var(--gothic); font-weight:400; font-size:15px; color:var(--red);
  letter-spacing:.14em; margin:56px 0 4px;
}
.around__head:first-of-type{margin-top:0}
.around{list-style:none; padding:0; margin:0}
.around li{
  display:grid; grid-template-columns:1fr 200px; gap:32px; align-items:baseline;
  padding:26px 0; border-top:1px solid var(--rule);
}
.around li:last-child{border-bottom:1px solid var(--rule)}
.around h4{font-family:var(--mincho); font-weight:400; font-size:24px; letter-spacing:.06em; margin:0 0 8px}
.around p{margin:0; font-size:15px; color:var(--sub)}
.around .dist{font-size:18px; letter-spacing:.04em; text-align:right; white-space:nowrap}
.around .dist small{display:block; font-size:13px; color:var(--sub); margin-top:4px}

/* ── 行き方 ─────────────────────────────────────────────────── */
.address{font-family:var(--mincho); font-size:24px; letter-spacing:.06em; margin:40px 0 0}
.map{aspect-ratio:4/3; background:var(--cream-tint)}
.map iframe{width:100%; height:100%; border:0; display:block}

/* ── よくあるご質問 ─────────────────────────────────────────── */
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer; list-style:none; padding:26px 44px 26px 0; position:relative;
  font-size:18px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:1px solid var(--sub); border-bottom:1px solid var(--sub);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 30px; color:var(--sub); font-size:16px}

/* ── 締め ───────────────────────────────────────────────────── */
.closing{padding:var(--sec-y) 0 160px; text-align:center}
.closing .h2{margin-bottom:28px}
.closing .lede{margin:0 auto 56px; text-align:center}
.contact{margin:72px 0 0; font-size:16px; color:var(--sub); text-align:center; line-height:2.2}
.contact a{color:var(--ink)}

/* ── フッター ───────────────────────────────────────────────── */
.site-footer{background:var(--dark); color:var(--dark-sub); padding:72px 0 140px; font-size:15px}
.site-footer__in{display:flex; gap:44px; align-items:flex-start}
.site-footer__logo{width:64px}
.site-footer p{margin:0 0 8px; text-align:left}
.site-footer__name{font-family:var(--mincho); font-size:19px; color:var(--cream); letter-spacing:.08em; margin-bottom:16px}
.site-footer a{color:var(--dark-sub)}
.site-footer__copy{margin-top:24px; color:#7E736A; font-size:13px}

/* ── 予約動線（下に貼りつくバー） ───────────────────────────── */
.bookbar{
  position:fixed; inset:auto 0 0 0; z-index:90;
  background:rgba(255,255,255,.97); border-top:1px solid var(--rule);
  transform:translateY(100%); transition:transform .4s ease;
  backdrop-filter:saturate(1.2) blur(6px);
}
.bookbar.is-on{transform:translateY(0)}
.bookbar__in{
  max-width:var(--wrap); margin-inline:auto; padding:16px var(--gutter);
  display:flex; align-items:center; gap:32px;
}
.bookbar__txt{margin:0; line-height:1.5; text-align:left}
.bookbar__txt span{display:block; font-size:13px; color:var(--sub); letter-spacing:.1em}
.bookbar__txt strong{font-weight:400; font-size:18px; letter-spacing:.04em}
.bookbar .btn{margin-left:auto; padding:16px 44px; font-size:16px}
@media (prefers-reduced-motion:reduce){ .bookbar{transition:none} }

/* ── 中くらいの画面 ─────────────────────────────────────────
   スマホ専用ビューは次の工程。ここでは横スクロールと重なりだけ防ぐ。 */
@media (max-width:1100px){
  :root{--gutter:32px; --sec-y:100px}
  .site-nav{display:none}
  .cols{grid-template-columns:1fr; gap:48px}
  .cols--media-text .cols__media{order:0}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .plans,.bring{grid-template-columns:1fr}
  .bbq{grid-template-columns:1fr}
  .day > li{grid-template-columns:1fr; gap:28px}
  .day > li:nth-child(even) .day__media{order:0}
  .bbq > div{padding:28px 0; border-left:0; border-top:1px solid rgba(255,255,255,.22)}
  .bbq > div:first-child{padding-top:0; border-top:0}
  .sec--photo{padding:120px 0}
  .amenity{grid-template-columns:1fr}
  .amenity__place{padding:32px 0; border-left:0; border-top:1px solid var(--rule)}
  .amenity__place:first-child{padding-top:0; border-top:0}
  .owner{grid-template-columns:1fr; gap:36px}
  .owner__photo{max-width:420px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .around li{grid-template-columns:1fr; gap:10px}
  .around .dist{text-align:left}
  .around .dist small{display:inline; margin-left:10px}
  .plan{padding:40px 0; border-left:0; border-top:1px solid var(--rule)}
  .plan:first-child{padding-top:0; border-top:0}
  .flow{grid-template-columns:1fr}
  .flow li{padding:32px 0; border-left:0; border-top:1px solid var(--rule)}
  .flow li:first-child{padding-top:0; border-top:0}
}
@media (max-width:700px){
  :root{--gutter:20px}
  body{font-size:16px}
  .grid--3,.grid--2,.grid--4{grid-template-columns:1fr}
  .temps{grid-template-columns:1fr}
  .temps-inline{gap:28px; font-size:34px}
  .gallery{grid-template-columns:repeat(2,1fr); gap:12px}
  .gallery .span2{grid-column:span 2}
  .lb{padding:20px}
  .scape img{aspect-ratio:16/11}
  .bookbar__in{padding:12px 20px; gap:16px}
  .bookbar__txt strong{font-size:15px}
  .bookbar .btn{padding:14px 22px; font-size:14px}
  .site-footer__in{flex-direction:column; gap:24px}
}