@charset "utf-8";

:root{
  --col:720px;   
  --t1:19px;
  --hero: min(clamp(40px, 5.56vw, 80px), calc((100vw - 2*var(--gutter)) / 8.6));
  --h2: clamp(30px, 3.9vw, 56px);
  --sky1:#8FC4E6; --sky2:#5E93C4; --night1:#1B3358; --night2:#0A1020;
}
body{ font-size:var(--t1); line-height:1.85 }
.fv{ font-size:17px; line-height:1.9 }   
main{ overflow-x:clip }
.k{ display:inline-block }
h1.ph,h2.sh{ word-break:auto-phrase }

main > .sec > .wrap, main > .sec > .wrap.measure, .page-topic .wrap.measure, .page-privacy .wrap.measure{ max-width:calc(var(--col) + 2*var(--gutter)) }
@media(min-width:901px){
  .page-index .sec > .wrap, .page-company .sec--flat > .wrap, .intro > .wrap, .page-topic .wrap.measure{ display:block }
  .page-index .sec > .wrap > .sec__label, .page-company .sec--flat .sec__label, .page-topic .wrap > .sec__label{ padding-top:0 }
  .page-topic .wrap > .t0{ margin:0 0 16px }
}
.sec > .wrap > p{ max-width:none }
h2.sh{ font-size:var(--h2); line-height:1.45; letter-spacing:.04em; max-width:none; margin-bottom:40px }
.page-index .sec h2.sh{ font-size:var(--h2) }
.sec{ padding-block:clamp(88px, 11vw, 160px); border-top:0 }
.sec__label{ font-size:14px }
.rule-mizu{ margin-block:56px 20px }

