@charset "utf-8";

/* reset
----------------------------------------------------------------------*/
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,main,figure {
	display:block;
}
body, ul, li, ol, dl, dt, dd, p, form, div, h1, h2, h3, h4, h5, h6,figure { margin: 0; padding: 0; }
img { border: 0; vertical-align: top; }
ul, ol { list-style: none; }
iframe { vertical-align: bottom; }
table{ border-collapse:collapse;}
input[type="text"]:focus {outline: 0;}


/* structure
----------------------------------------------------------------------*/
html { height: 100%;font-size: 10px; }
body {
	color: #333;

	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	width: 100%;
	height: 100%;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	word-break : break-all;
}
p,li,dt,dd,th,td{font-size:1.6rem;line-height: 1.6;}
a { text-decoration: none;color: #555; }

/* hover */
a.hover { 
	-webkit-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}
a.hover:hover{ 
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity: 0.6;
}

#wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body > #wrapper { height: auto; min-height: 100%; }

@media screen {
/*\*/
* html #wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
/**/
}


@media screen and (min-width: 769px) {
	.sp {display: none !important;}
}

@media screen and (max-width: 768px) {
	.pc {display: none !important;}
	img{max-width: 100%;height: auto;}
}

/* JS
---------------------------------------*/
.hide {display:none;}

/* ========================================
  LAYOUT
======================================== */
/*--------------------------------------
  siteHeader
---------------------------------------*/
.headerWrap{
	position: fixed;width: 100%;top: 0;left: 0;z-index: 10000;
	background: rgba(255,255,255,.75);
}
.headerWrap:before{
	content:"";
	display: block;
	width: 100%;height: 7px;
	background: url("../images/header_bg.png") repeat-x center top;
}
.siteHeader{
	display: flex;align-items: center;justify-content: space-between;padding: 7px 0 0 5px;
	max-width: 1000px;margin-left: auto;margin-right: auto;
	
}
.siteHeader .logo{width: 28px;}
@media screen and (max-width: 768px) {
	.headerWrap:before{
		-webkit-background-size: 120px 7px;
		background-size: 120px 7px;
	}
	.siteHeader{padding: 10px 0 6px;background: #fff;}
	.siteHeader.open{border-bottom: 1px solid #222;}
	.siteHeader .logo{width: 22px;margin-left: 15px;}
}

		
.evt {
    margin: 0 auto 3%;
}
.evt p {
    text-align: center;
    color: #0F007A;
    font-weight: bold;
    font-size: 1.9rem;
    margin: 0 auto 1%;
}
.evt ul {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.evt ul li {
    background: #0F007A;
    width: 49%;
    margin: 0 0 1%;
    padding: 1% 0;
    border-radius: 5px;
}
.evt ul li a{
    color: #ffffff;
    font-weight: bold;
    font-size: 1.8rem;
    display: block;
}
/*--------------------------------------
  gnav
---------------------------------------*/
@media screen and (min-width: 769px) {
	.btnShop{float: right;margin-top: 4px;margin-left: 20px;}
	.btnShop img{width: 84px;}
	.gnav{float: left;}
	.gnav .menu{
		display:-webkit-box;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
		align-items:center;
		justify-content:space-between; 
	}
	.gnav .menu>li{text-align: center;padding: 0 1em;line-height: 1;}
	
	.gnav .menu>li>a{display:block;padding: 10px 0 12px;color: #333;text-decoration: none;}
	.gnav .menu a:hover{color: #666;}
	
	/* ---------- menu-pulldown ---------- */
	li.menu-pulldown {position: relative;}
	li.menu-pulldown ul.lv2 {
		white-space: nowrap;
		padding: 12px 1.5em;
		background: #003B94;color: #fff;
		text-align: left;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		position: absolute;
		z-index: 1;
		visibility: hidden;
		opacity: 0;
		top: 100%;
	}
	li.menu-pulldown:hover ul.lv2 {
		visibility: visible;
		opacity: 1;
		top: 100%;
	}
	li.menu-pulldown ul.lv2 li{display: inline-block;line-height: 1;}
	li.menu-pulldown ul.lv2 li+li{margin-left: 2em;}
	li.menu-pulldown ul.lv2 a{display: block;text-align: left;color: #fff;}
	li.menu-pulldown ul.lv2 a:hover{color: #fff;}
	li.menu-pulldown ul.lv2 a:before{
		content:"";
		display: inline-block;width: 12px;height: 12px;margin-bottom: -1px;margin-right: 6px;
		background: url("../images/arr_more.svg") no-repeat left center;
	}

}
@media screen and (max-width: 768px) {
	.evt ul {
	    width: 84%;
	}
	.evt ul li {
	    background: #0F007A;
	    width: 100%;
	    margin: 0 0 3%;
	    padding: 3% 0;
	    border-radius: 5px;
	}
	.btnShop{margin-right: 16px;}
	.btnShop img{width: 80px;}
	
	.gnav{display: none;}
	.gnav.open{
		display: block;
		position: absolute;left: 0;top: 51px;
		width: 100%;
		background: #fff;
		overflow: scroll;height: 100vh;
		padding-bottom: 80px;
	}
	
	.gnav .menu{
		background: #fff;padding:0;
		clear: both;
		position: relative;left: 0;top: 0;
		width: 100%;
		border-bottom: 1px solid #222;
	}
	.gnav .menu li{border-top: 1px solid #222;font-size: 1.3rem;}
	.gnav .menu a,
	.gnav .menu .accBtn{color: #333;display: block;padding: 10px 15px;text-align: left;}
	.gnav .menu a{
		background: url("../images/nav_arr.svg") no-repeat right 24px center / 10px;
	}
	.gnav .menu .accBtn{
		background: url("../images/nav_plus.svg") no-repeat right 21px center / 18px;
	}
	.gnav .menu li li a{
		padding-left: 34px;
		background: url("../images/nav_arr2.svg") no-repeat left 15px center / 8px;
	}
	li.menu-pulldown ul.lv2 {display: none;}
	.gnav .bnrArea{padding: 5px 20px 20px;}
	.gnav .online{padding: 5px 20px 20px;text-align: center;}
	.gnav .online dt{color: #66B0ED;font-size: 1.3rem;}
	.gnav .bnrArea img,
	.gnav .online img{display: block;margin-top: 15px;}
	
	
	/* ---------- menu-trigger ---------- */
	.menu-trigger{float: right;margin-top: 3px;margin-right: 18px;}
	.menu-trigger .icon,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger .icon {
		position: relative;
		width: 20px;
		height: 18px;
	}
	.menu-trigger span,
	.menu-trigger .icon:before,
	.menu-trigger .icon:after{
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #221714;
		border-radius: 2px;
	}
	.menu-trigger span{top: 50%;transform: translateY(-50%)}
	.menu-trigger .icon:before,
	.menu-trigger .icon:after{content:"";display: block;transition: .3s;}
	.menu-trigger .icon:before {top: 0;}
	.menu-trigger .icon:after {bottom: 0;}
	.menu-trigger.active .icon:before,
	.menu-trigger.active .icon:after{background: #CB1177;height: 2px;}
	.menu-trigger.active .icon:before {
		/*
		-webkit-transform: translateY(20px) rotate(-45deg);
		transform: translateY(20px) rotate(-45deg);
		*/
		-webkit-transform: translateY(8px) rotate(-225deg);
		transform: translateY(8px) rotate(-225deg);
	}
	.menu-trigger.active span {opacity: 0;}
	.menu-trigger.active .icon:after {
		-webkit-transform: translateY(-8px) rotate(225deg);
		transform: translateY(-8px) rotate(225deg);
	}
}


/*--------------------------------------
  siteFooter
---------------------------------------*/
.siteFooter{padding: 70px 0;text-align: center;}
.siteFooter .name{display: block;width: 300px;margin: auto;padding-left: 10px;}
.copyright{font-size: 1.1rem;margin-top: 10px;}
/*
.pagetop{text-align: center;background: #222;position: fixed;right: 20px;bottom: 20px;}
.pagetop a{position: relative;display: block;width: 60px;height: 0;padding-top:60px;color: #fff;overflow: hidden;}
.pagetop a:before,
.pagetop a:after{
	left: 50%;margin-left: -7px;
	top: 50%;
	position: absolute;
	-webkit-transform:rotate(-45deg) ;
	-ms-transform:rotate(-45deg) ;
	transform:rotate(-45deg) ;
	display: block;content:'';height: 14px;width: 14px;}
.pagetop a:before{background: #fff;margin-top: -2px;}
.pagetop a:after{background: #222;margin-top: 2px;}
*/
@media screen and (max-width: 768px) {
/*	.pagetop a{width: 40px;height: 0;padding-top: 40px;}*/
	
	.siteFooter{padding: 30px 0 40px;}
	.siteFooter .name{width: 150px;}
}


/*--------------------------------------
  contents
---------------------------------------*/
.contents{padding-top: 56px;text-align: center;}
.sectionWidth{margin-left: auto;margin-right: auto;max-width: 1000px;}
.sectionWidth:after {
	content: "";
	display: block;
	clear: both;
}


.mv{display: flex;align-items: center;justify-content: center;padding: 50px 0;}
.mv .img{padding-left: 30px;}
.mv .text{text-align: center;padding-left: 20px;}
.mv .text img{display: block;margin: 10px auto 0;}
.mv .text img.name{width: 435px;}
.mv .text img.icon{width: 380px;}

.title{height: 38px;}
#about{background: #66B0ED;color: #fff;padding: 80px 0 50px;}
#about .block{display: flex;align-items: center;justify-content: center;}
#about aside img{display: block;}
#about .text{padding-left: 10px;}
#about .name{width: 340px;display: block;margin: auto;}
#about .catch{margin-top: 30px;font-size: 2.8rem;font-weight: bold;text-align: left;}
#about .catch b{color: #FFF000;}
#about p{text-align: left;margin-top: 18px;max-width: 580px;font-size: 1.4rem;;line-height: 2.5;}

#item{
	background: #DBDCDC url("../images/item_bg.svg") repeat center / 90px auto;
	padding: 60px 0;
}
#item .block{
	margin: 40px auto;
	border: 5px solid #66B0ED;border-radius: 10px;
	background: #fff;
	padding: 30px 44px;
	overflow: hidden;
	min-width: 1000px;
}
#item .text{overflow: hidden;width: 370px;}
#liquid .text{margin-left: 40px;}
#spray .itemImg{float: left;margin-right: 70px;}
#liquid .itemImg{float: right;}
.itemName{
	border-radius: 70px;
	padding: 16px 30px;
	display: inline-block;
}
#spray .itemName{background: #67C7C0;margin-top: 16px;}
#liquid .itemName{background: #46BAE6;margin-top: 6px;padding: 10px 30px;}
#spray .itemNameImg{height: 22px;}
#liquid .itemNameImg{height: 48px;}
.itemRecommend{display: block;height: 22px;margin: 16px auto 0;}
#item .list {display: inline-block;margin-top: 12px;}
#item .list li{text-align: left;font-weight: bold;margin-top: 6px;font-size: 2rem;}
#item .list li:before{
	content:"";display: inline-block;
	background: url("../images/item_icon_p.svg") no-repeat center / 100% auto;
	width: 23px;height: 23px;vertical-align: middle;
	margin-right: 10px;margin-top: -3px;
}
#liquid .list li:before{
	background: url("../images/item_icon_b.svg") no-repeat center / 100% auto;
}
.itemCatch{
	color: #66B0ED;
	font-weight: bold;font-size: 2rem;
	margin-top: 15px;
	font-feature-settings : "palt";
}
.btnMore{
	display: block;
	background: #66B0ED url("../images/arr_more.svg") no-repeat right 14px center / 8px auto;
	color: #fff;
	font-weight: bold;font-size: 2rem;
	padding: 14px 0;
	border-radius: 6px;
	margin-top: 12px;
}


#info{background: #C6E1EE;padding: 50px 0;}
#info .row{
	display: flex;justify-content: space-between;
	min-width: 1000px;margin-top: 40px;
}
#info .block{width: 48%;}
#info .img{float: left;margin-right: 18px;}
#info .img img{width: 240px;}
#info .text{text-align: left; text-align: justify; text-justify: inter-ideograph;}
#info .text time{display: block;margin: 10px 0;font-size: 1.6rem;text-align: right;}
#info .text p{line-height: 1.8;}

#faq{padding: 80px 0 60px;max-width: 900px;margin-left: auto;margin-right: auto;}
.jsTab{display: flex;align-items: center;justify-content: space-between;margin-top: 50px;}
.tab{border-radius: 40px;padding: 20px;cursor: pointer;width: 48%;}
.tab img{height: 23px;}
.tabSpray,
.panelSpray dt{background-color: #67C7C0;}
.tabLiquid,
.panelLiquid dt{background-color: #46BAE6;}
.panel{margin-top: 30px;}
.panel dl{text-align: left;margin-top: 20px;}
.panel dt{
	color: #fff;font-size: 2rem;font-weight: bold;
	padding: 16px 150px 16px 80px;
	border-radius: 50px;
	position: relative;cursor: pointer;
	background-repeat: no-repeat;
	background-position: right 30px center;
	background-size: 22px;
	background-image: url("../images/icon_plus.png");
}
.panel dt.open{background-image: url("../images/icon_minus.png");}
.panel dt:before{
	content:"Q";display: block;margin-right: 16px;
	width: 44px;height: 44px;text-align: center;line-height: 44px;
	background: #fff;color: #67C7C0;font-size: 2.2rem;border-radius: 100%;
	position: absolute;left: 20px;top: 50%;
	transform: translateY(-50%)
}
.panelLiquid dt:before{color: #46BAE6;}
.panel dd{padding: 20px 70px;}

#store{
	background: #FFF000;color: #0F007A;
	padding: 90px 0 50px;
}
#store dl{margin-top: 30px;}
#store dt{
	display: inline-block;border-radius: 50px;
	width: 290px;padding: 12px;
	background: #0F007A;color: #FFF000;
	font-size: 2.3rem;line-height: 1;
}
#store dd{font-size: 2rem;line-height: 1.8;padding-top: 8px;}
#store .note{font-size: 1.4rem;margin-top: 30px;}

.imgGallery{margin: 90px auto;}
.slick-initialized .slick-slide{margin-right: 50px;}

#online{margin-top: 100px;}
#online .row{display: flex;justify-content: space-between; align-items: flex-start;margin: 40px 0 30px;}
#online .row a{display: block;max-width: 48%;}
#online .row img{max-width: 100%;}
#online .bnr {display: inline-block;margin-top: 20px;}
#online .bnr img{display: block;margin: 0 auto;width: 540px;}


@media screen and (min-width: 769px) {
	#about .catch strong{color: #FFF000;}
}


@media screen and (max-width: 768px) {
	.sectionWidth{padding-left: 5%;padding-right: 5%;}
	.title{height: 24px;}
	.mv,
	#about .block{display: block;}
	.mv {padding: 10px 0 20px;}
	.mv .img{padding: 0 15% 0 0;}
	.mv .img img{width: 60%;}
	.mv .text {padding: 0;margin-top: -10px;}
	.mv .text img.name{width: 70%;}
	.mv .text img.icon{width: 65%;min-width: 170px;}
	#item .text{width: 100%;}
	#liquid .text{margin: 0;}
	#about,
	#item,
	#info,
	#faq{padding: 30px 0;}
	#store{padding: 40px 0;}
	#about .img{width: 53%;min-width: 170px;margin: auto;}
	#about .text{padding: 0;}
	#about .name{width: 200px;}
	#about .catch{font-size: 1.5rem;margin-top: 20px;}
	#about p{font-size: 1.1rem;line-height: 2;margin-top: 10px;}
	#item{
		-webkit-background-size: 45px auto;
		background-size: 45px auto;
	}
	#item .block{margin: 20px auto;padding: 18px;border-width: 4px;}
	#spray .itemImg,
	#liquid .itemImg{float: none;margin: 0;padding: 0 10px;}
	#spray .itemName,
	#liquid .itemName{margin-top: 20px;}
	#spray .itemNameImg{height: 16px;}
	#liquid .itemNameImg{height: 28px;}
	.itemRecommend{height: 16px;}
	#item .list li,
	.itemCatch,
	.btnMore{font-size: 1.4rem;}
	.btnMore{padding: 10px 0;}
	#item .list li:before{width: 17px;height: 17px;}
	
	#info .row{margin-top: 20px;}
	#info .img{float: none;margin: 0;}
	#info .text time{color: #66B0ED;}
	#info .text time,
	#info .text p{font-size: 10px;}
	.jsTab{display: block;margin-top: 30px;}
	.jsTab li{width: 80%;margin: 10px auto;}
	.tab {padding: 10px;line-height: 1;}
	.tab img{height: 14px;}
	.panel{margin: 30px auto 0;width: 90%;}
	.panel dl{margin-top: 7px;}
	.panel dt{
		font-size: 1.1rem;line-height:1.5;
		padding: 6px 25px 6px 35px;
		background-position: right 10px center;
		-webkit-background-size: 10px auto;
		background-size: 10px auto;
	}
	.panel dt:before{font-size: 1.1rem;width: 16px;height: 16px;line-height: 16px;left: 10px;}
	.panel dd{font-size: 1.2rem;padding: 10px 20px;}
	#store dl{margin-top: 20px;padding: 0 5px;}
	#store dt{font-size: 1.2rem;width: 150px;padding: 10px;}
	#store dd{font-size: 1rem;line-height: 2;}
	#store .note{font-size: .9rem;}
	
	.imgGallery{margin: 30px 0 20px;}
	.slick-initialized .slick-slide{width: 128px;margin-right: 15px;}
	#online .bnr{margin-top: 10px;}
	#online {margin-top: 0;}
	#online .title,
	#online .row{display: none;}
	
	#item .block,
	#info .row{min-width: 100%;}
	.sectionWidth .mv iframe {
    	max-width: 100%;
	}
}



/*--------------------------------------
  add 2020.05.26
---------------------------------------*/
.mv2{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 60px;
	background: #F0F0F2;
}
.mv2 .text1 {
	color: #0F007A;font-weight: bold;
	font-size: 2.6rem;
	text-align: center;
	padding-top: 20px;
}
.mv2 .text1 img{
	display: block;
}
.mv2 .logo {
	width: 350px;
	margin-top: 15px;
}
.mv2 .img {padding: 15px 40px 0;}
.mv2 .name {
	display: inline-block;
	line-height: 60px;
	height: 60px;
	border-radius: 60px;
	background: #67C7C0;
	padding: 18px 1.5em 0;
	text-align: center;
	margin-top: 5px;
	
	border-top-left-radius: 75px 60px;
  border-top-right-radius: 75px 60px;
  border-bottom-right-radius: 75px 60px;
  border-bottom-left-radius: 75px 60px;
}
.mv2 .name img {height: 22px;margin: auto;}
.mv2 .list {display: inline-block;margin-top: 12px;}
.mv2 .txt2 {display: block;height: 30px;}
.mv2 .list li{
	text-align: left;
	margin-top: 6px;
	font-size: 2.2rem;color: #231815;font-weight: bold;
}
.mv2 .list li:before{
	content:"";display: inline-block;
	background: url("../images/cmn_icon_g.svg") no-repeat center / 100% auto;
	width: 26px;height: 26px;vertical-align: middle;
	margin-right: 10px;margin-top: -3px;
}
/**/
.bgPagecolor{background: #67C7C0;color: #fff;}
.bgPagecolor strong{color: #FFFF4A;}
.olItemPoint strong,
.secUse li,
#component .catch{color: #33B5A1;}
/**/
.boxR{
	background: #fff;color: #000;
	border-radius: 10px;
	padding: 25px 50px;
	margin: 40px auto 0;
}
.wrap{overflow: hidden;}
/**/
.leadText{text-align: center;padding-bottom: 30px;font-size: 2.4rem;line-height:1.6;font-weight: bold;}

.pageNav{
	transform: translateY(-50%);
	margin-bottom: -15px;
}
.pageNav ul{
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.pageNav li{margin: 0 10px;font-size: 1.8rem;font-weight: bold;}
.pageNav li a{
	display: block;width: 230px;
	color: #67C7C0;
	border: 3px solid #67C7C0;
	background: #fff;
	border-radius: 10px;
	padding: 15px 0 24px;
	text-align: center;
	position: relative;
}
.pageNav li a:before{
	content:"";display: block;
	transform: translateX(-50%);
	position: absolute;left: 50%;bottom: 9px;
	
	margin: 2px auto 0;
	width: 14px;height: 8px;
	background: url("../images/spray_icon_b.svg") no-repeat center;
}

.itemPoint{padding: 50px 0;}
.imgItemPoint{margin-right: 35px;}
.imgItemPoint img{width: 485px;}
.olItemPoint{counter-reset: number 0;margin: -16px 0;}
.olItemPoint li{
	display: block;
	position: relative;
	margin:16px 0;
	padding:8px 0 8px 50px;
	overflow: hidden;
	text-align: left;
	font-size: 1.4rem;
}
.olItemPoint li:before{
	counter-increment: number 1;
	content: counter(number);
	background: #67C7C0;
	color: #fff;font-size:2rem;font-weight: bold;
	height: 100%;
	padding: 0 10px;
	position: absolute;
	left: 0;top: 0;
	display: flex;align-items: center;
}
.olItemPoint strong{font-size: 2.2rem;}

.secUse{padding: 50px 0;}
.secUse h2{
	font-size: 2.4rem;color: #FFFF4A;
	line-height: 1.6;
}
.secUse .catch{color: #0F007A;font-size: 2.6rem;}
.secUse .boxR{margin-top: 20px;padding-top: 35px;padding-bottom: 20px;}
.secUse ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 906px;
}
.secUse li{text-align: center;font-size: 1.8rem;margin-top: 22px;}
.secUse li img{display: block;margin-bottom: 5px;}

#component{
	padding: 30px 0;
}
#component h2 img{width: 285px;}
#component .catch{
	font-size: 2.6rem;
	line-height: 1.4;
	margin: 18px auto;
}
#component p{
	text-align: left;
	font-size: 1.6rem;line-height: 1.7;
}
.st01 {text-align: center;font-size: 3.1rem;margin-bottom: 20px;}
.st01 span{
	display: inline-block;
	border-radius: 60px;
	color: #fff;background: #67C7C0;
	padding: 0 70px;
	line-height: 60px;
}
#component .blGrape .st01 span{background: #E3C23F;}
#component .blKaki .st01 span{background: #E7812D;}
#component .blIon .st01 span{background: #BF9CDB;}
#component .blShodoku .st01 span{background: #17A692;}
.st02{
	font-size: 2.6rem;font-weight: bold;
	padding-top: 40px;text-align: left;
	margin-bottom: 20px;
}
#component .blGrape .st02{color: #B8A746;}
#component .blKaki .st02{color: #E7812D;}
#component .blIon .st02{color: #BF9CDB;}
#component .blShodoku .st02{color: #17A692;font-size: 3.2rem;font-weight: normal;padding-top: 20px;margin-bottom: 15px;}

.blGrape .st02{clear: both;text-align: center;}
.blGrape .list{clear: both;margin:10px auto 40px;display: inline-block;}
.blGrape .list li{
	text-align: left;
	margin-top: 6px;font-size: 1.7rem;
	margin-left: 20px;
	padding-left: 35px;
	position: relative;
}
.blGrape .list li:before{
	position: absolute;left: 0;top: 4px;
	content:"";display: inline-block;
	background: url("../images/cmn_gp_icon.svg") no-repeat center / 100% auto;
	width: 23px;height: 23px;vertical-align: middle;
	margin-right: 10px;margin-top: -3px;
}

.blKaki{margin-top: 60px;}
.blKaki .data01 .fcOrange{color: #E7812D;font-size: 1.4rem;display: block;}
.blKaki .data02>div span{display: block;text-align: right;color: #E7812D;font-size: 1.7rem;margin-bottom: 7px;}
.blKaki .data02>div img{width: 480px;}

.blIon{margin-top: 60px;}
.blIon dl{text-align: left;}
.blIon dt img{height: 24px;}
.blIon dd{font-size: .9rem;padding-top: 10px;font-feature-settings : "palt";}
.blIon dd img{display: block;margin-top: 6px;}
.blIon .data01 .text{width: 300px;}
.blIon .data01 .img{margin-top: 25px;}
#component .blIon p{font-size: 1.8rem;}
.blOther{margin-top: 75px;}
.blOther dl{max-width: 475px;}
.blOther dt{
	background: #F29482;color: #fff;
	border-radius: 60px;line-height: 60px;
	font-size: 3.2rem;
	text-align: center;font-weight: bold;
}
.blOther dd{
	font-size: 1.8rem;
	line-height: 1.8;
	padding: 10px 12px;
	text-align: left;
}

/**/
#review {padding: 80px 0 45px;}
#review h2 img{height: 38px;}
#review dl.boxR{text-align: left;overflow: hidden;}
#review dl.boxR dt{
	color: #153F97;
	font-size: 2.4rem;line-height: 1.2;
	font-weight: bold;
	border-bottom: 2px solid #231815;
	padding: 6px 15px 12px;
}
#review dl.boxR dd{
	font-size: 1.5rem;
	padding: 12px 15px 6px;
}
#review dl.boxR .img{
	float: left;
	margin: 5px 15px 5px 0;
}
#review dl.boxR .img img{width: 230px;}
#review dl.boxR .img + dd{padding-top: 20px;}
#review .note{font-size: 1.5rem;margin-top: 3px;text-align: right;}


#faq.faqSingle {padding-top: 100px;}
.faqSingle .st01 {margin-top: 30px;margin-bottom: 40px;}
.faqSingle .st01 span {
	display: block;
	line-height: 1;
	border-radius: 70px;
	height: 70px;
	padding-top: 16px;
	max-width: 440px;
	margin: auto;
}
.faqSingle .st01 span img{height: 23px;vertical-align: middle;}
.faqSingle .panelSpray dt{background-color: #67C7C0;}
.faqSingle .panel dt:before{color: #67C7C0;}
/**/
.boxItem{
	border: 4px solid #67C7C0;
	border-radius: 10px;
	padding: 34px 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-flow: row-reverse;
}
.boxItem .text{
	width: 420px;
}
.boxItem .titleImg{
	width: 394px;
}
.boxItem .price{
	display: block;
	margin-top: 30px;
	background: #67C7C0;
	color: #fff;
	font-size: 2.2rem;
	line-height: 46px;
	height: 46px;
	border-radius: 46px;
}
.boxItem .text p{
	margin-top: 10px;
	padding: 10px 0 10px 10px;
	text-align: left;
	font-size: 1.4rem;line-height: 2;
}
/**/
.mainLiquid .mv2 .img{padding: 20px 10px 5px;}
.mainLiquid .mv2 .img img{width: 170px;}
.mainLiquid .mv2 .name{background-color: #66B0ED;padding: 18px 2em 0;}
.mainLiquid .list li:before{
	background-image: url("../images/item_icon_b.svg");
}
.mainLiquid .bgPagecolor{background: #66B0ED;color: #fff;}
.mainLiquid .olItemPoint strong,
.mainLiquid .secUse li,
.mainLiquid #component .catch{color: #66B0ED;}

.mainLiquid .pageNav {margin-bottom: -5px;}
.mainLiquid .pageNav li a{border:2px solid#46B0E6;color: #46B0E6;}
.mainLiquid .pageNav li a:before{background-image: url("../images/liquid_icon_b.svg");}
.mainLiquid .leadText {line-height: 1.4;padding-bottom: 25px;vertical-align: middle;}
.mainLiquid .leadText .fzS{font-size: 1.6rem;}
.mainLiquid .leadText .fzL{font-size: 2.6rem;}
.mainLiquid .leadText .fzLL{font-size: 3.1rem;}
.mainLiquid .olItemPoint li:before,
.mainLiquid .st01 span{background-color: #66B0ED;}
.mainLiquid .panelLiquid dt{background-color: #66B0ED;}
.mainLiquid .faqSingle .panel dt:before{color: #66B0ED;}
.mainLiquid .boxItem{border-color: #46B0E6;}
.mainLiquid .boxItem .price{background-color: #66B0ED;}
.mainLiquid #component{padding-bottom: 50px;}
.blShodoku .text01{max-width: 290px;float: left;}
.blShodoku .img01{float: right;margin-top: 20px;}
.blShodoku .img02{margin-top: 15px;}
#component .blShodoku .note{text-align: right;font-size: 1.2rem;margin-top: 10px;}
.mainLiquid .blGrape {margin-top: 60px;}
.mainLiquid #component .blGrape p{text-align: center;}
.mainLiquid .blGrape .img01{margin-top: 30px;}
.mainLiquid #component .blKaki p{font-size: 1.8rem;}
#making {padding-bottom: 90px;}
#making h2 {padding: 46px 0 84px;}
#making h2 img{height: 38px;}
#making ol{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 70px 20px 60px;
}
#making li {font-size: 1.5rem;position: relative;text-indent: -.5em;}
#making li:nth-child(1) div:after,
#making li:nth-child(2) div:after {
	content:"";
	display: block;width: 50px;height: 40px;
	background: url("../images/liquid_making_arr.svg") no-repeat;
}
#making li .img{height: 220px;display: flex;align-items: flex-end;justify-content: center;padding-bottom: 20px;}
#making li .img img{display: block;}
#making li:nth-child(3) aside img{margin-left: 15px;}
#making li strong{display: block;color: #46B0E6;margin-bottom: 10px;padding-left: 30px;}
#making li:nth-child(2) strong{padding-left: 25px;}
#making li .txt{display: block;padding-left: 30px;}
#making .note{padding-left: 40px;}
#making .noteTitle,
#making .note p{font-size: 1.4rem;}
#making .noteTitle{color: #66B0ED;margin-bottom: 15px;}
	section.adSection01 {
	    background: #FFFF4A;
	}
	.adimg1 p {
	    max-width: 623px;
	    margin: 0 auto 20px;
	        width: 80%;
	}
	.adimg1 {
    	padding: 20px 0;
	}
	.adimg1 p img{
		max-width:100%;
	}
	.adimg1 p.btn a {
	    color: #ffffff;
	    font-weight: bold;
	    font-size: 18px;
	    padding: 5% 0;
	    border-radius: 10px;
	    display: block;
	}
	.adimg1 p.btn {
	    margin: 0 auto;
	    text-align: center;
	    background: #67C6BF;
	    border-radius: 10px;
	    width: 300px;
	}
	section.document ul img {
	    width: 100%;
	    max-width: 100%;
	}
	section.document ul {
	    max-width: 1000px;
	    margin: 0 auto;
	}
	section.document {
	    padding: 40px 0 0;
	}
	section.document li {
	    margin: 0 auto 20px;
	}
@media screen and (min-width: 769px) {
	#wrapper{min-width: 1000px;}
	.wrapFlex{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.pcBr{display: block;}
	
.mainSpray .blGrape .text{position: relative;margin: 0 40px;padding-left: 280px;min-height: 170px;}
.mainSpray .blGrape .img{position: absolute;left: 0;top: 0;}
.mainSpray .blGrape .img img{width: 250px;}

	.blKaki .data01{
		display: flex;
		align-items: center;
		position: relative;
	}
	.blKaki .data01:before{
		content:'';
		display: block;
		background: #E8C8A7;
		border-radius: 102px;
		position: absolute;top: 50%;z-index: -1;
		width: 100%;height: 102px;
		transform: translateY(-50%);
	}
	.blKaki .data01 dt{
		width: 215px;line-height:1.4;
		text-align: center;
		padding-top: 5px;
		padding-left: 20px;
	}
	.dlSaikin,
	.tbSaikin{width: 503px;}
	.dlShinkin{width: 460px;}
	.tbShinkin{width: 453px;}
	
	#making li:nth-child(1) div:after,
	#making li:nth-child(2) div:after {position: absolute;right: -110px;top: 40%;}
	#making li:nth-child(2) div:after{right: -120px;}

	section.adSection01 {
	    background: #FFFF4A;
	}
	.adimg1 p {
	    max-width: 623px;
	    margin: 0 auto 20px;
	}
	.adimg1 {
    	padding: 20px 0;
	}
	.adimg1 p img{
		max-width:100%;
	}
	.adimg1 p.btn a {
	    color: #ffffff;
	    font-weight: bold;
	    font-size: 18px;
	    padding: 5% 0;
	    border-radius: 10px;
	    display: block;
	}
	.adimg1 p.btn {
	    margin: 0 auto;
	    text-align: center;
	    background: #67C6BF;
	    border-radius: 10px;
	    width: 300px;
	}
	section.document ul img {
	    width: 100%;
	    max-width: 100%;
	}
	section.document ul {
	    max-width: 1000px;
	    margin: 0 auto;
	}
	section.document {
	    padding: 40px 0 0;
	}
	section.document li {
	    margin: 0 auto 20px;
	}
}

@media screen and (max-width: 768px) {
	
	.mv2{display: block;padding-bottom: 30px;}
	.mv2 .text1{font-size: 4.6vw;padding-top: 0;}
	.mv2 .logo{min-width: 210px;width: 70%;margin: 2px auto 0;}
	.mv2 .name{height: 30px;line-height: 30px;padding: 9px 1em 0;margin: 0;}
	.mv2 .name img{height: 11px;}
	.mv2 .img{width: 47%;min-width: 65px;display: block;margin: auto;}
	.mv2 .txt2{height: auto;width: 50%;margin: auto;}
	.mv2 .list li{font-size: 4.5vw;margin-top: 3px;}
	.mv2 .list li:before{height: 6.5vw;width: 6.5vw;}
	.pageNav{
		transform: translateY(0);
		margin: 0 auto;
		padding: 18px 0 5px;
	}
	.pageNav li{font-size: 4vw;}
	.pageNav li a{
		margin: 5px auto;
		padding: 10px;
		border-radius: 8px;
		width: 100%;
	}
	.mainSpray .pageNav ul{display: block;}
	.mainSpray .pageNav li a{width: 90%;}
	.mainSpray .pageNav li a:before{
		display: inline-block;
		transform: translateX(0);
		position: relative;left: -4px;bottom: 1px;
	}
	.leadText{font-size: 4.5vw;line-height: 1.4;padding-bottom: 20px;}
	.itemPoint{padding: 30px 0 15px;}
	.imgItemPoint{margin: auto;width: 75%;display: block;}
	.olItemPoint{width: 85%;margin: 20px auto 0;}
	.olItemPoint li{padding: 5px 0 5px 40px;font-size: 1.1rem;}
	.olItemPoint li:before{font-size: 1.4rem;padding: 0 8px;}
	.olItemPoint strong{font-size: 1.3rem;}
	.boxR{margin-top: 15px;padding: 30px 6%;}
	.secUse{padding: 25px 3%;}
	.secUse h2{font-size: 1.2rem;margin-left: -4%;margin-right: -4%;}
	.secUse .catch{font-size: 1.3rem;}
	.secUse .boxR{padding-top: 25px;margin-top: 10px;}
	.secUse ul{width: 100%;margin-top: 5px;}
	.secUse li{width: 46.5%;font-size: 1rem;font-weight: bold;margin-top: 15px;}
	#component {padding: 15px 7%;}
	#component h2 img{width: 50%;}
	#component .catch{font-size: 4vw;margin: 10px auto;}
	#component p{font-size: 1.15rem;}
	.st01{font-size: 1.6rem;margin-bottom: 15px;}
	.st01 span{height: 30px;line-height: 30px;padding: 0 2.5em;display: block;}
	.blGrape .st01 {margin-left: -3%;margin-right: -3%;}
	.blGrape .st01 span{padding: 0;display: block;}
	.st02{font-size: 1.3rem;padding-top: 15px;margin-bottom: 10px;}
	
	.blGrape{width: 100%;}
	.blGrape .text{padding: 0;margin: 0;}
	.blGrape .img{
		position: relative;
		width: 55%;margin: 0 auto 15px;
	}
	.blGrape .list{margin: 0;}
	.blGrape .list li{
		font-size: 1rem;
		padding-left: 25px;
		margin:10px 0 15px;
	}
	.blGrape .list li:before{width: 16px;height: 16px;}
	.blKaki{margin-top: 30px;}
	#component .blKaki p{font-size: .9rem;padding: 0 1%;}
	.blKaki .st02{text-align: center;padding-top: 20px;margin-bottom: 7px;}
	.blKaki .data01 dt{font-size: 1.2rem;margin-bottom: 15px;}
	.blKaki .data01 dt .pcBr{display: inline-block;padding-left: 1em;}
	.blKaki .data01 .fcOrange{font-size: 1.1rem;padding-top: 2px;}
	.blKaki .data02>div span{font-size: .9rem;}
	.blIon{margin-top: 30px;}
	#component .blIon p{font-size: .9rem;padding: 0 1% 10px;}
	.blIon dt {line-height: 1;}
	.blIon dt img{height: 11px;}
	.blIon dd{padding-top: 0;font-size: .8rem;line-height: 1.3;}
	.spBr{display: block;height: 0;opacity: 0;}
	.blIon dl.dlShinkin{margin-top: 20px;}
	.blIon .data01 .text{width: 100%;}
	.blIon .data01 .img{margin-top: 3px;}
	.blOther{margin-top: 20px;}
	.blOther dl{margin-top: 10px;}
	.blOther dt{
		font-size: 1.8rem;line-height: 30px;
		width: 100%;margin: auto;
	}
	.blOther dd{font-size: .9rem;padding: 10px 0;}
	.boxR{padding: 24px;}
	#review{padding: 30px 0 20px;}
	#review h2 img{height: 19px;}
	#review dl.boxR dt{font-size: 1.6rem;padding: 0 0 10px;}
	#review dl.boxR dd{font-size: 1.1rem;padding: 10px 0 0;}
	#review dl.boxR .img{float: none;margin: 10px auto 0;width: 80%;}
	#review .note{font-size: 1rem;}
	#faq.faqSingle{padding: 30px 0;}
	.faqSingle .st01{margin: 20px auto 0;}
	.faqSingle .st01 span{
		line-height: 30px;height: 30px;
		width: 70%;
		padding-top: 0;
	}
	.faqSingle .st01 span img{height: 12px;margin-top: -3px;}
	.faqSingle .panel{margin: 20px auto 10px;}
	.faqSingle .panel dd{font-size: 1.1rem;padding: 10px 15px;}
	.faqSingle .panel dd .taC{display: block;text-align: center;}
	.faqSingle .panel dd .taC+br{display: none;}
	.boxItem{border-width: 2px;padding: 25px 20px;display: block;}
	.boxItem .img{width: 90%;margin: auto;}
	.boxItem .text{width: auto;}
	.boxItem .text h3{width: 85%;margin: 20px auto 0;}
	.boxItem .price{font-size: 1.1rem;line-height: 23px;height: 23px;width: 90%;margin: 10px auto 0;}
	.boxItem .text p{font-size: .9rem;line-height: 1.6;padding: 0;}
	#online.f2 .title,
	#online.f2 .row{display: block;}
	#online.f2{padding-top: 30px;}
	#online.f2 .title{height: 22px;margin: auto;}
	#online .row{margin: 15px auto 20px;}
	#online .row a{max-width: 100%;margin: 10px auto 0;}
	
	.mainLiquid .mv2 {padding-bottom: 20px;}
	.mainLiquid .mv2 .name{height: 44px;line-height: 44px;padding: 8px 2.5em 0;}
	.mainLiquid .mv2 .name img{height: 28px;}
	.mainLiquid .mv2 .img{padding: 0 5%;margin-top: -5px;}
	.mainLiquid .pageNav ul{flex-wrap: wrap;padding: 0 5%;}
	.mainLiquid .pageNav li{width: 48%;margin: 0 1%;font-size: 3.5vw;}
	.mainLiquid .pageNav li a{border-radius: 6px;padding: 5px 0 15px;margin: 3px 0;}
	.mainLiquid .pageNav li a:before{width: 10px;height: 6px;bottom: 7px;}
	.mainLiquid .leadText{font-size:4vw;padding-bottom: 16px;}
	.mainLiquid .leadText .fzS{font-size: 3vw;}
	.mainLiquid .leadText .fzLL{font-size: 6vw;}
	.mainLiquid .leadText .fzL{font-size: 4.5vw;}
	.mainLiquid .itemPoint{padding: 20px 0 10px;}
	.mainLiquid #component{padding-bottom: 25px;}
	#component .blShodoku .st02{font-size: 1.3rem;font-weight: bold;text-align: center;margin-bottom: 5px;}
	#component .blShodoku p{font-size: 1.1rem;}
	.blShodoku .img01{margin-top: 5px;}
	#component .blShodoku .note{text-align: left;font-size: .8rem;}
	.mainLiquid .blGrape{margin-top: 20px;}
	.mainLiquid #component .blGrape p{text-align: left;}
	.mainLiquid .blGrape .img01{margin-top: 10px;}
	.mainLiquid #component .blKaki p{font-size: .9rem;}
	#making{padding-bottom: 15px;}
	#making h2 {padding: 18px 0 38px;}
	#making h2 img{height: 19px;}
	
	#making ol{display: block;padding: 18px 0 10px 10px;}
	#making li {
		display: flex;align-items: center;
		font-size: 1.1rem;
	}
	#making li:nth-child(1) div:after,
	#making li:nth-child(2) div:after{
		transform: rotate(90deg);width: 40px;height: 20px;
		display: inline-block;
		margin-top: 18px;
	}
	#making li>div{width: 66%;padding-top: 1em;}
	#making li .img{width: 34%;align-items: flex-start;height: auto;padding: 0;}
	#making li:nth-child(2) .img{padding: 0 6% 0 9%;}
	#making li:nth-child(3) .img{padding: 20px 1% 0 4%;}
	#making li strong{margin-bottom: 0;padding-left: 1em;}
	#making li:nth-child(2) strong{padding-left: 1em;}
	#making li .txt{padding: 0 0 0 2em;}
	#making .note{padding: 20px 0 0;}
	#making .noteTitle, #making .note p{font-size: .9rem;}
	#making .noteTitle{margin-bottom: 5px;}
	.mainLiquid #faq.faqSingle{padding-bottom: 10px;}
	
	
}


/*--------------------------------------
  add 2020.08.05
---------------------------------------*/

	
	#handsoap .mv2 .list li:before{background:url("../images/soap_icon_check.svg") no-repeat center / 100% auto;
	}
	#handsoap .pageNav li a:before {
		background: url(../images/soap_icon_arw.svg) no-repeat center;
	}
	#handsoap .mv2{
		background-color: #fad6cf;
	}
	#handsoap .mv2 .img{
		padding: 15px 80px 0 10px;
	}
	#handsoap .mv2 .img img{
		width: 83px;
	}
	#handsoap .mv2 .name{
		background: none;
		padding: 0 1.5em 0 0 ;
	}
	#handsoap .mv2 .name img{
		height: 83px;
	}
	#handsoap .mv2 .logo{
		margin-left: 30px;
	}
	#handsoap .mv2 .text1{
		font-size: 2.4rem;
		color: #5bc2d9;
	}
	#handsoap .pageNav li a{
		color: #f5b1a4;
		border-color: #f5b1a4;
	}
	#handsoap .bgPagecolor{
		background-color: #f0f0f2;
		color: #e39694;
	}
	#handsoap .olItemPoint li:before{
		background-color: #5bc2d9;
	}
	#handsoap .olItemPoint strong{
		color: #5bc2d9;
	}
	.aboutSoap_title{
		background-color: #f0f0f2;
		padding: 50px 0 30px;
	}
	.aboutSoap h2 img{
		width: 398px;
		margin: 0 auto 20px;
		display: block;
	}
	.aboutSoap_title p{
		font-size: 1.6rem;
		text-align: center;
	}
	.aboutSoap .group{
		background-color: #d2ecf1;
		padding: 50px 0 ;
	}
	.aboutSoap .case{
		background:rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		padding: 40px;
		margin-bottom: 50px;
	}
	.aboutSoap .case_flex{
		display: flex;
		flex-direction: row-reverse;
		margin-bottom: 30px;
	}
	.aboutSoap .case_textarea{
		margin-right: 30px;
	}
	.aboutSoap .case_title{
		width: 156px;
		padding: 30px 0;
	}
	.aboutSoap .case_list li{
		font-size: 2.1rem;
		font-weight: bold;
		color: #3d3d3d;
		position: relative;
		text-align: left;
		padding-left: 30px;
		margin-bottom: 5px;
	}
	.aboutSoap .case_list li::before{
		content: "";
		background: url(../images/soap_case_icon_check.svg) no-repeat center/contain;
		display: inline-block;
		width: 25px;
		height: 25px;
		position: absolute;
		left: 0;
	 	top: 2px;
	}
	.aboutSoap .case figure img{
		width: 340px;
	}
	.aboutSoap .case_banner{
		font-size: 2.6rem;
		font-weight: bold;
		line-height: 70px;
		color: #fff;
		background-color: #5bc2d9;
		border-radius: 10px;
	}
	.aboutSoap .case_banner .sp{
		display: none;
	}
	.aboutSoap .group1 .point1 .area1{
		margin-right: 30px;
	}
	.aboutSoap .point_flex{
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}
	.aboutSoap .point_title img{
		display: block;
		width: 117px;
		margin: 0 auto 20px;
	}
	.aboutSoap .point_title h3{
		font-size: 3rem;
		font-weight: bold;
		color: #4aa6c9;
	    line-height: 1.5em;
	    margin-bottom: 15px;
	}
	.aboutSoap .point_mainimg img{
		width: 518px;
	}
	.aboutSoap .group1 .area2{
		margin-top: 20px;
	}
	.aboutSoap .group1 .area2 .box{
		width: 185px;
		margin-bottom: 15px;
	}
	.aboutSoap .group1 .area2 .box img{
		max-width: 100%;
		margin-bottom: 5px;
	}
	.aboutSoap .group1 .area2 .box p{
		font-size: 1.3rem;
		color: #d2ecf1;
		line-height: 24px;
		background-color: #4aa6c9;
		font-weight: bold;
		border-radius: 12px;
	}
	.aboutSoap .point_undertxt{
		font-size: 2.8rem;
		font-weight: bold;
		color: #3d3d3d;
		line-height: 1.4em;
	}
	.aboutSoap .group2{
		background-color: #fad6cf;
	}
	.aboutSoap .group2 .case_textarea{
		margin-left: 30px;
	}
	.aboutSoap .group2 .case_flex{
		flex-direction: row;
	}
	.aboutSoap .group2 .case_banner{
		font-size: 2.4rem;
		background-color: #f59999;
	}
	.aboutSoap .group2 .point_title h3{
		color: #cd5b54;
	}
	.aboutSoap .group2 .point2 .area2 img{
		width: 246px;
		margin-right: 20px;
	}
	.aboutSoap .group2 .point2 .area2 p{
		font-size: 2.3rem;
		font-weight: bold;
		color: #f59999;
		text-align: left;
	}
	.aboutSoap .group2 .point2 .area2{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.5);
		padding: 30px 30px 30px 50px;
		border-radius: 10px;
		margin-bottom: 40px;
	}
	.aboutSoap .group2 .area3{
		display: flex;
		justify-content: space-between;
		margin-bottom: 40px;
	}
	.aboutSoap .group2 .area3 dl{
		width: 490px;
	}
	.aboutSoap .group2 dt{
		font-size: 2.4rem;
		font-weight: bold;
		color: #141316;
		line-height: 54px;
		border-radius: 20px;
		background-color: #fffabc;
		margin-bottom: 15px;
	}
	.aboutSoap .group2 dd{
		font-size: 1.6rem;
		text-align: left;
		padding: 0 15px;
	}
	.aboutSoap .group2 .area4 dl{
		margin-bottom: 40px;
	}
	.aboutSoap .group2 .area4 dl:after{
		content: "";
	   display: block;
	   clear: both;
	}
	.aboutSoap .group2 .area4 dt{
		width: 700px;
		float: right;
		margin-top: 15px;
	}
	.aboutSoap .group2 .area4 dd img{
		float: left;
		width: 250px;
	}
	.aboutSoap .group2 .area4 dd p{
		float: right;
		width: 670px;
	}
	#handsoap #review {
		background-color: #f29482;
	}
	#handsoap #review img{
		width: 180px;
	}
	#handsoap #review .note{
		color: #fff;
	}
	#handsoap #faq .st01 span{
		background-color: #f5b1a4;
	}
	#handsoap .faqSingle .panelSpray dt{
		background-color: #f5b1a4;
	}
	#handsoap .faqSingle .panel dt:before{
		color: #f5b1a4;
	}
	#handsoap .boxItem {
		border-color: #f5b1a4;
	}
	#handsoap .boxItem .productlogo img{
		width: 315px;
		display: block;
		margin: 0 auto 10px;
	}
	#handsoap .boxItem .price{
		background-color: #f5b1a4;
		width: 420px;
		margin: 0 auto;
	}
	#handsoap .boxItem .img{
		padding-right: 50px;
	}
	#handsoap .boxItem .img img{
		width: 100px;
	}
	#handsoap .boxItem .text{
		width: 695px;
	}

	#soap .itemNameImg{
		height: 22px;
	}
	#soap .itemName{
		background-color: #f5b1a4;
	    margin-top: 16px;
	}
	#soap .itemImg{
		float: left;
    	margin-right: 70px;
	}
	#soap .list li:before{
		    background: url(../images/item_icon_soap.svg) no-repeat center / 100% auto;
	}
	.tabSoap,
	.panelSoap dt{
		background-color: #f5b1a4;
	}
	.panelSoap dt:before{
		color: #f5b1a4;
	}
	.tab{
		width: 32%;
	}

