:root{
  --c-bg:#ffffff;
  --c-bg-sub:#f5f4f1;
  --c-text:#2b2b2b;
  --c-text-sub:#6b6b6b;
  --c-line:#dcd9d2;
  --c-accent:#8c7a5b;
  --c-dark:#1f2a38;
  --f-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --f-en:"Cormorant Garamond","Times New Roman",serif;
  --w:1080px;
  --header-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--c-bg);color:var(--c-text);font-family:var(--f-sans);font-size:15px;line-height:1.9;letter-spacing:.04em;font-feature-settings:normal;}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.inner{max-width:var(--w);margin:0 auto;padding:0 24px}

main{background-color:#fff;}

/* header */
.hd{position:fixed;inset:0 0 auto;height:var(--header-h);background:rgba(255,255,255,.95);border-bottom:1px solid var(--c-line);z-index:10}
.hd .inner{height:100%;display:flex;align-items:center}
.hd-logo{display:block;flex-shrink:0}
.hd-logo img{height:22px;width:auto}
@media (max-width:860px){.hd-logo img{height:18px}}

/* placeholder image */
.ph{background:var(--c-bg-sub);border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;color:var(--c-text-sub);font-size:13px;aspect-ratio:3/2}
.ph-img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery .ph-img,.equip .ph-img{border:1px solid var(--c-line)}
.fig figcaption{font-size:11px;color:var(--c-text-sub);text-align:right;margin-top:6px}

/* hero */
.hero{position:relative;height:74svh;min-height:520px;padding:0}
.hero .ph{height:100%;aspect-ratio:auto;border:0}
.hero .ph-img{height:100%;aspect-ratio:auto}
.hero-copy{position:absolute;left:0;right:0;bottom:24%;text-align:center;background:rgba(255,255,255,.82);padding:40px 24px}
.hero-copy::before{content:"";position:absolute;inset:10px;border:1px solid rgba(140,122,91,.45);pointer-events:none}
.hero-copy h1 img{width:clamp(200px,32vw,340px);margin:0 auto}
.hero-copy p{font-family:var(--f-serif);font-size:clamp(15px,2vw,18px);margin-top:8px}
.hero figcaption{position:absolute;right:16px;bottom:10px;font-size:11px;color:var(--c-text-sub)}

/* jump */
.jump{border-top:2px solid var(--c-accent)}
.jump ul{display:grid;grid-template-columns:repeat(3,1fr);list-style:none}
.jump a{position:relative;display:flex;align-items:flex-end;min-height:280px;padding:28px;overflow:hidden;text-decoration:none;color:#fff;background:var(--c-dark)}
.jump img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.jump a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,27,36,.72) 0%,rgba(20,27,36,.5) 60%,rgba(20,27,36,.25) 100%)}
.jump-body{position:relative;z-index:1;width:100%}
.jump .lead{font-size:13px;line-height:1.9;color:rgba(255,255,255,.88)}
.jump .en{display:block;margin-top:16px;padding-top:14px;font-family:var(--f-en);font-size:30px;line-height:1.1;letter-spacing:.1em;color:#c9b995;border-top:1px solid rgba(201,185,149,.55)}
.jump .label{display:block;margin-top:6px;font-family:var(--f-serif);font-size:14px;letter-spacing:.18em}
.jump a:hover img{transform:scale(1.06)}
@media (hover:none){.jump a:hover img{transform:none}}
@media (prefers-reduced-motion:reduce){.jump img{transition:none}}
@media (max-width:860px){.jump ul{grid-template-columns:1fr 1fr}.jump a{min-height:150px;padding:16px}.jump .lead{font-size:12px;line-height:1.7}.jump .en{margin-top:10px;padding-top:8px;font-size:22px}.jump .label{margin-top:4px;font-size:12px}}

/* section */
.sec{padding:112px 0}
.sec.is-sub{background:var(--c-bg-sub)}
.sec-ttl{margin-bottom:48px;position:relative;padding-top:26px}
.sec-ttl::before{content:"";position:absolute;top:0;left:0;width:48px;height:1px;background:var(--c-accent)}
.sec-ttl .en{display:block;font-family:var(--f-en);font-size:clamp(32px,4.6vw,46px);line-height:1.1;color:var(--c-accent);letter-spacing:.12em}
.sec-ttl h2{margin-top:10px;font-family:var(--f-serif);font-weight:600;font-size:16px;letter-spacing:.2em;line-height:1.5}
.lead{font-family:var(--f-serif);font-size:clamp(20px,2.4vw,26px);line-height:1.8;margin-bottom:24px}
.txt{max-width:36em;line-height:2.1}
.txt + .txt{margin-top:1em}
@media (max-width:767px){.sec{padding:72px 0}.sec-ttl{margin-bottom:32px}}

/* concept */
.concept{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}
@media (max-width:767px){.concept{grid-template-columns:1fr;gap:32px}}

/* outline */
.outline{border-top:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent)}
.outline div{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--c-line)}
.outline div:last-child{border-bottom:0}
.outline dt,.outline dd{padding:18px 8px}
.outline dt{font-weight:500;color:var(--c-text-sub)}
@media (max-width:767px){
  .outline div{grid-template-columns:1fr}
  .outline dt{padding-bottom:0}
  .outline dd{padding-top:4px}
}

