@charset "UTF-8";

/**
 * Utility: utility.css
 * 特定のスタイルを強制的に適用するための単一機能クラスを管理する。
 * コンポーネント間の微調整、マージン、表示制御、テキスト調整に使用。
 * 運用ルール:
 * - 本ファイルは詳細度の仕様に基づき、全レイヤーの最後に読み込むこと。
 * - 原則として「!important」は禁止とする。
 * - 詳細度負けを防ぐため、他レイヤーでのセレクタの重ねすぎに注意すること。
 */


 /* ==========================================================================
   Utilities: Arrow (.u-arrow)
   役割: CTA内設置するの汎用的な矢印
   ========================================================================== */


 /* ==========================================================================
   Utilities: Display (.u-display)
   役割: デバイス間での表示・非表示の切替
   ========================================================================== */
		.u-display-small-only{
			display: inline-block;
		}

		.u-display-medium-only{
			display: none;
		}

		.u-display-large-only{
			display: none;
		}

		.u-display-small-medium-up{
			display: inline-block;
		}

		.u-display-medium-large-up{
			display: none;
		}

			@media screen and (min-width: 768px) {
				.u-display-small-only{
					display: none;
				}

				.u-display-medium-only{
					display: inline-block;
				}

				.u-display-large-only{
					display: none;
				}

				.u-display-small-medium-up{
					display: inline-block;
				}

				.u-display-medium-large-up{
					display: inline-block;
				}

			}/* min-width: 768px */

			@media screen and (min-width: 1025px) {
				.u-display-small-only{
					display: none;
				}

				.u-display-medium-only{
					display: none;
				}

				.u-display-large-only{
					display: inline-block;
				}

				.u-display-small-medium-up{
					display: none;
				}

				.u-display-medium-large-up{
					display: inline-block
				}

			}/* min-width: 1025px */


 /* ==========================================================================
   Utilities: Font Family (.u-font)
   役割: フォントファミリー指定
   ========================================================================== */


 /* ==========================================================================
   Utilities: Justify (.u-justify)
   役割: Flex justify指定
   ========================================================================== */
		.u-justify-content-center {
			justify-content: center;
		}

		.u-justify-content-left {
			justify-content: flex-start;
		}

		.u-justify-content-right {
			justify-content: flex-end;
		}


 /* ==========================================================================
   Utilities: Theme Colors
   役割: サイトカラー指定
   ========================================================================== */
		.u-primary-bg {
			background-color: var(--color-primary);
		}

		.u-primary-text {
			color: var(--color-primary);
		}

		.u-secondary-bg {
			background-color: var(--color-secondary);
		}

		.u-secondary-text {
			color: var(--color-secondary);
		}


 /* ==========================================================================
   Utilities: Base Colors
   役割: ベースカラー指定
   ========================================================================== */
		.u-bg-black {
			background-color: var(--color-black-900);
		}

		.u-text-black {
			color: var(--color-black-900);
		}

		.u-bg-gray {
			background-color: var(--color-gray-100);
		}

		.u-bg-white {
			background-color: var(--color-white-900);
		}

		.u-text-white {
			color: var(--color-white-900);
		}


 /* ==========================================================================
   Utilities: Text Bold（.u-text-bold）
   役割: テキスト太さ指定
   ========================================================================== */
		.u-text-bold {
			font-weight: var(--font-weight-bold);
		}


 /* ==========================================================================
   Utilities: Text Position（.u-text）
   役割: テキストポジション指定
   ========================================================================== */
		.u-text-center {
			text-align: center;
		}

		.u-text-left {
			text-align: left;
		}

		.u-text-right {
			text-align: right;
		}

		.u-text-vertical-middle {
			vertical-align: middle;
		}


 /* ==========================================================================
   Utilities: Visually Hidden（.u-visually）
   役割: テキスト認識（アクセシビリティ対策）
   ========================================================================== */
		.u-visually-hidden {
			border-width: 0;
			clip: rect(0, 0, 0, 0);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;			
			white-space: nowrap;
			width: 1px;
		}


 /* ==========================================================================
   Utilities: Text Writing（.u-writing）
   役割: フォント記載方向
   ========================================================================== */
		.u-writing-vertical {
			writing-mode: vertical-rl;
		}


