@charset "utf-8";
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: rgba(246, 241, 230, 1);
	/* font-size: medium; */
	font-size: 90%;
	line-height: 150%;
}

.pcHide { display: none; }
.spHide { display: block; }
#drawerBox { display: none; }
.pcBlock { display: block; }
.spBlock { display: inline; }

* { padding: 0; margin: 0; box-sizing: border-box; }
img { vertical-align: bottom; }
	a img { border: none; }
	li { list-style: none; }
	.orderOl li {
		list-style-type: decimal;
		margin: 0 0 0.25em 1em;
		padding-left: 0.5em;
	}
a { transition: 0.3s; }
em {
	font-style: normal;
	color: rgba(230, 141, 121, 1);
}
strong {}

.initBox {
	width: 960px;
	margin: 0 auto;
}
.unitBox { margin-bottom: 2em; }
.contentBox { padding: 2em 0 5em 0; }
	.contentBox p {
		line-height: 175%;
		margin-bottom: 0.5em;
	}
	.contentBox a { color: rgba(216, 127, 49, 1); }
		.contentBox a:hover { text-decoration: none; }
.leftBox { float: left; width: 45%; }
.rightBox { float: right; width: 45%; }
	.contentBox .leftBox { width: 75%; }
	.contentBox .rightBox { width: 23%; }
.dotBox {
	padding: 1em 1.5em;
	border: 1px dotted rgba(123, 79, 66, 1);
}
.googlemapBox {
	border: 2px solid rgba(255, 255, 255, 1);
	line-height: 0;
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.googlemapBox iframe,
.googlemapBox object,
.googlemapBox embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.rightImg {
	float: right;
	margin: 0 0 2em 1em;
}
.leftImg {
	float: left;
	margin: 0 1em 2em 0;
}
.maxImg { width: 100%; }
.size40Img { width: 40%; margin-left: auto; margin-right: auto; }

.bigText { font-size: xx-large; }
.largerText { font-size: 150%; }
.largeText { font-size: x-large; }
.smallText { font-size: small; }
.smallerText { font-size: 86%; }
.tinyText { font-size: x-small; }

.redText { color: rgba(204, 0, 0, 1); }
.brownText { color: rgba(123, 79, 66, 1); }
.greenText { color: rgba(0, 112, 0, 1); }
.twitterText { color: rgba(0, 171, 236, 1); vertical-align: top; }

.centerText { text-align: center; display: block; }
.rightText { text-align: right; display: block; }

.iconSpan {
	background: rgba(140, 84, 39, 1);
	color: rgba(255, 255, 255, 1);
	padding: 0.25em 0.5em;
	margin-right: 0.5em;
}
.underline {
	position: relative;
	background: linear-gradient(transparent 60%, rgba(123, 79, 66, 0.25) 60%);
}
.bkContent { position: relative; z-index: -1; }

#homeBody #newsBox dd .overFlowBox .magazineListUl li:nth-child(3n+1)::before, 
#mainContentsBox::after, 
.clearBox::after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}
.myUl { margin-left: 2em; }
	.myUl li {
		position: relative;
		padding-bottom: 0.5em;
	}
		.myUl li::before {
			content: '';
			position: absolute;
			top: 0.5em;
			left: -1em;
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: rgba(123, 79, 66, 1);
		}
.cautionUl li {
	text-indent: -1em;
	margin-left: 1em;
}
.inlineBlockUl li { display: inline-block; margin: 0 1em 0.5em 0; }

.bottomdotLineBox > li {
	border-bottom: 2px dotted rgba(123, 79, 66, 1);
	margin: 0.5em 0;
}
	.bottomdotLineBox > li:last-child { border-bottom: none; }

.textAlignDl dt, 
.textAlignDl dd { display: inline-block; }

.topThTable, 
.leftThTable, 
.leftThTable2 {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px dotted rgba(123, 79, 66, 1);
}
	.leftThTable2 {
		border-top: 1px solid rgba(0, 0, 0, 0.25);
		border-left: 1px solid rgba(0, 0, 0, 0.25);
	}
	.leftThTable th, 
	.leftThTable2 th {
		width: 25%;
		padding: 0.5em 0;
		text-align: center;
		background: rgba(255, 255, 255, 1);
		border-bottom: 1px dotted rgba(123, 79, 66, 1);
	}
	.leftThTable td, 
	.leftThTable2 td {
		padding: 0.5em 1em;
		border-bottom: 1px dotted rgba(123, 79, 66, 1);
	}
	.leftThTable2 th, 
	.leftThTable2 td {
		background: rgba(238, 238, 238, 1);
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		text-align: left;
		padding: 0.5em 1em;
	}
	.leftThTable2 td {
		background: rgba(255, 255, 255, 1);
	}
	.topThTable th, 
	.topThTable td {
		padding: 0.5em 0;
		text-align: center;
		border-bottom: 1px dotted rgba(123, 79, 66, 1);
	}
	.topThTable th:not(:last-child), 
	.topThTable td:not(:last-child) { border-right: 1px dotted rgba(123, 79, 66, 1); }
	.topThTable th { background: rgba(221, 216, 207, 1); }
	.topThTable td { background: rgba(255, 255, 255, 1); }

.shadedBox {
	position: relative;
	background: rgba(255, 255, 255, 1);
	padding: 1.5em;
	box-sizing: border-box;
}
	.shadedBox::after {
		content: '';
		position: absolute;
		top: -5px;
		left: -5px;
		z-index: -1;
		width: 102%;
		height: 102%;
		width : -webkit-calc(100% + 10px);
		height : -webkit-calc(100% + 10px);
		width: calc(100% + 10px);
		height: calc(100% + 10px);
		background-image: linear-gradient(
			-45deg,
			rgba(174, 38, 61, 1) 25%,
			rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 50%,
			rgba(174, 38, 61, 1) 50%, rgba(174, 38, 61, 1) 75%,
			rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1)
		);
		background-size: 4px 4px;
	}

.flexBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.leftImgDlBox .flexBox, 
.rightImgDlBox .flexBox { justify-content: start; }
	.leftImgDlBox .flexBox dd, 
	.rightImgDlBox .flexBox dd { flex-basis: auto; }
	.rightImgDlBox .flexBox dt { order: 2; }
	.rightImgDlBox .flexBox dd { order: 1; }
.whiteBox {
	background: rgba(255, 255, 255, 1);
	padding: 1.5em;
}
.freecallBox {
	border: 3px solid rgba(238, 228, 198);
	margin-bottom: 0.5em;
}
	.freecallBox img, 
	.cardBox img { margin-right: 1em; }

	#tuuhanBody h4, 
	.whiteBox h4 {
		color: rgba(123, 79, 66, 1);
		border-bottom: 2px dotted rgba(123, 79, 66, 1);
	/*	font-size: large;*/
		padding-bottom: 0.5em;
		margin-bottom: 0.5em;
	}
	#tuuhanBody h4::before, 
	.whiteBox h4::before { content: '－ '; }

.step {
	background: rgba(123, 79, 66, 1);
	color: rgba(255, 255, 255, 1);
	padding: 0.25em 1em;
	margin: 0 2em 0.5em 0;
	position: relative;
	display: inline-block;
}
	.step::after {
		content: '';
		position: absolute;
		top: 0;
		right: -1.9em;
		border: 1em solid transparent;
		border-left-color: rgba(123, 79, 66, 1);
	}

p.subtitle {
	padding: 0.5em 1em;
	text-align: center;
	margin-bottom: 1em;
	background: rgba(255, 255, 255, 1);
	color: rgba(123, 79, 66, 1);
}


#headerBox {
	border-top: solid 5px rgba(230, 121, 141, 1);
	color: rgba(153, 0, 0, 1);
	padding: 1em 0;
	font-size: small;
	background-image: linear-gradient(
	  -45deg,
	  rgba(245, 241, 229, 1) 25%,
	  rgba(245, 231, 222, 1) 25%, rgba(245, 231, 222, 1) 50%,
	  rgba(245, 241, 229, 1) 50%, rgba(245, 241, 229, 1) 75%,
	  rgba(245, 231, 222, 1) 75%, rgba(245, 231, 222, 1)
	);
	background-size: 4px 4px;
}
	#homeBody #headerBox { padding: 2em 0; }
