@charset "UTF-8";

@media screen and (max-width: 767px) {
    /* ロック中、一切のスクロール操作を物理的に無効化するクラス */
body.is-locked {
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important; /* 慣性を殺す */
}
    
}
/* recruit.css */
/* 最後の要素やbodyの背景色を調整してごまかす */
body {
    background-color: #ffffff; /* サイトの背景色に合わせる */
}



/* ==========================================================================
   1. Base & Reset / 全体設定
   ========================================================================== */
.page-recruit, 
.single-interview {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* 基本は日本語フォント */
    font-family: 'HigureGothic', sans-serif;
}

/* 文字間隔設定 */
body.page-template-recruit-page p, 
body.single-interview p {
    letter-spacing: 0.08em;
}

/* ルートサイズ設定 (1rem = 10px) */
html:has(body.page-template-recruit-page, body.single-interview) {
    font-size: 62.5% !important;
    min-width: 320px;
}

/* 横溢れ防止とスクロール設定 */
html:has(body.page-template-recruit-page, body.single-interview),
body.page-template-recruit-page,
body.single-interview {
    width: 100%;
}

/* スマホでの横幅制限解除 */
@media screen and (max-width: 767px) {
    html:has(body.page-template-recruit-page) {
        min-width: 100% !important; 
    }
}

/* --- スクロールロック（メニュー展開時） --- */
html.is-fixed:has(body.page-template-recruit-page, body.single-interview) {
    overflow: hidden !important;
    height: 100vh !important;
}

body.page-template-recruit-page.is-fixed,
body.single-interview.is-fixed {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    -webkit-overflow-scrolling: none;
}


/* ==========================================================================
   2. Fonts / フォント定義
   ========================================================================== */
