@charset "UTF-8";

/*----------------------------base-----------------------------------*/
img{ 
	max-width:100%;
	width:auto;
	height:auto;
}

/*flex*/
.flex{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;

}
.pc_only{
	display:block;
}
.sp_only{
	display:none;
}
@media screen and (max-width: 600px){
	.flex{
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	}
	.pc_only{
	display:none;
}
.sp_only{
	display:block;
	}
}


/*----------------------------delay-----------------------------------*/

.delay{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px);
	transition: 0.8s ease-in-out;
}
.delayActive{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	transition: 0.8s ease-in-out;
}

/*----------------------------cmn-----------------------------------*/
.wrap{
	max-width:1080px;
	margin:auto;
	padding-right:20px;
	padding-left:20px;
	overflow-x: visible;
}

body{
	font-size:1.6rem;
	position: relative;
}

body::before {
	content: "";
	background: url(../images/bg.jpg) repeat-x 0 0;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	transform: translateZ(0);
}
/*body::after {
	content: "";
	background: url(../images/t.png) no-repeat;
	background-position:left bottom;
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	transform: translateZ(0);

}*/
header h2,
main h2{
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size:2.4rem;
	font-weight:normal;
	text-align: left;
}
header h2 span,
main h2 span{
	font-size:4.5rem;
	display: block;
}
header h3,
main h3{
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size:3.4rem;font-weight: normal;
	line-height: 1.3;
	margin-bottom:35px;
	color:#786b63;
	text-align: center;
}
header h3 span,
main h3 span{
	font-size:3.6rem;
	display:block;
	color:#4a3f37;
	}
header h4,
main h4{
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size:2.4rem;
	letter-spacing: 0.2rem;
	font-weight: normal;
	text-align: center;
}
header h4 span,
main h4 span{
	font-size:2.0rem;
	padding-bottom:10px;
	display:block;
	color:#786b63;
	}
main h5{
	font-size:2.0rem;
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	text-decoration: underline;
	margin:10px 0;
}

@media screen and (max-width: 600px){
	body::after {
		background: none;
	}
	main h2{
		font-size:2.0rem;

	}
	main h2 span{
		font-size:3.6rem;
	}
	header h3,
	main h3{
		font-size:2.4rem;
		line-height: 1.5;
		margin-bottom:5px;
	}
	header h3 span,
	main h3 span{
		font-size:2.8rem;
		}
	header h4,
	main h4{	
		font-size:2.0rem;
	}
	header h4 span,
	main h4 span{
		font-size:2.0rem;
		}
	main h5{
		font-size:1.8rem;
	}
}


section.title{
	position: relative;
	max-height:350px;
	height:32vw;
	overflow: visible;
	margin:30px 0;
}
section.title h2{
	position:absolute;
	left:0;
	top:42%;
	z-index: 2;
	color:#403324;
}
section.title h2 span{
	letter-spacing: .1em;
}
section.title img{
	position:absolute;
	top:0;
	right:0;
	z-index: 1;
}
section.for{
	position:relative;

}
section.for h4{
	margin-top:60px;
	padding-bottom:15px;
}

section.feature {
	border-top:1px solid #ccc;
	padding-top:50px;
	margin:50px auto 0 auto;
}
section.feature h4 {
    margin-bottom: 20px;
}
section.feature dl{
	width:30%;
}
section.feature p{
	font-size:1.4rem;
	line-height: 1.5;
	text-align: left;
}

section.improvement {
	margin:0 auto;
	padding-bottom: 50px;
}
section.improvement h4 {
    margin-bottom: 20px;
}
section.improvement dl{
	width:30%;
}
section.improvement p{
	font-size:1.4rem;
	line-height: 1.5;
	text-align: left;
}
@media screen and (max-width: 600px){
section.title{
	max-height:auto;
	height:auto;
	width:100%;
	overflow: visible;
	margin:0;
}
section.title h2{
	position:relative;
	left:0;
	top:0;
	text-align: center;
	padding-bottom:15px;
}

main section.title h2 span{
	font-size:3.0rem;
}

section.title img{
	position:relative;
	top:5px;
	right:0;
	z-index: 1;
}
	section.for h4 {
    margin-top: 40px;
}
section.feature dl{
	width:100%;
	margin-bottom: 15px;
}
section.feature dt img{
	width:80%;
	margin:auto;
}
section.improvement dl{
	width:100%;
	margin-bottom: 15px;
}
section.improvement dt img{
	width:80%;
	margin:auto;
}
}
/*----------------------------header-----------------------------------*/
header{
	position:relative;
}
header:after{
	content: "";
	background:url("../images/bgs1.gif") no-repeat;
	background-size:100% auto;
	display: block;
	top: -10vh;
	right: 0;
	width: 30vw;
	height: 100vh;
	z-index: -1;
	transform: translateZ(0);
	filter:alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
	position:absolute;
}

