/* CSS Document */

.pcOnly{display: none !important;}

/*====== Container Box =====*/
#wrapper{min-height: 100vh; padding-bottom: 150px; padding-top: 60px;}

.main_container{
	width: 94%;
    margin: 0 auto;
    position: relative;
    height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
    overflow: hidden;
}

.main_box{width: 100%;}


section{position: relative;}



/*======ヘッダー =====*/
header{
	display: block; position: fixed; top: 0; left: 0; width: 100%; height: 60px; overflow: hidden; background-color: #fff; z-index: 10; transition: height .3s ease-in;
}
header.open{height: 100vh;}

#logo{
	display: flex; align-items: center; position: absolute; top: 20px; left: 10px;
	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{
	display: block; font-weight: 700; line-height: 1em;
	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: 12px; margin-right: 5px;}
#logo span:nth-of-type(2){color: #0181c0; font-size: 20px;}


/*====== メニュー・グロナビ =====*/
#btnMenu{
	display: block; width: 40px; height: 40px; position: absolute; top: 10px; right: 10px; margin: auto; background-color: #0181c0;
}
#btnMenu path{
	display: block; width: 28px; height: 3px; position: absolute; left: 0; right: 0; margin: auto; background-color: #fff;
	transition: all .3s ease-in;
}
#btnMenu path:nth-of-type(1){top: 10px;}
#btnMenu path:nth-of-type(2){top: 0; bottom: 0;}
#btnMenu path:nth-of-type(3){bottom: 10px;}

#btnMenu.open path:nth-of-type(1){transform: rotate(45deg) translate(6px, 6px);}
#btnMenu.open path:nth-of-type(2){opacity: 0 !important; -webkit-opacity:0 !important;}
#btnMenu.open path:nth-of-type(3){transform: rotate(-45deg) translate(6px, -6px)}

#menu{
	display: block; position: absolute; width: 100%; top: 60px; left: 0; height: calc(100vh - 60px); background-color: #fff;
}


#menu_nav{width: 90%; margin: 40px auto 20px;}

#menu_nav div{font-size: 14px; font-weight: 400; color: #737373; margin-bottom: 20px;}
#menu_nav nav{
	display: block; width: 100%;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
#menu_nav nav a{
	display: block;
    width: 100%;
    padding: 20px 0 20px 24px;
    position: relative;
    border-bottom: 1px rgba(1,129,192,.5) solid;
}
#menu_nav nav a i{display: block; font-size: 14px; color: #0181c0; position: absolute; top: 0; bottom: 0; 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{
	width: 90%; margin: 60px auto 0;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

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

#menu_tel{
	display: block;
    width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
    padding-left: 50px;
    position: relative;
    margin-right: 28px;
    margin: 0 auto 40px;
}

#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: 90%;
    height: 56px;
    background-color: #0181c0;
    border-radius: 28px;
    margin: 0 auto;
}

.btnBlue.sml{width: 220px !important;}


.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; left: 0; right: 0; 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: 80%; margin: 30px auto 15px;}
button.btnBlue span{left: 0 !important; right: 0 !important;}



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

#footer{
	display:block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 85%;
	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-bottom: 20px;
	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: 12px; margin-right: 10px;}
#footerLogo span:nth-of-type(2){font-size: 20px;}


#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: 8px;}
#footerInfo div, #footerInfo div a{font-size: 12px; font-weight: 400; color: #fff;}
#footerInfo div a{display: inline-block; margin-right: 5px;}

#footerCopyright{
	display:block; margin-top: 15px; 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: 16px; font-weight: 700; line-height: 21px; margin: 0; color: #333;}

h3{
	display: block; position: relative; padding-left: 15px; color: #0181c0; font-size: 12px; font-weight: 700; margin-bottom: 10px;
	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: 7px; height: 7px; border-radius: 50%; content: "";
	position: absolute; top: 0; bottom: 0; left: 0; margin: auto; background-color: #0181c0;
}

h4{
	display: block; position: relative; padding-left: 16px; color: #333; font-size: 16px; font-weight: 700; 
	margin-bottom: 15px; padding-right: 70px;
	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: 8px; height: 8px; 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: 60px; height: 20px; border-radius: 4px;
}
h4 div span{
	display: block; position: absolute; color: #fff; font-size: 12px; 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: 12px; line-height: 20px; color: #333; margin: 20px 0 40px;}

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



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



.services div.imgBox{position: relative; width: 100%; height: 200px; overflow: hidden; border-radius: 0 0 20px 20px; margin-bottom: 20px;}

.services div.main_container div.contents{
	width: 100%;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

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






/*====== アニメーション =====*/
.anmt_delay2{transition: all .8s ease-in .2s !important;}
.anmt_delay4{transition: all .8s ease-in .4s !important;}
.anmt_delay6{transition: all .8s ease-in .6s !important;}
.anmt_delay8{transition: all .8s ease-in .8s !important;}
.anmt_delay10{transition: all .8s ease-in 1.0s !important;}
.anmt_delay12{transition: all .8s ease-in 1.2s !important;}
.anmt_delay14{transition: all .8s ease-in 1.4s !important;}
.tranNone{transition: all 0s ease-in 0s !important;}

.anmt_opacity0, .anmt_opacity0_2, .anmt_opacity0_3{ /* 左から右に動くelement */
	-webkit-opacity: 0; opacity: 0;
}

.anmt_opacity1{ /* 左から右に動くelement */
	-webkit-opacity: 1 !important; opacity: 1 !important;
	transition: all .8s ease-in;
}

.anmt_opacity1_2{ /* 左から右に動くelement */
	-webkit-opacity: .1 !important; opacity: .1 !important;
	transition: all .8s ease-in;
}

.anmt_opacity1_3{ /* 左から右に動くelement */
	-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_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, .anmt_menu{ /* 上から下に動く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;
}