body:not(.page-index) main > .sec:first-child{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--sky2) 0%, var(--sky1) 46%, var(--mizu) 100%);
  padding-block:clamp(96px, 11vw, 168px) 0;
}
body:not(.page-index) main > .sec:first-child h1.ph{
  font-size:var(--hero); line-height:1.36; letter-spacing:.04em; max-width:none; margin-bottom:48px;
}
body.page-topic main > .sec:first-child h1.ph{ font-size:clamp(30px, 3.9vw, 56px); line-height:1.45 }
body:not(.page-index) main > .sec:first-child h1.ph + p{ font-size:clamp(19px, 1.67vw, 24px); line-height:1.9 }
body:not(.page-index) main > .sec:first-child .sec__label,
body:not(.page-index) main > .sec:first-child .t0{ color:var(--ink-strong) }
.page-topic .sec p.t0{ color:var(--ink-strong) }
body:not(.page-index) main > .sec:first-child .sec__label::before{ background:var(--ink-strong) }
body:not(.page-index) main > .sec:first-child .rule-mizu{ border-top-color:var(--ink-strong); border-top-width:1px }
body:not(.page-index) main > .sec:first-child a:hover{ color:#fff }
body:not(.page-index) main > .sec:first-child{ padding-bottom:clamp(72px, 8vw, 120px) }

.pic .weave > rect:first-of-type{ fill:transparent }
body:not(.page-index) main > .sec:first-child .pic{
  width:min(64vw, 980px); max-width:none;
  justify-self:auto; align-self:auto;   
  margin:clamp(24px, 3vw, 48px) 0 calc(-1 * clamp(72px, 8vw, 120px)) calc(var(--col) / 2 + 50vw - min(64vw, 980px));
}

body.page-topics9 main > .sec:first-child .pic{ margin-left:calc(var(--col) / 2 - 50vw); margin-top:56px; margin-bottom:0 }
body.page-topics9 main > .sec:first-child{ padding-bottom:0 }
body.page-topics9 main > .sec:first-child .rule-mizu,
body.page-topics9 main > .sec:first-child .rule-mizu + p{ position:relative; z-index:1 }

body.page-recruit main > .sec:first-child{ padding-bottom:clamp(260px, 30vw, 440px) }
body.page-recruit main > .sec:first-child::before{
  content:""; position:absolute; left:-4%; bottom:-6%; width:min(46vw, 660px); aspect-ratio:960/720;
  background:url(../_assets/sky-kumo.png) no-repeat 50% 100% / contain;
}
body.page-recruit main > .sec:first-child::after{
  content:""; position:absolute; right:max(var(--gutter), calc(50% - var(--col)/2 - 270px)); bottom:0; width:min(16vw, 230px); aspect-ratio:340/760;
  background:url(../_assets/c-hack.png) no-repeat 50% 100% / contain;
}

body:not(.page-index) main > .sec:first-child + .sec{
  background:linear-gradient(180deg, var(--mizu) 0, var(--paper) 420px);
}
.sec--flat{ padding-block:clamp(88px, 11vw, 160px) }

.dl dd{ font-size:clamp(18px, 1.46vw, 21px) }
.dl dt{ font-size:14px }
@media(min-width:641px){
  .dl dt,.dl dd{ padding-block:26px }
  .page-company .dl, .page-recruit .sec--flat .dl{ grid-template-columns:168px minmax(0,1fr); max-width:none }
}
.biz li{ font-size:clamp(19px, 1.67vw, 24px); padding-block:28px }
.biz span{ font-size:14px }
.news li{ padding-block:28px }
.news a{ font-size:clamp(18px, 1.46vw, 21px) }
.page-recruit .trio p.trio__v{ font-size:clamp(24px, 2.36vw, 34px); border-top:2px solid var(--ink-strong); padding-top:22px }
.page-recruit .trio--2{ column-gap:56px; margin-top:56px }
.page-recruit .trio p{ font-size:17px }
.page-recruit h2.sh{ font-size:clamp(26px, 2.78vw, 40px); font-weight:400 }
@media(min-width:901px){ .page-recruit .sec:nth-of-type(2) > .wrap{ max-width:calc(1000px + 2*var(--gutter)) } }

.page-index main > .sec{ position:relative }
.page-index main > .sec:nth-of-type(2){ background:linear-gradient(180deg, var(--night2) 0%, var(--night1) 100%); color:#fff }
.page-index main > .sec:nth-of-type(3){ background:linear-gradient(180deg, var(--night1) 0%, var(--sora) 100%); color:#fff }
.page-index main > .sec:nth-of-type(4){ background:linear-gradient(180deg, var(--sora) 0, var(--sky2) 120px, var(--sky1) 260px, var(--mizu) 100%); padding-top:clamp(320px, 29vw, 420px) }
.page-index main > .sec:nth-of-type(5){ background:linear-gradient(180deg, var(--mizu) 0, var(--paper) 70%) }
.page-index main > .sec:nth-of-type(-n+3) h2.sh,
.page-index main > .sec:nth-of-type(-n+3) .sec__label{ color:#fff }
.page-index main > .sec:nth-of-type(-n+3) .sec__label::before{ background:#fff }
.page-index main > .sec:nth-of-type(-n+3) .rule-mizu{ border-top-color:#ffffff66; border-top-width:1px }
.page-index main > .sec:nth-of-type(-n+3) a:hover{ color:var(--mizu) }
.page-index main > .sec:nth-of-type(-n+3) a:focus-visible{ outline-color:#fff }
.page-index main > .sec:nth-of-type(3) .biz, .page-index main > .sec:nth-of-type(3) .biz li{ border-color:#ffffff40 }
.page-index main > .sec:nth-of-type(3) .biz span{ color:#ffffffc0 }
.page-index main > .sec:nth-of-type(3) .biz a{ border-bottom-color:#fff }
.page-index main > .sec:nth-of-type(4) .sec__label,
.page-index main > .sec:nth-of-type(4) .news time{ color:var(--ink-strong) }
.page-index main > .sec:nth-of-type(4) .sec__label::before{ background:var(--ink-strong) }
.page-index main > .sec:nth-of-type(4) .news, .page-index main > .sec:nth-of-type(4) .news li{ border-color:#16181C40 }
.page-index main > .sec:nth-of-type(4) .rule-mizu{ border-top-color:var(--ink-strong); border-top-width:1px }

.page-index main > .sec:nth-of-type(2)::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle, #FFFFFF 0 1.1px, transparent 1.7px),
    radial-gradient(circle, #FFFFFF 0 0.8px, transparent 1.3px),
    radial-gradient(circle, #DCEBF7 0 1.5px, transparent 2.1px);
  background-size:213px 197px, 137px 151px, 331px 289px;
  background-position:0 0, 61px 43px, 137px 91px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 92%); mask-image:linear-gradient(180deg, #000, transparent 92%);
}
.page-index main > .sec > .wrap{ position:relative; z-index:1 }

@media(min-width:1100px){
  .page-index main > .sec::after{
    content:""; position:absolute; pointer-events:none; background:no-repeat 50% 100% / contain;
  }
  .page-index main > .sec:nth-of-type(2)::after{ background-image:url(../_assets/c-game.png); filter:invert(1);
    right:max(24px, calc(50% - var(--col)/2 - 320px)); bottom:-100px; width:240px; aspect-ratio:1/1.5; z-index:2 }
  .page-index main > .sec:nth-of-type(3)::after{ background-image:url(../_assets/c-car.png); filter:invert(1);
    left:max(24px, calc(50% - var(--col)/2 - 350px)); bottom:-90px; width:280px; aspect-ratio:1.4/1; z-index:2 }
  .page-index main > .sec:nth-of-type(5)::after{ background-image:url(../_assets/c-surf.png);
    right:max(24px, calc(50% - var(--col)/2 - 340px)); bottom:6%; width:280px; aspect-ratio:1/1 }
}
.page-index main > .sec:nth-of-type(4)::before{ 
  content:""; position:absolute; pointer-events:none; left:-3%; top:clamp(8px, 1vw, 16px); width:min(38vw, 520px); aspect-ratio:960/720;
  background:url(../_assets/sky-kumo.png) no-repeat 50% 0 / contain;
}
.page-index main > .sec:nth-of-type(4)::after{
  content:""; position:absolute; pointer-events:none; right:-4%; top:clamp(40px, 4vw, 70px); width:min(30vw, 420px); aspect-ratio:960/720;
  background:url(../_assets/sky-kumo.png) no-repeat 50% 0 / contain; transform:scaleX(-1);
}

.ft{
  position:relative; border-top:0; margin-top:0; background:var(--paper);
  padding-block:clamp(250px, 25vw, 340px) 40px;
}
.ft::before{ 
  content:""; position:absolute; left:0; right:0; top:clamp(40px, 5vw, 72px); height:clamp(180px, 18vw, 240px); pointer-events:none;
  background-repeat:no-repeat;
  background-image:url(../_assets/c-walk.png),url(../_assets/c-hack.png),url(../_assets/c-ukulele.png),url(../_assets/c-darts.png),url(../_assets/c-karaoke.png),url(../_assets/c-game.png);
  background-size:auto 100%, auto 100%, auto 82%, auto 66%, auto 66%, auto 74%;
  background-position:9% 100%, 27% 100%, 46% 100%, 62% 100%, 76% 100%, 91% 100%;
}
.ft::after{ 
  content:""; position:absolute; left:0; right:0; top:calc(clamp(40px, 5vw, 72px) + clamp(180px, 18vw, 240px)); height:44px; pointer-events:none;
  background-repeat:no-repeat;
  background-image:linear-gradient(var(--ink-strong) 0 0),linear-gradient(var(--ink-strong) 0 0),linear-gradient(var(--ink-strong) 0 0);
  background-size:100% 3px, 30% 3px, 38% 3px;
  background-position:0 0, 62% 20px, 18% 40px;
}
.ft__nav a{ font-size:15px }

@media(max-width:900px){
  body:not(.page-index) main > .sec:first-child .pic{
    width:calc(100% + var(--gutter)); margin:32px calc(-1 * var(--gutter)) calc(-1 * clamp(72px, 8vw, 120px)) 0;
  }
  body.page-topics9 main > .sec:first-child .pic{ margin:40px 0 0 calc(-1 * var(--gutter)) }
  body.page-recruit main > .sec:first-child::after{ right:var(--gutter); width:34vw }
  body.page-recruit main > .sec:first-child::before{ width:84vw }
  .ft::before{ background-image:url(../_assets/c-walk.png),url(../_assets/c-hack.png),url(../_assets/c-ukulele.png);
    background-size:auto 100%, auto 100%, auto 82%; background-position:8% 100%, 50% 100%, 92% 100% }
  .page-index main > .sec:nth-of-type(4){ padding-top:46vw }
  .page-index main > .sec:nth-of-type(4)::before{ width:62vw }
  .page-index main > .sec:nth-of-type(4)::after{ width:46vw }
}

body.page-topics6 main > .sec:first-child .pic, body.page-topics7 main > .sec:first-child .pic{ margin-left:calc(var(--col) / 2 - 50vw) }

body.page-topics5 main > .sec:first-child .pic{ width:100vw; margin-left:calc(var(--col) / 2 - 50vw) }

body.page-topics8 main > .sec:first-child{ padding-bottom:0 }
body.page-topics8 main > .sec:first-child .pic{ margin-bottom:0 }
body.page-topic main > .sec:first-child .rule-mizu, body.page-topic main > .sec:first-child .rule-mizu + p{ position:relative; z-index:1 }

body.page-news main > .sec:first-child, body.page-privacy main > .sec:first-child{ padding-bottom:clamp(220px, 24vw, 340px) }
body.page-news main > .sec:first-child::before, body.page-privacy main > .sec:first-child::before{
  content:""; position:absolute; right:-4%; bottom:-8%; width:min(48vw, 680px); aspect-ratio:960/720;
  background:url(../_assets/sky-kumo.png) no-repeat 50% 100% / contain;
}
.page-news .sec .news{ margin-top:0 }
.page-privacy .sec:nth-of-type(2) h2.sh:first-child{ margin-top:0 }
.page-privacy h2.sh{ font-size:clamp(21px, 1.8vw, 26px); font-weight:400 }
.page-privacy .dl dd, .page-privacy .biz li{ font-size:var(--t1) }
.page-business h2.sh{ font-size:clamp(26px, 2.78vw, 40px); font-weight:400 }
.page-business .trio p.trio__v{ font-size:clamp(22px, 1.95vw, 28px); border-top:2px solid var(--ink-strong); padding-top:22px }
.page-business .trio p{ font-size:17px }
@media(min-width:901px){ .page-business .sec:nth-of-type(2) > .wrap{ max-width:calc(1000px + 2*var(--gutter)) } }
@media(max-width:900px){
  body.page-topics6 main > .sec:first-child .pic, body.page-topics7 main > .sec:first-child .pic{ margin:40px 0 calc(-1 * clamp(72px, 8vw, 120px)) calc(-1 * var(--gutter)) }
  body.page-topics5 main > .sec:first-child .pic{ width:100vw; margin-left:calc(-1 * var(--gutter)) }
  body.page-news main > .sec:first-child::before, body.page-privacy main > .sec:first-child::before{ width:84vw }
}

body.page-topic main > .sec:first-child .pic{ margin-bottom:0 }
body.page-topic main > .sec:first-child{ padding-bottom:clamp(56px, 6vw, 88px) }
body.page-topic main > .sec:first-child .rule-mizu{ margin-top:40px }
@media(max-width:900px){ body.page-topic main > .sec:first-child .pic{ margin-bottom:0 } }

/* ---------- 2026-10-23 追加修正 ---------- */
/* フッター：ナビの文字が道の線（::after）に重ならないよう、人物＋道の高さぶん下げる */
.ft{ padding-top:calc(clamp(40px, 5vw, 72px) + clamp(180px, 18vw, 240px) + 44px + clamp(32px, 4vw, 48px)) }

/* お問い合わせフォーム */
.page-contact .wrap.measure{ max-width:calc(720px + 2 * var(--gutter)) }
.page-contact main > .sec:first-child p{ max-width:none }
body.page-contact main > .sec:first-child h1.ph{ font-size:clamp(26px, 3.9vw, 56px); line-height:1.45; margin-bottom:0 }
.page-contact main > .sec:first-child + .sec{ padding-top:0 }
.form__note{ margin:0 0 16px; font-size:14px; color:#16181Cb0 }
.field__req{ margin-left:4px; color:#A1281E }
.form__errors{ list-style:none; margin:0 0 32px; padding:16px 20px; border-left:2px solid #A1281E; background:#A1281E0d; color:#A1281E; font-size:15px }
.form__errors li + li{ margin-top:4px }
.form{ margin:0; border-bottom:1px solid var(--rule) }
.field{ display:grid; grid-template-columns:152px minmax(0,1fr); gap:0 24px; align-items:start; padding-block:22px; border-top:1px solid var(--rule) }
.field__label{ font-size:14px; color:var(--sora); letter-spacing:.045em; padding-top:12px; line-height:1.6 }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea{
  display:block; width:100%; margin:0; padding:10px 12px; font:inherit; font-size:16px; line-height:1.7; color:var(--ink);
  background:#fff; border:1px solid #16181C59; border-radius:0; box-shadow:none; -webkit-appearance:none; appearance:none;
}
.field textarea{ min-height:200px; resize:vertical }
.field input:focus, .field textarea:focus{ outline:2px solid var(--sora); outline-offset:1px; border-color:var(--sora) }
.choices{ display:flex; flex-wrap:wrap; gap:4px 32px; padding-top:2px }
.choice{ display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer }
.choice input{ width:18px; height:18px; margin:0; accent-color:var(--sora) }
.form__privacy{ margin:32px 0 0; font-size:14px; color:#16181Cb0 }
.form__submit{ margin:24px 0 40px }
.btn{ display:inline-block; min-height:52px; padding:14px 56px; border:0; border-radius:0; background:var(--ink-strong); color:#fff;
  font:inherit; font-size:15px; letter-spacing:.12em; cursor:pointer }
.btn:hover{ background:var(--sora) }
.btn:focus-visible{ outline:2px solid var(--sora); outline-offset:4px }
@media(max-width:640px){
  .field{ grid-template-columns:1fr; gap:8px; padding-block:18px 20px }
  .field__label{ padding-top:0 }
  .choices{ flex-direction:column; gap:0 }
  .btn{ width:100% }
}