header h1{
	width:32%;
	padding-top:5vh;
}
header #mv_outer{
	position:relative;
	height:75vh;
	min-height:660px;
}
header #mv_outer:after{
	position: absolute;
	width: 100%;
	height: 11.3vw;
	content: "";
	background: url("../images/c2_4.png") no-repeat;
	background-size: 100% auto;
	background-position: right bottom;
	bottom: 0;
	z-index: 0;
}
header #mv_outer .wrap{
	overflow-x: visible;
	position:relative;
	background:url(../images/c1_2.png) no-repeat;
	background-position:top right;
	z-index: 1;
	height: 100%;
}

header #mv{
	position:relative;
	overflow-x: visible;
	width:100%;

}
header #mv h2{
	font-size:3.6rem;
	line-height: 1.5;
	margin:40px 0 30px;
	width:65%;
	padding-top: 5vh;
	text-shadow: 2px 2px 4px #f8f7f2 ,-2px 2px 4px #f8f7f2 ,2px -2px 4px #f8f7f2 ,-2px -2px 4px #f8f7f2;
}
header #mv p{
	line-height: 1.8;
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size:1.8rem;
	width:65%;
	color: #786b63;
}
header #mv h3{
	font-size: 2.4rem;
	text-align: left;
	margin-top:20px;
	width:65%;
	margin-bottom: 20px;
	color: #745131;
}
#mv figure{
	position:absolute;
	top:0;
	right:0;
	z-index: 0;
	/*width:30%;*/
	width:35%;
}

header section figure.flex{
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
header #nav{
	position:relative;
	background:url("../images/bg2.gif");
	padding-bottom:50px;
	color:#fff;
		z-index: 10;
}
header #nav ul{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	margin: auto;
	max-width: 900px;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;

}
header #nav li{
	text-align: center;
	width:30%;
	margin:5px 0.5%;
}
header #nav li a{
	padding:15px 0;
	border:3px double #b19367;
	color:#fff;
	width:auto;
	display: block;
	background:rgba(177,147,103,0.3);
}
header #nav li a span{
	position: relative;
	padding-right: 12px;
}
header #nav li a span::after{
	content: "";
	height: 7px;
	width: 12px;
	position: absolute;
	top: calc(50% - 4px);
	left: 0;
	display: block;
	background: url("../images/ico_down01.png") no-repeat;
	background-size: auto;
	background-size: cover;
	margin-left: 5px;
}
header #nav li a:hover{
	border:3px double rgba(177,147,103,0.8);
	background:rgba(177,147,103,0.2);
}
header #ld{
	position:relative;
	background:url("../images/bg2.gif");
	padding-bottom:50px;
	color:#fff;
}
header #ld .flex figure{
	width:30%;
}
header #ld .flex div{
	width:65%;
}
header #ld h3{
	color:#fff;
}
header #ld h3 span{
		opacity: 0.5;
  filter: alpha(opacity=50);
	color:#fff;
	margin-bottom:0px;
}
header #ld h4{
	text-align: left;
	margin-bottom:10px;
}
header #ld ol{
	padding-top:15px;
	width:auto;
	display: inline-block;
}
header #ld li{
	text-align: center;
	position: relative;
	padding:20px 0;
}

header #ld li::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid rgba(255,255,255,.8);
  border-right: 2px solid rgba(255,255,255,.8);
  transform: translateX(-50%) rotate(135deg);
}
header #ld li:last-child:before{
	 display: none;
}
@media screen and (max-width: 800px){
	header #mv_outer .wrap{
	min-height:80vh;
	background-size:60% auto;
}
header #nav li{
	text-align: center;
	width:30%;
}
}

