@charset "utf-8";
/* CSS Document */
html,body{height:100%;}
body {font-family:Verdana, sans-serif;line-height:150%;}
img,input[type="image"]{max-width:100%;height:auto;}
div#all{
	min-height:100%;
	height:auto !important;
	height:100%;
	width:100%;
	max-width:640px;
	margin:0 auto;
	padding:0 0 0 0;
	color:#555;
	line-height:normal;
	line-height:1.5;
}

/*=========================
	privacy
==========================*/
.privacy_policy{
	width:90%;margin:20px auto;
}
.privacy_policy_head{
	margin:5px 0;color:#000;font-size:12px;font-weight:normal;
}
.privacy_policy_body{
	height:130px;padding:10px;color:#000;font-size:11px;line-height:1.8;border:2px solid #ccc;border-radius:5px;overflow-y:auto;
}
.privacy_policy_body p{margin-bottom:20px;}
.privacy_policy_body ul{margin:20px 0;}
.privacy_policy_contact{
	width:80%;margin:0 auto;padding:10px;text-align:center;border:1px solid #ccc;
}
.privacy_policy small{
	display:block;margin:10px 0;padding:0 10px;color:#6f6f6f;font-size:10px;line-height:1.5;
}



/*=========================
	style start
==========================*/
#header{}
#header .headLogo > img{display:block;}
#header .head{border-top:1px solid #c0a05e;}

.cvArea{
	border-top:2px solid #c0a05e;
	border-bottom:2px solid #c0a05e;
	box-shadow:0 2px 5px 0 rgba(0,0,0,0.2);
	color:#937638;
	font-size:90%;
	text-align:center;
}
.cvHead{
	position:relative;
	box-shadow:0 1px 3px 0 rgba(0,0,0,0.2);
}
.cvCont{
	padding:3% 0;
	background:url(../images/cvBg.jpg) center top no-repeat;
	background-size:cover;
}
.cvBtn{
	width:84%;
	margin:0 auto;
}
.cvNote{
	width:90%;
	margin:3% auto 0;
	font-size:10px;
}

/*
------------------------------ */
#introArea{margin:10% 0 0;}
.introCont{
	padding:2% 12% 0 8%;
	font-size:90%;
	line-height:1.8;
	background:url(../images/introBg.jpg) right top no-repeat;
	background-size:30% auto;
}

/*
------------------------------ */
#aboutArea{
	margin:8% 0 0;
	padding:10% 0;
	background:url(../images/aboutBg.gif);
	box-shadow:0 -2px 5px 0 rgba(0,0,0,0.2);
}
.aboutHeadTxt{
	margin:3% 0 0;
	font-size:90%;
	text-align:center;
}
.aboutInner{
	width:92%;
	margin:8% auto 0;
}
.aboutBox{
	padding:2% 4% 3%;
	font-size:95%;
	background-color:rgba(255,255,255,0.65);
	background-position:right top;
	background-repeat:no-repeat;
	background-size:auto 100%;
	border:1px solid #c5c7cd;
}
.aboutBox.box01{background-image:url(../images/about01Bg.png);}
.aboutBox.box02{background-image:url(../images/about02Bg.png);}

/*
------------------------------ */
#courseArea{
	width:94%;
	margin:8% auto 0;
}
.courseHeadTxt{
	margin:3% 0 0;
	font-size:95%;
	text-align:center;
}
.courseHeadList{
	margin:5% 0 0;
}
.courseHeadList > li{
	width:32%;
	float:left;
	margin:0 2% 0 0;
}
.courseHeadList > li:last-child{margin-right:0;}
.courseHeadList > li > a{
	display:block;
	padding:3% 0;
	border:2px solid #5371a6;
	border-radius:5px;
	text-align:center;
	box-shadow:1px 1px 3px 0 rgba(0,0,0,0.2);
}
.courseHeadList > li:nth-child(1) > a{
	border-color:#5371a6;
	background:#f0f4ff;
}
.courseHeadList > li:nth-child(2) > a{
	border-color:#45abb4;
	background:#f5fffe;
}
.courseHeadList > li:nth-child(3) > a{
	border-color:#65bddd;
	background:#f4fcff;
}
.courseBox{
	margin:5% 0 0;
	border:2px solid #5371a6;
	border-top:0;
}
.courseBox#course01{border-color:#5371a6;}
.courseBox#course02{border-color:#61c0c6;}
.courseBox#course03{border-color:#65bddd;}
.courseBoxHead{
	padding:1% 3%;
	color:#fff;
	font-weight:normal;
}
.courseBox#course01 .courseBoxHead{background:#5371a6;}
.courseBox#course02 .courseBoxHead{background:#61c0c6;}
.courseBox#course03 .courseBoxHead{background:#65bddd;}

