@charset "utf-8";


/* --------------------------------------------------------------------------------
	タグ
-------------------------------------------------------------------------------- */
html {
	
}
body {
	margin: 0;
	padding: 0;
	min-width: 1200px;
	line-height: 1.5;
	text-size-adjust: 100%;
	
	font-family:"Noto Sans JP", 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
	font-weight: 400;
}

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

address{
	font-style: normal;
}


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

.common * {
	margin: 0;
	padding: 0;
	font-family:"Noto Sans JP", 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
}

.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: #000;
	-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;
}


/* --------------------------------------------------------------------------------
	デバイスごとの表示・非表示
-------------------------------------------------------------------------------- */
.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 {
}


/* --------------------------------------------------------------------------------
	ヘッダー固定
-------------------------------------------------------------------------------- */
#header .h-fix {
	width: 100%;
	box-sizing: border-box;
}

/* jQueryで付与されるfixedの固定配置するためのスタイル */
#header .h-fix.fixed {
	position: fixed;
	z-index: 10;
	top:0;
	left:0;
	background: rgba(255, 255, 255, 0.8);
}

/* ----------------------------------------
header-outer
---------------------------------------- */
#header .header-outer {
}

/* ----------------------------------------
header-inner
---------------------------------------- */
#header .header-inner {
	display: flex;
	justify-content: space-between;
	
	width: 1200px;
	margin: 0 auto;
}

/* ----------------------------------------
ロゴ
---------------------------------------- */
#header .h-logo {
	width: 150px;
}
#header .h-logo a {
	display: block;
	padding: 18px 0;
}
#header .h-logo img {
	display: block;
	width: 100%;
	height: auto;
}


/* ----------------------------------------
h-contents
---------------------------------------- */
#header .h-contents {
	display: flex;
	
	width: 710px;
	padding: 25px 0 0;
}


/* ----------------------------------------
h-nav
---------------------------------------- */
#header .h-contents .h-nav {
	width: 212px;
	padding: 4px 0 0;
	letter-spacing: -0.05em;
	font-size: 16px;
}
#header .h-contents .h-nav > nav > ul {
	display: flex;
}
#header .h-contents .h-nav > nav > ul > li {
	position: relative;
	padding: 0 18px 0 0;
}
#header .h-contents .h-nav > nav > ul > li > a {
	display: block;
}


/* ----------------------------------------
open-close共通
ホバー部分
---------------------------------------- */
#header .open-close {
	position: relative;
	padding: 0 0 25px;
}

/********** 通常時 **********/
#header .open-close .open-close-contents {
	position: absolute;
	top: 38px;
	left: -45px;
	
	display: none;
	visibility: hidden;
	z-index: 2;
}

/********** ホバー時 **********/
#header .open-close:hover .open-close-contents {
	display: block;
	visibility: visible;
}

/********** open-close-contents-box **********/
#header .open-close .open-close-contents .open-close-contents-box {
	padding: 10px;
	box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
	background: #fff;
}


/* ----------------------------------------
PRODUCTS
---------------------------------------- */
#header .h-nav-products .h-subnav {
	width: 170px;
}
#header .h-nav-products .h-subnav ul li {
	border-bottom: solid 1px #ccc;
}
#header .h-nav-products .h-subnav ul li:last-child {
	border-bottom: none;
}
#header .h-nav-products .h-subnav ul li a {
	display: block;
	padding: 10px 0 10px 36px;
	letter-spacing: -0.1em;
	background-repeat: no-repeat;
}

/* TOKYO麺好 */
#header .h-nav-products .h-subnav ul li.subnav-tokyo-menhao a {
	background-image: url("../images/common/h-nav-i-tokyo-menhao.png");
	background-position: 0 8px;
}

/* ヴィーガンスープ */
#header .h-nav-products .h-subnav ul li.subnav-vegan-soup a {
	background-image: url("../images/common/h-nav-i-vegan-soup.png");
	background-position: 0 8px;
}

/* お米の麺 */
#header .h-nav-products .h-subnav ul li.subnav-okome-men a {
	background-image: url("../images/common/h-nav-i-okome-men.png");
	background-position: 7px 8px;
}




