@charset "utf-8";

/* base ------------------------*/
#wrapper { position:relative; }
.inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 4%; }
.inner.large { max-width: 2400px; padding: 0; }
.narrow { width: 100%; max-width: 1000px; margin: 0 auto; }
.sec { padding-top: 10rem; padding-bottom: 10rem; }
.secTop { padding-top: 0; padding-bottom: 10rem; }
.secLast { padding-top: 10rem; padding-bottom: 0; }
.subSec:not(:last-child) { margin-bottom: 5rem; }
.bgBlue { background: #f5fafd; }

.anchorLink { padding-top: 90px; margin-top:-90px; }

/*header---------------------------------------------------------*/
#header { width: 100%; position: fixed; top: 0; left: 0; z-index: 101; padding: 2rem 3% 0; background: #fff; font-size: .9rem; font-weight:500; letter-spacing: 1px; -webkit-transition:all .6s; transition:all .6s; }
#header .sitename { width: 16%;  -webkit-transition:all .6s; transition:all .6s; }
#header .sitename .logo { max-width: 15rem; }
#header .sitename a { width: 100%; height: 100%; }
#header.scroll { padding-top: .5rem; }
#header.scroll .sitename { width: 11%; }

#header #gnav a { width: 100%; }

/*プルダウンメニュー*/
/*==ナビゲーション全体の設定*/
#gnav{
	width: 75%;
	padding-top: 60px;
  text-align: center;
	 -webkit-transition:all .6s; transition:all .6s;
}
#header.scroll #gnav{ padding-top: 35px; }

/*ナビゲーションを横並びに*/
#gnav ul{
  list-style: none;
}
/*2階層目以降は横並びにしない*/
#gnav ul ul{
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
#gnav ul li{
  position: relative;
}

/*ナビゲーションのリンク設定*/
#gnav ul li a{
  display: block;
  text-decoration: none;
  padding:.8rem 1.5rem;
  transition:all .3s;
  line-height: 1.4;
}

#gnav ul li li a{
}

#gnav ul li a:hover{
  color: #ffffff;
  background: #2990d5;
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
#gnav ul li.has-child::before{
  content:'';
  position: absolute;
  left:8px;
  top:20px;
  width:6px;
  height:6px;
  border-top: 2px solid #999;
    border-right:2px solid #999;
    transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
#gnav ul ul li.has-child::before{
  content:'';
  position: absolute;
  left:6px;
  top:25px;
  width:6px;
  height:6px;
    border-top: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
#gnav li.has-child ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  left:0;
  top:48px;
  z-index: 4;
    /*形状を指定*/
  background:#aaa;
  width:180px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
#gnav li.has-child:hover > ul,
#gnav li.has-child ul li:hover > ul,
#gnav li.has-child:active > ul,
#gnav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
#gnav li.has-child ul li a{
	padding: 1rem;
  color: #fff;
  border-bottom:solid 1px rgba(255,255,255,0.6);
}

#gnav li.has-child ul li:last-child a{
  border-bottom:none;
}

#gnav li.has-child ul li a:hover,
#gnav li.has-child ul li a:active{
  background:#2990d5;
}


/*==3階層目*/

/*3階層目の位置*/
#gnav li.has-child ul ul{
  top:0;
  left:182px;
  background:#bfbfbf;
}

#gnav li.has-child ul ul li a:hover,
#gnav li.has-child ul ul li a:active{
  background:#448ED3;
}


/* Toggle Button */
#nav-toggle { display:none; }

/* button */
.btn {
  padding: .6em 4rem; 
  text-align: center; 
  color: #52a5e8; 
  border: 1px solid #94c7f1;
  font-size: .9rem;
  font-weight: 500;
  font-family: 'Lato', sans-serif;}

.btn span { position: relative; display: block; }
.btn span:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: solid 1px #94c7f1;
  border-right: solid 1px #94c7f1;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -4px;
  transform: rotate(45deg);
}

