@charset "utf-8";


body *{word-break:keep-all;}
.filter{filter: blur(10px);}

#perchase_wrap{
    display: none;
    width: 90%; height: 90vh;
    background: #fff;
    position: fixed;
    z-index: 1250;
    overflow-y: scroll;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3),-5px -5px 20px rgba(0, 0, 0, 0.3);}

.main_page{
    background: #f3f3f5;
    width: 100%; height: 90vh;
    position: relative;}

.main_page img{
    width: 50%;position: absolute;left: 5%;
    top: 52%; transform: translateY(-50%);}
.main_page h6{
    font-weight: normal;color: #555;
    padding: 4% 0 0 5%;
    float: left;}

.p_close{
    display: none;
    z-index: 2000;position: fixed;
    right: 10%;top: 11%;
    width: 15px; height: 15px;
    cursor: pointer;}
.p_close img{width: 100%;}


.main_page .text{
    position: absolute; right: 10%;
    top: 52%; transform: translateY(-50%);}
.main_page .text h4{
    color: #555;
    width: 25vw; margin: 15px 0 30px;
    font-weight: normal; font-size: 1.15rem;}
.main_page .text h2{
    width: 25vw; font-weight: 600;
    font-size: 2rem;}
.main_page .text p{
    float: left;font-size: 1.4rem;}


.main_page .icon{
    position: relative;float: right;}
.main_page .icon li{
    width: 21px;height: 21px;
    cursor: pointer;
    display: inline-block;
    position: relative;}
.main_page .icon li+li{margin-left: 10px;}
.icon li:nth-child(1) img{width: 90%;}
.icon li:nth-child(2) img{
   padding: 7%; width: 75%;}


.main_page .text .size{
    width: 25vw;height: 40px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 80px 0 15px;
    cursor: pointer;position: relative;}
.main_page .text .coeur_size{
    width: 25vw;height: 1px;
    border-top: 1px solid #333;
    border-bottom: none;
    margin: 80px 0 15px;
    cursor: pointer;position: relative;}
.main_page .text .coeur_size p{display: none;}
.main_page .text .coeur_size img{display: none;}
.main_page .text .size p{
    padding-left: 4%;
    line-height: 40px;font-size: 1.2rem;}
.main_page .text .size img{
    width: 12px;margin-left: 40px;}
.button1{
    font-size: 1.2rem;
    background: #000;color: #fff;
    width: 55%;float: left; cursor: pointer;
    height: 35px; text-align: center;
    line-height: 35px; letter-spacing: 1px;
    border-radius: 6px;}
.button1 .btn_watch{width: 100%;background: red;}
.button2{
    width: 43%; float: right;
    font-size: 1.2rem; cursor: pointer;
    border: 1px solid #000;
    box-sizing: border-box;
    height: 35px; text-align: center;
    line-height: 35px; letter-spacing: 1px;
    border-radius: 6px;}
.main_page .text .subinfo_01{
    font-size: 1.1rem; margin-top: 20px;
    width: 25vw; color: #555;
    margin-top: 100px;cursor: pointer;}
.main_page .text .subinfo_02{
    font-size: 1.1rem;
    margin: 20px 0;
    width: 25vw; color: #555;
    cursor: pointer;}
.main_page .text .subinfo_03{
    font-size: 1.1rem;
    width: 25vw; color: #555;
    cursor: pointer;}
.main_page .text .subinfo_04{
    display: none;
    font-size: 1.1rem;
    width: 100%; color: #555;
    cursor: pointer;}

/*________________________________________*/
.sub_page_col{
    padding-top: 10%;
    width: 100%;}
.slide01{
    margin: auto;
    width: 90%;height: 30vw;
    position: relative;padding: 0 3%;}
.slide01 button{
    position: absolute; 
    z-index: 2000; font-size: 0;
    top: 42%; opacity: 0.7;
    background: transparent; border: none;
    transform: translateY(-50%);width: 40px;
    height: 30px; cursor: pointer;}
.slide01 button.slick-prev{
    background: url(../img/icon/a-pre.png) no-repeat; left: 0;
    background-size: contain;}
.slide01 button.slick-next{
    right: 0;
    background: url(../img/icon/a-next.png) no-repeat;
    background-size: contain;
    background-position: right;}
.sub_page_col .sub_01 ul li{
    width: 30%;margin: 0 0.2%;}
.sub_page_col .sub_01 ul li img{width: 100%;}

.slide01 .slick-dots{
    position: absolute;
    top: 92%;
    width: 250px;
    text-align: center;
    left: 50%;transform: translateX(-50%);}
.slide01 .slick-dots li{
    display: inline-block;
    position: relative;}
.slide01 .slick-dots li+li{
    margin-left: -45px;}
.slide01 .slick-dots button{
    width: 8px;
    height: 8px; 
    background: #999;
    border-radius: 10px;}
