:root{--paper:#faf8f4;--deep:#f0ebe2;--ink:#342d28;--muted:#716a63;--accent:#80684d;--white:#fff;--line:rgba(52,45,40,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP",sans-serif;font-weight:300;line-height:1.9}body.lock{overflow:hidden}img{display:block;width:100%;height:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(1120px,calc(100% - 48px));margin:auto}.narrow{max-width:720px}.center{text-align:center}.section{padding:130px 0}h1,h2{font-family:"Zen Old Mincho",serif;font-weight:500;line-height:1.55;margin:.35em 0}h1{font-size:clamp(30px,5vw,57px)}h2{font-size:clamp(27px,3.2vw,40px)}.eyebrow{font-size:12px;font-weight:500;letter-spacing:.24em;color:var(--accent);margin:0}.light{color:#e6d5bd}.sub,.note{color:var(--muted);font-size:13px}.skip{position:fixed;left:12px;top:-80px;z-index:1000;background:#fff;padding:10px}.skip:focus{top:12px}
.header{position:fixed;z-index:100;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:25px 42px;color:#fff;transition:.3s}.header.solid{padding:16px 42px;background:rgba(250,248,244,.95);color:var(--ink);box-shadow:0 1px var(--line);backdrop-filter:blur(10px)}.logo{font-family:"Zen Old Mincho",serif;font-weight:600;line-height:1.25;letter-spacing:.07em}.logo small{display:block;font-size:10px;font-weight:400;letter-spacing:.2em}.header nav{display:flex;align-items:center;gap:26px;font-size:12px;letter-spacing:.08em}.menu{display:none;background:none;border:0;color:inherit}.menu b{position:absolute;width:1px;height:1px;overflow:hidden}.button{display:inline-flex;justify-content:center;align-items:center;min-width:210px;padding:15px 26px;background:var(--accent);color:#fff;border:1px solid var(--accent);font-size:13px;font-weight:500;letter-spacing:.08em;transition:.2s}.button:hover{background:#68543e}.button.small{min-width:auto;padding:9px 18px}.hero{position:relative;min-height:720px;height:100svh;color:#fff;display:grid;place-items:center;text-align:center}.hero>img,.shade{position:absolute;inset:0}.shade{background:linear-gradient(rgba(20,16,12,.34),rgba(20,16,12,.58))}.hero-copy{position:relative;width:min(860px,calc(100% - 40px));z-index:1}.hero-copy>p:not(.eyebrow){font-family:"Zen Old Mincho",serif;font-size:18px}.hero .button{margin-top:20px}.intro p:last-child{font-size:15px}.features{display:grid;grid-template-columns:repeat(3,1fr);margin-top:75px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.features div{padding:34px;border-right:1px solid var(--line)}.features div:last-child{border:0}.features strong,.features span{display:block}.features strong{font-family:"Zen Old Mincho",serif;font-size:18px}.features span{margin-top:8px;color:var(--muted);font-size:12px}.gallery{background:var(--deep)}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:45px}.photo{position:relative;aspect-ratio:1/1.2;padding:0;border:0;background:#ddd;overflow:hidden;cursor:zoom-in}.photo.wide{grid-column:span 2;grid-row:span 2}.photo img{transition:transform .5s}.photo:hover img{transform:scale(1.03)}.photo span{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;text-align:left;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:13px}.room{display:grid;grid-template-columns:1.15fr .85fr;min-height:630px;background:var(--paper)}.room.reverse{grid-template-columns:.85fr 1.15fr;background:var(--deep)}.room.reverse figure{order:2}.room.reverse div{order:1}.room figure{margin:0;min-height:500px}.room>div{display:flex;flex-direction:column;justify-content:center;padding:80px}.room h2{font-size:clamp(25px,3vw,34px)}.around{color:#fff;background:linear-gradient(rgba(35,28,22,.84),rgba(35,28,22,.94)),url("images/kitchen-island.webp") center/cover}.spots{display:grid;grid-template-columns:1fr 1fr;gap:0 50px;margin-top:50px}.spots div{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.2)}.spots b{font-size:12px;font-weight:400;color:#d8cab7;white-space:nowrap}.light-note{color:#c8beb2}.access{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.access dl{display:grid;grid-template-columns:90px 1fr}.access dt,.access dd{margin:0;padding:17px 0;border-bottom:1px solid var(--line)}.access dt{font-weight:500}.access iframe{width:100%;height:480px;border:0}.reservation{background:var(--accent);color:#fff}.reservation h2{color:#fff}.booking{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:38px 0 20px}.button.white{background:#fff;border-color:#fff;color:var(--ink)}.button.outline{background:transparent;border-color:#fff}.reservation small{opacity:.72}footer{padding:70px 0;background:#2f2925;color:#ddd}.footer{display:flex;justify-content:space-between;gap:40px}.footer strong{font-family:"Zen Old Mincho",serif;font-size:21px}.footer p,.footer span,.footer a{display:block;font-size:12px}.footer a{margin-top:12px;text-decoration:underline}.floating{display:none}.lightbox{position:fixed;z-index:500;inset:0;display:grid;place-items:center;background:rgba(18,14,11,.94);padding:55px}.lightbox[hidden]{display:none}.lightbox img{max-height:82vh;object-fit:contain}.lightbox button{position:absolute;right:25px;top:18px;border:0;background:none;color:#fff;font-size:35px;cursor:pointer}.lightbox p{position:absolute;bottom:12px;color:#fff}
@media(max-width:820px){.section{padding:90px 0}.header,.header.solid{padding:16px 20px}.menu{display:flex;width:38px;height:34px;flex-direction:column;justify-content:center;gap:5px}.menu span{height:1px;width:26px;background:currentColor;transition:.2s}.menu.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}.menu.open span:nth-child(2){opacity:0}.menu.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.header nav{position:fixed;inset:0;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;justify-content:center;font-size:18px;visibility:hidden;opacity:0;transition:.2s}.header nav.open{visibility:visible;opacity:1}.menu{z-index:1}.features{grid-template-columns:1fr}.features div{border-right:0;border-bottom:1px solid var(--line);padding:25px 10px}.gallery-grid{grid-template-columns:1fr 1fr}.photo.wide{grid-column:span 2}.room,.room.reverse{grid-template-columns:1fr}.room figure,.room.reverse figure{order:1;min-height:380px}.room>div,.room.reverse>div{order:2;padding:55px 24px}.spots,.access{grid-template-columns:1fr}.access{gap:40px}.access iframe{height:360px}.footer{flex-direction:column}.floating{display:block;position:fixed;z-index:90;left:15px;right:15px;bottom:12px;padding:13px;background:var(--accent);color:#fff;text-align:center;font-size:13px;font-weight:500;box-shadow:0 5px 24px rgba(0,0,0,.25)}footer{padding-bottom:120px}}
@media(max-width:520px){.wrap{width:min(100% - 32px,1120px)}.hero{min-height:650px}.hero h1{font-size:31px}.gallery-grid{gap:8px}.room figure,.room.reverse figure{min-height:310px}.spots{display:block}.booking{grid-template-columns:1fr}.access dl{grid-template-columns:75px 1fr}.lightbox{padding:45px 12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.sleep-options{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:#fff}.sleep-options figure{position:relative;margin:0;min-height:430px;overflow:hidden}.sleep-options img{position:absolute;inset:0}.sleep-options figure::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(20,16,12,.8))}.sleep-options figcaption{position:absolute;z-index:1;left:35px;right:35px;bottom:28px}.sleep-options b,.sleep-options span{display:block}.sleep-options b{font-family:"Zen Old Mincho",serif;font-size:22px;font-weight:500}.sleep-options span{margin-top:5px;font-size:12px;opacity:.8}
@media(max-width:820px){.sleep-options{grid-template-columns:1fr}.sleep-options figure{min-height:360px}}
<style>
/* 2つのボタンを横並びにする。狭い画面では自動で縦積み */
.reservation .booking {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 28px 0 18px;
}

.reservation .booking .button {
  flex: 0 1 260px;
  justify-content: center;
}

/* --- Airbnb（いまのまま） --- */
.button.airbnb {
  gap: 10px;
  background: #ff385c;
  border-color: #ff385c;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.button.airbnb:hover,
.button.airbnb:focus-visible,
.button.airbnb:active {
  background: #fff;
  border-color: #fff;
  color: #ff385c;
}

.button.airbnb img {
  display: block;
  width: auto;
  height: 30px;
  filter: brightness(0) invert(1);
}

.button.airbnb:hover img,
.button.airbnb:focus-visible img,
.button.airbnb:active img {
  filter: none;
}

/* --- Booking.com（新規） ---
   クラス名は bookingcom です。booking にすると
   囲みの .booking と衝突して崩れます。 */
.button.bookingcom {
  gap: 8px;
  background: #003580;
  border-color: #003580;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.button.bookingcom:hover,
.button.bookingcom:focus-visible,
.button.bookingcom:active {
  background: #fff;
  border-color: #fff;
  color: #003580;
}

/* ロゴ代わりの文字。Booking.comのブランド色の黄色を差し色に */
.button.bookingcom b {
  font-size: 1.12em;
  font-weight: 800;
}

.button.bookingcom b i {
  font-style: normal;
  color: #febb02;
}

.button.bookingcom:hover b i,
.button.bookingcom:focus-visible b i,
.button.bookingcom:active b i {
  color: #003580;
}
</style>