@charset "UTF-8";

/**
 * Component: component.css
 * 再利用可能な独立したUIパーツのスタイルを管理する。
 * ボタン、ナビゲーション、フォーム要素、カード、モーダルなど。
 * * 運用ルール:
 * - 接頭辞「c-」を使用し、BEM（MindBEMding）で命名すること。
 * - 原則として「margin」は持たせない（配置場所はProjectレイヤー等で制御）。
 * - コンポーネント単体で完結し、他の要素に依存しない設計を徹底すること。
 * - メディアクエリは各ブロックの直後に記述し、近接性を維持する。
 */


 

/* ==========================================================================
   Button (.c-button)
   役割: ボタン
   ========================================================================== */
	 .c-button{
		align-items: center;
		border: 1px solid var(--color-blue-dark-900);
		border-radius: calc(50px / 2);
		color: var(--color-blue-dark-900);
		display: flex;
		height: 50px;
		justify-content: center;
		justify-self: center;
		position: relative;
		text-decoration: none;
		width: 100%;
		max-width: 240px;
	 }
	 .c-button--arrow{}
	 .c-button--arrow:after{
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		height: 10px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 6px;
	 }
	 .c-button--arrow-next:after{
		background-image: url(../../../images/common/icon/arrow_right_edge_darkblue.svg);
		right: 0.9375rem;
	 }

	 .c-button__label{
		display: inline-block;
		font-size: 1rem;
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-one-line);
	 }

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

			.c-button__label{}

		}/* min-width: 768px */

		@media screen and (min-width: 1025px) {
			.c-button{}

			.c-button__label{}

		}/* min-width: 1025px */


/* ==========================================================================
   Pagetop (.c-pagetop)
   役割: ページ上部へ遷移するボタン
   ========================================================================== */
		.c-pagetop-anchor {
			display: block;
			margin: -65px 0 0;
			padding: 65px 0 0;
			position: relative;
			z-index: -1;
		}

		.c-pagetop-appearance-line{
			display: block;
			height: 0;
			pointer-events: none;
			visibility: hidden;
			width: 100%;
		}

		.c-pagetop {
			bottom: 0.5rem;
			opacity: 0;
			position: fixed;
			right: 1rem;
			transform: translateX(100%);
			transition:
				opacity 0.3s ease,
				transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
				visibility 0.3s;
			visibility: hidden;
			z-index: var(--zindex-pagetop);
		}
		.c-pagetop.is-active {
			opacity: 1;
			transform: translateX(0);
			visibility: visible;
		}

		.c-pagetop__link{
			align-items: center;
			background-color: var(--color-blue-dark-900);
			border: 1px var(--color-white-900) solid;
			border-radius: var(--border-radius-circle);
			color: var(--color-white-900);
			display: flex;
			justify-content: flex-start;
			height: 50px;
			padding: 0 0.5rem;
			position: relative;
			text-align: center;
			text-decoration: none;
			width: 50px;
		}
		.c-pagetop__link:before{
			background-image: url(../../../images/common/icon/arrow_up_white.svg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			display: inline-block;
			height: 25px;
			left: 50%;
			position: absolute;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 25px;
		}

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

			.c-pagetop-appearance-line{}

			.c-pagetop {}

			.c-pagetop__link{
				height: 75px;
				justify-content: center;
				padding: 0.75rem 0 0;
				width: 75px;
			}
			.c-pagetop__link:before{
				height: 30px;
				width: 30px;
			}

		}/* min-width: 768px */

		@media screen and (min-width: 1025px) {
			.c-pagetop-anchor {
				margin: -130px 0 0;
				padding: 130px 0 0;
			}

			.c-pagetop-appearance-line{}

			.c-pagetop {
				bottom: 3rem;
				right: 3.875rem;
			}

			.c-pagetop__link{}
			@media (hover: hover) {
				.c-pagetop__link:hover {
					background-color: var(--color-white-900);
				}
				.c-pagetop__link:hover:before{
					background-image: url(../../../images/common/icon/arrow_up_darkblue.svg);
				}
			}

		}/* min-width: 1025px */