/***********************************************************************************************************************************************************************************/
/*以下、ヘッダーのスタイル*/
/***********************************************************************************************************************************************************************************/

/* ============== ヘッダー全体に共通するスタイル =============== */

/*ヘッダー全体のスタイル*/
.c-header {
    background-color: #FFFFFF;
    font-family: "メイリオ";
}

/*ナビゲーションのタイトルのスタイル*/
.nav-title {
    color: #000000;
    text-decoration: underline #008649 1.3px;
    text-underline-offset: 8px;
}



/* ================== ハンバーガーメニューのスタイル =================== */
.navbar-toggler {
    border: 2px solid #000000;
    background-color: #ffffff;
    border-radius: 10px;
}

    .navbar-toggler:hover {
        background-color: #008649;
        transform: scale(1.1); /*ホバー時に1.1倍の大きさになる*/
    }

/* ================== ドロップダウンのスタイル =================== */
.c-dropdown {
    background-color: #008649;
    font-size: 18px;
}

a.dropdown-item {
    color: #FFFFFF;
}

    a.dropdown-item:hover {
        background-color: #FFFFFF;
    }

/* ================== ヘッダーに関するスタイルで画面サイズで分岐するもの (タブレット・ＰＣ版) =================== */
/*帯のスタイル*/
.c-header-band {
    position: fixed;
    height: 14px;
    background-color: #008649;
}

/*ロゴ画像のスタイル*/
.c-logo-img {
    width: 78px;
    height: 78px;
    margin-right: 0.3rem;
}

/*会社名とロゴ画像を含めた領域内のスタイル*/
.c-brand {
    padding-left: 11%; /*ロゴの左側の空間の調節のためのスタイル*/
    font-size: 20px;
}

/* 会社名（Roundedニュアンス） */
.company-name {
    font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "Meiryo", sans-serif;
}


/* ================== ヘッダーに関するスタイルで画面サイズで分岐するもの (スマホ版) =================== */
@media (max-width: 767.98px) {
    .c-header-band {
        height: 10px;
    }

    .c-dropdown {
        font-size: 15px;
    }

    .c-logo-img {
        width: 58px;
        height: 60px;
    }

    .c-brand {
        padding-left: 4%; /*ロゴの左側の空間の調節のためのスタイル*/
        font-size: 17px;
    }
}

/* ================== ブラウザの介入による発生するバグの対策 =================== */

/* Bootstrapの:focusシャドウを無効化 */
.navbar .dropdown-toggle:focus {
    box-shadow: none !important;
}

/* タップハイライトをナビ内だけ透明化 */
.navbar a,
.navbar .dropdown-toggle,
.navbar .nav-link {
    -webkit-tap-highlight-color: transparent;
}

    /* タップ／クリックのフォーカス枠は消す */
    .navbar .dropdown-toggle:focus,
    .navbar .nav-link:focus,
    .navbar .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }

/***********************************************************************************************************************************************************************************/
/*以下、フッターのスタイル*/
/***********************************************************************************************************************************************************************************/

/*フッター全体のスタイル*/
.c-footer {
    background-color: lightgray;
    padding-top: 40px;
    padding-bottom: 15px;
}

/*フッターの会社ロゴに関するスタイル*/
.c-footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10px;
    text-align: center;
}

/***********************************************************************************************************************************************************************************/
/* ページの先頭に戻るボタンに関するスタイル*/
/***********************************************************************************************************************************************************************************/

/*初期状態のスタイル*/
#back-to-top {
    position: fixed; /*位置を固定する*/
    right: 20px;
    bottom: 60px;
    z-index: 1000; /*優先度の記述。ヘッダーやフッターの上に表示する*/
    opacity: 0; /* 初期は非表示 */
    pointer-events: none; /* 非表示時はクリック不可 */
    border: none;
    background-color: transparent; /* 背景色を透明にする */
    color: #00A763;
}

    /*スクロールにより、先頭に戻るボタンが見えるようになった時のスタイル*/
    #back-to-top.is-visible {
        opacity: 0.85; /*少し透けて表示させる*/
        pointer-events: auto; /*クリック可能にする*/
    }

    /*ボタンにカーソルを当てたときのスタイル*/
    #back-to-top:hover {
        transform: scale(1.2); /*ホバー時に1.2倍の大きさになる*/
        opacity: 1; /*完全に表示させる*/
    }


    /* 表示時と非表示時の状態を aria-hidden で制御 */
    #back-to-top[aria-hidden="true"] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    #back-to-top.is-visible[aria-hidden="false"] {
        opacity: 0.65;
        visibility: visible;
        pointer-events: auto;
    }

    /* フォーカス枠が残って見えるのを防ぐ（デザイン次第で調整） */
    #back-to-top:focus {
        outline: none;
    }


/***********************************************************************************************************************************************************************************/
/*以下、全ページに共通するスタイル*/
/***********************************************************************************************************************************************************************************/

/* ===== ページタイトルの帯のスタイル ===== */
.page-title-band {
    width: 100%;
    aspect-ratio: 16 / 9; /* または固定height/min-heightでもOK */
    background-image: url(../img/common/page-title-band.jpg);
    background-size: contain; /* ← 縦横ともに枠いっぱい（比率無視で引き延ばし） */
    background-position: center center;
    background-repeat: no-repeat;
    /* Bootstrapの左右余白を消したい場合の保険 */
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 900;
}

@media (min-width: 992px) {
    .page-title-band {
        aspect-ratio: 16 / 6; /* より横長にしたい例（任意） */
        min-height: 420px; /* 見出しの読みやすさを担保する下限 */
    }
}

@media (max-width: 767.98px) {
    .page-title-band {
        background-image: url(../img/common/page-title-band-small.jpg);
    }
}


.page-title {
    font-weight: 600;
    color: #000;
}

/* ================== 全ページに共通するスタイル (タブレット・ＰＣ版) =================== */

#main-content {
    padding-top: 105px; /*ページ上部に内部余白を作成。ヘッダーに隠れないようにする*/
}


.c-font-size {
    font-size: 17.5px ;
}

.section-divider {
    width: 60%;
    margin: 100px auto 100px; 
}

.space-maker {
    height: 50px;
}

/* ================== 全ページに共通するスタイル (スマホ版) =================== */

@media (max-width: 767.98px) {

    #main-content {
        padding-top: 86px; /*ページ上部に内部余白を作成。ヘッダーに隠れないようにする*/
    }

    .c-font-size {
        font-size: 15px ;
    }

    .section-divider {
        width: 70%;
        margin: 60px auto 60px; 
    }

    .space-maker {
        height: 20px;
    }

}

/***********************************************************************************************************************************************************************************/
/*以下、トップページのスタイル*/
/***********************************************************************************************************************************************************************************/

/* ===== トップページのヒーローのスタイル ===== */

/* ヒーロー本体 */
.toppage-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* 背景は下地色（フェードの切れ目対策） */
    background-color: #000;
    cursor: pointer; /* クリックで停止/再開できることを示す */
}

