/*
Theme Name: wakuwork-child
Version: 1.0
Template: wakuwork
*/

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

nav img {
    height: 60px;
}

button.navbar-toggler.d-lg-none {
    background-color: #374140;
    opacity: 0.6;
}

body {
    font-family: "source-han-sans-japanese", sans-serif;
}

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

@media (max-width: 576px) {

    .btn--apply {
        font-size: 1.25rem;
        font-weight: 600;
    }

}

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

.btn--apply:visited {
    /* ホバー時に少し明るく */
    text-decoration: none;
    color: #ffffff;
}

/* フォームの送信するボタン用 */
.form-section__field input.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;
}

.form-section__field input.btn--apply:hover,
.form-section__field input.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;
}

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

.top-page a.nav-link {
    text-shadow: 1px 1px 2px #374140;
}

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

.offcanvas h5#mobileMenuLabel {
    color: #374140;
}

/* Offcanvas 本体 */
.offcanvas {
    background-color: #EFF1F5;
    /* ほぼ黒・少し透け感あり */
}

/* オフキャンバス内のリンク色 */
.offcanvas .nav-link {
    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(/_wp/wp-content/themes/wakuwork-child/assets/img/hero1.jpg);
    background-position: top right !important;
}

.bg-hero-2 {
    background-image: url(/_wp//wp-content/themes/wakuwork-child/assets/img/hero2.jpg);
}

.bg-hero-3 {
    background-image: url(/_wp//wp-content/themes/wakuwork-child/assets/img/hero3.jpg);
}

@media (max-width: 576px) {
    .bg-hero-1 {
        background-position: center right !important;
    }

    .bg-hero-2 {
        background-position: center left !important;
    }

    .bg-hero-3 {
        background-position: center left !important;
    }
}

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

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

@media (max-width: 576px) {

    /* ２枚目スライド専用：テキストを親から60%の位置に絶対配置 */
    .bg-hero-1 .hero-title-left,
    .bg-hero-2 .hero-title,
    .bg-hero-3 .hero-title {
        position: absolute;
        top: 60%;
        /* 親要素の上端から60% */
        right: 1.5rem;
        /* px-4 と同じ余白 */
        transform: translateY(-50%);
        /* 自身の高さの半分だけ上にずらして真ん中寄せ */

        /* 幅の100%指定を解除 */
        left: 0;
        margin: 0 auto;
    }

    .hero-slide h1 {
        text-align: center;
    }

}



/* 小さな画面ではもう少し控えめに */
@media (max-width: 576px) {

    .hero-title,
    .hero-title-left {
        font-size: 1.4rem;
        text-align: center;
    }
}

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

/* CSS：フェード切り替えにかける時間を JS interval の半分以下に */
.carousel-fade .carousel-item {
    /* フェードトランジションを1秒に */
    transition: opacity 1s ease-in-out;
}

.second-page .intro .container {
    max-width: 800px;
    margin: 0 auto;
}

.second-page .intro .container .disk {
    text-align: left;
}

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

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

p {
    color: #555358;
}

section.features {
    background-color: #f7f7f7;
}

/* 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;
}

/* ① 親要素を相対配置に */
#flowCarousel {
    position: relative;
}

/* ② アイコン自体を絶対配置に */
#flowCarousel .carousel-control-prev-icon,
#flowCarousel .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 576px) {

    #flowCarousel .carousel-control-prev-icon,
    #flowCarousel .carousel-control-next-icon {
        top: 60%;
    }
}

/* ③ 左右にオフセット */
#flowCarousel .carousel-control-prev-icon {
    left: -50%;
}

#flowCarousel .carousel-control-next-icon {
    right: -50%;
}

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

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

.hataraki-saki .category {
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    letter-spacing: .08em;
    color: #fff;
    background-color: #334B4E;
    border-radius: 5px;
    padding: 0 1.5rem;
    margin-left: 1rem;
}

/* スマホ時はキャプションを中央表示 */
@media (max-width: 767.98px) {
    .hataraki-saki .sp-only+.category {
        margin-left: 0;
        line-height: 1.8rem;
    }
}


/* 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 42px 16px 24px;
    font-size: 1rem;
    font-weight: 600;
    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--outline:visited {
    color: #374140;
}

.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--outline2:visited {
    color: #fff;
}


/* ホバー・フォーカス時 */
.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-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-right: 2rem;
    margin-left: auto;
    width: 33%;
    margin-right: auto;
}

@media (max-width: 767.98px) {
    .kumiai-info {
        width: 100%;
    }
}

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

/* モバイル時の調整 */
@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;
}

.offcanvas a.nav-link {
    color: #334b4e;
    text-shadow: none;
}


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

/* モバイル時：イントロテキストは左寄せ */
@media (max-width: 767.98px) {
    .second-page .intro .container .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%;
}

img.w-100.flow-carousel__img.pc-only {
    max-height: 90vh;
    object-fit: contain;
}

/* フォームセクション全体 */
.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__field input.form-section__submit {
    margin-top: 1rem;
    padding: 1rem 0;
    font-size: 1.25rem;
}

