/* にかいや（架空の1棟貸し・町なか版）
   色：紺がかった墨（メイン）／生成り（地）／淡い空色（線・面）／朱（予約ボタンと小さな点だけ）
   書体：見出し＝しっぽり明朝・英語＝Cormorant Garamond・本文＝しっぽり明朝・サンプル帯＝ゴシック
   文字を白い箱・カードに入れない＝区切りは罫線と余白だけ。 */
:root{
  --ink:#1f3a50;
  --ink-deep:#16293a;
  --ink-soft:#4f6272;
  --kinari:#f7f3ea;
  --kinari-2:#efe9dc;
  --sora:#d6e8f1;
  --shu:#d0492a;
  --rule:rgba(31,58,80,.2);
  --line:#06C755;
  --header-h:64px;
  --mincho:"Shippori Mincho",serif;
  --serif-en:"Cormorant Garamond",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
body{font-family:var(--mincho);font-weight:500;color:var(--ink);background:var(--kinari);overflow-x:hidden;line-height:1.85;font-size:16px}
/* html には overflow を付けない（ヘッダーの追従が効かなくなる） */
html{scroll-padding-top:calc(var(--header-h) + 12px)}
a{color:inherit}
.nw{white-space:nowrap}
.en{font-family:var(--serif-en);font-weight:700;letter-spacing:.02em}

/* ---------- サンプル明示バー（sample-banner-unify 共通形・追従させない・ゴシック） ---------- */
.sample-banner{background:var(--ink);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);text-align:center;padding:8px 16px;font-size:.88rem;font-weight:800;letter-spacing:.04em;font-family:"Hiragino Sans","Noto Sans JP",sans-serif}

/* ---------- ヘッダー（PCは sticky・スマホは fixed＝下の @media） ---------- */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,4vw,48px);background:var(--kinari);border-bottom:3px solid var(--sora)}
.logo{font-family:var(--mincho);font-weight:800;color:var(--ink);font-size:1.35rem;letter-spacing:.12em;text-decoration:none;display:flex;align-items:center;gap:.7em;white-space:nowrap;min-height:44px}
.logo small{font-family:var(--serif-en);font-weight:700;font-size:.74rem;letter-spacing:.1em;opacity:.75}
.gnav{display:flex;gap:clamp(14px,1.8vw,26px);font-family:var(--mincho);font-size:.9rem;font-weight:700;letter-spacing:.05em}
.gnav a{text-decoration:none;color:var(--ink);padding:12px 0;border-bottom:2px solid transparent;white-space:nowrap;min-width:44px;text-align:center}
.gnav a:hover{border-bottom-color:var(--shu)}
.menu-toggle{display:none;background:none;border:0;width:44px;height:44px;padding:11px 9px;cursor:pointer;position:relative;z-index:61}
.menu-toggle span{display:block;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- ヒーロー（外観→居間→台所をゆっくり切替・高さはJSで開いた時の値に固定） ---------- */
.hero{position:relative;height:calc(100svh - 100px);min-height:420px;overflow:hidden;background:#bcd6e6;font-family:var(--mincho)}
.slides,.slide{position:absolute;inset:0}
.slide{opacity:0;animation:heroCycle 24s infinite}
.slide img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:kb 24s infinite}
.slide:nth-child(1){opacity:1}
.slide:nth-child(2),.slide:nth-child(2) img{animation-delay:8s}
.slide:nth-child(3),.slide:nth-child(3) img{animation-delay:16s}
/* 3枚×8秒＝24秒。0-4%で入り、33%まで表示、37%で消える（次の1枚と重ねて切り替え） */
@keyframes heroCycle{0%{opacity:0}4%{opacity:1}33%{opacity:1}37%{opacity:0}100%{opacity:0}}
@keyframes kb{0%{transform:scale(1)}37%{transform:scale(1.05)}100%{transform:scale(1.05)}}
/* 下端だけ：白文字を置くための、境目のないグラデーション（写真そのものは暗くしない） */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;pointer-events:none;z-index:1;
  background:linear-gradient(0deg,rgba(18,32,44,.42) 0%,rgba(18,32,44,.18) 45%,rgba(18,32,44,0) 100%)}
