@charset "utf-8";

/* About */
#about {
    position: relative;
    color: #fff;
    scroll-margin-top: 72px;
    padding: clamp(96px, 10.56vw, 180px) 0 clamp(40px, 4.44vw, 72px);
    overflow: hidden;
    background: linear-gradient(180deg, var(--lp-c-blue-main) 0%, var(--lp-c-navy-800) 100%)
}

html.is-fv-intro-pending body #about {
    background: var(--lp-c-blue-main)
}

.message-container {
    position: relative;
    width: calc(100% - 64px);
    max-width: none;
    margin: 0 auto;
    padding: 0
}

.message-inner {
    max-width: none;
    margin: 0 auto;
    text-align: center
}

#about .section-title-motion {
    position: relative;
    display: inline-block
}

#about .section-title-brush {
    position: absolute;
    left: 44%;
    top: 51%;
    width: clamp(260px, 32vw, 440px);
    height: auto;
    max-width: none;
    z-index: 0;
    pointer-events: none;
    user-select: none
}

#about .section-title-motion__heading {
    position: relative;
    z-index: 1;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 900;
    font-size: clamp(30px, 1.09vw + 26.1px, 40px);
    margin: 0;
    text-wrap: balance
}

.heading-nobr {
    display: inline-block
}

#about .section-title-content {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 2.05;
    text-wrap: pretty;
    word-break: auto-phrase;
    line-break: strict
}

#about .message-line {
    margin: 0
}

#about .message-line+.message-line {
    margin: 24px 0 0
}

.message-strong {
    color: #fff;
    font-weight: 700
}

.message-support-orgs {
    white-space: nowrap
}

@media(max-width:960px) {
    .message-support-br {
        display: none
    }
}

#about .message-line-inline-note {
    margin: 12px 0 0;
    padding-left: 1.25em;
    text-indent: -1.25em;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .62)
}

#about .section-title-content .message-line:nth-of-type(2) {
    transition-delay: .15s
}

#about .section-title-content .message-line:nth-of-type(3) {
    transition-delay: .3s
}

.is-section-title-motion-ready #about .message-line-inline-note {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .48s ease, transform .66s cubic-bezier(.16, 1, .3, 1);
    transition-delay: .45s
}

.is-section-title-motion-ready #about .message-line-inline-note.is-message-line-visible {
    opacity: 1;
    transform: none
}

@media(prefers-reduced-motion:reduce) {
    #about .message-line-inline-note {
        opacity: 1;
        transform: none;
        transition: none
    }
}

/* Entry */
#entry {
    position: relative;
    scroll-margin-top: 72px;
    padding: clamp(64px, 11.11vw, 160px) 0 clamp(72px, 8.89vw, 128px);
    overflow: hidden;
    background: #EAECF1;
    color: #1C3E9E;
    margin-top: -1px
}

#entry .entry-cta-stage {
    width: min(1200px, calc(100% - clamp(40px, 8vw, 128px)));
    max-width: none;
    margin: 0 auto;
    padding: 0
}

#entry .entry-heading,
#entry .cv-image-panel__headline-default {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 1.52vw + 20.5px, 40px);
    margin: 0;
    text-wrap: balance
}

.cv-image-contact__icon {
    font-size: 20px
}

html .cv-image-panel__label::after {
    width: calc(56px + 0.25em);
    margin: 8px 0 0 calc(-0.25em);
}

@media(max-width:767px) {
    html .cv-image-panel__label {
        font-size: 14px
    }

    html .cv-image-panel__label::after {
        width: calc(48px + 0.25em);
    }
}

@media(max-width:360px) {
    html .cv-image-panel__label {
        font-size: 12px
    }

    html .cv-image-panel__label::after {
        width: calc(40px + 0.25em);
    }
}

@media(min-width:768px) and (max-width:960px),
(min-width:961px) and (max-width:1199px) and (orientation:portrait) {

    html,
    body {
        background: var(--lp-c-ink)
    }

    #hero-imgwrap::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 20%;
        z-index: 4;
        pointer-events: none;
        background: linear-gradient(180deg, var(--lp-c-ink) 0%, rgba(5, 7, 15, .58) 36%, rgba(5, 7, 15, .22) 68%, rgba(5, 7, 15, 0) 100%)
    }
}

/* 注釈 */
#notes {
    background: #EAECF1;
    color: #5B6478;
    padding: 0 0 clamp(48px, 5vw, 80px);
    margin-top: -1px
}

.notes-inner {
    width: min(1200px, calc(100% - clamp(40px, 8vw, 128px)));
    margin: 0 auto;
    border-top: 1px solid #C4CBD9;
    padding: clamp(24px, 2.8vw, 40px) 0 0
}

.notes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .02em;
    text-wrap: wrap;
    word-break: normal;
    line-break: strict
}

.notes-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    align-items: baseline
}

.notes-item__num {
    font-weight: 700;
    color: #1C3E9E
}

footer {
    background: #071747;
    color: #fff;
    padding: clamp(32px, 3.33vw, 48px) 0 clamp(24px, 2.22vw, 32px)
}

.footer-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 40px
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(32px, 5vw, 72px)
}

.footer-brand__name {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-top: 32px;
    padding-top: 20px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .62)
}

.supported-by-ntte {
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.supported-by-ntte__text {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .92)
}

.ntt-esports-logo {
    width: auto;
    display: block;
    flex: none
}

footer .ntt-esports-logo {
    height: 2.05em
}

/* モバイル固定CTA */
.sp-cta-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgb(76 89 132 / 50%);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none
}

.sp-cta-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
    background-color: #FF6A14;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
    padding: 15px 12px;
    text-shadow: none;
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px)
}

.sp-cta-bar__arrow {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    display: block
}

/* 募集要項サマリー */
#recruit {
    position: relative;
    background: #EAECF1;
    padding: clamp(40px, 4.44vw, 72px) 0 clamp(56px, 5.56vw, 96px);
    scroll-margin-top: 72px;
    overflow: hidden;
    margin-top: -1px
}

.recruit-container {
    position: relative;
    width: min(1080px, calc(100% - clamp(40px, 8vw, 128px)));
    max-width: none;
    margin: 0 auto;
    padding: 0
}

#recruit .section-title-label {
    display: flex;
    align-items: center;
    gap: 16px
}

.section-title-label__bar {
    width: 56px;
    height: 3px;
    background: #FF6A14;
    flex: none
}

#recruit .section-title-label__en {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #FF6A14}

#recruit .section-title-label__ja {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #5B6478
}

#recruit .section-title-motion__heading {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 1.52vw + 20.5px, 40px);
    color: #1C3E9E;
    margin: clamp(16px, 2.4vw, 32px) 0 0
}

#recruit .section-title-content {
    position: relative;
    width: min(1080px, calc(100% - clamp(40px, 8vw, 128px)));
    max-width: none;
    margin: clamp(32px, 4vw, 56px) auto 0;
    padding: 0
}

#recruit .recruit-table-shell {
    border: 1px solid #D5DBE7;
    overflow: hidden
}

#recruit .recruit-row {
    display: grid;
    grid-template-columns: 288px 1fr;
    align-items: stretch
}

#recruit .recruit-row+.recruit-row {
    border-top: 1px solid #E0E5EF
}

#recruit .recruit-row__label {
    background: #F2F6FF;
    border-left: 4px solid #0E308C;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px
}

#recruit .recruit-row__icon {
    flex: none;
    font-weight: 300;
    font-size: 32px;
    line-height: 1;
    color: #1C3E9E;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24
}

#recruit .recruit-row__label-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #1C3E9E;
    white-space: nowrap
}

#recruit .recruit-row__body {
    padding: 24px;
    font-size: 16px;
    color: #1B2C57;
    word-break: auto-phrase
}

@media(max-width:767px) {
    html #recruit .recruit-row__label {
        padding: 16px
    }

    html #recruit .recruit-row__body {
        padding: 18px 20px;
        text-wrap: wrap;
        word-break: normal
    }
}

.recruit-strong {
    color: #1B2C57;
    font-weight: 700;
    font-size: 16px
}

.recruit-body-text {
    color: #1B2C57
}

#recruit .recruit-row__note {
    margin-top: 12px;
    color: var(--lp-c-text-sub);
    font-size: 12px}

.is-section-title-motion-ready #recruit .section-title-content .recruit-row {
    opacity: 0;
    transform: translateX(-16px)
}

#recruit .section-title-content .recruit-row {
    transition: opacity .5s ease, transform .68s cubic-bezier(.16, 1, .3, 1)
}

.is-section-title-motion-ready #recruit .section-title-content .recruit-row.is-row-visible {
    opacity: 1;
    transform: none
}

.recruit-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.recruit-list__item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.7
}

.recruit-list__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF6A14;
    margin-top: calc(.85em - 3px)
}

.note-line {
    display: block
}

.recruit-note-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .25em
}

.recruit-schedule {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    align-items: baseline
}

.recruit-schedule__row {
    display: contents;
    line-height: 1.5
}

.recruit-schedule__term {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #1C3E9E;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0;
    white-space: nowrap
}

#recruit .requirements-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    margin-top: clamp(16px, 1.5vw, 20px)
}

#recruit .requirements-footer-row__note {
    margin: 0;
    padding-left: 1.25em;
    text-indent: -1.25em;
    font-size: 12px;
    color: #5B6478;
    text-align: left
}

#recruit .requirements-text-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    color: #1C56C9;
    background: transparent;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0;
    padding: 0;
    text-decoration: none;
    white-space: nowrap
}

#recruit .animated-link-arrow {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    display: block;
    transform: translateY(-2px)
}

#recruit .requirements-text-link:hover .animated-link-arrow,
#recruit .requirements-text-link:focus-visible .animated-link-arrow {
    transform: translate(5px, -2px)
}

/* ファーストビュー */
#top {
    position: relative;
    background: #0B1E6B;
    min-height: clamp(680px, 96vh, 1000px);
    display: flex;
    flex-direction: column
}

html {
    overflow-y: scroll
}

html.is-fv-intro-pending {
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color: transparent transparent
}

html.is-fv-intro-pending body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden
}

html.is-fv-intro-pending::-webkit-scrollbar-track,
html.is-fv-intro-pending::-webkit-scrollbar-thumb,
html.is-fv-intro-pending::-webkit-scrollbar-corner {
    background: transparent
}

#hero-media {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

#hero-imgwrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    will-change: transform
}

#hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% 26%;
    display: block;
    transform-origin: 64% 30%;
    animation: kenburns 13s ease-out forwards, photoIn var(--fv-photo-dur) ease var(--fv-photo-delay) both;
    top: 0px
}

#hero-img2 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 42%;
    display: block;
    transform-origin: 52% 42%;
    animation: kenburns2 13s ease-out forwards;
    opacity: 0;
    transition: opacity 1.4s ease
}

#hero-fiber {
    position: absolute;
    left: 1px;
    top: -51px;
    width: 100%;
    height: 135%;
    pointer-events: none;
    opacity: .95;
    will-change: transform;
    z-index: 7;
    mix-blend-mode: screen
}