.form-section__control::placeholder {
    color: #aaa !important;
    opacity: 1;
    font-style: italic;
}

.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 {
    object-fit: cover;
    border-radius: 0.5rem;
}

@media (min-width: 767.98px) {
    .hataraki-saki img {
        height: 70%;
    }
}







/* パネルは 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.2rem;
    background-color: #374140;
    padding: 0.5rem;
    color: #fff;
}

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

@media (max-width: 767.98px) {
    .workplace-sub .section-title {
        text-align: left !important;
        font-size: 1.7rem;
    }
}

.workplace-sub-disc p {
    font-size: 1rem;
    text-align: left;
    line-height: 2.4375;
}

.workplace-sub-info {
    background-color: #F7F7F7;
    padding: 2rem 4rem;
    word-wrap: break-word;
}

.form-check-input[type=radio] {
    font-size: 25px;
    margin-top: -0.1rem;
}

/* ─────────────────────────────────────────
   モバイル（992px 未満）でハンバーガーメニューだけ fixed
   ───────────────────────────────────────── */
@media (max-width: 991.98px) {
    .navbar-toggler {
        position: fixed !important;
        top: 0.75rem;
        /* お好みで上下位置を微調整 */
        right: 1rem;
        /* お好みで左右位置を微調整 */
        z-index: 1050;
        /* Offcanvas より手前に */
    }
}

/* ─────────────────────────────────────────
   デスクトップ（992px 以上）は元に戻す
   ───────────────────────────────────────── */
@media (min-width: 992px) {
    .navbar-toggler {
        position: static !important;
        top: auto;
        right: auto;
    }
}

@media (max-width: 991.98px) {
    .pc-only {
        display: none;
    }
}

@media (min-width: 992px) {
    .sp-only {
        display: none;
    }
}

/* 共通カラー */
:root {
    --table-dark: #374140;
    /* 見出し帯の色 */
    --table-border: #5c5454;
    /* 外枠/区切り線 */
}

/* ========== １つ目：評価項目テーブル ========== */
.eval-crit {
    border-collapse: separate;
    /* 外枠を太く見せるため */
    border-spacing: 0;
    border: 2px solid var(--table-border);
    background: #fff;
}

.eval-crit thead th {
    background: var(--table-dark);
    color: #fff;
    border: 0;
    border-bottom: 2px solid var(--table-border);
    padding: 1rem;
    font-weight: 600;
    letter-spacing: .05em;
}

.eval-crit tbody th,
.eval-crit tbody td {
    border: 0;
    /* 既定の罫線は消す */
    vertical-align: middle;
    padding: 1rem;
    /* 行を高めに */
    color: #333;
}



/* 左列と右列の境界線を太く */
.eval-crit tbody th {
    width: 28%;
    border-right: 2px solid var(--table-border);
    font-weight: 600;
    white-space: nowrap;
}

/* 行の区切りも太く */
.eval-crit tbody tr+tr th,
.eval-crit tbody tr+tr td {
    border-top: 2px solid var(--table-border);
}

/* 下端も太く（外枠に揃える） */
.eval-crit tbody tr:last-child th,
.eval-crit tbody tr:last-child td {
    border-bottom: 0;
}

/* ========== ２つ目：評価ランクテーブル ========== */
.eval-rank {
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid var(--table-border);
    background: #fff;
}

.eval-rank thead th {
    background: var(--table-dark);
    color: #fff;
    border: 0;
    border-bottom: 2px solid var(--table-border);
    padding: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
}

@media (max-width: 991.98px) {
    .eval-rank thead th {
        padding: 1rem 0.5rem;
        font-weight: 500;
        font-size: 0.9rem;
    }
}

.eval-rank tbody th,
.eval-rank tbody td {
    border: 0;
    vertical-align: middle;
    padding: 1rem;
    color: #333;
}

.eval-rank tbody th {
    width: 20%;
    border-right: 2px solid var(--table-border);
    font-weight: 600;
    white-space: nowrap;
}

.eval-rank tbody td:nth-child(2) {
    width: 30%;
    border-right: 2px solid var(--table-border);
    font-weight: 600;
}

@media (max-width: 991.98px) {

    .eval-rank tbody th,
    .eval-crit tbody th,
    .eval-rank tbody td,
    .eval-crit tbody td {
        padding: 1rem 0.5rem;
        font-size: 0.9rem;
    }
}

.eval-rank tbody tr+tr th,
.eval-rank tbody tr+tr td {
    border-top: 2px solid var(--table-border);
}

/* ========== レスポンシブ方針 ========== */
/* スマホはデザインを崩さず、横スクロールで閲覧（Bootstrap の .table-responsive が有効） */
.table-responsive {
    overflow-x: auto;
}

.footer-main__board dt.col-3 {
    text-align: right;
}

p.disk {
    line-height: 1.8rem;
}

.wpcf7 input[type="file"] {
    white-space: normal;
    width: 100%;
}