#headerBox h1 { padding-top: 1em; }
	#headerBox h1 a {
	/*	display: block;
		width: 210px;
		height: 35px;
		background-size: cover;
		background-image: url(../img/common/top_logo.png);
		text-indent: -2000em;*/
	}
	#headerBox h1 a img { width: 210px; }
		#homeBody #headerBox h1 a {
	/*		width: 310px;
			height: 53px;*/
		}
		#homeBody #headerBox h1 a img { width: 310px; }
	#headerBox .rightBox {
		text-align: right;
	}
		#headerBox .telBox {
			font-weight: bold;
			text-align: right;
			display: block;
			font-size: x-large;
		}
		#homeBody #headerBox .telBox { font-size: xx-large; display: block; }
			#headerBox .telBox a {
				text-decoration: none;
				color: rgba(153, 0, 0, 1);
				vertical-align: bottom;
			}
			#headerBox .telBox::before {
				content: 'フリーコール';
				font-size: xx-small;
				background: rgba(153, 0, 0, 1);
				color: #FFF;
				padding: 0.5em 1em;
				border-radius: 3px;
				margin-right: 0.5em;
			}
				#homeBody #headerBox .telBox::before {
					font-size: x-small;
					padding: 0.25em 0.5em;
				}
		#headerBox .timeBox {
			font-size: small;
			padding-bottom: 0.5em;
			display: inline-block;
		}
			#headerBox .timeBox .topStrong {
				font-size: x-small;
				border: 1px solid rgba(153, 0, 0, 1);
				border-radius: 3px;
				padding: 0.25em 0.5em;
				margin: 0 0.25em;
			}
			#headerBox .timeBox .topShow { display: none; }
		#homeBody #headerBox .timeBox { display: block; }
			#homeBody #headerBox .timeBox .topStrong {
				order: none;
			/*	padding: 0;
				margin: 0;*/
				line-height: 100%;
			}
			#headerBox .timeBox .topShow { display: visible; }
		#headerNaviBox li { display: inline-block; }
		
			/*************************

			矢印ボタン調整のこと！！
			
			*************************/
			.arrowLBtn, 
			.arrowCBtn, 
			.arrowRBtn, 
			#headerNaviBox li a {
				padding: 0 15px;
				border: 1px solid rgba(153, 0, 0, 1);
				background: #FFF;
				text-decoration: none;
				color: rgba(153, 0, 0, 1);
				border-radius: 2px;
				height: 30px;
				display: inline-block;
				line-height: 30px;
			}
			.arrowLBtn, 
			.arrowRBtn, 
			#headerNaviBox li:first-child a { position: relative; }
			.arrowLBtn:hover, 
			.arrowCBtn:hover, 
			.arrowRBtn:hover, 
			#headerNaviBox li a:hover { background: rgba(153, 0, 0, 1); color: #FFF; }
				.arrowRBtn::before, 
				.arrowRBtn::after, 
				.arrowLBtn::before, 
				.arrowLBtn::after, 
				#headerNaviBox li:first-child a::before, 
				#headerNaviBox li:first-child a::after {
					content: '';
					position: absolute;
					top: 0;
					border: 15px solid transparent;
				}
				.arrowRBtn::before, 
				.arrowRBtn::after {	right: -30px; }
				.arrowLBtn::before, 
				.arrowLBtn::after, 
				#headerNaviBox li:first-child a::before, 
				#headerNaviBox li:first-child a::after { left: -30px; }
				.arrowRBtn::before { border-left-color: rgba(153, 0, 0, 1); }
				.arrowLBtn::before, 
				#headerNaviBox li:first-child a::before { border-right-color: rgba(153, 0, 0, 1); }
				.arrowRBtn::after { border-left-color: rgba(255, 255, 255, 1); }
				.arrowLBtn::after, 
				#headerNaviBox li:first-child a::after {
					border-right-color: rgba(255, 255, 255, 1);					
					transition: 0.3s;
				}
				.arrowRBtn::after { right: -29px; }
				.arrowLBtn::after, 
				#headerNaviBox li:first-child a::after { left: -29px; }
				.arrowRBtn:hover::after { border-left-color: rgba(153, 0, 0, 1); }
				.arrowLBtn:hover::after, 
				#headerNaviBox li:first-child a:hover::after { border-right-color: rgba(153, 0, 0, 1); }

	#headerBox #drawerBox {
		position: absolute;
		top: 0.5em;
		right: 0.5em;
	}
/*
		#drawerNaviBox > ul > li {
			border-bottom: 1px dotted rgba(122, 0, 20, 1);
		}
			#drawerNaviBox > ul > li > a {
				display: block;
				padding: 1.5em 0.75em;
				background: rgba(122, 0, 20, 1);
				color: #FFF;
				text-decoration: none;
				position: relative;
			}
			#drawerNaviBox > ul > li > ul > li > a {
				display: block;
				padding: 1em 0 1em 1em;
				color: rgba(122, 0, 20, 1);
				text-decoration: none;
				border-bottom: 1px dotted rgba(122, 0, 20, 1);
			}
			#drawerNaviBox > ul > li > ul > li:last-child > a { border-bottom: none; }
*/

#drawerNaviBox > ul > li.openSubMenuLi > ul, 
#drawerNaviBox > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
	#drawerNaviBox > ul > li > ul > li, 
	#drawerNaviBox > ul > li {
		display: table;
		width: calc(50% - 1px );
		padding-bottom: 2px;
	}
	#drawerNaviBox > ul > li.home { width: 100%; }
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li > a, 
	#drawerNaviBox > ul > li > a {
		position: relative;
		display: table-cell;
	/*	background: rgba(122, 0, 20, 1);*/
		background: rgba(153, 0, 0, 1);
		color: rgba(255, 255, 255, 1);
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		border-radius: 3px;
		height: calc( ( 100vh - 70px ) / 7 );
	}
	#drawerNaviBox > ul > li a.openSubMenu { margin-bottom: 2px; }
	#drawerNaviBox > ul > li.openSubMenuLi { width: 100%; }
		#drawerNaviBox > ul > li.openSubMenuLi a {
			display: block;
			height: auto;
			padding: 1em 0;
		}
		#drawerNaviBox > ul > li.home { order: 1; }
		#drawerNaviBox > ul > li.kaisya { order: 11; }
		#drawerNaviBox > ul > li.qanda { order: 4; }
		#drawerNaviBox > ul > li.inquiry { order: 10; }
		#drawerNaviBox > ul > li.tuuhanpage { order: 5; }
		#drawerNaviBox > ul > li.shoppage { order: 7; }
		#drawerNaviBox > ul > li.shoplistspage { order: 9; }
		#drawerNaviBox > ul > li.catalogpage { order: 3; }
		#drawerNaviBox > ul > li.historypage { order: 6; }
		#drawerNaviBox > ul > li.howusepage { order: 2; }
		#drawerNaviBox > ul > li.qualitypage { order: 8; }

			#drawerNaviBox > ul > li.openSubMenuLi > ul > li > a {
				background: rgba(255, 255, 255, 1);
				color: rgba(122, 0, 20, 1);
				border: 1px solid rgba(122, 0, 20, 1);
				text-decoration: none;
			}

			#drawerNaviBox > ul > li.openSubMenuLi > ul > li > a .menuspan { display: block; }
			
			#drawerNaviBox > ul > li.tuuhanpage > ul > li.out_index, 
			#drawerNaviBox > ul > li.tuuhanpage > ul > li.tuuhan, 
			#drawerNaviBox > ul > li.qualitypage > ul > li.quality, 
			#drawerNaviBox > ul > li.howusepage > ul > li.howuse, 
			#drawerNaviBox > ul > li.shoplistspage > ul > li.shoplists { width: 100%; }
			#drawerNaviBox > ul > li.tuuhanpage > ul > li.out_index a, 
			#drawerNaviBox > ul > li.tuuhanpage > ul > li.order_os a, 
			#drawerNaviBox > ul > li.tuuhanpage > ul > li.member_os a {
				color: rgba(0, 112, 0, 1);
				border-color: rgba(0, 112, 0, 1);
			}

			.openSubMenu::before, 
			.closeSubMenu::before {
				content: '';
				position: absolute;
				right: 0.75em;
				border: 6px solid transparent;
			}
			.openSubMenu::before { border-bottom-color: rgba(255, 255, 255, 1); bottom: 0.5em; }
			.closeSubMenu::before { border-top-color: rgba(255, 255, 255, 1); bottom: 0.25em; }

#breadcrumbBox { padding-top: 0.5em; }
	#breadcrumbBox ul li { font-size: small; display: inline-block; }
		#breadcrumbBox ul li a {
			color: rgba(0, 0, 0, 0.75);
			display: inline-block;
			text-decoration: none;
		}
		#breadcrumbBox ul li a:hover { text-decoration: underline; }
			#breadcrumbBox ul li:not(:first-child)::before {
				content: '>';
				padding: 0 0.25em;
			}

