/*
Theme Name: Relight
Theme URI: 
Author: AI Assistant
Description: Relight ロードサービス専用テーマ (Bright Blue Version)
Version: 1.2.0
*/

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f2f9ff; /* 明るい青みのある背景色 */
}

/* Header (Transparent to Frosted Glass) */
.site-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
header {
    background: transparent; /* 初期状態は完全透明 */
    color: #fff;
    padding: 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.15); /* うっすら境界線 */
    transition: all 0.3s ease;
}
/* スクロール時のクラス */
.site-header-wrapper.scrolled header {
    background: rgba(0, 30, 60, 0.85); /* ダークブルーの半透明 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    padding: 12px 20px; /* スクロール時は少しスリムに */
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
header h1 {
    margin: 0;
    font-size: 26px;
    letter-spacing: 1px;
}
header h1 a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0; /* 文字を左に（ロゴに近づける） */
    line-height: 1;
}
.header-logo-img {
    height: 32px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    transform: translateY(-5.5px); /* さらに0.3ミリ下へ補正 */
    margin-right: 2px;
}
.tel-btn {
    background-color: #ff6600; /* 目立つオレンジ */
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    display: inline-block;
    transition: background 0.3s;
}
.tel-btn:hover { background-color: #e65c00; }

/* Global Navigation */
.global-nav {
        background: linear-gradient(rgba(0, 34, 68, 0.8), rgba(0, 34, 68, 0.8)), url('images/hero-bg.jpg') center/cover no-repeat; /* ヘッダーより少し濃い青 */
}
.nav-list {
    display: flex;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}
.nav-list li {
    flex: 1;
    text-align: center;
}
.nav-list a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 12px 0;
    font-weight: bold;
    font-size: 15px;
    transition: background 0.3s;
}
.nav-list a:hover {
    background-color: #0088ff; /* ホバー時はさらに明るい青 */
}
/* 現在いるページのメニューをハイライト */
.nav-list li.current-menu-item > a,
.nav-list li.current_page_item > a {
    background-color: #ff6600; /* 目立つオレンジ色 */
    color: #ffffff;
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0, 30, 60, 0.7), rgba(0, 30, 60, 0.7)), url('images/hero-bg.jpg') center/cover no-repeat;
    padding: 130px 20px 80px 20px; /* ヘッダー分（約60px）を上に足す */
    text-align: center;
    border-bottom: 5px solid #0073e6;
    color: #ffffff;
}
.hero h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #ffffff; /* 青から白へ変更 */
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); /* 文字を見やすく */
}
.hero p {
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.6;
    color: #e6f7ff; /* 少し明るい水色で読みやすく */
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Section */
.section {
    padding: 40px 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.section h2 {
    border-bottom: 3px solid #0073e6;
    padding-bottom: 10px;
    color: #005bb5;
}

/* Point Box */
.point-box {
    background: #fff;
    border-left: 5px solid #0073e6;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-radius: 4px;
}
.point-box h3 {
    margin-top: 0;
    color: #0073e6;
    font-size: 20px;
}

/* Area Grid */
.area-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
.area-card {
    
    background: #fff;
    padding: 25px 15px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eef5fc;
    transition: transform 0.2s, box-shadow 0.2s;
}
.area-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.area-icon-wrap {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px auto;
    background: linear-gradient(135deg, #e6f2ff 0%, #b3d9ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.area-pin {
    width: 30px;
    height: 30px;
    color: #0073e6;
}
.area-card h4 {
    margin: 0;
    color: #002244;
    font-size: 20px;
    letter-spacing: 1px;
}
.area-sub {
    color: #005bb5;
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 15px;
}

/* Accordion Styles */
.city-details {
    margin-top: 15px;
    text-align: left;
    border-top: 1px dashed #cce5ff;
    padding-top: 10px;
}
.city-details summary {
    cursor: pointer;
    font-size: 13px;
    color: #0073e6;
    font-weight: bold;
    outline: none;
    transition: color 0.2s;
}
.city-details summary:hover {
    color: #ff6600;
}
.city-list {
    margin-top: 10px;
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    background: #f9fbfd;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #eef5fc;
}

/* Page Standard Layout */
.page-header {
    background: linear-gradient(rgba(0, 34, 68, 0.75), rgba(0, 34, 68, 0.75)), url('images/hero-bg.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    padding: 120px 20px 40px 20px;
}
.page-header h1 {
    margin: 0;
    font-size: 32px;
}
.page-content {
    background: #fff;
    padding: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-top: 20px;
    margin-bottom: 40px;
    border-radius: 8px;
}

/* Contact Page Styles (Premium) */
.page-sub {
    font-size: 16px;
    opacity: 0.9;
    margin-top: 10px;
}
.premium-contact-card {
    background: #fff;
    border-radius: 12px;
    padding: 35px;
    margin-bottom: 35px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    position: relative;
    border: 1px solid #eaeaea;
}
.premium-contact-card h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: none;
    margin-top: 0;
    padding-bottom: 0;
    font-size: 24px;
}
.card-icon {
    width: 28px;
    height: 28px;
}
.card-desc {
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}
.card-badge {
    position: absolute;
    top: -12px;
    left: 30px;
    background: #e65c00;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(230,92,0,0.3);
}

/* Specific Cards */
.line-card { border-top: 5px solid #06C755; }
.line-card h2 { color: #06C755; }
.phone-card { border-top: 5px solid #ff6600; }
.phone-card h2 { color: #ff6600; }
.form-card { border-top: 5px solid #0073e6; }
.form-card h2 { color: #0073e6; }

/* Buttons */
.btn-wrap { text-align: center; }
.premium-action-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    padding: 15px 40px;
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}
.premium-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}
.btn-line { background: linear-gradient(135deg, #00d24b 0%, #00b33c 100%); }
.btn-tel { background: linear-gradient(135deg, #ff8c00 0%, #e65c00 100%); }
.btn-subtext { font-size: 12px; opacity: 0.9; margin-bottom: 2px; }
.premium-action-btn .btn-text { font-size: 22px; font-weight: bold; letter-spacing: 1px; }

/* Company Info Page Styles */
.company-info-list {
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid #eaeaea;
}
.company-info-list .info-row {
    display: flex;
    border-bottom: 1px solid #eaeaea;
    padding: 20px 10px;
}
.company-info-list dt {
    width: 30%;
    font-weight: bold;
    color: #005bb5;
    flex-shrink: 0;
}
.company-info-list dd {
    width: 70%;
    margin: 0;
    color: #333;
    line-height: 1.6;
}

/* Service Page Styles */
.service-intro {
    text-align: center;
    margin-bottom: 40px;
}
.service-catchphrase {
    font-size: 26px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20px;
}
.service-catchphrase .highlight {
    color: #ff6600;
    font-size: 1.2em;
    border-bottom: 3px solid #ffcc00;
}
.service-desc {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
}

.service-section-title {
    text-align: center;
    color: #005bb5;
    font-size: 24px;
    border-bottom: 2px dashed #b3d9ff;
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin-top: 50px;
}

.service-point-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.service-point-card {
    background: #fcfcfc;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 25px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
.point-number {
    position: absolute;
    top: -15px;
    left: 20px;
    background: #0073e6;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 20px;
    letter-spacing: 1px;
}
.point-title {
    font-size: 20px;
    color: #333;
    margin-top: 10px;
    margin-bottom: 15px;
    line-height: 1.4;
}
.point-title span {
    color: #e65c00;
    font-size: 1.1em;
}
.point-content p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

.trouble-cases {
    background: #f2f9ff;
    padding: 30px;
    border-radius: 12px;
    margin-top: 50px;
}
.trouble-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.trouble-list li {
    flex: 1 1 calc(50% - 15px);
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 10px;
}
.trouble-list .icon {
    font-size: 20px;
}

.service-cta {
    text-align: center;
    background: #fff;
    border: 2px solid #0073e6;
    border-radius: 12px;
    padding: 30px;
    margin-top: 50px;
}
.service-cta h3 {
    color: #e65c00;
    margin-top: 0;
}
.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}
.btn-cta {
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s;
}
.btn-cta:hover { transform: translateY(-2px); }
.btn-cta-tel { background: linear-gradient(135deg, #ff8c00 0%, #e65c00 100%); }
.btn-cta-web { background: linear-gradient(135deg, #00d24b 0%, #00b33c 100%); }

/* Form Elements */
.premium-form { margin-top: 20px; }
.form-row { margin-bottom: 25px; }
.half-row-wrap {
    display: flex;
    gap: 20px;
}
.half-row { flex: 1; }
.form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    font-size: 15px;
}
.badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: normal;
}
.badge-req { background: #ff4d4d; color: #fff; }
.badge-opt { background: #e0e0e0; color: #555; }

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fdfdfd;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    transition: all 0.3s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: #0073e6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,115,230,0.1);
}

.form-note { font-size: 13px; color: #666; margin-bottom: 10px; }
.btn-gps {
    background: #f0f7ff;
    color: #0073e6;
    border: 1px solid #b3d9ff;
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}
.btn-gps:hover { background: #e6f2ff; border-color: #0073e6; }
.gps-status { margin-top: 10px; font-size: 14px; font-weight: bold; }
.gps-status.fetching { color: #ff8c00; }
.gps-status.success { color: #009933; }
.gps-status.error { color: #ff4d4d; }

.submit-wrap { text-align: center; margin-top: 40px; }
.btn-submit {
    background: linear-gradient(135deg, #0073e6 0%, #005bb5 100%);
    color: #fff;
    border: none;
    padding: 18px 50px;
    font-size: 20px;
    border-radius: 40px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,115,230,0.2);
    transition: all 0.2s;
}
.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,115,230,0.3);
}

.form-alert { padding: 15px 20px; border-radius: 6px; margin-bottom: 25px; font-size: 15px; }
.form-alert.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.form-alert.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Footer */
footer {
    background-color: #002244;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

/* Utility Classes */
.pc-only { display: inline-block; }
.sp-only { display: none; }

@media (max-width: 768px) {
    .pc-only { display: none !important; }
    .sp-only { display: block !important; }

    /* 視認性向上のためのフォント・余白調整 */
    body {
        padding-bottom: 70px; /* ボトムバーの分だけ余白を空ける */
    }
    
    /* ヘッダーのスマホ最適化 */
    .header-inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        height: 30px; /* ヘッダーをスリムに */
    }
    header {
        padding: 10px 15px;
    }
    header h1 {
        font-size: 20px;
    }

    /* ハンバーガーボタンのデザイン */
    .hamburger-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        margin-top: -5px;
    }
    .hamburger-btn .bar {
        display: block;
        width: 24px;
        height: 3px;
        background-color: #fff;
        margin: 5px 0;
        transition: all 0.3s ease-in-out;
        border-radius: 3px;
    }
    /* ハンバーガーが「×」になるアニメーション */
    .hamburger-btn.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-btn.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-btn.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* スマホ版メニュー（初期状態は非表示、上からアコーディオン） */
    .global-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        z-index: 999;
    }
    .global-nav.active {
        display: block;
    }
    .nav-list {
        flex-direction: column;
    }
    .nav-list li {
        flex: 1 1 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        border-right: none;
    }
    .nav-list a {
        font-size: 16px;
        padding: 15px 20px;
        text-align: left; /* スマホでは左寄せが見やすい */
    }

    /* ボトムバーがコンテンツの邪魔をしないように、スマホ時のみ一番下に余白を確保 */
    body {
        padding-bottom: 90px;
    }

    /* 全体的な余白の圧縮（縦長感の解消） */
    .section {
        padding: 25px 15px; /* 上下余白を40pxから25pxへ縮小 */
    }
    .hero {
        padding: 90px 15px 40px 15px; /* スマホヘッダー分（約50px）を上に足す */
    }
    .hero h2 {
        font-size: 20px; /* 改行を減らすために少し縮小 */
        margin-bottom: 10px;
    }
    .hero p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    /* エリア一覧を2列にして縦幅を半分に！ */
    .area-grid {
        gap: 10px; /* 隙間を狭く */
    }
    .area-card {
         /* スマホでも2列を維持 */
        padding: 10px;
    }
    .area-map-dummy {
        height: 80px; /* ダミー画像の高さを半分に（縦長解消） */
        font-size: 12px;
        margin-top: 8px;
    }
    .area-card h4 {
        font-size: 14px; /* 2列でも文字がはみ出ないように */
    }

    /* フォーム周りのさらなる限界余白圧縮 */
    .premium-contact-card {
        padding: 15px 10px;
        margin-bottom: 15px;
    }
    .form-row {
        margin-bottom: 10px;
    }
    .half-row-wrap {
        flex-direction: column;
        gap: 10px;
    }
    .form-label {
        font-size: 13px;
        margin-bottom: 4px;
    }
    .form-input, .form-select, .form-textarea {
        padding: 10px;
        font-size: 14px;
    }
    .btn-submit {
        padding: 14px 20px;
        font-size: 18px;
    }
    .submit-wrap {
        margin-top: 20px;
    }

    /* サブページ（会社概要・サービス等）の余白圧縮 */
    .company-info-list .info-row {
        flex-direction: column;
        padding: 15px 5px;
    }
    .company-info-list dt {
        width: 100%;
        margin-bottom: 5px;
        font-size: 14px;
        color: #888;
    }
    .company-info-list dd {
        width: 100%;
        font-size: 16px;
        font-weight: bold;
    }
    
    /* サービス内容ページのスマホ対応 */
    .service-catchphrase { font-size: 20px; }
    .point-title { font-size: 18px; }
    .trouble-list li { flex: 1 1 100%; } /* スマホではトラブル例を1列に */
    .cta-buttons { flex-direction: column; gap: 10px; }
    .btn-cta { width: 100%; box-sizing: border-box; }

    .page-header {
        padding: 90px 15px 25px 15px; /* スマホヘッダー分を上に足す */
    }
    .page-header h1 {
        font-size: 24px;
    }
    .page-content {
        padding: 20px 15px; /* 内側の余白を40pxから20pxへ */
        margin-top: 15px;
        margin-bottom: 25px; /* 下部余白も圧縮 */
    }

    /* 固定ボトムアクションボタン（スマホ専用） */
    .premium-bottom-bar {
        display: flex;
    }
}

/* スマホ用プレミアムボトムバー */
.premium-bottom-bar {
    display: none; /* hidden on PC */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
    padding: 10px 10px 20px 10px; /* iOS等のホームバーを考慮 */
    box-sizing: border-box;
    gap: 10px;
}
.premium-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 8px;
    padding: 10px 5px;
    transition: all 0.3s;
}
.tel-premium {
    background: linear-gradient(135deg, #ff8c00 0%, #e65c00 100%);
    color: #fff;
    border: 1px solid #d95300;
}
.web-premium {
    background: linear-gradient(135deg, #0073e6 0%, #005bb5 100%);
    color: #fff;
    border: 1px solid #004b99;
}
.micro-text {
    font-size: 10px;
    font-weight: normal;
    opacity: 0.95;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.main-btn-content {
    display: flex;
    align-items: center;
    gap: 6px;
}
.premium-icon {
    width: 20px;
    height: 20px;
}
.main-btn-content .text {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* スマホ用フローティングアクションボタン (FAB) - 控えめバージョン */
.fab-container { display: none; }
@media (max-width: 768px) {
    .premium-bottom-bar { display: none !important; }
    .pc-hidden { display: flex !important; }
    .fab-container {
        position: fixed;
        bottom: 20px;
        right: 15px;
        flex-direction: column;
        gap: 12px;
        z-index: 9999;
        opacity: 0.8; /* 半透明で風景に馴染ませる */
    }
    .fab-btn {
        width: 48px; /* サイズダウン */
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 影を薄く */
        background: rgba(255, 255, 255, 0.95); /* 背景を白にして目立たなくする */
        border: 1px solid #eaeaea;
        transition: transform 0.2s;
    }
    .fab-btn:active { transform: scale(0.9); }
    .fab-tel { color: #e65c00; } /* アイコンだけ色付け */
    .fab-web { color: #0073e6; }
    .fab-btn svg { width: 22px; height: 22px; }
}


/* 新規追加セクション用スタイル */

/* 1. 明朗会計 */
.pricing-box {
    background: #fff;
    border: 3px solid #ffcc00;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.pricing-title {
    color: #e65c00;
    font-size: 22px;
    margin-bottom: 15px;
}
.pricing-text {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.8;
}
.highlight-marker {
    background: linear-gradient(transparent 60%, #ffeb3b 0%);
    color: #d32f2f;
}

/* 2. トラブルグリッド */
.trouble-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.trouble-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    transition: transform 0.2s;
    border-top: 4px solid #0073e6;
}
.trouble-card:hover {
    transform: translateY(-5px);
}
.trouble-icon {
    font-size: 40px;
    margin-bottom: 15px;
}
.trouble-card h4 {
    font-size: 18px;
    color: #003366;
    margin-bottom: 10px;
}
.trouble-card p {
    font-size: 14px;
    color: #666;
}

/* 3. タイムライン（流れ） */
.flow-section {
    background: #f9f9f9;
}
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 24px;
    width: 4px;
    background: #0073e6;
    border-radius: 2px;
}
.timeline-step {
    position: relative;
    padding-left: 60px;
    margin-bottom: 30px;
}
.step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: #0073e6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    border: 4px solid #f9f9f9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.step-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.step-content h4 {
    color: #005bb5;
    font-size: 18px;
    margin-bottom: 8px;
}
.step-content p {
    font-size: 15px;
    color: #555;
}

/* 4. 比較図 */
.compare-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
}
.compare-box {
    flex: 1 1 300px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}
.compare-header {
    padding: 15px;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    color: #fff;
}
.other-company .compare-header { background: #888; }
.relight-company .compare-header { background: #0073e6; }
.compare-flow {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.flow-step {
    background: #f0f0f0;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    color: #555;
}
.highlight-step {
    background: #e6f7ff;
    color: #005bb5;
    border: 2px solid #0073e6;
}
.flow-arrow {
    text-align: center;
    color: #ccc;
    font-size: 20px;
}
.compare-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}
.compare-list li {
    font-size: 14px;
    margin-bottom: 5px;
}
.compare-footer {
    padding: 15px;
    text-align: center;
    font-weight: bold;
    background: #f9f9f9;
    color: #555;
}
.relight-footer {
    background: #fff8e1;
    color: #e65c00;
    font-size: 18px;
}
.compare-vs {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #999;
}
@media (max-width: 768px) {
    .compare-vs { display: none; } /* スマホ時はVSを隠す（縦積みになるため） */
    .trouble-grid {
        grid-template-columns: 1fr 1fr; /* スマホで2列 */
    }
}

/* 新規エリアマップ画像スタイル */
.area-map-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.city-text {
    font-size: 14px;
    color: #333;
    text-align: left;
    line-height: 1.6;
    background: #e6f7ff;
    padding: 12px;
    border-radius: 6px;
    border-left: 4px solid #0073e6;
}
.city-text strong {
    color: #005bb5;
    font-size: 15px;
    border-bottom: 1px dashed #0073e6;
}

/* 自己負担0円バナー */
.zero-yen-banner {
    background: linear-gradient(135deg, #ffcc00 0%, #ff6600 100%);
    color: #fff;
    text-align: center;
    padding: 30px 15px;
    margin: -10px 15px 30px 15px; /* ヒーロー画像のすぐ下に食い込ませる */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(255, 102, 0, 0.3);
    border: 3px solid #fff;
    position: relative;
    z-index: 10;
}
.zero-yen-banner h3 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.zero-yen-banner h2 {
    font-size: 26px;
    font-weight: 900;
    margin: 0;
    color: #333;
    background: #fff;
    display: inline-block;
    padding: 10px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.zero-yen-banner .price-zero {
    color: #d32f2f;
    font-size: 38px;
}
.zero-yen-banner p {
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    line-height: 1.6;
}
@media (max-width: 768px) {
    .zero-yen-banner h2 {
        font-size: 20px;
        padding: 8px 15px;
    }
    .zero-yen-banner .price-zero {
        font-size: 28px;
    }
    .zero-yen-banner p {
        font-size: 13px;
    }
}

/* スマホ用レイアウト崩れ・見づらさの抜本的修正 */
@media (max-width: 768px) {
    /* トラブルメニューを1列にして窮屈さを解消 */
    .trouble-grid {
        grid-template-columns: 1fr !important;
    }
    .trouble-card {
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* 比較図の余白とバランス */
    .compare-container {
        flex-direction: column;
        gap: 20px;
    }
    .compare-box {
        margin-bottom: 10px;
    }
    
    /* エリアカードの余白を圧縮して画面に収める */
    .area-card {
        padding: 15px 10px;
    }
    .area-icon-wrap {
        width: 45px;
        height: 45px;
        margin-bottom: 10px;
    }
    .area-card h4 {
        font-size: 16px !important;
    }
    .area-sub {
        font-size: 11px;
        margin-bottom: 10px;
    }
    
    /* 明朗会計テキストの調整 */
    .pricing-box {
        padding: 15px;
    }
    .pricing-title {
        font-size: 18px;
    }
    .pricing-text {
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* ヒーローのボタンがはみ出ないように */
    .hero .tel-btn {
        font-size: 18px !important;
        padding: 12px 20px !important;
        width: 90%;
        max-width: 320px;
        display: block;
        margin: 0 auto;
    }
}

/* Update47 追加修正 */
@media (max-width: 768px) {
    /* 対応エリアは1x4の縦並びに変更 */
    .area-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 比較ボックスが切れる問題の解消 */
    .compare-box {
        height: auto !important;
        overflow: visible !important;
    }
    .flow-step {
        overflow: visible !important;
        height: auto !important;
        padding: 15px 10px !important; /* スマホでは少し余裕を持たせる */
    }
    .compare-list {
        display: block !important;
        width: 100%;
        margin-top: 15px !important;
    }
    .compare-list li {
        text-align: left;
        margin-bottom: 8px;
        font-size: 13px; /* スマホで改行されないように少し小さく */
        line-height: 1.4;
    }
}

/* 三点リーダのベースライン落ち（iPhone/Macバグ）対策 */
.ja-ellipsis {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
    display: inline-block;
    transform: translateY(-0.2em); position: relative; /* それでもズレる場合のための物理補正 */
}

/* Update50: お客様の声スタイル */
.customer-voices {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}
.voice-card {
    background: #fff;
    border: 2px solid #eef5fc;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative;
}
.voice-card::before {
    content: '“';
    position: absolute;
    top: -10px;
    left: 15px;
    font-size: 60px;
    color: #e6f7ff;
    font-family: serif;
    line-height: 1;
}
.voice-header {
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}
.voice-profile {
    display: inline-block;
    background: #0073e6;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
}
.voice-title {
    font-size: 18px;
    color: #d32f2f;
    margin: 0;
    font-weight: bold;
}
.voice-text {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    margin: 0;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .customer-voices-section > p {
        font-size: 13px;
        line-height: 1.6;
        padding: 0 10px;
    }
    .voice-card {
        padding: 20px 15px;
    }
    .voice-title {
        font-size: 16px;
    }
    .voice-text {
        font-size: 14px;
    }
}

/* Update51: ご依頼ケース紹介スタイル */
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}
.case-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.case-header {
    background: #f0f5fa;
    padding: 20px;
    border-bottom: 2px solid #0073e6;
}
.case-badge {
    display: inline-block;
    background: #0073e6;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.case-title {
    font-size: 18px;
    color: #002244;
    margin: 0;
    line-height: 1.4;
}
.case-body {
    padding: 20px;
    flex-grow: 1;
}
.case-profile {
    font-size: 14px;
    font-weight: bold;
    color: #005bb5;
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
}
.case-detail {
    margin-bottom: 15px;
}
.case-detail:last-child {
    margin-bottom: 0;
}
.case-detail strong {
    display: block;
    font-size: 14px;
    color: #e65c00;
    margin-bottom: 5px;
}
.case-detail p {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 768px) {
    .case-grid {
        grid-template-columns: 1fr;
    }
    .case-title {
        font-size: 16px;
    }
    .case-detail p {
        font-size: 13px;
    }
}

/* Update54: スマホ版ロゴ1mm左移動 */
@media (max-width: 768px) {
    header h1 {
        transform: translateX(-8px); /* 約2ミリ（さらに1ミリ）左へ物理補正 */
    }
}

/* Update56: ロゴの確実な左寄せと文字間隔の縮小 */
@media (max-width: 768px) {
    header {
        padding-left: 5px !important; /* 元の15pxから10px分ガッツリ左へ寄せる */
    }
    .header-logo-img {
        margin-right: -4px !important; /* ロゴと文字の間の隙間を強制的に詰める */
    }
}

/* Update60: 会社概要ページのリッチ化 */
.promise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.promise-card {
    background: #f8fbff;
    border: 1px solid #cce5ff;
    padding: 5px 10px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s;
}
.promise-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 115, 230, 0.1);
}
.promise-icon {
    font-size: 40px;
    margin-bottom: 15px;
}
.promise-title {
    color: #005bb5;
    font-size: 18px;
    margin-bottom: 15px;
}
.promise-text {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    text-align: left;
}

.company-info-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.company-details-card, .company-map-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
    .promise-grid {
        grid-template-columns: 1fr;
    }
    .company-info-container {
        grid-template-columns: 1fr;
    }
    .company-map-card {
        padding: 20px;
    }
}

/* Update61: 採用情報ページ用スタイル */
.recruit-info-list .info-row dt {
    width: 25%;
}
.recruit-info-list .info-row dd {
    width: 75%;
    line-height: 1.8;
}
.flow-step-box {
    background: #f8fbff;
    border: 2px solid #cce5ff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    width: 250px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.flow-step-box .step-num {
    display: inline-block;
    background: #0073e6;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.flow-step-box h4 {
    color: #002244;
    font-size: 16px;
    margin: 0 0 10px 0;
}
.flow-step-box p {
    font-size: 13px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .recruit-info-list .info-row {
        flex-direction: column;
    }
    .recruit-info-list .info-row dt, 
    .recruit-info-list .info-row dd {
        width: 100%;
        text-align: left;
    }
    .recruit-info-list .info-row dd {
        padding-top: 10px;
    }
    .flow-step-container {
        flex-direction: column;
        align-items: center;
    }
    .flow-step-box {
        width: 100%;
        max-width: 300px;
    }
    .flow-step-container .flow-arrow {
        transform: rotate(90deg);
        margin: 5px 0;
    }
}

/* Update66: スマホ版の表示崩れ修正（採用フロー・プライバシー） */
.privacy-card {
    padding: 40px;
    line-height: 1.8;
    color: #444;
}
.privacy-list {
    margin-left: 0;
    padding-left: 25px;
    list-style-type: disc;
}
.flow-step-box {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .privacy-card {
        padding: 20px 15px; /* スマホでは窮屈にならないよう余白を小さく */
    }
    .privacy-card h3 {
        font-size: 16px !important;
    }
    .privacy-card p, .privacy-list li {
        font-size: 14px;
        text-align: left; /* 確実に左寄せ */
    }
    .flow-step-box {
        width: 100%;
        max-width: 100%; /* はみ出し防止 */
        padding: 15px;
    }
    .company-map-card .map-wrapper {
        min-height: 250px !important;
    }
}

/* Update70: 写真入りレイアウト */
.pricing-split-layout {
    display: flex;
    flex-direction: row;
}
.pricing-image {
    flex: 1;
    min-height: 300px;
}
.pricing-content {
    flex: 1.2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 768px) {
    .pricing-split-layout {
        flex-direction: column;
    }
    .pricing-image {
        min-height: 200px;
    }
    .pricing-content {
        padding: 5px 10px;
    }
}

.pricing-h2 {
    font-size: 22px;
}
.philosophy-h2 {
    font-size: 28px;
}
@media (max-width: 768px) {
    .pricing-h2 {
        font-size: 17px !important;
    }
    .philosophy-h2 {
        font-size: 18px !important;
    }
}

/* Reset heading margins for tight layouts */
.pricing-h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 標準スクロールバーを完全に非表示化（カスタムスクロールインジケーターを使用） */
::-webkit-scrollbar {
    display: none;
}
html {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}