/* =========================================================
   つきじ治作 — culture ページ固有スタイル（抽出元: culture/index.html の <style>）
   body名前空間: page-culture / url(): css/pages/基準 ../../images/
   ========================================================= */
/* Unified dark navy — match top page palette */
:root{
  --ink:#1a2638;
  --ink-2:#1a2638;
}
html, body, body.is-day{
  background-color:#1a2638 !important;
  color:var(--mute);
}
.header.is-scrolled{background:rgba(26,38,56,.85);}

/* ============================================================
   CULTURE — page-scoped redesign
   Unified dark navy background, no per-section variation.
   ============================================================ */
.culture-page{
  --bg:#1a2638;
  --cream:#efe8d6;
  --cream-soft:rgba(239,232,214,.78);
  --cream-mute:rgba(239,232,214,.55);
  --gold:#c9a464;
  --gold-hi:#e2c58a;
  --line:rgba(201,164,100,.55);
  --line-soft:rgba(201,164,100,.25);
  --ink:#1a2638;
  --gutter:clamp(24px,8vw,120px);
  --section-pad:clamp(90px,11vw,160px);

  padding-top:110px;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.85;
  letter-spacing:.04em;
  font-feature-settings:"palt";
}
.culture-page *{box-sizing:border-box;}
.culture-page img{max-width:100%;display:block;}
.culture-page a{color:inherit;text-decoration:none;}

.culture-wrap{
  max-width:1600px;margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
}

.section-head{
  text-align:center;
  margin-bottom:clamp(50px,6vw,90px);
}
.senses .section-head{
  margin-bottom:clamp(80px,10vw,150px);
}

/* ============================================================
   FEATURE INTRO — shared lead heading before dining/banquet
   ============================================================ */
.feature-intro{
  padding:clamp(70px,9vw,130px) 0 0;
}
.feature-intro__head{
  text-align:center;
  max-width:48em;margin-inline:auto;
}
.feature-intro__h{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,2.8vw,34px);letter-spacing:.18em;line-height:1.7;
  color:var(--cream);
  margin:0;
}
.feature-intro__lead{
  margin:22px 0 0;
  font-size:13px;line-height:2;letter-spacing:.1em;
  color:var(--cream-soft);
}
.feature-intro + .feature{padding-top:clamp(40px,5vw,80px);}
.section-h{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,2.8vw,34px);letter-spacing:.18em;
  color:var(--cream);
  margin:0;
}
.section-lead{
  margin:22px 0 0;
  font-size:13px;line-height:2;letter-spacing:.1em;
  color:var(--cream-soft);
}

/* ============================================================
   1. SENSES — central image + 5 nodes around a dotted ring
   ============================================================ */
.senses{
  padding:clamp(80px,10vw,140px) 0 clamp(60px,8vw,120px);
}
.senses__wheel{
  position:relative;
  width:min(680px, 100%);
  margin:clamp(60px,7vw,100px) auto 0;
  aspect-ratio:1/1;
}
.senses__ring{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}
.senses__center{
  position:absolute;
  top:50%;left:50%;
  width:46%;aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  background:#0f1827;
  z-index:1;
}
.senses__center::after{
  content:"";position:absolute;inset:0;
  border-radius:50%;
  border:1px solid var(--line-soft);
  pointer-events:none;
}
.senses__center img{
  width:100%;height:100%;object-fit:cover;
}
.senses__nodes{
  position:absolute;inset:0;
  list-style:none;margin:0;padding:0;
  z-index:2;
}
.senses__node{
  position:absolute;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px;
  width:clamp(150px,22%,200px);
  transform:translate(-50%, -27px);
}
/* Precise positions on the gold ring (r=44%, 5 nodes at 72° intervals).
   Icon center sits on the circle; transform shifts the node so the icon's
   center (icon is 54px tall, so 27px) lands on the coord. */
.senses__node--top  {top:6%;    left:50%;}
.senses__node--right{top:36.4%; left:91.85%;}
.senses__node--left {top:36.4%; left:8.15%;}
.senses__node--br   {top:85.6%; left:75.86%; flex-direction:column-reverse; transform:translate(-50%, calc(-100% + 27px));}
.senses__node--bl   {top:85.6%; left:24.14%; flex-direction:column-reverse; transform:translate(-50%, calc(-100% + 27px));}
.senses__node-icon{
  width:54px;height:54px;border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);
}
.senses__node-icon svg{width:24px;height:24px;}
.senses__node-h{
  font-family:var(--serif);font-weight:500;
  font-size:14px;letter-spacing:.18em;
  color:var(--cream);
  margin:0;
}
.senses__node-desc{
  font-size:11px;line-height:1.7;letter-spacing:.06em;
  color:var(--cream-soft);
  margin:0;
}