.hero-fiber-flow--1 {
    animation: fiberFlow 6s cubic-bezier(.42, 0, .58, 1) var(--fv-flow-delay) infinite
}

.hero-fiber-flow--2 {
    animation: fiberFlow 7.4s cubic-bezier(.42, 0, .58, 1) calc(var(--fv-flow-delay) + 2.4s) infinite
}

.hero-fiber-flow--3 {
    animation: fiberFlow 6.8s cubic-bezier(.42, 0, .58, 1) calc(var(--fv-flow-delay) + 4.8s) infinite
}

#hero-frame {
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    z-index: 6;
    animation: frameIn var(--fv-frame-dur) ease var(--fv-frame-delay) both
}

#hero-frame-sp {
    display: none;
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: fill;
    pointer-events: none;
    user-select: none;
    z-index: 6;
    animation: frameIn var(--fv-frame-dur) ease var(--fv-frame-delay) both
}

#site-hd {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60
}

@media(max-width:960px) {
    html #site-hd {
        transition: none
    }
}

#site-hd .hd-row {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    gap: 24px
}

@media(max-width:960px) {
    html #site-hd .hd-row {
        padding-left: 24px;
        padding-right: 24px;
        transition: none
    }
}

@media(max-width:767px) {
    html #site-hd .hd-row {
        padding-top: 12px;
        padding-bottom: 12px
    }
}

#site-hd .hd-brand {
    display: flex;
    text-shadow: 0 2px 6px var(--lp-c-navy-950);
    transition: text-shadow .3s ease
}

#site-hd[data-scrolled="1"] .hd-brand {
    text-shadow: none
}

#site-hd .hd-brand__name {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 12px
}

#top .ntt-esports-logo {
    width: auto;
    display: block;
    flex: none
}

#site-hd .hd-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FF6A14;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 20px;
    white-space: nowrap;
    text-shadow: none
}

#top .fv-arrow {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    display: block;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1)
}

#top .hero-pad {
    position: relative;
    z-index: 10;
    width: 100%;
    margin: auto auto 0;
    padding: clamp(40px, 6vw, 80px) 40px clamp(56px, 8vw, 96px) 120px;
    text-shadow: none
}

#top .hero-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(12px, .72vw, 12px);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 6px var(--lp-c-navy-950);
    animation: heroRise var(--fv-rise-dur) cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--fv-rise-1)
}

.hero-eyebrow__dot {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background-color: #FF6A14;
    box-shadow: 0 0 6px 1px rgba(255, 106, 20, .7);
    animation: heroEyebrowPulse 2s ease-in-out infinite
}

@keyframes heroEyebrowPulse {
    0%, 100% {
        box-shadow: 0 0 6px 1px rgba(255, 106, 20, .7)
    }

    50% {
        box-shadow: 0 0 14px 4px rgba(255, 106, 20, 1)
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-eyebrow__dot {
        animation: none
    }
}

#top .hero-lead {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: #FFFFFF;
    text-shadow: 0 2px 6px var(--lp-c-navy-950);
    margin: 8px 0 40px;
    letter-spacing: .02em;
    animation: heroRise var(--fv-rise-dur) cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--fv-rise-2)
}

#top .fv-project-line {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

#hero-title {
    position: relative;
    top: -12px;
    margin: 16px 0 0;
    line-height: 0
}

#hero-title-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px
}

#hero-title-img,
#hero-title-img2 {
    display: block;
    width: auto;
    filter: var(--fv-title-shadow);
    object-fit: contain
}

#top .hero-copy {
    max-width: 640px;
    color: #fff;
    text-shadow: 0 2px 6px var(--lp-c-navy-950);
    font-size: 18px;
    margin: 24px 0 0;
    text-wrap: pretty;
    animation: heroRise var(--fv-rise-dur) cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--fv-rise-3)
}

#top .hero-copy__nobr {
    display: inline-block
}

@media(max-width:767px) {
    #top .hero-copy__recruit-label {
        display: block;
        white-space: nowrap
    }
}

#top .hero-credit {
    margin: 16px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    text-shadow: 0 2px 6px var(--lp-c-navy-950);
    animation: heroRise var(--fv-rise-dur) cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--fv-rise-3)
}

.hero-credit__strong {
    color: #fff;
    font-weight: 700
}

#top .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
    animation: heroRise var(--fv-rise-dur) cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: var(--fv-rise-4)
}

#top .fv-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.9vw, 20px);
    padding: 16px 40px;
    text-shadow: none;
    transition: filter .18s ease;
    background-color: #FF6A14
}

#top .fv-btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #FFFFFF;
    background-color: #FFFFFF33;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 1.9vw, 20px);
    padding: 17px 37px;
    text-shadow: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    transition: filter .18s ease;
    --cnr-w: 1.5px;
    background-image: linear-gradient(135deg, transparent 8.84px, #FFFFFF 8.84px, #FFFFFF calc(8.84px + var(--cnr-w)), transparent 0), linear-gradient(135deg, transparent calc(13.79px - var(--cnr-w)), #FFFFFF calc(13.79px - var(--cnr-w)), #FFFFFF 13.79px, transparent 0), linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#FFFFFF, #FFFFFF);
    background-size: 16px 16px, 16px 16px, calc(100% - 12px) var(--cnr-w), calc(100% - 12px) var(--cnr-w), var(--cnr-w) calc(100% - 12px), var(--cnr-w) calc(100% - 12px);
    background-position: top left, bottom right, top right, bottom left, left bottom, right top;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box
}

.section-divider {
    line-height: 0;
    background: #142E80;
    overflow: hidden;
    margin-top: -1px
}

.section-divider__shape {
    color: var(--lp-c-bg);
    display: block;
    width: 100%;
    height: clamp(96px, 11.11vw, 184px)
}

.sp-cta-bar__credit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 8px;
    row-gap: 2px;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .75);
    text-shadow: none
}

.sp-cta-bar__clause {
    white-space: nowrap
}

.sp-cta-bar__org {
    color: #fff;
    font-weight: 700
}

html,
body {
    background: #0B1E6B
}

@media(max-width:767px) {

    html,
    body {
        background: var(--lp-c-ink)
    }
}

body {
    color: #fff
}

a:hover {
    color: inherit
}

@media(max-width:960px) {
    #recruit .recruit-row {
        grid-template-columns: 1fr
    }

    #recruit.is-table-complete .recruit-table-shell {
        border-color: #D5DBE7
    }

    #recruit .recruit-row + .recruit-row {
        border-top-color: #D5DBE7
    }

    #recruit .recruit-row__label {
        border-bottom: 1px solid #D5DBE7
    }

    #recruit .recruit-row__body {
        background: #fff
    }
}

@media(max-width:960px) {
    #top .hero-pad {
        padding-left: 28px;
        padding-right: 28px
    }
}

:root {
    --fv-scale: 1;
    --fv-frame-delay: 0s;
    --fv-frame-dur: calc(.5s * var(--fv-scale));
    --fv-title-delay: calc(.15s * var(--fv-scale));
    --fv-title-dur: calc(1.6s * var(--fv-scale));
    --fv-title-scale: 1.24;
    --fv-fiber-delay: calc(1.05s * var(--fv-scale));
    --fv-fiber-dur: calc(.95s * var(--fv-scale));
    --fv-photo-delay: calc(1.7s * var(--fv-scale));
    --fv-photo-dur: calc(.6s * var(--fv-scale));
    --fv-rise-1: calc(2.15s * var(--fv-scale));
    --fv-rise-2: calc(2.25s * var(--fv-scale));
    --fv-rise-3: calc(2.35s * var(--fv-scale));
    --fv-rise-4: calc(2.45s * var(--fv-scale));
    --fv-rise-dur: calc(.8s * var(--fv-scale));
    --fv-flow-delay: calc(3.55s * var(--fv-scale));
    --fv-title-shadow: drop-shadow(0 4px 30px rgba(5, 9, 30, .55))
}

@media(max-width:640px) {
    :root {
        --fv-title-scale: 1.06;
        --fv-title-dur: calc(1s * var(--fv-scale))
    }
}

@keyframes heroRise {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes kenburns {
    0% {
        transform: scale(1.04) translateX(0.6%)
    }

    100% {
        transform: scale(1.12) translateX(-0.6%)
    }
}

@keyframes kenburns2 {
    0% {
        transform: scale(1.04) translateX(-0.6%)
    }

    100% {
        transform: scale(1.12) translateX(0.6%)
    }
}

@keyframes heroFiberRush {
    0% {
        opacity: 0;
        clip-path: inset(0 0 0 100%)
    }

    14% {
        opacity: .95
    }

    100% {
        opacity: .95;
        clip-path: inset(0 0 0 0)
    }
}

@keyframes heroFiberRushCompact {
    0% {
        opacity: 0;
        clip-path: inset(0 0 0 100%)
    }

    12% {
        opacity: .95;
        clip-path: inset(0 0 0 40%)
    }

    100% {
        opacity: .95;
        clip-path: inset(0 0 0 0)
    }
}

#hero-fiber {
    animation: heroFiberRush calc(.62s * var(--fv-scale)) cubic-bezier(.12, .76, .18, 1) calc(3.15s * var(--fv-scale)) both
}

@media(max-width:767px), (min-width:768px) and (max-width:1199px) and (orientation:portrait) {
    #hero-fiber {
        animation-name: heroFiberRushCompact;
        animation-duration: calc(.62s * var(--fv-scale));
        animation-delay: calc(3.28s * var(--fv-scale));
        animation-timing-function: linear
    }
}

@keyframes fiberFlow {
    0% {
        stroke-dashoffset: 2320;
        opacity: 0
    }

    5% {
        opacity: .8
    }

    82% {
        opacity: .8
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0
    }
}

@keyframes heroTitleIn {
    0% {
        opacity: 0;
        transform: translate(var(--tdx, 0px), var(--tdy, -120px)) scale(var(--fv-title-scale))
    }

    9% {
        opacity: 1;
        transform: translate(var(--tdx, 0px), var(--tdy, -120px)) scale(var(--fv-title-scale))
    }

    55% {
        opacity: 1;
        transform: translate(var(--tdx, 0px), var(--tdy, -120px)) scale(var(--fv-title-scale))
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes frameIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes photoIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fv-btn:hover .fv-arrow {
    transform: translateX(5px)
}

.fv-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    border-radius: 0
}

.fv-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    opacity: 0
}

@keyframes btnSweep {
    from {
        transform: translateX(-110%) skewX(-16deg)
    }

    to {
        transform: translateX(210%) skewX(-16deg)
    }
}

[data-btn-fx="sweep"] .fv-btn::before {
    inset: 0;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent)
}

[data-btn-fx="sweep"] .fv-btn:hover::before {
    opacity: 1;
    animation: btnSweep .55s cubic-bezier(.3, .7, .3, 1) both
}

#site-hd {
    transition: background-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent
}

#site-hd .hd-row {
    transition: padding .3s ease
}

#site-hd[data-scrolled="1"] {
    background-color: rgb(76 89 132 / 50%);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-bottom-color: rgba(255, 255, 255, .16);
    box-shadow: 0 10px 34px rgba(3, 9, 40, .34)
}

