@charset "utf-8";

h2.ttl { margin-bottom: 50px; font-size: 36px; text-align: center;}
h2.ttl span{ display: block; margin: 0 auto; padding: 5px 0; font-size: 18px; letter-spacing: 0.2rem;}
.stl { margin-bottom: 30px; color: #158bd6; font-size: 22px; text-align: center;}
.stl span { padding-bottom: 5px; border-bottom: dashed 2px #158bd6;}
.stl: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% 100%;
}
@media (max-width: 481px) {
	h2.ttl { margin-bottom: 30px; font-size: 30px;}
	h2.ttl span{ font-size: 16px;}
	.stl { margin-bottom: 15px; font-size: 18px;}
}

.top-kv { height: 680px; padding-top: 50px;
 background: url(../img/top/bg-kv.jpg) no-repeat 50% 0; background-size: 100% auto;
 text-align: center;
}
.top-kv h2{ margin-bottom: 15px;}
.top-kv h2 img{ width: 95%; max-width: 748px;}
.top-kv p.read { color: #158bd6; font-size: 22px;}
.top-kv p.read span{ display: block;}
.top-kv p.read br{ display: none;}
.top-kv .note { color:  #fff;}
.top-kv .note p span{ padding: 10px 20px; background: url(../img/bg-cross-bl.gif);
 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
.top-kv .motion{ position: relative; width: 100%; max-width: 980px; height: 320px; margin: auto; overflow: hidden;}
.motion img{ position: absolute;}
.motion img.item1 { top: 10px; left: 60px; animation: 2s item1 ease infinite;}
.motion img.item2 { top: 10px; left: 180px; animation: 2s item2 ease infinite .4s;}
.motion img.item3 { top: 30px; left: 350px; animation: 2s item3 ease infinite;}
.motion img.item4 { top: 120px; left: 10px; animation: 2s item4 ease infinite .3s;}
.motion img.item5 { top: 170px; left: 160px; animation: 2s item5 ease infinite;}
.motion img.item6 { top: 110px; left: 335px; animation: 2s item6 ease infinite;}
.motion img.item7 { top: 220px; left: 320px; animation: 2s item7 ease infinite;}
.motion img.worker{ bottom: -500px; left: 50%; animation: 0.8s worker ease forwards 1.5s;}
.motion img.badge { top: 0; right: 0; animation: 4s badge ease infinite 1s;}

@keyframes item1{
 0%  { top: 10px; left: 60px;}
 50% { top: 6px; left: 55px;}
 100%{ top: 10px; left: 60px;}
}
@keyframes item2{
 0%  { top: 10px; left: 180px;}
 50% { top: 6px; left: 185px;}
 100%{ top: 10px; left: 180px;}
}
@keyframes item3{
 0%  { top: 30px;}
 50% { top: 26px;}
 100%{ top: 30px;}
}
@keyframes item4{
 0%  { top: 120px; left: 10px;}
 50% { top: 125px; left: 6px;}
 100%{ top: 120px; left: 10px;}
}
@keyframes item5{
 0%  { transform: rotate(5deg); }
 50% { transform: rotate(-5deg); }
 100%{ transform: rotate(5deg); }
}
@keyframes item6{
 0%  { top: 110px; left: 335px;}
 50% { top: 114px; left: 340px;}
 100%{ top: 110px; left: 335px;}
}
@keyframes item7{
 0%  { left: 320px;}
 50% { left: 314px;}
 100%{ left: 320px;}
}
@keyframes worker{
 0%  { bottom: -500px; opacity: 0;}
 10% { bottom: -500px; opacity: 0;}
 90% { bottom: 10px; opacity: 1;}
 100%{ bottom: 0;}
}
@keyframes badge{
 0%  { transform: scale(1, 1);}
 80% { transform: scale(1, 1);}
 85% { transform: scale(-1, 1);}
 90% { transform: scale(1, 1);}
 100%{ transform: scale(1, 1);}
}
@media (max-width: 769px) {
	.top-kv { height: auto; background: url(../img/bg-kv-sp.jpg) no-repeat 50% 0; background-size: 100% auto;}
	.motion img.badge{ display: none;}
	.motion img.worker{ margin-left: -112px;}
	.top-kv .note p span{ display: block; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;}
}
@media (max-width: 641px) {
	.top-kv .note p{ text-align: left;}
	.top-kv .note p img{ width: 100%;}
}
@media (max-width: 481px) {
	.top-kv p.read { font-size: 16px;}
	.top-kv p.read br{ display: block;}
	.top-kv .motion{ height: 240px;}
	.motion img.item1 { width: 60px; top: 40px; left: auto; right: 10px; animation: 2s item1-sp ease infinite;}
	.motion img.item2 { width: 90px; top: 10px; left: 60px; animation: 2s item2-sp ease infinite .4s;}
	.motion img.item3 { width: 90px; top: 10px; left: 230px; animation: 2s item3-sp ease infinite;}
	.motion img.item4 { width: 70px; top: 80px; left: 10px; animation: 2s item4-sp ease infinite .3s;}
	.motion img.item5 { width: 80px; top: 140px; left: 70px; animation: 2s item5 ease infinite;}
	.motion img.item6 { width: 80px; top: 150px; left: auto; right: 20px; animation: 2s item6-sp ease infinite;}
	.motion img.item7 { width: 80px; top: 100px; left: 220px; animation: 2s item7-sp ease infinite;}
	.motion img.worker{ width: 112px; bottom: -500px; margin-left: -56px; animation: 0.8s worker-sp ease forwards 1.5s;}
}
@keyframes item1-sp{
 0%  { top: 40px; right: 10px;}
 50% { top: 35px; right: 15px;}
 100%{ top: 40px; right: 10px;}
}
@keyframes item2-sp{
 0%  { top: 10px; left: 60px;}
 50% { top: 10px; left: 66px;}
 100%{ top: 10px; left: 60px;}
}
@keyframes item3-sp{
 0%  { top: 10px;}
 50% { top: 6px;}
 100%{ top: 10px;}
}
@keyframes item4-sp{
 0%  { top: 80px; left: 10px;}
 50% { top: 74px; left: 16px;}
 100%{ top: 80px; left: 10px;}
}
@keyframes item6-sp{
 0%  { top: 150px; right: 20px;}
 50% { top: 145px; right: 15px;}
 100%{ top: 150px; right: 20px;}
}
@keyframes item7-sp{
 0%  { top: 100px; left: 220px;}
 50% { top: 100px; left: 225px;}
 100%{ top: 100px; left: 220px;}
}
@keyframes worker-sp{
 0%  { bottom: -500px; opacity: 0;}
 10% { bottom: -500px; opacity: 0;}
 90% { bottom: 50px; opacity: 1;}
 100%{ bottom: 40px;}
}


.overview{ padding: 80px 0; background: url(../img/bg-cross-wh.gif); text-align: center;}
.overview .inner{ width: 95%; max-width: 940px; margin: auto;}
.overview h2.ttl { color: #158bd6;}
.overview h2.ttl span { width: 140px; border-bottom: solid 2px #158bd6;}
.overview .fig { width: 90%; max-width: 460px; margin: 0 auto 30px;}
.overview .fig img { width: 100%;}
.overview p.read{ margin-bottom: 30px; color: #158bd6; font-size: 22px; text-align: center;}
.overview p.txt { font-size: 14px;}
@media (max-width: 641px) {
	.overview p.read br,
	.overview p.txt br { display: none;}
	.overview p.txt { text-align: left;}
}
@media (max-width: 481px) {
	.overview{ padding: 40px 0;}
}


.service { padding: 80px 0; background: #158bd6;}
.service h2.ttl{ color: #fff;}
.service h2.ttl span { width: 110px; border-bottom: solid 2px #fff;}
.service .inner{ width: 94%; max-width: 980px; margin: auto;}
.service ul { font-size: 0; text-align: center;}
.service ul li { display: inline-block; width: 23%; margin: 0 1%;}
.service ul li dl { width: 100%; background: #fff; overflow: hidden;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
.service ul li dl dt{ padding: 40px 0 10px; color: #158bd6; font-size: 18px; font-weight: 700;}
.service ul li dl dd.fig img{ width: 100%;}
.service ul li dl dd.link { padding: 20px;}
.service ul li dl dd.link a { display: block; height: 40px; line-height: 40px; background: #1ba66f;
 -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
 box-shadow: 0 4px 0 #2f916a;
 color: #fff; font-size: 14px; text-align: center;
}
.service ul li dl dd.link a:hover{ opacity: .85; text-decoration: none;
 margin-top: 3px; margin-bottom: -3px;
 box-shadow: 0 1px 0 #2f916a;
}
@media (max-width: 769px) {
	.service ul li dl dt{ padding: 20px 0 10px; font-size: 15px;}
	.service ul li dl dd.link { padding: 15px;}
}
@media (max-width: 641px) {
	.service ul li dl dt{ font-size: 13px;}
	.service ul li dl dd.link a { height: 30px; line-height: 30px; font-size: 13px;}
}
@media (max-width: 481px) {
	.service { padding: 40px 0;}
	.service ul li { width: 46%; margin: 0 1% 15px;}
}

.message{ padding: 80px 0; background: #e4f4ff;}
.message h2.ttl { color: #158bd6;}
.message h2.ttl span { width: 120px; border-bottom: solid 2px #158bd6;}
.message .inner{ width: 95%; max-width: 980px; margin: auto;}
.message .cf{ margin-bottom: 40px;}
.message .lBloc{ float: left; width: 48%;}
.message .rBloc{ float: right; width: 48%;}
.message .lBloc div{ overflow: hidden; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.message .lBloc div p img{ width: 100%;}
.message .rBloc ul { font-size: 0; text-align: center;}
.message .rBloc ul li { display: inline-block; width: 31%; margin: 0 1% 15px; vertical-align: middle;}
.message .rBloc ul li dl { width: 100%; overflow: hidden;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
 box-shadow: 0 4px 0 #2171a4;
}
.message .rBloc ul li dl dt img{ width: 100%;}
.message .rBloc ul li dl dd { padding: 3px 0; background: #158bd6; color: #fff; font-size: 12px; line-height: 1.4;}
.message .rBloc ul li dl dd span{ display: block; height: 14px; overflow: hidden;}
.message .rBloc ul li dl dd em  { display: block; font-size: 22px;}
.message .rBloc ul li a{ display: block; background: #158bd6; position: relative; width: 100%; overflow: hidden;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
 box-shadow: 0 4px 0 #2171a4;
}
.message .rBloc ul li a:before,
.message .rBloc ul li a:after { content: ''; display: block;}
.message .rBloc ul li a:before{ padding-top: 100%;}
.message .rBloc ul li a:after { width: 30px; height: 30px; position: absolute; bottom: 45%; left: 50%; margin-left: -25px;
 border-top: 2px solid #fff; border-right: solid 2px #fff;
 transform: rotate(45deg);
}
.message .rBloc ul li a span{ position: absolute; display: block; width: 100%; bottom: 20%; color: #fff; font-size: 12px;}
.message .rBloc ul li a:hover{ opacity: 0.85;}
.message h3{ margin-bottom: 20px; color: #158bd6; font-size: 22px; text-align: center;}
.message p.txt{ color: #158bd6; font-size: 14px; text-align: center;}

@media (max-width: 769px) {
	.message .rBloc ul li dl dd { padding:  1px 0; font-size: 10px;}
	.message .rBloc ul li dl dd em{ font-size: 16px;}
}
@media (max-width: 641px) {
	.message .lBloc{ float: none; width: 95%; margin: 0 auto 20px;}
	.message .rBloc{ float: none; width: 95%; margin: 0 auto 0px;}
	.message .rBloc ul li dl dd { padding: 4px 0; font-size: 12px;}
	.message .rBloc ul li dl dd em{ font-size: 20px;}
	.message p.txt{ text-align: left;}
}
@media (max-width: 481px) {
	.message .rBloc ul li dl dd { font-size: 11px;}
}

.shop { padding: 60px 0 0; background: url(../img/bg-cross-wh.gif);}
.shop h2.ttl { color: #158bd6;}
.shop h2.ttl span { width: 70px; border-bottom: solid 2px #158bd6;}
.shop .shopInfo{ padding: 0 0 30px; background: #fff; border-top: dashed 2px #e4f4ff;}
.shop .shopInfo h3{ margin-bottom: 50px; background: #fff; text-align: center; color: #fff; font-size: 18px; font-weight: normal;}
.shop .shopInfo h3 span{ padding: 40px 30px; background: #fff;
 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
 border-top: dashed 2px #e4f4ff;
}
.shop .shopInfo h3 em{ padding: 15px 30px; background: url(../img/bg-cross-bl.gif);
 -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
.shop .shopInfo h3 br{ display: none;}
.shop .inner{ width: 96%; max-width: 920px; margin: auto;}
.shop .contactBloc{ float: left; width: 49%; }
.shop .shopBloc { float: right; width: 49%; }
.shop .contactBloc p{ margin-bottom: 5px; color: #158bd6; font-size: 24px; text-align: center;}
.shop .contactBloc p.tel{ line-height: 1;}
.shop .contactBloc p.tel:before{ content:''; display: inline-block; width: 30px; height: 30px; margin-right: 5px;
 background: url(../img/icn-tel-bl.png) no-repeat 50% 50%; background-size: 100% auto;
}
.shop .contactBloc p.tel span { font-size: 50px; font-weight: 700;}
.shop .contactBloc p.tel a{ display: none; font-weight: 700;}
.shop .contactBloc p.time{ margin-bottom: 15px; font-size: 18px; line-height: 1;}
.shop .shopBloc p{ margin-bottom: 15px; color: #158bd6; font-size: 20px; text-align: center;}
.shop .shopBloc dl{ box-sizing: border-box; position: relative; width: 100%; padding-left: 50%;}
.shop .shopBloc dl dt{ position: absolute; width: 46%; left: 0; overflow: hidden;
 -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
}
.shop .shopBloc dl dt img{ width: 100%;}
.shop .shopBloc dl dd.txt { margin-bottom: 30px; color: #158bd6; font-size: 13px;}
.shop .shopBloc dl dd.more a { display: block; height: 40px; line-height: 40px; background: #1ba66f;
 -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
 box-shadow: 0 4px 0 #2f916a;
 color: #fff; font-size: 18px; text-align: center;
}
.shop .shopBloc dl dd.more a:hover{ opacity: .85; text-decoration: none;
 margin-top: 3px; margin-bottom: -3px;
 box-shadow: 0 1px 0 #2f916a;
}

@media (max-width: 769px) {
	.shop .contactBloc p{ font-size: 20px;}
	.shop .contactBloc p.tel span { font-size: 34px;}
	.shop .contactBloc p.time{ font-size: 16px;}
	.shop .shopBloc p{ font-size: 16px;}
	.shop .shopBloc dl dd.txt { margin-bottom: 10px; font-size: 12px;}
	.shop .shopBloc dl dd.more a { font-size: 16px;}
}
@media (max-width: 641px) {
	.shop .contactBloc{ float: none; width: 90%; margin: 0 auto 30px;}
	.shop .shopBloc { float: none; width: 90%; margin: 0 auto 0px;}

	.shop .contactBloc p.tel span { display: none;}
	.shop .contactBloc p.tel a{ display: inline-block; font-size: 42px;}
	.shop .shopBloc p{ font-size: 18px;}
	.shop .shopBloc dl { min-height: 160px;}
	.shop .shopBloc dl dd.txt { margin-bottom: 40px; font-size: 14px;}
}
@media (max-width: 481px) {
	.shop .shopInfo h3{ margin-bottom: 10px; font-size: 15px;}
	.shop .shopInfo h3 span{ display: block; padding: 20px; border: none;}
	.shop .shopInfo h3 em { display: block; padding: 15px 20px;}
	.shop .shopInfo h3 br{ display: block;}
	.shop .contactBloc p.tel:before{ width: 20px; height: 20px;}
	.shop .contactBloc p.tel a{ display: inline-block; font-size: 30px;}
	.shop .contactBloc p.time{ font-size: 13px;}
	.shop .shopBloc p{ font-size: 14px;}
	.shop .shopBloc dl { min-height: auto; padding-left: 0;}
	.shop .shopBloc dl dt{ position: relative; width: 100%; max-width: 216px; margin: 0 auto 10px; left: auto;}
	.shop .shopBloc dl dt img{ width: 100%;}
	.shop .shopBloc dl dd.txt { margin-bottom: 10px; font-size: 14px;}
}


.area { padding: 40px 0; background: url(../img/bg-cross-wh.gif);}
.area p { margin-bottom: 40px; color: #158bd6; text-align: center;}
.area .fig { width: 85%; max-width: 380px; margin: 0 auto;}
.area .fig img { width: 100%;}

.point { padding-bottom: 30px; background: url(../img/bg-cross-bl.gif);}
.point .inner{ width: 96%; max-width: 900px; margin: 0 auto; padding-top: 40px;}
.point dl { color: #fff;}
.point dl dt{ margin-bottom: 10px; font-size: 22px;}
.point dl dt span{ display: inline-block; margin-right: 10px; padding: 4px 10px; background: #fff;
 -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
 color: #158bd6; font-size: 18px; line-height: 1; vertical-align: middle;
}
.point dl dd.txt{ margin-bottom: 10px; font-size: 14px;}
.point dl dd.link { margin-bottom: 25px; text-align: center;}
.point dl dd.link a { display: inline-block; width: 46%; height: 40px; margin: 0 1%; line-height: 40px; background: #1ba66f;
 -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
 box-shadow: 0 4px 0 #2f916a;
 color: #fff; font-size: 18px; text-align: center;
}
.point dl dd.link a:hover{ opacity: .85; text-decoration: none;}


.point hr{ margin: 20px 0; border: none; border-top: dashed 2px #fff;}

@media (max-width: 769px) {
	.point dl dd.link a { display: block; width: 85%; margin: 0 auto 15px;}
}
@media (max-width: 641px) {
	.point dl dt span{ display: block; width: 100px; margin-bottom: 5px; text-align: center;}
}
@media (max-width: 481px) {
	.area p { width: 90%; margin: 0 auto 30px; text-align: left;}
	.area p br.sp{ display: none;}

	.point dl dt{ font-size: 18px;}
	.point dl dd.link a{ width: 90%; font-size: 14px;}
}