@charset "utf-8";

/* --------------
 reset
-------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ol,ul{list-style:none}
caption,th{text-align:left}

img {max-width:100% !important; height:auto;vertical-align: bottom;}
iframe {max-width:100% !important; border:0;}

input[type="submit"],label {
	cursor: pointer;
}

/* --------------
 clearfix
-------------- */
div:after,ul:after,ol:after,dl:after,
header:after,footer:after,
nav:after,section:after,article:after {
	content: ""; 
	display: block;
	clear: both;
}

/* --------------
 base
-------------- */
html {
	/*background: #EDEDED;*/
	-webkit-text-size-adjust:none;/* for smartphone */
}
body {
	color: #222;
	/*font: normal 13px/1.6 メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;*/
	font: normal 14px/1.6 メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}

h1,h2,h3,h4,h5,h6 {
	line-height: 1.2;
	font-weight: normal;
	font-size: 100%;
}
	
/* link */
a {
	color: #690;
	text-decoration: none;
	word-break: break-all;
}
a:hover {
	color: #000;
	text-decoration: underline;
}
a:hover img {
	-moz-opacity:0.8;
	opacity:0.8;
}

/* --------------
 modules css
-------------- */
/* ---------- font weight */
.bold {	font-weight: bold;}

/* ---------- align */
.alc { text-align: center !important;}
.alr { text-align: right !important;}
.all { text-align: left !important;}

.alt { vertical-align: top !important;}
.alb { text-align: bottom !important;}

/* ---------- float */
.noFloat { float: none !important;}
.fll { float: left;}
.flr { float: right;}
.flc { margin-left: auto; margin-right: auto; }

/* ---------- Cancele */
.both, .clear { clear: both;}

/* ---------- margin,padding */
.mb0 {	margin-bottom: 0px !important;}
.mb5 {	margin-bottom: 5px !important;}
.mb10 {	margin-bottom: 10px !important;}
.mb15 {	margin-bottom: 15px !important;}
.mb20 {	margin-bottom: 20px !important;}
.mb25 {	margin-bottom: 25px !important;}
.mb30 {	margin-bottom: 30px !important;}
.mb35 {	margin-bottom: 35px !important;}
.mb40 {	margin-bottom: 40px !important;}
.mb45 {	margin-bottom: 45px !important;}
.mb50 {	margin-bottom: 50px !important;}
.mb55 {	margin-bottom: 55px !important;}
.mb60 {	margin-bottom: 60px !important;}
.mb70 {	margin-bottom: 70px !important;}
.mb80 {	margin-bottom: 80px !important;}
.mb90 {	margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}

.ml0 {	margin-left: 0px !important;}
.ml5 {	margin-left: 5px !important;}
.ml10 {	margin-left: 10px !important;}
.ml20 {	margin-left: 20px !important;}
.ml30 {	margin-left: 30px !important;}
.ml40 {	margin-left: 40px !important;}
.ml50 {	margin-left: 50px !important;}

.mr0 {	margin-right: 0px !important;}
.mr5 {	margin-right: 5px !important;}
.mr10 {	margin-right: 10px !important;}
.mr20 {	margin-right: 20px !important;}
.mr30 {	margin-right: 30px !important;}
.mr40 {	margin-right: 40px !important;}
.mr50 {	margin-right: 50px !important;}

.mt0 {	margin-top: 0px !important;}
.mt5 {	margin-top: 5px !important;}
.mt10 {	margin-top: 10px !important;}
.mt20 {	margin-top: 20px !important;}
.mt30 {	margin-top: 30px !important;}

.pb0 {	padding-bottom: 0px !important;}
.pb5 {	padding-bottom: 5px !important;}
.pb10 {	padding-bottom: 10px !important;}
.pb20 {	padding-bottom: 20px !important;}
.pb30 {	padding-bottom: 30px !important;}

