/*==============================================
  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;}

/* =========================================================
		contents
========================================================= */
.f_bg1{background: url(/yurucamp/img/f_bg_sp1.jpg) no-repeat center top; background-size: cover;}
.f_bg2{background: url(/yurucamp/img/f_bg_sp2.jpg) no-repeat center top; background-size: cover;}
.f_bg3{background: url(/yurucamp/img/f_bg_sp3.jpg) no-repeat center top; background-size: cover; padding-bottom: 18%;}
.f_bg4{background: url(/yurucamp/img/f_bg_sp4.jpg) no-repeat center top; background-size: cover;}	
	
/*---product---*/
#product{margin: 0 auto 0; padding:35px 0 30px; position: relative;}
#product .product_title{width: 100%; margin: 0 auto;}
#product .hanabi_btn{width: 24%; position: absolute; top: -2%; right: 3%;}	
.product_area{background: #fff; width: 84%; padding: 5% 3% 3%; margin: -23px auto 0; border-radius: 20px;}
.product_area .p_subtitle{width: 85%; margin: 0 auto; padding-bottom: 7px;}
.product_area .p_sub_att{padding-bottom: 10px; font-size: 11px; letter-spacing: 0;}	
.product_area ul{display: flex; flex-wrap: wrap; justify-content: center;}
.product_area li{width: 32.666%; margin: 0 1% 3% 0;}
.product_area li:nth-child(3n){margin: 0 0 3% 0;}
.product_area li:nth-child(7){margin: 0 1% 3% 0;}
.product_area li:nth-child(21){margin: 0 0 3% 0;}	
.product_area li:nth-child(6n){margin: 0 0 3% 0;}	
.product_area dt{width: 100%; margin: 0 auto 3px;}
.product_area li dd{text-align: center; font-size: 11px; line-height: 1.3; font-feature-settings: 'palt' 1; font-weight: 500;}
.product_area .product-sub{padding: 3px 4px 5px; border: 1px solid #333; font-size: 10px; margin: 3px auto 0; display: table; line-height: 1;}
.margin-t1{margin-top: -25px;}
.margin-t2{margin-top: -25px;}
.margin-t3 {margin-top: -25px;}
	
.product-att{font-size: 12px; padding-top: 20px; width:84%; text-indent: -1em; padding-left: 1em;}
.dog_pic{width: 25%;
        position: absolute;
        right: -1%;
        bottom: -1.5%;}	
	
	

/*---present---*/
#present{margin: 0 auto; position: relative; width: 100%;}
.present-con{position: relative; width:96%; margin:0 auto; padding:25px 0 25px; height:inherit;}
.present-con .present_ttl{width:100%; margin:0 auto 0;}
.present-con .present_area {width: 94%; margin: 0 auto 30px; padding: 0;}	
.present-con .present_area_a{margin-top: -20px; position: static;}

.present-con .illust3{position: absolute; width: 30%; top: inherit; bottom: -6.7%; right:-1%;}
/*---howto---*/
#howto{width: 100%; margin: 0 auto;}	
.howto-con{max-width: inherit; width: 90%; margin: 0 auto; padding: 50px 0 25px;}
.howto-con h2{width: 55%; margin: 0 auto 0; padding-bottom: 35px;}

.howto-con ul{display: block; flex-wrap: inherit; justify-content: inherit;}
.howto-con li{width: 90%; margin: 0 auto;}
.howto-con li dt{height: inherit; position: relative;}
.howto-con li dt h3{width: 32%; margin: 0 auto 10px;}
.howto-con li dt p{font-size: 18px; margin-bottom: 1.4rem; line-height: 1.4; padding: 0 0 0;}
.howto-con li dt p br {display: block;}
.howto-con li .sp_illust2{position: absolute; right: -7%; top: 20px; width: 24%;}		
.howto-con li dd{width: 73%; margin: 0 auto;}
.howto-con li .step3-sp{width: 100%;}	
.howto-con .arrow{width: 12%; padding: 1.5rem 0 1.5rem; margin: 0 auto;}
.howto-con .arrow2{padding: 0.8rem 0 1.5rem;}
.howto-con .how-att{font-size: 0.8rem; line-height: 1.3; padding-top: 0.5rem;}
.howto-con .how-att2{margin: -40px auto 30px;}
.oubo-btn{margin: 0 auto 0; display: block;}
.oubo-btn a{padding: 14px 0; width: 100%; margin: 0 auto; font-size: 22px; white-space: nowrap;}
	
	
.howto-con .illust6 {
        position: absolute;
        width: 29.5%;
        bottom: inherit;
        right: inherit;
        top: 30.5%;
        left: -3%;
    }
	
/*---howto---*/




/*---kiyaku---*/
#kiyaku{padding: 40px 0 0;}
.kiyaku-bg{margin: -0.5rem 0 0;}	
.kiyaku-area{background: #fff; width:90%; margin: 0 auto; padding: 1rem 0;}
.kiyaku-inner h3{font-size: 1.3rem; margin-bottom: 0.8rem; letter-spacing: 2px;}
.kiyaku-inner{width:90%;background: #fff; padding: 4% 4%; height: 450px; overflow-y:auto; margin: 0 auto;}
.kiyaku-inner .kiyaku-title{font-size: 1.08rem; padding: 1rem 0 0.3rem;}
.kiyaku-inner .kiyaku-copy{font-size: 1rem; padding-bottom: 0.7rem;}
.kiyaku-inner .fonts{font-size: 0.9rem;}
.kiyaku-att{padding-bottom: 0.8rem;}
.kiyaku-att li{font-size: 0.9rem; padding-bottom: 0.5rem;}
.kiyaku-item{padding-bottom: 0.8rem;}
.kiyaku-item li{padding-bottom: 0.6rem;}
.kiyaku-item li .copy2{padding-top: 0.6rem; font-size: 0.85rem;}
.kiyaku-point{padding-bottom: 0.5rem;}
.kiyaku-point .copy1{padding-bottom: 0.5rem;}
.kiyaku-point .kiyaku-att{padding-bottom: 0;}
.sns_share {padding: 0px 0 0;}
.copyw1 {
    padding: 15px 0 10px;
    text-align: right;
    font-size: 10px;
    width: 94%;
    margin: 0 auto;
}
	
	
	
/*---hanabi---*/
.hanabi_area{
	 max-width:inherit;
    width: 100%;
    padding: 25px 0 0;

}
.hanabi_area .hanabi_ttl{
    width: 100%;
    padding:0 0 20px;
	margin: 0 auto;
}

.hanabi_sub_ttl{font-size: 22px; padding-bottom: 10px;}

.hanabi_info{display: block; width: 90%; margin: 0 auto 40px;}
.hanabi_info li{width: 94%; border-radius: 10px; padding:2% 3% 4%; margin-bottom: 20px;}
.hanabi_info .name{width: 94%; margin: 0 auto; padding: 15px 0 15px;}
.hanabi_info .flex_sp{display: flex; justify-content: space-between;}	
.hanabi_info .photo{width: 48%; margin-right: 4%;}
.hanabi_info .copy{font-size: 14px; text-align: left; line-height: 1.6; width:48%; margin: 0 auto;}
.hanabi_info .detail_btn{width: 55%; margin: 15px auto 0;}
.hanabi_info .att1{width: 90%; margin: 0 auto; padding: 15px 0 0; font-size: 11px; text-align: center;}	
/* =========================================================
		footer
========================================================= */
.footer-inner{padding: 1rem 0 1.2rem;}
.footer-inner h3{font-size: 1.25rem; padding: 0 0 0.1rem; letter-spacing: 2px;}
.footer-inner p{font-size: 1.1rem; line-height: 1.4;}
.footer-inner p .font_att{font-size: 0.74rem;}	
.footer-inner .footer_attend {font-size: 1.05em;}

.hanabi_btn {
    width: 24%;
    position: fixed;
    bottom: 10%;
    right: 1%;
}
@media (orientation: landscape){
  .howto-con li .sp_illust2 {
        position: absolute;
        right: 0%;
        top: -10px;
        width: 23%;
    }
}	
	
	
	
	
	}