﻿@charset "UTF-8";

/*
-------------------------------------------------------------------------------
SHOKUBI特集記事CSS
-------------------------------------------------------------------------------
DATE   : 2019/08
AUTHOR : http://www.ntsys.co.jp
-------------------------------------------------------------------------------
framework  : Bootstrap v4.3.1
Breakpoint : 
sm- 576px
md- 768px
lg- 992px
xl-1200px

defalt-color:#212529
-------------------------------------------------------------------------------
*/

/*変更作業中暫定*/
/*@import url("temp_article.css");*/


/*
-------------------------------------------------------------------------------
WEBフォント設定
-------------------------------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400&display=swap&subset=japanese');


/*
-------------------------------------------------------------------------------
bootstrap4-5対応
-------------------------------------------------------------------------------
*/
.btn-block{
	display:block;
	width:100%;
}


/*
-------------------------------------------------------------------------------
共通設定
-------------------------------------------------------------------------------
*/

h1,h2,h3,h4{
	font-weight:bold;
}
h1,h2{
	text-align:center;
}

h1{
	font-size:1.6rem;
	margin-top:2rem;
}
h2{
	background-color:#F30;
	color:#FFF;
	padding:10px 0;
	font-size:1.5rem;
    top:50px;
	z-index:100;
	margin:50px auto 20px;
}
h3{
	color:#F30;
	padding:10px 0;
	font-size:1.5rem;
	text-align:center;
	border-bottom:2px solid #F30;
}
h4{
	color:#F30;
	padding:20px 0 10px 0;
	font-size:1.5rem;
	text-align:center;
}
/*出典*/
p.source{
	font-size:0.8rem;
}
p.source:before{
	font-family:"Font Awesome 7 Free";
	white-space:pre;
	content: "\f518";
	font-weight:900;
	margin-right:3px;
}

div.jumbotron{
	padding:0;
	margin-top:1rem;
}
div.youtubeResponsive{
	text-align:center;
	margin:20px 0;
}
img.floatLeft{
	float:left;
	margin-right:1rem;
}

div.jumbotron img{
	margin:auto;
	display:block;
}
.displayblock{
	display:block;
}

p.caption{
	font-size:0.8rem;
}

