@charset "UTF-8";
/* =====================================================================
   BARKEDGE — common.css
   Tokens, base, header + mega menus, menu overlay, shared parts,
   service cards, contact band, footer. Used by every page.
   Layout follows the 1440–1442px design (--v = 1 design px).
   ===================================================================== */
:root{
  --paper:#ffffff;
  --mist:#ffffff;
  --ink:#0d0d0d;
  --ink-soft:#535353;
  --rule:#cccccc;
  --hair:#d6d6d6;
  --mute:#8a8a8a;
  --sun:#fcd901;
  --sun-soft:#ffdc4b;
  --panel:#0d0d0d;
  --f-display:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --f-wide:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --f-ui:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --u:calc(100vw / 1560);
  --v:calc(100vw / 1442);
  --gut:max(16px,calc(40 * var(--v)));
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
html{background:var(--paper)}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-jp);-webkit-font-smoothing:antialiased}
html.is-locked,html.is-locked body{overflow:hidden}
html.nav-open .replay{visibility:hidden;pointer-events:none}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.wide{font-family:var(--f-wide);font-stretch:118%}
.split .c{display:inline-block;will-change:transform}
.split .sp{width:.22em}
/* Keep glyph ink inside the reveal mask without changing word spacing. */
.split .w:not(.sp){padding-right:.1em;margin-right:-.1em}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.ln{display:block;overflow:hidden}
.ln>span{display:block}

/* ---------- MENU (fixed) + overlay ---------- */
.menu{position:relative;display:none;width:auto;height:44px;gap:16px;
  background:var(--panel);color:#fff;border:0;cursor:pointer;z-index:60;
  align-items:center;justify-content:space-between;
  padding:0 16px;font:700 12px/1 var(--f-display);letter-spacing:.03em}
.menu:focus-visible{outline:2px solid var(--sun);outline-offset:-4px}
.burger{position:relative;width:24px;height:9px}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .6s var(--ease)}
.burger::before{top:0}.burger::after{bottom:0}
.menu:hover .burger::before{transform:translateY(4px)}
.menu:hover .burger::after{transform:translateY(-4px)}
.is-open .burger::before{transform:translateY(4px) rotate(20deg)!important}
.is-open .burger::after{transform:translateY(-4px) rotate(-20deg)!important}
.menu-label{position:relative;overflow:hidden;display:inline-block;height:1.1em;min-width:4.2em}
.menu-label span{display:block;transition:transform .6s var(--ease)}
.menu-label span+span{position:absolute;inset:0;transform:translateY(110%)}
.is-open .menu-label span:first-child{transform:translateY(-110%)}
.is-open .menu-label span+span{transform:translateY(0)}

.nav{position:fixed;inset:0;z-index:55;background:var(--panel);color:#fff;visibility:hidden;clip-path:inset(0 0 100% 0);
  display:grid;grid-template-columns:1fr minmax(0,1.1fr);align-items:end;gap:40px;
  padding-block:max(96px,calc(140 * var(--v))) max(32px,calc(64 * var(--v)));
  padding-left:max(16px,env(safe-area-inset-left,0px),calc(80 * var(--v)));padding-right:max(16px,env(safe-area-inset-right,0px),calc(80 * var(--v)))}