/* plan */
.sec-note{margin:-24px 0 24px;font-size:14px;color:var(--c-text-sub)}
.sec.is-dark{background:var(--c-dark);color:#fff}
.sec.is-dark .sec-ttl .en{color:#c9b995}
.sec.is-dark .sec-note{color:rgba(255,255,255,.75)}
.sec.is-dark .plan{color:var(--c-text)}
.plans-wrap{position:relative}
.plans-nav{position:absolute;top:140px;width:44px;height:44px;border:1px solid rgba(255,255,255,.6);background:rgba(31,42,56,.75);color:#fff;font-size:14px;line-height:1;cursor:pointer;transition:background .2s,opacity .2s}
.plans-nav:hover{background:var(--c-accent);border-color:var(--c-accent)}
.plans-nav[disabled]{opacity:.25;cursor:default}
.plans-nav.prev{left:-22px}
.plans-nav.next{right:-22px}
@media (max-width:767px){.plans-nav{top:auto;bottom:-8px;width:40px;height:40px}.plans-nav.prev{left:0}.plans-nav.next{right:0}}
.plans{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-color:var(--c-accent) var(--c-line)}
.plans::-webkit-scrollbar{height:4px}
.plans::-webkit-scrollbar-track{background:var(--c-line)}
.plans::-webkit-scrollbar-thumb{background:var(--c-accent)}
.plan{flex:0 0 360px;scroll-snap-align:center;background:var(--c-bg);border:1px solid var(--c-line)}
.plan .ph{border:0;border-bottom:1px solid var(--c-line);aspect-ratio:4/3}
.plan-img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--c-bg-sub);border-bottom:1px solid var(--c-line)}
.plan-body{padding:24px}
.plan-type{font-family:var(--f-serif);font-size:26px;letter-spacing:.06em;line-height:1.3;padding-bottom:12px;border-bottom:3px double var(--c-line)}
.plan-type .suf{font-family:var(--f-en);font-size:17px;letter-spacing:.06em;color:var(--c-accent);margin-left:4px}
.plan-type small{font-family:var(--f-sans);font-size:14px;margin-left:12px}
.plan-spec{margin-top:16px;font-size:14px}
.plan-spec div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--c-line);padding:6px 0}
.plan-spec dt{color:var(--c-text-sub)}

/* equipment */
.equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:40px 32px}
.equip h3{font-family:var(--f-serif);font-weight:600;font-size:17px;margin:14px 0 4px}
.equip p{font-size:14px;color:var(--c-text-sub)}

/* gallery */
.sec.is-pattern{background-color:#f2efe9;background-image:url("images/bg-gallery.png");background-size:464px auto;background-repeat:repeat}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery .fig{position:relative;overflow:hidden}
.gallery .ph-img{width:100%;aspect-ratio:3/2;object-fit:cover;border:0}
.gallery .fig::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(20,27,36,.7),rgba(20,27,36,0));pointer-events:none}
.gallery figcaption{position:absolute;left:12px;bottom:10px;z-index:1;margin:0;font-size:12px;letter-spacing:.08em;color:#fff;text-align:left}
@media (max-width:767px){.gallery{grid-template-columns:1fr 1fr;gap:8px}}
.gallery .fig{cursor:zoom-in}
.gallery .fig::before{content:"";position:absolute;top:8px;right:8px;z-index:1;width:28px;height:28px;border-radius:50%;background:rgba(20,27,36,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M14.5 14.5 20 20M10 7.5v5M7.5 10h5'/%3E%3C/svg%3E") center/15px no-repeat;pointer-events:none}
.gallery .fig:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* lightbox */
.lightbox{border:0;padding:0;background:transparent;width:100%;height:100%;max-width:100vw;max-height:100vh}
.lightbox::backdrop{background:rgba(10,14,20,.92)}
.lb-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;padding:16px}
.lb-inner img{max-width:min(96vw,1100px);max-height:80vh;object-fit:contain}
.lb-cap{color:#fff;font-size:13px;letter-spacing:.08em}
.lb-close{position:fixed;top:14px;right:14px;width:44px;height:44px;border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.lb-close:hover{background:var(--c-accent);border-color:var(--c-accent)}

/* access */
.access{display:grid;grid-template-columns:1.4fr 1fr;gap:48px}
.access > *{min-width:0}
.map{aspect-ratio:4/3}
.map iframe{width:100%;height:100%;border:0}
.access-h{font-family:var(--f-serif);font-weight:600;font-size:17px;margin-bottom:8px}
.traffic + .access-h{margin-top:32px}
.traffic{list-style:none;border-top:1px solid var(--c-line)}
.traffic li{border-bottom:1px solid var(--c-line);padding:14px 0}
.traffic strong{font-weight:500;display:block}
@media (max-width:767px){.access{grid-template-columns:1fr;gap:32px}}

/* contact */
.contact{background:var(--c-dark);color:#fff;text-align:center}
.contact .sec-ttl .en{color:#c9b995}
.contact-btns{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.btn{display:inline-block;min-width:280px;padding:18px 32px;border:1px solid #fff;text-decoration:none;font-size:15px;transition:background .2s,color .2s}
.btn:hover{background:#fff;color:var(--c-dark)}
.btn small{display:block;font-size:12px;opacity:.8}
.contact-note{margin-top:24px;font-size:13px;opacity:.8}

/* footer */
.ft{padding:48px 0 32px;font-size:11px;color:var(--c-text-sub);line-height:1.8}
.ft .copy{margin-top:24px;text-align:center}