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

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

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


body{
    letter-spacing:0.2em;
    font-family:"游ゴシック","Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #5f5f5f;
    font-size: 1.4rem;
	overflow-x: hidden;
  }


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

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

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

li{
	list-style:none;}

a{
	color:#5f5f5f;}
 
.f_yugo {
	font-family:"游ゴシック","Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
 
.f_arial {
	font-family:"Arial";
}


@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;
}*/


/* ================================================== */
/* ホバーエフェクト */
/* ================================================== */

/* ================================================== */
/* 画像 */
/* ================================================== */

img {
	display: block;
	width:100%;
}

/* ================================================== */
/* 文字揃え */
/* ================================================== */
.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{
  position:relative;
  display:inline-block;
  -webkit-appearance:none;
  appearance:none;/* inputのスタイル打消し */
  border: none;
  color:#06C755;
  background-color:#FFF;
  padding:5px 10px 5px 30px;
  border-radius: 17px;
  min-width: 180px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.5s ease;
  }
.btn.type01 a:hover{
  transform: scale(1.2, 1.2);
  }
.btn.type01 a span{
  position: relative;
  }
.btn.type01 a span::after{
  vertical-align: middle;
  cursor: pointer;
  color: #06C755;
  content: '\f054';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-left:20px;
  }
/*.btn.type01 a[target="_blank"] span::after{
  width: 18px;
  padding-top:100%;
  background-image: url(/img/common/icon_blank.svg); 
  }*/
/* ================================================== */
/* アニメ設定 */
/* ================================================== */
/* ============ .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;}








/* ================================================== */
/* フッター */
/* ================================================== */

#footer {
	position: relative;
	color: #BCDADB;
    background-color: #F8F8F8;
    padding: 120px 0;
}

#footer .copy {
    font-size: 1.6rem;
    letter-spacing: 5px;
	font-weight: 400;
}

#footer .copy br {
    display:none;
}



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

#footer {
    padding: 60px 0;
}

#footer .copy {
    font-size: 1.2rem;
    letter-spacing: 3px;
}

#footer .copy br {
    display: block;
}
		
}




/* ================================================== */
/* TOPに戻る */
/* ================================================== */

.pagetop {
	display:inline-block;
	height:110px;
	width:24px;
	font-size: 1.2rem;
	position: fixed;
	bottom:30px;
	right:75px;
	cursor: pointer;
	color:#A8A8A8;
	transition: all 0.3s;
	opacity: 0;
	z-index: -1;
	transform: translateX(0px);
}

.pagetop.appear {
	opacity: 1;
	z-index: 1;
}

.pagetop::before {
	content: "Top";
	position: absolute;
	top:50%;
	right:0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	-ms-writing-mode :tb-rl;
	writing-mode: vertical-rl;
}

.pagetop .arrow {
	position: relative;
	top:10px;
	width: 0;
	height: 100px;
	border-left: 1px solid #A8A8A8;
}

.pagetop .arrow::after {
	content: "";
	display: block;
	position: absolute;
	top: -15px;
	left: -5px;
	border-bottom: 20px solid #A8A8A8;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

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


.pagetop {
	right:15px;
}
	
.open .pagetop {
    transform: translateX(-230px);
}


}



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

	
.pagetop {
    height: 100px;
    bottom: 25px;	
}

.pagetop .arrow {
    height: 80px;
}
	

	
	
	
	
	
}