span.marker {/* 黄マーカー風*/
 background: linear-gradient(transparent 50%, #ffff00 50%);
}
/*囲み枠*/
.simple_box3_1{
    position: relative;
    padding:1.5rem;
    margin: 2em 0;
    border: solid 3px #58151C;/*線*/
    border-radius: 8px;/*角の丸み*/
}
.simple_box3_1 .simple_box_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 1.3rem;/*タイトル文字サイズ*/
    background: #ffffff;/*タイトル文字背景色*/
    color: #58151C;/*タイトル文字色*/
    font-weight: bold;
}
.simple_box3_1 p {
    margin: 0; 
    padding: 0;
	text-align:justify;
	line-height:180%;

}
.smallmono{
	font-size:90%;
	font:monospace;
	text-align:justify;
	text-decoration:none;
}
span.small{
	font-size:75%;
}
p.strong{
	font-size:130%;
	font-weight:bold;
}
p.large{
	font-size:130%;
	font-weight:bold;
	color:#F00;
	border:#F00 1px solid;
	border-radius: 6px 6px 6px 6px;
	text-align:center;
	padding:10px;
	background:#F3F3E9;
	margin-bottom:50px;
}
@media screen and (max-width: 700px){
/*youtubeレスポンシブ対応*/ 
div.youtubeResponsive{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
div.youtubeResponsive iframe{
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
}
/*簡易商品リスト*/
ul.article-item-list .frame{
	border: 1px solid #DDD;
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
    text-align: center;
}
ul.article-item-list li{
	padding-bottom:32px;
}
ul.article-item-list div.image{
	padding:25px;
	padding-bottom:0;
}
ul.article-item-list div.image img{
	width:100%;
	height:auto;
}
ul.article-item-list div.image img:hover{
	opacity:.7;
}
ul.article-item-list div.info p{
	padding:.3rem;
	margin-bottom:0;
}
ul.article-item-list div.info p a{
	font-weight:bold;
	color:#212529;
}
/*トピックエリア*/
.article-topic .frame{
	border: 2px solid #212529;
    border-radius: 10px;
}
.article-topic .frame img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	margin-bottom:.3rem;
}
.article-topic .frame h3,
.article-topic .frame h4{
	color:#212529;
	border-bottom:2px solid #212529;
	margin:0 .5rem .5rem;
	font-size:1.3rem;
	padding:.3rem 0;
	text-align:center;
}

.article-topic .frame p{
	margin:.5rem;
}
/*
-------------------------------------------------------------------------------
オープンリスト
-------------------------------------------------------------------------------
*/
body.open div.jumbotron{
	background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
	padding:0;
}
body.open div.jumbotron div img{
	margin:50px 0;
}

body.open h1{
	color:#FF3;
	padding:0px 0;
	margin:0;
	font-size:2rem;
	text-shadow:
	#F00 2px 0px,  #F00 -2px 0px,
	#F00 0px -2px, #F00 0px 2px,
	#F00 2px 2px , #F00 -2px 2px,
	#F00 2px -2px, #F00 -2px -2px,
	#F00 1px 2px,  #F00 -1px 2px,
	#F00 1px -2px, #F00 -1px -2px,
	#F00 2px 1px,  #F00 -2px 1px,
	#F00 2px -1px, #F00 -2px -1px
	;
}
body.open h1 strong{
	display:block;
}

@media screen and (max-width:768px){
body.open h1{
	font-size:1em;
}
}

.intro ul li a{
	text-decoration:none;
	color:#212529;
}

.cost ul.condition dl{
	background-color:#00A0C7;
	width:auto;
	border-radius:50%;
	text-align:center;
	width:160px;
	height:160px;
	margin:auto;
	color:#FFF;
}
.cost ul.condition li:last-child dl{
	background-color:#F7941D;
}
.cost ul.condition dl dt{
	font-weight:normal;
	margin:20px 0 0 0;
}
.cost ul.condition dl dt i{
	margin-right:0.2rem;
}

.cost ul.condition dl dd{
	font-weight:bold;
	margin:10px 0 0 0;
	font-size:2.2rem;
	text-shadow:2px 2px 0px rgba(0,0,0,0.1);
}
.cost p.total{
	text-align:center;
	font-size:1rem;
}
.cost p.total-price{
	text-align:center;
	margin-bottom:50px;
}
.cost p.total-price strong{
	color:#C00;
	font-size:3.5rem;
	border-bottom:5px solid #C00;
	font-weight:bold;
}
.cost p.total-price strong i{
	margin-right:0.4rem;
}
.cost p.total-price strong span{
	font-size:2rem;
	padding:0 15px 0;
	font-style:normal;
}
div.fluid-table{
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 0 0;
    -webkit-overflow-scrolling: touch;
    margin-top: 15px;
}
table.open-item-list{
	width:100%;
	border-collapse:collapse;
	border:3px solid #CCC;
}

table.open-item-list th,
table.open-item-list td{
	border:1px solid #DDD;
	padding:0.2rem 0.5rem;
	text-align:center;
}
table.open-item-list th{
	color:#F30;
	white-space:nowrap;
	font-weight:bold;
	font-size:1rem;
}

table.open-item-list tr:nth-child(even) td{
    background:#F3F3F3;
}

table.open-item-list td.name a:before{
	font-family:"Font Awesome 7 Free";
	white-space: pre;
	content : " \f14a";
	font-weight:400;
	margin-right:3px;
}

table.open-item-list td.name{
	text-align:left;
	font-weight:bold;
}
table.open-item-list td.price{
	text-align:right;
}

table.open-item-list caption{
	caption-side:top;
	color:#666;
	padding-top:.3rem;
	padding-bottom:.2rem;
}
div.openlist-list{
	border:3px solid #CCC;
}
div.openlist-list h3{
	color:#F30;
	font-size:1rem;
	border-color:#DDD;
}
div.openlist-list li{
	font-size:1.0rem;
}


img.imgSpOnly{
	display:none;
}
img.imgPcOnly{
	display:inline;
}
@media screen and (max-width: 700px){
img.imgSpOnly{
	display:inline;
}
img.imgPcOnly{
	display:none;
}
}

/*
-------------------------------------------------------------------------------
glasslids
-------------------------------------------------------------------------------
*/
body.glasslids div.jumbotron{
	background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
	padding:0;
}

section.whats-glasslids ul li div,
section.whats-glasslids ol li div{
	text-align:center;
	border:3px solid #06C;
	padding:5px 0;
	border-radius:5px;
}
section.whats-glasslids ul li div h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.8rem;
	color:#333;
	border:none;
	padding:0;
}
section.whats-glasslids ul li div h4 span{
	font-family:"Arial Black", Gadget, sans-serif;
	color:#06C;
	font-size:2.5rem;
}
section.whats-glasslids ul li div p,
section.whats-glasslids ol li div p{
	color:#06C;
	font-weight:bold;
	margin:10px 0;
	font-size:1rem;
}
aside div{
	border:#06C 3px solid;
	border-radius: 10px 10px 10px 10px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e9f6fd+0,d3eefb+100;Blue+3D+%233 */
background: rgb(233,246,253); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(233,246,253,1) 0%, rgba(211,238,251,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(233,246,253,1) 0%,rgba(211,238,251,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(233,246,253,1) 0%,rgba(211,238,251,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f6fd', endColorstr='#d3eefb',GradientType=0 ); /* IE6-9 */



}

aside h4{
	color:#000;
	font-size:20px;
	border-bottom:#06C 1px solid;
	padding-bottom:20px;
	line-height:150%;
}
aside h4 span{
	color:#F30;
	font-size:30px;
}
aside p{
	margin:0px 20px 20px 20px;
}
aside p span{
	font-size:90%;
	color:#F30;
	font-weight:bold;
}
@media screen and (max-width:768px){
aside h4{
	padding:10px 20px;
}
div.overflowContets{/*はみ出した部分は非表示かつスクロール*/
        width:auto;
        overflow-y:hidden;
        overflow-x:auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch;

}
}
/*
-------------------------------------------------------------------------------
sweets-tool
-------------------------------------------------------------------------------
*/
body.sweetstool div.jumbotron{
	background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
	padding:0;
}

/*
-------------------------------------------------------------------------------
HACCP
-------------------------------------------------------------------------------
*/
body.haccp div.jumbotron{
	background-image:url(/images/article/haccp/bg_eyecatch.jpg);
	background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
	padding:0;
}
body.haccp div.jumbotron img{
	margin-bottom:-20px;
}
section.whats-haccp ul li div,
section.whats-haccp ol li div{
	text-align:center;
	border:3px solid #06C;
	padding:5px 0;
	border-radius:5px;
}
section.whats-haccp ul li div h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.8rem;
	color:#333;
	border:none;
	padding:0;
}
section.whats-haccp ul li div h4:first-letter{
	font-family:"Arial Black", Gadget, sans-serif;
	color:#06C;
	font-size:2.5rem;
}
section.whats-haccp ul li div p,
section.whats-haccp ol li div p{
	color:#06C;
	font-weight:bold;
	margin:10px 0;
	font-size:1rem;
}
section.stainless ul li{
	text-align:center;
}
section.stainless ul li h4{
	color:#06C;
}
section.stainless ul li p{
	text-align:left;
}
section.item-list ul li{
	text-align:center;
}
section.item-list ul li a{
	text-decoration:none;
}
section.item-list ul li a:hover{
	opacity:0.8;
}
section.item-list ul li p{
	text-align:center;
	font-size:1rem;
	font-weight:bold;
	color:#212529;
	margin-bottom:0;
}
section.item-list ul li button{
	margin:5px 0 10px;
	font-size:0.9rem;
}

section.item-list ul li button:after{
	font-family:"Font Awesome 7 Free";
	white-space:pre;
	content: "\f105";
	font-weight:900;
	margin-left:3px;
}

/*
-------------------------------------------------------------------------------
HACCP-COLOR
-------------------------------------------------------------------------------
*/
body.haccp-color div.jumbotron{
	background-image:url(/images/article/haccp-color/bg_eyecatch.jpg);
	background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
	padding:0;
}
section.haccp-color ul li div,
section.haccp-color ol li div{
	text-align:center;
	border:3px solid #06C;
	padding:5px 0;
	border-radius:5px;
}
section.haccp-color ul li div h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.8rem;
	color:#333;
	border:none;
	padding:0;
}
section.haccp-color p.caption{
	text-align:left;
	font-size:75%;
	line-height:120%;
	padding:10px 10px 0 10px;
}
section.haccp-color span.caution{
	color:#F00;
	text-decoration:underline;
	background:none;
}
section.haccp-color p.strong{
	font-size:150%;
	font-weight:bold;
	text-align:center;
	text-decoration:underline;
}

/*
-------------------------------------------------------------------------------
HOTEL-PAN ホテルパン
-------------------------------------------------------------------------------
*/
body.hotel-pan div.jumbotron{
	background-image:url(/images/article/hotel-pan/bg-eyecatch.jpg);
	background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
	padding:0;
}
body.hotel-pan div.jumbotron img{
	margin-bottom:-20px;
}

ul.hotel-pan h3{
	margin-top:30px;
}
table.striped th.activate,
table.striped td.activate{/*ストライプ*/
	background-color:#EEEEEE;
}
@media screen and (max-width:768px){
ul.hotel-pan h3{
	margin-top:10px;
}
}

/*
-------------------------------------------------------------------------------
buffet-style
-------------------------------------------------------------------------------
*/
body.buffet-style div.jumbotron{
	background-image:url(/images/article/buffet-style/bg-eyecatch.jpg);
	background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
	padding:0;
}


/*
-------------------------------------------------------------------------------
お問い合わせ
-------------------------------------------------------------------------------
*/

section.inquiry img{
	width:150px;
	height:auto;
	border-radius:50%;
	border:1px solid #DDD;
}
section.inquiry ul{
}



section.inquiry ul dl{
	border:3px solid #F30;
	text-align:center;
	border-radius: 5px;
	color:#F30;
	padding:5px;
}
section.inquiry ul dl dt{
	font-size:1.2rem;
	padding-bottom:4px;
	border-bottom:2px solid #F30;
}
section.inquiry ul dl dt i{
	font-size:1.4rem;
}
section.inquiry ul dl dt span{
	font-weight:normal;
	font-size:0.8rem;
}
section.inquiry ul dl dd{
	margin:1rem 0.5rem auto;
	font-weight:bold;
	font-size:1.8rem;
	color:#212529;
}
section.inquiry ul dl dd a{
	color:#212529;
}

/*
-------------------------------------------------------------------------------
リスト表示非表示
-------------------------------------------------------------------------------
*/

section.article-list{
	margin:2rem auto 0;
}
section.article-list h2{
	text-align:center;
	color:#090;
	background-color:#FFF;
	font-size:1rem;
	padding:0.5rem 0 0.1rem;
	font-weight:bold;
	margin:0;
}
section.article-list ul{
	background-color:#FFF;
	border:3px solid #090;
	padding:0.5rem;
	margin:0;
	list-style: none;
}
section.article-list ul li{
	margin:0.2rem 0;
	font-size:0.9rem;
}
section.article-list ul li a{
	color:#212529;
	font-weight:bold;
}
section.article-list ul li a:before{
	font-family:"Font Awesome 7 Free";
	white-space: pre;
	content:'\f152';
	font-weight:900;
	color:#090;
	margin-right:0.2rem;
}


.more-article,
.close-article{
	text-align:center;
	padding:4px 0 0;
}
.more-article a,
.close-article a{
	color:#212529;
}


/*
-------------------------------------------------------------------------------
cutlery
-------------------------------------------------------------------------------
*/
div.eycatch-cutlery{
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
}
div.eycatch-cutlery h1{
	color:#FFF;
	padding:1.5rem 0;
}


main.cutlery{
	
}

main.cutlery ul li{
	text-align:center;
	padding-bottom:6px;
}
main.cutlery ul li div{
	border:1px solid #DDD;
	border-radius:0px;
	box-shadow:0px 7px 2px -4px rgba(0,0,0,0.1);
	margin:0 3px;
}
main.cutlery ul li div:hover{
	box-shadow:none;
}
main.cutlery ul li img{
	max-height:200px;
	height:auto;
}
main.cutlery ul li p{
	font-size:0.85rem;
	font-weight:bold;
	margin:0;
	padding:0.5rem 0;
}
main.cutlery ul li a{
	color:#212529;
}
main.cutlery ul li p:before{
	font-family:"Font Awesome 7 Free";
	white-space: pre;
	content:'\f2e7';
	font-weight:900;
	margin-right:0.2rem;
}
ul.list-compact li h4{
	margin:0 0 5px 0 !important;
}
div.row p.productsButton a{
	display:block;
	background-color:#F90;
	box-shadow:0px 5px 0px 0px #963;
	border-radius:7px;
	text-align:center;
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
	padding:5px;
	margin:auto;
	text-shadow:2px 2px 0px rgba(0,0,0,0.3);
	background-repeat:no-repeat;
	background-position:100% 50%;
}
/*
-------------------------------------------------------------------------------
boukatsu
-------------------------------------------------------------------------------
*/
.boukatsu ol li div{
	margin-top:1.8rem;
	text-align:center;
	border:3px solid #06C;
	padding:1rem 1rem 0 1.5rem;
	border-radius:10px;
	background: rgb(238,238,238);
}
.boukatsu ol li div h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.5rem;
	color:#06C;
	border:none;
	padding:0;
}
.boukatsu ol.news-paper li div{
	margin-top:0.8rem;
	text-align:center;
	border:3px solid #036;
	padding:1rem 1rem 0 1.5rem;
	border-radius:10px;
	background: rgb(238,238,238);
}
.boukatsu ol.news-paper li div h4{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.5rem;
	color:#000;
	border:none;
	padding:0;
}
.boukatsu ol li div h4 i{
	color:#06C;
	padding-right:0.5rem;
}
.boukatsu ol.news-pape{
	border-bottom:nonr;
}
.boukatsu ol.news-paper li div h4 {
	color:#036;
	border-bottom:#036 1px solid;
	padding-bottom:0.3rem;
}
.boukatsu ol.news-paper li div h4 i{
	color:#036;
	padding-right:0.5rem;
}
.boukatsu ol.news-paper li div h4 span{
	float:right;
	font-size:0.8rem;
	color:#036;
	border:#036 1px solid;
	padding:0.2rem;
}
.boukatsu ol li div p{
	font-family:monospace"object-fit:cover";
	font-size:0.9rem;
	font-weight:500;
}

