/* CSS Document */
.spOnly{display: none !important;} /** パソコンのみ **/

/*====== Container Box =====*/
#wrapper{min-width: 1300px; min-height: 100vh; padding: 122px 0 220px;}

.main_container{
	width: 1200px; margin: 0 auto; position: relative;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

.main_box{width: 880px; margin: 0 auto;}


section{position: relative;}

a:hover, button:hover{cursor: pointer;}

button, .btnBlue, .kvBtn{background-size: 0% 100%; transition: background-color .5s;}
button:hover, .btnBlue:hover, .kvBtn:hover{
	background-color:#6bc3ef;
	background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.7) 100%);
	background-repeat:no-repeat;
	background-size: 200% 100%; 
	transition:background-size 1s, background-color 1s;
}
button:active, .btnBlue:active, .kvBtn:active{background-color:#2980b9; transition:background-size 0;}

a:not(.btnBlue):not(.kvBtn){transition: all .4s ease-out; opacity: 1; -webki-opacity: 1;}
a:not(.btnBlue):not(.kvBtn):hover{
	opacity: .7 !important; -webki-opacity: .7 !important;
}

nav a i, .btnBlue .circle i.fa-arrow-right, #ankerlink a .ankerTxt div i{transition: all .4s ease-out;}

nav a:hover i{left: 5px !important;}
.btnBlue:hover .circle i.fa-arrow-right{left: 10px !important;}

#ankerlink a:hover .ankerTxt div i{transform: translateY(3px) rotate(90deg);}



/*======ヘッダー =====*/
header{
	display: flex; align-items: center; position: fixed; top: 0; left: 0; width: 100%; padding: 33px 50px; background-color: #fff; z-index: 10;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#logo{
	display: inline-flex; align-items: center; height: 100%; margin-right: 30px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
#logo span{
	display: block; font-weight: 700; 
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
#logo span:nth-of-type(1){color: #777; font-size: 18px; margin-right: 10px;}
#logo span:nth-of-type(2){color: #0181c0; font-size: 36px;}


/*====== メニュー・グロナビ =====*/
#menu{
	display: inline-block; width: calc(100% - 256px);
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#menu_nav{float: left;}

#menu_nav div{font-size: 16px; font-weight: 400; color: #737373; margin-bottom: 20px;}
#menu_nav nav{
	display: block;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
#menu_nav nav a{display: inline-block; padding-left: 24px; position: relative; margin-right: 30px;}
#menu_nav nav a i{display: block; font-size: 14px; color: #0181c0; position: absolute; top: 3px; left: 0; margin: auto; height: 14px;}
#menu_nav nav a span{display: block; font-size: 18px; color: #333; font-weight: 400; line-height: 17px;}


#menu_contact{
	float: right; display: flex; align-items: center;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#menu_tel, #hours, #menu_form, #menu_form .email{float: left;}

#menu_tel{display: inline-block; padding-left: 50px; position: relative; margin-right: 28px;}

#menu_tel .phone{display: block; position: absolute; width: 37px; height: 37px; top: 0; left: 0; bottom: 0; margin: auto; background-color: #0181c0; border-radius: 50%;}
#menu_tel .phone i{
	display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
	font-size: 16px; width: 16px; height: 16px; color: #fff;
	-webkit-transform: scaleX(-1); transform: scaleX(-1);
}

#menu_tel .hours{
	display: block;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#menu_tel .hours span:nth-of-type(1){display: block; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 24px; color: #0181c0; margin-bottom: 5px;}
#menu_tel .hours span:nth-of-type(2){display: block; font-weight: 400; font-size: 14px; color: #737373;}


.btnBlue{display: block; position: relative; width: 220px; height: 56px; background-color: #0181c0; border-radius: 28px;}

.btnBlue .circle{display: block; position: absolute; width: 37px; height: 37px; top: 0; left: 10px; bottom: 0; margin: auto; background-color: #fff; border-radius: 50%;}
.btnBlue .circle i{
	display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
	font-size: 16px; width: 16px; height: 16px; color: #0181c0;
}

.btnBlue span{
	display: block; position: absolute; top: 0; bottom: 0; right: 40px; margin: auto; color: #fff; font-size: 16px; font-weight: 400;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

button.btnBlue{border: none; width: 400px; margin: 60px auto 30px;}
button.btnBlue span{left: 0 !important; right: 0 !important;}



@media screen and (max-width: 1200px) {
	#menu{width: calc(100% - 210px) !important;}
	
	header{
		padding: 23px 20px !important;
	}

	#logo span:nth-of-type(1){color: #777; font-size: 14px; margin-right: 10px;}
	#logo span:nth-of-type(2){color: #0181c0; font-size: 28px;}
	
	#menu_contact{display: block !important;}

	#menu_tel{float: none !important;}

	#menu_tel{display: block; padding-left: 40px; position: relative; margin-right: 28px;}

	#menu_tel .phone{width: 30px !important; height: 30px !important;}
	#menu_tel .phone i{
		font-size: 14px; width: 14px; height: 14px;
	}

	#menu_tel .hours span:nth-of-type(1){font-size: 18px !important; margin-bottom: 2px !important;}
	#menu_tel .hours span:nth-of-type(2){font-size: 12px !important;}
	
	#menu_contact .btnBlue{
		width: 180px !important; height: 34px !important; border-radius: 20px !important; margin-top: 10px !important;
	}

	#menu_contact .btnBlue .circle{width: 25px !important; height: 25px !important; left: 5px !important;}
	#menu_contact .btnBlue .circle i{font-size: 12px !important; width: 12px !important; height: 12px !important;}

	#menu_contact .btnBlue span{
		right: 35px !important; font-size: 14px !important;
	}
}



/*====== フッター =====*/
footer{display: block; position: absolute; left: 0; right: 0; margin: auto; bottom: 0; width: 100%; height: 220px; background-color: #5f6b7a; border-radius: 40px 0 0 0;}

#footer{
	display:flex; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 1200px;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#footerLogo{
	display:flex; align-items: center; margin-right: 30px;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
#footerLogo span{
	display: block; font-weight: 700; color: #fff; 
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
#footerLogo span:nth-of-type(1){font-size: 18px; margin-right: 10px;}
#footerLogo span:nth-of-type(2){font-size: 36px;}


#footerInfo{
	display:block;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
#footerInfo div:nth-of-type(1){margin-bottom: 10px;}
#footerInfo div, #footerInfo div a{font-size: 16px; font-weight: 400; color: #fff;}
#footerInfo div a{display: inline-block; margin-right: 15px;}

#footerCopyright{
	display:block; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; font-size: 12px; font-weight: 400; color: #fff;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}


/*====== メインコンテンツ =====*/


h2{display: block; font-size: 36px; font-weight: 700; line-height: 37px; margin: 0; color: #333;}

h3{
	display: block; position: relative; padding-left: 20px; color: #0181c0; font-size: 18px; font-weight: 700; margin-bottom: 22px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
h3::before{
	display: block; width: 10px; height: 10px; border-radius: 50%; content: "";
	position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background-color: #0181c0;
}

h4{
	display: block; position: relative; padding-left: 27px; color: #333; font-size: 24px; font-weight: 700; 
	margin-bottom: 35px; padding-right: 80px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
h4::before{
	display: block; width: 12px; height: 12px; border-radius: 50%; content: ""; 
	position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background-color: #0181c0;
}
h4 div{
	display: block; position: absolute; background-color: #0181c0; top: 0; right: 0; bottom: 0; margin: auto;
	width: 71px; height: 24px; border-radius: 4px;
}
h4 div span{
	display: block; position: absolute; color: #fff; font-size: 14px; font-weight: 700;
	top: 0; left: 0; right: 0; bottom: 0; margin: auto;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}


p{display: block; font-size: 16px; line-height: 28px; color: #333; margin: 60px 0 120px;}

.bgLightBlue{width: 98%; background-color: #eaf7fd;}



.services h3{margin-bottom: 40px;}


.services{height: 500px !important; position: relative;}

.services div.imgBox{width: 50%; height: 500px; position: absolute; top: 0; bottom: 0; margin: auto; overflow: hidden;}
.service1 div.imgBox{right: 0; border-radius: 30px 0 0 30px;}
.service2 div.imgBox{left: 0; border-radius: 0 30px 30px 0;}

.services div.main_container{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto !important;}
.services div.main_container div.contents{
	width: 500px; height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	position: absolute; top: 0; bottom: 0; margin: auto;
}

@-moz-document url-prefix() {
    .services div.main_container{
        top: 15%;
		bottom: unset;
    }
}

.service1 div.main_container div.contents{left: 50px;}
.service2 div.main_container div.contents{right: 50px;}

.service2{margin: 80px 0 120px;}




/*====== アニメーション =====*/
/* scroll-fade anmt_lb2rt anm_delay4 */

.anmt_delay1{transition: all 1.2s ease-in .1s !important;}
.anmt_delay2{transition: all 1.2s ease-in .2s !important;}
.anmt_delay3{transition: all 1.2s ease-in .3s !important;}
.anmt_delay4{transition: all 1.2s ease-in .4s !important;}
.anmt_delay5{transition: all 1.2s ease-in .5s !important;}
.anmt_delay6{transition: all 1.2s ease-in .6s !important;}
.anmt_delay7{transition: all 1.2s ease-in .7s !important;}
.anmt_delay8{transition: all 1.2s ease-in .8s !important;}
.anmt_delay9{transition: all 1.2s ease-in .9s !important;}
.anmt_delay10{transition: all 1.2s ease-in 1.0s !important;}
.anmt_delay11{transition: all 1.2s ease-in 1.1s !important;}
.anmt_delay12{transition: all 1.2s ease-in 1.2s !important;}
.anmt_delay13{transition: all 1.2s ease-in 1.3s !important;}
.anmt_delay14{transition: all 1.2s ease-in 1.4s !important;}
.tranNone{transition: all 0s ease-in 0s !important;}

.anmt_opacity0, .anmt_opacity0_2, .anmt_opacity0_3{ 
	-webkit-opacity: 0; opacity: 0;
}

.anmt_opacity1{
	-webkit-opacity: 1 !important; opacity: 1 !important;
	transition: all .8s ease-in;
}

.anmt_opacity1_2{
	-webkit-opacity: .1 !important; opacity: .1 !important;
	transition: all .8s ease-in;
}

.anmt_opacity1_3{
	-webkit-opacity: .2 !important; opacity: .2 !important;
	transition: all .8s ease-in;
}

.anmt_l2rScale{
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(-100%) scale(-1);
	transform:translateX(-100%) scale(-1);		
}

.anmt_l2rScale_trsfrm{
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translateX(0) scale(-1) !important;
	transform:translateX(0) scale(-1) !important;
	transition: all .8s ease-in;
}

.anmt_r2lScale{
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(100%) scale(1);
	transform:translateX(100%) scale(1);
}

.anmt_r2lScale_trsfrm{
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translateX(0) scale(1) !important;
	transform:translateX(0) scale(1) !important;
	transition: all .8s ease-in;
}

.anmt_l2r, .anmt_menu, .anmt_l2r_opa{ /* 左から右に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(-100%);
	transform:translateX(-100%);	
}

.anmt_r2l{ /* 右から左に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateX(100%);
	transform:translateX(100%);	
}

.anmt_l2r2l_trsfrm{ /* 左右に動くアニメーション */
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translateX(0) !important;
	transform:translateX(0) !important;
	transition: all .8s ease-in;
}

.anmt_l2r_opa_trnsfrm{
	-webkit-opacity: .2 !important; opacity: .2 !important;
	-webkit-transform:translateX(0) !important;
	transform:translateX(0) !important;
	transition: all .8s ease-in;
}

.anmt_t2b{ /* 上から下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateY(-200px);
	transform:translateY(-200px);	
}

.anmt_b2t{ /* 下から上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translateY(200px);
	transform:translateY(200px);	
}

.anmt_t2b2t_trsfrm{ /* 上下に動くアニメーション */
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translateY(0) !important;
	transform:translateY(0) !important;
	transition: all .8s ease-in;
}

.anmt_lb2rt{ /* 左下から右上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(-250px,150px);
	transform:translate(-250px,150px);	
}

.anmt_rb2lt{ /* 右下から左上に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(200px,100px);
	transform:translate(200px,100px);	
}

.anmt_lt2rb{ /* 左上から右下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(-250px,100px);
	transform:translate(-250px,100px);	
}

.anmt_rt2lb{ /* 右上から左下に動くelement */
	-webkit-opacity: 0; opacity: 0;
	-webkit-transform:translate(250px,-100px);
	transform:translate(250px,-100px);	
}

.anmt_angle_trnsfrm, .logo_trnsfrm{ /* 上下左右に動くアニメーション */ /* ロゴを動かさない場合は.logo_trnsfrmを外す */
	-webkit-opacity: 1 !important; opacity: 1 !important;
	-webkit-transform:translate(0px,0px) !important;
	transform:translate(0px,0px) !important;
	transition: all .8s ease-in;
}