a:hover {
    opacity: 0.5;
}

:root {
    --maxWidth: 1000px;
}

main {
    overflow: hidden;
}

.page_ttl {
    max-width: var(--maxWidth);
    margin: 0 auto;
}

.page_lead {
    text-align: center;
    font-size: clamp( 23px, 3vw, 33px);
    color: #171c61;
    font-weight: bold;
    margin: 30px 0 5px;
}

.page_txt {
    text-align: center;
    font-size: clamp( 16px, 2.3vw, 28px);
    font-weight: bold;
    margin-bottom: 30px;
}


.main_lead {
    max-width: var(--maxWidth);
    margin: 0 auto;
    text-align: center;
    font-size: clamp( 20px, 3vw, 35px);
    color: #fff;
    background: linear-gradient(
        to bottom,
        #00a0e9 0%,
        #1d2088 100%
    );
    font-weight: bold;
    padding: 5px 0;
}

.main_img {
    max-width: 700px;
    width: 70%;
    margin: 150px auto 200px;
    position: relative;
}

.main_img .balloon {
    position: absolute;
}

.main_img .balloon01 {
    width: 40%;
    top: -30%;
    left: -15%;
}

.main_img .balloon02 {
    width: 44%;
    bottom: -15%;
    left: -20%;
}

.main_img .balloon03 {
    width: 44%;
    top: -30%;
    right: -15%;
}

.main_img .balloon04 {
    width: 44%;
    bottom: -20%;
    right: -15%;
}

@media screen and (max-width: 812px) {
    .page_lead {
        margin-top: 20px;
    }

    .page_txt {
        margin-bottom: 20px;
    }

    .main_lead {
        padding: 10px 0;
    }

    .main_img {
        width: 70%;
        margin: 80px auto 100px;
    }

    .main_img .balloon01 {
        width: 45%;
        left: -18%;
        top: -40%;
    }

    .main_img .balloon02 {
        width: 49%;
        left: -18%;
        bottom: -30%;
    }

    .main_img .balloon03 {
        width: 49%;
        top: -38%;
    }

    .main_img .balloon04 {
        width: 49%;
        bottom: -29%;
        right: -18%;
    }
}

.sec_wrap {
    max-width: var(--maxWidth);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 120px 0;
}

.sec_ttl {
    margin: -10% 0 0 -35px;
}

.sec_ttl img {
    max-width: none;
    width: auto;
    height: 10vw;
    max-height: 100px;
}

.sec_inner {
    padding: 30px;
}

.sec_contents .box {
    background-color: #fff;
    padding: 20px;
    margin-top: 20px;
}

.sec_contents .box_ttl {
    display: inline-block;
    justify-self: flex-start;
    padding: 2px 15px 0;
    font-weight: bold;
    text-align: center;
    color: #fff;
    font-size: clamp( 19px, 3vw, 30px);
}

.sec_contents .box_lead {
    font-size: clamp( 18px, 2.5vw, 29px);
    font-weight: bold;
    margin: 10px 0;
}

.sec_contents .box_txt {
    font-size: clamp( 13px, 1.5vw, 16px);
}

.sec_contents .box01 {
    display: grid;
    grid-template-columns: 1fr 40%;
    gap: 0 2%;
}

.sec_contents .box01 .txt_wrap {
    grid-column: 1;
    grid-row: 1/6;
}

.sec_contents .box01 .box_ttl {
    margin-bottom: 10px;
}

.sec_contents .box01 .box_lead {
    font-weight: bold;
    font-size: clamp( 30px, 5vw, 50px);
    margin: 0;
    line-height: 1.2;
    align-self: center;
}

.sec_contents .box01 .box_txt {
    font-size: clamp( 16px, 1.7vw, 18px);
    margin: 0;
}

.sec_contents .box01 .image {
    grid-column: 1/3;
    grid-row: 1/3;
    width: 50%;
    margin: -19% 0 0 auto;
}

.sec_contents .box01 .price_wrap {
    grid-column: 2;
    grid-row: 3/4;
    border: 1px solid #000;
    padding: 5px;
    display: flex;
    align-items: center;
}

.sec_contents .box01 .price_wrap .txt {
    width: 50%;
    font-size: clamp( 14px, 1.6vw, 16px);
    font-weight: bold;
    text-align: center;
    padding-right: 10px;
}

.sec_contents .box01 .price_wrap .price {
    width: 50%;
    border-left: 1px solid #000;
    padding-left: 15px;
}

.sec_contents .box01 .price_wrap .price .large {
    display: block;
    margin-top: 3px;
    font-size: clamp( 17px, 2vw, 22px);
    font-weight: bold;
    color: #c30d23;
    line-height: 1;
}

.sec_contents .box01 .price_wrap .price .small {
    display: block;
    font-size: clamp( 10px, 1.1vw, 11px);
}

.sec_contents .box01 .price_wrap .price .small .kome {
    font-size: 10px;
}

.sec_contents .box01 .btn {
    grid-column: 1/3;
}

