@charset "UTF-8";

/* =========================================================
   完全モダン化 CSS (style_v2.css) - 安定ベース＋干渉排除版
========================================================= */
body {
    background-color: #fcfcfc;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* --- 1. ヒーローセクション --- */
.modern-hero {
    position: relative;
    background: url('../images/bg.png') no-repeat center center;
    background-size: cover;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.modern-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}
.modern-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 0 20px;
    width: 100%;
}
/* ★元のデザイン（青い線や白い線など）の干渉を排除するリセットを追加 */
.modern-hero-content h1 {
    font-size: 36px !important;
    font-weight: 900 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    letter-spacing: 2px !important;
    line-height: 1.5 !important;
    text-shadow: 0 3px 15px rgba(0,0,0,0.8) !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
}
.modern-hero-content p {
    font-size: 16px !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8) !important;
    border: none !important;
    background: transparent !important;
    color: #fff !important;
}

/* --- 2. 検索ボックス --- */
.modern-search-wrapper { position: relative; margin-top: -50px; z-index: 10; padding: 0 15px; }
.modern-search-card { background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 25px; max-width: 800px; margin: 0 auto; }
.modern-search-card h2 { font-size: 18px; font-weight: bold; text-align: center; margin-top: 0; margin-bottom: 20px; color: #333; border: none !important; background: transparent !important; }
/* ▼ 追記：セレクトボックスやボタンを検索結果ページでも使い回せるように調整 ▼ */
.modern-select { height: 50px !important; border-radius: 8px; border: 2px solid #e1e5eb; font-size: 15px; font-weight: bold; padding-left: 15px; width: 100%; color: #555; }
.modern-btn-search { background-color: #e74c3c; color: #fff; border: none; height: 50px; border-radius: 8px; font-size: 15px; font-weight: bold; width: 100%; box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3); transition: 0.2s; }
.modern-btn-search:hover { background-color: #c0392b; transform: translateY(-2px); }
/* --- 3. ご利用の流れ --- */
.modern-flow-box {
    background: #fff; border-radius: 12px; padding: 25px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); text-align: center; height: 100%;
    border: 1px solid #f9f9f9;
}
.modern-flow-box img { height: 55px; width: auto; margin-bottom: 15px; border: none !important; background: transparent !important; }
.modern-flow-box h4 { font-size: 16px; font-weight: bold; color: #e74c3c; margin-bottom: 10px; border: none !important; background: transparent !important; }
.modern-flow-box p { font-size: 13px; color: #555; margin: 0; line-height: 1.5; }

/* --- 4. モダンな見出し --- */
.modern-section-title {
    text-align: left !important;
    font-size: 22px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 auto 30px !important;
    padding: 0 0 0 12px !important; /* 線の右側に少し余白 */
    border-left: 5px solid #e74c3c !important; /* ★左側に赤い縦線を入れる */
    border-bottom: none !important;
    background: transparent !important;
    position: relative !important;
}
/* ★古い「下の短い赤線」を完全に消し去る */
.modern-section-title::after {
    display: none !important;
}

/* --- スマホ専用調整 --- */
@media (max-width: 767px) {
    .modern-section-title { 
        font-size: 19px !important; /* スマホでは少し引き締める */
        margin-bottom: 20px !important; 
        width: 100% !important; 
    }
}

/* お役立ち情報などの小見出し用（左寄せに統一し、控えめな縦線を追加） */
.modern-sub-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #2c3e50 !important;
    margin-bottom: 15px !important;
    text-align: left !important; /* ★中央から左へ変更 */
    border: none !important;
    border-left: 4px solid #bdc3c7 !important; /* ★大見出しに合わせて控えめな縦線を入れる */
    background: transparent !important;
    padding: 0 0 0 10px !important; /* ★線の右側に余白 */
}

/* --- 5. 調律師カード --- */
.modern-room-card { background: #fff; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 30px; border: 1px solid #f0f0f0; display: flex; flex-direction: column; height: 100%; }
.modern-room-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.modern-room-img-wrap { position: relative; height: 180px; background: #f8f8f8; }
.modern-room-img-wrap img.main-img { width: 100%; height: 100%; object-fit: cover; }
.modern-room-icon { position: absolute; bottom: -25px; right: 15px; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 2; background: #fff; }
.modern-room-info { padding: 35px 20px 20px; display: flex; flex-direction: column; flex-grow: 1; }
.modern-room-name { font-size: 18px; font-weight: bold; margin: 0 0 8px 0; border: none !important; background: transparent !important; padding: 0 !important; }
.modern-room-rating { color: #f39c12; font-weight: bold; margin-bottom: 8px; font-size: 15px; }
.modern-room-area { color: #7f8c8d; font-size: 13px; margin-bottom: 15px; }
.modern-room-price-box { background: #f8f9fa; border-radius: 8px; padding: 12px; margin-bottom: 15px; margin-top: auto; border: 1px solid #f1f1f1; }
.modern-room-price-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; font-weight: bold; color: #555; }
.modern-room-price-val { font-size: 16px; font-weight: bold; color: #e74c3c; }
.modern-btn-detail { display: block; text-align: center; background: #fff; color: #e74c3c; border: 1px solid #e74c3c; padding: 10px; border-radius: 6px; font-weight: bold; text-decoration: none; }
.modern-btn-detail:hover { background: #e74c3c; color: #fff; text-decoration: none; }


/* ==========================================
   リスト・詳細画面用の小さなピアノアイコン
========================================== */
.modern-room-piano-icon {
    height: 16px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    margin-bottom: 2px !important;
    filter: grayscale(100%) opacity(60%);
}



/* --- 6. バッジ（人気・NEW） --- */
.modern-badge-popular, .modern-badge-new { position: absolute; top: 10px; left: 10px; color: #fff; padding: 4px 12px; font-size: 12px; font-weight: bold; border-radius: 12px; z-index: 10; }
.modern-badge-popular { background: #f39c12; }
.modern-badge-new { background: #e74c3c; }

/* --- 7. 口コミカード --- */
.modern-review-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 20px; border-top: 4px solid #f39c12; border-left: none; }
.modern-review-header { display: flex; align-items: center; margin-bottom: 15px; }
.modern-review-icon { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; object-fit: cover; border: 1px solid #eee; }
.modern-review-info h4 { margin: 0 0 5px 0; font-size: 15px; font-weight: bold; border: none !important; background: transparent !important; }
.modern-review-info h4 a { color: #2c3e50; text-decoration: none; }
.modern-review-meta { font-size: 12px; color: #7f8c8d; }
.modern-review-body { font-size: 13.5px; line-height: 1.6; color: #444; background: #fdfdfd; padding: 15px; border-radius: 8px; border: 1px solid #eee; }
/* 口コミカードの住所（小さくしてアイコンを赤に） */
.modern-review-location {
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 4px;
}
.modern-review-location i {
    color: #e74c3c; /* マップピンを赤色にしてアクセントに */
    margin-right: 4px;
}


/* --- 8. スマホ用ピル型スクロールタブ --- */
.modern-pill-scroll { display: flex; overflow-x: auto; white-space: nowrap; padding: 5px 15px 15px 15px; margin: 0 -15px; -webkit-overflow-scrolling: touch; }
.modern-pill-scroll::-webkit-scrollbar { display: none; }
.modern-pill-item { display: inline-block; background: #fff; border: 1px solid #e1e5eb; color: #555; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: bold; margin-right: 10px; text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }


/* =========================================================
   最終の「古臭さ」を排除するモダン・アップデート
========================================================= */

/* 1. 影（ドロップシャドウ）をApple風の「薄く広い」最先端の影に変更 */
.modern-search-card {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f5f5f5 !important;
}
.modern-room-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f1f1f1 !important;
}
.modern-room-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}
.modern-review-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f1f1f1 !important;
    border-top: 4px solid #f39c12 !important;
}

/* 2. 「詳細を見る」ボタンを最新アプリ風の「ティント（薄塗り）ボタン」へ変更 */
.modern-btn-detail {
    background-color: #fdf2f1 !important; /* 超極薄の赤背景 */
    color: #e74c3c !important; /* 文字は赤 */
    border: none !important; /* 古臭い枠線を消す */
    border-radius: 8px !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
}
.modern-btn-detail:hover {
    background-color: #fadad8 !important; /* ホバーで少しだけ濃く */
    transform: translateY(-2px) !important;
}

/* 3. 「ご利用の流れ」の古い画像を、モダンな丸アイコン風に装飾 */
.modern-flow-box img {
    background-color: #f8f9fa !important; /* 薄いグレーの背景 */
    border-radius: 50% !important; /* 綺麗な真ん丸にする */
    padding: 12px !important; /* 丸の中の余白 */
    width: 65px !important;
    height: 65px !important;
    object-fit: contain !important;
}

/* 4. （おまけ）スマホ時のカードの「UP調律」「GP調律」の文字を少しスッキリさせる */
@media (max-width: 767px) {
    .modern-room-price-row {
        align-items: center;
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px dashed #eee !important; /* 点線で区切って見やすく */
    }
    .modern-room-price-row:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .modern-room-price-val {
        font-size: 18px !important;
    }
}




/* --- スマホ専用の調整 --- */
@media (max-width: 767px) {
    .modern-hero { height: 350px; }
    
    /* ★巨大化した文字を、見やすい常識的なサイズに修正 */
    .modern-hero-content h1 { 
        font-size: 24px !important; /* 力強いサイズをキープ */
        line-height: 1.6 !important; /* ★ここが重要：行間を広げてダサさを消す */
        margin-bottom: 25px !important; /* ★下の文章との隙間をガッツリ取る */
    }
    .modern-hero-content p { 
        font-size: 14px !important; 
    }
    
    /* ★巨大化したセクションタイトルを修正 */
    .modern-section-title { 
        font-size: 20px !important; 
        width: 95% !important; 
    }
    
    /* ご利用の流れをスマホで見やすく（横並びに変更） */
    .modern-flow-box {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 15px;
        margin-bottom: 15px;
    }
    .modern-flow-box img { margin-bottom: 0; margin-right: 15px; height: 45px; }
    .modern-flow-box h4 { margin-top: 0; margin-bottom: 5px; font-size: 15px; }
    .modern-flow-box p { font-size: 12px; }

    /* ----- 既存のスマホ設定の下にこれを追加・上書き ----- */

    /* 1. ダミー画像の高さを一気に削り、ただの「飾り帯」にする */
    .modern-room-img-wrap { 
        height: 120px !important; 
    }

    /* 2. それに合わせてアイコンを少し小さくし、位置を整える */
    .modern-room-icon { 
        width: 50px !important; 
        height: 50px !important; 
        bottom: -20px !important; 
        right: 15px !important; 
        border: 2px solid #fff !important; /* 枠線も少し細く */
    }

    /* 3. 情報エリアの無駄な余白を削り、さらに縦幅を節約 */
    .modern-room-info { 
        padding: 25px 15px 15px !important; 
    }

    /* 4. カード同士の間隔も少し詰めて、スイスイ見れるようにする */
    .modern-room-card { 
        margin-bottom: 20px !important; 
    }

    /* 5. 星と住所を1行にまとめて高さを節約 */
    .modern-room-meta-row {
        display: flex;
        justify-content: space-between; /* 星を左端、住所を右端にピタッと分ける */
        align-items: center; /* 縦のズレをなくす */
        margin-bottom: 12px !important;
    }
    .modern-room-rating {
        margin-bottom: 0 !important; /* 元々あった余分な下余白を消す */
        font-size: 14px !important;
    }
    .modern-room-area {
        margin-bottom: 0 !important; /* 元々あった余分な下余白を消す */
        font-size: 12px !important;
    }
    .modern-room-area i {
        margin-right: 3px !important; /* アイコンと文字の隙間を微調整 */
    }
}


/* 320pxなど極小画面用の追加調整 */
    @media (max-width: 374px) {
        .modern-hero-content p {
            font-size: 12px !important; /* 14pxから12pxへ縮小して1行に収める */
            letter-spacing: -0.5px; /* 文字間隔を少し詰める */
        }
    }



/* ==========================================
   モダン・ヘッダー＆ロゴデザイン 最終調整版
========================================== */

/* ----- ロゴ部分 ----- */
.modern-brand {
    display: flex !important;
    align-items: center !important;
    padding: 10px 15px !important; 
    height: auto !important;
}

.brand-icon {
    max-height: 55px !important; 
    width: auto !important;
    margin-right: 15px !important; 
}

.brand-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ★文字色をさらに明るいグレー(#555555)にして圧迫感を完全に消去 */
.brand-name {
    font-size: 22px !important;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
    font-weight: 700 !important; 
    color: #555555 !important; 
    line-height: 1.1 !important;
    letter-spacing: 1.5px !important; 
}

.brand-sub {
    font-size: 11px !important;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
    font-weight: 600 !important;
    color: #95a5a6 !important; 
    line-height: 1.2 !important;
    margin-top: 4px !important;
    letter-spacing: 0.5px !important;
}

/* ----- ヘッダー全体 ----- */
.modern-navbar {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    margin-bottom: 0 !important;
    padding: 5px 0 !important;
}

/* メニューのリンク文字色 */
.modern-navbar .navbar-nav > li > a {
    color: #555555 !important; 
    font-size: 14px !important;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
    font-weight: 600 !important;
    transition: 0.3s;
}

/* ★ホバー時や、メニューが開いている（アクティブな）時のデザインを追加 */
.modern-navbar .navbar-nav > li > a:hover,
.modern-navbar .navbar-nav > li > a:focus,
.modern-navbar .navbar-nav > .open > a,
.modern-navbar .navbar-nav > .open > a:hover,
.modern-navbar .navbar-nav > .open > a:focus {
    background-color: transparent !important;
    color: #e74c3c !important;
}

/* ★ドロップダウン（開いたメニュー）自体のデザインを追加 */
.modern-navbar .dropdown-menu {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    padding: 10px 0 !important;
}
.modern-navbar .dropdown-menu > li > a {
    padding: 10px 20px !important;
    color: #555555 !important;
    transition: 0.2s;
}
.modern-navbar .dropdown-menu > li > a:hover {
    background-color: #fcfcfc !important;
    color: #e74c3c !important;
}

.modern-navbar .navbar-toggle {
    border: none !important;
    background: transparent !important;
}
.modern-navbar .navbar-toggle .icon-bar {
    background-color: #555555 !important; 
    width: 24px !important;
    height: 3px !important;
    border-radius: 2px !important;
}
.modern-navbar .navbar-toggle:hover .icon-bar {
    background-color: #e74c3c !important;
}

.modern-navbar .modern-header-btn {
    background-color: #e74c3c !important;
    color: #ffffff !important;
    border-radius: 25px !important; 
    padding: 8px 20px !important;
    box-shadow: 0 4px 6px rgba(231, 76, 60, 0.2) !important;
}
.modern-navbar .modern-header-btn:hover {
    background-color: #c0392b !important;
    color: #ffffff !important;
}

/* ==========================================
   PC画面用（992px以上）
========================================== */
@media (min-width: 992px) {
    .modern-navbar .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .modern-navbar .navbar-header {
        float: none !important;
    }
    .modern-navbar .navbar-collapse {
        float: none !important;
        padding-right: 0 !important;
    }
    .modern-navbar .navbar-nav {
        display: flex !important;
        align-items: center !important; 
        float: none !important;
        margin: 0 !important;
    }
    .modern-navbar .navbar-nav > li > a {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .modern-navbar .modern-header-btn {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 20px !important;
    }
}

/* ==========================================
   スマホ・タブレット画面用（991px以下はハンバーガー）
========================================== */
@media (max-width: 991px) {
    .modern-navbar .navbar-header {
        float: none !important;
        position: relative !important; 
        min-height: 60px !important;
    }
    
    .modern-navbar .navbar-toggle {
        display: block !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 100 !important;
    }
    
    .modern-navbar .navbar-collapse {
        border-top: 1px solid transparent !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
    }
    .modern-navbar .navbar-collapse.collapse {
        display: none !important;
    }
    .modern-navbar .navbar-collapse.collapse.in {
        display: block !important;
    }

    .modern-navbar .navbar-nav {
        display: block !important; 
        float: none !important;
        margin: 10px 0 !important;
    }
    .modern-navbar .navbar-nav > li {
        /* ★原因発覚：ここにあった display: block !important; を削除しました。
           これのせいで、PC用のメニューまでスマホで強制表示されていました */
        float: none !important; 
        width: 100% !important;
    }
    .modern-navbar .navbar-nav > li > a {
        display: block !important;
        padding: 12px 15px !important;
    }

    /* ★スマホ版でドロップダウンを開いたときのデザインを追加 */
    .modern-navbar .navbar-nav .open .dropdown-menu {
        border: none !important;
        box-shadow: none !important;
        background-color: #f9f9f9 !important; /* 少し背景色を変えて階層を表現 */
        padding: 5px 0 !important;
    }
    .modern-navbar .navbar-nav .open .dropdown-menu > li > a {
        padding: 10px 15px 10px 30px !important; /* 文字を少し右にずらして子要素っぽくする */
        color: #555555 !important;
    }

    .modern-brand {
        padding: 10px 15px !important;
        max-width: calc(100% - 70px) !important; 
    }
    .brand-icon {
        max-height: 40px !important; 
        margin-right: 10px !important;
    }
    .brand-name {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }
    
    .modern-brand .brand-text-wrapper .brand-sub {
        display: none !important;
    }

    .modern-navbar .modern-header-btn {
        margin: 10px 15px 15px !important;
        display: inline-block !important;
        text-align: center !important;
    }
}






/* ==========================================
   モダン・フッターデザイン 刷新版
========================================== */
.modern-footer {
    background-color: #1e272e !important; /* 高級感のあるダークグレー */
    color: #ecf0f1 !important;
    padding: 70px 0 0 0 !important;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
}
.footer-top {
    padding-bottom: 50px !important;
}

/* ロゴ部分 */
.footer-brand {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    text-decoration: none !important;
}
.footer-icon {
    height: 45px !important;
    margin-right: 12px !important;
    /* ★魔法のCSS：カラーのアイコンを真っ白のシルエットに変換してスタイリッシュに */
    /* ↓この1行を消す、またはコメントアウトするだけ！ */
    /* filter: brightness(0) invert(1) !important; */
}
.footer-logotext {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
}
.footer-desc {
    color: #95a5a6 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin-bottom: 25px !important;
}

/* SNSアイコン */
.footer-sns {
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    gap: 15px !important;
}
.footer-sns li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #2f3640 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    transition: 0.3s !important;
    font-size: 16px !important;
}
.footer-sns li a:hover {
    background-color: #e74c3c !important; /* ホバーで赤く */
    color: #ffffff !important;
}

/* リンク列 */
.footer-links-col h4 {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    position: relative !important;
    padding-bottom: 12px !important;
}
.footer-links-col h4::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    height: 2px !important;
    background-color: #e74c3c !important; /* 赤いアクセントライン */
}
.footer-links-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.footer-links-col ul li {
    margin-bottom: 15px !important;
}
.footer-links-col ul li a {
    color: #95a5a6 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: 0.3s !important;
}
.footer-links-col ul li a:hover {
    color: #ffffff !important;
    padding-left: 5px !important; /* ホバーで少し右に動く */
}

/* コピーライト部分 */
.footer-bottom {
    background-color: #111417 !important;
    padding: 20px 0 !important;
    border-top: 1px solid #2f3640 !important;
}
.footer-bottom p {
    margin: 0 !important;
    color: #7f8c8d !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}

/* スマホ用（中央寄せで美しく） */
@media (max-width: 767px) {
    .modern-footer { padding: 50px 0 0 0 !important; }
    .footer-brand-col {
        margin-bottom: 40px !important;
        text-align: center !important;
    }
    .footer-brand { justify-content: center !important; }
    .footer-sns { justify-content: center !important; }
    
    .footer-links-col {
        margin-bottom: 35px !important;
        text-align: center !important;
    }
    .footer-links-col h4::after {
        left: 50% !important;
        transform: translateX(-50%) !important; /* アクセントを中央に */
    }
    .footer-links-col ul li a:hover { padding-left: 0 !important; }
}




/* ==========================================
   旧テーマ（style.css）の巨大な余白を強制リセット
========================================== */
.mg-page {
    padding-top: 15px !important; /* 40px を 15px に圧縮 */
}

/* ついでに、モダンなタイトル帯の下の余白も削る */
.modern-compact-header {
    margin-bottom: 0 !important; 
}

/* ==========================================
   検索結果用：洗練リストデザイン v3（グレー枠廃止・情報統合版）
========================================== */
.modern-compact-header h1 {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.modern-compact-header h1::before,
.modern-compact-header h1::after {
    display: none !important;
}
.modern-compact-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e5eb;
    padding: 20px 0;
    margin-bottom: 20px;
}

.modern-list-card {
    background: #ffffff;
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.modern-list-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: #d5dadd;
}

.ml-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}
.ml-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 1px solid #eee;
}
.ml-title-wrap {
    flex-grow: 1;
}
.ml-name-row {
    margin-bottom: 5px;
}
.ml-name {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 1.3;
}

/* ▼ 料金と出張費を一行に並べるスタイル ▼ */
.ml-price-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.ml-price-item {
    display: flex;
    align-items: center;
    background: #fdf2f1;
    padding: 4px 8px;
    border-radius: 4px;
    color: #e74c3c;
}
.ml-p-label {
    font-size: 11px;
    font-weight: normal;
    margin-right: 4px;
}
.ml-p-val {
    font-size: 15px;
    font-weight: bold;
}
.ml-travel-item {
    font-size: 12px;
    color: #7f8c8d;
    background: #f1f2f6;
    padding: 4px 8px;
    border-radius: 4px;
}

.ml-meta-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #eee;
}
.ml-rating {
    font-size: 13px;
    color: #f39c12;
    font-weight: bold;
    margin-right: 15px;
}
.ml-address {
    font-size: 14px;
    font-weight: bold;
    color: #2c3e50;
}
.ml-address i {
    color: #3498db;
    margin-right: 4px;
}

.ml-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.ml-tag {
    background: #f1f2f6;
    color: #555;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
}
.ml-tag-repair {
    background: #e8f8f5;
    color: #1abc9c;
}

/* グレー枠を消したので、余白を広げて文字を少し大きく */
.ml-motto {
    font-size: 13px;
    color: #7f8c8d;
    margin-bottom: 15px;
    line-height: 1.6;
    height: 40px; /* 約2行分 */
    overflow: hidden;
    margin-top: auto; /* ボタンを下に押しやる */
}

.ml-btn-detail {
    display: block;
    text-align: center;
    background: #fff;
    color: #e74c3c;
    border: 1px solid #e74c3c;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.2s;
    margin-top: auto;
}
.ml-btn-detail:hover {
    background: #e74c3c;
    color: #fff;
    text-decoration: none;
}


/* ==========================================
   検索結果用：検索カードの専用設定（インライン排除版）
========================================== */

/* カード全体の外観（トップページから上書きしてコンパクトに） */
.modern-search-card {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid #f5f5f5 !important;
}

/* タイトル部分 */
.modern-search-card-title {
    font-size: 16px !important;
    font-weight: bold !important;
    border-bottom: 2px solid #e74c3c !important;
    padding-bottom: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    color: #333 !important;
}

/* フォームの各グループ（並び替え・絞り込み） */
.modern-search-group {
    margin-bottom: 10px !important;
}
.modern-search-label {
    color: #555 !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* セレクトボックスの小型版 */
.modern-select-sm {
    height: 40px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
}

/* ▼ チェックボックス・グループの黄金比設定 ▼ */
.modern-filter-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important; /* 項目の間隔をしっかり空ける */
    align-items: center !important;
    padding-top: 5px !important;
}

.modern-filter-label {
    font-size: 13px !important;
    color: #555 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    font-weight: normal !important;
}

/* チェックボックスとアイコンの距離 */
.modern-filter-checkbox {
    margin: 0 8px 0 0 !important; 
}

/* アイコンの色とサイズ */
.modern-filter-label i {
    margin-right: 4px !important;
    font-size: 14px !important;
}
.modern-filter-label i.fa-female {
    color: #e74c3c !important;
    font-size: 16px !important; /* 女性アイコンは少し大きく */
}
.modern-filter-label i.fa-wrench {
    color: #7f8c8d !important;
}
.modern-filter-label i.fa-map-marker {
    color: #3498db !important;
}

/* 検索ボタン行とボタン小型化 */
.modern-search-btn-row {
    margin-top: 10px !important;
}
.modern-btn-search-sm {
    width: 100% !important;
    max-width: 250px !important;
    height: 42px !important;
    font-size: 14px !important;
    margin: 0 auto !important; /* text-centerを補助 */
}


/* ==========================================
   スマホ用（767px以下）検索ボックスの再調整
========================================== */
@media (max-width: 767px) {
    .modern-search-card {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
    .modern-search-card-title {
        font-size: 14px !important;
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
    }
    .modern-search-label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }
    .modern-select-sm {
        font-size: 13px !important;
    }
    .modern-filter-group {
        gap: 12px !important; /* スマホ時は隙間を圧縮 */
    }
    .modern-filter-label {
        font-size: 12px !important;
    }
    .modern-btn-search-sm {
        height: 44px !important; /* タップ領域死守 */
        margin-top: 5px !important;
    }
}

/* ==========================================
   スマホ用（767px以下）極限最適化：スクロール削減
========================================== */
@media (max-width: 767px) {

    /* ==========================================
       追加：タイトル帯とフィルターのスマホ極限最適化
    ========================================== */
    
    /* 1. タイトル帯の余白と文字サイズを圧縮 */
    .modern-compact-header {
        padding: 10px 0 !important;
        margin-bottom: 15px !important;
    }
    .modern-compact-header h1 {
        font-size: 15px !important;
    }

    /* 2. 検索ボックス（カード全体）の無駄な余白を削る */
    .modern-search-card {
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
    .modern-search-card h2 {
        font-size: 14px !important;
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
    }

    /* 3. フォーム各項目の上下の隙間を削る */
    .modern-search-card .form-group {
        margin-bottom: 10px !important;
    }
    .modern-search-card label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }
    .modern-select {
        height: 40px !important; /* セレクトボックスの高さを節約 */
        font-size: 13px !important;
    }

    /* 4. チェックボックスの並びをギュッと詰める */
    .modern-search-card div[style*="flex-wrap: wrap"] {
        gap: 8px !important; /* 15pxから8pxへ圧縮 */
    }
    .modern-search-card div[style*="flex-wrap: wrap"] label {
        font-size: 12px !important;
    }
    .modern-search-card input[type="checkbox"] {
        margin-right: 3px !important;
    }

    /* 5. 検索ボタンのサイズ調整（タップしやすさ44pxは死守） */
    .modern-btn-search {
        height: 44px !important;
        font-size: 14px !important;
        margin-top: 5px !important;
    }








    /* 1. カード自体の余白を圧縮 */
    .modern-list-card {
        padding: 12px !important; /* 20px -> 12px に削減 */
        margin-bottom: 12px !important;
    }
    
    /* 2. ヘッダー（アイコンと名前）をギュッと詰める */
    .ml-header {
        margin-bottom: 10px !important;
    }
    .ml-icon {
        width: 45px !important; /* 55px -> 45px に縮小 */
        height: 45px !important;
        margin-right: 10px !important;
    }
    .ml-name {
        font-size: 15px !important;
    }

    /* 3. 料金と出張費の行（隙間を詰めて1行に収めやすく） */
    .ml-price-group {
        gap: 6px !important;
    }
    .ml-price-item {
        padding: 2px 6px !important;
    }
    .ml-p-label {
        font-size: 10px !important;
    }
    .ml-p-val {
        font-size: 14px !important;
    }
    .ml-travel-item {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }

    /* 4. 評価と住所（縦幅を削る） */
    .ml-meta-row {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    .ml-rating {
        font-size: 12px !important;
        margin-right: 8px !important;
    }
    .ml-address {
        font-size: 12px !important;
    }

    /* 5. タグの隙間を削る */
    .ml-tags {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }
    .ml-tag {
        font-size: 10px !important;
        padding: 2px 8px !important;
    }

    /* 6. モットー（一言アピール）は2行に制限して高さを固定 */
    .ml-motto {
        font-size: 12px !important;
        margin-bottom: 10px !important;
        height: 36px !important; /* 12px × 約1.5(line-height) × 2行分 */
    }

    /* 7. ボタン（押しやすさは維持しつつ、見た目をスリムに） */
    .ml-btn-detail {
        padding: 10px !important; /* タップ領域を確保しつつスリム化 */
        font-size: 13px !important;
    }
}









/* ==========================================
   調律師詳細ページ (tuner_v2.php) 専用デザイン
========================================== */

/* --- 1. プロフィールヘッダー --- */
.modern-profile-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e1e5eb;
    padding: 40px 0;
    margin-bottom: 30px;
}
.mph-inner {
    display: flex;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto;
}
.mph-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    margin-right: 30px;
}
.mph-info {
    flex-grow: 1;
}
.mph-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.mph-tag {
    background: #eef0f2;
    color: #555;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
}
.mph-tag-green {
    background: #e8f8f5;
    color: #1abc9c;
}
/* 旧テーマのh1の青線・白線を強制解除 */
.mph-name {
    font-size: 26px !important; /* !important を追加 */
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 0 10px 0 !important;
    border: none !important;        /* 追加：線を消す */
    background: transparent !important; /* 追加：背景を消す */
    padding: 0 !important;          /* 追加：余白を消す */
}
.mph-name::before,
.mph-name::after {
    display: none !important;       /* 追加：擬似要素の線を消す */
    content: none !important;
}
.mph-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}
.mph-rating {
    font-size: 15px;
    color: #f39c12;
    font-weight: bold;
}
.mph-rating-count {
    color: #7f8c8d;
    font-size: 13px;
    font-weight: normal;
    margin-left: 4px;
}
.mph-address {
    font-size: 15px;
    font-weight: bold;
    color: #2c3e50;
}
.mph-address i {
    color: #3498db;
    margin-right: 5px;
}
.mph-motto {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- 2. メインコンテンツ（左カラム） --- */
.modern-profile-body {
    padding-bottom: 50px;
}
.modern-content-card {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e1e5eb;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.modern-card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    border-bottom: 2px solid #e74c3c;
    padding-bottom: 10px;
    margin-top: 0;
    margin-bottom: 20px;
}
.modern-card-title i {
    color: #e74c3c;
    margin-right: 8px;
}
.modern-profile-text {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

/* 詳細スペックのテーブル */
.modern-spec-table {
    width: 100%;
    border-collapse: collapse;
}
.modern-spec-table th, .modern-spec-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    line-height: 1.6;
}
.modern-spec-table th {
    width: 30%;
    background-color: #fcfcfc;
    color: #555;
    font-weight: bold;
    vertical-align: top;
}
.modern-spec-table td {
    color: #333;
}

/* --- 3. アクションカード（右カラム・固定） --- */
.sticky-sidebar {
    position: sticky;
    top: 20px; /* スクロールしても画面上部にくっつく */
}
.modern-action-card {
    background: #ffffff;
    border: 2px solid #e74c3c;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.1);
}
.mac-price-header {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}
.mac-price-box {
    background: #fdf2f1;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
}
.mac-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.mac-price-row:last-child {
    margin-bottom: 0;
}
.mac-p-type {
    font-size: 14px;
    font-weight: bold;
    color: #555;
}
.mac-p-value {
    text-align: right;
}
.mac-p-old {
    font-size: 12px;
    color: #999;
    margin-right: 5px;
}
.mac-p-new {
    font-size: 22px;
    font-weight: bold;
    color: #e74c3c;
}
.mac-cashback-note {
    font-size: 11px;
    color: #7f8c8d;
    text-align: center;
    margin-bottom: 20px;
}
/* ==========================================
   詳細画面：右側料金表のレイアウト崩れ防止
========================================== */
.mac-price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important; /* 横幅が足りない時は自動で下段に折り返す */
    padding: 10px 0 !important;
    border-bottom: 1px dashed #eee !important;
}

.mac-p-type {
    white-space: nowrap !important; /* 「アップライト」を改行させない */
    font-weight: bold !important;
    color: #444 !important;
}

.mac-p-value {
    white-space: nowrap !important; /* 値引き前と後の料金を絶対に改行させない */
    margin-left: auto !important; /* 下段に折り返した時に自動で右寄せにする */
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important; /* 古い料金と新しい料金の間に綺麗な隙間を作る */
}

.mac-p-old {
    font-size: 13px !important;
    color: #999 !important;
}

.mac-p-new {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #e74c3c !important;
}



/* 375px以下の極小画面向け：料金表を絶対に1行に収める調整 */
@media (max-width: 375px) {
    .mac-price-row {
        flex-wrap: nowrap !important;
        padding: 8px 0 !important;
    }
    .mac-p-type {
        font-size: 13px !important;
    }
    .mac-p-value {
        gap: 4px !important;
        align-items: baseline !important;
    }
    .mac-p-old {
        font-size: 10px !important; /* ★ここを変更 */
        margin-right: 2px !important; /* ★ここを追加 */
    }
    .mac-p-new {
        font-size: 18px !important; /* ★ここを変更 */
    }
}



/* 出張費エリア */
.mac-travel-box {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    border: 1px solid #eee;
}
.mac-travel-sup {
    font-size: 12px;
    color: #777;
    margin-bottom: 20px;
    padding: 0 5px;
}



/* 問い合わせボタン */
.modern-btn-action {
    display: block;
    width: 100%;
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    transition: 0.2s;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
}
.modern-btn-action:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4);
}


/* ボタン直下のマイクロコピー（相見積もり促進） */
.mac-microcopy {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
    color: #555;
    line-height: 1.5;
}
.mac-microcopy i {
    color: #27ae60; /* 安心感を与えるグリーン */
    margin-right: 4px;
}
.mac-microcopy strong {
    color: #333;
    display: inline-block;
    margin-bottom: 5px;
}

/* --- スマホ用レスポンシブ --- */
@media (max-width: 991px) {
    .modern-profile-header {
        padding: 25px 0;
    }
    .mph-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .mph-icon {
        margin: 0 0 20px 0;
        width: 100px;
        height: 100px;
    }
    .mph-tags {
        justify-content: center;
        margin-bottom: 15px;
    }
    .mph-meta {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 15px;
    }
    .modern-spec-table th, .modern-spec-table td {
        display: block;
        width: 100%;
        padding: 10px 15px;
    }
    .modern-spec-table th {
        background: transparent;
        padding-bottom: 0;
        color: #e74c3c;
        border-bottom: none;
    }

    /* スマホ時は右カラム（アクションカード）をメインコンテンツの「上」に移動させる */
    .modern-profile-body .row {
        display: flex;
        flex-direction: column-reverse;
    }
    .modern-side-col {
        margin-bottom: 30px;
    }
    .sticky-sidebar {
        position: static; /* スマホでは固定しない */
    }
}






/* ==========================================
   問い合わせフォーム (inquiry-form) 用デザイン
========================================== */

/* ヘッダー内アイコンレイアウト */
.modern-inquiry-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
}
.modern-inquiry-tuner-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
.modern-inquiry-title {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    margin: 0 0 5px 0 !important;
}

/* ステップバー（進行状況） */
.modern-step-bar-wrap {
    margin-bottom: 30px !important;
    text-align: center !important;
}
.modern-step-bar {
    display: inline-flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 30px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
    overflow: hidden !important;
}
.modern-step-bar li {
    padding: 12px 30px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #999 !important;
    background: #f8f9fa !important;
    position: relative !important;
}
.modern-step-bar li.active {
    background: #e74c3c !important;
    color: #fff !important;
}
.modern-step-bar li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    margin-right: 8px !important;
    font-size: 12px !important;
}
.modern-step-bar li:not(.active) span {
    background: #ddd !important;
    color: #fff !important;
}

/* フォーム上部の案内文 */
.modern-inquiry-guide {
    background-color: #fdf2f1 !important;
    border: 1px solid #fadbd8 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 40px !important;
}
.modern-inquiry-guide ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modern-inquiry-guide li {
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 8px !important;
}
.modern-inquiry-guide li:last-child {
    margin-bottom: 0 !important;
}
.modern-inquiry-guide i {
    color: #e74c3c !important;
    margin-right: 8px !important;
}

/* セクション見出し */
.modern-form-section-title {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    border-bottom: 2px solid #eee !important;
    padding-bottom: 10px !important;
    margin-bottom: 25px !important;
}

/* フォームグループ（各入力欄） */
.modern-form-group {
    margin-bottom: 25px !important;
}
.modern-form-group label {
    display: block !important;
    font-weight: bold !important;
    color: #444 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}
.modern-form-group label small {
    font-weight: normal !important;
    color: #888 !important;
    margin-left: 5px !important;
}
.modern-label-req {
    display: inline-block !important;
    background-color: #e74c3c !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
}
.modern-label-any {
    display: inline-block !important;
    background-color: #95a5a6 !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
}

/* 入力パーツ（input, select, textarea） */
.modern-form-control {
    width: 100% !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    color: #333 !important;
    background-color: #fcfcfc !important;
    border: 1px solid #dce0e5 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: 0.2s !important;
}
.modern-form-control:focus {
    background-color: #fff !important;
    border-color: #3498db !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
    outline: none !important;
}
textarea.modern-form-control {
    resize: vertical !important;
}

/* ラジオボタンの装飾 */
.modern-radio-group {
    display: flex !important;
    gap: 15px !important;
    margin-top: 10px !important;
}
.modern-radio-item {
    font-weight: normal !important;
    color: #555 !important;
    cursor: pointer !important;
}
.modern-radio-item input[type="radio"] {
    margin-right: 5px !important;
}

/* エラー時の表示 */
.has-error .modern-form-control {
    border-color: #e74c3c !important;
    background-color: #fdf2f1 !important;
}
.modern-error-text {
    display: block !important;
    color: #e74c3c !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    font-weight: bold !important;
}

/* 補足ノート（赤字） */
.modern-form-note {
    font-size: 12px !important;
    color: #e74c3c !important;
    margin-top: 8px !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
}


/* ==========================================
   カード型ラジオボタン（ピアノの種類など）
========================================== */
.modern-radio-card-group {
    display: flex !important;
    gap: 15px !important;
    margin-top: 10px !important;
}

.modern-radio-card {
    flex: 1 !important;
    cursor: pointer !important;
    margin: 0 !important;
    font-weight: normal !important;
}

/* デフォルトの丸いラジオボタンを隠す */
.modern-radio-card input[type="radio"] {
    display: none !important;
}

/* カード自体のデザイン */
.mrc-inner {
    border: 2px solid #e1e5eb !important;
    background-color: #fff !important;
    border-radius: 8px !important;
    padding: 20px 10px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
}

/* 画像・アイコンのエリア */
.mrc-img {
    height: 40px !important; /* 画像を入れる場合は適宜調整 */
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.mrc-img img {
    max-height: 100% !important;
    max-width: 100% !important;
}

/* テキスト部分 */
.mrc-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #444 !important;
    margin-bottom: 5px !important;
}
.mrc-desc {
    font-size: 11px !important;
    color: #888 !important;
}

/* 選択された（チェックされた）時の状態 */
.modern-radio-card input[type="radio"]:checked + .mrc-inner {
    border-color: #e74c3c !important;
    background-color: #fdf2f1 !important;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.15) !important;
}
.modern-radio-card input[type="radio"]:checked + .mrc-inner .mrc-title {
    color: #e74c3c !important;
}
.modern-radio-card input[type="radio"]:checked + .mrc-inner .mrc-img i {
    color: #e74c3c !important;
}

/* スマホ用調整 */
@media (max-width: 767px) {
    .modern-inquiry-header-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .modern-inquiry-title {
        font-size: 18px !important;
    }
    .modern-radio-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
}
/* スマホ用調整（767px以下） */
@media (max-width: 767px) {
    .modern-inquiry-header-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
    .modern-inquiry-title {
        font-size: 18px !important;
    }
    
    /* ステップバーを320pxでも1行に収める調整 */
    .modern-step-bar li {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    .modern-step-bar li span {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        margin-right: 4px !important;
    }

    /* ガイドの文字サイズをスマホ向けに小さく */
    .modern-inquiry-guide {
        padding: 15px !important;
    }
    .modern-inquiry-guide li {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* ▼ ご提案の修正：ラベル内の補足を強制的に改行させる ▼ */
    .modern-form-group label small {
        display: block !important;
        margin-top: 5px !important;
        margin-left: 0 !important;
        font-size: 11px !important;
        color: #777 !important;
    }

    /* スマホではカードの間隔を少し狭める */
    .modern-radio-card-group {
        gap: 10px !important;
    }
    .mrc-inner {
        padding: 15px 5px !important; /* 横の余白を減らして文字切れを防ぐ */
    }
    .mrc-title {
        font-size: 14px !important;
    }
    .mrc-desc {
        font-size: 10px !important;
    }
}

/* さらに極小画面（iPhone SEなどの 375px 以下）向けの特別調整 */
@media (max-width: 375px) {
    /* アップライトの「ト」が改行しないよう、カードを縦並びに切り替える */
    .modern-radio-card-group {
        flex-direction: column !important;
    }
    /* 縦並びにした時は横幅に余裕ができるのでパディングを戻す */
    .mrc-inner {
        padding: 15px !important;
    }
}




/* ==========================================
   問い合わせ完了画面 (inquiry-complete) 用デザイン
========================================== */

/* 送信完了メッセージボックス */
.modern-complete-box {
    background-color: #fdfdfd !important;
    border: 2px solid #2ecc71 !important; /* サクセスカラーの緑 */
    border-radius: 12px !important;
    padding: 30px 20px !important;
    margin-bottom: 50px !important;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.1) !important;
}
.modern-complete-box i {
    font-size: 50px !important;
    color: #2ecc71 !important;
    margin-bottom: 15px !important;
}
.modern-complete-title {
    font-size: 22px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
}
.modern-complete-text {
    font-size: 15px !important;
    color: #555 !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
}
.modern-complete-divider {
    height: 1px !important;
    background-color: #d6e9c6 !important;
    margin: 20px auto !important;
    width: 80% !important;
}
.modern-complete-subtext {
    font-size: 14px !important;
    color: #333 !important;
    margin: 0 !important;
}

/* 相見積もり推奨エリア */
.modern-recommend-section {
    background-color: #f8f9fa !important;
    border-radius: 10px !important;
    padding: 40px 20px !important;
    margin-bottom: 40px !important;
}
.modern-recommend-title {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}
.modern-recommend-lead {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 30px !important;
}

/* 理由カード（3つ並ぶやつ） */
.modern-reason-card {
    background-color: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 20px 15px !important;
    height: 100% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}
.mrc-icon {
    font-size: 28px !important;
    color: #e74c3c !important;
    margin-bottom: 10px !important;
}
.mrc-head {
    font-size: 15px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 10px !important;
}
.mrc-text {
    font-size: 12px !important;
    color: #777 !important;
    text-align: left !important;
    line-height: 1.5 !important;
}

/* 次のアクション（検索へ戻るボタン）エリア */
.modern-next-action {
    max-width: 500px !important;
    margin: 0 auto 40px auto !important;
}
.modern-next-action p {
    font-weight: bold !important;
    color: #e74c3c !important;
    margin-bottom: 10px !important;
}

/* サブボタン（ホームへ・マイページへ） */
.modern-btn-sub {
    background-color: #f1f2f6 !important;
    color: #555 !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    transition: 0.2s !important;
}
.modern-btn-sub:hover {
    background-color: #e1e5eb !important;
    color: #333 !important;
}

/* スマホ用調整 */
@media (max-width: 767px) {
    .modern-complete-box {
        padding: 20px 15px !important;
    }
    .modern-complete-title {
        font-size: 18px !important;
    }
    .modern-complete-box i {
        font-size: 40px !important;
    }
    .modern-reason-card {
        margin-bottom: 15px !important;
    }
}


/* ==========================================
   キャッシュバック案内ページ用デザイン（インライン排除版）
========================================== */

/* 全体の背景色 */
.modern-body-bg {
    background-color: #fcfcfc !important;
}
.modern-page-container {
    padding-bottom: 80px !important;
}

/* 冒頭のイントロダクション（概要） */
.modern-cb-intro {
    margin-bottom: 40px !important;
    padding: 40px 20px !important;
}
.modern-cb-intro-title {
    font-size: 22px !important;
    font-weight: bold !important;
    color: #e74c3c !important;
    margin-bottom: 20px !important;
    border: none !important;
    padding: 0 !important;
}
.modern-cb-intro-text {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #444 !important;
    margin-bottom: 0 !important;
}

/* 各セクションのタイトル（中央寄せ） */
.modern-cb-section-title {
    text-align: center !important;
    border: none !important;
    margin-bottom: 30px !important;
}
.modern-cb-section-title::after,
.modern-cb-section-title::before {
    display: none !important; /* 古い線を強制消去 */
}

/* --- 金額表示カード --- */
.modern-cb-price-row {
    margin-bottom: 50px !important;
}
.modern-price-card {
    background: #fff !important;
    border: 2px solid #e1e5eb !important;
    border-radius: 12px !important;
    text-align: center !important;
    padding: 30px 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
    transition: 0.3s !important;
}
.modern-price-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.06) !important;
    border-color: #d5dadd !important;
}
/* 真ん中を目立たせる */
.modern-price-card-popular {
    border-color: #e74c3c !important;
    box-shadow: 0 8px 20px rgba(231, 76, 60, 0.15) !important;
    position: relative !important;
}
.modern-price-card-popular::before {
    content: "一番多い価格帯" !important;
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #e74c3c !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 3px 12px !important;
    border-radius: 12px !important;
}
.mpc-label {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #555 !important;
    margin-bottom: 10px !important;
}
.mpc-value {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #e74c3c !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}
.mpc-value span {
    font-size: 18px !important;
    margin-right: 2px !important;
}
.mpc-sub {
    font-size: 13px !important;
    font-weight: bold !important;
    color: #7f8c8d !important;
}
.modern-cb-price-note {
    font-size: 13px !important;
    margin-top: -30px !important;
    margin-bottom: 50px !important;
}

/* --- 縦型ステップ図解 --- */
.modern-step-container {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 40px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    border: 1px solid #f1f1f1 !important;
}
.modern-step-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 30px !important;
    position: relative !important;
}
.modern-step-item:last-child {
    margin-bottom: 0 !important;
}
/* ステップ同士を繋ぐ縦線 */
.modern-step-item:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    top: 60px !important;
    left: 29px !important; /* アイコンの中央 */
    width: 2px !important;
    height: calc(100% - 40px) !important;
    background-color: #eee !important;
    z-index: 0 !important;
}
.msi-icon {
    width: 60px !important;
    height: 60px !important;
    background: #fdf2f1 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 20px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
.msi-icon img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    border: none !important;
    background: transparent !important;
}
.msi-content {
    padding-top: 5px !important;
}
.msi-content h4 {
    margin: 0 0 10px 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    border: none !important;
    padding: 0 !important;
}
.msi-content h4 span {
    color: #e74c3c !important;
    font-size: 14px !important;
    margin-right: 8px !important;
}
.msi-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    margin: 0 !important;
}

/* --- 下部のアクションボタン --- */
.modern-cb-bottom-action {
    margin-top: 50px !important;
}
.modern-btn-action-rounded {
    display: inline-block !important;
    width: auto !important;
    padding: 15px 50px !important;
    font-size: 16px !important;
    border-radius: 30px !important;
}

/* --- スマホ用調整 --- */
@media (max-width: 767px) {
    .modern-price-card {
        padding: 20px 10px !important;
    }
    .mpc-value {
        font-size: 28px !important;
    }
    .modern-step-container {
        padding: 20px !important;
    }
    .msi-icon {
        width: 50px !important;
        height: 50px !important;
        margin-right: 15px !important;
    }
    .modern-step-item:not(:last-child)::after {
        left: 24px !important;
    }
    .msi-content h4 {
        font-size: 16px !important;
    }
    .msi-content p {
        font-size: 13px !important;
    }
    .modern-btn-action-rounded {
        width: 100% !important; /* スマホでは横幅いっぱいに */
        padding: 15px 20px !important;
    }
}



/* ==========================================
   全ページ共通：モダン・ページヘッダー（キャッシュバック等）
========================================== */
.modern-page-header {
    background-color: #e74c3c !important;
    padding: 40px 0 !important;
    text-align: center !important;
    margin-bottom: 40px !important;
}

/* 古いテーマの黒文字や線を【完全】に無効化し、白文字にする */
.modern-page-header h1 {
    font-size: 28px !important;
    font-weight: bold !important;
    color: #ffffff !important; /* ★ここで絶対に白文字にする */
    margin: 0 0 10px 0 !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    text-shadow: none !important; /* 古い影を消す */
}
.modern-page-header h1::before,
.modern-page-header h1::after {
    display: none !important;
    content: none !important;
}

.modern-page-header p {
    font-size: 15px !important;
    color: #ffffff !important;
    margin: 0 !important;
    opacity: 0.9 !important;
    text-shadow: none !important;
}

/* スマホ用（ヘッダー帯の余白調整） */
@media (max-width: 767px) {
    .modern-page-header {
        padding: 30px 0 !important;
        margin-bottom: 30px !important;
    }
    .modern-page-header h1 {
        font-size: 22px !important;
    }
    .modern-page-header p {
        font-size: 13px !important;
    }
}



/* ==========================================
   よくある質問 (FAQ) ページ用デザイン
========================================== */

/* 左カラム：ナビゲーション */
.modern-faq-nav {
    padding: 0 !important;
    overflow: hidden !important;
}
.modern-faq-nav-title {
    background-color: #f8f9fa !important;
    padding: 15px 20px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    color: #333 !important;
    border-bottom: 1px solid #eee !important;
}
.modern-faq-nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.modern-faq-nav-list li {
    border-bottom: 1px solid #f5f5f5 !important;
}
.modern-faq-nav-list li:last-child {
    border-bottom: none !important;
}
.modern-faq-nav-list li a {
    display: block !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: 0.2s !important;
}
.modern-faq-nav-list li a:hover,
.modern-faq-nav-list li a.active {
    background-color: #fdf2f1 !important;
    color: #e74c3c !important;
    padding-left: 25px !important;
}

/* 右カラム：質問リスト */
.modern-faq-list {
    margin-top: 10px !important;
}
.modern-faq-item {
    display: flex !important;
    align-items: center !important;
    padding: 18px 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-decoration: none !important;
    transition: 0.2s !important;
}
.modern-faq-item:last-child {
    border-bottom: none !important;
}
.modern-faq-item:hover {
    background-color: #fafafa !important;
    text-decoration: none !important;
}
.modern-faq-q {
    width: 28px !important;
    height: 28px !important;
    background-color: #e74c3c !important;
    color: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 14px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}
.modern-faq-text {
    flex-grow: 1 !important;
    font-size: 15px !important;
    color: #333 !important;
    font-weight: normal !important;
}
.modern-faq-item i {
    color: #ccc !important;
    font-size: 18px !important;
    margin-left: 10px !important;
}
.modern-faq-item:hover i {
    color: #e74c3c !important;
    transform: translateX(3px) !important;
}

/* フッター補足エリア */
.modern-faq-footer-info {
    margin-top: 40px !important;
    padding: 25px !important;
    background-color: #f9f9f9 !important;
    border-radius: 8px !important;
}
.modern-faq-footer-head {
    font-weight: bold !important;
    color: #777 !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
}
.modern-faq-footer-text {
    font-size: 12px !important;
    color: #999 !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* スマホ調整 */
@media (max-width: 767px) {
    .modern-faq-item {
        padding: 15px 10px !important;
    }
    .modern-faq-text {
        font-size: 14px !important;
    }
    .modern-faq-q {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }
}



/* ==========================================
   サービスFAQ (faq.php) アコーディオン用デザイン
========================================== */

/* 大見出しの下マージン調整 */
.modern-faq-main-title {
    margin-bottom: 30px !important;
}

/* アコーディオン全体の枠線を消す */
.modern-accordion {
    border: none !important;
    box-shadow: none !important;
}

/* 各パネル（Q&Aブロック） */
.modern-accordion-panel {
    border: 1px solid #e1e5eb !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
    margin-bottom: 15px !important;
    overflow: hidden !important; /* 角丸を保つため */
}

/* 開いたときの隙間をBootstrapが勝手に広げるのを防ぐ */
.panel-group .panel + .panel.modern-accordion-panel {
    margin-top: 15px !important;
}

/* ヘッダー（質問部分） */
.modern-accordion-heading {
    background-color: #ffffff !important;
    padding: 0 !important;
    border-bottom: none !important;
}
.modern-accordion-heading a {
    display: flex !important;
    align-items: center !important;
    padding: 20px 25px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333 !important;
    text-decoration: none !important;
    position: relative !important;
    transition: 0.2s !important;
}
.modern-accordion-heading a:hover {
    background-color: #fafafa !important;
}

/* アコーディオンの「開閉アイコン（＋/−）」を右端にCSSで作成 */
.modern-accordion-heading a::after {
    content: '\f107'; /* FontAwesomeの↓アイコン */
    font-family: 'FontAwesome' !important;
    position: absolute !important;
    right: 25px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    color: #999 !important;
    transition: 0.3s !important;
}
/* 開いている時は上向き矢印にする */
.modern-accordion-heading a[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg) !important;
    color: #e74c3c !important;
}

/* Q と A のアイコン文字 */
.modern-faq-q-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background-color: #e74c3c !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}
.modern-faq-a-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background-color: #3498db !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: bold !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}

/* ボディ（回答部分） */
.modern-accordion-body {
    display: flex !important;
    align-items: flex-start !important;
    background-color: #f8f9fa !important; /* 少し色を変えて区別 */
    border-top: 1px solid #eee !important;
    padding: 25px !important;
}
.modern-faq-a-text {
    flex-grow: 1 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #444 !important;
}

/* スマホ用調整 */
@media (max-width: 767px) {
    .modern-accordion-heading a {
        padding: 15px !important;
        font-size: 14px !important;
        padding-right: 40px !important; /* 矢印とかぶらないように */
    }
    .modern-accordion-heading a::after {
        right: 15px !important;
    }
    .modern-accordion-body {
        padding: 15px !important;
    }
    .modern-faq-a-text {
        font-size: 13px !important;
    }
}


/* ==========================================
   記事・読み物ページ (about/piano-tune 等) 用デザイン
========================================== */

/* 記事カード全体の調整 */
.modern-article-card {
    padding: 30px 40px !important;
}

/* 記事の大見出し */
.modern-article-title {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #333 !important;
    border-bottom: 2px solid #e74c3c !important;
    padding-bottom: 12px !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

/* 本文エリア */
.modern-article-body {
    color: #444 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}

/* リード文（冒頭の強調テキスト） */
.modern-article-lead {
    font-size: 16px !important;
    color: #2c3e50 !important;
    background-color: #f8f9fa !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border-left: 4px solid #3498db !important;
    margin-bottom: 30px !important;
}

/* 小見出し */
.modern-article-subtitle {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #e74c3c !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
    border: none !important; /* 古い下線を消す */
    padding: 0 !important;
}
.modern-article-subtitle::before,
.modern-article-subtitle::after {
    display: none !important;
}

/* 本文中の段落 */
.modern-article-body p {
    margin-bottom: 20px !important;
}

/* ハイライトボックス（まとめ・重要ポイント） */
.modern-article-highlight {
    background-color: #fdf2f1 !important;
    border: 1px solid #fadbd8 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-top: 35px !important;
    margin-bottom: 30px !important;
    color: #333 !important;
}
.modern-article-highlight i {
    color: #e74c3c !important;
    font-size: 18px !important;
    margin-right: 5px !important;
}

/* 下部のアクションエリア（検索ボタンなど） */
.modern-article-action {
    text-align: center !important;
    margin-top: 50px !important;
    padding-top: 40px !important;
    border-top: 1px dashed #e1e5eb !important;
}
.modern-article-action p {
    font-size: 15px !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
}
.modern-article-action .modern-btn-action-rounded {
    padding: 15px 40px !important;
    font-size: 16px !important;
}

/* ページ送り（前へ・次へ） */
.modern-article-pager {
    display: flex !important;
    justify-content: flex-end !important; /* 右寄せ */
    margin-top: 40px !important;
}
.modern-pager-next {
    display: inline-block !important;
    padding: 10px 20px !important;
    background-color: #f8f9fa !important;
    color: #555 !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: bold !important;
    transition: 0.2s !important;
}
.modern-pager-next:hover {
    background-color: #e9ecef !important;
    color: #333 !important;
    text-decoration: none !important;
}
.modern-pager-next i {
    margin-left: 5px !important;
}

/* スマホ用調整 */
@media (max-width: 767px) {
    .modern-article-card {
        padding: 20px 15px !important;
    }
    .modern-article-title {
        font-size: 20px !important;
    }
    .modern-article-lead {
        font-size: 14px !important;
        padding: 15px !important;
    }
    .modern-article-subtitle {
        font-size: 18px !important;
        margin-top: 25px !important;
    }
    .modern-article-action .modern-btn-action-rounded {
        width: 100% !important;
        padding: 15px 10px !important;
        font-size: 15px !important;
    }
    .modern-article-pager {
        justify-content: center !important; /* スマホは中央寄せ */
    }
}






/* ==========================================
   調律師登録ページ (tuner-reg) 用デザイン
========================================== */

/* ヒーローバナー */
.modern-recruit-banner {
    border-radius: 8px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

/* 料金エリア全体の枠 */
.modern-fee-section {
    background-color: #fcfcfc !important;
    border: 2px solid #e1e5eb !important;
    border-radius: 12px !important;
    padding: 30px !important;
    margin-bottom: 40px !important;
}

/* キャンペーン用の目立つ枠 */
.modern-fee-campaign {
    border-color: #e74c3c !important;
    background-color: #fdf2f1 !important;
}

/* 料金エリアのタイトル */
.modern-fee-title {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    border: none !important;
    padding: 0 !important;
}
.modern-fee-campaign .modern-fee-title {
    color: #e74c3c !important;
}

/* モダンな料金テーブル */
.modern-fee-table {
    width: 100% !important;
    background: #fff !important;
    border-collapse: collapse !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 20px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.modern-fee-table th {
    background: #34495e !important;
    color: #fff !important;
    padding: 15px !important;
    text-align: center !important;
    font-size: 14px !important;
}
.modern-fee-campaign .modern-fee-table th {
    background: #e74c3c !important;
}
.modern-fee-table td {
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 15px !important;
    color: #444 !important;
}
.modern-fee-table tr:last-child td {
    border-bottom: none !important;
}

/* 強調文字と打ち消し線 */
.modern-fee-highlight {
    color: #e74c3c !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
}
.modern-strike-text {
    text-decoration: line-through !important;
    color: #999 !important;
    font-size: 0.85em !important;
    margin-left: 8px !important;
}

/* テーブル下の注釈 */
.modern-fee-note {
    font-size: 12px !important;
    color: #777 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ▼▼ スマホ用のテーブル最適化（縦積みに変換） ▼▼ */
@media (max-width: 767px) {
    .modern-fee-section {
        padding: 20px 15px !important;
    }
    .modern-fee-table th {
        display: none !important; /* スマホではヘッダーを隠す */
    }
    .modern-fee-table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #f9f9f9 !important;
    }
    .modern-fee-table tr {
        display: block !important;
        border-bottom: 2px solid #eee !important;
    }
    /* HTML側の data-label 属性を使って、項目名を自動挿入する裏技 */
    .modern-fee-table td::before {
        content: attr(data-label) "：";
        font-weight: bold !important;
        display: inline-block !important;
        width: 100px !important;
        color: #555 !important;
    }
}

/* ==========================================
   全てのページでピアノアイコンを適切なサイズにする
========================================== */
.modern-room-piano-icon,
.mac-price-row img,
.ml-price-item img {
    width: auto !important;
    height: 16px !important; /* 文字の高さに合わせる */
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    margin-bottom: 2px !important;
    filter: grayscale(100%) opacity(60%) !important; /* グレー化 */
}