@charset "UTF-8";

@media screen and (max-width:768px){
	

	#wrap p.gototop{
		display: none;
	}
	
	#sp-gototop{
	display: flex;
	justify-content:flex-end;
	position: sticky;
	width:94%;
	height: auto;
	padding:0 3%;
		margin-top:20px;
      bottom: 20px;
	left:0px;
	z-index: 1;
}
	




#contents{
	width:100%;
	height:auto;
	padding-top:0px;
	padding-bottom:0px;
}

	.spon{
		display: block;
	}

/***********************
TOP 100%表示
************************/

#wrap{
	width:100%;
	height: auto;
	margin:0 auto;
	padding-bottom: 0;
}
/* --- 全体のBOX定義 ------- */
.box {
  position   : relative;
  height     : 100vh;
  margin     : auto;
  overflow   : hidden;
}

/* --- 段差で背景画像のアニメーションを実行 -------- */
.box .src1 {
  background-image : url("../img/img_top.png");   /* 背景の画像を指定 */
	background-position:top right 50%;
	background-size:cover;
	background-repeat: no-repeat;
	-webkit-animation-delay  :-1s;
}


.box .boxString{
  position: relative;
	top:100px;
	right:0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	z-index: 1;
	max-width:100%;
	height: auto;
}
	.box .boxString h1 img{
		max-width: 80%;
		height: auto;
	}
	
	.box a {
bottom: 20%;
}

#contents .center{
	text-align: center;
}



/***********************
TOPメッセージ
************************/
section#exit_message,
section#exit_message2{
	width:94%;
	height:auto;
	padding-left:3%;
	padding-right: 3%;
}

#contents h1{
	font-size:38px;
}
/*小文字*/
#contents h1 span.komoji{
	font-size:20px;
}
#contents h1.nihongo{
	font-size:20px;
	font-weight: bold;
}

#contents p{
	font-size: 16px;
}
#contents p.first{
	padding-top:20px;
}

#webshopLink{
	display: flex;
	justify-content:flex-end;
	position: sticky;
	width:94%;
	height: auto;
	padding:0;
		margin:20px auto 0;
      top: 20px;
	left:0px;
	z-index: 1;
}

#contents p.img img{
	display: block;
	margin:30px auto;
	max-width: 100%;
	height: auto;
}
#contents p.trimingimg img{
	display: block;
	margin:30px auto 0;
	width:100%;
	height: 100vh;
}

#contents h1.mojileft{
	font-size: 30px;
}
.nidanmidashi{
	width:100%;
	height: auto;
}
	#contents .nidanmidashi h1{
		font-size: 30px;
	}


.kakeru {
  width: 30px;
}


.exit_imgbox{
	display: block;
	max-width: 100%;
	height: auto;
	margin:30px auto 0;
}
.exit_imgbox p img{
	max-width: 100%;
	height: auto;
}

#products{
	width:100%;
	height: auto;
	margin:80px auto 0;
}

#products .products_midashi{
	position: relative;
	margin-top:80px;
}
	
#contents .products_midashi p.trimingimg img{
	object-fit: contain;
	width:100%;
	height: auto;
}
#products .products_midashi h2.right{
  position: absolute;
  bottom: 10px;
  right: 20px;
	font-size: 35px;
  }
#products .products_midashi h2.left{
  position: absolute;
  top: 10px;
  left: 20px;
	font-size: 35px;
  }
#products .products_midashi h2.righttop{
  position: absolute;
  top: 10px;
  right: 35px;
	font-size: 50px;
  }

#products .text{
	max-width:94%;
	height: auto;
	margin:0 auto;
	padding:0 3%;
}

.youtube_link{
	width:94%;
	height: 80px;
	margin:30px auto 0;
	padding:0 3%;
	background-color: #fff;
	color:#000;
		display:flex;
	justify-content:space-around;
	align-items:center;
}
#contents .youtube_link p{
float: left;
font-size: 15px;
}
#contents .youtube_link p img{
max-width:100%;
	height: auto;
}
#contents .youtube_link p.item1 {
  flex-basis: 30%;
}

#contents #shoplist{
	width:94%;
	height: auto;
	margin:100px auto 0px;
	padding-bottom:60px;
}
#contents #shoplist h1,
#contents #shoplist p{
	text-align: center;
}

#contents #shoplist dl{
	width:100%;
	height: auto;
	margin:0 auto;
}



#shoplist p.bluebox{
	display: box;
	max-width:80%;
	height: 40px;
	margin:70px auto 0;
	text-align: center;
	font-weight: normal;
	background-color: #0071BC;
	font-size: 30px;
	line-height: 40px;
}

footer{
	background:#000;
	margin-bottom: -200px;
}

.footerbox{
	width:100%;
	height:auto;
	margin:0 auto;
}
.footerbox p img{
	display: block;
	height: 100px;
	width:auto;
	margin:60px auto 30px;
}
	
}