#homeBody #bannerBox, 
#mainNaviBox {
	padding: 0.5em 0;
	background-color: rgba(246, 241, 230, 1);
	background-size: 2px 2px;
	background-position: 0 0, 1px 1px;
	background-image: linear-gradient(45deg, rgba(197, 193, 184, 1), rgba(197, 193, 184, 1) 50%, transparent 50%, transparent),
    	              linear-gradient(-135deg, rgba(197, 193, 184, 1), rgba(197, 193, 184, 1) 50%, transparent 50%, transparent);
}
	#mainNaviBox a {
		text-decoration: none;
		font-size: small;
		text-align: center;
	}
	#mainNaviBox #mainNaviABox {
		width: 59%;
		float: left;
	}
		#mainNaviBox #mainNaviBBox > ul { display: flex; }
		#mainNaviBox #mainNaviABox > ul > li {
			width: 24%;
			display: inline-block;
			position: relative;
		}
		#mainNaviBox #mainNaviABox > ul > li > a,
		#mainNaviBox #mainNaviBBox > ul > li > a {
			display: block;
			height: 65px;
			line-height: 50px;
			position: relative;
		}
		#mainNaviBox #mainNaviABox > ul > li > a {
			width: 95%;
			border-radius: 3px;
			background-image: linear-gradient(
				to bottom,
				rgba(181, 31, 62, 1) 0%, rgba(181, 31, 62, 1) 40%, 
				rgba(122, 0, 20, 1) 40%, rgba(122, 0, 20, 1)
			);
			border: 3px solid #FFF;
			color: #FFF;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.25);
		}
		#mainNaviBox #mainNaviABox > ul > li > a:hover {
			background-image: linear-gradient(
				to bottom,
				rgba(122, 0, 20, 1) 0%, rgba(181, 31, 62, 1)
			);
		}
			#mainNaviBox #mainNaviABox > ul > li > a::before, 
			#mainNaviBox #mainNaviBBox > ul > li > a::before {
				font-size: x-small;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			#mainNaviBox #mainNaviABox > ul > li > a::before { bottom: -5px; }
			#mainNaviBox #mainNaviABox .tuuhanpage > a::before { content: 'SHOPPING'; }
			#mainNaviBox #mainNaviABox .shoppage > a::before { content: 'RETAIL STORE'; }
			#mainNaviBox #mainNaviABox .shoplistspage > a::before { content: 'SHOP'; }
			#mainNaviBox #mainNaviABox .catalogpage > a::before { content: 'CATALOG'; }
			#mainNaviBox #mainNaviABox > ul > li > a::after, 
			#mainNaviBox #mainNaviBBox > ul > li > a::after {
				content: '';
				width: 12px;
				height: 6px;
				border-radius: 50% 50% 0 0;
				position: absolute;
				bottom: 0;
				left: 43%;
				line-height: 0;
			}
			#mainNaviBox #mainNaviBBox > ul > li > a::after { left: 49%; }
			#mainNaviBox #mainNaviABox > ul > li > a::after { background: #FFF; }
			#mainNaviBox #mainNaviBBox > ul > li > a::after { background: rgba(230, 121, 141, 1); }

		#mainNaviBox #mainNaviABox > ul > li > ul, 
		#mainNaviBox #mainNaviBBox > ul > li > ul {
			position: absolute;
			top: 70px;
			left: -1em;
			width: 100%;
			background: #FFF;
			padding: 1em;
			border-radius: 3px;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.25);
			opacity: 0;
			z-index: 2000;
			visibility: hidden;
			transition: 0.5s;
		}
		#mainNaviBox #mainNaviABox > ul > li > ul { top: 75px; }
		#mainNaviBox #mainNaviABox > ul > li > ul, 
		#mainNaviBox #mainNaviBBox > ul > li > ul { width: 130%; left: -1.5em; }
		#mainNaviBox #mainNaviBBox > ul > li:nth-child(2) > ul { width: 180%; left: -3em; }
			#mainNaviBox #mainNaviABox > ul > li > ul::before, 
			#mainNaviBox #mainNaviBBox > ul > li > ul::before {
				position: absolute;
				top: -15px;
				left: 45%;
				content: '';
				border: 8px solid transparent;
				border-bottom-color: #FFF;
			}
			#mainNaviBox #mainNaviABox > ul > li:hover > ul, 
			#mainNaviBox #mainNaviBBox > ul > li:hover > ul {
				opacity: 1;
				transition: 0.5s;
				visibility: visible;
			}
			#mainNaviBox #mainNaviABox > ul > li > ul > li, 
			#mainNaviBox #mainNaviBBox > ul > li > ul > li { border-bottom: 1px dotted rgba(153, 0, 0, 1); }
			#mainNaviBox #mainNaviABox > ul > li > ul > li:last-child, 
			#mainNaviBox #mainNaviBBox > ul > li > ul > li:last-child { border-bottom: none; }
				#mainNaviBox #mainNaviABox > ul > li > ul > li > a, 
				#mainNaviBox #mainNaviBBox > ul > li > ul > li > a {
					padding: 0.5em 0;
					color: rgba(153, 0, 0, 1);
					display: block;
				}
				#mainNaviBox #mainNaviABox > ul > li > ul > li > a:hover,
				#mainNaviBox #mainNaviBBox > ul > li > ul > li > a:hover { background: rgba(251, 235, 238, 1); }
				#mainNaviBox #mainNaviABox > ul > li > ul > li .menuspan,
				#mainNaviBox #mainNaviBBox > ul > li > ul > li:not(.historyfirst) .menuspan { display: block; }

	#mainNaviBox #mainNaviBBox {
		width: 40%;
		float: right;
	}
		#mainNaviBox #mainNaviBBox > ul {
			border: 1px solid rgba(230, 121, 141, 1);
			border-radius: 3px;
			background: #FFF;
		}
			#mainNaviBox #mainNaviBBox > ul > li {
				width: 30%;
				display: inline-block;
				position: relative;
				border-left: 1px dotted rgba(230, 121, 141, 1);
			}
			#mainNaviBox #mainNaviBBox > ul > li:first-child {
				width: 40%;
				border-left: none;
			}
				#mainNaviBox #mainNaviBBox > ul > li > a {
					color: rgba(187, 100, 118, 1);
				}
				#mainNaviBox #mainNaviBBox .historypage > a::before { content: 'HISTORY'; }
				#mainNaviBox #mainNaviBBox .howusepage > a::before { content: 'HOW TO USE'; }
				#mainNaviBox #mainNaviBBox .qualitypage > a::before { content: 'QUALITY'; }

		#mainNaviBox #mainNaviBBox > ul > li > a:hover {
			background-image: linear-gradient(
			  -45deg,
			  rgba(255, 255, 255, 1) 25%,
			  rgba(251, 235, 238, 1) 25%, rgba(251, 235, 238, 1) 50%,
			  rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 75%,
			  rgba(251, 235, 238, 1) 75%, rgba(251, 235, 238, 1)
			);
			background-size: 4px 4px;
		}

	.contentBox h2 {
		background: rgba(123, 79, 66, 1);
		border-radius: 3px;
		color: rgba(255, 255, 255, 1);
		padding: 0.5em 1em;
		margin-bottom: 1em;
	}
		.contentBox h2 span {
			font-size: small;
			color: rgba(255, 255, 255, 0.75);
			float: right;
		}
	#howuse08Body .shadedBox h4, 
	#kaisyaBody .shadedBox h4, 
	#sitemapBox > ul > li > a, 
	.contentBox h3 {
		color: rgba(123, 79, 66, 1);
		padding: 0 0 1em 27px;
		position: relative;
		font-size: large;
	}
		#howuse08Body .shadedBox h4::before,
		#kaisyaBody .shadedBox h4::before, 
		#sitemapBox > ul > li > a::before, 
		.contentBox h3::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 5px solid rgba(123, 79, 66, 1);
		}
		.contentBox h3.noHeader { padding-left: 0; }
		.contentBox h3.noHeader::before { content: none; }

		#sideNaviBox { position: relative; }
			#sideNaviBox ul {
				position: absolute;
				top: 0;
				left: 0;
				border: 1px solid rgba(230, 121, 141, 1);
				border-radius: 3px;
				width: 100%;
				overflow: hidden;
			}
				#sideNaviBox ul li {
					background: rgba(255, 255, 255, 1);
					border-bottom: 1px solid rgba(246, 241, 230, 1);
				}
				#sideNaviBox ul li.nowpage {
					background-image: linear-gradient(
					  -45deg,
					  rgba(255, 255, 255, 1) 25%,
					  rgba(251, 235, 238, 1) 25%, rgba(251, 235, 238, 1) 50%,
					  rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 75%,
					  rgba(251, 235, 238, 1) 75%, rgba(251, 235, 238, 1)
					);
					background-size: 4px 4px;
				}
					.contentBox .myBtn2, 
					#sideNaviBox ul li a {
						padding: 0.5em 0;
						font-size: small;
						text-align: center;
						display: block;
						position: relative;
						text-decoration: none;
						color: rgba(187, 100, 118, 1);
					}
						#sideNaviBox ul li.current a, 
						#sideNaviBox ul li a:hover {
							color: rgba(230, 121, 141, 1);
						}
						.contentBox .myBtn2::before, 
						#sideNaviBox ul li a::before {
							content: '';
							position: absolute;
							top: 50%;
							left: -5px;
							width: 10px;
							height: 10px;
							border-radius: 50%;
							background:rgba(187, 100, 118, 1);
						}
							#sideNaviBox ul li.current a::before, 
							#sideNaviBox ul li a:hover::before {
								background: rgba(230, 121, 141, 1);
							}
							.contentBox .myBtn2 {
								border: 1px solid rgba(123, 79, 66, 1);
								color: rgba(123, 79, 66, 1);
								padding: 0.5em 2em;
								display: inline-block;
								border-radius: 3px;
								overflow: hidden;
								text-align: left;
								background: rgba(255, 255, 255, 1);
								box-shadow: 1px 1px 3px rgba(102, 102, 102, 0.5);
							}
								.contentBox .myBtn2::before {
									top: 40%;
									background:rgba(123, 79, 66, 1);
								}
								.contentBox .myBtn2::after {
									display: block;
									content: attr(data-text)'';
									font-size: x-small;
									line-height: 1em;
								}
								.contentBox .myBtn2:hover {
									color: rgba(255, 255, 255, 1);
									background:rgba(123, 79, 66, 1);
									box-shadow: none;
								}
									.contentBox .myBtn2:hover::before { background: rgba(255, 255, 255, 1); }
									.contentBox .myBtn2:hover::after { color: rgba(255, 255, 255, 1); }

