/* nav を hero の上に重ねるための z-index */
.z-index-navbar {
    z-index: 10;
    /* hero のデフォルトより前面に */
}

/* 応募するボタン（BEM風：block=btn, modifier=--apply） */
.btn--apply {
    display: inline-block;
    padding: 0.7rem 2rem;
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    background-color: #374140;
    /* デザインに合わせて調整 */
    border-radius: 50px;
    border: none;
    line-height: 1;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btn--apply:hover,
.btn--apply:focus {
    background-color: #4a5658;
    /* ホバー時に少し明るく */
    text-decoration: none;
    color: #ffffff;
}

li.nav-item {
    margin-right: 1rem;
}

a.nav-link {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Offcanvas の背景色を半透明ダークに */
.offcanvas-backdrop.show {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Offcanvas 本体 */
.offcanvas {
    background-color: rgba(17, 17, 17, 0.95);
    /* ほぼ黒・少し透け感あり */
}

/* オフキャンバス内のリンク色 */
.offcanvas .nav-link {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 600;
}

/* 閉じるボタンを白く */
.btn-close-white {
    filter: invert(1);
}

/* PC版メニューは lg以上で表示、Offcanvas トグルは lg未満で表示 */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .collapse.navbar-collapse {
        display: none !important;
    }
}

/* Hero Carousel Styles */
.hero {
    height: 70vh;
    overflow: hidden;
    position: relative;
}

.hero-slide {
    height: 70vh;
    background-size: cover;
    background-position: center;
}

.bg-hero-1 {
    background-image: url('img/hero1.png');
}

.bg-hero-2 {
    background-image: url('img/hero1.webp');
}

.bg-hero-3 {
    background-image: url('img/hero1.webp');
}

.hero-title {
    /* フォントサイズをより大きく＆レスポンシブに */
    font-size: clamp(1.5rem, 6vw, 3rem);
    font-weight: bold;
    /* テキストを右寄せ */
    text-align: right;
    /* 親要素いっぱいに幅を取る */
    width: 100%;
    /* 既存のカラー・シャドウ */
    color: #ffffff;
    z-index: 10;
}

/* 小さな画面ではもう少し控えめに */
@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }
}

/* 背景の読み込み待ち防止 */
.hero-slide {
    background-color: #222;
    /* 読み込み中に白くならないように */
}

.intro .lead {
    font-size: 2rem;
    margin-bottom: 3rem;
}

.intro p {
    font-size: 1.1rem;
    letter-spacing: 0.2rem;
    line-height: 2.2rem;
    font-weight: 600;
}

p {
    color: #555358;
}

/* flow セクションのカルーセル */
.flow {

    /* 任意：淡いグレー背景 */
}

/* 画像のアスペクト比と見切れ調整 */
/* flow セクションのカルーセル画像 */
.flow-carousel__img {
    width: 100%;
    height: auto;
}

/* キャプションのスタイル */
.flow-carousel__caption {
    bottom: 2rem;
}

.flow-carousel__title {
    background: rgba(0, 0, 0, 0.5);
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 0.25rem;
}

/* スマホ時はキャプションを中央表示 */
@media (max-width: 767.98px) {
    .flow-carousel__title {
        font-size: 1.25rem;
        bottom: 1rem;
    }
}

/* カルーセル矢印 共通 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
    /* デフォルトアイコンを消す */
    width: 48px;
    /* 円のサイズ */
    height: 48px;
    background-color: #A0998E;
    /* お好みの丸背景色に */
    border-radius: 50%;
    /* 円形 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* 左矢印 */
.carousel-control-prev-icon::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 3px solid #FFF;
    border-left: 3px solid #FFF;
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -4px;
}

/* 右矢印 */
.carousel-control-next-icon::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-bottom: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -8px;
}

/* ボタン全体の位置微調整（必要あれば） */
.carousel-control-prev {
    left: 1rem;
}

.carousel-control-next {
    right: 1rem;
}

/* たたらき先 */
a {
    color: #374140;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    opacity: 0.8;
    transition: 0.5s;
}