/* 上：空・白い壁の上に濃い色で直接置く＝暗幕なし。白いにじみで写真の細部から浮かせる */
.hero-top{position:absolute;z-index:2;left:clamp(20px,4vw,64px);top:clamp(18px,4vh,44px);color:var(--ink);
  text-shadow:0 1px 16px rgba(255,255,255,.8),0 0 3px rgba(255,255,255,.7)}
.kicker{font-size:.95rem;font-weight:700;letter-spacing:.14em;display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--shu)}
.kicker .en{font-size:1.02rem;letter-spacing:.04em}
.hero h1{font-weight:800;font-size:min(42px,3.1vw,5.6vh);line-height:1.4;letter-spacing:.05em;margin:.35em 0 .25em}
/* 写真の上の英語：細い書体でも読めるよう、太さ700・大きめ・白いにじみを二重に */
.catch-en{font-family:var(--serif-en);font-weight:700;font-size:min(22px,1.65vw);letter-spacing:.03em;
  text-shadow:0 0 2px rgba(255,255,255,.95),0 1px 14px rgba(255,255,255,.9)}
.hero-foot{position:absolute;z-index:2;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);bottom:clamp(18px,3.4vh,36px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;color:#fff;text-shadow:0 1px 10px rgba(10,20,30,.6),0 0 2px rgba(10,20,30,.5)}
.spec-line{font-size:1.02rem;font-weight:700;letter-spacing:.08em;line-height:1.6}
/* スペック行の英語：600→700・0.8rem→0.95rem・影を濃く（写真の明るい床の上でも読める） */
.spec-line .en{display:block;font-size:.95rem;font-weight:700;letter-spacing:.03em;margin-top:.15em;
  text-shadow:0 1px 3px rgba(10,20,30,.75),0 0 12px rgba(10,20,30,.55)}
.hero .cta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.hero .btns{justify-content:flex-end}
.demo-note{font-size:.8rem;letter-spacing:.03em;margin-top:.6em}
.hero .demo-note{margin-top:0;font-weight:700;text-shadow:0 1px 3px rgba(10,20,30,.8),0 0 12px rgba(10,20,30,.6)}

/* ---------- ボタン（泊まる人向け＝丸いピル型） ---------- */
.btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;padding:0 1.6em;border-radius:999px;font-family:var(--mincho);font-weight:700;font-size:1rem;letter-spacing:.05em;line-height:1.25;text-decoration:none;text-shadow:none;transition:background .2s;border:0;cursor:pointer}
.btn small{font-family:var(--serif-en);font-size:.84rem;font-weight:700;letter-spacing:.04em}
.btn-main{background:var(--shu);color:#fff}
.btn-main:hover{background:#b73c20}
.btn-line{background:var(--line);color:#fff}
.btn-line:hover{background:#05B34C}

/* ---------- セクション共通（罫線と余白で区切る） ---------- */
.sec{padding:clamp(64px,9vw,112px) clamp(20px,5vw,72px)}
.sec + .sec{border-top:1px solid var(--rule)}
.sec.tone{background:var(--kinari-2)}
.inner{max-width:1080px;margin:0 auto}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-family:var(--mincho);font-weight:800;color:var(--ink);font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.08em;line-height:1.45;display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .8em;padding-bottom:.35em;border-bottom:3px solid var(--sora)}
.h-en{font-family:var(--serif-en);font-weight:700;font-size:.62em;letter-spacing:.06em;color:var(--ink-soft)}
.sec-head p{margin-top:1em;color:var(--ink-soft);max-width:44em}
.note{font-size:.84rem;color:var(--ink-soft);line-height:1.8}
.en-note,.en-para{font-family:var(--serif-en);font-weight:600;font-size:1.02rem;line-height:1.55;color:var(--ink-soft)}
.en-para{margin-top:.3em}
.sub-h{font-family:var(--mincho);font-weight:800;color:var(--ink);font-size:1.3rem;letter-spacing:.06em;margin:clamp(56px,7vw,80px) 0 18px}

/* ---------- この家の基本（スペック：アイコン＋数字） ---------- */
.intro-text{font-family:var(--mincho);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:2.1;letter-spacing:.05em;max-width:38em;margin-bottom:clamp(36px,5vw,56px)}
.spec{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.spec li{display:flex;gap:14px;align-items:center;padding:20px 12px 20px 0;border-bottom:1px solid var(--rule)}
.spec svg{flex:none;width:34px;height:34px;color:var(--ink)}
.spec small{display:block;font-size:.78rem;color:var(--ink-soft);letter-spacing:.06em;line-height:1.4}
.spec b{display:block;font-family:var(--mincho);font-weight:700;font-size:1.08rem;letter-spacing:.03em;line-height:1.5}
.spec .en{display:block;font-size:.95rem;color:var(--ink-soft);line-height:1.3}

/* ---------- 料金と予約 ---------- */
.price{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.price-main{border-top:2px solid var(--ink);padding-top:22px}
.price-main > small{display:block;font-weight:700;letter-spacing:.08em;color:var(--ink-soft)}
.price-main > small .en{display:block;font-size:1rem;letter-spacing:.02em}
.price-main .yen{font-family:var(--mincho);font-weight:800;font-size:clamp(2.4rem,5vw,3.4rem);color:var(--ink);letter-spacing:.02em;line-height:1.3}
.price-main .yen span{font-size:.45em;margin-left:.15em}
.price-list{list-style:none;margin:18px 0 14px;border-top:1px solid var(--rule)}
.price-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.price-list li b{font-family:var(--mincho);font-weight:700;text-align:right}
.price-list .en{display:block;font-size:.95rem;color:var(--ink-soft);font-weight:600;line-height:1.3}
.price-side p + p{margin-top:.9em}
.price-side .en-para{margin-top:.3em}
.price-side .btns{margin-top:26px}
.price-side .demo-note{color:var(--ink-soft)}

/* ---------- この家のこと ---------- */
.plan{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(56px,7vw,88px)}
.plan-svgs{display:grid;grid-template-columns:324fr 300fr;gap:16px;align-items:start}
.plan-fig svg{width:100%;height:auto;display:block}
.plan-fig figcaption{font-size:.78rem;color:var(--ink-soft);margin-top:.4em}
.plan-list{list-style:none;border-top:1px solid var(--rule)}
.plan-list li{display:grid;grid-template-columns:4em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.plan-list b{font-family:var(--mincho);font-weight:700}
.feature{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:clamp(48px,7vw,80px)}
.feature img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.feature h3{font-family:var(--mincho);font-weight:800;font-size:clamp(1.3rem,2.2vw,1.6rem);color:var(--ink);letter-spacing:.06em;margin-bottom:.6em}
.feature p + p{margin-top:.8em}
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,4vw,48px) clamp(20px,3vw,36px)}
.room img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.room.tall img{aspect-ratio:3/2;object-position:50% 45%}
.room h3{font-family:var(--mincho);font-weight:700;font-size:1.12rem;color:var(--ink);letter-spacing:.06em;margin:.8em 0 .3em;padding-bottom:.35em;border-bottom:1px solid var(--rule)}
.room p{font-size:.93rem;color:var(--ink-soft);line-height:1.8}
.parking{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.parking svg{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.parking p + p{margin-top:.8em}
.parking .warn{font-weight:700;color:var(--ink);border-left:3px solid var(--shu);padding-left:.8em}
.parking-photo{margin-top:22px}
.parking-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.parking-photo figcaption,.winter figcaption,.host figcaption{font-size:.8rem;color:var(--ink-soft);margin-top:.4em}
.equip{margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--rule);padding-top:20px;display:grid;grid-template-columns:10em 1fr;gap:12px 24px}
.equip dt{font-family:var(--mincho);font-weight:700;color:var(--ink)}
.equip dd{color:var(--ink-soft);font-size:.95rem}

/* ---------- ホストと滞在中の連絡 ---------- */
.host{display:grid;grid-template-columns:minmax(240px,.8fr) 1.4fr;gap:clamp(28px,5vw,72px);align-items:start}
.host img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.host-name{font-family:var(--mincho);font-weight:800;font-size:1.3rem;color:var(--ink);letter-spacing:.08em;margin-bottom:.8em}
.host-name small{font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-left:.6em;letter-spacing:.1em}
.host-text p + p{margin-top:.9em}
.support{list-style:none;margin-top:32px;border-top:1px solid var(--rule)}
.support li{display:grid;grid-template-columns:9.5em 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.support b{font-family:var(--mincho);font-weight:700;color:var(--ink)}

/* ---------- チェックイン ---------- */
.steps{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.steps li{counter-increment:st;padding:22px 22px 24px 0;border-bottom:1px solid var(--rule)}
.steps li + li{padding-left:22px;border-left:1px solid var(--rule)}
.steps li::before{content:counter(st);display:block;font-family:var(--serif-en);font-weight:700;font-size:2.2rem;color:var(--ink);line-height:1.1;margin-bottom:.3em}
.steps b{display:block;font-family:var(--mincho);font-weight:700;color:var(--ink);font-size:1.08rem;margin-bottom:.35em}
.steps p{font-size:.92rem;color:var(--ink-soft)}
.steps p.en{font-size:1rem;font-weight:600;line-height:1.5;margin-top:.5em}
.checkout{margin-top:36px;display:grid;grid-template-columns:9.5em 1fr;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:16px}
.checkout b{font-family:var(--mincho);font-weight:700;color:var(--ink)}
.checkout b .en,.checkout div .en{display:block;font-size:1rem;font-weight:600;color:var(--ink-soft)}
.checkout div > span:first-child{display:block}

/* ---------- ハウスルール・この家にないもの ---------- */
.neighbors{margin-bottom:clamp(28px,4vw,40px);max-width:44em}
.neighbors h3{font-family:var(--mincho);font-weight:800;font-size:1.2rem;letter-spacing:.06em;margin-bottom:.4em}
.neighbors p{color:var(--ink-soft)}
.rules{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px);border-top:1px solid var(--rule)}
.rules li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--rule)}
.rules svg{flex:none;width:32px;height:32px;color:var(--ink);margin-top:2px}
.rules b{display:block;font-family:var(--mincho);font-weight:700;color:var(--ink)}
.rules span{display:block;font-size:.92rem;color:var(--ink-soft)}
.rules span.en{font-size:1rem;font-weight:600;line-height:1.45;margin-top:.2em}
.nothing{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0;color:var(--ink-soft)}

/* ---------- よくある質問・キャンセル ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-weight:700;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"問";font-family:var(--mincho);color:var(--ink-soft);margin-right:.7em}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:.2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 20px 1.9em;color:var(--ink-soft);font-size:.95rem}
.cancel{border-top:1px solid var(--rule);padding-top:18px}

/* ---------- 周辺 ---------- */
.area{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,32px)}
.area img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.area h3{font-family:var(--mincho);font-weight:700;color:var(--ink);font-size:1.05rem;margin:.7em 0 .1em}
.area .min{font-size:.88rem;font-weight:700;color:var(--ink-soft);letter-spacing:.04em}
.dist{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.dist h3{font-family:var(--mincho);font-weight:800;font-size:1.15rem;letter-spacing:.06em;margin-bottom:.6em}
.dist-list{list-style:none;border-top:1px solid var(--rule)}
.dist-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.dist-list b{font-family:var(--mincho);font-weight:700;white-space:nowrap}

/* ---------- アクセス・近隣の方へ ---------- */
.access{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
.access .addr{font-family:var(--mincho);font-weight:700;color:var(--ink);font-size:1.15rem;margin-bottom:.4em}
.winter img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.neighbor-contact{margin-top:clamp(48px,6vw,72px);padding-top:16px;border-top:1px solid var(--rule);font-size:.84rem;color:var(--ink-soft);max-width:48em}
.neighbor-contact b{display:block;color:var(--ink);font-size:.9rem;margin-bottom:.2em}

/* ---------- 民泊オーナーの方へ（鈴木Web製作所の帯）
   泊まる人向け（丸いピル型・朱と緑の塗り）と分けるため、四角い白地＋LINE色の枠と文字にする ---------- */
.owner{background:var(--ink-deep);color:#f1ede3;padding:clamp(56px,8vw,88px) clamp(20px,5vw,72px)}
.owner .inner{max-width:880px}
.owner h2{font-family:var(--mincho);font-weight:800;font-size:clamp(1.4rem,2.6vw,1.8rem);letter-spacing:.08em;margin-bottom:.8em}
.owner p{color:#e2e6e9;font-size:.97rem}
.owner p + p{margin-top:.6em}
.owner .btns{margin-top:28px}
.btn-owner{display:inline-flex;align-items:center;gap:.6em;min-height:54px;padding:0 1.4em;border-radius:4px;background:#fff;color:var(--line);border:2px solid var(--line);font-weight:700;font-size:1rem;letter-spacing:.04em;text-decoration:none;font-family:"Zen Kaku Gothic New",sans-serif}
.btn-owner:hover{background:#f0fbf4}
.btn-owner svg{flex:none}

/* ---------- フッター ---------- */
.site-footer{background:var(--kinari);padding:48px clamp(20px,5vw,72px) 40px;border-top:1px solid var(--rule)}
.site-footer .inner{display:grid;grid-template-columns:1fr 1.4fr;gap:32px}
.site-footer .foot-name{font-family:var(--mincho);font-weight:800;color:var(--ink);font-size:1.2rem;letter-spacing:.1em}
.site-footer .foot-name small{display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);letter-spacing:.06em}
.site-footer p{font-size:.82rem;color:var(--ink-soft)}
.site-footer p + p{margin-top:.6em}
.copy{margin-top:28px;font-size:.75rem;color:var(--ink-soft);text-align:center}

/* ---------- スマホ下部の固定バー・案内トースト ---------- */
.sp-bar{display:none}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink-deep);color:#fff;padding:12px 20px;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:.3s;z-index:300;max-width:calc(100% - 32px);text-align:center}
.toast.is-show{opacity:1;transform:translate(-50%,0)}

/* グリッドの中身が画像の元の幅で横に広がらないように */
.rooms>*,.area>*,.feature>*,.host>*,.price>*,.access>*,.plan>*,.parking>*,.dist>*,.spec>li,.rules>li{min-width:0}

/* ---------- 中間幅 ---------- */
@media (max-width:1100px){
  .gnav{gap:14px;font-size:.84rem}
  .btn{padding:0 1.1em;font-size:.94rem}
  .spec-line{font-size:.94rem}
  .spec{grid-template-columns:repeat(2,1fr)}
  .area{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .gnav{display:none}
  .menu-toggle{display:block}
  .gnav.is-open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--kinari);border-bottom:1px solid var(--rule);padding:6px 20px 16px;box-shadow:0 10px 20px rgba(0,0,0,.08);max-height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;font-size:1rem}
  .gnav.is-open a{padding:13px 0;border-bottom:1px solid var(--rule);text-align:left}
  .rooms{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li:nth-child(3){padding-left:0;border-left:0}
  .plan{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero::after{height:46%}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .hero .cta{align-items:flex-start}
  .hero .btns{justify-content:flex-start}
  .catch-en{font-size:1.1rem}
}
/* ---------- スマホ ---------- */
@media (max-width:760px){
  :root{--header-h:56px}
  /* スマホはヘッダーを画面に固定（メニューを途中で開いても消えないように）。
     バナーの下から始め、スクロールで上端に付く（top は script.js が調整） */
  .site-header{position:fixed;left:0;right:0;top:0}
  .header-space{height:var(--header-h)}
  .logo{font-size:1.2rem}
  .hero{height:calc(100svh - 170px)}
  .slide.s1 img{object-position:50% 100%}
  .slide.s2 img,.slide.s3 img{object-position:50% 60%}
  .hero::after{height:30%}
  .hero-top{left:20px;right:20px;top:22px}
  .kicker{font-size:.84rem;letter-spacing:.1em}
  .kicker .en{font-size:.95rem}
  .hero h1{font-size:1.72rem;line-height:1.42;margin:.3em 0 .2em}
  .catch-en{font-size:1.05rem}
  .hero-foot{left:20px;right:20px;bottom:16px}
  .spec-line{font-size:.88rem;letter-spacing:.04em}
  .spec-line .en{font-size:.9rem;line-height:1.35}
  .hero .cta{display:none}
  .sec{padding:56px 20px}
  .spec li{gap:10px;padding:16px 8px 16px 0;align-items:flex-start}
  .spec svg{width:24px;height:24px;margin-top:4px}
  .spec b{font-size:.92rem;letter-spacing:0}
  .spec small{font-size:.72rem}
  .spec .en{font-size:.88rem}
  .feature,.host,.price,.access,.parking,.dist{grid-template-columns:1fr}
  .rooms{grid-template-columns:1fr;gap:36px}
  .room.tall img{aspect-ratio:3/2}
  .equip,.support li,.checkout,.plan-list li{grid-template-columns:1fr;gap:4px}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li + li{padding:18px 0;border-left:0}
  .rules{grid-template-columns:1fr}
  .area{grid-template-columns:1fr 1fr;gap:24px 14px}
  .plan-svgs{grid-template-columns:1fr;gap:20px}
  .price-list li{flex-direction:column;gap:2px}
  .price-list li b{text-align:left}
  .site-footer .inner{grid-template-columns:1fr}
  .sp-bar{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:200;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--kinari);border-top:3px solid var(--sora)}
  .sp-bar .btn{min-height:52px;padding:0 .5em;font-size:.9rem}
  .sp-bar .btn small{font-size:.8rem}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (min-width:761px){ .header-space{display:none} }
@media (max-width:420px){.sample-banner{letter-spacing:0;padding:8px 12px}}
@media (prefers-reduced-motion:reduce){
  .slide,.slide img{animation:none!important}
  .slide:not(:first-child){display:none}
}
/* 宿のInstagram（公式グラデーション・押しても移動しないサンプル）／口コミは予約サイトへ（作り物の口コミは載せない） */
.btn-ig{flex-direction:row;gap:.55em;background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);color:#fff}
.btn-ig:hover{filter:saturate(1.15)}
.btn-ig svg{flex:none}
.ig-lead{margin-top:28px;font-size:.93rem;color:var(--ink-soft)}
.host-text .btns{margin-top:12px}
.reviews{margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
.reviews .btns{margin-top:12px}
.btn-sub{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-sub:hover{background:rgba(31,58,80,.06)}
.support .en-line{display:block;font-size:1rem;color:var(--ink-soft);line-height:1.4;margin-top:.3em}

/* スマホではInstagramの案内とボタンを中央にそろえる（2026-09-29） */
@media (max-width:760px){.ig-lead{text-align:center}.ig-lead + .btns{justify-content:center}}