:root{
  --bg:#f2f2f2;
  --panel:#fafafa;
  --ink:#363636;
  --yellow:#edd65f;
  --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:"Jost","Shippori Mincho",serif;font-weight:300;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);height:286px}
.site-header .inner{position:relative;max-width:1200px;height:100%;margin:0 auto}
.logo{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:600px}
.menu-btn{position:absolute;left:80px;top:40px;width:30px;height:22px;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between}
.menu-btn span{display:block;height:1px;background:var(--ink)}
.menu-btn:hover span{background:var(--yellow)}
.reserve{position:absolute;right:78px;top:36px;width:160px;height:34px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:"Shippori Mincho",serif;font-size:18px;letter-spacing:.02em;transition:background .2s}
.reserve:hover{background:var(--yellow)}

/* menu panel */
.menu-panel{position:fixed;inset:0;z-index:40;background:rgba(242,242,242,.97);display:none;align-items:center;justify-content:center}
.menu-panel.open{display:flex}
.menu-panel ul{list-style:none;text-align:center}
.menu-panel li{margin:28px 0}
.menu-panel a{font-family:"Cinzel",serif;font-size:22px;letter-spacing:.3em}
.menu-panel a:hover{color:#b59a1c}
.menu-close{position:absolute;top:34px;left:78px;background:none;border:0;font-size:30px;line-height:1;color:var(--ink);cursor:pointer}

/* scroll indicator */
.scroll-ind{position:fixed;left:10px;top:298px;z-index:10;width:60px;text-align:center;font-size:18px}
.scroll-ind svg{display:block;margin:6px auto 0}

/* grid */
main{max-width:1040px;margin:0 auto 0;padding:0 0 80px}
.row{display:grid;gap:20px;margin-bottom:20px}
.r2{grid-template-columns:1fr 1fr}
.r3{grid-template-columns:334px 334px 332px}
.r21{grid-template-columns:685px 335px}
.ph{background:var(--panel);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.h400{height:400px}
.h537{height:537px}
.h492{height:492px}
.yellow{background:var(--yellow);padding:90px 10px 40px 10px;display:flex;flex-direction:column}
.cinzel{font-family:"Cinzel",serif;font-weight:400;font-size:22px;line-height:1.6;letter-spacing:.25em}
.cinzel.wide{letter-spacing:.3em}
.lead{font-family:"Shippori Mincho",serif;font-size:18px;line-height:1.9;margin-top:56px}
.more{margin-top:auto;font-size:18px}
.more:hover{text-decoration:underline}
.star{font-size:34px;line-height:1;margin-bottom:22px;font-weight:300}

/* about */
.about-panel{background:var(--white);padding:90px 60px 80px}
.about-title{font-family:"Shippori Mincho",serif;font-size:24px;line-height:1.8;letter-spacing:.2em;text-align:center}
.about-body{display:grid;grid-template-columns:1fr 460px;gap:60px;margin-top:60px;align-items:start}
.about-text{font-family:"Shippori Mincho",serif;font-size:18px;line-height:1.9;padding-top:60px;position:relative}
.about-text::before{content:"";position:absolute;top:0;left:0;width:60px;height:1px;background:var(--ink)}
.about-text p+p{margin-top:1.4em}
.ig{display:block;text-align:center;margin-top:90px;font-size:18px;letter-spacing:.1em}
.ig:hover{text-decoration:underline}

/* footer */
.site-footer{background:var(--ink);color:#fff;text-align:center;font-family:"Cinzel",serif;font-size:9px;letter-spacing:.2em;padding:6px 0}

/* 404 */
.nf{text-align:center;padding:60px 20px 120px}
.nf p{margin-top:20px;font-family:"Shippori Mincho",serif}
.nf a{text-decoration:underline}

@media (max-width:1100px){
  main{padding:0 16px 60px}
  .r3,.r21{grid-template-columns:1fr 1fr}
  .r3 .yellow,.r21 .ph{grid-column:1/-1}
}
@media (max-width:720px){
  .site-header{position:relative;height:auto;padding:64px 16px 16px}
  .site-header .inner{height:auto}
  .logo{position:static;transform:none;width:100%;max-width:340px;margin:0 auto}
  .menu-btn{left:16px;top:18px}
  .reserve{right:16px;top:12px;width:auto;padding:0 12px;font-size:14px}
  .menu-close{left:16px;top:14px}
  .scroll-ind{display:none}
  .r2,.r3,.r21{grid-template-columns:1fr}
  .row{gap:12px;margin-bottom:12px}
  .h400,.h537,.h492{height:auto;aspect-ratio:4/3}
  .yellow{aspect-ratio:auto;padding:48px 20px 40px}
  .more{margin-top:40px}
  .about-panel{padding:48px 20px}
  .about-title{font-size:18px;letter-spacing:.1em}
  .about-body{grid-template-columns:1fr;gap:32px}
  .about-text{font-size:16px}
}