@media screen and (max-width: 600px){
header:after{
	top: 20vh;
	left: -10vw;
	width: 60vw;
}
header h1{
	padding-top:2vh;
	width:40%;
	padding-left:10px;
}
	header #mv_outer{
	height:auto;
}
header #mv{
	min-height: 78vw;
	}
	#mv figure{
	position:relative;
	top:0;
	right:0;
	z-index: 1;
	overflow: visible;
	/*width:40vw;*/
	width:48vw;
	margin:auto;
}
header #mv_outer .wrap{
	padding-left:0;
	padding-right:0;
	min-height:80vh;
	background-size:80% auto;
	background-position:200%  0% ;
}

header #mv h2{
	font-size:2.6rem;
	line-height: 1.5;
	margin:0 0 15px 0;
	text-align: center;
	width:100%;
	padding-top: 0;
	padding-top: 0;
	letter-spacing: -0.08rem;
}
header #mv p{
	position:relative;
	top:0;
	left:0;
	right:0;
	z-index: 2;
	margin:auto;
	width:90%;
	text-align: center;
	padding-bottom: 50px;
}
	header #mv h3{
	width:100%;
	text-align: center;
	    margin-bottom: 10px;
		font-size:2.0rem;
		margin-top: 10px;
}
	header #nav{
		padding-top:30px;
	}
	header #nav li{
	text-align: center;
	width:49%;
}
	header #ld{
		padding-top:30px;
	}
	header #ld .flex figure{
	width:100%;
	text-align: center;
}
	header #ld .flex div{
		width:100%;
	}
	header #ld h3{
		color:#fff;
	}
	header #ld h4 {
	margin-top:20px;
	text-align: center;
	line-height: 1.5;
	}
	header #ld ol{
		width: 100%;
	}
	header #nav li a span::after{
		background-size: 10px auto;
    	top: calc(50% - 2px);
	}
}
/*----------------------------main--------------------------------*/
.acenter{
	text-align: center!important;
}
.aleft{
	text-align: left!important;
}
#col_choose{
text-align: center;
padding:60px 0;
}
#col_choose h4{
	margin-bottom:10px;
	color:#786b63;
	font-size:3.0rem;
}
#col_choose div.flex{
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin:auto;
}
#col_choose div.flex dl {
	width:30%;
}
#col_choose div.flex dd p{
	text-align: left;
}
@media screen and (max-width: 600px){
	#col_choose h4{
	font-size:2.4rem;
}
	#col_choose div.flex dl {
		margin:5px auto 20px auto;
		width:100%;
	}
	#col_choose div.flex dl dt img{
		width:90%;
		margin:10px 0;
	}
}




#col_ingredients h4{
	padding:20px 0 10px 0;
}

/*#col_ingredients*/
#col_ingredients{
	background:rgba(255,255,255,0.5);
	padding:60px 0;
	overflow: hidden;
	position:relative;
}

#col_ingredients:after{
	content: "";
	background:url("../images/bgs1.gif") no-repeat;
	background-size:100% auto;
	display: block;
	top: -10vh;
	left: 0;
	width: 30vw;
	height: 100vh;
	z-index: -1;
	transform: translateZ(0);
	filter:alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
	position:absolute;
}
#col_ingredients figure{
	width:30%;
	margin:auto;
	padding-bottom:10px;
}
#col_ingredients p{
	text-align: center;
	width:65%;
	display: block;
	margin:auto;
}
/*#col_effect*/
#col_effect{
	padding:60px 0;
	background:rgba(255,255,255,0.5);
}

#col_effect1,
#col_effect2{
	margin-bottom:50px;
	border-bottom: 1px solid #ccc;
	padding-bottom:50px;
}
#col_effect div.flex figure{
	width: 25%;
	height:auto;
}

#col_effect div.flex div{
	width: 70%;
}
#col_effect1 h4{
	padding:20px 0 10px 0;
}
main #col_effect2 h3{
	margin-bottom:0;
}
main #col_effect2 h4{
	margin:25px 0 15px 0;
}
main #col_effect2 h4 span{
padding-bottom: 5px;
}
main #col_effect3 h4{
	margin:25px 0 15px 0;
}
/*#col_effect*/
#col_dry{
	padding:60px 0;
	background:rgba(0,0,0,0.05);
}

#col_dry1,
#col_dry2{
	margin-bottom:50px;
	border-bottom: 1px solid #ccc;
	padding-bottom:50px;
}
#col_dry div.flex figure{
	width: 25%;
	height:auto;
}