.sec_contents .detail_btn {
    margin-top: 15px;
}

.sec_contents .detail_btn a {
    color: #fff;
    text-align: center;
    padding: 8px 15px;
    font-size: clamp( 14px, 1.6vw, 17px);
}

.sec_contents .detail_btn a::after {
    content: '\0232A\0232A';
    letter-spacing: -0.7em;
    font-weight: 400;
}

.sec_contents .box01 .btn {
    margin-top: 20px;
}

.sec_contents .box01 .btn a {
    display: block;
    font-weight: bold;
    padding: 5px 0;
    background-color: #036eb8;
    color: #fff;
    text-align: center;
    font-size: clamp( 16px, 2vw, 30px);
    position: relative;
}

.sec_contents .box01 .btn a::after {
    content: '\0232A\0232A';
    letter-spacing: -0.7em;
    position: absolute;
    translate: 0 -50%;
    top: 50%;
    right: 10px;
    font-weight: 400;
}

.box_note {
    margin-top: 5px;
    color: #fff;
    font-size: clamp(10px, 1.2vw, 13px);
    text-align: justify;
}

@media screen and (max-width: 812px) {

    .sec_wrap {
        gap: 80px 0;
    }

    .sec_ttl {
        margin: -16% 0 0 -10px;
    }

    .sec_ttl img {
        height: 15vw;
    }

    .sec_inner {
        padding: 20px;
    }

    .sec_contents .box {
        padding: 15px;
    }

    .sec_contents .box_ttl {
        padding: 5px 15px 2px;
    }

    .sec_contents .box01 .txt_wrap {
        grid-column: 1/3;
    }

    .sec_contents .box01 .box_ttl {
        margin-bottom: 8px;
    }

    .sec_contents .box01 .box_txt {
        margin-top: 3px;
    }

    .sec_contents .box01 .price_wrap {
        grid-column: 1/3;
        grid-row: initial;
        margin-top: 15px;
    }

    .sec_contents .detail_btn {
        margin-top: 10px;
    }

    .sec_contents .detail_btn a {
        padding: 8px 15px;
    }

    .sec_contents .box01 .btn {
        margin-top: 10px;
    }

    .sec_contents .box01 .btn a {
        padding: 8px 0;
    }

    .sec_contents .box02 .box_ttl,
    .sec_contents .box03 .box_ttl {
        grid-column: 1/3;
    }

    .sec_contents .box02 .box_lead,
    .sec_contents .box03 .box_lead {
        grid-column: 1/3;
    }
}

.sec01 .sec_inner {
    background: linear-gradient(
        to bottom,
        #2ea7e0 0%,
        #601986 50%,
        #2ea7e0 100%
    );
}

.sec01 .box_ttl {
    background: linear-gradient(
        to right,
        #2ea7e0 0%,
        #601986 50%,
        #2ea7e0 100%
    );
}

.sec01 .box01 .box_lead {
    color: #e61673;
}

.sec01 .detail_btn a {
    background-color: #e61673;
}

.sec01 .box02 {
    display: grid;
    grid-template-columns: 1fr 17%;
    gap: 0 2%;
}

.sec01 .box02 .image {
    grid-column: 2;
    grid-row: 1/5;
    align-self: center;
}

.sec01 .box03 {
    display: grid;
    grid-template-columns: 1fr 35%;
    gap: 0 2%;
}

.sec01 .box03 .image {
    grid-column: 2;
    grid-row: 1/5;
    align-self: center;
}

.sec01 .bnr {
    margin-top: 20px;
}

@media screen and (max-width: 812px) {

    .sec01 .box01 .image {
        width: 59%;
        margin: -23% -20px 0 auto;
    }

    .sec01 .box02  {
        grid-template-columns: 1fr 40%;
    }

    .sec01 .box02 .image {
        grid-row: 3;
    }

    .sec01 .box03 .box_txt {
        grid-column: 1/3;
    }

    .sec01 .box03 .image {
        grid-column: 1/3;
        grid-row: 4;
        width: 80%;
        margin: 15px auto 0;
    }

    .sec01 .bnr {
        margin-top: 15px;
    }
}


.sec02 .sec_inner {
    background-color: #00a0e9;
}

.sec02 .sec_ttl {
    margin-left: -40px;
}

.sec02 .box_ttl {
    background-color: #00a0e9;
}

.sec02 .box01 {
    grid-template-columns: 1fr 49%;
}

.sec02 .box01 .box_lead {
    color: #00a0e9;
}

.sec02 .box01 .price_wrap .price {
    width: 60%;
    flex-shrink: 0;
}

.sec02 .box01 .image {
    width: 34%;
    margin-top: -15%;
}

.sec02 .detail_btn a {
    background-color: #00a0e9;
}

.sec02 .box02 {
    display: grid;
    grid-template-columns: 1fr 18%;
}

.sec02 .box02 .image {
    grid-column: 2;
    grid-row: 1/5;
}

