@charset "utf-8";
/* CSS Document */

/* =======================================
	フォント設定
======================================= */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

body{color:#5f5f5f; font-size:1.4rem; letter-spacing:0.1em;}

.sans{font-family: 'Noto Sans JP', sans-serif;}

.serif{font-family: 'Noto Serif JP', serif;}

.arial{font-family: 'Arial';}

/*p,a,h2,h3,h4,h5,h6,dl,ul,ol{
	font-size:1.4rem;}*/

h2,h3,h4,h5,h6,a{
	font-weight:normal;
  line-height: normal;
}

li,p,table{
  line-height:2;}

li{
	list-style:none;}

a{
	color:#5f5f5f;}

@media only screen and (max-width: 480px) {

body{font-size:1.2rem;}

}

/* ================================================== */
/* flexbox */
/* ================================================== */
.fl{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-content: flex-start;
  align-items:flex-start;
}
/* ================================================== */
/* 効果 */
/* ================================================== */
/* ============ オーバレイ ============ */
.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
  }

/* ===== 背景画像ズーム ===== */
.fx-bgzoom {
    position: relative;
    overflow: hidden;
}
.fx-bgzoom::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url() no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.fx-bgzoom:hover::after {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
/* ===== 乗算 ===== */
.fx-overlay {
  position: relative;
}
.fx-overlay::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  mix-blend-mode: multiply;
  background-color: #394F5B;
  opacity: 1.0;
  z-index: 1;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

@media all and (-ms-high-contrast: none) {
 .fx-overlay::before {
  opacity:0.7;
  }
}

/*a.fx-overlay:hover::before {
  opacity: 0.0;
}*/
/* ===== 下線 ===== */
.line{
  position:relative;
  }
.line::after{
  content: "";
  display: block;
  position:absolute;
  bottom:-3px;
  left:0;
  width:100%;
  height:1px;
  background-color:#FFF;
  }

/* ================================================== */
/* ホバーエフェクト */
/* ================================================== */
/* ============ 中央から下線 ============ */

.hover_line_c {
  position: relative;
}
/*ホバーエフェクト*/
.hover_line_c::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #FFF;
  bottom: 0;
  left: 0;
  opacity: 0;
  /*横方向0で非表示にする*/
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  /*中央を基点にアニメーション*/
  -webkit-transform-origin: center top;
  transform-origin: center top;
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.hover_line_c:hover::after {
  /*横方向等倍まで拡大*/
  transform: scale(1, 1);
  opacity: 1;
}

/* ============ 左から下線 ============ */
.hover_line_l {
  position: relative;
}
/*ホバーエフェクト*/
.hover_line_l::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #FFF;
  bottom: 0;
  left: 0;
  opacity: 0;
  /*横方向0で非表示にする*/
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  /*中央を基点にアニメーション*/
  -webkit-transform-origin: left top;
  transform-origin: left top;
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.hover_line_l:hover::after {
  /*横方向等倍まで拡大*/
  transform: scale(1, 1);
  opacity: 1;
}

/* ================================================== */
/* 文字揃え */
/* ================================================== */
.text_l{
  text-align:left;
  }
.text_c{
  text-align:center;
  }
.text_r{
  text-align:right;
  }
/* ================================================== */
/* ※印 */
/* ================================================== */
.kome::after{
  content: "※";
  }
/* ================================================== */
/* ボタン */
/* ================================================== */
/* ============ .type01 ============ */
.btn.type01{
  margin-top:30px;
  }
.btn.type01 a,
.btn.type01 input[type="submit"]{
  position:relative;
  display:inline-block;
  -webkit-appearance:none;
  appearance:none;/* inputのスタイル打消し */
  border: none;
  font-size:1.2rem;
  color:#4F595D;
  background-color:#FFF;
  padding:8px 50px;
  border-radius: 17px;
  min-width:320px;
  cursor: pointer;
  }
.btn.type01 a span{
  position: relative;
  }
.btn.type01 a span::after{
  position: absolute;
  top:50%;
  right:-30px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  content: '';
  display: inline-block;
  width: 15px;
  padding-top:100%;
  background-image: url(/img/common/icon_arrow.svg);
  background-size: contain;
  background-position:center;
  background-repeat:no-repeat;
  }
.btn.type01 a[target="_blank"] span::after{
  width: 18px;
  padding-top:100%;
  background-image: url(/img/common/icon_blank.svg);
  }
@media only screen and (max-width: 480px) {
.btn.type01 a{
  padding:8px 36px;
  min-width:220px;
  }
}
/* ============ .type02 ============ */
.btn.type02{
  position:relative;
  margin-top:50px;
  }
.btn.type02 a,
.btn.type02 span{
  display: inline-block;
  border-radius: 17px;
  color:#FFF;
  background: #3D4D53;
  background: -webkit-linear-gradient(0deg, #748D9A, #3D4D53);
  background: linear-gradient(0deg, #748D9A, #3D4D53);
  width:100%;
  max-width:320px;
  padding:8px 15px;
  font-size:1.2rem;
  }
@media only screen and (max-width: 480px) {
.btn.type02{
  margin-top:30px;
  }
.btn.type02 a,
.btn.type02 span{
  max-width: 280px;
  }
}

/* ================================================== */
/* アニメ設定 */
/* ================================================== */
/* ============ .catch ============ */
.catch-anime,
.catch-anime span{
  opacity:0;
  }
/* ============ .step-b ============ */
.step-b .step{
 opacity: 0;
  }
.step-b.active .step{
  animation: b-fadein 2.0s both;
  }
.step-b.active .step:nth-child(1){animation-delay: 0.25s;}
.step-b.active .step:nth-child(2){animation-delay: 0.5s;}
.step-b.active .step:nth-child(3){animation-delay: 0.75s;}
.step-b.active .step:nth-child(4){animation-delay: 1.0s;}
.step-b.active .step:nth-child(5){animation-delay: 1.25s;}
.step-b.active .step:nth-child(6){animation-delay: 1.5s;}
.step-b.active .step:nth-child(7){animation-delay: 1.75s;}
.step-b.active .step:nth-child(8){animation-delay: 2.0s;}
/* ============ .step-l ============ */
.step-l .step{
 opacity: 0;
  }
.step-l.active .step{
  animation: l-fadein 2.0s both;
  }
.step-l.active .step:nth-child(1){animation-delay: 0.25s;}
.step-l.active .step:nth-child(2){animation-delay: 0.5s;}
.step-l.active .step:nth-child(3){animation-delay: 0.75s;}
.step-l.active .step:nth-child(4){animation-delay: 1.0s;}
.step-l.active .step:nth-child(5){animation-delay: 1.25s;}
.step-l.active .step:nth-child(6){animation-delay: 1.5s;}
.step-l.active .step:nth-child(7){animation-delay: 1.75s;}
.step-l.active .step:nth-child(8){animation-delay: 2.0s;}
/* ============ .step-pop ============ */
.step-pop .step{
 opacity: 0;
  }
.step-pop.active .step {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}
.step-pop.active .step:nth-child(1){animation-delay: 0.25s;}
.step-pop.active .step:nth-child(2){animation-delay: 0.5s;}
.step-pop.active .step:nth-child(3){animation-delay: 0.75s;}
.step-pop.active .step:nth-child(4){animation-delay: 1.0s;}
.step-pop.active .step:nth-child(5){animation-delay: 1.25s;}
.step-pop.active .step:nth-child(6){animation-delay: 1.5s;}
.step-pop.active .step:nth-child(7){animation-delay: 1.75s;}
.step-pop.active .step:nth-child(8){animation-delay: 2.0s;}


.attention {
    color: #f00;
}