@import url("lp_common.css");

/* section01 ---------------*/
#section01 .caption {
    background: url("../images/common/caption_title_bg.jpg") no-repeat center center / cover;
}

#section01 .box-overview {
    margin-bottom: 6.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#section01 .box-overview div {
    width: 40%;
    margin-left: auto;
    margin-right: 3.5%;
}

#section01 .box-overview div p:nth-of-type(1) {
    font-size: clamp(28px, 13.301px + 1.911vw, 50px);
    font-weight: 600;
    letter-spacing: 0.075em;
    line-height: 0.9;
    margin-bottom: 6.5%;
    display: flex;
    align-items: flex-end;
}

#section01 .box-overview div p:nth-of-type(1) img {
    width: clamp(90px, 13.333px + 9.983vw, 205px);
    margin-right: 1.5%;
}

#section01 .box-overview div p:nth-of-type(2) {
    font-size: clamp(12px, 4.000px + 1.042vw, 24px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.035em;
    display: flex;
    align-items: center;
}

#section01 .box-overview div p:nth-of-type(2) img {
    width: 25%;
    margin-left: 2.5%;
}

#section01 .box-overview iframe {
    width: clamp(384px, 0.000px + 50vw, 960px);
    height: clamp(216px, 0.000px + 28.125vw, 540px);
}

#section01 .btn-group {
    margin-bottom: 7.5%;
}

#section01 .box-detail {
    width: 100%;
    height: clamp(365px, 78.333px + 37.326vw, 795px);
    background: url("../images/common/box_detail_bg_pc.jpg") no-repeat center center / cover;
    margin-bottom: 6.5%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#section01 .box-detail .container {
    display: flex;
    align-items: center;
    gap: 6.5%;
}

#section01 .box-detail img {
    width: clamp(320px, 93.333px + 29.514vw, 660px);
}

#section01 .box-detail .container div {
    width: clamp(365px, 118.333px + 32.118vw, 735px);
}

#section01 .box-detail .container div p:nth-of-type(1) {
    font-size: clamp(27px, 9.000px + 2.344vw, 54px);
    font-weight: 600;
    letter-spacing: 0.075em;
    margin-bottom: 6.5%;
}

#section01 .box-detail .container div p:nth-of-type(2) {
    font-size: clamp(11px, 3.667px + 0.955vw, 22px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.035em;
}

#section01>a {
    margin: auto;
}

@media screen and (max-width: 768px) {
    #section01 .box-overview {
        flex-direction: column;
        margin-bottom: 12.5%;
    }

    #section01 .box-overview div {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 6.5%;
    }

    #section01 .box-overview div p:nth-of-type(1) {
        font-size: clamp(24px, -1.714px + 6.857vw, 36px);
        margin-bottom: 3.5%;
    }

    #section01 .box-overview div p:nth-of-type(2) {
        font-size: clamp(14.5px, -5.857px + 5.429vw, 24px);
        flex-direction: column;
    }

    #section01 .box-overview div p:nth-of-type(2) img {
        width: 35%;
        margin-left: 0;
        margin-top: 6.5%;
        margin-bottom: 5%;
    }

    #section01 .box-overview div p:nth-of-type(1) img {
        width: 29.5%;
    }

    #section01 .box-overview iframe {
        width: clamp(375px, 0.000px + 100vw, 550px);
        height: clamp(211px, 1.000px + 56vw, 309px);
    }

    #section01 .btn-group {
        margin-bottom: 12.5%;
    }

    #section01 .box-detail {
        height: auto;
        padding: 12.5% 0;
        margin-bottom: 12.5%;
    }

    #section01 .box-detail {
        background: url("../images/common/box_detail_bg_sp.jpg") no-repeat center center / cover;
    }

    #section01 .box-detail .container {
        flex-direction: column;
    }

    #section01 .box-detail img {
        width: 75%;
        order: 2;
    }

    #section01 .box-detail .container div {
        width: 100%;
        margin-bottom: 3.5%;
        order: 1;
    }

    #section01 .box-detail .container div p:nth-of-type(1) {
        font-size: clamp(24px, -1.714px + 6.857vw, 36px);
        margin-bottom: 3.5%;
    }

    #section01 .box-detail .container div p:nth-of-type(2) {
        font-size: clamp(14.5px, -5.857px + 5.429vw, 24px);
    }

}

