/* =============================================
   CLINKS Recruit - 中途経験者 働く環境を知る
   =============================================
   1. デザイントークン（CSS変数）
   2. リセット・基本スタイル
   3. コンテナ・セクション・グリッド
   4. 共通コンポーネント
   5. ページ固有スタイル
   6. Office Slider（カスタム）
   ============================================= */


/* =============================================
   1. デザイントークン（CSS変数）
   ============================================= */
:root {

    /* --- カラー --- */
    --color-background:                 #f9f9f9;
    --color-surface:                    #f9f9f9;
    --color-surface-bright:             #f9f9f9;
    --color-surface-dim:                #dadada;
    --color-surface-container-lowest:   #ffffff;
    --color-surface-container-low:      #f3f3f3;
    --color-surface-container:          #eeeeee;
    --color-surface-container-high:     #e8e8e8;
    --color-surface-container-highest:  #e2e2e2;
    --color-surface-variant:            #e2e2e2;
    --color-surface-tint:               #875200;
    --color-inverse-surface:            #2f3131;
    --color-inverse-on-surface:         #f1f1f1;

    /* ↓ common-keiken.css の変数を参照 */
    --color-primary:                    #875200;
    --color-primary-container:          var(--keiken-color-primary);       /* #F49000 */
    --color-primary-fixed:              #ffddba;
    --color-primary-fixed-dim:          #ffb865;
    --color-on-primary:                 #ffffff;
    --color-on-primary-container:       #5e3800;
    --color-on-primary-fixed:           #2b1700;
    --color-on-primary-fixed-variant:   #673d00;
    --color-inverse-primary:            #ffb865;

    --color-secondary:                  var(--keiken-color-text-light);    /* #666666 */
    --color-secondary-container:        #e4e2e1;
    --color-secondary-fixed:            #e4e2e1;
    --color-secondary-fixed-dim:        #c8c6c6;
    --color-on-secondary:               #ffffff;
    --color-on-secondary-container:     #656464;
    --color-on-secondary-fixed:         #1b1c1c;
    --color-on-secondary-fixed-variant: #474747;

    --color-tertiary:                   #78555e;
    --color-tertiary-container:         #cca2ac;
    --color-tertiary-fixed:             #ffd9e2;
    --color-tertiary-fixed-dim:         #e7bbc6;
    --color-on-tertiary:                #ffffff;
    --color-on-tertiary-container:      #573841;
    --color-on-tertiary-fixed:          #2d141c;
    --color-on-tertiary-fixed-variant:  #5e3e47;

    --color-error:                      #ba1a1a;
    --color-error-container:            #ffdad6;
    --color-on-error:                   #ffffff;
    --color-on-error-container:         #93000a;

    /* ↓ common-keiken.css の変数を参照 */
    --color-on-surface:                 var(--keiken-color-text-base);     /* #3E3A39 */
    --color-on-surface-variant:         var(--keiken-color-text-light);    /* #666666 */
    --color-on-background:              var(--keiken-color-text-base);     /* #3E3A39 */
    --color-outline:                    #867461;
    --color-outline-variant:            #d9c3ad;

    /* --- スペーシング --- */
    --spacing-gutter:           24px;
    --spacing-container-max:    1200px;
    --spacing-section-desktop:  100px;
    --spacing-section-mobile:   60px;
    --spacing-unit:             8px;

    /* --- ボーダー半径 --- */
    --radius-default: 0.125rem;
    --radius-lg:      0.25rem;
    --radius-xl:      0.5rem;
    --radius-full:    0.75rem;
    --radius-2xl:     1rem;
    --radius-circle:  50%;

    /* --- シャドウ --- */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.02);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1),
                   0  4px  6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1),
                   0  8px 10px -6px rgba(0, 0, 0, 0.1);

    /* --- トランジション --- */
    --transition-base:   all 0.3s ease;
    --transition-colors: background-color 0.3s ease, color 0.3s ease,
                         border-color 0.3s ease;

    /* --- フォント --- */
    /* ↓ common-keiken.css の変数を参照 */
    --font-family: var(--keiken-font-family-base);                         /* 'Noto Sans JP' */

    /* --- タイポグラフィ --- */
    /* ↓ common-keiken.css の変数を参照 */
    --fs-label-sm:   var(--keiken-font-size-sm);                        
    --lh-label-sm:   1.4;
    --fw-label-sm:   400;

    --fs-label-bold: 14px;
    --lh-label-bold: 1.4;
    --fw-label-bold: 700;

    --fs-body-md:    var(--keiken-font-size-md);                        
    --lh-body-md:    1.7;
    --fw-body-md:    400;

    --fs-body-lg:    20px;
    --lh-body-lg:    1.8;
    --fw-body-lg:    400;

    --ls-headline-sm:        2.88px;  
    --ls-headline-sm2:      1.88px;
    --ls-headline-sm3:      1.44px;

    --fs-headline-md:        18px;            
    --lh-headline-md:        1.5;
    --fw-headline-md:        700;
    --ls-headline-md:        0.02em; 

    --fs-headline-lg:        28px;
    --lh-headline-lg:        1.4;
    --fw-headline-lg:        700;
    --ls-headline-lg:        0.1em;

    --fs-headline-lg-mobile: 28px;
    --lh-headline-lg-mobile: 1.3;
    --fw-headline-lg-mobile: 700;

    --fs-headline-xl:        45px;
    --lh-headline-xl:        1.2;
    --fw-headline-xl:        700;
    --ls-headline-xl:        0.2em;
}