/* FAQ コンテナ幅を中央寄せ */
.custom-faq {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* 各アイテムをカード化 */
.custom-faq .accordion-item {
    background: #F7F7F7;
    border: none;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* 質問部分 */
.custom-faq .accordion-button {
    background: #F7F7F7;
    color: #333;
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    box-shadow: none;
    /* デフォルト影を消す */
    border: none;
    /* デフォルトの境界線を消す */
    text-align: left;
    transition: background 0.3s;
}

/* デフォルトの矢印アイコンを消す */
.custom-faq .accordion-button::after {
    display: none;
}

/* ＋／−アイコンを自作 */
.custom-faq .accordion-button::before {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: #888;
    transition: transform 0.3s, color 0.3s;
}

/* 展開時は「−」に切り替え */
.custom-faq .accordion-button:not(.collapsed)::before {
    content: '−';
    color: #374140;
}

/* 回答部分 */
.custom-faq .accordion-body {
    background: #F7F7F7;
    padding: 16px 24px;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.faq h3 {
    padding: 1rem 0;
}

.faq .accordion-collapse {
    padding-bottom: 1rem;
}

/* —— コンテナ幅を1000pxに制限 —— */
.apply-section .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
    /* モバイル時の左右余白 */
}

/* —— セクション全体 —— */
.apply-section .container {
    max-width: 1000px;
    /* 最大幅1000pxに制限 */
    margin: 0 auto;
    padding: 0 1rem;
    /* モバイルの左右余白 */
}

/* タイトル */
.apply-section__title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

/* アウトラインボタン */
.apply-section__btn--outline {
    display: block;
    width: 100%;
    padding: 1rem 0;
    margin: 0 auto;
    font-size: 1.25rem;
    font-weight: 500;
    color: #374140;
    background-color: transparent;
    border: 2px solid #374140;
    border-radius: 12px;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}

.apply-section__btn--outline2 {
    display: block;
    width: 100%;
    padding: 1rem 0;
    margin: 3rem auto;
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff;
    background-color: #334b4e;
    border: 2px solid #334b4e;
    border-radius: 12px;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}


/* ホバー・フォーカス時 */
.apply-section__btn--outline:hover,
.apply-section__btn--outline:focus {
    background-color: #6e7c7b;
    color: #fff;
    text-decoration: none;
}

/* ホバー・フォーカス時 */
.apply-section__btn--outline2:hover,
.apply-section__btn--outline2:focus {
    background-color: #6e7c7b;
    color: #fff;
    text-decoration: none;
}

/* — entry-section のコンテナ幅を制限 — */
.entry-section .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem;
    /* モバイル時の左右余白 */
}

/* — ボタンを横幅いっぱいに — */
.entry-section__btn {
    display: block;
    width: 100%;
    padding: 1rem 0;
    /* 縦パディングは btn--apply と合わせる */
    font-size: 1.25rem;
    text-align: center;
    border-radius: 12px;
}

/* フッター全体 */
.footer-main {
    background-color: #374140;
}

/* ロゴ画像 */
.footer-main__logo {
    max-height: 80px;
}

.footer-logo p {
    text-align: right;
}

/* 組合名 */
.footer-main__org-name {
    font-size: 1.25rem;
}

/* 住所／認定情報 */
.footer-main__address,
.footer-main__info {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 役員リスト */
.footer-main__board dt {
    font-weight: 600;
    font-size: 0.9rem;
}

.footer-main__board dd {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* モバイル時に項目間を広げる */
@media (max-width: 767.98px) {
    .footer-main__board dd {
        margin-bottom: 1.25rem;
    }
}


.kumiai-info p {
    color: #fff;
}

.kumiai-info {
    padding-left: 4rem;
}

.yakuin-info .col-4 {
    flex: 0 0 auto;
    width: 17.333333%;
}

.footer-logo {
    text-align: right;
}

/* モバイル時の調整 */
@media (max-width: 767.98px) {
    .footer-logo {
        text-align: center;
    }

    .kumiai-info {
        padding-left: 1rem;
    }

    .yakuin-info {
        padding-left: 1rem;
    }
}


/* 

下層ページ 

*/

.second-page header {
    height: 105px;
}

.second-page nav {
    background-color: #EFF1F5;
    color: #334b4e;
}

.second-page a.nav-link {
    color: #334b4e;
}

.second-page .intro .disk {
    font-size: 1rem;
}

/* モバイル時：イントロテキストは左寄せ */
@media (max-width: 767.98px) {
    .second-page .intro .disk {
        text-align: left;
    }

    p.disk {
        text-align: left;
        font-size: 1rem;
        letter-spacing: 0;
        line-height: 1.6rem;
    }
}


/* 応募する */

/* 募集要項セクションの最大幅を1000pxに制限 */
.recruit .container {
    max-width: 800px;
    margin: 0 auto;
    /* 左右中央寄せ */
    padding: 0 1rem;
    /* モバイル時の左右余白 */
}

/* セクションタイトル */
.section-title {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #555;
}

/* 項目間の区切り線 */
.recruit-divider {
    border: none;
    border-top: 1px solid #334b4e;
    margin: 1.5rem 0 1.5rem;
}

/* 各行の下マージンは HTML の mb-3 でコントロール */

/* ラベル（左または右寄せ） */
.recruit .fw-bold {
    color: #333;
}

.recruit .text-md-end {
    text-align: end;
}

/* 内容テキスト */
.recruit .col-md-9 {
    color: #555;
    line-height: 1.6;
}

/* モバイル時：ラベルは上に寄せ、余白を追加 */
@media (max-width: 767.98px) {
    .recruit .text-md-end {
        text-align: start !important;
        margin-bottom: 0.5rem;
    }
}


.entry-flow .container {
    max-width: 1000px;
    margin: 0 auto;
    /* 左右中央寄せ */
    padding: 0 1rem;
    /* モバイル時の左右余白 */
}

.entry-flow .container img {
    width: 100%;
}

/* フォームセクション全体 */
.form-bg {
    background-color: #f7f7f7;
    border-radius: 8px;
}

/* コンテナ幅を1000pxに制限 */
.form-bg {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* 各フィールドのスペース */
.form-bg {
    width: 100%;
}

.form-section__field {
    width: 80%;
    margin: 0 auto;
}

/* ラベル */
.form-section__label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #555;
    margin-bottom: 1.5rem;
}

/* テキスト入力・メール入力 */
.form-section__control {
    width: 100%;
    border-radius: 8px;
    height: 3rem;
    padding: 1.75rem 1rem;
}

/* ファイル追加ボタン */
.form-section__file-btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #789191;
    /* お好みで調整 */
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.25rem;
}

/* ファイル追加ボタン ホバー */
.form-section__file-btn:hover,
.form-section__file-btn:focus {
    background-color: #5f7774;
    text-decoration: none;
}

/* ヘルプテキスト */
.form-section__help {
    font-size: 0.875rem;
    color: #777;
}

/* 送信ボタン余白 */
.form-section__submit {
    margin-top: 1rem;
    padding: 1rem 0;
    font-size: 1.25rem;
}

.company-copy {
    font-size: 1.3rem;
    font-weight: 600;
}

.company-name {
    font-size: 1rem;
    margin: 1rem 0;
}

.hataraki-saki .col-12 {
    padding: 6%;

}

.hataraki-saki img {
    max-height: 330px;
    object-fit: cover;
    border-radius: 0.5rem;
}








/* パネルは JS で切り替えますが、初期状態も隠しておく */
.contact-purpose__panel {
    display: none;
}

/* ラジオボタンの左右スペース微調整 */
.contact-purpose__options .form-check-inline {
    margin: 1.5rem;
}

/* モバイル時：ラジオ群を縦並びに */
@media (max-width: 576px) {
    .contact-purpose__options {
        justify-content: center;
    }

    .contact-purpose__options .form-check-inline {
        flex: 1 1 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

.cfRecaptcha {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

.cfRecaptcha a {
    text-decoration: underline;
}

.workplace-sub .lead {
    font-size: 1.3rem;
    font-weight: 600;
}

.workplace-sub img,
.workplace img {
    border-radius: 0.5rem;
}

.workplace-sub h2.company-name {
    font-size: 1.4rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.5rem;
}

.workplace-sub .section-title {
    font-size: 2.5rem;
}

.workplace-sub-disc p {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.workplace-sub-info {
    background-color: #F7F7F7;
}