@media(prefers-reduced-motion:reduce) {

    [data-anim],
    [data-anim] * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }
}

nav a,
.fv-btn,
.detail-link {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0
}

#top p,
#entry p {
    font-weight: 500
}

strong,
b {
    font-weight: 700
}



@media(max-width:767px) {
    .section-heading {
        letter-spacing: -.01em
    }
}

@media(max-width:960px) {
    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }
}

@media(prefers-reduced-motion:reduce) {

    #hero-title-wrap,
    #hero-title-img,
    #hero-title-img2 {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }
}

.cv-image-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 88px 128px;
    background: #142E80;
    color: #fff;
    text-decoration: none;
    clip-path: polygon(38px 0, calc(100% - 38px) 0, 100% 38px, 100% calc(100% - 38px), calc(100% - 38px) 100%, 38px 100%, 0 calc(100% - 38px), 0 38px);
    box-shadow: 0 26px 64px rgba(14, 32, 96, .16);
    transition: background-color .42s cubic-bezier(.2, .8, .2, 1), box-shadow .42s ease, transform .42s cubic-bezier(.2, .8, .2, 1), opacity .18s ease
}

.cv-image-panel::before {
    content: "";
    position: absolute;
    inset: -50%;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .18) 49%, transparent 60%);
    transform: translateX(-40%) rotate(-8deg);
    transition: opacity .25s ease, transform .72s cubic-bezier(.2, .8, .2, 1)
}

.cv-image-panel__content {
    width: min(720px, 100%);
    text-align: center;
    position: relative;
    z-index: 1
}

.cv-image-panel__label {
    display: inline-block;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: .08em;
    color: #fff;
    -webkit-text-stroke: 0 transparent
}

.cv-image-panel__headline {
    position: relative;
    display: grid;
    place-items: center;
    margin-top: 24px;
    min-height: 1.3em
}

.cv-image-panel__headline-default,
.cv-image-panel__headline-hover {
    grid-area: 1/1;
    color: #fff}

.cv-image-panel__headline-hover {
    opacity: 0;
    transform: translateY(16px) scale(.92);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em
}

.cv-image-panel__body {
    margin: 16px auto 0;
    max-width: 520px;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 500
}

.cv-image-panel__note {
    margin: 24px 0 0;
    padding-left: 1.25em;
    text-indent: -1.25em;
    color: #fff;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 500
}

#entry .entry-note {
    padding-left: 1.25em;
    text-indent: -1.25em
}

.cv-image-panel[aria-disabled="true"] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 1;
    background: #7F8DB9
}

.cv-image-panel[aria-disabled="true"] .cv-image-panel__label::after {
    background: #F5AB83
}

.cv-image-panel__arrow {
    position: absolute;
    right: clamp(24px, 5vw, 68px);
    top: 50%;
    width: clamp(46px, 5vw, 72px);
    height: clamp(46px, 5vw, 72px);
    transform: translateY(-50%);
    color: #fff}

.cv-image-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.75;
    color: #5B6478
}

.cv-image-contact a {
    text-underline-offset: 4px;
    font-weight: 700;
    transition: color .18s ease
}

.cv-image-panel:focus-visible,
.cv-image-contact a:focus-visible {
    outline: 3px solid #1C3E9E;
    outline-offset: 5px
}

@media(hover:hover) {


    .cv-image-panel:hover::before,
    .cv-image-panel:focus-visible::before {
        opacity: 1;
        transform: translateX(40%) rotate(-8deg)
    }

    .cv-image-panel:hover .cv-image-panel__headline-default,
    .cv-image-panel:focus-visible .cv-image-panel__headline-default {
        opacity: 0;
        transform: translateY(-16px) scale(.96)
    }

    .cv-image-panel:hover .cv-image-panel__headline-hover,
    .cv-image-panel:focus-visible .cv-image-panel__headline-hover {
        opacity: 1;
        transform: none
    }

    .cv-image-panel:hover .cv-image-panel__arrow,
    .cv-image-panel:focus-visible .cv-image-panel__arrow {
        transform: translate(8px, -50%)
    }

    .cv-image-contact a:hover {
        color: #FF6A14
    }
}

@media(max-width:767px) {
    #entry {
        position: relative;
        z-index: 2;
        overflow: visible
    }

    #entry .entry-cta-stage {
        overflow: visible
    }

    .cv-image-panel {
        min-height: 420px;
        clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px)
    }

    .cv-image-panel__arrow {
        bottom: 20px;
        top: auto;
        transform: none
    }

    .cv-image-panel:active .cv-image-panel__arrow {
        transform: translateX(8px)
    }

    .cv-image-contact {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        line-height: 1.7;
        text-align: center
    }

    .cv-image-contact__icon {
        font-size: 16px;
        margin-top: 2px
    }

}

@media(prefers-reduced-motion:reduce) {

    .cv-image-panel,
    .cv-image-panel::before,
    .cv-image-panel__headline-default,
    .cv-image-panel__headline-hover,
    .cv-image-panel__arrow {
        transition: none !important
    }
}

#site-hd .hd-cta {
    opacity: 0;
    transform: translateY(-7px);
    pointer-events: none;
    transition-delay: 0s
}

#site-hd[data-fv-passed="1"] .hd-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: .16s
}

.sp-cta-bar {
    transition: background-color .3s ease, transform .8s cubic-bezier(.22, 1, .36, 1), opacity .3s ease
}

html[data-bar-on-light="1"] .sp-cta-bar {
    background-color: rgb(28 86 201 / 58%)
}

#site-hd[data-recruit-active="1"] {
    background-color: rgb(28 86 201 / 58%);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    border-bottom-color: rgba(255, 255, 255, .24);
    box-shadow: 0 12px 36px rgba(9, 36, 112, .3)
}

.is-section-title-motion-ready [data-section-title-motion]:not(.is-title-visible) .section-title-label {
    opacity: 0;
    transform: translateY(10px)
}

.is-section-title-motion-ready [data-section-title-motion]:not(.is-title-visible) .section-title-motion__heading {
    opacity: 0;
    transform: translateX(-24px);
    clip-path: polygon(0 0, 0 0, 24px 100%, 0 100%)
}

.section-title-label {
    transition: opacity .46s ease, transform .58s cubic-bezier(.16, 1, .3, 1)
}

.section-title-motion__heading {
    transition: opacity .45s ease .08s, transform .72s cubic-bezier(.16, 1, .3, 1) .08s, clip-path .72s cubic-bezier(.16, 1, .3, 1) .08s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.is-section-title-motion-ready [data-section-title-motion]:not(.is-title-visible) .section-title-brush {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 18px 100%, 0 100%)
}

.section-title-brush {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: opacity .42s ease .18s, clip-path .78s cubic-bezier(.16, 1, .3, 1) .18s
}

.is-section-title-motion-ready [data-section-title-motion]:not(.is-title-visible) .section-title-content {
    opacity: 0;
    transform: translateY(18px)
}

.section-title-content {
    transition: opacity .52s ease .26s, transform .72s cubic-bezier(.16, 1, .3, 1) .26s
}


#about .section-title-motion__heading.is-slot-title-ready,
#recruit .section-title-motion__heading.is-slot-title-ready {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none
}

.is-slot-title-ready .slot-char {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    visibility: hidden;
    white-space: pre;
    line-height: inherit
}

.is-title-visible .is-slot-title-ready .slot-char {
    visibility: visible
}

.slot-char__out,
.slot-char__in {
    display: block;
    transform: translateY(0)
}

.slot-char__out {
    visibility: hidden
}

.slot-char__in {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-112%)
}

.is-title-visible .slot-char__in {
    animation: sectionTitleSlotIn .54s cubic-bezier(.55, .02, .18, 1) calc(var(--slot-index) * 45ms) both
}

[data-section-title-motion].is-motion-restored .slot-char__in {
    animation: none !important;
    transform: translateY(0)
}

@keyframes sectionTitleSlotIn {
    from {
        transform: translateY(-112%)
    }

    to {
        transform: translateY(0)
    }
}

@media(prefers-reduced-motion:reduce) {
    .is-slot-title-ready .slot-char {
        visibility: visible !important
    }

    .is-slot-title-ready .slot-char__out {
        visibility: visible !important;
        animation: none !important;
        transform: none !important
    }

    .is-slot-title-ready .slot-char__in {
        display: none !important;
        animation: none !important
    }
}

#about {
    padding-top: clamp(96px, 10.56vw, 180px)
}

#about .section-title-content {
    margin-top: clamp(48px, 5vw, 72px)
}

.is-section-title-motion-ready #about .section-title-content {
    opacity: 1;
    transform: none;
    transition: none
}

.is-section-title-motion-ready #about .message-line {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .48s ease, transform .66s cubic-bezier(.16, 1, .3, 1)
}

.is-section-title-motion-ready #about .message-line.is-message-line-visible {
    opacity: 1;
    transform: none
}

@media(prefers-reduced-motion:reduce) {
    #hero-fiber {
        animation: none !important;
        opacity: .95 !important;
        clip-path: none !important;
        transform: none !important
    }

    #about .message-line {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }

    [data-section-title-motion] .section-title-label,
    [data-section-title-motion] .section-title-motion__heading,
    [data-section-title-motion] .section-title-content {
        opacity: 1 !important;
        transform: none !important;
        translate: 0 0 !important;
        clip-path: none !important;
        transition: none !important
    }

    [data-section-title-motion] .section-title-brush {
        opacity: 1 !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important
    }
}

.is-section-title-motion-ready #about.is-brush-impact:not(.is-title-visible) .section-title-brush {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: messageBrushImpact .42s cubic-bezier(.16, 1, .3, 1) both
}

@keyframes messageBrushImpact {
    0% {
        opacity: 0;
        transform: translate(var(--brush-x), var(--brush-y)) rotate(-4deg) scale(.4)
    }

    55% {
        opacity: 1;
        transform: translate(var(--brush-x), var(--brush-y)) rotate(-4deg) scale(1.08)
    }

    100% {
        opacity: 1;
        transform: translate(var(--brush-x), var(--brush-y)) rotate(-4deg) scale(1)
    }
}

.is-section-title-motion-ready #entry:not(.is-title-visible) .entry-cta-brush {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 18px 100%, 0 100%)
}

.entry-cta-brush {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: opacity .42s ease .18s, clip-path .78s cubic-bezier(.16, 1, .3, 1) .18s
}

#entry.is-title-visible .entry-cta-brush {
    opacity: 1
}

.is-section-title-motion-ready #entry .entry-cta-brush--bottom-right:not(.is-inview) {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 18px 100%, 0 100%)
}

#entry .entry-cta-brush--bottom-right.is-inview {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

#entry.is-motion-restored .entry-cta-brush,
#entry .entry-cta-brush.is-motion-restored {
    opacity: 1 !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    transition: none !important;
    animation: none !important
}

@keyframes entryBrushImpact {
    0% {
        opacity: 0;
        transform: scale(.4)
    }

    55% {
        opacity: 1;
        transform: scale(1.08)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@media(prefers-reduced-motion:reduce) {
    #about .section-title-brush {
        animation: none !important
    }

    #entry .entry-cta-brush {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        clip-path: none !important
    }
}