@font-face {
    font-family: 'HigureGothic';
    src: url('../fonts/HigureGothic-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HigureGothic';
    src: url('../fonts/HigureGothic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}




/* ==========================================================================
   3. Header / ヘッダー共通設定
   ========================================================================== */
/* ロゴの切り替え */
:is(body.page-template-recruit-page, body.single-interview) .site-header .site-logo__img--default,
.site-header--recruit .site-logo__img--default {
    display: none !important;
}

:is(body.page-template-recruit-page, body.single-interview) .site-header .site-logo__img--white,
.site-header--recruit .site-logo__img--white {
    display: block !important;
}

/* ナビゲーション文字色 */
:is(body.page-template-recruit-page, body.single-interview) .site-header .site-nav__list a,
.site-header--recruit .site-nav__list a {
    color: #ffffff !important;
    font-weight: 400;
}

:is(body.page-template-recruit-page, body.single-interview) .site-nav__list a:hover {
    color: #fed1be !important;
}

@media screen and (max-width: 767px) {
    :is(body.page-template-recruit-page, body.single-interview) .site-header .site-nav__list a,
    .site-header--recruit .site-nav__list a {
        color: #2A2A2A !important;
    }
}

/* CTAボタン */
:is(body.page-template-recruit-page, body.single-interview) .site-header__cta--pc .btn-contact__inner,
.site-header--recruit .site-header__cta--pc .btn-contact__inner {
    background-color: #5d6064;
    color: #ffffff;
    transition: all 0.3s ease-in-out !important;
}

/* hover時の条件を追加 */
:is(body.page-template-recruit-page, body.single-interview) .site-header__cta--pc .btn-contact__inner:hover,
.site-header--recruit .site-header__cta--pc .btn-contact__inner:hover {
    opacity: 1;
    background-color: rgba(83, 86, 90, 0.8);
                /* さらに少し透明度を下げて「薄く」見せる */
}

/* ヘッダー固定・背景 */
:is(body.page-template-recruit-page, body.single-interview) .site-header,
.site-header--recruit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999999 !important;
    background: unset;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0.98;
}

:is(body.page-template-recruit-page, body.single-interview) .site-header__inner,
.site-header--recruit .site-header__inner {
    z-index: 999999999 !important;
    background-color: rgba(74, 77, 81, 0.85);
}

/* バーガーメニュー */
:is(body.page-template-recruit-page, body.single-interview) .burger::before,
:is(body.page-template-recruit-page, body.single-interview) .burger::after,
.site-header--recruit .burger::before,
.site-header--recruit .burger::after { 
    background-image: none !important;
    background-color: #fff !important;
}

/* ドロワーメニュー */
:is(body.page-template-recruit-page, body.single-interview) .site-nav--drawer,
.site-header--recruit .site-nav--drawer {
    position: fixed !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    background: #f3fdff !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.site-header.is-open :is(.site-nav--drawer) {
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
}


/* ==========================================================================
   4. Main Visual (MV) / メインビジュアル
   ========================================================================== */
.rec-hero-sticky-wrapper {
    position: relative;
    overflow: visible !important;
    z-index: 1;
/* 💡【重要修正1】PCの安全策として、最低限の高さをCSSでも確保しておく */
    /* JSが正常に動けばJSの値(important)が優先されますが、 */
    /* 読み込み初期のガタつきや消失を防ぐために必須です。 */

    opacity: 0;
}



.rec-hero-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1;
    touch-action: pan-y;
    overscroll-behavior: auto;
    

}

.rec-hero-bg-move {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 🚨 100% ではなく、画面に固定する設定に変更 */
    height: 100%; 
    
    /* ▼ 背景グラデーションを「画面サイズ」に固定してリピートさせる */
    background: linear-gradient(0deg, #cddcee 0%, #ddedee 58%, #ebf6f5 90%, #dde1ee 100%);
    background-size: 100% 100vh; /* 縦幅を常に「画面の高さ(100vh)」に固定 */
    background-attachment: fixed; /* 💡 これが重要！スクロールしても背景が動かないように固定 */
    background-repeat: repeat-y;
    z-index: 0;
}

/* キャッチコピー */
.rec-hero-catch {
    position: relative;
    z-index: 10;
    left: 0;
top: 0;
width: 100%;
    padding-left: 6.8vw;
    font-family: 'HigureGothic', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: clamp(5.6rem, 6.4vw + 1.6rem, 12.8rem);
    text-align: left;
    line-height: 1.2;
    visibility: hidden;
    will-change: opacity, transform;
}

/* キャッチコピーの英語部分 */
.rec-hero-catch span {
    font-family: 'Hind', sans-serif; /* ★Hind適用 */
    display: block;
    font-size: 0.5em;
}

/* 3人の社員画像 */
.rec-mv-three-member-img {
    width: 100%; height: auto;
    position: absolute;
    transform: translateY(var(--member-y, 0vh));
    opacity: 0; visibility: hidden;
    transition: none !important;
    z-index: 3;
}

/* ==============================================
   メイン画像（rec-hero-img）の共通設定
   ============================================== */
.rec-hero-img {
       position: absolute;
    top: 0;
    
    /* ▼ 中央寄せ(-50%) ＋ スタート地点のY座標(20px) */
    left: 50%;
    transform: translate(-50%, 20px); 
    
    width: 100%;
    min-height: 110vh; /* 高さのチラつき防止 */
    
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: none !important;
    display: block;
}




.rec-hero-img, 
.rec-hero-sticky-container {
    /* アニメーションの対象となるプロパティの変化をブラウザに予告し、最適化させる */
    will-change: transform, height, top;
    /* 3Dアクセラレーションを有効化 */
    transform: translate3d(0, 0, 0);
}

/* 画像とキャッチコピーも初期状態は非表示 */
.rec-hero-img,
.rec-mv-three-member-img {
    opacity: 0;
    visibility: hidden;
}







/* --- 暗いレイヤー（Dimmer / Overlay） --- */
.rec-hero-bg-overlay,
.rec-hero-dimmer {
    position: absolute; inset: 0;
    z-index: 5 !important;
   /* ▼ 単色からグラデーションに変更 */
background: 

/* 【修正】グレーの均一な板（rgbaの最後の数値で濃さを調整してください） */
       linear-gradient(rgba(40, 50, 70, 0.1), rgba(40, 50, 70, 0.1)),

        
        linear-gradient(to bottom, 
        rgba(255, 240, 240, 0.5) 0%, 
         rgba(255, 240, 240, 0.5) 3%,    /* 0%から開始し、少し透明度を上げると馴染みます */
        rgb(226, 117, 117) 12%,        /* 中間地点 */
        rgb(230, 105, 67) 20%          /* 最も濃い色を一番下に */
    ) !important;
/* 💡 複数枚重ねる場合、サイズも枚数分（カンマ区切り）指定するのが安全です */
    background-size: 100% 3000px, 100% 3000px !important; 
    background-position: 0% 0%, 0% 0% !important;
    
    pointer-events: none !important;
    mix-blend-mode: normal !important; 
    opacity: 0;
    visibility: hidden;
    display: none;
}

.rec-hero-bg-overlay {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
}

.rec-hero-message-overlay, .rec-hero-message-inner, .rec-hero-message-title-overlay {
    mix-blend-mode: hard-light !important;

}

/* --- 暗いレイヤー（Dimmer）の初期状態を強制的に透明にする --- */
.rec-hero-dimmer,
.rec-hero-bg-overlay {
    /* 💡 opacity: 0 だけだとJSが上書きするまで一瞬見えることがあるので、 
       !important で初期状態を固めるか、JSが動くのを待ちます */
    opacity: 0 ;
    transition: none !important;
}

/* --- メッセージエリア --- */

.rec-hero-message-overlay,
.rec-hero-message-inner,
.rec-hero-message-title-overlay {
    background-color: transparent !important;
    background: none !important;
}

/* --- メッセージエリア --- */
.rec-hero-message-overlay {
    position: relative;
    /* 💡 変更：全画面(inset:0)ではなく、キャッチコピーの下に配置する */
    top: 12vh;      /* キャッチコピーから1画面分（100vh）下に離す設定 */
    left: 0;
    width: 100%;
    
    z-index: 100;
    display: flex;
    /* 💡 変更：配置を固定するため align-items は不要（または flex-start） */
    justify-content: center; 
    
    pointer-events: none;
    opacity: unset;
    visibility: hidden; 
}

/* 2. 親要素（inner） */
.rec-hero-message-inner {
    position: relative;
    z-index: 100;
    max-width: 1120px;
    padding-inline: 8vw;
    text-align: left;
    transform: none;



    mix-blend-mode: normal !important;
    isolation: auto !important;
    pointer-events: auto !important;
    padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 8rem;

}


/* 親要素：コンテナ内を自由に動けるようにする */
.rec-hero-main-content {
    position: absolute;
    top: 64vh;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 100;
    will-change: transform, opacity;
    mix-blend-mode: hard-light;
}






.rec-hero-message-inner {
    height: auto;
}

/* --- 2. タイトル（MESSAGE）のブレンド設定 --- */
.rec-hero-message-title {
    display: inline-block;
    position: relative;
    z-index: 20; /* 画像より手前に */

    /* フォント設定 */




    /* ▼ 背景画像と馴染ませる（ブレンドモード） */
    /* overlay が効きにくい場合は screen や hard-light を試す */
    mix-blend-mode: overlay !important;

    /* アニメーション用（GSAPが制御するので初期値は0でOK） */
    opacity: 0;
    will-change: transform, opacity;
    isolation: isolate; /* これが必須です */
}

/* 4. 本文 */
.rec-hero-message-text {
    position: relative;
    z-index: 10;
    color: #ffffff !important;
    font-family: 'HigureGothic', sans-serif;
    line-height: 2.4;
    font-size: 2.0rem;
    mix-blend-mode: normal !important; 
    opacity: unset;
	font-weight: 500 !important;

    /* 💡 修正：最初は隠しておく */

    /* 💡 修正：アニメーションの邪魔になるので transform: none は書かない */
    will-change: transform, opacity;
}

.rec-message-title-img {
    width: 100%; /* 親要素に合わせてレスポンシブにする */
    max-width: 80vw; /* PC等で大きくなりすぎないように調整（デザインに合わせて変えてください） */
    height: auto;
    display: block;
    margin-bottom: 4rem;
}
/* メッセージの中身も念のため隠す設定にしておく */


/* ==============================================
   メッセージテキストの下余白（デバイス別調整）
   ============================================== */

/* 1. 基本設定（PCなど） */
.rec-hero-message-text {
    display: block; /* 念の為ブロック要素にする */
    
    /* ▼ PCは画面が広いので、少し広めに取る */
}

.force-hidden {
    opacity: 0 ;
    visibility: hidden;
    pointer-events: none;
}

/* 2. スマホ（縦長）の場合 */
/* 画面の下が詰まらないように、PCよりは少し狭くする */
@media (max-width: 767px) {
    .rec-hero-message-text {
        margin-bottom: 8vh; 
    }

    .rec-hero-message-title {
      font-size:clamp(4.8rem, 16vw, 7.2rem) !important;
    }
}

@media screen and (min-width:560px) and (max-width:1023px) {
   .rec-message-title-img {
    width: 48vw;
   }
}



/* 3. 横長のスマホ・高さがない画面（ランドスケープ） */
/* ここが一番重要です。縦幅が狭いので余白を極端に減らします */
@media (max-height: 600px) and (orientation: landscape) {
    .rec-hero-message-text {
        margin-bottom: 4vh; /* かなり狭くする */
    }
}

/* 4. タブレット（正方形に近い画面） */
@media (min-width: 769px) and (max-width: 1023px) {
    .rec-hero-message-text {
        margin-bottom: 10vh; /* 中間くらい */
    }
}


/* --- MV レスポンシブ & アスペクト比調整 --- */
.rec-br-sp { display: none; }
.rec-br-all { display: block; }



@media screen and (min-width: 1025px) and (min-aspect-ratio: 32/30) {
  
}

@media screen and (max-width: 767px) {
.rec-hero-img {
        /* リサイズ時のガタつきを抑える */
        will-change: transform, height;
        
        /* ▼▼▼【修正】この行を削除またはコメントアウトしてください ▼▼▼ */
        /* transition: opacity 0.8s ease-out !important; */
        /* ▲▲▲ 削除ここまで ▲▲▲ */
        
        /* 代わりにこれを追加：余計なアニメーションを完全に切る */
        transition: none !important;

        /* 100vhだと動いてしまうので、JSで打たれた固定値を絶対視させる */
        object-fit: cover;
    }

    /* 2. スマホの時だけ、「隠すクラス」が有効になる */
    .force-hidden {
        opacity: 0 ;
        visibility: hidden ; /* 安全のためvisibilityも復活させてもOK */
    }
    


    .rec-mv-three-member-img { padding-top: 8rem; }
    .rec-hero-catch {
        font-size: clamp(2.0rem, 12vw, 5.6rem) !important;  letter-spacing: 0; width: 100%; margin-right: -0.8rem;
        line-height: 1.4;
    }
    
    .rec-br-sp { display: block; }
    

    .rec-hero-message-inner { padding-inline: clamp(20px, 5vw, 40px); padding-bottom: 4rem; }
    .rec-hero-message-text { font-size: 1.7rem; margin-bottom: 0; }
}



/* 📱 縦に長いスマホ（740px以上）の場合の設定 */
@media screen and (max-width: 767px) and (min-height: 840px) {

}


/* 2. スマホ（縦長）の場合 */
/* 画面の下が詰まらないように、PCよりは少し狭くする */
@media (max-width: 767px) {
    .rec-hero-message-text {
        font-size: 1.6rem;
    }
}

@media screen and (min-width: 320px) and (max-width: 374px) {
    .rec-hero-catch { font-size: 11.4vw; }
    
}

@media screen and (min-width: 1024px) and (max-height: 580px) {

}

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

}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .rec-hero-message-inner {
        padding-bottom: 0rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (min-height: 900px) {

}




   
@media screen and (max-width: 767px) and (max-height: 480px) {

}






   
    /* 英語タイトル共通設定（★Hind適用） */





/* ==========================================================================
   5. Member Section / 社員紹介
   ========================================================================== */
.rec-container {
    margin: 0 auto;
    padding-inline: 8vw;
    overflow: hidden;
}

/* セクションタイトル共通設定 */
.rec-section-header {
    margin-bottom: 60px;
    text-align: left;
    width: 100dvw;
    margin-left: calc(50% - 50vw);
    left: 0;
    position: relative;
    overflow: hidden;
}

/* 英語タイトル共通設定（★Hind適用） */
.rec-en-title, 
.rec-section-title {
    font-family: 'Hind', sans-serif; /* ★Hind適用 */
    font-weight: 600;
    font-size: clamp(2.4rem, 6.4vw + 2.4rem, 12rem);
    color: #999;
    margin-left: -0.6rem;
    letter-spacing: 0.02em;
    margin-bottom: 0rem;

    
    /* 必要なら、少しだけ彩度やコントラストを上げて質感を強調 */
    /* backdrop-filter: none; */ /* テキスト自体にかけるのでbackdropは不要 */
}


/* 明滅アニメーションの定義 */
@keyframes text-glow-pulse {
    0% {
        filter: blur(12px);
        opacity: 0.6;
    }
    100% {
        filter: blur(18px); /* ぼかしを広げる */
        opacity: 0.9;       /* 光を強くする */
    }
}




.rec-jp-title {
    font-size: 2.4rem;
    font-family: 'HigureGothic', sans-serif;
    margin-top: 0rem;
    font-weight: 600;
    color: #475568;
    padding-left: 8vw;
}

.rec-jp-title-white {
    color: #ffffff;
    padding-left: 0;
}

/* MEMBER タイトル特殊設定 */
.rec-hero-member-title {
    font-family: 'Hind', sans-serif; /* ★Hind適用 */
    letter-spacing: 0.02em;
    
    /* グラデーション */

    background: linear-gradient(
        to right, 
        #f7ecd4 0%,
         #d3988f 10%,     /* 左：明るいピーチベージュ */
        #d48787 20%,   /* 中：くすみピンク */
        #9da4ae 50%, 
        #d48787 80%,
        #d7b5b0 90%,     /* 左：明るいピーチベージュ */
        #f7ecd4 100%   /* 右：クールなグレー */
    );

    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 600;
    padding-left: 8vw;
    color: transparent;
    display: block;
    white-space: nowrap;
    /* ▼▼▼ 追加 ▼▼▼ */
    /* 大きく動かしても途切れないように繰り返す設定 */
    background-repeat: repeat-x; 
    /* ▲▲▲ 追加ここまで ▲▲▲ */
}

.rec-member { padding-top: 8rem; padding-bottom: 10.4rem; position: relative; z-index: 50 ;background-color: #ffffff !important;
}

/* カードスタイル */
.rec-member-card {
    position: relative; overflow: hidden; aspect-ratio: 3 / 4; background-color: #eee;
}
.rec-member-card__link { display: block; width: 100%; height: 100%; color: #fff; }
.rec-member-card__img { width: 100%; height: 100%; }
.rec-member-card__img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s ease, filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    filter: saturate(125%) contrast(70%) brightness(0.8);
}
.rec-member-card__img::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
    filter: url(#noiseFilter); mix-blend-mode: overlay; opacity: 1;
    transition: opacity 0.5s ease;
}
.rec-member-card:hover .rec-member-card__img img {
    transform: scale(1.1); filter: saturate(140%) contrast(75%) brightness(110%) hue-rotate(5deg);
}
.rec-member-card:hover .rec-member-card__img::after { opacity: 0; }

.rec-member-card__body {
    position: absolute; bottom: 0; left: 0; padding: 3rem 2rem;
    color: #fff; z-index: 2; font-family: 'HigureGothic', sans-serif; font-weight: 600;
}
.rec-member-card__lead { color: #fff; font-size: 2.4rem; letter-spacing: 0.05em; line-height: 1.4; }
.rec-member-card__role { font-size: 1.5rem; font-weight: 500; font-family: "Noto Sans JP", sans-serif; color: #fff; }
.rec-member-card__name { font-size: 1.8rem; letter-spacing: 0.1em; font-family: "Noto Sans JP", sans-serif; margin-right: 0.8rem; }
.rec-member-card__profile { display: flex; margin-bottom: 1.2rem; }


@media (min-width: 1024px) {
    .rec-member-grid {
        display: grid !important; grid-template-columns: repeat(3, 1fr);
        gap:clamp(16px, 2vw, 28px); transform: none !important;
    }
    .swiper-pagination { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .rec-member-grid {
        display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.4rem; transform: none !important;
    }
    .swiper-pagination { display: none; }
}

/* ==========================
   SP: Member section (FIXED for Swiper)
   ========================== */
@media screen and (max-width: 767px) {

    .swiper-pagination {
        display: none !important;
    }

    
  .swiper-backface-hidden .swiper-slide:nth-child(3) {
    margin-right:2rem !important;
  }

  /* 1. セクション全体を画面幅いっぱいに広げる（フルブリード） */
  section.rec-member {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important; /* スライダーからはみ出したカードを隠す */
  }

  /* 2. コンテナ設定：Swiperがはみ出したカードを表示できるようにvisibleにする */
  section.rec-member .rec-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* 3. Swiper本体：次のカードをチラ見せするためにここも表示設定を調整 */
  section.rec-member .rec-member-swiper,
  section.rec-member .swiper {
    width: 100% !important;
    overflow: visible !important; 
    touch-action: pan-y !important; /* 上下スクロールを阻害しない */
    /* ✅ touch-action: pan-y で縦スクロールはブラウザに任せ、横スワイプをSwiperに渡す */
    touch-action: pan-y !important;
    /* ✅ pointer-events を確実に有効にする */
    pointer-events: auto !important;
  
  }

  /* 4. スライドを横に並べる設定（Swiperの邪魔をしない） */
  section.rec-member .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* transform: none !important; は削除しました（Swiperが動くために必須） */
     padding-left: clamp(20px, 5vw, 40px);
  }

  /* 5. カードの幅設定：写真が巨大化するのを防ぐ */
  section.rec-member .swiper-slide {
    flex: 0 0 auto !important;
    width: 80vw !important; /* あなたが指定したサイズを維持 */
    pointer-events: auto !important;
  }

  /* 6. カード内の画像とデザインの維持 */
  section.rec-member .rec-member-card {
    width: 80% !important;
    margin-right: 16px !important; /* Swiperの隙間設定と合わせるのが理想 */
    flex-shrink: 0 !important;
  }

  section.rec-member .rec-member-card__img,
  section.rec-member .rec-member-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 見出しの余白を維持 */
  .rec-hero-member-title {
    font-size: clamp(4.8rem, 16vw, 7.2rem) !important;
    padding-left: clamp(20px, 5vw, 40px);
    white-space: unset;
    line-height: 1.04;
    margin-bottom: 0 !important;
  }

   .rec-flow .rec-container  {
    padding-inline: clamp(20px, 5vw, 40px) !important;
}

   .rec-open .rec-container {
     padding-inline: clamp(20px, 5vw, 40px) !important;
}
}


@media screen and (max-width: 375px) { 
    .rec-member-card__name {
        font-size: 1.8rem;
    }

    .rec-member-card__lead {
        font-size: 2.0rem;
        letter-spacing: 0.03em;
    }

    .rec-member-card__role {
        font-size: 1.4rem;
    }

}

/* Tablet only: 768–1024 */
@media (min-width: 768px) and (max-width: 1023px) {

  /* ✅ pinされるセクションを “full-bleed(100vw)” にする */
  .rec-member,
  .rec-story { /* 福利厚生がrec-story内ならここが効きます */
    width: 100vw !important;
    max-width: none !important;

    /* 親が740pxのセンターコンテナでも、画面幅いっぱいに突き抜ける */
    margin-right: calc(50% - 50%) !important;
  }

  /* ✅ 中のグリッド類も横幅制限を外す */
  .rec-member-grid,
  .rec-story-panels,
  .rec-benefit-grid {
    width: 100% !important;
    max-width: none !important;
  }



}





/* ==========================================================================
   6. Story / 福利厚生・ストーリー
   ========================================================================== */
.rec-story { position: relative; width: 100%; overflow: hidden; z-index: 99 !important; }
.rec-story-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 1; backface-visibility: hidden; perspective: 1000px;
    transform: translateZ(0); will-change: transform, filter;
}
.rec-story-bg img { width: 100%; height: 100%; object-fit: cover; image-rendering: -webkit-optimize-contrast; }
.rec-story-bg-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3);
}
.rec-story-brighten-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #fff; opacity: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay;
}
.rec-story-panels { position: relative; z-index: 2; }
.rec-story-panel {
    height: 100vh; height: 100dvh; display: flex; align-items: end; justify-content: flex-start;
    padding-inline: 8vw; position: relative; bottom: 8vh; will-change: transform;
    /* 3Dレンダリングを強制してチラつきを抑える */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}
