@charset "UTF-8";

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

/* ==========================================================================
   Breadcrumbs (.c-breadcrumbs)
   役割: パンくず（トップページは掲載なし）
   ========================================================================== */
	 .c-breadcrumbs{
		margin: 3.75rem 0 0;
	 }

	 .c-breadcrumbs__container{}

	 .c-breadcrumbs__list{
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.5rem;
		list-style: none;
		margin: 0;
		padding: 0;
	 }

	 .c-breadcrumbs__item{
		font-size: 0.6875rem;
		font-weight: var(--font-weight-semibold);
		letter-spacing: var(--ls-default);
		position: relative;
	 }
	 .c-breadcrumbs__item:after{
		content: "…";
		display: inline-block;
		font-family: var(--font-base);
		font-weight: var(--font-weight-semibold);
		position: absolute;
		right: -1.125rem;
		top: 50%;
		transform: translateY(-50%);
	 }
	 .c-breadcrumbs__item:last-of-type:after{
		display: none;
	 }

	 .c-breadcrumbs__link{
		color: var(--color-primary);
		text-decoration: underline;
		text-underline-offset: var(--text-deco-offset);
	 }

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

			.c-breadcrumbs__container{}

			.c-breadcrumbs__list{}

			.c-breadcrumbs__item{}
			.c-breadcrumbs__item:after{}
			.c-breadcrumbs__item:last-of-type:after{}

			.c-breadcrumbs__link{}

		}/* min-width: 768px */

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

			.c-breadcrumbs__container{}

			.c-breadcrumbs__list{
				gap: 0 2rem;
			}

			.c-breadcrumbs__item{
				font-size: 0.875rem;
			}
			.c-breadcrumbs__item:after{
				right: -1.5rem;
			}
			.c-breadcrumbs__item:last-of-type:after{}

			.c-breadcrumbs__link{}
			@media (hover: hover) {
				.c-breadcrumbs__link:hover{
					text-decoration: none;
				}
			}

			
		}/* min-width: 1025px */


/* ==========================================================================
   AnchorPoint (.c-anchor)
   役割: サイト全体で使用するサイト内リンク遷移先のポイント
   ========================================================================== */
	 .c-anchor-point {
		display: inline-block;
		margin: -60px 0 0;
		padding: 60px 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 */


/* ==========================================================================
   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-secondary);
			border: 1px solid var(--color-secondary);
			border-radius: var(--border-radius-circle);
			display: flex;
			height: 60px;
			position: relative;
			text-decoration: none;	
			width: 60px;
		}
		.c-pagetop__link:before{
			background-color: var(--color-white-900);
			clip-path: polygon(0 100%, 50% 0, 100% 100%);
			content: "";
			display: inline-block;
			height: 20px;
			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: 90px;
				justify-content: center;
				width: 90px;
			}
			.c-pagetop__link:before{
				height: 30px;
				width: 35px;
			}

		}/* 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: 8rem;
			}

			.c-pagetop__link{}
			@media (hover: hover) {
				.c-pagetop__link:hover {
					background-color: var(--color-white-900);
				}
			}
			.c-pagetop__link:before{}
			@media (hover: hover) {
				.c-pagetop__link:hover:before{
					background-color: var(--color-secondary);
				}
			}

		}/* min-width: 1025px */



/* ==========================================================================
   Lower Hero (.c-lower-hero)
   役割: 下層ページ共通キービジュアル
   ========================================================================== */
	 .c-lower-hero{
		background: var(--color-gra-blue);
		height: 150px;
		margin: 0 0 1.25rem;
		padding: 0 0 1.25rem;
	 }

	 .c-lower-hero__container{
		height: 100%;
	 }

	 .c-lower-hero__title{
		align-items: flex-end;
		display: flex;
		font-size: 1.25rem;
		font-weight: var(--font-weight-bold);
		height: 100%;
		margin: 0;
	 }

      @media screen and (min-width: 768px) {
        .c-lower-hero{
					height: 200px;
					margin: 0 0 1.8rem;
					padding: 0 0 1.8rem;
				}

				.c-lower-hero__container{}

				.c-lower-hero__title{
					font-size: 1.8rem;
				}

      } /* min-width: 768px */

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

				.c-lower-hero__container{}

				.c-lower-hero__title{}

      } /* min-width: 1025px */

      @media screen and (min-width: 1240px) {
        .c-lower-hero{
					height: 268px;
					margin: 0 0 2.5rem;
					padding: 0 0 2.5rem;
				}

				.c-lower-hero__container{}

				.c-lower-hero__title{
					font-size: 2.5rem;
				}

      } /* min-width: 1240px */

/* ==========================================================================
   Triangle Bottom (.c-triangle-bottom)
   役割: 下三角▼
   ========================================================================== */
	 .c-triangle-bottom{
		background-color: var(--color-black-900);
		border-radius: var(--border-radius-circle);
		display: inline-block;
		height: 1em;
		margin: 0 0.3em 0.1em;
		position: relative;
		vertical-align: middle;
		width: 1em;
	 }
	 .c-triangle-bottom:before{
		background-color: var(--color-white-900);
		clip-path: polygon(0 0, 100% 0%, 50% 100%);
		content: "";
		display: inline-block;
		height: 50%;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 50%;
	 }

/* ==========================================================================
   Input (.c-input**)
   役割: 入力関連
   ========================================================================== */
	 .c-input-box{
		align-items: center;
		display: flex;
		gap: 0 0.625rem;
		justify-content: center;
	 }

	 .c-input-check{
		appearance: none;
    -webkit-appearance: none;
		background-color: var(--color-white-900);
		border-radius: 4px;
		border: 2px solid var(--color-black-900);
	  cursor: pointer;
		height: 24px;
		position: relative;
		transition: var(--transition-base);
		width: 24px;
	 }
	 .c-input-check:checked {
			background-color: var(--color-primary);
			border-color: var(--color-primary);
		}

		.c-input-check:checked::after {
			content: "";
			position: absolute;
			left: 6px;
			top: 2px;
			width: 8px;
			height: 13px;
			border: solid var(--color-primary);
			border-width: 0 3px 3px 0;
			transform: rotate(45deg);
		}

	 .c-input-label{
		font-size: 0.9375rem;
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height-one-line);
		padding: 0 0 0.1em;
	 }

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

				.c-input-check{}

				.c-input-label{}

      } /* min-width: 768px */

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

				.c-input-check{
					height: 30px;
					width: 30px;
				}
				.c-input-check:checked::after {
					left: 8px;
					top: 4px;
					width: 10px;
					height: 15px;
					border-width: 0 3px 3px 0;
				}

				.c-input-label{
					font-size: 1.875rem;
				}

      } /* min-width: 1025px */