/* =============================================
   2. リセット・基本スタイル
   ============================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-on-surface);
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* 改行ヘルパー */
.br-desktop {
    display: none;
}

@media (min-width: 768px) {
    .br-desktop {
        display: inline;
    }
}

/* テキストカラー */
.common_text_accent {
    color: var(--color-primary-container);
}

/* PC：sp-brを非表示 */
.sp-br { display: none; }

/* スマホ：pc-brを非表示、sp-brを表示 */
@media (max-width: 768px) {
    .pc-br { display: none; }
    .sp-br { display: inline; }
}


/* =============================================
   3. コンテナ・セクション・グリッド
   ============================================= */

/* コンテナ */
.common_container {
    max-width: var(--spacing-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-gutter);
    padding-right: var(--spacing-gutter);
    background-size: cover;
    background-repeat: no-repeat;
}

/* セクション */
.common_section {
    padding-top: var(--spacing-section-mobile);
    padding-bottom: var(--spacing-section-mobile);
}

@media (min-width: 768px) {
    .common_section {
        padding-top: var(--spacing-section-desktop);
        padding-bottom: var(--spacing-section-desktop);
    }
}

.common_section_alt {
    background-color: var(--color-surface-container-low);
}

/* セクションヘッダー */
.common_section_header {
    margin-bottom: 48px;
}

.common_section_title {
    font-size: var(--fs-headline-lg-mobile);
    line-height: var(--lh-headline-lg-mobile);
    font-weight: var(--fw-headline-lg);
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .common_section_title {
        font-size: var(--fs-headline-lg);
        line-height: var(--lh-headline-lg);
        letter-spacing: var(--ls-headline-lg);
    }
}

.common_section_desc {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
    font-weight: bold;
    letter-spacing: var(--ls-headline-sm);
    color: var(--color-on-surface);
}

/* 3カラムグリッド */
.common_grid_3col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .common_grid_3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .common_grid_3col {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =============================================
   4. 共通コンポーネント
   ============================================= */


/* ベネフィットカード */
.benefits_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 32px;
    border: 1px solid var(--color-surface-variant);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease;
}

.benefits_card:hover {
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .benefits_card:hover {
        transform: none;
    }
}

