@charset "utf-8";

/* common */
.fade_up_1,
.fade_up_2,
.fade_up_3,
.fade_up_4 {
    opacity: 1;
    transform: translateY(0);
}
.fade_up_1 {
    transition: opacity 0.5s, transform 0.5s;
}
.fade_up_2 {
    transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.fade_up_3 {
    transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
}
.fade_up_4 {
    transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
}
.animated .fade_up_1,
.animated .fade_up_2,
.animated .fade_up_3,
.animated .fade_up_4 {
    opacity: 1;
    transform: translateY(0);
}

.section_ttl {
    position: relative;
}
.section_ttl::after {
    content: '';
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    mask-image: linear-gradient(180deg, transparent 0%, transparent 50%, #000 50.1%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 50%, #000 50.1%, #000 100%);
    mask-size: 300% 300%;
}
.section_ttl_svg {
    fill: transparent;
    stroke: var(--color-sub);
}

.section_ttl_svg {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1s;
}
.section.animated .section_ttl_svg {
    stroke-dashoffset: 0;
}
.section_ttl::after {
    mask-position: 100% 0%;
    transition: mask-position 1s;
    transition-delay: 0.3s;
}
.section.animated .section_ttl::after {
    mask-position: 0% 100%;
}

/* loading */
.loading {
    width: 100%;
    height: 100%;
    background-color: var(--color-base);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    pointer-events: none;
}
.loading_logo_wrap {
    position: relative;
}
.loading_logo {
    fill: var(--color-sub);
}
.loading_logo_gradation {
    background: radial-gradient(circle at 35% 50%, #005a8c 0%, #0d2d5d 5%, transparent 10%),
        radial-gradient(circle at 72% 35%, #ae0412 0%, #7b0436 6%, transparent 10%) var(--color-sub);
    background-size: 200% 200%;
    background-position: 50%;
    mask-image: url(../img/index/load_logo.svg);
    mask-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
@media (min-width: 769px) {
    .loading_logo_wrap {
        width: 351rem;
    }
}
@media (max-width: 768px) {
    .loading_logo_wrap {
        width: 200rem;
    }
}
.loading {
    opacity: 1;
    transition: opacity 1s 5s;
}
.loaded .loading {
    opacity: 0;
}
.loading_logo {
    padding-right: 1rem;
    transition: filter 1s;
    filter: blur(10rem);
}
.loaded .loading_logo {
    filter: blur(0);
}
.loading_logo_gradation {
    opacity: 0;
    transition: opacity 1s 1s;
    animation: loading_animation 4s 1s linear infinite;
}
.loaded .loading_logo_gradation {
    opacity: 1;
}
@keyframes loading_animation {
    0% {
        background-position: 40% 40%;
    }
    50% {
        background-position: 60% 60%;
    }
    100% {
        background-position: 40% 40%;
    }
}

/* 2回目以降 */
.visited .loading {
    display: none;
}

.main {
    overflow: clip;
}

/* mv */
.mv_ttl {
    position: relative;
}
.mv_ttl_svg {
    padding-top: 1rem;
    fill: transparent;
    stroke: var(--color-sub);
}
.mv_ttl_svg_black {
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mask-image: linear-gradient(45deg, transparent 0%, transparent 45%, #000 60%, #000 15%);
    -webkit-mask-image: linear-gradient(45deg, transparent 0%, transparent 45%, #000 60%, #000 100%);
    mask-size: 300%;
}
.mv_ttl_bg_gradient {
    width: 100%;
    height: 100%;
    margin: auto;
    background: radial-gradient(#d60000 0%, #7b0436 19%, #0d2d5d 45%, #000000 75%) no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mask-size: 100%;
    mask-repeat: no-repeat;
}
@media (min-width: 769px) {
    .mv {
        margin-top: 20rem;
    }
    .mv_ttl_wrap {
        display: flex;
        justify-content: center;
    }
    .mv_ttl {
        width: 1620rem;
        max-width: 1620px;
        margin: 0 -90rem;
        height: 494rem;
    }
    .mv_ttl_bg {
        top: 2rem;
    }
    .mv_img {
        margin-top: 80rem;
    }
    .mv_img > img {
        width: 100%;
        height: auto;
    }
    .mv_ttl_bg_gradient {
        background-position: 140% -260rem;
        background-size: 50%;
        -webkit-mask-image: url(../img/index/mv_ttl.svg);
        mask-image: url(../img/index/mv_ttl.svg);
    }
}
@media (max-width: 768px) {
    .mv {
        height: calc(100svh - 80rem);
    }
    .mv_ttl {
        width: 419rem;
        margin-left: -22rem;
    }
    .mv_ttl_bg {
        background: url(../img/index/mv_ttl.svg) no-repeat 50% / 419rem;
        top: 1rem;
    }
    .mv_img {
        height: calc(100% - 170rem);
        margin-top: 40rem;
        background: url(../img/index/mv_img_sp.webp) no-repeat 50% / cover;
    }
    .mv_ttl_bg_gradient {
        background-position: 150% -60rem;
        background-size: 50%;
        -webkit-mask-image: url(../img/index/mv_ttl.svg);
        mask-image: url(../img/index/mv_ttl.svg);
        top: 1rem;
        left: -1rem;
        right: auto;
        bottom: auto;
    }
}
.mv_ttl_svg {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    opacity: 1;
    transition: stroke-dashoffset 2s 5s, opacity 0.5s 6s;
}
.mv.animated .mv_ttl_svg {
    stroke-dashoffset: 0;
    opacity: 0;
}
.mv_ttl_bg {
    mask-position: 0% 100%;
    transition: mask-position 4s 6s;
}
.mv.animated .mv_ttl_bg {
    mask-position: 100% 0%;
}
.mv_ttl_svg_black {
    mask-position: 0% 100%;
    transition: mask-position 2s 5s;
}
.animated .mv_ttl_svg_black {
    mask-position: 100% 0%;
}
.mv_ttl_bg_gradient {
    opacity: 0;
    transition: opacity 1s 6s;
}
.animated .mv_ttl_bg_gradient {
    opacity: 1;
    transition: opacity 1s 6s;
}

.visited .mv_ttl_svg {
    transition: stroke-dashoffset 2s 0s, opacity 0.5s 6s;
}
.visited .mv_ttl_bg {
    transition-delay: 1s;
}
.visited .mv_ttl_svg_black {
    transition-delay: 1s;
}
.visited .mv_ttl_bg_gradient {
    transition: opacity 1s 2s;
    transition-delay: 2s;
}
.animated .mv_ttl_bg_gradient,
.visited .mv_ttl_bg_gradient {
    animation: mv_ttl_bg_gradient_x 40s linear infinite, mv_ttl_bg_gradient_y 60s -10s linear infinite;
}
@keyframes mv_ttl_bg_gradient_x {
    0% {
        background-position-x: -90%;
    }
    10% {
        background-position-x: 150%;
    }
    20% {
        background-position-x: 30%;
    }
    30% {
        background-position-x: 180%;
    }
    40% {
        background-position-x: -60%;
    }
    50% {
        background-position-x: 60%;
    }
    60% {
        background-position-x: 90%;
    }
    70% {
        background-position-x: 120%;
    }
    80% {
        background-position-x: -30%;
    }
    90% {
        background-position-x: 190%;
    }
    100% {
        background-position-x: -90%;
    }
}
@media (min-width: 769px) {
    @keyframes mv_ttl_bg_gradient_y {
        0% {
            background-position-y: -450rem;
        }
        10% {
            background-position-y: -100rem;
        }
        20% {
            background-position-y: 100rem;
        }
        30% {
            background-position-y: -400rem;
        }
        40% {
            background-position-y: 300rem;
        }
        50% {
            background-position-y: -200rem;
        }
        60% {
            background-position-y: 200rem;
        }
        70% {
            background-position-y: 0rem;
        }
        80% {
            background-position-y: 550rem;
        }
        90% {
            background-position-y: -300rem;
        }
        100% {
            background-position-y: -450rem;
        }
    }
}
@media (max-width: 768px) {
    @keyframes mv_ttl_bg_gradient_y {
        0% {
            background-position-y: -120rem;
        }
        10% {
            background-position-y: 0rem;
        }
        20% {
            background-position-y: -90rem;
        }
        30% {
            background-position-y: 30rem;
        }
        40% {
            background-position-y: 120rem;
        }
        50% {
            background-position-y: 60rem;
        }
        60% {
            background-position-y: 0rem;
        }
        70% {
            background-position-y: -60rem;
        }
        80% {
            background-position-y: 90rem;
        }
        90% {
            background-position-y: -30rem;
        }
        100% {
            background-position-y: -120rem;
        }
    }
}

/* lead */
.lead_txt_wrap {
    height: 100svh; /*合わせる*/
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
}
.lead_txt_wrap.lead_visited {
    position: relative;
    height: auto;
}
.lead_txt_wrap.lead_visited .lead_translate {
    transform: translate(0, 0) !important;
}
.lead_sticky.lead_visited {
    position: relative;
}
.lead_space_wrap.lead_visited .lead_space {
    margin-top: 0;
}
.lead_txt {
    line-height: 1.75;
}
.lead_txt_word {
    font-weight: 900;
}
.lead_space_1 {
    height: 100vh; /*合わせる*/
    margin-top: -100svh; /*合わせる*/
}
@media (min-width: 769px) {
    .lead_space_2 {
        height: 50vh;
    }
    .lead_space_3 {
        height: 80vh;
    }
    .lead_space_4 {
        height: 80vh;
    }
    .lead_space_5 {
        height: 80vh;
    }
    .lead_space_6 {
        height: 80vh;
    }
    .lead_space_7 {
        height: 80vh;
    }
    .lead_space_8 {
        height: 80vh;
    }
    .lead_space_9 {
        height: 80vh;
    }
    .lead_space_10 {
        height: 80vh;
    }
    .lead_space_11 {
        height: 100vh;
    }
}

@media (max-width: 768px) {
    .lead_space_2 {
        height: 100vh;
    }
    .lead_space_3 {
        height: 150vh;
    }
    .lead_space_4 {
        height: 150vh;
    }
    .lead_space_5 {
        height: 150vh;
    }
    .lead_space_6 {
        height: 150vh;
    }
    .lead_space_7 {
        height: 150vh;
    }
    .lead_space_8 {
        height: 150vh;
    }
    .lead_space_9 {
        height: 150vh;
    }
    .lead_space_10 {
        height: 150vh;
    }
    .lead_space_11 {
        height: 200vh;
    }
}
.lead_sticky {
    position: sticky;
    top: 0;
    z-index: -1;
    left: 0;
    height: 100vh; /*合わせる*/
    margin-top: -100vh; /*合わせる*/
}
.lead_shapes_wrap {
    position: absolute;
}
.lead_shape {
    position: absolute;
    transform: translate3d(0, 0, 0);
}
.lead_shape_3_1 .lead_shape_inner,
.lead_shape_3_2 .lead_shape_inner,
.lead_shape_3_3 .lead_shape_inner {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.lead_shape_3_4 .lead_shape_inner,
.lead_shape_3_5 .lead_shape_inner,
.lead_shape_3_6 .lead_shape_inner {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.fadeout {
    opacity: 0;
    transition: opacity 0.3s;
}

.lead_shape_inner {
    width: 100%;
    height: 100%;
    font-size: 50px;
    color: #fff;
    display: inline-block;
    transform-origin: 100% 50%;
}

.lead_shape_14 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lead_shape_14_inner {
    border-radius: 50%;
    background-color: #000;
}

.lead_shape_4 .cls-1,
.lead_shape_5 .cls-1,
.lead_shape_6 .cls-1,
.lead_shape_7 .cls-1,
.lead_shape_8 .cls-1,
.lead_shape_9 .cls-1,
.lead_shape_10 .cls-1 {
    fill: none;
    stroke: #fff;
    stroke-width: 40px;
    stroke-dasharray: 2000; /* この行を追加 */
    stroke-dashoffset: 2000; /* この行を追加 */
}

.lead_shape_11,
.lead_shape_12,
.lead_shape_13 {
    opacity: 0;
}
.lead_shape_11 .cls-1 {
    fill: #c40000;
    stroke: #c40000;
}
.lead_shape_12 .cls-1 {
    fill: #c40000;
    stroke: #c40000;
}

.lead_shape_14_inner_1,
.lead_shape_14_inner_2,
.lead_shape_14_inner_3,
.lead_shape_14_inner_11,
.lead_shape_14_inner_12,
.lead_shape_14_inner_13 {
    scale: 0.8;
}
.lead_shape_14_inner_4,
.lead_shape_14_inner_5,
.lead_shape_14_inner_6,
.lead_shape_14_inner_7,
.lead_shape_14_inner_14,
.lead_shape_14_inner_15,
.lead_shape_14_inner_16,
.lead_shape_14_inner_17 {
    scale: 1;
}
.lead_shape_14_inner_8,
.lead_shape_14_inner_9,
.lead_shape_14_inner_10,
.lead_shape_14_inner_18,
.lead_shape_14_inner_19,
.lead_shape_14_inner_20 {
    scale: 1.2;
}

.lead_shape_14_inner_1,
.lead_shape_14_inner_4,
.lead_shape_14_inner_7,
.lead_shape_14_inner_11,
.lead_shape_14_inner_14,
.lead_shape_14_inner_17 {
    opacity: 0.7;
}
.lead_shape_14_inner_2,
.lead_shape_14_inner_5,
.lead_shape_14_inner_8,
.lead_shape_14_inner_10,
.lead_shape_14_inner_12,
.lead_shape_14_inner_15,
.lead_shape_14_inner_18,
.lead_shape_14_inner_20 {
    opacity: 1;
}
.lead_shape_14_inner_3,
.lead_shape_14_inner_6,
.lead_shape_14_inner_9,
.lead_shape_14_inner_13,
.lead_shape_14_inner_16,
.lead_shape_14_inner_19 {
    opacity: 0.4;
}

.lead_shape_14_inner {
    opacity: 0;
}
.lead_shape_14.is-active .lead_shape_14_inner {
    animation: lead_shape_14 forwards cubic-bezier(0.11, 0, 0.5, 0);
}
.lead_shape_14.is-active .lead_shape_14_inner_1,
.lead_shape_14.is-active .lead_shape_14_inner_10,
.lead_shape_14.is-active .lead_shape_14_inner_11,
.lead_shape_14.is-active .lead_shape_14_inner_20 {
    animation-duration: 0.5s;
}
.lead_shape_14.is-active .lead_shape_14_inner_2,
.lead_shape_14.is-active .lead_shape_14_inner_6,
.lead_shape_14.is-active .lead_shape_14_inner_12,
.lead_shape_14.is-active .lead_shape_14_inner_16 {
    animation-duration: 0.6s;
}
.lead_shape_14.is-active .lead_shape_14_inner_3,
.lead_shape_14.is-active .lead_shape_14_inner_7,
.lead_shape_14.is-active .lead_shape_14_inner_13,
.lead_shape_14.is-active .lead_shape_14_inner_17 {
    animation-duration: 0.7s;
}
.lead_shape_14.is-active .lead_shape_14_inner_4,
.lead_shape_14.is-active .lead_shape_14_inner_8,
.lead_shape_14.is-active .lead_shape_14_inner_14,
.lead_shape_14.is-active .lead_shape_14_inner_18 {
    animation-duration: 0.8s;
}
.lead_shape_14.is-active .lead_shape_14_inner_5,
.lead_shape_14.is-active .lead_shape_14_inner_9,
.lead_shape_14.is-active .lead_shape_14_inner_15,
.lead_shape_14.is-active .lead_shape_14_inner_19 {
    animation-duration: 0.9s;
}
@keyframes lead_shape_14 {
    0% {
        opacity: 1;
        translate: 0 0;
    }
    100% {
        opacity: 0;
        scale: 0;
        translate: 0 -150rem;
    }
}
@media (min-width: 769px) {
    .lead_txt_wrap {
        padding-top: calc(50vh);
    }
    .lead_txt_wrap.lead_visited {
        padding-top: 200rem;
        padding-bottom: 595rem;
    }
    .lead_txt {
        transform: translateY(60%);
        opacity: 0;
        transition: opacity 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28),
            transform 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    .lead_txt.is_next_animated {
        opacity: 1;
        transform: translateY(0px);
    }
    .lead_txt_word {
        font-size: 56rem;
    }
    .lead_txt_word {
        background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 1) 24%,
            rgba(196, 0, 0, 1) 31%,
            rgba(196, 0, 0, 1) 39%,
            rgba(0, 90, 140, 1) 46%,
            rgba(207, 207, 207, 1) 56%
        );
        -webkit-background-clip: text;
        background-clip: text;
        background-position: 100% 100%;
        background-size: 400% 400%;
        transition: background-position 1.8s 0.1s;
        -webkit-text-fill-color: transparent;
        display: inline-block;
    }
    .lead_txt_word.is_animated {
        background-position: 0% 0%;
    }
    .lead_shapes_wrap {
        width: 100rem;
        height: 100rem;
        top: 50%;
        margin-top: -50rem;
        right: 0;
    }
    .lead_shape_inner {
        background: linear-gradient(90deg, #000 0%, #005a8c 38%, #7b0436 59%, #c40000 75%, transparent 100%);
    }
    .lead_shape_3 .lead_shape_inner {
        background: linear-gradient(90deg, #c40000 0%, #c40000 25%, #7b0436 41%, #005a8c 86%, transparent 100%);
    }
    .lead_shape_3_4 .lead_shape_inner,
    .lead_shape_3_5 .lead_shape_inner,
    .lead_shape_3_6 .lead_shape_inner {
        background: linear-gradient(90deg, #000 0%, #005a8c 38%, #7b0436 59%, #c40000 75%, transparent 100%);
    }
    .lead_shape_1,
    .lead_shape_2,
    .lead_shape_3 {
        width: 1400rem;
        height: 40rem;
        left: -480rem;
    }
    .lead_shape_1 {
        top: -90rem;
    }
    .lead_shape_2_1 {
        top: 30rem;
    }
    .lead_shape_2_2 {
        top: 150rem;
    }
    .lead_shape_3_1 {
        translate: -470rem 230rem;
        rotate: 10deg;
    }
    .lead_shape_3_2 {
        translate: -270rem 130rem;
        rotate: 10deg;
    }
    .lead_shape_3_3 {
        translate: -80rem 30rem;
        rotate: 10deg;
    }

    .lead_shape_3_4 {
        translate: -470rem 70rem;
        rotate: -10deg;
    }
    .lead_shape_3_5 {
        translate: -270rem 170rem;
        rotate: -10deg;
    }
    .lead_shape_3_6 {
        translate: -80rem 270rem;
        rotate: -10deg;
    }

    .lead_shape_4 {
        width: 640rem;
        top: -220rem;
        left: -510rem;
    }
    .lead_shape_5 {
        width: 800rem;
        top: -160rem;
        left: -600rem;
    }
    .lead_shape_6 {
        width: 636rem;
        top: -220rem;
        left: -520rem;
    }
    .lead_shape_7 {
        width: 560rem;
        top: -200rem;
        left: -370rem;
    }
    .lead_shape_8 {
        width: 480rem;
        top: -170rem;
        left: -370rem;
    }
    .lead_shape_9 {
        width: 610rem;
        top: -240rem;
        left: -440rem;
    }
    .lead_shape_10,
    .lead_shape_11,
    .lead_shape_12,
    .lead_shape_13 {
        width: 625rem;
        top: -210rem;
        left: -440rem;
    }
    .lead_shape_14 {
        width: 450rem;
        height: 450rem;
        top: -144rem;
        left: -352rem;
    }
    .lead_shape_14_inner {
        width: 20rem;
        height: 20rem;
    }
    .lead_shape_14_inner_1 {
        top: 270rem;
        left: 135rem;
    }
    .lead_shape_14_inner_2 {
        top: 165rem;
        left: 240rem;
    }
    .lead_shape_14_inner_3 {
        top: 285rem;
        left: 30rem;
    }
    .lead_shape_14_inner_4 {
        top: 165rem;
        left: 150rem;
    }
    .lead_shape_14_inner_5 {
        top: 45rem;
        left: 60rem;
    }
    .lead_shape_14_inner_6 {
        top: 90rem;
        left: 285rem;
    }
    .lead_shape_14_inner_7 {
        top: 60rem;
        left: 165rem;
    }
    .lead_shape_14_inner_8 {
        top: 270rem;
        left: 255rem;
    }
    .lead_shape_14_inner_9 {
        top: 150rem;
        left: 195rem;
    }
    .lead_shape_14_inner_10 {
        top: 45rem;
        left: 225rem;
    }
    .lead_shape_14_inner_11 {
        top: 255rem;
        left: 75rem;
    }
    .lead_shape_14_inner_12 {
        top: 300rem;
        left: 300rem;
    }
    .lead_shape_14_inner_13 {
        top: 285rem;
        left: 45rem;
    }
    .lead_shape_14_inner_14 {
        top: 300rem;
        left: 150rem;
    }
    .lead_shape_14_inner_15 {
        top: 45rem;
        left: 75rem;
    }
    .lead_shape_14_inner_16 {
        top: -30rem;
        left: 345rem;
    }
    .lead_shape_14_inner_17 {
        top: 75rem;
        left: 225rem;
    }
    .lead_shape_14_inner_18 {
        top: 330rem;
        left: 315rem;
    }
    .lead_shape_14_inner_19 {
        top: 150rem;
        left: 255rem;
    }
    .lead_shape_14_inner_20 {
        top: -15rem;
        left: 150rem;
    }
    .lead_shape_15_sp {
        display: none;
    }
    .lead_shape_15 {
        width: 1676rem;
        top: -180rem;
        left: -740rem;
    }
}

@media (max-width: 768px) {
    .lead_txt_wrap {
        padding-top: 250rem;
    }
    .lead_txt_wrap.lead_visited {
        padding-top: 195rem;
        padding-bottom: 418rem;
    }
    .lead .inner {
        padding: 0 32rem;
    }
    .lead_txt_word {
        font-size: 32rem;
        display: inline-block;
    }
    .lead_txt_sp {
        display: inline-block;
    }
    .lead_txt_sp_word {
        display: block;
    }
    .lead_txt_sp_word {
        opacity: 0;
        transform: translateY(60%);
        transition: opacity 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28),
            transform 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    .lead_txt_sp:has(.lead_txt_word.is_animated) .lead_txt_sp_word {
        opacity: 1;
        transform: translateY(0px);
    }
    .lead_txt_sp:has(.lead_txt_word.is_animated) .lead_txt_sp_word:nth-child(1) {
        transition-delay: 0s;
    }
    .lead_txt_sp:has(.lead_txt_word.is_animated) .lead_txt_sp_word:nth-child(2) {
        transition-delay: 0.3s;
    }
    .lead_txt_sp_word_gradation {
        background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 1) 24%,
            rgba(196, 0, 0, 1) 31%,
            rgba(196, 0, 0, 1) 39%,
            rgba(0, 90, 140, 1) 46%,
            rgba(207, 207, 207, 1) 56%
        );
        -webkit-background-clip: text;
        background-clip: text;
        font-weight: 900;
        background-position: 100% 100%;
        background-size: 400% 400%;
        transition: background-position 1.8s 0.1s;
        -webkit-text-fill-color: transparent;
        display: inline-block;
    }
    .lead_txt_sp:has(.lead_txt_word.is_animated) .lead_txt_sp_word:nth-child(1) .lead_txt_sp_word_gradation {
        transition-delay: 0s;
        background-position: 0% 0%;
    }
    .lead_txt_sp:has(.lead_txt_word.is_animated) .lead_txt_sp_word:nth-child(2) .lead_txt_sp_word_gradation {
        transition-delay: 0.3s;
        background-position: 0% 0%;
    }
    .lead_shapes_wrap {
        width: 10rem;
        height: 100rem;
        top: 300rem;
        right: 0;
    }
    .lead_shape_inner {
        background: linear-gradient(90deg, #000 0%, #005a8c 60%, #7b0436 83%, #c40000 100%);
    }
    .lead_shape_3 .lead_shape_inner {
        background: linear-gradient(90deg, #c40000 0%, #c40000 25%, #7b0436 41%, #005a8c 86%, transparent 100%);
    }
    .lead_shape_3_4 .lead_shape_inner,
    .lead_shape_3_5 .lead_shape_inner,
    .lead_shape_3_6 .lead_shape_inner {
        background: linear-gradient(90deg, #000 0%, #005a8c 38%, #7b0436 59%, #c40000 75%, transparent 100%);
    }
    .lead_shape_1,
    .lead_shape_2,
    .lead_shape_3 {
        width: 250rem;
        height: 20rem;
        left: -200rem;
    }
    .lead_shape_1,
    .lead_shape_2_1,
    .lead_shape_2_2,
    .lead_shape_3_1,
    .lead_shape_3_2,
    .lead_shape_3_3,
    .lead_shape_3_4,
    .lead_shape_3_5,
    .lead_shape_3_6 {
        width: 400rem;
    }
    .lead_shape_1 {
        top: 70rem;
    }
    .lead_shape_2_1 {
        top: 120rem;
    }
    .lead_shape_2_2 {
        top: 170rem;
    }
    .lead_shape_3_1,
    .lead_shape_3_2,
    .lead_shape_3_3 {
        top: 140rem;
        rotate: 10deg;
    }
    .lead_shape_3_1 {
        translate: -100rem -40rem;
    }
    .lead_shape_3_2 {
        translate: -30rem -70rem;
    }
    .lead_shape_3_3 {
        translate: 35rem -100rem;
    }
    .lead_shape_3_4,
    .lead_shape_3_5,
    .lead_shape_3_6 {
        rotate: -10deg;
        top: -15rem;
    }
    .lead_shape_3_4 {
        translate: -100rem 70rem;
    }
    .lead_shape_3_5 {
        translate: -30rem 100rem;
    }
    .lead_shape_3_6 {
        translate: 35rem 130rem;
    }
    .lead_shape_4 {
        width: 290rem;
        top: 0rem;
        left: -170rem;
    }
    .lead_shape_5 {
        width: 360rem;
        top: 70rem;
        left: -220rem;
    }
    .lead_shape_6 {
        width: 330rem;
        top: 40rem;
        left: -240rem;
    }
    .lead_shape_7 {
        width: 252rem;
        top: 20rem;
        left: -160rem;
    }
    .lead_shape_8 {
        width: 216rem;
        top: 90rem;
        left: -180rem;
    }
    .lead_shape_9 {
        width: 288rem;
        top: 0rem;
        left: -210rem;
    }
    .lead_shape_10,
    .lead_shape_11,
    .lead_shape_12,
    .lead_shape_13 {
        width: 280rem;
        top: 0rem;
        left: -170rem;
    }
    .lead_shape_14 {
        width: 200rem;
        height: 200rem;
        top: 30rem;
        left: -140rem;
    }
    .lead_shape_14_inner {
        width: 26rem;
        height: 26rem;
    }
    .lead_shape_14_inner_1 {
        top: 169rem;
        left: 143rem;
    }
    .lead_shape_14_inner_2 {
        top: 78rem;
        left: 143rem;
    }
    .lead_shape_14_inner_3 {
        top: 182rem;
        left: 91rem;
    }
    .lead_shape_14_inner_4 {
        top: 143rem;
        left: 65rem;
    }
    .lead_shape_14_inner_5 {
        top: 39rem;
        left: 117rem;
    }
    .lead_shape_14_inner_6 {
        top: 143rem;
        left: 182rem;
    }
    .lead_shape_14_inner_7 {
        top: 117rem;
        left: 78rem;
    }
    .lead_shape_14_inner_8 {
        top: calc(130rem * 1.3);
        left: calc(120rem * 1.3);
    }
    .lead_shape_14_inner_9 {
        top: calc(50rem * 1.3);
        left: calc(80rem * 1.3);
    }
    .lead_shape_14_inner_10 {
        top: calc(80rem * 1.3);
        left: calc(100rem * 1.3);
    }
    .lead_shape_14_inner_11 {
        top: calc(170rem * 1.3);
        left: calc(100rem * 1.3);
    }
    .lead_shape_14_inner_12 {
        top: calc(150rem * 1.3);
        left: calc(150rem * 1.3);
    }
    .lead_shape_14_inner_13 {
        top: calc(140rem * 1.3);
        left: calc(80rem * 1.3);
    }
    .lead_shape_14_inner_14 {
        top: calc(150rem * 1.3);
        left: calc(50rem * 1.3);
    }
    .lead_shape_14_inner_15 {
        top: calc(30rem * 1.3);
        left: calc(100rem * 1.3);
    }
    .lead_shape_14_inner_16 {
        top: calc(30rem * 1.3);
        left: calc(180rem * 1.3);
    }
    .lead_shape_14_inner_17 {
        top: calc(100rem * 1.3);
        left: calc(100rem * 1.3);
    }
    .lead_shape_14_inner_18 {
        top: calc(170rem * 1.3);
        left: calc(160rem * 1.3);
    }
    .lead_shape_14_inner_19 {
        top: calc(50rem * 1.3);
        left: calc(120rem * 1.3);
    }
    .lead_shape_14_inner_20 {
        top: calc(40rem * 1.3);
        left: calc(50rem * 1.3);
    }
    .lead_shape_15_pc {
        display: none;
    }
    .lead_shape_15 {
        top: 0rem;
        height: auto;
        left: -3580%;
        width: 4100%;
    }
}

/* info */
.info .inner {
    position: relative;
}
.info .section_ttl::after {
    background: url(../img/index/info_ttl.svg) no-repeat 50% / contain;
}
.info_list_link {
    width: 100%;
    text-decoration: none;
    color: var(--color-sub);
}
.info_list_day {
    font-weight: 700;
    line-height: 1.75;
}
.info_list_txt {
    font-weight: 500;
    line-height: 1.75;
}
.info_list > li + li {
    border-top: 1px solid var(--color-gray);
}
.info_img_off,
.info_img_on {
    width: 100%;
}
.info_img_off {
    position: absolute;
    top: 0;
    left: 0;
}
@media (min-width: 769px) {
    .info_inner {
        width: 766rem;
        margin-top: 200rem;
        margin-left: auto;
        min-height: 700rem;
    }
    .info .section_ttl {
        width: 360rem;
        margin-left: auto;
    }
    .info_list {
        margin-top: 24rem;
        font-size: 16rem;
    }
    .info_list_link {
        padding: 40rem 32rem;
        display: flex;
        justify-content: space-between;
    }
    .info_list_day,
    .info_list_txt {
        position: relative;
        z-index: 1;
    }
    .info_list_txt {
        width: 575rem;
    }
    .info_btn {
        margin-top: 64rem;
        margin-left: auto;
    }
    .info_img {
        width: 940rem;
        position: absolute;
        left: -590rem;
        bottom: 34rem;
    }
}
@media (max-width: 768px) {
    .info_inner {
        margin: 160rem 25rem 0;
    }
    .info .section_ttl {
        width: 150rem;
    }
    .info .section_ttl::after {
        margin-top: 0;
    }
    .info_list {
        margin-top: 16rem;
        font-size: 12rem;
    }
    .info_list_link {
        padding: 24rem 0;
        display: block;
    }
    .info_list_txt {
        margin-top: 8rem;
    }
    .info_btn {
        margin-top: 40rem;
    }
    .info_img {
        width: 342rem;
        position: absolute;
        top: -175rem;
        left: 204rem;
    }
}
@media (min-width: 769px) {
    .info_list_link {
        transition: color 0.3s;
    }
    .info_list_link::before {
        content: '';
        width: 100%;
        height: 100%;
        background: var(--color-gradation);
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 1s;
    }
    @media (hover: hover) {
        .info_list_link:hover {
            color: var(--color-base);
        }
        .info_list_link:hover::before {
            opacity: 1;
        }
    }
}
.info_img_off {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    stroke-linecap: round;
}
.info_img_off {
    stroke-dasharray: 2500;
    stroke-dashoffset: 2500;
    transition: stroke-dashoffset 2s;
}
.animated .info_img_off {
    stroke-dashoffset: 0;
}
.info_img_on {
    opacity: 0;
    transition: opacity 1.5s 0.5s;
}
.animated .info_img_on {
    opacity: 1;
}
.info .section_ttl_svg {
    transition-delay: 0.5s;
}
.info .section_ttl::after {
    transition-delay: 0.8s;
}
.info_list > li {
    opacity: 0;
    transform: translateY(20rem);
}
.info_list > li:nth-child(1) {
    transition: opacity 0.5s 1s, transform 0.5s 1s;
}
.info_list > li:nth-child(2) {
    transition: opacity 0.5s 1.2s, transform 0.5s 1.2s;
}
.info_list > li:nth-child(3) {
    transition: opacity 0.5s 1.4s, transform 0.5s 1.4s;
}
.info_list > li:nth-child(4) {
    transition: opacity 0.5s 1.6s, transform 0.5s 1.6s;
}
.info_btn {
    opacity: 0;
    transform: translateY(20rem);
    transition: opacity 0.5s 1.8s, transform 0.5s 1.8s;
}
.animated .info_list > li,
.animated .info_btn {
    opacity: 1;
    transform: translateY(0);
}

/* recruit */
.recruit {
    color: #fff;
    background: var(--color-gradation);
}
.recruit .section_ttl::after {
    background: url(../img/index/recruit_ttl.svg) no-repeat 50% / contain;
}
.recruit .section_ttl_svg {
    stroke: var(--color-base);
}
.animated.recruit .section_ttl {
    background-position: 100% 100%;
}
.recruit_txt {
    font-weight: 700;
    line-height: 2;
}
.animated.recruit .recruit_txt {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
}
@media (min-width: 769px) {
    .recruit {
        margin-top: 160rem;
        padding: 160rem 0 190rem;
    }
    .recruit .section_ttl {
        width: 656rem;
    }
    .recruit_txt {
        margin-top: 30rem;
        font-size: 20rem;
    }
    .recruit_inner {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
}
@media (max-width: 768px) {
    .recruit {
        margin-top: 80rem;
        padding: 80rem 32rem;
    }
    .recruit .section_ttl {
        width: 271rem;
    }
    .recruit_txt {
        margin-top: 24rem;
        font-size: 16rem;
    }
    .recruit_btn {
        margin: 64rem 0 0 auto;
    }
}

/* reserve */
.reserve {
    color: #000;
}
.reserve .inner {
    position: relative;
}
.reserve_bg {
    position: absolute;
    top: 0;
    left: 0;
}
.reserve_inner {
    background-color: rgba(222, 222, 222, 0.3);
}
.reserve .section_ttl::after {
    background: url(../img/index/reserve_ttl.svg) no-repeat 50% / contain;
}
.reserve_list {
    font-weight: 500;
    line-height: 1.75;
    text-align: center;
}
.reserve_list > li {
    position: relative;
}
.reserve_note {
    line-height: 1.75;
}
.reserve_note_ttl {
    font-weight: 700;
}
.reserve_note_list > li {
    padding-left: 1em;
    text-indent: -1em;
    position: relative;
}
.reserve_note_list > li::before {
    content: '';
    border-radius: 50%;
    background: #000;
    display: block;
    position: absolute;
}
@media (min-width: 769px) {
    .reserve {
        margin-top: 168rem;
    }
    .reserve_inner {
        padding: 130rem 84rem 100rem;
    }
    .reserve .section_ttl {
        width: 686rem;
        margin: 0 auto;
    }
    .reserve_list {
        margin-top: 40rem;
        font-size: 16rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .reserve_list > li {
        width: 258rem;
        height: 258rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .reserve_list > li::before {
        content: '';
        width: 2px;
        height: 240rem;
        margin: auto;
        background-color: #fff;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
    }
    .reserve_list > li:nth-child(4n + 1):before {
        content: none;
    }
    .reserve_list > li:nth-child(n + 5)::after {
        content: '';
        width: 240rem;
        height: 2px;
        margin: auto;
        background-color: #fff;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
    .reserve_note {
        margin-top: 40rem;
    }
    .reserve_note + .reserve_note {
        margin-top: 27rem;
    }
    .reserve_note_ttl,
    .reserve_note_txt,
    .reserve_note_list {
        font-size: 14rem;
    }
    .reserve_note_txt_small {
        font-size: 12rem;
    }
    .reserve_note_list > li::before {
        width: 3rem;
        height: 3rem;
        top: 11rem;
        left: 6rem;
    }
}
@media (max-width: 768px) {
    .reserve {
        margin-top: 80rem;
    }
    .reserve .inner {
        margin: 0 24rem;
    }
    .reserve_inner {
        padding: 60rem 22rem 39rem;
    }
    .reserve .section_ttl {
        width: 283rem;
        margin: 0 auto;
    }
    .reserve_list {
        margin-top: 16rem;
        font-size: 12rem;
    }
    .reserve_list > li {
        padding: 24rem 0;
    }
    .reserve_list > li + li::before {
        content: '';
        width: 100%;
        height: 1px;
        background-color: #fff;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .reserve_note {
        margin-top: 9rem;
    }
    .reserve_note + .reserve_note {
        margin-top: 24rem;
    }
    .reserve_note_ttl,
    .reserve_note_txt,
    .reserve_note_list {
        font-size: 11rem;
    }
    .reserve_note_txt_small {
        font-size: 10rem;
    }
}
.reserve_bg {
    fill: none;
    stroke: #fff;
    stroke-width: 1;
    stroke-linecap: round;
}
.reserve_list > li {
    opacity: 0;
    transform: translateY(20rem);
}
.reserve_list > li:nth-child(1) {
    transition: opacity 0.5s 1s, transform 0.5s 1s;
}
.reserve_list > li:nth-child(2) {
    transition: opacity 0.5s 1.1s, transform 0.5s 1.1s;
}
.reserve_list > li:nth-child(3) {
    transition: opacity 0.5s 1.2s, transform 0.5s 1.2s;
}
.reserve_list > li:nth-child(4) {
    transition: opacity 0.5s 1.3s, transform 0.5s 1.3s;
}
.reserve_list > li:nth-child(5) {
    transition: opacity 0.5s 1.4s, transform 0.5s 1.4s;
}
.reserve_list > li:nth-child(6) {
    transition: opacity 0.5s 1.5s, transform 0.5s 1.5s;
}
.reserve_list > li:nth-child(7) {
    transition: opacity 0.5s 1.6s, transform 0.5s 1.6s;
}
.reserve_list > li:nth-child(8) {
    transition: opacity 0.5s 1.7s, transform 0.5s 1.7s;
}
.animated .reserve_list > li {
    opacity: 1;
    transform: translateY(0);
}
.reserve_bg {
    transition: stroke-dashoffset 2s;
}
.animated .reserve_bg {
    stroke-dashoffset: 0;
}
@media (min-width: 769px) {
    .reserve_bg {
        stroke-dasharray: 4000;
        stroke-dashoffset: 4000;
    }
}
@media (max-width: 768px) {
    .reserve_bg {
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
    }
}

/* apparel */
.apparel_inner {
    position: relative;
}
.apparel_ttl > svg {
    fill: var(--color-sub);
}
.apparel_txt {
    font-weight: 700;
    line-height: 2;
}
.apparel_img {
    position: absolute;
}
@media (min-width: 769px) {
    .apparel {
        margin-top: 225rem;
    }
    .apparel_ttl {
        width: 352rem;
        font-size: 40rem;
    }
    .apparel_ttl > svg {
        margin-bottom: 23rem;
    }
    .apparel_txt {
        margin-top: 32rem;
        font-size: 16rem;
    }
    .apparel_btn {
        margin-top: 64rem;
    }
    .apparel_img {
        width: 300rem;
        box-shadow: 40rem 40rem 80rem rgba(0, 0, 0, 0.15);
    }
    .apparel_img_1 {
        top: -40rem;
        left: 546rem;
    }
    .apparel_img_2 {
        top: 34rem;
        left: 846rem;
    }
    .apparel_btn_arrow_wrap {
        margin: auto;
        position: absolute;
        width: 14rem;
        height: 14rem;
        top: 0;
        right: 24rem;
        bottom: 0;
        overflow: hidden;
    }
    .apparel_btn_arrow {
        right: 0;
    }
}
@media (max-width: 768px) {
    .apparel {
        margin: 80rem 32rem 0;
    }
    .apparel_ttl {
        width: 258rem;
        font-size: 30rem;
    }
    .apparel_ttl > svg {
        margin-bottom: 20rem;
    }
    .apparel_txt {
        margin-top: 24rem;
        font-size: 12rem;
    }
    .apparel_btn {
        margin-top: 286rem;
    }
    .apparel_img {
        width: 137rem;
        box-shadow: 24rem 24rem 60rem rgba(0, 0, 0, 0.15);
    }
    .apparel_img_1 {
        top: 243rem;
        left: 14rem;
    }
    .apparel_img_2 {
        top: 273rem;
        left: 151rem;
    }
}
.apparel_ttl,
.apparel_txt,
.apparel_btn {
    opacity: 0;
    transform: translateY(20rem);
}
.apparel_ttl {
    transition: opacity 0.5s, transform 0.5s;
}
.apparel_txt {
    transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.animated .apparel_ttl,
.animated .apparel_txt,
.animated .apparel_btn {
    opacity: 1;
    transform: translateY(0);
}
.apparel_img_1,
.apparel_img_2 {
    opacity: 0;
    translate: 0 40rem;
    rotate: 0deg;
}
.apparel_img_1 {
    transition: opacity 1s 0.6s, translate 1s 0.6s, rotate 1s 0.8s;
}
.apparel_img_2 {
    transition: opacity 1s 0.7s, translate 1s 0.7s, rotate 1s 0.9s;
}
.animated .apparel_img_1,
.animated .apparel_img_2 {
    opacity: 1;
    translate: 0 0;
}
.animated .apparel_img_1 {
    rotate: -9deg;
}
.animated .apparel_img_2 {
    rotate: 15deg;
}
@media (min-width: 769px) {
    .apparel_btn {
        transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
    }
    @keyframes apparel_btn_arrow {
        0% {
            translate: 0 0;
        }
        50% {
            translate: 100% -100%;
        }
        50.01% {
            translate: -100% 100%;
        }
        100% {
            translate: 0 0;
        }
    }
    @media (hover: hover) {
        .apparel_btn:hover .apparel_btn_arrow {
            animation: apparel_btn_arrow 1s;
        }
    }
}

/* shop */
@media (min-width: 769px) {
    .shop {
        margin-top: 256rem;
        max-height: 780px;
        overflow: hidden;
    }
    .shop_img {
        width: 100%;
        height: 780rem;
        background: url(../img/index/shop_img.webp) no-repeat 50% / cover;
    }
}
@media (max-width: 768px) {
    .shop {
        margin-top: 84rem;
    }
    .shop_img {
        width: 100%;
        height: 295rem;
        background: url(../img/index/shop_img_sp.webp) no-repeat 50% / cover;
    }
}