/* =========================================================
   KING REON  ―  案C「GATEWAY」 目的別ハブ型 / 下層ページ展開
   ========================================================= */

:root{
  --black:#111111;
  --charcoal:#1D1D1F;
  --panel:#202023;
  --white:#F5F5F5;
  --gold:#C8A45D;
  --gold-2:#e3c68e;
  --red:#B8232F;
  --grey:#8B8F94;
  --line:rgba(245,245,245,.11);
  --gline:rgba(200,164,93,.3);
  --maxw:1300px;
  --ease:cubic-bezier(.25,.6,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:"Zen Kaku Gothic New","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,sans-serif;
  font-size:15px;line-height:1.88;letter-spacing:.03em;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,dt{margin:0}
.sg{font-family:"Space Grotesk",-apple-system,"Segoe UI",sans-serif;letter-spacing:.14em}
.wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto}
.wrap-n{width:min(100% - 40px,980px);margin-inline:auto}

/* ============ HEADER ============ */
.hd{position:sticky;top:0;z-index:100;background:rgba(17,17,17,.93);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hd__in{display:flex;align-items:center;gap:22px;height:68px}
.hd__logo{margin-right:auto;line-height:1.15}
.hd__logo b{font-family:"Space Grotesk",sans-serif;font-size:21px;letter-spacing:.2em;font-weight:500;display:block}
.hd__logo small{font-size:10px;color:var(--grey);letter-spacing:.14em}
.hd__nav{display:flex;gap:4px}
.hd__nav a{font-size:12.5px;padding:8px 13px;color:rgba(245,245,245,.76);border:1px solid transparent;transition:color .25s,border-color .25s}
.hd__nav a:hover,.hd__nav a[aria-current]{color:var(--gold);border-color:var(--gline)}
.hd__tel{line-height:1.2;text-align:right}
.hd__tel b{font-family:"Space Grotesk",sans-serif;font-size:18px;letter-spacing:.04em;font-weight:500}
.hd__tel span{display:block;font-size:9.5px;color:var(--grey)}
.hd__cta{background:var(--gold);color:#0d0d0d;font-size:12.5px;font-weight:700;padding:11px 17px;white-space:nowrap;transition:background .25s}
.hd__cta:hover{background:var(--gold-2)}

/* ============ TOP: STATEMENT ============ */
.stmt{position:relative;overflow:hidden;border-bottom:1px solid var(--gline)}
.stmt__bg{position:absolute;inset:0}
.stmt__bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.stmt__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.86),rgba(17,17,17,.7) 40%,rgba(17,17,17,.95))}
.stmt__in{position:relative;z-index:2;padding-block:clamp(54px,7.5vw,96px);text-align:center}
.stmt__eb{display:inline-block;font-size:11px;letter-spacing:.26em;color:var(--gold);border:1px solid var(--gline);padding:6px 16px;margin-bottom:24px}
.stmt h1{font-size:clamp(26px,4.6vw,52px);line-height:1.42;font-weight:700;letter-spacing:.02em}
.stmt h1 em{font-style:normal;color:var(--gold)}
.stmt p{margin:22px auto 0;max-width:46em;color:rgba(245,245,245,.78);font-size:clamp(13px,1.5vw,15.5px)}

/* ============ GATEWAY TILES ============ */
.gate{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--gline)}
.gt{position:relative;min-height:clamp(300px,38vw,430px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-left:1px solid rgba(200,164,93,.2)}
.gt:first-child{border-left:0}
.gt__img{position:absolute;inset:0}
.gt__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:brightness(.45) saturate(.85)}
.gt:hover .gt__img img{transform:scale(1.08);filter:brightness(.66) saturate(1)}
.gt__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.95) 5%,rgba(10,10,10,.2) 62%)}
.gt__b{position:relative;z-index:2;padding:26px 24px 28px}
.gt__no{font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.3em;color:var(--gold);display:block}
.gt__b h2{font-size:clamp(19px,2.2vw,25px);font-weight:700;margin-top:12px;line-height:1.45}
.gt__b p{font-size:12.5px;color:rgba(245,245,245,.72);margin-top:10px;line-height:1.8}
.gt__go{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.06em}
.gt__go::after{content:"";width:24px;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.gt:hover .gt__go::after{width:44px}
.gt__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:3}
.gt:hover .gt__bar{transform:scaleX(1)}

