﻿@charset "utf-8";
/* CSS Document */

/* リセット */
@import "normalize.css";


/* 全体 */
html,body { height: 100%;}

body {
	background: #ffffff;
	font-family: Verdana, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 14px;
	color: #333333;
	max-width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	/*position: relative;*/
	}

/*div#container { padding-bottom: 147px;}*/

div.clear { clear: both;}

.hide { display: none;}
.pchide { display: none;}
.sphide { display: block;}
a { color: #333;}
a:visited { color: #333;}
a:hover { text-decoration: underline; color: #ccc;}



.flex{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.column2{
	width: 49%;
}
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
.column2{
	width: 100%;
}
}

/* ヘッダー */
.spmenu{
	height: 60px;
}


#header { margin: 0 auto 50px;}

#logo {
	background-color: #000000;
	text-align: center;
	margin: 0 auto 30px;
	padding-top: 15px;
	padding-bottom: 15px;
	}

#logo h1 {
	/* [disabled]width: 960px; */
	margin: 0 auto;
	background-color: #fff;
	height: 50px;
	}

#nav {
	width: 960px;
	margin: 0 auto 0;
	padding: 0 47px;
	}

#nav ul li {
	border-right: solid 1px #333333;
	width: 158px;
	text-align: center;
	float: left;
	}
#nav ul li#first { border-left: solid 1px #333333; width: 158px;}

#nav ul li a { text-decoration: none; color: #333333; display: block; padding: 10px 0;}
#nav ul li a:visited { color: #333333;}
#nav ul li a:hover { background: #000000; color: #ffffff;}


/* コンテンツ */
#contents {
	width: 960px;
	margin: 0 auto;
	padding: 0 47px;
	}

.contents_title {
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	margin: 20px auto 50px;
	line-height: 1.6;
	}

.contents_title span{
	font-size: 12px;
	text-align: center;
	font-weight: normal;
	}



#contents_subtitle {
	font-size: 24px;
	font-weight: bold;
	text-align: left;
	margin: 0 auto 20px;
	color: #e60012;
	line-height: 60px;
	top: 0px;
	bottom: 0px;
	height: 60px;
	background-image: url(img/img_fukubukuro.jpg);
	background-position: left 0%;
	background-repeat: no-repeat;
	vertical-align: 30px;
	text-indent: 60px;
	}

.heading {
	background: #333333;
	color: #ffffff;
	line-height: 40px;
	height: 40px;
	margin: 0 0 30px;
	padding: 0 20px;
	}


/* フッター */
#footer {
	background: #333333;
	color: #ffffff;
	font-size: 12px;
	width: 100%;
	height: 147px;
	/*position: absolute;
	bottom: 0;*/
	}

#footer a{
	color: #fff;
	text-decoration: none;
}
#footer a:visited { color: #fff;}

#menu {
	width: 960px;
	margin: 0 auto;
	padding: 20px 47px;
	}

#menu h1 {
	margin: 0 0 20px;
	}

#menu li {
	float: left;
	}


/* コピーライト */
#piped_container { background: #000000;}

#piped {
	line-height: 40px;
	width: 960px;
	height: 40px;
	margin: 0 auto;
	padding: 0 47px;
	}

#copyright {
	width: 720px;
	float: left;
	}


/* ページトップ */
#backTop {
	background: url('img/up_arrow.png') no-repeat 206px center;
	border-right: solid 1px #333333;
	border-left: solid 1px #333333;
	width: 198px;
	float: left;
	padding: 0 20px;
	cursor: pointer;
	}
#backTop:hover { background: url('img/up_arrow.png') no-repeat 206px center #444444;}




/* コンテンツ */
#contents { width: 100%; padding: 0;}

.wrapper{
	width: 960px;
	margin: 0 auto;
}

.back_gray{
	background: #f8f8f8;
	padding: 0 0 50px 0;
}
/*ニュース*/
#news {
	padding: 30px 0 50px 0;
	}

#news dl {
	padding: 20px;
    border-bottom: dotted 1px #333333;
}
#news .dl-first {
    border-top: dotted 1px #333333;
}

#news dt {
    font-weight: bold;
    line-height: 1.2em;
	float: left;
}
#news dd {
    margin-left: 120px;
    line-height: 1.2em;
}




/* 会社概要 */
#company {
}
/*#company {
	width :49%;
	margin-right: 2%;
	float:left;
}*/
.middle_ttl{
	margin: 20px 0;
	font-weight: bold;
	font-size: 1.3em;
}
#company dl {
	padding: 10px;
}

#company dt {
    border-bottom: dotted 1px #333333;
    font-weight: bold;
    padding: 0 0 10px;
    line-height: 1.2em;
}
#company dd {
    margin: 10px 0 20px 20px;
    line-height: 1.2em;
}

/* ブランド */
#brand {
}
/*#brand {
	width :49%;
	float:left;
}
#brand ul{
	padding: 10px;
}*/
#brand li{
	font-weight: bold;
	border-bottom: dotted 1px #333333;
    padding: 15px 10px;
}



.brand_shop {
	padding: 20px;
}
.brand_shop img{
	max-width: 100%;
	width:100%;
}
.brand_shop dl{
	font-weight: bold;
	border-bottom: dotted 1px #333333;
    padding: 10px;
	clear: both;
}
.brand_shop dt{
	padding-bottom: 5px;
}
.brand_shop dd{
}