.courseBoxBody{
	padding:3%;
	position:relative;
}
.courseBoxBody:after{
	content:"";
	display:block;
	width:34%;
	height:0;
	padding-bottom:37%;
	position:absolute;
	top:0;
	right:0;
	margin:-5% 3% 0 0;
}
.courseBox#course01 .courseBoxBody:after{
	background:url(../images/course01Img.png) no-repeat;
	background-size:100% auto;
}
.courseBox#course02 .courseBoxBody:after{
	background:url(../images/course02Img.png) no-repeat;
	background-size:100% auto;
}
.courseBox#course03 .courseBoxBody:after{
	background:url(../images/course03Img.png) no-repeat;
	background-size:100% auto;
}
.courseBoxBodyInner{
	width:60%;
	padding:0 0 3%;
	font-size:90%;
	border-bottom:1px dotted #5371a6;
}
.courseBox#course01 .courseBoxBodyInner{border-color:#5371a6;}
.courseBox#course02 .courseBoxBodyInner{border-color:#61c0c6;}
.courseBox#course03 .courseBoxBodyInner{border-color:#65bddd;}
.courseBoxBtn{
	margin:3% 0 0;
}
.courseBoxBtn > a{
	display:block;
	padding:5% 0;
	font-size:120%;
	text-align:center;
	line-height:1;
	border:1px solid #5371a6;
	border-radius:5px;
	text-decoration:none;
}
.courseBox#course01 .courseBoxBtn > a{color:#325490;border-color:#5371a6;background:#f0f4ff;}
.courseBox#course02 .courseBoxBtn > a{color:#51b1b7;border-color:#6ebcc1;background:#f5fffe;}
.courseBox#course03 .courseBoxBtn > a{color:#1f8fd7;border-color:#71c2e0;background:#f4fcff;}
.courseBoxBtn > a:after{
	content:"";
	display:inline-block;
	width:1.2em;
	height:1.2em;
	margin:-0.3em 0 0 3%;
	vertical-align:middle;
}
.courseBox#course01 .courseBoxBtn > a:after{
	background:url(../images/course01Arw.png) no-repeat;
	background-size:100% auto;
}
.courseBox#course02 .courseBoxBtn > a:after{
	background:url(../images/course02Arw.png) no-repeat;
	background-size:100% auto;
}
.courseBox#course03 .courseBoxBtn > a:after{
	background:url(../images/course03Arw.png) no-repeat;
	background-size:100% auto;
}
.courseNote{
	margin:3% auto 0;
	font-size:10px;
}

/*
------------------------------ */
#qaArea{
	width:94%;
	margin:10% auto 0;
}
.qaBox{
	padding:5% 3%;
	border-bottom:1px solid #bbaeb1;
}
.qaBox > dt{
	width:100%;
	height:auto;
}
.qaBox > dd{
	margin:3% 0 0;
	text-indent:-2em;
	margin-left:2em;
	line-height:2;
}
.qaBox > dd:before{
	content:"";
	display:inline-block;
	width:1.5em;
	height:1.5em;
	margin:0 0.5em 0 0;
	background:url(../images/aIcon.png) no-repeat;
	background-size:100% auto;
}
.qaBtmTxt{
	margin:4% 0 0;
	text-align:center;
	font-size:90%;
}