.nav ul{list-style:none;margin:0;padding:0;display:grid;gap:max(4px,calc(8 * var(--v)))}
.nav li{overflow:hidden}
.nav ul a{display:inline-flex;align-items:baseline;gap:18px;font:400 max(36px,calc(78 * var(--v)))/1.08 var(--f-wide);font-stretch:118%;letter-spacing:-.06em;transition:color .4s}
.nav ul a small{font:400 13px/1 var(--f-jp);letter-spacing:.04em;color:#8d8d8d}
.nav ul a:hover,.nav-cta a:hover{color:#fff}
.nav-side{align-self:end;font:400 13px/1.9 var(--f-jp);color:#bdbdbd;display:grid;gap:28px;min-width:0}
.nav-side b{display:block;font:600 max(20px,calc(26 * var(--v)))/1 var(--f-wide);font-stretch:118%;color:#fff;letter-spacing:-.03em}
.nav-cta{display:flex;gap:28px;font:700 15px/1 var(--f-ui);color:var(--sun)}


/* ---------- header: 100px, logo left, nav right, dark RECRUIT / CONTACT block ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:max(60px,calc(100 * var(--v)));display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:env(safe-area-inset-top,0px);padding-left:max(16px,env(safe-area-inset-left,0px),calc(28 * var(--v)));padding-right:0;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .7s var(--ease)}
.hdr.is-hidden,.hdr.kv-fold{transform:translateY(-101%)}
.hdr .rule{background:rgba(112,112,112,.38)}
.hdr-logo{display:flex;align-items:center}
.hdr-logo svg{width:max(118px,calc(194 * var(--v)));height:auto;display:block}
.hdr-logo .y{fill:var(--sun)}.hdr-logo .k{fill:#231815}
.hdr-nav{margin-left:auto;margin-right:calc(14 * var(--v));display:flex;align-items:center;gap:max(20px,calc(40 * var(--v)))}
.hdr-nav a{position:relative;font:700 max(13px,calc(15 * var(--v)))/1 var(--f-display);letter-spacing:.03em;padding:6px 0;white-space:nowrap}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.hdr-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr-cta{align-self:stretch;display:grid;grid-template-columns:146fr 136fr;width:max(230px,calc(282 * var(--v)));background:linear-gradient(#000,#404040);
  padding-right:env(safe-area-inset-right,0px)}
.hdr-cta a{position:relative;display:grid;place-items:center;color:#fff;font:700 max(13px,calc(15 * var(--v)))/1 var(--f-ui);overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.hdr-cta a::after{content:"";position:absolute;inset:0;background:var(--sun);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
.hdr-cta a:hover{color:var(--ink)}.hdr-cta a:hover::after{transform:none}
.hdr-cta a+a::before{content:"";position:absolute;left:0;top:calc(24 * var(--v));bottom:calc(22 * var(--v));width:1px;background:#d3d3d3;z-index:1}
.hdr-cta a:focus-visible,.hdr-nav a:focus-visible{outline:2px solid var(--sun);outline-offset:-3px}
@media (max-width:1100px){.hdr-nav{gap:20px}.hdr-nav a{font-size:12px}}

/* ---------- header mega menus (SERVICE+ / COMPANY+) ---------- */
.mega-veil{position:fixed;inset:0;z-index:57;background:rgba(0,0,0,.71);opacity:0;visibility:hidden;pointer-events:none}
.megamenu{position:fixed;left:10px;right:10px;top:10px;z-index:58;height:calc(490 * var(--v));min-height:440px;background:rgba(0,0,0,.98);border-radius:3px;color:#fff;
  visibility:hidden;clip-path:inset(0 0 100% 0 round 3px)}
.mega-panel{position:absolute;inset:0;padding-top:calc(90 * var(--v))}
.mega-head{position:absolute;left:calc(70 * var(--v));top:calc(150 * var(--v))}
.mega-title{display:inline-flex;align-items:flex-start;gap:calc(64 * var(--v));color:#fff}
.mega-title .split{font:600 max(28px,calc(40 * var(--v)))/1 var(--f-wide);font-stretch:118%;letter-spacing:-.08em}
.mega-title .arw{margin-top:6px}
.mega-head p{margin:calc(14 * var(--v)) 0 0 2px;font:400 14px/1.4 var(--f-jp);overflow:hidden}
.mega-list{position:absolute;left:calc(694 * var(--v));top:calc(136 * var(--v));width:calc(280 * var(--v));min-width:220px;list-style:none;margin:0;padding:0}
.mega-list li{position:relative}
.mega-list li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.107);transform-origin:left}
.mega-list a{display:flex;align-items:center;gap:18px;height:calc(66.5 * var(--v));min-height:52px;padding-left:5px;font:400 16px/1 var(--f-display);color:#fff;transition:color .4s,padding .6s var(--ease)}
.mega-list a span{min-width:7.2em}
.mega-list a:hover,.mega-list a.is-on{color:var(--sun);padding-left:14px}
.chev{font-style:normal;font:400 16px/1 var(--f-display);display:inline-block;transition:transform .5s var(--ease)}
.mega-list a:hover .chev,.mega-card:hover .chev{transform:translateX(5px)}
.mega-card{position:absolute;left:calc(1030 * var(--v));top:calc(154 * var(--v));width:calc(280 * var(--v));min-width:220px;color:#fff}
.mc-img{position:relative;display:block;aspect-ratio:280/182;border-radius:3px;overflow:hidden;background:#111}
.mc-img img,.mc-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform 1.2s var(--ease)}
.mega-card:hover .mc-img img,.mc-img video{transform:scale(1.05)}
.mc-t{display:block;margin-top:calc(20 * var(--v));font:400 20px/1.2 var(--f-wide);font-stretch:118%;letter-spacing:-.06em;overflow:hidden}
.mc-d{display:flex;gap:12px;align-items:center;margin-top:10px;font:300 13px/1.5 var(--f-jp);white-space:nowrap}
.hdr{transition:transform .7s var(--ease),background-color .5s}
.hdr .hdr-logo .k,.hdr-nav a{transition:fill .5s,color .5s}
.hdr.is-mega{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.is-mega .hdr-logo .k{fill:#fff}
.hdr.is-mega .hdr-nav a{color:#fff}
.hdr.is-mega .rule{opacity:0}
.hdr-nav a[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left}
@media (max-width:860px){.megamenu,.mega-veil{display:none}}


/* ---------- shared section parts ---------- */
main{position:relative;z-index:1}
.sec{position:relative;overflow-x:clip}
.rule{position:absolute;left:0;right:0;height:1px;background:var(--hair);transform-origin:left}
.rule.t{top:0}.rule.b{bottom:0}
.head{position:relative;display:grid;grid-template-columns:calc(891 * var(--v)) minmax(0,1fr);align-items:center;min-height:calc(170 * var(--v))}
.head h2{margin:0;padding:calc(30 * var(--v)) 0 calc(22 * var(--v)) calc(29 * var(--v));
  font:300 max(44px,calc(120 * var(--v)))/.92 var(--f-wide);font-stretch:118%;letter-spacing:-.085em;white-space:nowrap}
.head .lead{position:relative;margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  padding:calc(24 * var(--v)) var(--gut) calc(24 * var(--v)) calc(59 * var(--v));font:400 max(14px,calc(16 * var(--v)))/1.9 var(--f-jp)}
.head .vr{position:absolute;left:calc(891 * var(--v));top:calc(16 * var(--v));bottom:calc(16 * var(--v));width:1px;background:var(--hair);transform-origin:top}
.bar{position:relative;display:flex;align-items:center;gap:max(16px,calc(30 * var(--v)));padding:max(16px,calc(19 * var(--v))) var(--gut)}
.bar b{display:inline-flex;font:600 max(15px,calc(18 * var(--v)))/1 var(--f-wide);font-stretch:112%;letter-spacing:-.05em}
.bar > span{font:300 max(13px,calc(15 * var(--v)))/1 var(--f-jp);letter-spacing:.04em}
.more{display:inline-flex;align-items:center;gap:30px;font:600 15px/1 var(--f-wide);font-stretch:112%;letter-spacing:-.05em;position:relative;padding:6px 0}
.more::after{content:"";position:absolute;left:0;right:46px;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.more:hover::after{transform:scaleX(1);transform-origin:left}
.arw{position:relative;display:inline-block;width:16px;height:16px;overflow:hidden}
.arw svg{position:absolute;inset:0;width:16px;height:16px;transition:transform .55s var(--ease)}
.arw svg+svg{transform:translate(-120%,120%)}
.more:hover .arw svg:first-child,a:hover>.arw svg:first-child{transform:translate(120%,-120%)}
.more:hover .arw svg+svg,a:hover>.arw svg+svg{transform:translate(0,0)}
.more:focus-visible,.card:focus-visible,.work:focus-visible,.row:focus-visible,.pill:focus-visible{outline:2px solid var(--ink);outline-offset:4px}


/* ---------- WHAT WE DO / service value ---------- */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);margin:0 2px 0 0}
.card{position:relative;display:block;height:max(240px,calc(332 * var(--v)));background:var(--panel);color:#fff;overflow:hidden;isolation:isolate}
.card.alt{background:var(--sun);color:var(--ink)}
.card .flood{position:absolute;inset:0;background:var(--sun);clip-path:circle(0% at var(--cx) var(--cy));transition:clip-path .9s var(--ease);z-index:-1}
.card.alt .flood{background:var(--panel)}
@media (hover:hover){.card:hover .flood{clip-path:circle(150% at var(--cx) var(--cy))}}
.card p{position:absolute;left:calc(40 * var(--v));top:calc(40 * var(--v));margin:0;font:500 max(13px,calc(15 * var(--v)))/1.4 var(--f-jp);transition:color .5s .1s}
.card h3{position:absolute;left:calc(40 * var(--v));bottom:calc(30 * var(--v));margin:0;font:600 max(28px,calc(40 * var(--v)))/1 var(--f-wide);font-stretch:118%;letter-spacing:-.09em;transition:color .5s .1s}
@media (hover:hover){.card:hover{color:var(--ink)}
.card.alt:hover{color:#fff}}
.card .ico{position:absolute;left:var(--cx);top:var(--cy);transform:translate(-50%,-50%);height:auto;overflow:visible;fill:var(--sun);transition:fill .5s}
.card.alt .ico{fill:var(--ink)}
@media (hover:hover){.card:hover .ico{fill:var(--ink)}.card.alt:hover .ico{fill:var(--sun)}}
.card .arw{position:absolute;right:calc(40 * var(--v));bottom:calc(36 * var(--v))}
.ico.bolt{width:max(36px,calc(51 * var(--v)))}
.ico.pair{width:max(34px,calc(48 * var(--v)))}
.ico.ring{width:max(28px,calc(39 * var(--v)))}
.ico.play{width:max(32px,calc(46 * var(--v)))}
.more-wrap{display:flex;justify-content:center;padding-block:calc(40 * var(--v)) calc(150 * var(--v))}


/* service icons: bigger, livelier loops */
.ico.bolt .b1,.ico.bolt .b2{transform-box:fill-box;transform-origin:center}
.ico.bolt .b1{animation:boltA 1.6s cubic-bezier(.7,0,.2,1) infinite}
.ico.bolt .b2{animation:boltB 1.6s cubic-bezier(.7,0,.2,1) infinite}
@keyframes boltA{0%{transform:translate(-0.001px,-50.148px)}18%{transform:translate(-14px,-50.148px) skewX(-18deg)}36%{transform:translate(9px,-50.148px) skewX(10deg)}52%,100%{transform:translate(-0.001px,-50.148px)}}
@keyframes boltB{0%,12%{transform:translate(1.021px,-45.577px)}30%{transform:translate(15px,-45.577px) skewX(-18deg)}48%{transform:translate(-8px,-45.577px) skewX(10deg)}64%,100%{transform:translate(1.021px,-45.577px)}}
.ico.bolt{animation:boltJolt 1.6s cubic-bezier(.7,0,.2,1) infinite}
@keyframes boltJolt{0%,100%{transform:translate(-50%,-50%) scale(1)}20%{transform:translate(-50%,-50%) scale(1.18) rotate(-6deg)}40%{transform:translate(-50%,-50%) scale(.94) rotate(3deg)}}
.ico.pair .pc{transform-box:fill-box;transform-origin:50% 100%;animation:hop 1.4s cubic-bezier(.3,0,.3,1) infinite}
.ico.pair .ps{transform-box:fill-box;transform-origin:center;animation:flip 2.8s cubic-bezier(.68,-.6,.32,1.6) infinite}
@keyframes hop{0%,100%{transform:translate(0,0) scale(1.15,.82)}12%{transform:translate(0,0) scale(.9,1.12)}45%{transform:translate(0,-26px) scale(.95,1.05)}62%{transform:translate(0,0) scale(1.18,.8)}75%{transform:translate(0,0) scale(1,1)}}
@keyframes flip{0%,15%{transform:rotate(0) scale(1)}35%{transform:rotate(90deg) scale(1.3)}50%,65%{transform:rotate(180deg) scale(1)}85%{transform:rotate(270deg) scale(1.3)}100%{transform:rotate(360deg) scale(1)}}
.ico.ring{animation:ringSpin 2.4s cubic-bezier(.68,-.4,.32,1.4) infinite}
@keyframes ringSpin{0%{transform:translate(-50%,-50%) rotate(0) scale(1)}40%{transform:translate(-50%,-50%) rotate(300deg) scale(1.25)}55%{transform:translate(-50%,-50%) rotate(380deg) scale(.9)}70%,100%{transform:translate(-50%,-50%) rotate(360deg) scale(1)}}
/* MOVIE: the three blades keep their shape and fire in sequence, the whole mark kicks forward */
.ico.play{overflow:visible;animation:playKick 1.4s cubic-bezier(.6,0,.2,1) infinite}
.ico.play g,.ico.play .p1{transform-box:fill-box;transform-origin:0 50%;animation:blade 1.4s cubic-bezier(.6,0,.2,1) infinite}
.ico.play .p2{animation-delay:.1s}.ico.play .p3{animation-delay:.2s}
@keyframes blade{0%,60%,100%{transform:scale(1);opacity:1}18%{transform:scale(1.25,1.12);opacity:1}32%{transform:scale(.9);opacity:.55}}
@keyframes playKick{0%,100%{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% + 10px),-50%)}36%{transform:translate(calc(-50% - 3px),-50%)}}
.card:hover .ico{animation-duration:.8s}
.card:hover .ico *{animation-duration:.8s}





/* ---------- FOOTER ---------- */
.foot{position:relative;z-index:2;background:#000;color:#fff;padding:calc(160 * var(--v)) var(--gut) 0;overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;column-gap:calc(130 * var(--v));padding-left:calc(60 * var(--v));padding-right:calc(100 * var(--v))}
.foot-logo{display:grid;justify-items:center;gap:22px;align-self:start;width:max-content}
.foot-logo svg{width:max(200px,calc(384 * var(--v)));height:auto;overflow:visible}
.foot-logo .y{fill:var(--sun)}.foot-logo .k{fill:#fff}
.foot-logo span{font:700 12px/1 var(--f-ui)}
.foot h4{margin:0 0 30px;font:600 16px/1 var(--f-ui);letter-spacing:.03em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:20px;font:400 13px/1 var(--f-jp)}
.foot ul a,.foot .big a{position:relative;display:inline-block}
.foot ul a::after,.foot .big a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.foot ul a:hover::after,.foot .big a:hover::after{transform:scaleX(1);transform-origin:left}
.foot .big{display:grid;gap:22px;font:600 16px/1 var(--f-ui);letter-spacing:.03em}
.foot .big .y{color:var(--sun);display:inline-flex;gap:6px;align-items:center;font-weight:700;font-size:15px}
.foot .big .y .arw{width:12px;height:12px}.foot .big .y .arw svg{width:12px;height:12px}
.foot-bottom{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:calc(150 * var(--v));padding:0 calc(100 * var(--v)) 22px calc(84 * var(--v))}
.foot-bottom address{font-style:normal;font:400 12px/1.6 var(--f-jp)}
.foot-bottom address b{display:block;margin-top:6px;font:600 20px/1 var(--f-wide);font-stretch:112%}
.foot-bottom .sns{display:flex;align-items:center;gap:36px;font:500 12px/1 var(--f-jp)}
.copyr{border-top:1px solid #333;margin-inline:calc(-1 * var(--gut));padding:20px 0 calc(20px + env(safe-area-inset-bottom,0px));text-align:center;font:400 10px/1 var(--f-display)}

.replay{position:fixed;z-index:65;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));
  appearance:none;border:0;border-radius:999px;background:rgba(13,13,13,.9);color:#fff;font:500 12px/1 var(--f-ui);padding:12px 18px;cursor:pointer;backdrop-filter:blur(8px)}


@media (max-width:860px){
  .head{grid-template-columns:1fr}
  .head h2{padding-left:16px;white-space:normal}
  .head .vr{display:none}
  .head .lead{padding:0 16px 24px}
  .services{grid-template-columns:1fr}
  .row{grid-template-columns:75px minmax(0,1fr) 20px;row-gap:10px}
  .row time{grid-column:2}
  .row .body{grid-column:1/-1}
  .row h3,.row p{padding-left:0}
  .row .arw{grid-column:3;grid-row:1}
  .hdr-nav,.hdr-cta{display:none}
  .menu{display:flex;margin-right:16px}
  .nav{grid-template-columns:1fr}
  .nav-side{display:none}
  .foot-top{grid-template-columns:1fr 1fr;row-gap:48px;padding:0}
  .foot-logo{grid-column:1/-1;justify-items:start}
  .foot-bottom{flex-direction:column;align-items:start;padding:0}

}
@media (prefers-reduced-motion:reduce){
  .ico,.ico *{animation:none!important}
}

/* =====================================================================
   SP (≤860px) — header + footer follow BRKG_top_sp (375px design)
   ===================================================================== */
.foot-sp{display:none}
@media (max-width:860px){
  :root{--s:calc(100vw / 375)}
  .hdr{height:calc(75 * var(--s));padding-left:calc(10 * var(--s));background:rgba(255,255,255,.94)}
  .hdr .rule{background:#cfcfcf}
  .hdr-logo svg{width:calc(120 * var(--s));min-width:0}
  .menu{margin-right:calc(15 * var(--s));width:calc(35 * var(--s));height:44px;padding:0;background:none;color:var(--ink)}
  .menu-label{position:absolute;width:1px;height:1px;min-width:0;overflow:hidden;clip-path:inset(50%)}
  .menu .burger{width:100%;height:12px}
  .menu .burger::before,.menu .burger::after{height:2px}
  .menu:hover .burger::before{transform:translateY(2px)}
  .menu:hover .burger::after{transform:translateY(-2px)}
  .menu.is-open .burger::before{transform:translateY(5px) rotate(20deg)!important}
  .menu.is-open .burger::after{transform:translateY(-5px) rotate(-20deg)!important}

  /* footer */
  .foot{padding:calc(70 * var(--s)) 0 0}
  .foot-top,.foot-bottom{display:none}
  .foot-sp{display:block;padding:0 calc(15 * var(--s)) calc(56 * var(--s))}
  .fsp-logo{display:grid;justify-items:center;gap:8px;width:max-content;margin:0 auto calc(64 * var(--s))}
  .fsp-logo svg{width:calc(208 * var(--s));height:auto;overflow:visible}
  .fsp-logo .y{fill:var(--sun)}.fsp-logo .k{fill:#fff}
  .fsp-logo span{font:700 12px/1 var(--f-ui);margin-left:calc(48 * var(--s))}
  .fsp-acc{border-bottom:1px solid #fff}
  .fsp-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;height:calc(73 * var(--s));
    font:600 21px/1 var(--f-wide);font-stretch:112%;letter-spacing:-.02em}
  .fsp-acc summary::-webkit-details-marker{display:none}
  .fsp-acc summary i{position:relative;width:22px;height:22px;margin-right:calc(22 * var(--s))}
  .fsp-acc summary i::before,.fsp-acc summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .5s var(--ease)}
  .fsp-acc summary i::after{transform:rotate(90deg)}
  .fsp-acc[open] summary i::after{transform:rotate(0)}
  .fsp-acc ul{display:grid;gap:18px;padding:4px 0 26px 7px;font:400 13px/1 var(--f-display)}
  .fsp-acc ul a{color:#cfcfcf}
  .fsp-row{display:flex;align-items:center;height:calc(73 * var(--s));padding-left:7px;border-bottom:1px solid #3a3a3a;font:400 13px/1 var(--f-display);letter-spacing:.02em}
  .fsp-y{display:grid;justify-items:start;gap:calc(22 * var(--s));padding:calc(36 * var(--s)) 0 0 7px}
  .fsp-y a{display:inline-flex;align-items:center;gap:6px;color:var(--sun);font:700 14px/1 var(--f-ui);letter-spacing:.02em}
  .fsp-y .arw{width:12px;height:12px}.fsp-y .arw svg{width:12px;height:12px}
  .fsp-pp{display:inline-block;margin:calc(28 * var(--s)) 0 0 7px;font:400 10px/1 var(--f-jp)}
  .fsp-ad{margin-top:calc(64 * var(--s));text-align:center;font-style:normal;font:400 12px/1.6 var(--f-jp)}
  .fsp-ad b{display:block;margin-top:10px;font:600 20px/1 var(--f-wide);font-stretch:112%;letter-spacing:.01em}
  .fsp-sns{display:flex;justify-content:center;align-items:center;gap:calc(28 * var(--s));margin-top:calc(40 * var(--s))}
  .fsp-sns a{display:block;color:#fff;transition:opacity .4s}
  .fsp-sns a:active{opacity:.6}
  .fsp-sns svg,.fsp-sns img{display:block;height:auto}
  .copyr{margin-inline:0;border-top-color:#fff;padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:860px){.hdr:has(.menu.is-open){background:#fff}}

.mc-img [hidden]{display:none}