/* 2レイヤーの背景用（JSで生成） */
.toppage-hero__layer {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity var(--fade-duration, 700ms) ease-in-out;
    will-change: opacity;
}

    /* 表示中レイヤーを最前面に（重なり順でチラつき防止） */
    .toppage-hero__layer.is-front {
        z-index: 0;
    }

/* テキストの読みやすさを上げる半透明オーバーレイ */
.toppage-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35));
    z-index: 2;
    pointer-events: none;
}

/* 中央のテキスト */
.toppage-hero__inner {
    position: relative;
    z-index: 3;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 縦中央 */
    align-items: center; /* 横中央 */
    text-align: center;
    padding-inline: 16px;
}

    .toppage-hero__inner h1 {
        font-size: clamp(24px, 4.5vw, 42px);
        line-height: 1.2;
        margin: 0 0 .4em;
        font-weight: 700;
    }

    .toppage-hero__inner p {
        font-size: clamp(14px, 2.2vw, 18px);
        margin: 0;
        opacity: .95;
    }

/* 動きを減らすユーザー設定への配慮：自動再生を止める */
@media (prefers-reduced-motion: reduce) {
    .toppage-hero__layer {
        transition: none;
    }
}



/* 「詳しく見る」ボタンのスタイル (タブレット・ＰＣ版) */
.introduce-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 使っていなくても将来アイコン追加に備えて */
    font-weight: 700;
    text-decoration: none;
    color: #000000; /* 通常時の文字色 */
    background: #ffffff; /* 通常時の背景色 */
    padding: 12px 40px; /* 上下・左右の余白 */
    border-radius: 9999px; /* ピル型 */
    border: 1px solid #008649; /* 枠線 */
    outline: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

    .introduce-link:hover {
        transform: scale(1.07);
        background: #008649; /* 反転（塗りつぶし） */
        color: #ffffff; /* 反転時の文字色 */
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    .introduce-link:active {
        transform: scale(1.03) translateY(1px);
    }

    .introduce-link:focus-visible {
        outline: 2px solid #5a472b; /* #776342 をやや濃くミックスした感じ */
        outline-offset: 3px;
    }

    /* 右矢印（SVG）のサイズ＆ホバー時のわずかな移動 */
    .introduce-link .il-icon {
        width: 1.1em;
        height: 1.1em;
        flex: 0 0 auto; /* つぶれ防止 */
        transition: transform 180ms ease;
    }

    /* 矢印だけ微妙に右へ（押したくなる小さな動き） */
    .introduce-link:hover .il-icon {
        transform: translateX(2px);
    }

/* ================== 画像のスタイル (タブレット・ＰＣ版) =================== */
.introduce-company-inf {
    width: 95%;
    height: auto;
    display: block;
}



/* ================== お知らせ全体のスタイル =================== */
.news {
    background-color: #FFFDE7;
    margin-top: 12rem;
}

/* ================== お知らせの表のスタイル =================== */
.news-table {
    width: 95%;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: auto; /* デフォルトの自動計算（可読性重視） */
}

    /* 日付のスタイル */
    .news-table th {
        vertical-align: top;
        white-space: nowrap; /* 改行しない */
        width: 1%; /* 内容幅に合わせて最小化 */
        padding: .5rem .5rem .5rem 5px; /* 上 右 下 左 */
    }

    /* 中身のスタイル */
    .news-table td {
        vertical-align: top;
        padding: .5rem 8px; /* 値は統一して見た目を整える */
    }



/* ================== トップページのコンテンツ (スマホ版) =================== */

@media (max-width: 767.98px) {
    /* 画像のスタイル */
    .introduce-company-inf {
        margin: 0 auto; /* 中央寄せ */
    }

    .news {
        margin-top: 4rem;
    }

}


/* ================== 「詳しく見る」ボタンのアクセシビリティ配慮  (バグ対策) =================== */
@media (prefers-reduced-motion: reduce) {
    .introduce-link {
        transition: none !important;
    }

        .introduce-link:hover,
        .introduce-link:active {
            transform: none !important;
        }
}



/***********************************************************************************************************************************************************************************/
/* 以下、会社情報ページのスタイル*/
/***********************************************************************************************************************************************************************************/


/* ===== 会社概要の表に関するスタイル===== */

/* ハイフン付きの数字列がブラウザにより電話番号であると認識されるバグの対策 */
.nolink {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none; /* クリックできなくする */
    cursor: default;
}

a[href^="tel"] {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none !important;
    cursor: default;
}


/* ===== 会社概要の表の要素に関するスタイル(タブレット・ＰＣ版) ===== */
.company-outline {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.company-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #717375;
    border-radius: 12px;
    overflow: hidden;
}

    .company-table th,
    .company-table td {
        padding: 14px 16px;
        vertical-align: top;
        border-bottom: 1px solid #dfe4ea;
    }

    .company-table th {
        width: 24%;
        background: #E6F8E8;
        font-weight: 600;
        text-align: left;
        color: #0e2a1f;
    }

    .company-table tr:last-child th,
    .company-table tr:last-child td {
        border-bottom: none;
    }
    /* 長文セルの整形 */
    .company-table td {
        word-break: break-word;
    }

/* ===== スマホ版 会社概要のスタイル ===== */
@media (max-width: 767.98px) {
    .company-table {
        border: 0;
    }

        .company-table tbody {
            display: grid;
            gap: .75rem;
        }

        .company-table tr {
            display: block; /* 各行をカード風に */
            border: 1px solid #dfe4ea;
            border-radius: .75rem;
            padding: .5rem .75rem;
            background: #fff;
        }

        .company-table th,
        .company-table td {
            display: block; /* ラベル→値の縦並び */
            border: 0 !important; /* 罫線を消す */
            padding: .25rem 0;
        }

        .company-table th {
            display: inline-block;
            background: #E6F8E8;
            color: #0e2a1f;
            font-weight: 700;
            border-radius: .5rem;
            padding: .25rem .5rem;
            margin-bottom: .25rem;
            white-space: nowrap; /* 折り返しをしない */
            width: 35%; /* thの領域の広さをカードの30%に指定する */
            text-align: left; /* 文字を左揃えに */
        }
}


/* ===== バグ対策（chromeにてメールアドレスと住所がリンクになってしまう） ===== */


/* 会社概要テーブル内のリンクの下線を消す＆色を継承 */
.company-table td a {
    text-decoration: none !important;
    color: inherit; /* 必要なら継承 */
}

    /* メール・電話だけをピンポイントで消す（より限定するならこっち） */
    .company-table td a[href^="mailto:"],
    .company-table td a[href^="tel:"] {
        text-decoration: none !important;
        color: inherit;
    }

    /* 自動で住所がリンク化される環境（iOS等）に備え、リンク全般を消すなら */
    .company-table td a:link,
    .company-table td a:visited {
        text-decoration: none !important;
    }

/* 会社概要の「住所」「メール」をクリック不可にする */
.company-table td a {
    pointer-events: none;
    cursor: default;
}

/******************************************************************************/
/* ===== 主要取引先に関するスタイル ===== */
.deal {
    max-width: 1400px;
    width: 95%;
    background-color: #D9E0F7;
    border-radius: 36px;
}

.deal-card {
    padding: 0.5rem;
    background-color: #FeFeF8;
    border-radius: 12px; 
}

.deal-title {
    font-weight: 500;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    padding-bottom: 0.3rem;
}

.deal-year {
    font-weight: 400;
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    white-space: nowrap;
    padding-bottom: 0.5rem;
}

.deal-body {
    font-size: 1.1rem;
}

/******************************************************************************/
/* ===== 沿革に関するスタイル(タブレット・ＰＣ版) ===== */
.comp-history {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* テーブルは情報の整列に徹する（装飾は控えめ） */
.timeline {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    /* 行区切り */
    .timeline tr {
        border-bottom: 1px solid #e6eaf0;
        vertical-align: top; /* 上揃え */
    }

    /* 年次（右揃え／適度な余白） */
    .timeline th {
        width: 28%;
        padding: 14px 12px;
        text-align: right;
        vertical-align: top; /* 上揃え */
        font-weight: 600;
        color: #008649;
        white-space: nowrap; /* 年次の折返しを防ぐ */
        font-size: 18px;
    }

    /* 本文（読みやすい行間・余白） */
    .timeline td {
        padding: 12px 12px;
        font-size: 18px;
    }

/* 本文の容器：微細な余白管理のみ（カード化はしない） */
.timeline-body {
    margin: 0.1rem 0 0.2rem;
}

    /* 文面：行間広めで読みやすく */
    .timeline-body p {
        margin: 0;
        line-height: 1.9;
    }

/* ===== 沿革に関するスタイル(スマホ版) ===== */
@media (max-width: 767.98px) {
    .timeline tr {
        display: block;
        padding: 0; /* 行自体の余白はオフ */
        margin: 0; /* 行間もテーブルの線に任せる */
    }

    /* 年次・本文を縦積み＆左寄せ */
    .timeline th,
    .timeline td {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 15px;
    }

    .timeline td {
        padding: 8px 10px 8px;
    }

    .timeline th {
        font-size: 0.99rem;
        white-space: normal; /* スマホでは折返し許可 */
        padding: 10px 10px 2px; /* 行内の適度な余白 */
    }

    /* 本文の文字サイズ */
    .timeline-body p {
        font-size: 0.96rem;
    }
}







/******************************************************************************/
/* ===== 労働者派遣法に基づく情報公開に関するスタイル(タブレット・ＰＣ版) ===== */
.dispatch-low {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding: 0 clamp(12px, 2vw, 24px);
}

.dispatch-low-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

    .dispatch-low-table th,
    .dispatch-low-table td {
        padding: 14px 16px;
        vertical-align: top;
        border-bottom: 1px solid #dfe4ea;
    }

    .dispatch-low-table th {
        width: 50%;
        font-weight: 600;
        text-align: right;
        color: #0e2a1f;
    }

    .dispatch-low-table tr:last-child th,
    .dispatch-low-table tr:last-child td {
        border-bottom: none;
    }
    /* 長文セルの整形 */
    .dispatch-low-table td {
        word-break: break-word;
    }

/* ===== 労働者派遣法に基づく情報公開に関するスタイル(スマホ版) ===== */
@media (max-width: 767.98px) {
    .dispatch-low-table {
        border: 0;
    }

        .dispatch-low-table tbody {
            display: grid;
            gap: .75rem;
        }

        .dispatch-low-table tr {
            display: block; /* 各行をカード風に */
            border: 1px solid #dfe4ea;
            padding: .5rem .75rem;
            text-align: center; /* 行全体のテキストを中央寄せ */
            background: #f5f5f5;
        }

        .dispatch-low-table th,
        .dispatch-low-table td {
            display: block; /* ラベル→値の縦並び */
            border: 0 !important;
            padding: .25rem 0;
            text-align: center; /* 各セルのテキストを中央寄せ */
            margin: 0 auto; /* ブロック要素を中央に */
        }

        .dispatch-low-table th {
            display: inline-block; /* インラインブロックで中央寄せしやすく */
            color: #0e2a1f;
            font-weight: 700;
            padding: .25rem .5rem;
            margin-bottom: .25rem;
        }
}


/******************************************************************************/
/* ===== メッセージに関するスタイル(タブレット・ＰＣ版) ===== */

/* =====メッセージ全体に関するスタイル ===== */
.message {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* =====代表の写真に関するスタイル(タブレット・ＰＣ版) ===== */
.president-photo {
    width: 90%;
    height: auto;
}
/* =====代表の写真に関するスタイル(スマホ版) ===== */
@media (max-width: 767.98px) {
    .president-photo {
        width: 70%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

/* =====代表あいさつの本文に関するスタイル(タブレット・ＰＣ版) ===== */
.greet-body {
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* =====代表あいさつの本文に関するスタイル(スマホ版) ===== */
@media (max-width: 767.98px) {
    .greet-body {
        font-size: 16px;
        line-height: 1.7;
    }
}

/* =====代表の名前に関するスタイル(タブレット・ＰＣ版) ===== */

.president-name { /* 今後代表名のみの変更が考えられるため作成した */
}

/* =====代表の名前に関するスタイル(スマホ版) ===== */
@media (max-width: 767.98px) {
    .president-name {
    }
}

/* =====メッセージのタイトルに関するスタイル(タブレット・ＰＣ版) ===== */
.message-title {
    white-space: nowrap;
    display: inline-block;
    font-weight: 700;
    line-height: 1.25;
    font-size: clamp(20px, 2.5vw, 32px);
    text-decoration-line: underline;
    text-decoration-color: #FFE182;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

@media (max-width: 767.98px) {
    .message-title {
        margin-bottom: 12px;
    }
}

.c-message {
    text-shadow: 15px -10px 0 #dfe4ea;
    color: #008649;
    font-size: 60px;
    letter-spacing: 0.9px;
    margin-bottom: 20px;
}

.message-divider {
    width: 60%;
    margin: 70px auto;
}

@media (max-width: 767.98px) {
    .message-divider {
        width: 50%;
        margin: 30px auto;
    }
}

.message-keyword {
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
}

@media (max-width: 767.98px) {
    .message-keyword {
        font-size: 25px;
    }
}

/* キーワードの見せ方（任意） */
.message-keyword {
    font-weight: 700;
    color: #0e2a1f;
}

.key-phrase {
    display: block;
    text-align: center;
}


/***********************************************************************************************************************************************************************************/
/* 以下、事業内容ページのスタイル*/
/***********************************************************************************************************************************************************************************/

/* 4大システムタイトルのスタイル */
.system-title {
    text-decoration-line: underline;
    text-decoration-color: #FFE182;
    text-decoration-thickness: 4px;
    text-underline-offset: 0.5rem;
}

/* システムカードのスタイル */
.system-card {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff; /* ← これだけでOK */
    border-radius: 6px; /* ← 角丸が必要なら（任意） */
    padding: 1.2rem; /* ← 枠と文字が近いなら余白を追加（任意） */
}


/* =========================== 以下、ヒーローに関するスタイル ============================== */

/* ヒーロー全体に関して */
.b-hero-stage {
    position: relative;
}

/* ヒーローの背景に関して */
.b-hero-bg {
    position: sticky;
    isolation: isolate; /* 念のため：z-indexの積層を局所化 */
    top: 0;
    height: 100dvh;
    min-height: 100vh; /* フォールバック */
    overflow: hidden;
    background: #000;
    z-index: 0;
    opacity: 1;
}



    /* Hero 背景コンテナの上に、常時オーバーレイを1枚かぶせる */
    /* 2枚の背景画像（.bgA / .bgB）の上に置く半透明オーバーレイ */
    .b-hero-bg::after {
        content: "";
        position: absolute;
        inset: 0; /* 上に載るレイヤーなので gradient を指定（先に書いた方が前面です） */
        background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)); /* 背景画像に暗いベールを被せることで文字を見やすくする */
        pointer-events: none; /* ユーザー操作は素通り */
        z-index: 1; /* 背景画像(.bgA/.bgB)より前、コピー(.b-hero-copy-wrap)よりは後ろ */
    }


/* ヒーローの背景の画像に関して */
.b-hero-bg-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0; /* デフォルトは非表示 */
    transition: opacity .6s ease; /* ← フェード時間を調整 */
}

    /* 表示中レイヤー */
    .b-hero-bg-view.is-active {
        opacity: 1;
    }

/* 説明文のスタイル */
.b-hero-copy-wrap {
    position: relative;
    z-index: 1; /* ← 背景より前面 */
    margin-top: -100dvh; /* ← 背景(100dvh)のぶん上へ重ねる */
    padding-top: clamp(48px, 12vh, 160px); /* ← 上余白はお好みで調整 */
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
    line-height: 2;
}


/* 「4つに見せる」ための余白・区切り */
.b-block-maker {
    padding: 6rem 0; /* ブロック内の余白 */
}

@media (max-width: 576px) {
    .b-hero-copy-wrap {
        padding: 4rem 0;
    }

    .b-block-maker {
        padding: 3rem 0;
    }
}


/* ユーザーの低減設定に配慮（任意） */
@media (prefers-reduced-motion: reduce) {
    .b-hero-bg-view {
        transition: none;
    }
}

/* 初期状態：少し拡大＆ややブラー（入ってくる側の開始地点） */
.b-hero-bg-view {
    transform: scale(1.06);
    filter: blur(8px) brightness(0.95);
    transition: opacity .9s ease, transform 2.6s cubic-bezier(.22,.61,.36,1), /* ゆっくりズームアウト */
    filter 1.2s ease; /* ブラーはやや早めに取る */
}

    /* 表示中（最終的に等倍＆シャープ） */
    .b-hero-bg-view.is-active {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }

    /* フェードアウト側は少し縮小しながら退く → 視差っぽい遠近感 */
    .b-hero-bg-view.is-leaving {
        opacity: 0;
        transform: scale(0.985);
        filter: blur(6px) brightness(0.9);
    }


/* 互換フォールバック（古い端末向け  任意） */
@supports not (height: 100dvh) {
    .b-hero-copy-wrap {
        margin-top: -100vh;
    }
}
/* スマホではズームとブラーを低減（またはオフ） */
@media (max-width: 576px) {
    .b-hero-bg-view {
        transform: none; /* または scale(1.01) 程度に弱める */
        filter: none; /* または blur(2px) brightness(0.98) 程度 */
    }
}

/* 文字を見やすくするためのスタイル */
.b-hero-copy-wrap,
.system-title,
.hero-body,
.system-card {
    text-shadow: 0 2px 4px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.6); /* 白文字に周囲に黒色の影をつけるための記述 */
}

/***********************************************************************************************************************************************************************************/
/* 採用トップページのスタイル */
/***********************************************************************************************************************************************************************************/

/* =========================== 以下、数字で見るのスタイル ============================== */

/* 数字で見るの全体のスタイル */
.in-numbers {
    background-color: #F2F8F4;
}


/* =========================== すべてのカードスタイル共通 ============================== */

/* 強調する数字と単位のスタイル */
.in-number-card-body {
    height: 65%;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: baseline; /* ← 数字と単位の高さを合わせる */
    gap: 0.25em; /* 数字と単位の間隔（お好みで） */
    margin: 0; /* 念のため余白リセット（任意） */
}

/* 強調する数字以外の文字（単位）のスタイル */
.in-number-card-unit {
    line-height: 1; /* 行間のズレ防止 */
    display: inline-block; /* baselineの効きを安定させる（念のため） */
}

@media (max-width: 767.98px) {
    .in-number-card-unit {
        font-size: 17px;
    }
}


/* =========================== カードスタイル1 ============================== */
/* カード自体の高さ */
.in-number-card-1 {
    height: clamp(160px, 20vw, 200px); /* 200px〜150pxで推移させる */
}

/* アイコンの大きさのスタイル */
.in-number-card-1-icon {
    width: 60%;
    height: 100%;
}

/* カードの左側の上部（タイトルが入る領域）のスタイル */
.in-number-card-1-title {
    height: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-top: 0.3rem;
    font-size: 20px;
    white-space: nowrap;
}

/* カードの左側の領域のスタイル */
.in-number-card-1-left-box {
    width: 50%;
    text-align: center;
    padding-left: 3rem; /* カードの左側の中央からわずかに右に寄らせる */
}

/* 強調する数字と単位のスタイル */
.in-number-card-1-body {
    height: 65%;
    padding-top: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: baseline; /* ← 数字と単位の高さを合わせる */
    gap: 0.25em; /* 数字と単位の間隔（お好みで） */
    margin: 0; /* 念のため余白リセット（任意） */
}


/* カードの右側（アイコンを入れる領域）のスタイル */
.in-number-card-1-right-box {
    width: 50%;
}


/* 強調する数字のスタイル */
.in-number-card-1-number {
    font-size: 55px;
    color: #008649;
    display: inline-block; /* baselineの効きを安定させる（念のため） */
    line-height: 1; /* 行間による上下のズレ防止 */
    letter-spacing: -0.02em; /* 文字間を少し狭める */
}


@media (max-width: 767.98px) {

    /* 強調する数字のスタイル */
    .in-number-card-1-number {
        font-size: 37px;
    }

    .in-number-card-1-title {
        font-size: 17px;
    }

    /* カードの左側の領域のスタイル */
    .in-number-card-1-left-box {
        width: 58%;
        padding-left: 0.1rem; 
    }

    /* カードの右側（アイコンを入れる領域）のスタイル */
    .in-number-card-1-right-box {
        width: 42%;
    }

    /* アイコンの大きさのスタイル */
    .in-number-card-1-icon {
        width: 85%;
        max-width: 90px;
        height: 100%;
    }

}


/* =========================== カードスタイル2 ============================== */

.in-number-card-2 {
    height: clamp(200px, 20vw, 350px);
}

/* カードの左側の上部（タイトルが入る領域）のスタイル */
.in-number-card-2-title-box {
    height: 20%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
}

/* カードの左側の上部（タイトルが入る領域）のスタイル */
.in-number-card-2-title {
    height: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-size: 20px;
    white-space: nowrap;
}


/* カードの右側（アイコンを入れる領域）のスタイル */
.in-number-card-2-icon-box {
    width: 42%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* ← 追加：親の高さに合わせる */
}


/* 強調する数字のスタイル */
.in-number-card-2-number {
    font-size: 50px;
    color: #008649;
    letter-spacing: -0.02em; /* 文字間を少し狭める */
}


.except-title-box-2 {
    height: 80%;
}

/* カードの左側の上部（タイトルが入る領域）のスタイル */
.in-number-card-2-subtitle {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

/* 左カラム（タイトル＋数値）を上下中央寄せ */
.in-number-card-2-subbox {
    width: 58%;
    display: flex; /* ← 追加 */
    flex-direction: column; /* タイトル→数値を縦積み */
    justify-content: center; /* 縦方向中央に */
}

.in-number-card-2-sub-subbox {
    align-items: center; /* 上下中央に */
    justify-content: space-between; /* 左右に配置 */
    height: 100%; /* 親の高さいっぱいにして、中央寄せが効くように */
}

/* アイコン画像は縦横比を保って中央に */
.in-number-icon-2 {
    max-width: 90%; /* 親幅の90%を上限に */
    max-height: 90%; /* 親高の90%を上限に（はみ出し防止） */
    object-fit: contain; /* 縦横比を保って収める */
}


@media (max-width: 767.98px) {
    .in-number-card-2-number {
        font-size: 35px;
    }

    .in-number-card-2-title {
        font-size: 17px;
    }


    /* カードの左側の上部（タイトルが入る領域）のスタイル */
    .in-number-card-2-subtitle {
        font-size: 16px;
    }
}


/* カード内コンテンツを区切る線の本体 */
.in-number-content-divider {
    position: relative; /* 疑似要素の基準にする */
}

    /* 部分縦線：中央に40%表示 */
    .in-number-content-divider::after {
        content: "";
        position: absolute;
        top: 50%; /* 要素の中央まで移動 */
        right: 0; /* 右端に配置（左端なら left:0） */
        transform: translateY(-50%); /* 自身の高さ分の半分を打ち消して中央に */
        height: 50%; /* 表示したい割合 */
        border-right: 1px solid rgba(0, 0, 0, 0.15); /* 細く・薄く */
    }




/* =========================== カードスタイル3 ============================== */

.in-number-card-3 {
    height: clamp(200px, 20vw, 350px);
}

.in-number-card-3-content {
    width: 25%;
}

/* アイコンを入れる領域のスタイル */
.in-number-card-3-icon-box {
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%; /* 親の高さに合わせる */
    margin: 0 auto;
}

/* アイコンのスタイル */
.in-number-card-3-icon {
    max-width: 85%; /* 親幅の90%を上限に */
    max-height: 85%; /* 親高の95%を上限に（はみ出し防止） */
    object-fit: contain; /* 縦横比を保って収める */
}


/* 強調する数字のスタイル */
.in-number-card-3-number {
    font-size: 40px;
    color: #008649;
    letter-spacing: -0.02em; /* 文字間を少し狭める */
}

/* カードの左側の下部（数字が入る領域）のスタイル */
.in-number-card-3-body {
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: baseline;
    gap: 0.1em; /* 数字と単位の間隔（お好みで） */
}

/* タイトルが入る領域のスタイル */
.in-number-card-3-title {
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    white-space: nowrap;
}

/* カードからコンテンツがはみ出るのを防いでいる */
.box-style-3 {
    height: 95%;
}

/* 強調する数字以外の文字（単位）のスタイル */
.in-number-card-3-unit {
    line-height: 1; /* 行間のズレ防止 */
    display: inline-block; /* baselineの効きを安定させる（念のため） */
}


@media (max-width: 767.98px) {

    /* 強調する数字のスタイル */
    .in-number-card-3-number {
        font-size: 30px;
    }

    /* タイトルのスタイル */
    .in-number-card-3-title {
        font-size: 12px;
    }

    /* アイコンのスタイル */
    .in-number-card-3-icon {
        max-width: 85%; /* 親幅の90%を上限に */
        max-height: 85%; /* 親高の95%を上限に（はみ出し防止） */
        object-fit: contain; /* 縦横比を保って収める */
    }

    .in-number-card-3-unit {
        font-size: 14px;
    }

}



/* =========================== カードスタイル4 ============================== */

.in-number-card-4 {
    height: clamp(450px, 20vw, 600px);
}


/* タイトルが入る領域のスタイル */
.in-number-card-4-title {
    height: 15%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* アイコンを入れる領域のスタイル */
.in-number-card-4-icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35%; /* 親の高さに合わせる */
}

.in-number-icon-4 {
    max-width: 95%; /* 親幅の90%を上限に */
    max-height: 95%; /* 親高の90%を上限に（はみ出し防止） */
    object-fit: contain; /* 縦横比を保って収める */
}

.except-title-box-4 {
    height: 50%;
}

.in-number-card-4-subbox {
    height: 33%;
}


/* =========================== カードスタイル6 ============================== */

.in-number-card-6 {
    height: clamp(360px, 20vw, 440px); /* PC用の上限＆希望値 */
    padding-left: 20%;
    padding-right: 20%;
}

/* タイトルの文字 */
.in-number-card-6-title {
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
    writing-mode: horizontal-tb; /* 念のため横書き固定 */
    text-orientation: mixed;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere; /* 長い語でも自然に折返し */
}

/* 見えない 800px の箱（中央寄せ） */
.inner-800 {
    max-width: 800px; /* 上限 */
    width: 100%; /* 画面が狭ければ縮む */
    padding-left: 12px; /* rowの負マージン対策（必要に応じて調整） */
    padding-right: 12px;
    box-sizing: border-box;
}

/* 左カラム内：縦の 20% / 80% 分割 */
.left-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* 内部での高さ計算の安定化 */
}

.left-title {
    flex: 0 0 20%;
    display: flex;
    align-items: center; /* 縦中央 */
    justify-content: center; /* 横中央 */
    min-height: 0;
}

.left-icon {
    flex: 1; /* 残り＝80% */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.in-number-card-6-icon {
    width: 70%;
    height: 80%;
    object-fit: contain;
}

.in-number-card-6-number {
    font-size: 47px;
    color: #008649;
    line-height: 1;
    margin-left: 0.2rem;
    margin-right: 0.1rem;
    letter-spacing: -0.02em; /* 文字間を少し狭める */
}


/* ===== PC（md以上）：高さ伝播＋等分を有効化 ===== */
@media (min-width: 768px) {

    /* 等分は % ではなく flex:1 が安定 */
    .in-number-card-6-subbox {
        flex: 1 0 0;
        display: flex;
        align-items: center; /* 任意 */
    }
}

/* ===== モバイル（sm以下）：高さ固定と等分を解除 ===== */
@media (max-width: 767.98px) {
    .in-number-card-6 {
        height: auto; /* 親は自動高さ */
        padding-left: 0; /* 余白広すぎなら削る */
        padding-right: 0;
    }

    .in-number-card-6-title {
        font-size: 18px;
    }

    /* モバイルは等分なし（縦に流す） */
    .in-number-card-6-subbox {
        flex: unset; /* ← これ重要 */
        height: auto; /* ← 高さ固定の削除（%指定は全撤廃） */
    }

    .in-number-card-6-number {
        font-size: 30px;
    }
}


/* =========================== カードスタイル7 ============================== */

.in-number-card-7-iconbox {
    align-items: center;
    justify-content: center;
}

.in-number-card-7-icon {
    width: 40%;
    object-fit: contain;
}

.in-number-card-7-number {
    font-size: 44px;
    color: #008649;
    line-height: 1;
    margin-left: 0.4rem;
    margin-right: 0.2rem;
    letter-spacing: -0.02em; /* 文字間を少し狭める */
}


@media (max-width: 767.98px) {
    .in-number-card-7-number {
        font-size: 30px;
    }

    /* モバイル（sm以下）：高さ固定と等分を解除 */
    .in-number-card-7-numberbox {
        flex: unset; /* ← これ重要 */
        height: auto; /* ← 高さ固定の削除（%指定は全撤廃） */
    }
}

/* アイコンのサイズ調整 */
@media (min-width: 767.99px) and (max-width: 940px) {
    .in-number-card-7-icon {
        width: 70%;
    }
}

/* アイコンのサイズ調整 */
@media (min-width: 941px) and (max-width: 1200px) {
    .in-number-card-7-icon {
        width: 60%;
    }
}


/* ===== PC（md以上）：高さ伝播＋等分を有効化 ===== */
@media (min-width: 768px) {

    /* 等分は % ではなく flex:1 が安定 */
    .in-number-card-7-numberbox {
        flex: 1 0 0;
        display: flex;
        align-items: center; /* 任意 */
    }
}



/* ========================= 福利厚生に関するスタイル ============================ */

/*福利厚生の領域に関するスタイル */
.benefits {
    max-width: 1300px;
    margin: 0 auto;
}

/*福利厚生の紹介文のスタイル */
.benefits-introduce {
    max-width: 900px;
    line-height: 1.7;
}

/*アイコンのスタイル */
.benefits-icon {
    width: 25%;
    height: auto;
}

/*福利厚生のカード1のスタイル */
.benefits-card1 {
    border-radius: 12px;

    /* フォールバック（古い環境向け） */
    background-color: #FFD8D0;

    /* 2色グラデーション */
    background-image: linear-gradient(135deg, #FFD2C7 0%, #FFF4F1 50%, #FFD2C7 100%);
}

/*福利厚生のカード2のスタイル */
.benefits-card2 {
    border-radius: 12px;

    /* フォールバック（グラデ非対応環境用） */
    background-color: #E0E8FF;

    /* 2色グラデーション */
    background-image: linear-gradient( 135deg, #C7D7FF 0%, #F5F8FF 50%, #C7D7FF 100% );
}

/*福利厚生のカード3のスタイル */
.benefits-card3 {
    border-radius: 12px;

    /* フォールバック（グラデ非対応ブラウザ用） */
    background-color: #C8E2C8;

    /* 2色グラデーション */
    background-image: linear-gradient( 135deg, #C8E2C8 0%, #F3FBF3 50%, #C8E2C8 100% );
}

/*福利厚生のカード4のスタイル */
.benefits-card4 {
    border-radius: 12px;

    /* フォールバック（グラデ非対応用） */
    background-color: #eedce2;

    /* 2色グラデーション */
    background-image: linear-gradient( 135deg, #eedce2 0%, #fff7f9 50%, #eedce2 100% );
}

/*福利厚生のカード5のスタイル */
.benefits-card5 {
    border-radius: 12px;

    /* フォールバック（グラデ非対応ブラウザ用） */
    background-color: #DDD2FF;
    /* 2色グラデーション */
    background-image: linear-gradient( 135deg, #DDD2FF 0%, #FAF6FF 50%, #DDD2FF 100% );
}


/* ===================== FAQに関するスタイル ======================== */
/* FAQの領域に関するスタイル */
.FAQ {
    max-width: 1000px;
    margin: 0 auto;
}
/* アコーディオン全体のスタイル */
#accordionFlushExample .accordion-button {
    display: flex; /* アコーディオンの質問行を flex に */
    align-items: baseline; /* 文章の高さと揃える */
    gap: 1rem; /* Q. と文章の間の余白 */
}

/* =====FAQに関するスタイル(タブレット・ＰＣ版) ===== */
/* 「Q.」のスタイル */
.question {
    align-items: baseline;
    flex-shrink: 0;
    font-size: 40px;
    font-weight: 700;
    color: #008649;
}


/* 「A.」のスタイル */
.answer {
    align-items: baseline;
    flex-shrink: 0;
    font-size: 40px;
    font-weight: 700;
    margin-right: 0.8rem;
    color: #FFE182;
}


/* =====FAQに関するスタイル(スマホ版) ===== */

@media (max-width: 767.98px) {
    /* 「Q.」のスタイル */
    .question {
        font-size: xx-large;
    }


    /* 「A.」のスタイル */
    .answer {
        font-size: xx-large;
    }
}


/* =====　（バグ対策） ===== */

/* Bootstrap標準のアコーディオンの効果を消す */
#accordionFlushExample .accordion-button:focus {
    outline: none; /* フォーカス時の青いアウトラインを消す */
    box-shadow: none; /* フォーカス時の影を消す */
    border-color: transparent; /* フォーカス時のボーダー色を消す */
}

/* 開いた状態の背景色・影を消す（青背景回避） */
#accordionFlushExample .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit; /* 必要なら文字色も元のまま */
    box-shadow: none; /* inset の影を消す */
    border-color: transparent; /* flush でもフォーカス境界を抑制 */
}

/* 回答行：A. と本文をフレックスで横並び＆上揃え */
#accordionFlushExample .accordion-collapse .accordion-body {
    display: flex;
    align-items: baseline;
    gap: 0.5rem; /* A. と本文の間隔 */
    white-space: normal; /* 折返し可能に */
    word-break: break-word; /* 長い単語やURL対策（必要なら） */
}


/* =============== 下の階層に遷移するボタンのスタイル ================= */

/* コンテンツ全体のスタイル */
.recruit-link {
    /* フォールバック（グラデやパターン非対応環境用） */
    background-color: #FFFFF0;
    /* 実際のパターン（斜め45°の繰り返しストライプ） */
    background: repeating-linear-gradient( 45deg, #FFFFF0, #FFFFF0 12px, /* 明側：幅12px */
    #FFF9DD 12px, /* 暗側（少しだけ濃いアイボリー）ここから */
    #FFF9DD 24px /* 暗側：幅12px（合計ストライプ周期24px） */
    );
    border-radius: 24px;
    line-height: 1.6;
}

/* カードのスタイル */
.recruit-link .card{
    background-color: #fbfbfb;
}

/* 下の階層へのリンクボタンの画像のスタイル */
.recruit-linkimg {
    width: 80%;
}

/* 下の階層へのリンクボタンの画像のスタイル */
.recruit-linkimg-sm {
    width: 87%; /* 写真館に使用する画像が小さいため、他より大きく表示する */
}


/* 下の階層へのリンクボタンのスタイル */
.recruit-linkbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000; /* 通常時の文字色 */
    background: #ffffff; /* 通常時の背景色 */
    padding: 30px; /* 上下・左右の余白 */
    border-radius: 50%;
    border: 1px solid #008649; /* 枠線 */
    outline: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

    .recruit-linkbtn:hover {
        transform: scale(1.07);
        background: #008649; /* 反転（塗りつぶし） */
        color: #ffffff; /* 反転時の文字色 */
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    .recruit-linkbtn:focus-visible {
        outline: 2px solid #5a472b; /* #776342 をやや濃くミックスした感じ */
        outline-offset: 3px;
    }

    /* 右矢印（SVG）のサイズ＆ホバー時のわずかな移動 */
    .recruit-linkbtn .il-icon {
        width: 1.1em;
        height: 1.1em;
        flex: 0 0 auto; /* つぶれ防止 */
    }



/* =================== 友だち追加QRコードのスタイル ========================= */

    .lineQR-img{
        width: 15%;
    }
@media (max-width: 767.98px) {
    .lineQR-img {
        width: 40%;
    }
}

    /***********************************************************************************************************************************************************************************/
    /* 以下、募集要項ページのスタイル*/
    /***********************************************************************************************************************************************************************************/

/* =====採用フローのスタイル(PC・タブレット版) ===== */

/* 採用フローのスタイル */
.recruit-flow {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* 大項目のアイコンのスタイル */
.flow-icons-big {
    width: 70%;
    height: auto;
}

/* 小項目のアイコンのスタイル */
.flow-icons {
    width: 80%;
    height: auto;
}

/* アイコン（矢印）のスタイル */
.flow-arrows {
    width: 50%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* フロー中の文章のスタイル */
.flow-body {
    white-space: nowrap; /* 折り返さない */
}

.flow-body-big {
    white-space: nowrap; /* 折り返さない */
}

/* =====採用フローのスタイル(スマホ版) ===== */
@media (max-width: 767.98px) {

    /* 採用フローのスタイル */
    .recruit-flow {
        width: 90%;
    }

    /* 大項目のアイコンのスタイル */
    .flow-icons-big {
        width: 30%;
        height: auto;
    }

    /* 大項目のフロー中の文章のスタイル */
    .flow-body-big {
        white-space: nowrap; /* 折り返さない */
    }

    /* アイコンのスタイル */
    .flow-icons {
        width: 35%;
        height: auto;
    }

    /* アイコン（矢印）のスタイル */
    .flow-arrows {
        width: 10%;
        height: auto;
        margin-top: 6px;
        margin-bottom: 9px;
        transform: rotate(90deg)
    }
}


/* ===== 募集要項全体のスタイル ===== */

/* 募集要項の領域のスタイル */
.guideline {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== 募集要項の表のスタイル(PC・タブレット版) ===== */

/* 募集要項の表のスタイル */
.guideline-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

    .guideline-table th,
    .guideline-table td {
        padding: 14px 16px;
        vertical-align: top;
        border-bottom: 1px solid #dfe4ea;
        font-size: clamp(0.95rem, 1.8vw, 1rem);
    }

    .guideline-table th {
        width: 20%;
        font-weight: 600;
        text-align: center;
        color: #0e2a1f;
    }

    .guideline-table tr:last-child th,
    .guideline-table tr:last-child td {
        border-bottom: none;
    }

    .guideline-table td {
        word-break: break-word; /* 長文セルの整形 */
    }

/* ===== 募集要項の表のスタイル(スマホ版) ===== */
@media (max-width: 767.98px) {
    .guideline-table {
        border: 0;
    }

        .guideline-table tbody {
            display: grid;
            gap: .75rem;
        }

        .guideline-table tr {
            display: block; /* 各行をカード風に */
            border: 1px solid #dfe4ea;
            padding: .5rem .75rem;
            text-align: center; /* 行全体のテキストを中央寄せ */
            background: #f5f5f5;
        }

        .guideline-table th,
        .guideline-table td {
            display: block; /* ラベル→値の縦並び */
            border: 0 !important;
            padding: .25rem 0;
            text-align: center; /* 各セルのテキストを中央寄せ */
            margin: 0 auto; /* ブロック要素を中央に */
        }

        .guideline-table th {
            display: inline-block; /* インラインブロックで中央寄せしやすく */
            color: #0e2a1f;
            font-weight: 700;
            padding: .25rem .5rem;
            margin-bottom: .25rem;
            width: 30%;
            white-space: nowrap;
        }
}

/* ===== 新卒採用の応募ボタンのスタイル ===== */
.apply-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000; /* 通常時の文字色 */
    background: #ffffff; /* 通常時の背景色 */
    padding: 50px 60px; /* 上下・左右の余白 */
    border-radius: 5%;
    border: 1px solid #008649; /* 枠線 */
    outline: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    width: 100%;
    max-width: 300px;
    box-sizing: border-box; /* パディング込みで100%に収める */
}


    .apply-btn:hover {
        transform: scale(1.07);
        background: #008649; /* 反転（塗りつぶし） */
        color: #ffffff; /* 反転時の文字色 */
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    .apply-btn:focus-visible {
        outline: 2px solid #5a472b; /* #776342 をやや濃くミックスした感じ */
        outline-offset: 3px;
    }

    /* 右矢印（SVG）のサイズ＆ホバー時のわずかな移動 */
    .apply-btn .il-icon {
        width: 2em;
        height: 1.1em;
        flex: 0 0 auto; /* つぶれ防止 */
    }

@media (max-width: 767.98px) {
    .apply-btn {
        max-width: 230px;
    }
}

@media (max-width: 992px) {
    .apply-btn {
        max-width: 270px;
    }
}


/* ===== キャリア採用の応募ボタンのスタイル ===== */
.apply-btn-2 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000000; /* 通常時の文字色 */
    background: #ffffff; /* 通常時の背景色 */
    padding: 50px 80px; /* 上下・左右の余白 */
    border-radius: 5%;
    border: 1px solid #008649; /* 枠線 */
    outline: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

    .apply-btn-2:hover {
        transform: scale(1.07);
        background: #008649; /* 反転（塗りつぶし） */
        color: #ffffff; /* 反転時の文字色 */
        box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }

    .apply-btn-2:focus-visible {
        outline: 2px solid #5a472b; /* #776342 をやや濃くミックスした感じ */
        outline-offset: 3px;
    }

    /* 右矢印（SVG）のサイズ＆ホバー時のわずかな移動 */
    .apply-btn-2 .il-icon {
        width: 2em;
        height: 1.1em;
        flex: 0 0 auto; /* つぶれ防止 */
    }


    /***********************************************************************************************************************************************************************************/
    /* 以下、社員の声ページのスタイル*/
    /***********************************************************************************************************************************************************************************/

    /* ===================== 若手社員向けメッセージのスタイル ===================== */

    /* 全体のスタイル */
    .to-younger {
        /* フォールバック（単色） */
        background-color: #F2F8F4;
        /* 下に行くほどほんの少し濃く */
        background-image: linear-gradient( to bottom, #C8E2C8 0%, #DDEFE6 50%, #A6D7C0 100% );
        line-height: 1.7;
        letter-spacing: 0.05em; /* 例：文字間を広げる */
    }

    .to-younger-keyphrase {
        color: #008649;
        font-size: 24px;
        font-weight: 700;
        text-decoration: underline;
        text-decoration-color: #fff;
        text-underline-offset: 0.4rem;
        text-decoration-thickness: 7px;
        /* ここで“左右の空間”を作る（お好みで調整） */
        padding-inline: 0.5em;
    }

    @media (max-width: 767.98px) {

        .to-younger-keyphrase {
            text-decoration-thickness: 3.5px;
            text-underline-offset: 0.2rem;
            font-size: 20px;
        }
    }


    /* 使命のキーワードのスタイル */
    .mission-keyword {
        aspect-ratio: 1 / 1;
        width: min(80vw, 320px);
        max-width: 100%; /* 親の列からはみ出さない */
        border-radius: 50%;
        background-color: #fff;
        display: grid;
        place-items: center;
        text-align: center;
        padding: 17px;
        white-space: nowrap;
        overflow-wrap: anywhere; /* 長い語のはみ出し防止 */
        font-size: clamp(15px, 2.6vw, 18px);
        font-weight: 500;
        margin: 0; /* 余白の保険（上下左右） */
    }

    @media (min-width: 768px) {
        .mission-keyword {
            width: min(40vw, 340px);
        }
    }

    @media (min-width: 992px) {
        .mission-keyword {
            width: 100%; /* 列の横幅を埋める */
            max-width: none; /* 上限解除：列幅に合わせる */
        }
    }

    @media (min-width: 992px) {
        .row.g-0 > [class*="col-"] {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }


/* ===================== 社長からのメッセージのスタイル ===================== */

.from-president {
    max-width: 1000px;
    margin: 0 auto;
}


/* ===================== 「行動の基準」のスタイル ===================== */

/* 「行動の基準」のスタイル */
.behavior-guideline {
    max-width: 950px;
    margin: 0 auto;
}

/* 「行動の基準」の数字のスタイル */
.behavior-number {
    align-items: baseline;
    flex-shrink: 0;
    font-size: 40px;
    font-weight: 700;
    color: #008649;
    margin-right: 1.5rem;
    height: 100%;
}

@media (max-width: 767.98px) {
    /* 「行動の基準」の数字のスタイル */
    .key-behavior {
        font-size: xx-large;
    }
}

.behavior-item {
    margin-top: 1rem;
}

.behavior-line {
    display: flex;
    align-items: center; /* ← 縦位置を中央で揃える */
    gap: 1.5rem;
}

.behavior-number {
    flex: 0 0 auto;
    font-size: 40px;
    font-weight: 700;
    color: #008649;
    line-height: 1;
}

.behavior-title {
    margin: 0;
    line-height: 1.2;
}


/* =========== 「仕事で迷ったときは」のスタイル ========== */

.case-got-lost {
    max-width: 1000px;
    margin: 0 auto;
}

.case-got-lost-card {
    height: 100px;
    border: none;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
    max-width: 100%; /* 親の列からはみ出さない */
    background-color: #fff;
    place-items: center;
    text-align: center;
    padding: 17px;
    white-space: nowrap;
    overflow-wrap: anywhere; /* 長い語のはみ出し防止 */
    font-size: clamp(15px, 2.6vw, 18px);
    font-weight: 500;
    margin: 0; /* 余白の保険（上下左右） */
}


/* ===================== 社員インタビューに関するスタイル  ===================== */

/*社員インタビューの紹介文のスタイル */
.interview-introduce {
    width: 65%;
    line-height: 1.7;
    margin: 0 auto;
}

.interview-card {
    background-color: #FFF7E3;
}

@media (max-width: 767.98px) {
    .interview-introduce {
        width: 80%;
        line-height: 1.7;
        margin: 0 auto;
    }
}


/* ====================== 入社後3年以内の社員インタビューに関するスタイル  ===================== */

/* 入社後3年以内の社員インタビューの領域のスタイル */
.younger-interview {
    max-width: 1300px;
    margin: 0 auto;
}

/* =====入社後3年以内の社員インタビューに関するスタイル(タブレット・ＰＣ版) ===== */

/* 「x.」のスタイル （xは数字）*/
.younger-interview-number {
    align-items: baseline;
    flex-shrink: 0;
    font-size: 30px;
    font-weight: 700;
    margin-right: 1rem;
    color: #008649;
}

/* インタビューの質問文のスタイル */
.younger-interview-body {
    font-size: 17.5px;
}


@media (max-width: 767.98px) {

    /* 「x.」のスタイル （xは数字）*/
    .younger-interview-number {
        font-size: xx-large;
    }

    /* インタビューの質問文のスタイル */
    .younger-interview-body {
        font-size: 17px;
    }

    /* インタビューの回答文のスタイル */
    .younger-interview-answer {
        font-size: 16.5px;
    }
}

/* アコーディオンの質問行：番号と本文を横並びにする */
#accordionFlushExample .accordion-button p {
    display: flex; /* 横並び */
    align-items: baseline; /* 文字の高さを揃える */
    gap: 0.5rem; /* 番号と文章の間 */
    margin: 0; /* pタグのデフォルトmarginを消す */
    width: 100%; /* ボタンの横幅いっぱい使う */
    white-space: normal; /* 折返しOK */
    word-break: break-word; /* 長い文章対策 */
}

/* 番号が潰れないように固定 */
#accordionFlushExample .younger-interview-number {
    flex-shrink: 0;
    font-weight: bold;
}

/* 質問文は幅いっぱいで折り返し */
#accordionFlushExample .younger-interview-body {
    flex: 1;
}


/***********************************************************************************************************************************************************************************/
/* ===== 以下、写真館のスタイル ===== */
/***********************************************************************************************************************************************************************************/

/*  写真のみのコンテンツのスタイル  */
.only-photo-box {
    max-width: 1000px;
    margin: 0 auto;
}

.only-photo {
    height: auto;
}

@media (max-width: 767.98px) {

    .only-photo-box {
        width: auto;
        height: auto;
        margin-bottom: 1rem;
    }
}

/*  写真のみのコンテンツのスタイル（サイズの小さい写真）  */
.only-photo-2 {
    width: 400px;
    height: auto;
}

@media (max-width: 767.98px) {

    .only-photo-box-2 {
        width: auto;
        height: auto;
        margin-bottom: 1rem;
    }
}

/* ===== 20周年記念コンテンツのスタイル ===== */

.twenty-award {
    background-color: #FFFDE7;
}

.twenty-award-body {
    max-width: 900px;
    margin: 0 auto;
}

.twenty-award-img {
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {

    .twenty-award-img {
        width: 60%;
        height: auto;
        margin-bottom: 1rem;
    }
}


/***********************************************************************************************************************************************************************************/
/* 以下、個人情報保護方針・情報セキュリティ方針群ページのスタイル*/
/***********************************************************************************************************************************************************************************/

/* タイトルのスタイル */
.policy-key-phrase {
    white-space: nowrap;
}