:root{
    --sumi:#17191D; --sumi-2:#20242A;
    --shiro:#F7F4EF; --card:#FFFFFF;
    --mokume:#B98A5A; --mokume-deep:#8F6437; --gold-soft:#D9C39A;
    --ink:#23262B; --muted:#666B73; --muted-dark:#A6ABB3;
    --line:#E5E0D6; --line-dark:rgba(255,255,255,.14);
    --maxw:1100px; --r:14px;
    --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  }
  *{margin:0; padding:0; box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
  body{font-family:var(--sans); color:var(--ink); background:var(--shiro);
    line-height:1.9; font-size:16px; -webkit-font-smoothing:antialiased; padding-bottom:74px}
  img{max-width:100%; display:block}
  a{color:inherit}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
  .ph{background:#FFF3B8; padding:0 .2em; border-radius:3px}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font-weight:700; text-decoration:none; border-radius:8px;
    padding:.95rem 1.7rem; font-size:1.02rem; letter-spacing:.04em;
    transition:background .2s ease}
  .btn--gold{background:var(--mokume); color:#fff}
  .btn--gold:hover{background:var(--mokume-deep)}
  .btn--ghost{border:1.5px solid rgba(255,255,255,.45); color:#fff; background:rgba(23,25,29,.35)}
  .btn--ghost:hover{border-color:var(--gold-soft); color:var(--gold-soft)}
  .btn:focus-visible{outline:3px solid var(--mokume); outline-offset:2px}

  header{position:sticky; top:0; z-index:60;
    background:rgba(23,25,29,.94); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line-dark)}
  .header-in{max-width:var(--maxw); margin:0 auto; padding:.65rem 20px;
    display:flex; align-items:center; justify-content:space-between; gap:1rem}
  .header-in .logo{height:34px; width:auto}
  .header-cta{display:none}
  @media(min-width:760px){ .header-cta{display:inline-flex; padding:.55rem 1.2rem; font-size:.9rem} }

  /* ---------- ヒーロー（外観写真を主役に・ゆっくりズーム） ---------- */
.hero{position:relative; background:var(--sumi); overflow:hidden}
.hero-media{
      position:relative; 
     /* height:clamp(420px, 60vh, 640px); */
      overflow:hidden
}
@media(max-width:759px){ 
.hero-media{
    /*height:62vh;
    min-height:440px;*/
    } 
}
.hero-media img{
    width:100%; 
    height:100%; 
    object-fit:cover; 
    object-position:center 70%;
    /*animation:kenburns 20s ease-in-out infinite alternate;*/
    transform-origin:60% 60%;
}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
  .hero-media::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(13,15,18,.18) 0%, rgba(13,15,18,0) 26%, rgba(13,15,18,0) 52%, rgba(13,15,18,.70) 100%)}
.hero-copy{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      z-index:2
}
.hero-copy-in{
      max-width:var(--maxw);
      margin:0 auto;
      padding:0 20px 1.5rem;
}
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.6em;
    font-size:0.9rem;
    letter-spacing:.18em;
    color:var(--gold-soft);
    font-weight:500;
    text-shadow:0 1px 8px rgba(0,0,0,.55);
}
  .hero-eyebrow::before{
      content:""; 
      width:2.2em;
      height:1px;
      background:var(--mokume);
}
@media(max-width:759px){ 
.hero-copy{
      position:relative;
      left:0;
      right:0;
      bottom:0;
      z-index:2
}
.hero-copy-in{
      max-width:var(--maxw);
      margin:0 auto;
      padding:0 20px 1.0rem;
}
.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.6em;
    font-size:0.9rem;
    letter-spacing:0.1rem;
}
  .hero-eyebrow::before{
      content:""; 
      width:2.2em;
      height:1px;
      background:var(--mokume);
}
    
}
  

  .hero h1{
    font-family:var(--serif);
    font-weight:600;
    color:#fff;
    font-size:clamp(1.24rem, 3.6vw, 3.0rem);
    line-height:1.55;
    letter-spacing:clamp(0rem,0.1rem,0.06rem)/*0.06rem*/;
    margin:.55rem 0 0;
    text-shadow:0 1px 16px rgba(0,0,0,.55)
}

  .hero .fade{opacity:0; transform:translateY(10px); animation:rise .9s ease forwards}
  .hero .fade.d1{animation-delay:.12s}
  @keyframes rise{to{opacity:1; transform:none}}
