@CHARSET "UTF-8";

.bkWhite{background:#fff;}



/** 各ページ */
.page{
	display:none;
	opacity:0;
	transition: all 300ms 0s ease;
	min-height:100vh;
	margin-bottom:100px;
}
/** 現在表示中のページ */
.nowDisp{
	display:block;
	opacity:100;
}

.complete{ display:none; }

.flexBlock{flex-wrap:wrap;}
.flexBlock .maxW340{display:flex; flex-direction:column;}
.itemname{font-size:26px; font-size:clamp(1.375rem, 1.284rem + 0.45vw, 1.625rem); letter-spacing:0.2em ;font-weight:500;}
.image.item{width:90%;}
h4.heading{font-size:18px; font-size:clamp(1rem, 0.955rem + 0.23vw, 1.125rem); letter-spacing:0.1em; font-weight:400;}
h4.heading span{font-size:90%; letter-spacing:0.1em; font-weight:400;}

#confirmpage .flexBlock{gap:16px 32px;}
#confirmpage .flexBlock>div{width:240px;}
#confirmpage .flexBlock>div .itemname{font-size:20px;}
#confirmpage .flexBlock>div .image.item img{object-fit:cover; aspect-ratio:5/4; margin-bottom:16px;}

/** overlay */
#overlay {z-index: 900;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#CCC;filter:grayscale(1);opacity:.60;display: none;}
.pseudoPopupBox {border: 1px solid #808099;z-index: 910;overflow: auto;background-color: white;top: 50%;left: 50%;position:fixed;display: none;
	width: 300px;margin-left:-150px;height: 300px;margin-top:-150px;}
#pseudoPopupBoxLoading{width:200px;margin-left:-100px;height:250px;margin-top:-125px;}



/*薪注文画面*/
/* === タブのデザイン === */
/** タブブロック */
.tabBlock{ display:flex; justify-content:space-around;}
.labelwrap{width:clamp(9.375rem, 1.875rem + 37.5vw, 30rem); }
.tab{display:block; font-size:clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem); letter-spacing:0.1em ;font-weight:500; padding:clamp(0.625rem, 0.398rem + 1.14vw, 1.25rem) 0; color:white; background:var(--link-color); border-radius:10px 10px 0 0;}
.tab a{color:white; cursor:pointer; width:100%;}
.mainmakiContainer{ border-top:4px solid var(--link-color); margin-top:-4px;}

/** タブ用radio 非表示 */
input[name="tabbtn"] { display: none; }
/** タブの切り替え 最初はどちらも非表示 */
#sugumakiBlock, #jisakumakiBlock{ display:none;}

#sugumaki:checked ~ #makiform .mainmakiContainer #sugumakiBlock{ display:block; }
#sugumaki:checked ~ .tabBlock #sugumakiWrap{ border:4px solid var(--link-color); border-radius:10px 10px 0 0; border-bottom:none; }
#sugumaki:checked ~ .tabBlock #sugumakiWrap label{ color:var(--link-color); background:white; }
#sugumaki:checked ~ .tabBlock #sugumakiWrap label a{ color:var(--link-color); background:white; }

#jisakumaki:checked ~ #makiform .mainmakiContainer #jisakumakiBlock{ display:block; }
#jisakumaki:checked ~ .tabBlock #jisakumakiWrap{ border:4px solid var(--link-color); border-radius:10px 10px 0 0; border-bottom:none; }
#jisakumaki:checked ~ .tabBlock #jisakumakiWrap label{ color:var(--link-color); background:white; }
#jisakumaki:checked ~ .tabBlock #jisakumakiWrap label a{ color:var(--link-color); background:white; }

@media(max-width:880px ){
	div.letter{text-align:left; padding-left:3%; padding-right:3%;}
	div.letter br{display:none;}

	#makiform .flexBlock .maxW340{display:flex; flex-direction:column;}
	#makiform h4.heading span{display:block;}
	#makiform .flexBlock .maxW340 .image.item{width:58%; margin:0;}

	#withorderBlock .maxW340 .flexBlock.end{flex-direction:row-reverse;}
	#withorderBlock .maxW340 .image.item{width:58%; margin:0;}
	#confirmpage .flexBlock>div{ width:80%; display:flex; flex-direction:row-reverse;} 
	#confirmpage .flexBlock>div>div{ width:50%;} 
	#withorderBlock .itemname,#confirmpage .flexBlock .itemname{width:6em;}
		
	#delivery_fee .column2{display:flex; flex-direction:column-reverse;}

	.btn_cart{background:#fff; border:2px dotted var(--link-color);}
	nav.grobalNav ul.flexBlock{}
	#other_stove{grid-template-columns:1fr;}
}

@media(max-width:640px ){
	#featurePoints{width:90%;}

}