@charset “UTF-8”;
/* =============================================================================

CSS Information

 File name:	layout.css

 Style Info:	レイアウト設定

 ※ スマフォファースト。CSSの上書きはPC側(device.css)で。

============================================================================= */

/* font-family: 'Lato', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato+Light:wght@300&display=swap');

/* font-family: 'Noto Sans JP', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* font-family: 'Noto Serif JP', serif; */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');


html {
	font-size: 16px;
}

body {
	overflow-x: hidden;
	position: relative;
	background: #FFF;
	color: #333;
	font-size: 16px;
	font-family: 'Lato', 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height: 1.8;
}

.font_mincho {
	font-family: 'Noto Serif JP', '游明朝', YuMincho, 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
}

a {
	text-decoration: underline;
	color: #333;
}
a:visited {
	color: #333;
}

a:hover {
	color: #999;
	text-decoration: none;
}

a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

em {
	font-weight: bold;
}

strong {
	font-weight: bold;
}

.clearfix {}
.clearfix::after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

.header p ,
.header_slim p ,
.footer_contact p ,
.footer p {
	margin: 0;
	padding: 0;
}


/* -----------------------------------------------------------------------------

 Future shop コマースクリエーター style [スタートアップテーマ(PC/タブレット)ベース]

----------------------------------------------------------------------------- */

.fs-l-header {
	padding-top: 0;
}

.fs-l-header--min {
	border-bottom: none;
}

.fs-l-footer {
	margin-top: 40px;
	background: none;
	border-top: none;
}

.fs-c-breadcrumb {
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 10px;
	color: #aaa;
	font-size: .75rem;
	text-align: right;
}

.fs-c-breadcrumb a {
	color: #aaa;
}

.fs-c-breadcrumb__list li:last-child {
	color: #333;
}



/* -------------------------------------------------------------------------------

 header

------------------------------------------------------------------------------- */

.header_wrapper {
}

.header {
	/* max-width: 1360px; */
	padding: 20px 20px;
}

.header .logo_area ,
.header_slim .logo_area {
	float: left;
	width: 620px;
	max-width: 45%;
}

.header .logo_area img ,
.header_slim .logo_area img {
	width: 280px;
	max-width: 50%;
	margin-right: 12px;
}

.header .logo_area h1 ,
.header .logo_area p ,
.header_slim .logo_area h1 ,
.header_slim .logo_area p {
	display: inline-block;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.2;
}


.header_slim {
	padding: 20px 20px;
}



/* PC/SP 共通：utility navi
----------------------------------------------------------- */

.unavi {
	position: relative;
	float: right;
	display: -webkit-flex;
	display: flex;
	justify-content: flex-end;
	width: 740px;
	max-width: 55%;
	font-size: .8125rem;
}

.unavi li a {
	position: relative;
	display: block;
	padding: 4px 12px 4px 34px;
	font-weight: 500;
	text-decoration: none;
}

.unavi li a::before {
	position: absolute;
	content: '';
	top: calc( 50% - 16px );
	left: 0;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80%;
}


/* iconはスマホドロワーと共通 */

.menu_spu li a::before ,
.menu_spu li.tel::before {
	position: absolute;
	content: '';
	top: calc( 50% - 16px );
	left: 30px;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 80%;
}

.unavi li.guide a::before ,
.menu_spu li.guide a::before {
	background-image: url(../common/icon_guide.svg);
}

.unavi li.member a::before ,
.menu_spu li.member a::before ,
.unavi li.mypage a::before ,
.menu_spu li.mypage a::before {
	background-image: url(../common/icon_member.svg);
	background-size: 74%;
}

.unavi li.login a::before ,
.menu_spu li.login a::before ,
.unavi li.logout a::before ,
.menu_spu li.logout a::before {
	background-image: url(../common/icon_login.svg);
	background-size: 72%;
}

.unavi li.wishlist a::before ,
.menu_spu li.wishlist a::before {
	background-image: url(../common/icon_heart.svg);
}

.unavi li.search {
	position: relative;
}

.unavi li.search label ,
.unavi li.search_sp label {
	display: block;
	width: 32px;
	height: 32px;	
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../common/icon_lupe.svg);
}