#sideNaviBox .howuse02 a { font-size: x-small; }
/* #mainNaviBox .howuse02 a, */

#campaign_info {
	border: 2px solid rgba(255, 255, 255, 1);
	border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(102, 102, 102, 0.5);
	margin-bottom: 2em;
	overflow: hidden;
}
	#campaign_info dt {
		background: rgba(230, 121, 141, 1);
		text-align: center;
		padding: 0.5em 0;
		position: relative;
		color: rgba(255, 255, 255, 1);
	}
		#campaign_info dt::after {
			content: '';
			border: 8px solid transparent;
			border-top-color: rgba(230, 121, 141, 1);
			position: absolute;
			bottom: -15px;
			left: 48%;
		}
		#campaign_info dd {
			padding: 1em;
			background: rgba(255, 255, 255, 1);
		}

#footerBox {
	color: #FFF;
	background: rgba(230, 121, 141, 1);
}
	#footerBox .leftBox { width: 30%; }
	#footerBox .rightBox { width: 68%; }
	#footerBox a { text-decoration: none; }
	#footerBox #footerNaviBox {
		background: #FFF;
		padding: 0.25em 0;
	}
		#footerBox #footerNaviBox li { display: inline-block; }
			#footerBox #footerNaviBox li a { color: rgba(230, 121, 141, 1); }
				#footerBox #footerNaviBox li a:hover { color: rgba(122, 0, 20, 1); }
			#footerBox #footerNaviBox li a::before { content: '　|　'; color: rgba(230, 121, 141, 1);  }
			#footerBox #footerNaviBox li:first-child a::before { content: '|　'; color: rgba(230, 121, 141, 1);  }
			#footerBox #footerNaviBox li:last-child a::after { content: '　|'; color: rgba(230, 121, 141, 1);  }

		#footerBox > .initBox { padding: 2em 0;}
		#footerBox > .initBox p { padding-top: 0.5em; }
			#footerBox > .initBox #pageTopBtnBox { position: relative; }
				#footerBox > .initBox #pageTopBtnBox a {
					background: rgba(230, 121, 141, 1);
					color: #FFF;
					position: absolute;
					top: -4em;
					right: 0;
					padding: 0.25em 1em;
				}
					#footerBox > .initBox #pageTopBtnBox a:hover {
						background: rgba(122, 0, 20, 1);
					}
	#footerBox h1 {
		text-indent: -2000em;
		width: 204px;
		height: 30px;
		background-size: cover;
		background: url(../img/common/foot_logo.gif) no-repeat;
	}
	#footerBox #footerSubNaviBox nav {
		width: 24%;
		display: inline-block;
		border-left: 1px solid rgba(255, 255, 255, 0.5);
	}
	#footerBox #footerSubNaviBox nav:nth-child(1) { width: 28%; }
	#footerBox #footerSubNaviBox nav:nth-child(2) { width: 20%; }
		#footerBox #footerSubNaviBox nav ul { margin-left: 1em; }
			#footerBox #footerSubNaviBox nav ul li { margin-bottom: 0.25em; }
			#footerBox #footerAddressBox a, 
			#footerBox #footerSubNaviBox nav a { color: #FFF; }
				#footerBox #footerSubNaviBox nav a:hover { color: rgba(122, 0, 20, 1); }

	#footerBox #copyrightBox {
		background: rgba(154, 81, 95, 1);
		text-align: center;
		padding: 0.25em 0;
	}

	body,
	#container {
	  display: flex;
	  flex-direction: column;
	  min-height: 100vh;
	}
	
	#wrapperBox { flex: 1; }

	@media all and (-ms-high-contrast:none){
		#wrapperBox { flex: auto; }
	}
	  

/* ==[ index ]========================== */
#mainimageBox {
	height: 450px;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}
	#mainimageBox h1 {
		width: 100%;
		height: 450px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		position: relative;
		text-indent: -2000em;
	}
		#mainimageBox h1.spring, 
		#mainimageBox h1.summer, 
		#mainimageBox h1.autumn {
			background-image: url(../img/index/mainimage_spring.jpg);
		}
		#mainimageBox h1.winter {
			background-image: url(../img/index/mainimage_winter.jpg);
		}
		#mainimageBox h1::before {
			content: '';
			position: absolute;
			background-size: contain;
			z-index: 100;
			top: 40px;
			left: 30px;
			width: 407px;
			height: 380px;
			background-repeat: no-repeat;
		}
		#homeBody #mainimageBox h1.spring::before, 
		#homeBody #mainimageBox h1.autumn::before { background-image: url(../img/index/title_spring.png); }
		#homeBody #mainimageBox h1.summer::before { background-image: url(../img/index/title_summer.png); }
		#homeBody #mainimageBox h1.winter::before {
			top: 75px;
			left: 30px;
			width: 358px;
			height: 335px;
			background-image: url(../img/index/title_winter.png);
		}
		#mainimageBox h1::after {
			content: '';
			text-indent: 0;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(
				45deg,
				rgba(0, 0, 0, 0.1) 25%,
				transparent 25%, transparent 75%,
				rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1),
				rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0)
			), 
			linear-gradient(
				45deg,
				rgba(0, 0, 0, 0.1) 25%,
				transparent 25%, transparent 75%,
				rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1),
				rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0)
			);
			background-position: 0 0, 2px 2px;
			background-size: 4px 4px;
		}
	#mainimageBox #noticeBox {
		position: absolute;
		top: 55px;
		right: 55px;
		width: 240px;
	/*	height: 340px;*/
		background: rgba(255, 255, 255, 0.75);
		z-index: 2000;
	}
		#mainimageBox #noticeBox::before {
			content: 'お知らせ';
			display: block;
			width: 240px;
			background: rgba(157, 67, 93, 1);
			color: #FFF;
			text-align: center;
		}
			#mainimageBox #noticeBox dl {
				width: 240px;
				color: rgba(157, 67, 93, 1);
			}
				#mainimageBox #noticeBox dl dt { padding: 0.5em 1em; }
					#mainimageBox #noticeBox dl dt img { margin: 0.5em auto; }
					#mainimageBox #noticeBox dl dt p {
						border-bottom: 1px solid #CCC;
						margin-bottom: 0.5em 1em;
					}
				#mainimageBox #noticeBox dl dd { padding: 0.5em 1em; color: rgba(100, 100, 100, 1); }
					#mainimageBox #noticeBox dl dd a { color: rgba(157, 67, 93, 1); }
					#mainimageBox #noticeBox dl dd a:hover { color: rgba(122, 0, 20, 1); }