.lessonBlock{
	width:84%;
	margin:0 auto;
}
.lessonTxt{padding:5% 8%;font-weight:bold;}
.lessonInfo{
	box-sizing:border-box;
	width:92%;
	margin:0 auto;
	padding:0 5% 5%;
	border:2px solid #d4cdb4;
	position:relative;
}
.lessonInfo:before{
	content:"";
	display:block;
	width:6%;
	height:0;
	margin:-10px 0 0 -3%;
	padding-bottom:8%;
	background:url(../images/lesson_pin.png) center top no-repeat;
	background-size:100% auto;
	position:absolute;
	top:0;
	left:50%;
}
.lessonInfo.fst{background:#fff5f2;}
.lessonInfo.sec{background:#fffcf2;}
.lessonInfo.fst{padding-bottom:10%;}
.lessonInfo.fst:after{
	content:"";
	display:block;
	width:102%;
	height:0;
	padding-bottom:60%;
	background:url(../images/lesson01_img.png) center top no-repeat;
	background-size:100% auto;
	position:absolute;
	bottom:auto;
	left:0;
}
.lessonInfo dl > dt{font-weight:bold;margin:6% 0 0;}
.lessonInfo dl > dt:before{
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	margin:0 0.5em 0 0;
	border-radius:0.5em;
}
.lessonInfo.fst dl > dt:before{background:#ffceda;}
.lessonInfo.sec dl > dt:before{background:#f6e9c5;}
.lessonInfo dl > dd{
	padding:0 0 0 1.5em;
	font-size:92%;
}

/*
------------------------------ */
#detailArea{
	width:92%;
	height:auto;
	margin:5% auto 0;
}
.detailTbl{
	width:100%;
	height:auto;
	border-collapse:collapse;
	border:2px solid #c0ac81;
	line-height:1.5;
}
.detailTbl th{
	width:21%;
	padding:2%;
	color:#fff;
	text-align:center;
	font-weight:normal;
	background:#c0ac81;
	white-space:nowrap;
}
.detailTbl th.btmBd{border-bottom:2px solid #fff;}
.detailTbl td{
	padding:2% 3%;
	font-size:80%;
	border:2px solid #c0ac81;
}
.detailTbl ul li,
.detailTbl ol li{
	text-indent:-1em;
	margin:0 0 0 1em;
}
.detailTbl a{color:#444;}

/*
------------------------------ */
#flowArea{
	width:92%;
	margin:10% auto 0;
}
#flowHead{position:relative;}
#flowHead > img{display:block;}
#flowHead > span{
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	top:50%;
	right:4%;
	margin:-10px 0 0;
	background:url(../images/flowArw.png) no-repeat;
	background-size:100% auto;
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
}
#flowHead.act > span{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	transform:rotate(0deg);
}
.flowList{
	padding:0 2%;
	display:none;
}
.flowBox{
	display:table;
	width:100%;
	margin:5% 0 0;
	table-layout:fixed;
}
.flowBox > dt,
.flowBox > dd{
	display:table-cell;
	text-align:left;
	vertical-align:top;
}
.flowBox > dt{
	width:30%;
	padding-bottom:5%;
	position:relative;
}
.flowBox > dt:after{
	content:"";
	display:block;
	width:0;
	height:0;
	border:0.6em solid transparent;
	border-top:0.8em solid #555;
	border-bottom:0;
	position:absolute;
	bottom:-5%;
	left:50%;
	margin:0 0 0 -0.6em;
}
.flowList > li:last-child > .flowBox > dt:after{display:none;}
.flowBox > dd{
	padding-left:3%;
	font-size:85%;
}

/*
------------------------------ */
#shopArea{
	width:92%;
	height:auto;
	margin:5% auto 0;
}
.shopHead{border-bottom:1px solid #694a33;}
.shopBox{margin:7% 0;}
.shopTtl{
	display:table;
	width:100%;
	table-layout:fixed;
}
.shopImg{
	display:table-cell;
	width:33%;
}
.shopName{
	display:table-cell;
	padding:0 0 0 2%;
	color:#83682f;
	font-weight:bold;
	line-height:1.5;
}
.shopTxt{
	margin:4% 0 0;
	color:#694a33;
	font-size:75%;
	line-height:1.5;
}
.shopTxt p{
	margin-left:4.5em;
	text-indent:-4.5em;
}
.shopBoxBtm{margin:1% 0 0;}
.shopBoxBtm > li{
	width:50%;
	float:left;
}
.shopBoxBtm > li:nth-child(1){
	width:48%;
	padding:0 2% 0 0;
}
.shopBtmTxt{text-align:center;}
.shopBtmTxt a{color:#83682f;}

/*
------------------------------ */
#processList{
	width:84%;
	margin:0 auto;
}
#processList > li{
	margin:8% 0 0;
	border:3px solid #325490;
	border-radius:5px;
	position:relative;
}
#processList > li > img{display:block;}
#processList > li:after{
	content:"";
	display:block;
	width:0;
	height:0;
	border:0.8em solid transparent;
	border-top:1em solid #325490;
	border-bottom:0;
	position:absolute;
	bottom:0;
	left:50%;
	margin:0 0 -1.8em -0.8em;
}
#processList > li:last-child:after{display:none;}
#processList > li > span{
	display:block;
	width:20px;
	height:2px;
	position:absolute;
	top:50%;
	right:3%;
	margin:-1px 0 0;
	background:#325490;
}
#processList > li > span:before,
#processList > li > span:after{
	content:"";
	display:block;
	width:100%;
	height:2px;
	background:#325490;
	position:absolute;
	left:0;
}
#processList > li > span:before{top:-7px;}
#processList > li > span:after{bottom:-7px;}

#processList.aging > li{border-color:#325490;}
#processList.aging > li:after{border-top:1em solid #325490;}
#processList.aging > li > span,
#processList.aging > li > span:before,
#processList.aging > li > span:after{background:#325490;}

#processList.blanc > li{border-color:#4fb7bd;}
#processList.blanc > li:after{border-top:1em solid #4fb7bd;}
#processList.blanc > li > span,
#processList.blanc > li > span:before,
#processList.blanc > li > span:after{background:#4fb7bd;}

