/* @scope (.renew){ */

/* -------------------------------base(mobile)↓-------------------------------------- */
/* feature start */
.feature{
    background-color: #FFF6D8;
    margin-top: calc(calc(855 - 188 - 607) * var(--site-font-size-ratio));
    border-top-right-radius: calc(30 * var(--site-font-size-ratio));
    border-bottom-right-radius: calc(30 * var(--site-font-size-ratio));
    padding: calc(calc(880 - 855 + 42 - 7) * var(--site-font-size-ratio)) calc(15 * var(--site-font-size-ratio)) calc(30 * var(--site-font-size-ratio));
}
.feature>.title::before{
    content: "Feature";
}
.feature>strong{
    background-color: #ffffff;
    display: inline-block;
    width: fit-content;
    color: #0C1946;
    font-weight: 900;
    font-size: calc(22 * var(--site-font-size-ratio));
    line-height: calc(46 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    padding: 0 calc(5 * var(--site-font-size-ratio));
}
.feature>strong:nth-of-type(1){
    margin-top: calc(calc(1019 - 880 - 119) * var(--site-font-size-ratio));
}
.feature>strong:nth-of-type(2){
    margin-top: calc(calc(1065 - 1019 - 40) * var(--site-font-size-ratio));
}
.feature>img{
    width: 100%;
    margin-top: calc(calc(1248 - 1014 - 180) * var(--site-font-size-ratio));
}
.feature>p{
    margin-top: calc(calc(1116 - 1065 - 40) * var(--site-font-size-ratio));
    font-weight: 600;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    padding-left: calc(10 * var(--site-font-size-ratio));
}
.feature>.btn{
    margin-top: calc(calc(1461 - 1248 - 183.38) * var(--site-font-size-ratio));
}
/* feature end */

/* reason start */
.reason{
    margin-top: calc(calc(1609 - 855 - 726) * var(--site-font-size-ratio));
    padding: calc(calc(1644 - 1609 + 42 - 7) * var(--site-font-size-ratio)) calc(15 * var(--site-font-size-ratio)) calc(30 * var(--site-font-size-ratio));
}
.reason>.title::before{
    content: "The Reason";
}
.reason>p{
    margin-top: calc(calc(1747 - 1609 - 119) * var(--site-font-size-ratio));
    font-weight: 600;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
}
.reason>div{
    margin-top: calc(calc(1844 - 1747 - 80) * var(--site-font-size-ratio));
    color: #0C1946;
    font-weight: 900;
    font-size: calc(31.89 * var(--site-font-size-ratio));
    line-height: calc(44.7 * var(--site-font-size-ratio));
    letter-spacing: 0.02em;
}
.reason>div>span{
    display: block;
    text-align: center;
    border-bottom: 1px solid #0C1946;
    padding: calc(10 * var(--site-font-size-ratio)) 0;
}
.reason>div>span:nth-of-type(1)>span:nth-of-type(1),
.reason>div>span:nth-of-type(2)>span:nth-of-type(1),
.reason>div>span:nth-of-type(3)>span:nth-of-type(1)~span{
    color: #318DFE;
}
.reason>div>span:nth-of-type(2)>span:nth-of-type(2),
.reason>div>span:nth-of-type(3)>span:nth-of-type(1){
    font-size: calc(17.54 * var(--site-font-size-ratio));
    line-height: calc(23.9 * var(--site-font-size-ratio));
}
.reason>div>span:nth-of-type(3)>span:nth-of-type(2){
    font-size: calc(52.73 * var(--site-font-size-ratio));
    line-height: calc(59.1 * var(--site-font-size-ratio));
}
.reason>div>span:nth-of-type(3)>span:nth-of-type(3){
    font-size: calc(25.31 * var(--site-font-size-ratio));
    line-height: calc(59.1 * var(--site-font-size-ratio));
}
.reason>div>span:nth-of-type(3)>span:nth-of-type(4){
    font-size: calc(37.97 * var(--site-font-size-ratio));
    line-height: calc(59.1 * var(--site-font-size-ratio));
}
.reason>.btn:nth-of-type(1){
    margin-top: calc(calc(2082 - 1844 - 204.17) * var(--site-font-size-ratio)); 
}
.reason>.btn:nth-of-type(2){
    margin-top: calc(calc(2160 - 2090 - 42) * var(--site-font-size-ratio)); 
}
/* reason end */

/* insurance start */
.insurance{
    margin-top: calc(calc(2272 - 2082 - 130) * var(--site-font-size-ratio));
    padding: calc(calc(1644 - 1609 + 42 - 7) * var(--site-font-size-ratio)) 0 calc(calc(2272 + 688 - 2840 - 60) * var(--site-font-size-ratio));
    position: relative;
}
.insurance::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #FFF6D8;
    border-top-left-radius: calc(30 * var(--site-font-size-ratio));
    border-bottom-left-radius: calc(30 * var(--site-font-size-ratio));
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.insurance>*:not(.splide){
    padding-left: calc(15 * var(--site-font-size-ratio));
    padding-right: calc(15 * var(--site-font-size-ratio));
}
.insurance>.title{
    line-height: calc(40 * var(--site-font-size-ratio));
    padding-top: calc(22 * var(--site-font-size-ratio));
}
.insurance>.title::before{
    content: "Insurance";
}
.insurance>.title::after{
    content: none;
}
.insurance>p{
    margin-top: calc(calc(2553 - 2374 - 159) * var(--site-font-size-ratio));
    font-weight: 600;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
}
.insurance .splide__slide{
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(60 * var(--site-font-size-ratio));
}
.insurance .splide__slide>img{
    width: initial;
    max-width: 80%;
    max-height: 80%;
}
.insurance>.insurance_splide1{
    margin-top: calc(calc(2774 - 2553 - 200) * var(--site-font-size-ratio));
}
.insurance>.insurance_splide2{
    margin-top: calc(calc(2840 - 2774 - 60) * var(--site-font-size-ratio));
}
/* insurance end */

/* pickUp start */
.pickUp{
    margin: calc(calc(3020 - 2272 - 688) * var(--site-font-size-ratio)) auto 0;
    width: calc(345 * var(--site-font-size-ratio));
}
.pickUp>.title::before{
    content: "Pick up";
}
.pickUp>div{
    margin-top: calc(calc(3144 - 2985 - 119) * var(--site-font-size-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: calc(20 * var(--site-font-size-ratio));
}
.pickUp>div>a{
    display: block;
    width: 100%;
    text-decoration: none;
    color: #000000;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
}
.pickUp>div>a>img{
    width: 100%;
    border-radius: calc(15 * var(--site-font-size-ratio));
}
.pickUp>div>a>span{
    display: block;
    width: 100%;
    margin-top: calc(calc(243 - 223) * var(--site-font-size-ratio));
    font-weight: 900;
    color: #0C1946;
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
}
.pickUp>div>a>span::before{
    content: "";
    display: inline-block;
    width: calc(28 * var(--site-font-size-ratio));
    height: calc(28 * var(--site-font-size-ratio));
    background-image: url(../../images/toppage/renew/pickUp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(calc(6 * var(--site-font-size-ratio)));
}
.pickUp>div>a>p{
    margin-top: calc(calc(281 - 243 - 28) * var(--site-font-size-ratio));
    font-weight: 600;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    color: #000000;
}
/* pickUp end */

/* news start */
.news{
    margin: calc(calc(4364 - 3144 - 1135) * var(--site-font-size-ratio)) auto 0;
    width: calc(345 * var(--site-font-size-ratio));
}
.news>.title{
    margin: auto;
}
.news>.title::before{
    content: "News";
    text-align: center;
    display: block;
    width: 100%;
}
.news>.title::after{
    left: 50%;
    transform: translateX(-50%);
}
.news>div{
    margin-top: calc(calc(4523 - 4364 - 119) * var(--site-font-size-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: calc(15 * var(--site-font-size-ratio));
}
.news>div>a{
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    color: #000000;
    text-decoration: none;
    padding-bottom: calc(15 * var(--site-font-size-ratio));
    border-bottom: 1px solid #0c19465d;
}
.news>a{
    display: block;
    width: fit-content;
    margin-top: calc(calc(4952 - 4523 - 395) * var(--site-font-size-ratio));
    margin-right: calc(34 * var(--site-font-size-ratio));
    margin-left: auto;
    border-bottom: 2px solid #0c19465d;
    font-weight: 900;
    font-size: calc(18 * var(--site-font-size-ratio));
    line-height: calc(30 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    color: #0C1946;
    text-decoration: none;
    position: relative;
}
.news>a::after{
    content: "";
    display: inline-block;
    width: calc(28 * var(--site-font-size-ratio));
    height: calc(28 * var(--site-font-size-ratio));
    background-image: url(../../images/toppage/renew/pickUp.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    transform: translateX(calc(6 * var(--site-font-size-ratio)));
}
/* news end */
/* -------------------------------base(mobile)↑-------------------------------------- */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
    /* feature start */
    .feature{
        margin-top: calc(calc(835 - 140 - 635) * var(--site-font-size-ratio));
        margin-right: calc(calc(1440 - 1350) * var(--site-font-size-ratio));
        border-top-right-radius: calc(30 * var(--site-font-size-ratio));
        border-bottom-right-radius: calc(30 * var(--site-font-size-ratio));
        padding: calc(calc(861 - 835) * var(--site-font-size-ratio)) calc(calc(1350 - 684 - 544) * var(--site-font-size-ratio)) calc(calc(835 + 531 - 1016 - 290) * var(--site-font-size-ratio)) calc(219 * var(--site-font-size-ratio));
        display: grid;
        grid-template-areas:
            "feature-title feature-img"
            "feature-strong1 feature-img"
            "feature-strong2 feature-img"
            "feature-p feature-img"
            "feature-btn feature-img";
        grid-template-columns: 1fr calc(544 * var(--site-font-size-ratio));
        column-gap: calc(calc(684 - 219 - 424) * var(--site-font-size-ratio));
    }
    .feature>.title{
        grid-area: feature-title;
    }
    .feature>strong{
        display: block;
        font-size: calc(24 * var(--site-font-size-ratio));
        line-height: calc(56 * var(--site-font-size-ratio));
        padding: 0 calc(10 * var(--site-font-size-ratio));
    }
    .feature>strong:nth-of-type(1){
        margin-top: calc(calc(1015 - 861 - 119) * var(--site-font-size-ratio));
        grid-area: feature-strong1;
    }
    .feature>strong:nth-of-type(2){
        margin-top: calc(calc(1072 - 1015 - 47) * var(--site-font-size-ratio));
        grid-area: feature-strong2;
    }
    .feature>img{
        margin-top: calc(calc(1248 - 1014 - 180) * var(--site-font-size-ratio));
        grid-area: feature-img;
        align-self: flex-end;
    }
    .feature>p{
        margin-top: calc(calc(1129 - 1072 - 47) * var(--site-font-size-ratio));
        padding-left: 0;
        grid-area: feature-p;
    }
    .feature>.btn{
        margin: initial;
        margin-top: calc(calc(1246 - 1129 - 90) * var(--site-font-size-ratio));
        grid-area: feature-btn;
    }
    /* feature end */

    /* reason start */
    .reason{
        margin-top: calc(calc(1417 - 835 - 531) * var(--site-font-size-ratio));
        padding: 0;
        display: grid;
        grid-template-areas:
            "reason-title reason-div"
            "reason-p reason-div"
            "reason-btn1 reason-div"
            "reason-btn2 reason-div";
        justify-content: center;
        column-gap: calc(calc(693 - 424 - 219) * var(--site-font-size-ratio));
        grid-template-columns: calc(424 * var(--site-font-size-ratio)) calc(537 * var(--site-font-size-ratio));
    }
    .reason>.title{
        grid-area: reason-title;
    }
    .reason>p{
        margin-top: calc(calc(1520 - 1382 - 119) * var(--site-font-size-ratio));
        grid-area: reason-p;
    }
    .reason>div{
        margin-top: 0;
        font-size: calc(40 * var(--site-font-size-ratio));
        line-height: calc(56 * var(--site-font-size-ratio));
        letter-spacing: 0.05em;
        grid-area: reason-div;
        align-self: flex-end;
    }
    .reason>div>span{
        border-bottom: 1px solid #0C1946;
        padding: calc(10 * var(--site-font-size-ratio)) 0;
    }
    .reason>div>span:nth-of-type(2)>span:nth-of-type(2),
    .reason>div>span:nth-of-type(3)>span:nth-of-type(1){
        font-size: calc(20 * var(--site-font-size-ratio));
        line-height: calc(56 * var(--site-font-size-ratio));
    }
    .reason>div>span:nth-of-type(3)>span:nth-of-type(2){
        font-size: calc(66.13 * var(--site-font-size-ratio));
        line-height: calc(74.1 * var(--site-font-size-ratio));
    }
    .reason>div>span:nth-of-type(3)>span:nth-of-type(3){
        font-size: calc(31.74 * var(--site-font-size-ratio));
        line-height: calc(74.1 * var(--site-font-size-ratio));
    }
    .reason>div>span:nth-of-type(3)>span:nth-of-type(4){
        font-size: calc(47.61 * var(--site-font-size-ratio));
        line-height: calc(74.1 * var(--site-font-size-ratio));
    }
    .reason>.btn:nth-of-type(1){
        margin-left: 0;
        margin-top: calc(calc(1638 - 1520 - 97) * var(--site-font-size-ratio));
        grid-area: reason-btn1;
    }
    .reason>.btn:nth-of-type(2){
        margin-left: 0;
        margin-top: calc(calc(1708 - 1638 - 60) * var(--site-font-size-ratio));
        grid-area: reason-btn2;
    }
    /* reason end */

    /* insurance start */
    .insurance{
        margin-top: calc(calc(1836 - 1521 - 254.94) * var(--site-font-size-ratio));
        padding: calc(calc(1644 - 1609 + 42 - 7) * var(--site-font-size-ratio)) 0 calc(calc(1836 + 578 - 2254 - 100) * var(--site-font-size-ratio));
        position: relative;
        overflow: hidden;
    }
    .insurance::after{
        left: calc(100 * var(--site-font-size-ratio));
    }
    .insurance>*:not(.splide){
        padding-left: calc(221 * var(--site-font-size-ratio));
        padding-right: calc(0 * var(--site-font-size-ratio));
    }
    .insurance>.title{
        font-size: calc(28 * var(--site-font-size-ratio));
        padding-top: calc(22 * var(--site-font-size-ratio));
        letter-spacing: 0.05em;
    }
    .insurance>p{
        margin-top: calc(calc(2023 - 1925 - 80) * var(--site-font-size-ratio));
    }
    .insurance .splide__slide{
        height: calc(100 * var(--site-font-size-ratio));
    }
    .insurance>.insurance_splide1{
        margin-top: calc(calc(2144 - 2023 - 97) * var(--site-font-size-ratio));
    }
    .insurance>.insurance_splide2{
        margin-top: calc(calc(2254 - 2144 - 100) * var(--site-font-size-ratio));
    }
    /* insurance end */

    /* pickUp start */
    .pickUp{
        margin: calc(calc(2474 - 1836 - 578) * var(--site-font-size-ratio)) auto 0;
        width: calc(1009 * var(--site-font-size-ratio));
    }
    .pickUp>div{
        margin-top: calc(calc(2598 - 2439 - 119) * var(--site-font-size-ratio));
        flex-wrap: nowrap;
        gap: 0;
        justify-content: space-between;
    }
    .pickUp>div>a{
        width: calc(310 * var(--site-font-size-ratio));
    }
    .pickUp>div>a>span{
        margin-top: calc(calc(2818 - 2598 - 200) * var(--site-font-size-ratio));
    }
    .pickUp>div>a>span::before{
        transform: translateY(calc(6 * var(--site-font-size-ratio)));
    }
    .pickUp>div>a>p{
        margin-top: calc(calc(2856 - 2818 - 28) * var(--site-font-size-ratio));
    }
    /* pickUp end */

    /* news start */
    .news{
        margin: calc(calc(3023 - 2598 - 355) * var(--site-font-size-ratio)) auto 0;
        width: calc(1009 * var(--site-font-size-ratio));
    }
    .news>div{
        margin-top: calc(calc(3182 - 3023 - 119) * var(--site-font-size-ratio));
    }
    .news>div>a{
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: calc(34 * var(--site-font-size-ratio));
    }
    .news>div>a>time{
        width: calc(116 * var(--site-font-size-ratio));
    }
    .news>a{
        margin-top: calc(calc(3431 - 3182 - 217) * var(--site-font-size-ratio));
    }
    /* news end */
}

@media screen and (min-width: 1440px){
}
/* -----------------desktop(include ipad)↑-------------------- */

/* } */
/* end of scope */