/* ==========================================================================
   Fade Animations (Utility Classes) - NEW
   指定箇所：汎用フェードイン（上下左右）
   ========================================================================== */

    /* 共通設定：フェード系の速度とイージング */
    .u-animation-fade-up,
    .u-animation-fade-down,
    .u-animation-fade-left,
    .u-animation-fade-right {
      opacity: 0;
      will-change: opacity, transform;
      transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                  transform 1s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* 各方向の初期位置設定（30pxずらし） */
    .u-animation-fade-up    { transform: translateY(30px); }
    .u-animation-fade-down  { transform: translateY(-30px); }
    .u-animation-fade-left  { transform: translateX(30px); }
    .u-animation-fade-right { transform: translateX(-30px); }

    /* 発火時：共通の表示状態 */
    .u-animation-fade-up.is-show,
    .u-animation-fade-down.is-show,
    .u-animation-fade-left.is-show,
    .u-animation-fade-right.is-show {
      opacity: 1;
      transform: translate(0, 0);
    }

/* ==========================================================================
   Wipe Animations (Utility Classes)
   指定箇所：トップページ > 円装飾・採用情報画像
   ========================================================================== */

    /* 共通設定：アニメーションの速度と動き（イージング） */
    .u-animation-wipe-down,
    .u-animation-wipe-right,
    .u-animation-wipe-left {
      will-change: clip-path;
      transition: clip-path 0.5s cubic-bezier(0.45, 0, 0.55, 1);
    }

    /* 初期状態設定 */
    .u-animation-wipe-down  { clip-path: inset(0 0 100% 0); }
    .u-animation-wipe-right { clip-path: inset(0 100% 0 0); }
    .u-animation-wipe-left  { clip-path: inset(0 0 0 100%); }

    /* 発火時：共通の表示状態 */
    .u-animation-wipe-down.is-show,
    .u-animation-wipe-right.is-show,
    .u-animation-wipe-left.is-show {
      clip-path: inset(0 0 0 0);
    }

/* ==========================================================================
   Common Utilities (Delay)
   ========================================================================== */

    /* 遅延用：フェード、ワイプ共通で使用可能 */
    .u-animation-delay-200 { transition-delay: 0.2s; }
    .u-animation-delay-400 { transition-delay: 0.4s; }
    .u-animation-delay-600 { transition-delay: 0.6s; }
    .u-animation-delay-800 { transition-delay: 0.8s; }
    .u-animation-delay-1000 { transition-delay: 1.0s; }
    .u-animation-delay-2000 { transition-delay: 2.0s; }

/* ==========================================================================
   Text Jump Animation (Utility)
	 指定箇所：トップページ > 採用情報 join us
   ========================================================================== */

		.u-animation-text-jump {
			display: inline-block;
		}

		.u-animation-text-jump .char-unit {
			display: inline-block;
			overflow: hidden;
			vertical-align: bottom;
		}

		.u-animation-text-jump .char-body {
			display: inline-block;
			transform: translateY(100%); /* 初期位置：地面の下 */
			will-change: transform;
		}

		/* 発火時：一文字ずつジャンプさせる */
		.u-animation-text-jump.is-show .char-body {
			animation: text-jump-bounce 0.8s forwards;
		}

		@keyframes text-jump-bounce {
			0% {
				transform: translateY(100%);
			}
			60% {
				/* 勢いよく飛び出し、定位置より少し上（-20%）まで行く */
				transform: translateY(-20%);
			}
			100% {
				/* 最終的に地面（0）に着地する */
				transform: translateY(0);
			}
		}

/* ==========================================================================
   Hover Animation (Small Bounce)
	 指定箇所：ページトップ
   ========================================================================== */

		/* 汎用クラスを付与した要素、またはその中の画像に適用 */
		.u-animation-hover-bounce {
			transition: transform 0.3s ease;
		}

		/* ホバー時にアニメーションを実行 */
		.u-animation-hover-bounce:hover {
			/* 0.5秒かけて実行 / 2回バウンドさせる設定はkeyframes内で制御 */
			animation: hover-bounce 0.5s ease-in-out;
		}

		@keyframes hover-bounce {
			0%, 100% {
				transform: translateY(0);
			}
			25% {
				transform: translateY(-8px); /* 1回目の浮き上がり */
			}
			50% {
				transform: translateY(0);    /* 1回目の着地 */
			}
			75% {
				transform: translateY(-4px); /* 2回目の浮き上がり（少し弱める） */
			}
		}

		
		@media screen and (min-width: 768px) {

		} /* min-width: 768px */

		@media screen and (min-width: 1025px) {

		} /* min-width: 1025px */



/* ==========================================================================
   Display Animation
	 指定箇所：ヘッダーメニュー
   ========================================================================== */
	 .is-disp-hide{
    animation: u-display-fade-out 0.5s ease forwards;
    display: none;
    opacity: 0;
    visibility: hidden;
   }
   .is-disp-show{
    animation: u-display-fade-in 0.5s ease forwards;
    display: block;
    opacity: 1;
    visibility: visible;
   }
   @keyframes u-display-fade-in {
    0% {
      display: none;
      opacity: 0;
      visibility: visible;
    }
    1% {
      display: none;
      opacity: 0;
      visibility: visible;
    }
    100% {
      display: block;
      opacity: 1;
      visibility: visible;
    }
   }
   @keyframes u-display-fade-out {
    0% {
      display: block;
      opacity: 1;
      visibility: visible;
    }
    1% {
      display: block;
      opacity: 1;
      visibility: visible;
    }
    100% {
      display: none;
      opacity: 0;
      visibility: hidden;
    }
   }