/* ============================================
   TOPページ
   ============================================ */

/* ----- Hero ----- */
.hero{
  position:relative;
  height: 100vh;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  max-width: 100%;
}
.hero__slides{
  position:absolute; inset:0;
  overflow: hidden;
}
.hero__slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 1.6s var(--ease);
}
.hero__slide.is-active{ opacity:1; }
.hero__slide picture{
  display:block;
  width:100%; height:100%;
}
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.05);
  transition: transform 7s linear;
}
.hero__slide.is-active img{ transform: scale(1.15); }

.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(20,18,15,.35) 0%, rgba(20,18,15,.15) 40%, rgba(20,18,15,.5) 100%);
  z-index: 1;
}

/* ヒーローのキャッチ：縦書き */
.hero__catch{
  position:absolute;
  top: 50%;
  right: max(clamp(32px, 6vw, 120px), calc(16px + env(safe-area-inset-right, 0px)));
  transform: translateY(-50%);
  z-index: 3;
  color:#fff;
  max-height: calc(100dvh - var(--header-h) - 140px);
  max-height: calc(100vh - var(--header-h) - 140px);
  max-width: calc(100% - 180px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  overflow: hidden;
}
.hero__catch-ja{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--f-serif); font-weight:500;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: .55em;
  line-height: 1.65;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
  animation: fadeUp 1.4s var(--ease) .6s both;
  padding-right: .15em;
  box-sizing: border-box;
}
.hero__catch-ja .l{
  display:block;
  padding: 30px 0;
}
.hero__catch-ja .l + .l{ margin-right:.6em; }

.hero__sub{
  position:absolute;
  bottom: 80px;
  left: max(clamp(22px, 5vw, 80px), calc(12px + env(safe-area-inset-left, 0px)));
  z-index: 3; color:#fff;
  animation: fadeUp 1.4s var(--ease) 1s both;
  max-width: calc(100% - 120px);
}
.hero__sub-en{
  font-family: var(--f-en); font-style: italic;
  font-size: clamp(48px, 6vw, 72px); line-height:1;
  letter-spacing: .03em;
  font-weight: 400;
}
.hero__sub-jp{
  font-family: var(--f-serif);
  letter-spacing: .35em; font-size: 13px;
  margin-top: 14px; padding-left: .35em;
  opacity:.95;
}

.hero__scroll{
  position:absolute; bottom: 30px; left:50%; transform: translateX(-50%);
  z-index: 3; color:#fff;
  font-family: var(--f-en); letter-spacing:.4em; font-size:10px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  animation: fadeUp 1s var(--ease) 1.6s both;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero__scroll:hover{ opacity: .85; }
.hero__scroll::after{
  content:""; width:1px; height:50px; background:#fff;
  animation: scrollLine 2s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform: scaleY(0); transform-origin:top; }
  50%{ transform: scaleY(1); transform-origin:top; }
  50.001%{ transform-origin:bottom; }
  100%{ transform: scaleY(0); transform-origin:bottom; }
}

/* インジケータ */
.hero__indicators{
  position:absolute;
  bottom: max(30px, calc(16px + env(safe-area-inset-bottom, 0px)));
  right: max(clamp(22px, 5vw, 80px), calc(12px + env(safe-area-inset-right, 0px)));
  z-index: 3;
  display:flex; gap:14px;
}
.hero__indicators button{
  width: 28px; height: 1px; background: rgba(255,255,255,.4);
  position: relative; transition: background .3s;
}
.hero__indicators button.is-active{ background: rgba(255,255,255,1); }