/* ============ TRUST ============ */
.trust{background:var(--charcoal);border-bottom:1px solid var(--line)}
.trust__g{display:grid;grid-template-columns:repeat(5,1fr)}
.trust__i{padding:24px 14px;text-align:center;border-left:1px solid var(--line)}
.trust__i:first-child{border-left:0}
.trust__i b{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(20px,2.6vw,30px);color:var(--gold);font-weight:500;line-height:1.2}
.trust__i b small{font-size:.46em;color:var(--grey);margin-left:2px}
.trust__i span{display:block;font-size:11px;color:rgba(245,245,245,.68);margin-top:5px}
.trust__n{text-align:center;font-size:10.5px;color:var(--grey);padding:0 14px 16px}

/* ============ SECTION ============ */
.sec{padding-block:clamp(60px,7.5vw,104px)}
.sec--p{background:var(--charcoal)}
.sec--d{background:#0c0c0d}
.sh{margin-bottom:clamp(30px,4vw,50px);display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:end}
.sh__l i{font-style:normal;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.3em;color:var(--gold);display:block}
.sh__l h2{font-size:clamp(21px,3vw,34px);font-weight:700;margin-top:10px;line-height:1.45}
.sh__r{color:rgba(245,245,245,.64);font-size:13.5px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.sh--c{display:block;text-align:center}
.sh--c .sh__r{border:0;margin-top:14px;max-width:44em;margin-inline:auto}

/* ============ ABOUT ============ */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.6vw,56px);align-items:center}
.about__f{position:relative;aspect-ratio:16/11;overflow:hidden}
.about__f img{width:100%;height:100%;object-fit:cover}
.about__f::after{content:"";position:absolute;inset:12px;border:1px solid var(--gline);pointer-events:none}
.about h3{font-size:clamp(18px,2.3vw,27px);font-weight:700;line-height:1.6}
.about h3 em{font-style:normal;color:var(--gold)}
.about p{margin-top:18px;font-size:13.8px;color:rgba(245,245,245,.74)}
.about__pts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.about__pts li{border:1px solid var(--line);padding:12px 14px;font-size:12.5px;background:rgba(245,245,245,.03)}
.about__pts li b{color:var(--gold);display:block;font-size:11px;letter-spacing:.1em;margin-bottom:3px}

/* ============ SCROLLER (works) ============ */
.scr{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,332px);gap:14px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.scr::-webkit-scrollbar{height:3px}
.scr::-webkit-scrollbar-track{background:rgba(245,245,245,.06)}
.scr::-webkit-scrollbar-thumb{background:var(--gold)}
.wk{scroll-snap-align:start;border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:border-color .3s}
.wk:hover{border-color:var(--gline)}
.wk__f{aspect-ratio:16/11;overflow:hidden;position:relative}
.wk__f img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.wk:hover .wk__f img{transform:scale(1.06)}
.wk__tag{position:absolute;top:11px;left:11px;background:rgba(17,17,17,.88);border:1px solid var(--gline);color:var(--gold);font-size:10.5px;padding:4px 9px}
.wk__b{padding:18px}
.wk__b h3{font-size:15.5px;font-weight:700}
.wk__b ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.wk__b ul li{font-size:11px;color:var(--grey);background:rgba(245,245,245,.05);padding:3px 8px}
.wk__b .p{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--grey);display:flex;justify-content:space-between}
.wk__b .p b{color:var(--gold)}

