@charset "UTF-8";
.wrap{
    width: 100%;
    margin: 0 auto;
    clear: both;
    overflow: hidden;
}
.ti{
    font-size:5vw;
    font-weight: bold;
    color: #57c3ea;
    margin: 0 0 2vh 0;
}
.photo{
    width: 95%;
    margin: 0 0 5vh 0;
}
.box{
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.img_list{
    width: 55%;
    margin: 0 auto 5vh auto;
}
.img_list li{
    margin: 0 auto 2vh auto;
}
.img_list li:last-child{
        margin: 0;
    }
@media screen and (min-width: 768px) {
    .wrap{
        width: 100%;
    }
    .ti{
        font-size:26px;
        margin: 0 0 15px 0;
    }
    .photo{
        width: 600px;
        margin: 0;
    }
    .box{
        width: 350px;
        margin: 0;
    }
    .img_list{
        width: 1000px;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto 50px auto;
    }
    .img_list li{
        margin: 0 20px 0 0;
    }
}

/* ==================================================================================================== */
/* header */
/* ==================================================================================================== */
header{
    margin: 0 auto 5vh auto;
}
header .main_img{
    position: relative;
    margin: 0 auto;
    height: 50vh;
}
header .main_img .logo{
    text-align: center;
    padding: 15vh 27vw 3vh 27vw;
    z-index: 3;
    position: relative;
}
header .main_img .main_bg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    clear: both;
    overflow: hidden;
    width: 100%;
    height: 50vh;
}

header .main_img .main_bg .main_bg01{
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    height: 50vh;
    background-size: cover;
    background-image: url("../images/i_main01.jpg");
}
header .main_img .main_bg .main_bg02{
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    height: 50vh;
    background-size: cover;
    background-image: url("../images/i_main02.jpg");
}
header .main_img .main_bg .main_bg03{
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    height: 50vh;
    background-size: cover;
    background-image: url("../images/i_main03.jpg");
}
@media screen and (min-width: 768px) {
    header{
        margin: 0 auto 30px auto;
    }
    header .main_img{
        height: 100vh;
    }
    header .main_img .logo{
        padding: 30vh 0;
    }
    header .main_img .main_bg{
        height: 100vh;
    }
    
    header .main_img .main_bg .main_bg01{
        height: 100vh;
    }
    header .main_img .main_bg .main_bg02{
        height: 100vh;
    }
    header .main_img .main_bg .main_bg03{
        height: 100vh;
    }
}

/* ==================================================================================================== */
/* main */
/* ==================================================================================================== */

/* ======= lead ====== */
.lead{
    margin: 0 auto;
}
.lead .txt{
    text-align: center;
    font-size:3.4vw;
    line-height: 7vw;
    margin: 0 auto 5vh auto;
}
@media screen and (min-width: 768px) {
    .lead{
        margin: 0 auto;
    }
    .lead .txt{
        font-size:20px;
        line-height: 44px;
        margin: 0 auto 30px auto;
    }
}

