@charset "UTF-8";
/* ==========================================================================
   継屋 — スクラッチ実装
   参考: tau-kumamoto.com / kikka-hirado.com / en.earthboat.jp
        studio116.kio-inc.com / lemon-tart.co.jp
   方針: 色は写真だけが持つ。UIは無彩色。余白で読ませる。
   ========================================================================== */

/* --------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------- */
:root{
  --paper:#F5F5F4;
  --white:#FFFFFF;
  --ink:#212227;
  --ink-soft:#636469;
  --meta:#8D8D8D;
  --line:#E3E3E1;
  --dark:#1C1D1F;

  --ja:"Zen Kaku Gothic New", system-ui, sans-serif;
  --en:"EB Garamond", Georgia, serif;

  --gutter:clamp(20px, 6.25vw, 80px);
  --max:1120px;

  --r-photo:28px;
  --r-card:28px;
  --r-input:14px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);

  --nav-h:96px;
}

/* --------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ja);
  font-size:15px;
  line-height:2.1;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3{margin:0;font-weight:700;line-height:1.16;letter-spacing:0}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}

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

/* 欧文の小見出し */
.eyebrow{
  font-family:var(--en);
  font-size:14px;
  letter-spacing:.18em;
  color:var(--meta);
  margin-bottom:18px;
}
.eyebrow i{font-style:normal;margin:0 .5em;opacity:.6}
.eyebrow--light{color:rgba(255,255,255,.72)}