.panel-2, .panel-3 { align-items: center; /* ▼ すりガラス効果（ぼかし） */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); /* Safari用 */ }

.panel-1 { position: relative; z-index: 2;
  }
  
.panel-2 { position: absolute; top: 100%; left: 0; z-index: 2;  background: linear-gradient(180deg, rgb(134 177 232 / 40%) 0%, /* 上：白の透明度40% */ rgb(60 65 66 / 60%) 100% /* 下：白の透明度10% */);}
.panel-3 { position: absolute; top: 200%; left: 0; z-index: 2;  background: linear-gradient(180deg, rgba(203, 129, 76, 0.4) 0%, /* 上：白の透明度40% */ rgba(255, 255, 255, 0.6) 100% /* 下：白の透明度10% */);}

.rec-story-inner { color: #fff; max-width: 800px; }
.rec-story-en {
    font-family: 'Hind', sans-serif; /* ★Hind適用 */
    font-size: 1.6rem; letter-spacing: 0.2em; margin-bottom: 2rem;
}
.rec-story-title {
    font-size: clamp(2.0rem, 3.6vw, 3.8rem); line-height: 1.3; margin-bottom: 3rem;
    color: #fff;
    display: flex; align-items: center; gap: 0.6em; font-family: 'HigureGothic', sans-serif;
}
.rec-story-title::before {
    margin-top: 0.4rem; content: ""; display: inline-block; width: 8px; height: 1.0em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 40'%3E%3Crect width='6' height='40' fill='white'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; flex-shrink: 0; background-position: center;
}
.rec-story-text { font-size: clamp(1.6rem, 2vw, 2.0rem); line-height: 2; color: white; }
 
.rec-story-title-bk {
    color:  #475568;
}

.rec-story-text-bk {
    color: #475568;
}

.rec-story-title-bk::before {
    filter: invert(70%) sepia(80%) hue-rotate(180deg) saturate(70%);
}

.rec-benefit-card-title-bk {
    color: #475568;
}

.rec-benefit-card-text-bk {
    color: #475568 !important;
}


/* WORK STYLE Title */
.rec-hero-work-title {
    font-family: 'Hind', sans-serif; /* ★Hind適用（英語タイトルと想定） */
    background: linear-gradient(to right, rgb(237, 230, 223) 0%, rgba(221, 246, 251, 0.9) 100%);
    -webkit-background-clip: text; background-clip: text;
    font-weight: 600; color: transparent; display: inline-block; white-space: nowrap;
    font-size: clamp(2.4rem, 4.8vw + 2.4rem, 10rem);
}

.rec-benefit-grid { display: flex; gap: clamp(1.6rem, 2vw, 3.2rem); margin-top: 4rem; width: 100%;  }
.rec-benefit-card {
    flex: 1; border: 0.2rem solid rgba(255, 255, 255, 0.8);
    padding: 3.2rem 2.4rem; text-align: center;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff;
}
.rec-benefit-icon { display: flex; align-items: center; justify-content: center; height: 6vw; margin-bottom: 2rem; }
.rec-benefit-icon img { width: auto; height: 100%; object-fit: contain; }
.rec-benefit-card-title {
    font-family: 'HigureGothic', sans-serif; font-weight: 700;
    font-size: clamp(1.6rem, 2.0vw, 3.2rem); margin-bottom: 1.5rem; letter-spacing: 0.05em;
}
.rec-benefit-card-text { font-size: 1.6rem; line-height: 1.8; text-align: left; opacity: 0.9; color: #fff; }


@media screen and (max-width: 767px) {

    /* --- Story Section (変更なし) --- */
    #js-story-section {
        height: auto !important;
        width: 100%;
        overflow: hidden;
        position: relative;
        padding: 0 !important;
        margin: 0 !important;
    }

    .rec-story-inner {
    position: relative !important;
    top: auto !important;
    display: none !important;
    }

      /* セクションは自然な高さに戻す（100dvh固定をやめる） */
  #js-story-section,
  .rec-story,
  .rec-story-panels {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

     .rec-benefit-card {
            display: grid !important;
    grid-template-columns: 56px 1fr;      /* 左：アイコン幅 / 右：テキスト */
    grid-template-rows: 1fr auto auto 1fr;/* 上余白 / 見出し / 本文 / 下余白 */
    column-gap: 2rem;
    row-gap: 6px;

    text-align: center;                  /* 右側の文字を中央寄せ */
    padding: 20px 18px !important;       /* 好みで */
    align-items: center; 
    border: 0.1rem solid rgba(255, 255, 255, 0.8)                /* 念のため */
  
     }

    .rec-story-title {
        font-size: clamp(3.2rem, 7vw, 3.6rem) ;
        margin-bottom: 1rem;
    }

    .rec-story-text {
        width: calc(100vw - clamp(40px, 10vw, 80px));
        margin-bottom: 4.2rem;
    }

    .rec-story-panels {
        width: 100%;
        height: 100% !important;
        position: relative;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

      .rec-story-panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    height: unset;

    display: block !important;
    padding-inline: clamp(20px, 5vw, 40px) !important;
    padding-block: unset;
    transform: none !important;
  }
    .rec-hero-work-title {
        font-size: clamp(4.4rem, 13.2vw, 6.4rem) !important;
    }

    .panel-1 { z-index: 10; }
    .panel-2 { z-index: 20; background: linear-gradient(180deg, rgb(100 134 176 / 57%) 0%, /* 上：白の透明度40% */ rgb(60 65 66 / 75%) 100% /* 下：白の透明度10% */);}
    .panel-3 { z-index: 30;   background: linear-gradient(180deg, rgb(248 211 184 / 60%) 0%, rgba(255, 255, 255, 0.9) 100%);}

      /* panel-2/3 の absolute + top を解除 */
  .panel-2,
  .panel-3 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    y: 0 !important;
    transform: none !important;

  }





    .rec-benefit-grid {
        /* JSで動かす設定 */
        display: block !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 1.6rem !important;
        margin-top: 2rem !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        overscroll-behavior-x: auto !important;
        overflow-x: auto;
        padding: unset;
  
  /* ▼▼ スクロールスナップの魔法 ▼▼ */
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
   
  /* スクロールバーを隠す設定（お好みで） */
        -webkit-overflow-scrolling: touch; /* iPhoneでの慣性スクロールを有効化 */
        scrollbar-width: none; /* Firefox用 */

        

        /* ▼▼▼ 修正：左の余白を 4vw に統一（これで左揃えの基準が決まります） ▼▼▼ */

        touch-action: pan-y !important;
        /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */
    }

    .rec-benefit-grid > * {
        width: unset;
        max-width: none !important;
        flex-shrink: 0 !important;
        scroll-snap-align: none !important;
        margin-right: 0 !important;
        touch-action: pan-y !important;
    }

      .rec-benefit-icon{
    grid-column: 1;
    grid-row: 1 / -1;                    /* 全行にまたがせる */
    align-self: center;                  /* 縦中央 */
    justify-self: center;                /* 横中央（左カラム内） */
    margin: 0 !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    .rec-benefit-card-title {
        font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
        margin-bottom: unset !important;
        margin-top: 0rem;
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        
    }

    .rec-benefit-card-text {
    grid-column: 2;
    grid-row: 3;
    margin: 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.7;
  }




    /* 3. 背景画像自体を強制的に引き伸ばす */
    .rec-story-bg picture,
    .rec-story-bg img {
        width: 100% !important;
        height: 100% !important; /* 親の100dvhに追従させる */
        object-fit: cover !important;
        
        /* 余白が出ないように位置を固定 */
        position: absolute;
    }

    .rec-story-bg {
        height: 100%;
    }

        .rec-story-slide-inner {
        padding: 8rem 0;
    }

    .rec-hero-sticky-wrapper, .rec-hero-sticky-container, .rec-hero-message-overlay, #js-story-section, .rec-story-panels, .rec-story-panel, .rec-member {
        width: unset;
    }

    .rec-jp-title {
        padding-left:clamp(2rem, 5vw, 4rem);
        font-size: 2rem;
    }

    .sp-display-none {
    display: none;
    
}



    .rec-hero-main-content {
        top: 48vh !important;
    }

    .rec-hero-catch {
        top: 0 !important;
    }

/* 1枚目(-n+1)と2枚目(-n+2)のカードだけに下の余白を指定 */
  .rec-benefit-card:nth-child(-n+2) {
    margin-bottom: 1.8rem !important; /* 数値はお好みで調整してください */
  }

  .rec-hero-message-overlay {
    top: 4vh;
  }




}


@media screen and (max-width: 374px) {
    .rec-story-title {
        font-size: 2.8rem;
        margin-top: 3rem;
    }

    .rec-story-text {
        font-size: 1.5rem;
        line-height: 1.8;
}

    .rec-benefit-card-text {
        font-size: 1.5rem;

}

     .rec-benefit-card-title {
        margin-top: 0rem;
        margin-bottom: unset;
     }
     

        .panel-1 {
        display: none !important;
    }

     
}


    


/* ==========================================================================
   7. Flow / 選考フロー
   ========================================================================== */
.rec-flow { padding-top: 8rem; padding-bottom: 10rem; background-color: #E9F3F2; }
.rec-flow-sp { display: none; } /* スマホ版は非表示にしておく */
.rec-flow-en-title {
    font-family: 'Hind', sans-serif; /* ★Hind適用 */
    background: linear-gradient(to right, rgb(151 170 176) 0%, rgb(123 140 176 / 90%) 20%, rgb(163 178 206) 40%, #d1dee1 100%);
    padding-left: 8vw; -webkit-background-clip: text; background-clip: text;
    color: transparent; display: inline-block;
    font-size: clamp(2.4rem, 4.8vw + 2.4rem, 10rem);}
.rec-flow-container {
    margin-top: 6rem; width: 100%; display: flex; justify-content: center; align-items: center;
}
.rec-flow-container svg {
    width: 100%; height: auto; max-width: 1200px; cursor: default; transition: opacity 0.3s ease; display: block;
}

.rec-flow-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2147483647; display: none;
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px);
    overflow: auto; -webkit-overflow-scrolling: touch; cursor: default;
}
.rec-flow-modal__content {
    position: relative; display: block; width: 180vw !important; padding: 10vh 5vw; cursor: grab;
}
.rec-flow-modal__content:active { cursor: grabbing; }
.rec-flow-modal__content svg {
    width: 100% !important; height: auto !important; max-width: none !important;
    display: block; filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
}
.rec-flow-modal__close {
    position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; background: #fff; color: #000;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: bold; z-index: 2147483647; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
@media screen and (max-width: 767px) { 
    .rec-flow-en-title {
        font-size: clamp(4.4rem, 14.2vw, 6.4rem) !important;
        padding-left: clamp(20px, 5vw, 40px);
        line-height: 1.04;
        margin-bottom: 2rem;
        text-wrap: wrap;
    }
 
    .rec-flow-pc {
        display: none; /* PC版を隠す */
    }
    .rec-flow-sp {
        display: flex; /* スマホ版を表示 */
        align-items: center;
        justify-content: center;

    }
    
    /* スマホ版SVGを横幅いっぱいにフィットさせる */
    .rec-flow-sp svg {
        width: 90%;
        height: auto;
        display: block;
        background: #fff;
    }

    .rec-flow-container {
        background: #FFFFFF;
    }

        .rec-flow-container svg {
        cursor: default;
    }

    

.rec-flow-modal__content {
    /* 元のセンタリング設定 */
    transform: translate(0, -50%) !important;
    top: 50% !important;

    /* ▼▼▼ これを追加してください！ ▼▼▼ */
    
    /* 1. 画面の高さの90%以上には大きくしない（上下に少し隙間を残す） */
    max-height: 90vh !important; 
    
    /* 2. 中身がそれより長くなったら、モーダルの中でスクロールさせる */
    overflow-y: auto !important;
    
    /* ※スマホでのスクロールを滑らかにするおまじない */
    -webkit-overflow-scrolling: touch;
}
}
@media screen and (min-width: 1025px) { 
    .rec-flow-container { cursor: default; }

    .rec-flow-container svg {
        cursor: default;
    }


}



    .rec-flow-container, 
.rec-flow {
    /* 重なり順を制御 */
    position: relative;
    z-index: 10; /* 固定されている福利厚生セクションより手前に表示させる */
}
/* ==========================================================================
   8. Open Position / 募集要項
   ========================================================================== */
.rec-open {
    padding-top: 10rem; padding-bottom: 12rem; position: relative; z-index: 1;
    background: linear-gradient(180deg, #6B7D88 0%, #8DA0A9 50%, #FFFFFF 100%); overflow: hidden;
}
.rec-open::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; pointer-events: none;  filter: url(#noiseFilter);
    opacity: 1;
}
.rec-open-en-title {
    font-family: 'Hind', sans-serif; /* ★Hind適用 */
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.4) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-size: clamp(2.4rem, 4.8vw + 2.4rem, 10rem);
}
.rec-open-list { margin-top: 6rem; display: flex; flex-direction: column; gap: 4rem; }

.rec-job-card {
    display: flex; background: #FFFFFF; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden;
}

.rec-job-card-director {
    display: none !important;
}

.rec-job-card__img { width: 28%; flex-shrink: 0; }
.rec-job-card__img img { width: 100%; height: 100%; object-fit: cover; }
.rec-job-card__body {
    flex-grow: 1; padding: 5rem 6rem; position: relative; display: flex; flex-direction: column;
}
.rec-job-card__title {
    font-family: 'HigureGothic', sans-serif; font-size: 2.4rem; font-weight: 700;
    color: #475568; display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2.4rem;
}
.rec-job-card__title::before {
    content: ""; display: inline-block; width: 4px; height: 1em; background-color: #475568;
}
.rec-job-card__text { font-size: 1.8rem; line-height: 1.8; color: #475568; margin-bottom: 2rem; font-weight: 500; }
.rec-job-card__detail { font-size: 1.4rem; color: #475568; line-height: 1.6; margin-bottom: 4rem; }

.rec-job-card__cta { margin-top: auto; display: flex; justify-content: flex-end; }
.rec-job-card__btn {
    display: flex; align-items: center; justify-content: center; padding: 1.6rem 4rem;
    background: linear-gradient(90deg, #f3905b 0%,  #eb9c78 50%, #e28b88 100% );
    background-size: 100% auto !important; background-position: 0% 0%;
    color: #FFFFFF !important; font-family: 'HigureGothic', sans-serif;
    font-weight: 600; font-size: 1.8rem; text-decoration: none;
    transition: opacity 0.3s; position: absolute; bottom: 0; right: 0; min-width: 240px;
}
.rec-job-card__btn span {
    display: inline-block; transform: translateZ(0); will-change: transform;
    -webkit-font-smoothing: antialiased; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.rec-job-card__btn:hover span { transform: translate3d(8px, 0, 0); }
.rec-job-card__btn::before {
    content: ""; display: block; width: 0.8rem; height: 0.8rem;
    border-top: 0.3rem solid #fff; border-right: 0.3rem solid #fff;
    transform: rotate(45deg); position: static; order: 3; margin-left: -1.0rem;
    transition: transform 0.3s ease !important;
}
.rec-job-card__btn::after {
    content: ""; display: block; width: 2rem; height: 0.2rem; background: #fff;
    margin-left: 1.5rem; order: 2; flex-shrink: 0; transition: transform 0.3s ease !important;
}
.rec-job-card__btn:hover::before { transform: translate3d(8px, 0, 0) rotate(45deg); }
.rec-job-card__btn:hover::after { transform: translate3d(8px, 0, 0); }
.rec-job-card__btn:hover { opacity: 0.8; }

.rec-section-header-position {
    padding-left: 8vw;
}

@media screen and (max-width: 767px) {
    .rec-open {
    padding-top: 6.4rem;
    }
    .rec-open-en-title {
    font-size: clamp(4.4rem, 14.2vw, 6.4rem) !important;
    line-height: 1.04;
    margin-bottom: 2rem;
    text-wrap: wrap;
}

.rec-section-header-position {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .rec-section-header {
        width: unset;
    }

    .rec-jp-title-white {
        padding-left: 0 !important;
    }

    /* リストの間の溝 */
    .rec-open-list {
        margin-top: 4rem;
        gap: 3rem;
    }

    /* カード本体：縦並びに変更 */
    .rec-job-card {
        flex-direction: column;
    }

    /* 画像：横幅いっぱいに */
    .rec-job-card__img {
        width: 100%;
        height: 200px; /* 必要に応じて調整してください */
    }

    /* テキストエリア：パディングの調整 */
    .rec-job-card__body {
        padding: 3rem 2.4rem 10rem; /* 下部にボタン用のスペースを確保 */
    }

    /* タイトル：フォントサイズの調整 */
    .rec-job-card__title {
        font-size: 2rem;
        margin-bottom: 1.6rem;
    }

    /* 本文：フォントサイズの調整 */
    .rec-job-card__text {
        font-size: 1.5rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    /* 詳細：マージンの調整 */
    .rec-job-card__detail {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    /* ボタン：カード下部に固定し、横幅いっぱいに */
    .rec-job-card__btn {
        width: unset;
        min-width: unset;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1.4rem;
        justify-content: center; /* 矢印と文字を中央寄せにしたい場合 */
        font-size: 1.6rem;
        margin: 2rem;
    } 

    .rec-en-title, .rec-section-title {
        margin-left: unset;
    }

}


/* ==========================================================================
   9. Single Interview Page / 個別インタビュー
   ========================================================================== */
.rec-int { overflow: hidden; background: #fff; color: #333; line-height: 1.8; }
.rec-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.rec-int-hero {
    position: relative; width: 100%; height: 90vh; min-height: 700px;
    overflow: hidden; background: #f0f0f0;
}
.rec-int-hero__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;transition: none !important;

    /* 初期状態：JSが読み込まれるまで透明にしておく（チラつき防止） */
    opacity: 0; 

    will-change: opacity, transform; /* ブラウザに準備させて動作を軽くする */ }
.rec-int-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.rec-int-hero__img::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(75deg, #E8C6A1 0%, #F0C197 8%, #FB9E73 21%, rgba(240, 141, 136, 0.8) 41%, rgba(211, 128, 156, 0) 70%);
    z-index: 2;
}




.rec-int-hero__inner {
    position: absolute; top: 0; width: 100%; max-width: 1200px; height: 100%;
    padding-left: 4vw; z-index: 2; display: flex; flex-direction: column; justify-content: space-between;
}
.rec-int-hero__content {
    position: absolute; top: 50%; transform: translate(-0%, -50%);
    padding-bottom: 4vh; color: #fff;
}
.rec-int-hero__tag {
    background: #475568; padding: 0.4rem 1.2rem; font-size: 1.6rem; margin-bottom: 20px;
    display: inline-block; border-radius: 0.2rem; font-family: 'HigureGothic', sans-serif; font-weight: 500;
}
.rec-int-hero__title {
    font-size: clamp(4.4rem, 4.0vw, 7.2rem); font-weight: bold; margin-top: 0rem;
    font-family: 'HigureGothic', sans-serif; width: 60vw;
}
.rec-int-hero__profile {
    background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    position: absolute; bottom: 0; left: 0; width: 100%; max-width: 850px;
    padding: 40px 50px; border-radius: 0 15px 0 0; display: flex; gap: 40px; align-items: center; z-index: 10;
}
.rec-int-hero__profile-name {
    flex-shrink: 0; border-right: 1px solid #7c8793; padding-right: 30px;
    padding-top: 1rem; padding-bottom: 1rem; min-width: 200px;
}
.rec-int-hero__job { display: block; font-size: 1.3rem; color: #475568; margin-bottom: 0.6rem; font-weight:400; font-family: "Noto Sans JP", sans-serif; }
.rec-int-hero__name-jp { font-size: 2.8rem; line-height: 1; font-weight: 500; font-family: 'HigureGothic', sans-serif; color: #475568; }
.rec-int-hero__profile-text { font-size: 1.4rem; line-height: 1.8; color: #444;font-family:  "Noto Sans JP", sans-serif;}

.rec-int-body {
    padding: 12rem 0 4rem 0;
    background: linear-gradient(to bottom, #ffffff 0%, #eef4f700 95%, #eef4f7 100%);
}
.rec-int-qa {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 6rem; row-gap: 4rem;
    align-items: start; margin-bottom: 12rem;
}
.rec-int-qa.is-reverse .rec-int-qa__img { grid-column: 2; }
.rec-int-qa.is-reverse .rec-int-qa__text { grid-column: 1; }
.rec-int-qa__img { grid-column: 1; grid-row: 2; width: 100%; }
.rec-int-qa__img img { width: 100%; }
.rec-int-qa__content { display: contents; }
.rec-int-qa__title {
    grid-column: 1 / 3; grid-row: 1; font-size: 2.6rem; margin-bottom: 0;
    font-family: 'HigureGothic', sans-serif; color: #475568;
}
.rec-int-qa__title span {
    font-family: 'Hind', sans-serif; font-weight: 600; /* ★Hind適用 */
    font-size: 3.2rem;
    background: linear-gradient(to right, #ffc392 0%, #d98c70 20%, #475568 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rec-int-qa__text {
    grid-column: 2; grid-row: 2; font-size: 1.6rem; color: #475568; font-weight: 400;
    letter-spacing: 0.05em; line-height: 2.0; margin: auto 0; font-family: "Noto Sans JP", sans-serif;
}

.rec-int-message {
    padding: 6.4rem 0; position: relative;
    background: linear-gradient(180deg, #ffffff9f 0%, #ffffff59 15%, #ffffff00 40%),
                linear-gradient(55deg, #e8c6a1 0%, #f09e78 20%, #f49366 30%, #d27a6b 45%, #9a6c74 60%, #6b7d88 70%);
}
.rec-int-message__title-area { position: relative; display: inline-block; margin-bottom: 40px; padding-left: 10px; }
.rec-int-message__title-text {
    position: relative; z-index: 2; font-family: 'HigureGothic', sans-serif;
    font-size: 3.2rem; font-weight: 700; color: #475568; letter-spacing: 0.05em;
}
.rec-int-message__title-deco {
    position: absolute; top: -3.6rem; left: -3.2rem; width: 80%; height: auto;
    z-index: 1; opacity: 0.8; pointer-events: none; mix-blend-mode: multiply;
}
.rec-int-message__title-deco img { width: 100%; height: auto; }

@media screen and (min-width: 768px) {
    .rec-int-message__box { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; }
    .rec-int-message__content { flex: 1; }
    .rec-int-message__sub-img { width: 30%; }
}

@media screen and (min-width:768px) and (max-width: 1023px) {
	.rec-int-hero {
	height: 100dvh;
}
}

.rec-int-other { padding: 120px 0; background-color: #f6f9fb; }
.rec-member-grid-other {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px;
}

@media screen and (max-width: 1023px) {
    .rec-member-grid-other { grid-template-columns: repeat(2, 1fr); padding-left: unset;}
    .rec-int-hero__title {
        width: 68%;
    }
    .rec-int-message__title-deco {
        left: -2.4rem;

    }

    .rec-inner {
        padding-inline: 8vw;
    }

    .rec-int-message__title-text {
        font-size: 2.4rem;
    }

    .rec-int-qa__title {
        font-size:2.2rem;
    }

    .rec-int-qa__title span {
        font-size:2.8rem;
    }
}

@media screen and (min-width: 767px) and (max-width:1023px) {
    .rec-int-hero__profile {
        width: fit-content;
    }
}

@media screen and (max-width: 767px) {
    .rec-int-hero { height: 100svh; min-height: unset; display: flex; flex-direction: column; background: #fff; }
    .rec-int-hero__img { position: relative; height: 100vh; width: 100%; overflow: hidden; }
    .rec-int-hero__inner { position: absolute; top: 0; left: 0; padding-left: 20px; padding-top: 60px; z-index: 5; }
    .rec-int-hero__content { position: static; transform: none; padding-bottom: 0; padding-top: 16vh; }
    .rec-int-hero__title { font-size: clamp(2.6rem, 5.8vw, 4.0rem);  line-height: 1.4; width: 70%; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
    
    .rec-int-hero__profile {
        padding: clamp(20px, 5vw, 40px); max-width: 100%;
        width: unset;
        display: block; border-radius : 0;
    }
    .rec-int-hero__profile-name {
        border-right: none; border-bottom: 1px solid #ccc;
        padding-right: 0; padding-bottom: 15px; margin-bottom: 20px; min-width: unset;
    }
    
    .rec-int-body { padding: 60px 0; background-color: #f6f9fb; }
    .rec-int-qa { flex-direction: column !important; gap: 25px; margin-bottom: 60px; display: flex; }
    .rec-int-qa__img { width: 100%; order: 2; }
    .rec-int-qa__content { width: 100%; order: 1; }
    .rec-int-qa__title { font-size: 1.8rem; margin-bottom: 0; order: 1; }
    .rec-int-qa__text { order: 3; padding-top: 20px; font-size: 1.5rem; line-height: 1.9; }

    .rec-int-message { padding: 60px 0; }
    .rec-int-message__title-area { margin-bottom: 30px; }
    .rec-int-message__title-text { font-size: 2.4rem; }
    .rec-int-message__title-deco { width: 100px; left: -10px; }
    .rec-int-message__box { display: flex; flex-direction: column; gap: 40px; }
    .rec-int-message__sub-img { width: 100%; order: 2; margin-left: -1.6rem; }
    .rec-int-message__content { order: 1; }
    
    .rec-int-other { padding: 60px 0; }
    .rec-member-grid-other { grid-template-columns: 1fr; gap: 30px; padding-left:clamp(20px, 5vw, 40px); }
    .rec-int-hero__name-jp {
        font-size: 1.8rem;
    }
    .rec-inner {
       padding-inline:  clamp(20px, 5vw, 40px);
    }
    .rec-int-hero__job {
        margin-bottom: 0.2rem;
    }

    .rec-int-message__title-deco {
        width: 24rem;
        margin-left: -1rem;
    }

    .rec-other-member-title {
        font-size: clamp(4.4rem, 14.2vw, 6.4rem) !important;
        line-height: 1.04;
    }

        .rec-int-qa__title span {
        font-size:2.4rem;
    }
}

@media screen and (max-width: 767px) and (min-width: 500px) {
    .rec-int-message__title-text {
        font-size: 2.8rem;
    }

    .rec-int-message__text-img {
        width: 85%;
        display: block;
    }

    .rec-int-message__title-deco {
        width: 28rem;
        margin-left: -2rem;
    }

    .rec-int-message__sub-img {
        width: 72%;

    }

    .rec-int-qa__title {
        font-size: 2.0rem;
    }



}

@media screen and (max-width: 767px) and (min-width: 600px) {
        .rec-int-message__text-img {
        width: 80%;
        display: block;
    }
}

    /* ★横767px未満 かつ 縦700px未満の時だけ120vhにする */
@media screen and (max-width: 767px) and (max-height: 600px) {
  .rec-int-hero {
    height: 140svh !important; /* 強制的に120%に伸ばす */
  }

  

.rec-int-hero__content {
    padding-top: 32vh;
}

.rec-int-hero__img {
    height: 140svh;
}
}

@media screen and (max-width: 767px) and (max-height: 500px) {

    .rec-int-hero {
    height: 180svh !important; /* 強制的に120%に伸ばす */
  }

  .rec-int-hero__content {
    padding-top: 40vh;
    
  }
	
	.rec-int-hero__img {
		height: 180vh;
	}

  .rec-int-hero__tag {
    margin-bottom: 1.2rem;
    letter-spacing: 0.02rem;
  }


}



@media screen and (max-width: 767px) and (max-width: 360px) {
    .rec-int-message__title-text {
        font-size: 2.1rem;
    }



}


/* ==========================================================================
   10. Footer / フッター共通
   ========================================================================== */
html:has(body.page-template-recruit-page, body.single-interview) .site-footer {
    background-color: #EFF4F6;
    background-image: unset;
}

html:has(body.page-template-recruit-page, body.single-interview) .site-footer .label {
    font-size: 24px !important; 
    font-family: 'HigureGothic', sans-serif;
    color: #475568;
}

html:has(body.page-template-recruit-page, body.single-interview) .site-footer .detail,
html:has(body.page-template-recruit-page, body.single-interview) .site-footer .footer-link {
    font-size: 14px !important; 
}
html:has(body.page-template-recruit-page, body.single-interview) .site-footer .copyright {
    font-size: 15px !important; 
}

@media screen and (max-width: 767px) {
    html:has(body.page-template-recruit-page, body.single-interview) .site-footer .label { font-size: 21px !important; }
    html:has(body.page-template-recruit-page, body.single-interview) .site-footer .footer-link { font-size: 12px !important; }
    html:has(body.page-template-recruit-page, body.single-interview) .site-footer .copyright { font-size: 13px !important; }

    .rec-int-hero__tag {
        font-size: 1.4rem;
    }
}


/* 修正：!important を外すか、JSで上書きできるようにする */
.rec-hero-message-overlay,
.rec-hero-message-title,
.rec-hero-message-text {
    /* visibility: hidden !important; ← これがあるとJSで表示できません */
    will-change: transform, opacity;
  
}



/* GSAPが動く前の状態を担保する */
.rec-benefit-grid, 
.rec-story-panel, 
.rec-member {
    opacity: 1 !important;
    visibility: visible !important;
}

/* GSAPが制御を開始したら !important を外すためのクラス（必要に応じて） */
.is-initialized .rec-benefit-grid {
    opacity: inherit;
    visibility: inherit;
}

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

.rec-benefit-grid {
    /* JSが計算をミスっても、物理的に消滅するのを防ぐ */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex;
    min-height: 200px; /* 高さが0になるのを防ぐ */
    /* 左右にのみ clamp の余白を追加 */
    padding-right: clamp(20px, 5vw, 40px);
}
}

@media screen and (min-width: 767px) and (max-width:1023px) {


    /* パネル全体に共通の設定 */
    .rec-story-panel {
        will-change: transform, opacity; /* 描画をGPU加速させて滑らかにする */
        backface-visibility: hidden;    /* ちらつき防止の定番 */
        -webkit-backface-visibility: hidden;
    }

    .rec-member, .rec-story {
        width: 100% !important;
    }


}




/* ロック用のクラス（スマホ用） */
body.is-locked {
    overflow: hidden !important;
}

/* 1枚目のカードは最初から見せる */
.panel-1 .rec-benefit-card {
    opacity: 1 !important;
    transform: none !important;
}


/* ロック中（アニメーション中）の物理ロック */
body.is-locked {
    overflow: hidden !important;
}





/* PCでは <sp-br> を完全に無視（改行させない） */
.sp-br {
    display: none;
}

/* スマホ（767px以下）のときだけ <sp-br> を有効化 */
@media screen and (max-width: 767px) {
    .sp-br {
        display: block;
        content: "";
    }
}

/* PCのみ適用 */
@media screen and (min-width: 768px) {
    .rec-int-message__text-img {
        display: block;      /* これがないと幅指定が効きません */
        margin: unset;
        width: 100%;         /* 基本は100% */
        max-width: var(--pc-width, 800px); /* PHPから渡された変数を使用。ない場合は800px */
    }

    .rec-int-message__text-img img {
        width: 100%;         /* 親のpictureの幅に合わせる */
        height: auto;
    }
}


/* ==========================================================================
   ▼▼▼ 最終調整用CSS：アニメーション復活＆安全装置付き ▼▼▼
   ========================================================================== */

/* 1. アニメーション定義（JSが動かない時の保険用フェードイン） */
@keyframes cssFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 2. インタビュー詳細画像の基本設定 */
.rec-int-hero__img {
    /* 初期状態は透明 */
    opacity: 0;
    
    /* 【保険】JSが無くても、0.5秒待ってから1.5秒かけてCSSだけでふわっと表示させる */
    /* これにより「真っ白」を絶対に防ぎます */
    animation: cssFadeIn 1.5s ease-out 0s forwards;
    
    will-change: opacity, transform;
}

/* 3. JS (GSAP) が正常に動いた時の設定 */
/* GSAPが style属性（opacityやtransform）を書き込み始めたら、CSSアニメーションを止めてJSにバトンタッチ */
.rec-int-hero__img[style*="opacity"],
.rec-int-hero__img[style*="transform"] {
    animation: none !important; /* CSSアニメーションをキャンセル */
    /* opacityなどはJSの計算値（style属性）が優先されるよう、ここでは指定しない */
}



/* 3. JSで制御しているヒーロー・メッセージ周りのコンテナの横溢れを防止 */
.rec-hero-sticky-wrapper,
.rec-hero-sticky-container,
.rec-hero-message-overlay,
#js-story-section,
.rec-member {
    width: 100%;
}


/* 1. GSAPの固定用スペーサーによるはみ出しを強制リセット */
.pin-spacer {
  max-width: 100vw !important;
  overflow: visible !important;
}

/* 【CSS修正：recruit.css】 */


/* 2. ボディのロック解除（JSでクラスを消し忘れても動くように保険） */
body {
    overflow-x: clip !important; /* hidden ではなく clip を使うと sticky が壊れません */
}

/* 3. 以前あった touch-action: none は絶対に削除してください */
body.is-locked {
    touch-action: auto !important; 
}


/* 1. オレンジ背景の高さ制限を厳格にする */
.rec-hero-bg-move {
    position: absolute;
    top: 0 !important;    /* 上端を固定 */
    bottom: 0 !important; /* 下端を固定 */
    height: 100%; /* 100vhではなく、親(container)の100%にする */  /* 1画面分を絶対に超えないようにする */
    z-index: 2 !important;
    overflow: hidden;      /* 自身のハミ出しをカット */
}


@media screen and (min-width: 1024px) {
.rec-hero-sticky-wrapper, .rec-hero-sticky-container, .rec-hero-message-overlay, #js-story-section, .rec-story-panels, .rec-story-panel, .rec-member {
    width: unset;
}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .rec-story-slide-inner {
        width: 100%;
    }

    .rec-hero-sticky-wrapper, .rec-hero-sticky-container, .rec-hero-message-overlay, #js-story-section, .rec-story-panels, .rec-story-panel, .rec-member {
        width: unset;
    }
}

@media screen and (min-width:768px) {
    .rec-member {
        width: 100%;
    }


}
    



@media (min-width: 768px){
  .rec-member-swiper{
    overflow: visible !important;
  }
  .rec-member-grid.swiper-wrapper{
    transform: none !important;
    width: 100% !important;
  }
  .rec-member-card.swiper-slide{
    width: auto !important;
  }

  .swiper-backface-hidden .swiper-slide:nth-child(3) {
    margin-right: 0 !important;
  }

}


/* --- recruit.css の最終防衛策 --- */
/* 採用関連以外のページ（トップページなど）では、このファイルのSwiper指定をすべて無効化する意図 */
body:not(.page-template-recruit-page):not(.single-interview):not(.page-recruit) .swiper {
    overflow: hidden !important;
    left: auto !important;
    transform: none !important;
    position: relative !important;
}


/* --- recruit.js (GSAP) が動くための強制解除設定 --- */
:is(.page-template-recruit-page, .single-interview) .rec-hero-sticky-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
}





.rec-hero-sticky-container {
    min-height: 100lvh;

}

/* --- recruit.js (GSAP) が動くための強制解除設定 --- */
:is(.page-template-recruit-page, .single-interview) .rec-hero-sticky-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
}

/* スクロールアニメーションを殺す app.css の指定を解除 */
html:has(body.page-template-recruit-page), 
html:has(body.single-interview),
body:is(.page-template-recruit-page, .single-interview) {
    height: auto !important;
}/* 画面の高さが 700px 以下の時だけ適用 */






/* ヘッダーとメニューボタンをすべての要素より手前に配置 */
.site-header {
  z-index: 10000 !important;
}

.js-menu {
  z-index: 10001 !important;
  position: relative;
}

/* 採用ページのオーバーレイがサブページで悪さをしないための保険 */
.rec-hero-message-overlay,
.rec-hero-sticky-container {
  pointer-events: none; /* 通常はクリックを貫通させる */
}

/* 採用TOPページでJSが動いている時だけクリックを有効にする（必要であれば） */
.rec-hero-sticky-wrapper .rec-hero-message-overlay {
  pointer-events: auto;

}



 .rec-hero-message-title {
    opacity: unset;
 }

 

@media screen and (max-width: 560px) and (max-height: 480px) {

}


@media screen and (max-width: 560px) and (min-height: 640px) {

}


@media screen and (max-width: 767px) {
    .rec-int-other .rec-member-card__body .rec-member-card__name {
            letter-spacing: 0.05em;
            font-size:1.8rem;
    
    }

    .rec-int-other .rec-member-card__body .rec-member-card__role {
        font-size:1.4rem;
        line-height: 1.3;
    }


    .pin-spacer  {
padding: 0 !important;
    }

     .rec-int-other .rec-member-card__body .rec-member-card__profile {
        align-items: flex-end;
    }

    
    
}

@media screen and (max-width: 450px) {
    .rec-int-other .rec-member-card__body .rec-member-card__name {
        font-size: 1.5rem;
    }

    .rec-int-other .rec-member-card__body .rec-member-card__role {
        font-size: 1.3rem;
        letter-spacing: 0.02em;
    }

    .rec-int-other .rec-member-card__body {
        padding: 2rem 1rem;
    }

    .rec-int-other .rec-member-card__body .rec-member-card__lead {
        font-size:1.8rem;
        line-height: 1.4;
    }
}



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

/* その他インタビューセクション内のテキスト部分のみを9割の大きさに調整 */
.rec-int-other .rec-member-card__body .rec-member-card__name {
    font-size: 1.8rem;
}

.rec-int-other .rec-member-card__body .rec-member-card__role {
    font-size: 1.4rem;
}

/* その他インタビューのリード文内の改行を無効化 */
.rec-int-other .rec-member-card__lead br {
    display: none;
}
}


/* 1. 非常に高さが低い画面でも、中身が「消えない」ようにする */
.rec-hero-sticky-wrapper {
  overflow: visible !important; /* ピン留め中の要素消失を防ぐ */
  min-height: 400px; /* 400px以下になってもこれ以上縮めない（安全策） */
}

.rec-hero-sticky-container {
  height: 100%;
  min-height: 100lvh; /* 最新のブラウザ計算を利用 */
  position: relative;
}

#js-rec-bg {
  /* 高さが低いとき、背景が「点」にならないように最小値を確保 */
  min-height: 100lvh; 
  transition: height 0.1s ease-out; /* 変化を少し滑らかにしてチラつきを抑える */
}


/* 戻るボタンのコンテナ */
.rec-int-back {
    padding-top: 6.4rem; /* 上下の余白 */
    text-align: center;
}

/* ボタン本体（枠線の太さを均一にする修正） */
.btn-back-recruit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-width: 320px;
    height: 64px;
    border-radius: 32px; 
    position: relative;
    z-index: 1;
    text-decoration: none;
    transition: opacity 0.3s ease; 
    
    /* ▼▼ ここから追加・修正 ▼▼ */
    border: 2px solid transparent; /* 枠線の太さをここで「2px」とカッチリ指定 */
    
    /* 背景を2枚重ねる：1枚目(上)がボタン内の白、2枚目(下)が枠線のグラデーション */
    background-image: 
        linear-gradient(#fff, #fff), 
        linear-gradient(90deg, rgba(240, 141, 136, 0.8) 0%, #FB9E73 33%, #F0C197 66%, #E8C6A1 100%);
    
    /* 1枚目(白)は枠線の内側まで、2枚目(グラデ)は枠線の外側まで広げる */
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    /* ▲▲ ここまで ▲▲ */
}

.btn-back-recruit:hover {
    opacity: 0.9;
}

/* 矢印の形とグラデーションを画像と完全に一致させる */
.btn-back-recruit__arrow {
    display: inline-block;
    width: 32px;  /* 矢印の横幅（少し長めにして形を整える） */
    height: 24px; /* 矢印の高さ */
    margin-left: -1.4rem;
    
    /* 元のテキスト「←」を見えなくする */
    font-size: 0; 
    color: transparent;
    
    /* ▼ 繋ぎ目が完璧でグラデーションがかかったSVG矢印を背景で描画 ▼ */
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23F08D88' stop-opacity='0.8'/%3E%3Cstop offset='33%25' stop-color='%23FB9E73'/%3E%3Cstop offset='66%25' stop-color='%23F0C197'/%3E%3Cstop offset='100%25' stop-color='%23E8C6A1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M90 50H15m35-35L15 50l35 35' stroke='url(%23g)' stroke-width='12' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='4'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    /* アニメーション時のカクつき防止 */
    transform: translateZ(0);

    transition: transform 0.3s ease;
}

/* テキストの色とフォント */
.btn-back-recruit__text {
    font-family: 'noto sans jp', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #475568; /* 濃いグレー */

    /* ▼ これを追加：文字の動きも滑らかにする */
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* ホバー時の動き */
.btn-back-recruit:hover {
    opacity: 0.9;
}

/* ボタンホバー時に、矢印だけを左に動かす */
.btn-back-recruit:hover .btn-back-recruit__arrow {
    transform: translateX(-2px); /* 左に6px移動（数値はお好みで調整してください） */
}


/* スマホ対応 */
@media screen and (max-width: 767px) {
    .btn-back-recruit {
        min-width: 80%; /* 画面幅に合わせる */
        height: 56px;
    }
    .btn-back-recruit__text {
        font-size: 18px;
    }
}



/* ==========================================================================
   募集職種下部：問い合わせフォームへの誘導
   ========================================================================== */
.rec-open-contact-box {
    margin-top: 6rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.5); /* 背景に馴染む半透明の白 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 4rem;
    border-radius: 12px;
   
}

.rec-open-contact-box__text {
    font-family: 'noto sans jp', sans-serif;
    font-size: 2.0rem;
    color: #475568;
    line-height: 1.8;
    margin-bottom: 2.4rem;
    font-weight: 500;
    letter-spacing: 0.12em !important;
}

/* リンクテキストのデザイン */
.rec-open-contact-box__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'HigureGothic', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: #ffffff; /* サイトのオレンジ系カラー */
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
    padding: 1.6rem 4rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-color: #7c9ca6;
    border-radius: 22222rem;
}



/* ホバー時のアクション */
.rec-open-contact-box__link:hover {
    opacity: 0.8;
    transform: translateY(2px); /* 少し右に動く */
}

/* 矢印アイコンをCSSで追加 */.rec-open-contact-box__link span::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
    margin-left: 12px;
    vertical-align: middle;
    margin-top: -2px;
}

/* スマホ用レスポンシブ調整 */
@media screen and (max-width: 767px) {
    .rec-open-contact-box {
        margin-top: 4rem;
        padding: 2rem;
    }
    .rec-open-contact-box__text {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    .rec-open-contact-box__link {
        font-size: 1.5rem;
		box-sizing: border-box;
		width: 100%;
		padding: 2rem;
    }
	
	.rec-open-contact-box__link .sp-br {
		display: none;
	}

    .rec-br-pc {
        display: none;
    }
}

@media screen and (max-width: 370px) {
        .rec-open-contact-box__link {
            font-size: 1.4rem;
            padding: 1.6rem 2.4rem;
}
	
		.rec-open-contact-box__link .sp-br {
		display: block;
	}
}


/* ==========================================================================
   タブレット・PC（768px以上）かつ、画面の高さが低い（600px未満）場合の保護
   ========================================================================== */
@media screen and (min-width: 768px) and (max-height: 599px) {
    /* 背景とパネルの高さを 100vh から 600px 固定に上書きする */
    .rec-story-bg,
    .rec-story-panel {
        height: 600px !important;
        min-height: 600px !important;
    }
    
    /* GSAPでピン留めされた際のスペーサーもはみ出さないよう追従させる */
    #js-story-section {
        height: 600px !important;
    }
}

.sp-none {
    display: none;
}

.rec-case {
    padding-top: 8rem;
    background-color: #fff;
    z-index: 99;
    position: relative;
    width: 100%;
}

.rec-hero-case-title {

    background: linear-gradient(
        to right, 
        #6d7176 0%,
         #9da4ae 10%,     /* 左：明るいピーチベージュ */
        #d1b4ab 20%,   /* 中：くすみピンク */
        #d48787 50%, 
        #eab9b2 80%,
        #9da4ae 90%,     /* 左：明るいピーチベージュ */
        #6d7176 100%   /* 右：クールなグレー */
    );

    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 600;
    padding-left: 8vw;
    color: transparent;
    display: block;
    white-space: nowrap;
    /* ▼▼▼ 追加 ▼▼▼ */
    /* 大きく動かしても途切れないように繰り返す設定 */
    background-repeat: repeat-x; 
    /* ▲▲▲ 追加ここまで ▲▲▲ */
}

/* --- 親コンテナ：Gridレイアウトと余白の設定 --- */
.rec-case-content {
    display: grid;
    gap: 4.4vw; 
    grid-template-columns: repeat(2, 1fr); /* PCで均等に2分割 */
    padding-bottom: 8rem;
    padding-top: 8rem;
    background-color: #f4fcff;
    padding-inline: 8rem;
    border-radius: 4rem;
 
}

/* スマホでは縦1列にする（必要であれば追加してください） */
@media (max-width: 767px) {
    .rec-case {
        padding-bottom: 0;
    }
    .rec-case-content {
        grid-template-columns: 1fr;
        padding-inline: 6vw;
        padding-top: 5.6rem;
            padding-bottom: 5.6rem;
    }

    .rec-hero-case-title {
        padding-left: clamp(20px, 5vw, 40px)
    }

    .rec-case-content {
        gap: 6rem;
    }

    .rec-case-btn-wrapper {
        padding-top: 1.2rem !important;
    }

    .rec-case-body {
        gap: 0.4rem !important;
        padding-top: 1rem;
    }

     .rec-case-container {
        padding-inline: clamp(20px, 5vw, 40px) !important;
    }

    .rec-section-header-case {
        margin-bottom: 4rem !important;
    }

    .rec-case-text {
        font-size: 1.5rem !important;
    }
}

@media  screen and (max-width: 530px) {
    .sp-display-none
    {
        display: none;
    }

    .rec-case-link-button {
        width: unset;
        display: flex !important;
    }

    .rec-case-btn-wrapper {
        width: 100%;
    }

    .rec-case-title {
        font-size: 2rem !important;
    }
    
}

.rec-case-container {
    padding-inline: 8vw;
}

/* --- カード全体のリンク設定：hoverで浮き上がる演出 --- */
.rec-case-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease; /* なめらかな動き */
}

.rec-case-card-link:hover {
    transform: none;
}

/* --- 動画・画像と、テキストの間の余白を管理する「箱」 --- */
.rec-case-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 動画/画像本体の設定 */
.rec-case-content iframe,
.rec-case-content img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0; /* あなたの設定を維持：角丸なし */
}

/* --- テキストとボタンをまとめるエリア --- */
.rec-case-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 本文と「詳しく読む」の間の余白 */
    flex-grow: 1; /* これにより、ボタンを一番下に押し出す */
}

/* --- 「詳しく読む」ボタン風のデザイン --- */
.rec-case-link {
    display: inline-block;
    font-weight: bold;
    color: #eb6100; /* ロゴに合わせたオレンジ（必要に応じて変更してください） */
    text-decoration: none;
    font-size: 1.3rem;
    margin-top: auto; /* ★ここが重要：左右でボタンの高さが揃います */
}

.rec-case-link::after {
    content: ' →';
    transition: margin-left 0.3s ease;
    display: inline-block;
}

/* カードにマウスを乗せた時に矢印が動く */
.rec-case-card-link:hover .rec-case-link::after {
    margin-left: 8px;
}


/* --- ボタンの配置：説明文が短くても一番下に揃える --- */
.rec-case-btn-wrapper {
    margin-top: auto; 
    padding-top: 1.5rem;
}

/* --- ボタン本体：お問い合わせボタンのデザインを完全継承 --- */
.rec-case-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'HigureGothic', sans-serif;
    font-weight: 700;
    font-size: 1.5rem; /* グリッド内でのバランスを考えて少し調整 */
    color: #ffffff;
    text-decoration: none;
    padding: 1.2rem 3rem;
    background-color: #7c9ca6; /* お問い合わせ共通のブルーグレー */
    border-radius: 22222rem; /* 共通の超丸角 */
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

/* 矢印アイコンを共通デザインで追加 */
.rec-case-link-button span::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
    margin-left: 12px;
    vertical-align: middle;
    margin-top: -2px;
}

/* --- ホバーアクション --- */
/* 動画側のボタン単体ホバー */
.rec-case-link-button:hover {
    opacity: 0.8;
    transform: translateY(2px);
}

/* 右側（画像側）のカード全体ホバーに連動させる設定 */
.rec-case-card-link:hover .rec-case-link-button {
    opacity: 0.8;
    transform: translateY(2px);
}

.rec-case-text {
    padding-top: 0.8rem;
    font-size: 1.6rem;
    color: #475568;

}



.rec-case-title {
    padding-top: 0.8rem;
    font-size: 2.4rem;
    color: #475568;
    font-family: 'HigureGothic', sans-serif;
    font-weight: 600;

}

@media screen and (min-width: 768px) {
	.rec-case-title {
		padding-top: 2.8rem;
	}
}


/* --- アニメーションを滑らかにするための準備 --- */
.rec-case-item iframe,
.rec-case-item img {
    transition: filter 0.3s ease; /* 変化を0.3秒かけてゆっくりにする */
    filter: brightness(1); /* 初期状態（通常） */
}

/* --- コンテンツエリア（item）にマウスが入ったら明るくする --- */
.rec-case-item:hover iframe,
.rec-case-item:hover img {
    filter: brightness(1.1) contrast(0.5) !important; /* 15% 明るくする（1.2にするともっと明るくなります） */
}


.rec-case {
    padding-bottom: 2rem;
}

/* --- 再生ボタンのデザイン --- */
.yt-play-button {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 48px;
    background-color: rgba(216, 18, 18, 0.9);
    border-radius: 12px;
    transition: background-color 0.3s ease;
    z-index: 2;
    pointer-events: none;
    transition: all 0.3s ease;
}
.yt-play-button::before {
    content: "";
    position: absolute;
    top: 50%; left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}

.yt-facade {
    position: relative;
    cursor: pointer; /* これでマウスを乗せると指の形になります */
    display: block;
    aspect-ratio: 16 / 9;
    background-color: #000;
    overflow: hidden;
}

.yt-facade {
    position: relative;
}

.yt-facade img, 
.rec-case-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease;
}

/* ★修正ポイント：親（yt-facade）にマウスが乗ったらボタンを赤くする */
.yt-facade:hover .yt-play-button {
    background-color: #ff0000 !important; /* YouTubeらしい赤に */
    transform: translate(-50%, -50%) scale(1.1); /* 少し大きくして反応を見せる */
}

/* --- 動画エリアのホバー設定 --- */
/* 再生中（.is-playing）ではない時だけフィルターを適用する */
.rec-case-item:hover .yt-facade:not(.is-playing) img {
    filter: brightness(1.2) contrast(0.8) !important;
}

/* 再生中のiframeには絶対にフィルターをかけない */
.yt-facade.is-playing iframe {
    filter: none !important;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .rec-case-content {
        padding-inline: 4vw;
    }
}

/* Swiper内の画像がブラウザに「保存用画像」として掴まれるのを防ぐ */
.rec-member-card img {
  -webkit-user-drag: none; /* Chrome, Safari用 */
  user-drag: none;         /* 標準 */
  user-select: none;       /* テキスト選択も防いでおくとよりスムーズ */
}


@media screen and (min-width: 1400px) {
    .rec-member-card__role { font-size: 1.7rem; }
    .rec-member-card__name {font-size: 2.2rem;}
    .rec-int-other .rec-member-card__body .rec-member-card__name { font-size: 2.2rem !important; }
    .rec-int-other .rec-member-card__body .rec-member-card__role { font-size: 1.7rem !important; }


}