@charset "utf-8";


@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');



/* --------------------------------------------------------------------------------
	body
-------------------------------------------------------------------------------- */
html{
}
body {
	margin: 0;
	padding: 0;
	min-width: 1200px;
	line-height: 1.5;
	text-size-adjust: 100%;
	color: #000;
	background: #ffffff;
	font-family: "Lato", MyYuGothicM, "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: 500;
}


/* --------------------------------------------------------------------------------
	タグ
-------------------------------------------------------------------------------- */
.common {
	font-size: 16px;
}
.common * {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: "Lato", MyYuGothicM, "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: 500;
    
}

.common h1,
.common h2,
.common h3,
.common h4,
.common h5,
.common h6 {
	font-size: 1em;
	letter-spacing: 0.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: #333333;
    -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;
	opacity: 1;
}

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


/* --------------------------------------------------------------------------------
	共通クラス
-------------------------------------------------------------------------------- */
.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;
	/**/
}


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



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



/* --------------------------------------------------------------------------------
	header
-------------------------------------------------------------------------------- */
#header{
	background: #fff;
	
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
}


/* ヘッダー固定 */
#global-nav {
	background: #fff;
	width: 100%;
}
#global-nav.m_fixed {
	left: 0;
	position: fixed;
}

/* 送料無料 */
#header .h-txt{
	text-align: center;
	background: #1a1a1a;
	color: #fff;
	padding: 10px;
	font-size: 14px;
}

/* ロゴ */
#header .h-logo {
	width: 485px;
	margin: 35px auto 30px auto;
}
#header .h-logo a {
	display: block;
}
#header .h-logo img {
	display: block;
}

/* ナビゲーション */
#header .h-nav {
	border-top: 1px solid #ccc;
	border-bottom:  1px solid #ccc;

	background: #fff;

	position: relative;
	justify-content: space-between;
	width: 100%;
	z-index: 100;
}
#header .h-nav .inner{
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;	
}
#header .h-nav .inner > nav > ul {
	position: relative;
	width: 750px;
	display: flex;
	justify-content: space-between;
}
#header .h-nav .inner > nav > ul li a {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
#header .h-nav .inner > nav > ul li a:hover {
	font-weight: 700;
}
#header .h-nav .inner nav ul li.open-close {
	position: relative;
}
#header .h-nav .inner nav ul li.open-close:hover .open-close-btn a{
	font-weight: 700;
}
#header .h-nav .inner nav ul li.open-close::after {
	position: absolute;
	bottom: 15px;
	left: 0%;
	content: '';
	width: 100%;
	height: 2px;
	background: #050505;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
}
#header .h-nav .inner nav ul li.open-close:hover::after {
	transform: scale(1, 1);
}

#header .h-nav .inner > nav >  ul > li{	
	display: block;
}
#header .h-nav .inner > nav > ul > li > a,
#header .h-nav .inner > nav > ul > li.open-close .open-close-btn a {
	padding: 17px 0;
}

/*メニュー*/
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents {
	position: absolute;
	z-index: 1;
	top:58px;
	left: 0;
	background: #fff;
	border-top: 1px solid #ccc;
}
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner{
	width: 1150px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
/*	border-right: 1px solid #eae9e5;
	border-left: 1px solid #eae9e5;*/
}
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-item {
	width: 300px;
	padding: 30px 30px 0 30px;
	position: relative;
}
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-scene {
	width: 350px;
	padding: 30px 30px 0 30px;
	position: relative;
}
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-price {
	width: 220px;
	padding: 30px 30px 60px 30px;
	position: relative;
}
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-keyword {
	width: 330px;
	padding: 30px 30px 0 30px;
}

/*検索ボックス*/
#header .serch {
	width: 250px;
	margin-bottom: 20px;
}
#header .serch .fs-p-searchForm__input {
	width: calc(100% - 2.2em);
	padding: 5px 10px;
}
#header .serch .fs-p-searchForm__button {
	overflow: hidden;
	position: relative;
	text-indent: -999px;
	width: 2.2em;
	height: 2em;
}
#header .serch .fs-p-searchForm__button::before {
	font-family: "fs-icon" !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e932";
	display: block;
	font-size: 2.2rem;
	line-height: 1.4;
	position: absolute;
	text-indent: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
#header .fs-p-inputGroup {
	display: flex;
	align-items: stretch;
	border: 1px solid #eae9e5;
	background: #eae9e5;
}
#header .fs-p-inputGroup__input {
	border: none;
	border-radius: 0;
	width: calc(100% - 3em);
	flex-grow: 1;
}
#header .fs-p-inputGroup__button {
	background: #eae9e5;
	border: none;
	color: #000;
	width: auto;
	flex-shrink: 0;
}


/*商品シリーズ*/
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner-series .s-series {
	width: 300px;
	padding: 30px;
	position: relative;
}