.boukatsu .news i{
	padding-right:5px;
}
.boukatsu .harikae-box{
	border:#999 1px solid;
	border-radius:0.5rem;
	color:#FFF;
	background:#999;
	font-size:13pt;
	text-align:center;
	padding:0.5rem 1rem 1rem 1rem;
}
.boukatsu .harikae-box span{
	background:#FFF;
	border:#FFF 2px solid;
	border-radius:0.5rem;
	color:#666;
	display:block;
	padding:0.5rem;
	font-size:18pt;
	text-align:center;
	background-color:#E5E5E5;
}
.boukatsu .boukatsu-box{
	border:#600 1px solid;
	border-radius:0.5rem;
	color:#FFF;
	background:#600;
	font-size:15pt;
	padding:1rem;
	text-align:center;
	font-weight:bold;
	margin-bottom:2rem
}
.boukatsu .boukatsu-box-arrow i{
	color:#600;
	font-size:35pt;
	text-align:center;
	display:block;
	padding:0.5rem 0;
}
.boukatsu .boukatsu-box span{
	background:#FEEBED;
	border:#FFF 1px solid;
	border-radius:0.5rem;
	color:#600;
	display:block;
	padding:0.5rem;
	font-size:20pt;
	text-align:center;
	font-weight:bold;
}
.boukatsu .ex-boukatsu-box{
	border:#999 3px solid;
	padding:2rem 2rem 1rem 2rem;
	background:#CCC;
	border-radius:0.5rem;
	margin:0.5rem 0 3rem 0;

}
.boukatsu .ex-boukatsu-box img{
border:3px solid #EEE;
box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-webkit-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-moz-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
}

