@charset "UTF-8";
/* 静的サイト用の追加スタイル（手書き。build_parts.js が template/default/css/static.css にコピーする） */

/* ---------------------------------------------------------------- 営業日のご案内
   元はカレンダーの上の案内。カレンダー（DB の休日データが要る）は出さないので、下の線と余白をなくす */
#calendar{padding-bottom:0;}
#calendar .guide{border-bottom:none;margin-bottom:0;}

#josui_wrap #sec_05 .josui_grid>ul{grid-template-columns:repeat(2,minmax(0,1fr));}
#josui_wrap #sec_05 .josui_grid>ul>li.n7{grid-column:auto;}
#josui_wrap #sec_05 .josui_grid>ul>li.n7 .inner_pj{display:flex!important;}
/* 元の CSS は .inner_pj>p の line-height が 1em なので、SP で注記が 2 行になると行が重なる */
#josui_wrap #sec_05 .josui_grid>ul>li.n7 div.item-wrap>.inner_pj>p.sup{line-height:1.4;}
@media screen and (min-width:741px){
	#josui_wrap #sec_05 .josui_grid>ul li h5{padding-top:10px;padding-bottom:10px;}
	#josui_wrap #sec_05 .josui_grid>ul>li>.item-wrap>.inner>div.price_box{padding:8px 0;margin-right:5%;}
}
@media screen and (max-width:740px){
	/* 価格の欄は元の CSS で両端ぞろえ（justify）になっていて、「（税抜14,600円）」が折り返すと字の間が空くので、左ぞろえ・1 行にする */
	#josui_wrap #sec_05 .josui_grid>ul>li>.item-wrap>.inner>div.price_box>p{text-align:left;}
	#josui_wrap #sec_05 .josui_grid>ul>li>.item-wrap>.inner>div.price_box>p>span{white-space:nowrap;font-size:11px;letter-spacing:-0.05em;}
}
@media screen and (max-width:400px){
	/* 幅 360〜400 では 11px でも欄から数 px 出るので、もう 1 段小さくする（360 未満は 1 列なので広い） */
	#josui_wrap #sec_05 .josui_grid>ul>li>.item-wrap>.inner>div.price_box>p>span{font-size:10px;}
}
@media screen and (max-width:740px){
	#josui_wrap #sec_05 .josui_grid>ul>li.n7 .inner_pj>p.sup{text-align:center;}
}
#josui_wrap #sec_05 .josui_grid>ul>li[class]>div.item-wrap{width:auto;max-width:90%;margin:20px auto 16px;}

/* ---------------------------------------------------------------- 商品カテゴリ（第1階層を開くと 1 つ下のカテゴリが出る。第1階層のページは無い）
   左カラム：マウスを乗せると右に出る（category.twig の script）。キーボードで選んだときも出す */