/* ----------------------------------------
search
---------------------------------------- */
#header .h-contents .search {
	width: 300px;
	height: 30px;
	margin: 0 20px 0 0;
	border-radius: 5px;
	border: solid 1px #ccc;
	background: #fff;
	overflow: hidden;
}
#header .h-contents .search form {
	position: relative;
}
#header .h-contents .search form input {
	border: none;
}
#header .h-contents .search form .search-box input[type="text"] {
	display: block;
	
	width: 100%;
	padding: 8px 38px 4px 12px;
	outline: none;
	font-size: 12px;
}
#header .h-contents .search form .search-box input[type="image"] {
	display: block;
	
	position: absolute;
	top: calc(50% - 8px);
	right: 10px;
}


/* ----------------------------------------
ボタン
---------------------------------------- */
#header .h-btns {
	padding: 5px 0 0;
}
#header .h-btns > ul {
	display: flex;
	
}
#header .h-btns > ul > li {
	margin: 0 27px 0 0;
}
#header .h-btns > ul > li:last-child {
	margin: 0;
}
#header .h-btns > ul > li > a {
	display: block;
}
#header .h-btns > ul > li > img {
	display: block;
}
#header .h-btns img {
	width: 21px;
}


/* カート数量 */
#header .h-btns ul li.h-btn-cart a {
	position: relative;
	display: block;
}
#header .h-btns ul li.h-btn-cart a .fs-client-cart-count{
	position: absolute;
	top: -12px;
	right: -9px;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 15px;
	height: 15px;
	padding: 0;
	border: none;
	
	border-radius: 20px;
	font-size: 12px;
	color: #000;
	background: #ff7575;
	
	line-height: 1;
	z-index: 1;
}
#header .h-btns ul li.h-btn-cart a .label{
	border-right: none;
	padding-right: 0;
}


/********** h-btn-info：サブメニュー **********/
#header .h-btns .h-btn-info .h-subnav {
	width: 130px;
}
#header .h-btn-info .open-close .open-close-contents .open-close-contents-box {
	padding: 10px;
}
#header .h-btns .h-btn-info .h-subnav ul li {
	border-bottom: solid 1px #ccc;
}
#header .h-btns .h-btn-info .h-subnav ul li:last-child {
	border-bottom: none;
}
#header .h-btns .h-btn-info .h-subnav ul li a {
	display: block;
	padding: 10px 10px 10px 10px;
	letter-spacing: -0.1em;
}


/********** h-btn-info：サブメニュー **********/
#header .h-btns .h-btn-my .h-subnav {
	width: 130px;
}
#header .open-close .open-close-contents .open-close-contents-box {
	padding: 20px 10px 3px;
}

/********** ログイン・マイページ **********/
#header .h-btns .h-btn-my .btn-login-mypage ul li {
	padding: 0 0 10px;
}
#header .h-btns .h-btn-my .btn-login-mypage ul li:last-child {
	border-bottom: none;
}
#header .h-btns .h-btn-my .btn-login-mypage ul li.h-btn-login-mypage-login a {
	display: block;
	border-radius: 5px;
	padding: 10px 10px 10px 10px;
	text-align: center;
	text-decoration: none;
	letter-spacing: -0.1em;
	background: #ccc;
}
#header .h-btns .h-btn-my .btn-login-mypage ul li.h-btn-login-mypage-add a {
	display: block;
	border-radius: 5px;
	padding: 10px 10px 10px 10px;
	text-align: center;
	text-decoration: none;
	letter-spacing: -0.1em;
	background: #ff7575;
}
#header .h-btns .h-btn-my .btn-mydata ul li.h-btn-mydata-history {
	display: flex;
	justify-content: center;
	
	width: 100%;
}
#header .h-btns .h-btn-my .btn-mydata ul li.h-btn-mydata-history a {
	display: block;
	padding: 10px 10px 10px 25px;
	text-decoration: none;
	letter-spacing: -0.1em;
	background: url("../images/common/h-icon-history.png") no-repeat 0 14px;
}