#col_dry div.flex div{
	width: 70%;
}
#col_dry1 h4{
	padding:20px 0 10px 0;
}
main #col_dry2 h3{
	margin-bottom:0;
}
main #col_dry2 h4{
	margin:25px 0 15px 0;
}
main #col_dry2 h4 span{
padding-bottom: 5px;
}
main #col_dry3 h4{
	margin:25px 0 15px 0;
}

/*#col_effect*/
#col_kayumi{
	padding:60px 0;
	
}

#col_kayumi1,
#col_kayumi2{
	margin-bottom:50px;
	border-bottom: 1px solid #ccc;
	padding-bottom:50px;
}
#col_kayumi div.flex figure{
	width: 25%;
	height:auto;
}

#col_kayumi div.flex div{
	width: 70%;
}
#col_kayumi1 h4{
	padding:20px 0 10px 0;
}
main #col_kayumi2 h3{
	margin-bottom:0;
}
main #col_kayumi2 h4{
	margin:25px 0 15px 0;
}
main #col_kayumi2 h4 span{
padding-bottom: 5px;
}
main #col_kayumi3 h4{
	margin:25px 0 15px 0;
}
main #col_kayumi2 .flex{
	padding-top:15px;
}
/*#banner_set*/
.banner_set p{
	display: inline-block;
	padding:0 5px;
}
.banner_set img{
	width:366px;
}
@media screen and (max-width: 600px){
#col_ingredients figure{
	width: 80%;
}
#col_ingredients p{
	text-align: left;
	width: 100%;
}
#col_kayumi div.flex figure,	
#col_effect div.flex figure,
#col_dry div.flex figure{
	width: 80%;
	height:auto;
	margin:10px auto;
}
#col_kayumi div.flex div,
#col_effect div.flex div,
#col_dry div.flex div{
	width: 100%;
}
#col_ingredients:after{
	top: -10vh;
	left: -10vw;
	width: 60vw;
	height: 100vh;
}
.banner_set .btn_banner{
	text-align: center;
	font-size:1.6rem;
	margin:5px auto;
}
}
/*---shampoo---*/
#col_shampoo{
	background:rgba(255,255,255,0.5);
	text-align: center;
	padding:60px 0;
}
#col_mono section.feature h4 {
    margin-bottom: 20px;
}
#col_mono section.feature dl{
	width:30%;
}
@media screen and (max-width: 600px){
#col_mono{
	padding:30px 0;
}

}
/*---treatment---*/
#col_treatment{
	background:rgba(244,231,188,0.2);
	text-align: center;
	padding:60px 0;
}



/*---voice---*/
#col_voice{
		padding:60px 0;
	position:relative;
	overflow: hidden;
}
/*#col_voice:after{
	content: "";
	background:url("../images/bgs3.gif") no-repeat;
	background-size:100% auto;
	display: block;
	top: -10vh;
	right: 0;
	width: 30vw;
	height: 100vh;
	z-index: -1;
	transform: translateZ(0);
	filter:alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
	position:absolute;
}*/
#col_voice h4{
	margin-bottom:30px;
}
#col_voice .flex{
	margin-bottom:50px;
}
#col_voice article{
	border:1px solid #ccc;
	padding:2%;
	width:42%;
	box-sizing: content-box;
	background:rgba(255,255,255,0.3);
}
#col_voice article h5{
	font-size:1.5rem;
	font-family: "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	text-decoration: none;
	font-weight: normal;
	border-bottom:1px dotted #333;
	padding-bottom:10px;
	margin-bottom:15px;
}
#col_voice article h5 span{
	color:#aeb491;
	display:block;
}
#col_voice article h5.woman span{
	color:#b3acc7;
}
@media screen and (max-width: 600px){
	#col_voice:after{
	top: -10vh;
	right:-20vw;
	width: 60vw;
	
}
#col_voice h4 {
    margin-bottom:5px;
}
	#col_voice article{
	padding:10px;
	width:90%;
	margin:15px auto;

}
}
/*---flow---*/
#col_flow{
	background:rgba(244,231,188,0.2);
	padding-bottom:60px
}
#col_flow h3{
	color:#fff;
}
#col_flow h3 span{
	color:#ccc;
}
#col_flow_title{
	padding-top:60px;
	background:url("../images/flow_bg.jpg") no-repeat;
	background-size:cover;
	padding-bottom:60px;
	color:#fff;
	text-align: center;
}

