/*==============================================
  common
==================================================*/
@media screen and (max-width: 767px) {
/*body{padding: 0px; width: 100%; min-width: 100%; overflow-x: hidden; word-wrap: break-word;}*/
.pc-none{display: block !important;}
.sp-none{display: none !important;}
img {width: 100%; margin: 0; padding: 0; vertical-align: bottom;}
/* =========================================================
	kv
========================================================= */
.main_ttl_area{background: none; height: inherit;}
.main_ttl_area h1{width: 100%; padding: 0;}

.main_kv{background: url("../img/main_bg.jpg") no-repeat center; height: auto; background-size:cover;}
.main_kv .main_pic_sp{width: 94%; margin:0 auto 0; padding: 10px 0 20px;}
	
.kv_date{padding: 22px 0; z-index: 999;}
.kv_date p{font-size: 17px; letter-spacing: 0.3px;}
.kv_date p span{font-size: 1.35em;}
.entry_area .inner{display: block; width:84%; padding: 50px 0 35px;}
.entry_area .sign_btn{margin-bottom: 45px;}
.entry_area .entry_btn a{
	width: 90%;
    padding: 25px 0 20px;
    margin: 0 auto;
   border: 2px solid #c32219;
}
.entry_area .entry_btn a .subcopy{
top: -25px;
left: 50%;
transform: translateX(-50%);
width: 55%;
}
.cp_necker {
		padding: 1rem 0;
		margin-top: -1.5rem;
		font-size: 0.8rem;
		        line-height: 1.5;
        letter-spacing: 0;
	}	
	.main_kv {
		height: auto;
	}
/* =========================================================
		cp con
========================================================= */
.cp_con{
background: url("../img/navy-bg2.jpg")repeat center top;
background-size: cover;
padding: 45px 0 55px;
}
.cp_con .inner{
	margin: 0 auto;
	width: 90%;
}
.cp_con .cp_ttl{
	width: 96%;
	padding-bottom: 25px;
}
/*---chance1----*/
.chance_con1{
	padding: 20px 2% 25px;
	margin-bottom: 45px;
}
.chance_con1 .ch_ttl_box{display: block;}
.chance_con1 .ch_ttl1{
width: 100%;
	padding-bottom:10px;
}

.chance_con1 .ch_copy1{
	padding-bottom: 20px;
	font-size: 17px;
	line-height: 1.5;
font-weight: 500;
}




.present_box{
	background: #fff;
	position: relative;
	padding: 5px;
	width: 92%;
	margin: 0 auto;
}
.present_box .pre_inner{
	border: 1px solid #eacf9d;
	position: relative;
}
.present_box .present_en{
	position: absolute;
	width: 165px;
	left: -10px;
	top: -35px;
}

.present_box .pre_con{
	display: block;
	padding: 5px 5% 20px;
}
.present_box .pre_con .pre_detail{
	width: 100%;
}
.present_box .pre_detail .pre_title{
	width: 84%;
margin: 0 auto 8px;}
.present_box .pre_detail .p{
	font-size: 15px;
}



.present_box .pre_con .pre_pic{
	width: 100%;
	margin: 0 auto 0;
}

/*---chance2----*/
.chance_con2{
	padding: 25px 2% 25px;
}

.chance_con2 .ttl_sub{
width: 110px;
    position: absolute;
    right: -15px;
    top: -30px;
}

.chance_con2 .ch_ttl1{
width: 100%;
	margin: 0 auto 10px;
}

.chance_con2 .ch_copy1{
	padding-bottom: 20px;
	font-size: 17px;
	letter-spacing: 0;
	line-height: 1.5;
}


.chance_con2 .present_box .pre_con{padding: 15px 6% 20px;}
.chance_con2 .present_box .pre_con .pre_detail{
	width: 86%;
	margin: 10px auto 0;
}
.chance_con2 .present_box .pre_detail .pre_title{
	width: 100%;
margin: 7px auto 0;}
.chance_con2 .present_box .pre_con .pre_pic{
	width: 46%;
	margin-top: 0;
}

/*---artist profile---*/
.artist_profile{background: #000046; width: 84%; margin: 8px auto 20px; padding: 10% 5% 6% 5%; display: block;}
.artist_profile .artist_photo{width: 75%; margin: 0 auto;}
.artist_profile .artist_detail{width: 100%; margin-top: 20px;}
.artist_profile .artist_detail .name2{font-size: 14px;}
.artist_profile .artist_detail h4{font-size: 28px; padding-bottom: 10px;}
.artist_profile .artist_detail .profile{font-size: 13px; line-height: 1.55;}
.artist_profile .artist_detail .insta_link{width: 32px; position: absolute; top: 10px; right: 2%;}


/* =========================================================
		howto
========================================================= */
.howto_con{width: 90%; margin: 50px auto 55px;}
.howto_con .howto_ttl1{font-size: 42px;}
.howto_con .howto_ttl1_sub{font-size: 20px; margin-bottom: 50px;}
	
.howto_con ul{display: block;}
.l-step_item {
    width: 80%;
	margin: 0 auto 50px;
}
.l-step_inner {
    background: #c2f3fc;
    padding: 42px 5% 35px;
    height: auto;
}
.l-step_item_img {
  width: 82%;
	margin: 0 auto;
}
.l-step_item_no {
	color: #00C3F2;
	font-size: 30px;
	    left: -10px;
    top: -25px;
	position: absolute;
	z-index: 2;
}

.l-step_item_ttl {
       margin-top: 20px;
    font-size: 17px;
    letter-spacing: 0.3px;
    border-top: solid #fff 2px;
    padding-top: 15px;
}
.l-step_item_txt{
	 margin-top: 5px;
    font-size: 14px;
	line-height: 1.5;
}
.l-step_item_no {
   font-size: 40px;
	   position: absolute;
   left: -10px;
    top: -30px;
	z-index: 2;
}

.l-step_item_ttl {
  margin-top: 25px;
    font-size: 19px;
	letter-spacing: 0.3px;
}
.l-step_item_txt{
	 margin-top: 5px;
    font-size: 15px;
	
}

.l-step_item_att {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
}


.kiyaku_btn a{
	
	   display: block;
    width: 55%;
    padding: 13px 0;
    margin: -25px auto 0;
    font-size: 14px;
	}
	

.kiyaku_att{
padding-top: 20px;
	font-size: 12px;}

/* =========================================================
		product
========================================================= */
.product_con{padding: 45px 0 55px;}
.product_con .inner{width: 88%; margin: 0 auto;}
.product_con .product_ttl{font-size: 42px;}
.product_con .product_ttl_sub{font-size: 20px; margin-bottom: 20px;}
	
	
	
.product_con .product{display: block;}
.product_con .product .picture{width: 100%; text-align: center;}
.product_con .product .picture img{width: 34%; margin: 0 auto;}
.product_con .product .brand_detail{width: 94%; margin: 0 auto;}
	
.product_con .product .brand_detail .name_en{font-size: 36px; padding-top: 27px; line-height: 1;}
.product_con .product .brand_detail .name{font-size: 18px; padding-top: 5px;}
.product_con .product .brand_detail .necker_att{font-size: 11px; padding-bottom: 25px; letter-spacing: 0;}
.product_con .product .brand_detail .brand_story{font-size: 24px; text-align: center;  margin: 0 auto 0;}
.p-about__box {margin: 5px auto 0;}


.p-about__text {
  padding: 15px 0px 15px;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: normal;
    font-weight: 500;
    text-align: left;
}
.brand_link a{
    width: 70%;
    padding: 20px 0;
    margin: 35px auto 0;
}

/* =========================================================
		gintonic
========================================================= */
.gintonic_con{padding: 50px 0 55px;}
.gintonic_con .inner{width: 84%;}
.gintonic_con .gin_ttl{font-size: 42px;}
.gintonic_con .gin_ttl_sub{font-size: 20px; margin-bottom: 0;}

.gin_area{display: block;}
.gin_area .make_detail{width: 100%; margin-right: 0;}
.gin_area .make_pic{width:98%; margin: 25px auto 0;}
.gin_area .make_detail h4{font-size: 17px; padding: 28px 0 20px; line-height: 1.5;}
.gin_area .gin_pre{font-size: 16px;}
.gin_area .gin_pre_copy{font-size: 16px; padding-bottom: 25px; letter-spacing: 0; line-height: 1.45;}
.gin_area .gin_step{font-size: 22px; line-height: 1;}
.gin_area .gin_step_copy{font-size:16px; padding-bottom: 20px; line-height: 1.45;}

.gintonic_con .p-about__text {
    padding: 15px 0 5px;
}
.gintonic_con .p-about__line{background-color: #fff;}
.gintonic_con .p-about__line-deco {background-color: #fff;}

.gintonic_con .gin_point{background: rgba(255,255,255,0.7); padding: 15px 10px 15px 25px; border-radius: 6px; margin-top: 25px; display: table;} 
.gintonic_con .gin_point_flex{display: flex; align-items: center;}
.gintonic_con .gin_point .point_pic{width: 185px; margin-right: 15px;}
.gintonic_con .gin_point .point_copy{font-size: 14px; color: #00124a; line-height: 1.3;} 

.button001 {
		width: 70%;
	 padding: 45px 0 60px;
	}


	
.button001 a {
		text-align: center;
    max-width: 80%;
    line-height: 1.5rem;
    font-size: 1.1rem;
  }		
/* =========================================================
		footer
========================================================= */
.footer_bg{padding: 55px 0 25px; background-image: url(../img/footer-bg-sp.png);}
.footer_inner{width:86%; margin: 0 auto;}
.footer_inner .footer_con1{display: block;margin-bottom: 35px;}
.footer_con1 .contact h4{font-size: 18px; padding: 5px 0 8px; text-align: center;}
.footer_con1 .contact p{font-size: 15px; padding-bottom: 15px; letter-spacing: 0; text-align: center;}
.footer_con1 .contact p a{color: #fff;}
.footer_logo{width: 62%; margin: 0px auto 35px;}
.l-footer_notice{display: flex;}
.l-footer_notice dt{width: 10%;
    margin-right: 2%;}
.l-footer_notice dd{font-size: 10px;
    letter-spacing: 0;
    width: 88%;}
.copyr {
    text-align: center;
    margin-top: 30px;
    font-size: 11px;

}

/* =========================================================
		modal
========================================================= */


.modal-content {
    position:relative;
    display:none;
      width: 80%;
    max-height: 100%;
    margin: 20% 0 3%;
    padding: 6% 5%;
  
    background: #fff;
    overflow: auto;
    top: 0 !important;
	line-height: 1.6;
}




.modal-wrap {
  
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}



.modal-close {
      text-decoration: underline;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 22px;
}



.modal-content .info_title{

	width: 55%;
	
	
	padding: 6% 0 3%;
	
}
		
		
		.modal-content .info_title2{

	width: 30%;
	
	
	padding: 6% 0 3%;
	
}
.modal-content .info_copy{
	font-size: 14px;
	padding-bottom: 6px;
	line-height: 1.65;
	
	
	
}




.coming_date{
	padding: 15px 0;
}
.coming_date p{
	color: #000046;
	font-size: 25px;
	letter-spacing: 0;
}
.coming_flogo{
	width: 70%;
    margin: 0 auto 50px;
}


.end_date{
	padding: 13px 0;
}
.end_date2{
	padding: 0 0 30px;
	margin-top: -15px;
}	
.end_date p{
	font-size: 19px;
}
		

/* =========================================================
		top modal
========================================================= */

#ageModal .age__dewarsLogo {
    width: 75%;
    margin: 0 auto 0;
}

#ageModal .modal__contentsInner {
	padding: 12% 2% 14%;
    width: 85%;
}
#ageModal .age__txt {
    margin-top: 7%;
    letter-spacing: 0;
	font-size: 14px;
}		
#ageModal .age__txt span {
    margin-top: 10px;
    font-size: 23px;
    font-weight: 500;
}		
#ageModal .age__btns>li {
    width: 42%;
    margin: 0 1.5%;
}	
	#ageModal .age__btns {
    margin-top: 9%;

}	
	}