/* 矢印つきリンク */
.arrowlink{
  font-family:var(--en);
  font-size:15px;
  letter-spacing:.06em;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.arrowlink::after{
  content:"";
  width:22px;height:1px;
  background:currentColor;
  transition:width .5s var(--ease);
}
.arrowlink:hover::after{width:34px}

/* ロゴ（<use> で参照するインラインSVG。fill:currentColor を継承させる） */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.logo{
  display:block;
  width:80px;
  aspect-ratio:166/95;
  fill:currentColor;
  overflow:visible;
}
.logo--lg{width:clamp(150px,17vw,240px)}

/* --------------------------------------------------------------
   3. ナビ — 写真の上に浮くピル
   -------------------------------------------------------------- */
.nav{
  position:fixed;
  inset:0 0 auto;
  z-index:40;
  height:var(--nav-h);
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  transition:color .5s var(--ease), background-color .5s var(--ease);
}
.nav::before{
  content:"";
  position:absolute;inset:0;
  background:var(--paper);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.nav.is-solid{color:var(--ink)}
.nav.is-solid::before{opacity:1}
.nav__brand,.nav__right{position:relative}
.nav__right{display:flex;align-items:center;gap:12px}

.pill{
  display:inline-flex;
  align-items:baseline;
  gap:.55em;
  padding:13px 26px;
  border-radius:999px;
  background:var(--white);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .5s var(--ease-soft);
}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:scale(.98)}
.pill__en{font-family:var(--en);font-size:15px;letter-spacing:.04em}
.pill__sep{color:var(--meta)}
.pill__ja{font-size:12px}

.burger{
  width:52px;height:52px;
  border:0;border-radius:999px;
  background:var(--white);
  display:grid;
  place-content:center;
  gap:5px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .5s var(--ease-soft);
}
.burger span{
  display:block;width:20px;height:1.5px;
  background:var(--ink);
  transition:transform .55s var(--ease-soft), opacity .3s;
}
.burger:hover{transform:translateY(-2px)}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* 全画面メニュー */
.menu{
  position:fixed;inset:0;z-index:35;
  background:var(--paper);
  display:grid;
  place-content:center;
  padding-inline:var(--gutter);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease-soft), visibility .6s;
}
.menu[hidden]{display:grid}          /* JS で hidden を外すまで不可視のまま */
body.menu-open .menu{opacity:1;visibility:visible}
.menu li{
  border-bottom:1px solid var(--line);
  padding:22px 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
body.menu-open .menu li{opacity:1;transform:none}
body.menu-open .menu li:nth-child(1){transition-delay:.08s}
body.menu-open .menu li:nth-child(2){transition-delay:.14s}
body.menu-open .menu li:nth-child(3){transition-delay:.20s}
body.menu-open .menu li:nth-child(4){transition-delay:.26s}
body.menu-open .menu li:nth-child(5){transition-delay:.32s}
.menu a{font-size:clamp(22px,3.4vw,34px);font-weight:500;line-height:1.5}
.menu em{font-family:var(--en);font-style:normal;color:var(--meta);letter-spacing:.14em}

/* --------------------------------------------------------------
   4. ヒーロー
   -------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--gutter) clamp(56px,7vw,88px);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero__media img,
.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.08) 38%,
    rgba(0,0,0,.78) 100%);
}
.hero__body{color:#fff;max-width:var(--max)}
.hero__label{
  font-family:var(--en);
  font-size:14px;letter-spacing:.16em;
  color:rgba(255,255,255,.82);
  margin-bottom:22px;
}
.hero__label i{font-style:normal;margin:0 .6em;opacity:.6}
.hero__title{
  font-size:clamp(36px,7vw,96px);
  line-height:1.06;
  margin-bottom:20px;
  overflow-wrap:anywhere;
  min-width:0;
}
.hero__sub{
  font-size:14px;
  color:rgba(255,255,255,.86);
  max-width:52ch;
}
.hero__scroll{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(56px,7vw,88px);
  writing-mode:vertical-rl;
  font-family:var(--en);
  font-size:12px;letter-spacing:.24em;
  color:rgba(255,255,255,.7);
}
.hero__scroll::after{
  content:"";display:block;
  width:1px;height:46px;
  margin:12px auto 0;
  background:linear-gradient(rgba(255,255,255,.7),transparent);
}

/* --------------------------------------------------------------
   5. About — 見出し左、本文を右下へずらす
   -------------------------------------------------------------- */
.about{
  padding:clamp(88px,12vw,136px) var(--gutter) clamp(72px,9vw,104px);
  display:grid;
  grid-template-columns:min(560px,46vw) minmax(0,1fr);
  gap:clamp(40px,9vw,120px);
  align-items:start;
}
.about__title{font-size:clamp(34px,4.8vw,62px)}
.about__body{padding-top:64px;padding-right:clamp(0px,8vw,120px)}
.about__body p{color:var(--ink-soft);font-size:14px}
.about__body p+p{margin-top:24px}

/* --------------------------------------------------------------
   6. Stay — 浮く白カード
   -------------------------------------------------------------- */
.stay{padding:0 var(--gutter) clamp(88px,12vw,128px)}
.stay__head{margin-bottom:36px}
.stay__title{font-size:clamp(28px,3.6vw,44px);margin-bottom:14px}
.stay__lead{color:var(--meta);font-size:13.5px;max-width:64ch}

.card{
  background:var(--white);
  border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(33,34,39,.04);
}
.stay__card{padding:clamp(28px,4vw,44px) clamp(24px,3.6vw,48px) clamp(24px,3.4vw,40px)}
.stay__card dl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stay__card dt{
  font-family:var(--en);
  font-size:clamp(34px,4.4vw,54px);
  line-height:1.05;
  letter-spacing:.01em;
}
.stay__card dt small{font-size:.4em;margin-left:.15em;font-family:var(--ja)}
.stay__card dd{font-size:12px;color:var(--meta);margin-top:10px;line-height:1.7}

/* --------------------------------------------------------------
   7. Rooms — 画面端まで断ち切る／サイズを揃えない
   -------------------------------------------------------------- */
.rooms{padding-bottom:clamp(72px,10vw,112px)}
.rooms__head{
  padding-inline:var(--gutter);
  margin-bottom:clamp(40px,6vw,64px);
}
.rooms__title{font-size:clamp(34px,4.8vw,62px);margin-bottom:14px}
.rooms__lead{color:var(--ink-soft);font-size:14px;max-width:52ch}

.room{
  display:grid;
  align-items:center;
  gap:clamp(24px,4.5vw,56px);
  padding-inline:var(--gutter);
}
.room+.room{margin-top:clamp(48px,8vw,96px)}
.room__fig{margin:0;overflow:hidden;border-radius:var(--r-photo)}
.room__fig img{width:100%;aspect-ratio:760/460;object-fit:cover;
  transition:transform 1.2s var(--ease-soft)}
.room:hover .room__fig img{transform:scale(1.03)}

.room__n{font-family:var(--en);font-size:15px;letter-spacing:.14em;color:var(--meta);margin-bottom:10px}
.room__info h3{
  font-size:clamp(22px,2.6vw,30px);
  margin-bottom:12px;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.room__info h3 small{font-family:var(--en);font-size:15px;font-weight:400;color:var(--meta);letter-spacing:.04em}
.room__info p{color:var(--ink-soft);font-size:14px;max-width:44ch}

/* 01 左端まで断ち切り・大 */
.room--bleedL{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.room--bleedL .room__fig{
  margin-left:calc(var(--gutter) * -1);
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
/* 02 内側・小・下げる */
.room--inset{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
.room--inset .room__fig img{aspect-ratio:460/300}
/* 03 右端まで断ち切り・大 */
.room--bleedR{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr)}
.room--bleedR .room__fig{
  margin-right:calc(var(--gutter) * -1);
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}

/* --------------------------------------------------------------
   7.5. Gallery — 家の細部。密度で見せる（マソンリー）
   -------------------------------------------------------------- */
.gallery{padding:0 var(--gutter) clamp(80px,11vw,128px)}
.gallery__head{margin-bottom:clamp(36px,5vw,52px);max-width:520px}
.gallery__title{font-size:clamp(30px,4vw,52px);margin-bottom:12px}
.gallery__lead{color:var(--meta);font-size:13.5px}

.gallery__grid{columns:3;column-gap:18px}
.gallery__grid figure{
  margin:0 0 18px;
  break-inside:avoid;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:#1a1a1a;
}
.gallery__grid img{
  width:100%;display:block;
  transition:transform 1.3s var(--ease-soft);
}
.gallery__grid figure:hover img{transform:scale(1.045)}
.gallery__grid figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:32px 18px 16px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.7) 78%);
  color:#fff;font-size:12.5px;line-height:1.7;letter-spacing:.02em;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.gallery__grid figure:hover figcaption{opacity:1;transform:none}
@media (hover:none){
  /* タッチ端末はホバーできないので常時薄く見せる */
  .gallery__grid figcaption{opacity:1;transform:none;padding:24px 14px 12px;font-size:11.5px}
}

/* --------------------------------------------------------------
   8. Journal — 見出しだけ左、中身は右へ
   -------------------------------------------------------------- */
.journal{padding:clamp(72px,10vw,120px) var(--gutter) clamp(80px,11vw,128px)}
.journal__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:clamp(32px,5vw,48px);
}
.journal__title{font-size:clamp(30px,4.2vw,54px)}

.feature{margin-left:var(--indent, 0);padding-bottom:clamp(28px,4vw,40px)}
.feature__meta{
  font-family:var(--en);font-size:14px;color:var(--meta);
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.feature__meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.feature__meta span{font-family:var(--ja);font-size:12px}
.feature__title{font-size:clamp(23px,2.9vw,34px);margin-bottom:16px;max-width:22ch}
.feature__lead{color:var(--ink-soft);font-size:14px;max-width:48ch;margin-bottom:18px}

.posts{margin-left:var(--indent, 0)}
.posts li{
  display:grid;
  grid-template-columns:104px 64px minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.posts time{font-family:var(--en);font-size:14px;color:var(--meta);letter-spacing:.04em}
.posts__cat{font-size:12px;color:var(--meta)}
.posts li a{font-size:clamp(15px,1.5vw,18px);font-weight:500;line-height:1.7}
.posts li a:hover{opacity:.6}
.posts__cost{font-family:var(--en);font-size:14px;letter-spacing:.04em}

@media (min-width:900px){ .journal{--indent:280px} }

/* --------------------------------------------------------------
   9. Evening — 全面写真
   -------------------------------------------------------------- */
.evening{
  position:relative;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--gutter) clamp(56px,7vw,80px);
  overflow:hidden;
  isolation:isolate;
}
.evening__media{position:absolute;inset:0;z-index:-2}
.evening__media img,
.evening__media video{width:100%;height:100%;object-fit:cover}
.evening__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.06) 36%,
    rgba(0,0,0,.82) 100%);
}
.evening__body{color:#fff;max-width:560px}
.evening__title{font-size:clamp(28px,4.6vw,58px);margin-bottom:18px}
.evening__lead{font-size:14px;color:rgba(255,255,255,.8)}

/* --------------------------------------------------------------
   10. Contact
   -------------------------------------------------------------- */
.contact{
  padding:clamp(80px,11vw,128px) var(--gutter) clamp(56px,7vw,88px);
  display:grid;
  grid-template-columns:420px minmax(0,1fr);
  gap:clamp(40px,7vw,80px);
  align-items:start;
}
.contact__title{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px}
.contact__lead{color:var(--ink-soft);font-size:14px;margin-bottom:28px;max-width:44ch}
.meta div{display:flex;gap:16px;align-items:baseline;padding:5px 0}
.meta dt{
  flex:0 0 96px;
  font-family:var(--en);font-size:13px;letter-spacing:.08em;color:var(--meta);
}
.meta dd{font-size:14px}
.meta a:hover{opacity:.6}

.contact__card{padding:clamp(28px,4vw,44px)}
.field{margin-bottom:20px}
.field label{
  display:block;
  font-family:var(--en);font-size:13px;letter-spacing:.1em;
  color:var(--meta);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--paper);
  border:1px solid #E7E7E4;
  border-radius:var(--r-input);
  padding:15px 18px;
  font-size:14px;
  line-height:1.7;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.field textarea{resize:vertical;min-height:132px}
.field input::placeholder,.field textarea::placeholder{color:#A3A099}
.field :is(input,select,textarea):focus-visible{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(33,34,39,.07);
}
.field--submit{margin-bottom:0;margin-top:28px}
.btn{
  border:0;border-radius:999px;
  background:var(--ink);color:#fff;
  padding:15px 32px;
  font-size:13.5px;letter-spacing:.06em;
  cursor:pointer;
  transition:transform .5s var(--ease-soft), opacity .4s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}

/* --------------------------------------------------------------
   11. Consult door — オーナー向けの導線はここだけ
   -------------------------------------------------------------- */
.door{
  margin-inline:var(--gutter);
  border-top:1px solid var(--line);
  padding:40px 0 clamp(64px,8vw,88px);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.door p{color:var(--meta);font-size:14px}

/* --------------------------------------------------------------
   12. フッター
   -------------------------------------------------------------- */
.foot{
  background:var(--dark);
  color:#fff;
  padding:clamp(64px,9vw,96px) var(--gutter) 44px;
}
.foot__mark{margin-bottom:clamp(48px,7vw,72px)}
.foot__bottom{
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:28px;
}
.foot__note{flex:1 1 auto;font-size:12px;color:#8D8D8D}
.foot__nav{display:flex;gap:28px}
.foot__nav a{font-size:12px;color:#8D8D8D}
.foot__nav a:hover{color:#fff}
.foot__copy{font-family:var(--en);font-size:13px;color:#8D8D8D}

/* --------------------------------------------------------------
   13. スクロール表示 — 一度きり、控えめに
   -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(28px)}
.rv.is-in{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}

/* --------------------------------------------------------------
   14. レスポンシブ
   -------------------------------------------------------------- */
@media (max-width:900px){
  .about{grid-template-columns:1fr;gap:32px}
  .about__body{padding-top:0;padding-right:0}
  .stay__card dl{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .room,.room--bleedL,.room--inset,.room--bleedR{grid-template-columns:1fr}
  .room--inset .room__info{order:2}
  .room--bleedR .room__info{order:2}
  .room--bleedL .room__fig,
  .room--bleedR .room__fig{
    margin-inline:calc(var(--gutter) * -1);
    border-radius:0;
  }
  .room--bleedL .room__fig img,
  .room--bleedR .room__fig img{aspect-ratio:16/10}
  .gallery__grid{columns:2}
  .contact{grid-template-columns:1fr}
  .posts li{grid-template-columns:1fr auto;gap:6px 16px;row-gap:8px}
  .posts time{grid-column:1}
  .posts__cat{grid-column:2;justify-self:end}
  .posts li a{grid-column:1 / -1}
  .posts__cost{grid-column:1 / -1;color:var(--meta)}
}
@media (max-width:640px){
  body{font-size:14.5px;line-height:2}
  :root{--nav-h:80px}
  .nav__right{gap:8px}
  .pill{padding:10px 16px}
  .pill__ja,.pill__sep{display:none}
  .burger{width:44px;height:44px;flex:none}
  .logo{width:56px}
  .nav__brand{flex:none;min-width:0}
  .hero__scroll{display:none}
  .hero__title{max-width:18ch}
  .gallery__grid{columns:1}
  .journal__head{flex-direction:column;align-items:flex-start;gap:20px}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:16px}
}
@media (max-width:400px){
  .pill__en{font-size:13px}
  .pill{padding:9px 14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}