@charset "UTF-8";

/* ルート要素のフォントサイズを明示 (多くのブラウザのデフォルト) */
html {
	font-size: 100%;
	/* = 16px */
}

:root {
	/* ColorPeturn (変更なし) */
	--mainColor: #70af3c;
	--subColor: #12372a;
	--thinColor: #758d62;
	--deepColor: #ecebe7;
	--accentColor: #ecebe7;
	--textColor: #3d3c3c;
	--textColorSub: #0a0147;
	--bgColor: #fcf8f5;
	--bgColorHead: #f3e6db;
	--bgColorSection: #e9e9d8;
	--bgYellow: #ffffef;
	--green: #e0f4ec;
	--gray: #b1b1b1;
	--whiteGray: #9a9898;
	--white: #fff;
	--red: #ca2b2b;
	--orange: #fc5903;

	/* FontSize (1rem = 16px 基準に修正) */
	/* 元の値 (1rem=1px想定) -> 修正後の値 (1rem=16px) */
	--f1: 3.125rem;
	/* 50rem -> 50px / 16 = 3.125rem */
	--f2: 1.375rem;
	/* 22rem -> 22px / 16 = 1.375rem (見出し) */
	--f3: 1.25rem;
	/* 20rem -> 20px / 16 = 1.25rem (見出し スマホ) */
	--f4: 1.125rem;
	/* 18rem -> 18px / 16 = 1.125rem */
	--f5: 1rem;
	/* 16rem -> 16px / 16 = 1rem (ノーマルテキスト / 基本) */
	--f6: 0.625rem;
	/* 10rem -> 10px / 16 = 0.625rem (補足等) */
	--f7: 0.5rem;
	/* 8rem  -> 8px  / 16 = 0.5rem (ノーマルテキスト スマホ) */

	/* FontFamily (変更なし) */
	--noto: "Noto Sans JP", sans-serif;
	--notom: "Noto Serif JP", serif;
	--icon: "Font Awesome 5 Free", "Font Awesome 5 Brands";

	/* FontWeight (変更なし) */
	--black: 900;
	--bold: 700;
	--medium: 600;
	--regular: 400;
	--light: 200;
}

.color-red {
	color: var(--red);
}

.font-weight-bold {
	font-weight: var(--bold);
}

* {
	box-sizing: border-box;
	text-decoration: none;
}

body {
	width: 100%;
	overflow-x: hidden;
	background-color: var(--bgColor);
	color: var(--textColor);
	font-size: var(--f5);
	/* 基本のフォントサイズ (1rem = 16px) */
	font-family: var(--noto);
	font-weight: var(--regular);
	line-height: 2;
}

/* 画像等浮き上がらせアニメーション */
.fadein {
	opacity: 0;
	transition: opacity 0.4s ease;
	/* 1秒かけてフェードイン */
}

.fadein.is-active {
	opacity: 1;
	/* .is-activeクラスが付与されたら不透明に */
}

/* トップ画像部分についてJSと組み合わせた挙動 */
.mainImg {
	opacity: 0;
	transition: opacity 0.4s ease-in-out; /* フェードインの時間を調整 */
	/* 必要に応じて transform など他のプロパティも追加 */
	/* transform: translateY(20px); */
  }
  
  .mainImg.is-active {
	opacity: 1;
	/* transform: translateY(0); */
  }

.video-player {
    opacity: 0;
transition: opacity 0.4s ease;
}

.video-player.is-active {
	opacity: 1;
	/* is-activeクラスが付いたら表示 */
	/*ぼかしはanimationで制御するのでここでは不要*/
}