#homeBody #mainContentsBox { padding: 2em 0; }
	#homeBody #mainContentsBox .leftBox { width: 75%; }
	#homeBody #mainContentsBox .rightBox { width: 23%; }

	#homeBody #newsBox {
		height: 450px;
		position: relative;
	}
	#homeBody #newsBox dt {
		position: absolute;
		top: 0;
		left: 0;
		width: 25%;
		height: 35px;
		color: #FFF;
		text-align: center;
		line-height: 35px;
		background: rgba(218, 128, 49, 0.5);
		cursor: pointer;
	}
		#homeBody #newsBox dt.setNews { background: rgba(218, 128, 49, 1); }
		#homeBody #newsBox dl:nth-child(2) dt { left: 25%; background: rgba(147, 93, 51, 0.5); }
			#homeBody #newsBox dl:nth-child(2) dt.setNews { left: 25%; background: rgba(147, 93, 51, 1); }
		#homeBody #newsBox dl:nth-child(3) dt { left: 50%; background: rgba(120, 142, 80, 0.5); }
			#homeBody #newsBox dl:nth-child(3) dt.setNews { left: 50%; background: rgba(120, 142, 80, 1); }
	#homeBody #newsBox dd {
		position: absolute;
		width: 95%;
		display: block;
		top: 35px;
		left: 0;
		padding: 1em;
		border: 5px solid rgba(218, 128, 49, 1);
		background: #FFF;
	}
		#homeBody #newsBox dl:nth-child(2) dd { border-color: rgba(147, 93, 51, 1); display: none; }
		#homeBody #newsBox dl:nth-child(3) dd { border-color: rgba(120, 142, 80, 1); display: none; }
		#homeBody #newsBox dd .btnBox {
			text-align: right;
			padding-bottom: 1em;
		}
			#homeBody #newsBox dd .btnBox a {
				padding: 0.25em 1em;
				color: #FFF;
				display: inline-block;
				text-decoration: none;
				border-radius: 6px;
				background: rgba(218, 128, 49, 1);
			}
			#homeBody #newsBox dd .btnBox a.twitter-follow-button { background: rgba(29, 161, 242, 1); }
			#homeBody #newsBox dd .btnBox a::after { content: '→'; padding-left: 0.25em; }
				#homeBody #newsBox dl:nth-child(2) dd .btnBox a { background: rgba(147, 93, 51, 1); }
				#homeBody #newsBox dl:nth-child(3) dd .btnBox a { background: rgba(120, 142, 80, 1); }
		#homeBody #newsBox dd .overFlowBox {
			overflow-x: hidden;
			height: 300px;
		}
			#homeBody #newsBox dd .overFlowBox .newsListUl li {
				padding-bottom: 0.5em;
				border-bottom: 1px dotted #CCC;
				margin-bottom: 0.5em;
			}
				#homeBody #newsBox dd .overFlowBox .newsListUl li a, 
				#homeBody #newsBox dd .overFlowBox .magazineListUl li a { color: rgba(216, 127, 49, 1); }
					#homeBody #newsBox dd .overFlowBox .newsListUl li a:hover, 
					#homeBody #newsBox dd .overFlowBox .magazineListUl li a:hover { color: rgba(149, 0, 24, 1); }
				#homeBody #newsBox dd .overFlowBox .newsListUl li .dateTimeBox .spBlock { padding-left: 1em; }
				#homeBody #newsBox dd .overFlowBox .newsListUl li .dateSpan {
					display: block;
					font-weight: bold;
				}
			#homeBody #newsBox dd .overFlowBox .magazineListUl li {
				width: 32%;
				display: inline-block;
				text-align: center;
				border-right: 1px dotted #CCC;
				margin-bottom: 1em;
			}
				#homeBody #newsBox dd .overFlowBox .magazineListUl li img { margin-bottom: 0.5em; }
			#homeBody #newsBox dd .overFlowBox .magazineListUl li:nth-child(3n) { border: none; }
				#homeBody #newsBox dd .overFlowBox .magazineListUl li span { display: block; }

		#homeBody #bannerBox { padding-left: 1.25em; }

	#homeBody #rankingBox table {
		width: 100%;
		font-size: small;
		border: 1px solid rgba(149, 0, 24, 1);
		background: #FFF;
	}
		#homeBody #rankingBox table caption {
			color: rgba(220, 202, 136, 1);
			padding: 0.5em 25% 0.5em 1em;
			background: rgba(149, 0, 24, 1) url(../img/index/ranking.gif) no-repeat 100% 50%;
			background-size: contain;
			text-align: left;
		}
		#homeBody #rankingBox table th, 
		#homeBody #rankingBox table td { padding: 0.25em 0.5em; }
		#homeBody #trademarkRegistrationInformationBox dt, 
		#homeBody #rankingBox table th { color: rgba(149, 0, 24, 1); font-weight: normal; }
		#homeBody #rankingBox table td { border-left: 1px dotted #333; }

		#homeBody #trademarkRegistrationInformationBox {
			margin-top: 1em;
			background: #FFF;
			padding: 1em;
		}
		#homeBody #trademarkRegistrationInformationBox li {
			position: relative;
			margin-left: 1.5em;
			border-bottom: 1px dotted #333;
		}
			#homeBody #trademarkRegistrationInformationBox li::before {
				content: '◎';
				position: absolute;
				top: 0;
				left: -1.5em;
			}
			#homeBody #trademarkRegistrationInformationBox dt, 
			#homeBody #trademarkRegistrationInformationBox dt::before { content: '【'; }
			#homeBody #trademarkRegistrationInformationBox dt::after { content: '】'; }
			#homeBody #trademarkRegistrationInformationBox li span { float: right; }

		#homeBody #snsBox { padding: 1em 0; }
		#homeBody #snsBox li {
			width: 15%;
			display: inline-block;
			font-size: small;
			line-height: 125%;
		}
		#homeBody #snsBox li:nth-child(5) { width: 20%; }
		#homeBody #snsBox li a {
			display: inline-block;
			margin-left: 32px;
			position: relative;
			text-decoration: none;
		}
		#homeBody #snsBox li a.facebook { color: rgba(59, 87, 157, 1); }
		#homeBody #snsBox li a.instagram { color: rgba(59, 87, 157, 1); }
		#homeBody #snsBox li a.twitter { color: rgba(29, 161, 242, 1); }
			#homeBody #snsBox li a.facebook::before, 
			#homeBody #snsBox li a.instagram::before, 
			#homeBody #snsBox li a.twitter::before {
				position: absolute;
				top: 5px;
				left: -35px;
				font-size: 32px !important;
			}
			#homeBody #snsBox li a:hover { color: rgba(122, 0, 20, 1); }

/* ==[ sitemap ]========================== */
#sitemapBody .contentBox li a { display: block; }
#sitemapBox > ul {
	width: 100%;
	column-count: 3;
	column-gap: 0;
}
	#sitemapBox > ul > li {
		margin-bottom: 1em;
	}
		#sitemapBox > ul > li > a {
			padding-bottom: 0.25em;
			font-size: large;
			font-weight: bold;
		}
		#sitemapBox > ul > li > ul {
			margin: 0.5em 0;
			margin-left: 10px;
			border-left: 1px dotted rgba(123, 79, 66, 1);
			padding-left: 16px;
		}
		#sitemapBox > ul > li > ul > li > a {
			font-size: small;
			text-decoration: none;
			color: rgba(0, 0, 0, 0.75);
		}
		#sitemapBox > ul > li > ul > li > a:hover { text-decoration: underline; }

/* ==[ shop ]========================== */
#shoppageBody h3 { padding: 0.5em 0; }
#shoppageBody dd .rightText { padding-top: 1em; }
	#shoppageBody dd .myBtn {
		position: relative;
		border: 1px solid rgba(123, 79, 66, 1);
		padding: 0.5em 2em 0.5em 1em;
		background: rgba(255, 255, 255, 1);
		color: rgba(123, 79, 66, 1);
		box-sizing: border-box;
		text-decoration: none;
		font-size: small;
	}
	#shoppageBody dd .myBtn::after {
		content: '>';
		position: absolute;
		text-align: center;
		line-height: 2em;
		top: 0;
		right: 0;
		width: 1em;
		height: 100%;
		color: #FFF;
		background: rgba(123, 79, 66, 0.75);
	}
		#shoppageBody dd .myBtn:hover { color: rgba(230, 121, 141, 1); }
		#shoppageBody dd .myBtn:hover::after { background: rgba(230, 121, 141, 1); }

		
