@charset "utf-8";

/* commmon */

body {
    font-family: Lato, "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:25px;
	font-size:15px;
	color:#414141;
	position:relative;
}

p{
  font-size: 17px;
}
#mainvd h1{font-size:30px; margin-bottom:8px; color:#000080; border-bottom: 1px solid #fdf5e6; display: block; padding:0 10px 11px 0;}
h2{font-weight:600; font-size:27px;border-bottom: 1px solid  #D1E0E8; color:#00AEE6;}
h2 span{display: inline-block;border-bottom: 1px solid #00AEE6;padding: 10px 20px 12px 0px;line-height: 1.25;}
h3{font-size:20px; font-weight:400;}
.head_p{font-weight:500;line-height:25px;position: relative; padding:9px 0 6px 26px; background: #F9FcFc;}
.head_p::after,.head_p::before {display: block; content: ''; position: absolute;}
.head_p::after {top: 16px;left: 5px; width: 9px; height: 9px; border-right: 2px solid #0F6EB7; border-bottom: 2px solid #053B61; -webkit-transform: rotate(-45deg);	transform: rotate(-45deg);}

ul,li{list-style: none;}
hr{margin:0 auto;}
.inlineBlock>li{display: inline-block; vertical-align: top;}
.align_t>li{vertical-align: top;}
a{text-decoration: none;}
.inner,.inner_u,.inner_m,.inner_d{width:1060px; padding:0 20px; margin:0 auto; box-sizing: border-box; overflow: hidden;}
.article_l{float: left; margin-right:20px;}
.article_r{overflow:hidden;}
.float_r{float: right;}
.article_wrapper{overflow: hidden;}
.center{text-align: center;}
.left{text-align:left;}
.red{color:#EB1D24;}
.caption{font-size:13px; color:#5F5F5F;}

/*header*/
header{border-bottom:1px solid #D5D5D5;box-shadow: 1px -1px 0 #00aee6 inset;}
.header_wrapper{overflow:hidden; width:1060px;padding:0 20px;margin:0 auto;box-sizing: border-box;}
.header_l{float:left; overflow:hidden;}
.header_l li:first-child{margin-right:15px;}
.header_r{float:right; text-align: right;}

header .header_r{margin:5px 0 0 0; padding:0px 0;}
.h_contact{font-size:16px; font-weight:500; padding:11px 10px 11px 60px; margin-right:10px; background-image:url(../img/contact.png); background-repeat: no-repeat;background-size: 24%; background-position: 11.5%;}
.h_case{font-size:16px; font-weight:500; padding:11px 10px 11px 40px;background-image:url(../img/case.png); background-repeat: no-repeat;background-size: 31.3%; background-position: 9%;}
.h_hyouka{font-size:16px; font-weight:500; padding:11px 10px 11px 60px; margin-right:10px; background-image:url(../img/hyouka.png); background-repeat: no-repeat;background-size: 22%; background-position: 11.5%;}
.h_tel{font-size:16px; font-weight:500; padding:11px 10px 11px 60px;background-image:url(../img/tel.png); background-repeat: no-repeat;background-size: 23%; background-position: 9%;}

.h_contact,.h_case,.h_hyouka,.h_tel {position: relative;color: #00aee6;transition: all 0.3s;display: block;}

.h_contact::before, .h_contact::after, .h_case::before, .h_case::after, .h_hyouka::before, .h_hyouka::after,.h_tel::before, .h_tel::after {
  content: '';position: absolute;transition: all 0.3s;bottom: 0;left: 0;width: 100%;height: 100%;z-index: 1;}

.btn-action::before {opacity: 0;background: rgba(0,174,230,0.15);transform: scale(1, 0.1);}

.btn-action:hover::before {opacity: 1;transform: scale(1, 1);}

.btn-action::after {transition: all 0.3s;/*border: 1px solid #00aee6;*/}

.btn-action:hover::after {transform: scale(1, .1);opacity: 0;}

 nav{padding:20px 0px 25px;text-align: center;position: relative;background: #fff;}

/*g-nav*/

.g-inner{width:1020px;margin:0 auto;}

#global-nav .article_l{display: none;}

#global-nav ul li{position: relative;text-decoration: none;padding:0 20px;border-right:1px solid #dff0f4;}

#global-nav ul li:last-child{border-right:none;}

#global-nav ul li::after {position: absolute;bottom: -6px;left: 0;content: '';width: 100%;height: 2px;background: #00aee6;opacity: 0;visibility: hidden;transition: .4s;}
#global-nav li:hover::after{bottom: -25px;opacity: 1;visibility: visible;}

#global-nav ul li a{color:#636363;}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2;width: 100%;transition: .3s;transform: translateY(-120%);}
.is-show {transform: translateY(0);}

nav.clone-nav{background: rgba(255,255,255,0.95);padding:15px 0px 10px; box-shadow: 0px 3px 6px -3px rgba(0,0,0,0.5);-webkit-box-shadow: 0px 3px 6px -3px rgba(0,0,0,0.5);
			  -moz-box-shadow: 0px 3px 63px -3px rgba(0,0,0,0.5);}
#global-nav.clone-nav ul {float:right;}
#global-nav.clone-nav ul li{border:none; font-size:15px;padding:10px 10px 0px;}
#global-nav.clone-nav ul li a{color:#494949;}
#global-nav.clone-nav .article_l{display: block;}
#global-nav.clone-nav li:hover::after{bottom: -21px;}

/*bredcrumbs*/
#breadcrumbs{
  background:#F5F5F5;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  box-shadow: 0 0 2px rgba(200,200,200,0.1);
  overflow: hidden;
  width: 100%;
  font-size:13px;
}

#breadcrumbs li{
  display: inline-block;
}

#breadcrumbs a{
  padding: 0px 10px 0px 40px;
  display: inline-block;
  text-decoration: none;
  color:#5F5F5F;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f8f8f8, #eee);
}

#breadcrumbs li:first-child a{
  padding-left: 300px;
}

#breadcrumbs a:hover{
  background: #fff;
}

#breadcrumbs a::after,
#breadcrumbs a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#breadcrumbs a::after{
  z-index: 2;
  border-left-color: #eee;
}

#breadcrumbs a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}

#breadcrumbs a:hover::after{
  border-left-color: #fff;
}

#breadcrumbs .current,
#breadcrumbs .current:hover{
  font-weight: 400;
  background: none;
}

#breadcrumbs .current::after,
#breadcrumbs .current::before{
  content: normal;
}