.benefits_card_icon_wrap {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* アイコン基本スタイル（mask-image方式） */
.benefits_card_icon {
    display: block;
    width: 90px;
    height: 90px;
    background-color: var(--color-primary-container);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.benefits_card_icon_img {
    display: block;
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.benefits_card_title {
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
    font-weight: var(--fw-headline-md);
    letter-spacing: var(--ls-headline-sm3);
    margin-bottom: 16px;
}

.benefits_card_text {
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    font-weight: var(--fw-body-md);
    color: #3E3A39;
    letter-spacing: var(--ls-headline-sm2);
    text-align: left;
    width: 100%;
}

/* ボタンは他ページでも使用する可能性があるため common_ は残す */
.common_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9999px;
    cursor: pointer;
    font-family: var(--font-family);
    transition: var(--transition-colors);
    text-decoration: none;
}

.common_btn_primary {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-size: var(--fs-label-bold);
    line-height: var(--lh-label-bold);
    font-weight: var(--fw-label-bold);
    padding: 16px 40px;
    width: 100%;
    justify-content: center;
}

.common_btn_primary:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

@media (min-width: 768px) {
    .common_btn_primary {
        width: auto;
    }
}

.common_btn_cta {
    background-color: var(--color-surface);
    color: var(--color-primary-container);
    font-size: var(--fs-headline-md);
    line-height: var(--lh-headline-md);
    font-weight: var(--fw-headline-md);
    padding: 20px 64px;
    gap: 16px;
    box-shadow: var(--shadow-lg);
}

.common_btn_cta:hover {
    background-color: var(--color-surface-container-low);
}

.common_btn_icon_sm {
    font-size: 14px;
}

.common_btn_icon_circle {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    border: 2px solid var(--color-primary-container);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-colors);
}

.common_btn_cta:hover .common_btn_icon_circle {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
}


/* =============================================
   5. ページ固有スタイル
   ============================================= */

/* ========== Hero ========== */
.hero_section {
    min-height: 600px;
    padding-top: 100px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero_copy {
    position: relative;
    z-index: 2;
    width: min(var(--spacing-container-max), 86%);
    margin: 0 auto;
    padding-top: 50px;
}

.hero_title {
    font-size: var(--keilen-fv-text-lg);
    line-height: var(--keilen-fv-line-height-lg);
    font-weight: var(--fw-headline-xl);
    letter-spacing: var(--keilen-fv-letter-spacing-lg);
    color: var(--color-on-surface);
    margin: 0 0 24px;
}

.hero_subtitle {
    font-size: var(--keilen-fv-text-md);
    letter-spacing: var(--keilen-fv-letter-spacing-md);
    line-height: var(--keilen-fv-line-height-md);
    font-weight: var(--fw-headline-md);
    color: var(--color-on-surface);
    margin-bottom: 24px;
}

.hero_lead {
    font-size: var(--keilen-fv-text-sm);
    line-height: var(--keilen-fv-line-height-sm);
    font-weight: 500;
    letter-spacing: var(--keilen-fv-letter-spacing-sm);
    color: var(--color-on-surface);
}

.hero_visual {
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.hero_visual_pattern {
    width: 100%;
}

/* .hero_visual img {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    animation: heroPersonFadeIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}

@keyframes heroPersonFadeIn {
    0%   { opacity: 0; transform: translateY(24px) scale(0.985); }
    100% { opacity: 1; transform: translateY(0)    scale(1);     }
}

@media (prefers-reduced-motion: reduce) {
    .hero_visual img { animation: none; opacity: 1; transform: none; }
} */

/* ── モバイル（〜900px） ── */
@media (max-width: 900px) {
    .hero_section {
        min-height: unset;
        padding-top: 56px;
        display: flex;
        flex-direction: column;
    }
    .hero_copy {
        width: 84%;
        padding-top: 54px;
    }
    .hero_title {
        font-size: 35px;
        line-height: 1.9;
        margin-bottom: 12px;
        letter-spacing: var(--ls-headline-sm);
    }
    .hero_subtitle {
        font-size: 18px;
        margin-top: 30px;
        margin-bottom: 30px;
        letter-spacing: var(--ls-headline-sm);
        white-space: nowrap;  
    }
    .hero_lead {
        font-size: 14px;
        line-height: 35px;
    }

    .hero_visual {
        position: relative;
        width: 100%;
        height: 300px;
        right: 0;
        bottom: 0;
    }

    .hero_visual_pattern {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 1000px;
    }
}

/* ========== Benefits Grid ========== */
.benefits_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .benefits_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .benefits_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =============================================
   6. Office Section & Slider（カスタム）
   ============================================= */

.office-section {
    padding-top: var(--spacing-section-mobile);
    padding-bottom: var(--spacing-section-mobile);
}

@media (min-width: 768px) {
    .office-section {
        padding-top: var(--spacing-section-desktop);
        padding-bottom: var(--spacing-section-desktop);
    }
}

.section-gray {
    background-color: var(--color-surface-container-low);
}

.office-section .wide {
    width: auto;
    max-width: none;
    margin-left: max(var(--spacing-gutter), calc((100vw - var(--spacing-container-max)) / 2 + var(--spacing-gutter)));
    margin-right: 0;
}

.section-head {
    margin-bottom: 48px;
}

.section-head h2 {
    font-size: var(--fs-headline-lg-mobile);
    line-height: var(--lh-headline-lg-mobile);
    font-weight: var(--fw-headline-lg);
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .section-head h2 {
        font-size: var(--fs-headline-lg);
        line-height: var(--lh-headline-lg);
        letter-spacing: var(--ls-headline-lg);
    }
}

.section-head p {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
    font-weight: bold;
    letter-spacing: var(--ls-headline-sm);
    color: var(--color-on-surface);
}

.js-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s ease;
}

.js-fade.is-visible {
    opacity: 1;
    transform: none;
}

.office-slider {
    position: relative;
    margin-top: 28px;
}

.slider-viewport {
    width: 100%;
    overflow: hidden;
    padding: 2px 0px 8px;
}

@media (max-width: 1399px) {
    .slider-viewport {
        width: calc(100% - 80px);
        margin-left: 80px;
    }
}

.slider-track {
    display: flex;
    gap: 22px;
    will-change: transform;
}

.slider-track img {
    width: 400px;
    height: 280px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-xl);
    flex-shrink: 0;
    display: block;
}

@media (max-width: 767px) {
    .slider-track img {
        width: 260px;
        height: 180px;
    }
}

.slider-btn {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #222;
    background: #fff;
    cursor: pointer;
    transition: background .25s, color .25s, transform .25s;
}

.slider-btn.prev {
    left: 0;
}
@media (min-width: 1400px) {
    .slider-btn.prev {
        left: -80px;
    }
}


/* =============================================
   reveal アニメーション
   ============================================= */

.common_reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.common_reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.common_reveal_delay1 { transition-delay: 0.1s; }
.common_reveal_delay2 { transition-delay: 0.2s; }
.common_reveal_delay3 { transition-delay: 0.3s; }
.common_reveal_delay4 { transition-delay: 0.4s; }
.common_reveal_delay5 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
    .common_reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


@media (max-width: 900px) {
    .section-head h2 {
        font-size: 25px;
    }
    .section-head p {
        font-size: 16px;
    }

    .common_section_title {
        font-size: 25px;
    }

    .common_section_desc {
        font-size: 16px;
    }
}