/* ==[ kaisya ]========================== */
#howuse08Body .shadedBox h4, 
#kaisyaBody .shadedBox h4 { color: rgba(174, 38, 61, 1); }
	#howuse08Body .shadedBox h4::before, 
	#kaisyaBody .shadedBox h4::before { border-color: rgba(174, 38, 61, 1); }
#kaisyaBody .historyTable th {
	background: none;
	padding-right: 1em;
	text-align: right;
}
#kaisyaBody .patentTable th {
	background: none;
	text-align: left;
	vertical-align: top;
}
#kaisyaBody .trademarkTable th {
	padding-left: 0.5em;
	letter-spacing: 0.5em;
}

#kaisyayakushidoBody .leftThTable { background: url(../img/kaisya/yakushido/image.jpg) no-repeat 100% 0; }
#kaisyasonbayuBody .leftThTable { background: url(../img/kaisya/sonbayu/image.jpg) no-repeat 100% 0; }
#kaisyatikushinoBody .leftThTable { background: url(../img/kaisya/tikushino/image.jpg) no-repeat 100% 0; }
#kaisyatikushinoBody .textAlignDl dt { width: 8.5em; }
#kaisyatikushinoBody .textAlignDl dd { width: calc(100% - 10em); }

/* ==[ qualitypage ]========================== */
#howusepageBody .flexBox dl, 
#qualitypageBody .flexBox dl {
	width: 32%;
	margin-bottom: 1em;
	background: rgba(255, 255, 255, 1);
}
#howusepageBody .flexBox div, 
#qualitypageBody .flexBox div { width: 32%; }
		#howusepageBody .flexBox dl dt a, 
		#qualitypageBody .flexBox dl dt a {
			display: block;
			padding: 0.5em 1em;
			text-decoration: none;
			color: rgba(0, 0, 0, 0.75);
			border: 1px solid rgba(218, 193, 90, 1);
			border-left-width: 0.25em;
			background-image: linear-gradient(
				to bottom,
				rgba(255, 255, 255, 1), rgba(238, 238, 238, 1)
			);
			position: relative;
			font-size: small;
			font-weight: bold;
		}
		#howusepageBody .flexBox dl dt a:hover, 
		#qualitypageBody .flexBox dl dt a:hover {
			background-image: linear-gradient(
				to top,
				rgba(255, 255, 255, 1), rgba(238, 238, 238, 1)
			);
		}
		#howusepageBody .flexBox dl dt a::after, 
		#qualitypageBody .flexBox dl dt a::after {
			content: '\>';
			font-size: x-small;
			position: absolute;
			top: 1em;
			right: 0.5em;
			width: 18px;
			height: 18px;
			line-height: 18px;
			text-align: center;
			background: rgba(218, 193, 90, 1);
			color: rgba(255, 255, 255, 1);
		}
	#howusepageBody .flexBox dl dd, 
	#qualitypageBody .flexBox dl dd { padding: 1em; }

		#qualitysekkenBody dl dt {
			order: 2;
			width: 300px;
		}
		#qualitysekkenBody dl dd {
			order: 1;
			width: 330px;
		}
			#qualitysekkenBody .whiteBox dl dt img { width: 100%; }
	#qualitysekkenBody .sekkenUnitBox2 dl:nth-child(2) dt, 
	#qualitysekkenBody .sekkenUnitBox2 dl:nth-child(3) dt, 
	#qualitysekkenBody .sekkenUnitBox2 dl:last-child dt { width: 200px; }


	#qualitysekkenBody .sekkenUnitBox2 dl:nth-child(2) dd, 
	#qualitysekkenBody .sekkenUnitBox2 dl:nth-child(3) dd, 
	#qualitysekkenBody .sekkenUnitBox2 dl:last-child dd { width: 430px; }
	#qualitysekkenBody .sekkenUnitBox2 dl:nth-child(4) dd:nth-child(3) {
		width: 100%;
		order: 3;
	}
	#qualitysekkenBody .sekkenUnitBox2 dl:nth-child(4) dd:nth-child(3) img { width: 100%; }
	#qualitysekkenBody .sekkenUnitBox2 dl:not(:last-child) {
		padding-bottom: 1em;
		border-bottom: 1px dotted rgba(123, 79, 66, 1);
		margin-bottom: 1em;
	}

/* ==[ howuse ]========================== */
#howuse02Body .flowBox {
	background: rgba(255, 255, 255, 1);
}
	#howuse02Body .flowBox ol {
		justify-content: center;
	}
	#howuse02Body .flowBox .flexBox li {
		box-sizing: border-box;
		width: 45%;
		position: relative;
		padding: 0.5em 1.5em;
	}
	#howuse02Body .flowBox .flexBox li:nth-last-child(2) { border-bottom: none; }
		#howuse02Body .flowBox .flexBox li .rightImg { margin-bottom: 0; }
	#howuse02Body .flowBox .flexBox li:not(:first-child)::before {
		content: '';
		position: absolute;
		top: 0;
		left: -0.5em;
		width: 1em;
		height: 100%;
		background: url(../img/common/flowarrow.png) no-repeat 50% 50%;
		background-size: contain;
	}
	#howuse03Body ul.flexBox li { width: 45%; position: relative; }
		#howuse03Body ul.flexBox li:first-child::after {
			content: '';
			position: absolute;
			top: 0;
			right: -10%;
			height: 100%;
			border-right: 2px dotted rgba(123, 79, 66, 1);
		}
	#howuse04Body .rightImg, 
	#howuse03Body .rightImg { margin-bottom: 0.25em; }
	#howuse06Body .rightImgDlBox dt { width: 280px; }

	#bayutypeBox > p { width: 210px; order: 2; }
	#bayutypeBox > div { width: 500px; order: 1; }
		#bayutypeBox dl { margin-bottom: 1em; }
			#bayutypeBox dd.flexBox > span { width: 40%; }
			#bayutypeBox dd.flexBox > p { width: 55%; }

	#howuse10Body .leftImgDlBox .flexBox dt img, 
	#howuse09Body .leftImgDlBox .flexBox dt img { margin: 0 2em 0.5em 0; }

	
	#howuse11Body .imageBox {
		background: url(../img/howuse/howuse_11/mainimage.png) no-repeat;
		width: 100%;
		height: 450px;
		background-size: contain;
		position: relative;
	}
	#howuse11Body .imageBox::after {
		content: '';
		background: url(../img/howuse/howuse_11/goods.png) no-repeat 50% 100%;
		background-size: contain;
		width: 180px;
		height: 180px;
		position: absolute;
		left: 2em;
		bottom: 2em;
	}
		#howuse11Body .imageBox h3 {
			font-size: x-large;
			padding: 1em 0 0 1em;
			line-height: 150%;
			text-shadow: 1px 1px 5px rgba(255, 255, 255, 1);
		}
		#howuse11Body ul.flexBox li {
			width: 48%;
			box-sizing: border-box;
			padding: 1em 0;
			border-radius: 3px;
			text-align: center;
			font-weight: bold;
			margin-bottom: 0.5em;
			background: rgba(213, 139, 146, 1);
			color: rgba(255, 255, 255, 1);
		}
		#howuse11Dl dl.flexBox dt {
			width: 110px;
			min-height: 110px;
		}
			#howuse11Dl dl.flexBox dt img { width: 100%; }
		#howuse11Dl dl.flexBox dd { width: 590px; }
		#howuse11Dl dl.flexBox:nth-child(odd) dt { order: 2; }
		#howuse11Dl dl.flexBox:nth-child(odd) dd { order: 1; }
			#howuse11Dl dl.flexBox dd h3 {
				border-bottom: 1px solid rgba(123, 79, 66, 1);
				margin-bottom: 0.5em;
			}



	#kafunshoBody .flexarea2 li { box-sizing: border-box; width: 48%; }
		#kafunshoBody .flexarea2 li .leftImg { margin-bottom: 0; }

/* ==[ shop ]========================== */
.shopBox .flex1 table {
	width: 420px;
	border-top: 1px solid rgba(0, 0, 0, 0.25);
	border-left: 1px solid rgba(0, 0, 0, 0.25);
}
	.shopBox .flex1 table th, 
	.shopBox .flex1 table td {
		padding: 0.75em 1em;
		border-right: 1px solid rgba(0, 0, 0, 0.25);
		border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
	}
	.shopBox .flex1 table tr:last-child th, 
	.shopBox .flex1 table tr:last-child td { border-bottom-style: solid; }