/* ----- Intro セクション ----- */
.intro{
  text-align: center;
  padding: clamp(100px, 14vw, 180px) var(--pad);
  position: relative;
}
.intro__seal{
  width: 80px; height:80px;
  border: 1px solid var(--c-ink);
  display: grid; place-items: center;
  margin: 0 auto 40px;
  font-family: var(--f-serif);
  font-size: 11px; letter-spacing:.2em;
  position: relative;
}
.intro__seal::before, .intro__seal::after{
  content:""; position:absolute;
  width: 1px; background: var(--c-ink); opacity:.3;
}
.intro__seal::before{ left: -25px; top: 20px; height: 40px; }
.intro__seal::after{ right: -25px; top: 20px; height: 40px; }

.intro__catch{
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 2.2; letter-spacing: .18em;
  margin-bottom: 50px;
}
.intro__catch span{ display:block; }
.intro__catch .accent{ color: var(--c-vermilion); }

.intro__text{
  font-size: 15px; line-height: 2.4;
  letter-spacing: .14em;
  max-width: 580px; margin: 0 auto;
  color: var(--c-ink-2);
  line-break: strict;
  word-break: keep-all;
}
.intro__text-end{
  white-space: nowrap;
}

/* ----- 写真分割セクション "Concept" ----- */
.concept-section{
  padding: 0;
  background: var(--c-bg-2);
}
.concept-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}
.concept-grid--rev{ direction: rtl; }
.concept-grid--rev > *{ direction: ltr; }

.concept-grid__visual{
  position:relative;
  overflow:hidden;
}
.concept-grid__visual img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.6s var(--ease);
}
.concept-grid:hover .concept-grid__visual img{ transform: scale(1.04); }

.concept-grid__body{
  display:flex; flex-direction: column; justify-content: center;
  padding: clamp(60px, 8vw, 100px);
}
.concept-grid__num{
  font-family: var(--f-en);
  font-size: 13px; letter-spacing:.45em;
  color: var(--c-vermilion);
  margin-bottom: 18px;
}
.concept-grid__ttl{
  font-family: var(--f-serif);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: .15em; line-height: 1.5;
  margin-bottom: 24px;
}
.concept-grid__ttl .en{
  display:block; font-family: var(--f-en); font-style:italic;
  font-size: 14px; letter-spacing:.35em; color: var(--c-accent);
  margin-top: 10px;
}
.concept-grid__text{
  font-size: 14.5px; line-height: 2.1; letter-spacing:.1em;
  color: var(--c-ink-2);
  margin-bottom: 32px;
}

/* ----- 利用シーン ----- */
.scene{
  background: var(--c-bg);
}
.scene__list{
  margin-top: 80px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.scene__card{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
  background:#000;
}
.scene__card img{
  width:100%; height:100%; object-fit:cover;
  opacity:.85; transition: opacity .8s var(--ease), transform 1.6s var(--ease);
}
.scene__card:hover img{ opacity:1; transform: scale(1.06); }
.scene__card-body{
  position: absolute; left:0; right:0; bottom:0;
  padding: 32px;
  color:#fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  z-index:1;
}
.scene__card-en{ font-family: var(--f-en); font-style:italic; font-size: 14px; letter-spacing:.4em; opacity:.85; }
.scene__card-jp{
  font-family: var(--f-serif);
  font-size: 22px; letter-spacing:.2em; margin-top:8px;
}
.scene__card-desc{
  font-size:12.5px; line-height:1.9; margin-top:10px; opacity:.85; letter-spacing:.1em;
}

/* ----- 料理紹介 ----- */
.cuisine{
  background: #1a1815;
  color: var(--c-white);
  overflow: hidden;
}
.cuisine .ttl-jp, .cuisine .lead{ color: var(--c-white); }

.cuisine__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 80px;
}
.cuisine__visual{
  position:relative;
  height: 600px;
  overflow: hidden;
}
.cuisine__visual .main-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.cuisine__visual .sub-img{
  position:absolute;
  width: 60%; height: 280px;
  bottom: -50px; right: -50px;
  object-fit: cover;
  border: 8px solid #1a1815;
  z-index: 2;
}
.cuisine__text-en{
  font-family: var(--f-en); font-style:italic;
  font-size: 14px; letter-spacing:.45em;
  color: var(--c-gold); margin-bottom: 20px;
}
.cuisine__text-ttl{
  font-family: var(--f-serif);
  font-size: clamp(28px, 3.5vw, 40px); letter-spacing:.18em;
  line-height: 1.6; margin-bottom: 28px;
}
.cuisine__text-body{
  font-size: 15px; line-height: 2.2;
  letter-spacing:.1em;
  color: #d8d2c5;
  margin-bottom: 36px;
}