/* section02 ---------------*/
#section02 .caption {
    background: url("../images/common/caption_red_bg.jpg") no-repeat center center / cover;
}

#section02 {
    margin-bottom: 0;
    padding-bottom: 7.5%;
}

#section02 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section02 .card-group:nth-of-type(1) {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -12.5%;
    margin-bottom: 8.5%;
}

#section02 .card-group:nth-of-type(1) .card {
    background-color: #ffffff;
    border-radius: 2.5px;
}

#section02 .card-group:nth-of-type(1) .card:nth-of-type(1) {
    width: 47.5%;
    padding: 7.5% 4.5% 3.5%;
    border-radius: 5px;
}

#section02 .card-group:nth-of-type(1) .card:nth-of-type(2) {
    width: 50%;
    padding: 6.5% 4.5% 0%;
    border-radius: 5px;
}

#section02 .card-group:nth-of-type(1) .card p {
    font-size: clamp(11px, 3.667px + 0.955vw, 22px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.035em;
    margin-bottom: 3.5%;
}

#section02 .card-group:nth-of-type(1) .card:nth-of-type(1) p.overlay {
    font-size: clamp(13px, 4.333px + 1.128vw, 26px);
    font-weight: 500;
    letter-spacing: 0.35em;
    text-align: center;
    width: 31.5%;
    padding: 1.75% 0;
    background-color: #E0E0E0;
    border-radius: 0 0 0 2.5px;
    text-shadow: 0px 0px 5px #969696de;
    top: 0;
    right: 0px;
}

#section02 .card-group:nth-of-type(1) .card:nth-of-type(2) p.bg-red.text-white.overlay {
    font-size: clamp(13px, 4.333px + 1.128vw, 26px);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    width: 35%;
    padding: 1.75% 0;
    border-radius: 0 0 0 2.5px;
    text-shadow: 0px 0px 5px #969696de;
    top: 0;
    right: 0px;
}

#section02 .card-group:nth-of-type(1) .card:nth-of-type(2) p.bg-red.text-white.overlay {
    font-size: clamp(13px, 4.333px + 1.128vw, 26px);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    width: 42.5%;
    padding: 1.75% 0;
    border-radius: 0 0 0 2.5px;
    text-shadow: 0px 0px 5px #969696de;
    top: 0;
    right: 0px;
}

#section02 .card-group:nth-of-type(1) .card:nth-of-type(2) p.text-red.receive {
    font-size: clamp(14px, 4.667px + 1.215vw, 28px);
    font-weight: 500;
    background-color: #D70019;
    letter-spacing: 0.1em;
    width: 90%;
    padding: 4% 4% 4% 0%;
    margin-top: 1.5%;
    margin-bottom: -10%;
    margin-left: auto;
    margin-right: -12.5%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
    display: flex;
    justify-content: flex-end;
    z-index: 1;
}

#section02 .card-group:nth-of-type(1) .card:nth-of-type(2) p.text-red.receive::after {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: #ffffff;
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(calc(0% + 2px) 0, 100% 0, 100% 100%, 15% 100%);
    top: 2px;
    left: 2px;
    z-index: -1;
}

#section02 .card-group:nth-of-type(2) {
    width: 93.5%;
    margin: 0 auto 6.5%;
}

#section02 .card-group:nth-of-type(2)>p {
    font-size: clamp(18px, 6.000px + 1.563vw, 36px);
    font-weight: 600;
    letter-spacing: 0.065em;
    padding-bottom: 1.5%;
    margin-bottom: 3.5%;
    text-align: center;
}

#section02 .card-group:nth-of-type(2)>p::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10%;
    display: inline-block;
    width: clamp(35px, 8.333px + 3.472vw, 75px);
    height: clamp(2.5px, 0.833px + 0.217vw, 5px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 10px;
    background-color: #D70019;
}

#section02 .card-group:nth-of-type(2)>div {
    display: flex;
    justify-content: space-between;
    width: 85%;
    margin: auto;
}

#section02 .card-group:nth-of-type(2)>div .card {
    width: 49%;
    padding: 6.5% 0 3.5%;
    border-radius: 5px;
    background-color: #ffffff;
}

#section02 .card-group:nth-of-type(2)>div .card p.bg-red.text-white.overlay {
    font-size: clamp(13px, 4.333px + 1.128vw, 26px);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    width: 35%;
    padding: 1.75% 0;
    border-radius: 0 0 0 2.5px;
    top: 0;
    right: 0px;
}

