@charset "utf-8";


/* --------------------------------------------------------------------------------
	タグ
-------------------------------------------------------------------------------- */
html{
	
}
body {
	margin: 0;
	padding: 0;
	min-width: 1200px;
	line-height: 1.5;
	text-size-adjust: 100%;
	font-family: 'Roboto','Noto Sans JP',"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight: 400;
	color: #000000;
}

img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

address{
	font-style: normal;
}


/* --------------------------------------------------------------------------------
	共通
-------------------------------------------------------------------------------- */
.common {
	font-size: 14px;
}

.common * {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: 'Roboto','Noto Sans JP',"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight: 400;
}

.common h1,
.common h2,
.common h3,
.common h4,
.common h5,
.common h6 {
	font-size: 1em;
}
.common ol,
.common ul{
	list-style: none;
}
.common table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 1em;
}
.common a,
.common a:link,
.common a:visited{
	text-decoration: none;
	color: #000000;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
	tap-highlight-color: rgba(0,0,0,0.8);
}
.common a:hover,
.common a:active{
	text-decoration: underline;
}

input,
select,
textarea{
	outline: none !important;
	box-shadow: none !important;
}


/* --------------------------------------------------------------------------------
	共通クラス
-------------------------------------------------------------------------------- */
.clear{
	clear:both;
}
br.clear{
	display: block;
	margin: 0;
	padding: 0;
	clear: both;
	height: 0;
	border: none;
	visibility: hidden;
	font-size: 0;
}
.clearfix::after{
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix{
	min-height:1%;
}
* html .clearfix{
	height:1%;
	/*\*//*/
	height:auto;
	overflow:hidden;
	/**/
}

.font-mincho,
.font-mincho *{
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 400;
}


/* --------------------------------------------------------------------------------
	デバイスごとの表示・非表示
-------------------------------------------------------------------------------- */
.device-sp{
	display: none;
}
.device-sp-inline{
	display: none;
}
.device-pc{
	display: block;
}
.device-pc-inline{
	display: inline;
}

.inner{
	width: 1200px;
	margin: 0 auto;
}


/* --------------------------------------------------------------------------------
	container
-------------------------------------------------------------------------------- */
#container{
}


/* --------------------------------------------------------------------------------
	header
-------------------------------------------------------------------------------- */
#header .h-txt{
	text-align: center;
	font-size: 14px;
	background: #f0f0f0;
	line-height: 1;
	padding: 13px 0;
}
#header .h-txt .mark1{
	color: #b40000;
	font-weight: bold;
}
#header .header-fix{
	border-bottom: solid 1px #dcdcdc;
	
	width: 100%;
	background: #fff;
}
#header.fixed .header-fix{
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
}

/********** ヘッダーコンテンツ **********/
#header .h-contents {
	padding: 16px 55px 15px 50px;
	display: flex;
	justify-content: space-between;
	
	width: 100%;
	border-bottom: solid 1px #dcdcdc;
}

/********** MENU **********/
#header .h-btn-menu {
	width: 150px;
	padding: 7px 0 0;
	cursor: pointer;
	display:table;
}
#header .h-btn-menu img{
	display:table-cell;
}
#header .h-btn-menu .txt-menu{
	display:table-cell;
	vertical-align:middle;
	width: 110px;
	color:#7d7d7d;
	font-size:15px;
}


/********** ロゴ **********/
#header .h-logo {
}
#header .h-logo a {
	display: block;
}
#header .h-logo img {
	display: block;
}

/********** ボタン **********/
#header .h-btn {
	width: 150px;
	padding: 5px 0 0;
}
#header .h-btn ul {
	display: flex;
	justify-content: space-between;
	
	width: 100%;
}
#header .h-btn ul li a {
	display: block;
    position: relative;
}
#header .h-btn ul li a img {
	display: block;
}

/* カート数量 */
#header .h-btn span.fs-client-cart-count {
    display: block;
    position: absolute;
    width: 1.3em;
    height: 1.3em;
    top: -4px;
    right: 14px;
    text-align: center;
    font-size: 100%;
    color: #ffff;
    background-color: #c42632;
    border-radius: 2em;
    z-index: 999;
}

/********** メニュー **********/
#header .h-menu {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	
	width: 100%;
	background: #fff;
	
	display: none;
}

/* active */
#header.h-menu-active .h-menu {
	display: block;
}

/********** オーバーレイ **********/
#header .overlay{
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	
	width: 100%;
	height: 100%;
	
	background: rgba(0,0,0,0.4);
	
	display: none;
}

