@charset "UTF-8";

/**
 * Component: component.css
 * 再利用可能な独立したUIパーツのスタイルを管理する。
 * ボタン、ナビゲーション、フォーム要素、カード、モーダルなど。
 * * 運用ルール:
 * - 接頭辞「c-」を使用し、BEM（MindBEMding）で命名すること。
 * - 原則として「margin」は持たせない（配置場所はProjectレイヤー等で制御）。
 * - コンポーネント単体で完結し、他の要素に依存しない設計を徹底すること。
 * - メディアクエリは各ブロックの直後に記述し、近接性を維持する。
 */

/* ==========================================================================
   AnchorPoint (.c-anchor)
   役割: サイト全体で使用するサイト内リンク遷移先のポイント
   ========================================================================== */
	 .c-anchor-point {
		display: inline-block;
		margin: -80px 0 0;
		padding: 80px 0 0;
		position: absolute;
		z-index: -1;
		}

		@media screen and (min-width: 768px) {
			.c-anchor-point {}
		}/* min-width: 768px */

		@media screen and (min-width: 1025px) {
			.c-anchor-point {}
		}/* min-width: 1025px */

		@media screen and (min-width: 1240px) {
			.c-anchor-point {
				margin: -130px 0 0;
				padding: 130px 0 0;				
			}
		}/* min-width: 1240px */



/* ==========================================================================
   Button (.c-button)
   役割: サイト全体で使用する標準的なリンクボタン
   ========================================================================== */
		.c-button {
			align-items: center;
			background-color: var(--color-primary);
			border: none;
			border-radius: calc(55px / 2);
			color: var(--color-white-900);
			cursor: pointer;
			display: flex;
			height: 55px;
			justify-content: center;
			justify-self: center;
			outline: none;
			position: relative;
			text-decoration: none;
			width: 100%;
		}
		.c-button--left {
			justify-self: flex-start;
		}
		.c-button--large-left {
			justify-self: flex-start;
		}

		@media screen and (min-width: 768px) {
			.c-button {
				border-radius: calc(70px / 2);
				height: 70px;
				max-width: 330px;
			}
			.c-button:after {
				border-radius: calc(70px / 2);		
			  }		  
			.c-button:focus-visible:after {}

			.c-button__text{}

		}/* min-width: 768px */

		@media screen and (min-width: 1025px) {
			.c-button {
				overflow: hidden;
			}
			.c-button:before {
				background-color: var(--color-primary-hover);
				content: "";
				display: inline-block;
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				transform: translateX(-100%);
				transition: var(--transition-base);
				width: 100%;
				/* transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1); */
			}
			@media (hover: hover) {
				.c-button:hover:before {
					transform: translateX(0);
				}
			}
			.c-button:after {}		  
			.c-button:focus-visible:after {}

			.c-button__text{
				position: relative;
			}

		}/* min-width: 1025px */

/* ==========================================================================
   Contents Title (.c-section-title)
   役割: サイト全体で使用するコンテンツタイトル
   ========================================================================== */
   .c-section-title{
	text-align: center;
   }

   .c-section-title__lead{
	color: var(--color-black-900);
	display: inline-block;
	font-family: var(--font-en);
	font-size: 1.875rem;
	font-weight: var(--font-weight-extra-bold);
	letter-spacing: var(--ls-default);
	margin: 0 0 0.8em;
	text-align: center;
   }
   .c-section-title__lead--line{
	position: relative;
   }
   .c-section-title__lead--line:after{
	background-image: url("../images/common/illust/line_semicircle_black.svg");
	background-position: center;
	background-repeat: no-repeat;
	bottom: -0.5rem;
	content: "";
	display: inline-block;
	height: 4px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 100%;
   }

   .c-section-title__sub{
	color: var(--color-black-900);
	display: block;
	font-family: var(--font-m-plus);
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--ls-default);
	margin: 0;	
   }

   @media screen and (min-width: 768px) {
	.c-section-title{}

	.c-section-title__lead{}
	.c-section-title__lead--line{}
	.c-section-title__lead--line:after{
		height: 6px;
	}

	.c-section-title__sub{}

	}/* min-width: 768px */

   @media screen and (min-width: 1025px) {
	.c-section-title{}

	.c-section-title__lead{
		font-size: 3rem;
	}
	.c-section-title__lead--line{}
	.c-section-title__lead--line:after{
		bottom: -1rem;
	}

	.c-section-title__sub{
		font-size: 1.125rem;
	}

	}/* min-width: 1025px */