/*list design*/


ul.arrow_square li, ul.tri li, ul.arrow li,ul.arrow_sim li,ul.circle li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 7px 0 7px 0px;
  line-height: 20px;
}
ul.arrow_square li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 15px;
  width: 15px;
  border-radius: 10%;
  background: #666;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.arrow_square li:after{
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ul.tri li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 6px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #777;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

ul.arrow li::after,
ul.arrow li::before {
  display: block;
  content: '';
  position: absolute;
}
ul.arrow li::after {
  top: 12px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
ul.arrow li::before {
  top: 15px;
  left: 0px;
  width: 11px;
  height: 2px;
  background-color: #777;
}

ul.arrow_sim li::after,
ul.arrow_sim li::before {
  display: block;
  content: '';
  position: absolute;
}
ul.arrow_sim li::after {
  top: 6px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

ul.circle li::after{
	display: block;
	content: '';
	position: absolute;
	top: 8px;
	left: 3px;
	width: 6px;
	height: 6px;
	background-color: #fff;
	border: 1px solid #00AEE6;
	border-radius: 100%;
}

/*btn_design*/

.btn{background: #00AEE6; border: 1px solid #00AEE6;display: inline-block; color:#fff; padding:7px 12px; border-radius: 5px;margin-top:15px;-webkit-transition: 0.3s ease-in-out;  -moz-transition: 0.3s ease-in-out;  -o-transition: 0.3s ease-in-out;  transition: 0.3s ease-in-out;}
.btn:hover{background: #fff; color:#00AEE6;  border-radius: 5px;margin-top:15px}

.arrow_btn{
  position:relative; display: inline-block; padding: 5px 35px 6px 20px;  margin: 7px 0 7px 0px;  line-height: 20px;border:1px solid #00AEE6;background: #00AEE6;color:#fff;border-radius: 100px;-webkit-transition: 0.3s ease-in-out;  -moz-transition: 0.3s ease-in-out;  -o-transition: 0.3s ease-in-out;  transition: 0.3s ease-in-out;}

.arrow_btn:hover{background: #fff;color:#00AEE6;border-radius: 100px;}

.arrow_btn::after,
.arrow_btn li::before {
  display: block;
  content: '';
  position: absolute;
}
.arrow_btn::after {top: 11px; right:15px; width: 6px; height: 6px; border-right: 2px solid #00AEE6; border-bottom: 2px solid #00AEE6; -webkit-transform: rotate(-45deg);  transform: rotate(-45deg);-webkit-transition: 0.2s ease-in-out;  -moz-transition: 0.2s ease-in-out;  -o-transition: 0.2s ease-in-out;  transition: 0.2s ease-in-out;}

.arrow_btn:hover::after {border-right: 2px solid #fff; border-bottom: 2px solid #fff;}

.arrow_btn::before { counter-increment: list;  content: "";  display: block;  position: absolute;  right: 10px;  height: 15px;  width: 15px;  border-radius: 100%;
  background: #fff;  top: 49%;  -moz-transform: translateY(-50%);  -webkit-transform: translateY(-50%);  -o-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.arrow_btn:hover::before {background: #00AEE6;}

.underline{position: relative;margin-bottom: 1em;}
.underline:before {content: '';position: absolute;bottom: -15px;display: inline-block;width: 60px;height: 5px;left: 50%;
	-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);background-color: black;border-radius: 5px;}

/*footer*/
footer{border-top:1px solid #D1E0E8; font-size:13px; padding:40px 0 0px;background: #EFF1F5;}
footer a{color:#676767;}
footer a:hover{text-decoration: underline;}

.inner_u>ul>li{width:23%; border-right:1px solid #E8E8E8; box-sizing:border-box; margin-right:2%; height:205px; padding:10px 10px;margin-bottom:20px;}
.inner_u>ul>li:last-child{width:25%; border:none; margin-right:0%; padding:10px 0;}
.f_contact{padding:6px 10px 14px 110px; margin:2px 9px 0 0;background:#fff;background-image:url(../img/f_contact.png);background-repeat: no-repeat;background-size:37%; background-position: 0%; margin-bottom:10px; box-sizing: border-box; }
.f_case{padding:6px 10px 14px 110px; margin-right:9px;background: #fff; background-image:url(../img/f_case.png); background-repeat: no-repeat;background-size: 37%; background-position: 0%;box-sizing: border-box;}
.f_hyouka{padding:6px 10px 14px 110px; margin:2px 9px 0 0;background:#fff;background-image:url(../img/f_hyouka.png);background-repeat: no-repeat;background-size:37%; background-position: 0%; margin-bottom:10px; box-sizing: border-box; }
.f_tel{padding:6px 10px 14px 110px; margin:2px 9px 0 0;background:#fff;background-image:url(../img/f_tel.png);background-repeat: no-repeat;background-size:37%; background-position: 0%; margin-bottom:10px; box-sizing: border-box; }

.f_contact,.f_case, .f_hyouka,.f_tel {position: relative;color: #00aee6;transition: all 0.3s; display: block; font-size:17px; font-weight:500;}
.f_contact::before, .f_contact::after, .f_case::before, .f_case::after, .f_hyouka::before, .f_hyouka::after,.f_tel::before, .f_tel::after {
  content: '';position: absolute;transition: all 0.3s;bottom:0;left: 0;width: 100%;height: 98%;z-index: 1;}
a.f_contact:hover,a.f_case:hover, a.f_hyouka:hover,a.f_tel:hover{text-decoration: none;}

footer .btn-action::after {border: 1px solid #00aee6;}
.copyright{text-align: right; display: block; padding-top:12px;}
footer .inner_d{width:100%; background: #AAAAAA; color:#fff; border-top:1px solid  #BFBFBF;font-size:12px; padding-bottom:12px;}
footer .inner_d ul li{border-right:1px solid #fff; padding:0px 10px;}
footer .inner_d ul li a{color:#fff;font-weight:200;}
footer .inner_d ul li:last-child{border-right:none; padding-right:0;}
footer .inner_d .article_wrapper{margin:0 auto;max-width:1020px;}

.s_contact {background: #00AEE6; border:1px solid #fff; box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.4); display: block; width: 70px; height: 70px; position: fixed; right: -70px; top: 120px; text-align: center; color:#fff; font-size:13px; font-weight:600;}

.s_case{background: #FFA700; border:1px solid #fff; box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.4); display: block; width: 70px; height: 70px;position: fixed;right: -70px; top: 191px;text-align: center; color:#fff; font-size:13px;font-weight:500;}

.s_contact img,.s_case img{width:40px; height:40px; display: block; margin:5px auto 0;}

.topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:80px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:rgba(0,0,0,0.5); /*以下、デザインはご自由に！！*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  text-align:center;
  line-height:22px;
  border-radius:30px;
  padding-top:30px;
  box-sizing:border-box;
	background: #aaa;width: 65px;height:35px;border-radius:5px 5px 0 0;
}
.topBtn:before {
  content:'\25B2';
  position:absolute;
  top:6px;
  left:0;
  width:100%;
  text-align:center;
  font-size:17px;
}
.topBtn:hover {
  opacity:0.7;
}

/*fadein*/

.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
    }

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }


/*rotate mask*/

.under {position:relative;-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transition:all 0.6s ease;transition:all 0.6s ease;}
.under:hover{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);opacity:1;}
.under .mask {width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;background-color:	rgba(255,255,255,1);-webkit-transform:rotateY(-180deg);
	transform:rotateY(-180deg);-webkit-transition:all 0s ease;transition:all 0s ease;}
.under:hover .mask {-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);opacity:1;}

@media screen and (max-width : 640px ){
  header {box-shadow: none;}
  .header_wrapper{width:100%;}
  .header_l{margin-top: 10px!important;}
  .header_l > ul{display: flex; line-height: 0;}
  .header_l > ul > li{width: 50%;}
  .header_l > ul > li > a{display: block;}
  .header_l > ul > li > a > img{width: 100%;}
  .header_r{float: left;text-align: left; margin: 0px!important;margin-bottom: 10px!important;}

  #global-nav .article_l{padding-left: 15px;}
  #global-nav ul li::after{content: none;}
  nav{padding-bottom: 20px;}
  nav.clone-nav{z-index: 999;}

  #breadcrumbs li:first-child a {padding-left: 15px;}

  .g-inner{width:100%;}
  .inner, .inner_u, .inner_m, .inner_d {width:100%;}
  .inner_u > ul > li{width:auto;height: auto;}
  .inner_u > ul > li:last-child{width:100%;height: auto;}
  .s_contact{display:none;top:200px;z-index: 999;}
  .s_case{top:271px;z-index: 999;}
  #mainvd h1{line-height: 1.25;}
  #mainvd .article_r{width:100%!important;}
  .copyright{text-align:center;}

.header_r  .inlineBlock{display: flex;}
.header_r  .inlineBlock>li > a{padding: 11px 10px 11px 52px;}
#one .container_contact a.f_hyouka{margin: 0px;
    padding: 13px 16px;}
}