@charset "UTF-8";
/*////////////////////////*/
/*ファーストビュー*/
/*////////////////////////*/

/*トップスライダー*/
.top-slider {
	position: relative;
	width: 100%;
	height: calc(100vh - 80px) ;
}

.top-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width : calc(100% - 162px) ;
  height: 100%;
  background: #194b96;
}

.top-ph {
  position: absolute;
  top: 0;
  right: 0;
  width : 75% ;
  height: 90%;
}
/*Scroll誘導アニメ*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  left:3%;
  bottom:0;
    /*全体の高さ*/
  height:150px;
  z-index: 1;
}
/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left:-22px;
  top: -30px;
    /*テキストの形状*/
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  transform: rotate(90deg);
}
/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 150px;
  background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:100px;
    opacity: 1;
  }
  100%{
    height:0;
    top:150px;
    opacity: 0;
  }
}

.slider1 .swiper-slide {
	height: unset;
}
.swiper-custom-parent {
  position: relative;
}
.slider1 {
  position: unset;
  width: 100%;
  height: 100%;
}
.swiper-pagination-bullet {
	width: 8%;
    height: 3px;
    border-radius: unset;
    background: #808080;
}
.top-catch {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	-webkit- transform: translateX(-50%) translateY(-50%);
	width: 85%;
	/* background:rgba(0,0,0,0.7); */
}

.BTNnews a {
  border: solid #fff .5px;
  padding: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition: all 0.6s ease 0s;
}
.BTNnews a:hover {
  color: #194b96;
  background: #fff;
  transition: all 0.6s ease 0s;
}

/*////////////////////////*/
/*セカンドビュー*/
/*////////////////////////*/

.index-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  width: 100%;
}
.top-bg02 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width : 65% ;
  height: 400px;
  background: #194b96;
}

.box-ph {
	height: 200px;
}





/*PCのみ*/
@media (min-width: 768px) {

		.index-news01 {
			width: 240px;
		}
		.index-news03 {
			width: 110px;
		}

    .ph01 {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 55%;
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        left: 7%;
        bottom: -100px;
        top:unset;
        /* background: #000; */
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        right: 7%;
        bottom: -100px;
        top:unset;
        /* background: #000; */
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 1.4rem;
        color: #000;
    }

}

@media (max-width: 768px) {

		.top-slider {
			height: calc(100vh - 60px);
			z-index: unset;
		}
    .top-bg {
      width : 100% ;
      height: 100%;
    }
    .top-ph {
      width : 100% ;
      height: 48%;
    }
    .top-catch {
      height: 100% ;
    }
    .topread {
      position: absolute;
      top: 50%;
    }
    .top-catch-bg {
      /* position: absolute;
      top: 25%;
      width: 100%;
      height: 170px;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1; */
    }
    .newsbox {
      position: absolute;
      bottom: 5%;
      width: 100%;
    }
		.main-logo {
		    padding: 30px;
		}
		.h300 {
			height: 220px;
		}
    .slider2 {
      width: 75%;
    }
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
      left: 0%;
      /* background: #000; */
    }
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        right: 0%;
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 1.4rem;
        color: #000;
    }
    .top-bg02 {
      width : 100% ;
      height: 100%;
    }

}