#col_flow .flex figure{
	width:30%;
}
#col_flow .flex p{
	width:65%;
}
#col_flow h4{
	margin-top:50px;
	margin-bottom:20px;
}
@media screen and (max-width: 600px){
	#col_flow_title p{
		text-align: left;
	}
	#col_flow .flex figure{
	width:80%;
	text-align: center;
	margin:0 auto 15px auto;
}

#col_flow .flex p{
	width:100%;
}
}

/*---lineup---*/

#col_lineup{
	background: url("../images/bg2.gif");
	color:#fff;
	padding:60px 0;
}
#col_lineup h3{
	color:#fff;
}
#col_lineup h3 span{
	color:#acacac;
	margin-bottom:8px;
}
#col_lineup .flex figure{
	width:33%;
}
#col_lineup .flex>div{
	width:62%;
}
#col_lineup .flex figure img{
	margin:0 auto;
	display: block;
}
#col_lineup h4{
	margin-bottom:30px;
	text-align: left;
}
#col_lineup h4 span{
	color:#eee;
}
#col_lineup .price{
	margin-bottom:25px;
}
#col_lineup article{
	margin:30px auto 15px auto;
}
.btn {
	width:auto;
	padding-bottom:30px;
	margin-bottom:60px;
	border-bottom:#57453f 1px solid;
}
#col_lineup .btn:last-child {
	margin-bottom:0px;
	border-bottom:none;
}
.btn a{
	background:#f4c840;
	border-radius: 30px;
	padding:10px;
	width:auto;
	max-width:300px;
	display:block;
	position:relative;
	text-align: center;
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-color:#000;
	font-size:1.5rem;
	margin:auto;
	margin-top:25px;
}
#col_lineup .btn a{
	margin-left:auto;
	margin-right:auto;
}
.btn a:before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -4px;
  transform: rotate(45deg);
}
.btn a:link, #col_lineup .btn a:visited{
	text-decoration: none;
	color: #000;
}

.btn a:hover{
	color: #000;
	background:#f4b240;
}

#col_lineup article{
	margin:15px auto;
}
#col_lineup article:last-child {
    margin-bottom:0;
}
.scroll-pane2 {
    margin: 20px 0;
    padding: 15px;
    background: 
    rgba(0,0,0,0.2);

}
 .scroll-pane{
    overflow-y: scroll;
    height: 180px;
	 font-size:1.4rem;
	 line-height: 1.5;
	-webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 600px){
	#col_lineup h3 {
    margin-bottom: 15px;
}
	#col_lineup .flex figure{
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
}
	#col_lineup .flex figure img {
    max-width:70%;
}
#col_lineup .flex>div{
	width:100%;
}
	#col_lineup h4{
	margin-bottom:15px;
	text-align: center;
}
	#col_lineup .price{
	margin-bottom:10px;
}
	#col_lineup .btn a{
	margin-left:auto;
		margin-right:auto;
	margin-top:25px;
		margin-bottom:25px;
}

}
/*---faq---*/
#col_faq{
		padding:60px 0;
		background:rgba(255,255,255,0.5);
}
#col_faq dl{
	padding-top:30px;
	border-bottom:1px dotted #ccc;
	padding-bottom:30px;
}
#col_faq dl dt h5{
	text-decoration: none;
	position:relative;
	display: block;
	padding-left:25px;
	color:#786b63;
}
#col_faq dl dt h5:before{
	content:"Q.";
	display:block;
	width:18px;
	height:18px;
	left:0;
	top:0;
	position:absolute;
}
#col_faq dl dd p{
	text-decoration: none;
	position:relative;
	display: block;
	padding-left:25px;
}
#col_faq dl dd p:before{
	content:"A.";
	display:block;
	width:18px;
	height:18px;
	left:0;
	top:0;
	position:absolute;
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	color:#a23b3b;
	font-size: 2.0rem;

}
@media screen and (max-width: 600px){
	#col_faq{
		padding:30px 0;
}
#col_faq dl{
	padding-top:15px;
	
}
}
/*---btn_banner---*/
.btn_banner{
	text-align: center;
	
	font-size:1.6rem;
	margin:30px auto;
}
.btn_banner img{
	display:block;
	margin:auto;
}
/*---inquiry---*/
#col_inquiry{
	padding:60px 0 30px 0;
	position:relative;
	overflow: hidden;
}
/*#col_inquiry:after{
	content: "";
	background:url("../images/bgs1.gif") no-repeat;
	background-size:100% auto;
	display: block;
	top: -10vh;
	right: 0;
	width: 30vw;
	height: 100vh;
	z-index: -1;
	transform: translateZ(0);
	filter:alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
	position:absolute;
}*/
#col_inquiry .flex figure{
	width:45%;
}
#col_inquiry .flex>div{
	width:50%;
}
#col_inquiry h4{
	text-decoration: underline;
	margin:40px auto;
}