.entry-cta-stage {
    position: relative;
    isolation: isolate
}

.entry-cta-brush {
    position: absolute;
    display: block;
    height: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none
}

.entry-cta-brush--top-left {
    width: clamp(220px, 25vw, 360px);
    left: clamp(-144px, -8vw, -80px);
    top: clamp(-64px, -4vw, -40px)
}

.entry-cta-brush--bottom-right {
    width: clamp(220px, 25vw, 360px);
    right: clamp(-144px, -8vw, -80px);
    bottom: clamp(-32px, -2vw, -8px)
}

.entry-cta-stage .entry-form-motion,
.entry-cta-stage .cv-image-panel,
.entry-cta-stage .cv-image-contact {
    position: relative;
    z-index: 1
}

.cv-image-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, #FF6A14 0%, #FF873F 52%, #E9540A 100%)}

.cv-image-panel::before {
    z-index: 1
}

.cv-image-panel__content,
.cv-image-panel__arrow {
    z-index: 2
}

.cv-image-panel__label {
    transform-origin: 50% 50%;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), letter-spacing .5s cubic-bezier(.16, 1, .3, 1), color .32s ease
}

.cv-image-panel__headline-default,
.cv-image-panel__headline-hover {
    transition: opacity .4s ease, transform .56s cubic-bezier(.16, 1, .3, 1)
}

@media(hover:hover) {

    .cv-image-panel:hover,
    .cv-image-panel:focus-visible {
        background: #142E80;
        box-shadow: 0 34px 78px rgba(255, 106, 20, .28);
        transition: box-shadow .5s ease, transform .52s cubic-bezier(.22, 1, .36, 1)
    }

    .cv-image-panel:hover::after,
    .cv-image-panel:focus-visible::after {
        opacity: 1
    }

    .cv-image-panel:hover .cv-image-panel__label,
    .cv-image-panel:focus-visible .cv-image-panel__label {
        transform: scale(1.3);
        letter-spacing: .12em;
        color: #fff
    }
}

@media(prefers-reduced-motion:reduce) {

    .cv-image-panel::after,
    .cv-image-panel__label,
    .cv-image-panel__headline-default,
    .cv-image-panel__headline-hover {
        transition: none !important
    }
}

#recruit .section-title-content {
    opacity: 1;
    transform: none;
    transition: none
}

@media(prefers-reduced-motion:reduce) {

    #about .message-line,
    #recruit .section-title-content .recruit-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }
}

#recruit .recruit-table-shell {
    background: transparent;
    border-color: transparent
}

#recruit .recruit-row__body {
    background: #fff
}

#recruit.is-table-complete .recruit-table-shell {
    background: #fff;
    border-color: #D5DBE7
}

#recruit .requirements-footer-row {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity .4s ease, transform .64s cubic-bezier(.16, 1, .3, 1)
}

#recruit .requirements-footer-row.is-requirements-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none
}

@media(prefers-reduced-motion:reduce) {
    #recruit .requirements-footer-row {
        transition: none !important;
        transform: none !important
    }
}

.cv-image-panel::after {
    inset: -35% auto -35% -45%;
    width: 150%;
    opacity: 1;
    transform: translateX(-105%) skewX(-12deg);
    transform-origin: 100% 50%;
    box-shadow: 12px 0 26px rgba(255, 106, 20, .3);
    transition: transform .68s cubic-bezier(.22, 1, .36, 1)
}

.cv-image-panel::before {
    opacity: 0;
    animation: none
}

.cv-image-panel__arrow {
    transform-origin: 50% 50%;
    transition: transform .48s cubic-bezier(.22, 1, .36, 1)
}

.cv-image-panel__headline-default {
    transition-delay: .14s
}

.cv-image-panel__headline-hover {
    transition-delay: 0s
}

@keyframes ctaArrowLaunch {
    0% {
        transform: translate(0, -50%) scale(1)
    }

    24% {
        transform: translate(-6px, -50%) scale(.9)
    }

    66% {
        transform: translate(14px, -50%) scale(1.08)
    }

    100% {
        transform: translate(8px, -50%) scale(1)
    }
}

@media(hover:hover) {

    .cv-image-panel:hover::after,
    .cv-image-panel:focus-visible::after {
        transform: translateX(0) skewX(-12deg)
    }

    .cv-image-panel:hover .cv-image-panel__headline-default,
    .cv-image-panel:focus-visible .cv-image-panel__headline-default {
        transition-delay: .14s
    }

    .cv-image-panel:hover .cv-image-panel__headline-hover,
    .cv-image-panel:focus-visible .cv-image-panel__headline-hover {
        transition-delay: .22s
    }

    .cv-image-panel:hover .cv-image-panel__arrow,
    .cv-image-panel:focus-visible .cv-image-panel__arrow {
        animation: ctaArrowLaunch .68s cubic-bezier(.22, 1, .36, 1) both
    }
}

@media(prefers-reduced-motion:reduce) {
    .cv-image-panel::after {
        transition: none !important;
        box-shadow: none
    }

    .cv-image-panel:hover .cv-image-panel__arrow,
    .cv-image-panel:focus-visible .cv-image-panel__arrow {
        animation: none !important;
        transform: translate(8px, -50%)
    }
}

.cv-image-panel__headline-hover {
    font-size: clamp(32px, 5.4vw, 40px)
}

#site-hd .hd-row {
    padding-top: 12px;
    padding-bottom: 12px
}

#site-hd .hd-brand__name {
    font-size: 15px
}

#site-hd .hd-brand {
    gap: 0
}

#site-hd .hd-cta {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), max-height .5s cubic-bezier(.22, 1, .36, 1), padding .5s cubic-bezier(.22, 1, .36, 1), filter .18s ease
}

#site-hd[data-fv-passed="1"] .hd-brand {
    gap: 4px
}

#site-hd[data-fv-passed="1"] .hd-cta {
    max-height: 48px;
    padding-top: 12px;
    padding-bottom: 12px
}

@media(prefers-reduced-motion:reduce) {
    #site-hd .hd-cta {
        transition: none !important
    }
}

#hero-title-wrap img {
    height: clamp(56px, 9.5vw, 172px);
    transform: none;
    transform-origin: 50% 50%
}

#hero-title-wrap {
    animation: none;
    transform: rotate(-3.5deg);
    transform-origin: 50% 50%;
    width: max-content
}

.is-hero-intro-active #hero-title-wrap {
    opacity: 0;
    visibility: hidden
}

html:not(.is-hero-intro-active):not(.is-hero-intro-complete) {
    scrollbar-color: transparent transparent
}

html:not(.is-hero-intro-active):not(.is-hero-intro-complete)::-webkit-scrollbar-track,
html:not(.is-hero-intro-active):not(.is-hero-intro-complete)::-webkit-scrollbar-thumb,
html:not(.is-hero-intro-active):not(.is-hero-intro-complete)::-webkit-scrollbar-corner {
    background: transparent
}

.hero-title-intro-clone {
    position: fixed;
    z-index: 55;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    pointer-events: none;
    transform-origin: 50% 50%;
    will-change: left, top, transform
}

.hero-title-intro-clone img {
    display: block;
    width: auto;
    height: clamp(56px, 9.5vw, 172px);
    object-fit: contain;
    transform-origin: 50% 50%;
    filter: var(--fv-title-shadow)
}

.hero-title-intro-word-a {
    opacity: 0;
    animation: heroIntroWordA .68s cubic-bezier(.16, 1, .3, 1) var(--fv-title-delay) both
}

.hero-title-intro-word-b {
    opacity: 0;
    animation: heroIntroWordB .62s cubic-bezier(.16, 1, .3, 1) calc(var(--fv-title-delay) + .58s) both
}

@keyframes heroIntroWordA {
    0% {
        opacity: 0;
        clip-path: circle(0 at 50% 50%);
        transform: scale(1.12);
        filter: brightness(3) contrast(1.25) blur(7px) drop-shadow(0 0 46px rgba(255, 255, 255, .95))
    }

    16% {
        opacity: 1;
        clip-path: circle(78% at 50% 50%);
        transform: scale(1.06);
        filter: brightness(2.15) contrast(1.16) blur(0) drop-shadow(0 0 42px rgba(255, 255, 255, .9))
    }

    48%,
    100% {
        opacity: 1;
        clip-path: circle(150% at 50% 50%);
        transform: none;
        filter: var(--fv-title-shadow)
    }
}

@keyframes heroIntroWordB {
    0% {
        opacity: 0;
        clip-path: circle(0 at 50% 50%);
        transform: scale(1.12);
        filter: brightness(3) contrast(1.25) blur(7px) drop-shadow(0 0 46px rgba(255, 255, 255, .95))
    }

    18% {
        opacity: 1;
        clip-path: circle(78% at 50% 50%);
        transform: scale(1.06);
        filter: brightness(2.15) contrast(1.16) blur(0) drop-shadow(0 0 42px rgba(255, 255, 255, .9))
    }

    50%,
    100% {
        opacity: 1;
        clip-path: circle(150% at 50% 50%);
        transform: none;
        filter: var(--fv-title-shadow)
    }
}

@media(prefers-reduced-motion:reduce) {
    #hero-title-wrap {
        opacity: 1 !important;
        visibility: visible !important
    }

    #hero-frame {
        visibility: visible !important
    }

    #site-hd {
        visibility: visible !important
    }

    html {
        scrollbar-color: auto
    }

    .hero-title-intro-clone {
        display: none !important
    }
}

@media(min-width:961px) {
    #top .hero-pad {
        padding-left: clamp(48px, 6vw, 80px);
        transform: translateY(-24px)
    }
}

@media(min-width:1440px) {
    #top .hero-pad {
        padding-left: clamp(80px, 5vw, 96px);
        transform: translateY(-38px)
    }

    #top .hero-eyebrow {
        font-size: clamp(12px, .72vw, 14px)
    }

    #top .hero-lead {
        font-size: clamp(16px, .92vw, 20px);
        margin: 8px 0 48px
    }

    #top .hero-copy {
        max-width: 820px;
        font-size: clamp(20px, 1.38vw, 24px);
        margin-top: 32px
    }

    #top .hero-credit {
        font-size: clamp(12px, .84vw, 16px);
        margin-top: 24px
    }

    #top .hero-actions {
        margin-top: 40px
    }

    #top .hero-actions .fv-btn {
        font-size: clamp(20px, 1.2vw, 24px);
        padding: 16px 48px
    }

    #site-hd .hd-brand__name {
        font-size: clamp(18px, 1.04vw, 21px)
    }

    #site-hd .hd-cta {
        font-size: clamp(14px, .84vw, 16px)
    }
}

@media(min-width:2200px) {
    #top .hero-pad {
        padding-left: clamp(96px, 4.5vw, 120px);
        transform: translateY(-48px)
    }
}

@media(min-width:961px) and (max-width:1439px) {
    #hero-img {
        animation: kenburnsPcShift 13s ease-out forwards, photoIn var(--fv-photo-dur) ease var(--fv-photo-delay) both
    }

    #hero-img2 {
        animation: kenburns2PcShift 13s ease-out forwards
    }
}