.boukatsu .ex-boukatsu-box02{
	border:1px solid #999;
	padding:0.5rem 6rem 1rem 6rem;
	border-radius:0.5rem;
	margin:0.5rem 0 3rem 0;
}
.boukatsu .ex-boukatsu-box02 img{
border:3px solid #EEE;
box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-webkit-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-moz-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
}

.form-explain {
  min-height: 5em;
}
.boukatsu .boukatsu-info{
	width:100%;
	margin:1rem 0;
	text-align:center;
	padding:0.5rem;
	border:#060 1px solid;
	color:#060;
	font-size:16pt;
	font-weight:bold;
	border-radius:0.5rem;
	background: rgb(238,238,238);
}
.boukatsu span.green{
	color:#060;
	font-weight:bold;
}
.boukatsu img.point{
	display:block;
	padding:0.5rem 0;
}
table.normal{
	border-collapse:collapse;
	border:1px solid #CCC;
}
table.normal img{
	margin:2rem;
}
table.normal th,
table.normal td{
	border:1px solid #CCC;
	padding:.2rem;
	font-size:.9rem;
}
table.normal th{
	background: rgb(238,238,238);
	text-align:center;
	color:#060;
	padding:1rem 2rem;
	width:15%;
}

div.order-flow{
	display: flex;
}
div.order-flow div{
	float:left;
	width: 19.3%;
	padding:0.5rem 1rem;
	margin-right: 0.6rem;
	border:#666 3px solid;
	border-radius:0.5rem;
	background: rgb(238,238,238);
}
div.order-flow div.end{
		margin-right: 0;
}
div.order-flow h3{
	font-size:14pt;
}
a.btn--orange {
  color: #fff;
  background-color:#090;
}

