@charset "UTF-8";

/* =========================================
   0. Import Fonts
   ========================================= */
/* Noto Sans JP (ゴシック), Zen Old Mincho (明朝), Condiment (装飾英字) を読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Old+Mincho:wght@700&family=Condiment&display=swap');


/* =========================================
   1. Reset (Architectural CSS Reset 2025)
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin-block-end: 0;
    margin: 0;
}

ul[role='list'], ol[role='list'] {
    list-style: none;
    padding: 0;
}

/* リストスタイルの初期化（汎用） */
ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

body {
    min-height: 100vh;
    line-height: 1.6;
    text-rendering: optimizeSpeed;
    font-family: 'Noto Sans JP', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    text-wrap: balance;
}

input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

img, picture {
    max-width: 100%;
    display: block;
}

textarea:not([rows]) {
    min-height: 10em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:target {
    scroll-margin-block: 5ex;
}

/* =========================================
   Root Font Size Settings (1440px Base)
   ========================================= */

/* 1440px以上のPC画面：常に10px相当 */
@media screen and (min-width: 1441px) {
  html {
    font-size: 10px; 
  }
}

/* ★変更点★ 
   769px 〜 1440px（タブレット〜ノートPC）
   PCデザイン(1440px)を、769pxの幅までそのまま縮小して表示します。
*/
@media screen and (min-width: 769px) and (max-width: 1440px) {
  html {
    /* 1440px幅で10pxになる比率を維持 */
    font-size: 0.69444vw;
  }
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {
  html {
    /* ここからSPレイアウトに切り替え */
    font-size: 62.5%; /* 10px */
  }
}

/* =========================================
   2. Variables & Base Settings (SOLTEC Design)
   ========================================= */
:root {
    /* Colors: SOLTEC Design */
    --c-primary: #C2133D;           /* メインカラー：赤 */
    --c-text-main: #3E3F3F;         /* 基本テキスト */
    --c-text-white: #FFFFFF;        /* 白テキスト */
    --c-text-black: #231915;        /* 黒テキスト（グラフ用） */
    
    --c-bg-gray: #F1F1F1;           /* 背景グレー */
    --c-bg-pink: #FDFAFA;           /* 背景薄ピンク */
    --c-bg-pink-text: #F7E3E7;      /* 背景装飾文字ピンク */
    --c-bg-pink-text-alpha: rgba(253, 250, 250, 0.3); /* 背景装飾文字ピンク30% */
    
    --c-border-gray: #D9D9D9;       /* 汎用ボーダー・フローティングボタン背景 */

    /* Typography */
    --font-base: 'Noto Sans JP', sans-serif;
    --font-mincho: 'Zen Old Mincho', serif;
    --font-decorative: 'Condiment', cursive;

    /* Layout */
    --w-page: 144rem;               /* ページ最大幅 */
    --w-content: 105.6rem;          /* メインコンテンツ幅 */
    --w-content-wide: 124.8rem;     /* 広めのコンテンツ幅（募集職種エリア） */
    --h-header: 7.4rem;             /* ヘッダー高さ */

    /* Border Radius */
    --radius-sm: 1rem;
    --radius-md: 1.5rem;
    --radius-lg: 2rem;
    --radius-pill: 9999px;          /* カプセル型 */
}

html {
    font-size: 62.5%;               /* 10px = 1rem */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    font-size: 1.6rem;              /* 基本フォントサイズ 16px相当 */
    color: var(--c-text-main);
    background-color: var(--c-text-white);
    -webkit-font-smoothing: antialiased;
}


/* =========================================
   3. Layout Utilities
   ========================================= */

/* コンテナ共通クラス */
.inner-container {
    max-width: var(--w-content);
    margin: 0 auto;
    width: 100%;
    padding: 0 2rem;
    position: relative;
}

/* 広めのコンテナ（募集職種エリア用） */
.inner-container--wide {
    max-width: var(--w-content-wide);
}

/* フルワイドコンテナ（ページ幅） */
.inner-container--full {
    max-width: var(--w-page);
}


/* =========================================
   4. Typography Utilities
   ========================================= */

/* セクションタイトル（共通） */
.section-title {
    font-family: var(--font-base);
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.1em;
    color: var(--c-text-main);
}

.section-title--white {
    color: var(--c-text-white);
}

/* 背景装飾文字（共通） */
.section-bg-text {
    font-family: var(--font-decorative);
    font-size: 16.4rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: var(--c-bg-pink-text);
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.section-bg-text--small {
    font-size: 11.4rem;
    letter-spacing: 0.1em;
}

.section-bg-text--alpha {
    color: var(--c-bg-pink-text-alpha);
}

/* 本文テキスト（共通） */
.text-body {
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
    color: var(--c-text-main);
}

.text-body--medium {
    font-weight: 500;
}

.text-body--white {
    color: var(--c-text-white);
}

/* 見出しテキスト（共通） */
.text-heading {
    font-family: var(--font-base);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    color: var(--c-text-main);
}

.text-heading--white {
    color: var(--c-text-white);
}

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


/* =========================================
   5. Background Utilities
   ========================================= */

/* セクション背景色 */
.bg-white {
    background-color: var(--c-text-white);
}

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

.bg-pink {
    background-color: var(--c-bg-pink);
}

.bg-primary {
    background-color: var(--c-primary);
}

/* =========================================
   6. PC/SP Display Utilities
   ========================================= */

/* PC/SP 表示切り替えユーティリティ */
.sp-only {
    display: none !important;
}

.pc-only {
    display: block !important;
}

/* ★変更点★ rem ではなく px で厳密に指定 */
@media (max-width: 768px) {
    .sp-only {
        display: block !important;
    }

    .pc-only {
        display: none !important;
    }
    
    /* SP時のコンテナパディング調整 */
    .inner-container {
        padding: 0 1.5rem;
    }

    /* SP時のセクションタイトル */
    .section-title {
        font-size: 2.8rem;
    }

    /* SP時の背景装飾文字 */
    .section-bg-text {
        font-size: 8rem;
    }

    .section-bg-text--small {
        font-size: 6rem;
    }
}

/* =========================================
   Scroll Animation Styles
   ========================================= */
:root {
  --mh--duration-slow: 1.0s;
  --mh--easing: cubic-bezier(0.25, 1, 0.5, 1);
}

/* 初期状態 */
.js-c-anime-elem[data-anime="fadein-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: transform var(--mh--duration-slow) var(--mh--easing),
              opacity var(--mh--duration-slow) var(--mh--easing);
}

/* アニメーション発火時 */
.js-c-anime-elem[data-anime="fadein-up"].is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延設定 */
.js-c-anime-elem[data-anime-delay="0.1"] { transition-delay: 0.1s; }
.js-c-anime-elem[data-anime-delay="0.2"] { transition-delay: 0.2s; }
.js-c-anime-elem[data-anime-delay="0.3"] { transition-delay: 0.3s; }
.js-c-anime-elem[data-anime-delay="0.4"] { transition-delay: 0.4s; }
.js-c-anime-elem[data-anime-delay="0.5"] { transition-delay: 0.5s; }
.js-c-anime-elem[data-anime-delay="0.6"] { transition-delay: 0.6s; }


/* =========================================
   Graph & Counter Animation Styles
   ========================================= */

/* --- 棒グラフ (Bar Chart) --- */
.env-chart__bar {
  /* 初期状態: 横幅を0にする */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
  /* 視認性向上のため、親要素がアニメーション開始するまで隠しておく */
  will-change: transform;
}

/* アニメーション発火時 */
.is-animated .env-chart__bar,
.env-chart__bar.is-animated {
  transform: scaleX(1);
}

/* グラフの遅延表示 (nth-child で順番に) */
.env-chart__bars .env-chart__bar-row:nth-child(1) .env-chart__bar { transition-delay: 0.1s; }
.env-chart__bars .env-chart__bar-row:nth-child(2) .env-chart__bar { transition-delay: 0.2s; }
.env-chart__bars .env-chart__bar-row:nth-child(3) .env-chart__bar { transition-delay: 0.3s; }
.env-chart__bars .env-chart__bar-row:nth-child(4) .env-chart__bar { transition-delay: 0.4s; }
.env-chart__bars .env-chart__bar-row:nth-child(5) .env-chart__bar { transition-delay: 0.5s; }
.env-chart__bars .env-chart__bar-row:nth-child(6) .env-chart__bar { transition-delay: 0.6s; }


/* --- 数字カウントアップ (Counter) --- */
/* カウントアップ中は数字がパラパラ変わるため、等幅フォント推奨ですが
   現状のフォント優先でスタイルは最低限にしています */
.js-counter-number {
  display: inline-block;
  opacity: 0; /* 初期状態は非表示（JSで0を入れて表示開始） */
  transition: opacity 0.3s;
}

.js-counter-number.is-animated {
  opacity: 1;
}


/* =========================================
   Hover Animation (Slide Effect)
   ========================================= */

/* -----------------------------------------
   1. 募集職種カード (Recruitment Card)
   ----------------------------------------- */

/* アニメーションの基準点と重なり順の整理 */
.recruitment__card-body {
    position: relative;
    z-index: 1;          /* テキストを疑似要素より上に表示するため */
    overflow: hidden;    /* はみ出した背景を隠す */
    transition: color 0.3s;
}

/* スライドしてくる白い背景（疑似要素） */
.recruitment__card-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;            /* 初期状態は幅0 */
    height: 100%;
    background-color: #fff;
    z-index: -1;         /* テキストの下に配置 */
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* 左から右へのアニメーション */
}

/* ホバー時の背景アニメーション発火 */
.recruitment__card:hover .recruitment__card-body::before {
    width: 100%;
}

/* ホバー時のテキスト色変更 (白 -> 赤) */
.recruitment__card:hover .recruitment__card-title,
.recruitment__card:hover .recruitment__card-text {
    color: var(--c-primary);
    transition: color 0.3s ease;
}

/* ホバー時の矢印ボタン変更 (白丸・赤矢印 -> 赤丸・白矢印) */
.recruitment__card-arrow {
    transition: background-color 0.3s, color 0.3s;
}

.recruitment__card:hover .recruitment__card-arrow {
    background-color: var(--c-primary);
    color: #fff; /* SVGの currentColor を白にする */
    border: 1px solid var(--c-primary); /* 境界線を整える */
}


/* -----------------------------------------
   2. 応募するボタン (FAQ & Floating Entry Btn)
   ----------------------------------------- */

/* 共通設定 */
.faq__entry-btn,
.entry-btn {
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* ▼ 追加: ガタつき防止のため、通常時から透明な枠線をセット */
    border: 1px solid transparent;
    box-sizing: border-box; /* 枠線を内側に含める設定 */
}

/* スライドしてくる白い背景 */
.faq__entry-btn::before,
.entry-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ホバー時に背景幅を100%に */
.faq__entry-btn:hover::before,
.entry-btn:hover::before {
    width: 100%;
}

/* ホバー時にテキストと枠線を赤色に変更 */
.faq__entry-btn:hover,
.entry-btn:hover {
    color: var(--c-primary);
    /* ▼ 追加: 枠線を赤色にする */
    border-color: var(--c-primary);
}

/* ボタン内の各要素（ラベル、テキスト）の色変更 */
.faq__entry-btn:hover .faq__entry-label,
.faq__entry-btn:hover .faq__entry-text,
.entry-btn:hover .entry-btn__label,
.entry-btn:hover .entry-btn__text {
    color: var(--c-primary);
    transition: color 0.3s;
}

/* ボタン内の装飾ラインの色変更 */
.faq__entry-btn:hover .faq__entry-line,
.entry-btn:hover .entry-btn__line {
    background-color: var(--c-primary);
    transition: background-color 0.3s;
}

/* =========================================
   Entry Button Slide-in Animation
   ========================================= */

/* ボタンの初期状態：画面右へ隠しておく */
.entry-btn {
    /* 既存のスタイルは維持 */
    
    /* ▼ 追加：右側の画面外へ移動させておく */
    transform: translateX(120%);
    opacity: 0;
    
    /* ▼ 追加：滑らかに戻ってくる動きの設定 */
    /* duration: 1.0s, easing: cubic-bezier(...) で自然な減速感を表現 */
    transition: transform 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1.0s ease;
    
    /* 読み込み直後のチラつき防止 */
    will-change: transform, opacity;
}

/* ロード後にJSで付与するクラス：定位置に戻す */
.entry-btn.is-slide-in {
    transform: translateX(0);
    opacity: 1;
}