@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: 1px solid var(--color-primary);
			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;
		}
		.c-button--movie{
			background-color: var(--color-secondary);
			border: 1px solid var(--color-secondary);
		}
		.c-button--application{}
		.c-button--next{
			position: relative;
		}
		.c-button--next:after{
			background-color: var(--color-white-900);
			clip-path: polygon(0 0, 0 100%, 100% 50%);
			content: "";
			display: inline-block;
			height: 7px;
			position: absolute;
			right: 0.75rem;
			top: 50%;
			transform: translateY(-50%);
			width: 6px;
		}
		.c-button--disabled {
			background-color: var(--color-comingsoon-gray);
			border: 1px solid var(--color-comingsoon-gray);
			cursor: default;
			opacity: 0.6;
			pointer-events: none;
		  }

		.c-button__text{
			display: inline-block;
			font-size: 0.9375rem;
			font-weight: var(--font-weight-bold);
			padding: 0 0 0.1em;
			position: relative;
		}
		.c-button__text:before{
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			display: inline-block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		.c-button--movie .c-button__text,
		.c-button--application .c-button__text{
			margin: 0 -0.8em 0 0;
		}
		.c-button--movie .c-button__text:before{
			background-image: url(../images/common/icon/movie_white.svg);
			height: 13px;
			left: calc((16px + 0.5625rem) * -1);
			width: 16px;
		}
		.c-button--application .c-button__text:before{
			background-image: url(../images/common/icon/document_white.svg);
			height: 15px;
			left: calc((16px + 0.5625rem) * -1);
			width: 16px;
		}

		@media screen and (min-width: 768px) {
			.c-button {
				border-radius: calc(60px / 2);
				height: 60px;
				max-width: 226px;
			}
			.c-button--movie{}
			.c-button--application{}
			.c-button--next{}
			.c-button--next:after{}

			.c-button__text{}
			.c-button__text:before{}
			.c-button--movie .c-button__text,
			.c-button--application .c-button__text{}
			.c-button--movie .c-button__text:before{}
			.c-button--application .c-button__text:before{}

		}/* min-width: 768px */

		@media screen and (min-width: 1025px) {
			.c-button {}
			.c-button:hover {
				background: var(--color-white-900);
				color: var(--color-primary);
			}
			.c-button--movie{}
			.c-button--movie:hover{
				color: var(--color-secondary);
			}
			.c-button--application{}
			.c-button--next{}
			.c-button--next:after{
				height: 10px;
				right: 1rem;
				width: 7px;
			}
			.c-button--next:hover:after{
				background-color: var(--color-primary);
			}
			.c-button--movie:hover .c-button--next:after{
				background-color: var(var(--color-secondary));				
			}

			.c-button__text{
				font-size: 1rem;
			}
			.c-button__text:before{
				vertical-align: text-top;
			}
			.c-button--movie .c-button__text,
			.c-button--application .c-button__text{}
			.c-button--movie .c-button__text:before{
				height: 20px;
				left: calc((24px + 0.9375rem) * -1);
				width: 24px;
			}
			.c-button--movie:hover .c-button__text:before{
				background-image: url(../images/common/icon/movie_green.svg);
			}
			.c-button--application .c-button__text:before{
				height: 26px;
				left: calc((23px + 0.9375rem) * -1);
				width: 23px;
			}
			.c-button--application:hover .c-button__text:before{
				background-image: url(../images/common/icon/document_blue.svg);
			}

		}/* min-width: 1025px */

/* ==========================================================================
   Contents Title (.c-section-title)
   役割: サイト全体で使用するコンテンツタイトル
   ========================================================================== */
   .c-section-title{
	margin: 0 0 1.875rem;
	text-align: center;
   }

   .c-section-title__lead{
	color: var(--color-primary);
	display: inline-block;
	font-size: 1.5rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--ls-default);
	margin: 0;
	padding: 0 0 calc(0.75rem + 10px);
	position: relative;
   }
   .c-section-title__lead--white{
	color: var(--color-white-900);
   }
   .c-section-title__lead:after{
	background-image: url(../images/common/illust/torus02.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	content: "";
	display: inline-block;
	height: 10px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 60px;
   }

   @media screen and (min-width: 768px) {
	.c-section-title{}

	.c-section-title__lead{}
	.c-section-title__lead:after{}

	}/* min-width: 768px */

   @media screen and (min-width: 1025px) {
	.c-section-title{
		margin: 0 0 3.375rem;
	}

	.c-section-title__lead{
		font-size: 2.25rem;
		padding: 0 0 calc(1.1875rem + 17px);
	}
	.c-section-title__lead:after{
		height: 17px;
		width: 100px;
	}

	}/* min-width: 1025px */