a.btn--orange:hover {
  color: #fff;
  background:#005E00;
}

a.btn-c {
  font-size: 2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 7 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  font-weight: 900;
  content: '\f054';
}
@media screen and (max-width:768px){
.boukatsu .ex-boukatsu-box img,
.boukatsu .ex-boukatsu-box02 img{
	margin-bottom:1rem;
}
}
/*
-------------------------------------------------------------------------------
蓄光表示板 -安全用品館-
-------------------------------------------------------------------------------
*/
.luminous table.shopping span{
	background:#090;
	color:#FFF;
	width:fit-content;
	padding:0.2rem 0.5rem;
}
.luminous table.bill span{
	background:#769E9E;
	color:#FFF;
	width:fit-content;
	padding:0.2rem 0.5rem;
}
.luminous table.office span{
	background:#6F81C1;
	color:#FFF;
	width:fit-content;
	padding:0.2rem 0.5rem;
}
.luminous table.factory span{
	background:#8B72A9;
	color:#FFF;
	width:fit-content;
	padding:0.2rem 0.5rem;
}
.luminous table.store span{
	background:#B46674;
	color:#FFF;
	width:fit-content;
	padding:0.2rem 0.5rem;
}
.luminous table.karaoke span{
	background:#B06874;
	color:#FFF;
	width:fit-content;
	padding:0.2rem 0.5rem;
}
.luminous table th{
	background-color:#EEE;
}
@media screen and (max-width:768px){
div.luminous ul.list-unstyled li{
	display:block;
	width:100%;
}

}
/*
-------------------------------------------------------------------------------
はなはなプレート
-------------------------------------------------------------------------------
*/


h1.feature-ogiso{/*カテゴリイメージ【おぎその強化磁器】*/
	background-image: url(/images/genre/tableware/category/image_porcelain_bg.png);
	background-position: 100% 0;
    background-repeat: no-repeat;
}

/*
-------------------------------------------------------------------------------
ordermade-tablecroth
-------------------------------------------------------------------------------
*/
.ordermade-tablecroth ol li div p.caption{
	font-size:0.8rem;
	line-height:150%;
	color:#000;
	font-weight:100;
	text-align:left;
	font-family:Open Sans,sans-serif;
}