#col_inquiry dl.caution{
	text-align: left;
	vertical-align: middle;
	display:table;
	border-left: 1px solid #a3a3a3;
	width:100%;
}
#col_inquiry dl.caution dt,
#col_inquiry dl.caution dd{
	display:table-cell;
	padding:5px 0;
}

#col_inquiry dl.caution dt{
	width:20%;
	padding-left:15px;
	font-weight: bold;
}
#col_inquiry dl.caution dd{
	width:auto;
}

#col_inquiry p.tel a{
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size:4.0rem;
	color:#786b63;
}
#col_inquiry .info dt{
	color:#786b63;
}

#col_inquiry .btn2 a{
	background:#786b63;
	border-radius: 30px;
	padding:10px;
	width:auto;
	max-width:300px;
	display:block;
	position:relative;
	text-align: center;
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-color:#000;
	font-size:1.5rem;
	margin:5px 0;
}
#col_inquiry .btn2 a:before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -4px;
  transform: rotate(45deg);
}
#col_inquiry .btn2 a:link, #col_inquiry .btn2 a:visited{
	text-decoration: none;
	color: #fff;
}

#col_inquiry .btn2 a:hover{
	color: #fff;
	background:#403324;
}


#col_inquiry .shop a:link,
#col_inquiry .shop a:visited{
	position:relative;
	display: block;
	padding-left:15px;
	color:#333;
}
#col_inquiry .shop a:hover{
	color:#666;
}
#col_inquiry .shop a:before{
  content: '';
  width: 5px;
  height: 5px;
  border: 0;
  border-top: solid 1px #786b63;
  border-right: solid 1px #786b63;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -2px;
  transform: rotate(45deg);
}
.shop_banner{
	text-align: center;
	padding:30px 0;
	max-width:360px;
	margin:auto;
}
@media screen and (max-width: 600px){
	#col_inquiry:after{
	top: -10vh;
	right: -20vw;
	width: 60vw;
}
	#col_inquiry .flex figure{
	width:100%;
}
#col_inquiry .flex>div{
	width:100%;
}
	#col_inquiry p.tel{
		text-align: center;
	}
	#col_inquiry .btn2 a{
	margin:5px auto;

}
	#col_inquiry dl.caution{
	display:block;
	border-left:none;
}
#col_inquiry dl.caution dt,
#col_inquiry dl.caution dd{
	display:block;
	padding:2px 0;
}

#col_inquiry dl.caution dt{
	width:100%;
	padding-left:0px;
	font-weight: bold;
	box-sizing: content-box;
}
#col_inquiry dl.caution dd{
	width:auto;
	width:100%;
}
	.shop_banner{
	padding:30px 0 0 0;
	
}
}
/*----------------------------footer--------------------------------*/