.shopBox .flex2 { width: 290px; }
	.shopBox .flex2 img { margin-bottom: 0.5em; }

.shopBox dl.whiteBox { border-radius: 3px; }
	.shopBox dl.whiteBox dt {
		color: rgba(230, 121, 141, 1);
		margin-bottom: 0.5em;
		font-weight: bold;
	}
	.shopBox dl.whiteBox dd .rightImg { margin-bottom: 0; }

#shopfukuokaBody .fukuokamap { width: 48%; }
	#shopfukuokaBody .fukuokamapBox img { width: 100%; margin-bottom: 0.5em; }
	#shopfukuokaBody .googlemapBox { width: 48%; }

/* ==[ tuuhan ]========================== */
#tuuhanBody .myUl { justify-content: start; }
	#tuuhanBody .myUl li { margin-right: 2em; }
	
	.onlineflowOl li {
		width: 22%;
		box-sizing: border-box;
		padding: 0.75em;
		color: rgba(218, 128, 49, 1);
		border: 3px solid rgba(218, 128, 49, 1);
		border-radius: 6px;
		background: rgba(255, 255, 255, 1);
		position: relative;
	}
	.onlineflowOl li:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 0;
		right: -30px;
		width: 20px;
		height: 100%;
		background: url(../img/common/flowarrow2.png) no-repeat 50% 50%;
		background-size: contain;
	}
	.confirmationmailBox {
		margin: 1em 0;
		border: 1px solid rgba(0, 0, 0, 0.25);
		position: relative;
	}
		.confirmationmailBox::before, 
		.confirmationmailBox::after {
			content: '';
			left: 32%;
			position: absolute;
			border: 12px solid transparent;
		}
		.confirmationmailBox::before {
			top: -24px;
			border-bottom-color: rgba(0, 0, 0, 0.25);
		}
		.confirmationmailBox::after {
			top: -23px;
			border-bottom-color: rgba(255, 255, 255, 1);
			z-index: 1000;
		}

#member_osBody h2, 
#out_indexBody h2 {
	background: rgba(0, 112, 0, 1);
	margin-bottom: 0.25em;
}
.numberingBox { counter-reset: number; }
#out_indexBody .numberingBox dl { margin-left: 2em; }
	#out_indexBody .numberingBox dl dt { position: relative; }
		#out_indexBody .numberingBox dl dt::before {
			counter-increment: number;
			content: counter(number);
			width: 1.5em;
			text-align: center;
			border: 1px solid rgba(0, 0, 0, 0.25);
			background: rgba(255, 255, 255, 1);
			border-radius: 3px;
			position: absolute;
			top: 0;
			left: -2em;
			display: block;
		}
#out_indexBody .topThTable {
	margin-bottom: 0.5em;
	border-top: 1px solid rgba(0, 0, 0, 0.25);
	border-left: 1px solid rgba(0, 0, 0, 0.25);
	background: rgba(255, 255, 255, 1);
}
	#out_indexBody .topThTable th { background: rgba(0, 0, 0, 0.1); }
	#out_indexBody .topThTable th, 
	#out_indexBody .topThTable td {
		border-right: 1px solid rgba(0, 0, 0, 0.25);
		border-bottom: 1px solid rgba(0, 0, 0, 0.25);
		text-align: left;
		padding: 0.5em 1em;
	}
	#out_indexBody ul { margin-bottom: 0.5em; }
		#out_indexBody .whiteBox .flexBox { justify-content: start; }
			#out_indexBody .whiteBox .flexBox li:nth-child(2) {
				margin-left: 2em;
				border-left: 1px dotted rgba(0, 0, 0, 0.25);
				padding-left: 2em;
			}
	#out_indexBody .onlineflowOl li { width: 18%; }
	#out_indexBody .onlineflowOl li:not(:last-child)::after {
		right: -20px;
		width: 15px;
	}
	#out_indexBody .confirmationmailBox::before, 
	#out_indexBody .confirmationmailBox::after { left: 25%; }

	#salBody .enumerationBox ul { width: 23%; }
	#salBody .enumerationBox ul li {
		padding-bottom: 0.25em;
		border-bottom: 1px dotted rgba(100, 100, 100, 0.5);
		margin-bottom: 0.25em;
	}


/* ==[ maintenance ]========================== */
#maintenanceBody .cautionText {
	color: rgba(174, 38, 61, 1);
	font-weight: bold;
}


/* ==[ info ]========================== */
#infofreesampleBody .flexBox .leftBox { width: 48%; }
#infofreesampleBody .flexBox .rightBox { width: 48%; }
	#infofreesampleBody .flexBox .rightBox img { width: 100%; margin-bottom: 0.25em; }

			
/* [media screen] ============================================ */

@media only screen and (max-width: 1000px) {
	#homeBody #mainimageBox, 
	#homeBody #mainimageBox h1 { height: 350px; }
		#mainimageBox h1::before { top: 15px; }
	#mainimageBox #noticeBox {
		position: absolute;
		top: 15px;
		right: 55px;
		width: 240px;
	/*	height: 320px;*/
		line-height: 125%;
	}
}
@media only screen and (max-width: 768px) {
	.initBox { width: 90vw; }
	.pcHide { display: block; }
	.spHide { display: none; }
	.pcBlock { display: inline; }
	.spBlock, 
	#drawerBox { display: block; }
	.maxImg { width: 100%; }

	.textBreak { word-wrap: break-word; }

	.leftImg, 
	.rightImg { float: none; margin-left: 0; margin-right: 0; max-width: 100%; }

	#headerBox { padding: 0; }
		#headerBox h1 a {
/*			width: 186px;
			height: 32px;*/
		}
		#headerBox h1 a img { width: 186px; }
	/*	#headerBox .telBox { padding-top: 1em; }*/
		#headerBox .telBox a { color: rgba(18, 167, 59, 1); }

	h2 { text-align: center; }

	#footerBox #footerNaviBox ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
		#footerBox #footerNaviBox li {
			width: 47%;
		}
			#footerBox #footerNaviBox li a {
				display: block;
				padding: 0.5em 0;
				text-align: center;
				border: 1px solid rgba(230, 121, 141, 1);
				margin-bottom: 0.5em;
			}

			#footerBox #footerNaviBox li a::before, 
			#footerBox #footerNaviBox li a::after, 
			#headerBox .telBox::before { content: none !important; }

	.contentBox { padding-bottom: 2em; }

	#mainimageBox h1::after { content: none; }

	#howuse03Body ul.flexBox li, 
	#howuse02Body .flowBox .flexBox li, 
	.leftBox, 
	.rightBox, 
	#homeBody #mainContentsBox .leftBox, 
	#homeBody #mainContentsBox .rightBox, 
	.contentBox .leftBox, 
	#footerBox .leftBox, 
	#footerBox .rightBox { width: 100%; float: none; }
	#howuse03Body ul.flexBox li:not(:last-child) {
		padding-bottom: 1em;
		border-bottom: 2px dotted rgba(123, 79, 66, 1);
		margin-bottom: 1em;
	}

	#footerBox .leftBox { margin-bottom: 1em; }
	#footerBox .rightBox { background: rgba(0, 0, 0, 0.1); }
		#footerBox #footerSubNaviBox nav {
			border: none;
			width: 48% !important;
			display: inline-block;
		}

	/* https://b-risk.jp/blog/2018/07/table-css/ */
	.spTable { width: 100% !important; }
	.spTable tr, 
	.spTable th, 
	.spTable td {
		float: left;
		width: 100% !important;
		box-sizing: border-box;
		text-align: left;
	}
		.spTable .spTableHead { display: none; }
		.spTable .spTableTdB::before, 
		#sellitems .spTableTdB::before {
			content: attr(data-spname)'';
			margin-right: 0.5em;
		}
		.spTable .spTableTdA::after, 
		#sellitems .spTableTdA::after {
			content: ' 'attr(data-spname);
			
		}

	.spTableBox { display: table; }
	.spTableBox > * { display: table-cell; vertical-align: top; }
	#howuse02Body .spTableBox > span:first-child { width: 35%; }
	#howuse02Body .spTableBox > span:nth-child(2) { padding-left: 1em; vertical-align: bottom; }

	/* homeBody */
	#homeBody #headerBox .telBox a {
		font-size: large;
		color: rgba(18, 167, 59, 1);
	}
	#homeBody #mainimageBox, 
	#homeBody #mainimageBox h1 { height: 250px; }
	#homeBody #mainimageBox h1.spring, 
	#homeBody #mainimageBox h1.summer, 
	#homeBody #mainimageBox h1.autumn {
		background-image: url(../img/index/mainimage_spring_sp.jpg);
	}
	#homeBody #mainimageBox h1.winter {
		background-image: url(../img/index/mainimage_winter_sp.jpg);
	}