#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .heading{
	font-size: 18px;
	font-weight: 700;
	padding-bottom: 20px;
}
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents  ul li a {
	display: block;
	padding: 5px;
}
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents  ul li a:hover {
	display: block;
	padding: 5px;
	font-weight: normal;
}
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents  ul li a::after{
	display:none;
}

#header .h-nav .inner .btn-all-item{
	text-align: right;
	padding: 0 20px 20px 0;
}
#header .h-nav .inner .btn-all-item a{
	display: block;
	font-weight: 700;
}


/*縦線*/
/*#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-scene::before{
	position: absolute;
	top: 7%;
	right: 100%;
	content: "";
	width: 1px; 
	height: 105%;
	background-color: #ccc;
}*/
/*#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner-series .s-series::before{
	position: absolute;
	top: 7%;
	right: 100%;
	content: "";
	width: 1px; 
	height: 90%;
	background-color: #ccc;
}*/
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-item::after,
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-scene::after,
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-price::after{
	position: absolute;
	top: 7%;
	left: 100%;
	content: "";
	width: 1px; 
	height: 90%;
	background-color: #ccc;
}
/*#header .h-nav .inner > nav > ul > li.open-close .open-close-contents .inner .s-keyword::after{
	position: absolute;
	top: 7%;
	left: 100%;
	content: "";
	width: 1px; 
	height: 90%;
	background-color: #ccc;
}*/




/*
ドロップダウン部分通常時
-------------------------- */
#header .h-nav .inner > nav > ul > li.open-close .open-close-contents{
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
/*
ドロップダウン部分ホバー時
-------------------------- */
#header .h-nav .inner > nav > ul > li.open-close:hover .open-close-contents{
	visibility: visible;
	opacity: 1;
}



/* ----------------------------------------------------------------------------------------
 ログイン・カート
----------------------------------------------------------------------------------------*/
#header .h-nav .h-help {
	width: 140px;
	position: relative;
}
#header .h-nav .h-help ul{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
#header .h-nav .h-help .help-open-close-btn {
    padding-top: 5px;
}
#header .h-nav .h-help ul li.help{
	width: 26px;
}

#header .h-nav .h-help ul li.cart{
	width: 30px;
}

#header .h-nav .h-help ul li.help a{
	position: relative;
	display: block;
	padding: 8px 0;
}
#header .h-nav .h-help ul li.cart a{
	position: relative;
	
	display: block;
	padding: 8px 0;
}


/* カート数量 */
#header .h-nav .h-help ul li.cart a .fs-client-cart-count{
	position: absolute;
	top: 5px;
	right: -8px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	
	border-radius: 20px;
	font-size: 10px;
	color: #fff;
	background: #1a1a1a;
	
	line-height: 1;
	z-index: 1;
}


/*#header .h-nav .h-help ul li.help .arrow{
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	transform: rotate(135deg);
	position: absolute;
	top: 50%;
	right: 60px;
}
#header .h-nav .h-help ul li.help:hover .arrow{
	display: none;
}
#header .h-nav .h-help ul li.help:hover::after{
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	transform: rotate(315deg);
	position: absolute;
	top: 50%;
	right:60px;
}*/


/*メニュー*/
#header .h-nav .h-help ul.help-open-close .help-open-close-contents {
	position: absolute;
	z-index: 1;
	top:56px;
	left:-100px;;
	width: 250px;
	background: #fff;
}
#header .h-nav .h-help ul.help-open-close .help-open-close-contents .inner{
	display: block;
	padding: 20px;
	border-top: 1px solid #ccc;
}
#header .h-nav .h-help ul.help-open-close .help-open-close-contents .inner .heading{
	font-size: 18px;
	font-weight: 700;
	padding-bottom: 20px;
}
#header .h-nav .h-help ul.help-open-close .help-open-close-contents .inner ul{
	display: block;
}
#header .h-nav .h-help ul.help-open-close .help-open-close-contents .inner ul a{
	text-decoration: none;
}

/* ドロップダウン部分通常時 */
#header .h-nav .h-help ul.help-open-close .help-open-close-contents{
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
/* ドロップダウン部分ホバー時 */
#header .h-nav .h-help ul li.help:hover .help-open-close-contents{
	visibility: visible;
	opacity: 1;
}

/*#header .h-nav .h-help ul li.help:hover .help-open-close-contents .inner::before{
	position: absolute;
	top: 7%;
	right: 100%;
	content: "";
	width: 1px; 
	height: 90%;
	background-color: #ccc;
}*/

/*#header .h-nav .h-help ul li.help:hover .help-open-close-contents .inner::after{
	position: absolute;
	top: 7%;
	left: 100%;
	content: "";
	width: 1px; 
	height: 90%;
	background-color: #ccc;
}*/

/* ログインメニュー表示内容切り替え */
#header .h-help .login.my-true {
	display: none;
}
#header .h-help .logout.my-false {
	display: none;
}