/* ==========================================================================
   Star (.c-star)
   役割: 星降るver
   ========================================================================== */
   .c-star {
		height: 150vh;
		left: 0;
		overflow: hidden;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 3;
		}
	.c-star__list {
		left: -20%;
		height: 120%;
		position: relative;
		width: 120%;
		transform: rotate(-45deg);
		}
	.c-star__unit {
		--star-color: rgba(255, 255, 255, 1);
		--star-tail-length: 6em;
		--star-tail-height: 2px;
		--star-width: calc(var(--star-tail-length) / 6);
		--fall-duration: 9s;
		--tail-fade-duration: var(--fall-duration);
		position: absolute;
		top: var(--top-offset);
		left: 0;
		width: var(--star-tail-length);
		height: var(--star-tail-height);
		color: var(--star-color);
		background: linear-gradient(45deg, currentColor, transparent);
		border-radius: 50%;
		filter: drop-shadow(0 0 6px currentColor);
		transform: translate3d(200em, 0, 0);
		animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
		}
	
	/* アニメーション一時停止用クラス */
	.c-star.is-paused .c-star__unit,
	.c-star.is-paused .c-star__unit::before,
	.c-star.is-paused .c-star__unit::after {
		animation-play-state: paused !important;
	}
	@media screen and (max-width: 750px) { .c-star__unit { animation: fall var(--fall-duration) var(--fall-delay) linear infinite; } }
	.c-star__unit:nth-child(1) {
		--star-tail-length: 7.05em;
		--top-offset: 7.27vh;
		--fall-duration: 7.893s;
		--fall-delay: 2.828s;
	}
	.c-star__unit:nth-child(2) {
		--star-tail-length: 6.77em;
		--top-offset: 43.43vh;
		--fall-duration: 8.578s;
		--fall-delay: 7.614s;
	}
	.c-star__unit:nth-child(3) {
		--star-tail-length: 6.6em;
		--top-offset: 52.27vh;
		--fall-duration: 8.995s;
		--fall-delay: 1.962s;
	}
	.c-star__unit:nth-child(4) {
		--star-tail-length: 5.51em;
		--top-offset: 40.39vh;
		--fall-duration: 11.308s;
		--fall-delay: 8.067s;
	}
	.c-star__unit:nth-child(5) {
		--star-tail-length: 6.33em;
		--top-offset: 33vh;
		--fall-duration: 6.895s;
		--fall-delay: 6.812s;
	}
	.c-star__unit:nth-child(6) {
		--star-tail-length: 5.64em;
		--top-offset: 54.75vh;
		--fall-duration: 7.25s;
		--fall-delay: 1.448s;
	}
	.c-star__unit:nth-child(7) {
		--star-tail-length: 7.45em;
		--top-offset: 89.94vh;
		--fall-duration: 9.336s;
		--fall-delay: 3.275s;
	}
	.c-star__unit:nth-child(8) {
		--star-tail-length: 5.26em;
		--top-offset: 75.89vh;
		--fall-duration: 7.902s;
		--fall-delay: 9.715s;
	}
	.c-star__unit:nth-child(9) {
		--star-tail-length: 5.71em;
		--top-offset: 73.95vh;
		--fall-duration: 10.332s;
		--fall-delay: 4.764s;
	}
	.c-star__unit:nth-child(10) {
		--star-tail-length: 7em;
		--top-offset: 78.5vh;
		--fall-duration: 10.707s;
		--fall-delay: 6.965s;
	}
	.c-star__unit:nth-child(11) {
		--star-tail-length: 5.56em;
		--top-offset: 99.63vh;
		--fall-duration: 10.079s;
		--fall-delay: 8.463s;
	}
	.c-star__unit:nth-child(12) {
		--star-tail-length: 5.1em;
		--top-offset: 80.66vh;
		--fall-duration: 6.754s;
		--fall-delay: 2.656s;
	}
	.c-star__unit:nth-child(13) {
		--star-tail-length: 6.89em;
		--top-offset: 34.91vh;
		--fall-duration: 6.859s;
		--fall-delay: 8.711s;
	}
	.c-star__unit:nth-child(14) {
		--star-tail-length: 6.46em;
		--top-offset: 49.5vh;
		--fall-duration: 6.071s;
		--fall-delay: 0.528s;
	}
	.c-star__unit:nth-child(15) {
		--star-tail-length: 6.09em;
		--top-offset: 39.54vh;
		--fall-duration: 11.594s;
		--fall-delay: 0.436s;
	}
	.c-star__unit:nth-child(16) {
		--star-tail-length: 5.02em;
		--top-offset: 97.59vh;
		--fall-duration: 6.845s;
		--fall-delay: 5.805s;
	}
	.c-star__unit:nth-child(17) {
		--star-tail-length: 6.11em;
		--top-offset: 5.16vh;
		--fall-duration: 9.323s;
		--fall-delay: 6.77s;
	}
	.c-star__unit:nth-child(18) {
		--star-tail-length: 6.3em;
		--top-offset: 59.03vh;
		--fall-duration: 10.087s;
		--fall-delay: 4.612s;
	}
	.c-star__unit:nth-child(19) {
		--star-tail-length: 5.9em;
		--top-offset: 83.26vh;
		--fall-duration: 11.633s;
		--fall-delay: 9.096s;
	}
	.c-star__unit:nth-child(20) {
		--star-tail-length: 6.02em;
		--top-offset: 30.74vh;
		--fall-duration: 6.87s;
		--fall-delay: 5.162s;
	}
	.c-star__unit:nth-child(21) {
		--star-tail-length: 5.43em;
		--top-offset: 98.44vh;
		--fall-duration: 8.312s;
		--fall-delay: 1.197s;
	}
	.c-star__unit:nth-child(22) {
		--star-tail-length: 5.28em;
		--top-offset: 15.3vh;
		--fall-duration: 9.579s;
		--fall-delay: 5.436s;
	}
	.c-star__unit:nth-child(23) {
		--star-tail-length: 6.54em;
		--top-offset: 65.03vh;
		--fall-duration: 10.44s;
		--fall-delay: 7.579s;
	}
	.c-star__unit:nth-child(24) {
		--star-tail-length: 5.33em;
		--top-offset: 51.22vh;
		--fall-duration: 9.378s;
		--fall-delay: 0.328s;
	}
	.c-star__unit:nth-child(25) {
		--star-tail-length: 6.25em;
		--top-offset: 97.01vh;
		--fall-duration: 6.985s;
		--fall-delay: 8.488s;
	}
	.c-star__unit:nth-child(26) {
		--star-tail-length: 6.96em;
		--top-offset: 71.6vh;
		--fall-duration: 7.818s;
		--fall-delay: 2.66s;
	}
	.c-star__unit:nth-child(27) {
		--star-tail-length: 6.01em;
		--top-offset: 35.43vh;
		--fall-duration: 6.373s;
		--fall-delay: 1.572s;
	}
	.c-star__unit:nth-child(28) {
		--star-tail-length: 5.85em;
		--top-offset: 86.18vh;
		--fall-duration: 10.634s;
		--fall-delay: 8.578s;
	}
	.c-star__unit:nth-child(29) {
		--star-tail-length: 5.99em;
		--top-offset: 66.93vh;
		--fall-duration: 6.516s;
		--fall-delay: 5.982s;
	}
	.c-star__unit:nth-child(30) {
		--star-tail-length: 6.48em;
		--top-offset: 23.8vh;
		--fall-duration: 9.515s;
		--fall-delay: 4.929s;
	}
	.c-star__unit:nth-child(31) {
		--star-tail-length: 6.98em;
		--top-offset: 56.21vh;
		--fall-duration: 10.259s;
		--fall-delay: 4.819s;
	}
	.c-star__unit:nth-child(32) {
		--star-tail-length: 5.89em;
		--top-offset: 59.11vh;
		--fall-duration: 7.985s;
		--fall-delay: 4.585s;
	}
	.c-star__unit:nth-child(33) {
		--star-tail-length: 5.46em;
		--top-offset: 72.13vh;
		--fall-duration: 11.195s;
		--fall-delay: 3.398s;
	}
	.c-star__unit:nth-child(34) {
		--star-tail-length: 7.08em;
		--top-offset: 32.5vh;
		--fall-duration: 10.755s;
		--fall-delay: 9.892s;
	}
	.c-star__unit:nth-child(35) {
		--star-tail-length: 6.63em;
		--top-offset: 0.85vh;
		--fall-duration: 10.079s;
		--fall-delay: 1.536s;
	}
	.c-star__unit:nth-child(36) {
		--star-tail-length: 6.08em;
		--top-offset: 31.57vh;
		--fall-duration: 6.036s;
		--fall-delay: 5.321s;
	}
	.c-star__unit:nth-child(37) {
		--star-tail-length: 7.03em;
		--top-offset: 23.54vh;
		--fall-duration: 11.639s;
		--fall-delay: 1.922s;
	}
	.c-star__unit:nth-child(38) {
		--star-tail-length: 6.58em;
		--top-offset: 40.92vh;
		--fall-duration: 7.997s;
		--fall-delay: 7.061s;
	}
	.c-star__unit:nth-child(39) {
		--star-tail-length: 6.99em;
		--top-offset: 33.74vh;
		--fall-duration: 9.901s;
		--fall-delay: 3.813s;
	}
	.c-star__unit:nth-child(40) {
		--star-tail-length: 6.74em;
		--top-offset: 19.83vh;
		--fall-duration: 11.227s;
		--fall-delay: 8.252s;
	}
	.c-star__unit:nth-child(41) {
		--star-tail-length: 6.69em;
		--top-offset: 66.66vh;
		--fall-duration: 6.444s;
		--fall-delay: 0.454s;
	}
	.c-star__unit:nth-child(42) {
		--star-tail-length: 5em;
		--top-offset: 89.68vh;
		--fall-duration: 8.845s;
		--fall-delay: 7.455s;
	}
	.c-star__unit:nth-child(43) {
		--star-tail-length: 6.04em;
		--top-offset: 65.25vh;
		--fall-duration: 11.689s;
		--fall-delay: 0.303s;
	}
	.c-star__unit:nth-child(44) {
		--star-tail-length: 6.47em;
		--top-offset: 70.29vh;
		--fall-duration: 6.646s;
		--fall-delay: 4.903s;
	}
	.c-star__unit:nth-child(45) {
		--star-tail-length: 7.4em;
		--top-offset: 27.56vh;
		--fall-duration: 8.215s;
		--fall-delay: 7.909s;
	}
	.c-star__unit:nth-child(46) {
		--star-tail-length: 7.01em;
		--top-offset: 38.19vh;
		--fall-duration: 7.328s;
		--fall-delay: 2.529s;
	}
	.c-star__unit:nth-child(47) {
		--star-tail-length: 5.09em;
		--top-offset: 16.05vh;
		--fall-duration: 6.076s;
		--fall-delay: 6.716s;
	}
	.c-star__unit:nth-child(48) {
		--star-tail-length: 6.42em;
		--top-offset: 16.34vh;
		--fall-duration: 8.167s;
		--fall-delay: 0.237s;
	}
	.c-star__unit:nth-child(49) {
		--star-tail-length: 5.57em;
		--top-offset: 75.27vh;
		--fall-duration: 10.201s;
		--fall-delay: 8.671s;
	}
	.c-star__unit:nth-child(50) {
		--star-tail-length: 7.16em;
		--top-offset: 9.27vh;
		--fall-duration: 6.533s;
		--fall-delay: 8.841s;
	}
	.c-star__unit::before, .c-star__unit::after {
		position: absolute;
		content: "";
		top: 0;
		left: calc(var(--star-width) / -2);
		width: var(--star-width);
		height: 100%;
		background: linear-gradient(45deg, transparent, currentColor, transparent);
		border-radius: inherit;
		animation: blink 2s linear infinite;
		}
		.c-star__unit::before { transform: rotate(45deg); }
		.c-star__unit::after { transform: rotate(-45deg); }
		@keyframes fall { to { transform: translate3d(-30em, 0, 0); } }
		@keyframes tail-fade {
			0%, 50% { width: var(--star-tail-length); opacity: 1; }
			70%, 80% { width: 0; opacity: 0.4; }
			100% { width: 0; opacity: 0; }
			}
		@keyframes blink { 50% { opacity: 0.6; } }


/* ==========================================================================
   Star Bright (.c-star-bright)
   役割: 星瞬くver
   ========================================================================== */
		.c-star-bright {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow: hidden;
			z-index: 2;
		  }
		  
		  /* 星のスタイル */
		  .c-star-bright__item {
			position: absolute;
			display: block;
			background-color: #fff;
			border-radius: 50%;
			box-shadow: 0 0 4px 2px rgba(#fff, 0.2);
			opacity: 0;
			animation: twinkle 5s infinite;
		  }
		  body.is-stop .c-star-bright__item {
			animation-play-state: paused;
		  }
		  
		  /* 星がキラキラ光るアニメーション */
		  @keyframes twinkle {
			0% {
			  opacity: 0;
			}
		  
			50% {
			  transform: scale(1.1);
			  opacity: 1;
			}
		  
			100% {
			  opacity: 0;
			  transform: scale(1);
			}
		  }