@charset "UTF-8";

/* -------------------------------------------------------
    training.html タブレット版（768px〜1439px）
    css/training.css（PC版）の px 指定を 1440px 基準で vw に変換
    計算式：px ÷ 1440 × 100 = vw（小数点4桁まで）
    セレクタ・レイアウト構成はPC版から変更していません
------------------------------------------------------- */

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

    /* -------------------------
        このファイルは training.html（14_研修のご案内）専用のスタイルです。
        ヘッダー・フッター・共通ボタン・共通見出み（.c-heading）・
        波形ヒーロー（.c-photo-wave-mask）は css/common.css を参照しています。
    ------------------------- */

    :root {
        --tr-cream: #FFFFBC;
        --tr-orange: #FF6D33;
        --tr-orange-2: #FFA963;
        --tr-open: #96E1D4;
        --tr-closed-bg: #EBEBEB;
        --tr-closed-text: #808080;
    }

    .l-main {
        min-width: 69.4444vw;
        background: var(--tr-cream);
    }


    /* -------------------------
        ページタイトル（ヒーロー）
    ------------------------- */

    .training-hero {
        position: relative;
        width: 100%;
        min-width: 69.4444vw;
        height: 44.0972vw;
        overflow: hidden;
    }

    .training-hero__photo {
        position: absolute;
        inset: 0;
        top: -13.1944vw;
        overflow: hidden;
    }

    .training-hero__photo-inner {
        position: absolute;
        top: -10%;
        right: 0;
        bottom: -10%;
        left: 0;
        background: url("../images/training/hero_photo.webp") center 15% / cover no-repeat;
    }

    .training-hero__inner {
        position: relative;
        max-width: 100vw;
        height: 100%;
        margin: 0 auto;
    }

    .training-hero__title {
        position: absolute;
        left: 11.1111vw;
        top: 17.7778vw;
        display: inline-flex;
        align-items: center;
        height: 5.9028vw;
        padding: 0 4.1667vw;
        background: var(--tr-orange);
        border-radius: 13.8889vw;
        color: #fff;
        font-size: 3.4722vw;
        font-weight: 700;
    }


    /* -------------------------
        研修開催のお知らせ
    ------------------------- */

    .training-list {
        padding: 6.9444vw 0;
    }

    .training-list__inner {
        position: relative;
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 14.3056vw;
    }

    .training-list__lead {
        max-width: 100%;
        margin: 0 auto 4.1667vw;
        font-size: 1.8vw;
        font-weight: 700;
        line-height: 1.8;
        letter-spacing: 1.65px;
        text-align: center;
    }


    .training-accordion {
        display: flex;
        flex-direction: column;
        gap: 2.0833vw;
        max-width: 71.3889vw;
        margin: 0 auto;
    }

    .training-accordion__item details {
        background: #fff;
        border-radius: 2.0833vw;
        overflow: hidden;
    }

    .training-accordion__summary {
        display: block;
        padding: 2.0833vw 3.4722vw;
        cursor: pointer;
        list-style: none;
    }

    .training-accordion__summary::-webkit-details-marker {
        display: none;
    }

    .training-accordion__date {
        display: block;
        color: #6a6a6a;
        font-size: 1.25vw;
        letter-spacing: -0.9px;
    }

    .training-accordion__row {
        display: flex;
        align-items: center;
        gap: 1.3889vw;
        margin-top: 1.0417vw;
        padding-bottom: 1.0417vw;
    }

    details[open] .training-accordion__row {
        border-bottom: 1px solid #ddd;
    }

    .training-accordion__title {
        flex: 1;
        font-size: 1.3889vw;
        font-weight: 500;
        color: #000;
    }

    .training-accordion__status {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 8.0556vw;
        height: 2.6389vw;
        border-radius: 6.9444vw;
        font-size: 1.25vw;
        font-weight: 500;
    }

    .training-accordion__status--open {
        background: var(--tr-open);
        color: #fff;
    }

    .training-accordion__status--closed {
        background: var(--tr-closed-bg);
        color: var(--tr-closed-text);
    }

    .training-accordion__row::after {
        content: "";
        flex: none;
        width: 1.3194vw;
        height: 1.3194vw;
        background-image: url("../images/training/icon-accordion-close.svg");
        background-size: contain;
        background-repeat: no-repeat;
    }

    details[open] .training-accordion__row::after {
        background-image: url("../images/training/icon-accordion-open.svg");
    }

    .training-accordion__body {
        padding: 0 3.4722vw 2.7778vw;
    }

    .training-accordion__profile {
        float: right;
        width: 21.5278vw;
        margin: 0 0 1.3889vw 2.7778vw;
    }

    .training-accordion__photo {
        display: block;
        width: 100%;
        height: 13.8889vw;
        border-radius: 1.3889vw;
        object-fit: cover;
    }

    .training-accordion__caption {
        margin-top: 0.6944vw;
        font-size: 0.9722vw;
        text-align: center;
        color: #333;
    }

    .training-accordion__desc-text {
        font-size: 1.25vw;
        line-height: 2.0833vw;
    }

    .training-accordion__detail {
        clear: both;
        margin: 2.0833vw 0 0;
        padding: 0;
    }

    .training-accordion__detail-row {
        display: flex;
        align-items: flex-start;
        gap: 4.1667vw;
        padding: 0.7639vw 0;
        font-size: 1.25vw;
        line-height: 2.0833vw;
    }

    .training-accordion__detail-row + .training-accordion__detail-row {
        border-top: 1px solid #ddd;
    }

    .training-accordion__detail-label {
        flex: none;
        width: 6.25vw;
        color: #000;
        font-weight: 700;
    }

    .training-accordion__detail-value {
        flex: 1;
        min-width: 0;
        margin: 0;
        color: #000;
    }

    .training-accordion__downloads {
        display: flex;
        flex-direction: column;
        gap: 0.5556vw;
    }

    .training-accordion__download {
        display: inline-flex;
        align-items: center;
        gap: 0.5556vw;
        color: var(--tr-orange);
        font-size: 1.25vw;
        font-weight: 500;
        text-decoration: underline;
    }

    .training-accordion__download img {
        width: 1.1111vw;
        height: auto;
    }

    .training-accordion__message {
        clear: both;
        margin-top: 2.0833vw;
        font-size: 1.25vw;
    }

    .training-pager {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.0833vw;
        margin: 6.25vw 0 0;
    }

    .training-pager__arrow {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 2.1528vw;
        height: 2.1528vw;
    }

    .training-pager__arrow img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .training-pager__arrow--prev img {
        transform: scaleX(-1);
    }

    .training-pager__nums {
        display: flex;
        align-items: center;
        gap: 2.0833vw;
    }

    .training-pager__num {
        color: #C4A865;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 1.7361vw;
        font-weight: 500;
        text-decoration: none;
    }

    .training-pager__num--current {
        color: var(--tr-orange-2);
        font-weight: 700;
    }


    /* -------------------------
        ひだまりの研修・制度
    ------------------------- */

    .training-programs {
        position: relative;
        overflow: visible;
        padding: 6.9444vw 0 0;
        background-image: url(../images/training/bg_programs_wave_top.webp), url(../images/training/bg_programs_wave_bottom.webp);
        background-repeat: no-repeat, no-repeat;
        background-position: top center, bottom center;
        background-size: 100% 6.25vw, 100% 29.4444vw;
    }

    .training-programs__inner {
        position: relative;
        z-index: 1;
        max-width: 100vw;
        margin: 0 auto;
        padding: 10.4167vw 14.3056vw 31.25vw;
    }

    .training-programs__list {
        display: flex;
        flex-direction: column;
        gap: 2.7778vw;
        max-width: 71.3889vw;
        margin: 0 auto;
    }

    .training-programs__item {
        display: flex;
        align-items: center;
        gap: 3.4722vw;
        padding: 4.5139vw;
        background: #fff;
        border-radius: 2.0833vw;
    }

    .training-programs__text {
        flex: 1;
    }

    .training-programs__title {
        margin-bottom: 1.3889vw;
        color: var(--tr-orange);
        font-size: 1.875vw;
        font-weight: 700;
        letter-spacing: 1.35px;
    }

    .training-programs__text p {
        font-size: 1.25vw;
        line-height: 1.7;
        letter-spacing: -0.9px;
    }

    .training-programs__photo {
        flex: none;
        width: 24.5833vw;
        height: 25.6944vw;
        border-radius: 1.3889vw;
        object-fit: cover;
    }


    /* -------------------------
        お問い合わせ
    ------------------------- */

    .training-contact {
        padding: 0 0 27.7778vw;
    }

    .training-contact__inner {
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 15.2778vw;
    }

    .training-contact__box {
        max-width: 69.5833vw;
        margin: 0 auto;
        padding: 2.7778vw 4.1667vw;
        background: #FFF8AA;
        border-radius: 1.5972vw;
        text-align: center;
    }

    .training-contact__heading {
        font-size: 2.0833vw;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: var(--color-green);
    }

    .training-contact__phone {
        display: flex;
        align-items: center;
        gap: 2.0833vw;
        margin-top: 2.0833vw;
        padding: 0;
        border-radius: 1.3889vw;
        text-align: left;
    }

    .training-contact__phone-body {
        flex: 1;
        min-width: 0;
    }

    .training-contact__label {
        margin: 0;
        font-size: 1.5972vw;
        font-weight: 500;
    }

    .training-contact__note {
        margin: 0.2778vw 0 0;
        font-size: 1.25vw;
        letter-spacing: -1px;
    }

    .training-contact__phone-number {
        flex-shrink: 0;
        text-align: center;
    }

    .training-contact__phone-numberdiv {
        display: flex;
        align-items: center;
        gap: 0.6944vw;
    }

    .training-contact__tel-icon {
        flex-shrink: 0;
        width: 3.5417vw;
        height: 3.5417vw;
    }

    .training-contact__phone-numberdiv a {
        font-size: 4.1667vw;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 3px;
        color: #000;
        text-decoration: none;
    }

    .training-contact__hours {
        margin: 0.1389vw 0 0;
        font-size: 1.3889vw;
    }

    /* -------------------------
        記事が0件のときの表示
    ------------------------- */

    .training-accordion__item--empty {
        padding: 4.1667vw 1.3889vw;
        border-radius: 2.0833vw;
        font-size: 1.25vw;
    }
}