/* --------------------------------------------------------------------------------
	HAMBURGER
-------------------------------------------------------------------------------- */

li.ham_menu{
	width:30px;
	height: 30px;
	z-index: 101;
}

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  position: absolute;
  /*height: 60px;
  width: 60px;
  right: 20px;*/
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.hamburger_content {
	width: 250px;
	top:56px;
  height: 100%;
  /*position: fixed;*/
  bottom: 100%;
  left: 0%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
  text-align: center;
  padding-top: 20px;
	float: right;
	display: none;
}

/* メニュー黒ポチを消す */
.hamburger_list {
  list-style: none;
	display: block!important;
	padding: 20px;
	
}

li.hamburger_item{
	text-align: left;
	padding: 5px 0 10px;
	
}

.hamburger_item a {
  color: #fff;
  text-decoration: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .hamburger_content {
 display: block;/* メニューを画面に入れる */
	margin: -50px 0 0 0 ;
  
}










/********** パンくず **********/
.fs-c-breadcrumb .fs-c-breadcrumb__list {
}

.fs-c-breadcrumb .fs-c-breadcrumb__list a {
	color:#000!important;
	text-decoration: none;
}


/* --------------------------------------------------------------------------------
	SERVICE
-------------------------------------------------------------------------------- */

.service-outer img:hover {
	opacity: 0.5 ;
}

.service-outer{
	background: #eae9e5;
	padding: 100px 0;
}
.service-outer .service{
	width: 1200px;
	margin: 0px auto;
}
.service-outer .service h2{
	margin: 0;
	padding: 0 0 60px;
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.service-outer .service h2 span{
	display: block;
	font-size: 16px;
	font-weight: normal;
	padding-top: 15px;
	letter-spacing: 0
}
.service-outer .service ul{
	width: 1200px;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	list-style: none;
	margin: 0;
	padding: 0;		
}
.service-outer .service ul li{
	width: 350px;
}
.service-outer .service ul li a{
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}
.service-outer .service ul li a:hover{
	opacity: 1;
}
.service-outer .service ul li a h3{
	font-size: 22px;
	font-weight: 700;
	margin: 30px 0;
}
.service-outer .service ul li a .txt{
	/*letter-spacing: -0.13em;*/
	height: 3em;
    font-size: 15px;
}
.service-outer .service ul li a .more{
	font-weight: 800;
	text-align: right;
	padding: 30px 5px 5px 10px;
	letter-spacing: 0.1em;
    font-size: 14px;
}
.service-outer .service ul li a .more::before{
	content: ">";
	padding-right: 10px;
}

.service-outer .service ul li a:hover .more{
	color:#986641;
}








/* --------------------------------------------------------------------------------
	footer
-------------------------------------------------------------------------------- */
#footer {
	background: #1a1a1a;
	color: #fff;
	line-height: 1.8;
	letter-spacing: -0.05em;
	padding: 100px 0 65px 0;
}


/*ログインメニュー表示内容切り替え
-------------------------- */
#footer .login.my-true {
	display: none;
}
#footer .logout.my-false {
	display: none;
}


/* フッターコンテンツ 
------------------------------------------------------*/
#footer .f-contents {
	width: 1200px;
	margin: 0px auto 100px auto;
	
	display: flex;
	justify-content: space-between;
}
#footer .f-contents .items{
	width: 240px;
}
#footer .f-contents .guide{
	width: 220px;
}
#footer .f-contents .info{
	width: 320px;
}
#footer .f-contents .account{
	width: 180px;
}
#footer .f-contents .about{
	width: 230px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#footer .f-contents h3{
	font-weight: 700;
	margin-bottom: 30px;
}
#footer .f-contents ul{
	color:#999;
	line-height: 2.2;
}
#footer .f-contents ul li.heading{
	margin-bottom: 20px;
}
#footer .f-contents ul li a{
	color:#999 !important;
	text-decoration: none;
}
#footer .f-contents ul li a:hover {
	color:#fff !important;
	opacity: 1;
}

#footer .f-contents span.pdf{
	border: 1px solid #999;
	border-radius: 5px;
	padding:3px 5px;
}


/* コピーライト 
------------------------------------------------------*/
#footer .f-btn{
	width: 33px;
	margin: 0 auto 15px auto;
}
#footer .copyright{
	color: #999;
	text-align: center;
	letter-spacing: 0.1em;
	font-size: 13px;
}



/* ページ上部へ戻るボタン 
------------------------------------------------------*/
#footer #page_top{
	width: 64px;
	height: 64px;
	position: fixed;
	right: 0;
	bottom: 30px;
	background: #1a1a1a;
	z-index: 9999;
}
#footer #page_top a{
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	text-decoration: none;
}
#footer #page_top a::before{
	content: '';
	width: 18px;
	height: 18px;
	border: 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	position: absolute;
	top: 50%;
	left: 36%;
	margin-top: -4px;
	transform: rotate(-45deg);
}