#section02 .table-group {
    margin-bottom: 7.5%;
}

#section02 .table-group>p:nth-of-type(1) {
    font-size: clamp(18px, 6.000px + 1.563vw, 36px);
    font-weight: 600;
    letter-spacing: 0.065em;
    padding-bottom: 1.5%;
    margin-bottom: 3.5%;
    text-align: center;
}

#section02 .table-group>p:nth-of-type(1)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10%;
    display: inline-block;
    width: clamp(35px, 8.333px + 3.472vw, 75px);
    height: clamp(2.5px, 0.833px + 0.217vw, 5px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 10px;
    background-color: #D70019;
}

#section02 .table-group>p:nth-of-type(2) {
    font-size: clamp(11px, 3.667px + 0.955vw, 22px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.035em;
    text-align: center;
    margin-bottom: 3.5%;
}

#section02 .table-group img {
    width: 92.5%;
    margin: auto;
}

@media screen and (max-width: 768px) {
    #section02 {
        padding-bottom: 12.5%;
    }

    #section02 .card-group:nth-of-type(1) {
        width: 100%;
        margin-top: -20%;
        margin-bottom: 20%;
        flex-direction: column;
    }

    #section02 .card-group:nth-of-type(1) .card:nth-of-type(1) {
        width: 100%;
        padding: 15% 4.5% 3.5%;
        margin-bottom: 3.5%;
    }

    #section02 .card-group:nth-of-type(1) .card:nth-of-type(1) p {
        font-size: clamp(14px, 1.143px + 3.429vw, 20px);
        margin-bottom: 0;
    }

    #section02 .card-group:nth-of-type(1) .card:nth-of-type(2) {
        width: 100%;
        padding: 15% 4.5% 0%;
    }

    #section02 .card-group:nth-of-type(1) .card:nth-of-type(2) p {
        font-size: clamp(14px, 1.143px + 3.429vw, 20px);
    }

    #section02 .card-group:nth-of-type(1) .card:nth-of-type(1) p.overlay {
        font-size: clamp(20px, 2.857px + 4.571vw, 28px);
        width: 32.5%;
        padding: 1% 0;
        border-radius: 0 0 0 6.5px;
    }

    #section02 .card-group:nth-of-type(1) .card:nth-of-type(2) p.bg-red.text-white.overlay {
        font-size: clamp(20px, 2.857px + 4.571vw, 28px);
        letter-spacing: 0.05em;
        width: 56.75%;
        padding: 0.5% 0;
        border-radius: 0 0 0 6.5px;
    }

    #section02 .card-group:nth-of-type(1) .card:nth-of-type(2) p.text-red.receive {
        font-size: clamp(18.5px, 2.429px + 4.286vw, 26px);
        letter-spacing: 0.035em;
        width: 100%;
        padding: 4% 4% 4% 0%;
        margin-top: 3.5%;
        margin-right: -10%;
    }

    #section02 .card-group:nth-of-type(1) .card:nth-of-type(2) p.text-red.receive::after {
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        inset: 0;
        clip-path: polygon(calc(0% + 3px) 0, 100% 0, 100% 100%, 15% 100%);
        top: 3px;
        left: 3px;
    }

    #section02 .card-group:nth-of-type(2) {
        width: 100%;
        margin: 0 auto 6.5%;
    }

    #section02 .card-group:nth-of-type(2)>p {
        font-size: clamp(24px, 6.857px + 4.571vw, 32px);
        padding-bottom: 2.5%;
        margin-bottom: 10%;
    }

    #section02 .card-group:nth-of-type(2)>p::after {
        bottom: -10%;
        width: 17.5%;
        height: 3.5px;
    }

    #section02 .card-group:nth-of-type(2)>div {
        width: 100%;
        margin: auto;
        flex-direction: column;
    }

    #section02 .card-group:nth-of-type(2)>div .card {
        width: 100%;
        padding: 15% 0 5.5%;
        margin-bottom: 6.5%;
    }

    #section02 .card-group:nth-of-type(2)>div .card p.bg-red.text-white.overlay {
        font-size: clamp(20px, 2.857px + 4.571vw, 28px);
        letter-spacing: 0.05em;
        width: 45%;
        padding: 1.75% 0;
    }

    #section02 .table-group {
        margin-bottom: 12.5%;
    }

    #section02 .table-group>p:nth-of-type(1) {
        font-size: clamp(24px, 6.857px + 4.571vw, 32px);
        padding-bottom: 2.5%;
        margin-bottom: 5%;
    }

    #section02 .table-group>p:nth-of-type(1)::after {
        bottom: -10%;
        width: 17.5%;
        height: 3.5px;
    }

    #section02 .table-group>p:nth-of-type(2) {
        font-size: clamp(14px, 1.143px + 3.429vw, 20px);
        margin-bottom: 8.5%;
        text-align: left;
    }

    #section02 .table-group img {
        width: 100%;
        margin: auto;
    }

}