/*	#homeBody #mainimageBox h1 { background-image: url(../img/index/mainimage_spring_sp.jpg); } */
		#mainimageBox h1::before {
			top: 25px;
			left: 10px;
			width: 180px;
			height: 187px;
			
		}
		#homeBody #mainimageBox h1.spring::before, 
		#homeBody #mainimageBox h1.autumn::before { background-image: url(../img/index/title_spring_sp.png); }
		#homeBody #mainimageBox h1.summer::before { background-image: url(../img/index/title_summer_sp.png); }
		#homeBody #mainimageBox h1.winter::before {
			background-image: url(../img/index/title_winter_sp.png);
			background-size: 70%;
			top: 25px;
		}
		#homeBody #headerBox h1 a {
/*			max-width: 100%;
			background-size: contain;
			background-repeat: no-repeat;*/
		}
		#homeBody #headerBox h1 a img { /* width: 100%; */ width: 186px; }
	#homeBody #mainimageBox { height: auto; }
	#mainimageBox #noticeBox {
		position: relative;
		width: 100%;
		margin: 0 auto;
		top: auto;
		right: auto;
	/*	top: 0;
		right: 0;
		width: 130px;
		top: 25px;
		right: 15px;
		width: 180px;
		height: 200px;*/
	}
	#mainimageBox #mainimageCopyBox { margin: 1em 0; }
	#mainimageBox #noticeBox::before {
		/* width: 180px; */
		width: 100%;
		padding: 0.5em 0;
	}
	#mainimageBox #mainimageSubBtnBox {
		margin-bottom: 2em;
		position: relative;
		z-index: 200;
	}
		#mainimageBox #mainimageSubBtnBox a {
			background: rgba(157, 67, 93, 1);
			color: rgba(255, 255, 255, 1);
			display: inline-block;
			width: 45%;
			padding: 1em 0;
			text-align: center;
		}
		#mainimageBox #mainimageSubBtnBox a:hover {
			background: rgba(255, 255, 255, 1);
			color: rgba(157, 67, 93, 1);
		}

	#homeBody #snsBox li {
		width: 48% !important;
		padding-bottom: 0.5em;
	}
	#homeBody #newsBox dd { width: 100%; }
	#homeBody #rankingBox table caption span { padding-left: 1em; }
	#homeBody #newsBox dt, 
	#homeBody #newsBox dt.setNews { width: 33%; }
	#homeBody #newsBox dl:nth-child(2) dt, 
	#homeBody #newsBox dl:nth-child(2) dt.setNews { left: 33%; }
	#homeBody #newsBox dl:nth-child(3) dt, 
	#homeBody #newsBox dl:nth-child(3) dt.setNews { left: 66%; }
	#homeBody #newsBox dd .overFlowBox .newsListUl li span.dateTimeSpan .spBlock { padding-left: 0; }

	#homeBody #newsBox dd .overFlowBox .magazineListUl li {
		width: auto;
		display: block;
		text-align: left;
	}
	#homeBody #bannerBox a img { width: 95%; }

	/* shop */
	.shopBox .flex2 { margin: 1em auto 0 auto; }
	.shopBox .flex2 img { max-width: 100%; }

	/* kaisya */
	#kaisyaBody .trademarkTable { border: 1px solid rgba(123, 79, 66, 1); }
		#kaisyaBody .trademarkTable td { border: none; text-align: center; }
		#kaisyaBody .spTable th, 
		#kaisyaBody .trademarkTable td:first-child { background: rgba(123, 79, 66, 0.1); text-align: center; }
		#kaisyaBody .patentTable th, 
		#kaisyaBody .historyTable th { text-align: left; padding-left: 1em; }

		#kaisyatikushinoBody .textAlignDl dt, 
		#kaisyatikushinoBody .textAlignDl dd { width: 100%; }

	/* howuse */
	#howuse02Body .flowBox .flexBox li:not(:first-child)::before {
		width: 100%;
		height: 1em;
		top: -1.5em;
		left: 0;
		transform:rotate(90deg);
	}
	#howuse02Body .flowBox .flexBox li:nth-last-child(2) { border-bottom: 2px dotted rgba(123, 79, 66, 1); }
	#howuse03Body ul.flexBox li:first-child::after { content: none; }
	#howuse03Body .bottomdotLineBox .brownText { font-size: large; }
	
	#howuse04Body .rightImg {
		float: none;
		margin-left: 0;
		width: 100%;
	}
	#howuse11Body .imageBox { background: none; height: 130px; min-height: 130px; }
	#howuse11Body .imageBox::after {
		width: 120px;
		height: 120px;
		left: 0;
		bottom: auto;
		top: 0;
	}
		#howuse11Body .imageBox h3 {
			padding: 0 0 0 130px;
			font-size: medium;
			line-height: 125%;
		}
		#howuse11Body ul.flexBox li {
			width: 100%;
			box-sizing: border-box;
			padding: 0;
			text-align: left;
			font-weight: bold;
			background: none;
			color: rgba(213, 139, 146, 1);
			list-style: disc;
			margin-left: 1em;
		}
		#howuse11Dl dl.flexBox dt {
			width: 25%;
		}
		#howuse11Dl dl.flexBox dd { width: 70%; }

	#bayutypeBox > p { width: 100%; order: 1; text-align: center; }
	#bayutypeBox > p .rightImg { float: none; }
	#bayutypeBox > div { width: 100%; order: 2; }

/*	#kafunshoBody .rightImg { width: 40%; }*/
	#kafunshoBody .flexarea2 li .leftImg {
		float: none;
		margin-bottom: 0.5em;
		width: 100%;
	}

	/* tuuhan */
	.freecallBox img { margin: 0 0 0.5em 0; width: 100%; }
	#inquiryBody .freecallBox { text-align: center; }
	#inquiryBody .freecallBox img { width: 80%; }
	.cardBox img { margin: 0 1em 0.5em 0; }

	#out_indexBody .onlineflowOl li, 
	.onlineflowOl li { width: 100%; margin-bottom: 20px; }
	#out_indexBody .onlineflowOl li:not(:last-child)::after, 
	.onlineflowOl li:not(:last-child)::after {
		top: auto;
		bottom: -1.5em;
		right: auto;
		left: 0;
		width: 100%;
		height: 20px;
		transform: rotate(90deg);
	}
	#out_indexBody .topThTable tr td:first-child { background: rgba(100, 100, 100, 0.1); }

	#shoppageBody dl {
		width: 100%;
		margin-bottom: 3em;
	}
	#shoppageBody dl:last-child { margin-bottom: 1em; }
		#shoppageBody dl dt img { width: 100%; }

		#howusepageBody .flexBox dl, 
		#qualitypageBody .flexBox dl { width: 100%; }
	
	/* info */
	#infofreesampleBody .flexBox .leftBox, 
	#infofreesampleBody .flexBox .rightBox { width: 100%; margin-bottom: 0.25em; }

	#sitemapBox > ul { column-count: auto; }
	#sitemapBox > ul > li > ul > li > a {
		font-size: medium;
		padding-bottom: 0.5em;
		border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
		margin-bottom: 0.5em;
	}
	.fax_tyumon::after, .tuuhan_yutaihyou::after { top: 0 !important; }

	_:-ms-lang(x), 
	#drawerNaviBox > ul > li > ul > li, 
	#drawerNaviBox > ul > li, 
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li > a, 
	#drawerNaviBox > ul > li > a { display: block; }
	_:-ms-lang(x), 
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li > a, 
	#drawerNaviBox > ul > li > a { padding-top: 5vh; }
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.howuse01 > a,
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.howuse02 > a,
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.howuse04 > a,
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.howuse06 > a,
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.howuse09 > a,
/*	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.member > a,
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.member_os > a, */
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.historyfirst > a,
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.qualitymucyousei > a,
	#drawerNaviBox > ul > li.openSubMenuLi > ul > li.qualitysafety03 > a { padding-top: 3.5vh; }
}
@media only screen and (min-width: 768px) {

	#historyfirstBody .myUl li {
		display: inline-block;
		margin-right: 2em;
	}
	
}