@charset "UTF-8";
/*
Theme Name: Hase Cleaning Theme
Description: 長谷クリーニング商会様のオリジナル多言語対応テーマ
Version: 1.0
*/

@charset "UTF-8";

/* =======================================
   ベース設定
======================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Sawarabi Mincho", serif;
}

/* 制御用チェックボックスは非表示 */
.nav-toggle-checkbox {
    display: none;
}

/* =======================================
   ヘッダー全体
======================================= */
.site-header {
    background-color: #f0f0f0;
    padding: 25px 0;
    /* ヘッダー全体の上下余白をスッキリと調整 */
    position: relative;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    /* 左右のブロックの高さを揃える */
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 4%;
    width: 100%;
}

/* =======================================
   左側：ロゴとTEL（上下）
======================================= */
.header-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
    /* 変更：360pxから数値を減らし、ロゴ全体を少し小さくします */
    max-width: 290px;
    container-type: inline-size;
}

.logo img {
    width: 100%;
    /* 親の幅にピッタリ合わせる */
    height: auto !important;
    object-fit: contain;
    display: block;
}

/* aタグを追加したことによる幅の縮小を防ぐ */
.logo a {
    display: block;
    width: 100%;
}

.tel {
    width: 100%;
    text-align: center;

    /* 変更：文字同士の隙間をギュッと詰めます */
    letter-spacing: 0.02em;

    /* 変更：隙間を詰めた分、文字そのもののサイズを大きくして幅に合わせます */
    font-size: 8.8cqi;

    font-weight: bold;
    color: #2A84C3;
    white-space: nowrap;
    line-height: 1;
}


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

/* =======================================
   右側：翻訳ボタン・ナビ・お問い合わせ（上下）
======================================= */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    /* ★ centerからflex-end（下揃え）に変更 */
}
/* --- 右側上段：翻訳ボタン --- */
.header-right-top {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    min-height: 35px;
    /* ★ プラグインが浮いても安全なように高さを確保 */
    margin-bottom: 12px;
    /* ★ 下段（メニュー・ボタン）との間に確実な余白を作る */
    z-index: 50;
}

/* ★ 翻訳プラグイン特有の「浮き（絶対配置）」を強制的に解除し、行儀よく並ばせる */
.header-right-top>* {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}


.lang-btn {
    border: 1px solid #2A84C3;
    background-color: #fff;
    color: #2A84C3;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.lang-btn:hover {
    background-color: #2A84C3;
    color: #fff;
}

/* --- 右側下段：ナビとボタン類 --- */
.header-right-bottom {
    display: flex;
    align-items: flex-end;
    /* ★ centerからflex-endに変更し、電話番号と底辺を合わせる */
    gap: 20px;
}

/* ナビゲーションメニュー */
.nav {
    font-family: "Noto Sans JP", sans-serif;
}

.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    /* 👈 ここを変更します（例：1.6rem や 15px） */
    font-weight: 600;
    margin: 0;
    padding: 0;
    gap: 20px;
    text-align: center !important;
}
.nav-menu a {
    display: block;
    text-decoration: none;
    color: #2A84C3;
    white-space: nowrap;
    transition: opacity 0.3s;
    line-height: 1;
    padding-bottom: 8px;
    /* ★ お問い合わせボタンの丸みと高さを視覚的に合わせる微調整 */
}

.nav-menu a:hover {
    opacity: 0.7;
}

/* お問い合わせボタン */
.btn-gradient-animated {
    color: #2A84C3;
    border: 2px solid #2A84C3;
    background-color: transparent;
    white-space: nowrap;
    padding: 8px 24px;
    font-size: 16px;
    border-radius: 24px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s ease;
    animation: gradientMove 3s ease infinite;
    font-family: "Noto Sans JP", sans-serif;
}

.btn-gradient-animated:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 210, 255, 0.5);
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ハンバーガーボタン（PC時は非表示） */
.hamburger-btn {
    display: none;
}

/* =======================================
   レスポンシブ：1420px以下
======================================= */
@media (max-width: 1420px) {

    /* ナビをドロワー化 */
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(240, 240, 240, 0.98);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease;
        z-index: 99;
    }

    .nav-menu {
        flex-direction: column;
        font-size: 1.6rem;
        gap: 30px;
    }

    /* ハンバーガーボタンを表示（高さ24pxで統一し、お問い合わせボタンと高さを合わせる） */
    .hamburger-btn {
        display: block;
        width: 32px;
        height: 24px;
        position: relative;
        cursor: pointer;
        z-index: 100;
    }

    .hamburger-btn span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #2A84C3;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    .hamburger-btn span:nth-child(1) {
        top: 0;
    }

    .hamburger-btn span:nth-child(2) {
        top: 11px;
        transform: none;
    }

    .hamburger-btn span:nth-child(3) {
        bottom: 0;
    }

    /* メニュー開閉時のアニメーション */
    .nav-toggle-checkbox:checked~.header-container .header-right .header-right-bottom .nav {
        opacity: 1;
        visibility: visible;
    }

    .nav-toggle-checkbox:checked~.header-container .header-right .header-right-bottom .hamburger-btn span:nth-child(1) {
        top: 11px;
        transform: rotate(45deg);
    }

    .nav-toggle-checkbox:checked~.header-container .header-right .header-right-bottom .hamburger-btn span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle-checkbox:checked~.header-container .header-right .header-right-bottom .hamburger-btn span:nth-child(3) {
        bottom: auto;
        top: 11px;
        transform: rotate(-45deg);
    }
}


/* =======================================
   PC表示用（スマホ用ボタンを隠す）
======================================= */
@media (min-width: 501px) {
    .mobile-only-btn {
        display: none;
        /* PC画面ではハンバーガーメニュー内のボタンは非表示 */
    }
}