/* ======= content01 ====== */
.content01{
    margin: 0 auto 5vh auto;
}
.content01 article .box::before{
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    background-image: url("../images/i_pattern01.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
}
.content01 article .box::after{
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    background-image: url("../images/i_icon01.png");
    background-repeat: repeat-x;
    background-size: contain;
    width: 100%;
    height: 12px;
}
.content01 article .box{
    padding: 12vh 0 8vh 0;
}
@media screen and (min-width: 768px) {
    .content01{
        margin: 0 auto 100px auto;
    }
    .content01 article{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .content01 article .box::before{
        width: 156px;
        height: 156px;
    }
    .content01 article .box::after{
        background-repeat:no-repeat;
        width: 429px;
        height: 24px;
    }
    .content01 article .photo{
        margin: 0 55px 0 0;
        width: 54%;
    }
    .content01 article .photo img{
        width: 100%;
    }
    .content01 article .box{
        padding: 120px 50px 0 0;
        width: 38%;
    }
}
@media screen and (min-width: 1020px) {
    .content01 article .box{
        width: 400px;
    }
}

/* ======= content02 ====== */
.content02{
    margin: 0 auto 5vh auto;
}
.content02 article .box::after{
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    background-image: url("../images/i_icon02.png");
    background-repeat: repeat-x;
    background-size: contain;
    width: 100%;
    height: 12px;
}
.content02 article .photo{
    margin: 0 0 5vh 5%;
}
.content02 article .box{
    padding: 2vh 0 8vh 0;
}
@media screen and (min-width: 768px) {
    .content02{
        margin: 0 auto 100px auto;
    }
    .content02 article{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        width: 100%;
    }
    .content02 article .box::after{
        background-repeat:no-repeat;
        width: 429px;
        height: 24px;
    }
    .content02 article .photo{
        margin: 0 0 0 50px;
        width: 55%;
    }
    .content02 article .photo img{
        width: 100%;
    }
    .content02 article .box{
        padding: 150px 0 0 0px;
        width: 38%;
    }
}
@media screen and (min-width: 1020px) {
    .content02 article .box{
        width: 400px;
    }
    .content02 article .photo{
        width: 55%;
    }
}
/* ======= content03 ====== */
.content03{
    margin: 0 auto 5vh auto;
}
.content03 article .box::before{
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    background-image: url("../images/i_pattern01.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
}
.content03 article .box::after{
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    background-image: url("../images/i_icon03.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 30%;
}
.content03 article .box{
    padding: 10vh 0 25vh 0;
}
@media screen and (min-width: 768px) {
    .content03{
        margin: 0 auto 100px auto;
    }
    .content03 article{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .content03 article .box::before{
        width: 156px;
        height: 156px;
    }
    .content03 article .box::after{
        width: 429px;
        height: 134px;
    }
    .content03 article .photo{
        margin: 0 55px 0 0;
        width: 54%;
    }
    .content03 article .photo img{
        width: 100%;
    }
    .content03 article .box{
        padding: 120px 50px 0 0;
        width: 38%;
    }
}
@media screen and (min-width: 1020px) {
    .content03 article .box{
        width: 400px;
    }
}
/* ======= content04 ====== */
.content04{
    margin: 0 auto 10vh auto;
}
.content04 article .box::before{
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    background-image: url("../images/i_pattern01.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 80px;
    height: 80px;
}
.content04 article .box::after{
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    background-image: url("../images/i_icon04.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 30%;
    height: 80px;
}
.content04 article .photo{
    margin: 0 0 5vh 5%;
}
.content04 article .box{
    padding: 12vh 0 0 0;
}
@media screen and (min-width: 768px) {
    .content04{
        margin: 0 auto 50px auto;
    }
    .content04 article{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        width: 100%;
    }
    .content04 article .box::before{
        width: 156px;
        height: 156px;
    }
    .content04 article .box::after{
        bottom: 50px;
        width: 127px;
        height: 145px;
    }
    .content04 article .box{
        width: 50%;
        padding: 190px 0 0 0px;
    }
    .content04 article .photo{
        margin: 0 0 0 50px;
        width: 43%;
    }
    .content04 article .photo img{
        width: 100%;
    }
}
@media screen and (min-width: 1020px) {
    .content04 article .box{
        width: 450px;
    }
    .content04 article .photo{
        width: 50%;
    }
}

/* ======= bt ====== */

.line_word{
	 text-align: center;
	
    width: 70%;
    margin: 0 auto 5vh auto;
}

.word{
 text-align: center;
    color: #57c3ea;
 
    display: block;
    font-size:1.6vw;
}

.line_word hr{
	padding: 0 0 0 60px ;
 height: 2px;
 background-color: #57c3ea;
 width: 94%;
 border: none;
}

@media screen and (max-width: 767px) {
.line_word{
	 text-align: center;
	
    width: 70%;
    margin: 0 auto 5vh auto;
}

.word{
 text-align: center;
    color: #57c3ea;
 
    display: block;
    font-size:4vw;
}

.line_word hr{
padding: 0 0 0 60px ;
 height: 2px;
 background-color: #57c3ea;
 width: 80%;
 border: none;
}
}



.bt{
    width: 94%;
    margin: 0 auto 5vh auto;
}
.bt a{
    text-align: center;
    background: #fff100;
    color: #57c3ea;
    padding: 2vh 0;
    border-radius: 30px;
    display: block;
    font-size:4vw;
}
@media screen and (min-width: 768px) {
    .bt{
        width: 478px;
        margin: 0 auto 50px auto;
    }
    .bt a{
        font-size:26px;
        border-radius: 100px;
    }
    .bt a:hover{
        background: #57c3ea;
        color: #fff100;
        opacity: 1;
    }
}
/* ==================================================================================================== */
/* footer */
/* ==================================================================================================== */
footer{
    background: #57c3ea;
    padding: 2vh 2vw;
    margin: 0 auto;
    width: 100%;
}
footer .wrap{
    position: relative;
}
footer .wrap .logo{
    width: 15%;
    position: absolute;
    left: 2%;
    top: 15%;
}
footer .wrap .name{
    color: #ffffff;
    font-size:3.4vw;
    font-weight: bold;
    margin: 0 0 0 22%;
    line-height: 3.8vw;
}
footer .wrap .name span{
    font-size:2.6vw;
    font-weight: normal;
}
footer .wrap .instagram{
    width: 7%;
    position: absolute;
    top: 20%;
    right: 2%;
}
@media screen and (min-width: 768px) {
    footer{
        padding: 30px 0;
    }
    footer .wrap{
        width: 600px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    footer .wrap .logo{
        width: 75px;
        margin: 0 30px 0 0;
        position: relative;
    }
    footer .wrap .name{
        font-size:26px;
        margin: 0 30px 0 0;
        line-height: 26px;
    }
    footer .wrap .name span{
        font-size:16px;
    }
    footer .wrap .instagram{
        width: 30px;
        margin: 15px 0 0 0;
        position: relative;
    }
}