/* ====================================================================
   レスポンシブ専用スタイル（responsive.css）
   
   【対象ページ】
   - 全ページ共通: ヘッダー、フッター、基本要素
   - index.html: トップページ全セクション
   - message.html: メッセージページ全体
   - data.html: データページ全体
   - interview.html: インタビューページ全体
   - jobs.html: 職種ページ全体
   - entry/: エントリーフォーム全体
   
   【実装ルール】
   1. PC (1024px以上) のスタイルを基本とします。
   2. このファイルには、Tablet / Mobile のスタイルのみを記述します。
   3. スタイルは `max-width` を使用し、PCサイズに影響が出ないように記述してください。

   【ブレークポイント】
   - Tablet: 768px~1023px
   - Mobile: 767px以下
   - Small Mobile: 480px以下

   【構造】
   1. 共通ルール（全ページ共通）
   2. トップページ（index.html）
   3. メッセージページ（message.html）
   4. データページ（data.html）
   5. インタビューページ（interview.html）
   6. ジョブスページ（jobs.html）
   7. エントリーページ（entry/）
   8. その他コンポーネント
   ==================================================================== */

/* ====================================================================
   1. 共通ルール（全ページ共通）
   ==================================================================== */

/* === タブレット（768px~1023px）=== */
@media (max-width: 1023px) {
    /* 基本設定 */
    :root {
        --header-height: 60px;
        --section-padding-y: 80px;
    }

    .message-page main {
        padding-top: 0px !important;
    }
    
    main {
        padding-top: 60px !important;
    }

    /* ヘッダー・ナビゲーション */
    .mobile-nav-toggle {
        display: flex;
    }
    .header-right {
        display: none;
    }

    /* 共通セクションタイトル */
    .message-section .section-title-en,
    .advantage-section .section-title-en,
    .data-preview-section .section-title-en,
    .interview-section .section-title-en,
    .job-section .section-title-en {
        font-size: 44px !important;
    }
    .message-section .section-subtitle,
    .advantage-section .section-subtitle,
    .data-preview-section .section-subtitle,
    .interview-section .section-subtitle,
    .job-section .section-subtitle,
    .job-section .job-subtitle {
        font-size: 22px !important;
    }
    #message-preview .section-title-en {
        color: #595757 !important;
    }
}

/* === モバイル（767px以下）=== */
@media (max-width: 767px) {
    /* 基本設定 */
    :root {
        --header-height: 60px;
        --section-padding-y: 40px;
    }
    
    .message-page main {
        padding-top: 0px !important;
    }
    
    main {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-top: 50px !important;
    }

    /* ヘッダー・ナビゲーション */
    .site-header {
        padding: 8px 0;
    }
    .site-header .container {
        padding: 0 10px;
    }
    .site-header .logo {
        margin-left: 10px;
    }
    .site-header .logo img {
        height: 30px;
    }
    .header-right {
        display: none;
    }
    .mobile-nav-toggle {
        display: flex;
    }

    /* 基本タイポグラフィ */
    h1 {
        font-size: 48px;
    }
    h2 {
        font-size: 32px;
    }

    /* 共通セクションタイトル */
    .message-section .section-title-en,
    .advantage-section .section-title-en,
    .data-preview-section .section-title-en,
    .interview-section .section-title-en,
    .job-section .section-title-en {
        font-size: 28px !important;
    }
    .message-section .section-subtitle,
    .advantage-section .section-subtitle,
    .data-preview-section .section-subtitle,
    .interview-section .section-subtitle,
    .job-section .section-subtitle,
    .job-section .job-subtitle {
        font-size: 18px !important;
    }

    /* フッター */
    .site-footer {
        padding: 30px 0;
    }
    .site-footer .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .footer-left {
        flex-basis: auto;
        width: 100%;
    }
    .footer-logo {
        margin-bottom: 0px;
    }
    .footer-info {
        display: none;
    }
    .footer-right {
        flex-basis: auto;
        width: 100%;
        align-items: center;
    }
    .footer-nav {
        display: none;
    }
    .copyright {
        margin-bottom: 0;
        text-align: center;
    }

    /* ボタン */
    .btn-tertiary {
        margin: 0 auto;
    }
}