@keyframes kenburnsPcShift {
    0% {
        transform: scale(1.065) translateX(3vw) translateX(0.6%)
    }

    100% {
        transform: scale(1.145) translateX(3vw) translateX(-0.6%)
    }
}

@keyframes kenburns2PcShift {
    0% {
        transform: scale(1.065) translateX(2.9vw) translateX(-0.6%)
    }

    100% {
        transform: scale(1.145) translateX(2.9vw) translateX(0.6%)
    }
}

.requirements-text-link {
    color: #1C56C9;
    text-decoration: none;
    text-decoration-color: #1C56C9;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px
}

.requirements-text-link:hover,
.requirements-text-link:focus-visible {
    color: #1C56C9;
    text-decoration: underline
}

.requirements-text-link:focus-visible {
    outline: 2px solid #1C56C9;
    outline-offset: 5px
}

@media(max-width:767px) {
    #recruit .requirements-footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }

    .requirements-text-link {
        align-self: flex-end
    }

    .requirements-text-link,
    .animated-underline-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center
    }
}

.animated-underline-link,
.animated-underline-link:hover,
.animated-underline-link:focus-visible {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1C56C9;
    text-decoration: none
}

.animated-link-label {
    position: relative;
    display: inline-block;
    line-height: var(--lp-lh-heading);
    padding-bottom: 4px
}

.animated-link-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1)
}

.animated-underline-link:hover .animated-link-label::after,
.animated-underline-link:focus-visible .animated-link-label::after {
    transform: scaleX(1)
}

.animated-link-arrow {
    transition: transform .24s cubic-bezier(.16, 1, .3, 1)
}

.animated-underline-link:hover .animated-link-arrow,
.animated-underline-link:focus-visible .animated-link-arrow {
    transform: translateX(5px)
}

.cv-image-contact__icon {
    color: #5B6478;
    line-height: 1;
    flex: 0 0 auto;
    align-self: center;
    transform: translateY(-1px)
}

.recruit-google-icon {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    text-transform: none
}

@media(prefers-reduced-motion:reduce) {

    .animated-link-label::after,
    .animated-link-arrow {
        transition: none !important
    }
}

.cv-image-panel__label::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 8px auto 0;
    background: #FF6A14
}

@media(max-width:767px) {
    #site-hd {
        position: static
    }

    #site-hd .hd-row {
        gap: 8px
    }

    #site-hd .hd-brand {
        min-width: 0;
        flex: 1 1 auto
    }

    #site-hd .hd-brand__name {
        font-size: 14px;
        white-space: nowrap
    }

    #site-hd .hd-cta {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        font-size: 12px;
        padding-left: 12px;
        padding-right: 12px
    }

    #site-hd .supported-by-ntte {
        display: inline-flex
    }

    #site-hd .supported-by-ntte__text {
        font-size: 12px
    }

    #site-hd .hd-brand__name {
        flex-wrap: wrap;
        column-gap: 12px}

    #site-hd .hd-row {
        padding-left: 20px;
        padding-right: 20px
    }

    #site-hd .hd-cta {
        display: none
    }

    .sp-cta-bar {
        display: block
    }

    html[data-fv-passed="1"] .sp-cta-bar {
        transform: none;
        opacity: 1;
        pointer-events: auto
    }

    html[data-fv-passed="1"][data-entry-reached="1"] .sp-cta-bar {
        transform: translateY(120%);
        opacity: 0;
        pointer-events: none
    }

    footer {
        padding-bottom: 96px
    }
}

@media(prefers-reduced-motion:reduce) {
    .sp-cta-bar {
        transition: none !important
    }
}

:root {
    --lp-lh-heading: 1.3;
    --lp-lh-body: 1.8;
    --lp-lh-note: 1.8;
    --lp-track-heading: -.02em;
    --lp-track-body: .02em;
    --lp-track-label: .08em;
    --lp-track-wide: .16em
}

#site-hd .hd-brand__name,
#about .section-title-motion__heading,
#recruit .section-title-motion__heading,
#entry .entry-heading,
#entry .cv-image-panel__cta,
#entry .cv-image-panel__headline-default,
#entry .cv-image-panel__headline-hover,
footer .footer-brand__name {
    line-height: var(--lp-lh-heading);
    letter-spacing: var(--lp-track-heading)
}

#top .hero-copy,
#about .message-line,
#recruit .recruit-row__body,
#recruit .recruit-row__body :where(span, strong, li, div),
#entry .entry-lead,
#entry .cv-image-panel__body {
    line-height: var(--lp-lh-body);
    letter-spacing: var(--lp-track-body)
}

.entry-lead__addressee {
    white-space: nowrap
}

#recruit .recruit-row__body,
#recruit .recruit-row__body li,
#recruit .recruit-row__body li>span,
#entry .cv-image-contact {
    line-height: var(--lp-lh-body)
}

#recruit .recruit-row__note,
#recruit .requirements-footer-row__note,
#entry .entry-note,
#entry .cv-image-panel__note,
#entry .cv-image-contact,
footer .footer-bottom {
    line-height: var(--lp-lh-note);
    letter-spacing: var(--lp-track-body)
}

#site-hd .hd-cta,
#top .hero-eyebrow,
#top .hero-actions .fv-btn,
#recruit .requirements-footer-row .animated-underline-link {
    line-height: var(--lp-lh-heading);
    letter-spacing: var(--lp-track-label)
}

#top .hero-credit {
    line-height: normal;
    letter-spacing: var(--lp-track-body)
}

#recruit .recruit-row__label-text {
    line-height: normal;
    letter-spacing: var(--lp-track-label)
}

#recruit .section-title-label__en,
#entry .cv-image-panel__label {
    line-height: var(--lp-lh-heading);
    letter-spacing: var(--lp-track-wide)
}

#recruit .section-title-label__ja {
    line-height: var(--lp-lh-heading);
    letter-spacing: var(--lp-track-label)
}

.material-symbols-rounded {
    line-height: 1;
    letter-spacing: normal
}

@media(max-width:767px) {
    #top .hero-pad {
        padding-left: 24px;
        padding-right: 24px
    }
}

.cv-image-panel__label::after {
    transition: background-color .24s ease
}

@media(hover:hover) {

    .cv-image-panel:hover .cv-image-panel__label::after,
    .cv-image-panel:focus-visible .cv-image-panel__label::after {
        background: #fff
    }
}

#top .hero-lead {
    margin-bottom: 32px
}

@media(max-width:767px) {
    #top .hero-lead {
        margin-bottom: 24px
    }
}

#site-hd .hd-brand {
    flex-direction: row;
    align-items: center;
    align-self: center
}

#site-hd .hd-cta {
    align-self: center
}

#site-hd .ntt-esports-logo {
    height: 2.05em
}

@media(max-width:767px) {
    #top {
        --dw: 100vw;
        min-height: auto;
        overflow: hidden;
        background: var(--lp-c-ink)
    }

    #top::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(var(--dw)*1);
        bottom: 0;
        background: var(--lp-c-blue-main);
        z-index: 1;
        pointer-events: none;
        animation: frameIn var(--fv-frame-dur) ease var(--fv-frame-delay) both
    }

    #hero-media {
        background: var(--lp-c-ink)
    }

    #hero-media::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(var(--dw)*.48);
        height: calc(var(--dw)*.58);
        z-index: 5;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(5, 7, 15, 0) 0%, rgba(5, 7, 15, .45) 34%, rgba(5, 7, 15, .88) 66%, var(--lp-c-ink) 84%, var(--lp-c-ink) 100%)
    }

    #hero-frame {
        display: none
    }

    #hero-frame-sp {
        display: block;
        top: 0;
        left: 0;
        width: 100vw;
        height: calc(var(--dw)*1.15);
        object-fit: fill
    }

    #about {
        background: linear-gradient(180deg, var(--lp-c-blue-main) 0%, var(--lp-c-navy-800) 100%)
    }

    #hero-imgwrap {
        top: 0;
        bottom: auto;
        height: calc(var(--dw)*.85);
        -webkit-mask-image: none;
        mask-image: none
    }

    #hero-img {
        animation: kenburns 13s ease-out forwards, photoIn var(--fv-photo-dur) ease var(--fv-photo-delay) both
    }

    #hero-img2 {
        animation: kenburns2 13s ease-out forwards
    }

    #hero-img,
    #hero-img2 {
        object-fit: cover
    }

    #hero-img {
        object-position: 58% 34%;
        transform-origin: 58% 34%
    }

    #hero-img2 {
        object-position: 70% 34%;
        transform-origin: 70% 34%
    }

    #hero-imgwrap::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 28%;
        z-index: 4;
        pointer-events: none;
        background: linear-gradient(180deg, var(--lp-c-ink) 0%, rgba(5, 7, 15, .72) 32%, rgba(5, 7, 15, .34) 62%, rgba(5, 7, 15, 0) 100%)
    }

    #hero-imgwrap::after {
        display: none
    }

    #hero-fiber {
        left: -15%;
        width: 130%;
        height: auto;
        aspect-ratio: 1440/900;
        top: calc(var(--dw)*.425)
    }

    #top .hero-pad {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding-top: calc(var(--dw)*.5);
        padding-bottom: 16px
    }

    #top .hero-eyebrow {
        order: 0;
        align-self: flex-start
    }

    #top .hero-lead {
        display: block;
        order: 1;
        font-size: 14px;
        margin: 14px 0 0
    }

    #top #hero-title {
        order: 2;
        top: 0;
        margin: calc(var(--dw)*.035) 0 0
    }

    #top .hero-copy {
        order: 3;
        margin: calc(var(--dw)*.045) 0 0;
        font-size: 16px
    }

    #top .hero-actions {
        order: 4;
        width: 100%;
        margin-top: 20px;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px
    }

    #top .hero-actions .fv-btn {
        width: 100%;
        justify-content: center;
        font-size: 17px;
        padding: 15px 12px
    }

    #top .hero-credit {
        order: 5;
        margin: 12px 0 0;
        text-align: center
    }

    .fv-credit-sep {
        display: none
    }

    .fv-credit-br {
        display: inline
    }

}

.note-ref {
    font-size: 12px;
    font-weight: 400;
    vertical-align: super;
    line-height: 0;
    white-space: nowrap;
    letter-spacing: 0
}

.note-ref a {
    color: var(--lp-c-blue-600);
    text-decoration: none;
    transition: opacity .18s ease
}

.note-ref a:hover,
.note-ref a:focus-visible {
    opacity: .65
}

#about .note-ref a {
    color: #8FBBFF
}

.note-ref a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px
}

#top .hero-pad .fv-btn {
    white-space: nowrap
}

@media(min-width:768px) {
    .fv-credit-br {
        display: none
    }
}

#notes a[href^="http"] {
    color: var(--lp-c-blue-main);
    text-decoration: none;
    word-break: break-all;
    transition: opacity .18s ease
}

#notes a[href^="http"]:hover,
#notes a[href^="http"]:focus-visible {
    opacity: .65
}

#notes a[href^="http"]:focus-visible {
    outline: 2px solid var(--lp-c-blue-main);
    outline-offset: 2px
}