.pt0 {	padding-top: 0px !important;}
.pt5 {	padding-top: 5px !important;}
.pt10 {	padding-top: 10px !important;}
.pt20 {	padding-top: 20px !important;}
.pt30 {	padding-top: 30px !important;}

.pl0 {	padding-left: 0px !important;}
.pl5 {	padding-left: 5px !important;}
.pl10 {	padding-left: 10px !important;}
.pl20 {	padding-left: 20px !important;}
.pl30 {	padding-left: 30px !important;}

.pr0 {	padding-right: 0px !important;}
.pr5 {	padding-right: 5px !important;}
.pr10 {	padding-right: 10px !important;}
.pr20 {	padding-right: 20px !important;}
.pr30 {	padding-right: 30px !important;}

/* ---------- font size */
.fs08 { font-size:61% !important;}
.fs09 { font-size:69% !important;}
.fs10 { font-size:77% !important;}
.fs11 { font-size:85% !important;}
.fs12 { font-size:93% !important;}
.fs13 { font-size:100% !important;}
.fs14 { font-size:108% !important;}
.fs15 { font-size:116% !important;}
.fs16 { font-size:123.1% !important;}
.fs17 { font-size:131% !important;}
.fs18 { font-size:138.5% !important;}
.fs19 { font-size:146.5% !important;}
.fs20 { font-size:153.9% !important;}
.fs21 { font-size:161.6% !important;}
.fs22 { font-size:167% !important;}
.fs23 { font-size:174% !important;}
.fs24 { font-size:182% !important;}
.fs25 { font-size:192.3% !important;}
.fs26 { font-size:197% !important;}
.fs30 { font-size:227.3% !important;}

/* ---------- float */
.fll { float: left;}
.flr { float: right;}

/* ---------- width */
.wd5 {width: 5% !important;}
.wd10 {width: 10% !important;}
.wd15 {width: 15% !important;}
.wd20 {width: 20% !important;}
.wd25 {width: 25% !important;}
.wd30 {width: 30% !important;}
.wd35 {width: 35% !important;}
.wd40 {width: 40% !important;}
.wd45 {width: 45% !important;}
.wd50 {width: 50% !important;}
.wd55 {width: 55% !important;}
.wd60 {width: 60% !important;}
.wd65 {width: 65% !important;}
.wd70 {width: 70% !important;}
.wd75 {width: 75% !important;}
.wd80 {width: 80% !important;}
.wd85 {width: 85% !important;}
.wd90 {width: 90% !important;}
.wd95 {width: 95% !important;}
.wd100 {width: 100% !important;}

.mwd1300 {min-width: 1300px;}
.mwd1040 {min-width: 1040px;}
.mwd1080 {min-width: 1080px;}

/* ----- images */
.imgL {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
.imgR {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

/* ----- text */
.txtS {
	color: #666;
	font-size: 85%;
}

/* error message */	
.mymsg {
	color:#F630A0;
	font-weight: bold;
}

/* ----- color */
.blue {color:#00F;}
.red,.red a,.red:hover {color:#F00;}

/* ----- list */
.ulDisc {
	margin-left: 22px;
	line-height: 1.4;
	list-style: outside disc;
}

.olDecimal {
	margin-left: 22px;
	list-style: outside decimal;
}

.ulDisc li, .olDecimal li {
	margin-bottom: 10px;
}

/* ----- button */
.btnS a {
	padding: 3px 10px;
	color: #EEE;
	font-size: 90%;
	border-radius: 3px;
	background: #999;
}

.btnA {
	display: inline-block;
	margin: 3px 0;
	padding: .3em .5em;
	border-radius: 3px;
	border: #fff solid 1px;
	color: #fff;
	text-decoration: none;
	background: #6c8ab1;
	box-shadow: 0 -2px 0 rgba(0,0,0,.25) inset;
	word-break: keep-all !important;
	white-space: nowrap !important;
	vertical-align: middle;
}

.btnA.og {
	background: #EB7D44;
}
.btnA.grn {
	background: #57AC5E;
}
.btnA.sort {
	padding: .1em .3em;
	line-height: 1;
	background: #888;
	font-size: .8em;
}


.btnA:hover {
	color: #fff;
	opacity: .7;
	text-decoration: none;
}

/* ----- form */
label{ display:inline-block; }
.imeDis {	ime-mode: disabled; }

/* ----- table */
.tblA th,.tblA td {
	padding: 3px;
}

/* ----- base width */
body {
	width: 100%;
	min-width: 1000px;
}

.tblNB,.tblNB th,.tblNB td{
	border:none !important;
}

/* --------------
 common
-------------- */

/* =header
-------------------------------------------------------------- **/
#header {
	width: 100%;
	min-width: 1000px;
	height: 32px;
	color: #000;
	/*background: #534741;*/
	background: #3cb371;
}

/* =siteHeader
---------------------------------------------------- */
#siteHeader {
	padding: 5px;
}

#siteHeader h1 {
	float: left;
	width: 50%;
	margin-top: 3px;
}
#siteHeader p {
	float: right;
	width: 50%;
	font-size: 90%;
	text-align: right;
}