.ordermade-tablecroth ol li div{
	margin-top:1.8rem;
	text-align:center;
	border:3px solid #06C;
	padding:0 1rem 0 1.5rem;
	border-radius:10px;
}
.ordermade-tablecroth ol li div dl{
	text-align:left;
	margin-bottom:-15px;
}
.ordermade-tablecroth ol li div dl dt{
	font-size:13pt;
	margin:1rem 0;
	border-bottom:#000 1px solid;
}
.ordermade-tablecroth h5{
	margin-top:1rem;
	font-size:15pt;
	background:#000;
	padding:0.5rem;
	color:#FFF;	
}
.ordermade-tablecroth table.tablecroth{
	margin-bottom:2rem;
}
.ordermade-tablecroth table.tablecroth img{
	margin-left:auto;
	margin-right:auto;
	display:block;

}
.ordermade-tablecroth table.tablecroth tr.item-name td{
	text-align:center;
	background:#EEE;
	font-size:13pt;
}
ul.flow {
  padding: 0;
}
ul.flow li {
  list-style-type: none;
}
ul.flow dd {
  margin-left: 0;
  width:60%;
}
ul.flow > li {
  position: relative;
}
ul.flow > li:not(:last-child) {
  margin-bottom: 40px;
}
ul.flow > li:not(:first-child)::before {
  content: "";
  height: 60px;
  display: block;
  border-left: 4px dotted #e5e5e5;
  position: absolute;
  top: -40px;
  left: -webkit-calc(10% + 30px - 2px);
  left: calc(10% + 30px - 2px);
  z-index: 10;
}
ul.flow > li dl {
  width: 100%;
  padding: 20px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 2px solid rgb(107,144,219);
  border-radius: 10px;
  position: relative;
}
ul.flow > li:not(:last-child) dl::before,
ul.flow > li:not(:last-child) dl::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
ul.flow > li:not(:last-child) dl::before {
  border-width: 22px;
  border-top-color: rgb(107,144,219);
}
ul.flow > li:not(:last-child) dl::after {
  border-width: 20px;
  border-top-color: #fff;
}
ul.flow > li dl dt {
  font-size: 20px;
  font-weight: 600;
  color: rgb(107,144,219);
  -ms-flex-preferred-size: 20%;
  flex-basis:40%;
  margin-right: 2vw;
  text-align: center;
}
ul.flow > li dl dt .icon {
  font-size: 12px;
  color: #fff;
  background: rgb(107,144,219);
  background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
  background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
  padding: 5px 10px;
  margin-bottom: 10px;
  display: block;
  border-radius: 20px;
  position: relative;
  z-index: 100;
}
ul.ordermaide-info{
	width:100%;
	background-color:#099;
	margin-left:0;
	padding:1.5rem 0 1.5rem 3rem;
	border-radius: 8px;
}

ul.ordermaide-info li{
	background-color:#FFF;
	list-style:none;
	border-radius: 5px;
	width:31%;
	margin:0.8rem 0.8rem 0.8rem 0;
}
ul.ordermaide-info li dl{
	padding:2rem;
	text-align:center;
}
ul.ordermaide-info li dl dt{
	font-size:18pt;
}
ul.ordermaide-info li dl dt span{
	font-size:12pt;
	display:block;
}
ul.ordermaide-info li dl dd.namber{
	font-size:20pt;
	color:#F00;
	font-weight:600;
}
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}

a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