.cg-note{
    position:absolute;
    right:12px;
    bottom:8px;
    z-index:3;
    font-size:.66rem;
    color:rgba(255,255,255,.78);
    text-shadow:0 1px 6px rgba(0,0,0,.65);
    letter-spacing:.04em;
}
@media(max-width:759px){ 
.cg-note{
    position:relative;
    right: 0;
    bottom:0;
}
}
  /* ---------- 日付帯（写真に重ねず、大きく明示） ---------- */
  .date-band{background:#101216; color:#fff;
    border-top:2px solid rgba(185,138,90,.55); border-bottom:1px solid var(--line-dark)}
  .date-band-in{max-width:var(--maxw); margin:0 auto; padding:1.6rem 20px;
    display:grid; gap:1.1rem; align-items:center; grid-template-columns:1fr; text-align:center}
  @media(min-width:900px){
    .date-band-in{grid-template-columns:auto 1fr auto; gap:2rem; text-align:left}
    .db-date{text-align:center}
  }
  .db-name{font-family:var(--serif); font-size:2.0rem; letter-spacing:.12em; line-height:1.6}
  .db-name .badge{display:inline-block; margin-left:.8em; vertical-align:.12em;
    border:1px solid var(--mokume); color:var(--gold-soft); font-size:0.9rem; letter-spacing:.22em;
    padding:.2em .9em; border-radius:99px}
  @media(min-width:900px){ .db-name .badge{display:block; margin:.5rem 0 0; width:fit-content} }
  .date-big{font-family:var(--serif); color:#fff; line-height:1.1;
    display:flex; align-items:baseline; justify-content:center; gap:.16em; flex-wrap:wrap}
  .date-big .num{font-size:clamp(2.7rem, 7vw, 3.7rem); font-weight:600; letter-spacing:.02em; color:var(--gold-soft)}
  .date-big .dot{font-size:1.4rem; color:var(--mokume)}
  .date-big .youbi{font-size:.92rem; color:#C9C6C0; letter-spacing:.1em}
  .db-meta{margin-top:.35rem; font-size:.93rem; color:#D8D5CF; letter-spacing:.08em; text-align:center}
  .db-cta{display:flex; flex-direction:column; gap:.6rem; align-items:center}
  .db-cta .btn{width:min(300px,100%); padding:.85rem 1.2rem}
  .btn--tel-ghost{border:1.5px solid var(--line-dark); color:#fff; background:transparent; font-size:.95rem}
  .btn--tel-ghost:hover{border-color:var(--gold-soft); color:var(--gold-soft)}

  /* ---------- スクロール連動の表示アニメーション ---------- */
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}
  .why-card:nth-child(2){transition-delay:.1s}
  .why-card:nth-child(3){transition-delay:.2s}

  .section{padding:3.6rem 0}
  .sec-label{font-size:.78rem; letter-spacing:.3em; color:var(--mokume-deep); font-weight:700; margin-bottom:.7rem;
    display:flex; align-items:center; gap:.8em}
  .sec-label::after{content:""; flex:0 0 2.4em; height:1px; background:var(--mokume)}
  .sec-title{
    font-family:var(--serif);
    font-weight:600;
    font-size:clamp(1.3rem,3.4vw,1.95rem);
    line-height:1.6;
    letter-spacing:.05em;
    margin-bottom:1.2rem;
}
  .section p.body{max-width:38em; color:#3A3E45}
  .dark .sec-label{color:var(--gold-soft)}
  .dark .sec-title{color:#fff}
  .dark p.body{color:#C9C6C0}

  /* ---------- コンセプト ---------- */
  .concept{background:var(--sumi); color:#fff}
  .concept-grid{display:grid; gap:1.6rem; grid-template-columns:1fr; align-items:center; margin-top:.4rem}
  @media(min-width:860px){ .concept-grid{grid-template-columns:1.05fr .95fr; gap:2.4rem} }
  .concept-photo img{border-radius:var(--r); width:100%}
  .spec-chip{display:inline-flex; align-items:baseline; gap:.7em; margin-top:1.2rem;
    border:1px solid var(--line-dark); border-radius:10px; padding:.6rem 1.1rem; background:rgba(255,255,255,.04)}
  .spec-chip .lbl{font-size:.74rem; letter-spacing:.2em; color:var(--gold-soft)}
  .spec-chip .val{font-family:var(--serif); font-size:1.15rem; color:#fff; letter-spacing:.04em}

  /* ---------- なぜ貴重か ---------- */
  .why{background:var(--shiro)}
  .why-grid{display:grid; gap:1rem; margin-top:1.8rem; grid-template-columns:1fr}
  @media(min-width:760px){ .why-grid{grid-template-columns:repeat(3,1fr)} }
  .why-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem 1.4rem}
  .why-card h3{font-family:var(--serif); font-weight:600; font-size:1.08rem; letter-spacing:.04em;
    margin-bottom:.6rem; padding-bottom:.6rem; border-bottom:1px solid var(--line)}
  .why-card p{font-size:.92rem; color:#4A4E55}

  /* ---------- 見どころ ---------- */
  .midokoro{background:var(--sumi); color:#fff}
  .mk-list{display:grid; gap:2.6rem; margin-top:2.2rem}
  .mk-item{display:grid; gap:1.2rem; grid-template-columns:1fr; align-items:center}
  @media(min-width:820px){
    .mk-item{grid-template-columns:1fr 1fr; gap:2.4rem}
    .mk-item:nth-child(even) .mk-photo{order:2}
  }
  .mk-photo img{width:100%; border-radius:var(--r); border:1px solid rgba(255,255,255,.08)}
  .mk-copy .kwd{font-size:.78rem; letter-spacing:.22em; color:var(--gold-soft); margin-bottom:.5rem}
  .mk-copy h3{font-family:var(--serif); font-weight:600; font-size:1.35rem; line-height:1.7; letter-spacing:.04em; margin-bottom:.7rem}
  .mk-copy p{font-size:.94rem; color:#C9C6C0; max-width:32em}
  .gallery{margin-top:2.8rem; padding-top:2.2rem; border-top:1px solid var(--line-dark)}
  .gallery p.gl-lead{color:#C9C6C0; font-size:.94rem; margin-bottom:1.1rem}
  .gallery-grid{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
  .gallery-grid img{width:100%; height:100%; object-fit:cover; border-radius:var(--r); border:1px solid rgba(255,255,255,.08)}

  /* ---------- お金の話 ---------- */
  .money{background:var(--shiro)}
  .money-panel{margin-top:1.6rem; background:var(--card); border:1px solid var(--line);
    border-left:4px solid var(--mokume); border-radius:var(--r); padding:1.6rem 1.6rem}
  .money-panel ul{list-style:none; margin:.4rem 0 1rem}
  .money-panel li{padding-left:1.4em; position:relative; font-size:.96rem; margin:.45rem 0; color:#3A3E45}
  .money-panel li::before{content:"—"; position:absolute; left:0; color:var(--mokume)}
  .money-panel .note{font-size:.85rem; color:var(--muted)}

  /* ---------- 開催概要 ---------- */
  .gaiyo{background:#EFEAE1}
  .gaiyo-table{width:100%; margin-top:1.4rem; border-collapse:collapse; background:var(--card);
    border:1px solid var(--line); border-radius:var(--r); overflow:hidden; font-size:.95rem}
  .gaiyo-table th,.gaiyo-table td{padding:.95rem 1.1rem; border-bottom:1px solid var(--line);
    vertical-align:top; text-align:left}
  .gaiyo-table tr:last-child th,.gaiyo-table tr:last-child td{border-bottom:none}
  .gaiyo-table th{width:9em; background:#F4F0E8; font-weight:700; color:var(--mokume-deep);
    letter-spacing:.08em; white-space:nowrap}
  @media(max-width:560px){
    .gaiyo-table th,.gaiyo-table td{display:block; width:100%}
    .gaiyo-table th{border-bottom:none; padding-bottom:.2rem}
    .gaiyo-table td{padding-top:.2rem}
  }

  /* ---------- 予約 ---------- */
  .reserve{background:var(--sumi); color:#fff; text-align:center}
  .reserve .sec-label{justify-content:center}
  .reserve .sec-label::after{display:none}
  .reserve-lead{color:#C9C6C0; font-size:.96rem; max-width:34em; margin:0 auto 1.8rem}
  .reserve-btns{display:flex; flex-direction:column; gap:.9rem; align-items:center}
  .reserve-btns .btn{width:min(420px,100%); padding:1.1rem 1rem; font-size:1.08rem}
  .reserve .alt{margin-top:1.4rem; font-size:.88rem; color:var(--muted-dark)}
  .reserve .tel-big{margin-top:1.2rem; font-family:var(--serif); color:#fff}
  .reserve .tel-big a{font-size:clamp(1.7rem,5vw,2.2rem); letter-spacing:.06em; text-decoration:none}
  .reserve .tel-big small{display:block; font-family:var(--sans); font-size:.8rem; color:var(--muted-dark); letter-spacing:.12em; margin-top:.2rem}

  /* ---------- FAQ ---------- */
  .faq{background:var(--shiro)}
  .faq-item{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:1.2rem 1.4rem; margin-top:.9rem}
  .faq-item h3{font-size:1rem; font-weight:700; margin-bottom:.4rem; display:flex; gap:.6em}
  .faq-item h3::before{content:"Q"; color:var(--mokume-deep); font-family:var(--serif)}
  .faq-item p{font-size:.92rem; color:#4A4E55; display:flex; gap:.6em}
  .faq-item p::before{content:"A"; color:var(--muted); font-family:var(--serif); flex:0 0 auto}

  footer{background:#101216; color:var(--muted-dark); padding:2.6rem 0 2.2rem; font-size:.85rem}
  footer .f-logo{height:44px; width:auto; margin-bottom:.8rem; opacity:.95}
  footer .f-nav{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin:.5rem 0 1.1rem;
    padding-bottom:1.1rem; border-bottom:1px solid var(--line-dark)}
  footer .f-nav a{color:#C9C6C0; text-decoration:none; font-size:.86rem; letter-spacing:.06em}
  footer .f-nav a:hover{color:var(--gold-soft)}
  footer .f-tel{color:#fff; font-size:1.5rem; margin:.4rem 0}
  footer .f-tel a{text-decoration:none}
  footer .f-link a{color:var(--gold-soft)}
  footer .legal{margin-top:1rem; font-size:.72rem; line-height:1.8; color:#7E838B}
  footer .copy{margin-top:1.2rem; font-size:.75rem; letter-spacing:.06em}

  .mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:rgba(23,25,29,.96); border-top:1px solid var(--line-dark);
    padding:.6rem .8rem; display:flex; gap:.6rem}
  .mobile-cta .btn{flex:1; padding:.8rem .6rem; font-size:.98rem}
  .mobile-cta .mc-tel{flex:0 0 auto; width:54px; background:#fff /*transparent*/; border:1.5px solid var(--line-dark); color:#fff}
  @media(min-width:760px){ .mobile-cta{display:none} body{padding-bottom:0} }