:root{
  --sumi:#16232E;      /* 瀬長の夜の海 — 見出し・本文 */
  --iron:#4A5860;      /* 鉄板のグレー — 補助テキスト */
  --brass:#A9772F;     /* 落陽の真鍮 — 罫・アクセント */
  --brass-lt:#D8BE8C;
  --paper:#F7F5F0;     /* 地色 */
  --sand:#E8E1D4;      /* 罫・プレースホルダ */
  --white:#FFFFFF;

  --jp-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --jp-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --la-serif:"Cormorant Garamond","Noto Serif JP",serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  color:var(--sumi);
  font-family:var(--jp-sans);
  font-weight:300;
  font-size:16px;
  line-height:2;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.narrow{max-width:820px;margin:0 auto;padding:0 24px;}

/* ---------- 共通見出し ---------- */
.eyebrow{
  font-family:var(--la-serif);
  font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass);margin:0 0 14px;line-height:1;
}
.sec-title{
  font-family:var(--jp-serif);font-weight:400;
  font-size:clamp(21px,2.6vw,27px);letter-spacing:.14em;
  margin:0 0 40px;line-height:1.7;
}
.sec{padding:clamp(72px,9vw,116px) 0;}

/* ---------- ヒーロー ---------- */
.hero{
  background:var(--sumi);color:var(--paper);
  padding:clamp(64px,8vw,96px) 0 0;
  position:relative;overflow:hidden;
}
.hero-inner{text-align:center;position:relative;z-index:2;}
.hero .kicker{
  font-family:var(--la-serif);font-size:12px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--brass-lt);margin:0 0 26px;
}
.hero h1{
  font-family:var(--la-serif);font-weight:300;
  font-size:clamp(46px,9vw,104px);line-height:1;letter-spacing:.02em;
  margin:0;font-style:italic;
}
.hero .jp-sub{
  font-family:var(--jp-serif);font-weight:300;
  font-size:clamp(14px,2.1vw,19px);letter-spacing:.28em;
  margin:28px 0 0;color:#D6D2C8;
}
.hero .lede{
  font-size:14px;line-height:2.4;color:#B9BEC2;
  max-width:640px;margin:34px auto 0;letter-spacing:.06em;
}
.hero-rule{
  width:1px;height:56px;background:linear-gradient(var(--brass),transparent);
  margin:44px auto 0;
}
.hero-visual{margin-top:44px;}