/* =container
-------------------------------------------------------------- **/
.container {
	min-height: 1000px;
}

/* =main
---------------------------------------------------- */
.main {
	float: left;
	width: 88%;
	padding: 20px 1%;
}

/* =headline / titles
------------------------------------------ */
.pageHeader {
	margin-bottom: 10px;
	padding: 10px 20px 5px;
	background: #f5f5f5;
}
.pageHeader h2 {
	color: #534741;
	font-size: 120%;
	font-weight: bold;
	display: inline-block;
}

/* =breadcrumb
-------------------------------- */
.breadcrumb {
	display: inline-block;
	margin-left: 40px;
}
.breadcrumb li {
	color: #999;
	font-size: 12px;
	display: inline-table;
}
.breadcrumb li a {
	color: #CCC;
	padding-right: 5px;
}
.breadcrumb li a:after {
	content: "　>"; 
}
.breadcrumb li a:hover {
	color: #999;
}

/* ---------- */
.ulAlc {
	clear: both;
	margin-top: 10px;
	padding-top: 10px;
	text-align: center;
	border-top: 1px solid #CCC;
}
.ulAlc li {
	display: inline-block;
	margin-left:20px;
}

/* =contents
------------------------------------------ */
.contents {
	/* width: 100%;
	min-width: 1000px; */
	padding: 10px 0 30px;
	/* overflow-x: auto;
	overflow-y: hidden; */
}
.contents h2 {
	font-size: 1.2em;
	font-weight:bold;
	border-left: #3cb371 solid 5px;
	padding-left: .3em;
	margin-top: 1.0em;
	margin-bottom: .3em;
}

/* =clmSearch
-------------------------------- */
.clmSearch {
	margin-bottom: 15px;
	font-size: 90%;
}
.clmSearch fieldset {
	padding: 10px;
	border: 1px solid #71999E;
}
.clmSearch legend {
	padding: 0 5px;
	color: #71999E;
	/*background: #EDEDED;*/
}
.clmSearch input {
	padding: 2px;
}

.ulSch {
	letter-spacing: -0.40em;
}
.ulSch li {
	padding: 3px 20px 3px 3px;
	display: inline-block;
	letter-spacing: normal;
}
.btnSubmit {
	margin-left: 10px;
}
.btnSubmit input {
	margin: 0 5px;
	padding: 3px 10px;
	color: #FFF;
	border: 1px outset #FFF;
	border-radius: 3px;
	background: #71999E;
}
.btnSubmit input:hover {
	background: #5fa3ab;
}

/* =sidebar
---------------------------------------------------- */
.sidebar {
	float: left;
	max-width: 170px;
	width: 10%;
	padding: 10px 0;
	color: #EEE;
	font-size: 90%;
	/*background: #756C67;*/
	/*background: #323232;*/
	background: #4169e1;
}

