@charset "utf-8";
/* CSS Document */


/*#catalog{color:#dce7ea;}*/
/*label[for=body_rbtCatalogName_0] {color:#dce7ea;}*/
/*label[for=body_rbtCatalogName_1] {color:#dce7ea;}*/




/* --------------------------------------------------
全体のレイアウト　
-------------------------------------------------- */

*,
*:before,
*:after {box-sizing: inherit;}
html {box-sizing: border-box;}


html,body{
margin:0;
padding:0;
background-color:#dce7ea;/*#c0d8ff*/
}

body{
border-top:5px #ff6437 solid;/*header部分の罫線*/
}

body {
   margin: 0;
   padding: 0;
   font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Verdana","ＭＳ Ｐゴシック","sans-serif";
   font-size: 85%;
   color:#444;
   line-height:18px;
   letter-spacing:0.05em;
}

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

.clear { clear:both;} 


/* --------------------------------------------------
font
-------------------------------------------------- */
.gray{color: #333333;}

/* --------------------------------------------------
在庫ボタン
-------------------------------------------------- */
#code_box{
	font-size:large;
	width:90%;
	font-weight:bold;
	margin-left:auto;
	margin-right:auto;
	padding-top:0.5%;
}

#code_box input{
	border:0;
	padding:8px;
	font-size:1.3em;
	border:solid 1px #ccc;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
	box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}

#code_box input:focus {
    border:solid 1px #EEA34A;
}

#body_txtCode{/*txtPage*/
float:left;
margin-left:5%;
margin-right:auto;
width:45%;
margin-bottom:1%;
}

#body_txtCode::-webkit-inner-spin-button,
#body_txtCode::-webkit-outer-spin-button {
    -webkit-appearance: none;/*type=numberのスピンボタン非表示*/
    -moz-appearance:textfield;
}


#code_input{
font-size:small;
}


#txtCode{
float:left;
margin-right:3%;
}


#body_btnSearch {
margin-left:auto;
margin-right:auto;
width:40%;
height:40px;
color:#FFF;
background: #0082ff;
display: block;
font-size:small;
margin-top:1%;
margin-bottom:1%;
}

#body_btnSearch:hover {
background: #1ec7bb;
}


/* --------------------------------------------------
商品スペック　
-------------------------------------------------- */
#search_box{
width:90%;
margin-left:auto;
margin-right:auto;
}


.spec_item{
width: 100%;
}

.thumb_l {/*商品画像*/
display: block;
width: 70%;
margin-left: auto;
margin-right: auto;
margin-top:5%;
}

.spec_box {
font-size: x-small;
border-bottom: dotted 1px #999;
margin-top: 2%;
margin-bottom: 2%;
width: 100%;
}

.spec_title {
float: left;
margin-right: 3%;
}

.spec {float: left;}

#itemname_box{
font-size:110%;
font-weight:bold;
border-bottom:dotted 1px #999;
margin-top:2%;
margin-bottom:2%;
}


/*臨時追加文*/
.ex_text{
color:#ff0000;
}

/*現在の在庫状況*/
#stock_box{
	width:100%;
	height:50px;
	border: 2px #b2b2b2 solid;
	text-align:center;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-bottom:18%;/*商品同士の間隔*/
}

#stock_box th{
	display:inline-block;
	text-align: left;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
	margin-bottom: 2%;
}

/*入荷予定テキスト*/
#stock_box td{
	font-size: 100%;
	color:#333;
	padding-top:2%;
	padding-bottom:2%;
}


/* 在庫マーク */
.Excellent_10000{color:#0032aa;font-size: large; font-weight:bold;}
.Fine_9000{color:#00545e;font-size: large; font-weight:bold;}
.Fine_8000{color:#00545e;font-size: large; font-weight:bold;}
.Fine_7000{color:#00545e;font-size: large; font-weight:bold;}
.Fine_6000{color:#00545e;font-size: large; font-weight:bold;}
.Fine_5000{color:#00545e;font-size: large; font-weight:bold;}
.Good_5000{color:#00545e;font-size: large; font-weight:bold;}
.Good_4000{color:#5a7800;font-size: large; font-weight:bold;}
.Good_3000{color:#5a7800;font-size: large; font-weight:bold;}
.Good_2000{color:#5a7800;font-size: large; font-weight:bold;}
.Good_1000{color:#5a7800;font-size: large; font-weight:bold;}
.Good5000{color:#00545e;font-size: large; font-weight:bold;}
.Good4000{color:#5a7800;font-size: large; font-weight:bold;}
.Good3000{color:#5a7800;font-size: large; font-weight:bold;}
.Good2000{color:#5a7800;font-size: large; font-weight:bold;}
.Good1000{color:#5a7800;font-size: large; font-weight:bold;}
.NotGood_900{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_800{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_700{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_600{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_500{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_400{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_300{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_200{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_100{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_000{color:#dc5a00;font-size: large; font-weight:bold;}
.NotGood_0{color:#dc5a00;font-size: large; font-weight:bold;}
.SoldOut{color:#8c0000;font-size: large; font-weight:bold;}
.Call{color:#545252;font-size: large; font-weight:bold;}
.Foods{color:#545252;font-size: large; font-weight:bold;}

.subtext{display:none;} /*必要な時だけ表示に切り替え*/

#stock_sub{/*補足テキスト*/
font-size:small;
font-weight:normal;
margin-top:5%;
}

#stockfree{
padding-bottom:3%;
}


/* --------------------------------------------------
footer　
-------------------------------------------------- */
/*フッターを下に固定*/
#container {
display:flex;/*重要*/
flex-flow: column;
width:100%;
background-color:#fff;
}

.sticky {
position: sticky;/*重要*/
bottom:0;/*重要*/
align-self: flex-end;/*重要*/
border-top:1px #999999 solid;
width:100%;
height: 140px;
background-color:#dce7ea;/*#c0d8ff*/
font-size: small;
text-align:left;
}
/*フッターを下に固定*/


/*ご利用カタログ*/
#catalog{
font-size:small;
font-weight:normal;
padding-top:1%;
margin-left:5%;
}


#footer_text{
font-size: x-small;
font-weight: normal;
line-height: 15px;
margin-bottom:3%;
width:90%;
margin-left:auto;
margin-right:auto;
}


/*該当がありません*/
.nothing{
display: flex;
flex-direction:column;
align-items:center;
height:35vh;
}

.nothing > div{
margin-top:auto;/*子要素の上下のmarginをauto に*/
margin-bottom :auto;
width:90%;
margin-left:auto;
margin-right:auto;
}


@media (min-width: 330px) {
/* --------------------------------------------------
標準モバイル用　
-------------------------------------------------- */
#container{
height: auto;
/*padding-bottom:120px;footer分の余白*/
}


.sticky*{
box-sizing:border-box;
position:fixed; bottom:0;
height:120px
}


#top_picture*{
height: calc(100dvh - 125px);/*120 + 5*/
width:100%;
display: flex;
flex-direction:column;
align-items:center;
background-color:aqua;/**/
}


#top_picture* img{
margin-top :auto;/*子要素の上下のmarginをauto に*/
margin-bottom :auto;
width:100%;
height: auto;
}


#bg_upper* {
display:block;
background-color:#dce7ea;
width:100%;
height:50vh;
position:fixed;
top:0;
z-index:-1;
}

.spec_box {
font-size: small;
}


/* --------------------------------------------------
 /標準モバイル用　
-------------------------------------------------- */
}