/* ============================================================
   夏の会席 LP — 箱根湯の花プリンスホテル (CNCTR-8292)
   Design: Figma 1ruSyvXJ3t3ZADOEL9CkVB node 50:2 (7/8修正)
   ============================================================ */
:root{
  --bg:#dce9ea;            /* page background (青海波 light blue-green) */
  --card:#f2f2e9;          /* info / menu body */
  --app-bg:#fffcf5;        /* app section */
  --ink:#011117;           /* primary text & borders */
  --teal:#65a4ab;          /* footer */
  --teal-line:#175257;     /* active tab bar / menu head end */
  --navy1:#013447;         /* info chip gradient */
  --navy2:#064a63;
  --head1:#0b2f3c;         /* menu head gradient */
  --head2:#175257;
  --gold:#bf8e42;          /* app title / border */
  --gold-tx:#bd9401;       /* app button text */
  --chip-tx:#f2f2e9;
  --content: 1128px;
}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit}
body{
  font-family:"Sawarabi Gothic","Yu Gothic","游ゴシック",-apple-system,sans-serif;
  color:var(--ink);
  line-height:1.7;
  letter-spacing:.04em;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--content);margin:0 auto;padding:0 24px}
.max375{display: none;}
.max425{display: none;}
.max768{display: none;}
.min1148 {display: none;}
/* ===== HERO ===== */
.hero{
  position:relative;
  width: 100%;
  aspect-ratio: 1920/640;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
  background:var(--head1);
}
.hero__media{
  position:absolute;inset:0;
  background:url("../img/hero.webp") center/cover no-repeat;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:rgba(110, 53, 0, 0.3);
  mix-blend-mode:multiply;
}
.hero__wave{
  position:absolute;
  top:0;
  width: 200px;
  height: 112px;
  background:url("../img/wave_corner_left.svg") no-repeat;
  background-size:contain;
  pointer-events:none;
  opacity:.95;
  z-index:2;
}
.hero__wave--tl{left: -40px;}
.hero__wave--tr{background:url("../img/wave_corner_right.svg") no-repeat;width: 240px;right:0;top: unset;bottom: 0;}
.hero__inner{position:relative;z-index:3;padding:40px 20px}
.hero__title{
  font-size:64px;font-weight:400;letter-spacing:.14em;
  text-indent:.14em;text-shadow:0 2px 18px rgba(0,0,0,.28);
}
.hero__sub{font-size:20px;letter-spacing:.06em;}

/* ===== TAB NAV ===== */
.tabs{background:var(--bg);border-bottom:4px solid var(--ink)}
.tabs__inner{max-width:var(--content);margin:0 auto;display:flex}
.tab{
  flex:1 1 0;
  background:none;
  border:0;
  cursor:pointer;
  padding: 40px 8px 26px;
  position:relative;
  font-family:inherit;
  color:#c1c1c1;
  transition:color .25s;
}
.tab__en{
  display:block;font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.05em;margin-bottom:12px;color:inherit;
}
.tab__ja{display:block;font-size:30px;letter-spacing:.05em}
.tab:hover{color:#9aa2a5}
.tab.is-active{color:var(--ink)}
.tab.is-active .tab__en{color:rgba(95,168,154,.7)}
.tab.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:8px;background:var(--teal-line);
}