footer{
	background: url("../images/bg2.gif");
	color:#fff;
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
footer{
	padding: 30px 0;
}
footer .txt{
	font-size:1.3rem;
}

footer .tel{
	font-size:4.0rem;
}
footer .tel a:link, footer .tel a:visited{
	text-decoration: none;
	color: #fff;
}

footer .tel a:hover{
	opacity: 0.5;
  filter: alpha(opacity=50);
}

footer .form{
	font-size:2.0rem;
}
footer .form a:link, footer .form a:visited{
	text-decoration: none;
	color: #fff;;
}

footer .form a:hover{
	opacity: 0.5;
  filter: alpha(opacity=50);
}
footer .flex .flex{
	align-items: center;
}
#page-top {
	position: fixed;
	z-index: 9999;
	bottom: 20px;
	right: 15px;
	font-size: 30px;
}
#copyright{
	text-align: right;
	font-size:1.2rem;
}
#page-top a {
	width: 30px;
	height: 30px;
	background: #403324;
	text-decoration: none;
	padding: 10px;
	text-align: center;
	display: block;
	border-radius: 50%;
	-moz-box-shadow: 0 0 5px #e4e3df;
	-webkit-box-shadow: 0 0 5px #e4e3df;
	-moz-opacity: 0.8;
	opacity: 0.8;
	position:relative;
}
#page-top a::after{
	content:"";
	display: block;
	width:10px;
	height: 10px;
	position: absolute;
	top: calc(50% - 5px);
	left: calc(50% - 7px);
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	z-index: 10;
	transform: rotate(45deg);
}
#copyright{
	text-align: center;
	margin-top: 10px;
}
@media screen and (max-width: 600px){
	footer{text-align: center;}
	footer .form{
		font-size:1.6rem;
		text-align:center;
}
	#footerbanner{
		text-align: center;
		padding:5px 0;
	}
	#copyright{
		text-align: center;
	
	}
	footer .txt{
		display: none;
	}
}

/*----------------------------ft--------------------------------*/

footer .ft{
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
	flex-direction: column;
}
footer .ft .flex{
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}
footer .ft .contact{
	margin-left: 50px;
}
footer .ft .form{
	margin-top: 10px;
}
footer .ft br.sp{
	display: none;
}
@media screen and (max-width: 920px){
	footer .ft br.sp{
		display: block;
	}	
}
@media screen and (max-width: 600px){
	footer .ft .contact{
		margin-left: 0;
	}
}

/*----------------------------link etc--------------------------------*/

a,
input,
button{
	outline: 0;
}
input::-moz-focus-inner,
button::-moz-focus-inner{
	border: 0;
}

a:link, a:visited{
	text-decoration: none;
	color: #666;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

a:hover{
	color: #999;
}

a:hover img{
	opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
 -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

/*footer固定*/
footer {
	display: none;
	z-index: 2;
	bottom: 0;
	position: sticky;
	position: -webkit-sticky;
}

.con_improvement{
	background: url("../images/bg2.gif");
	color: #fff;
}
section.improvement h3 {
	margin-bottom: 0;
	color: #fff;
	opacity: 0.5;
}
section.improvement .flex {
    padding-top: 15px;
}
section.improvement h5 {
    font-size: 2.0rem;
    font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
    text-decoration: underline;
    margin: 10px 0;
}
@media screen and (max-width: 600px){
	section.improvement h5 {
		 font-size: 1.8rem;
	}
	section.improvement {
		 padding-bottom: 20px;
	}
}

.con_bnr .btn_banner {
    margin-top: 0;
}
.con_bnr .btn_banner a{
    color: #fff;
}
.con_bnr .btn_banner a:hover{
    color: #666;
}




/*doromintより追記*/
/*--------------------clay--------------------*/

#clay{
	background: rgba(146,120,97,0.1);
	padding: 60px 0 0;
	overflow: hidden;
	position: relative;
	
}

#clay .wrapper{
	text-align: center;
}

#clay h2{
	margin: 90px auto 35px;
}
#clay h4{
	padding: 0 0 0.2em;
	border-bottom: 1px dotted #786b63;
	margin-bottom: 35px;
}

#clay .inner01{
	overflow: hidden;
	box-sizing: border-box;
	margin-bottom: 65px;
}

#clay .inner01 dl{
	width: 33.3%;
	padding: 0 20px;
	float: left;
	box-sizing: border-box;
}

#clay .inner01 dl dd:first-of-type{
	font-size: 25px;
	font-weight: bold;
	font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	margin: 15px 0; 
}

#clay .inner01 dl dd:nth-of-type(2){
	text-align: left;	
}
@media screen and (max-width: 1200px){
	#clay .inner01 dl dd:first-of-type{
		font-size: 20px;
	}
}

@media screen and (max-width: 900px){
	
	#clay .inner01 dl{
		width: auto;
		padding: 0;
		float: none;
		margin-bottom: 30px;
	}
	#clay .inner01 {
		margin-bottom: 40px;
	}
}