/* ----- 予約 CTA ----- */
.reserve-cta{
  text-align:center;
  background: var(--c-bg);
  padding: clamp(80px, 10vw, 120px) var(--pad);
  position:relative;
  overflow:hidden;
}
.reserve-cta::before{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 80px, rgba(107,124,92,.04) 80px 81px);
  pointer-events:none;
}
.reserve-cta__inner{ position:relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.reserve-cta__catch{
  font-family: var(--f-serif); font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .22em; line-height: 1.9;
  margin-bottom: 36px;
}
.reserve-cta__tel{
  display:inline-block;
  padding: 16px 50px;
  border: 1px solid var(--c-ink);
  background: var(--c-ink); color: var(--c-white);
  margin-top: 8px;
}
.reserve-cta__tel .lbl{
  font-family: var(--f-serif); font-size: 11px; letter-spacing:.35em; display:block; margin-bottom: 6px; opacity:.8;
}
.reserve-cta__tel .num{
  font-family: var(--f-en); font-size: 38px; letter-spacing: .05em; line-height:1;
}
.reserve-cta__sub{
  margin-top: 22px;
  font-size: 13px; color: var(--c-ink-3); letter-spacing:.18em;
}

/* ----- アクセス＆店舗情報 ----- */
.access{
  background: var(--c-bg-2);
}
.access__grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 60px;
  margin-top: 60px;
}
.access__map{
  height: 480px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--c-line);
}
.access__map iframe{ width:100%; height:100%; border:0; }

.access__info dt{
  font-family: var(--f-en); font-size: 11px; letter-spacing:.4em;
  color: var(--c-accent-d); margin-bottom: 6px;
}
.access__info dd{ font-size: 14.5px; margin-bottom: 24px; line-height:1.9; }
.access__info .tel-line{ font-family: var(--f-en); font-size: 26px; letter-spacing:.05em; color:var(--c-vermilion); }

/* ストリートビュー */
.streetview{
  padding: 0 var(--pad) clamp(80px, 10vw, 120px);
  background: var(--c-bg-2);
}
.streetview__inner{ max-width: var(--max); margin:0 auto; }
.streetview__head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 30px; }
.streetview__head .ttl-jp{ font-size: 24px; }
.streetview__head .ttl-en{ margin-bottom: 6px; text-align:left; }
.streetview__head .ttl-block{ text-align:left; margin-bottom:0; }
.streetview__frame{
  height: 540px;
  overflow:hidden;
  border: 1px solid var(--c-line);
  background:#000;
}
.streetview__frame iframe{ width:100%; height:100%; border:0; }