.unavi li.cart {
	position: relative;
	width: 36px;
	height: 36px;
	margin-left: 10px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../common/icon_cart.svg);
	background-size: auto 75%;
}

/* ログイン/ログアウト：ナビ非表示 */
.logout.my_false ,
.login.my_true ,
.member.my_true ,
.mypage.my_false {
	display: none;
}

/* カートバッジ隠しと再表示
.unavi li.cart em {
	display: none;
}
.fs-body-category .unavi li.cart em ,
.fs-body-product .unavi li.cart em ,
.fs-body-search .unavi li.cart em ,
.fs-body-cart .unavi li.cart em {
	display: inline;
}
*/

.unavi li.cart span {
	position: absolute;
	top: 0;
	right: -4px;
	min-width: 14px;
	height: 14px;
	padding: 3px;
	background: #e04848;
	border-radius: 50%;
	color: #FFF;
	text-align: center;
	line-height: 14px;
}


/* mail tel は スマホドロワーのみ */

.menu_spu li.mail a::before {
	background-image: url(../common/icon_mail.svg);
}
.menu_spu li.tel {
	position: relative;
}
.menu_spu li.tel::before {
	top: 10px;
	background-image: url(../common/icon_tel.svg);
}


/* search */

.search_wrapper {
	position: absolute;
	overflow: hidden;
	display: none;
	width: 450px;
	height: 0;
	padding: 10px;
	top: calc(100% - 2px);
	right: -30px;
	box-sizing: border-box;
	background: #EEE;
	box-shadow: 0 4px 4px rgba(0,0,0,.12);
	z-index: 9999999;
	opacity: 0;
	transition: 0.4s;
}

.search_wrapper_sp {
	position: fixed;
	display: none;
	width: 100%;
	height: 0;
	z-index: 999999999;
	opacity: 0;
	transition: 0.4s;
}
.search_wrapper_sp .search_inner {
	position: absolute;
	width: 100%;
	padding: 10px;
	top: calc(100% - 12px);
	right: 0;
	box-sizing: border-box;
	background: #EEE;
	box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

.search_btn_area {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.search_btn_sp {
	position: absolute;
	visibility: hidden;
	top: -54px;
	right: 134px;
}
.slim02 .search_btn_sp {
	right: 82px;
}

.search_wrapper form ,
.search_wrapper_sp form {
	position: relative;
}

.search_wrapper input ,
.search_wrapper_sp input {
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 8px;
	border: 1px solid #CCC;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.search_wrapper button ,
.search_wrapper_sp button {
	position: absolute;
	top: 1px;
	right: 5px;
	width: 34px;
	height: 34px;
	border: none;
	background: none;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../common/icon_lupe.svg);
	background-size: 70%;
	text-indent: -9999px;
}



/* SP ドロワーメニュー
----------------------------------------------------------- */

/* menu open btn */

.menu_btn_area {
	position: fixed;
	z-index: 99999999;
	top: 20px;
	right: 20px;
}

.menu_open_btn {
	display: block;
	overflow: hidden;
	width: 32px;
	height: 32px;
	background: url(../common/icon_menu.svg) no-repeat 50% 50%;
	background-size: 100% auto;
	text-indent: 100%;
	white-space: nowrap;
}

input[type="checkbox"]#menu_btn {
	position: absolute;
	visibility: hidden;
}

/*閉じるボタン*/
.menu_close_btn {
	display: none;
	visibility: visible;
	position: fixed;
	content: "";
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	background: url(../common/icon_menu_close.svg) no-repeat 50% 50% #FFF;
	background-size: 80%;
	z-index: 2147483647;
}
body.open_menu .menu_close_btn {
	display: block;
}

/*メニュー格納*/
#menu_wrapper_sp { 
	position:fixed;
	top: 75px;
	right: -100%;
	width: 100%;
	height: calc(100% - 75px);
	transition: 0.1s ease-in-out;
	-webkit-overflow-scrolling:touch;
	opacity: 0;
}
body.open_menu #menu_wrapper_sp {
	overflow:scroll;
	z-index: 214748364;
	right: 0;
	opacity: 1;
}