a.btn-c {
  font-size: 1.2rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c i.fas{
	font-size:110%;
}

a.btn-c:before {
  font-family: 'Font Awesome 7 Free';
  font-size: 1rem;
  line-height: 1;
  position: absolute;
  top: calc(60% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}
span.noble{
	font-size:110%;
	background-color:#333;
	padding:0 0.5rem 0.2rem 0.5rem;
	margin-right:0.2rem;
	color:#FFF;
	font-weight:700;
}

table.normal{
	border-collapse:collapse;
	border:1px solid #CCC;
}
table.normal caption{
	caption-side:top;
	color:#666;
	padding-top:1rem;
	padding-bottom:.2rem;
}
table.normal th,
table.normal td{
	border:1px solid #CCC;
	padding:.2rem;
	font-size:1rem;
	color:#666;
}
table.normal th{
	background-color:#EEE;
	text-align:center;
}
table.normal span.small{
	font-size:.8rem;
	text-align:justify;
	font-family:monospace;
}
.size-list dl{
	background:#EEE;
	border:#CCC 1px solid;
	padding:0.5rem 1.5rem;
}
.size-list dl dt{
	margin:0;
}
.size-list dl dt img{
	margin:-0.1rem 0.2rem 0 0;
}
.size-list dl dd{
	margin:0 0 0 1.6rem;
}

.brandArea:after,
.brandArea-last:after{
  content: "";
  display: block;
  clear: both;
}
.brandArea:before,
.brandArea-last:before{
  content: "";
  display: block;
  clear: both;	
}
/*
.brandArea{
	border-top:#CCC 1px solid;
	padding:0.5rem 0 0.8rem 0;
	margin:0;
}
.brandArea-last{
	border-top:#CCC 1px solid;
	border-bottom:#CCC 1px solid;
	padding:0.5rem 0 0 0;
	margin:0;
}*/
.brand{
	font-family: 'Font Awesome 7 Free';
	margin:0;
	padding:0;
	
}
.brandArea h5,
.brandArea-last h5{
	font-family: 'Font Awesome 7 Free';
	font-size:1rem;
	letter-spacing:10%;
}
.brandArea p,
.brandArea-last p{
	font-family: 'Font Awesome 7 Free';
	font-size:0.75rem;
	letter-spacing:10%;
}

/*
-------------------------------------------------------------------------------
sushi
-------------------------------------------------------------------------------
*/

p.event-link a{
	color:#F00;
	font-size:1rem;
	font-weight:bold;
	border:#F00 1px solid;
	border-radius: 6px 6px 6px 6px;
	text-align:center;
	padding:1rem 2rem;
	background:#F3F3E9;
	display:block;
	margin:3rem 0;
}

@media screen and (max-width: 960px) {

ul.ordermaide-info{
	padding:1rem 1rem 1rem 2rem;
}
ul.ordermaide-info li{
	width:100%;
}
ul.flow > li dl dt {
  flex-basis: 40%;
}

  .stepbar {
    width: 90%;
  }
.ordermade-tablecroth ol li div{
	width:100%;
}
.ordermade-tablecroth table.tablecroth tr.item-name td{
	font-size:10pt;

}

.brandArea img,
.brandArea-last img{
	width:6rem;
}
.brandArea,
.brandArea-last{
	padding:0.5rem 0rem 1.8rem 0rem;
}

	
}
/*下書き用*/

.markdown h2{
	text-align:left;
	background-color:#212529;
	padding:.3rem;
}
.markdown h3{
	text-align:left;
	color:#212529;
	border-color:#212529;
}
.markdown h4{
	text-align:left;
	color:#212529;
	border-bottom:1px solid #212529;
}
.markdown blockquote{
	border:1px solid #CCC;
	border-left:5px solid #CCC;
	padding:.3rem;
	background-color:#FCFCFC;
}
.markdown blockquote p{
	margin:0;
}

@media screen and (max-width: 960px) {
div.order-flow{
	display:block;
}
div.order-flow div{
	float:none;
	width: 100%;
	margin-bottom:1rem;
}
div.order-flow h3{
	font-size:20pt;
}
}


/*
-----------------------------------------------------------------
フェードインエフェクト初期設定
-----------------------------------------------------------------
*/

.fade-in{
  opacity:0;
  transition-duration:1000ms;
  transition-property:opacity, transform;
}
.fade-in-slow{
  opacity:0;
  transition-duration:2000ms;
  transition-property:opacity, transform;
}
.fade-in-fast{
  opacity:0;
  transition-duration:500ms;
  transition-property:opacity, transform;
}
/*フェードイン方向*/

.fade-in-up{
  transform:translate(0, 50px);
}
.fade-in-down{
  transform:translate(0, -50px);
}
.fade-in-left{
  transform:translate(-50px, 0);
}
.fade-in-right{
  transform:translate(50px, 0);
}
.fade-in-left-far{
  transform:translate(-500px, 0);
}
.fade-in-right-far{
  transform:translate(500px, 0);
}
.scroll-in{
  opacity:1;
  transform:translate(0, 0);
}

/*
-----------------------------------------------------------------
電話問い合わせ
-----------------------------------------------------------------
*/

.inquiry-float{
	position:fixed;
	bottom:0;
	left:0;
	background-color:#EFE9DE;
	/*
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(222,222,222,1) 100%);
	*/
	z-index:10000;
	width:100%;
	padding:.5rem 0 0rem;
	box-shadow: 0px -1px 5px 2px rgba(0, 0, 0, 0.20);
}
.inquiry-float .container{
	max-width:900px;
}
.inquiry-float .head{
	text-align:center;
	color:#300;
	font-weight:bold;
	font-size:.9rem;
}
.inquiry-float div.tel .frame,
.inquiry-float div.form .frame{
	background-color:#FFF;
	padding:.5rem 0 1rem;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
.inquiry-float div.tel p{
	margin-bottom:0;
	line-height:1;
}
.inquiry-float div.tel p.num a{
	color:#C00;
	font-size:1.7rem;
}
.inquiry-float div.tel p.time{
	font-size:.9rem;
	margin-top:.2rem;
}
.inquiry-float div.tel p.time strong{
	font-weight:bold;
	margin-left:.5rem;
}
.inquiry-float div.tel p.num strong{
	font-family: 'Roboto', sans-serif;
}

.inquiry-float div.tel p.inquiry-num{
	font-size:.9rem;
	margin-top:.5rem;
}
.inquiry-float div.tel p.inquiry-num strong{
	font-family: 'Roboto', sans-serif;
	color:#C00;
	font-size:larger;
	margin:0 .2rem;
	text-decoration:underline;
}
.inquiry-float div.form .frame button{
}

@media screen and (max-width: 768px) {
.inquiry-float{
	padding:.3rem 0 0rem;
}
.inquiry-float .head{
	margin-bottom:.2rem;
}
.inquiry-float div.tel .frame,
.inquiry-float div.form .frame{
	border-radius:0px;
	padding:.2rem 0;
}
.inquiry-float div.tel .frame{
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
.inquiry-float div.tel p.num a{
	font-size:1.5rem;
}
.inquiry-float div.tel p.time{
	font-size:.8rem;
}
.inquiry-float div.tel p.inquiry-num{
	font-size:.8rem;
}
.inquiry-float div.form .frame button{
	font-size:.9rem;
}
}

/*
-----------------------------------------------------------------
テーブル
-----------------------------------------------------------------
*/
/*統計表*/
table.stat{
	width:100%;
	border-collapse:collapse;
	border:3px solid #CCC;
	font-size:0.9rem;
}

table.stat th,
table.stat td{
	border:1px solid #DDD;
	padding:0.2rem 0.5rem;
	text-align:center;
}
table.stat th{
	color:#F30;
	white-space:nowrap;
	font-weight:bold;
	font-size:1rem;
}
table.stat td.name a:before{
	font-family:"Font Awesome 7 Free";
	white-space: pre;
	content : " \f14a";
	font-weight:400;
	margin-right:3px;
}
table.stat .dark{
	background:#EEE;
}
table.stat .darkE7{
	background:#E7E7E7;
}
table.stat .darkEF{
	background:#EFEBDC;
}
table.stat .borderBottom{
	border-bottom:#CCC 2px solid;
}
table.stat .borderRight{
	border-right:#CCC 2px solid;
}
table.stat td.name{
	text-align:left;
	font-weight:bold;

}
table.stat caption{
	caption-side:top;
	color:#666;
	padding-top:.3rem;
	padding-bottom:.2rem;
}
/*タブ形式*/
.c-commonTable3 {
  	border-collapse: collapse;
  	table-layout: fixed;
  	width: 100%;
  	font-weight: bold;
  	text-align: center;
}
.c-commonTable3 thead th {
  	padding: 10px;
  	border-right: 2px solid #fff;
   
}
.c-commonTable3 thead th:not(:first-child) {
  	background:#AAE0EE;
  	color: #333;
  	border-radius: 16px 16px 0 0;
  	padding: 10px;

}
.c-commonTable3 thead th span {
  	font-size: 11px;
}
/*
.c-commonTable3 thead th:nth-child(3) {
  background-color: orange;
  position: relative;
}*/
.c-commonTable3 tbody {
  	border: 2px solid #AAE0EE;
}	
.c-commonTable3 tbody tr {
  	background-color: #AAE0EE;
}
.c-commonTable3 tbody tr:nth-child(even) {
  	background-color: #EEE;
}
.c-commonTable3 tbody tr:nth-child(odd) {
  	background-color: #fff;
}
.c-commonTable3 tbody th:nth-child(even),
.c-commonTable3 tbody th:nth-child(odd){
    border-bottom: 2px solid #FFF;
	background-color: #AAE0EE;
	color:#333;
}

.c-commonTable3 tbody td{
 	border-left: 2px solid #AAE0EE;
    border-bottom: 2px solid #AAE0EE;
    padding: 10px;
	font-weight:100;
}
.c-commonTable3 tbody td.name p{
	padding:0;
	margin:0;
}
.c-commonTable3 tbody td.name a:before{
	font-family:"Font Awesome 7 Free";
	white-space: pre;
	content : " \f044";
	font-weight:400;
	margin-right:3px;
}
.c-commonTable3 tbody td.price{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.c-commonTable3 tbody td.exp{
	width:auto;
	font-size:0.8rem;
	text-align:left;
	padding:1rem;
}

/*ノート風*/
table.note {
margin: 0 auto;
width: 100%;
border: none;
border-top: solid 1px #666;
border-bottom: solid 1px #666;
border-collapse: separate;
border-spacing: 0 10px;
background: #f5f5f5;
}

table.note th {
vertical-align: middle;
height: 53px;
width: 124px;
border-right: solid 1px #666;
margin: 0;
text-align: center;
color: #333;
font-size: 16px;
font-weight: bold;
}

table.note td.data {
padding: 0 ;
margin: 0;
height: 53px;
color: #666;
font-size: 14px;
line-height: 16px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}

table.note td:fst-child {
padding: 0 0 0 10px;
vertical-align: middle;
}

table.note td.bar {
height: 1px;
width: 100%;
border-top: solid 1px #34495e;
}

dl.normal{
	margin:5px 0;
	text-align:left;
}
/*ワイヤーディスプレイ*/
dl.normal div{
	clear:both;
	padding:10px 0;
}
dl.normal dt{
	font-weight:bold;
	font-size:110%;
}
dl.normal dd{
	font-size:75%;
	text-align:justify;
	overflow:hidden;
	
}


/*マーカーライン挿入*/
ol.marker p span {
    background: linear-gradient(transparent 60%, #FFFE03 60%);
}
/*囲み枠*/
.simple_box3_1 {
    position: relative;
    padding: 1.2rem 2.0rem 0 0.6rem;
    margin: 2em 0;
    border: solid 3px #c71585;/*線*/
    border-radius: 8px;/*角の丸み*/
}
.simple_box3_1 .simple_box_title{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 1.3rem;/*タイトル文字サイズ*/
    background: #ffffff;/*タイトル文字背景色*/
    color: #c71585;/*タイトル文字色*/
    font-weight: bold;
}

.simple_box3_1 p {
    margin: 0; 
    padding: 0;
	text-align:justify;
	line-height:200%;
	color: #c71585;
	font-size:11pt;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:700;

}
section.container div.infoBox{
	width:auto;
	border:5px solid #CCC;
	border-radius:8px;
	margin:15px auto;
	padding:0px 15px;
	background:#EEEEEE;
}
section.container div.infoBox div.info p.head{
	font-size:1.2rem;
	margin:10px 5px 5px 0px;

}
section.container div.infoBox div.info p{
	font-size:90%;
	
}
section.container div.infoBox div.image{
	float:left;
	width:250px;
	margin:10px 15px 10px 10px;
}

section.container div.infoBox div.image img{
	width:250px;
	height:auto;
}

@media screen and (max-width: 768px) {
	table.note td.data{
		display:block;
	}
section.container div.infoBox div.image{
	margin:15px 15px 0px 0px;
}
section.container div.infoBox div.info p{
	font-size:100%;
	
}
}

