@charset "UTF-8";

/*
Theme Name: stepstep
Theme URI: https://stepstep.jp/
Description: Stepステップサイトのカスタムテーマです。
Author: sec
Author URI: https://stepstep.jp/
Version: 1.0.0
Text Domain: stepstep-child
*/

    /* ======================================== */
    /* 全体共通スタイル                         */
    /* ======================================== */
    body {
        font-family: 'Zen Maru Gothic', sans-serif;
        color: #4C4948; /* 基本のテキスト色 */
        line-height: 1.6;
    }

    /* FONTS
    ---------------------------------------- */
    .light { font-weight: 300; }
    .regular { font-weight: 400; }
    .medium { font-weight: 500; }
    .bold { font-weight: 700; }

    /* ======================================== */
    /* HEADER                                   */
    /* ======================================== */
    header.page-header {
        background-color: #FFFBF2;
        box-shadow: 0 3px 5px #d3c6c0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    .logo {
        width: 150px;
    }

    nav ul.main-nav {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav ul.main-nav li {
        margin-right: 20px;
    }

    nav ul.main-nav li:last-child {
        margin-right: 0;
    }

    .contact-label {
        background-color: #66B85A;
        color: #ffffff;
        padding: 10px 15px;
        border-radius: 5px;
        font-weight: 700;
        font-size: 1rem;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
    }

    .phone-mail-group div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .phone-mail-group a {
        color: #4C4948;
        text-decoration: none;
        font-size: 1rem;
        white-space: nowrap;
        font-weight: 700;
        margin: 2px 0;
    }


    /* ======================================== */
    /* Article                                  */
    /* ======================================== */
    article h2 {
        font-size: 2.5rem;
        color: #EC7473;
        text-align: center;
        padding-top: 100px;
    }
    article h4 {
        font-size: 1.5rem;
        color: #EC7473;
        text-align: center;
        padding-top: 5px;
    }
    article h3 {
        font-size: 2rem;
        color: #66B85A;
        text-align: center;
        padding-top: 20px;
        }
    article img {
        width: 500px;
        display: block;
        margin: 30px auto 0;
    }
    article p {
        font-size: 1rem;
        color: #4C4948;
        text-align: center;
        padding: 30px;
    }

    /* ======================================== */
    /* Section 個々に持ち合わせている           */
    /* ======================================== */
    section h4.bold {
        background-color: #66B85A;
        font-size: 1.5rem;
        color: #ffffff;
        text-align: center;
        padding: 5px;
        width: 900px;
        margin: 20px auto;
        border-radius: 8px;
    }
    section p.bold {
        font-size: 1rem;
        color: #4C4948;
        text-align: center;
        padding: 5px;
    }
    section div.image-row {
        display: flex;
        justify-content: center;
        gap: 48px;
    }
    section div.image-block {
        text-align: center;
        width: 160px;
        margin: 20px 0;
    }
    section div.image-block p {
        text-align: left;
        font-size: 0.8rem;
    }

    /* ======================================== */
    /* Section 作業内容　1日の活動例            */
    /* ======================================== */
    .section2-wrapper {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
        max-width: 900px;
        margin: 20px auto;
    }

    .section2 .work-content-block h4.bold,
    .section2 .daily-activity-block h4.bold {
        background-color: #66B85A;
        font-size: 1.5rem;
        color: #ffffff;
        text-align: center;
        padding: 5px;
        width: 100%;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .work-content-block,
    .daily-activity-block {
        max-width: 430px;
        min-width: 300px;
        flex-grow: 1;
        box-sizing: border-box;
        padding: 10px;
    }

    .work-content-block p.bold,
    .daily-activity-block p.bold {
        font-size: 1rem;
        color: #4C4948;
        line-height: 2.5;
        padding: 0;
        margin-bottom: 5px;
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
    }

    .work-content-block p.bold {
        text-align: left;
    }

    .daily-activity-block p.bold {
        font-size: 1rem;
        color: #4C4948;
        line-height: 2.5;
        padding: 0;
        margin-bottom: 5px;
        max-width: 330px;
        margin-left: auto;
        margin-right: 0;
        text-align: left;
    }

    .section2 p.bold.last-line {
        text-align: right;
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        top: -20px;
    }


    /* ======================================== */
    /* Section 流れ (ご利用までの流れ) - PC版のスタイル  */
    /* （このセクションはPC版のHTMLに適用されます） */
    /* ======================================== */
    .section3 {
        text-align: center;
    }

    .section3 .image-row {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 3px;
    }

    .section3 .image-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0;
        padding: 0;
        max-width: 150px;
        flex-shrink: 1;
        flex-grow: 1;
    }

    .section3 .image-item.arrow {
        flex-shrink: 0;
        flex-grow: 0;
        width: 50px;
        min-width: 50px;
    }

    .section3 .image-item img {
        display: block;
        margin: 0;
        padding: 0;
    }

    .section3 .main-imag {
        width: auto;
        height: 35px;
    }

    .section3 .arrow-imag {
        width: auto;
        height: 35px;
    }

    .section3 .caption {
        margin-top: 8px;
        margin-bottom: 50px;
        font-size: 0.85rem;
        color: #4C4948;
        text-align: left;
        padding: 4px 8px;
        width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
        border-radius: 4px;
        box-sizing: border-box;
        font-weight: 700;
    }
    .section3 .caption.center-caption {
        text-align: center;
    }

    .section3 .image-item.arrow .caption {
        display: none;
    }


    /* ======================================== */
    /* Section 募集要項                         */
    /* ======================================== */
    .text-image {
        display: flex;
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
        gap: 1rem;
        align-items: flex-start;
        margin-top: 30px;
    }

    .text-left {
        flex: 1;
        min-width: 0;
    }

    .image-right {
        width: 240px;
        flex-shrink: 0;
    }

    .image-right img {
        width: 100%;
        height: auto;
    }

    .info-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 0.87rem;
        color: #4C4948;
        line-height: 1.6;
    }

    .info-list li {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1em;
    }

    .info-list strong {
        width: 4.5rem;
        flex-shrink: 0;
    }

    .multi-line {
        flex: 1;
    }

    .center-image {
        width: 520px;
        display: block;
        margin: 20px auto 0;
    }
    .center-text {
        text-align: center;
    }

    .center-text ul.info-list {
        padding-left: 0;
        list-style: none;
        margin: 0 auto;
        display: inline-block;
        text-align: left;
    }

    .center-text ul.info-list li {
        margin-bottom: 1em;
    }

    /* ======================================== */
    /* Section 問い合わせ                       */
    /* ======================================== */
    .contact-info {
        width: 100%;
        max-width: 600px;
        margin: 40px auto;
        font-size: 1.5rem;
    }

    .contact-info a {
        color: #4C4948;
        text-decoration: none;
    }

    .contact-info .note {
        font-size: 0.9rem;
        color: #EC7473;
        margin-top: 0px;
        text-align: right;
    }

    .contact-row {
        display: flex;
        justify-content: space-between;
        margin: 50px 0;
    }

    .contact-row .left {
        text-align: left;
        color: #4C4948;
        text-decoration: none;
    }

    .contact-row .right {
        text-align: right;
        color: #4C4948;
    }

    /* ======================================== */
    /* Section 運営会社について                 */
    /* ======================================== */
    section.section6 p.bold {
        font-size: 1rem;
        color: #4C4948;
        text-align: left;
        padding: 5px;
        width: 700px;
        margin: 0 auto;
    }
    section .showa-logo {
        width: 400px;
        margin: 0 auto;
        display: block;
        padding-top: 20px;
        padding-bottom: 100px;
    }

    /* ======================================== */
    /* FOOTER                                   */
    /* ======================================== */
    footer {
        background-color: #66B85A;
        text-align: center;
        padding: 15px 0px;
    }
    footer p {
        color: #ffffff;
        font-size: 1.3rem;
    }

    /* ======================================== */
    /* PC版の表示/非表示制御のデフォルト設定 （@mediaの外に置く） */
    /* ======================================== */
    .pc-only {
        display: block; /* デフォルトでPC版を表示 */
    }
    .mobile-only {
        display: none;  /* デフォルトでモバイル版を非表示 */
    }

    /* ======================================== */
    /* レスポンシブデザイン - モバイル向けスタイル */
    /* ======================================== */

    @media (max-width: 767px) {
        /* 全体的な設定 */
        img, video, iframe {
            max-width: 100%;
            height: auto;
            display: block;
        }

        * {
            box-sizing: border-box;
        }

        /* HEADER
        ---------------------------------------- */
        header.page-header {
            flex-direction: column;
            padding: 10px 0;
            align-items: center;
        }

        .logo {
            width: 100px;
            margin-bottom: 10px;
        }

        nav ul.main-nav li:first-child,
        nav ul.main-nav li.phone-mail-group {
            display: none;
        }

        /* Article
        ---------------------------------------- */
        article h2 {
            font-size: 1.8rem;
            padding-top: 50px;
            padding-left: 10px;
            padding-right: 10px;
        }
        article h4 {
            font-size: 1.2rem;
            padding-left: 10px;
            padding-right: 10px;
        }
        article h3 {
            font-size: 1.5rem;
            padding-left: 10px;
            padding-right: 10px;
        }
        article img {
            width: 90%;
            margin: 20px auto 0;
            max-width: 400px;
        }
        article p {
            font-size: 0.7rem;
            padding: 20px 10px;
            letter-spacing: -0.05em;
        }

        /* Section 個々に持ち合わせている
        ---------------------------------------- */
       h4.bold {
            font-size: 1.2rem;
            width: 90%;
            max-width: 350px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 8px;
            padding: 5px;
        }
        .section1 h4.bold,
        .section3 h4.bold, /* この .section3 h4.bold は残ります */
        .section4 h4.bold,
        .section5 h4.bold,
        .section6 h4.bold {
            font-size: 1.2rem;
            width: 90%;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 8px;
            padding: 5px;
            margin-bottom: 20px; /* ここにデフォルトの下マージンを設定 */
        }
        /* 「ご利用までの流れ」の帯の下の空きを広くする */
        .section3 h4.bold {
            margin-bottom: 50px; /* ★変更点：下側の余白を30pxに設定（広くする）★ */
        }


        section p.bold {
            font-size: 0.7rem;
            padding: 5px 15px;
            letter-spacing: -0.05em;
        }
       section div.image-row {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            gap: 10px;
            max-width: 100%;
            margin: 20px auto;
        }

        section div.image-block {
            width: calc(33.33% - 10px);
            max-width: 120px;
            margin: 0;
            padding: 5px;
            text-align: center;
        }

        section div.image-block img {
            width: 100px;
            height: auto;
            margin-bottom: 5px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        section div.image-block p.medium {
            font-size: 0.65rem;
            line-height: 1.4;
            max-width: 100px;
            margin: 0 auto;
            text-align: center;
        }

        /* Section 作業内容　1日の活動例
        ---------------------------------------- */
        .section2-wrapper {
            flex-direction: column;
            gap: 20px;
            max-width: 90%;
            margin-left: auto;
            margin-right: auto;
        }
        .work-content-block,
        .daily-activity-block {
            max-width: 100%;
            padding: 0px;
            min-width: unset;
        }
        .section2 .work-content-block h4.bold,
        .section2 .daily-activity-block h4.bold {
            font-size: 1.2rem;
            width: 100%;
            max-width: 350px;
            margin-left: auto;
            margin-right: auto;
            padding-top: 4.5px;
            padding-bottom: 4.5px;
            padding-left: 110px;
            padding-right: 110px;
            margin-top: 0;
        }

        .section2 p.bold {
            font-size: 0.9rem;
            line-height: 1.8;
            max-width: 280px;
            margin-left: auto;
            margin-right: auto;
            padding: 0;
        }
        .work-content-block p.bold {
            text-align: left;
        }
        .daily-activity-block p.bold {
            text-align: left;
            margin-left: auto;
            margin-right: 0;
        }
        .section2 p.bold.last-line {
            font-size: 0.9rem;
            max-width: 280px;
            top: -10px;
            margin-left: auto;
            margin-right: 0;
        }

        /* モバイル版の表示/非表示制御とレイアウト */
        .pc-only {
            display: none; /* モバイル版では既存のHTMLを非表示 */
        }
        .mobile-only {
            display: flex; /* モバイル版では新しいHTMLを表示しFlexboxを適用 */
            justify-content: center; /* 必要に応じて中央寄せ */
            align-items: flex-start; /* 上揃え */
            gap: 15px; /* SVGカラムと説明文カラムの間のスペース */
            padding: 40px 15px 60px 15px; /* セクション全体のパディング */
            max-width: 600px; /* 全体の最大幅を制限 */
            margin: 0 auto; /* 中央寄せ */
            flex-wrap: wrap; /* 画面が狭い場合、全体を折り返す */
        }

        /* ご利用までの流れセクションのFlexboxレイアウト */
        .process-container {
            display: flex;
            width: 100%;
            max-width: 340px;
            justify-content: flex-start;
            align-items: flex-start;
            /* 必要であれば、process-container 自体のパディングも調整 */
            padding: 0 15px; /* 例: 左右に余白を持たせる */
            box-sizing: border-box; /* パディングを含めて幅を計算 */
        }

        .svg-column {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap:8px;
            flex-shrink: 0; /* 縮まないようにする */
            margin-right: 0px; /* description-column との間にスペース */
            /* ★ここを修正/追加★ */
            width: 120px; /* SVGアイコンの実際のサイズに合わせて調整 */
            max-width: 120px; /* SVGアイコンの実際のサイズに合わせて調整 */
        }

        .svg-item {
            display: flex;
            align-items: center;
            height: 40px;
             /* アイコンのカラム幅全体に対して中央寄せにする */
            justify-content: center; /* flexアイテム（画像）を横方向中央に配置 */
            width: 100%; /* 親要素（.svg-column）の幅いっぱいに広げる */
        }
        /* svg-item 内のアイコンと矢印のサイズも確認 */
        .svg-item .process-icon {
            width:120px; /* アイコンの幅 */
            height: auto;
            display: block;
        }
        .svg-item .process-arrow {
            width: 30px; /* 矢印の幅 */
            height: auto;
            transform: rotate(90deg);
            display: block;
        }

       .description-column {
            display: flex;
            flex-direction: column;
            /* flex-grow: 1; を使うと、残りのスペースを自動で埋めてくれます */
            flex-grow: 1;
            /* flex-basis: 0; は flex-grow: 1; とセットで使うと良い */
            flex-basis: 0;
            gap: 8px;
        }

        /* desc-item の幅は description-column に依存するので不要 */
        .desc-item {
            font-size: 0.8rem;
            line-height: 1.4;
            color: #4C4948;
            height: 40px; /* SVGアイテムと高さを合わせる */
            display: flex;
            align-items: center;
            text-align: left;
            /* width: 100%; は不要、flex-grow: 1; が効いているので */
            font-weight: 700;
        }
        .desc-item.placeholder {
            height: 40px;
            visibility: hidden;
        }

        .desc-item.bold-text {
            font-weight: 700;
            text-align: left;
        }


        /* Section 募集要項
        ---------------------------------------- */
        .section4 {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
            padding:35px 15px 0px 15px;
        }

        .section4 h4.bold {
            font-size: 1.4rem;
            line-height: 1.4;
            margin-bottom: 0;
            text-align: center;
            width: 90%;
            max-width: 350px;
        }

        .section4 .text-image {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
            max-width: 400px;
            gap: 20px;
            padding: 0;
        }

        .section4 .text-image .text-left {
            width: 100%;
            text-align: left;
            box-sizing: border-box;
            padding: 0 5px;
        }

        .section4 .text-image .text-left .info-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .section4 .text-image .text-left .info-list li {
            font-size: 0.85rem;
            line-height: 1.5;
            margin-bottom: 8px;
            color: #555;
            position: relative;
            padding-left: 0;
            text-align: left;
        }

        .section4 .text-image .text-left .info-list li .multi-line {
            display: inline-block;
            vertical-align: top;
            margin-left: 5px;
            text-align: left;
            width: calc(100% - 6em - 5px);
            box-sizing: border-box;
        }
        .section4 .text-image .text-left .info-list li strong {
            display: inline-block;
            width: 6em;
            text-align: right;
            margin-right: 5px;
        }

        .section4 .text-image .image-right img {
            width: 100%;
            max-width: 500px;
            height: auto;
            display: block;
            margin: 0 auto;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .section4 .center-image {
            width: 90%;
            max-width: 400px;
            text-align: center;
            margin: 0 auto;
        }
        .section4 .center-image img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .section4 .center-text {
            width: 90%;
            max-width: 400px;
            margin: 0 auto;
            text-align: center;
        }

        .section4 .center-text .info-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .section4 .center-text .info-list li {
            font-size: 0.85rem;
            line-height: 1.5;
            margin-bottom: 8px;
            color: #555;
            position: relative;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        .section4 .center-text .info-list li strong {
            display: block;
            width: auto;
            text-align: left;
            margin-right: 0;
            margin-bottom: 2px;
        }

        .section4 .center-text .info-list li .multi-line {
            display: block;
            margin-left: 0;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
        }

        /* Section 問い合わせ
        ---------------------------------------- */
        .contact-info {
            font-size: 1rem; /* このセクションのベースフォントサイズ */
            max-width: 90%; /* 親要素の幅を制限し、その中でコンテンツブロックを中央寄せする */
            margin-left: auto;
            margin-right: auto; /* ★変更点: これで .contact-info 自体が中央に配置されます */
            padding: 0 10px; /* 左右の余白は維持 */
            box-sizing: border-box;
        }

        .contact-row {
            display: flex;
            flex-direction: column; /* モバイルでは縦並びを維持 */
            /* align-items: center; を削除または flex-start に変更します。
               これにより、contact-row 内の要素が左端に配置され、
               テキストは次の .left/.right の text-align で制御されます。
               もし、contact-row 自体を親要素内で中央に配置したい場合は、
               .contact-info に justify-content: center; などが必要ですが、
               max-widthとmargin: autoで十分です。
            */
            align-items: flex-start; /* ★変更点: 各行の要素を左寄せにする */
            margin: 15px 0; /* 各行の上下余白を同じにする（既存の設定を活かす） */
            gap: 25px; /* .leftと.rightの間の隙間（現在のまま） */
            padding-bottom: 10px; /* 各contact-rowの下に線や隙間を入れる場合 */
            /*border-bottom: 1px solid #eee; /* 各行の下に区切り線を入れる場合（任意） */
            width: 100%; /* .contact-info の幅に合わせて広がる */
            box-sizing: border-box;
        }

        /* 最後のcontact-rowの下線は消す（任意） */
        .contact-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .contact-row .left,
        .contact-row .right {
            text-align: left; /* ★変更点: 要素内のテキスト（電話番号、FAX番号など）を左揃えにする */
            width: 100%; /* 幅は100%を維持 */
            font-size: 1rem; /* フォントサイズは統一 */
        }

        /* リンクのフォントサイズを他のテキストに合わせる（もし個別に設定されていた場合） */
        .contact-info a.bold {
            font-size: inherit; /* 親要素（.left/.right）からフォントサイズを継承する */
        }

        /* 受付時間の特別なスタイル（電話番号の下の赤く小さい文字） */
        .contact-info .red-text {
            color: #EC7473; /* 電話番号下の受付時間を赤色にする（既存の色を再指定） */
        }
        .contact-info .small-text {
            font-size: 0.75rem; /* 受付時間を小さくする（既存のサイズを維持） */
        }

        .contact-info .note {
            text-align: left; /* ★変更点: 受付時間も左揃えにする */
            margin-top: -5px; /* 電話番号と受付時間の間の隙間を維持 */
            margin-left: 50px;
        }
        /* Section 運営会社について
        ---------------------------------------- */
        section.section6 p.bold {
            font-size: 0.9rem;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }
        section .showa-logo {
            width: 80%;
            max-width: 300px;
            padding-bottom: 50px;
        }

        /* FOOTER
        --------------------- */
        footer p {
            font-size: 0.8rem;
        }
    }