/*--------------------element--------------------*/
/*#element{
	background: url(../../img/doromint/index/bg02.png) 50% 0 no-repeat;
	background-size: cover;
	padding: 200px 0 300px;
}*/
#element{
	background: rgba(146,120,97,0.1);
	padding: 0px 0 60px;
	overflow: hidden;	
}
#element p{
	text-align: left;
}

#element .wrapper:first-child{
	max-width: 1100px;
	overflow: hidden;
}

#element .inner01,#element .inner02{
	width: 50%;
	box-sizing: border-box;
	padding: 0 35px;
	overflow: hidden;
}

#element .inner01{
	float: left;
	text-align: center;
}

#element .inner01 img,#element .inner02 img{
	margin-bottom: 35px;
}

#element .inner02{
	float: right;
	text-align: center;
}
#element .inner02 h2{
    display: block;
    text-align: center;
    border-bottom: none;
}
#element .inner02 h2 span{
    border-bottom: 1px dotted #8eabaf;
    display: inline-block;
    padding-left: 1em;
    padding-right: 1em;
}
#element .inner02 figure{
    text-align: center;
}
#element figure{
    text-align: center !important;
}

#element h4{
	padding: 0 0 0.2em;
	border-bottom: 1px dotted #786b63;
	margin-bottom: 35px;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
}

@media screen and (max-width: 900px){
	
	#element .wrapper{
		text-align: center;
	}
	
	#element .wrapper:first-child{
		overflow: hidden;
	}

	#element .inner01,#element .inner02{
		width: auto;
		padding: 0;
	}

	#element .inner01{
		float: none;
		margin-bottom: 40px;
	}
	#element .inner02{
		float: none
	}
    #element .inner02 h2 span{
        border-bottom: none;
    }
    #element .inner02 h2{
    border-bottom: 1px dotted #8eabaf;
    padding-left: 1em;
    padding-right: 1em;
    }
}


/*LINEUP*/
#col_lineup section.lineup02{
	border-top: 1px solid #ccc;
	padding-top: 50px;
	margin: 50px auto 0 auto;
}
@media screen and (max-width: 600px){
	#col_lineup{
		padding-bottom: 0;
	}
	#col_lineup section.lineup02 {
			margin-top: 0;
	}
}


/*--------------------DOROMINTfeature--------------------*/
#feature{
	background: rgba(255,255,255,0.5);
	/*border-top: 1px solid #ccc;*/
	/*padding-top: 50px;*/
	padding-bottom: 50px;
}
#feature #col_cool{
	border-top: 1px solid #ccc;
	padding-top: 50px;
	
}
#feature h4 {
    margin-bottom: 20px;
}
#feature .wrapper{
	padding: 0 0px;
}

#feature h2{
	display: block;
	padding-left: 0;
	padding-right: 0;
	text-align:center;
}


#feature .inner01,#feature .inner02{
	overflow: hidden;
}

#feature .inner01_L{
	float: left;
	width: 32%;
}

#feature .inner01_R{
	float: right;
	width: 66%;
	margin-top: 80px;
}

#feature .inner02_R{
	float: right;
	width: 48%;
}

#feature .inner02_L{
	float: left;
	width: 50%;
	margin-top: 100px;
}
#feature .inner01 h4{
	padding: 0 0 0.2em;
    padding-right: 0px;
    padding-left: 0px;
	border-bottom: 1px dotted #786b63;
	margin-bottom: 35px;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
}

#feature .inner02 h4{
	padding: 0 0 0.2em;
    padding-right: 0px;
    padding-left: 0px;
	border-bottom: 1px dotted #786b63;
	margin-bottom: 35px;
	padding-left: 10px;
	padding-right: 10px;
	display: inline-block;
}

@media screen and (min-width: 1921px){
	#feature{
	margin-top: 50px;
}

}


@media screen and (max-width: 1200px){
	#feature .inner02{
		margin-top: 0;
	}
}

@media screen and (max-width: 900px){
	#feature{
	margin-top: 0px;
}

	#feature .inner01_L,#feature .inner02_R{
		float: none;
		width: auto;
		text-align: center;
		margin-top: 20px;
	}

	#feature .inner01_R{
		float: none;
		width: auto;
		margin-top: 0;
	}

	#feature .inner02_L{
		float: none;
		width: auto;
		margin-top: 50px;
	}
}

@media screen and (max-width: 550px){
	#feature h2 i{
		display: block;
	}
}