.slick-dots li.slick-active button{
    background:#333;}
.coeur_sub_01{padding-bottom: 10%;}
.sub_02{
    padding: 10% 0;
    width: 83%;margin: auto}
.sub_02 video{width: 100%;}

.sub_03{
    padding: 0 0 10%;
    width: 83%;margin: auto}
.sub_03 h2{
    text-align: center; margin-bottom: 15px;
    font-weight: normal; font-size: 2rem;
}
.sub_03 img{width: 100%;cursor: pointer;}
.sub_watch{
    width: 30%;
    margin: 0 auto 10%;
}
.sub_watch img{width: 100%;}


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (max-width:1000px){
    
.p_close{right: 5%;width: 14px; height: 14px;}        
#perchase_wrap{width: 100%;}    
.main_page img{width: 60%;left: 0%;}
.main_page h6{padding: 6% 0 0 5%;}    
.main_page .text{right: 10%;}
.main_page .text h4{width: 30vw;}
.main_page .text h2{width: 30vw;}
.main_page .text .size{width: 30vw;}
.main_page .text .size img{margin-left: 60px;}
.main_page .text .subinfo_01{width: 23vw;}
.main_page .text .subinfo_02{width: 23vw;}
.main_page .text .subinfo_03{width: 23vw;}

/*________________________________________*/
.sub_page_col{padding-top: 15%;}
.slide01{
    position: relative;padding: 0 2.5%;}
.slide01 button{top: 45%;height: 20px;}
.sub_page_col .sub_01 ul li{margin: 0 0.15%;}
.sub_page_col .sub_01 ul li img{width: 100%;}
.slide01 .slick-dots{top: 107%;}
.slide01 .slick-dots li+li{margin-left: -45px;}
    .coeur_sub_01{padding-bottom: 15%;}
.sub_02{padding: 15% 0;}
.sub_03{padding: 0 0 15%;}
.sub_03 h2{
    margin-bottom: 15px;font-size: 2rem;}
.sub_03 img{width: 100%;}
.sub_watch{
    width: 40%;
    margin: 0 auto 15%;}
}



@media screen and (max-width:650px){
    
.p_close{right: 6%;top: 9%;}
.main_page h6{padding: 7% 0 0 5%;}
.main_page img{
    transform: translate(-50%,-50%);
    left: 50%;width: 80%;top: 35%;}
.main_page .text{
    width:80%;left: 50%;top: 78%;
    transform: translate(-50%,-50%);}    
    
.main_page .text h4{
    width: 100%;margin: 10px 0 20px;}
.main_page .text h2{
    width: 100%; font-size: 1.7rem;}
.main_page .text p{
    float: left;font-size: 1.3rem;}

.icon li:nth-child(1) img{width: 90%;}
.icon li:nth-child(2) img{padding: 1%; width: 75%;}    
   
.main_page .text .size{width: 100%;margin: 60px 0 10px;}
.main_page .text .size img{
    margin-left: 0;left: 20%; top: 45%;}
.button1{font-size: 1.1rem;margin-bottom: 40px;}
.button2{font-size: 1.1rem;margin-bottom: 40px;}
.main_page .text .subinfo_01{display: none;}
.main_page .text .subinfo_02{display: none;}
.main_page .text .subinfo_03{display: none;}
.main_page .text .subinfo_04{
    display: block;text-align: center;}

/*________________________________________*/
.slide01 .slick-dots li+li{margin-left: -45px;}   
.sub_page_col{padding-top: 15%;}
.slide01 button{top: 72%;height: 20px;}
.sub_page_col .sub_01 ul li img{width: 100%;}
.slide01 .slick-dots{top: 155%;}
    .coeur_sub_01{padding-bottom: 40%;}
.sub_02{padding: 32% 0 15%;}
.sub_03 h2{font-size: 1.7rem;}
.sub_watch{
    width: 50%;
    margin: 0 auto 15%;}
}




@media screen and (max-width:450px){
.main_page img{top: 31%;}
.main_page .text{width:90%;top: 75%;}5   
.main_page .text h4{font-size: 1.15rem;}
.main_page .text h2{font-size: 1.4rem;}
.main_page .text p{font-size: 1.2rem;}   
   
.main_page .text .size{margin: 50px 0 10px;}
.main_page .text .size img{
    margin-left: 0;left: 20%; top: 45%;}
.button1{font-size: 1.15rem;margin-bottom: 25px;}
.button2{font-size: 1.15rem;margin-bottom: 25px;}
.main_page .text .subinfo_04{font-size: 1.05rem;}

/*________________________________________*/
.sub_page_col{padding-top: 20%;}
.slide01{padding: 0 5%;}
.slide01 button{top: 140%;}
.sub_page_col .sub_01 ul li img{width: 100%;}
.slide01 .slick-dots{top: 290%;}
    .coeur_sub_01{padding-bottom: 80%;}
.sub_02{padding: 80% 0 20%;width: 100%;}
.sub_03{padding: 0 0 20%; width: 100%;}
.sub_03 h2{font-size: 1.5rem;}
.sub_watch{
    width: 90%;
    margin: 0 auto 20%;}
}