@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
    --delay: 0s;
    --KronaOne: 'Krona One', 'Noto Sans JP', 'Noto Sans', 'メイリオ';
    --Lato: 'Lato', 'Noto Sans JP', 'Noto Sans', 'メイリオ';
    --fs72: min(5.27vw, 72px);
    --fs56: min(2.93vw, 56px);
    --fs40: min(2.93vw, 40px);
    --fs38: min(2.78vw, 38px);
    --fs24: min(1.76vw, 24px);
    --fs20: min(1.46vw, 20px);
    --fs18: min(1.32vw, 18px);
    --fs15: min(1.1vw, 15px);
    --fs14: min(1.02vw, 14px);
    --fs13: min(0.95vw, 13px);
    --fs12: min(0.88vw, 12px);
    --fs11: min(0.81vw, 11px);
    --sp_fs56: min(14.93vw, 56px);
    --sp_fs32: min(8.53vw, 32px);
    --sp_fs24: min(6.4vw, 24px);
    --sp_fs20: min(5.33vw, 20px);
    --sp_fs18: min(4.8vw, 18px);
    --sp_fs15: min(4.0vw, 15px);
    --sp_fs14: min(3.73vw, 14px);
    --sp_fs13: min(3.47vw, 13px);
    --sp_fs12: min(3.2vw, 12px);
    --sp_fs10: min(2.67vw, 10px);
    --sp_fs8: min(2.13vw, 8px);
    --main-color: #091839;
    --gray: #B2B2B2;
    --light-gray: #F4F4F4;
    --light-green: #F0F5F4;
    --border-radial__beside: radial-gradient(circle, var(--main-color) 1px, transparent 1px) repeat-x left bottom / 8px 2px;
    --border-radial__vertical: radial-gradient(circle, var(--main-color) 1px, transparent 1px) repeat-y left bottom / 2px 8px;
}

body {
    font-family: 'Noto Sans JP', 'Noto Sans', 'メイリオ';
    font-weight: 400;
    color: #091839;
    min-width: 320px;
    max-width: 1920px;
    margin: auto;
    background-color: #FFF;
}

body.noscroll {
    overflow: hidden;
}

.w127 {
    width: calc((1270 / 1366) * 100%);
    margin: auto;
}

@media (max-width:1024px) {
    .w127 {
        width: 96%;
    }
}

@media (max-width:767px) {
    .w127 {
        width: max(calc((343 / 375) * 100%), 320px);
    }
}

/*animation*/
.animation {
    opacity: 0;
    translate: var(--offsetX, 0) var(--offsetY, 0);
}

@media (max-width:767px) {
    .animation {
        translate: var(--spOffsetX, var(--offsetX, 0)) var(--spOffsetY, var(--offsetY, 0));
    }
}

.animation.active {
    animation: common-animation var(--duration, 0.5s) var(--delay, 0s) ease-in-out forwards;
}

.under-page .animation.active {
    animation-delay: var(--delay, 0.2s);
}

@keyframes common-animation {
    to {
        translate: 0 0;
        opacity: 1.0;
    }
}

@keyframes scroll-move {
    0% {
        opacity: 0;
        translate: 0 -10px;
    }

    50% {
        opacity: 1;
        translate: 0 0;
    }

    75% {
        opacity: 1;
        translate: 0 0;
    }

    100% {
        opacity: 0;
        translate: 0 10px;
    }
}


@keyframes release__mask {
    to {
        clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%);
        opacity: 1.0;
    }
}

@keyframes mask-left {
    to {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        opacity: 0;
    }
}

@keyframes loop-x {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes loop-Y {
    0% {
        transform: translateY(-100%);
    }

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

@keyframes loop-Y2 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100%);
    }
}

@keyframes loop-Y3 {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(100%);
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0) translateY(-50px);
        opacity: 0;
    }

    50% {
        transform: scale(1.08) translateY(0);
        opacity: 1;
    }

    70% {
        transform: scale(0.9) translateY(-10px);
    }

    85% {
        transform: scale(1.03) translateY(0);
    }

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

@keyframes tickTock {
    from {
        transform: rotate(-5deg);
        /* 最初の位置（左） */
    }

    to {
        transform: rotate(5deg);
        /* 最後の位置（右） */
    }
}

@keyframes rotate {
    from {
        rotate: 0;
    }

    to {
        rotate: 360deg;
    }
}

/*======================
*
parts
*
=======================*/
/*======================
hd
=======================*/
/*hd01*/
:is(h1, h2, h3, h4, h5).hd01 {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    top: 1px;
    font-family: var(--Lato);
    font-size: 10px;
    color: #000;
}

:is(h1, h2, h3, h4, h5).hd01::before {
    content: "";
    width: 6px;
    aspect-ratio: 1 / 1;
    background-color: var(--color);
    border-radius: 50%;
}

/*end*/

/*hd02*/
:is(h1, h2, h3, h4, h5).hd02 {
    display: flex;
    align-items: center;
    gap: calc((20 / 24) *1.0em);
    min-width: fit-content;
    font-size: var(--fs24);
    font-weight: 800;
    text-align: center;
}

:is(h1, h2, h3, h4, h5).hd02 span:not([class*=deco]) {
    position: relative;
    top: calc((2 / 24) * 1.0em);
}

:is(h1, h2, h3, h4, h5).hd02 span.deco {
    width: calc((44 / 24) * 1.0em);
    aspect-ratio: 11 / 12;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;
}

:is(h1, h2, h3, h4, h5).hd02 span.deco01 {
    background-image: url(img/common/hd02_deco01.webp);
}

:is(h1, h2, h3, h4, h5).hd02 span.deco02 {
    background-image: url(img/common/hd02_deco02.webp);
}

