@charset "utf-8";
/*@charset "UTF-8";     コメント */
/*css初期設定 start*/
html {
	font-size: 62.5%;
	/*文字標準*/
	font-family: 'Zen Kaku Gothic New', sans-serif;
	font-weight: 400;
	font-style: normal;
	scroll-behavior: smooth;
}
.eng {
	font-family: 'Segoe UI', 'Frutige', 'Dejavu Sans', 'Helvetica Neue', 'Arial', sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 2px;
}
a {
	text-decoration: none;
	/*リンクデコレーションリセット*/
	color: #000;
}
/*大きさの計算*/
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
/*hrリセット*/
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	width: 100%;
	margin: 0 auto;
	/*文字詰め*/
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
	/*スマホ横向き時のフォントサイズリセット*/
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	line-height: 1.7;
	font-weight: 500;
	background-color: #f2f2f2;
	color: #000;
	overflow: visible;
}
/*iOSフォーム要素の初期化*/
input,
button,
textarea,
select {
	-webkit-appearance: none;
	appearance: none;
}
/*画像の調整*/
img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

@media (max-width: 1279px) {
	.sp {
		display: block !important;
	}
	.pc {
		display: none !important;
	}
	.br-sp {
		display: block !important;
	}
}
@media only screen and (min-width: 1280px) {
	.sp {
		display: none !important;
	}
	.pc {
		display: block !important;
	}
	.br-sp {
		display: none !important;
	}
}

/*ヘッダーアイコンサイズ調整　sp*/
#header #name-and-logo img {
	height: 48px;
	width: 150px;
}
/*css初期設定 end*/

/*メインcss*/
.mainWrap {
	display: block;
	width: 100%;
	margin: 0 auto;
}

