@charset "UTF-8";

:root{
  --orange:#e65f20;
  --black:#111111;
  --white:#f7f6f2;
  --gray:#9c9c98;
  --line:#2d2d2b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--black);
  background:var(--white);
  font-family:"Helvetica Neue","Arial","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  letter-spacing:.015em;
}
img{display:block;width:100%}
a{color:inherit}
::selection{background:var(--orange);color:white}

.header{
  position:fixed;
  z-index:100;
  top:0;left:0;right:0;
  height:76px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:34px;
  padding:0 28px;
  background:rgba(247,246,242,.93);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.12);
}
.identity{
  display:flex;
  align-items:center;
  gap:30px;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.12em;
  font-weight:700;
}
.identity-date{font-variant-numeric:tabular-nums}
.identity-name{color:#777}
.nav{display:flex;gap:25px}
.nav a{
  text-decoration:none;
  font-size:11px;
  letter-spacing:.06em;
}
.nav a:hover{text-decoration:underline}
.reserve{
  text-decoration:none;
  text-transform:uppercase;
  color:white;
  background:var(--black);
  padding:12px 19px;
  font-size:11px;
  letter-spacing:.12em;
}

.hero{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  background:#111;
  color:white;
}
.hero-image{
  position:absolute;
  inset:0;
  height:100%;
  object-fit:cover;
  transform:scale(1.012);
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.34) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28));
}
.hero-copy{
  position:relative;
  z-index:3;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:132px 4vw 5.5vw;
}
.micro{
  margin:0 0 20px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
}
.hero h1{
  margin:0;
  font-size:clamp(66px,11vw,170px);
  line-height:.79;
  letter-spacing:-.075em;
  font-weight:700;
}
.hero h1 span{display:block}
.hero h1 .outline{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.88);
  text-stroke:1px rgba(255,255,255,.88);
}
.hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.52);
}
.hero-bottom p{
  margin:0;
  font-size:14px;
  line-height:1.7;
}
.hero-bottom .hero-open{
  text-align:right;
  letter-spacing:.12em;
  font-size:12px;
}
.scroll-sign{
  position:absolute;
  z-index:4;
  right:25px;
  bottom:30%;
  display:flex;
  align-items:center;
  gap:12px;
  transform:rotate(90deg) translateX(50%);
  transform-origin:right center;
  font-size:9px;
  letter-spacing:.2em;
}
.scroll-sign span{display:block;width:50px;height:1px;background:white}

.statement{
  min-height:95vh;
  padding:110px 5vw 120px;
  display:grid;
  grid-template-columns:1fr 3fr;
  border-bottom:1px solid #ccc;
}
.statement-index{
  font-size:11px;
  letter-spacing:.14em;
  padding-top:13px;
}
.jp-lead{
  margin:0 0 16px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(22px,3vw,38px);
}
.statement h2{
  margin:0;
  font-size:clamp(72px,12vw,184px);
  letter-spacing:-.07em;
  line-height:.78;
}
.statement-copy{
  margin:72px 0 0 auto;
  max-width:610px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px;
  line-height:2;
  font-size:14px;
}
.statement-copy p{margin:0}