/* サブメニュー格納 */
.menu_inner { 
	position:fixed;
	top: 75px;
	right: -100%;
	width: 100%;
	height: calc(100% - 75px);
	transition: 0.1s ease-in-out;
	-webkit-overflow-scrolling:touch;
}
body.open_submenu01.menu_inner {
	overflow:scroll;
	z-index: 2147483646;
	right: 0;
}
.menu_inner.open_menu {
	overflow:scroll;
	-webkit-overflow-scrolling:touch;
	z-index: 2147483646;
	right: 0;
}

.menu_wrapper {
/* 	padding-top: 70px; ロゴの高さ */
}
.menu_wrapper ,
.menu_inner {
	box-sizing: border-box;
	background: #FFF;
}

/* logo */
.menu_wrapper .logo_area {
/*	position:fixed;
	width: 100%;
	top: 75px;
	z-index: 9999999;*/
	padding: 10px 20px 20px;
	background: #FFF;
	box-sizing: border-box;
	text-align: center;
}
.menu_wrapper .logo_area img {
	width: auto;
	height: 40px;
}

.menu_inner em {
	position: relative;
	display: block;
	padding: 10px;
	background: #eaeaea;
	border-top: 1px solid #CCC;
	font-weight: normal;
	text-align: center;
}

.menu_inner a {
	display: inline-block;
	text-decoration: none;
}

.menu_inner em .submenu_btn {
	position: absolute;
	display: block;
	top: calc(50% - 4px);
	left: 6%;
	width: 20px;
	height: 8px;
	background: url(../common/icon_arrow_rv.svg) no-repeat;
	background-size: 100% auto;
}


/* main sub 共通 */

.menu_area {
	background: #efefef;
}

.menu_sp ,
.menu_spu ,
.menu_spd {
	margin-bottom: 10px;
	background: #FFF;
	border-top: 1px solid #CCC;
}

.menu_spd:last-child {
	margin-bottom: 0;
}

.menu_sp li ,
.menu_spu li ,
.menu_spd dt ,
.menu_spd dd ,
.menu_spd li {
	border-bottom: 1px solid #CCC;
}
.menu_spd dd:nth-child(odd) ,
.menu_spd li:nth-child(even) {
	border-left: 1px solid #CCC;
}