/* トップに戻る　フローティングボタン */
.float-button__wrap {
	display: none; /*最初は隠す*/
	width: 90px;
	height: auto;
	position: fixed;
	bottom: 16px;
	/* 20250410フッター修正 */
	right: 10px;
	z-index: 10000;
}
.float-button__wrap a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.mainSection {
	display: block;
	width: 100%;
	margin: 0 auto;
}
.topbannerSec {
	width: 100%;
	height: 0;
	position: relative;
	padding-top: 154.66%;
	overflow: hidden;
}
.mainImg {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

/* 2階 */
.window2-1 {
	position: absolute;
	width: 22.13%;
	top: 51.37%;
	left: 25.86%;
	animation: lightOnAnime 7s ease-in-out 0.3s infinite alternate forwards;
}
.window2-2 {
	position: absolute;
	width: 20.53%;
	top: 51.89%;
	left: 53.06%;
	animation: lightOnAnime2 7s ease-in-out 0s infinite alternate forwards;
}
/* 1階 */
.window1-1 {
	position: absolute;
	width: 21.33%;
	top: 70.43%;
	left: 52.93%;
	animation: lightOnAnime 7s ease-in-out 0.8s infinite alternate forwards;
}
.santaMove {
	position: absolute;
	width: 68.13%;
	top: 20.43%;
	left: 96.93%;
	animation: santaMoving 5s linear 0.8s infinite normal forwards;
}
.santaMove {
	position: absolute;
	width: 68.13%;
	top: 20.43%;
	left: 96.93%;
	animation: santaMoving 5s linear 0.8s infinite normal forwards;
}
.xmasTitle {
	position: absolute;
	width: 53.6%;
	top: 2%;
	left: 50%;
	transform: translate(-50%, 0);
}
@keyframes lightOnAnime {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

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

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
@keyframes santaMoving {
	0% {
		transform: translate(0, 0) rotate(15deg);
	}
	49% {
		transform: translate(-130%, -130%) rotate(15deg);
	}
	50% {
		transform: translate(-130%, -130%) rotate(15deg);
	}
	51% {
		/* 瞬間ワープで戻る */
		transform: translate(0, -110%) rotate(15deg);
	}
	100% {
		transform: translate(0, 0) rotate(15deg);
	}
}
/* 1階 */
/* トップに戻る　フローティングボタン */
/*width:1025px以上*/
@media only screen and (min-width: 1280px) {
	.topbannerBg {
		background-color: #2c254f;
	}
	.topbannerSec {
		width: 100%;
		margin: 0 auto;
		padding-top: 42.18%;
	}
	/* 2階 */
	.window2-1 {
		width: 7.03%;
		top: 51.27%;
		left: 15.67%;
	}
	.window2-2 {
		width: 7.65%;
		top: 28.24%;
		left: 37.86%;
	}
	/* 1階 */
	.window1-1 {
		width: 6.56%;
		top: 73.49%;
		left: 23.85%;
	}
	.santaMove {
		width: 20.52%;
		top: 15%;
		left: 100%;
		animation: santaMoving2 10s linear 0s infinite normal forwards;
	}
	.xmasTitle {
		width: 26.35%;
		top: 50%;
		left: 66.82%;
		transform: translate(0, -50%);
	}
}
@keyframes santaMoving2 {
	0% {
		transform: translate(0, 0) rotate(15deg);
	}
	49% {
		transform: translate(-250%, -120%) rotate(15deg);
	}
	90% {
		transform: translate(-250%, -120%) rotate(15deg);
	}
	91% {
		/* 瞬間ワープで戻る */
		transform: translate(0, -110%) rotate(15deg);
	}
	100% {
		transform: translate(0, 0) rotate(15deg);
	}
}
/* ============================================
   Snow Effect (雪のアニメーション)
   ============================================ */

/* 雪を表示するエリアの設定 */
.snow-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; /* エリア外の雪は見えなくする */
	pointer-events: none; /* 重要：雪の下にあるリンクをクリックできるようにする */
	z-index: 10; /* 背景画像より手前に表示 */
}

/* 雪の共通設定（擬似要素を使って3層作る） */
.snow-container::before,
.snow-container::after,
.snow-container .snow-layer {
	content: '';
	position: absolute;
	top: -100%; /* 最初は画面の上外に配置 */
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(4px 4px at 100px 50px, #fff, transparent), radial-gradient(6px 6px at 200px 150px, #fff, transparent), radial-gradient(3px 3px at 300px 250px, #fff, transparent), radial-gradient(4px 4px at 400px 350px, #fff, transparent), radial-gradient(6px 6px at 500px 100px, #fff, transparent), radial-gradient(3px 3px at 50px 200px, #fff, transparent), radial-gradient(4px 4px at 150px 300px, #fff, transparent), radial-gradient(6px 6px at 250px 400px, #fff, transparent), radial-gradient(3px 3px at 350px 500px, #fff, transparent);
	background-size: 550px 550px; /* 雪のパターンの繰り返しサイズ */
	animation-name: snow-fall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* 1層目（奥）：小さくてゆっくり */
.snow-container::before {
	opacity: 0.6; /* 薄くして遠近感を出す */
	background-size: 400px 400px; /* パターンを小さく */
	animation-duration: 15s; /* ゆっくり落ちる */
	z-index: 1;
}

/* 2層目（中間）：通常の大きさ */
.snow-container::after {
	opacity: 0.8;
	background-size: 500px 500px;
	animation-duration: 10s;
	animation-delay: -5s; /* 開始タイミングをずらす */
	z-index: 2;
}

/* 3層目（手前）：大きくて速い（JavaScriptを使わず擬似要素だけで足りないため、box-shadowなどで工夫もできますが、今回はシンプルにCSS内で完結させます） */
/* もしHTMLに <div class="snow-layer"></div> を足すのが手間なら、::beforeと::afterの2層だけでも十分綺麗です */

/* アニメーションの動き定義 */
@keyframes snow-fall {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(100%); /* 上から下へ移動 */
	}
}