/* Rectangle Out */
.btn {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  background: #fff;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #52a5e8;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.btn:hover, .btn:focus, .btn:active {
  color: #fff;
}
.btn:hover:before, .btn:focus:before, .btn:active:before {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.btn2 { color: #fff; background: #52a5e8; }
.btn2:before { background: #fff; }
.btn2:hover, .btn2:focus, .btn2:active { color: #52a5e8; }

a.arrow { position: relative; }
a.arrow:before { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-14px); transform: translateY(-14px);
content: ""; width: 32px; height: 28px; background: url("../img/arrow.png") no-repeat 0 0 / 28px;  -webkit-transition:all .3s; transition:all .3s; }
a.arrow:hover:before { right: 10px; }



/* contents ------------------------*/
#contents { position: relative; background: #fff; }

.secTtl { margin-bottom: 1em; font-size: 1.9rem; letter-spacing: 18px; }
.secTtl span { display: block; font-size: 1rem; color: #2990d5; letter-spacing: 9px; font-family: 'Lato', sans-serif; } 

/* contents ------------------------*/
#contactBox div { padding: 3rem 3%; text-align: center; border: 3px solid #d4e9f7; }
#contactBox .txt { font-size: 1.1rem; }
#contactBox ul { max-width: 900px; margin: 2.3rem auto 0; }
#contactBox ul li { width: 48%; }
#contactBox ul li a { display: block; color: #fff; padding: 1rem; font-size: 1.2rem; border-color:#d5e8f6; }
#contactBox ul li:nth-child(1) a { background: #4ca9e7; }
#contactBox ul li:nth-child(2) a { background: #2990d5; }
#contactBox ul li a:hover { color: #2990d5; }
#contactBox ul li a.btn:before { background: #d5e8f6; }
	

/*footer---------------------------------------------------------*/
#pagetop { position: fixed; bottom: 122px; right: 20px; z-index: 50; width: 100px; margin: 0; }
#footer { position: relative; margin-top: 13rem; background: #f3f3f3; }
.footer1 { max-width: 100%; padding: 4rem 4%; }
.flogoArea { position: absolute; top: -125px; }
.flogoArea li { display: flex; flex-direction: column; }
.flogo { width: 260px; }
.flogoArea .name { margin-top: auto; margin-left: 1rem; color: #2d83bc; font-size: 1.1rem; line-height: 1; }

#fnav { width: 100%; }
#fnav ul { width: 15%; }
#fnav li a { line-height: 1.2; }
#fnav li:not(.sub) { margin-bottom: .8rem; border-bottom: 1px solid rgba(0,119,199,.57); }
#fnav li,
#fnav li:not(.sub) a { color: #0077c7; font-size: .9rem; }
#fnav li.sub a { position: relative; padding-left: .8rem; font-size: .8rem; }
#fnav li.sub a:before { position: absolute; top: 5px; left: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #0077c7; }

.footer2 { max-width: 100%; padding: 1rem 4%; color: #fff; background: #2d83bc;  }
.copyright { margin: 0; font-size: .8rem; }
.footer2 li { font-size: .8rem; }
.footer2 li a { color: #fff; }
.footer2 li:last-child a { padding-left: 1rem; margin-left: 1rem; border-left: 1px solid #fff; }

#fnav li a:hover,
.footer2 li a:hover { color: #ccc; }

#floatingBtn { display: none; }
#floating { position: fixed; top: 348px; right: 0; }
#floating li { width: 90px; height: 90px; }
#floating li a { display: block; width: 100%; height: 100%; padding: 13px 0.5rem 0; text-align: center; font-size: .8rem; color: #0f76b9; border: none; }
#floating li .icon { width: 46%; margin: 0 auto; }
#floating li .txt { margin: .7rem 0 0; font-size: .7rem; line-height: 1; }
#floating li:nth-child(1) a { background: #fff; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; }
#floating li:nth-child(2) a { background: #f1f9fe; border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; }
#floating li:nth-child(3) a { background: #e1f3ff; border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; }
#floating li a:hover { color: #2990d5; }
#floating li a.btn:before { background: #e5e5e5; }



/*================================================================*/
/*背景色が伸びて出現 共通*/
.bgextend{
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }
  to {
    opacity:1;
}
}

/*中の要素*/
.bgappear{
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 3.5s;
  animation-fill-mode:forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond{
  0% {
  opacity: 0;
  }
  100% {
  opacity: 1;
}
}

/*--------- 左から --------*/

.bgLRextend::before{
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2990d5;/*伸びる背景色の設定*/
	z-index: 1;
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}







/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 1024以上(PC) */
@media screen and (min-width: 1024px) {

}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1024px) {
	html { font-size:90%; }
	.inner { max-width: 100%; }
	.sec { padding-top: 5rem; padding-bottom: 5rem; }
	.secTop { padding-top: 0; padding-bottom: 5rem; }
	.secLast { padding-top: 5rem; padding-bottom: 0; }
	.secTtl { font-size: 1.6rem; }

/* header ------------------------ */
	#header { height: 75px; }
	#header.scroll #gnav ul { padding-top: 0!important; }
	#header .logo { max-width: 180px; max-height: 180px; }
	#header.scroll .sitename { width: 19%; }
	
#gnav {
	position: fixed;
	z-index:999;
	/* 開いてないときは画面外に配置 */
	top: 0;
	right:-100vw;
	width: 100%;
	margin: 0;
	padding: 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
    }
#gnav ul {
	display: block;
	font-size: 14px;
	background: #3ea9ea;
	width: 100%; float: none;
	padding: 0;
 }

#gnav li { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; }

#gnav li a {
	position:relative;
	width: 100%;
	display: block;
	padding: 20px 0!important;
	margin-left: 0;
	color: #fff;
	font-size: .9em;
	text-align: center;
	border-bottom: 1px solid #ccc;
}
#gnav li a:before { content: none; }

#gnav ul li a::after { position: absolute; bottom: -1px; left: 0; content: ''; width: 100%; height: 1px; background: rgba(255,255,255,0.4); opacity: 0; visibility: hidden; transition: .3s; }
#gnav ul li a:hover::after { opacity: 1; visibility: visible;}

/*プルダウンメニュー*/
#gnav{ 
	height: 100%; 
	padding: 0; 
	background: rgba(108,175,224,.7);
  }
  
  #gnav ul{
    display: block;
  }
  
  #gnav li.has-child ul,
  #gnav li.has-child ul ul{
    position: relative;
  left:0;
  top:0;
  width:100%;
  visibility:visible;/*JSで制御するため一旦表示*/
  opacity:1;/*JSで制御するため一旦表示*/
  display: none;/*JSのslidetoggleで表示させるため非表示に*/
  transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
  
#gnav ul li a{
  border-bottom:1px solid #ccc;
}
	
#gnav ul li li a {
    padding: 30px 0;
}

/*矢印の位置と向き*/

#gnav ul li.has-child::before{
  right:20px;
  top: 28px;
  border-color: #fff;
	z-index: 1;
}

#gnav ul ul li.has-child::before{
    transform: rotate(135deg);
  left:20px;
}
    