/* ----------------------------------------
customer表示切り替え
---------------------------------------- */
/********** ログイン・ログアウトの表示切り替え：ログアウト時 **********/
.my-false .logout {
	display: block !important;
}
.my-false .login {
	display: none !important;
}
/********** ログイン・ログアウトの表示切り替え：ログイン時 **********/
.my-true .logout {
	display: none !important;
}
.my-true .login {
	display: block !important;
}





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

/********** footer-outer **********/
#footer .footer-outer {
}

/********** f-contact **********/
#footer .f-contact {
	padding: 0 0 140px;
}
#footer .f-contact .heading {
	padding: 0 0 40px;
	text-align: center;
	font-weight: bold;
	font-size: 36px;
}
#footer .f-contact .f-contact-box {
	width: 1200px;
	margin: 0 auto;
}
#footer .f-contact .f-contact-box ul {
	display: flex;
	justify-content: space-between;
	
	width: 100%;
}
#footer .f-contact .f-contact-box ul li {
	width: 580px;
}
#footer .f-contact .f-contact-box ul li a {
	display: block;
}

/* 電話 */
#footer .f-contact .f-contact-box ul li.f-contact-tel a {
	display: block;
	height: 140px;
	padding: 33px 0 0 174px;
	border: solid 1px #eee;
	text-decoration: none;
	letter-spacing: 0.04em;
	font-weight: bold;
	font-size: 48px;
	background: #eee url("../images/common/f-btn-icon-tel.png") no-repeat 75px 38px;
}

/* 電話リンク スマホのみ */
#footer .f-contact .f-contact-box ul li.f-contact-tel a[href^="tel:"]{
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}


/* お問い合わせフォーム */
#footer .f-contact .f-contact-box ul li.f-contact-mail a {
	display: block;
	height: 140px;
	padding: 40px 0 0 160px;
	border: solid 1px #ccc;
	letter-spacing: -0.07em;
	text-decoration: none;
	font-weight: bold;
	font-size: 36px;
	background: #fff url("../images/common/f-btn-icon-contact.png") no-repeat 81px 48px;
}



/********** footer-inner **********/
#footer .footer-inner {
	margin: 0 0 15px;
	padding: 25px 0 15px;
	color: #fff;
	background: #000;
}

/********** f-cols **********/
#footer .f-cols {
	display: flex;
	
	width: 1200px;
	margin: 0 auto;
	padding: 0 0 0 215px;
}
#footer .f-cols a {
	display: block;
	color: #fff;
}

/* sheading */
#footer .f-cols .sheading {
	padding: 0 0 27px;
	font-weight: bold;
}

/* col */
#footer .f-cols .col-1 {
	width: 230px;
	padding: 2px 10px 0 0;
}
#footer .f-cols .col-2 {
	width: 215px;
	padding: 2px 10px 0 0;
}
#footer .f-cols .col-3 {
	width: 265px;
	padding: 2px 10px 0 0;
}
#footer .f-cols .col-4 {
	width: 280px;
	padding: 0 0 0 0;
}

/* サイトマップ */
#footer .f-sitemap .f-sitemap-box {
	padding: 0 0 36px;
}
#footer .f-sitemap .f-sitemap-box:last-child {
	padding: 0 0 0;
}

/* リスト */
#footer .f-cols ul li {
	padding: 0 0 15px;
}

/* ロゴ */
#footer .f-cols .f-logo {
	padding: 0 0 14px;
}
#footer .f-cols .f-logo a {
	display: block;
}
#footer .f-cols .f-logo img {
	display: block;
}

/* 住所 */
#footer .f-cols .address {
	padding: 0 0 14px;
	letter-spacing: -0.05em;
}

/* TEL */
#footer .f-cols .f-btn-tel a {
	display: block;
	padding: 0 0 0 29px;
	background: url("../images/common/f-icon-tel.png") no-repeat 0 2px;
}

/* メール */
#footer .f-cols .f-btn-mail a {
	display: block;
	padding: 0 0 0 29px;
	background: url("../images/common/f-icon-mail.png") no-repeat 0 5px;
}





/********** コピーライト **********/
#footer .copyright {
	text-align: center;
}
#footer .copyright small {
	font-size: 14px;
}