@charset "UTF-8";


#page_front section{}

#page_front section h2{
	font-size: 1.6em;
	margin-bottom: 1em;
	text-align: center;
	letter-spacing: 2px;
}

.en{
	display: block;
	font-size: 13px;
	color: #b39f76;
}

.bg_1{background: #f8f5ee;padding: 2em 0}


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

@media (min-width: 668px) {
	#page_front section h2{font-size: 2em;}
}	

@media (min-width: 1000px) {}	


/* ************************************************ 
*	##concept
* ************************************************ */

#intoro_mv {
  position: relative;
}

#intoro_mv::after {
    background-image:  url(../img/dots.png);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 99%;
}

video {
  width: 100%;
  height: auto
}

#sound_button{
display: inline-block;
background: #000;
color: #fff;
padding: 3px 1em;
text-decoration: none;
position: absolute;
bottom: 1.8em;
right: 0;
z-index: 100
}
.sound_on:before{
	font-family: icomoon;
	content: "\ea4c";
	padding-right: 3px
}


.sound_off:before{
	font-family: icomoon;
	content: "\ea4b";
	padding-right: 3px
}


#concept{margin: 2em auto}

#concept h1{
	font-size: 1.8em;
	margin:0 1em .5em;
	letter-spacing: .1em;
	text-align: center;
	font-weight: normal;
	margin-bottom: 1em
}

#concept ul{
	display: flex;
	justify-content: space-around;
	max-width: 1000px;
	margin: 0 auto
}

#concept li{
	margin: .5em auto
}

#concept >div{
	max-width: 1040px;
	margin: 1em auto
	
}

#concept p{
	line-height: 2em;
	margin-bottom: 1.5em
}


@media  (min-width: 668px) {
	#concept h1{letter-spacing: .2em;}
	#concept li{width: 30%;}
	}	

	
@media  (min-width: 768px) {
	#concept h1{font-size: 2.6em}
	#concept h1 br{display: none}
	#concept p{font-size: 1.3em;}
}	
	

/* ************************************************ 
*	#item
* ************************************************ */


#item{padding: 2em 0;}

#item h2{text-align: center;}

ul#itemlist{
	display: flex;
	flex-wrap:wrap;
	max-width: 1200px;
	width: 92%;
	margin: 0 auto;
}

ul#itemlist > li{margin-bottom: 1em;background: #fff;position: relative;padding-bottom: 4em;}

ul#itemlist li .item_inner{}

ul#itemlist li .thumb{
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 350px;
	height: 230px;
}

ul#itemlist li .thumb img{
	width: 100%;
	height: 100%;
	object-fit:contain;
}

ul#itemlist li h3{
	background: #b39f76;
	padding: .6em 1em;
	display: flex;
	align-items: center;
	font-size: 1.2em;
	color: #fff;
	}


ul#itemlist li h3 span{
	text-align: center;
	margin-right: 1em;
	font-size: .8em;
	padding: .1em .6em;
	border-radius: 3px;
	position: relative;	
}


.iteminfo{padding: 1.5em 1.5em 0}

.point{margin: 1em 1.5em}
.itemlink{
	width: 100%;
	padding: 0 1.5em;
	position: absolute;
	bottom: 1.5em;}


	

@media screen and (min-width: 481px) and (max-width: 1023px) {
	ul#itemlist >li{
		width: calc( ( 100% - 30px ) / 2 );
		margin:0 30px 2em 0;}
	ul#itemlist > li:nth-child( 2n ) {margin-right: 0;}
	.item_inner{
	background: #fff;
	}

}	


@media (min-width: 668px) {
	#item{padding: 4em 0;}
}	

@media  (min-width: 1024px) {
	
	ul#itemlist > li{
		width: calc( ( 100% - 60px ) / 3 );
		margin:0 30px 2em 0; 
	}
	ul#itemlist > li:nth-child( 3n ) {margin-right: 0;}
	.iteminfo{padding: 2em 2em 0}
}

.plink{
	max-width: 400px;
	margin: 0 auto;
	width: 90%
}


/* ************************************************ 
*	#news
* ************************************************ */

#news{padding: 2em 0}

.date{
	color: #b39f76;
	font-weight: bold;
}
.new{color: #f90005;margin: 0 5px}

#news ul{
	max-width: 800px;
	margin: 0 auto
}

#news li{
	border-bottom: dashed 1px #666;
	padding: 1em 0;
	display: flex;
	align-items: center
}

#news li:last-child{
	border-bottom:none
}

#news li div:nth-child(1){
	width: 100px;
	border: solid 2px #eee
}

#news li div:nth-child(2){
	width: calc(100%-100px;);
	margin-left: 1.5em
}
#news li div:nth-child(2) a{
	display: block;
	font-size: 1.1em
}

#news li div:nth-child(2) a:hover{
	color: #e4007f
}

@media (max-width: 667px) {
	#news a{display: block}
}	

@media  (min-width: 668px) {
	#news{padding: 3em 0}
	#news li{padding: 1.5em 1em}
}	


/* ************************************************ 
*	#sale
* ************************************************ */

#sale a{
	background: #006934;
	padding: 1em;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #fff;
	border: solid 2px #006934;
	position: relative;
	top: -1px;
	text-decoration: none;
	width: 90%;
	max-width: 400px;
	margin: 1em auto;
}

#sale a:hover{
	top: 0;
	opacity: .8
}

#sale img{
	width: 50px;
	margin-right: 1em
}


@media  (min-width: 668px) {
	#sale h2 br{display: none}
	#sale img{width: 80px}
}	


#sale div > span{
	font-size: 1.3em;
}
#sale h3{font-size: 2em}