.sidebar h2 {
	margin-bottom: 5px;
	padding: 10px;
}
.sidebar h2 b {
	padding-left: 3px;
	border-left: 3px solid #CCC;
}

.sidebar a {
	color: #EEE;
}

/* =globalNav
------------------------------------------ */
/* ---------- mainNav */
.sidebar .mainNav li {
	display: block;
	border-top: 1px dotted #CCC;
}
.sidebar .mainNav li a {
	display: block;
}
.sidebar .mainNav li a:hover {
	text-decoration: none;
}

.sidebar .mainNav .n1 {
	padding: 10px;
}

/* .sidebar .mainNav li a:hover:after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -8px;
	border: 8px solid transparent;
	border-right: 8px solid #ededed;
} */

.sidebar .mainNav li a:hover {
	background: rgba(255,255,255,0.5);
}
.sidebar .Active{
	background: rgba(255,255,255,0.3);
}
.sidebar #orderActive #nav1
{
	background: rgba(255,255,255,0.2);
}
.sidebar #order_mituActive #nav0
{
	background: rgba(255,255,255,0.2);
}
.sidebar #syakenActive #nav3
{
	background: rgba(255,255,255,0.2);
}
.sidebar #syaken_mituActive #nav2
{
	background: rgba(255,255,255,0.2);
}
.sidebar #sywkActive #nav4
{
	background: rgba(255,255,255,0.2);
}

.sidebar #depositActive #nav5
{
	background: rgba(255,255,255,0.2);
}

/* ----- submenu */
.sidebar .submenu {
	padding-bottom: 10px;
	/* background: rgba(255,255,255,0.2); */
}
.sidebar .submenu li {
	border-top: none;
}

.sidebar .submenu li a {
	padding: 5px 3px 5px 10px;
	display: block;
	position: relative;
}
.sidebar .submenu li a:before {
	content: "・";
}

/* =aside
------------------------------------------ */

/* =footer
-------------------------------------------------------------- **/
#footer {
	color: #EEE;
	padding: 3px 0;
	background: #918985;
}
#footer a {
	color: #EEE;
}

/* =siteFooter
---------------------------------------------------- */

/* =copyright
---------------------------------------------------- */
#copyright {
	text-align: center;
}

/* =pageTop
---------------------------------------------------- */
#pageTop {
	display: block;
	position: fixed;
	bottom: 3px;
}
@media screen and (max-width: 1400px) { /*以下の時*/
#pageTop {right: 0;}
}
@media screen and (min-width: 1401px) { /*以上の時*/
#pageTop {right: 100px;}
}
#pageTop a {
	width: 100px;
	height: 30px;
	font-size: 90%;
	padding: 1px 6px;
	color: #EEE;
	font-weight: bold;
	border-radius: 3px;
	background: #534741;
}
#pageTop a:hover {
	text-decoration: none;
	background: #756C67;
}


/* --------------
 home contents
-------------- */
/* =visual
---------------------------------------------------- */


/* --------------
 subpages contents
-------------- */

/* =login,logout page
---------------------------------------------------- */
#loginCont {
	width: 400px;
	height: 400px;
	margin: auto;
	position: absolute;
	top: 150px;
	right: 0;
	left: 0;
}

#loginCont h1 {
	margin-bottom: 20px;
	text-align: center;
}
#loginCont h1 img {
	margin-bottom: 15px;
	max-width: 300px !important;
	max-height: 300px !important;
}

#loginCont .mymsg {
	margin-bottom: 15px;
	padding: 10px;
	border-bottom: 3px solid #DDDAD9;
	background: #FFF;
}

#loginBox {
	padding: 30px 50px 10px;
	/* border: 3px solid #EEE; */
	box-shadow: 0 0 5px #AAA;
	background: #FFF;
}

#loginBox p {
	margin-bottom: 15px;
}
#loginBox input {
	width: 96%;
	padding: 5px 2%;
	border: 1px solid #DDD;
	background: #FFC;
}
#loginBox input[type="submit"] {
	width: inherit;
	border-radius: 3px;
	background: #2616e6;
}