/* ============================================================
   FEATURE — large showcase (dining / banquet)
   Full-bleed: image edge-to-edge on outer side
   ============================================================ */
.feature{
  padding:clamp(70px,9vw,130px) 0;
}
.feature__inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:stretch;
  gap:0;
}
.feature--reverse .feature__inner{
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
}
.feature--reverse .feature__media{order:2;}
.feature__media{
  position:relative;
  /* ★ 幅を列に固定する。無いと、本文の方が背が高いとき（タブレット幅など）に
     aspect-ratio が「引き伸ばされた高さ」から幅を逆算し、画像が列をはみ出して文字に重なる */
  width:100%;min-width:0;
  aspect-ratio:1.45/1;
  overflow:hidden;
  background:#0f1827;
}
.feature__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s ease;
}
.feature__inner:hover .feature__media img{transform:scale(1.04);}
.feature__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(8px,1.5vw,24px) var(--gutter) clamp(8px,1.5vw,24px) clamp(40px,5vw,80px);
  gap:18px;
}
.feature--reverse .feature__body{
  padding:clamp(8px,1.5vw,24px) clamp(40px,5vw,80px) clamp(8px,1.5vw,24px) var(--gutter);
}
.feature__en{
  font-family:var(--en-serif,serif);font-weight:500;font-style:italic;
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);
}
.feature__h{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,2.8vw,34px);letter-spacing:.18em;line-height:1.5;
  color:var(--cream);
  margin:0;
}
.feature__sub{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(15px,1.4vw,18px);letter-spacing:.14em;
  color:var(--cream-soft);
  margin:-6px 0 4px;
}
.feature__desc{
  font-size:14px;line-height:2.1;letter-spacing:.08em;
  color:var(--cream-soft);
  margin:0;max-width:34em;
}
.feature__meta{
  list-style:none;margin:0;padding:14px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;
  border-top:.5px solid var(--line-soft);
  border-bottom:.5px solid var(--line-soft);
}
.feature__meta li{
  position:relative;padding-left:14px;
  font-size:12px;line-height:1.85;letter-spacing:.08em;
  color:var(--cream-soft);
}
.feature__meta li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:7px;height:.5px;background:var(--gold);
}
.feature__btn{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 28px;margin-top:6px;
  border:1px solid var(--line);
  color:var(--cream);
  font-family:var(--serif);font-size:12px;letter-spacing:.24em;
  transition:background .3s, color .3s, border-color .3s;
}
.feature__btn::after{
  content:"→";transition:transform .3s ease;
}
.feature__btn:hover{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.feature__btn:hover::after{transform:translateX(4px);}

/* ============================================================
   PROGRAMS — image-overlay cards with link button
   ============================================================ */
.programs{
  padding:clamp(80px,10vw,140px) 0 clamp(60px,7vw,100px);
}
.programs__rail{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(16px,2.4vw,32px);
  align-items:center;
}
.programs__arrow{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.programs__arrow:hover{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.programs__track{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}
.programs__card{
  position:relative;
  display:block;
  aspect-ratio:3/4.2;
  overflow:hidden;
  border:none;
  background:#0f1827;
  isolation:isolate;
}
.programs__img{
  position:absolute;inset:0;
  overflow:hidden;
  z-index:0;
}
.programs__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s ease;
}
.programs__card:hover .programs__img img{transform:scale(1.06);}
.programs__overlay{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,2.4vw,30px);
  background:linear-gradient(
    180deg,
    rgba(26,38,56,0) 0%,
    rgba(26,38,56,.25) 38%,
    rgba(26,38,56,.78) 72%,
    rgba(26,38,56,.94) 100%
  );
  text-align:left;
}
.programs__title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(15px,1.4vw,18px);letter-spacing:.18em;
  color:var(--cream);
  margin:0 0 8px;
}
.programs__desc{
  font-size:11.5px;line-height:1.85;letter-spacing:.05em;
  color:var(--cream-soft);
  margin:0 0 14px;
}
.programs__btn{
  display:inline-flex;align-items:center;gap:10px;
  align-self:flex-start;
  font-family:var(--serif);font-size:11px;letter-spacing:.22em;
  color:var(--gold-hi);
  padding:0 0 4px;
  border-bottom:.5px solid var(--gold);
  transition:color .3s, letter-spacing .3s, border-color .3s;
}
.programs__btn::after{
  content:"→";transition:transform .3s ease;
}
.programs__card:hover .programs__btn{
  color:var(--cream);
  border-color:var(--cream);
  letter-spacing:.26em;
}
.programs__card:hover .programs__btn::after{transform:translateX(4px);}


