@charset "UTF-8";

/*layout.css121-- .home
----------------------------------------------- */
/*#headerwrap{overflow:hidden;}
.home #header #images{
position:relative; top:0; left:50%; height:auto;
}
.home #header #images .image{
position:relative; top:0; left:-60px;
background:#000;
}
.home #containerwrap #maincol{
margin-top:-738px;
width:420px;
}*/


.wrapper {
	display:flex;
	flex-direction:row-reverse;
	justify-content:space-between;
	max-width:960px;
	margin:0 auto;
}
#headerwrap {
	width:760px;
	margin-right:-220px;
	background:#15130c;
}
#headerwrap #header {
	width:540px;
	margin:0;
}
#headerwrap #header #images {
	height:auto;
}
#headerwrap #header #images .image {
	position: relative;
	left:0;
	width:760px;/*1200px*/
}
#headerwrap #header #images .image::after { /* この要素が内向きのシャドウを写真に落とす */
	position: absolute;
	display: block;
	content:'';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset -20px -20px 40px #15130c;

}
#containerwrap {
	width:420px;
}
#containerwrap #container,
#containerwrap #container #maincol {
	width:auto;
}

@media screen and (max-width:959px) {
.wrapper {
	display:block;
}
#headerwrap {
	width:100%;
	margin:0 auto;
}
#headerwrap #header {
	width:auto;
}
#headerwrap #header #images {
	height:420px;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#000;
}
#headerwrap #header #images .image {
	width:100%;
}
#headerwrap #header #images .image::after {
	content:none;
}
#headerwrap #header #images .image img {
	width:100%;
	height:420px;
	object-fit:cover;
	object-position:50% 72%;
}
.home-copy {
	position:absolute;
	display:flex !important;
	justify-content:center;
	align-items:center;
	height:60%;
}
.home-copy img {
	width:auto;
	max-width:100%;
	height:100%;
	vertical-align:middle;
}
#containerwrap {
	width:auto
}
}


/*==============================================================
	Mokuji
==============================================================*/
.home #mokuji {
	padding:4.0rem 0 0 10px;
}
.home #mokuji h3 {
	margin-top:24px;
	margin-bottom:0;
}
.home #mokuji h3#h_index_items,
.home #mokuji h3#h_index_onlineshop {
	margin-top:16px;
}
.home #mokuji ul {
	padding-bottom:0;
}

@media screen and (max-width:959px) {
.home #mokuji {
	padding:0 0 0 10px;
}
}

/*==============================================================
	Latest News
==============================================================*/
.home .news {
	padding-left:10px;
	margin-top:10px;
}
.home .news h3 {
	font-size:13px;
	margin-bottom:5px;
}
.home .news dl {
	margin-bottom:8px;
}
.home .news dt {
	font-size:12px;
	color:#666;
}
.home .news dd {
	font-size:13px;
	color:#666;
}
.home .news-more {
	margin-top:12px;
	font-size:12px;
}

.home .news-more a {
	color:#666;
	text-decoration:none;
}
.home .news-more a:hover {
	color:#999;
}
.home .news-more a::before {
	content:'';
	display:inline-block;
	width:0.8em;
	height:1em;
	background-color:#999;
	vertical-align:middle;
	margin-right:0.2em;
	clip-path:polygon(0% 0%, 100% 50%, 0 100%);
}

@media screen and (max-width:959px) {
.home .news {
	margin-top:40px;
}
}

/*==============================================================
	Banner
==============================================================*/


/*navigation.css266-- home banner
----------------------------------------------- */
#banners {
	margin-top:24px;
	padding-bottom:1.0rem;

}
#banners ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	max-width:350px;
}
#banners ul li {
	margin-bottom:6px;
}
#banners ul li a:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
}


@media screen and (max-width:959px) {
#banners ul {
	margin:0 auto;
}
#banners ul li {
	width:48.5%;		/*170px ÷ 350px*/
	max-width:170px;
}
#banners ul li:first-child,
#banners ul li:nth-child(2) {
	width:100%;
	max-width:350px;
}
#banners ul li img {
	width:100%;
	max-width:100%;
	height:auto;
	vertical-align:middle;
}
}