#category>li>a:not([href]){cursor:default;}
#category>li:focus-within>ul{display:block;}
@media screen and (max-width:800px){
	.theme_side_left>.container-fluid.inner,
	.theme_side_both>.container-fluid.inner{display:flex;flex-direction:column;}
	.theme_side_left #side_left,
	.theme_side_both #side_left{display:block;order:1;float:none;width:100%;max-width:none;min-width:0;margin:20px 0 0;}
	#side_left>:not(#category){display:none;}
	#sp_bottom_links{order:2;}
	#category{margin-bottom:20px;}
	#category>li>a:not([href]){padding:12px 30px 12px 10px;background-image:none;}
	#category>li>a:not([href])::after{
		content:"＋";
		position:absolute;
		right:8px;
		top:50%;
		transform:translateY(-50%);
		color:#50AAD0;
		font-weight:bold;
	}
	#category>li.open>a::after{content:"－";}
	#category>li>ul{display:none!important;position:static;margin:0!important;min-width:0;box-shadow:none;background:#F5FAFC;}
	#category>li.open>ul{display:block!important;}
	#category>li ul li{border-left:none;}
	#category>li ul li a{padding:11px 24px 11px 22px;font-size:13px;}
}
/* スライドメニュー・フッター：<details> で開く */
#slide_menu ul li.cat summary,
#footer .product_search li.cat summary{list-style:none;cursor:pointer;position:relative;}
#slide_menu ul li.cat summary::-webkit-details-marker,
#footer .product_search li.cat summary::-webkit-details-marker{display:none;}
#slide_menu ul li.cat summary{
	padding:8px 30px 8px 12px;
	font-size:14px;
	color:#333;
	border-bottom:1px solid #FFF;
}
#slide_menu ul li.cat summary::after{
	content:"＋";
	position:absolute;
	right:8px;
	top:7px;
	color:#50AAD0;
	font-weight:bold;
}
#slide_menu ul li.cat details[open]>summary::after{content:"－";}
#slide_menu ul li.cat ul{padding-bottom:0;border-top:none;background:#EAE4E0;}
#slide_menu ul li.cat ul li a{padding-left:24px;padding-right:20px;font-size:13px;}
#footer .product_search li.cat details{float:left;width:calc(100% - 20px);}
#footer .product_search li.cat summary{font-size:13px;color:#333;padding-bottom:2px;}
#footer .product_search li.cat summary::after{content:"＋";color:#50AAD0;padding-left:6px;font-size:11px;}
#footer .product_search li.cat details[open]>summary::after{content:"－";}
#footer .product_search li.cat ul{margin:2px 0 6px;}
#footer .product_search li.cat ul li a{font-size:12px;}
/* 元のページは幅 360px 未満を考えておらず、幅 320 では 2 列のままだと 8px はみ出す。360px 未満は 1 列にする */
@media screen and (max-width:359px){
	#josui_wrap #sec_05 .josui_grid>ul{grid-template-columns:minmax(0,1fr);}
	#josui_wrap #sec_05 .josui_grid>ul>li{grid-column:auto;}
}

.order_tel{
	clear:both;
	box-sizing:border-box;
	background-color:#FFF;
	border:2px solid #50AAD0;
	border-radius:10px;
	overflow:hidden;
	padding:0 0 20px 0;
	margin-bottom:45px;
	text-align:center;
}
.order_tel .order_tel__title{
	background-color:#50AAD0;
	color:#FFF;
	font-size:17px;
	font-weight:bolder;
	text-align:center;
	padding:8px 10px 7px 10px;
	margin-bottom:12px;
}
.order_tel .order_tel__box{
	margin:0 20px;
	padding:15px 20px 12px 20px;
	background-color:#EAF5FB;
	border-radius:8px;
	text-align:center;
}
.order_tel .nowrap{white-space:nowrap;}
/* default.css の p の左寄せより優先させる */
.order_tel p{text-align:center;}
.order_tel .order_tel__lead{
	font-size:13px;
	line-height:160%;
	padding:0 15px;
	margin-bottom:12px;
}
.order_tel .order_tel__lead em{
	font-style:normal;
	font-weight:bolder;
}
.order_tel .order_tel__num{
	display:inline-block;
	color:#333;
	font-size:15px;
	font-weight:bolder;
	line-height:1.3;
	margin-bottom:6px;
}
.order_tel .order_tel__num span{
	font-size:30px;
	color:#E75108;
	letter-spacing:0.02em;
	padding-left:4px;
}
.order_tel .order_tel__num:hover{text-decoration:none;opacity:0.8;}
.order_tel .order_tel__time{
	font-size:13px;
	line-height:150%;
	margin-bottom:5px;
}
.order_tel .order_tel__note{
	font-size:12px;
	color:#666;
	margin-top:10px;
	padding:10px 10px 0 10px;
	border-top:1px dashed #50AAD0;
}
@media screen and (max-width:640px){
	.order_tel{margin-bottom:15px;padding-bottom:12px;}
	.order_tel .order_tel__title{font-size:15px;padding:6px 8px 5px 8px;margin-bottom:8px;}
	.order_tel .order_tel__box{margin:0 10px;padding:12px 10px 10px 10px;}
	.order_tel p.order_tel__lead{font-size:12px;text-align:left;padding:0 10px;}
	.order_tel .order_tel__num{font-size:13px;}
	.order_tel .order_tel__num span{display:block;font-size:26px;padding-left:0;}
	.order_tel .order_tel__time{font-size:12px;}
}

@media screen and (min-width:741px){
	#page_homepage #josui_wrap #sec_05 .josui_grid{width:90%;margin-left:auto;margin-right:auto;}
}