/* ============ FLOW ============ */
.stp{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.stp li{border:1px solid var(--line);border-top:2px solid var(--gold);background:var(--panel);padding:20px 17px}
.stp li i{font-style:normal;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.2em;color:var(--gold)}
.stp li b{display:block;font-size:14.5px;font-weight:700;margin-top:9px}
.stp li p{font-size:12.5px;color:rgba(245,245,245,.66);margin-top:8px;line-height:1.78}

/* ============ SHOP ============ */
.shop{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,42px)}
.shop__map{position:relative;min-height:370px;border:1px solid var(--line)}
.shop__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.85)}
.info{border-top:1px solid var(--line)}
.info div{display:grid;grid-template-columns:100px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.info dt{color:var(--grey);font-size:11.5px}
.info dd a{color:var(--gold)}
.lic{margin-top:20px;border:1px dashed var(--gline);background:rgba(200,164,93,.05);padding:17px 19px}
.lic b{color:var(--gold);font-size:12.5px;display:block;font-weight:700}
.lic p{font-size:11.5px;color:var(--grey);margin-top:7px;line-height:1.8}
.note{font-size:11px;color:var(--grey);line-height:1.85;margin-top:14px}
.note--c{text-align:center}

/* ============ FAQ ============ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 42px 18px 32px;position:relative;font-size:14.5px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:4px;top:18px;font-family:"Space Grotesk",sans-serif;color:var(--gold);font-size:14px}
.faq summary .plus{position:absolute;right:6px;top:24px;width:12px;height:12px}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--gold)}
.faq summary .plus::before{left:0;top:5.5px;width:12px;height:1px}
.faq summary .plus::after{left:5.5px;top:0;width:1px;height:12px;transition:transform .3s}
.faq details[open] summary .plus::after{transform:scaleY(0)}
.faq details p{padding:0 24px 20px 32px;font-size:13.5px;color:rgba(245,245,245,.7)}

/* ============ CTA ============ */
.cta{background:linear-gradient(180deg,#191a1b,#0b0b0c);border-top:1px solid var(--gline)}
.cbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.cb{border:1px solid var(--line);background:var(--panel);padding:23px 19px;display:flex;flex-direction:column;gap:8px;transition:background .3s,border-color .3s,transform .3s}
.cb:hover{background:rgba(200,164,93,.1);border-color:var(--gold);transform:translateY(-4px)}
.cb.pri{background:var(--gold);border-color:var(--gold);color:#0d0d0d}
.cb.pri:hover{background:var(--gold-2)}
.cb i{font-style:normal;font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:.24em;color:var(--gold)}
.cb.pri i{color:rgba(0,0,0,.55)}
.cb b{font-size:16px;font-weight:700}
.cb span{font-size:12px;color:var(--grey);line-height:1.75}
.cb.pri span{color:rgba(0,0,0,.66)}
.cb em{font-style:normal;margin-top:auto;padding-top:11px;font-size:11.5px;font-weight:700;color:var(--gold)}
.cb.pri em{color:#0d0d0d}
.telbox{margin-top:22px;border:1px solid var(--gline);padding:clamp(20px,2.6vw,30px);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:rgba(17,17,17,.6)}
.telbox small{font-size:11px;letter-spacing:.14em;color:var(--grey);display:block}
.telbox b{font-family:"Space Grotesk",sans-serif;font-size:clamp(28px,4vw,42px);font-weight:500;display:block;line-height:1.2;letter-spacing:.02em}
.telbox p{font-size:12px;color:var(--grey);margin-top:6px}
.telbox__r{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;font-size:13.5px;font-weight:700;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.btn--g{background:var(--gold);color:#0d0d0d;border-color:var(--gold)}
.btn--g:hover{background:var(--gold-2)}
.btn--o{border-color:var(--line);background:rgba(245,245,245,.04)}
.btn--o:hover{border-color:var(--gold);color:var(--gold)}
.center{text-align:center;margin-top:32px}

/* ============ SUBPAGE ============ */
.ph{position:relative;border-bottom:1px solid var(--gline);overflow:hidden}
.ph__bg{position:absolute;inset:0}
.ph__bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.ph__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(17,17,17,.96),rgba(17,17,17,.72) 60%,rgba(17,17,17,.88))}
.ph__in{position:relative;z-index:2;padding-block:clamp(44px,6vw,78px)}
.crumb{font-size:11px;color:var(--grey);margin-bottom:18px}
.crumb a{color:var(--grey)}
.crumb a:hover{color:var(--gold)}
.ph__in i{font-style:normal;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.3em;color:var(--gold);display:block}
.ph__in h1{font-size:clamp(24px,3.8vw,42px);font-weight:700;margin-top:12px;line-height:1.42}
.ph__in p{margin-top:16px;max-width:44em;color:rgba(245,245,245,.78);font-size:14px}

.blk{margin-bottom:clamp(40px,5vw,66px)}
.blk h2{font-size:clamp(19px,2.5vw,28px);font-weight:700;line-height:1.5;padding-bottom:14px;border-bottom:1px solid var(--gline);margin-bottom:24px;display:flex;align-items:baseline;gap:14px}
.blk h2 i{font-style:normal;font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:.2em;color:var(--gold);flex:none}
.blk p+p{margin-top:16px}
.blk p{font-size:14px;color:rgba(245,245,245,.76)}
.lst{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.lst li{border:1px solid var(--line);background:var(--panel);padding:16px 18px;font-size:13.5px}
.lst li b{display:block;color:var(--gold);font-size:13px;margin-bottom:5px}
.lst li span{color:rgba(245,245,245,.68);font-size:12.5px;line-height:1.8}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.pfig{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.pfig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pfig:hover img{transform:scale(1.06)}
.pfig figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-size:12px;background:linear-gradient(to top,rgba(10,10,10,.92),transparent)}
.tblwrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--line);background:var(--panel)}
.tbl th,.tbl td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{background:rgba(200,164,93,.1);color:var(--gold);font-size:12px;white-space:nowrap}
.tbl tbody th{width:32%;font-weight:700}
.tbl td{color:rgba(245,245,245,.74)}
.nextpg{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:20px}
.nextpg a{border:1px solid var(--line);padding:16px 18px;display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:700;transition:border-color .3s,background .3s}
.nextpg a:hover{border-color:var(--gold);background:rgba(200,164,93,.08)}
.nextpg a span{color:var(--gold)}

/* ============ GOO-NET BAND ============ */
.goobox{border:1px solid var(--gline);background:rgba(200,164,93,.06);padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:1fr auto;gap:clamp(18px,2.6vw,34px);align-items:center;margin-top:22px}
.goobox__l i{font-style:normal;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.24em;color:var(--gold);display:block}
.goobox__l b{display:block;font-size:clamp(17px,2.2vw,24px);font-weight:700;margin-top:10px;line-height:1.5}
.goobox__l p{font-size:12.5px;color:var(--grey);margin-top:10px;line-height:1.85}

/* ============ FOOTER ============ */
.ft{background:#0a0a0b;border-top:1px solid var(--line);padding:42px 0 92px;font-size:12.5px}
.ft__g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.ft__g b.lg{font-family:"Space Grotesk",sans-serif;font-size:20px;letter-spacing:.2em;font-weight:500;display:block}
.ft__g small{display:block;color:var(--grey);margin-top:10px;line-height:2;font-size:11.5px}
.ft h4{font-size:11px;color:var(--gold);letter-spacing:.18em;margin-bottom:12px;font-weight:700}
.ft li{margin-bottom:8px}
.ft li a{color:rgba(245,245,245,.66)}
.ft li a:hover{color:var(--gold)}
.ft__b{padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--grey);font-size:11px}

/* ============ MOBILE BAR ============ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;grid-template-columns:repeat(3,1fr);background:rgba(11,11,12,.97);backdrop-filter:blur(12px);border-top:1px solid var(--gline)}
.mbar a{padding:12px 6px;text-align:center;font-size:11.5px;font-weight:700;border-left:1px solid var(--line)}
.mbar a:first-child{border-left:0}
.mbar a.g{background:var(--gold);color:#0d0d0d}
.mbar a span{display:block;font-size:9px;color:var(--grey);font-weight:400;margin-bottom:2px}
.mbar a.g span{color:rgba(0,0,0,.55)}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .hd__nav{display:none}
  .gate{grid-template-columns:1fr 1fr}
  .gt:nth-child(3){border-left:0}
  .gt:nth-child(n+3){border-top:1px solid rgba(200,164,93,.2)}
  .trust__g{grid-template-columns:repeat(3,1fr)}
  .trust__i:nth-child(4){border-left:0}
  .about{grid-template-columns:1fr}
  .stp{grid-template-columns:1fr 1fr 1fr}
  .shop{grid-template-columns:1fr}
  .cbtns{grid-template-columns:1fr 1fr}
  .ft__g{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .goobox{grid-template-columns:1fr}
  .nextpg{grid-template-columns:1fr}
}
@media (max-width:900px){
  .mbar{display:grid}
}
@media (max-width:720px){
  body{font-size:14px}
  .hd__in{height:58px;gap:12px}
  .hd__tel{display:none}
  .hd__logo small{display:none}
  .gate{grid-template-columns:1fr}
  .gt{min-height:230px;border-left:0;border-top:1px solid rgba(200,164,93,.2)}
  .gt:first-child{border-top:0}
  .trust__g{grid-template-columns:1fr 1fr}
  .trust__i{border-top:1px solid var(--line)}
  .trust__i:nth-child(odd){border-left:0}
  .trust__i:nth-child(-n+2){border-top:0}
  .trust__i:nth-child(5){grid-column:1/-1}
  .sh{grid-template-columns:1fr;gap:14px;align-items:start}
  .sh__r{border:0}
  .about__pts,.lst,.pgrid{grid-template-columns:1fr}
  .goobox .btn{width:100%}
  .stp,.cbtns{grid-template-columns:1fr}
  .telbox{grid-template-columns:1fr}
  .telbox__r a{flex:1}
  .ft__g{grid-template-columns:1fr}
  .blk h2{flex-direction:column;gap:6px}
}