#notes li {
    scroll-margin-top: 96px;
    transition: background-color .6s ease
}

#notes li.is-note-highlight {
    background: rgba(255, 106, 20, .16)
}

@media(max-width:767px) {

    .cv-image-panel::after {
        inset: -35% auto -35% -80%;
        width: 240%
    }

    .cv-image-panel:active .cv-image-panel__label::after {
        background: #FF6A14
    }

    .entry-heading,
    .entry-lead,
    .entry-note {
        word-break: auto-phrase;
        text-wrap: pretty
    }

    #site-hd .hd-row {
        padding-top: 10px;
        padding-bottom: 10px
    }

    #site-hd .hd-brand {
        gap: 0
    }

    #site-hd .hd-brand__name {
        line-height: 1.15}

    .footer-inner {
        padding-left: 20px;
        padding-right: 20px
    }

    footer .footer-brand__name {
        font-size: 17px
    }

    footer .supported-by-ntte__text {
        font-size: 12px
    }

    #recruit .recruit-row__label {
        padding: 14px 20px;
        gap: 12px
    }

    #recruit .recruit-row__icon {
        font-size: 26px
    }

    #recruit .recruit-row__body {
        padding: 18px 20px 22px
    }

    .cv-image-panel__headline-hover {
        font-size: 26px
    }

    .sp-br {
        display: inline
    }

    .hero-title-intro-clone {
        --dw: 100vw;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(16px, calc(var(--dw)*.06 - 8px), 40px)
    }

    .hero-title-intro-clone img {
        height: calc(var(--dw)*.185)
    }

    .hero-title-intro-clone img+img {
        margin-left: calc(var(--dw)*.11)
    }

    #hero-frame-sp,
    #top::after {
        animation: none;
        opacity: 1
    }

    #top::before {
        content: "";
        position: fixed;
        inset: 0;
        background: #0B1E6B;
        z-index: 7;
        pointer-events: none;
        opacity: 1;
        transition: opacity .9s cubic-bezier(.22, 1, .36, 1);
        animation: introVeilOut .9s ease 3.4s both
    }

    .is-hero-intro-complete #top::before {
        animation: none;
        opacity: 0;
        visibility: hidden
    }

}

@keyframes introVeilOut {
    to {
        opacity: 0;
        visibility: hidden
    }
}

@media(max-width:960px),
(min-width:961px) and (max-width:1199px) and (orientation:portrait) {
    :root {
        --fv-title-shadow: none
    }
}

@media(prefers-reduced-motion:reduce) {
    #top::before {
        display: none !important
    }
}

@media(min-width:768px) {
    .sp-br {
        display: none
    }
}

footer .footer-brand__name {
    row-gap: 0;
    column-gap: 12px;
    line-height: 1.15
}

#site-hd .supported-by-ntte .ntt-esports-logo {
    height: 32.5px;
    margin-top: -1px;
    margin-bottom: -1px
}

#site-hd .supported-by-ntte {
    gap: 6px
}

@media(max-width:767px) {

    #site-hd .supported-by-ntte .ntt-esports-logo {
        height: 32.5px;
        margin-top: 0;
        margin-bottom: 0
    }

    #site-hd .hd-brand__name {
        row-gap: 4px
    }

    footer .supported-by-ntte .ntt-esports-logo {
        height: 32.5px
    }
}

.fv-project-line .ntt-esports-logo {
    height: 32.5px
}

.fv-project-line .supported-by-ntte {
    gap: 6px
}

@media(min-width:961px) {

    .entry-cta-head,
    .cv-image-panel__cta {
        display: none
    }

    .entry-cta-brush--top-left {
        top: calc(clamp(-64px, -4vw, -40px) + 122px)
    }

    .entry-cta-brush--bottom-right {
        bottom: calc(clamp(-32px, -2vw, -8px) + 56px)
    }
}

@media(max-width:960px) {

    .cv-image-panel__headline,
    .cv-image-panel__body,
    .cv-image-panel__note {
        display: none
    }

    .entry-cta-head {
        position: relative;
        z-index: 1;
        text-align: center;
        max-width: 720px;
        margin: 0 auto clamp(32px, 4.4vw, 40px)
    }

    .entry-heading {
        color: #1C3E9E
    }

    .entry-lead {
        margin: 16px auto 0;
        max-width: 520px;
        color: #1C3E9E;
        font-size: 16px;
        line-height: 1.6;
        font-weight: 500
    }

    .entry-note {
        margin: 24px 0 0;
        color: #5B6478;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 500
    }

    .cv-image-panel {
        min-height: 0;
        padding: 24px 56px 40px;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px)
    }

    .cv-image-panel__content {
        width: auto
    }

    .cv-image-panel__cta {
        display: block;
        margin-top: 12px;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 700;
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: -.02em;
        color: #fff
    }

    .cv-image-panel__arrow {
        top: 50%;
        bottom: auto;
        right: 18px;
        width: 30px;
        height: 30px;
        transform: translateY(-50%)
    }

    .cv-image-panel:hover,
    .cv-image-panel:focus-visible,
    .cv-image-panel:active {
        background: #142E80;
        box-shadow: 0 26px 64px rgba(14, 32, 96, .16);
        transform: none
    }

    .cv-image-panel:hover::after,
    .cv-image-panel:focus-visible::after,
    .cv-image-panel:active::after {
        transform: translateX(-105%) skewX(-12deg)
    }

    .cv-image-panel:hover .cv-image-panel__label,
    .cv-image-panel:focus-visible .cv-image-panel__label,
    .cv-image-panel:active .cv-image-panel__label {
        transform: none;
        letter-spacing: .08em;
        color: #fff
    }

    .cv-image-panel:hover .cv-image-panel__label::after,
    .cv-image-panel:focus-visible .cv-image-panel__label::after,
    .cv-image-panel:active .cv-image-panel__label::after {
        background: #FF6A14
    }

    .cv-image-panel:hover .cv-image-panel__arrow,
    .cv-image-panel:focus-visible .cv-image-panel__arrow,
    .cv-image-panel:active .cv-image-panel__arrow {
        transform: translateY(-50%);
        animation: none
    }
}

@media(max-width:767px) {
    .cv-image-panel {
        padding: 22px 48px 40px
    }

    .cv-image-panel__cta {
        font-size: 20px
    }

    .cv-image-panel__arrow {
        right: 16px;
        width: 28px;
        height: 28px
    }

    .entry-lead {
        font-size: 16px
    }

    .entry-lead .sp-br {
        display: none
    }

    .entry-note {
        margin-top: 8px;
        font-size: 13px
    }

    .entry-cta-brush--top-left {
        width: clamp(160px, 42vw, 200px);
        left: -64px;
        top: -82px
    }

    .entry-cta-brush--bottom-right {
        width: clamp(160px, 42vw, 200px);
        right: -64px;
        bottom: 112px
    }
}

@media(max-width:400px) {

    .entry-cta-brush--bottom-right {
        bottom: 112px
    }

}

#entry .cv-image-contact {
    display: block;
    text-align: center
}

#entry .cv-image-contact__icon {
    display: inline-block;
    align-self: auto;
    line-height: 1;
    font-size: 1.35em;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin: 0 4px 0 0;
    transform: none
}

#entry .cv-image-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    line-height: 1.5
}

#entry .cv-image-contact__heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    color: #5B6478
}

#entry .cv-image-contact__heading .cv-image-contact__icon {
    margin: 0;
    top: 0;
    transform: translateY(2px)
}

#entry .cv-image-contact__detail {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    text-align: center
}

#entry .cv-image-contact__office {
    color: #5B6478;
    font-weight: 500;
    text-wrap: balance
}

#entry .cv-image-contact__separator {
    margin: 0 .25em;
    color: #5B6478
}

#entry .cv-image-contact__email {
    display: inline-block;
    color: #5B6478;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px
}

#entry .cv-image-contact__email:hover,
#entry .cv-image-contact__email:focus-visible {
    color: #5B6478
}

@media(max-width:767px) {
    #entry .cv-image-contact__detail {
        flex-direction: column;
        align-items: center;
        gap: 2px
    }

    #entry .cv-image-contact__separator {
        display: none
    }

    #entry .cv-image-contact__email {
        min-height: 24px;
        padding: 0
    }

}

@media(max-width:360px) {

    .cv-image-panel {
        padding: 20px 34px 36px
    }

    .cv-image-panel__cta {
        font-size: 18px;
        white-space: nowrap
    }

    .cv-image-panel__arrow {
        right: 12px;
        width: 24px;
        height: 24px
    }
}

@media(min-width:768px) and (max-width:960px) {

    .entry-lead {
        max-width: 560px
    }

    .entry-cta-brush--top-left {
        width: clamp(180px, 24vw, 240px);
        left: clamp(-120px, -9vw, -70px);
        top: -28px
    }

    .entry-cta-brush--bottom-right {
        width: clamp(180px, 24vw, 240px);
        right: clamp(-120px, -9vw, -70px);
        bottom: 96px
    }
}

#about .section-title-brush {
    --brush-x: -50%;
    --brush-y: -50%;
    transform: translate(var(--brush-x), var(--brush-y)) rotate(-4deg)
}

@media(max-width:767px) {

    #about .section-title-brush {
        --brush-x: -50%;
        left: 50%;
        top: 50%
    }
}

@media(min-width:768px) and (max-width:960px) {
    .cv-image-panel__headline-hover {
        font-size: 30px
    }
}

@media(max-width:767px) {

    #about .message-container {
        width: calc(100% - 48px)
    }

    #about .section-title-content {
        text-align: left
    }

    #about .section-title-motion {
        text-align: center
    }

    #about .message-line br,
    #about .message-line wbr {
        display: none
    }

    #about .message-support-orgs {
        white-space: normal
    }

    #about>div>div {
        text-align: center
    }

    #about .section-title-motion__heading {
        text-align: center
    }

    #about .section-heading {
        font-size: 30px
    }

    #about .section-title-content {
        text-wrap: wrap;
        word-break: normal;
        line-break: strict
    }

    #about .section-title-brush {
        width: min(270px, 74vw)
    }
}

@media(max-width:960px) {
    #about .section-title-brush {
        --brush-x: calc(-50% - 3px)
    }
}

@media(min-width:768px) and (max-width:960px) {
    #about .section-title-brush {
        --brush-x: calc(-50% + 14px)
    }
}

@media(max-width:474px) {
    #about .section-title-brush {
        --brush-x: calc(-50% - 16px)
    }
}

@media(max-width:767px) {
    #top .hero-copy,
    #top .hero-credit {
        text-shadow: none
    }
}

@media(max-width:767px) {

    #hero-title-wrap {
        flex-direction: row;
        align-items: flex-end;
        gap: calc(var(--dw)*.012);
        max-width: 100%
    }

    #hero-title-wrap img {
        height: calc((100vw - 48px - 1.2vw)/5.15)
    }

    #hero-title-img2 {
        margin-left: 0
    }

    .hero-title-intro-clone {
        width: max-content;
        height: auto
    }

    .hero-title-intro-clone.is-hero-dock {
        flex-direction: row;
        align-items: flex-end;
        gap: calc(var(--dw)*.012)
    }

    .hero-title-intro-clone.is-hero-dock img {
        height: calc((100vw - 48px - 1.2vw)/5.15);
        margin-left: 0
    }
}

