@charset "utf-8";
/* 基本設定 */

/* フォント設定 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap');
body { font-family: 'Noto Sans JP', sans-serif; }
.bold { font-weight: 700; }

/* テキスト基本カラー */
body { color: #222 }
a:link { color: #222; text-decoration: none;}
a:visited { color: #222; text-decoration: none;}
a:hover { color: #00533F; text-decoration: none;}
a:active { color: #222; text-decoration: none;}
a { transition: .7s; }

/* フォントサイズ */
body { font-size: 16px; line-height: 1.6em; letter-spacing: 0.06em; }
@media screen and (max-width: 900px) {
	body { font-size: 14px;}
}

/* PCとSPの出し分け */
.pc { display: block !important; }
.sp { display: none !important; }
@media screen and (max-width: 900px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
}

/* 全体の幅 */
main , header , footer { width: 100%; margin: 0 auto; }

/* スクロール設定 */
html{ scroll-behavior: smooth; }

/* スクロールバーを非表示 */
body {
	overflow-x: hidden;
}

/* エフェクト */
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
	transition: 0.8s ease-in-out;
	transform: translateY(30px);
	opacity: 0;
  }
  .scroll_up.on {
	transform: translateY(0);
	opacity: 1.0;
  }
  
  /*----------------------------
  scroll_left ｜左から出現
  ----------------------------*/
  .scroll_left {
	  -webkit-transition: 0.8s ease-in-out;
	  -moz-transition: 0.8s ease-in-out;
	  -o-transition: 0.8s ease-in-out;
	  transition: 0.8s ease-in-out;
	  transform: translateX(-30px);
	  opacity: 0;
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
  }
  .scroll_left.on {
	  opacity: 1.0;
	  filter: alpha(opacity=100);
	  -moz-opacity: 1.0;
	  transform: translateX(0);
  }
  
  /*----------------------------
  scroll_right ｜右から出現
  ----------------------------*/
  .scroll_right {
	  -webkit-transition: 0.8s ease-in-out;
	  -moz-transition: 0.8s ease-in-out;
	  -o-transition: 0.8s ease-in-out;
	  transition: 0.8s ease-in-out;
	  transform: translateX(30px);
	  opacity: 0;
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
  }
  .scroll_right.on {
	  opacity: 1.0;
	  filter: alpha(opacity=100);
	  -moz-opacity: 1.0;
	  transform: translateX(0);
  }

  /*----------------------------
	scroll_fade ｜その場で表示
  ----------------------------*/
.scroll_fade {
	transition: 3s ease-in-out;
	opacity: 0;
  }
  .scroll_fade.on {
	opacity: 1.0;
  }

  /*----------------------------
  表示タイミングをずらす
  ----------------------------*/
	.timing02 {transition-delay: .2s !important;}
	.timing03 {transition-delay: .4s !important;}
	.timing04 {transition-delay: .6s !important;}
	.timing05 {transition-delay: .8s !important;}

  /*----------------------------
  fadein｜スクロールなしでフェードイン
  ----------------------------*/
  .fadein {
	animation-name:fadeInAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeInAnime{
	  from {
		opacity: 0;
	  }
	
	  to {
		opacity: 1;
	  }
	}