/* -------------------------------base(mobile)↓-------------------------------------- */
/* concept start */
.concept{
    margin-top: calc(calc(462 - 240 - 102) * var(--site-font-size-ratio));
}
.concept>h2>span{
    display: block;
    color: #ffffff;
    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;
}
.concept-h3{
    color: #ffffff;
}
.concept-h3:first-of-type{
    margin-top: calc(calc(710 - 462 - 168) * var(--site-font-size-ratio));
}
.concept-h3:first-of-type~*{
    margin-top: calc(80 * var(--site-font-size-ratio));
}
.concept-h3>h3>span{
    display: block;
}
.concept-h3>h3>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: left;
}
.concept-h3>h3>span:nth-of-type(2){
    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: left;
}
.concept-h3>div{
    width: 100%;
    height: calc(294 * var(--site-font-size-ratio));
    margin-top: calc(calc(92 - 28 - 56) * var(--site-font-size-ratio));
    border-radius: calc(18 * var(--site-font-size-ratio));
    overflow: hidden;
}
.concept-h3>div>img{
    width: 100%;
    min-height: 100%;
}
.concept-h3>p{
    margin-top: calc(calc(404 - 92 - 294) * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
    font-weight: 700;
    line-height: calc(32 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: left;
}
.concept-h3>span{
    display: flex;
    align-items: center;
    gap: calc(17 * var(--site-font-size-ratio));
    width: fit-content;
    margin: 0 0 0 auto;
    font-size: calc(16 * var(--site-font-size-ratio));
    font-weight: 700;
    line-height: calc(32 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: left;
}
.concept-h3>span::after{
    font-family: "Font Awesome 5 Free";
    content: '\f0d8';
}
.concept-h3>span.close::after{
    content: '\f0d7';
}
.concept-h3>dl{
    margin-top: calc(calc(624 - 574 - 32) * var(--site-font-size-ratio));
    background-color: var(--site-color-brand-gray2);
    padding: calc(30 * var(--site-font-size-ratio));
    border-radius: calc(18 * var(--site-font-size-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 * var(--site-font-size-ratio));
}
.concept-h3:nth-of-type(1)~*>dl{
    display: none;
}
.concept-h3>dl dt,
.concept-h3>dl dd{
    font-size: calc(16 * var(--site-font-size-ratio));
    font-weight: 400;
    line-height: calc(32 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: left;
    color: var(--site-color-text-black);
    width: 100%;
}
.concept-h3>dl dt{
    font-weight: 700;
}
.concept-h3>dl dd{
    font-weight: 400;
}
.concept-h3>dl dd>ul>li{
    /* list-style-type: disc; */
}
/* concept end */
/* entry start */
.entry{
    margin-top: calc(calc(3750 - 710 - 2960) * var(--site-font-size-ratio));
    background: linear-gradient(90deg, #E0261B 0%, #F8DF08 100%);
    padding: calc(calc(3817 - 3750) * var(--site-font-size-ratio)) calc(17 * var(--site-font-size-ratio));
}
.entry>h2>span{
    color: #ffffff;
    display: block;
}
.entry>h2>span:nth-of-type(1){
    font-size: calc(24 * var(--site-font-size-ratio));
    font-weight: 900;
    line-height: calc(24 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: center;
}
.entry>h2>span:nth-of-type(2){
    font-size: calc(16 * var(--site-font-size-ratio));
    font-weight: 700;
    line-height: calc(32 * var(--site-font-size-ratio));
    letter-spacing: 0.1em;
    text-align: center;
    margin-top: calc(calc(3873 - 3817 - 24) * var(--site-font-size-ratio));
}
.entry>a.btn{
    width: calc(280 * var(--site-font-size-ratio));
    margin: calc(calc(3937 - 3873 - 32) * var(--site-font-size-ratio)) auto 0;
    padding: calc(24 * var(--site-font-size-ratio)) calc(60 * var(--site-font-size-ratio));
    border-radius: calc(60 * var(--site-font-size-ratio));
}
/* entry end */

/* -------------------------------base(mobile)↑-------------------------------------- */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
    /* concept start */
    .concept {
        max-width: calc(980 * var(--site-font-size-ratio));
        margin: calc(calc(497 - 240 - 142) * var(--site-font-size-ratio)) auto 0;
    }
    .concept>h2{
        text-align: center;
    }
    .concept>h2>span:first-child~*{
        display: initial;
    }
    .concept-h3{
        display: grid;
        grid:
        "concept-h3 concept-img"
        "concept-p concept-img"
        "concept-toggle concept-toggle"
        "concept-dl concept-dl";
        column-gap: calc(calc(980 - 547 - 394) * var(--site-font-size-ratio));
        grid-template-columns: 1fr;
    }
    .concept-h3:first-of-type~*{
        margin-top: calc(60 * var(--site-font-size-ratio));
    }
    .concept-h3>h3{
        grid-area: concept-h3;
    }
    .concept-h3>div{
        margin-top: 0;
        grid-area: concept-img;
        max-width: calc(394 * var(--site-font-size-ratio));
        max-height: calc(263 * var(--site-font-size-ratio));
    }
    .concept-h3>div>img{
        height: 100%;
    }
    .concept-h3>p{
        margin-top: 0;
        grid-area: concept-p;
    }
    .concept-h3>span{
        grid-area: concept-toggle;
        margin: 0 0 auto 0;
        cursor: pointer;
    }
    .concept-h3>dl{
        grid-area: concept-dl;
        margin-top: calc(calc(343 - 293 - 32) * var(--site-font-size-ratio));
        border-radius: calc(32 * var(--site-font-size-ratio));
        padding: calc(40 * var(--site-font-size-ratio));
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }
    .concept-h3>dl>dt{
        width: calc(160 * var(--site-font-size-ratio));
        width: 25%;
    }
    .concept-h3>dl>dd{
        width: calc(calc(980 - 160) * var(--site-font-size-ratio));
        width: 75%;
    }
    /* concept end */
    /* entry start */
    .entry{
        margin-top: calc(calc(2494 - 785 - 1657) * var(--site-font-size-ratio));
        padding: calc(calc(2554 - 2494) * var(--site-font-size-ratio)) 0;
    }
    .entry>h2>span:nth-of-type(1){
        font-size: calc(32 * var(--site-font-size-ratio));
        line-height: calc(64 * var(--site-font-size-ratio));
    }
    .entry>h2>span:nth-of-type(2){
        margin-top: calc(calc(2636 - 2554 - 64) * var(--site-font-size-ratio));
        font-size: calc(16 * var(--site-font-size-ratio));
        line-height: calc(32 * var(--site-font-size-ratio));
    }
    /* entry end */
}
/* -----------------desktop(include ipad)↑-------------------- */