/* === 小画面モバイル（480px以下）=== */
@media (max-width: 480px) {
    .btn-tertiary {
        font-size: 16px;
        padding: 8px 32px;
    }
}

/* ====================================================================
   2. トップページ
   ==================================================================== */

/* === タブレット（768px~1023px）=== */
@media (max-width: 1023px) {
    /* ヒーローセクション */
    #hero {
        padding-top: 0;
    }
    .hero-section {
        height: 70vh;
        min-height: 500px;
        background-attachment: scroll;
        background-image: url('../images/hero/fv_main.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .hero-content {
        margin-top: 180px;
    }
    .hero-title {
        max-width: 600px;
        width: 100%;
        height: auto;
    }
    .hero-subtitle {
        font-size: 1.2rem;
        max-width: 100%;
        letter-spacing: 0.18em;
        text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.45);
        font-synthesis: weight;
        margin-top: 180px;
    }

    /* 強みセクション */
    .strength-item {
        min-height: 400px;
        background-position: center !important;
        background-size: cover !important;
    }
    .strength-content {
        padding: 60px 40px;
    }

    /* メッセージプレビューセクション */
    .message-preview-section {
        padding: 80px 60px;
        min-height: 600px;
        display: flex;
        align-items: center;
    }
    .message-container {
        padding: 0;
        height: 100%;
        max-width: 100%;
    }
    .message-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        position: relative;
        padding: 0;
    }
    .message-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }
    .message-image img {
        width: 87%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .message-text {
        position: relative;
        width: 50%;
        max-width: 50%;
        margin-left: auto;
        padding: 0;
        text-align: left;
    }
    .message-title {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }
    .message-position {
        margin-bottom: 30px;
    }
    .message-catchphrase {
        font-size: 1.25rem;
        margin-bottom: 30px;
        line-height: 1.6;
    }
    .message-description {
        font-size: 0.9375rem;
        line-height: 1.8;
        margin-bottom: 40px;
    }
    .message-content-section .container {
        max-width: 760px;
        margin: 0 auto;
        padding: 40px 20px 40px 20px;
    }

    /* アドバンテージセクション */
    .advantage-section {
        padding: 80px 0;
    }
    .advantage-container {
        max-width: 100%;
        padding: 0 40px;
    }
    .advantage-content {
        max-width: 640px;
        min-height: 350px;
    }
    .advantage-text {
        width: 100%;
        margin-bottom: 0;
    }
    .advantage-image {
        width: 100%;
        height: 250px;
    }
    .advantage-section .section-title-en {
        font-size: 2.5rem;
    }
    .advantage-section .section-subtitle {
        margin-bottom: 0;
    }

    /* データプレビューセクション */
    .data-preview-section {
        padding: 80px 0;
    }
    .data-preview-section .container {
        padding: 0;
    }
    .data-content {
        flex-direction: flex;
        align-items: center;
        text-align: left;
        margin-left: 0;
    }
    .data-icon {
        width: 42%;
    }
    .data-grid {
   
        
        gap: 40px;
    }
    .data-item {
        width: 354px;
        max-width: 90vw;
        margin: 0 auto;
        
    }
    .data-icon {
        width: 354px;
        height: 200px;
        margin: 0 auto 10px auto;
        display: flex;
        
    }
    .data-icon img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    /* インタビューセクション */
    .interview-header {
        text-align: center;
    }

    .slider-arrow.prev {
        left: 50%;
        top: -40px;
        transform: translateX(-280px);
    }
    
    .slider-arrow.next {
        right: 50%;
        top: -40px;
        transform: translateX(-280px);
    }

    /* ジョブセクション（トップページ） */
    .job-section-header {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 30px;
    }
    .section-title-group {
        width: 100%;
    }
    .job-content {
        max-width: none;   
        width: 100%;
    }
    .section-description {
        margin-bottom: 30px;
    }

      .job-list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .job-item {
        min-height: 60px !important;
        border-radius: 35px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .job-name {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: 28px;
        line-height: 0.79;
        letter-spacing: 5%;
        color: #ffffff;
        margin-left: 50px;
        flex-grow: 1;
    }
    /* フィーチャーカード（ジョブスページ） */
    .feature-cards {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }
    .feature-card {
        width: 100% !important;
        max-width: none !important;
    }
}

/* === モバイル（767px以下）=== */
@media (max-width: 767px) {
    /* ヒーローセクション */
    #hero {
        padding-top: 0;
    }
    .top-section{
        position:relative;
        width:100dvw;
        height:35dvh !important;
        padding:0px;
        overflow: hidden;
    }
    .top-section picture{
        transform:scale(0.7);
    }
    .hero-section {
        height: 355px;
        min-height: 355px;
        background-image: url('../images/mobile/hero_bg_mobile.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        padding: 0 20px;
        margin-bottom: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hero-content {
        position: relative;
        z-index: 2;
        max-width: 390px;
        width: 100%;
        margin-top: 150px;
    }
    .hero-title {
        max-width: 312px;
        width: 312px;
        height: auto;
        margin: 0 auto 16px;
    }
    .hero-subtitle {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 18px;
        font-weight: 700;
        line-height: 0.8;
        letter-spacing: 0.15em;
        color: #FFFFFF;
        max-width: 300px;
        width: 300px;
        height: auto;
        margin: 0 auto 16px;
        text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.45);
        text-align: center;
    }

    /* 強みセクション */
    .strengths-section {
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    .strength-item {
        margin-bottom: 0 !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .strength-item:last-child {
        margin-bottom: 0 !important;
    }
    .strength-item,
    .strength-item:first-child,
    .strength-item.alt-bg {
        min-height: unset !important;
        display: block !important;
        background: none !important;
        padding-bottom: 40px !important;
    }
    .strength-item::before,
    .strength-item::after,
    .strength-item.alt-bg::before,
    .strength-item.alt-bg::after {
        display: none !important;
    }
    .strengths-section .strength-content,
    .strengths-section .strength-content.reverse {
        display: block !important;
        height: auto !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        position: relative !important;
        margin: 0 auto !important;
    }
    .strengths-section .strength-content::before {
        content: '' !important;
        display: block !important;
        width: 100% !important;
        height: 213px !important;
        background-size: cover !important;
        background-position: center !important;
        z-index: 1 !important;
        margin: 0 !important;
    }
    .strengths-section .strength-content::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 213px !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    .strength-item:not(.alt-bg) .strength-content::before {
        /* background-image: url('../images/strengths/challenge_61years_latest.jpg') !important; */
        background-image: url('../images/strengths/team photo.png') !important;
    }
    .strength-item:not(.alt-bg) .strength-content::after {
        background: linear-gradient(to left, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 0) 70%) !important;
    }
    .strength-item.alt-bg {
        background-color: #D8E6F1 !important;
    }
    .strength-item.alt-bg .strength-content::before {
        background-image: url('../images/strengths/excitement_beyond_selling_latest.jpg') !important;
    }
    .strength-item.alt-bg .strength-content::after {
        background: linear-gradient(to right, rgba(216, 230, 241, 1) 15%, rgba(216, 230, 241, 0) 70%) !important;
    }
    .strengths-section .strength-text {
        padding: 20px !important;
        margin: 0 !important;
        text-align: left !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
        max-width: calc(100% - 40px) !important;
        width: calc(100% - 40px) !important;
        display: block !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .strengths-section .strength-text h2,
    .strengths-section .strength-content.reverse .strength-text h2 {
        font-size: 26px !important;
        line-height: 1.5 !important;
        margin: 0 0 20px 0 !important;
        color: #4f9cd4 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        font-family: 'Noto Sans JP', sans-serif !important;
        font-weight: 900 !important;
    }
    .strengths-section .strength-text p,
    .strengths-section .strength-content.reverse .strength-text p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        margin: 0 !important;
        color: #000000 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        font-family: 'Noto Sans JP', sans-serif !important;
        font-weight: 400 !important;
    }

    /* メッセージプレビューセクション */
    #message-preview.message-preview-section {
        padding: 40px 5px !important;
        background-color: #fff !important;
        box-sizing: border-box !important;
        display: block !important;
        height: auto !important;
    }
    #message-preview .message-container,
    #message-preview .message-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        height: auto !important;
    }
    #message-preview .message-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }
    #message-preview .message-image {
        width: 100% !important;
        max-width: 300px !important;
        height: 300px !important;
        margin: 0 auto 30px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }
    #message-preview .message-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
    #message-preview .message-text {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    #message-preview .section-title-en {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin: 0 0 15px 0 !important;
        color: #595757 !important;
        font-family: var(--font-en) !important;
        font-weight: 900 !important;
        letter-spacing: 0.03em !important;
        text-align: center !important;
    }
    #message-preview .message-position {
        font-size: 0.9rem !important;
        margin: 0 0 20px 0 !important;
        color: #595757 !important;
        font-family: 'Noto Sans JP', sans-serif !important;
        font-weight: 400 !important;
        line-height: 1.93 !important;
    }
    #message-preview .message-catchphrase {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin: 0 0 20px 0 !important;
        font-weight: bold !important;
        color: #595757 !important;
        font-family: 'Noto Sans JP', sans-serif !important;
    }
    #message-preview .message-description {
        font-size: 0.9rem !important;
        line-height: 1.8 !important;
        margin: 0 0 30px 0 !important;
        color: #595757 !important;
        font-family: 'Noto Sans JP', sans-serif !important;
    }
    #message-preview .btn-tertiary {
        margin: 0 !important;
        display: inline-block !important;
    }

    /* アドバンテージセクション */
    .advantage-section {
        padding: 20px 0 60px;
        background: linear-gradient(135deg, #0070b0 0%, #4f9cd4 45%, #ffffff 100%);
        height: 1060px;
    }
    .advantage-container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
    }
    .advantage-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .advantage-text {
        width: 100%;
        text-align: left;
        position: relative;
        z-index: 2;
        padding: 0 20px;
    }
    .advantage-section .section-title-en {
        font-size: 2.5rem;
        text-align: left;
        color: white;
    }
    .advantage-section .section-subtitle {
        text-align: left;
        margin-bottom: 0;
        color: white;
    }
    .advantage-image {
        width: 100%;
        max-width: 100%;
        margin: 20px auto 0;
        padding: 0 20px;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }
    .advantage-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        object-position: center;
    }
    .advantage-image picture {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    /* データプレビューセクション */
    .data-preview-section {
        padding: 60px 0;
    }
    .data-preview-section .container {
        padding: 0 20px;
    }
    .data-content {
        flex-direction: column;
        align-items: flex-start; /* 左揃えに変更 */
        gap: 40px;
        text-align: left; /* 左揃えに変更 */
        margin-left: 0;
    }
    .data-preview-section .data-icon {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    .data-preview-section .data-icon img {
        display: block !important;
        width: 60vw !important;
        max-width: 320px !important;
        height: auto !important;
        margin: 0 0 0 0 !important; /* 左揃えに変更 */
    }
    .data-text .section-title-en {
        font-size: 2.5rem;
    }
    .data-text .section-subtitle {
        font-size: 1.1rem;
    }
    .data-title-group {
        margin-bottom: 24px;
    }
    .data-preview-section .section-title-en,
    .data-preview-section .data-title {
        font-size: 28px !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .data-preview-section .section-subtitle,
    .data-preview-section .data-subtitle {
        font-size: 18px !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* インタビューセクション */
    .interview-section .interview-card.interview-card-medium {
        width: 140px !important;
    }
    .interview-section .interview-card.interview-card-medium .card-image {
        width: 140px !important;
        height: 180px !important;
    }
    .interview-section .interview-header {
        margin-bottom: 32px !important;
    }
    .interview-section .interview-slider-wrapper {
        margin-top: 48px !important;
    }
    .interview-section .slider-arrow {
        margin-top: 24px !important;
    }

    /* ジョブセクション（トップページ） */
    .job-section {
        padding: 40px 20px !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        box-sizing: border-box !important;
    }
    .job-section .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .job-section-header {
        flex-direction: column !important;
        gap: 30px !important;
        margin-bottom: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .section-title-group {
        width: 100% !important;
        max-width: 100% !important;
    }
    .job-content {
        max-width: 100% !important;
        width: 100% !important;
    }
    .section-description {
        margin:0 0 20px 0 !important;
        width: 100% !important;
    }
    .job-list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .job-item {
        min-height: 60px !important;
        border-radius: 35px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .job-name {
        font-size: 24px !important;
        margin-left: 30px !important;
    }
    .job-status {
        font-size: 16px !important;
        padding: 2px 30px !important;
        margin-right: 20px !important;
    }

    /* エントリーセクション */
    .entry-section .container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .entry-left .section-subtitle {
        text-align: center;
    }
    .entry-right .entry-message {
        margin-bottom: 20px;
    }
}

/* === 小画面モバイル（480px以下）=== */
@media (max-width: 480px) {
    /* データプレビューセクション */
    .data-preview-section .container {
        padding: 0 16px;
    }
    .data-icon img {
        width: 200px;
    }
    .data-text .section-title-en {
        font-size: 2rem;
    }
    .data-text .section-subtitle {
        font-size: 1rem;
    }

    /* インタビューセクション */
    .interview-header {
        text-align: center;
        margin-bottom: 30px;
    }
}

/* ====================================================================
   3. メッセージページ
   ==================================================================== */

/* === タブレット（768px~1023px）=== */
@media (max-width: 1023px) {
    .message-hero-section {
        height: 500px;
        background-attachment: scroll;
    }
    .message-hero-section .container {
        padding: 0 40px;
    }
    .message-hero-section .message-title {
        font-size: 60px;
    }
    .message-hero-section .message-subtitle {
        font-size: 22px;
    }
    .message-title-group {
        margin-bottom: 120px;
    }
}

/* === モバイル（767px以下）=== */
@media (max-width: 767px) {
    .message-hero-section {
        height: 370px;
        background-image: url('../images/message_hero_bg.jpg') !important;
        background-size: cover !important;
        background-position: 65%  center !important;
        background-attachment: scroll !important;
    }
    .message-hero-section .container {
        padding: 0 20px;
    }
    .message-hero-section .message-title {
        font-size: 38px;
        line-height: 1;
    }
    .message-hero-section .message-subtitle {
        font-size: 18px;
        line-height: 1.4;
        letter-spacing: 0.1em;
    }
    .message-title-group {
        margin-bottom: 80px;
    }
    .ceo-info {
        bottom: 80px;
    }
    .ceo-info .company-name,
    .ceo-info .position {
        font-size: 16px;
    }
    .message-sign {
        bottom: 40px;
        width: 100px;
    }
    .content-title {
        font-size: 28px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .content-title br {
        display: none !important;
    }
}

/* ====================================================================
   4. データページ
   ==================================================================== */

/* === タブレット（768px~1023px）=== */
@media (max-width: 1023px) {
    .data-hero-section {
        padding-top: 100px;
    }
    .data-icon img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
}

/* === モバイル（767px以下）=== */
@media (max-width: 767px) {
    .data-hero-section {
        padding-top: 40px;
    }
    .data-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        justify-content: center !important;
        align-items: center !important;
    }



    .data-item {
        width: 90vw;
        max-width: 320px;
        margin: 0 auto;
        text-align: left; /* 左揃えに変更 */
    }
    .data-icon {
        width: 100%;
        height: 160px;
        margin: 0 0 10px 0; /* 左揃えに変更 */
        display: flex;
        align-items: flex-start; /* 左揃えに変更 */
        justify-content: flex-start; /* 左揃えに変更 */
    }
    .data-icon img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: left center !important; /* 画像を左寄せに配置 */
        display: block !important;
        margin: 0 !important; /* style.cssの影響を上書き、左揃えに変更 */
    }
    .data-hero-section .data-title {
        font-size: 28px !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .data-hero-section .data-subtitle {
        font-size: 18px !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .gender-ratio {
        gap: 0px !important;
    }
}

/* ====================================================================
   5. インタビューページ
   ==================================================================== */

/* === タブレット（768px~1023px）=== */
@media (max-width: 1023px) {
    .interview-hero-section {
        padding-top: 100px !important;
    }
}

/* === モバイル（767px以下）=== */
@media (max-width: 767px) {
    .interview-hero-section {
        padding-top: 40px !important;
    }
    .interview-hero-section .interview-title {
        font-size: 28px !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .interview-hero-section .interview-subtitle {
        font-size: 18px !important;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .interview-title {
        padding: 0;
        margin: 0;
    }
    .interview-content-section .container, .interview-hero-section .container {
        padding: 20px 20px 0px 20px;
    }
    .profile-title {
        display: none !important;
    }
   

    .mobile-qa-title {
        display: block !important;
        font-size: 28px !important;
        padding-left: 5px;
        padding-right: 20px;
        box-sizing: border-box;
        margin-bottom: 24px;
        color: #4F9CD4;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 900;
        line-height: 1.6;
        text-align: left;
    }
    .interview-profile {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }
    .profile-image {
        margin: 0 auto !important;
        display: block !important;
        width: 220px !important;
        height: 300px !important;
        object-fit: cover !important;
    }
    .profile-content {
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .title-text.mobile-qa-title {
        margin-bottom: 0 !important;
        color: #595757 !important;
        line-height: 1.5 !important;
    }
    .interview-qa {
        margin-top: 20px !important;
    }
    .interview-content-section {
        padding-top: 0 !important;
    }
}

/* === PC（768px以上）=== */
@media (min-width: 768px) {
    .mobile-qa-title {
        display: none !important;
    }
}

/* ====================================================================
   6. ジョブスページ
   ==================================================================== */

/* === タブレット（768px~1023px）=== */
@media (max-width: 1023px) {
    .job-hero-section {
        padding: 100px 0 80px 0;
    }
    .job-title {
        font-size: 48px;
    }
    .career-pass-section {
        padding: 80px 0;
    }
    .career-pass-image {
        margin: 0 20px;
    }
}

/* === モバイル（767px以下）=== */
@media (max-width: 767px) {
    .job-hero-section {
        padding: 80px 0 60px 0;
        min-height: 420px;
        height: 300px;
        
    }
    .job-subtitle {
        font-size: 22px;
    }
    .job-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin: 16px auto !important;
        padding: 0 20px !important;
        text-align: left !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .outline-section {
        padding: 40px 20px 0 20px !important;
    }
    .outline-section-header {
        max-width: none !important;
        margin: 0 0 40px 0 !important;
        padding: 0 !important;
    }
    .outline-content {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 32px;
    }
    .outline-tag {
        padding: 12px 24px;
        max-width: 100%;
    }
    .outline-tag span {
        font-size: 20px;
    }
    .outline-description {
        font-size: 14px;
    }
    .feature-cards-section {
        padding: 60px 20px !important;
    }
    .feature-cards {
        grid-template-columns: 1fr !important; /* 1カラムに変更 */
        gap: 20px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .feature-cards .feature-card:last-child {
        grid-column: 1;
        max-width: 100%;
    }
    .feature-card {
        height: auto;
        min-height: 300px;
    }
    .recruitment-section {
        padding: 60px 20px !important;
    }
    .recruitment-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    .recruitment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px !important;
    }
    .recruitment-row {
        height: auto !important;
        min-height: auto !important;
        padding: 16px 20px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 20px !important;
        position: relative !important;
        border-bottom: 1px solid #9FA0A0 !important;
    }
    .recruitment-row:nth-child(2),
    .recruitment-row:nth-child(6),
    .recruitment-row:nth-child(12),
    .recruitment-row:nth-child(13) {
        height: auto !important;
        min-height: auto !important;
    }
    .recruitment-item-label {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100px !important;
        max-width: 100px !important;
        flex-shrink: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        height: auto !important;
        min-height: auto !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #000 !important;
        font-family: 'Noto Sans JP', sans-serif !important;
        font-weight: 400 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .recruitment-item-content {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        line-height: 1.6 !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 14px !important;
        color: #000 !important;
        font-family: 'Noto Sans JP', sans-serif !important;
        font-weight: 400 !important;
    }
    .career-pass-section {
        padding: 60px 20px !important;
    }
    .career-pass-title {
        font-size: 24px;
        margin-bottom: 40px;
    }
    .career-pass-image {
        margin: 0 auto;
        max-width: 100%;
    }
    .career-pass-desktop {
        display: none !important;
    }
    .career-pass-mobile {
        display: block !important;
        max-width: 280px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* ジョブスページ専用のレイアウト調整（jobs.htmlページ） */
    .jobs-page .job-section {
        padding: 40px 0 !important;
    }
    .jobs-page .job-section .container {
        padding: 0 !important;
    }
    .jobs-page .job-section-header,
    .jobs-page .job-section .section-description,
    .jobs-page .job-section .job-item {
        width: calc(100vw - 40px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
    .jobs-page .job-section .job-list {
        padding: 0 !important;
        width: calc(100vw - 40px) !important;
        margin: 0 auto !important;
    }
}

/* === 小画面モバイル（480px以下）=== */
@media (max-width: 480px) {
    .job-hero-content,
    .outline-content,
    .recruitment-table-container {
        margin: 0 16px;
        max-width: calc(100vw - 32px);
    }
    .career-pass-section {
        padding: 40px 16px !important;
    }
    .recruitment-section {
        padding: 40px 16px !important;
    }
    .feature-cards-section {
        padding: 40px 16px !important;
    }
    .feature-cards {
        margin: 0;
        max-width: 100%;
    }
    .recruitment-row {
        padding: 12px 16px !important;
        gap: 16px !important;
    }
    .recruitment-item-label {
        width: 80px !important;
        max-width: 80px !important;
        font-size: 12px !important;
    }
    .recruitment-item-content {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    .career-pass-title {
        font-size: 20px;
        margin-bottom: 30px;
    }
    .career-pass-image {
        margin: 0 16px;
    }
    .career-pass-mobile {
        max-width: 280px !important;
    }
    .job-section .section-title-en {
        font-size: 32px !important;
    }
    .job-section .section-subtitle {
        font-size: 20px !important;
    }
    .job-name {
        font-size: 20px !important;
        margin-left: 20px !important;
    }
    .job-status {
        font-size: 14px !important;
        padding: 2px 20px !important;
        margin-right: 15px !important;
    }
}

/* ====================================================================
   7. エントリーページ
   ==================================================================== */

/* === PC・デスクトップ（1024px以上）=== */
@media (min-width: 1024px) {
    .entry-page-wrapper {
        padding-top: 120px !important;
    }
}

/* === モバイル（767px以下）=== */
@media (max-width: 767px) {
    .entry-page-wrapper {
        padding-top: 0 !important;
    }

    /* エントリーページのタイトルセクション - 他のページに合わせたサイズ */
    .entry-main-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    .entry-sub-title {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    /* メインコンテンツの左右20px余白 */
    .entry-title-section {
        padding: 0 20px !important;
        margin-bottom: 30px !important;
    }

    .entry-content {
        padding: 40px 0 60px 0 !important;
    }

    .entry-description {
        padding: 0 20px !important;
        margin-bottom: 30px !important;
    }

    .entry-form-container {
        padding: 0 20px !important;
    }

    .entry-form {  
        padding: 0 !important;
    }

    /* === エントリーページ専用フォーム調整 === */
    .entry-form form {
        padding: 20px 20px !important;
    }

    /* フォーム内要素のモバイル調整 */
    .form-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 0 20px 0 !important;
        min-height: auto !important;
    }

    .form-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        min-height: auto !important;
    }

    .form-label-wrapper {
        margin-bottom: 10px !important;
        min-width: auto !important;
        width: 100% !important;
    }

    .form-input,
    .file-input-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 入力フィールドの高さをモバイル時のみ高くする */
    .form-input {
        height: 40px !important;
        min-height: 40px !important;
    }

    /* ファイルアップロードエリア - モバイル調整 */
    .file-input-area {
        min-height: 60px !important;
        padding: 12px !important;
    }

    .file-input-text {
        font-size: 13px !important;
    }

    .file-input-formats {
        font-size: 11px !important;
    }

    .file-selected-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .file-selected-name {
        margin-right: 0 !important;
        margin-bottom: 4px !important;
        font-size: 13px !important;
    }

    .file-selected-size {
        margin-right: 0 !important;
        font-size: 11px !important;
    }

    .file-remove-btn {
        align-self: flex-end !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 14px !important;
    }

    /* プライバシーポリシーセクション - モバイル調整 */
    .policy-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    /* チェックボックス - モバイル調整 */
    .checkbox-label input[type="checkbox"] {
        width: 20px !important;
        height: 20px !important;
    }

    .checkbox-label input[type="checkbox"]:checked::before {
        font-size: 14px !important;
    }

    .checkbox-text {
        font-size: 14px !important;
    }

    /* 送信ボタン - モバイル調整 */
    .form-submit {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .btn-submit {
        width: 200px !important;
        height: 45px !important;
        font-size: 18px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .btn-submit .arrow {
        font-size: 18px !important;
    }

    /* === 確認画面専用モバイル調整 === */
    /* 確認画面のフォーム全体 */
    .confirm-form {
        padding: 20px 0 40px 0 !important; /* 左右パディング0で外側パディングを削除 */
        margin: 0 !important;
        background-color: #FFFFFF !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    /* 確認画面内のformタグの影響を無効化 */
    .confirm-form form {
        padding: 0 30px 5px 30px !important; /* .entry-form formの影響を上書き */
        margin: 0 !important;
    }

    /* 確認画面の項目表示 */
    .confirm-item {
        flex-direction: column !important;
        padding: 15px 20px !important; /* 内側に適切なパディング */
        border-bottom: 1px solid #e9ecef !important;
    }

    .confirm-item:last-child {
        border-bottom: none !important;
    }

    .confirm-label {
        min-width: auto !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
        color: #333333 !important;
        font-size: 14px !important;
    }

    .confirm-value {
        margin-left: 0 !important;
        color: #595757 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* === 確認画面ボタン専用モバイル調整 === */
    .confirm-buttons {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 0 10px 0 !important;
        background-color: transparent !important;
    }

    /* 修正するボタン（セカンダリ） */
    .btn-secondary {
        width: 100% !important;
        min-width: auto !important;
        padding: 12px 32px !important; /* ボタン内パディングは維持 */
        margin: 0 !important;
        border: 2px solid #9FA0A0 !important;
        background-color: transparent !important;
        color: #9FA0A0 !important;
        border-radius: 27px !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    /* 送信するボタン（プライマリ） */
    .confirm-buttons .btn-submit {
        width: 100% !important;
        min-width: auto !important;
        padding: 12px 32px !important; /* ボタン内パディングは維持 */
        margin: 0 !important;
        background-color: #4F9CD4 !important;
        color: white !important;
        border: none !important;
        border-radius: 27px !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    /* === 送信完了画面モバイル調整 === */
    .thanks-message h3 {
        font-size: 20px !important;
    }

    .thanks-message p {
        font-size: 14px !important;
    }

    .contact-info h4 {
        font-size: 16px !important;
    }

    .contact-info p {
        font-size: 13px !important;
    }

    /* 送信完了画面ボタン調整 */
    .thanks-button .btn-submit {
        width: 250px !important;
        min-width: 250px !important;
        height: 50px !important;
    }
}

/* ====================================================================
   8. その他コンポーネント
   ==================================================================== */

/* === インタビューセクション（共通コンポーネント）=== */
@media (max-width: 1200px) {
    .interview-header {
        max-width: 100%;
        padding: 0 16px;
    }
    .interview-slider-wrapper {
        max-width: 100%;
        padding: 0 8px;
    }
    .slider-arrow.prev {
        transform: translateX(-200px);
    }
    .slider-arrow.next {
        transform: translateX(200px);
    }
    .interview-slider {
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (max-width: 768px) {
    .interview-section {
        padding: 40px 0 60px 0;
    }
    .interview-header {
        margin-bottom: 30px;
        padding: 0 8px;
    }
    .interview-header .section-title-en {
        font-size: 32px;
    }
    .interview-header .section-subtitle {
        font-size: 20px;
    }
    .interview-slider {
        gap: 12px;
        padding: 0 4px;
        min-height: 320px;
    }
    .interview-card-medium,
    .interview-card-small {
        margin-top: 30px;
        width: 100px;
    }
    .slider-arrow {
        width: 40px;
        height: 40px;
        top: -30px;
    }
    .slider-arrow.prev {
        left: 60%;
        display:none;
    }
    .slider-arrow.next {
        right: 60%;
        display:none;
    }
}

/* === PCサイズでのヒーロー背景画像強制表示 === */
@media (min-width: 1024px) {
    .hero-section {
        background-image: url('../images/hero/fv_main.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}