#main{
	overflow: hidden;
}

#main .popcorn{
	position: absolute;
	
	width: auto !important;
}

#main .popcorn.pop1{
	max-width: 120px !important;
}


#main .popcorn.pop2{
	max-width: 180px !important;
}


#main #mainPicture{
	background-color: #32B4D8;
}

#main #mainPicture > div{
	display: flex;
}


#main #mainPicture .detail-title{
	position: relative;
}


#main #mainPicture .detail-title .pop1{
	top: -80px;
	right: -60px;
	width: 10vw !important;
}

#main #mainPicture .detail-title .pop2{
	bottom: -50px;
	right: -30px;
	width: 10vw !important;
}


@media(max-width: 730px){
	#main #mainPicture .detail-title .pop1{
		top: 0px;
		right: -60px;
		width: 50vw !important;
	}

	#main #mainPicture .detail-title .pop2{
		bottom: 0px;
		right: -20px;
		width: 25vw !important;
	}
}


#main .main-title{
	
	width: 44%;
	margin-top: 70px;
	display: flex;
	align-items: center;
	justify-content: center;

}

#main #mainPicture .main-product{
	width: 56%;
	height: 800px;
	overflow:hidden;
	position: relative;
	background-color: #F7ECC7;
	display: flex;
	justify-content: center;
	align-items: center;
}

#main #mainPicture .main-product img.dog{
	width: 70%;
	position: absolute;
	  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  
}

#main #mainPicture .main-product img.bgdog{
	width: 100%;
}

#main .detail-title {
	width: 75%;
	
}

#main .detail-title img{
	width: 100%;
}

#main #mainPicture .button{
	margin-top: 35px;
}

#main #about {
	padding-bottom: 30px;
}

#main #about .descrabout{
	padding-top: 50px;
}

#main #about  .titabt{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 30px;
}

#main #about .titabt > *{
	width: 50%;
	padding: 40px 35px;
}


#main #about  .titabt > h2{
	font-size: 32px;
}


@media(max-width: 730px){
	#main #about  .titabt{
		flex-wrap: wrap;
	}

	#main #about  .titabt > *{
		width: 100%;
		text-align: center;
	}

	#main #about  .titabt > h2{
		padding-bottom: 0px;
		font-size: 8vw;
	}	

	#main #about  .titabt > p{
		padding-top: 30px;
	}
}







#main #about .descrabout {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;	
}

#main #about .descrabout .bagfloat{
	position: absolute;
	width: 280px;
	z-index: 2 ;
	margin-right: 40px;
	margin-bottom: 130px;
}

#main #about .descrabout > *{
	width: 50%;
}







#main #about .desc-wrap > div{
	padding-left: 30px;
	padding-right: 40px;
}

#main #about .desc-wrap  h2{
	font-size: 50px;
}


#main #about .desc-wrap img{
	position: absolute;
}

#main #about .desc-wrap .p1{
	width: 10%;
		left: 0;
	  right: 0;
	  margin: 0 auto;
	  top: -40px;
	  z-index: -1;
}


#main #about .desc-wrap .p2{
	width: 20%;	
	right: -100px;
 	z-index: -1;
	bottom: 50px;
}





@media(max-width: 780px){

	#main #about .descrabout  {
		flex-wrap: wrap;
		padding-top: 0px;

	}

	#main #about  .descrabout > *{
		width:  100%;
	}


	#main #about .desc-wrap .p1{
		width: 30%;
			left: 0;
		  right: 0;
		  margin: 0 auto;
		  top: -60px;
		  z-index: -1;
	}

	#main #about .desc-wrap > div {
	    padding-left: 30px;
	    padding-right: 30px;
	    padding-top: 20px;
	}

}



 


 
 


@media(max-width: 1015px){
	#main .detail-title {
		width: 75%;
		padding-left: 3%;
	}

	#main #mainPicture .main-product{
		width: 55%;
		height: 750px;
	}
	#main .main-title{
		width: 45%;
	}
}


@media(max-width: 730px){

	#main #mainPicture > div{
		flex-direction: column;
	}

	#main .main-title{
		order:2;
		width: 100%;
	}

	
	#main #mainPicture .main-product {
		order:1;
		width: 100%;
	}

	#main .detail-title {
		width: 
		80%;
		
	}

	#main #mainPicture .main-product{
		height: 120vw;
	}

	#main .main-title{
		padding:  90px 0px 70px 0px;
		margin: 0px;
	}
}


#main #detail .g-width{
	display: flex;
}

 
 
#main #detail .g-width > *{
	width: 50%;
}
 
 
#main #detail .amazon{
	background-color: #32B3D9;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

#main #detail .amazon a{
	margin-top: 30px;
	display: block;
    width: max-content;
    margin: auto;
}

#main #detail .amazon img{
	width: 70%;
	display: block;
	padding-bottom: 20px;
	margin: auto;
}

#main #detail .bag{
	background-color: #F8EDC7;
	position: relative;
		display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0px;
	overflow: hidden;

}

#main #detail .bag .pointbag{
	width: 60%;
	z-index: 1;

}

#main #detail .bag .pointb{
	width: 80%;
	position: absolute;
	  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  z-index: 0;
}


#main #stay-form > div{
	display: flex;
	justify-content: center;
	align-items: center;
}

#main #stay-form > div > *{
	width: 50%;
	
}
 

#main #form-mail .stay-form{

}

#stay-form .form-mail{
  text-align: center;
  max-width: 600px;
  margin: auto;
  padding: 30px 0px 30px 0px;
 
}

#stay-form .form-mail .button{
	margin-bottom: 0px;
}

@media( max-width:680px){
	#main #stay-form > div {
		flex-wrap: wrap;
	}

	#main #stay-form > div > div{
		width: 100%;
	}
	#main #stay-form > div > * {
		width: 80%;
		padding-top: 30px;
		padding-bottom: 10px;
	}

	#main #stay-form .form-mail{
		padding-bottom: 30px;
	}
}


@media( max-width:925px){

	#main #detail .amazon img {
		width: 50%;
	}
}


@media( max-width:660px){
	#main .main-title {
        padding: 45px 0px 35px 0px;
    }
}


@media( max-width:625px){

	#main #detail .amazon img {
		width: 50%;
		
	}

	#main #about .desc-wrap > div {
		padding-bottom: 10px;
	}

	#main #detail .amazon  {
		padding: 30px 0px 30px 0px;
		order: 2;
	}

	#main #detail .bag  {
		order: 1;
	}

	#main #detail .g-width {
		flex-wrap: wrap;
	}

	#main #detail .g-width > div {
		width: 100%;
	}
}