/* =======================================
   レスポンシブ：500px以下（スマホ表示の最終調整版）
======================================= */
@media (max-width: 500px) {

    /* --- 全体の余白調整 --- */
    .site-header {
        padding: 10px 0;
    }

    .header-container {
        padding: 0 10px;
    }

    /* --- ① ヘッダー上のPC用ボタンを消す --- */
    .header-right-bottom .btn-gradient-animated {
        display: none;
    }

    .header-right-bottom {
        gap: 0;
    }

    /* --- ② ロゴと電話番号の幅を完全に一致させる --- */
    .header-left {
        width: max-content;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .logo {
        width: 100%;
        display: flex;
    }

    .logo img {
        width: 100%;
        height: auto;
        display: block;
    }

    .tel {
        font-size: 10px;
        /* ★11pxから10pxにさらに縮小 */
        text-align: center;
        white-space: nowrap;
        color: #3172b6;
        letter-spacing: 0.5px;
        /* ★文字が小さくなる分、少しだけ間隔を開けて読みやすくしました */
    }

    /* --- ③ 翻訳ボタンの縮小 --- */
    .header-right-top {
        transform: scale(0.8);
        transform-origin: right top;
        white-space: nowrap;
    }

    .header-right-top div,
    .header-right-top li,
    .header-right-top a {
        white-space: nowrap !important;
    }

    /* --- ④ ハンバーガーメニュー内のボタンの見た目調整 --- */
    .mobile-only-btn {
        display: block;
        margin-top: 20px;
        text-align: center;
    }

    .mobile-only-btn .btn-gradient-animated {
        width: 80%;
        margin: 0 auto;
        display: inline-block;
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ==========================================================================
   メインビジュアルのベース設定（スマートフォン表示でのズレを完全リセット）
   ========================================================================== */
.main-visual {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 675px !important;
    background-image: url('image/top-view.jpg');
    background-size: cover;
    background-position: center;

    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: flex-start;

    /* 🛠️ 右端の余白は「常に一切なし」にするため 0 に完全固定 */
    padding-right: 0 !important;
    box-sizing: border-box !important;

    /* 🛠️ これが入ることで、ブラウザが右側にはみ出す計算を強制的にカットします */
    overflow: hidden !important;
}

/* 左側の青いグラデーション */
.main-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 90, 160, 0.85) 0%, rgba(0, 90, 160, 0.4) 30%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

/* -------------------------------------------
   左側：文字エリア（高さを675pxのまま一切動かさない）
------------------------------------------- */
.catch-content-wrapper {
    position: relative;
    z-index: 2;
    flex: 1;

    /* ?? 高さを100%（675px）で強制固定し、他からの上書きを防ぐ */
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    /* ? 文字の位置（上下中央）をスマホでも完全維持 */
}

/* キャッチコピーなどのテキストコンテンツ */
.catch-content {
    padding-left: 8%;
    color: #ffffff;
}

/* -------------------------------------------
   右側：予約ボタン（すべての画面幅・バグを完全封殺する統合版）
------------------------------------------- */
.yoyaku-wrapper {
    position: absolute !important;
    top: 0 !important;
    /* 🌟どんな画面幅・端末でも、メインビジュアル画像の最上部にピタッと固定 */
    right: 0 !important;
    z-index: 98 !important;
    flex-shrink: 0;
}

/* ==========================================================================
   🎯 予約ボタンの最終確定設定（全デバイス共通）
   ========================================================================== */
.btn-yoyaku {
    display: block !important;
    width: 120px !important;
    /* 🌟640px〜PC時で見切れないベストな幅を固定 */
    margin-top: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: opacity 0.3s ease;
    overflow: visible !important;
}

/* ボタン内の画像調整 */
.btn-yoyaku img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.btn-yoyaku:hover {
    opacity: 0.8;
}

------------------------------------------- */ .catch-copy {
    /* スマホ画面に合わせて読みやすい文字サイズに自動可変（位置自体は変わりません） */
    font-size: clamp(1.6rem, 4vw, 2.5rem) !important;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 20px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.sub-copy,
.sub-copy-detail {
    display: block !important;
    width: max-content !important;
    max-width: 75vw;
    background-color: #0070c0;
    color: #ffffff;
    padding: 6px 15px;
    font-size: clamp(0.8rem, 1.5vw, 1rem) !important;
}

.sub-copy {
    margin-bottom: 8px;
}

/* ==========================================
   横幅が1420px以下になった時のスタイル
   ========================================== */
@media screen and (max-width: 1420px) {

    /* お問い合わせボタンとハンバーガーの並び順を調整するため flex に */
    .header-container {
        align-items: flex-end;
    }

    /* -------------------------------------------
       2. ハンバーガーボタン ＆ 精密Xボタン設定（サイズアップ版）
    ------------------------------------------- */
    .hamburger-btn {
        display: block !important;
        /* 🛠️ ボタン全体の丸い領域を 44px から 52px に大きく拡大 */
        width: 52px !important;
        height: 52px !important;
        background: transparent !important;
        border: none;
        cursor: pointer;
        padding: 0;

        position: relative;
        z-index: 10000 !important;

        border-radius: 50%;
        transition: all 0.3s ease;
    }

    /* 🛠️ ボタンが大きくなった分、中心に合わせる位置と線のサイズを調整 */
    .hamburger-btn span {
        display: block;
        position: absolute;
        /* 左右中央（(52px - 28px) / 2 = 12px） */
        left: 12px !important;
        /* 🛠️ 線の長さを 24px から 28px に、太さを 3px から 3.5px に太く大きく */
        width: 28px !important;
        height: 3.5px !important;
        background-color: #2A84C3;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, top 0.3s ease;
    }

    /* 🛠️ ボタンの拡大に合わせて、通常時の3本線の上下間隔をきれいに再計算 */
    .hamburger-btn span:nth-child(1) {
        top: 16px !important;
    }

    /* 1本目 */
    .hamburger-btn span:nth-child(2) {
        top: 24px !important;
    }

    /* 2本目（中央の基準線） */
    .hamburger-btn span:nth-child(3) {
        top: 32px !important;
    }

    /* 3本目 */


    /* -------------------------------------------
       ★メニューが開いた時（.is-open時）のスタイル
    ------------------------------------------- */

    /* メニューが開いたら白丸背景を敷く */
    .is-open .hamburger-btn {
        background-color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        /* 影も少し広げて存在感をアップ */
    }

    .is-open .hamburger-btn span {
        background-color: #2A84C3 !important;
    }

    /* 🛠️ 拡大された新しい中心軸（top: 24px）にすべてを集めて綺麗な「×」を作る */

    /* 1本目を中央（24px）に移動させて右に45度回転 */
    .is-open .hamburger-btn span:nth-child(1) {
        top: 24px !important;
        transform: rotate(45deg) !important;
    }

    /* 2本目（中央）はそのまま消す */
    .is-open .hamburger-btn span:nth-child(2) {
        opacity: 0 !important;
    }

    /* 3本目を中央（24px）に移動させて左に45度回転 */
    .is-open .hamburger-btn span:nth-child(3) {
        top: 24px !important;
        transform: rotate(-45deg) !important;
    }

    /* 3. ナビゲーションメニューを全画面のドロワーに変更（修正版） */
    .nav-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        /* メニュー同士の上下の間隔を少しだけタイトに */

        /* 画面全体を覆う設定 */
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(240, 240, 240, 0.98);
        /* 背景をわずかに濃くして文字を読みやすく */
        z-index: 999;
        transition: right 0.4s ease;

        /* 🎨 文字サイズを1.8remから1.2rem（スマートな大きさ）に縮小 */
        font-size: 1.2rem !important;
    }

    .nav-menu li {
        margin-right: 0;
        width: 100%;
        /* 🛠️ 横幅いっぱいに広げる */
        text-align: center;
    }

    .nav-menu a {
        display: block;
        /* 🛠️ 文字の周りの余白もタップできるようにする */
        padding: 10px 0;
        color: #2A84C3;
        text-decoration: none;
        font-weight: 600;
    }

    /* 4. メニューが開いた時のスタイル（右からスライドイン） */
    .is-open .nav-menu {
        right: 0;
    }

    /* 背景固定用（メニューが開いている時に後ろの画面をスクロールさせない） */
    body.is-open {
        overflow: hidden;
    }



}



/* ==========================================================================
   ? スマートフォン・タブレット用のレスポンシブ設定
   ========================================================================== */
/* ==========================================================================
   📱 スマートフォン・タブレット用のレスポンシブ設定
   ========================================================================== */
@media (max-width: 768px) {
    .main-visual {
        position: relative !important;
        height: auto;
        min-height: 500px;
        overflow-x: hidden !important;
    }

    .mv-top-row {
        justify-content: center;
        padding-top: 20px;
    }

    /* ⚠️【重要】
       以前ここに書いていた「.yoyaku-wrapper { top: 20px !important; }」のような、
       特定の画面幅でボタンを下げる指定を完全に削除しました。
       これにより、どの画面幅になっても「top: 0」が維持され、画像のトップから絶対にズレなくなります。
    */

    /* 🌟純粋に画面幅が狭いスマホ（480px以下など）でボタンを少しコンパクトにする設定のみ残します */
    @media (max-width: 480px) {
        .btn-yoyaku {
            width: 100px !important;
        }
    }

    .mv-center-row {
        align-items: flex-start;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: 0;
    }

    .catch-content {
        padding-left: 5%;
    }

    .catch-copy {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   📱 580px以下（スマホ画面）でのヘッダー・ハンバーガー・Xボタンの完全統合設定
   ========================================================================== */
@media (max-width: 580px) {
    .header {
        padding: 20px 0 !important;
    }

    .header-container {
        padding: 0 3% !important;
        /* 🛠️ 左右の大きな塊同士の下揃え（ベースライン）を強制固定 */
        align-items: flex-end !important;
    }

    /* 🛠️ ロゴとTELを「縦並び」に変形して1行を死守 */
    .logo {
        flex-direction: column !important;
        align-items: flex-start !important;
        /* 左揃え */
        gap: 6px !important;
        /* 上下の隙間 */
    }

    .logo img {
        width: 180px !important;
        /* スマホ用サイズ */
        height: auto !important;
    }

    .tel {
        font-size: 1.1rem !important;
        margin-left: 0 !important;
        /* 左マージンをリセット */
        line-height: 1 !important;
    }

    /* 🛠️ 右側のお問い合わせボタンの文字1行を完全死守 */
    .btn-gradient-animated {
        padding: 4px 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* 🛠️ スマホ時は画面に合わせてコンパクトに縮むように指定 */
    .btn-yoyaku {
        width: clamp(85px, 12vw, 110px) !important;
    }

    /* 🛠️ 通常時のハンバーガーボタン（お問い合わせボタンと下揃えに） */
    .hamburger-btn {
        display: block !important;
        width: 46px !important;
        height: 46px !important;
        margin-bottom: -9px !important;
        /* 👈 お問い合わせボタンと下端を綺麗に揃える */
        margin-right: 5px !important;
    }

    /* ボタン内の3本の線の基本設定 */
    .hamburger-btn span {
        left: 11px !important;
        /* 左右中央配置 */
        width: 24px !important;
        height: 3px !important;
    }

    /* 通常時の三本線の正確な高さ位置 */
    .hamburger-btn span:nth-child(1) {
        top: 15px !important;
    }

    .hamburger-btn span:nth-child(2) {
        top: 22px !important;
    }

    .hamburger-btn span:nth-child(3) {
        top: 29px !important;
    }

    /* -------------------------------------------
       メニューが開いた時（.is-open時）の設定
    ------------------------------------------- */
    .is-open .hamburger-btn {
        background-color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        margin-bottom: -9px !important;
        /* 開いても位置を固定 */
    }

    /* 🛠️ 白丸のど真ん中（top: 22px）に集めて交差させ、〇と×のズレを完全に根絶 */
    .is-open .hamburger-btn span:nth-child(1) {
        top: 22px !important;
        transform: rotate(45deg) !important;
    }

    .is-open .hamburger-btn span:nth-child(2) {
        opacity: 0 !important;
    }

    .is-open .hamburger-btn span:nth-child(3) {
        top: 22px !important;
        transform: rotate(-45deg) !important;
    }

    /* -------------------------------------------
       🎯 メインビジュアル内の青帯テキスト・はみ出し完全修正
       ------------------------------------------- */
    /* 1. 青い背景帯自体の横幅を文字に自動フィットさせる */
    .main-visual .text-box p,
    .main-visual p {
        /* 🛠️【最重要】横幅を固定せず、中の1行の文字の長さに合わせて背景を自動で広げます */
        width: max-content !important;

        /* 🛠️ 画面が小さくなった時に、画面の右端を突き破るのを絶対に防ぐお守り */
        max-width: 100% !important;

        /* 自動改行を禁止して1行を死守 */
        white-space: nowrap !important;

        /* 🎨 文字サイズをスマホ幅に最適化（少しだけ小さくしてさらに収まりを良くします） */
        font-size: clamp(10px, 3vw, 13px) !important;

        /* 青帯内の左右のクッションを程よく調整 */
        padding: 6px 10px !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================================
       Target: メインビジュアル内の青帯テキスト最終決定版（重複バグ解消）
       ========================================================================== */
    .sub-copy,
    .sub-copy-detail {
        /* 🛠️ 自動改行を禁止して絶対に1行を死守 */
        white-space: nowrap !important;

        /* 🛠️ 青い帯の横幅を、文字の長さに合わせて自動フィット */
        width: max-content !important;

        /* 🛠️ 右側の予約ボタンや画面端に絶対にぶつからない最大幅 */
        max-width: 86% !important;

        /* 🛠️ 原因コードの指定を完全に消し去り、2.8vw で確実にスマートに自動縮小させます */
        font-size: clamp(10px, 2.8vw, 12.5px) !important;

        /* 🛠️ 原因コードの広い余白を完全に消し去り、左右を 6px に引き締めてはみ出しをゼロに */
        padding: 5px 6px !important;
        box-sizing: border-box !important;

        overflow: visible !important;
    }
}


/* ==========================================================================
   📱 520px以下でロゴが縦並びになった際の下揃えの維持
   ========================================================================== */
@media (max-width: 520px) {
    .logo {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .hamburger-btn {
        /* ロゴが2段になっても、右側のボタン・ハンバーガーの下揃えラインを崩さない */
        margin-bottom: -6px !important;
    }
}


/* ==========================================================================
   📢 お知らせセクション（PC基準デザイン）
   ========================================================================== */
.news-section {
    width: 100%;
    padding: 60px 0;
    /* 上下のゆったりとした余白 */
    background-color: #ffffff;
    /* 背景を白に固定 */
    text-align: center;
    /* 見出しを中央揃えに */
}

.news-container {
    max-width: 1200px;
    /* 他のコンテンツと横幅のラインを合わせる */
    margin: 0 auto;
    padding: 0 4%;
}

/* 「お知らせ」の見出し */
.news-title {
    font-size: 1.8rem;
    color: #0066b3;
    /* 長谷クリーニング様のブランドブルー */
    margin-bottom: 25px;
    font-weight: bold;
    position: relative;
    display: inline-block;
}

/* 見出しの下にある細い装飾線（必要であれば） */
.news-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: #0066b3;
}

/* お知らせのテキスト周りの1行レイアウト */
.news-list {
    margin-top: 35px;
}

.news-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    /* 🛠️ 全体の基本サイズを 0.95rem から「1.1rem（約17px〜18px相当）」に大きくします */
    font-size: 1.1rem !important;

    color: #333333;
    line-height: 1.6;
}

/* 日付 */
.news-date {
    color: #888888;
    font-family: 'Arial', sans-serif;
}

/* [お知らせ] タグ */
.news-category {
    background-color: #e6f2ff;
    color: #0066b3;

    /* 🛠️ タグの中の文字も 0.8rem から「0.9rem」に大きくします */
    font-size: 0.9rem !important;

    padding: 4px 12px !important;
    /* 文字が大きくなった分、座布団も少し広げます */
    border-radius: 3px;
    font-weight: bold;
}

/* 本文テキスト */
.news-text {
    margin: 0;
    text-align: left;
    /* 🛠️ 太さを少しだけ medium にして視認性を上げたい場合は以下を有効にしてください */
    /* font-weight: 500; */
}



/* =========================================
   お知らせ一覧のテキスト左揃え・中央配置
   ========================================= */
/* リスト全体を包む箱の幅をテキストに合わせ、中央に配置 */
.news-list {
    width: fit-content !important;
    /* 箱のサイズを中身ぴったりにする */
    margin: 0 auto !important;
    /* 画面の中央に配置 */
}

/* 1件ごとのお知らせ（日付とタイトル）の配置設定 */
.news-item {
    display: flex !important;
    /* 日付とタイトルを横に並べる */
    align-items: flex-start;
    /* 上揃えにする */
    justify-content: flex-start;
    /* 左端から並べる */
    gap: 30px;
    /* 日付とタイトルの間のスキマ（★お好みで調整） */
    margin-bottom: 20px;
    /* 下の行とのスキマ（★お好みで調整） */
    text-align: left;
    /* テキストを左揃えにする */
}

/* 日付部分の設定（画面が狭くなっても改行や縮小させない） */
.news-date {
    flex-shrink: 0;
}

/* スマホ表示などで画面が狭くなった場合の調整 */
@media screen and (max-width: 768px) {
    .news-list {
        width: 100% !important;
        /* スマホでは横幅いっぱいに広げる */
        padding: 0 20px;
        /* 画面の左右に少し余白を作る */
        box-sizing: border-box;
    }

    .news-item {
        gap: 15px;
        /* スマホでは日付とタイトルの隙間を少し狭くする */
    }
}



/* ==========================================================================
   📱 スマホ表示（580px以下）のサイズも合わせて調整
   ========================================================================== */
@media (max-width: 580px) {
    .news-section {
        padding: 40px 0;
    }

    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: 90%;
        margin: 0 auto;

        /* 🛠️ スマホでも小さくなりすぎないよう、ベースを 1rem に引き上げます */
        font-size: 1rem !important;
    }

    .news-text {
        /* 🛠️ スマホ時の本文サイズを 0.9rem から「1rem」に大きくします */
        font-size: 1rem !important;
    }
}




/* ==========================================================================
   🏢 「長谷クリーニングとは」セクション（高さ可変・レスポンシブ完全版）
   ========================================================================== */
.about-section {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    text-align: center !important;

    /* 🌊 背景画像の設定 */
    background-image: url('image/section03_bg.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    /* 🛠️【変更ポイント：高さを可変に】
       固定値（613px）を完全に廃止し、中身の文字量に合わせて自動伸縮（auto）させます。
       ただし、文字が極端に少ない時でも見栄えを保つため「最低限の高さ（min-height）」を500pxに設定します。 */
    height: auto !important;
    max-height: none !important;
    min-height: 500px !important;

    /* 🎨【上下の余白バランス】
       上側に 60px の余白をとり、下側はコンタクトボードが半分はみ出るエリアを考慮して
       広めの 120px のパディングを敷くことで、文字量に関わらず美しい上下バランスを維持します。 */
    padding: 60px 0 120px 0 !important;

    /* 🛠️【重要】下の次のセクションとの間をしっかり空けるための余白 */
    margin-bottom: 120px !important;

    overflow: visible !important;
}

/* 🏢 セクション大見出し */
.about-title {
    font-size: 2rem;
    color: #005596;
    font-weight: bold;
    margin: 0 0 0 0 !important;
}

/* ==========================================================================
   🏢 白いコンタクトボード本体（PC基準ベース）
   ========================================================================== */
.about-contact-board {
    max-width: 580px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 85, 150, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);

    /* 🛠️ 下側のパディングを0にし、テキストのマージンで底辺を確定させます */
    padding: 24px 40px 0 40px !important;

    /* 背景画像の下端に半分はみ出させる設定 */
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5;
    box-sizing: border-box;
}

/* ==========================================================================
   ⬜ 半透明の白い背景ボード（文字量に合わせて上下左右に自動伸縮）
   ========================================================================== */
.about-lead-text {
    max-width: 850px;
    width: 96%;
    /* 見出しとの間のジャストな余白 */
    margin: 32px auto 0 auto !important;

    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 85, 150, 0.05);
    box-sizing: border-box;

    /* 🛠️【左右上下の黄金比パリディング】
       上下に 40px、左右に 50px の肉厚な余白を持たせます。
       高さを指定しない（height: auto）ことで、文字が増えればこの余6%;白を保ったまま、
       ボードが下に向かって綺麗にモチっと伸びてくれます。 */
    padding: 40px 50px !important;

}

/* ボード内の文章設定 */
.about-lead-text p {
    font-size: 1.5rem;
    color: #333333;
    line-height: 1.8 !important;
    text-align: center;
    margin: 0 0 16px 0 !important;
    font-weight: 600;
}

.about-lead-text p:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   🧱 ボード内1行目：ロゴと会社名（横並びの復旧）
   ========================================================================== */
.board-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 12px !important;
}

/* 🛠️ 巨大化していたロゴのサイズを強制固定 */
.board-logo {
    height: 24px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.board-company-name {
    font-size: 1.4rem;
    color: #005596;
    font-weight: bold;
    font-family: "Georgia", "Noto Serif JP", serif;
    white-space: nowrap !important;
}

/* ==========================================================================
   📞 ボード内2行目：電話番号とアイコン（横並びの復旧）
   ========================================================================== */
.board-tel-row {
    margin-bottom: 5px !important;
    text-align: center !important;
}

.board-tel-link {
    font-size: 2.5rem !important;
    font-weight: bold !important;
    color: #000000 !important;
    text-decoration: none !important;
    font-family: "Arial", sans-serif;

    /* 🛠️ 電話アイコンと数字を、隙間を空けて綺麗に水平に横並びさせる設定 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

/* 🛠️ 縦に分裂して巨大化していた電話アイコンを文字にジャストフィットさせます */
.board-tel-icon {
    height: 32px !important;
    width: auto !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   🕒 ボード内3行目：受付時間（ボタンとの距離の土台）
   ========================================================================== */
.board-time-text {
    font-size: 0.9rem;
    color: #005596;
    letter-spacing: 0.02em;

    /* 🛠️ ボタンの真芯と白枠の底辺をピタッと重ねるためのジャストな余白 */
    margin: 0 0 30px 0 !important;
    display: block !important;
    text-align: center !important;
}

/* ==========================================================================
   ✉️ ボード内4行目：メールボタンを配置する基準エリア
   ========================================================================== */
.board-cta-space {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 0 !important;
}

/* 🛠️ メールボタン本体（改行を永久に禁止し、白枠下辺にタテの中心を完全ロック） */
.btn-board-cta {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: max-content !important;
    white-space: nowrap !important;
    padding: 12px 36px !important;

    background-color: #0077c7;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0, 119, 199, 0.25) !important;

    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-board-cta:hover {
    background-color: #0066b3;
    transform: translate(-50%, -50%) translateY(-2px) !important;
}

/* ==========================================================================
   📱 スマホ表示（580px以下）のレスポンシブ完全対応（バグ修正版）
   ========================================================================== */
@media (max-width: 580px) {

    /* 🏢 セクション全体の調整 */
    .about-section {
        height: auto !important;
        max-height: none !important;
        padding-top: 40px !important;
        /* 下のはみ出るコンタクトボードの余白バランス */
        margin-bottom: 140px !important;
    }

    /* ⬜ 上の半透明背景ボード
       下の白いボードと外枠の幅を「92%」で完全に一致させます */
    .about-lead-text {
        width: 92% !important;
        max-width: 92% !important;
        /* 左右のマージンを auto にして画面の中央に配置 */
        margin: 24px auto 0 auto !important;

        /* ボードの内側余白を下のボード（15px）と揃えて、中のテキストの開始位置も同期します */
        padding: 30px 15px !important;
    }

    .about-lead-text p {
        font-size: 0.9rem;
        line-height: 1.6 !important;
        text-align: justify !important;
        /* 左右の端をピシッと揃えて美しく */
        margin-bottom: 12px !important;
    }

    /* 📞 下の白いコンタクトボード
       上の半透明ボードと全く同じ幅「92%」に固定します */
    .about-contact-board {
        width: 92% !important;
        max-width: 92% !important;
        left: 50% !important;
        /* 左右のパディングを上のボードと同じ「15px」に統一 */
        padding: 20px 15px 0 15px !important;
        transform: translate(-50%, -50%) !important;
    }

    /* コンタクトボード内のレスポンス対応（ここは以前のままでOKです） */
    .board-top-row {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    .board-logo {
        height: 28px !important;
        margin: 0 auto !important;
    }

    .board-company-name {
        font-size: 1.25rem !important;
    }

    .board-tel-link {
        font-size: 1.8rem !important;
        gap: 8px !important;
    }

    .board-tel-icon {
        height: 24px !important;
    }

    .board-time-text {
        font-size: 0.8rem;
        margin-bottom: 24px !important;
    }

    .btn-board-cta {
        padding: 10px 24px !important;
        font-size: 0.9rem !important;
    }

    /* 🧱 ロゴと会社名：画面幅が狭くなったら上：ロゴ、下：店名に縦並び */
    .board-top-row {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    .board-logo {
        height: 28px !important;
        margin: 0 auto !important;
    }

    .board-company-name {
        font-size: 1.25rem !important;
    }

    /* 📞 電話番号リンク */
    .board-tel-link {
        font-size: 1.8rem !important;
        gap: 8px !important;
    }

    .board-tel-icon {
        height: 24px !important;
    }

    /* 🕒 受付時間テキスト */
    .board-time-text {
        font-size: 0.8rem;
        margin-bottom: 24px !important;
    }

    /* ✉️ メールボタン */
    .btn-board-cta {
        padding: 10px 24px !important;
        font-size: 0.9rem !important;
    }

}






/* ==========================================================================
   📝 ブログ（BLOG）セクション（PC基準）
   ========================================================================== */
.blog-section {
    width: 100%;
    padding: 80px 0;
    background-color: #ffffff;
    box-sizing: border-box;
}

.blog-inner {
    max-width: 1100px;
    /* 全体のコンテンツ幅に合わせます */
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* 📝 セクションタイトル（ブログ ＋ 下線） */
.blog-header {
    text-align: center;
    margin-bottom: 60px;
}

.blog-main-title {
    font-size: 2.2rem;
    color: #005596;
    font-weight: bold;
    margin: 0 0 15px 0;
    letter-spacing: 0.05em;
}

.blog-title-line {
    width: 50px;
    height: 3px;
    background-color: #005596;
    margin: 0 auto;
}

/* 📝 ブログカード（左右のレイアウト） */
.blog-card {
    display: flex !important;
    align-items: flex-start !important;
    /* 上揃えで見本通りに */
    gap: 50px !important;
    /* 画像とテキストの間の余白 */
}

/* 📷 左側：画像ボックス */
.blog-image-box {
    flex: 0 0 50% !important;
    /* 横幅を綺麗に50%（半分）に固定 */
    max-width: 50%;
}

.blog-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover;
}

/* ✍️ 右側：テキストコンテンツ */
.blog-content-box {
    flex: 1 !important;
    display: flex;
    flex-direction: column;
}

/* 記事タイトル ＋ 下線 */
.blog-item-title {
    font-size: 1.6rem;
    color: #000000;
    font-weight: bold;
    margin: 0 0 20px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #777777 !important;
    /* タイトル下のグレーの線 */
    line-height: 1.4;
}

/* 記事本文 */
.blog-item-text p {
    font-size: 1rem;
    color: #333333;
    line-height: 1.75 !important;
    margin: 0 0 25px 0 !important;
    text-align: justify;
    /* 両端揃えでブロックを美しく */
}

/* 🔗 もっと見るリンク */
.blog-more-link {
    font-size: 1.1rem;
    color: #0077c7;
    font-weight: bold;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: max-content;
    transition: color 0.2s ease;
}

.blog-more-link:hover {
    color: #005596;
}

/* ＞ 矢印アイコンをCSSで綺麗に再現 */
.blog-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #0077c7;
    border-right: 2px solid #0077c7;
    transform: rotate(45deg);
    /* 45度傾けて矢印「＞」にします */
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.blog-more-link:hover .blog-arrow {
    border-color: #005596;
    transform: rotate(45deg) translateX(2px);
    /* ホバー時にちょっと右に動く演出 */
}







@media (max-width: 580px) {

    /* 📝 ブログセクション（スマホ用調整） */
    .blog-section {
        padding: 50px 0;
    }

    .blog-inner {
        padding: 0 20px;
    }

    .blog-main-title {
        font-size: 1.8rem;
    }

    /* 🛠️ スマホでは画像を上、テキストを下に縦並び（column）に変更 */
    .blog-card {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .blog-image-box {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .blog-item-title {
        font-size: 1.3rem;
        margin-bottom: 15px !important;
        padding-bottom: 8px !important;
    }

    .blog-item-text p {
        font-size: 0.95rem;
        margin-bottom: 20px !important;
    }

    .blog-more-link {
        font-size: 1rem;
    }
}




/* ==========================================================================
   📅 オンライン予約システムセクション（PC基準）
   ========================================================================== */

.reserve-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* 📝 セクションタイトル */
.reserve-header {
    text-align: center;
    margin-bottom: 50px;
}


.reserve-title-line {
    width: 50px;
    height: 3px;
    background-color: #005596;
    margin: 0 auto 20px auto;
}

.reserve-sub-lead {
    font-size: 1.05rem;
    color: #555555;
    margin: 0;
}

/* 🧱 3ステップ配置（PCは横並び3カラム） */
.reserve-steps {
    display: flex !important;
    justify-content: space-between !important;
    gap: 30px !important;
    margin-bottom: 50px !important;
}

/* 各ステップのカードスタイル */
.reserve-step-card {
    flex: 1 !important;
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 85, 150, 0.04);
    border: 1px solid #e1ebf4;
    text-align: center;
    box-sizing: border-box;
}

.step-num {
    font-size: 0.9rem;
    font-weight: bold;
    color: #0077c7;
    background-color: #e6f3fc;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
    letter-spacing: 0.05em;
}

.step-title {
    font-size: 1.25rem;
    color: #005596;
    font-weight: bold;
    margin: 0 0 12px 0;
}

.step-text {
    font-size: 0.95rem;
    color: #444444;
    line-height: 1.6;
    margin: 0;
    text-align: left;
    /* 説明文は左揃えで読みやすく */
}

/* 🔘 予約ボタンの配置エリア */
.reserve-cta-wrap {
    text-align: center;
}

/* 大きくて押しやすいグラデーションの予約ボタン */
.btn-reserve-launch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;

    background: linear-gradient(135deg, #0077c7 0%, #005596 100%) !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: bold;
    text-decoration: none !important;

    padding: 18px 48px !important;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(0, 85, 150, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-reserve-launch:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 85, 150, 0.3);
}

.btn-reserve-launch i {
    font-size: 1.3rem;
}



/* ==========================================================================
   📅 オンライン予約システムセクション（背景デザイン・100%完全再現版）
   ========================================================================== */
.reserve-section {
    width: 100%;

    /* 🎨【超高等レイヤー技】
       1. 上層（1つ目のグラデーション）：
          上半分（0%〜50%）を、ベース色（#cbe6fa）の単色で完全に塗りつぶしてマスクします。
       2. 中層（2つ目のグラデーション）：
          左下の領域（縦50%〜100%）に、左端から中央（50%）に向かって、
          色がじんわりと薄く（#e6f3fcへ）変化する横方向のグラデーションを配置します。
          中央（50%）を越えた右側は透明（transparent）にして最下層を露出させます。
       3. 下層（3つ目のグラデーション）：
          セクション全体のベースとして、右下の単色（#cbe6fa）を全面に敷き詰めます。
    */
    background:
        linear-gradient(180deg, #cbe6fa 0%, #cbe6fa 50%, transparent 50%),
        linear-gradient(90deg, #cbe6fa 0%, #e6f3fc 50%, transparent 50%),
        linear-gradient(90deg, #cbe6fa 0%, #cbe6fa 100%) !important;

    padding: 80px 0 !important;
    box-sizing: border-box;
    text-align: center !important;
}

.reserve-inner {
    max-width: 900px;
    /* テキストが広がりすぎない見本通りのジャストな幅 */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 📝 見出し部分 */
.reserve-header {
    margin-bottom: 35px !important;
}

.reserve-sub-title {
    font-size: 1.2rem !important;
    color: #005596 !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: 0.05em;
}

/* ==========================================================================
       📅 オンライン予約システム（スマホ改行崩れ修正版）
       ========================================================================== */

/* 🛠️【最重要】スマホ時に見出しを「1行」に収める調整 */
/* PC時は他の見出し（H2）と完全にサイズ・色を統一 */
.reserve-main-title {
    font-size: 2.2rem !important;
    /* 他のセクションのH2とサイズを統一 */
    color: #005596 !important;
    /* ブランドブルーに固定 */
    font-weight: bold;
    margin: 0 !important;
    letter-spacing: 0.03em;
}

/* ✍️ 説明文部分 */
.reserve-text-box {
    max-width: 850px;
    /* 横幅を少し絞って見本の3行前後のバランスに */
    margin: 0 auto 50px auto !important;
}

.reserve-text-box p {
    font-size: 1.5rem !important;
    font-weight: 300;
    /* color: #333333 !important;  */
    color: #005596 !important;.
    line-height: 2.4 !important;
    /* margin: 0 !important; */
    text-align: left !important;
    /* 見本通りのきれいな左揃え */
    letter-spacing: 0.09em;
}

/* 🔘 ボタン・リンクエリア */
.reserve-action-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    /* ボタンと下のテキストリンクの間の隙間 */
}

/* 「ログインへ」ボタン */
.btn-reserve-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 200px !important;
    /* 見本画像に合わせたスマートな幅 */
    padding: 14px 0 !important;

    background-color: #0077c7 !important;
    /* 長谷クリーニングブランドのブルー */
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 50px !important;
    /* しっかり丸まったカプセル型 */

    /* ほんのり浮き出るような、見本の綺麗なシャドウを再現 */
    box-shadow: 0 4px 12px rgba(0, 85, 150, 0.15) !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-reserve-login:hover {
    background-color: #005596 !important;
    transform: translateY(-1px) !important;
}

/* 「新規登録はこちら」リンク */
.reserve-register-link {
    font-size: 0.95rem !important;
    color: #005596 !important;
    text-decoration: none !important;
    font-weight: bold;
    transition: color 0.2s ease;
}

.reserve-register-link:hover {
    color: #0077c7 !important;
    text-decoration: underline !important;
    /* ホバー時に下線で分かりやすく */
}



@media (max-width: 580px) {

    /* 📅 オンライン予約システム（スマホ用調整） */
    .reserve-section {
        padding: 50px 0 !important;
    }

    .reserve-sub-title {
        font-size: 1.05rem !important;
    }

    /* 🛠️ スマホ表示（580px以下）の時も、色を維持したまま1行に自動縮小 */
    .reserve-main-title {
        font-size: 1.35rem !important;
        color: #005596 !important;
        /* スマホ側でもブレずに色を固定 */
        white-space: nowrap !important;
        /* 2行への改行をブロック */
        line-height: 1.3 !important;
    }

    .reserve-text-box {
        margin-bottom: 30px !important;
    }

    .reserve-text-box p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-align: justify !important;
        /* スマホの端っこで文字がガタつかないように綺麗に整えます */
    }

    .btn-reserve-login {
        width: 180px !important;
        /* スマホ画面に合わせて少しだけコンパクトに */
        padding: 12px 0 !important;
        font-size: 1rem !important;
    }
}



/* ==========================================================================
   💰 料金表セクション（背景ボード・マージン最適化版）
   ========================================================================== */
/* 最外枠：画面いっぱいに広がるラッパー（背景は白などでリセット） */
.price-outer-wrapper {
    width: 100%;
    background-color: #ffffff !important;
    padding: 60px 0 !important;
    /* ボードの上下にできるサイト全体の余白 */
    box-sizing: border-box;
}

/* ⬜ グレーベージュの独立したボード（横幅を制限して左右にマージンを作る） */
.price-section {
    width: 92% !important;
    /* 画面の端まで広げず、左右に均等なマージンを確保 */
    max-width: 1100px;
    /* 広がりすぎない上限を設定 */
    margin: 0 auto !important;
    /* 左右マージンを自動計算して完全中央寄せ */
    /* background-color: #dbdbdb !important; */
    background-color: #cbe6fa !important;
    padding: 80px 0 !important;
    /* ボード内部の上下のゆとり */
    border-radius: 8px !important;
    /* ほんの少し角を丸めるとなじみが良くなります */
    box-sizing: border-box;
    text-align: center !important;
}

.price-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 60px;
    /* ボード内側左右の余白 */
    box-sizing: border-box;
}

.price-main-title {
    font-size: 2.2rem !important;
    font-weight: bold;
    color: #005596;
    margin: 0 0 60px 0 !important;
    text-align: center !important;
}

/* 🧱 料金グリッド（PC 2列） */
.price-grid {
    display: flex !important;
    justify-content: space-between !important;
    gap: 80px !important;
    margin-bottom: 50px !important;
}

.price-column {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

.price-item {
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
}

.price-name {
    font-size: 1.1rem !important;
    /* color: #333333 !important; */
    color: #005596;
    font-weight: bold;
    white-space: nowrap !important;
}

.price-dots {
    flex-grow: 1 !important;
    border-bottom: 2px dotted #999999 !important;
    margin: 0 12px 6px 12px !important;
}

.price-amount {
    font-size: 1.15rem !important;
    color: #333333 !important;
    font-weight: bold;
    white-space: nowrap !important;
}

/* 翻訳の強制無効化 */
.notranslate,
.notranslate * {
    -webkit-translate: no !important;
    translate: no !important;
}


/* 金額エリア全体 */
.price-amount {
    display: flex;
    justify-content: flex-end;
    /* 全体を右端に寄せる */
}

/* 数字部分 */
.price-number {
    text-align: right;
}

/* 「～」が入る部分（透明になっても幅は維持される） */
.price-suffix {
    /* 特別な幅指定は不要です。文字そのものが幅を決定します。 */
}


/* 🔘 お見積りボタン */
.price-cta-wrap {
    margin-top: 50px !important;
}

.btn-price-quote {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #0077c7 !important;
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: bold;
    text-decoration: none !important;
    padding: 15px 45px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-price-quote:hover {
    background-color: #0077c7 !important;
    transform: translateY(-2px);
}


@media screen and (max-width: 1000px) {
    .price-grid {
        display: flex !important;
        flex-direction: column !important;
        /* ←【重要】強制的に縦積みにする */
    }

    .price-column {
        width: 100% !important;
        /* ←【重要】横幅を100%にする */
        max-width: 100% !important;
        margin-bottom: 40px;
    }

    .price-column:last-child {
        margin-bottom: 0;
    }
}


@media (max-width: 580px) {

    /* 💰 料金表セクション（スマホ用調整） */
    .price-outer-wrapper {
        padding: 30px 0 !important;
    }

    .price-section {
        width: 92% !important;
        /* スマホでも左右のマージン比率をキープ */
        padding: 50px 0 !important;
    }

    .price-inner {
        padding: 0 20px !important;
        /* スマホ時のボード内側左右余白 */
    }

    .price-main-title {
        font-size: 1.8rem !important;
        margin-bottom: 40px !important;
    }

    .price-grid {
        flex-direction: column !important;
        gap: 30px !important;
        margin-bottom: 40px !important;
    }

    .price-column {
        gap: 16px !important;
    }

    .price-name {
        font-size: 1.0rem !important;
    }

    .price-amount {
        font-size: 1.05rem !important;
    }

    .btn-price-quote {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
    }
}




/* ==========================================================================
   💼 サービス案内セクション（料金表完全同期版・PC基準）
   ========================================================================== */
/* 最外枠：料金表と同じく白背景でリセット */
.service-outer-wrapper {
    width: 100%;
    background-color: #ffffff !important;
    padding: 40px 0 !important;
    /* 料金表との間のバランスを取るための上下マージン */
    box-sizing: border-box;
}

/* ⬜ 料金表と完全に一致させたグレーベージュの独立ボード */
.service-section {
    width: 92% !important;
    /* 料金表と1ミリの狂いもなく幅を同期 */
    max-width: 1100px;
    margin: 0 auto !important;
    /* 中央寄せ */
    background-color: #cbe6fa !important;


    /* 料金表と共通のグレーベージュ */
    padding: 80px 0 !important;
    /* ボード内部の上下のゆとり */
    border-radius: 8px !important;
    /* 料金表と同じ角丸 */
    box-sizing: border-box;
    text-align: center !important;
}

.service-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

/* 🧱 3カラムレイアウト */
.service-grid {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.service-card {
    flex: 1 !important;
    padding: 0 20px !important;
    text-align: center !important;
    box-sizing: border-box;
    /* 背景色に合わせて、区切り線の色を少し濃いグレーにして馴染ませます */
    border-right: 1px solid #999999 !important;
    margin: 0 auto;
}

.service-card:last-child {
    border-right: none !important;
}

/* 🖼 * アイコン画像エリア */
.service-icon-wrap {
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 24px !important;
}

.service-icon {
    height: auto !important;
    max-height: 80px !important;
    width: auto !important;
}

/* 🏷 * カード内見出し */
.service-card-title {
    font-size: 1.4rem !important;
    color: #0073cc !important;
    font-weight: bold !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: 0.05em;
}

.side-bar {
    display: flex;
    /* Flexboxを有効化して横並びにする */
    align-items: center;
    /* 【重要】縦方向の中心に揃える */
    justify-content: center;
    /* 横方向の中央に配置する */
    font-weight: bold;
    color: #0073cc;
    text-align: center;
    /* 改行されたテキスト自身も中央揃えにする */
    margin-bottom: 20px;
}

/* 両サイドに細い線を添える */
.side-bar::before,
.side-bar::after {
    content: "";
    width: 14px;
    /* 線の長さ */
    height: 2px;
    /* 線の太さ */
    background-color: #0073cc;
    margin: 0 4px;
    /* テキストと線の距離（お好みで調整してください） */
    flex-shrink: 0;
    /* 【重要】画面が狭くても線が潰れたり消えたりしないようにする */
}


/* ✍️ 説明テキスト */
.service-card-text {
    /* font-size: 0.95rem !important; */
    font-size: 0.95rem !important;
    color: #333333 !important;
    line-height: 1.7 !important;
    /* text-align: justify !important; */
    width: 100%;
    margin: 0 auto !important;
}




@media (max-width: 580px) {

    /* 💼 サービス案内セクション（スマホ用完全同期調整） */
    .service-outer-wrapper {
        padding: 20px 0 !important;
    }

    .service-section {
        width: 92% !important;
        /* スマホでも料金表や他のボードと横幅を完全同期 */
        padding: 50px 0 !important;
    }

    .service-inner {
        padding: 0 20px !important;
    }

    /* 🛠️ スマホ時は縦1列にカラム落ち */
    .service-grid {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .service-card {
        width: 100% !important;
        padding: 0 10px !important;
        border-right: none !important;
        /* 背景色に馴染むうっすらとした区切り線に変更 */
        border-bottom: 1px solid #b5b5b5 !important;
        padding-bottom: 30px !important;
    }

    .service-card:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .service-icon-wrap {
        margin-bottom: 16px !important;
        height: 80px !important;
    }

    .service-card-title {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }
}





/* ==========================================================================
   👥 採用情報セクション（PC基準・見本完全準拠）
   ========================================================================== */
.recruit-section {
    width: 100%;
    padding: 90px 0 !important;
    background-color: #ffffff !important;
    box-sizing: border-box;
}

.recruit-inner {
    max-width: 1100px;
    /* 他の主要セクションと横幅のラインを統一 */
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* 📝 セクション見出し ＋ アクセント下線 */
.recruit-header {
    text-align: center !important;
    margin-bottom: 60px !important;
}

.recruit-main-title {
    font-size: 2.2rem !important;
    color: #005596 !important;
    /* 統一のブランドブルー */
    font-weight: bold;
    margin: 0 0 15px 0 !important;
    letter-spacing: 0.05em;
}

.recruit-title-line {
    width: 50px;
    height: 3px;
    background-color: #005596;
    margin: 0 auto;
}

/* 🧱 求人カードの左右レイアウト（PC 2列） */
.recruit-grid {
    display: flex !important;
    justify-content: space-between !important;
    gap: 50px !important;
    /* カードとカードの間の適切な余白 */
}

/* 📄 求人カード個別スタイル */
.recruit-card {
    flex: 1 !important;
    background: #ffffff !important;
    padding: 45px 40px !important;
    /* 見本通りのゆったりとした肉厚パディング */
    border-radius: 4px;
    /* わずかに角を丸めて上品に */

    /* 見本画像通りの、ふんわりと浮き出る綺麗なシャドウ */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #eeeeee;

    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* カード内メインタイトル ＋ 細い下線 */
.recruit-card-title {
    font-size: 1.5rem !important;
    color: #000000 !important;
    font-weight: bold;
    margin: 0 0 24px 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #777777 !important;
    /* タイトル下のシャープな線 */
}


/* 採用情報が1件だけの場合の最大幅指定（2件並びと同じ幅に固定） */
.recruit-card:only-child {
    /* (全体の100% - 余白50px) ÷ 2 で、2件並んだ時と全く同じ幅になります */
    max-width: calc((100% - 50px) / 2) !important;
}

/* 採用情報が0件の場合の最大幅指定（2件並びと同じ幅に固定） */
.no-recruit {
    grid-column: 1 / -1;
    text-align: center;
    width: 100%;
}

/* 「業務内容」ラベル */
.recruit-sub-label {
    font-size: 1.1rem !important;
    color: #333333 !important;
    font-weight: bold;
    margin: 0 0 16px 0 !important;
}

/* 本文テキスト */
.recruit-card-text {
    font-size: 0.5rem !important;
    color: #333333 !important;
    line-height: 1.75 !important;
    margin: 0 0 40px 0 !important;
    text-align: justify;
    /* 左右端を美しく揃えます */
}

/* 🔗 お問い合わせリンク */
.recruit-link {
    font-size: 1.1rem !important;
    color: #0077c7 !important;
    font-weight: bold;
    text-decoration: none !important;
    margin-top: auto !important;
    /* ボタン位置を常にカード最下部に固定 */

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    /* テキストと矢印を両端に離す見本通りの配置 */
    width: 100% !important;
    transition: color 0.2s ease;
}

.recruit-link:hover {
    color: #005596 !important;
}

/* ＞ 矢印の再現 */
.recruit-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #0077c7;
    border-right: 2px solid #0077c7;
    transform: rotate(45deg);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.recruit-link:hover .recruit-arrow {
    border-color: #005596 !important;
    transform: rotate(45deg) translateX(3px);
    /* ホバー時にスッと右に動く */
}


@media (max-width: 580px) {

    /* 👥 採用情報セクション（スマホ用調整） */
    .recruit-section {
        padding: 60px 0 !important;
    }

    .recruit-inner {
        padding: 0 20px !important;
    }

    .recruit-main-title {
        font-size: 1.8rem !important;
    }

    /* 🛠️【最重要】スマホ時はカードを縦1列（column）にカラム落ちさせます */
    .recruit-grid {
        flex-direction: column !important;
        gap: 30px !important;
        /* 縦並びになったカード同士の隙間 */
    }

    .recruit-card {
        padding: 30px 24px !important;
        /* スマホ画面に合わせてカード内の余白をスマートに */
    }

    .recruit-card-title {
        font-size: 1.3rem !important;
        margin-bottom: 18px !important;
        padding-bottom: 10px !important;
    }

    .recruit-sub-label {
        font-size: 1.0rem !important;
        margin-bottom: 12px !important;
    }

    .recruit-card-text {
        font-size: 0.9rem !important;
        margin-bottom: 30px !important;
    }

    .recruit-link {
        font-size: 1.0rem !important;
    }

        /* スマホ表示時は1件でも横幅いっぱいに広げる */
        .recruit-card:only-child {
            max-width: 100% !important;
        }
}





/* 全体のコンテナ（上のカード幅に自動で揃うよう max-width を調整） */
.cta-container {
    width: 100%;
    max-width: 660px;
    /* 上のカードの幅に合わせてこの数値を適宜微調整してください */
    box-sizing: border-box;
    margin: 40px auto;
    padding: 40px 24px;
    background-color: #ffffff;
    border: 1px solid #e1f3ff;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 110, 186, 0.1);
    text-align: center;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    overflow: hidden;
    /* 万が一のはみ出しを防ぐ */
}

/* タイトル：お問い合わせ */
.cta-title {
    color: #00467f;
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 20px 0;
    letter-spacing: 0.1em;
    font-family: "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

/* 電話番号エリア */
.cta-phone-wrap {
    margin-bottom: 25px;
    width: 100%;
}

/* ★変更点：幅が狭くなっても絶対に1行で縮小させる魔法の指定 */
.cta-phone-num {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-family: "Arial Black", "Impact", "Arial Rounded MT Bold", "Hiragino Kaku Gothic StdN", sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;

    /* レスポンシブで文字を自動縮小させる設定 */
    font-size: clamp(28px, 6.5vw, 52px);
    /* 画面幅に応じて 28px〜52px の間で自動可変 */
    width: 100%;
    white-space: nowrap;
    /* 絶対に自動改行させない */
}

/* ★変更点：数字テキスト単体の制御 */
.phone-text {
    display: inline-block;
}

/* ★変更点：アイコンも数字の縮小（フォントサイズ）に連動して小さくなるよう「em」単位に変更 */
.phone-icon {
    display: inline-block;
    width: 1em;
    /* フォントサイズ（数字の高さ）と常に同じ大きさに連動 */
    height: 1em;
    /* フォントサイズ（数字の高さ）と常に同じ大きさに連動 */
    margin-right: 0.3em;
    flex-shrink: 0;
    /* アイコンが横に潰れるのを防ぐ */
    background-color: #0086cc;

    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.15 15.15 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.11-.27c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.26 1.12l-2.19 2.1z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.15 15.15 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.11-.27c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.26 1.12l-2.19 2.1z'/></svg>") center / contain no-repeat;
}

/* 受付時間 */
.cta-time {
    color: #00467f;
    font-size: 14px;
    margin: 12px 0 0 0;
    font-family: "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

/* ボタンのレイアウト（スマホ時は縦並び、PC時は横並び） */
.cta-btn-wrap {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-direction: column;
    /* 基本は縦並び（スマホ用） */
    align-items: center;
    margin-top: 30px;
}

/* ボタン共通 */
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    /* スマホ画面で押しやすい少しワイドなサイズ */
    height: 54px;
    border-radius: 27px;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.btn-mail {
    background: linear-gradient(180deg, #009be3 0%, #007cb8 100%);
}

.btn-reserve {
    background: linear-gradient(180deg, #004c83 0%, #00365d 100%);
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

/* タブレット・PCサイズ以上のときの見栄え（横並びに戻す） */
@media (min-width: 640px) {
    .cta-btn-wrap {
        flex-direction: row;
        /* 横並びに戻す */
    }

    .cta-btn {
        width: 320px !important;
    }
}







/* フッター全体の背景色と文字色のベース設定 */
.site-footer {
    background-color: #dfebf6;
    padding: 50px 0;
    color: #00467f;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 全体の最大横幅 */
.footer-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 上揃えに変更（バグ防止） */
    gap: 60px;
}

/* 左側メインエリア */
.footer-main-content {
    flex: 1;
}

/* ★変更点：写真とマップの入る枠の高さを「260px」に強制固定 */
.footer-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    height: 260px;
    /* 右側のメニューリストの総高さにピッタリ合わせました */
}

/* 各要素の横幅割り当て */
.footer-info {
    width: 36%;
    height: 100%;
}

.footer-photo {
    width: 26%;
    height: 100%;
}

.footer-map {
    width: 38%;
    height: 100%;
}

/* 見出しのライン */
.footer-heading {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 25px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #99b6d6;
    height: 24px;
}

/* ロゴのサイズ制限 */
.footer-logo-wrap {
    margin-bottom: 20px;
}

.footer-logo {
    max-width: 240px;
    height: auto;
    display: block;
}

/* 店舗名 */
.footer-shop-name {
    font-size: 18px !important;
    font-weight: normal;
    margin: 0 0 15px 0;
    font-family: "YuMincho", "Hiragino Mincho ProN", serif;
}

/* テキストリスト */
.footer-address-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-address-list li {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 5px;
}

.footer-address-list .mt-15 {
    margin-top: 15px;
}

/* ★写真とマップの白い外箱を260pxいっぱいに固定 */
.footer-img-box,
.footer-map-box {
    width: 100%;
    height: 260px;
    /* メニューの高さ（260px）と完全に一致させる */
    background: #ffffff;
    border: 1px solid #b3cde6;
    overflow: hidden;
    box-sizing: border-box;
}

.footer-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 縦横比がズレても歪まずに収める */
}

/* ★重要：Googleマップのiframe自体が持つ固有の高さを打ち消して100%にする */
.footer-map-box iframe {
    width: 100% !important;
    height: 100% !important;
    /* 強制的に260pxに引き伸ばす */
    border: 0;
    display: block;
}

/* 右側：サイトメニューのエリア */
.footer-sidebar {
    width: 220px;
    flex-shrink: 0;
}

/* ★メニュー全体の高さを計算し、写真たちと揃える */
.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 260px;
    /* ここを基準にしています */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 10項目を260pxの中に均等配置して底を合わせる */
}

.footer-menu-list li {
    margin-bottom: 0;
    /* 均等配置にするためマージンは0に */
    line-height: 1;
}

.footer-menu-list a {
    color: #00467f;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.2s;
    display: inline-block;
}

.footer-menu-list a:hover {
    opacity: 0.7;
}

/* 📱スマートフォン表示（レスポンス対応時は固定値を解除して自動に戻す） */
@media (max-width: 992px) {
    .footer-inner {
        gap: 40px;
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 40px;
    }

    .footer-row {
        flex-direction: column;
        gap: 25px;
        height: auto;
        /* スマホでは固定高さを解除 */
    }

    .footer-info,
    .footer-photo,
    .footer-map,
    .footer-sidebar {
        width: 100%;
        height: auto;
    }

    .footer-img-box,
    .footer-map-box {
        height: auto;
        /* aspect-ratio: 16 / 9; */
        /* スマホでは見やすい横長に */
    }

    .footer-menu-list {
        height: auto;
        /* スマホでは均等配置を解除 */
        gap: 12px;
    }
}





/* =======================================
   Weglot：英語ページ表示時の強制ハンバーガー化（PC画面用）
======================================= */
@media (min-width: 1421px) {

    /* htmlタグが「en」を含む場合のみ発動 */
    html[lang*="en"] .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(240, 240, 240, 0.98);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease;
        z-index: 99;
    }

    html[lang*="en"] .nav-menu {
        flex-direction: column;
        font-size: 1.8rem;
        gap: 30px;
    }

    html[lang*="en"] .hamburger-btn {
        display: block;
        width: 32px;
        height: 24px;
        position: relative;
        cursor: pointer;
        z-index: 100;
    }

    html[lang*="en"] .hamburger-btn span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #2A84C3;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    html[lang*="en"] .hamburger-btn span:nth-child(1) {
        top: 0;
    }

    html[lang*="en"] .hamburger-btn span:nth-child(2) {
        top: 11px;
        transform: none;
        opacity: 1;
    }

    html[lang*="en"] .hamburger-btn span:nth-child(3) {
        bottom: 0;
        top: auto;
        transform: none;
    }

    /* 開閉アニメーション */
    html[lang*="en"] .nav-toggle-checkbox:checked~.header-container .header-right .header-right-bottom .nav {
        opacity: 1;
        visibility: visible;
    }

    html[lang*="en"] .nav-toggle-checkbox:checked~.header-container .header-right .header-right-bottom .hamburger-btn span:nth-child(1) {
        top: 11px;
        transform: rotate(45deg);
    }

    html[lang*="en"] .nav-toggle-checkbox:checked~.header-container .header-right .header-right-bottom .hamburger-btn span:nth-child(2) {
        opacity: 0;
    }

    html[lang*="en"] .nav-toggle-checkbox:checked~.header-container .header-right .header-right-bottom .hamburger-btn span:nth-child(3) {
        bottom: auto;
        top: 11px;
        transform: rotate(-45deg);
    }
}







/* =======================================
   微調整：ロゴの拡大とハンバーガーの位置
======================================= */

/* 1. ロゴをギリギリまで大きくする */
.logo img {
    max-width: 360px !important;
    /* 以前の260pxから大幅に拡大。必要に応じて 380px などに増やしてください */
}

/* 2. 英語時のハンバーガーメニューを少し上に持ち上げる（PC表示時） */
@media (min-width: 1421px) {
    html[lang*="en"] .hamburger-btn {
        margin-bottom: 10px;
        /* ★追加：下から押し上げて「Contact Us」ボタンと視覚的な高さを揃える */
    }
}


/* =======================================
   ハンバーガーメニューの上下位置微調整（最終調整）
======================================= */
.hamburger-btn {
    transform: translateY(4px) !important;
}




/* =======================================
   中間サイズ（768px〜396px）のレイアウト崩れ修正
======================================= */
@media (max-width: 768px) {
    .header-container {
        /* 左右の余白を少し減らしてスペースを確保 */
        padding: 0 15px;
    }

    .header-left {
        /* ロゴと電話番号のエリアを少し小さくする */
        max-width: 220px;
        gap: 8px;
    }

    .header-right {
        /* 右側の上下（言語とボタン）の隙間を詰める */
        gap: 8px;
    }

    .header-right-bottom {
        /* お問い合わせボタンとハンバーガーの隙間を詰める */
        gap: 10px;
    }

    .btn-gradient-animated {
        /* お問い合わせボタンをスリムにして1行に収める */
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Weglotの言語切り替えも少し縮小（必要に応じて） */
    .wg-default {
        transform: scale(0.85);
        transform-origin: right center;
    }
}




/* コンタクトフォーム　お問い合わせ */
/* =======================================
   固定ページ（お問い合わせ等）のレイアウト
======================================= */
.page-main {
    padding: 60px 20px;
    /* 上下左右にゆとりを持たせる */
    background-color: #f5f7fa;
    /* ほんのり背景に色をつけてフォームを目立たせる（不要なら削除OK） */
}

.page-container {
    max-width: 800px;
    /* 広がりすぎないように最大幅を制限 */
    margin: 0 auto;
    /* 画面の中央に配置 */
    background: #ffffff;
    /* フォーム部分の背景を白に */
    padding: 40px;
    border-radius: 8px;
    /* 角を少し丸く */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* ほんのり影をつけて浮き上がらせる */
}

/* タイトルのデザイン */
.page-container h1 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 2px solid #3172b6;
    /* 長谷クリーニングの青色で下線を引く */
}

/* =======================================
   Contact Form 7 のデザイン調整
======================================= */
/* 入力欄（テキスト・メール・複数行テキスト）の共通スタイル */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    /* 横幅いっぱいに広げる */
    padding: 12px;
    margin-top: 5px;
    margin-bottom: 25px;
    /* 下の項目との間に余白を作る */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    /* スマホでタップした時にズームされないための適切なサイズ */
    box-sizing: border-box;
    /* 枠線を含めて100%にする魔法の指定 */
}

/* 送信ボタンのスタイル */
.wpcf7 input[type="submit"] {
    display: block;
    width: 250px;
    margin: 20px auto 0;
    /* 中央揃えにして上に余白 */
    padding: 15px 0;
    background-color: #3172b6;
    /* ベースの青色 */
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    /* ヘッダーのボタンのように丸みを持たせる */
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
    opacity: 0.8;
    /* マウスを乗せたら少しフワッと透ける */
}



/* =======================================
   スマホ時の横揺れ（ゆらゆら）完全防止・改
======================================= */

/* 1. htmlとbodyの両方を画面幅（100vw）にガッチリ固定し、はみ出しを絶対許さない */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
}

/* 2. 英語表示の時、サイト内の「すべての要素」の文字を強制的に折り返す */
html[lang*="en"] * {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}




/* =======================================
   メインビジュアル全体の設定（画像復活・修正版）
======================================= */
.main-visual {
    position: relative;
    width: 100%;
    height: 600px;
    /* ★画像を復活させるためのポイント：
       もしこれでも画像が出ない場合は、この下の行に、元々使っていた正しい画像のパス
       【 background-image: url('元の画像パス'); 】を書き足してください。
    */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}





/* =======================================
   テキストはみ出し防止（青帯と白文字の完全分離）
======================================= */
@media (max-width: 768px) {

    /* 1. 枠を画面幅100%に固定（共通） */
    .catch-content-wrapper,
    .catch-content {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        left: 0 !important;
    }

    /* 2. メインコピー（白い文字）：変な空白を消し、自然に改行させる */
    html[lang*="en"] .catch-content .catch-copy,
    html[lang*="en"] .catch-content .catch-copy * {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        line-break: auto !important;
    }

    /* 3. 青い帯の形状：絶対に画面幅100%を守る */
    .sub-copy,
    .sub-copy-detail {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. 青い帯のテキスト：前回成功した「超強力な改行」をここだけに適用 */
    html[lang*="en"] .sub-copy,
    html[lang*="en"] .sub-copy-detail,
    html[lang*="en"] .sub-copy *,
    html[lang*="en"] .sub-copy-detail * {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        line-break: anywhere !important;
        /* ← 青帯を綺麗に収めた立役者を復活 */
        max-width: 100% !important;
    }
}






.js-warning-banner {
    width: 100%;
    background-color: #ffcccc;
    color: #cc0000;
    padding: 15px 0;
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #ff9999;
    display: block;
}





/* 1. 日本語（デフォルト）のときは英語マップを隠す */
.map-en {
    display: none !important;
}

/* 2. 英語（翻訳時）のときは日本語マップを隠して英語マップを出す */
/* .goog-te-verb はGTranslateが言語を切り替えた時に付与される代表的なクラスです */
html[lang="en"] .map-ja,
body.gt_en .map-ja,
.goog-te-verb .map-ja {
    display: none !important;
}

html[lang="en"] .map-en,
body.gt_en .map-en,
.goog-te-verb .map-en {
    display: block !important;
}






/* ヘッダーの翻訳ボタン（ドロップダウン）周りの調整 */
.header-right-top {
    margin-top: 10px;
    /* 上に少し隙間を開ける */
    margin-bottom: 5px;
    /* 下にも少し隙間を開ける */
    z-index: 9999;
    /* 他の要素より上に表示させる */
    position: relative;
    /* 重なりを防ぐための設定 */
}

/* モバイル（スマホ）表示時の微調整 */
@media screen and (max-width: 768px) {
    .header-right-top {
        margin-top: 15px;
        margin-right: 5px;
    }
}





/* =======================================
   レスポンシブ：1420px以下のメニュー修正
======================================= */
@media (max-width: 1420px) {

    /* 1. ハンバーガーメニュー内の「お問い合わせ」をボタンっぽくする */
    .nav-menu .mobile-only-btn a.btn-gradient-animated {
        display: inline-block !important;
        /* テキストの幅に合わせる */
        background: transparent !important;
        border: 2px solid #2A84C3 !important;
        /* 青い枠線 */
        width: 140px !important;

        padding: 8px 6px !important;
        /* 上下左右の余白 */
        border-radius: 24px !important;
        /* 角丸 */
        font-size: 1.1rem !important;
        /* 他のメニューと同じ文字サイズ */
        color: #2A84C3 !important;
        text-decoration: none !important;
        margin-top: 10px !important;
        /* 上のメニューとの隙間 */
        animation: none !important;
        /* アニメーション停止 */
    }

    /* 2. PC用のお問い合わせボタンをスマホ時は非表示にする */
    .header-right-bottom>.btn-gradient-animated {
        display: none !important;
    }
    
}





/* メニュー全体のセンター配置設定 */
@media (max-width: 1420px) {
    .nav {
        display: flex !important;
        justify-content: center !important;
        /* 横方向のセンター */
        align-items: center !important;
        /* 縦方向のセンター */
        text-align: center !important;
        /* 中の文字もセンター */
        width: 100% !important;
        height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        /* これでリスト項目を中央に揃える */
        margin: 0 auto !important;
        /* リスト自体のマージンをリセット */
        padding: 0 !important;
        width: 100% !important;
    }

    /* 各リンク項目も中央に */
    .nav-menu li {
        text-align: center !important;
        width: 100% !important;
    }
}




@media (max-width: 1420px) {

    /* リスト（li）自体を確実に表示させる */
    .nav-menu li.mobile-only-btn {
        display: block !important;
        /* liをブロックとして確実に表示 */
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 20px !important;
    }

    /* お問い合わせボタンの表示設定をより強力に */
    .nav-menu li.mobile-only-btn a.btn-gradient-animated {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* デザイン調整 */
        background: transparent !important;
        border: 2px solid #2A84C3 !important;
        width: 140px !important;
        padding: 8px 6px !important;
        border-radius: 24px !important;
        color: #2A84C3 !important;
        text-align: center !important;
        animation: none !important;
    }
}













/* 翻訳プラグインの重なりと表示崩れを防ぐCSS */
.header-translate-wrap {
    position: relative !important;
    z-index: 999 !important;
    /* 他の要素より手前に出す */
}

/* ドロップダウンメニューの強制非表示（クリックするまで隠す） */
.gt_option {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
}

/* クリック時（または親がホバー時）にメニューを展開 */
.header-translate-wrap:hover .gt_option,
.gt_switcher:active .gt_option {
    display: block !important;
}





/* Safariでの翻訳メニューの表示を強制的に最前面にする */
.gt_option {
    display: block !important;
    z-index: 999999 !important;
    position: absolute !important;
    -webkit-transform: translate3d(0, 0, 0);
    /* Safariのレンダリングを強制的に有効化 */
}

/* 翻訳オプションの枠を広げる（Safariの誤動作防止） */
.gt_option {
    height: auto !important;
    /* 固定高さを解除 */
    min-height: 40px !important;
    overflow: visible !important;
    /* はみ出しを許容 */
}




/* スマホ表示時に翻訳ドロップダウンを強制制御 */
@media screen and (max-width: 500px) {
    .header-right-top {
        position: relative !important;
        margin-top: 5px !important;
    }

    /* ドロップダウンがヘッダーを突き破らないように制限 */
    .gtranslate_wrapper select {
        padding: 5px 10px !important;
        font-size: 14px !important;
        width: 100% !important;
    }
}




/* 翻訳プラグインの枠を整理 */
.gtranslate_wrapper {
    position: relative !important;
    display: inline-block !important;
    z-index: 999 !important;
    margin-bottom: 10px !important;
}

/* 崩れているリスト部分を整える */
.gtranslate_wrapper select {
    display: block !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
}








/* ===================================================
   1. マップの多言語切り替えと、不要な白余白を完全消去（修正版）
=================================================== */
/* 基本設定：日本語を表示、英語を隠す */
.map-en {
    display: none !important;
}

.map-ja {
    display: block !important;
}

/* ★修正部分：HTMLの言語コードに「en」が含まれていれば英語マップを表示する */
html[lang*="en"] .map-ja {
    display: none !important;
}

html[lang*="en"] .map-en {
    display: block !important;
}

/* WordPressが勝手に作る改行タグ（空白の原因）を強制非表示 */
.footer-map p,
.footer-map br,
.multi-lang-map p,
.multi-lang-map br,
.map-wrap p,
.map-wrap br {
    display: none !important;
}

.map-wrap iframe,
.multi-lang-map iframe {
    width: 100% !important;
    height: 250px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
/* ===================================================
   2. フッター背景の途切れ（はみ出し）を防止するリセット
=================================================== */
/* 親コンテナの高さ固定を解除し、中身に合わせて伸びるようにする */
.site-footer,
.footer-inner,
.footer-main-content {
    height: auto !important;
    min-height: 100% !important;
}

/* Float落ちを防ぎ、青い背景をマップの下まで確実に伸ばすクリアフィックス */
.site-footer::after,
.footer-inner::after,
.footer-main-content::after {
    content: "";
    display: block;
    clear: both;
}

/* ===================================================
   3. PC用レイアウト：きっちり3等分
=================================================== */
.footer-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
    height: auto !important;
}

.footer-info,
.footer-photo,
.footer-map {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
}

.footer-info {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* ===================================================
   フッター写真のトリミング位置の調整
=================================================== */
.footer-photo img {
    width: 100% !important;
    height: 100% !important;
    /* 枠に合わせて高さを確保 */
    object-fit: cover !important;
    /* 画像の縦横比を保ったまま、隙間なく枠を埋める */
    object-position: center !important;
    /* ★ここが魔法のコード：下辺を固定して上をカットする */
    display: block !important;
}
/* ===================================================
   4. タブレット用（1024px以下）：2列＋下段にマップ
=================================================== */
@media (max-width: 1024px) {
    .footer-row {
        grid-template-columns: 1fr 1fr !important;
    }

    .footer-map {
        grid-column: 1 / -1 !important;
        margin-top: 15px !important;
    }
}

/* ===================================================
   5. スマホ用（395px以下）：すべて縦1列
=================================================== */
@media (max-width: 430px) {
    .footer-row {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footer-photo {
        text-align: center !important;
    }

    .footer-photo img {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}






/* ===================================================
   マップ下の白い余白（ベースラインの隙間）を完全に消去
=================================================== */
.map-ja,
.map-en {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    /* コンテナ側の文字の高さをゼロにする */
}

.map-ja iframe,
.map-en iframe {
    display: block !important;
    /* ← 余白を消すための最重要コード！ */
    vertical-align: bottom !important;
    margin: 0 !important;
    padding: 0 !important;
}









/* ===================================================
   マップ親要素の16:9比率と白背景を強制解除
=================================================== */
.footer-map-box {
    aspect-ratio: auto !important;
    /* 16:9の比率を解除 */
    height: auto !important;
    /* 高さを自動にして中身（マップ）に合わせる */
    background: transparent !important;
    /* 白背景を透明にする */
}









/* ===================================================
   フッターロゴのサイズ調整（写真との重なり・巨大化防止）
=================================================== */
.footer-logo-wrap a img,
.footer-logo {
    max-width: 100% !important;
    width: 180px !important;
    /* 下のテキスト幅に合わせて制限（お好みで微調整してください） */
    height: auto !important;
    display: block !important;
    margin-bottom: 10px !important;
    /* ロゴと下のテキストの間に少し余白を作る */
}


/* ===================================================
   タブレット・スマホサイズでのマップ下の余白調整
=================================================== */
@media (max-width: 1024px) {
    .footer-map {
        margin-bottom: 30px !important;
        /* マップの下に余白を作る（お好みで数値を調整してください） */
    }
}






/* ===================================================
   固定ページ（お問い合わせ・規約等）のスマホ表示最適化
=================================================== */
/* タブレット〜大きめのスマホ用 */
@media (max-width: 768px) {
    .page-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
    }

    .page-content,
    .page-content p,
    .privacy-wrap p,
    .privacy-wrap li,
    .tokushoho-table th,
    .tokushoho-table td {
        font-size: 15px !important;
        line-height: 1.8 !important;
    }
}

/* ★追加：スマホサイズ（395px以下）の超ギリギリ余白調整 */
@media (max-width: 430px) {

    /* 1. 画面両端の余白を極限（8px）まで削る */
    .page-container {
        padding: 8px 8px !important;
    }

    /* 2. 見出しの文字サイズと余白もスマホサイズに最適化 */
    .page-container h1 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    .privacy-wrap h2 {
        font-size: 14px !important;
        padding: 10px !important;
        margin-top: 30px !important;
    }

    /* 3. 特商法テーブルの内側余白を削って、文字の横幅を確保 */
    .tokushoho-table th,
    .tokushoho-table td {
        padding: 10px !important;
    }

    /* 4. プライバシーポリシーの枠やリストの内側余白をスリム化 */
    .privacy-wrap ul {
        padding: 12px 10px 12px 20px !important;
    }

    .privacy-contact {
        padding: 15px 10px !important;
    }
}






/* ---------------------------------- */
/* お知らせ一覧ページのレイアウト調整 */
/* ---------------------------------- */

/* ページ全体に余白と最低限の高さを持たせる */
.news-archive-page {
    padding: 80px 0 100px;
    /* 上に80px、下に100pxの余白を持たせる */
    min-height: 60vh;
    /* 画面の高さの60%を最小の高さとし、フッターを下に押し下げる */
}

/* タイトル下の余白調整 */
.news-archive-page .page-title {
    margin-bottom: 50px;
    /* タイトルと記事一覧の間のスペース */
}

/* （※必要に応じて）コンテンツ幅をトップページと揃える */
.news-archive-page .news-container {
    max-width: 1000px;
    /* トップページの幅に合わせて数値を調整してください */
    margin: 0 auto;
    padding: 0 20px;
}

/* 各お知らせアイテムの下に少し余白と線を足して見やすくする（お好みで） */
.news-archive-page .news-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
}




/* ---------------------------------- */
/* 各お知らせアイテムの余白調整 */
/* ---------------------------------- */

/* お知らせ1行ごとの下に余白を設ける */
.news-item {
    margin-bottom: 24px; /* 好みに合わせて数値を調整してください（16px〜30pxあたりがおすすめです） */
}

/* 一番最後のお知らせの下には余白をつけない（ボタンとの距離を適切に保つため） */
.news-item:last-child {
    margin-bottom: 0;
}








/* セクションタイトル */
.section-title {
    text-align: center;
    color: #004b79;
    /* 画像に近いブルー */
    font-size: 28px;
    margin-bottom: 40px;
}

.section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background-color: #004b79;
    margin: 15px auto 0;
}

/* ブログアイテムのレイアウト */
.blog-item {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
    align-items: flex-start;
}

/* サムネイル画像 */
.blog-thumbnail {
    flex: 0 0 50%;
}

.blog-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* テキストコンテンツ */
.blog-content {
    flex: 1;
}

.blog-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #999;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.blog-excerpt {
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}

.read-more {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

.read-more:hover {
    text-decoration: underline;
}

/* スマホ対応（縦積み） */
@media screen and (max-width: 430px) {
    .blog-item {
        flex-direction: column;
        gap: 20px;
    }

    .blog-thumbnail {
        flex: 0 0 100%;
        width: 100%;
    }
}



/* 1. 全体の幅を制限して中央寄せにする */
.blog-list {
    max-width: 1000px;
    /* サイトのデザインに合わせて幅を調整してください（例: 1000px, 1200px） */
    margin: 0 auto;
    /* 画面の中央に配置 */
    padding: 0 20px;
    /* 画面幅が狭い時に端にくっつかないための余白 */
}

/* 2. サムネイル領域のスタイルを強化（画像がない場合でもレイアウトを維持する） */
.blog-thumbnail {
    flex: 0 0 50%;
    background-color: #f0f0f0;
    /* 画像がない場合のグレー背景 */
    aspect-ratio: 16 / 9;
    /* 画像の縦横比を固定（レイアウト崩れ防止） */
    overflow: hidden;
}

.blog-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}













/* ブログ一覧ページのタイトル位置とデザイン調整 */
.page-title {
    text-align: center;
    color: #004b79;
    /* トップページと同じブルー */
    font-size: 28px;
    padding-top: 50px;
    /* 上のヘッダーとの余白（詰まりすぎ防止） */
    margin-bottom: 40px;
}

/* タイトル下の青いライン */
.page-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background-color: #004b79;
    margin: 15px auto 0;
}














/* ページネーション全体を中央寄せにして余白を調整 */
.nav-links,
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /* ボタン同士の隙間 */
    margin: 40px 0;
    /* 上下の余白 */
    padding: 0;
    list-style: none;
}

/* 各ページ番号と「次へ」の基本デザイン（ボタン化） */
.nav-links .page-numbers,
.pagination .page-numbers,
.pagination a,
.pagination span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    color: #333;
    /* 文字色 */
    background-color: #fff;
    /* 背景色 */
    border: 1px solid #ddd;
    /* 枠線 */
    border-radius: 4px;
    /* 角を少し丸くする */
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    /* ホバー時にふわっと変化させる */
}

/* マウスオーバー（ホバー）時のデザイン */
.nav-links a.page-numbers:hover,
.pagination a:hover {
    background-color: #f7f7f7;
    color: #3174c0;
    /* ホバー時の文字色（サイトのテーマカラーに合わせて変更してください） */
    border-color: #3174c0;
}

/* 現在いるページ（カレント）のデザイン */
.nav-links .page-numbers.current,
.pagination .current {
    background-color: #3174c0;
    /* 現在のページの背景色（サイトのテーマカラーに） */
    color: #fff;
    /* 現在のページの文字色 */
    border-color: #3174c0;
    font-weight: bold;
    pointer-events: none;
    /* クリックできないようにする */
}



/* 特定商取引法に基づく表記 */
.tokushoho-table th {
    background-color: #f0f7fb;
    font-weight: bold;
    width: 33% !important;
    text-align: left;
}



@media (max-width: 900px) {
    .tokushoho-table th {
        width: 42% !important;
    }
}

@media (max-width: 600px) {
    .tokushoho-table th {
        width: 80% !important;
    }
}





/* 採用情報が1件だけの場合の最大幅指定（2件並びと同じ幅に固定） */
.recruit-card:only-child {
    max-width: calc((100% - 50px) / 2) !important;
}

/* スマホ表示時は1件でも横幅いっぱいに広げる */
@media (max-width: 580px) {
    .recruit-card:only-child {
        max-width: 100% !important;
    }
}




.side-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px; /* 文字と線の間のスキマ（お好みで調整してください） */
    text-align: center;
    margin: 0 auto;
}

.side-bar::before,
.side-bar::after {
    content: "";
    display: block;
    width: 12px !important; /* 💡ここで左右の線の長さを固定します（例: 30px） */
    height: 2px; /* 線の太さ */
    background-color: #0077c7; /* 線の色（現在の色に合わせてください） */
    flex-shrink: 0; /* 画面が狭くなっても線が縮まないようにする */
}







/* =========================================
   カード間の縦線の長さを常に揃える設定
   ========================================= */
.service-grid {
    display: flex !important;
    /* 全てのカードの高さを「一番高いもの」に強制的に合わせる */
    align-items: stretch !important;
}

.service-card {
    /* 親要素（grid）の高さに100%追従させる */
    align-self: stretch !important;
    height: auto !important;

    /* カード内のレイアウト崩れを防ぐための設定 */
    display: flex !important;
    flex-direction: column !important;
}

/* もしカード内のテキストなどを上揃えにしたい場合は以下も追加 */
.service-card-text {
    flex-grow: 1;
    /* 余った高さをテキスト部分で吸収させる */
}


/* =========================================
   採用情報：PC表示で最大2列にする設定
   ========================================= */
.recruit-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* 強制的に2列に指定 */
    gap: 30px;
    /* カード同士の隙間（好みに合わせて数値を変更してください） */
}

/* スマホやタブレットなどの小さな画面では1列にする設定 */
@media screen and (max-width: 768px) {
    .recruit-grid {
        grid-template-columns: 1fr !important;
        /* 1列に変更 */
    }
}



/* =========================================
   採用情報：PC表示で最大2列にする設定
   ========================================= */
.recruit-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* 強制的に2列に指定 */
    gap: 30px;
    /* カード同士の隙間（好みに合わせて数値を変更してください） */
}

/* スマホやタブレットなどの小さな画面では1列にする設定 */
@media screen and (max-width: 768px) {
    .recruit-grid {
        grid-template-columns: 1fr !important;
        /* 1列に変更 */
    }
}


/* =========================================
   1. 採用情報：PC表示で最大2列にする設定
   ========================================= */
.recruit-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    /* 強制的に2列に指定 */
    gap: 30px;
    /* カード同士の隙間 */
}

/* スマホやタブレットなどの小さな画面では1列にする設定 */
@media screen and (max-width: 768px) {
    .recruit-grid {
        grid-template-columns: 1fr !important;
        /* 1列に変更 */
    }
}

/* =========================================
   2. 採用情報が1件だけの時の幅を正常に保つ設定
   ========================================= */
/* ※一番最初にお客様が書かれていた calc(...) の指定を上書き（または削除）します */
.recruit-card:only-child {
    max-width: 100% !important;
}

/* =========================================
   3. テキストサイズを「すべてのタグ」に対して強制統一
   ========================================= */
/* WordPress側でどんなタグが自動生成されてもサイズを統一します */
.recruit-card-text,
.recruit-card-text * {
    font-size: 16px !important;
    /* お好みのサイズに調整してください */
    line-height: 1.6 !important;
}






/* =========================================
   ブログ一覧：スマホ（580px以下）用調整
   ========================================= */
@media screen and (max-width: 580px) {

    /* 1. 各記事（.blog-item）を縦並びにする */
    .blog-list .blog-item {
        display: flex !important;
        flex-direction: column !important;
        /* 画像→テキストの順で縦積み */
    }

    /* 2. 画像部分の余白を消して幅いっぱいに広げる */
    .blog-list .blog-thumbnail {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        /* テキストとの間に隙間を作る */
    }

    /* 3. 画像自体を幅いっぱいに */
    .blog-list .blog-thumbnail img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    /* 4. テキスト部分を左寄せにする */
    .blog-list .blog-content {
        width: 100% !important;
        text-align: left !important;
    }
}






.footer-address-list {
    display: grid;
    /* 左側を固定幅にし、右側を余白いっぱいにする設定 */
    grid-template-columns: 70px 1fr;
    gap: 2px 15px;
    /* 行間と列間のスペース */
    list-style: none;
    padding: 0;
}

/* <li>内のラベルと値を分けるための調整 */
.footer-address-list li {
    display: contents;
    /* liタグを無効化して中の要素を並べる */
}

/* ラベル部分を擬似的に指定して整列させる */
.footer-address-list li::before {
    /* ここに具体的なラベル分けのロジックが必要な場合はHTML修正を推奨します */
}