@media screen and (max-width: 812px) {
    
    .sec02 .sec_ttl {
        margin-left: -10px;
    }

    .sec02 .box01 .image {
        width: 44%;
        margin: -19% -25px 0 auto;
    }

    .sec02 .box01 .price_wrap .price {
        width: 57%;
    }

    .sec02 .box02 {
        grid-template-columns: 1fr 33%;
    }

    .sec02 .box02 .box_lead {
        grid-column: 1;
    }

    .sec02 .box02 .image {
        grid-row: 2/4;
        align-self: flex-end;
    }
}



.sec03 .sec_inner {
    background-color: #f39800;
}

.sec03 .sec_ttl {
    margin-left: -40px;
}

.sec03 .box_ttl {
    background-color: #f39800;
}

.sec03 .box01 {
    grid-template-columns: 1fr 49%;
}

.sec03 .box01 .box_lead {
    color: #ea5514;
}

.sec03 .box01 .image {
    width: 45%;
    margin: -16% -5% 0 auto;
}

.sec03 .box01 .price_wrap .price {
    width: 60%;
    flex-shrink: 0;
}

.sec03 .detail_btn a {
    background-color: #ea5514;
}

.sec03 .box02 {
    display: grid;
    grid-template-columns: 1fr 22%;
    gap: 0 2%;
}

.sec03 .box02 .image {
    grid-column: 2;
    grid-row: 1/5;
    align-self: center;
}

.sec03 .box03 {
    display: grid;
    grid-template-columns: 1fr 35%;
    gap: 0 2%;
}

.sec03 .box03 .image {
    grid-column: 2;
    grid-row: 1/5;
    align-self: center;
}


@media screen and (max-width: 812px) {

    .sec03 .sec_ttl {
        margin-left: -10px;
    }

    .sec03 .box01 .image {
        width: 65%;
        margin: -15% -15% 0 auto;
    }

    .sec03 .box01 .price_wrap .price {
        width: 57%;
    }

    .sec03 .box02 {
        grid-template-columns: 1fr 40%;
    }

    .sec03 .box02 .image {
        grid-row: 3;
    }

    .sec03 .box03 .box_txt {
        grid-column: 1/3;
    }

    .sec03 .box03 .image {
        grid-column: 1/3;
        grid-row: 4;
        width: 80%;
        margin: 15px auto 0;
    }
}



.sec04 .sec_inner {
    background-color: #ec6d81;
}

.sec04 .sec_ttl {
    margin-left: -40px;
}

.sec04 .box_ttl {
    background-color: #ec6d81;
}

.sec04 .box01 {
    grid-template-columns: 1fr 49%;
}

.sec04 .box01 .box_lead {
    color: #e61673;
}
.sec04 .box01 .image {
    width: 45%;
    margin: -16% -5% 0 auto;
}

.sec04 .box01 .price_wrap .price {
    width: 60%;
    flex-shrink: 0;
}

.sec04 .detail_btn a {
    background-color: #e61673;
}

.sec04 .box02 {
    display: grid;
    grid-template-columns: 1fr 12%;
    gap: 0 2%;
}

.sec04 .box02 .image {
    grid-column: 2;
    grid-row: 1/5;
    align-self: flex-end;
    margin: 0 -20px -21px 0;
}

.sec04 .box03 {
    display: grid;
    grid-template-columns: 1fr 30%;
    gap: 0 2%;
}

.sec04 .box03 .image {
    grid-column: 2;
    grid-row: 1/5;
    align-self: center;
}


@media screen and (max-width: 812px) {

    .sec04 .sec_ttl {
        margin-left: -10px;
    }

    .sec04 .box01 .image {
        width: 55%;
        margin: 0 -8% 0 auto;
    }

    .sec04 .box01 .price_wrap .price {
        width: 57%;
    }

    .sec04 .box02 {
        grid-template-columns: 1fr 33%;
    }

    .sec04 .box02 .image {
        grid-row: 3;
        margin: 0 -15px -16px 0;
    }

    .sec04 .box03 {
        grid-template-columns: 1fr 45%;
        gap: 0 3%;
    }

    .sec04 .box03 .image {
        grid-column: 2;
        grid-row: 3;
        align-self: flex-start;
    }
}



.bnr_wrap {
    margin: 80px 0;
}

.bnr_wrap .lead {
    color: #171c61;
    text-align: center;
    font-weight: 600;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.8;
    margin-bottom: 30px;
}

.bnr_wrap .bnr {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

.bnr_wrap .bnr .note {
    text-align: right;
    margin-top: 3px;
    font-size: clamp(10px, 1.2vw, 13px);
}

.epson_logo {
    max-width: 400px;
    width: 80%;
    margin: 30px auto 0;
}



@media screen and (max-width: 812px) {

    .bnr_wrap {
        margin: 50px 0;
    }

    .bnr_wrap .lead {
        margin-bottom: 20px;
        line-height: 1.6;
    }

    .epson_logo {
        margin-top: 40px;
    }
}