html.is-fv-intro-pending #hero-title-wrap {
    opacity: 0;
    visibility: hidden
}

html.is-fv-intro-pending #site-hd {
    opacity: 0;
    visibility: hidden
}

html.is-fv-intro-pending #about {
    background: #0B1E6B
}

html.is-hero-intro-complete #site-hd {
    animation: frameIn .7s ease .15s both
}

html.is-fv-nointro #site-hd {
    animation: none;
    opacity: 1
}

html.is-fv-nointro #hero-frame,
html.is-fv-nointro #hero-frame-sp,
html.is-fv-nointro #hero-fiber,
html.is-fv-nointro .hero-eyebrow,
html.is-fv-nointro .hero-lead,
html.is-fv-nointro .hero-copy,
html.is-fv-nointro .hero-credit,
html.is-fv-nointro .hero-actions {
    opacity: 1;
    visibility: visible;
    transform: none;
    clip-path: none
}

html.is-fv-nointro #top #hero-frame,
html.is-fv-nointro #top #hero-frame-sp,
html.is-fv-nointro #top #hero-fiber,
html.is-fv-nointro #top .hero-eyebrow,
html.is-fv-nointro #top .hero-lead,
html.is-fv-nointro #top .hero-copy,
html.is-fv-nointro #top .hero-credit,
html.is-fv-nointro #top .hero-actions {
    animation: none
}

html.is-fv-nointro #hero-fiber {
    opacity: .95
}

html.is-fv-nointro #hero-title-wrap {
    animation: none;
    opacity: 1;
    visibility: visible
}

html.is-fv-nointro #hero-img {
    animation: kenburns 13s ease-out forwards;
    opacity: 1
}

html.is-fv-nointro .hero-title-intro-clone {
    display: none
}

@media(min-width:961px) and (max-width:1439px) {
    html.is-fv-nointro #hero-img {
        animation: kenburnsPcShift 13s ease-out forwards
    }
}

@media(max-width:767px) {
    html.is-fv-nointro #top::before {
        display: none;
        animation: none;
        opacity: 0
    }

    html.is-fv-nointro #top::after {
        animation: none;
        opacity: 1
    }
}

@media(min-width:768px) and (max-width:1199px) and (orientation:portrait) {
    #top {
        --dw: 100vw;
        --fv-tablet-frame-cut: clamp(120px, calc(652px - 52vw), 228px);
        min-height: clamp(880px, 115vw, 1000px)
    }

    #top .hero-eyebrow,
    #top .hero-lead,
    #top .hero-copy,
    #top .hero-credit {
        text-shadow: 0 2px 6px #000B2E
    }

    #hero-frame {
        height: calc(100% - var(--fv-tablet-frame-cut))
    }

    #top::before {
        content: "";
        position: fixed;
        inset: 0;
        background: #0B1E6B;
        z-index: 7;
        pointer-events: none;
        opacity: 1;
        transition: opacity .9s cubic-bezier(.22, 1, .36, 1);
        animation: introVeilOut .9s ease 3.4s both
    }

    .is-hero-intro-complete #top::before {
        animation: none;
        opacity: 0;
        visibility: hidden
    }

    html.is-fv-nointro #top::before {
        display: none;
        animation: none;
        opacity: 0
    }

    .hero-title-intro-clone {
        --dw: 100vw;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(16px, calc(var(--dw)*.06 - 8px), 40px)
    }

    .hero-title-intro-clone img {
        height: calc(var(--dw)*.185)
    }

    .hero-title-intro-clone img+img {
        margin-left: calc(var(--dw)*.11)
    }

    .hero-title-intro-clone.is-hero-dock {
        flex-direction: row;
        align-items: flex-end;
        gap: 16px
    }

    .hero-title-intro-clone.is-hero-dock img {
        height: clamp(56px, 9.5vw, 172px);
        margin-left: 0
    }

    #hero-media {
        background: var(--lp-c-ink)
    }

    #hero-media::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4px;
        height: calc(var(--fv-tablet-frame-cut) + 36px);
        background: var(--lp-c-blue-main);
        z-index: 5;
        pointer-events: none
    }

    #hero-imgwrap {
        top: 0;
        bottom: auto;
        height: clamp(576px, 75vw, 768px);
        -webkit-mask-image: none;
        mask-image: none
    }

    #hero-imgwrap::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: clamp(184px, 24vw, 280px);
        z-index: 4;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(5, 7, 15, 0) 0%, rgba(5, 7, 15, .5) 48%, var(--lp-c-ink) 100%)
    }

    #top #hero-img {
        object-position: 82% 28%;
        transform-origin: 82% 30%;
        animation: kenburnsTablet 13s ease-out forwards, photoIn var(--fv-photo-dur) ease var(--fv-photo-delay) both
    }

    html.is-fv-nointro #top #hero-img {
        animation: kenburnsTablet 13s ease-out forwards
    }

    #hero-img2 {
        object-position: 70% 34%;
        transform-origin: 70% 34%;
        animation: kenburns2Tablet 13s ease-out forwards
    }

    #hero-fiber {
        left: 0;
        top: clamp(240px, 32vw, 360px);
        width: 100%;
        height: auto;
        aspect-ratio: 1440/900
    }

}

@keyframes kenburnsTablet {
    0% {
        transform: scale(1.04)
    }

    100% {
        transform: scale(1.12)
    }
}

@keyframes kenburns2Tablet {
    0% {
        transform: scale(1.04)
    }

    100% {
        transform: scale(1.12)
    }
}

/* 応募導線：ご応募の3ステップ・ENTRY パネル・協賛・連携バナー */
/* ファイル末尾に置き、前段の ENTRY パネルとブラシの指定（余白・位置）を上書きする */

/* ---------- ご応募の3ステップ ---------- */

.entry-gate {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    margin: 0 auto clamp(32px, 3vw, 40px);
}

.entry-gate__lead {
    margin: 0 0 32px;
    text-align: center;
    color: var(--lp-c-blue-700);
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: var(--lp-lh-heading);
    letter-spacing: var(--lp-track-heading);
}

/* #entry p が font-weight を持つので、太さと大きさだけ #entry から指定する */
#entry .entry-gate__lead {
    font-size: 24px;
    font-weight: 700;
}

.entry-gate__steps {
    position: relative;
}

/* 番号をつなぐ線。3等分した列の中心（1/6 と 5/6）の間に引き、済んだステップまで伸ばす */
.entry-gate__rail {
    position: absolute;
    top: calc(44px / 2 - 1px);
    left: 16.6667%;
    right: 16.6667%;
    height: 2px;
    background: #C3C9D8;
}

.entry-gate__rail-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--lp-c-navy-800);
    transition: width .45s cubic-bezier(.2, .8, .2, 1);
}

.entry-gate.is-guideline-opened .entry-gate__rail-fill {
    width: 50%;
}

.entry-gate:has([data-entry-guideline-check]:checked) .entry-gate__rail-fill {
    width: 100%;
}

.entry-gate__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.entry-gate__item {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 16px;
    padding: 0 8px;
    text-align: center;
}

.entry-gate__body {
    min-width: 0;
}

.entry-gate__badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid #C3C9D8;
    border-radius: 50%;
    background: var(--lp-c-bg);
    color: var(--lp-c-text-sub);
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    transition: background-color .28s ease, border-color .28s ease, color .28s ease;
}

/* 今やるステップはオレンジ（このLPで「押す・進める」の色） */
.entry-gate__item[data-gate-step="1"] .entry-gate__badge,
.entry-gate.is-guideline-opened .entry-gate__item[data-gate-step="2"] .entry-gate__badge,
.entry-gate.is-guideline-opened:has([data-entry-guideline-check]:checked) .entry-gate__item[data-gate-step="3"] .entry-gate__badge {
    border-color: var(--lp-c-orange);
    background: var(--lp-c-orange);
    color: #fff;
}

/* 済んだステップは紺。番号は数字のまま残す（✓ にすると STEP 2 のチェックと意味が重なる） */
.entry-gate.is-guideline-opened .entry-gate__item[data-gate-step="1"] .entry-gate__badge,
.entry-gate:has([data-entry-guideline-check]:checked) .entry-gate__item[data-gate-step="2"] .entry-gate__badge {
    border-color: var(--lp-c-navy-800);
    background: var(--lp-c-navy-800);
    color: #fff;
}

/* STEP 1：募集要項を開くボタン。開いた後も何度でも開けるので、見た目は変えない */
.entry-gate__btn.fv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    background: var(--lp-c-blue-600);
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
}

.entry-gate__btn.fv-btn:focus-visible {
    outline: 2px solid var(--lp-c-blue-700);
    outline-offset: 3px;
}

.entry-gate__btn-icon {
    font-size: 18px;
    line-height: 1;
}

/* STEP 2：同意チェック。1行目を STEP 1 のボタン（48px）の縦の中央に揃える */
.entry-gate__check {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    padding: calc((48px - 16px * 1.8) / 2) 0 8px;
    color: var(--lp-c-text);
    font-size: 16px;
    font-weight: 700;
    line-height: var(--lp-lh-body);
    text-align: left;
    cursor: pointer;
}

.entry-gate__check input {
    position: relative;
    flex: 0 0 auto;
    appearance: none;
    width: 24px;
    height: 24px;
    margin: 2px 0 0;
    border: 2px solid #9AA3B8;
    background: #fff;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}

.entry-gate__check input:disabled {
    border-color: #C3C9D8;
    background: #E4E7EF;
    cursor: not-allowed;
}

.entry-gate__check input:checked {
    border-color: var(--lp-c-blue-600);
    background: var(--lp-c-blue-600);
}

.entry-gate__check input:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.entry-gate__check input:focus-visible {
    outline: 2px solid var(--lp-c-blue-700);
    outline-offset: 2px;
}

/* STEP 3：1行目を STEP 1 のボタンの縦の中央に揃える */
.entry-gate__text {
    margin: 0;
    padding-top: calc((48px - 16px * 1.8) / 2);
    color: var(--lp-c-text);
    font-size: 16px;
    line-height: var(--lp-lh-body);
}

#entry .entry-gate__text {
    font-weight: 700;
}

.entry-gate__nowrap {
    white-space: nowrap;
}

/* 2行以上に折り返しても「※」の下に文字が回り込まないよう、2行目以降を「※ 」の幅だけ下げる。
   PC は箱を文字幅に縮めて中央に置き、中の文字は左揃えにする（中央揃えのままだと行頭が揃わない） */
.entry-gate__note {
    width: fit-content;
    margin: 4px auto 0;
    padding-left: 1.25em;
    text-indent: -1.25em;
    color: var(--lp-c-text-sub);
    font-size: 12px;
    line-height: var(--lp-lh-note);
    text-align: left;
}

/* チェック欄は下に 8px 取ってタップ領域を保つので、注記はそのぶん食い込ませて文との間を 4px にする */
.entry-gate__check + .entry-gate__note {
    margin-top: -4px;
}