/* オーバーレイactive */
#header.h-menu-active .overlay {
	display: block;
}


/********** h-menu-wrapper **********/
#header .h-menu .h-menu-wrapper{
	position: relative;
	width: 940px;
	margin: 0 auto;
	padding: 30px 0 60px;
}

/********** クローズボタン **********/
#header .h-menu .h-btn-close{
	position: absolute;
	margin: 0 0 0 -60px;
	cursor: pointer;
}
#header .h-menu .h-btn-close img{
	display: block;
}
#header .h-menu .h-menu-box{
	
}

/********** greeting-search **********/
#header .h-menu .greeting-search{
	display: flex;
	justify-content: space-between;
	
	width: 100%;
	padding: 5px 0 30px;
}
#header .h-menu .greeting-search .txt-greeting{
	width: 420px;
}

/********** ●●様 **********/
#header .h-menu .txt-greeting {
	padding: 8px 0 7px;
	font-size: 16px;
}

/********** 検索 **********/
#header .h-menu .greeting-search .search{
	display: flex;
	
	width: 470px;
}
#header .h-menu .greeting-search .search form{
	display: flex;
	
	width: 100%;
	
	border-radius: 50px;
	border: solid 1px #7d7d7d;
}
#header .h-menu .greeting-search .search form .search-box{
	display: flex;
	align-items: center;
	
	width: 420px;
	margin: 0 auto;
}
#header .h-menu .greeting-search .search form .search-box .txt-search{
	display: block;
}
#header .h-menu .greeting-search .search form .search-box .txt-search input{
	display: block;
	width: 390px;
	padding: 10px 0;
}
#header .h-menu .greeting-search .search form .search-box .img-search input{
	display: block;
	width: 32px;
	height: auto;
}

/********** btn-menu-home **********/
#header .h-menu .btn-menu-home{
	padding: 0 0 32px;
}
#header .h-menu .btn-menu-home a{
	display: block;
}

/********** メニュー **********/
#header .h-menu .menu-list-wrapper {
	display: flex;
	
	width: 100%;
}
#header .h-menu .menu-list-box {
	/*width: 210px;
	margin: 0 20px 0 0;*/
	width: 173px;
	margin: 0 15px 0 0;
}

/********** リスト **********/
#header .h-menu .menu-list-unit .heading{
	padding: 0 0 5px;
    margin: 0 0 10px;
	font-size: 13px;
	font-weight:bold;
	color: #333333;
	border-bottom: solid 1px #dcdcdc;
}

/********** リスト **********/
#header .h-menu .menu-list-unit ul li{
	padding: 0 0 7px;
}
#header .h-menu .menu-list-unit ul li a{
	display: block;
}


/* --------------------------------------------------------------------------------
	グローバルナビ
-------------------------------------------------------------------------------- */
#header .h-gnav{
	width: 100%;
}
#header .h-gnav-menu{
	max-width: 1200px;
	margin: auto;
	display: flex;
}
#header .h-gnav-menu > li{
	text-align: center;
	width: 200px;
}
#header .h-gnav-menu > li a{
	display: block;
	margin: 9px 0;
	color: #000000;
	text-decoration: none;
	font-size: 14px;
	border-left: solid 1px #dcdcdc;
}
#header .h-gnav-menu > li:last-child a{
	padding-right: 0;
	border-right: solid 1px #dcdcdc;
}

/********** ドロップダウン：hover部分 **********/
#header ul.h-gnav-menu li.open-close{
	display: block;
}
#header ul.h-gnav-menu li.open-close .open-close-btn {
	cursor: pointer;
	margin: 9px 0;
	font-size: 14px;
	border-left: solid 1px #dcdcdc;
}
#header ul.h-gnav-menu li.open-close .open-close-contents {
	position: absolute;
	z-index: 100;
	
	width: 250px;
	margin: 0 0 0 -25px;
	background: rgba(255,255,255,0.9);
}
#header ul.h-gnav-menu li.open-close .open-close-contents ul li {
	border-bottom: solid 1px #dcdcdc;
}
#header ul.h-gnav-menu li.open-close .open-close-contents ul li:last-child {
	border-bottom: none;
}
#header ul.h-gnav-menu li.open-close .open-close-contents ul li a {
	display: block;
	padding: 13px 13px 14px;
	color: #000;
}


/*
ドロップダウン部分通常時
-------------------- */
#header ul.h-gnav-menu li.open-close .open-close-contents{
	display: none;
}


