@charset "utf-8";

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background:#001756;
	z-index: 9999999;
	text-align:center;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#splash-logo img {
    width: 200px;
    height: auto;
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2{
	display:block;
}

/*上に消えるエリア*/
body.appear .splashbg1{
	animation-name:PageAnime;
	animation-duration:1.0s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    bottom:50%;
	left:0;
    transform: scaleY(1);
    background-color:#182578;/*伸びる背景色の設定*/
}

@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}

	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*下に消えるエリア*/
body.appear .splashbg2{
    animation-name:PageAnime2;
	animation-duration:1.4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 50%;
	left:0;
    transform: scaleY(1);
    background-color:#182578;/*伸びる背景色の設定*/
}

@keyframes PageAnime2{
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	opacity: 0;/*はじめは透過0に*/
    position: relative;
    z-index: 1;
}

body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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


/* base
------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");
:root {
  --easing: cubic-bezier(.2, 1, .2, 1);
  --transition: .8s var(--easing);
  --color-base: #f8f8f8;
  --color-gray: #ddd;
  --color-theme: #f5695f;
  --color-theme-darken: #f12617;
  --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
  --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
  --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff,.2);
}

::-moz-selection {
  color: #fff;
  background: var(--color-theme);
}

::selection {
  color: #fff;
  background: var(--color-theme);
}

figure {
  margin: 0;
}

.l-section .l-inner {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

@media only screen and (max-width: 599px) {
  .pc-tab {
    display: none !important;
  }
}

/* slider */
[class*=swiper]:focus {
  outline: none;
}

.slide-media,
.thumb-media {
  position: relative;
  overflow: hidden;
}
.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*----------- top bnr --------------------------*/

.mv02 {
  margin-bottom: 16rem;
  /* ページネーション */
  /* フェードモード時 共通調整 */
  /* スライド */
  /* スライド アクティブ時 */
}
.mv02 .l-inner {
  padding-bottom: 0;
}
.mv02 .swiper-pagination {
  display: flex;
  position: absolute;
  z-index: 1;
  bottom: 180px;
  right: 30px;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin: auto;
}
.mv02 .swiper-pagination-bullet {
  display: block;
  width: 40px;
  height: 7px;
  margin-right: 8px;
  cursor: pointer;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: #CCC;
}
.mv02 .swiper-pagination-bullet-active {
  background-color: #00226d;
}
.mv02 .swiper-fade .swiper-slide {
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, transform !important;
  transition-property: opacity, transform, -webkit-transform !important;
  pointer-events: none;
}
.mv02 .swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.mv02 .slide {
  display: grid;
  place-content: center;
  height: 800px;
  padding: 0 8rem;
  text-align: center;
}

.mv02 .slide-media {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 80%;
  height: 80%;
}
.mv02 .slide-txtbox {
  -webkit-animation: 3s var(--easing) both;
          animation: 3s var(--easing) both;
  opacity: 0;
}
.mv02 .slide-txtbox {
  position: absolute;
  bottom: 200px;
  right: 0;
  padding: 50px 50px 50px 80px;
  background: linear-gradient(to right, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1.0) 20%, rgba(255,255,255, 1.0)100%);
}
.mv02 .slide-title {
	font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 2.6rem;
  line-height: 1.1;
  text-align: right;
  color: #00226d;
}

.mv02 .slide-text {
  font-size: 1.0rem;
  margin: 20px 0 0;
  text-align: right;
  color: #232323;
}
  /* =========================
タブレット
========================= */
@media (max-width:1024px){

.mv02 .slide{
  height: 70vh;
  padding: 0 4rem;
}

.mv02 .slide-media{
  width: 100%;
  height: 100%;
}

.mv02 .slide-txtbox{
  bottom: 120px;
  padding: 30px 30px 30px 60px;
}

.mv02 .slide-title{
  font-size: 2rem;
}

.mv02 .slide-text{
  font-size: 0.95rem;
}

.mv02 .swiper-pagination{
  bottom: 120px;
}

}


/* =========================
スマホ
========================= */
@media (max-width:768px){

.mv02{
  margin-bottom:4rem;
}

.mv02 .slide{
  height: 60vh;
  padding:0 20px;
}

.mv02 .slide-media{
  width:100%;
  height:100%;
}

.mv02 .slide-txtbox{
  position:absolute;
  bottom:40px;
  right:0;
  left:0;
  padding:20px;
  background:rgba(255,255,255,0.85);
}

.mv02 .slide-title{
  font-size:1.6rem;
  text-align:center;
}

.mv02 .slide-text{
  font-size:0.9rem;
  text-align:center;
}

.mv02 .swiper-pagination{
  bottom:10px;
  right:0;
  left:0;
  justify-content:center;
}

.mv02 .swiper-pagination-bullet{
  width:25px;
}

}




.mv02 .slide-button {
  font-size: 1.2rem;
  font-weight: bold;
  display: inline-block;
  color: var(--color-theme);
}
.mv02 .slide-button::before {
  display: inline-block;
  width: 6rem;
  height: 1px;
  margin: -2px 1.6rem 0 0;
  content: "";
  vertical-align: middle;
  background-color: currentColor;
}

/* 通常状態：何もさせない */
.mv02 .slide-media img {
  transform: scale(1);
}

/* active時のみズームアニメーション */
.mv02 .swiper-slide-active .slide-media img {
  animation: zoomOut 7s linear both;
}

@keyframes zoomOut {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}


.mv02 .swiper-slide.anm-started .slide-txtbox {
  -webkit-animation-name: mv02-fadeIn;
          animation-name: mv02-fadeIn;
}
.mv02 .swiper-slide.anm-finished .slide-txtbox {
  -webkit-animation-name: mv02-fadeOut;
          animation-name: mv02-fadeOut;
}

@-webkit-keyframes mv02-fadeIn {
  0% {
    -webkit-transform: translateX(-6rem);
            transform: translateX(-6rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes mv02-fadeIn {
  0% {
    -webkit-transform: translateX(-6rem);
            transform: translateX(-6rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes mv02-fadeOut {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(6rem);
            transform: translateX(6rem);
    opacity: 0;
  }
}
@keyframes mv02-fadeOut {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(6rem);
            transform: translateX(6rem);
    opacity: 0;
  }
}

.fadeIn{
    animation-name: fadeInAnime;
    animation-duration: 1.0s;
    animation-fill-mode: forwards;
    opacity:0;
    }
    @keyframes fadeInAnime{
        from {
        opacity: 0;
        transform: translateY(50px);
        }
        to {
        opacity: 1;
        transform: translateY(0);
        }
    }

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1.0s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    opacity:0;
    }
    @keyframes fadeUpAnime{
        from {
        opacity: 0;
        transform: translateY(50px);
        }
        to {
        opacity: 1;
        transform: translateY(0);
        }
    }

.fadeInTrigger,
.fadeUpTrigger {
    opacity: 0;
}
    
.delay02{
    animation-delay: 0.2s;
}
.delay03{
    animation-delay: 0.3s;
}
.delay04{
    animation-delay: 0.4s;
}
.delay05{
    animation-delay: 0.5s;
}
.delay06{
    animation-delay: 0.6s;
}