.programs__dots span.is-active{
  width:26px;border-radius:3px;
  background:var(--gold);
}

/* ============================================================
   3. AESTHETICS — alternating image + text rows
   ============================================================ */
.aesthetics{
  padding:clamp(80px,10vw,140px) 0;
}
.aesthetics__list{
  display:flex;flex-direction:column;
  gap:clamp(60px,8vw,120px);
}
.aesthetics__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(40px,5vw,80px);
}
.aesthetics__row--reverse .aesthetics__media{order:2;}
.aesthetics__media{
  position:relative;
  aspect-ratio:1.7/1;
  overflow:hidden;
}
.aesthetics__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.aesthetics__body{
  padding:0 clamp(0px,2vw,24px);
}
.aesthetics__title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:.16em;
  color:var(--cream);
  margin:0 0 18px;line-height:1.5;
}
.aesthetics__desc{
  font-size:14px;line-height:2.1;letter-spacing:.08em;
  color:var(--cream-soft);
  margin:0;max-width:34em;
}

/* ============================================================
   4. FLOW — 4-step process
   ============================================================ */
.flow{
  padding:clamp(80px,10vw,140px) 0;
}
.flow__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(20px,2.5vw,40px);
  position:relative;
  list-style:none;margin:0;padding:0;
}
.flow__grid::before{
  content:"";
  position:absolute;
  top:72px;left:12.5%;right:12.5%;
  height:1px;background:var(--line-soft);
  z-index:0;
}
.flow__step{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;position:relative;z-index:1;
  padding:0 clamp(8px,1.5vw,18px);
}
.flow__num{
  font-family:var(--en-serif,serif);font-style:italic;font-weight:500;
  font-size:18px;color:var(--gold);
  letter-spacing:.05em;line-height:1;
  margin-bottom:12px;
}
.flow__icon{
  width:84px;height:84px;border-radius:50%;
  background:var(--bg);
  border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);
  margin-bottom:24px;
}
.flow__icon svg{width:32px;height:32px;}
.flow__h{
  font-family:var(--serif);font-weight:500;font-size:15px;
  letter-spacing:.18em;color:var(--cream);margin:0 0 14px;
}
.flow__body{
  font-size:12px;line-height:1.95;letter-spacing:.06em;
  color:var(--cream-mute);max-width:18em;margin:0;
}

/* ============================================================
   5. FAQ — 2-col
   ============================================================ */
.faq{
  padding:clamp(80px,10vw,140px) 0;
}
.faq__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:start;
  gap:0 clamp(50px,6vw,90px);
  border-top:1px solid var(--line-soft);
}
.faq__item{
  border-bottom:1px solid var(--line-soft);
}
.faq__head{
  display:flex;align-items:center;gap:18px;
  padding:24px 4px;
  cursor:pointer;
  transition:color .25s;
}
.faq__head:hover{color:var(--gold-hi);}
.faq__q{
  font-family:var(--en-serif,serif);font-style:italic;
  font-size:20px;color:var(--gold);font-weight:500;
  flex-shrink:0;line-height:1;width:28px;
}
.faq__text{
  font-family:var(--serif);font-size:13px;letter-spacing:.12em;
  color:var(--cream);flex:1;
}
.faq__chev{
  width:9px;height:9px;flex-shrink:0;
  border-right:1px solid var(--cream-mute);
  border-bottom:1px solid var(--cream-mute);
  transform:rotate(-45deg);
  transition:transform .3s, border-color .3s;
}
.faq__head:hover .faq__chev{border-color:var(--gold-hi);}
.faq__a{
  max-height:0;overflow:hidden;opacity:0;
  padding:0 4px 0 46px;
  font-family:var(--serif);font-size:13px;line-height:1.95;letter-spacing:.06em;
  color:var(--cream-mute);
  transition:max-height .4s ease,opacity .3s ease,padding .4s ease;
}
.faq__item.is-open .faq__a{
  max-height:340px;opacity:1;
  padding:2px 4px 24px 46px;
}
.faq__item.is-open .faq__chev{transform:rotate(45deg);}

