html{
    max-width:100vw;
    overflow-x: hidden;
    font-size:18px;
}
body{
    font-weight: 400;
    font-family: "Zen Kaku Gothic New", sans-serif;
    max-width:100vw;
    overflow-x: hidden;
}

.page_header{
    width:100%;
    height:36.71vw;
    overflow: hidden;
    display: flex;
    position: relative;
}
.gradation_bg{
    width:43.5%;
    height:auto;
    background: linear-gradient(-45deg,#58B52F,#01A0E9);
    color:white;
    position: relative;
}
.gradation_bg div{
    position: absolute;
    bottom:151px;
    left:40px;
}
.gradation_bg p{
    font-size: 0.889rem;
}
.gradation_bg h1{
    font-size: 2rem;
    font-weight: 700;
    margin-top:0.313rem;
}
.page_header img{
    width:56.5%;
    height:100%;
    object-fit: cover;
    object-position:0 -50px;
    transform: scale(-1,1);
}
.page_header span{
    position: absolute;
    bottom:-40px;
    font-size: 11rem;
    font-weight: 900;
    color:white;
    opacity: .5;
}

.bg_pro{
    background-color: #EBFDFF;
    padding:2.5rem 0 0 0;
}


.pro_in{
    width:1200px;
    margin:0 auto;
}

/*パンくず*/
.pan ul{
    display: flex;
    align-items: center;
    font-weight: 500;
    color:#01A0E9;
}
.pan li:first-of-type::after{
    content:">";
    margin:0 .5rem;
}
.pan li:last-of-type a{
    text-decoration: underline;
}


/*エピソード*/
.pro_ctt{
    margin-top:3.75rem;
}
.epi{
    color:#01A0E9;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}
.epi:first-of-type{
    align-items: end;
}
.epi:nth-of-type(n+2){
    margin-top:3.75rem;
}
.epi:nth-of-type(even){
    flex-flow: row-reverse;
}
.epi_txt{
    width:700px;
}
.epi_txt h2{
    font-size: 1.25rem;
    border-bottom: solid 0.1rem #01A0E9;
    padding-bottom:1.25rem;
    margin-bottom:1.25rem;
}
.epi_txt p{
    font-weight: 500;
    line-height:1.9rem;
}


.epi_img img{
    height:auto;
}

.epi_1 .epi_img img{
    width:296px;
    margin-top:5rem;
}
.epi_2 .epi_img,
.epi_3 .epi_img,
.epi_6 .epi_img{
    width:450px;
    display: flex;
    flex-flow: column;
    align-items: center;
}
.epi_2 .epi_img img:first-of-type,
.epi_3 .epi_img img:first-of-type,
.epi_6 .epi_img img{
    width:100%;
}
.epi_2 .epi_img img:last-of-type{
    width:340px;
    margin-top:2.75rem;
}
.epi_3 .epi_img img:last-of-type{
    width:269px;
}
.epi_4 .epi_img img,
.epi_5 .epi_img img,
.epi_7 .epi_img img{
    width:450px;
}
.epi_6 .epi_img:last-of-type img{
    margin-top:1rem;
}




.bubble{
    margin-top:3.75rem;
    width:100%;
    height:250px;
    object-fit: cover;
    object-position: 50% 33%;
}

/*footer*/
.copyright{
    width:100vw;
    background-color: #01A0E9;
    font-size: 0.875rem;
    color:white;
    text-align: center;
    padding:1.25rem;
}











/*------------------------------------------------------------------------------------------------

1400px以下の時

--------------------------------------------------------------------------------------------------*/


@media (max-width:1400px) {
    html{
        font-size: 16px;
    }

    .pro_in{
        width: clamp(900px, 85.71vw, 1200px);
    }
    .epi_txt {
        width: clamp(550px, 50vw, 700px);
    }
    .epi_1 .epi_img img{
        width: clamp(180px, 21.14vw, 296px);
    }
    .epi_2 .epi_img, 
    .epi_3 .epi_img, 
    .epi_6 .epi_img{
        width:clamp(300px,32.14vw,450px);
    }
    .epi_4 .epi_img img,
    .epi_5 .epi_img img,
    .epi_7 .epi_img img{
        width:clamp(300px,32.14vw,450px);
    }
    .epi_2 .epi_img img:last-of-type{
        width: clamp(250px, 24.29vw, 340px);
    }
    .epi_3 .epi_img img:last-of-type {
        width: clamp(200px, 19.21vw, 269px);
    }
}




/*------------------------------------------------------------------------------------------------

1025px以下の時

--------------------------------------------------------------------------------------------------*/


@media(max-width:1025px){
    html{
        font-size: 12px;
    }

    .pro_in{
        width: clamp(650px, 85.71vw, 1200px);
    }
    .epi_txt {
        width: 43vw;
    }

}



/*------------------------------------------------------------------------------------------------

768px以下の時(タブレット)

--------------------------------------------------------------------------------------------------*/
@media(max-width:768px){
    html{
        font-size: 10px;
    }

    .gradation_bg div{
        bottom: 30%;
        left: 6%;
    }
    .page_header span{
        bottom: -7%;
    }
    .pro_in {
        width: 80%;
    }
    .epi{
        flex-flow: column;
        align-items: center;
    }
    .epi:first-of-type{
        align-items: center;
    }
    .epi:nth-of-type(even){
        flex-flow: column;
    }
    .epi_txt {
        width: 90%;
        margin-top:2.75rem;
    }
    .epi_2 .epi_img,
    .epi_3 .epi_img,
    .epi_6 .epi_img{
        width: 90%;
        flex-flow: row;
        justify-content: space-evenly;
        margin-top:2.75rem;
    }
    .epi_2 .epi_img img:first-of-type,
    .epi_3 .epi_img img:first-of-type,
    .epi_6 .epi_img img{
        width: clamp(150px, 26.04vw, 200px);
    }
    .epi_3 .epi_img img:last-of-type {
        width: clamp(130px, 19.21vw, 269px);
    }
    .epi_4 .epi_img img, 
    .epi_5 .epi_img img, 
    .epi_7 .epi_img img{
        margin-top:2.75rem;
    }
}







/*------------------------------------------------------------------------------------------------

425px以下の時(スマートフォン)

--------------------------------------------------------------------------------------------------*/



@media(max-width:425px){
    html{
        font-size: 16px;
    }


    .page_header{
        flex-flow: column-reverse;
        height: 100%;
    }
    .gradation_bg{
        width: 100%;
        height: 28.24vw;
    }
    .page_header img{
        width: 100vw;
        height: 94.12vw;
        object-position: 0 -22px;
    }
    .page_header span{
        font-size: 5.7rem;
        bottom: 17%;
        right: -5%;
    }
    .gradation_bg div{
        bottom: 25%;
    }

    .pro_in{
        width:90%;
    }
    .pro_ctt{
        margin-top:0;
    }
    .epi_txt{
        width:100%;
    }
    .epi_1 .epi_img img{
        width: 200px;
        margin-top: 2rem;
    }
    .epi_3 .epi_img{
        width:100%;
        align-items: center;
    }
    .epi_2 .epi_img img:first-of-type {
        width: 80%;
    }
    .epi_2 .epi_img img:last-of-type{
        width:180px;
        margin-top:1.75rem;
    }

    .epi_2 .epi_img,
    .epi_6 .epi_img{
        flex-flow: column;
    }
    .epi_6 .epi_img img {
        width:90%;
    }


    .bubble{
        margin-top:0;
    }
}





/*------------------------------------------------------------------------------------------------

375px以下の時(スマートフォン)

--------------------------------------------------------------------------------------------------*/


@media(max-width:375px){
    .epi_1 .epi_img img{
        width:150px;
    }
    .epi_3 .epi_img img:first-of-type{
        width: clamp(150px, 26.04vw, 200px);
    }
    .epi_3 .epi_img img:last-of-type{
        width: clamp(100px, 19.21vw, 269px);
    }

}




/*------------------------------------------------------------------------------------------------

320px以下の時(スマートフォン)

--------------------------------------------------------------------------------------------------*/



@media(max-width:320px){
    .epi:nth-of-type(n+2) {
        margin-top: 1.75rem;
    }
}