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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-style:normal; font-weight:normal; font-size:100%; vertical-align:baseline;}
strong { margin:0; padding:0; border:0; font-style:normal; font-weight:bold; font-size:100%; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
html{ overflow-y:scroll;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content:none;}
input, textarea{ margin:0; padding:0;}
ol, ul, li{ list-style:none;}
table{ border-collapse:collapse; border-spacing:0; table-layout: fixed;}
caption, th{ text-align:left;}
a:focus { outline:none;}
input::placeholder, textarea::placeholder { color: #aaa;}
main { display: block;}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix { display:inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* End hide from IE-mac */

* { box-sizing:border-box;}
/*
a:hover { transition:0.3s; opacity:0.75;}
*/

img { width:auto; height:auto; vertical-align: bottom;}

/*---- body, wrap, inner ----*/

body { width: 100%; line-height: 150%; color: #333; font-size: 16px; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; text-align: center; word-wrap: break-word; overflow: hidden;}

.innerW { position: relative; width: 100%; max-width: 1120px; padding: 0 10px; margin: 0 auto;}

.inner { position: relative; width: 100%; max-width: 1020px; margin: 0 auto;}

@media screen and (max-width: 768px){
	body { min-width: 1px;}
	.inner, .innerW { padding: 0 10px;}
}
@media screen and (max-width: 640px){

}
@media screen and (max-width: 480px){
}


/*---- header ----*/
#headerWrap { width: 100%;}
.innerH { position: relative; width: 1120px; padding: 0 10px; margin: 0 auto;}

.headerWrap { display: flex; flex-direction: row; justify-content: space-between; width: 100%;}

.headerWrap .box { flex: auto;}
.headerWrap .box .top { height: 70px; padding-top: 20px; margin-bottom: 10px;}
.headerWrap .box .top img { height: 50px;}
.headerWrap .box .row { height: 30px; margin-bottom: 10px;}
.headerWrap .box .row img { height: 30px;}

.headerWrap .box.h1box { flex: 236px; padding-right: 0px;}
.headerWrap .box.h1box .top { padding-top: 14px;}
.headerWrap .box.h1box .top a { display: block; width: 100%; height: 56px;}
.headerWrap .box.h1box .top a img { height: 56px;}
.headerWrap .box.h1box .row p { color: #003399; font-size: 0.75rem; font-weight: bold; line-height: 30px;}

.headerWrap .box.search .top { position: relative;}
.headerWrap .box.search .top:before { position: absolute; left: 0; height: 50px; border-left: 1px #000 solid; content: '';}
.headerWrap .box.search .row { padding: 0 10px;}
.headerWrap .box.search .row input { height: 28px; background: #fff; border: 1px #000 solid; vertical-align: middle;}
.headerWrap .box.search .row button { height: 28px; background: #000; border: 1px #000 solid; color: #fff; vertical-align: middle;}
.headerWrap .box.search .row button:hover { cursor: pointer; transition:0.3s; opacity:0.75;}

.headerWrap .box.order { flex: 300px;}
.headerWrap .box.order .top a { display: block; height: 50px; background: rgb(223,24,24); background: linear-gradient(106deg, rgba(223,24,24,1) 75%, rgba(255,42,0,1) 100%); color: #fff; font-size: 1.25rem; text-decoration: none; line-height: 50px;}
.headerWrap .box.order .top a:hover { transition: 0.2s; opacity: 0.75;}

.headerWrap .box.order .linkWrap { display: flex; flex-direction: row; justify-content: space-between; width: 100%;}
.headerWrap .box.order .linkWrap a { flex: auto; display: block; height: 30px; margin-right: 10px; border: 1px #00298E solid; color: #00298E; font-size: 14px; text-decoration: none; line-height: 30px;}
.headerWrap .box.order .linkWrap a:last-child { margin-right: 0;}
.headerWrap .box.order .linkWrap a:hover { transition: 0.2s; background: #F0F7FF;}

.headerWrap .mb { display: none;}

@media screen and (max-width: 768px){
	#headerWrap { position: fixed; left:0; top:0; height: 80px; background: #fff; box-shadow: 1px 1px 3px #eee; z-index: 8000;}
	.innerH { width: auto; padding: 0;}
	.headerWrap .pc { display: none;}
	.headerWrap .mb { display: block;}
	.headerWrap .box { flex: 1; padding: 10px 0;}

	.headerWrap .box.h1box { flex: 3.5; padding: 10px 0 10px 10px;}
	.headerWrap .box.h1box .top { padding: 0; margin: 0;}

	.headerWrap .box.tel a, .headerWrap .box.cart a { display: block; color: #003399; text-decoration: none; border-right: 1px #999 solid;}
	.headerWrap .box.tel a i, .headerWrap .box.cart a i { font-size: 2rem;}
	.headerWrap .box.tel a p, .headerWrap .box.cart a p { font-size: 1rem; font-weight: bold;}

	.headerWrap .box.mail { padding: 5px 0;}
	.headerWrap .box.mail a { display: block; color: #E01818; text-decoration: none;}
	.headerWrap .box.mail a i { font-size: 2rem;}
	.headerWrap .box.mail a p { font-size: 1rem; font-weight: bold; line-height: 1;}

	.headerWrap .box.menu { padding: 0;}
	.headerWrap .box.menu .menuBtn { height: 80px; padding: 10px 0; background: #003399; color: #fff;}
	.headerWrap .box.menu .menuBtn i { font-size: 2rem;}
	.headerWrap .box.menu .menuBtn i.fa-times { display: none;}
	.headerWrap .box.menu .menuBtn.close i.fa-bars { display: none;}
	.headerWrap .box.menu .menuBtn.close i.fa-times { display: inline !important;}
	.headerWrap .box.menu .menuBtn p { font-size: 1rem; font-weight: bold; line-height: 1;}
}
@media screen and (max-width: 480px){
	.headerWrap { max-height: 60px;}
	.headerWrap .box { padding: 5px 0;}
	.headerWrap .box.h1box .top a img { height: 40px;}
	.headerWrap .box.tel a i, .headerWrap .box.cart a i, .headerWrap .box.mail a i, .headerWrap .box.menu .menuBtn i { font-size: 1.5rem;}
	.headerWrap .box.tel a p, .headerWrap .box.cart a p, .headerWrap .box.mail a p, .headerWrap .box.menu .menuBtn p { font-size: 9px;}
}

/* notice */

#noticeWrap { width: 100%; height: 42px; background: #eee; line-height: 42px;}
#noticeWrap ul { width: 100%; text-align: left;}
#noticeWrap ul li { display: inline-block; font-size: 0.875rem;}
#noticeWrap ul li a { margin-left: 1em; color: #333; text-decoration: none;}
#noticeWrap ul li a:before { content: '・';}
#noticeWrap ul li a:hover { transition: 0.2s; opacity: 0.75;}

@media screen and (max-width: 768px){
	#noticeWrap { display: none;}
}

/* gNavi */
#gNavi { width: 100%;}
#gNavi ul { display: flex; flex-direction: row; justify-content: space-between; width: 100%; padding: 20px 0;}
#gNavi ul li { flex: 1;}
#gNavi ul li a { display: block; color: #333; font-size: 14px; text-decoration: none;}
#gNavi ul li a figure .imgBox { height: 64px;}
#gNavi ul li a:hover { transition: 0.2s; opacity: 0.75;}

@media screen and (max-width: 768px){
	#gNavi { display: none;}
}


/* TOP */
#topWrap .imgBox { width: 100%; padding: 0 10px; background: #eee;}

/* bread list */
#breadList { height: 40px; margin-bottom: 40px;}
#breadList ul li { font-size: 0.875rem; line-height: 40px; float: left;}
#breadList ul li:after { margin: 0 1em; content: '>';}
#breadList ul li:last-child:after { display: none;}
#breadList ul li a { color: #333; text-decoration: none;}
#breadList ul li a:hover { transition:0.2s; text-decoration: underline;}

@media screen and (max-width: 768px){
	#breadList { margin-bottom: 40px;}
}
@media screen and (max-width: 480px){
	#breadList { margin-bottom: 20px;}
}

/*---- main,article ----*/
#mainWrap { display: block;}
#articleWrap { width: 100%;}
#articleWrap .h1dott { margin-bottom: 80px; }
#articleWrap .h2dott { margin-bottom: 40px;}
#articleWrap .h1dott, #articleWrap .h2dott { display: inline-block; padding: 0 100px; background: url(../images/h2dott.png) center left repeat-x;}
#articleWrap .h1dott h1, #articleWrap .h2dott h2 { display: inline-block; padding: 0 1em; background: #fff; color: #00288D; font-size: 1.5rem; font-weight: bold;}

@media screen and (max-width: 768px){
	#mainWrap { padding-top: 80px;}
	#articleWrap .h1dott { margin-bottom: 60px;}
	#articleWrap .h1dott, #articleWrap .h2dott { padding: 0 80px;}
}
@media screen and (max-width: 640px){
	#articleWrap .h1dott { margin-bottom: 40px;}
	#articleWrap .h1dott, #articleWrap .h2dott { padding: 0 60px;}
}
@media screen and (max-width: 480px){
	#articleWrap .h1dott { margin-bottom: 20px;}
	#articleWrap .h2dott { margin-bottom: 20px;}
	#articleWrap .h1dott, #articleWrap .h2dott { padding: 0 40px;}
}

/*---- aside ----*/
#asideWrap { width: 100%;}


/*---- section ----*/
section { width: 100%;}
section .mb { display: none;}
section .mb120 { margin-bottom: 120px;}
section .mb80 { margin-bottom: 80px;}
section .mb60 { margin-bottom: 60px;}
section .mb40 { margin-bottom: 40px;}
section .mb20 { margin-bottom: 20px;}
section .anchorPoint { margin-top:-100px; padding-top:100px;} /* 数字は固定ヘッダーのheight */

section .tableWrap { display: table;}
section .tableWrap.fixed { display: table; table-layout: fixed;}
section .tableWrap .box { display: table-cell;}
section .tableWrap .box.top { vertical-align: top;}
section .tableWrap .box.mid { vertical-align: middle}
section .tableWrap .box.left { text-align: left;}
section .tableWrap .box.center { text-align: center;}

@media screen and (max-width: 768px){
	section .pc { display: none;}
	section .mb { display: block;}
	section .mb120, section .mb80 { margin-bottom: 60px;}
	section .mb60 { margin-bottom: 40px;}
	section .mb40 { margin-bottom: 30px;}
	section .mb20 { margin-bottom: 15px;}
	section .tableWrap, section .tableWrap .box { display: block; width: 100%;}
}

@media screen and (max-width: 480px){
	section .mb120, section .mb80 { margin-bottom: 40px;}
	section .mb60 { margin-bottom: 30px;}
	section .mb40 { margin-bottom: 20px;}
	section .mb20 { margin-bottom: 10px;}
}


/*---- bottom ----*/
#bottomWrap { width: 100%;}
#bottomWrap .banner .mb { display: none;}

#bottomWrap .banner .box, .bannerBox .box { width: 100%; margin-bottom: 120px;}
#bottomWrap .banner .box a, .bannerBox .box a { display: block;}
#bottomWrap .banner .box a:hover, .bannerBox .box a:hover { transition:0.3s; opacity:0.75;}
#bottomWrap .banner .sankaku, .bannerBox .sankaku { margin-bottom: 40px;}

#bottomWrap .link  { margin-bottom: 60px;}
#bottomWrap .link .h2wrap { display: inline-block; padding: 0 100px; margin: 0 auto 60px auto; background: url(../images/h2dott.png) center left repeat-x;}
#bottomWrap .link .h2wrap h2 { display: inline-block; padding: 0 1em; background: #fff; color: #00288D; font-size: 1.125rem; font-weight: bold;}
#bottomWrap .link ul { margin-bottom: 60px; font-size: 0; text-align: left;}
#bottomWrap .link ul li { display: inline-block; width: calc( 100% / 6 ); padding: 0 5px; margin: 0 0 10px 0;}
#bottomWrap .link ul li a { display: block; width: 100%; height: 40px; border: 1px #999 solid; color: #333; font-size: 0.875rem; text-align: center; line-height: 40px; text-decoration: none;}
#bottomWrap .link ul li a:hover { transition: 0.2s; background: #eee;}

@media screen and (max-width: 768px){
	#bottomWrap .banner .pc { display: none;}
	#bottomWrap .banner .mb { display: block;}
	#bottomWrap .banner .box, .bannerBox .box { margin-bottom: 60px;}
	#bottomWrap .link ul li { width: calc( 100% / 4 );}
	#bottomWrap .link .h2wrap { margin-bottom: 40px;}
}
@media screen and (max-width: 640px){
	#bottomWrap .link ul li { width: calc( 100% / 3 );}
}
@media screen and (max-width: 480px){
	#bottomWrap .banner .box, .bannerBox .box { margin-bottom: 40px;}
	#bottomWrap .link ul li { width: 100%;}
	#bottomWrap .link .h2wrap { padding: 0 40px; margin-bottom: 20px;}
}


/*---- footer ----*/
#footerWrap { width: 100%; padding: 25px 0 40px 0; border-top: 8px #eee solid;}
.footerWrap  { display: flex; justify-content: space-between; width: 100%;}

.footerWrap .box { flex: auto;}
.footerWrap .box.h1box { flex: 236px; padding-right: 0px;}
.footerWrap .box.h1box .top { padding-top: 14px;}
.footerWrap .box.h1box .top a { display: block; width: 100%; height: 56px;}
.footerWrap .box.h1box .top a img { height: 56px;}
.footerWrap .box.h1box .top a:hover { transition: 0.2s; opacity: 0.75;}
.footerWrap .box.h1box .row p { color: #003399; font-size: 0.75rem; font-weight: bold; line-height: 30px;}

.footerWrap .box.address { padding: 20px; border-left: 1px #000 solid; text-align: left;}
.footerWrap .box.address dl dt { display: inline; height: 30px; padding: 0 1em; font-size: 0.875rem; border: 1px #999 solid; line-height: 30px;}
.footerWrap .box.address dl dd { font-size: 0.875rem; line-height: 30px;}
.footerWrap .box.address dl dd .fb { display: inline; margin-left: 1em;}
.footerWrap .box.address dl dd .fb a { color: #333; font-size: 2rem;}
.footerWrap .box.address dl dd .fb a:hover { transition: 0.2s; opacity: 0.75;}
.footerWrap .box.address dl dd address .fb .mb { display: none;}

.footerWrap .box.contact { text-align: left;}
.footerWrap .box.contact .freedialBox { display: table; margin-bottom: 15px;}
.footerWrap .box.contact .freedialBox .box { display: table-cell; vertical-align: middle;}
.footerWrap .box.contact .freedialBox .box img { height: 30px;}
.footerWrap .box.contact .freedialBox .box.text { padding-left: 1em; font-size: 0.875rem; line-height: 1;}
.footerWrap .box.contact .freedialBox .box.free { display: none;}
.footerWrap .box.contact .linkWrap { display: flex; flex-direction: row; justify-content: space-between; width: 100%;}
.footerWrap .box.contact .linkWrap a.contact { flex: auto; display: block; height: 50px; margin-right: 10px; border: 1px #00298E solid; color: #00298E; font-size: 1.25rem; text-decoration: none; line-height: 50px; text-align: center;}
.footerWrap .box.contact .linkWrap a.contact:hover { transition: 0.2s; background: #F0F7FF;}
.footerWrap .box.contact .linkWrap a.order { flex: auto; display: block; height: 50px; background: rgb(223,24,24); background: linear-gradient(106deg, rgba(223,24,24,1) 75%, rgba(255,42,0,1) 100%); color: #fff; font-size: 1.25rem; text-decoration: none; line-height: 50px; text-align: center;}
.footerWrap .box.contact .linkWrap a.order:hover { transition: 0.2s; opacity: 0.75;}

.pagetop { display: block; position: fixed; bottom: 20px; right: 20px;}
.pagetop a { display: block; width: 40px; height: 40px; background: #999; color: #fff; font-size:18px; text-align: center; line-height:40px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}

@media screen and (max-width: 768px){
	#footerWrap { padding: 25px 0 0 0;}
	.footerWrap  { display: block;}
	.footerWrap .box, .footerWrap .box.h1box { flex: none; margin-bottom: 20px; text-align: center;}
	.footerWrap .box.h1box .top a { width: 65%; height: auto; margin: 0 auto;}
	.footerWrap .box.h1box .top a img { height: auto;}
	.footerWrap .box.h1box .row p { font-size: 1rem;}
	.footerWrap .box.address { border: none; text-align: center;}
	.footerWrap .box.address dl dt, .footerWrap .box.address dl dd { font-size: 1rem;}

	.footerWrap .box.address dl dd .mb { display: block;}
	.footerWrap .box.address dl dd address .fb { margin-left: 0;}
	.footerWrap .box.address dl dd address .fb a { display: block; width: 65%; height: 48px; margin: 0 auto; background: #1a1a1a; color: #fff; font-size: 1.75rem; line-height: 48px; text-decoration: none;}
	.footerWrap .box.address dl dd address .fb a span.mb { display: inline;}

	.footerWrap .box.contact { background: #eee; padding: 20px 0 0 0; margin-bottom: 0; text-align: center;}
	.footerWrap .box.contact .freedialBox { width: 100%; margin: 0 auto;}
	.footerWrap .box.contact .freedialBox .box { display: block;}
	.footerWrap .box.contact .freedialBox .box img { height: auto; width: 65%; margin: 0 auto;}
	.footerWrap .box.contact .freedialBox .box.text br { display: none;}
	.footerWrap .box.contact .freedialBox .box.free { display: block;}
	.footerWrap .box.contact .linkWrap { display: block;}
	.footerWrap .box.contact .linkWrap a.contact { display: none;}
	.footerWrap .box.contact .linkWrap a.order { flex: none; width: 100%; height: 60px; line-height: 60px;}

}
@media screen and (max-width: 640px){

}
@media screen and (max-width: 480px){

}


/*---- mobile navi----*/
#mbNavi { display: none;}

@media screen and (max-width: 768px){
	#mbNavi { position: fixed; top: 80px; left: 0; display: none; width: 100%; padding: 20px; height: calc( 100% - 80px); background: rgba(0,0,0,0.2); overflow-y: scroll;}
	#mbNavi .innerN { width: 100%; background: #fff;}
	#mbNavi dl { border: 1px #333 solid;}
	#mbNavi dl dt { padding: 20px; background: #002C8B; color: #fff; font-size: 1.5rem; font-weight: bold;}
	#mbNavi dl dd { padding: 20px 0 0 20px;}

	#mbNavi dl dd ul.cate { display: flex; flex-wrap: wrap; justify-content: space-between;}
	#mbNavi dl dd ul.cate li { flex: calc( 25% - 20px); margin: 0 20px 20px 0;}
	#mbNavi dl dd ul.cate li a { color: #333; text-decoration: none;}
	#mbNavi dl dd ul.cate li a figure img { margin-bottom: 5px; border: 1px #666 solid;}

	#mbNavi dl dd ul.submenu { width: 100%;}
	#mbNavi dl dd ul.submenu li { margin-bottom: 10px; padding-right: 20px;}
	#mbNavi dl dd ul.submenu li a { position: relative; display: block; width: 100%; padding: 10px; border: 1px #666 solid; color: #333; text-decoration: none; text-align: left;}
	#mbNavi dl dd ul.submenu li a span { position: absolute; right: 20px;}

	#mbNavi dl dd.ft { padding: 0; border-top: 4px #002C8B solid;}
	#mbNavi dl dd.ft .box { padding: 20px;}
	#mbNavi dl dd.ft .box img { height: auto; width: 65%; margin: 0 auto;}
	#mbNavi dl dd.ft .box  .text { font-size: 3vw; line-height: 2;}
	#mbNavi dl dd.ft a.order { display: block; width: 100%; height: 60px; background: rgb(223,24,24); background: linear-gradient(106deg, rgba(223,24,24,1) 75%, rgba(255,42,0,1) 100%); color: #fff; font-size: 1.25rem; text-decoration: none; line-height: 60px;}
	#mbNavi dl dd.ft a.order:hover { transition: 0.2s; opacity: 0.75;}

}
@media screen and (max-width: 480px){
	#mbNavi { padding: 10px;}
	#mbNavi dl dd { padding: 10px 0 0 10px;}
	#mbNavi dl dd ul.cate li { margin: 0 10px 10px 0;}
	#mbNavi dl dd ul.cate li a { font-size: 0.625rem; line-height: 1;}
}


/*---- wp template ----*/

.wpPrevNext { width: 100%; max-width: 500px; margin: 0 auto; text-align: center;}
.wpPrevNext a { display: inline-block; width: 30%; max-width: 150px; margin: 0 5px; color: #00328E; font-size: 1rem; font-weight: bold; text-decoration: none;}
.wpPrevNext a[rel="prev"] { float: left;}
.wpPrevNext a[rel="next"] { float: right;}

.woocommerce-pagination { margin-bottom: 120px; text-align: center;}
.woocommerce-pagination ul { margin: 0 auto;}
.woocommerce-pagination ul li { display: inline-block; margin: 0 2px;}
.woocommerce-pagination span { display: block; min-width: 28px; height: 28px; padding: 0 2px; background: #00328E; color: #fff; text-align: center; line-height: 28px;}
.woocommerce-pagination a { display: block; min-width: 28px; height: 28px; padding: 0 2px; border: 1px #00328E solid; color: #00328E; text-align: center; line-height: 28px; text-decoration: none;}


@media screen and (max-width: 768px){

}
@media screen and (max-width: 640px){

}
@media screen and (max-width: 480px){

}



/* CSS memo

Font Awesome
https://fontawesome.com/icons?d=gallery&m=free

Solid 			 font-family: "Font Awesome 5 Free"; content: "\";
Regular, Light	 font-family: "Font Awesome 5 Pro"; content: "\";
Duotone 		 font-family: "Awesome 5 Duotone"; content: "\";
Brands           font-family: "Font Awesome 5 Brands"; content: "\";

width計算
width: -webkit-calc(100% - 420px); width: calc(100% - 420px);

角丸
border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;

テキストシャドウ
text-shadow:1px 1px 3px #666;
text-shadow:1px 1px 3px #666; text-shadow:-1px 1px 3px #666; text-shadow:1px -1px 3px #666; text-shadow:-1px -1px 3px #666;

ボックスシャドウ
-moz-box-shadow: 1px 1px 3px #666; -webkit-box-shadow: 1px 1px 3px #666; box-shadow: 1px 1px 3px #666;
ずらした影
box-shadow: 10px 10px 0px 0 rgb(127,127,127,0.5);

ボックスシャドウ内側
-moz-box-shadow: inset 1px 1px 3px #666; -webkit-box-shadow: inset 1px 1px 3px #666; box-shadow: inset 1px 1px 3px #666;

グラデーション
background: -moz-linear-gradient(top, #FFC778, #FFF); background: -webkit-linear-gradient(top, #FFC778, #FFF); background: linear-gradient(to bottom, #FFC778, #FFF);

トランジション
-webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; transition: 1.5s;

要素全部を透明
filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25;

背景のみ透明
background-color:rgba(255,255,255,0.2);

明朝体
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
.mincho { font-family: "游明朝", "Noto Serif JP", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

テキスト省略
.container { overflow: hidden; width: 100%;}
.container  p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

可変Youtube埋め込み
.youtube { position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

要素を横スクロール
.scroll { width: 100%; padding-bottom: 10px; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch;}

画像の縦長自動調整
img { max-width: 100%; max-height: 100%; height: 100vh; width: auto\9; margin: 0 auto;}
object-fit: cover;

背景を左右で分ける（左から0～50％と50％～100％）
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);

その他メモ JavaScript
javascript:void(0);
javascript:history.back();

slick.js縦並び対策
.slider { display: none;}
.slider.slick-initialized { display: block;}

CSS memo */



.accordion-customize {
  cursor: pointer;
  transition: 0.4s;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto 10px;
  font-size: 32px;
  padding-block: 10px;
  background-color: #4673c2;
  color: #ffffff;
  padding-left: 20px;
}

.triangle {
  display: inline-block;
  margin-left: 10px;
  transition: 0.4s;
  transform: rotate(90deg);
}

.triangle-1 {
  border-bottom: solid 21px #ffffff;
  border-left: solid 15px transparent;
  border-right: solid 15px transparent;
}

.panels {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.active > .triangle {
  transform: rotate(180deg);
  transition: 0.4s;
}
.woocommerce form .form-row{
	padding: 0;
}

.woocommerce form .show-password-input{
	top: 0;
}
.hotselling ul li .item .price{
	display: flex;
    align-items: baseline;
    justify-content: center;
}
.hotselling ul li .item .price span{
	font-size: 2.5rem!important;
}
#customer_details .col-2 .woocommerce-billing-fields h3{
	display: none;
}
.other_address{
	text-align: left;
    width: 100%;
    display: block;
}
.other_address input{
	margin-right: 10px;
}
#customer_details .col-2 .woocommerce-account-fields{
	display: none;
}

@media screen and (max-width: 767px){
	#breadList {
		height: auto;
	}
	.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product{
		max-width: 100%;
		width: 50%;
		padding: 0 1%;
	}
	.product .productWrap{
		display: block;
	}
	.productWrap .box.img{
		width: 100%;
		padding: 0!important;
	}
	.productWrap .box.data{
		width: 100%;
	}
	.productWrap .box.data .price .s_price{
		line-height: 2;
	}
	
	#result .inner ul li{
		max-width: 100%!important;
		width: 100%!important;
	}
	#articleWrap .h1dott h1{
		padding: 10%;
	}
	.omatomeBox .h2wrap h2{
		line-height: 1.5;
	}
	.omatomeBox .box .priceWrap{
		display: block!important;
		font-size: 4rem!important;
	}
	
	#login .buttonWrap .box a.new{
		font-size: 3vw!important;
	}
	
	.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme{
		font-size: 0.7rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#new .formWrap{
		padding: 40px 0!important;
	}
	#new .formWrap form{
		padding: 0;
	}
	#new p.woocommerce-form-row input.input-text{
		width: 50%!important;
		margin: 5%!important;
		flex: 2!important;
	}
	#new p.woocommerce-form-row label{
		font-size: 1rem!important;
		padding: 0!important;
		width: 30%!important;
	}
	#new p.woocommerce-form-row{
		align-items: center;
		justify-content: space-between;
	}
	#new .woocommerce-privacy-policy-text{
		padding: 0 4%!important;
	}
	
	.beforeWrap .dataWrap, .afterWrap .dataWrap{
		display: block!important;
	}
	.beforeWrap .dataWrap .imgBox, .afterWrap .dataWrap .imgBox{
		margin-right: 0!important;
	}
	.beforeWrap .dataWrap .imgBox img, .afterWrap .dataWrap .imgBox img{
		max-width: 100%!important;
	}
	.beforeWrap .dataWrap .textBox, .afterWrap .dataWrap .textBox{
		padding: 5% 0;
	}
	.beforeWrap .dataWrap .textBox dl dd, .afterWrap .dataWrap .textBox dl dd{
		line-height: 1!important;
	}
	#breadList ul {
		text-align: left;
	}
	#resultDetail .h1result{
		float: left;
	}
	#customer_details .col-2{
		margin-top: 10%;
	}
	
	
	
	
	
	
	
	
	
}


#mbNavi dl dd.sp_search { padding-bottom: 14px; }
.sp_search input { 
	height: 40px;
    background: #fff;
    border: 1px #000 solid;
    vertical-align: middle;
    width: calc( 100% - 90px );
    max-width: 360px;
}
.sp_search button { height: 40px; background: #000; border: 1px #000 solid; color: #fff; vertical-align: middle; padding: 0 14px; }
.sp_search button:hover { cursor: pointer; transition:0.3s; opacity:0.75;}