/* ---------- ENTRY パネル ---------- */

/* パネルの最大幅は 1000px。ステップの幅と釣り合う大きさにする */
.entry-panel-frame {
    position: relative;
    z-index: 0;
    max-width: 1000px;
    margin-inline: auto;
}

/* 押せない理由の帯。押せるようになったら消す */
.cv-image-panel__lock {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 24px auto 0;
    padding: 8px 16px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: var(--lp-lh-note);
    text-align: left;
}

/* アイコンの箱を文字1行ぶんの高さにし、2行になってもアイコンは1行目に揃える */
.cv-image-panel__lock .material-symbols-rounded {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: calc(13px * 1.8);
    font-size: 16px;
    line-height: 1;
}

.cv-image-panel__lock-text {
    min-width: 0;
}

.cv-image-panel:not([aria-disabled="true"]) .cv-image-panel__lock {
    display: none;
}

/* ---------- 協賛・連携バナー ---------- */

.partner-card {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    margin: 40px auto 0;
}

.partner-card__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px 24px calc(8px - 1px + 32px);
    border: 1px solid #8A90A8;
    background: #fff;
    color: var(--lp-c-text);
}

/* 左のオレンジの線。太さの違う枠線どうしだと角が斜めに接するので、左の罫線に重ねて描く */
.partner-card__link::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 8px;
    background: var(--lp-c-orange);
}

.partner-card__link:hover,
.partner-card__link:focus-visible {
    color: var(--lp-c-text);
}

.partner-card__link:focus-visible {
    outline: 2px solid var(--lp-c-blue-700);
    outline-offset: 3px;
}

.partner-card__body {
    min-width: 0;
}

/* オレンジの小見出しは太字にし、字間を少し広げて読みやすくする */
.partner-card__eyebrow {
    display: block;
    color: var(--lp-c-orange);
    font-size: 14px;
    font-weight: 700;
    line-height: var(--lp-lh-note);
    letter-spacing: .04em;
}

.partner-card__title {
    display: block;
    margin-top: 8px;
    color: var(--lp-c-blue-700);
    font-size: 18px;
    font-weight: 700;
}

/* 語の途中で折り返さない。2行になるときは「…協賛・連携の ／ お問い合わせはこちら」で分かれる */
.partner-card__nowrap {
    white-space: nowrap;
}

.partner-card__btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    background: var(--lp-c-navy-800);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.partner-card__btn-icon {
    font-size: 18px;
    line-height: 1;
}

/* ホバーはほかのボタンと同じ「光が走る」演出。カード全体が1つのリンクなので、カードに乗ったときに走らせる */
.partner-card__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    opacity: 0;
    transform: translateX(-110%) skewX(-16deg);
    pointer-events: none;
}

.partner-card__link:hover .partner-card__btn::before,
.partner-card__link:focus-visible .partner-card__btn::before {
    opacity: 1;
    animation: btnSweep .55s cubic-bezier(.3, .7, .3, 1) both;
}

/* ---------- PC ---------- */

@media(min-width:961px) {
    .entry-panel-frame .cv-image-panel {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* ブラシはパネルの外側へはみ出させる。左上は STEP 1 のボタンに重ならない高さ */
    .entry-panel-frame .entry-cta-brush--top-left {
        left: calc(clamp(-144px, -8vw, -80px) - 32px);
        top: -72px;
    }

    .entry-panel-frame .entry-cta-brush--bottom-right {
        right: calc(clamp(-144px, -8vw, -80px) - 32px);
        bottom: calc(-23px - 2.09vw - 24px);
    }

    /* 右下のブラシ（パネル下端から約 60px はみ出す）がバナーの下に潜らない間隔 */
    .partner-card {
        margin-top: 72px;
    }
}

/* この幅ではステップの位置との関係で左上のブラシが STEP 1 のボタンに食い込むので下げ、右下は対になるよう少し上げる */
@media(min-width:961px) and (max-width:1279px) {
    .entry-panel-frame .entry-cta-brush--top-left {
        top: -60px;
    }

    .entry-panel-frame .entry-cta-brush--bottom-right {
        bottom: calc(-23px - 2.09vw - 20px);
    }
}

/* ---------- タブレット・SP ---------- */

@media(max-width:960px) {
    #entry .entry-gate__lead {
        font-size: 20px;
    }

    .entry-gate {
        width: min(620px, 100%);
    }

    /* 縦に並べ、段ごとに縦の線でつなぐ */
    .entry-gate__rail {
        display: none;
    }

    /* 各段の高さを揃えて番号どうしの間隔を均一にし、620px の箱の中で中央に置く */
    .entry-gate__list {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: 24px;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
    }

    .entry-gate__item {
        position: relative;
        grid-template-columns: 44px 1fr;
        justify-items: start;
        align-items: start;
        gap: 0 16px;
        padding: 0;
        text-align: left;
    }

    .entry-gate__item:not(:last-child)::before {
        content: "";
        position: absolute;
        left: calc(44px / 2 - 1px);
        top: 44px;
        bottom: -24px;
        width: 2px;
        background: #C3C9D8;
    }

    .entry-gate.is-guideline-opened .entry-gate__item[data-gate-step="1"]::before,
    .entry-gate:has([data-entry-guideline-check]:checked) .entry-gate__item[data-gate-step="2"]::before {
        background: var(--lp-c-navy-800);
    }

    .entry-gate__badge {
        grid-column: 1;
        grid-row: 1;
    }

    .entry-gate__body {
        grid-column: 2;
        grid-row: 1;
    }

    /* 1行目を番号（44px）の縦の中央に揃える */
    .entry-gate__check {
        gap: 8px;
        padding: 8px 0;
    }

    .entry-gate__check input {
        width: 20px;
        height: 20px;
        margin-top: 4px;
    }

    .entry-gate__check input:checked::after {
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
    }

    .entry-gate__text {
        padding-top: 8px;
    }

    .entry-gate__note {
        margin-inline: 0;
    }

    /* 見出し（参加校を募集します。〜日付の注記）が出るときに左上のブラシも出し、ブラシを先に見せる。
       ブラシは本来セクションの見出し表示（#entry.is-title-visible）で出るが、この幅ではセクションが縦に長く、
       見出しより後に出てしまうため、見出しの表示に合わせて出す。見出しはブラシより少し遅らせて出す */
    .is-section-title-motion-ready #entry:has(.entry-cta-head.is-common-motion-visible) .entry-cta-brush--top-left {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    #entry:has(.entry-cta-head.is-motion-restored) .entry-cta-brush--top-left {
        transition: none;
    }

    .is-common-motion-ready .entry-cta-head[data-common-motion].is-common-motion-visible {
        animation-delay: .4s;
    }

    /* 右下のブラシも、ENTRY パネルが出るときに一緒に出し、下の協賛・連携バナーより先に見せる。
       バナーは同時に画面へ入ったときでもブラシの後になるよう、少し遅らせて出す */
    .is-section-title-motion-ready #entry .entry-form-motion.is-common-motion-visible .entry-cta-brush--bottom-right {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    #entry .entry-form-motion.is-motion-restored .entry-cta-brush--bottom-right {
        transition: none;
    }

    .is-common-motion-ready .partner-card[data-common-motion].is-common-motion-visible {
        animation-delay: .4s;
    }

    /* 左上のブラシは応募ブロック全体を基準にする（前段の指定の位置のまま） */
    .entry-panel-frame {
        position: static;
    }

    /* 押せる状態のパネルが下のバナーより小さく見えないよう、上下の余白を広げる */
    .entry-panel-frame .cv-image-panel {
        padding: 32px 56px 48px;
    }

    /* 右下のブラシはパネルの下半分に重なる高さ */
    .entry-panel-frame .entry-cta-brush--bottom-right {
        top: 50%;
        bottom: auto;
    }

    .cv-image-panel__lock {
        width: auto;
        max-width: 100%;
    }

    /* 帯は必ず2行になるので、「ここから応募フォームへ進めます」の前で改行する */
    .cv-image-panel__lock-phrase {
        display: block;
    }

    /* パネル（最大 420px）より一回り狭くする。最大 320px、画面が狭いときはパネルより左右 24px 内側。
       ただし 280px 未満にはしない（小見出しが2行に折れるため） */
    .partner-card {
        width: min(320px, max(100% - 48px, 280px));
        max-width: 100%;
    }

    .partner-card__link {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px 24px 16px calc(4px - 1px + 24px);
    }

    .partner-card__link::before {
        width: 4px;
    }

    .partner-card__eyebrow {
        font-size: 12px;
    }

    .partner-card__title {
        font-size: 14px;
    }

    .partner-card__btn {
        width: 100%;
        min-height: 44px;
        font-size: 14px;
    }
}

@media(max-width:768px) {
    .entry-panel-frame .entry-cta-brush--bottom-right {
        top: calc(50% + 32px);
    }
}

@media(max-width:767px) {
    #entry .entry-gate__lead {
        font-size: 18px;
    }

    .entry-gate__lead {
        margin-bottom: 24px;
    }

    .entry-gate__list {
        gap: 16px;
    }

    .entry-gate__item {
        grid-template-columns: 40px 1fr;
        gap: 0 12px;
    }

    .entry-gate__item:not(:last-child)::before {
        left: calc(40px / 2 - 1px);
        top: 40px;
        bottom: -16px;
    }

    .entry-gate__badge {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .entry-panel-frame .cv-image-panel {
        padding: 32px 48px 40px;
    }

    /* パネルの下端を基準にし、チェックでパネルの高さが変わっても、
       パネルから少しはみ出してバナーには届かない位置に保つ */
    .entry-panel-frame .entry-cta-brush--bottom-right {
        top: auto;
        bottom: -28px;
    }

    .cv-image-panel__lock {
        gap: 4px;
        margin-top: 16px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .cv-image-panel__lock .material-symbols-rounded {
        height: calc(12px * 1.8);
    }

    .partner-card {
        margin-top: 32px;
    }
}

/* 帯の前半「STEP 1・2 がお済みになると、」も1行に収まらない幅では、句ごとの改行をやめて続けて流す。
   句ごとに改行したままだと「と、」だけの行ができるため。
   語の途中（「フォ／ーム」など）や「す」1文字で折り返さないよう、語のまとまりごとに改行しない指定を入れてある */
.cv-image-panel__lock-nowrap {
    white-space: nowrap;
}

@media(max-width:359px) {
    .cv-image-panel__lock-phrase {
        display: inline;
    }
}

/* 狭い画面では STEP 2 の文を1行に収め、段の高さが揃って間延びするのを防ぐ */
@media(max-width:400px) {
    .entry-gate__check,
    .entry-gate__text,
    .entry-gate__btn.fv-btn {
        font-size: 14px;
    }

    .entry-gate__check input {
        width: 18px;
        height: 18px;
    }

    .entry-gate__check input:checked::after {
        left: 4px;
        height: 9px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .entry-gate__rail-fill,
    .entry-gate__badge {
        transition: none;
    }

    .partner-card__link:hover .partner-card__btn::before,
    .partner-card__link:focus-visible .partner-card__btn::before {
        animation: none;
        opacity: 0;
    }
}