/* ============================================================
   6. CONTACT — Contact CTA panel
   ============================================================ */
.contact{
  padding:clamp(80px,10vw,140px) 0 clamp(100px,12vw,160px);
}
.contact__inner{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:clamp(20px,2.4vw,32px);
}
.contact__en{
  font-family:var(--en-serif,serif);font-weight:500;
  font-size:11px;letter-spacing:.4em;
  color:var(--gold);text-transform:uppercase;
}
.contact__h{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:.2em;
  color:var(--cream);
  margin:0;
}
.contact__sub{
  font-size:13px;letter-spacing:.1em;line-height:1.95;
  color:var(--cream-mute);
  margin:0;
}
.contact__bar{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px,1.4vw,22px);
  width:100%;max-width:960px;
  margin-top:clamp(16px,2vw,28px);
}
.contact__bar a{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:22px 18px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--cream);
  font-family:var(--serif);font-size:13px;letter-spacing:.18em;
  transition:background .3s, color .3s, border-color .3s;
}
.contact__bar a:hover{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
}
.contact__bar .ico{
  display:inline-flex;color:var(--gold-hi);
  transition:color .3s;
}
.contact__bar a:hover .ico{color:var(--ink);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .programs__track{grid-template-columns:repeat(3, minmax(0,1fr));}
  .programs__track > a:nth-child(4){display:none;}
  .flow__grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:50px 20px;}
  .flow__grid::before{display:none;}
}
@media (max-width:900px){
  .senses__wheel{
    aspect-ratio:auto;
    display:flex;flex-direction:column;align-items:center;gap:32px;
  }
  .senses__ring{display:none;}
  .senses__center{
    position:relative;top:auto;left:auto;transform:none;
    width:min(280px, 70%);
  }
  .senses__nodes{
    position:relative;inset:auto;
    display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
    gap:36px 24px;
    width:100%;
  }
  .senses__node,
  .senses__node--br,
  .senses__node--bl{
    position:relative;top:auto;left:auto;transform:none;
    flex-direction:column;
    width:100%;
  }
  /* 5 nodes in 2-col grid: last node is alone — center it across both columns */
  .senses__nodes > .senses__node:last-child{
    grid-column:1 / -1;
    justify-self:center;
    max-width:calc(50% - 12px);
  }
  /* Slightly larger text without the circle's space constraint */
  .senses__node-icon{width:60px;height:60px;}
  .senses__node-icon svg{width:26px;height:26px;}
  .senses__node-h{font-size:15px;letter-spacing:.16em;}
  .senses__node-desc{font-size:12px;line-height:1.95;}
  .programs__rail{grid-template-columns:1fr;}
  .programs__arrow{display:none;}
  .programs__track{grid-template-columns:repeat(2, minmax(0,1fr));}
  .programs__track > a:nth-child(4){display:block;}
  .aesthetics__row,
  .aesthetics__row--reverse{grid-template-columns:1fr; gap:30px;}
  .aesthetics__row--reverse .aesthetics__media{order:0;}
  .feature__inner,
  .feature--reverse .feature__inner{grid-template-columns:1fr; gap:24px;}
  .feature--reverse .feature__media{order:0;}
  .feature__body,
  .feature--reverse .feature__body{
    padding:clamp(20px,3vw,32px) var(--gutter) 0;
  }
  .feature__meta{grid-template-columns:1fr;}
  .faq__grid{grid-template-columns:1fr;}
  .contact__bar{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .programs__track{grid-template-columns:1fr;}
  .programs__track > a:nth-child(n+3){display:none;}
  .senses__nodes{grid-template-columns:1fr; gap:32px;}
  .senses__nodes > .senses__node:last-child{
    grid-column:auto; max-width:none; justify-self:auto;
  }
  .senses__center{width:min(240px, 75%);}
  .flow__grid{grid-template-columns:1fr; gap:36px;}
}

/* Remove footer top margin (defaults to 120px in global style.css) */
.culture-page + .footer{margin-top:0;}