@charset "utf-8";

/* 基本セット */
html, body{
	position: relative; display: block;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px; line-height:20px; color:#333; font-weight:500;
	animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */}
body{
	padding:170px 0  0;}
*{margin:0; padding:0; box-sizing:border-box;}
ul, ol{
	list-style:none;}
img{
	border:0; vertical-align:top;}
a{
	color:#333; text-decoration:none; transition:all 0.3s ease;}
.cf:after{
	content: ""; display: block; clear: both;}
	
	
@media screen and (max-width:780px){
body{
	padding:70px 0  0;}
}

	


header{
	position: fixed;
	top:0px; left: 0px;
	width:100%; height:auto;
	text-align: center;
	padding:0 0 0; 
	box-sizing: border-box;
	z-index: 99999;
	border-top:8px solid #5dc9cb;
	background: #fff;
	transition:all 0.5s ease;}
header section{
	display: block;
	width:100%; height: auto;
	border-bottom: 1px solid #5dc9cb;}
header section > div{
	display: block; position: relative;
	width:1024px; height:103px;
	margin:0 auto;}
header section h1{
	display:block; position: absolute;
	top:24px; left: 0px;
	width:211px; height:auto;
	transition:all 0.5s ease;}
header section  h1 a{
	display: block;
	width:211px; height:58px;
	text-indent: -9999px;
	background:url(../images/common/logo.png) no-repeat center / 100%;
	transition:all 0.2s ease;}
header section  h1 a:hover{
	opacity:0.6;}
header section .callcenter{
	display: block; position: absolute;
	top:20px; right:230px;
	font-size:15px; text-align:right; font-weight: bold; vertical-align: middle;}
header section .callcenter b{
	font-family: 'Montserrat', sans-serif; font-size: 24px; color:#00b7ce; line-height:36px; vertical-align: middle;}
header section .callcenter span{
	display: block;
	font-family: 'Montserrat', sans-serif; font-size: 36px; color:#00b7ce; line-height:20px;}	
header section .contactNow{
	display:block; position:absolute;
	top:24px; right:0px;
	width:202px; height:58px;
	font-size:15px; text-align: left;line-height:20px; font-weight:bold;
	padding:10px 0 0 57px;
	border: 1px solid #266869;
	background: url(../images/common/btn_contactNow.jpg);
	transition:all 0.2s ease;}
header section .contactNow:hover{
	color:#5dc9cb;
	background: url(../images/common/btn_contactNowOv.jpg);}	
header nav{
	display:flex;
	flex-wrap: wrap;
	width:1024px; height:60px;
	margin:0 auto;}
header nav a{
	display:block;
	width:20%; height: 60px;
	font-size:14px;text-align: center; letter-spacing: 0em; line-height:60px; font-weight:bold;}
header nav a:hover{
	color:#5dc9cb;}
header .btnMenu{
	display: none;}
header nav.width{
	display:flex !important;}
header.down{
	border-top:0px solid #5dc9cb;}



@media screen and (max-width:780px){
header{
	width:100%; height:auto;
	padding:0;}
header section{
	border-bottom: 1px solid #5dc9cb;}
header section > div{
	width:100%; height:70px;
	margin:0 auto;}
header section > div h1{
	top:13px; left:10px;}
header section > div h1 a{
	width:169px; height:46px;}
header section .headContact{
	display: block; position: fixed;
	width:100%; height:auto;
	bottom:0px; left: 0px;
	padding:0px 10px 10px;
	background:#fff;
	box-sizing: border-box;
	border-top: 1px solid #5dc9cb;
	z-index: 100;}
header section .callcenter{
	display:block; position:relative;
	top:0px; right:0px;
	font-size:12px; text-align:center; font-weight: bold; vertical-align: middle;}
header section .callcenter span{
	font-size:26px; color:#00b7ce; line-height:26px;}
header section .callcenter span a{
	color:#00b7ce; }
header section .contactNow{
	display:block; position:relative;
	top:0px; right:0px;
	width:100%; height:auto;
	font-size:15px; text-align: left;line-height:20px; font-weight:bold;
	padding:10px 0 10px 57px; margin:5px 0 0;
	border: 1px solid #266869;
	background: #5dc9cb url(../images/common/btn_contactNow.jpg) no-repeat left center / auto;
	transition:all 0.2s ease;}
header section .contactNow br{
	display: none;}
header section .contactNow:hover{
	color:#5dc9cb;
	background:#2e6e6e url(../images/common/btn_contactNowOv.jpg) no-repeat left center / auto;}	
header nav{
	display:none;
	width:100%; height:auto;
	margin:0 auto;
	background: #5dc9cb;}
header nav a{
	display:block; position:relative;
	width:100%; height: 60px;
	font-size:14px; text-align:left; letter-spacing: 0em; line-height:60px; font-weight:500; color: #fff;
	padding:0 0 0 20px;
	text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	border-bottom:1px solid #fff;}
header nav a:after{
	display: block; position: absolute; content: "";
	top:50%; right:20px;
	width:6px; height:6px;
	margin:-4px 0 0 0;
	border-right:1px solid #fff; border-bottom:1px solid #fff;
	transform: rotate(-45deg);}
header nav a:hover{
	color:#5dc9cb;}
header nav.width{
	display: block !important;}
header .btnMenu{
	position:absolute; display:block;
	top:20px; right:10px; 
	height:30px;
	padding:6px 6px; }
header .btnMenu span{
	display:block; width:30px; height:2px;
	background:#494a4a; text-indent:-9999px;
	margin:8px 0;
	transition:all 0.2s ease;}
header .btnMenu:before, header .btnMenu:after{
	content:""; display:block; width:30px; height:2px;
	background:#494a4a;
	border-radius:5px;
	transition:all 0.2s ease;}	
header .btnMenu.active span{
	opacity:0;}
header .btnMenu.active:before{
	transform-origin:center;
	transform: rotate(45deg);
	transition:all 0.5s ease;
	margin:8px 0 0px 0;}
header .btnMenu.active:after{
	transform-origin:center;
	transform: rotate(-45deg);
	transition:all 0.5s ease;
	margin:-20px 0 0px 0;}		
header.down{
	width:100%;
	padding:0px 0 0; 
	border:0;}
header.down section > div{
	width:100%; height:60px;}
header.down h1{
	position: absolute;
	top:10px; left:10px;
	width:175px; height:auto;}
header.down  h1 a{
	width:135px; height:37px;
	text-indent: -9999px;
	background:url(../images/common/logo.png) no-repeat center / 100%;}	
header.down nav{
	top:60px;
	width:100%;}
header.down .btnMenu{
	top:15px; right:10px; }
}

section{position: relative;}


.contactLabel{
	width:100%; height: auto;
	font-size: 15px; 
	background: #000}
.contactLabel > div{
	display: block; position: relative;
	width:1024px; height:auto;
	font-size: 15px; color: #fff; font-weight: bold; text-align: center;
	margin:0 auto;}
.contactLabel > div:after{
	display: block; content: "";
	clear: both;}
.contactLabel .labelInfoLft{
	width:400px; height: 180px;
	text-align: left; line-height:26px;
	padding:25px 0 0;
	float:left;}
.contactLabel .labelInfoLft h3{
	display: block;
	height:36px;
	font-family: 'Montserrat', sans-serif; font-size: 43px; color: #78f1f3; line-height:36px;
	margin:10px 0; padding:0 0 0 45px;
	background: url(../images/common/bg_labelContact.png) no-repeat left center;}
.contactLabel .labelInfoLft a{
	color: #78f1f3; }
.contactLabel .labelInfoLft .ad_info{
	font-size: 12px;
	line-height: 1.4; }
.contactLabel .labelBtn{
	display: block;
	width:141px; height: 180px;
	padding:25px 0 0;
	float:left;}
.contactLabel .labelBtn a{
	display:inline-block;
	width:136px; height:120px;
	font-size:14px; color:#000; line-height:18px;
	padding:75px 0 0 0;
	-moz-box-shadow: 4px 6px 0px 0px #8c8500;
	-webkit-box-shadow: 4px 6px 0px 0px #8c8500;
	box-shadow: 4px 6px 0px 0px #8c8500;
	-moz-border-radius:18px;
	-webkit-border-radius:18px;
	border-radius:18px;
	background:#ffee36 url(../images/common/bg_btn.png) no-repeat center 10px ;}	
.contactLabel .labelInfoRht{
	width:461px; height:180px;
	font-size:18px;
	padding:30px 110px 0 0;
	background: url(../images/common/bg_label.png) no-repeat right bottom;
	float:right;}
.contactLabel .labelInfoRht h3{
	display: block;
	color: #78f1f3; vertical-align: middle;
	margin:35px 0 0;}
.contactLabel .labelInfoRht h3 span{
	font-family: 'Montserrat', sans-serif; font-size:50px; vertical-align: middle;}
.contactLabel .note {
	font-size: 13px;
	margin: 25px 0 0;
}
@media screen and (max-width:780px){
.contactLabel{
	width:100%; height: auto;
	background: #000}
.contactLabel > div{
	display: block; position: relative;
	width:100%; height:auto;
	font-size: 13px; 
	margin:0 auto; padding:0 15px;}
.contactLabel > div:after{
	display: block; content: "";
	clear: both;}
.contactLabel .labelInfoLft{
	width:100%; height:auto;
	text-align:left; line-height:26px; letter-spacing:-0.05em;
	padding:10px 0 0;
	float:none;}
.contactLabel .labelInfoLft h3{
	display: block;
	font-family: 'Montserrat', sans-serif; font-size:37px; color: #78f1f3;
	margin:10px 0;}
.contactLabel .labelInfoLft a{
	color: #78f1f3; }
.contactLabel .labelBtn{
	display: block;
	width:100%; height:auto;
	padding:10px 0 10px;
	float:none;}
.contactLabel .labelBtn a{
	display:inline-block;
	width:100%; height:auto;
	font-size:14px; color:#000; line-height:18px;
	padding:15px 0 15px 30px;
	border-radius:0px;
	background:#ffee36 url(../images/common/bg_btn.png) no-repeat left 20px center / 5%;}	
.contactLabel .labelBtn a br{
	display: none;}
.contactLabel .labelInfoRht{
	display: block;
	width:100%; height:auto;
	font-size:20px;
	padding:10px 0 20px; 
	background:none; 
	float:none;}
.contactLabel .labelInfoRht h3{
	display: block;
	color: #78f1f3; vertical-align: middle; letter-spacing: -0.05em;
	margin:15px 0 0;}
.contactLabel .labelInfoRht h3 span{
	font-size:42px; vertical-align:top;}
}


footer{
	text-align: center;
	padding: 95px 0 0;}
footer h1{
	display: inline-block;
	width:324px; height:auto;
	text-align: center; color: #000; letter-spacing: 0.1em;}
footer h1 b{
	display: block;
	width:324px; height:48px;
	text-indent: -9999px;
	margin: 17px 0 12px;
	background:url(../images/common/logo.png) no-repeat center / 100%;}
footer h1:before{
	display: block; content: "子供たちの通学路を守る";
	font-size: 16px; font-weight: bold;}
footer h1:after{
	display: block; content: "ムジコプロジェクト";
	font-size: 16px; font-weight: bold;}
footer nav{
	display: block;
	margin: 55px 0 0;}
footer nav a{
	position:relative; display: inline-block;
	font-size: 13px; color: #333; text-align: center; letter-spacing: 0em;
	padding:0px 22px;}
footer nav a:after{
	position: absolute; display: block; content: "";
	top:50%; right: 0px;
	width:1px; height: 12px;
	background: #333;
	margin:-6px 0 0 0;}
footer nav a:last-child:after{
	display:none;}
footer span{
	display: block;
	font-family:"ShortStack"; font-size: 12px;
	padding:40px 0 70px;
}

@media screen and (max-width:1013px){
footer{
	text-align: center;
	padding:55px 0 0;}
footer h1{
	width:250px; height:auto;}
footer h1 b{
	display: block;
	width:250px; height:38px;
	margin: 10px 0 5px;}
footer h1:before, footer h1:after{
	font-size: 13px;}
footer span{
	padding:30px 0 50px;
}

}
@media screen and (max-width:780px){
footer{
	padding:35px 0 50px;}
footer h1{
	width:250px; height:auto;}
footer h1 b{
	display: block;
	width:250px; height:38px;
	margin: 10px 0 5px;}
footer h1:before, footer h1:after{
	font-size:12px;}
footer nav{
	display:block;
	margin:25px 0 0;}
footer nav a{
	display:inline-block;
	font-size:10px;
	padding:5px 5px;}
footer nav a:after{
	display:none; }
footer nav a:last-child:after{
	display:none;}
footer span{
	padding:20px 0 30px;}
}


.tag{
	display: block; position:absolute;
	font-family:"ShortStack"; font-size: 18px; color: #333;
	padding: 18px 30px 18px 70px;
	transform: rotate(90deg);}
.tag.right{
	top:260px; right:-36px;
	background:#f2f2f2 url(../images/common/bg_tag.png) no-repeat 20px center;
	transform-origin:right bottom;}
.tag.left{
	top:0px; left:-36px;
	background:#fff url(../images/common/bg_tag.png) no-repeat 20px center;
	transform-origin:left top;}
.btn{
	text-align: center;
	margin: 30px auto 70px;
}
.btn a{
	position: relative; display: inline-block;
	height: 50px;
	font-size: 15px; line-height: 50px; font-weight: bold; color: #fff;
	padding:0 90px;
	background: #ef562a;
	border: 3px solid #ef562a;
	border-radius:5px;}
.btn a:after{
	position: absolute; display: block; content: "";
	top:50%; right: 20px;
	width:5px; height: 5px;
	margin: -3px 0 0 0 ;
	border-right:1px solid #fff; border-bottom:1px solid #fff;
	transform: rotate(45deg);}
.btn a:hover{
	color: #ef562a;
	background:#fff;}
.btn a:hover:after{
	border-right:1px solid #ef562a; border-bottom:1px solid #ef562a;}
@media screen and (max-width:1250px){
	.tag{
	display:none;}
}
@media screen and (max-width:1150px){}
@media screen and (max-width:780px){
.btn{
	text-align: center;
	margin:0px 0 80px;}
.btn a{
	position: relative; display: inline-block;
	height:40px;
	font-size: 14px; line-height:39px; font-weight: bold; color: #fff;
	padding:0 60px;}
}


#backTop{
    width:35px; height:35px;
    padding:10px;
    border-radius:4px;
    text-indent:-9999px;
    cursor:pointer;
    z-index:9999;
	display:none;
	box-sizing:content-box;
	-webkit-box-sizing:content-box;}
#backTop.white{
    background:url(../images/common/uparr-48-b.png) no-repeat center center #ffd600;}
@media screen and (max-width:960px){
#backTop{
	display: none !important;
}
#backTop.white{
     background:url(../images/common/uparr-48-b.png) no-repeat center center #ffd600;}

}