/*
ドロップダウン部分ホバー時
-------------------- */
#header ul.h-gnav-menu li.open-close:hover .open-close-contents{
	display: block;
}



/* --------------------------------------------------------------------------------
	footer
-------------------------------------------------------------------------------- */
#footer {
	padding: 62px 0 0;
}

/********** フッターinner **********/
#footer .footer-inner {
	padding: 45px 0 34px;
	background: #e6e6e6;
}

/********** フッターコンテンツ **********/
#footer .f-contents {
	display: flex;
	
	width: 100%;
	padding: 0 0 57px;
}
#footer .f-contents ul{
	margin-top: 10px;
}

/********** footer-info **********/
#footer .f-info {
	width: 600px;
}
#footer .f-info .f-logo {
	padding: 0 0 15px;
}
#footer .f-info .f-logo a {
	width: 200px;
	display: block;
}
#footer .f-info .f-logo img {
	display: block;
}
#footer .f-info .heading {
	padding: 0 0 2px;
	font-size: 13px;
}
#footer .f-info .sheading {
	font-size: 14px;
}
#footer .f-info .company-info .company-info-box {
	line-height: 1.4;
	font-size: 13px;
}


/********** members-menu **********/
#footer .members-menu {
	width: 200px;
	/*padding: 2px 0 0;*/
	font-size: 13px;
	margin-right: 40px;
}
#footer .members-menu .heading {
	padding: 0 0 4px;
	font-weight: bold;
	font-size: 13px;
	color: #333333;
	border-bottom: 1px solid #333;
}
#footer .members-menu ul li {
	padding: 0 0 4px;
	font-size: 13px;
}
#footer .members-menu ul li a {
	display: block;
	text-decoration: none;
}


/********** information-menu **********/
#footer .information-menu {
	width: 180px;
	margin-right: 40px;
}
#footer .information-menu .heading {
	padding: 0 0 3px;
	font-weight: bold;
	font-size: 13px;
	color: #333333;
	border-bottom: 1px solid #333;
}
#footer .information-menu ul li {
	padding: 0 0 2px;
	font-size: 13px;
}
#footer .information-menu ul li a {
	display: block;
	text-decoration: none;
}


/********** sdgs-menu **********/
#footer .sdgs-menu {
	width: 180px;
}
#footer .sdgs-menu .heading {
	padding: 0 0 3px;
	font-weight: bold;
	font-size: 13px;
	color: #333333;
	border-bottom: 1px solid #333;
}
#footer .sdgs-menu ul li {
	padding: 0 0 2px;
	font-size: 13px;
}
#footer .sdgs-menu ul li a {
	display: block;
	text-decoration: none;
}


/********** sns **********/
#footer .f-sns ul {
	display: flex;
	justify-content: center;
	
	margin: 0 auto;
}
#footer .f-sns ul li{
	margin: 0 5px;
}
#footer .f-sns ul li a {
	display: block;
}
#footer .f-sns ul li a img {
	display: block;
	width: 50px;
	height: auto;
}
#footer .f-sns ul li a:hover img {
	opacity: 0.8;
}





/********** copyright **********/
#footer .copyright {
	padding: 17px 0;
	text-align: center;
	font-size: 12px;
}
#footer .copyright .mark-1 {
	margin: 0 0 0 8px;
	font-size: 10px;
}




/********** サイトマップ **********/
#footer .sitemap .sitemap-box {
	display: flex;
	width: 810px;
}
#footer .sitemap ul {
	width: 260px;
}
#footer .sitemap ul li {
	padding: 0 0 7px;
}
#footer .sitemap ul li a {
	display: block;
	padding: 0 0 0 17px;
	font-size: 13px;
	background: url("../images/common/f-icon-arr.png") no-repeat 0 5px;
}



/********** pagetop **********/
#footer .f-btn-pagetop{
	position: fixed;
	right: 20px;
	bottom: 60px;
	z-index: 100;
	
	width: 60px;
	height: 60px;
}
#footer .f-btn-pagetop a{
	display: block;
}
#footer .f-btn-pagetop img{
	display: block;
	width: 12vw;
	height: auto;
}




/********** brand site **********/
#footer .f-btn-brandsite{
	position: fixed;
	right: 18px;
	bottom: 125px;
	z-index: 100;
	
	width: 70px;
	height: 70px;
	border:1px solid #999999;
}
#footer .f-btn-pagetop a{
	display: block;
}
#footer .f-btn-pagetop img{
	display: block;
	width: 100%;
	height: auto;
}