@media screen and (max-width: 768px) {
	#handsoap .mv2 .text1{
		font-size: 4vw;
	}
	#handsoap .mv2 .logo{
		margin:0 auto;
	}
	#handsoap .mv2 .name{
		padding: 0;
		height: auto;
		width: 50%;
		margin-top: -20px;
	}
	#handsoap .mv2 .img{
		padding: 0;
		margin-bottom: 15px;
	}
	#handsoap .mv2 .img img{
		width: 32%;
	}
	.aboutSoap h2 img{
		width: 62.5%;
	}
	.aboutSoap_title p{
		font-size: 3.7vw;
	}
	.aboutSoap .group{
		padding: 25px;
	}
	.aboutSoap .case_flex{
		display: block;
	}
	.aboutSoap .case{
		padding: 20px;
	}
	.aboutSoap .case_title{
		width: 27%;
		padding:15px 0;
	}
	.aboutSoap .case_list li{
		font-size: 3vw;
	}
	.aboutSoap .case_banner{
		font-size: 4vw;
		line-height: 1.5em;
		padding: 20px 0;
	}
	.aboutSoap .case_banner .sp{
		display: block;
	}
	.aboutSoap .case_list li::before{
		width: 3.9vw;
		height: 3.9vw;
	}
	.aboutSoap .case_list li{
		padding-left: 4.2vw;
	}
	.aboutSoap .point_flex{
		display: block;
	}
	.aboutSoap .case{
		margin-bottom: 20px;
	}
	.aboutSoap .point_title img{
		width: 20%;
	}
	.aboutSoap .group1 .point1 .area1{
		margin-right: 0;
	}
	.aboutSoap .point_title h3{
		font-size: 4.6vw;
	}
	.aboutSoap .group1 .area2{
		display: flex;
		justify-content: space-between;
	}
	.aboutSoap .group1 .area2 .box{
		width: 32%;
	}
	.aboutSoap .group1 .area2 .box p{
		font-size: 2.8vw;
	}
	.aboutSoap .point_undertxt{
		font-size: 4.6vw;
	}
	.aboutSoap .group2 .case_textarea{
		margin: 0;
	}
	.aboutSoap .group2 .case_banner{
		font-size: 4vw;
	}
	.aboutSoap .group2 .point_title h3{
		font-size: 4.3vw;
	}
	.aboutSoap .group2 .point2 .area2{
		padding: 20px;
	}
	.aboutSoap .group2 .point2 .area2{
		display: block;
		margin-bottom: 20px;
	}
	.aboutSoap .group2 .point2 .area2 img{
		margin-right: 0;
		margin-bottom: 20px;
		width: 51%;
	}
	.aboutSoap .group2 .point2 .area2 p{
		font-size: 3.5vw;
	}
	.aboutSoap .group2 .area3.sectionWidth,
	.aboutSoap .group2 .area4.sectionWidth{
		padding: 0;
	}
	.aboutSoap .group2 .area3{
		display: block;
		margin-bottom: 0;
	}
	.aboutSoap .group2 .area3 dl{
		width: 100%;
	}
	.aboutSoap .group2 dt{
		font-size: 3.7vw;
		line-height: 2em;
	}
	.aboutSoap .group2 dd{
		font-size: 1.1rem;
		margin-bottom: 15px;
	}
	.aboutSoap .group2 .area4 dt{
		width: 100%;
	}
	.aboutSoap .group2 .area4 dd img{
		width: 34.4%;
	}
	.aboutSoap .group2 .area4 dd p{
		width: 58%;
		font-size: 1.1rem;
	}
	.aboutSoap .group2 .area4 dl{
		margin-bottom: 10px;
	}
	.aboutSoap .group2 .area4 dl:last-child{
		margin-bottom: 30px;
	}
	#review dl.boxR .img {
		text-align: center;
	}
	#handsoap .boxItem .img img{
		width: 18%;
	}
	#handsoap .boxItem .img{
		padding-right: 0;
	}
	#handsoap .boxItem .text{
		width: 100%;
	}
	#handsoap .boxItem .text h3{
		width: 60%;
	}
	#handsoap .boxItem .productlogo img{
		width: 100%;
	}
	#handsoap .boxItem .price{
		width: 100%;
	}

	#soap .itemImg, #liquid .itemImg {
    float: none;
    margin: 0;
    padding: 0 10px;
	}
	#soap .itemNameImg{
		height: 16px;
	}

}/*/max-width: 768px*/