#gnav ul li.has-child.active::before{
    transform: rotate(-45deg);
}

/* Toggle Button */
#nav-toggle { display:block; position: fixed; right: 20px; top: 27px; width: 28px; height: 24px; cursor: pointer; z-index: 9999; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height: 1px; width: 100%; background: #582E14; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }

    /* #nav-toggle 切り替えアニメーション */
	/*.open #nav-toggle span { background: #fff; }*/
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
	.open #nav-toggle span:nth-child(1),
	.open #nav-toggle span:nth-child(3) { background: #fff; }
	
    /* #gnav スライドアニメーション */
    .open #gnav { -moz-transform: translateX(-100vw); -webkit-transform: translateX(-100vw); transform: translateX(-100vw); }





/* footer ------------------------*/
	#pagetop { width: 80px; }
	#copyright { order: 4; width: 100%; text-align: center; }
	#floating { top: auto; bottom: 150px; }
	#floating li { width: 100px; height: 100px; }
	#floating li a { font-size: .7rem; }
	.footer1 { padding-right: 18%; }
	#fnav ul { width: 18%; }
	
	
	
	
	
	
	
}


	
/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
	.btn { min-width: 100%; }

/* header------------------------*/
	#header { height: 62px; }
	#header .sitename { width: 40%; }
	#header.scroll .sitename { width: 27%; }
	#header .gnav { width: 40%; background: none; }
	#nav-toggle { top: 22px; }
	#gnav ul li a{ padding:  19px 0; }
	#gnav ul li li a { padding: 19px 0; }
	
	.secTtl { font-size: 1.2em; }
	.subSec:not(:last-child) { margin-bottom: 3rem; }
	
	/*--footer---------------------------------------------------------*/
	#contactBox ul li a { font-size: 1rem; }
	#pagetop { display: none; }
	
	#footer { margin-bottom: 60px; }
	.footer1 { padding-right: 4%; padding-bottom: 2rem; }
	#fnav ul { width: 46%; margin-bottom: 2rem; }
	#fnav ul:last-child { margin-bottom: 0; }
	.flogoArea { top: -88px; }
	.flogo { width: 180px; }
	.fnav { display: none; }
	.copyright { order: 2; }
	
	#floating { top: auto!important; bottom: 0!important; width: 100%;
	display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	justify-content:space-between; -webkit-justify-content:space-between; }
	#floating li { width: 50%; height: 50px; }
	#floating li:nth-child(4) { width: 100%; }
	#floating li a { padding: 12px 10px; border-bottom: none; }
	#floating li .btn {
	display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	justify-content:space-between; -webkit-justify-content:space-between; }
	#floating li .icon { width: 15%; max-width: 30px; }
	#floating li .txt { width: 85%; margin-top: 6px; font-size: 1.1rem; }
	#floating li:nth-child(1) a { border-left: none; }
	#floating li:nth-child(2) a { border-top: 1px solid #dcdcdc; }
	#floating li:nth-child(3) a { background: #e1f3ff; }
	
	#floating li a[target="_blank"]:not(.nonafter):after { content: none; }
	
	
	
	
	
}