/* ===== PANELS ===== */
.panel{display:none;position:relative;padding: 56px 0 150px;background:var(--bg);}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(180deg,var(--bg) 0%,var(--bg) 18%,rgba(220,233,234) 70%, transparent 100%),
    url("../img/seigaiha_bg.jpg") center bottom/max(100%,1000px) auto no-repeat;
}
.panel>.wrap{position:relative;z-index:1}
.panel.is-active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* dish photo + tag */
.dish{position:relative;max-width:var(--content);margin:0 auto}
.dish img{width:100%;height:auto;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.dish__tag{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background: rgba(255,255,255,0.8);
  color:var(--ink);
  font-size: 32px;
  letter-spacing:.06em;
  font-weight:400;
  padding: 24px 26px 24px 32px;
  border-bottom-right-radius:16px;
}
.dish--feature img{box-shadow:0 8px 30px rgba(0,0,0,.16)}

/* lead heading + text */
.lead{text-align:center;margin: 50px auto 56px;max-width:900px}
.lead__title{
  font-size:30px;
  font-weight:400;
  color:var(--ink);
  letter-spacing:.08em;
  margin-bottom: 16px;
}
.lead__text{font-size:18px;color:var(--ink);line-height:1.9;letter-spacing:.04em}

/* info box */
.info{
  max-width:var(--content);margin:0 auto 40px;background:var(--card);
  border:2px solid var(--ink);
  padding:32px 40px;
}
.info__row{display:flex;align-items:flex-start;gap:32px;padding:12px 0}
.info__row dt{
  flex:0 0 120px;
  background:linear-gradient(90deg,var(--navy1),var(--navy2));
  color:var(--chip-tx);
  font-size:16px;text-align:center;letter-spacing:.06em;
  padding:6px 8px;border-radius:4px;line-height:1.7;
}
.info__row dd{flex:1;font-size:18px;line-height:1.8;color:var(--ink)}
.info__row dd a{color:var(--ink);text-decoration:none}
.info__note{display:inline;font-size:16px;color:var(--ink)}

/* menu table */
.menu{
  max-width:var(--content);
  margin: 0 auto 56px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(11,47,60,.12)
  }
.menu__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,var(--head1),var(--head2));
  color:var(--chip-tx);border:0;cursor:pointer;
  font-family:inherit;font-size:20px;letter-spacing:.06em;
  padding:24px 32px;
}
.menu__toggle{position:relative;width:32px;height:32px;flex:0 0 32px;background: #fff;}
.menu__toggle::before,.menu__toggle::after{
  content:"";
  position:absolute;
  left:6px;
  top:15px;
  width:20px;
  height: 1px;
  background: var(--ink);
  transition:transform .25s;
}
.menu__toggle::after{transform:rotate(90deg)}
.menu__head[aria-expanded="true"] .menu__toggle::after{transform:rotate(0)}
.menu__body{
  display:grid;grid-template-columns:1fr 1fr;gap:0 24px;
  background:var(--card);padding:32px 40px;
}
.menu__col{display:flex;flex-direction:column;gap:18px}
.menu__row{display:flex;align-items:flex-start;gap:32px}
.menu__row dt{
  flex:0 0 120px;background:var(--card);color:var(--ink);
  border:1px solid var(--ink);
  font-size:16px;text-align:center;letter-spacing:.06em;padding:6px 8px;border-radius:4px;line-height:1.7;
}
.menu__row dd{flex:1;font-size:16px;padding-top:5px;line-height:1.7;color:var(--ink);letter-spacing: 0.4px;}

/* 箱根 feature section */
.feature{max-width:var(--content);margin:8px auto 44px;padding-top:20px}
.feature .lead{margin-top:44px}

/* notes */
.notes{max-width:var(--content);margin:0 auto;padding:8px 4px 10px;list-style:none}
.notes li{font-size:13px;color:var(--ink);line-height:1.9;text-indent:-1em;padding-left:1em}
.notes a{color:var(--ink)}

/* ===== APP BANNER ===== */
.app{background:var(--app-bg);padding:80px 0}
.app__title{
  text-align:center;color:var(--gold);font-weight:400;
  font-size:26px;letter-spacing:.06em;margin-bottom:44px;
}
.app__title-en{font-family:"Montserrat",sans-serif;font-weight:700}
.app__body{display:flex;align-items:center;gap: 32px;}
.app__text{flex:1}
.app__text p{font-size:16px;color:var(--ink);line-height:1.8}
.app__btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top: 56px;
  padding:16px 32px;
  border:1px solid var(--gold);
  color:var(--gold-tx);
  background:#fff;
  text-decoration:none;
  font-size:18px;
  letter-spacing:.06em;
  min-width:282px;
  justify-content:center;
  transition:.25s;
}
.app__btn:hover{background:var(--gold);color:#fff}
.app__media{flex: 0 0 59%;}
.app__media img{width:100%}

/* ===== FOOTER ===== */
.foot{background:var(--teal);color:#fff;text-align:center;padding: 52px 0 0;}
.foot__logo img{height:64px;width:auto;margin: 0 auto 40px;}
.foot__links{font-size:18px;letter-spacing:.06em;margin-bottom:22px}
.foot__links a{text-decoration:none}
.foot__links a:hover{text-decoration:underline}
.foot__sep{margin:0 18px;opacity:.8}
.foot__copy{font-family:"Montserrat",sans-serif;font-size: 14px;padding-block: 16px;letter-spacing:.04em;color:var(--ink);background: var(--bg);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1148px){
  .min1148 {display: inline;}
}
@media (max-width:768px){
  .max768{display: inline;}
  .wrap{padding: 0 12px;}
  .hero{min-height:360px;aspect-ratio: auto;}
  .hero__title{font-size:40px}
  .hero__sub{font-size:15px;margin-top:14px}
  .hero__wave{width:120px;height:140px;bottom: -80px;right: -30px;background-size: contain;}

  .tabs__inner{flex-wrap:nowrap}
  .tab{padding:18px 4px 15px}
  .tab__en{font-size:9px;letter-spacing:.02em;margin-bottom:6px}
  .tab__ja{font-size:17px;letter-spacing:.02em}
  .tab.is-active::after{height:5px}

  .panel{padding:38px 0 12px}
  .lead{margin:32px auto 28px}
  .lead__title{font-size:22px}
  .lead__text{font-size:15px;line-height:1.85;text-align:center}

  .dish__tag{font-size:15px;padding:10px 16px 10px 18px;border-bottom-right-radius:10px}

  .info{padding:20px 18px;margin-bottom:32px}
  .info__row{gap:16px;padding:10px 0}
  .info__row dt{flex:0 0 88px;font-size:13px}
  .info__row dd{font-size:15px}
  .info__note{font-size:13px}

  .menu__head{font-size:16px;padding:18px 18px}
  .menu__toggle{width:24px;height:24px;flex:0 0 24px}
  .menu__toggle::before,.menu__toggle::after{left:4px;top:11px;width:16px}
  .menu__body{grid-template-columns:1fr;gap:14px;padding:18px 18px}
  .menu__col{gap:14px}
  .menu__row{gap:16px}
  .menu__row dt{flex:0 0 88px;font-size:13px}
  .menu__row dd{font-size:14px}

  .app{padding:52px 0 56px}
  .app__title{font-size:19px;margin-bottom:30px;padding:0 16px;line-height:1.6}
  .app__body{flex-direction:column;gap:28px;}
  .app__media{flex:none;width:100%}
  .app__btn{display:flex;width:100%;min-width:0;margin:26px auto 0}

  .foot__logo img{height:52px}
  .foot__links{font-size:12px}
  .foot__sep{margin:0 10px}
  .foot__links a{display:inline-block}
  .foot__copy{font-size: 9px;}
}

@media (max-width:375px){
  .max375{display: inline;}
}

@media (max-width:425px){
  .max425{display: inline;}
}

/* menu collapsed state (JS) */
.menu.is-collapsed .menu__body{display:none}

/* ===== BACK TO TOP ===== */
.pagetop{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:50;
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--navy1),var(--navy2));
  box-shadow:0 4px 14px rgba(1,17,23,.28);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease,visibility .3s ease,transform .3s ease,box-shadow .2s ease;
}
.pagetop.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.pagetop:hover{box-shadow:0 6px 18px rgba(1,17,23,.38)}
.pagetop:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pagetop__arrow{
  width:12px;
  height:12px;
  border-top:2px solid var(--chip-tx);
  border-right:2px solid var(--chip-tx);
  transform:rotate(-45deg);
  margin-top:4px;
}
@media (max-width:768px){
  .pagetop{right:16px;bottom:16px;width:46px;height:46px}
  .pagetop__arrow{width:11px;height:11px}
}