/* ----- レスポンシブ ----- */
@media (max-width: 960px){
  .hero{ min-height: 520px; }
  .hero__catch{
    top: 50%;
    right: max(16px, calc(12px + env(safe-area-inset-right, 0px)));
    max-width: min(38vw, 150px);
    max-height: calc(100dvh - var(--header-h) - 150px);
    max-height: calc(100vh - var(--header-h) - 150px);
  }
  .hero__catch-ja{
    font-size: clamp(19px, 5vw, 23px);
    letter-spacing: .28em;
    line-height: 1.55;
    max-height: 100%;
  }
  .hero__catch-ja .l{ padding: 18px 0; }
  .hero__catch-ja .l + .l{ margin-right: .4em; }
  .hero__sub{
    bottom: max(56px, calc(40px + env(safe-area-inset-bottom, 0px)));
    left: max(20px, calc(12px + env(safe-area-inset-left, 0px)));
    max-width: calc(100% - min(38vw, 150px) - 36px);
  }
  .hero__sub-en{ font-size: clamp(36px, 10vw, 44px); }
  .hero__sub-jp{ font-size: 12px; letter-spacing: .28em; }
  .hero__indicators{
    right: max(20px, calc(12px + env(safe-area-inset-right, 0px)));
    bottom: max(22px, calc(14px + env(safe-area-inset-bottom, 0px)));
  }
  .hero__scroll{ display:none; }

  .concept-grid{ grid-template-columns: 1fr; min-height:auto; }
  .concept-grid--rev{ direction: ltr; }
  .concept-grid__visual{ aspect-ratio: 4/3; }
  .concept-grid__body{ padding: 50px 24px; }

  .scene__list{ grid-template-columns: 1fr; }
  .scene__card{ aspect-ratio: 4 / 3.2; }

  .intro{
    text-align: left;
  }
  .intro__catch,
  .intro__text{
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
  .intro__text-end{ white-space: normal; }
  .intro__catch{
    font-size: clamp(20px, 5.4vw, 24px);
    letter-spacing: .14em;
    line-height: 2;
    margin-bottom: 36px;
  }
  .intro__text{
    font-size: 14px;
    letter-spacing: .1em;
    line-height: 2.2;
  }

  .concept-grid__num{ letter-spacing: .32em; font-size: 12px; }
  .concept-grid__ttl{
    font-size: clamp(24px, 6.4vw, 30px);
    letter-spacing: .12em;
  }
  .concept-grid__ttl .en{ letter-spacing: .28em; }
  .concept-grid__text{
    font-size: 14px;
    letter-spacing: .08em;
    line-height: 2.1;
  }

  .reserve-cta__catch{ letter-spacing: .12em; font-size: clamp(18px, 4.8vw, 22px); }
  .reserve-cta__sub{
    font-size: 13px;
    letter-spacing: .08em;
    line-height: 2;
  }

  .access__info dd,
  .access__info dt{
    letter-spacing: .08em;
  }

  .cuisine__grid{ grid-template-columns: 1fr; gap: 50px; margin-top: 50px; }
  .cuisine__visual{ height: 380px; }
  .cuisine__visual .sub-img{ width: 50%; height: 200px; bottom: 0; right: 0; }

  .concept-section,
  .concept-grid,
  .concept-grid__visual,
  .concept-grid__body,
  .intro,
  .scene,
  .cuisine,
  .reserve-cta,
  .access,
  .streetview{
    max-width: 100%;
    overflow-x: clip;
  }

  .access__grid{ grid-template-columns: 1fr; gap: 36px; }
  .access__map{ height: 360px; }
  .streetview__frame{ height: 360px; }
  .streetview__head{ flex-direction: column; align-items:flex-start; gap: 14px; }

  .reserve-cta__tel .num{ font-size: 28px; }
}

@media (max-width: 480px){
  .hero__catch{
    right: max(12px, calc(8px + env(safe-area-inset-right, 0px)));
    max-width: min(40vw, 132px);
  }
  .hero__catch-ja{
    font-size: clamp(17px, 4.6vw, 21px);
    letter-spacing: .22em;
    line-height: 1.5;
  }
  .hero__catch-ja .l{ padding: 12px 0; }
  .hero__catch-ja .l + .l{ margin-right: .32em; }
  .hero__sub{ max-width: calc(100% - min(40vw, 132px) - 28px); }
  .hero__sub-en{ font-size: clamp(30px, 9vw, 38px); }
  .hero__sub-jp{ font-size: 11px; margin-top: 10px; }
}

@media (max-width: 390px){
  .hero__catch-ja{
    font-size: 17px;
    letter-spacing: .22em;
  }
  .hero__catch-ja .l{ padding: 10px 0; }
  .hero__sub-en{ font-size: 28px; }
}