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


/* ==========================================================================
   Wave Animation
   ========================================================================== */
   .c-wave-top{
	position: relative;
  }
  .c-wave-top:before{
	animation: 100s linear infinite anime-wave;
	background-position: center;
	background-repeat: repeat-x;
	background-size: contain;
	box-sizing: border-box;
	content: "";
	display: inline-block;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 5;
  }
  .c-wave-top--small:before{
	height: 8px;
	top: -8px;
  }
  .c-wave-top--medium:before{
	height: 20px;
	top: -20px;
  }  
  .c-wave-top--medium-lenient:before{
	height: 6px;
	top: -6px;
  }  
  .c-wave-top--small-darkblue:before{
	background-image: url("../images/common/illust/wave_upward_small_darkblue.svg");
  }
  .c-wave-top--medium-skyblue:before{
	background-image: url("../images/common/illust/wave_upward_medium_skyblue.svg");
  }
  .c-wave-top--medium-lenient-skyblue:before{
	background-image: url("../images/common/illust/wave_upward_medium_lenient_skyblue.svg");
  }

  .c-wave-under{
	position: relative;
  }
  .c-wave-under:after{
	animation: 100s linear infinite anime-wave;
	background-position: center;
	background-repeat: repeat-x;
	background-size: contain;
	bottom: 0;
	box-sizing: border-box;
	content: "";
	display: inline-block;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 5;
  }
  .c-wave-under--small:after{
	height: 8px;
	top: -8px;
  }
  @keyframes anime-wave {
	0% {
	  background-position: 0 top;
	}
	100% { 
	  background-position: -3810px top;
	}
  }/* /min-width: 1366px */

  @media screen and (min-width: 768px) {
	.c-wave-top{}
	.c-wave-top:before{}
	.c-wave-under{}
	.c-wave-under:after{}
  }/* /min-width: 600px */

  @media screen and (min-width: 768px) {
	.wave-top{}
	.wave-top:before{
	  animation: 60s linear infinite anime-wave;
	}
	.wave-under{}
	.wave-under:after{
	  animation: 60s linear infinite anime-wave;
	}
}/* /min-width: 1025px */