/* section03 ---------------*/
#section03 .caption {
    background: url("../images/common/caption_black_bg.jpg") no-repeat center center / cover;
}

#section03 {
    margin-bottom: 0;
    padding-bottom: 12.5%;
}

#section03 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section03 .card-group {
    width: 95%;
    margin: -11.5% auto 7.5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-content: space-between;
}

#section03 .card-group .card {
    width: 49%;
    padding: 3.5% 2.5%;
    margin-bottom: 2%;
    background-color: #ffffff;
    border-radius: 5px;
}

#section03 .card-group .card.wide {
    width: 100%;
    padding: 3.5% 4.5%;
}

#section03 .card-group .card img {
    width: 87.5%;
    margin: 0 auto 3.5%;
}

#section03 .card-group .card>p:nth-of-type(1) {
    font-size: clamp(17px, 5.667px + 1.476vw, 34px);
    font-weight: 600;
    letter-spacing: 0.065em;
    padding-bottom: 2.5%;
    margin-bottom: 3.5%;
    border-bottom: 1.5px solid #202123;
}

#section03 .card-group .card.wide>p:nth-of-type(1) {
    padding-bottom: 1.5%;
    margin-bottom: 2.5%;
}

#section03 .card-group .card p.receive {
    font-size: clamp(12px, 4.000px + 1.042vw, 24px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.035em;
    margin-bottom: 1.35%;
}

#section03 .card-group .card .text-group {
    display: flex;
    justify-content: space-between;
}

#section03 .card-group .card .text-group div:nth-of-type(1) {
    width: 55%;
}

#section03 .card-group .card .text-group div:nth-of-type(2) {
    width: 40%;
}

@media screen and (max-width: 768px) {
    #section03 .card-group {
        width: 100%;
        margin: -20% auto 11.5%;
        flex-direction: column;
    }

    #section03 .card-group .card {
        width: 100%;
        padding: 4.5% 5%;
        margin-bottom: 3.5%;
    }

    #section03 .card-group .card img {
        width: 100%;
        margin: 0 auto 3.5%;
    }

    #section03 .card-group .card>p:nth-of-type(1) {
        font-size: clamp(22px, 4.857px + 4.571vw, 30px);
        border-bottom: 2.5px solid #202123;
    }

    #section03 .card-group .card p.receive {
        font-size: clamp(14px, 1.143px + 3.429vw, 20px);
    }

    #section03 .card-group .card .text-group {
        flex-direction: column;
    }

    #section03 .card-group .card .text-group div:nth-of-type(1) {
        width: 100%;
        margin-bottom: 4.5%;
    }

    #section03 .card-group .card .text-group div:nth-of-type(2) {
        width: 100%;
    }
}

/* section04 ---------------*/
#section04 .caption {
    background: url("../images/common/caption_red_bg.jpg") no-repeat center center / cover;
}

#section04 {
    margin-bottom: 0;
    padding-bottom: 7.5%;
}

#section04 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section04 .table {
    margin: -12.5% auto 7.5%;
}

@media screen and (max-width: 768px) {
    #section04 {
        padding-bottom: 12.5%;
    }

    #section04 .table {
        margin: -20% auto 12.5%;
    }
}

/* section05 ---------------*/
#section05 .caption {
    background: url("../images/common/caption_black_bg.jpg") no-repeat center center / cover;
}

#section05 {
    margin-bottom: 0;
    padding-bottom: 3.5%;
}

#section05 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section05 .table {
    margin: -12.5% auto 7.5%;
}

@media screen and (max-width: 768px) {
    #section05 {
        padding-bottom: 7.5%;
    }

    #section05 .table {
        margin: -20% auto 7.5%;
    }

}