:root{
    --black:#0b0b0d;
    --coal:#121214;
    --coal-2:#18181b;
    --coal-3:#1f1f23;
    --ivory:#f4f1e8;
    --ivory-dim:#c9c4b4;
    --muted:#9d988a;
    --beige:#e7dab6;
    --khaki:#ddd09e;
    --gold:#c2a154;
    --gold-dim:rgba(194,161,84,.45);
    --red:#b3271e;
    --red-bright:#c8352a;
    --red-deep:#7e1a20;
    --blue:#274b7a;
    --blue-deep:#16283f;
    --green:#38603a;
    --ochre:#a86a24;
    --line-green:#06c755;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:"Shippori Mincho B1","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
    color:var(--ivory);
    background:var(--black);
    line-height:1.9;
    line-break:strict;
    word-break:keep-all;
    -webkit-font-smoothing:antialiased;
  }
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  img,svg{display:block}
  a{color:inherit}
  .wrap{max-width:1060px;margin:0 auto;padding:0 22px}
  .wrap-narrow{max-width:760px;margin:0 auto;padding:0 22px}

  /* ---------- pill buttons (reference style: flat beige pill) ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    font-weight:700;letter-spacing:.08em;font-size:14.5px;
    padding:13px 34px;border-radius:999px;transition:filter .15s ease, transform .15s ease;
  }
  .btn:active{transform:translateY(1px)}
  .btn-beige{background:var(--beige);color:#191713;border:1px solid var(--beige)}
  .btn-beige:hover{filter:brightness(1.06)}
  .btn-outline{background:transparent;color:var(--ivory);border:1px solid rgba(244,241,232,.55)}
  .btn-outline:hover{border-color:var(--ivory)}
  .btn svg{flex:none}

  /* ---------- phrase-keep : 意味のまとまりは途中で割らず、改行は文節の切れ目だけ ---------- */
  .ph{white-space:nowrap}
  p,li{text-wrap:pretty}

  /* ---------- HERO : Fuji / sunrise / pine / dragonfly, large and faint, text on top ---------- */
  .hero{
    position:relative;overflow:hidden;text-align:center;
    background:#060a13;color:var(--ivory);
  }
  .hero-bg{position:absolute;inset:0;z-index:0}
  .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:.46}
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(4,6,10,.5) 0%, rgba(4,6,10,.22) 34%, rgba(4,6,10,.6) 74%, rgba(11,11,13,.96) 100%),
      radial-gradient(ellipse 90% 55% at 50% 38%, transparent 40%, rgba(4,6,10,.42) 100%);
  }
  .hero-inner{position:relative;z-index:1;padding:76px 20px 64px}
  .hero-name{
    margin:0;font-weight:800;letter-spacing:.3em;text-indent:.3em;
    font-size:clamp(30px,6.4vw,44px);color:#fdf9ec;line-height:1.3;
    text-shadow:0 2px 18px rgba(0,0,0,.6);
  }
  .hero-roman{margin:8px 0 0;font-size:12px;letter-spacing:.62em;text-indent:.62em;color:var(--beige)}
  .hero-tag{
    margin:26px 0 0;font-weight:700;letter-spacing:.14em;
    font-size:clamp(16px,3.6vw,20px);color:#f3dfae;text-shadow:0 1px 12px rgba(0,0,0,.65);
  }
  .hero-title{
    margin:8px 0 0;font-weight:900;letter-spacing:.22em;text-indent:.22em;
    font-size:clamp(46px,11vw,78px);color:#fdf9ec;line-height:1.25;
    text-shadow:0 3px 22px rgba(0,0,0,.65);
  }
  .hero-lead{
    margin:22px auto 0;max-width:620px;font-size:clamp(13.5px,3vw,15.5px);
    color:var(--ivory);line-height:2.05;text-shadow:0 1px 10px rgba(0,0,0,.7);
  }
  .hero-rule{margin:28px auto 0;width:64px;height:1px;background:var(--gold)}
  .hero-aim{
    margin:26px auto 0;font-weight:600;letter-spacing:.1em;
    font-size:clamp(14px,3.2vw,16px);color:var(--beige);
  }
  .hero-meta{
    margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;max-width:820px;
    font-size:13.5px;letter-spacing:.08em;color:var(--ivory-dim);
  }
  .hero-meta span{padding:0 16px;border-right:1px solid rgba(244,241,232,.28)}
  .hero-meta span:last-child{border-right:none}
  .hero-meta strong{color:#fff;font-weight:800}
  .hero-cta{margin:36px auto 0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

  /* ---------- section heads : big kanji + small English, reference style ---------- */
  section{padding:96px 0}
  section.band{background:var(--coal)}
  .sec-head{text-align:center;margin-bottom:54px}
  .sec-head .kanji{
    margin:0;font-weight:700;color:var(--ivory);line-height:1.4;
    font-size:clamp(30px,6vw,42px);letter-spacing:.34em;text-indent:.34em;
  }
  .sec-head .en{
    margin:10px 0 0;font-size:12.5px;letter-spacing:.44em;text-indent:.44em;color:var(--beige);
  }
  .sec-head .rule{margin:20px auto 0;width:56px;height:1px;background:var(--gold)}
  .sec-head p{margin:22px auto 0;max-width:620px;color:var(--muted);font-size:14.5px;line-height:2}

  /* ---------- ABOUT : centered statements on black ---------- */
  .about-list{max-width:720px;margin:0 auto;text-align:center}
  .about-item{padding:30px 10px;border-bottom:1px solid rgba(244,241,232,.13)}
  .about-item:first-child{padding-top:6px}
  .about-item:last-child{border-bottom:none;padding-bottom:0}
  .about-item .no{
    display:block;font-size:11.5px;letter-spacing:.4em;text-indent:.4em;color:var(--red-bright);margin-bottom:10px;font-weight:700;
  }
  .about-item p{margin:0;font-size:clamp(16px,3.6vw,19px);font-weight:600;line-height:2.1}
  .about-item strong{color:#fff;font-weight:800}

  /* ---------- PHILOSOPHY : alternating editorial splits, gold-on-indigo medallion panels ---------- */
  .split{
    display:grid;grid-template-columns:1fr 1fr;min-height:300px;margin-bottom:26px;
    background:var(--coal-2);overflow:hidden;
  }
  .split:last-child{margin-bottom:0}
  .split .txt{
    padding:52px 48px;display:flex;flex-direction:column;justify-content:center;
  }
  .split .txt .en{
    margin:0;font-size:13px;letter-spacing:.34em;font-weight:700;
  }
  .split .txt h3{
    margin:14px 0 0;font-size:clamp(20px,4.4vw,26px);font-weight:700;line-height:2;letter-spacing:.04em;color:#fff;
  }
  /* visual panel : deep indigo lacquer, gold-foil glyph in a double ring — hero's world */
  .split .vis{
    position:relative;overflow:hidden;min-height:240px;
    background:
      radial-gradient(ellipse 78% 62% at 50% 44%, var(--vis-glow,rgba(194,161,84,.16)) 0%, transparent 62%),
      radial-gradient(ellipse 120% 90% at 50% 118%, rgba(0,0,0,.55) 0%, transparent 55%),
      linear-gradient(158deg,#131a2b 0%, #0a0f1e 52%, #05080f 100%);
  }
  /* fine gold inner frame */
  .split .vis::after{
    content:"";position:absolute;inset:13px;pointer-events:none;
    border:1px solid rgba(194,161,84,.38);
    box-shadow:inset 0 0 0 1px rgba(5,8,15,.65), inset 0 0 34px rgba(0,0,0,.45);
  }
  .split .vis .glyph{
    position:absolute;inset:0;display:grid;place-items:center;
    font-size:clamp(120px,20vw,190px);font-weight:900;line-height:1;
    background:linear-gradient(168deg,#f9ecc0 0%, #ecd28a 30%, #cfa855 55%, #9a742f 78%, #d9b968 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 3px 3px rgba(0,0,0,.55)) drop-shadow(0 10px 26px rgba(0,0,0,.5));
  }
  /* double gold ring (enso-like medallion) around the glyph */
  .split .vis .glyph::before,
  .split .vis .glyph::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    border-radius:50%;pointer-events:none;
  }
  .split .vis .glyph::before{
    width:1.52em;height:1.52em;
    border:1px solid rgba(233,205,130,.9);
    box-shadow:0 0 22px rgba(194,161,84,.22), inset 0 0 18px rgba(194,161,84,.14);
  }
  .split .vis .glyph::after{
    width:1.38em;height:1.38em;
    border:1px solid rgba(194,161,84,.45);
  }
  .split.flip .txt{order:2}
  .split.flip .vis{order:1}
  /* per-card accent survives only as a faint undertone in the glow */
  .split.c-red{--vis-glow:rgba(179,39,30,.30)}
  .split.c-red .en{color:#e0a08e}
  .split.c-green{--vis-glow:rgba(56,96,58,.34)}
  .split.c-green .en{color:#a9c49b}
  .split.c-blue{--vis-glow:rgba(39,75,122,.40)}
  .split.c-blue .en{color:#a3bce0}
  .split.c-ochre{--vis-glow:rgba(168,106,36,.32)}
  .split.c-ochre .en{color:#e6c084}

  /* ---------- EVENTS : flat panels, diagonal wedge, kanji numeral ---------- */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .event{
    position:relative;background:var(--coal-2);padding:44px 34px 38px;overflow:hidden;
  }
  .event::after{
    content:"";position:absolute;top:0;right:0;width:120px;height:120px;
    clip-path:polygon(100% 0, 0 0, 100% 100%);
  }
  .event.w-red::after{background:var(--red)}
  .event.w-blue::after{background:var(--blue)}
  .event.w-green::after{background:var(--green)}
  .event.w-ochre::after{background:var(--ochre)}
  .event .num{
    font-size:15px;letter-spacing:.4em;color:var(--muted);font-weight:700;
  }
  .event h3{
    margin:16px 0 0;font-size:clamp(22px,5vw,27px);font-weight:700;letter-spacing:.16em;color:#fff;line-height:1.5;
  }
  .event p{margin:14px 0 0;font-size:14.5px;color:var(--ivory-dim);line-height:2;max-width:88%}
  .event-note{
    margin:44px auto 0;text-align:center;font-weight:700;font-size:16.5px;letter-spacing:.1em;color:var(--ivory);
    display:flex;align-items:center;gap:18px;max-width:760px;
  }
  .event-note::before,.event-note::after{content:"";flex:1;height:1px;background:rgba(244,241,232,.2)}

  /* ---------- photo band ---------- */
  .photo-band{height:clamp(200px,34vw,340px);overflow:hidden;position:relative}
  .photo-band img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
  .photo-band::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg, rgba(11,11,13,.55) 0%, transparent 42%, transparent 70%, rgba(11,11,13,.4) 100%);
  }

  /* ---------- VALUE : hairline rows ---------- */
  .value-list{max-width:820px;margin:0 auto;border-top:1px solid rgba(244,241,232,.14)}
  .value-item{
    display:flex;gap:18px;align-items:baseline;padding:24px 8px;
    border-bottom:1px solid rgba(244,241,232,.14);
    font-size:clamp(15.5px,3.6vw,18px);font-weight:600;line-height:1.95;
  }
  .value-item .mark{
    flex:none;width:22px;height:22px;transform:translateY(4px);
    background:var(--red);border-radius:2px;display:grid;place-items:center;
  }
  .value-item .mark svg{width:12px;height:12px}

  /* ---------- FEE : spec table (khaki label column / dark value column) ---------- */
  .spec-table{max-width:860px;margin:0 auto;border:1px solid rgba(244,241,232,.16)}
  .spec-row{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid rgba(11,11,13,.9)}
  .spec-row:last-child{border-bottom:none}
  .spec-row .k{
    background:var(--khaki);color:#23200f;font-weight:700;font-size:14px;letter-spacing:.12em;
    padding:20px 22px;display:flex;align-items:center;
  }
  .spec-row .v{background:var(--coal-3);padding:20px 26px;font-size:15px;line-height:1.95;color:var(--ivory)}
  .spec-row .v .price{font-size:clamp(30px,6.4vw,40px);font-weight:900;color:#fff;letter-spacing:.03em;line-height:1.3}
  .spec-row .v .price small{font-size:15px;font-weight:700;color:var(--ivory-dim)}
  .spec-row .v ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  .spec-row .v li{display:flex;gap:10px;align-items:baseline}
  .spec-row .v li::before{content:"";flex:none;width:6px;height:6px;transform:rotate(45deg) translateY(-1px);background:var(--gold)}
  .spec-row .v .terms{display:flex;flex-wrap:wrap;gap:8px 18px}
  .spec-row .v .terms span{display:inline-flex;gap:8px;align-items:center}
  .spec-row .v .terms svg{width:13px;height:13px;flex:none}
  .fee-sub{
    max-width:860px;margin:18px auto 0;text-align:right;font-size:13px;color:var(--muted);
  }

  /* ---------- TIMING ---------- */
  .timing{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .timing-card{background:var(--coal-2);overflow:hidden}
  .timing-card .head{
    padding:20px 28px;color:#fff;font-weight:700;font-size:18px;letter-spacing:.06em;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;overflow:hidden;
  }
  .timing-card .head::after{
    content:"";position:absolute;top:0;right:0;width:90px;height:100%;
    background:rgba(0,0,0,.28);clip-path:polygon(55% 0, 100% 0, 100% 100%, 0 100%);
  }
  .timing-card.early .head{background:linear-gradient(120deg,var(--red-bright),var(--red-deep))}
  .timing-card.late .head{background:linear-gradient(120deg,#35619c,var(--blue-deep))}
  .timing-card .head .tag{
    border:1px solid rgba(255,255,255,.7);font-size:11.5px;padding:2px 11px;border-radius:999px;letter-spacing:.12em;font-weight:700;
  }
  .timing-card .body{padding:26px 28px;font-size:15.5px;color:var(--ivory-dim);line-height:2.05}
  .timing-card .body strong{color:#fff;font-weight:800}

  /* ---------- PAYMENT flow ---------- */
  .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:stretch;max-width:920px;margin:0 auto}
  .flow-step{background:var(--coal-2);padding:34px 18px 30px;text-align:center}
  .flow-step .step-no{font-size:11px;letter-spacing:.4em;text-indent:.4em;color:var(--muted);font-weight:700}
  .flow-step .day{margin-top:12px;font-weight:900;font-size:clamp(21px,4.6vw,25px);color:#fff;letter-spacing:.05em;line-height:1.4}
  .flow-step .day em{font-style:normal;color:var(--red-bright)}
  .flow-step p{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.8}
  .flow-arrow{display:grid;place-items:center;color:var(--gold)}
  .flow-arrow svg{width:22px;height:22px}

  /* ---------- RULES ---------- */
  .rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .rule-card{background:var(--coal-2);padding:38px 34px 34px}
  .rule-card h3{
    margin:0;font-size:18px;font-weight:700;letter-spacing:.14em;color:#fff;
    padding-bottom:14px;border-bottom:1px solid rgba(244,241,232,.18);
    display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  }
  .rule-card h3 .en{font-size:10.5px;letter-spacing:.3em;color:var(--beige);font-weight:700}
  .rule-card h3 + h3{margin-top:0}
  .rule-block + .rule-block{margin-top:38px}
  .rule-card ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
  .rule-card li{display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--ivory-dim);line-height:1.95}
  .rule-card li::before{content:"";flex:none;width:6px;height:6px;transform:rotate(45deg);background:var(--gold)}
  .rule-card li strong{color:#fff;font-weight:800}

  /* ---------- CTA : Japan-red band with diagonal shade ---------- */
  .cta{
    position:relative;overflow:hidden;text-align:center;color:#fdf3df;
    background:linear-gradient(140deg,#93202a 0%, var(--red-deep) 58%, #5c1216 100%);
    padding:72px 30px 64px;
  }
  .cta::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(115deg, transparent 62%, rgba(0,0,0,.3) 62.2%);
  }
  .cta > *{position:relative;z-index:1}
  .cta .en{margin:0;font-size:12px;letter-spacing:.44em;text-indent:.44em;color:#eec9a8;font-weight:700}
  .cta h2{
    margin:18px 0 0;font-weight:800;font-size:clamp(23px,5.4vw,33px);letter-spacing:.05em;line-height:1.65;
  }
  .cta h2 .keyword{
    background:var(--ivory);color:var(--red-deep);padding:1px 14px;white-space:nowrap;border-radius:2px;
  }
  .cta p{margin:20px auto 0;max-width:560px;font-size:14.5px;color:#f3d9c8;line-height:2}
  .cta-steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:780px;margin:38px auto 0;text-align:left;
  }
  .cta-step{border:1px solid rgba(255,238,210,.4);padding:18px 20px;font-size:14px;line-height:1.8;background:rgba(0,0,0,.14)}
  .cta-step .num{display:block;font-weight:800;color:#f0cf9e;font-size:12px;letter-spacing:.3em;margin-bottom:5px}
  .cta .sub{margin-top:26px;font-size:12.5px;color:#e8bfa5}

  /* ---------- FOOTER ---------- */
  footer{background:#08080a;text-align:center}
  .foot-scene{width:100%;height:auto}
  .foot-brand{padding:44px 20px 40px}
  .foot-brand .name{margin:0;font-size:26px;font-weight:800;letter-spacing:.34em;text-indent:.34em;color:var(--ivory)}
  .foot-brand .roman{margin:6px 0 0;font-size:10.5px;letter-spacing:.55em;text-indent:.55em;color:var(--muted)}

  /* sticky mobile bar */
  .sticky-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,8,10,.94);backdrop-filter:blur(8px);border-top:1px solid rgba(194,161,84,.4);
    transform:translateY(110%);transition:transform .3s ease;
  }
  .sticky-bar.show{transform:none}
  .sticky-bar a{
    display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;
    background:var(--line-green);text-decoration:none;font-weight:700;font-size:15.5px;
    padding:13px;border-radius:999px;font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;letter-spacing:.04em;
  }
  .sticky-bar svg{width:20px;height:20px}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .sticky-bar{transition:none}
    .btn{transition:none}
  }

  @media (max-width:900px){
    .split{grid-template-columns:1fr}
    .split .txt{order:2;padding:38px 28px}
    .split .vis{order:1;min-height:190px}
    .flow{grid-template-columns:1fr;gap:12px}
    .flow-arrow{transform:rotate(90deg);padding:2px 0}
  }
  @media (max-width:640px){
    section{padding:68px 0}
    .grid2,.timing,.rule-grid,.cta-steps{grid-template-columns:1fr}
    .hero-inner{padding:56px 16px 50px}
    .hero-meta span{padding:0 10px}
    .spec-row{grid-template-columns:118px 1fr}
    .spec-row .k{padding:16px 14px;font-size:12.5px}
    .spec-row .v{padding:16px 18px;font-size:14px}
    .sticky-bar{display:block}
    body{padding-bottom:74px}
  }