@charset "utf-8";
.kv { padding-top: 150px;}
.kv h2{ color: #158bd6; font-size: 28px;}
.kv h2 span { display: block;}
.kv h2 span.name { color: #1ba66f; font-size: 22px; font-weight: normal;}
.kv h2 em { display: inline-block; margin: 0 -15px; font-size: 52px; font-weight: 700;}



.about { background: #158bd6 url(../img/bg-cross-bl.gif); padding: 80px 0;}
.about .inner { width: 92%; max-width: 920px; margin: auto;}
.about h2{ margin-bottom: 30px; color: #158bd6; font-size: 22px; font-weight: normal; text-align: center;}
.about h2 span{ background: #fff; padding: 10px 30px;
 -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
.about h2 br{ display: none;}
.about p{ width: 98%; margin: auto;}
.about p.read{ margin-bottom: 10px; color: #fff; font-size: 22px;}
.about p.txt { margin-bottom: 30px; color: #fff; font-size: 14px;}
.about ul{ font-size: 0; text-align: center;}
.about ul li{ display: inline-block; width: 48%; max-width: 440px; margin: 0 5px 20px; vertical-align: top;
	background: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;
}
.about ul li dl dt{ padding: 20px 0; background: #e4f4ff; color: #158bd6; font-size: 16px;}
.about ul li dl dd{ box-sizing: border-box; height: 120px; font-size: 14px;}
.about ul li:nth-child(1) dl dd { padding: 25px 10px 0}
.about ul li:nth-child(2) dl dd,
.about ul li:nth-child(3) dl dd { padding: 35px 10px 0}
.about ul li:last-child dl dd { padding: 10px 20px; font-size: 12px; text-align: justify;}


.example { background: #e4f4ff; padding: 80px 0;}
.example .inner{ width: 92%; max-width: 900px; margin: auto;}
.example h2{ margin-bottom: 30px; color: #158bd6; font-size: 22px; text-align: center;}
.example h2 span { padding-bottom: 5px; border-bottom: dashed 2px #158bd6;}
.example h2:before { content:''; display: inline-block; width: 34px; height: 34px; margin-right: 10px; vertical-align: middle;
	background: url(../img/icn-ttl.png) no-repeat 50% 50%; background-size: 100% auto;
}
.example ul { position: relative; padding: 0 15px; font-size: 0; text-align: center;}
.example ul li { display: inline-block; width: 19%; margin: 0 8px; padding-bottom: 5px; border-radius: 10px;}
.example ul li dl { margin: 0 5px; background: #158bd6; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
 box-shadow: 0 4px 0 #2171a4; overflow: hidden; text-align: center;
}
.example ul li dl dt img { width: 100%;}
.example ul li dl dd { padding: 8px 0; color: #fff; font-size: 12px;}
.example ul li dl dd span { display: block; font-size: 22px;}
.example .slick-arrow{ position: absolute; top: 40%; width: 30px; height: 30px; background: none; border: none;
 transform: rotate(45deg);
}
.example .slick-prev{ left: 0; border-bottom: solid 2px #158bd6; border-left: solid 2px #158bd6;}
.example .slick-next{right: 0; border-top: solid 2px #158bd6; border-right: solid 2px #158bd6;}

.shop-detail { padding: 80px 0; background: url(../img/bg-cross-wh.gif)}
.shop-detail .inner{ width: 92%; max-width: 900px; margin: auto;}
.shop-detail .fig{ width: 100%; margin: 0 auto 30px; overflow: hidden;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
.shop-detail .fig img{ width: 100%;}
.shop-detail ul { box-sizing: border-box; float: left; width: 52%;}
.shop-detail ul li{ position: relative; margin-bottom: 8px; padding-left: 130px; color: #158bd6; font-size: 14px;}
.shop-detail ul li:last-child { font-size: 10px;}
.shop-detail ul li br{ display: none;}
.shop-detail ul li span{ position: absolute; left: 0; width: 110px; border-right: solid 1px #158bd6; font-size: 14px; line-height: 1.2;}
.shop-detail .map-fig{ float: right; width: 42%; max-width: 365px; padding: 10px; background: #e4f4ff; overflow: hidden;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
.shop-detail .map-fig img { width: 100%;}

.map{ width: 100%; height: 360px; background: #56778c;}
.map #shopMap{ width: 100%; height: 100%;}

#contact { padding: 80px 0; background: #158bd6;}
#contact .inner{ width: 92%; max-width: 900px; margin: auto;}
#contact h2 { margin-bottom: 60px; color: #fff; font-size: 36px; text-align: center;}
#contact h2 span { display: block; width: 120px; margin: auto; border-bottom: solid 1px #fff;
 font-size: 18px; font-weight: normal; letter-spacing: 0.2rem;
}
#contact p { margin-bottom: 60px; color: #fff; font-size: 18px; letter-spacing: 0.25rem; text-align: center;}
#contact ul{ margin-bottom: 50px;}
#contact ul li{ margin-bottom: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#contact ul li dl{ display: table; width: 100%; background: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#contact ul li dl dt{ display: table-cell; width: 30%; background: #e4f4ff; vertical-align: middle;
 -moz-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px;
 -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
 color: #158bd6; text-align: center;
}
#contact ul li dl dt span{ color: #f25e41; font-size: 12px;}
#contact ul li dl dd{ position: relative; display: table-cell; width: 70%; color: #158bd6;
 -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px;
 -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
}
#contact ul li:first-child dl dd{ padding: 10px 15px;}
#contact ul li dl dd input[type="text"],
#contact ul li dl dd input[type="email"]{ box-sizing: border-box; width: 100%; border: none; padding: 10px;
 -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px;
 -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
}
#contact ul li dl dd textarea{ box-sizing: border-box; width: 100%; height: 200px; border: none; padding: 10px;
 -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px;
 -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
}
#contact .radio label.radiolabel{ position: relative; padding: 2px 18px 2px 0px;}
#contact .radio input[type="radio"]{ margin-right: 5px;}
/*
#contact .radio input[type="radio"]{ position: absolute; left: 4px; top: 1px;}
#contact .radio span:before,
#contact .radio span:after { position: absolute; content: ''; display: block;}
#contact .radio span:before{ top: -1px; left: 0; width: 18px; height: 18px; border: solid 2px #158bd6; background: #fff;}
#contact .radio span:after { top: -1px; left: 6px; width: 6px; height: 14px;
 border-right: solid 3px #158bd6; border-bottom: solid 2px #158bd6;
 transform: rotate(45deg); opacity: 0; z-index: 10;
}
#contact .radio input[type="radio"]:checked + span.type1:after,
#contact .radio input[type="radio"]:checked + span.type2:after,
#contact .radio input[type="radio"]:checked + span.type3:after { opacity: 1;}
*/
#contact .btn{ width: 80%; max-width: 420px; margin: auto;}
#contact .btn input { width: 100%;}


ul.formParts li label.error {
	position: absolute; top: -30px; left: -10px;
	padding: 5px 8px;
	background: #d00; border-radius: 5px;
	color: #fff; font-size: 12px;
	opacity: 0;
	animation: .5s showError linear forwards .2s;
}
ul.formParts li label.error:before{ content: ''; display: block; width: 8px; height: 8px; background: #d00;
	transform: rotate(45deg);
	position: absolute; bottom: -4px; left: 20px;
}
#contact .radio label.error{ width: 215px; top: -40px;}
@keyframes showError{
	100%{ opacity: 1;}
}


.aside p{ text-align: left;}
@media (max-width: 769px) {
	.about ul li dl dd { height: 160px;}
	.shop-detail ul li { padding-left: 100px;}
	.shop-detail ul li span{ width: 85px;}
	.shop-detail ul li br{ display: block;}
}
@media (max-width: 641px) {
	.kv { height: 300px; padding-top: 80px;}
	.kv h2{ font-size: 24px;}
	.kv h2 em { font-size: 40px;}

	.about { padding: 40px 0;}
	.about h2{ font-size: 18px;}
	.about p.read{ font-size: 18px;}
	.about ul li{ display: block; width: 100%; margin: 0 auto 20px;}
	.about ul li dl dt{ padding: 15px 0;}
	.about ul li dl dd{ height: auto; padding: 15px;}
	.about ul li:nth-child(1) dl dd { padding: 15px;}
	.about ul li:nth-child(2) dl dd,
	.about ul li:nth-child(3) dl dd { padding: 20px 15px;}

	.shop-detail { padding: 40px 0;}
	.shop-detail ul { float: none; width: 100%; margin-bottom: 30px;}
	.shop-detail ul li br{ display: block;}
	.shop-detail .map-fig{ float: none; width: 100%; max-width: 365px; margin: 0 auto}

	#contact { padding: 40px 0;}
	#contact h2 { margin-bottom: 30px; font-size: 30px;}
	#contact h2 span { font-size: 16px;}
	#contact p { margin-bottom: 30px; font-size: 16px;}
	#contact ul li dl dt{ font-size: 14px;}
	#contact ul li dl dt span{ font-size: 11px;}
}
@media (max-width: 481px) {
	.kv { height: 200px; padding-top: 50px;}
	.kv h2 em { font-size: 26px;}
	.kv h2 span.name { font-size: 16px;}

	.about h2{ font-size: 14px;}
	.about h2 span{ display: block; width: 80%; margin: auto; padding: 6px 12px;}
	.about h2 br{ display: block;}
	.about p.read{ font-size: 15px;}
	.about p.txt { font-size: 14px;}

	.shop-detail ul li{ font-size: 13px;}

	#contact p { font-size: 14px; letter-spacing: 0.125rem;;}
	#contact ul li dl{ display: block;}
	#contact ul li dl dt{ display: block; width: 100%; padding: 10px 0; text-align: left; text-indent: 15px;
	 -moz-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px;
	 -moz-border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
	 -moz-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px;
	}
	#contact ul li dl dt span{}
	#contact ul li dl dd{ display: block; width: 100%;
	 -moz-border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px;
	 -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
	 -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
	}
	#contact ul li dl dd input[type="text"],
	#contact ul li dl dd input[type="email"]{
	 -moz-border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px;
	 -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
	 -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
	}
	#contact ul li dl dd textarea{
	 -moz-border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px;
	 -moz-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
	 -moz-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
	}

	#contact .radio label{ display: block;}
}


.send { width: 90%; max-width: 900px; margin: auto; padding: 80px 0;}
.send p{ margin-bottom: 40px;}
.send .btn{ width: 80%; max-width: 500px; margin: auto;}