/*sp*/
@media (max-width:767px) {
    :is(h1, h2, h3, h4, h5).hd02 {
        gap: calc((16 / 18) *1.0em);
        font-size: min(18px, 4.0vw);
    }

    :is(h1, h2, h3, h4, h5).hd02 span.deco {
        width: calc((32 / 16) * 1.0em);
        aspect-ratio: 8 / 9;
        background-size: cover;
    }
}

/*end*/

/*hd03*/
.hd03 {
    font-size: var(--fs24);
}

.hd03.center {
    text-align: center;
}

.hd03 p.deco {
    font-family: var(--KronaOne);
    font-size: calc((48 / 24) * 1.0em);
    letter-spacing: -0.02em;
}

.hd03 p.deco span {
    color: var(--color);
}

.hd03 :is(h1, h2, h3, h4, h5) {
    font-family: 'Noto Sans JP', 'Noto Sans', 'メイリオ';
    font-size: 1.0em;
    font-weight: 900;
    margin-top: 5px;
}

/*sp*/
@media (max-width:767px) {
    .hd03 {
        font-size: var(--sp_fs15);
        text-align: center;
    }

    .hd03 p.deco {
        font-size: 2.0em;
    }

    .hd03 :is(h1, h2, h3, h4, h5) {
        margin-top: 2px;
    }

}

/*end*/

/*hd04*/
.hd04 {
    font-size: var(--fs38);
}

.hd04.center {
    text-align: center;
}

.hd04 p.deco {
    font-family: var(--KronaOne);
    font-size: calc((15 / 38) * 1.0em);
    letter-spacing: 0.01em;
}

.hd04 :is(h1, h2, h3, h4, h5) {
    font-family: 'Noto Sans JP', 'Noto Sans', 'メイリオ';
    font-size: 1.0em;
    font-weight: 900;
    margin-top: 7px;
}

/*sp*/
@media (max-width:767px) {
    .hd04 {
        font-size: var(--sp_fs24);
        text-align: center;
    }

    .hd04 p.deco {
        font-size: 0.5em;
    }

    .hd04 :is(h1, h2, h3, h4, h5) {
        margin-top: 5px;
    }

}

/*end*/

/*======================
btn
=======================*/
/*btn01*/
:is(a.btn01, .btn01 a) {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--KronaOne);
    font-size: 15px;
    letter-spacing: -0.02em;
    min-width: fit-content;
    width: fit-content;
}

a.btn01.center,
.btn01.center a {
    margin: auto;
}

:is(a.btn01, .btn01 a) span {
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: url(img/common/arrow-icn_white.webp) no-repeat var(--main-color) 50% / 8px;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    :is(a.btn01, .btn01 a):hover span {
        translate: 5px 0;
    }
}

/*btn02*/
:is(a.btn02, .btn02 a) {
    display: flex;
    align-items: center;
    gap: 39px;
    font-family: var(--KronaOne);
    font-size: 15px;
    letter-spacing: 0.01em;
    min-width: fit-content;
    width: fit-content;
    padding: 10px 10px 10px 24px;
    border: solid 1px var(--main-color);
    border-radius: 50px;
}

a.btn02.center,
.btn02.center a {
    margin: auto;
}

:is(a.btn02, .btn02 a) span {
    position: relative;
    display: block;
    width: 30px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--main-color);
    transition: 0.3s ease-in-out;
}

:is(a.btn02, .btn02 a) span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 6px;
    background-color: #FFF;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (any-hover:hover) {
    :is(a.btn02, .btn02 a):hover span {
        translate: 5px 0;
    }
}

/*btn03*/
div.btn:has(input.btn03) {
    position: relative;
    width: fit-content;
}

div.btn:has(input.btn03.full) {
    width: 100%;
}

:is(a.btn03, .btn03 a, input.btn03) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    min-width: 300px;
    font-size: 20px;
    font-weight: 700;
    color: #FFF;
    padding: 22px 0;
    background-color: var(--main-color);
    border: none;
    border-radius: 50px;
}

a.btn03.center,
.btn03.center a {
    margin: auto;
}

a.btn03.full,
.btn03.full a {
    width: 100%;
}

div.btn:has(input.btn03.full) input {
    width: 100%;
}

:is(a.btn03, .btn03 a, )::after,
div.btn:has(input.btn03)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
    width: 40px;
    aspect-ratio: 1 /1;
    border-radius: 12px;
    background: url(img/common/arrow-icn_black.webp) no-repeat #FFF 50% / 8px;
    transition: 0.3s ease-in-out;
}

/*sp*/
@media (max-width:767px) {
    :is(a.btn03, .btn03 a, input.btn03) {
        font-size: 15px;
        padding: 18px 0;
        min-width: 100%;
    }

    :is(a.btn03, .btn03 a, )::after,
    div.btn:has(input.btn03)::after {
        right: 24px;
        width: 24px;
        border-radius: 6px;
        background-size: 4.5px;
    }

}

/*anker*/
:is(a.anker, .anker a) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    color: var(--main-color);
    width: fit-content;
    min-width: 240px;
    padding: calc((20 / 15) * 1.0em) calc((16 / 15) * 1.0em);
    border-radius: 8px;
    background-color: #FFF;
}

:is(a.anker, .anker a) span.arrow {
    position: relative;
    display: block;
    width: calc((20 / 15) * 1.0em);
    height: calc((20 / 15) * 1.0em);
    border-radius: 50%;
    background-color: var(--main-color);
    transition: 0.3s ease-in-out;
}

:is(a.anker, .anker a) span.arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    width: calc((5 / 15) * 1.0em);
    aspect-ratio: 4 / 3;
    margin: auto;
    background-color: #FFF;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media (any-hover:hover) {
    :is(a.anker, .anker a):hover .arrow{
        translate: 0 3px;
    }
}