/*ショップリスト*/
#shops{
	
}
#shops h3{
	text-align: center;
	padding: 15px 0;
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
}
#shops h3 img{
	max-width:100%;
}
#shops .shop_list{
	margin: 40px auto;
}
#shops .shop_left{
	width: 49%;
	margin-right: 2%;
	float: left;
}
#shops .shop_right{
	width: 49%;
	float: left;
}
#shops .desc2{
	font-weight: bold;
	padding: 10px;
	border-bottom: dotted 1px #333333;
}

#shops .desc2 dt{
	padding: 5px;
	float: left;
	width:40%;
}

#shops .desc2 dd{
	padding: 5px;
	margin-left: 45%;
}
.shop_brand {
	padding: 20px;
}
.shop_brand ul{
	padding: 10px;
}
.shop_brand li{
	font-weight: bold;
	border-bottom: dotted 1px #333333;
    padding: 10px;
}

/* スライダー */
.slider{
    margin: 0px auto 100px;
    width: 100%;
}
.slider img{
    height: auto;
    width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

.pagination {
	width: 472px;
	margin: 0 auto;
	}

.pagination li {
	float: left;
	display: inline;
	margin: 0 10px;
	}

.pagination li a {
	background: url('../img/slider_bullet.png') no-repeat -15px 0;
	width: 16px;
	height: 0;
	display: block;
	padding: 15px 0 0;
	overflow: hidden;
	}
.pagination li a:hover { background-position: 0 0;}
.pagination li.current a { background-position: 0 0;}



.article {
	border-right: solid 1px #222222;
	border-left: solid 1px #444444;
	width: 198px;
	float: left;
	padding: 0 20px;
	}
#article_first { border-left: none;}
#article_last { border-right: none;}

.article h1, .article p { line-height: 160%;}

.article p img { width: 100%; height: auto;}

.article p time { font-size: 12px;}


/* カルーセル */
.ca-container {
	width: 990px;
	height: 275px;
	margin: 0 auto 15px;
	position: relative;
	}

.ca-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	}

.ca-item {
	text-align: center;
	width: 330px;
	height: 100%;
	position: relative;
	float: left;
	}

.ca-item-main {
	background: #f8f8f8;
	box-shadow: 0px 8px 8px -8px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 8px 8px -8px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0px 8px 8px -8px rgba(0,0,0,0.4);
	-o-box-shadow: 0px 8px 8px -8px rgba(0,0,0,0.4);
	-ms-box-shadow: 0px 8px 8px -8px rgba(0,0,0,0.4);
	position: absolute;
	top: -2px;
	left: 61px;
	right: 15px;
	bottom: 15px;
	overflow: hidden;
	padding: 20px;
	}

#brands { background: #333333;}

#brands h1 { font-size: 12px; height: 235px; line-height: 235px;}

#brands h1 a {
	background: url('../img/right_arrow.png') no-repeat 253px center #333333;
	text-align: left;
	display: block;
	padding: 0;
	}

#brands h1 a:hover { text-decoration: underline;}

.ca-item-main h1 { color: #f8f8f8;}

.ca-item-main h1 a {
	background: url('../img/right_arrow.png') no-repeat 233px center #333333;
	text-align: left;
	display: block;
	padding: 10px 20px;
	}

.ca-item-main h1 a:hover {
	background: url('../img/right_arrow.png') no-repeat 233px center #444444;
	text-decoration: none;
	}

.ca-item-main p { margin: 0 0 20px;}

.ca-item-main img { width: 100%; height: auto;}

.ca-nav span {
	background-repeat: no-repeat;
	background-image: url(../img/slider_arrow.png);
	text-indent: -9000px;
	width: 27px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: -32px;
	margin-top: -25px;
	cursor: pointer;
	z-index: 100;
	}

.ca-nav span.ca-nav-next {
	background-position: -27px 0;
	left: auto;
	right: -32px;
	}


/* ショップ */
#shop_container {
	background-repeat: no-repeat;
	background-position: center bottom;
	background-image: url(../img/boxshadow.png);
	width: 960px;
	margin: 0 auto 10px;
	padding: 0 0 20px;
	}

#shop {
	height: 592px;
	overflow: hidden;
	}

#shop h1 {
	background: #333333;
	line-height: 148px;
	font-size: 12px;
	width: 240px;
	height: 148px;
	float: left;
	}

#shop h1 a {
	background: url('../img/right_arrow.png') no-repeat 213px center;
	display: block;
	padding: 0 20px;
	}

#shop ul li {
	width: 240px;
	height: 148px;
	float: left;
	background-color: #fff;
	}
#shop ul li#bg {
	width: 720px;
	height:148px;
	background:#fff;
	}

#shop ul li img { width: 100%; height: auto;}




@media screen and (max-width: 960px) { /*ウィンドウ幅が767px以上の場合に適用*/
.wrapper{
	width: 100%;
}
#header {
    margin: 0 auto 10px;
}
}

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
#menu-bg {
background-color: #FF0000; /*赤色*/
}
#company,
#brand{
	margin:10px auto;
}
/*#company,
#brand{
	width :98%;
	margin:10px auto;
	float:none;
}*/
#brand ul{
	padding: 10px;
}

#shops .shop_left,
#shops .shop_right{
	width :98%;
	margin:10px auto;
	float:none;
}
	
.pchide { display: block;}
.sphide { display: none;}

#menu{
	width: auto;
}
#piped{
	width: auto;
}
#copyright{
	width: auto;
}
}

@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
#menu-bg {
background-color: #00FF00; /*緑色*/
}



}





