/* -------------------------------base(mobile)↓-------------------------------------- */
/* mission start */
.mission{
    color: #ffffff;
    margin-top: calc(calc(462 - 240 - 102) * var(--site-font-size-ratio));
    position: relative;
}
.mission>h2>span{
    display: block;
}
.mission>h2>span:nth-of-type(1){
    font-family: var(--site-font-family-League-Spartan);
    font-size: calc(20 * var(--site-font-size-ratio));
    font-weight: 700;
    line-height: calc(20 * var(--site-font-size-ratio));
    letter-spacing: 0.02em;
    text-align: center;
}
.mission>h2>span:nth-of-type(2){
    margin-top: calc(calc(574 - 536 - 20) * var(--site-font-size-ratio));
}
.mission>h2>span:nth-of-type(2),
.mission>h2>span:nth-of-type(3){
    font-size: calc(28 * var(--site-font-size-ratio));
    font-weight: 900;
    line-height: calc(56 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: center;
}
.mission>h2>span:nth-of-type(3)>span{
    position: relative;
}
.mission>h2>span:nth-of-type(3)>span::before{
    content: "<アナタ>";
    font-size: calc(16 * var(--site-font-size-ratio));
    font-weight: 900;
    line-height: calc(10 * var(--site-font-size-ratio));
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-100%);
    display: block;
    width: 100%;
    text-align: center;
}
.mission>p{
    margin-top: calc(calc(766 - 574 - 112) * var(--site-font-size-ratio));
}
.mission>p>span{
    display: block;
    font-size: calc(18 * var(--site-font-size-ratio));
    font-weight: 700;
    line-height: calc(36 * var(--site-font-size-ratio));
    letter-spacing: 0.2em;
    text-align: center;
}
/* mission end */
/* value start */
.value{
    margin: calc(calc(1030 - 462 - 448) * var(--site-font-size-ratio)) auto 0;
    position: relative;
    padding-top: calc(277 * var(--site-font-size-ratio));
}
.value::after{
    z-index: -1;
}
.value>div{
    width: 100%;
    height: calc(277 * var(--site-font-size-ratio));
    border-radius: calc(100vw / var(--site-division) * 18);
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: -1;
}
.value>div>img{
    width: 100%;
}
.value>h2{
    color: #ffffff;
}
.value>h2>span{
    display: block;
    text-align: center;
}
.value>h2>span:nth-of-type(1){
    margin-top: calc(calc(1339 - 1030 - 277) * var(--site-font-size-ratio));
    font-family: var(--site-font-family-League-Spartan);
    font-size: calc(20 * var(--site-font-size-ratio));
    font-weight: 700;
    line-height: calc(20 * var(--site-font-size-ratio));
    letter-spacing: 0.02em;
}
.value>h2>span:nth-of-type(2){
    margin-top: calc(calc(1375 - 1339 - 20) * var(--site-font-size-ratio));
}
.value>h2>span:nth-of-type(1)~span{
    font-size: calc(24 * var(--site-font-size-ratio));
    font-weight: 900;
    line-height: calc(48 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
}
.value>p{
    color: #ffffff;
    margin-top: calc(calc(1503 - 1375 - 96) * var(--site-font-size-ratio));
}
.value>p>span{
    font-size: calc(18 * var(--site-font-size-ratio));
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: left;
    margin-bottom: calc(calc(1549 - 1503 - 18) * var(--site-font-size-ratio));
    display: flex;
    align-items: center;
    gap: calc(calc(100 - 80) * var(--site-font-size-ratio));
}
.value>p>span:last-child{
    margin-bottom: 0;
}
/* value end */
/* profile start */
.profile{
    margin-top: calc(calc(1733 - 1030 - 583) * var(--site-font-size-ratio));
    color: #ffffff;
}
.profile>h2{
    text-align: center;
    font-family: Josefin Sans;
    font-size: calc(32 * var(--site-font-size-ratio));
    font-weight: 400;
    line-height: calc(48 * var(--site-font-size-ratio));
    letter-spacing: 0.02em;
    text-align: center;
    position: relative;
    padding-bottom: calc(calc(1839 - 1733 - 96) * var(--site-font-size-ratio));
}
.profile>h2::after{
    content: "";
    display: block;
    background-color: #ffffff;
    height: calc(4 * var(--site-font-size-ratio));
    width: calc(60 * var(--site-font-size-ratio));
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.profile>h2>span{
    display: block;
}
.profile>table{
    margin-top: calc(calc(1899 - 1733 - 106) * var(--site-font-size-ratio));
    font-size: calc(18 * var(--site-font-size-ratio));
    font-weight: 400;
    line-height: calc(36 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: left;
}
.profile>table th{
    font-weight: 400;
    min-width: calc(89 * var(--site-font-size-ratio));
    word-break: keep-all;
    display: flex;
}
.profile>table tr:first-child~*>th,
.profile>table tr:first-child~*>td{
    padding-top: calc(18 * var(--site-font-size-ratio));
}
/* profile end */
/* -------------------------------base(mobile)↑-------------------------------------- */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
    /* mission start */
    .mission{
        max-width: calc(1150 * var(--site-font-size-ratio));
        margin: calc(calc(562.55 - 240 - 142) * var(--site-font-size-ratio)) auto 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }
    .mission>h2>span:nth-of-type(2),
    .mission>h2>span:nth-of-type(3)
    {
        font-size: calc(42 * var(--site-font-size-ratio));
        font-weight: 900;
        line-height: calc(84 * var(--site-font-size-ratio));
        letter-spacing: 0.1em;
        text-align: left;
    }
    .mission>h2>span:nth-of-type(3)>span::before{
        font-size: calc(26 * var(--site-font-size-ratio));
    }
    .mission>p{
        margin-top: 0;
        width: calc(618 * var(--site-font-size-ratio));
    }
    .mission>p>span{
        text-align: left;
    }
    /* mission end */
    /* value start */
    .value{
        max-width: calc(1150 * var(--site-font-size-ratio));
        display: grid;
        grid:
            "value-h2 value-h2"
            "value-p value-img";
        grid-template-columns: 1fr 1fr;
        row-gap: calc(calc(1338 - 1200 - 78) * var(--site-font-size-ratio));
        margin: calc(calc(1030 - 462 - 448) / 2 * var(--site-font-size-ratio)) auto 0;
        padding-top: calc(277 / 2 * var(--site-font-size-ratio));
    }
    .value::after{
        left: auto;
        top: auto;
        right: 0;
        bottom: 0;
        background: linear-gradient(0deg, #2924FF 0%, #FF2431 100%);
        transform: rotate(-155.64deg) translate(calc(-254.47 * var(--site-font-size-ratio)),calc(280* var(--site-font-size-ratio)));
    }
    .value>div{
        grid-area: value-img;
        width: calc(600 * var(--site-font-size-ratio));
        max-height: calc(389 * var(--site-font-size-ratio));
        position: initial;
    }
    .value>h2{
        grid-area: value-h2;
    }
    .value>h2>span:nth-of-type(1)~span{
        font-size: calc(42 * var(--site-font-size-ratio));
        line-height: calc(84 * var(--site-font-size-ratio));
    }
    .value>p{
        grid-area: value-p;
    }
    /* value end */
    /* profile start */
    .profile{
        max-width: calc(1150 * var(--site-font-size-ratio));
        margin: calc(calc(1507.55 - 938.55 - 389.45) * var(--site-font-size-ratio)) auto 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin: calc(calc(1030 - 462 - 448) / 2 * var(--site-font-size-ratio)) auto 0;
        padding-top: calc(277 / 2 * var(--site-font-size-ratio));
    }
    .profile>h2{
        text-align: left;
    }
    .profile>h2::after{
        left: 0;
        transform: unset;
    }
    .profile>table{
        margin-top: 0;
        border-collapse: collapse;
        position: relative;
        width: calc(618 * var(--site-font-size-ratio));
    }
    .profile>table th{
        min-width: calc(calc(771 - 635) * var(--site-font-size-ratio));
    }
    .profile>table td{
        border-left: 1px solid #ffffff;
        padding-left: calc(20 * var(--site-font-size-ratio));
    }
    .profile>table tr:first-child~*>th,
    .profile>table tr:first-child~*>td{
        padding-top: calc(32 * var(--site-font-size-ratio));
    }
    /* profile end */
}
/* -----------------desktop(include ipad)↑-------------------- */