#processList.moisture > li{border-color:#2b86bf;}
#processList.moisture > li:after{border-top:1em solid #2b86bf;}
#processList.moisture > li > span,
#processList.moisture > li > span:before,
#processList.moisture > li > span:after{background:#2b86bf;}


#processCont{
	width:70%;
	height:100%;
	padding:0 30px 0 0;
	position:fixed;
	top:0;
	left:-80%;
	z-index:100;
	-webkit-transition:transform 250ms ease;
	transition:transform 250ms ease;
}
#processCont.opn{
	-webkit-animation:processCont_opn 0.5s ease;
	animation:processCont_opn 0.5s ease;
	opacity:1;
	display:block;
	left:0%;
}
@keyframes processCont_opn{
	0%{
		opacity:0;
		display:block;
		left:-70%;
	}
	100%{
		opacity:1;
		left:0%;
	}
}
@-webkit-keyframes processCont_opn{
	0%{
		opacity:0;
		display:block;
		left:-70%;
	}
	100%{
		opacity:1;
		left:0%;
	}
}
.processContInner{
	width:100%;
	height:100%;
	padding:5%;
	overflow-y:scroll;
	background:#fff;
	box-sizing:border-box;
}

#processClose{
	width:20px;
	height:20px;
	position:absolute;
	top:10px;
	right:0;
	background:url(../images/prosessClose.png) no-repeat;
	background-size:100% auto;
}
#processBox > li{display:none;}
#processBox dl > dd{margin-top:5%;}

.processNote{
	width:84%;
	margin:5% auto 0;
	font-size:10px;
}
.processNav{
	width:92%;
	margin:8% auto;
}
.processNav > li{margin:3% 0 0;}
.processNav > li > a{
	display:block;
	padding:1em;
	color:#73655a;
	font-size:125%;
	text-decoration:none;
	line-height:1;
	border:2px solid #73655a;
	border-radius:5px;
}
.processNav > li > a:before{
	content:"";
	display:inline-block;
	width:0;
	height:0;
	border:0.4em solid transparent;
	border-left:0.6em solid #73655a;
}
.processNav > li.aging > a{border-color:#325490;color:#325490;}
.processNav > li.aging > a:before{border-left:0.6em solid #325490;}
.processNav > li.blanc > a{border-color:#3da5ac;color:#66babf;}
.processNav > li.blanc > a:before{border-left:0.6em solid #3da5ac;}
.processNav > li.moisture > a{border-color:#2590d3;color:#2590d3;}
.processNav > li.moisture > a:before{border-left:0.6em solid #2590d3;}
.processNav > li.top > a{border-color:#73655a;color:#73655a;}
.processNav > li.top > a:before{border-left:0.6em solid #73655a;}


#overlay{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:rgba(0,0,0,0.3);
	opacity:0;
	display:none;
}
#overlay.opn{
	-webkit-animation:ol_opn 0.5s ease;
	animation:ol_opn 0.5s ease;
	opacity:1;
	display:block;
}
@keyframes ol_opn{
	0%{opacity:0;display:block;}
	100%{opacity:1;}
}
@-webkit-keyframes ol_opn{
	0%{opacity:0;display:block;}
	100%{opacity:1;}
}

/*
------------------------------ */
#footer{
	width:100%;
	height:auto;
	margin:15% 0 0 0;
}
.footerBtn{
	width:92%;
	margin:0 auto;
}
.footerBtn > li.hf{
	width:50%;
	padding-left:50%;
}
.footerBtn > li:last-child {margin:3% 0 0 0;}
.footerBtn > li > a{
	display:block;
	padding:1em;
	color:#73655a;
	font-size:125%;
	text-decoration:none;
	line-height:1;
	border:2px solid #73655a;
	border-radius:5px;
}
.footerBtn > li > a:before{
	content:"";
	display:inline-block;
	width:0;
	height:0;
	border:0.4em solid transparent;
	border-left:0.6em solid #73655a;
}
.companyBtn{
	width:88%;
	margin:5% auto;
}
.companyBtn > li{
	margin:0 0 3%;
}
.companyBtn a{
	color:#73655a;
	text-decoration:none;
	line-height:1;
}
.companyBtn a:before{
	content:"";
	display:inline-block;
	width:0.8em;
	height:0.8em;
	margin:0 0.5em -0.1em;
	border:1px solid #73655a;
}

/*
------------------------------ */
.fnt95{font-size:95%!important;}

.supFnt{font-size:10px;vertical-align:super;line-height:1;}
.lpnkFnt{color:#ffceda!important;}
.dpnkFnt{color:#f7736d!important;}
.lyelFnt{color:#f6e9c5!important;}
.dorgFnt{color:#c76f20!important;}
.bldFnt{font-weight:bold!important;}