/* 価格帯 */
.price-band{
  background:var(--sumi);color:var(--paper);
  border-top:1px solid rgba(217,190,140,.28);
  padding:34px 0 46px;text-align:center;
}
.price-band .label{
  font-size:12px;letter-spacing:.3em;color:var(--brass-lt);margin:0 0 10px;
}
.price-band .amount{
  font-family:var(--la-serif);font-size:clamp(40px,7vw,62px);
  line-height:1;letter-spacing:.01em;
}
.price-band .amount small{font-family:var(--jp-serif);font-size:.34em;letter-spacing:.14em;margin-left:.5em;}
.price-band .note{font-size:12px;color:#9AA1A6;margin:14px 0 0;letter-spacing:.08em;}

/* ---------- 写真プレースホルダ ---------- */
.slot{
  background:
    repeating-linear-gradient(135deg,rgba(169,119,47,.05) 0 12px,transparent 12px 24px),
    var(--sand);
  border:1px solid rgba(169,119,47,.3);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:var(--iron);
}
.slot .slot-tag{
  font-size:10px;letter-spacing:.24em;color:var(--brass);
  border:1px solid rgba(169,119,47,.5);border-radius:2px;
  padding:4px 10px;display:inline-block;margin-bottom:12px;
}
.slot .slot-spec{font-size:12px;line-height:1.9;letter-spacing:.06em;}
.slot-16x9{aspect-ratio:16/9;}
.slot-4x3{aspect-ratio:4/3;}
.slot-1x1{aspect-ratio:1/1;}
.slot-21x9{aspect-ratio:21/9;}
@media(max-width:640px){ .slot-21x9{aspect-ratio:16/9;} }

/* ---------- コンセプト ---------- */
.concept{background:var(--white);}
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;}
.concept p{margin:0 0 1.6em;font-size:15px;line-height:2.5;color:#2C3942;}
.concept p:last-child{margin-bottom:0;}
@media(max-width:820px){ .concept-grid{grid-template-columns:1fr;} }

/* ---------- コース（署名要素：一本の真鍮の背骨） ---------- */
.menu{position:relative;background: var(--paper);}
.menu-head{text-align:center;margin-bottom:clamp(48px,6vw,76px);}
.courses{position:relative;margin:0;padding:0;list-style:none;}
.courses::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(transparent,var(--brass-lt) 6%,var(--brass-lt) 94%,transparent);
  transform:translateX(-.5px);
}
.course{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px);align-items:center;
  padding:clamp(30px,4vw,44px) 0;position:relative;
}
.course::after{
  content:"";position:absolute;left:50%;top:50%;
  width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1px solid var(--brass);
  transform:translate(-50%,-50%);
}
.course-body{padding:0 clamp(14px,3vw,40px);}
.course:nth-child(even) .course-body{order:-1;text-align:right;}
.course-no{
  font-family:var(--la-serif);font-size:12px;letter-spacing:.3em;
  color:var(--brass);display:block;margin-bottom:10px;
}
.course-la{
  font-family:var(--la-serif);font-style:italic;font-weight:300;
  font-size:clamp(34px,5.4vw,50px);line-height:1;margin:0 0 6px;
}
.course-la .accent{color:var(--brass);}
.course-jp-label{
  font-family:var(--jp-serif);font-size:12px;letter-spacing:.26em;
  color:var(--iron);margin:0 0 20px;
}
.course-dish{
  font-family:var(--jp-serif);font-weight:400;
  font-size:clamp(16px,2.1vw,19px);line-height:1.9;letter-spacing:.09em;
  margin:0 0 12px;
}
.course-desc{font-size:13.5px;line-height:2.2;color:#41505A;margin:0;letter-spacing:.05em;}
.course-list{margin:0;padding:0;list-style:none;}
.course-list li{
  font-size:13.5px;line-height:2.1;color:#41505A;position:relative;padding-left:14px;
}
.course:nth-child(even) .course-list li{padding-left:0;padding-right:14px;}
.course-list li::before{
  content:"";position:absolute;left:0;top:1.05em;width:6px;height:1px;background:var(--brass);
}
.course:nth-child(even) .course-list li::before{left:auto;right:0;}
@media(max-width:820px){
  .courses::before{left:0;}
  .course{grid-template-columns:1fr;gap:20px;padding-left:26px;}
  .course::after{left:0;top:34px;}
  .course:nth-child(even) .course-body{order:0;text-align:left;}
  .course:nth-child(even) .course-list li{padding-left:14px;padding-right:0;}
  .course:nth-child(even) .course-list li::before{left:0;right:auto;}
}

/* ---------- プラン詳細表 ---------- */
.detail{background:var(--white);}
.dl{border-top:1px solid var(--sand);margin:0;}
.dl-row{
  display:grid;grid-template-columns:200px 1fr;
  border-bottom:1px solid var(--sand);
}
.dl-row dt{
  font-family:var(--jp-serif);font-size:13.5px;letter-spacing:.16em;
  color:var(--iron);padding:22px 16px 22px 0;
}
.dl-row dd{margin:0;padding:22px 0;font-size:14.5px;line-height:2.2;}
.dl-row dd .sub{display:block;font-size:12.5px;color:var(--iron);margin-top:4px;}
@media(max-width:640px){
  .dl-row{grid-template-columns:1fr;}
  .dl-row dt{padding:20px 0 0;}
  .dl-row dd{padding:4px 0 20px;}
}

/* ---------- オプション ---------- */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sand);border:1px solid var(--sand);}
.opt{background:var(--paper);padding:34px 26px;}
.opt h3{
  font-family:var(--jp-serif);font-weight:400;font-size:16px;
  letter-spacing:.12em;margin:0 0 8px;
}
.opt .opt-price{font-family:var(--la-serif);font-size:26px;color:var(--brass);line-height:1.3;margin:0 0 10px;}
.opt .opt-price small{font-family:var(--jp-sans);font-size:12px;letter-spacing:.1em;color:var(--iron);margin-left:.4em;}
.opt p{margin:0;font-size:13px;line-height:2.1;color:#41505A;}
@media(max-width:820px){ .opts{grid-template-columns:1fr;} }

/* ---------- 注意事項 ---------- */
.notes{background:var(--sumi);color:#C7CCD0;}
.notes .sec-title{color:var(--paper);}
.notes .eyebrow{color:var(--brass-lt);}
.notes ul{margin:0;padding:0;list-style:none;columns:2;column-gap:56px;}
.notes li{
  font-size:13px;line-height:2.2;padding-left:16px;position:relative;
  margin-bottom:10px;break-inside:avoid;
}
.notes li::before{content:"※";position:absolute;left:0;color:var(--brass-lt);font-size:11px;}
@media(max-width:820px){ .notes ul{columns:1;} }

/* ---------- CTA ---------- */
.cta{text-align:center;background:var(--white);}
.cta .lead{font-family:var(--jp-serif);font-size:clamp(17px,2.4vw,22px);letter-spacing:.1em;margin:0 0 12px;}
.cta .sub{font-size:13.5px;color:var(--iron);margin:0 0 40px;}
.btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-block;padding:19px 52px;text-decoration:none;
  font-size:14px;letter-spacing:.18em;transition:background .3s,color .3s,border-color .3s;
}
.btn-fill{background:var(--sumi);color:var(--paper);border:1px solid var(--sumi);}
.btn-fill:hover,.btn-fill:focus-visible{background:var(--brass);border-color:var(--brass);}
.btn-line{border:1px solid var(--sumi);color:var(--sumi);}
.btn-line:hover,.btn-line:focus-visible{background:var(--sumi);color:var(--paper);}
.tel{margin:36px 0 0;font-family:var(--la-serif);font-size:26px;letter-spacing:.06em;}
.tel span{display:block;font-family:var(--jp-sans);font-size:12px;letter-spacing:.14em;color:var(--iron);margin-top:6px;}

/* ---------- 差し替え要確認マーカー ---------- */
.tbc{
  background:rgba(169,119,47,.14);border-bottom:1px dashed var(--brass);
  padding:0 3px;font-size:.94em;
}
.notes .tbc{background:rgba(216,190,140,.2);border-bottom-color:var(--brass-lt);}

/* ---------- アクセシビリティ ---------- */
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
.reveal{ransform:translateY(16px);transition:opacity .9s ease,transform .9s ease;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
}