.brand-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--orange);
  color:#161616;
}
.brand-panel-image{
  min-height:100svh;
  overflow:hidden;
}
.brand-panel-image img{
  height:100%;
  object-fit:cover;
}
.brand-panel-copy{
  min-height:100svh;
  padding:6vw 5vw;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.panel-no{
  font-size:11px;
  letter-spacing:.18em;
  margin-bottom:auto;
}
.brand-panel-copy h2{
  margin:0 0 48px;
  font-size:clamp(64px,8.5vw,128px);
  line-height:.78;
  letter-spacing:-.06em;
}
.brand-panel-copy p{
  max-width:530px;
  line-height:2;
  font-size:14px;
  margin:0 0 20px;
}

.food{
  padding:120px 0 0;
  background:#111;
  color:#f6f4ef;
}
.section-title-row{
  display:grid;
  grid-template-columns:1fr 3fr;
  padding:0 5vw 95px;
}
.section-title-row>span,
.instagram-head>span,
.info-title>span,
.access-title>span{
  font-size:11px;
  letter-spacing:.16em;
}
.section-title-row h2{
  margin:0;
  font-size:clamp(66px,9.5vw,144px);
  letter-spacing:-.065em;
  line-height:.79;
}
.food-feature{
  display:grid;
  grid-template-columns:2fr 1fr;
  min-height:82vh;
  border-top:1px solid var(--line);
}
.food-feature.reverse{
  grid-template-columns:1fr 2fr;
}
.food-feature.reverse .food-image{order:2}
.food-image{
  min-height:680px;
  overflow:hidden;
}
.food-image img{
  height:100%;
  object-fit:cover;
}
.food-text{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:36px;
  border-left:1px solid var(--line);
}
.reverse .food-text{border-left:0;border-right:1px solid var(--line)}
.food-number{
  margin:0;
  font-size:11px;
  letter-spacing:.16em;
  color:#999;
}
.food-text h3{
  margin:auto 0 20px;
  font-size:clamp(55px,7vw,104px);
  line-height:.83;
  letter-spacing:-.065em;
}
.food-text>p:last-child{
  margin:0;
  max-width:380px;
  line-height:1.9;
  font-size:13px;
  color:#bbb;
}
.photo-strip{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}
.photo-strip figure{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  border-right:1px solid #111;
}
.photo-strip img{
  height:100%;
  object-fit:cover;
}

.instagram{
  background:var(--orange);
  min-height:88vh;
  padding:70px 5vw 85px;
}
.instagram-head{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid rgba(0,0,0,.45);
  padding-bottom:15px;
}
.instagram-head p{
  margin:0;
  font-size:11px;
  letter-spacing:.13em;
}
.instagram-main{
  min-height:65vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.instagram-main h2{
  margin:0;
  font-size:clamp(74px,12vw,190px);
  letter-spacing:-.075em;
  line-height:.77;
}
.instagram-main>p{
  max-width:460px;
  margin:42px 0 28px;
  line-height:1.8;
}
.instagram-main a{
  width:max-content;
  text-decoration:none;
  border-bottom:1px solid #111;
  padding-bottom:6px;
  font-size:13px;
  letter-spacing:.12em;
}
.instagram-main a span{margin-left:35px}

.information{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  background:#eeeae2;
}
.info-photo{
  min-height:100svh;
  position:relative;
}
.info-photo img{
  height:100%;
  object-fit:cover;
}
.location-tag{
  position:absolute;
  left:20px;bottom:20px;
  padding:8px 10px;
  background:#f7f6f2;
  font-size:9px;
  letter-spacing:.12em;
}
.info-content{
  padding:80px 45px 70px;
  display:flex;
  flex-direction:column;
}
.info-title h2{
  margin:25px 0 90px;
  font-size:clamp(58px,7vw,105px);
  letter-spacing:-.065em;
  line-height:.8;
}
.info-list{
  margin:auto 0 0;
}
.info-list>div{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:20px;
  padding:22px 0;
  border-top:1px solid #bbb;
}
.info-list>div:last-child{border-bottom:1px solid #bbb}
.info-list dt{
  font-size:10px;
  letter-spacing:.13em;
}
.info-list dd{
  margin:0;
  font-size:15px;
  line-height:1.7;
}
.info-list dd a{
  font-size:26px;
  text-decoration:none;
}
.info-list small{font-size:11px;color:#666}

.access{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:100px 5vw 120px;
}
.access-title h2{
  margin:30px 0 0;
  font-size:clamp(70px,9vw,138px);
  line-height:.79;
  letter-spacing:-.07em;
}
.access-content{
  padding-top:48px;
}
.access-content ul{
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid #aaa;
}
.access-content li{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:21px 0;
  border-bottom:1px solid #aaa;
  font-size:13px;
}
.access-content li span{color:#777}
.access-content li b{font-weight:500;text-align:right}
.map-button{
  margin-top:40px;
  display:flex;
  justify-content:space-between;
  text-decoration:none;
  border:1px solid #111;
  padding:18px 20px;
  font-size:12px;
  letter-spacing:.13em;
  transition:.2s ease;
}
.map-button:hover{background:#111;color:white}

.last-visual{
  height:90svh;
  position:relative;
  overflow:hidden;
  color:white;
}
.last-visual img{
  height:100%;
  object-fit:cover;
}
.last-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.48);
}
.last-overlay{
  position:absolute;
  z-index:2;
  inset:0;
  padding:5vw;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.last-overlay p{
  margin:0 0 15px;
  font-size:10px;
  letter-spacing:.18em;
}
.last-overlay h2{
  margin:0;
  font-size:clamp(74px,12vw,184px);
  line-height:.77;
  letter-spacing:-.07em;
}

.footer{
  background:#111;
  color:#f6f4ef;
  padding:70px 5vw 35px;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:60px;
}
.footer-date{
  font-size:11px;
  letter-spacing:.16em;
}
.footer h2{
  margin:20px 0 0;
  font-size:clamp(48px,7vw,110px);
  line-height:.8;
  letter-spacing:-.06em;
}
.footer-actions{
  width:min(440px,45%);
}
.footer-actions a{
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  border-top:1px solid #444;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.11em;
}
.footer-actions a:last-child{border-bottom:1px solid #444}
.footer-bottom{
  margin-top:90px;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #444;
  padding-top:17px;
  color:#888;
  font-size:9px;
  letter-spacing:.1em;
}
.mobile-bar{display:none}

@media(max-width:980px){
  .nav{display:none}
  .header{grid-template-columns:1fr auto}
  .statement{grid-template-columns:1fr;padding-top:90px}
  .statement-index{margin-bottom:55px}
  .statement-copy{grid-template-columns:1fr;max-width:520px}
  .brand-panel{grid-template-columns:1fr}
  .brand-panel-image{min-height:auto}
  .brand-panel-image img{height:auto}
  .brand-panel-copy{min-height:75vh}
  .section-title-row{grid-template-columns:1fr}
  .section-title-row>span{margin-bottom:55px}
  .food-feature,.food-feature.reverse{grid-template-columns:1fr}
  .food-feature.reverse .food-image{order:0}
  .food-image{min-height:70vh}
  .food-text,.reverse .food-text{min-height:340px;border:0;border-top:1px solid var(--line)}
  .information{grid-template-columns:1fr}
  .info-photo{min-height:65vh}
  .access{grid-template-columns:1fr}
  .access-content{margin-top:40px}
}

@media(max-width:680px){
  .header{
    height:64px;
    padding:0 14px;
  }
  .identity{gap:13px}
  .identity-name{display:none}
  .reserve{padding:10px 14px}
  .hero-copy{padding:100px 15px 84px}
  .hero h1{
    font-size:clamp(60px,20vw,90px);
    line-height:.82;
  }
  .hero-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }
  .hero-bottom .hero-open{text-align:left}
  .scroll-sign{display:none}
  .statement{
    min-height:auto;
    padding:76px 15px 90px;
  }
  .statement h2{
    font-size:clamp(70px,22vw,108px);
  }
  .statement-copy{margin-top:48px}
  .brand-panel-copy{
    padding:60px 15px;
    min-height:72vh;
  }
  .brand-panel-copy h2{
    font-size:clamp(68px,22vw,110px);
    margin-top:90px;
  }
  .food{padding-top:76px}
  .section-title-row{
    padding:0 15px 64px;
  }
  .section-title-row h2{
    font-size:clamp(62px,19vw,100px);
  }
  .food-image{min-height:auto}
  .food-image img{height:auto}
  .food-text{padding:25px 15px;min-height:280px}
  .food-text h3{font-size:58px}
  .photo-strip{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  .photo-strip figure{
    min-width:78vw;
    scroll-snap-align:start;
  }
  .instagram{padding:55px 15px 70px}
  .instagram-main h2{font-size:clamp(68px,21vw,105px)}
  .info-content{padding:65px 15px}
  .info-title h2{margin-bottom:60px}
  .info-list>div{grid-template-columns:78px 1fr}
  .info-list dd{font-size:13px}
  .info-list dd a{font-size:21px}
  .access{padding:76px 15px 100px}
  .access-title h2{font-size:clamp(67px,21vw,105px)}
  .access-content li{
    display:block;
  }
  .access-content li b{display:block;text-align:left;margin-top:5px}
  .last-visual{height:72svh}
  .last-overlay{padding:15px 15px 75px}
  .last-overlay h2{font-size:clamp(68px,21vw,105px)}
  .footer{padding:65px 15px 95px}
  .footer-top{display:block}
  .footer-actions{width:100%;margin-top:55px}
  .footer-bottom{display:block;line-height:1.8;margin-top:60px}
  .mobile-bar{
    position:fixed;
    z-index:150;
    left:0;right:0;bottom:0;
    display:grid;
    grid-template-columns:.75fr 1.15fr 1fr;
    height:58px;
    background:#111;
    color:white;
    border-top:1px solid #333;
  }
  .mobile-bar a{
    display:grid;
    place-items:center;
    text-decoration:none;
    font-size:10px;
    letter-spacing:.08em;
    border-right:1px solid #333;
  }
  .mobile-bar .mobile-call{
    background:var(--orange);
    color:#111;
    font-weight:700;
  }
}