#loginBox input:focus {
	box-shadow: 0 0 3px #069;
}


/* =menu page
---------------------------------------------------- */
#menuCont .contents .globalNav ul {
	margin-bottom: 20px;
}

#menuCont .contents .globalNav li {
	margin: 6px 0;
	position: relative;
}

#menuCont .contents .mainNav li:before,
#menuCont .contents .submenu li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -4px;
	border: 4px solid transparent;
	border-left: 4px solid #360;
}

#menuCont .contents .globalNav li a {
	padding-left: 10px;
}

.contNav {
	margin: 30px 0 30px 50px;
}
.contNav li {
	margin-bottom: 15px;
	padding-left: 10px;
	display: block;
	position: relative;
}
.contNav li:after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left: 5px solid #534741;
}


/* =shop page
---------------------------------------------------- */
/* ----------calendar */
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width:auto;}


/* =cook page
---------------------------------------------------- */
.cate_title{
	text-align:left;
	font-weight: bold;
	padding:4px 0 4px 10px;
	border-top:1px solid #F1DFDF;	
	border-left:1px solid #F1DFDF;	
	border-right:1px solid #F1DFDF;	
	background:url(../img/back_pink_dark.gif) repeat-x #FFF8F8;
	color:#F47B7B;
}
.cate_sub1{
	text-align:left;
	margin: 2px;
	margin-left:10px;
}
.cate_sub2{
	text-align:left;
	margin-left:30px;
	margin-bottom:10px;
}
.cate_sub3{
	text-align:left;
	margin-left:50px;
	margin-bottom:10px;
}

/* =waiting message
---------------------------------------------------- */
#loading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}
 
#loading .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("../img/loader.png") center center no-repeat;
}

table {
	background: #fff;
}

.tblWork th,
.tblWork td,
.tblForm th,
.tblForm td {
	padding: 5px;
}
.tblWork {
	width: 100%;
}
.tblWork th, .tblWork td {
	border: 1px solid #BBB;
}
.tblWork th {
	background-color: #DDD;
	text-align:center;
}
.tblWork td {
}
.tblWork label {
	margin-right: 20px;
}
.tblWork tr:nth-child(even) {
	background: #F4F0F0;
}
/*
.tblWork tr:hover {
    background-color: #bbb;
    opacity:0.8;
}
*/

.bgA {
	background: #f8f8f8;
}

.hide{
	color: #555;
	background-color: #aaa;
}

/* input upd */
.tblForm {
	width: 100%;
}
.tblForm th {
	border: 1px solid #BBB;
	background-color: rgba(0,0,0,.1);
}
/*
.tblForm tr:nth-child(odd) th {
	background-color: rgba(0,0,0,.1);
}
*/
.tblForm td {
	border: 1px solid #BBB;
}
/*
.tblForm tr:nth-child(odd) td {
	background-color: rgba(0,0,0,.05);
}
*/
.tblForm label {
	margin-right: 20px;
}
.tblForm input {
	margin-right: 3px;
	vertical-align: baseline;
}

.tblForm h3 {
	margin-bottom: 5px;
	padding: 6px 7px 4px;
	background: #CCC;
}


.tblForm input,
.tblForm select,
.tblForm textarea {
	padding: 5px;
}
.tblForm input[type=time] {
	padding: 2.5px;
}

.tblForm input[type=radio]:checked + label {
	font-weight: bold;
}


/*タブ関連*/

.tab-list {
  display:flex;
  /*background:#999;*/
  color:#333;
}

.tab-list li {
  width:20%;
  background:#999;
  text-align:center;
  padding:10px;
  cursor:pointer;
  border-right: 1px #fff solid;
}

.tab-list li.active {
  background:#87ceeb;
  color:#fff;
}

.tab-content {
  display:none;
  background:#fff;
  padding:10px;
	border:1px solid #4169e1;
}

.tab-content.open {
  display:block;
}