/* -------------------------------base(mobile)↓-------------------------------------- */
/* categoryTop start */
.categoryTop{
    margin: calc(calc(112 - 40 - 20) * var(--site-horizontal-ratio)) auto 0;
}
.categoryTop>*:not(a){
    width: calc(350 * var(--site-horizontal-ratio));
}
.categoryTop>h1{
    margin: auto;
    font-weight: 700;
    font-size: calc(24 * var(--site-horizontal-ratio));
    line-height: calc(32 * var(--site-horizontal-ratio));
    letter-spacing: 0;
}
.categoryTop>span{
    display: block;
    margin: calc(calc(228 - 112 - 96) * var(--site-horizontal-ratio)) auto 0;
    font-weight: 500;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(21 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.categoryTop>picture{
    display: block;
    margin: calc(calc(310 - 228 - 42) * var(--site-horizontal-ratio)) auto 0;
}
.categoryTop>picture>img{
    width: 100%;
}
.categoryTop>a{
    display: flex;
    width: 100%;
    align-items: center;
    margin: calc(calc(404 - 310 - 54) * var(--site-horizontal-ratio)) auto 0;
    height: calc(60 * var(--site-horizontal-ratio));
    background: linear-gradient(to left,#D4CA04 0 calc(30 * var(--site-horizontal-ratio)),#FAEE00 calc(30 * var(--site-horizontal-ratio)) 100%);
    font-weight: 700;
    font-size: calc(16 * var(--site-horizontal-ratio));
    line-height: 1em;
    letter-spacing: 0.1em;
    padding-left: calc(30 * var(--site-horizontal-ratio));
    position: relative;
    text-decoration: none;
    color: inherit;
}
.categoryTop>a::after{
    content: "";
    display: block;
    width: calc(9 * var(--site-horizontal-ratio));
    height: calc(7.5 * var(--site-horizontal-ratio));
    background-image: url(../images/index/top-button-after.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: scale(1.5);
    position: absolute;
    right: calc(10 * var(--site-horizontal-ratio));
}
/* categoryTop end */

/* categoryPartner start */
.categoryPartner{
    margin: calc(calc(504.5 - 404 - 60) * var(--site-horizontal-ratio)) auto 0;
    padding-bottom: calc(calc(1139 - 806 - 273) * var(--site-horizontal-ratio));
    background: linear-gradient(to top,#F2E600 calc(140 * var(--site-horizontal-ratio)),transparent calc(140 * var(--site-horizontal-ratio)) 100%);
}
.categoryPartner>h2{
    font-weight: 700;
    font-size: calc(18 * var(--site-horizontal-ratio));
    line-height: calc(32 * var(--site-horizontal-ratio));
    letter-spacing: 0;
    padding: 0 calc(20 * var(--site-horizontal-ratio));
}
.categoryPartner>h2::before{
    content: "PARTNER";
    color: #DAD0C2;
    font-family: var(--site-font-family-Aboreto);
    font-weight: 400;
    font-size: calc(20 * var(--site-horizontal-ratio));
    line-height: calc(20 * var(--site-horizontal-ratio));
    display: block;
    text-align: left;
    margin:0 0 calc(calc(535 - 504.5 - 20) * var(--site-horizontal-ratio)) 0;
}
.categoryPartner>h2>span::before{
    content: "「";
    font-family: system-ui;
}
.categoryPartner>h2>span::after{
    content: "」";
    font-family: system-ui;
}
.categoryPartner>dl{
    padding: 0 calc(20 * var(--site-horizontal-ratio));
    margin-top:calc(calc(671 - 535 - 96) * var(--site-horizontal-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: calc(10 * var(--site-horizontal-ratio));
}
.categoryPartner>dl>dt{
    width: 100%;
    font-weight: 700;
    font-size: calc(14 * var(--site-horizontal-ratio));
    letter-spacing: 0;
}
.categoryPartner>dl>dd{
    width: 100%;
    font-weight: 400;
    font-size: calc(12 * var(--site-horizontal-ratio));
    letter-spacing: 0;
}
.categoryPartner>.partner_splide{
    margin-top:calc(calc(806 - 671 - 85) * var(--site-horizontal-ratio));
}
/* categoryPartner end */

/* categories start */
.categories{
    background-color: #F2E600;
    padding:calc(calc(4212 - 4152) * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio));
}
.categories>span{
    font-weight: 700;
    font-size: calc(16 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.categories>div{
    display: flex;
    flex-wrap: wrap;
    column-gap: calc(5 * var(--site-horizontal-ratio));
    row-gap: calc(8 * var(--site-horizontal-ratio));
    margin-top:calc(calc(4248 - 4212 - 24) * var(--site-horizontal-ratio));
}
.categories>div>a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: calc(500 * var(--site-horizontal-ratio));
    background-color: #FFFCC0;
    font-weight: 500;
    font-size: calc(16 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    text-decoration: none;
    color: inherit;
    padding: calc(4 * var(--site-horizontal-ratio)) calc(10 * var(--site-horizontal-ratio));
}
/* categories end */

/* column start */
.column{
    background-color: #F7F4ED;
    padding: calc(calc(5420 - 4900 - 460) * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio));
}
.column>h2{
    text-align: center;
}
.column>h2::before{
    content: "COLUMN";
}
.column>div{
    margin-top:calc(calc(5572 - 5460 - 72) * var(--site-horizontal-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: calc(20 * var(--site-horizontal-ratio));
}
.column>div>a{
    display: block;
    text-decoration: none;
    color: inherit;
}
.column>div>a>img{
    width: 100%;
}
.column>div>a>span{
    display: block;
    margin-top:calc(calc(199 - 180.18460083007812) * var(--site-horizontal-ratio));
    font-weight: 700;
    font-size: calc(14 * var(--site-horizontal-ratio));
}
.column>div>a>time{
    display: block;
    margin-top:calc(calc(259 - 199 - 42) * var(--site-horizontal-ratio));
    font-weight: 500;
    font-size: calc(14 * var(--site-horizontal-ratio));
    text-align: right;
}
.column>a{
    display: flex;
    align-items: center;
    height: calc(56 * var(--site-horizontal-ratio));
    margin-top:calc(calc(6792 - 5572 - 1180) * var(--site-horizontal-ratio));
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: calc(16 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    background-color: #FAEE00;
    border-radius: 999px;
    padding: calc(14 * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio));
    position: relative;
}
.column>a::after{
    content: "";
    display: block;
    width: calc(24* var(--site-horizontal-ratio));
    height: calc(32.31* var(--site-horizontal-ratio));
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: calc(15* var(--site-horizontal-ratio));
    transform: translateY(-48%);
    background-image: url(../images/index/future-a-after-black-mobile.svg);
}
/* column end */

.categoryFaq+.categoryFuture{
    margin-top:calc(30 * var(--site-horizontal-ratio));
}

/*== landscape responsive ==*/
@media screen and (max-width: 767px) and (orientation: landscape){
}
/*== landscape responsive ==*/
/* -------------------------------base(mobile)↑-------------------------------------- */

/* ---------------------------desktop(include ipad)↓--------------------------------- */
@media screen and (min-width: 768px){
    /* categoryTop start */
    .categoryTop{
        margin: calc(calc(243 - 102 - 21) * var(--site-horizontal-ratio)) auto 0;
        padding-left: calc(40 * var(--site-horizontal-ratio));
        position: relative;
    }
    .categoryTop>*:not(a){
        width: auto;
    }
    .categoryTop>h1{
        font-size: calc(32 * var(--site-horizontal-ratio));
        line-height: initial;
    }
    .categoryTop>span{
        margin: calc(calc(357 - 243 - 96) * var(--site-horizontal-ratio)) auto 0;
        font-weight: 700;
        font-size: calc(16 * var(--site-horizontal-ratio));
        line-height: calc(32 * var(--site-horizontal-ratio));
    }
    .categoryTop>picture{
        width: calc(480 * var(--site-horizontal-ratio));
        margin: calc(calc(430 - 357 - 32) * var(--site-horizontal-ratio)) auto 0 0;
    }
    .categoryTop>a{
        width: calc(312 * var(--site-horizontal-ratio));
        margin: 0;
        background: linear-gradient(to left,#D4CA04 0 calc(24 * var(--site-horizontal-ratio)),#ffffff calc(24 * var(--site-horizontal-ratio)) 100%);
        font-size: calc(18 * var(--site-horizontal-ratio));
        padding-left: calc(24 * var(--site-horizontal-ratio));
        cursor: pointer;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .categoryTop>a::after{
        height: calc(6 * var(--site-horizontal-ratio));
        right: calc(8 * var(--site-horizontal-ratio));
    }
    /* categoryTop end */

    /* categoryPartner start */
    .categoryPartner{
        margin: calc(calc(584 - 430 - 74) * var(--site-horizontal-ratio)) auto 0;
        padding-bottom: calc(calc(1038 - 727 - 231) * var(--site-horizontal-ratio));
        background: linear-gradient(to top,#F2E600 calc(205 * var(--site-horizontal-ratio)),transparent calc(205 * var(--site-horizontal-ratio)) 100%);
        display: grid;
        grid-template-areas:
            "categoryPartner-h2 categoryPartner-dl"
            "categoryPartner-partner_splide categoryPartner-partner_splide";
    }
    .categoryPartner>h2{
        font-size: calc(24 * var(--site-horizontal-ratio));
        line-height: initial;
        padding: 0 calc(40 * var(--site-horizontal-ratio));
        grid-area: categoryPartner-h2;
    }
    .categoryPartner>h2::before{
        font-size: calc(30 * var(--site-horizontal-ratio));
        line-height: calc(30 * var(--site-horizontal-ratio));
        margin:0 0 calc(calc(624 - 584 - 30) * var(--site-horizontal-ratio)) 0;
    }
    .categoryPartner>dl{
        padding: 0 calc(40 * var(--site-horizontal-ratio));
        margin-top:calc(calc(624 - 584 - 30) * var(--site-horizontal-ratio));
        grid-area: categoryPartner-dl;
        align-self: flex-end;
    }
    .categoryPartner>.partner_splide{
        margin-top:calc(calc(727 - 624 - 72) * var(--site-horizontal-ratio));
        grid-area: categoryPartner-partner_splide;
    }
    /* categoryPartner end */

    /* categories start */
    .categories{
        padding:calc(calc(3658 - 3578) * var(--site-horizontal-ratio)) calc(40 * var(--site-horizontal-ratio));
    }
    .categories>div{
        gap: calc(12 * var(--site-horizontal-ratio));
        margin-top:calc(calc(3695 - 3658 - 24) * var(--site-horizontal-ratio));
    }
    .categories>div>a{
        padding: calc(4 * var(--site-horizontal-ratio)) calc(18 * var(--site-horizontal-ratio));
    }
    /* categories end */

    /* column start */
    .column{
        padding: calc(calc(4259 - 4139) * var(--site-horizontal-ratio)) calc(40 * var(--site-horizontal-ratio));
    }
    .column>div{
        margin-top:calc(calc(4407 - 4259 - 88) * var(--site-horizontal-ratio));
        gap: calc(25 * var(--site-horizontal-ratio));
        justify-content: center;
    }
    .column>div>a{
        width: calc(310 * var(--site-horizontal-ratio));
    }
    .column>div>a>span{
        font-weight: 700;
    }
    .column>a{
        width: calc(380 * var(--site-horizontal-ratio));
        margin:calc(calc(4727 - 4407 - 280) * var(--site-horizontal-ratio)) auto 0;
        font-size: calc(18 * var(--site-horizontal-ratio));
    }
    .column>a::after{
        width: calc(24 * var(--site-horizontal-ratio));
        height: calc(24.05003547668459 * var(--site-horizontal-ratio));
        transform: translateY(-48%);
    }
    /* column end */

    .categoryFaq+.categoryFuture{
        margin-top:calc(50 * var(--site-horizontal-ratio));
    }

}
/* ---------------------------desktop(include ipad)↑--------------------------------- */