.menu_spd {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.menu_spd dt {
	grid-column: 1 / 3;
}

.menu_sp a ,
.menu_spu a ,
.menu_spd dt a ,
.menu_sp span {
	position: relative;
	display: block;
	padding: 12px 10px 12px 20px;
	font-size: .875rem;
	text-decoration: none;
	background: url(../common/icon_arrow.svg) no-repeat 94% 50%;
	background-size: 20px auto;
}
.menu_spu a {
	padding-left: 70px;
}
.menu_spd dd a ,
.menu_spd li a {
	display: block;
	padding: 12px 10px 12px 20px;
	font-size: .75rem;
	text-decoration: none;
}

.menu_spu li.tel {
	padding: 12px 10px 12px 70px;
}
.menu_spu li.tel i {
	font-style: normal;
}
.menu_spu li.tel p {
	margin: 8px 0 0;
}
.menu_spu li.tel b {
	font-size: .75rem;
}
.menu_spu li.tel em ,
.menu_spu li.tel em a {
	display: block;
	padding: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1.4;
	letter-spacing: .1em;
}

.menu_wrapper .sns_list {
	margin: 50px auto;
}
.menu_spd .open_win a {
	padding-top: 18px;
	background: url(../common/icon_openwin.svg) no-repeat 94% 50%;
	background-size: 20px auto;
}
.menu_spd .open_win a img {
	display: block;
	width: 60%;
	margin-bottom: 4px;
}

.menu_spd .open_win_min {
	background: url(../common/icon_openwin.svg) no-repeat 94% 50%;
	background-size: 12px auto;
}

.layer {
	display: none;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
}


/* -----------------------------------------------------------------------------

 navi

----------------------------------------------------------------------------- */

/* PC
----------------------------------------------------------- */

.navi_area {
	position: relative;
	max-width: 1360px;
	clear: both;
	margin: 0 auto 30px;
	padding: 0 20px;
	line-height: 1.2;
}

.navi {
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	justify-content: space-around;
	max-width: 100%;
	width: 1280px;
	margin: 0 auto;
	text-align: center;
}

.navi a {
	font-size: .75rem;
	text-decoration: none;
}

.navi > li > a ,
.navi > li > span {
	cursor: pointer;
	display: block;
	padding: 0px 5px 5px;
	border-bottom: 2px solid #FFF;
	font-size: .75rem;
	font-weight: 500;
}


/* dropdown */

.navi li .navi_drop {
	position: absolute;
	display: none;
	width: 100%;
	padding: 0 20px;
	top: 100%;
	left: 0;
	box-sizing: border-box;
}

.navi li:hover .navi_drop {
	display: block;
}

.navi > li:hover > a {
	border-bottom: 2px solid #50773f;
}

.navi li .navi_drop .inner {
	position: relative;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	height: auto;
	margin: 0 auto;
	padding: 40px 40px;
	box-shadow: 0 42px 40px rgba(0,0,0,.16);
	background: #FFF;
	text-align: left;
	z-index: 2147483647;
}


/* drop inner */

.navi_drop .navi_block {
	min-width: 160px;
	padding: 0 30px;
	border-right: 1px solid #CCC;
}
.navi_drop .navi_block:last-child {
	border-right: none;
}
.navi_drop .navi_block_min {
	padding: 0 0 0 30px;
}

.sub_navi {
	margin-bottom: 8px;
	line-height: 2;
}

.sub_navi_min {
	float: left;
	padding-right: 30px;
}

.sub_navi dt ,
.sub_navi dt a {
	font-size: .875rem;	
}
.sub_navi li a ,
.sub_navi dd a {
	font-weight: 400;
}

.navi_block_img img ,
.navi_block_logo img {
	display: block;
}
.navi_block_img span ,
.navi_block_logo span {
	display: inline-block;
	margin-top: 15px;
	font-size: .875rem;	
}

.navi_block_img img {
	width: 200px;
}

.navi_block_logo img {
	width: 190px;
}

.navi_drop .navi_block_logo2  {
	padding-top: 40px;
}
.navi_block_logo2 img {
	width: 260px;
	margin-right: 40px;
	margin-bottom: 20px;
}
.navi_block_logo2 p {
	margin: 0;
	font-size: .75rem;
	font-weight: 500;
	line-height: 2.8;
}




/* -----------------------------------------------------------------------------

メインコンテンツ : fs-l-main / fs-l-pageMain / side

※ fs で始まるクラスはショップ全体にかかわるので、変更するときは注意 ※
※ 変更する時はそのページの body のクラス名を調べてページだけ適応する ※

----------------------------------------------------------------------------- */

.fs-l-main {
	display: -webkit-flex;
	display: flex;
	display: block;
	clear: both;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
}

/* トップページとカテゴリページは背景突き抜けコンテンツがあるため100% */
.fs-body-top .fs-l-main ,
.fs-body-category .fs-l-main ,
.fs-body-custom .fs-l-main {
	max-width: 100%;
}

.fs-l-pageMain {
	width: 100%;
	max-width: 100%;
}

/* カテゴリページが横に突き抜けてるため カテゴリリストと商品リストに幅指定 */
.fs-c-subgroupList {
	max-width: 1000px;
	margin: 0 auto;
}
.fs-c-productList {
	max-width: 1000px;
	margin: 0 auto;
}

/* カート 会員登録など
.fs-body-cart .fs-l-main ,
.fs-body-cart-login .fs-l-main ,
.fs-body-customerDetails .fs-l-main ,
.fs-body-register .fs-l-main ,
.fs-body-my-top .fs-l-main {
	max-width: 1100px;
} */



/* -----------------------------------------------------------------------------

 footer

----------------------------------------------------------------------------- */

/* contact
----------------------------------------------------------- */

.footer_contact {
	clear: both;
	overflow: hidden;
	zoom: 100%;
	padding: 20px 20px;
}

.contact_inner {
	max-width: 1000px;
	margin: 0 auto 60px;
	padding: 0 20px;
}

.contact_inner div {
	padding: 30px 10px;
	text-align: center;
}

.contact_inner h3 {
	position: relative;
	margin: 0 -20px 20px;
	padding-top: 60px;
	font-size: 1.125rem;
	text-align: center;
}
.contact_inner h3::before {
	position: absolute;
	content: '';
	top: 0;
	left: calc( 50% - 20px );
	width: 40px;
	height: 40px;
	background-size: cover;
}
.contact_inner .contact_mail {
	padding: 0 36px 30px;
}
.contact_inner .contact_mail h3::before {
	background-image: url(../common/icon_circle_mail.svg);
}
.contact_inner .contact_tel h3::before {
	background-image: url(../common/icon_circle_tel.svg);
}
.contact_inner .contact_fax h3::before {
	background-image: url(../common/icon_circle_fax.svg);
}

.contact_inner em {
	display: block;
	padding-left: .08em;
	font-size: 2rem;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: .08em;
	white-space: nowrap;
	line-height: 1.4;
}

.contact_inner em a {
	text-decoration: none;
}

.contact_inner p {
	display: inline-block;
	margin-bottom: 10px;
	font-size: .875rem;
	text-align: left;
}

.contact_inner .btn {
	display: block;
	margin-top: 30px;
}

.contact_inner .btn a {
	width: 90%;
	background: #000;
}
.contact_inner .btn a span {
	position: relative;
	padding-left: 35px;
}
.contact_inner .btn a::before {
	content: none;
}
.contact_inner .btn a span::before {
	position: absolute;
	content: '';
	top: calc( 50% - 7px );
	left: 0;
	width: 20px;
	height: 15px;
	background-image: url(../common/icon_mailwh.svg);
	background-size: cover;
}

.contact_inner .min {
	margin: 0 -40px;
	text-align: center;
}

.contact_inner .dl_link {
	margin: 0 -40px;
	font-size: 1.125rem;
	text-align: center;
}



/* sns
----------------------------------------------------------- */

.sns_list {
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto 100px;
	padding: 0 20px;
}

.sns_list li {
	margin: 0 20px;
}

.sns_list li a {
	display: block;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	text-decoration: none;
}

.sns_list li a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.sns_list li.fb a {
	background-image: url(../common/icon_sns_fb.svg);
}

.sns_list li.tw a {
	background-image: url(../common/icon_sns_tw.svg);
}

.sns_list li.insta a {
	background-image: url(../common/icon_sns_insta.svg);
}

.sns_list li.pin a {
	background-image: url(../common/icon_sns_pin.svg);
}

.sns_list li.line a {
	background-image: url(../common/icon_sns_line.svg);
}

.sns_list li.mail a {
	background-image: url(../common/icon_mail.svg);
	background-size: 100% auto;
}



/* footer
----------------------------------------------------------- */


.footer {
	clear: both;
	background: #efefef;
}

.footer .footer_inner {
	position: relative;
	max-width: 1190px;
	margin: 0 auto;
	padding: 60px 20px 30px;
}

/* page_top */

.page_top {
	position: absolute;
	top: -25px;
	right: 20px;
	z-index: 999999;
}
.page_top a {
	cursor: pointer;
	display: block;
	width: 50px;
	height: 50px;
	background: url(../common/icon_ku_up.svg) 50% 50% no-repeat #333;
	background-size: 16px auto;
	border-radius: 50%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	z-index: 999;
}


/* logo */

.footer .logo_area {
	margin-bottom: 60px;
	text-align: center;
}

.footer .logo_area a {
	display: inline-block;
	max-width: 80%;
	width: 360px;
	padding-left: 30px;
}


/* fnavi */

.fnavi_area {
	max-width: 900px;
	margin: 0 auto 50px;
}

.fnavi_block {
	position: relative;
}

.fnavi_block h3 {
	font-size: .8125rem;
}

.fnavi_block h3 label {
	cursor: default;
}

.fnavi {
	font-size: .8125rem;
}

.fnavi li a {
	display: block;
	text-decoration: none;
}


/* アコーディオン用：チェックを隠す */
.fnavi_block input {
	position: absolute;
	visibility: hidden;
	top: 0;
	right: 0;
}


/* footer txt */

.footer .finfo_txt {
	font-size: .75rem;
	text-align: center;
}

.footer .copy {
	font-size: .75rem;
	text-align: center;
}