/* -----------------------
  共通
  ----------------------- */
/* デバッグ用 */
.debug {
    display: none !important;
}

/* デバッグ用ユーザー切り替えコンポーネントのスクロールスタイル */
.debug-user-switcher {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

.debug-user-switcher::-webkit-scrollbar {
    width: 8px;
}

.debug-user-switcher::-webkit-scrollbar-track {
    background: #f7fafc;
    border-radius: 4px;
}

.debug-user-switcher::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.debug-user-switcher::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* -----------------------
  メインコンテンツ
  ----------------------- */
/* main-content, footer関連のスタイルはChakra UIで置き換え済み（App.jsx, Footer.jsx参照） */

/* -----------------------
  トップページ
  ----------------------- */
.home-page {
    width: 100%;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: #1f2937;
}

/* カルーセルセクション */
.hero-carousel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-content {
    text-align: center;
    color: #ffffff;
    padding: 40px 20px;
    max-width: 800px;
}

.carousel-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
}

.carousel-description {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #ffffff;
}

.carousel-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.carousel-button {
    padding: 12px 24px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.carousel-button:hover {
    background-color: #ffffff;
    color: #667eea;
}

.play-icon {
    font-size: 16px;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    color: #ffffff;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 14px;
    z-index: 10;
    transition: background-color 0.3s;
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
    color: transparent;
    cursor: pointer;
    font-size: 0;
    transition: all 0.3s;
    padding: 0;
}

.carousel-indicator.active {
    background-color: #ffffff;
    color: transparent;
    border-color: #ffffff;
}

/* 統計情報セクション */
.stats-section {
    background-color: #f9fafb;
    padding: 60px 20px;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.stat-card {
    background-color: #ffffff;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.stat-label {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
}

.stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    color: #1f2937;
}

.stat-unit {
    font-size: 18px;
    color: #6b7280;
}

/* 特徴セクション */
.features-section {
    background-color: #ffffff;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
}

.feature-card {
    text-align: center;
    padding: 24px;
}

.feature-icon {
    font-size: 48px;
    color: #2563eb;
    margin-bottom: 16px;
}

.feature-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1f2937;
}

.feature-description {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}

/* サービス種類セクション */
.services-section {
    background-color: #f9fafb;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* PC画面幅で4列表示 */
@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.service-card {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.service-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

.service-content {
    padding: 24px;
}

.service-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: #eff6ff;
    color: #2563eb;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.service-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1f2937;
}

.service-description {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
    line-height: 1.6;
}

.service-price {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 16px;
}

.service-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s;
}

.service-button:hover {
    background-color: #1d4ed8;
}

/* 最新情報セクション */
.news-section {
    background-color: #ffffff;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-item {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.news-item:last-child {
    border-bottom: none;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 16px;
}

.news-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    flex: 1;
}

.news-date {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

.news-description {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-carousel {
        height: 400px;
        margin: 0 20px;
    }

    .carousel-title {
        font-size: 32px;
    }

    .carousel-description {
        font-size: 16px;
    }

    .carousel-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .carousel-button {
        width: 100%;
        justify-content: center;
    }

    .carousel-prev,
    .carousel-next {
        padding: 8px 12px;
        font-size: 12px;
    }

    .carousel-prev {
        left: 10px;
    }

    .carousel-next {
        right: 10px;
    }

    .carousel-indicator {
        width: 10px;
        height: 10px;
        font-size: 0;
    }

    .section-container {
        padding: 40px 16px;
    }

    .section-title {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .news-header {
        flex-direction: column;
    }
}

/* -----------------------
  権限表示バッジ
  ----------------------- */
.permission-badge {
    position: fixed;
    top: 80px;
    right: 20px;
    padding: 8px 16px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
}

/* 既存のスタイルは新しい構造では使用しないため、コメントアウト */
/* .permission-badge > div {
    margin: 2px 0;
}

.permission-badge > div:first-child {
    margin-top: 0;
}

.permission-badge > div:last-child {
    margin-bottom: 0;
} */

.permission-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.permission-badge-label {
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.permission-badge-all {
    background-color: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

.permission-badge-logged-in {
    background-color: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.permission-badge-not-logged-in {
    background-color: #fce7f3;
    border-color: #f9a8d4;
    color: #9f1239;
}

.permission-badge-inaccessible {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
    opacity: 0.8;
}

/* 展開/非展開切り替え用スタイル */
.permission-badge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid #d1d5db;
}

.permission-badge-header:hover {
    opacity: 0.8;
}

.permission-badge-title {
    font-weight: 600;
    color: #374151;
}

.permission-badge-toggle {
    font-size: 10px;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.permission-badge-content {
    margin-top: 8px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.permission-badge-collapsed {
    padding: 8px 16px;
}

.permission-badge-expanded {
    padding: 8px 16px;
}

@media (max-width: 768px) {
    .permission-badge {
        top: 70px;
        right: 10px;
        font-size: 10px;
        padding: 6px 12px;
    }
    
    .permission-badge-header {
        padding: 2px 0;
        margin-bottom: 2px;
    }
    
    .permission-badge-content {
        margin-top: 4px;
    }
}

/* -----------------------
  ログインページ
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .login-page, .login-container, .login-title
   - .login-section, .login-section-title, .login-wechat-button, .wechat-icon
   - .login-divider, .login-form, .login-options, .login-link
   - .login-submit-button, .login-register
*/

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.password-input-container {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
}

.password-toggle:hover {
    color: #2563eb;
}

/* -----------------------
  ユーザー登録ページ
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .registration-page, .registration-container, .registration-title
   - .registration-section, .registration-wechat-button, .registration-divider
   - .registration-email-button
   - .registration-form-page, .registration-form-container, .registration-form-title, .registration-form
*/

/* フランチャイズ情報セクション */
.franchise-section {
    margin: 32px 0;
    padding: 24px;
    background-color: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 12px;
    border-left: 4px solid #f59e0b;
}

.franchise-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #fde68a;
}

.franchise-section-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.required {
    color: #ef4444;
    font-size: 12px;
    margin-left: 4px;
}

.radio-group {
    display: flex;
    gap: 24px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.form-help {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.registration-submit-button {
    width: 100%;
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 24px;
}

.registration-submit-button:hover {
    background-color: #1d4ed8;
}

/* 確認画面 */
.registration-confirm {
    max-width: 600px;
    margin: 0 auto;
}

.registration-confirm-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 32px;
    color: #1f2937;
}

.confirm-content {
    background-color: #f9fafb;
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.confirm-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.confirm-item:last-child {
    border-bottom: none;
}

.confirm-label {
    font-weight: 600;
    color: #374151;
    min-width: 150px;
}

.confirm-value {
    color: #6b7280;
    flex: 1;
}

.confirm-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.confirm-back-button,
.confirm-submit-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.confirm-back-button {
    background-color: #e5e7eb;
    color: #374151;
}

.confirm-back-button:hover {
    background-color: #d1d5db;
}

.confirm-submit-button {
    background-color: #2563eb;
    color: #ffffff;
}

.confirm-submit-button:hover {
    background-color: #1d4ed8;
}

/* 登録完了画面 */
.registration-complete {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 20px;
}

.complete-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background-color: #10b981;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.complete-title {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
}

.complete-message {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 32px;
    line-height: 1.6;
}

.complete-home-button {
    padding: 14px 32px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.complete-home-button:hover {
    background-color: #1d4ed8;
}

/* メールプレビュー */
.email-preview-section {
    margin: 40px 0;
    text-align: left;
}

.email-preview-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
}

.email-preview-box {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.email-preview-header {
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.email-preview-to,
.email-preview-subject {
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
}

.email-preview-to strong,
.email-preview-subject strong {
    color: #1f2937;
    margin-right: 8px;
}

.email-preview-body {
    color: #374151;
    line-height: 1.8;
    font-size: 14px;
}

.email-preview-body p {
    margin-bottom: 12px;
}

.email-preview-info {
    background-color: #f9fafb;
    padding: 16px;
    border-radius: 6px;
    margin: 16px 0;
    border-left: 3px solid #2563eb;
}

.email-preview-info p {
    margin-bottom: 8px;
}

.email-preview-info p:last-child {
    margin-bottom: 0;
}

.email-preview-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
}

.email-preview-footer p {
    margin-bottom: 4px;
}

.email-preview-footer p:last-child {
    margin-bottom: 0;
}

/* -----------------------
  メールアドレス確認ページ
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .email-verify-page, .email-verify-container, .email-verify-title
   - .email-verify-description, .email-verify-form, .email-verify-submit-button
   - .email-sent-message, .email-sent-icon, .email-sent-title, .email-sent-description
   - .email-verification-link-box, .email-verification-link, .email-verification-link-url
*/

.form-input-error {
    border-color: #ef4444;
}

.form-error {
    color: #ef4444;
    font-size: 14px;
    margin-top: 8px;
}

.form-help {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* -----------------------
  パスワード再発行ページ
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .password-reset-page, .password-reset-confirm-page
   - .password-reset-container, .password-reset-confirm-container
   - .password-reset-title, .password-reset-confirm-title
   - .password-reset-description, .password-reset-form, .password-reset-confirm-form
   - .password-reset-submit-button, .password-reset-confirm-submit-button
   - .email-sent-content, .email-sent-title, .email-sent-description
   - .email-content-box, .email-to, .email-body, .email-sent-actions
   - .password-reset-link-button
*/

/* -----------------------
  お問い合わせページ
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .contact-page, .contact-container, .contact-title, .contact-form
*/

.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.contact-submit-button {
    width: 100%;
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 24px;
}

.contact-submit-button:hover {
    background-color: #1d4ed8;
}

.contact-confirm {
    max-width: 600px;
    margin: 0 auto;
}

.contact-confirm-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 32px;
    color: #1f2937;
}

.contact-complete-message {
    text-align: center;
    padding: 40px 20px;
    background-color: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 8px;
    margin-bottom: 24px;
}

.contact-complete-message p {
    font-size: 18px;
    color: #166534;
    margin: 8px 0;
}

.contact-back-home-button {
    width: 100%;
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-back-home-button:hover {
    background-color: #1d4ed8;
}

/* -----------------------
  ユーザー規約・プライバシーポリシー・特定商取引法ページ
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .terms-page, .privacy-page, .commercial-transaction-page
   - .terms-container, .privacy-container, .commercial-transaction-container
   - .terms-title, .privacy-title, .commercial-transaction-title
*/

.terms-content,
.privacy-content,
.commercial-transaction-content {
    line-height: 1.8;
    color: #374151;
}

.terms-content h2,
.privacy-content h2 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 16px;
    color: #1f2937;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 8px;
}

.terms-content p,
.privacy-content p {
    margin-bottom: 16px;
}

.terms-content ul,
.privacy-content ul {
    margin-bottom: 16px;
    padding-left: 24px;
}

.terms-content li,
.privacy-content li {
    margin-bottom: 8px;
}

.terms-updated,
.privacy-updated {
    text-align: right;
    margin-top: 32px;
    color: #6b7280;
    font-size: 14px;
}

.commercial-transaction-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
}

.commercial-transaction-table th,
.commercial-transaction-table td {
    padding: 16px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.commercial-transaction-table th {
    background-color: #f9fafb;
    font-weight: 600;
    color: #1f2937;
    width: 200px;
    vertical-align: top;
}

.commercial-transaction-table td {
    color: #374151;
    line-height: 1.6;
}

/* -----------------------
  マイページ関連
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .mypage-page, .mypage-profile-page, .mypage-rental-car-page, .mypage-rental-car-detail-page
   - .mypage-hire-page, .mypage-hire-detail-page, .mypage-wallet-page, .mypage-coupons-page, .mypage-cancel-page
   - .mypage-container, .mypage-profile-container, .mypage-rental-car-container, .mypage-rental-car-detail-container
   - .mypage-hire-container, .mypage-hire-detail-container, .mypage-wallet-container, .mypage-coupons-container, .mypage-cancel-container
   - .mypage-title, .mypage-profile-title, .mypage-rental-car-title, .mypage-rental-car-detail-title
   - .mypage-hire-title, .mypage-hire-detail-title, .mypage-wallet-title, .mypage-coupons-title, .mypage-cancel-title
*/

.mypage-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.mypage-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.mypage-menu-item:hover {
    background-color: #f3f4f6;
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mypage-menu-icon {
    font-size: 32px;
}

.mypage-menu-content {
    flex: 1;
}

.mypage-menu-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.mypage-menu-description {
    font-size: 14px;
    color: #6b7280;
}

/* ユーザー情報ページ */
.mypage-profile-view {
    max-width: 600px;
    margin: 0 auto;
}

.profile-item {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #e5e7eb;
}

.profile-item:last-child {
    border-bottom: none;
}

.profile-label {
    font-weight: 600;
    color: #374151;
    min-width: 150px;
}

.profile-value {
    color: #6b7280;
    flex: 1;
}

.profile-edit-button,
.profile-save-button,
.profile-cancel-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 24px;
}

.profile-edit-button,
.profile-save-button {
    background-color: #2563eb;
    color: #ffffff;
}

.profile-edit-button:hover,
.profile-save-button:hover {
    background-color: #1d4ed8;
}

.profile-cancel-button {
    background-color: #e5e7eb;
    color: #374151;
    margin-right: 16px;
}

.profile-cancel-button:hover {
    background-color: #d1d5db;
}

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

/* 予約詳細ページ */
.reservation-detail-content {
    max-width: 800px;
    margin: 0 auto;
}

.detail-section {
    margin-bottom: 32px;
    padding: 24px;
    background-color: #f9fafb;
    border-radius: 8px;
}

.detail-section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.detail-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #374151;
    min-width: 150px;
}

.detail-value {
    color: #6b7280;
    flex: 1;
}

.cancellation-policy p {
    margin: 8px 0;
    color: #6b7280;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.detail-action-button {
    padding: 10px 20px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.detail-action-button:hover {
    background-color: #1d4ed8;
}

/* レビューモーダル */
.review-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.review-modal {
    background-color: #ffffff;
    padding: 32px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.review-modal-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1f2937;
}

.review-rating,
.review-comment-section {
    margin-bottom: 24px;
}

.review-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #374151;
}

.review-stars {
    display: flex;
    gap: 8px;
}

.review-star {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s;
}

.review-star.active {
    opacity: 1;
}

.review-comment {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.review-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.review-cancel-button,
.review-submit-button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.review-cancel-button {
    background-color: #e5e7eb;
    color: #374151;
}

.review-cancel-button:hover {
    background-color: #d1d5db;
}

.review-submit-button {
    background-color: #2563eb;
    color: #ffffff;
}

.review-submit-button:hover {
    background-color: #1d4ed8;
}

/* キャンセルモーダル */
.cancel-modal-content {
    margin-bottom: 24px;
}

.cancel-modal-content .cancellation-policy {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.cancel-modal-content .cancellation-policy h4 {
    margin-bottom: 10px;
    font-weight: bold;
    color: #1f2937;
}

.cancel-modal-content .cancellation-policy p {
    margin: 5px 0;
    color: #6b7280;
}

.cancel-modal-message {
    margin: 16px 0;
    color: #374151;
    font-weight: 500;
}

.cancel-modal-fee {
    margin: 12px 0;
    color: #dc2626;
    font-weight: 600;
}

.cancel-modal-confirm {
    margin-top: 16px;
    color: #6b7280;
}

/* 引き取りモーダル */
.pickup-modal-content {
    margin-bottom: 24px;
}

.pickup-modal-message {
    margin-bottom: 20px;
    color: #374151;
    line-height: 1.6;
}

.pickup-checkbox-section {
    margin-top: 20px;
}

.pickup-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
}

.pickup-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
}

.pickup-checkbox-label span {
    user-select: none;
}

.review-submit-button.disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.review-submit-button.disabled:hover {
    background-color: #9ca3af;
}

/* マイウォレット */
.wallet-content {
    max-width: 600px;
    margin: 0 auto;
}

.wallet-section {
    padding: 32px;
    background-color: #f9fafb;
    border-radius: 8px;
    margin-bottom: 24px;
}

.wallet-section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.wallet-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}

.wallet-amount-value {
    font-size: 36px;
    font-weight: 700;
    color: #2563eb;
}

.wallet-amount-unit {
    font-size: 18px;
    color: #6b7280;
}

.wallet-description {
    color: #6b7280;
    line-height: 1.6;
}

/* 解約ページ */
.cancel-content,
.cancel-confirm {
    max-width: 600px;
    margin: 0 auto;
}

.cancel-description-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.cancel-services-list {
    margin: 16px 0;
    padding-left: 24px;
}

.cancel-services-list li {
    margin: 8px 0;
    color: #374151;
}

.cancel-privacy-note {
    margin-top: 16px;
    color: #6b7280;
    font-size: 14px;
}

.cancel-button,
.cancel-confirm-button {
    width: 100%;
    padding: 12px 24px;
    background-color: #dc2626;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 24px;
}

.cancel-button:hover,
.cancel-confirm-button:hover {
    background-color: #b91c1c;
}

.cancel-confirm-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.cancel-confirm-message {
    margin-bottom: 16px;
    color: #374151;
    font-weight: 600;
}

.cancel-confirm-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.cancel-back-button {
    flex: 1;
    padding: 12px 24px;
    background-color: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cancel-back-button:hover {
    background-color: #d1d5db;
}

.cancel-confirm-button {
    flex: 1;
    margin-top: 0;
}

.cancel-complete-message {
    text-align: center;
    padding: 40px 20px;
    background-color: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 8px;
    margin-bottom: 24px;
}

.cancel-complete-message p {
    font-size: 18px;
    color: #166534;
    margin: 8px 0;
}

.cancel-back-home-button {
    width: 100%;
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cancel-back-home-button:hover {
    background-color: #1d4ed8;
}

/* -----------------------
  レンタカー関連ページ
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .rental-car-page, .rental-car-search-page, .rental-car-booking-page, .rental-car-booking-complete-page
   - .rental-car-container, .rental-car-search-container, .rental-car-booking-container, .rental-car-booking-complete-container
   - .rental-car-title, .rental-car-search-title, .rental-car-booking-title, .rental-car-booking-complete-title
*/

.rental-car-description {
    margin-bottom: 24px;
    color: #6b7280;
    line-height: 1.6;
}

.rental-car-search-button,
.rental-car-search-submit-button,
.rental-car-booking-submit-button {
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
    display: inline-block;
}

.rental-car-search-button:hover,
.rental-car-search-submit-button:hover,
.rental-car-booking-submit-button:hover {
    background-color: #1d4ed8;
}

.rental-car-search-form {
    max-width: 1000px;
    margin: 0 auto;
}

.search-section {
    margin-bottom: 32px;
    padding: 32px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.search-type-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}

.search-type-tab {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.search-type-tab:hover {
    color: #2563eb;
    background-color: #f3f4f6;
}

.search-type-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

.search-input-wrapper {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.search-input-large {
    flex: 1;
    padding: 16px 20px;
    font-size: 16px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.search-input-large:focus {
    outline: none;
    border-color: #2563eb;
}

.search-submit-button-large {
    padding: 16px 48px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
}

.search-submit-button-large:hover {
    background-color: #1d4ed8;
}

.search-hint {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
}

.search-options-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: #f9fafb;
    border-radius: 8px;
}

.search-option-group {
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.search-option-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.search-option-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1f2937;
}

.date-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* -----------------------
  ハイヤー料金見積もり結果
  ----------------------- */
.estimate-result-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px;
}

.estimate-js-output {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
}

.billing-info {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}

.billing-info__title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px 0;
}

.billing-info__amount {
    font-size: 32px;
    font-weight: 700;
    color: #2563eb;
    margin: 0;
}

.billing-info__amount span {
    font-size: 18px;
    font-weight: 500;
    color: #6b7280;
    margin-left: 4px;
}

.ride-details {
    margin-bottom: 24px;
}

.ride-details__list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.ride-details__item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.ride-details__item:last-child {
    border-bottom: none;
}

.ride-details__label {
    font-weight: 500;
    color: #6b7280;
}

.ride-details__value {
    font-weight: 600;
    color: #1f2937;
}

.ride_and_pdf {
    margin-bottom: 20px;
}

.pdf_btn_wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.pdf-download-button {
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    width: fit-content;
}

.pdf-download-button:hover {
    background-color: #1d4ed8;
}

.pdf-download-note {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}

.estimate-notice {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
    padding: 16px;
    background-color: #f9fafb;
    border-radius: 6px;
}

.yoyaku-button-container {
    margin-top: 24px;
    text-align: center;
}

.proceed-to-booking-button {
    width: 100%;
    padding: 16px 32px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.proceed-to-booking-button:hover {
    background-color: #1d4ed8;
}

.estimate-map-container {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.estimate-map-container iframe {
    display: block;
    width: 100%;
    height: 400px;
}

.border-bottom {
    border-bottom: 2px solid #e5e7eb;
}

.mr-5 {
    margin-right: 20px;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-3 {
    margin-bottom: 16px;
}

.fs-7 {
    font-size: 14px;
}

.text-white {
    color: #ffffff;
}

.text-dark {
    color: #1f2937;
}

.font-weight-bold {
    font-weight: 700;
}

.w-50 {
    width: 50%;
}

.d-flex {
    display: flex;
}

@media (max-width: 1024px) {
    .estimate-result-section {
        grid-template-columns: 1fr;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .search-type-tabs {
        flex-wrap: wrap;
    }

    .search-type-tab {
        padding: 10px 16px;
        font-size: 14px;
    }

    .search-input-wrapper {
        flex-direction: column;
    }

    .search-submit-button-large {
        width: 100%;
    }

    .date-inputs-row {
        grid-template-columns: 1fr;
    }

    .search-section {
        padding: 20px;
    }

    .search-options-section {
        padding: 20px;
    }
}

.search-section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.search-type-selector {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.date-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* 乗り捨て料金表示 */
.oneway-fee-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #f3f4f6;
    border-radius: 6px;
}

.oneway-fee-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.oneway-fee-value {
    font-size: 16px;
    color: #1f2937;
    font-weight: 700;
}

/* 料金表示セクション */
.price-display-section {
    padding: 24px;
    background-color: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 24px;
}

/* 料金計算詳細 */
.price-calculation-detail {
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 16px;
}

.price-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.price-detail-item:last-child {
    border-bottom: none;
}

.price-detail-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.price-detail-value {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

.price-display-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.price-item:last-of-type {
    border-bottom: none;
}

.price-item-warning {
    background-color: #fef2f2;
    padding: 12px;
    border-radius: 6px;
    border-bottom: none;
}

.price-label {
    font-size: 16px;
    color: #374151;
    font-weight: 500;
}

.price-value {
    font-size: 16px;
    color: #1f2937;
    font-weight: 600;
}

.price-item-warning .price-label,
.price-item-warning .price-value {
    color: #dc2626;
    font-weight: 700;
}

.price-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #eff6ff;
    border: 2px solid #2563eb;
    border-radius: 8px;
    margin-top: 8px;
}

.price-total-label {
    font-size: 18px;
    color: #1f2937;
    font-weight: 700;
}

.price-total-value {
    font-size: 24px;
    color: #2563eb;
    font-weight: 700;
}

/* 料金計算ボタン */
.calculate-price-button {
    width: 100%;
    padding: 14px 24px;
    background-color: #10b981;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 16px;
}

.calculate-price-button:hover {
    background-color: #059669;
}

.calculate-price-button:active {
    background-color: #047857;
}

/* 確認ボタン無効化時のスタイル */
.rental-car-booking-submit-button:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.rental-car-booking-submit-button:disabled:hover {
    background-color: #9ca3af;
}

.price-calculation-required-message {
    margin-top: 8px;
    padding: 12px;
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    font-size: 14px;
    text-align: center;
}

/* 確認画面での料金表示 */
.confirm-price-detail {
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 16px;
}

.confirm-price-detail .confirm-item {
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.confirm-price-detail .confirm-item:last-child {
    border-bottom: none;
}

.confirm-price-detail .confirm-label {
    font-size: 14px;
    color: #6b7280;
}

.confirm-price-detail .confirm-value {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

.confirm-item-warning {
    background-color: #fef2f2;
    padding: 12px;
    border-radius: 6px;
}

.confirm-item-warning .confirm-label,
.confirm-item-warning .confirm-value {
    color: #dc2626;
    font-weight: 700;
}

.confirm-item-total {
    background-color: #eff6ff;
    padding: 16px;
    border: 2px solid #2563eb;
    border-radius: 8px;
    margin-top: 8px;
}

.confirm-item-total .confirm-label {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.confirm-item-total .confirm-value {
    font-size: 24px;
    font-weight: 700;
    color: #2563eb;
}

/* 完了ページでの料金表示 */
.price-summary-section {
    padding: 24px;
    background-color: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 24px;
}

.price-summary-calculation-detail {
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 16px;
}

.price-summary-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.price-summary-detail-item:last-child {
    border-bottom: none;
}

.price-summary-detail-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.price-summary-detail-value {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

.price-summary-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.price-summary-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.price-summary-item:last-of-type {
    border-bottom: none;
}

.price-summary-item-warning {
    background-color: #fef2f2;
    padding: 12px;
    border-radius: 6px;
    border-bottom: none;
}

.price-summary-label {
    font-size: 16px;
    color: #374151;
    font-weight: 500;
}

.price-summary-value {
    font-size: 16px;
    color: #1f2937;
    font-weight: 600;
}

.price-summary-item-warning .price-summary-label,
.price-summary-item-warning .price-summary-value {
    color: #dc2626;
    font-weight: 700;
}

.price-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #eff6ff;
    border: 2px solid #2563eb;
    border-radius: 8px;
    margin-top: 8px;
}

.price-summary-total-label {
    font-size: 18px;
    color: #1f2937;
    font-weight: 700;
}

.price-summary-total-value {
    font-size: 24px;
    color: #2563eb;
    font-weight: 700;
}

.card-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.rental-car-booking-confirm,
.hire-booking-form-confirm {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px;
}

.rental-car-booking-confirm-title,
.hire-booking-form-confirm-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 32px;
    color: #1f2937;
}

.booking-complete-content {
    max-width: 800px;
    margin: 0 auto;
}

.complete-message {
    text-align: center;
    padding: 40px 20px;
    background-color: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 8px;
    margin-bottom: 24px;
}

.complete-message p {
    font-size: 18px;
    color: #166534;
    margin: 8px 0;
}

.email-content-section {
    margin-bottom: 24px;
}

.email-content-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
}

.complete-back-home-button {
    width: 100%;
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.complete-back-home-button:hover {
    background-color: #1d4ed8;
}

/* -----------------------
  ハイヤー関連ページ
  ----------------------- */
/* 大幅修正予定の警告メッセージ */
.revision-warning {
    padding: 16px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    margin-bottom: 24px;
    text-align: center;
    font-weight: bold;
    color: #856404;
}
.hire-page,
.hire-shared-page,
.hire-booking-page,
.hire-booking-form-page,
.hire-booking-complete-page {
    min-height: calc(100vh - 64px - 80px);
    padding: 0;
    background-color: #f9fafb;
}

/* ハイヤートップページのヒーローセクション（カルーセル） */
.hire-hero-carousel {
    position: relative;
    max-width: 1200px;
    margin: 64px auto 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    padding: 0 20px;
}

/* ハイヤーサービス種類セクション */
.hire-services-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* ハイヤー特徴セクション */
.hire-features-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* ハイヤーページのレスポンシブ対応 */
@media (max-width: 768px) {
    .hire-hero-carousel {
        height: 400px;
        margin: 64px 16px 0;
    }
}

/* Chakra UIで置き換え済みのスタイルは削除:
   - .hire-container, .hire-shared-container, .hire-booking-container, .hire-booking-form-container, .hire-booking-complete-container
   - .hire-title, .hire-shared-title, .hire-booking-title, .hire-booking-form-title, .hire-booking-complete-title
*/

.hire-description {
    margin-bottom: 24px;
    color: #6b7280;
    line-height: 1.6;
}

.hire-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hire-link-button {
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
    display: inline-block;
}

.hire-link-button:hover {
    background-color: #1d4ed8;
}

.hire-shared-notice {
    padding: 16px;
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #92400e;
    line-height: 1.6;
}

.shared-info {
    padding: 24px;
    background-color: #eff6ff;
    border-radius: 8px;
    margin-bottom: 24px;
}

.shared-info-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1f2937;
}

.shared-info p {
    margin: 8px 0;
    color: #374151;
}

.shared-warning {
    margin-top: 16px;
    padding: 16px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}

.shared-warning-text {
    margin: 0;
    color: #dc2626;
    font-weight: 600;
    line-height: 1.6;
}

.hire-booking-form,
.hire-booking-form-form {
    max-width: 900px;
    margin: 0 auto;
}

/* ステップ表示 */
.booking-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding: 0 20px;
    position: relative;
}

.booking-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 2px;
    background-color: #e5e7eb;
    z-index: 0;
}

.booking-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    padding: 0 8px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 8px;
    border: 2px solid #e5e7eb;
}

.booking-step.active .step-number {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.step-label {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    white-space: nowrap;
}

.booking-step.active .step-label {
    color: #2563eb;
    font-weight: 600;
}

/* フォームセクション */
.form-section {
    margin-bottom: 32px;
    padding: 24px;
    background-color: #f9fafb;
    border-radius: 8px;
}

.form-section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1f2937;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 8px;
}

/* 日時選択 */
.datetime-selector {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.date-selector {
    width: 100%;
}

.time-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-select {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    background-color: #ffffff;
    cursor: pointer;
    min-width: 80px;
}

.time-separator {
    font-size: 16px;
    color: #374151;
    font-weight: 500;
}

/* 場所入力 */
.location-input-group {
    display: flex;
    gap: 8px;
}

.location-button {
    padding: 12px 16px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.location-button:hover {
    background-color: #e5e7eb;
}

/* 経由地（未定） */
.via-locations {
    margin: 16px 0;
}

.via-location-item {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

.via-location-item .form-input {
    flex: 1;
}

.remove-via-button {
    padding: 12px 16px;
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.remove-via-button:hover {
    background-color: #dc2626;
}

.add-via-button {
    padding: 12px 24px;
    background-color: #ffffff;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #2563eb;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.add-via-button:hover {
    border-color: #2563eb;
    background-color: #eff6ff;
}

/* 車両・人数選択 */
.vehicle-selector,
.passenger-selector {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.passenger-selector {
    gap: 24px;
}

.passenger-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.number-input {
    width: 80px;
    text-align: center;
}

.input-unit {
    font-size: 16px;
    color: #374151;
    font-weight: 500;
}

/* 相乗り募集の説明 */
.shared-booking-notice {
    margin-top: 24px;
    padding: 20px;
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
}

.shared-booking-notice-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #92400e;
}

.shared-booking-notice-list {
    margin: 0;
    padding-left: 24px;
    color: #92400e;
}

.shared-booking-notice-list li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.shared-booking-notice-list li:last-child {
    margin-bottom: 0;
}

.form-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid #e5e7eb;
}

.form-tab {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: -2px;
}

.form-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.form-tab:hover {
    color: #2563eb;
}

.hire-booking-submit-button,
.hire-booking-form-submit-button {
    width: 100%;
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 24px;
}

.hire-booking-submit-button:hover,
.hire-booking-form-submit-button:hover {
    background-color: #1d4ed8;
}

/* -----------------------
  404ページ
  ----------------------- */
/* Chakra UIで置き換え済みのスタイルは削除:
   - .not-found-page, .not-found-container, .not-found-title
   - .not-found-message, .not-found-description, .not-found-sitemap
   - .not-found-sitemap-title, .not-found-links, .not-found-back-button
*/

/* レンタカー検索ページの新スタイル */
.search-form-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.form-group-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}

.form-group-inline:first-child {
    min-width: 120px;
}

.form-group-inline:nth-child(2) {
    min-width: 150px;
}

.form-group-inline:nth-child(3) {
    flex: 1 1 auto;
    min-width: 400px;
}

.form-group-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 24px;
}

.switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.switch-text {
    font-size: 14px;
    color: #111827;
    user-select: none;
}

/* Ant Design風スイッチスタイル */
.ant-switch {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    min-width: 44px;
    height: 22px;
    line-height: 22px;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.25);
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    touch-action: manipulation;
    padding: 0;
    margin: 0;
}

.ant-switch:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.ant-switch-checked {
    background-color: #2563eb;
}

.ant-switch-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    transition: all 0.2s ease-in-out;
}

.ant-switch-checked .ant-switch-handle {
    left: calc(100% - 18px - 2px);
}

.ant-switch-handle::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border-radius: 9px;
    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
    transition: all 0.2s ease-in-out;
    content: '';
}

.ant-switch-inner {
    display: block;
    margin: 0 7px 0 25px;
    color: #fff;
    font-size: 12px;
    transition: margin 0.2s;
    pointer-events: none;
}

.ant-switch-checked .ant-switch-inner {
    margin: 0 25px 0 7px;
}

.ant-switch-inner-checked,
.ant-switch-inner-unchecked {
    display: block;
    opacity: 0;
    transition: opacity 0.2s;
}

.ant-switch-checked .ant-switch-inner-checked {
    opacity: 1;
}

.ant-switch:not(.ant-switch-checked) .ant-switch-inner-unchecked {
    opacity: 1;
}

.form-group-button {
    flex: 0 0 auto;
}

.form-input-disabled {
    background-color: #f3f4f6;
    color: #6b7280;
    cursor: not-allowed;
    opacity: 0.7;
}

.date-inputs-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-separator {
    color: #6b7280;
    font-weight: 500;
}

.search-submit-button {
    padding: 12px 32px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    white-space: nowrap;
    height: fit-content;
}

.search-submit-button:hover {
    background-color: #1d4ed8;
}

.search-results-section {
    margin-top: 32px;
}

.car-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.car-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.car-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #2563eb;
}

.car-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #f3f4f6;
}

.car-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-card-content {
    padding: 16px;
}

.car-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.car-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.car-card-price {
    font-size: 20px;
    font-weight: 700;
    color: #2563eb;
}

.price-unit {
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
}

.car-card-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.car-detail-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.car-detail-label {
    color: #6b7280;
}

.car-detail-value {
    color: #111827;
    font-weight: 500;
}

.no-results {
    text-align: center;
    padding: 48px 24px;
    background-color: #f9fafb;
    border-radius: 12px;
    margin-top: 24px;
}

.no-results-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.no-results-title {
    font-size: 20px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.no-results-message {
    font-size: 14px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.6;
}

/* 予約者入力ページの車両情報表示エリア */
.car-info-display {
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    border: none;
}

/* セクション内の車両情報表示 */
.booking-section .car-info-display {
    margin-bottom: 0;
}

.car-info-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 16px 0;
}

.car-info-card {
    display: flex;
    gap: 24px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.car-info-image {
    flex-shrink: 0;
    width: 200px;
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f3f4f6;
}

.car-info-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-info-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.car-info-row:last-child {
    border-bottom: none;
}

.car-info-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.car-info-value {
    font-size: 14px;
    color: #111827;
    font-weight: 600;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .search-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .form-group-inline {
        width: 100%;
    }

    .form-group-inline:nth-child(3) {
        min-width: 100%;
    }

    .form-group-switch {
        padding-top: 0;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .car-list-grid {
        grid-template-columns: 1fr;
    }

    .car-info-card {
        flex-direction: column;
    }

    .car-info-image {
        width: 100%;
        height: 200px;
    }

    .date-inputs-row {
        flex-direction: column;
        gap: 8px;
    }

    .date-separator {
        display: none;
    }
}

/* -----------------------
  レンタカー予約ページ セクション分け
  ----------------------- */
.booking-section {
    margin-bottom: 32px;
    padding: 32px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.booking-section:last-of-type {
    margin-bottom: 24px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

/* セクション別の背景色 */
.booking-section-car {
    background-color: #f0f9ff;
    border-color: #bae6fd;
}

.booking-section-rental {
    background-color: #fefce8;
    border-color: #fde047;
}

.booking-section-price {
    background-color: #f0fdf4;
    border-color: #86efac;
}

.booking-section-personal {
    background-color: #faf5ff;
    border-color: #d8b4fe;
}

.booking-section-payment {
    background-color: #fff7ed;
    border-color: #fdba74;
}

/* 料金計算プロンプト */
.price-calculation-prompt {
    text-align: center;
    padding: 40px 20px;
}

.price-calculation-prompt-text {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* セクション内の料金計算ボタン */
.booking-section-price .calculate-price-button {
    margin-bottom: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* 再計算ボタン */
.recalculate-price-button {
    width: 100%;
    padding: 10px 20px;
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 16px;
}

.recalculate-price-button:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

/* お支払い情報セクション */
.payment-method-section {
    margin-top: 16px;
}

.payment-method-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1f2937;
}

.payment-method-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-method-option {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.payment-method-option:hover {
    border-color: #94a3b8;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}

.payment-method-option input[type="radio"] {
    margin-top: 4px;
}

.payment-method-description {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-method-label {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.payment-method-note {
    font-size: 13px;
    color: #6b7280;
}

.payment-card-section {
    margin-top: 24px;
    padding: 24px;
    background-color: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* 運転者氏名コピーボタン */
.driver-name-input-group {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.driver-name-input-group .form-input {
    flex: 1;
}

.copy-driver-name-button {
    padding: 8px 16px;
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.copy-driver-name-button:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

.copy-driver-name-button:active {
    background-color: #d1d5db;
}

/* 個人情報サブセクション */
.personal-info-subsection {
    margin-top: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
}

.personal-info-subsection:first-of-type {
    margin-top: 0;
}

.reservation-info-subsection {
    border-color: #c084fc;
    background-color: #faf5ff;
}

.driver-info-subsection {
    border-color: #60a5fa;
    background-color: #eff6ff;
    margin-top: 24px;
}

.subsection-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.reservation-info-subsection .subsection-title {
    color: #7c3aed;
    border-bottom-color: #c084fc;
}

.driver-info-subsection .subsection-title {
    color: #2563eb;
    border-bottom-color: #60a5fa;
}

/* 確認画面のサブセクション */
.confirm-subsection {
    margin-top: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
}

.confirm-subsection:first-of-type {
    margin-top: 0;
}

.confirm-subsection.reservation-info-subsection {
    border-color: #c084fc;
    background-color: #faf5ff;
}

.confirm-subsection.driver-info-subsection {
    border-color: #60a5fa;
    background-color: #eff6ff;
    margin-top: 24px;
}

.confirm-subsection .subsection-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.confirm-subsection.reservation-info-subsection .subsection-title {
    color: #7c3aed;
    border-bottom-color: #c084fc;
}

.confirm-subsection.driver-info-subsection .subsection-title {
    color: #2563eb;
    border-bottom-color: #60a5fa;
}

/* 確認画面のセクション */
.confirm-section {
    margin-bottom: 24px;
    padding: 24px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    overflow: visible;
}

.confirm-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.confirm-section.booking-section-car {
    background-color: #f0f9ff;
    border-color: #bae6fd;
}

.confirm-section.booking-section-rental {
    background-color: #fefce8;
    border-color: #fde047;
}

.confirm-section.booking-section-price {
    background-color: #f0fdf4;
    border-color: #86efac;
}

.confirm-section.booking-section-personal {
    background-color: #faf5ff;
    border-color: #d8b4fe;
}

.confirm-section.booking-section-payment {
    background-color: #fff7ed;
    border-color: #fdba74;
}

.confirm-section .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.confirm-section .section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #2563eb;
    color: #ffffff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.payment-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1f2937;
}

.payment-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.payment-method-badge.payment-online {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.payment-method-badge.payment-offline {
    background-color: #fef3c7;
    color: #b45309;
}

/* 確認ボタンセクション */
.booking-submit-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #e5e7eb;
    text-align: center;
}

.booking-submit-section .rental-car-booking-submit-button {
    width: 100%;
    max-width: 400px;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 600;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .booking-section {
        padding: 20px;
        margin-bottom: 24px;
    }

    .section-title {
        font-size: 20px;
        flex-wrap: wrap;
    }

    .section-number {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .price-calculation-prompt {
        padding: 24px 16px;
    }

    .payment-card-section {
        padding: 16px;
    }
}

/* 画面一覧ページのスタイル */
.page-flow-diagram-page {
    min-height: 100vh;
    background-color: #f9fafb;
    padding: 24px;
}

.page-flow-diagram-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.page-flow-diagram-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px 0;
}

.page-flow-diagram-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.page-flow-diagram-legend {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 32px;
}

.legend-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.permission-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.permission-all {
    background-color: #dbeafe;
    color: #1e40af;
}

.permission-logged-in {
    background-color: #fef3c7;
    color: #92400e;
}

.permission-not-logged-in {
    background-color: #fce7f3;
    color: #9f1239;
}

/* ページごとの権限バッジ（インライン表示用） */
.page-permission-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    z-index: 999;
}

/* 権限略称バッジ（色付きテキスト） */
.permission-abbreviation-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    cursor: help;
    position: relative;
    z-index: 999;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    line-height: 1.4;
    min-width: 32px;
    text-align: center;
}

.permission-abbreviation-badge:hover {
    transform: scale(1.1);
}

/* ツールチップ（マウスオン時の表示） */
.permission-abbreviation-badge::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1002;
}

.permission-abbreviation-badge:hover::after {
    opacity: 1;
}

/* ツールチップの矢印 */
.permission-abbreviation-badge::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1002;
}

.permission-abbreviation-badge:hover::before {
    opacity: 1;
}

.page-permission-all {
    background-color: #dbeafe;
    color: #1e40af;
}

.page-permission-logged-in {
    background-color: #fef3c7;
    color: #92400e;
}

.page-permission-not-logged-in {
    background-color: #fce7f3;
    color: #9f1239;
}

/* 権限の凡例セクション */
.page-flow-diagram-permission-legend {
    margin: 24px 0;
    padding: 16px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.permission-legend-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1f2937;
}

.permission-legend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.permission-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    transition: box-shadow 0.2s ease;
}

.permission-legend-item:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.permission-legend-label {
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
}

.page-flow-diagram-tree {
    margin-top: 24px;
}

/* セクション区切り */
.page-flow-diagram-section {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 2px solid #e5e7eb;
}

.page-flow-diagram-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.page-flow-diagram-section-title {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.tree-node {
    margin-bottom: 8px;
}

.tree-node-content {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
}

.tree-node-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e5e7eb;
    margin-left: 12px;
}

.tree-node-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.2s;
    flex: 1;
    min-width: 0;
}

.tree-node-main > * {
    flex-shrink: 0;
}

.tree-node-main:hover {
    background-color: #f9fafb;
    border-color: #2563eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tree-node-icon {
    color: #6b7280;
    font-size: 16px;
    flex-shrink: 0;
}

.tree-node-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: auto;
}

.tree-node-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.tree-node-path {
    font-size: 12px;
    color: #374151;
    font-family: 'Courier New', monospace;
    flex-shrink: 0;
    min-width: 200px;
    text-align: right;
}

.tree-node-children {
    margin-left: 24px;
    margin-top: 4px;
    position: relative;
}

.tree-node-children::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e5e7eb;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .page-flow-diagram-container {
        padding: 20px;
    }

    .page-flow-diagram-title {
        font-size: 24px;
    }

    .legend-items {
        flex-direction: column;
        gap: 12px;
    }

    .tree-node-main {
        flex-wrap: wrap;
    }

    .tree-node-path {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
        font-size: 11px;
    }

    .tree-node-children {
        margin-left: 16px;
    }
}

/* -----------------------
  予約一覧ページ（カード形式）
  ----------------------- */

/* 検索セクション */
.reservation-search-section {
    margin-bottom: 24px;
}

.reservation-search-form {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.search-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.search-form-group {
    display: flex;
    flex-direction: column;
}

.search-form-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.search-form-input,
.search-form-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #ffffff;
}

.search-form-input:focus,
.search-form-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-form-select {
    cursor: pointer;
}

.search-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.search-reset-button {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    background-color: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.search-reset-button:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    color: #374151;
}

/* 旧検索入力（後方互換性のため残す） */
.reservation-search-input {
    width: 100%;
    max-width: 600px;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.reservation-search-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* カードグリッド */
.reservation-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

/* 予約カード */
.reservation-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.reservation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #2563eb;
}

.reservation-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f3f4f6;
}

.reservation-card-number {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

/* 状態バッジ */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.status-badge-reserved {
    background-color: #dbeafe;
    color: #1e40af;
}

.status-badge-active {
    background-color: #fef3c7;
    color: #92400e;
}

.status-badge-completed {
    background-color: #d1fae5;
    color: #065f46;
}

.status-badge-cancelled {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-badge-default {
    background-color: #f3f4f6;
    color: #4b5563;
}

/* カードボディ */
.reservation-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reservation-card-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.reservation-card-label {
    font-weight: 600;
    color: #6b7280;
    min-width: 100px;
    font-size: 14px;
}

.reservation-card-value {
    color: #1f2937;
    font-size: 14px;
    flex: 1;
    word-break: break-word;
}

.reservation-card-price {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
}

/* 検索結果なし */
.reservation-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.reservation-no-results p {
    font-size: 16px;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .reservation-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .reservation-card {
        padding: 16px;
    }

    .reservation-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .reservation-card-number {
        font-size: 16px;
    }

    .reservation-card-label {
        min-width: 80px;
        font-size: 13px;
    }

    .reservation-card-value {
        font-size: 13px;
    }

    .reservation-card-price {
        font-size: 16px;
    }

    .reservation-search-form {
        padding: 16px;
    }

    .search-form-row {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 16px;
    }

    .search-form-input,
    .search-form-select {
        font-size: 14px;
        padding: 10px 12px;
    }

    .search-form-label {
        font-size: 13px;
    }

    .search-reset-button {
        width: 100%;
        padding: 12px;
    }

    .reservation-search-input {
        font-size: 14px;
        padding: 10px 14px;
    }
}

/* -----------------------
  メタバースページ
  ----------------------- */
.metaverse-page {
    min-height: calc(100vh - 64px - 80px);
    padding: 40px 20px;
    background-color: #ffffff;
}

.metaverse-container {
    max-width: 1200px;
    margin: 0 auto;
}

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

.metaverse-main-title {
    font-size: 48px;
    font-weight: 700;
    color: #9333ea;
    margin-bottom: 16px;
    line-height: 1.2;
}

.metaverse-subtitle {
    font-size: 18px;
    color: #6b7280;
}

/* フィーチャードメタバースセクション */
.metaverse-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 64px;
    background-color: #f9fafb;
    padding: 32px;
    border-radius: 12px;
}

.metaverse-featured-preview {
    position: relative;
}

.metaverse-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background-color: #000000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.metaverse-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.metaverse-quick-booking {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
    width: 100%;
}

.metaverse-quick-booking:hover {
    background-color: #1d4ed8;
}

.metaverse-quick-booking-icon {
    font-size: 18px;
}

.metaverse-featured-content {
    position: relative;
}

.metaverse-popular-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 16px;
    background-color: #dc2626;
    color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.metaverse-play-count {
    margin-top: 48px;
    margin-bottom: 24px;
}

.metaverse-play-count-label {
    display: block;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.metaverse-play-count-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
}

.metaverse-play-count-icon {
    font-size: 24px;
    color: #2563eb;
}

.metaverse-featured-title {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
    line-height: 1.3;
}

.metaverse-featured-description {
    font-size: 18px;
    color: #2563eb;
    margin-bottom: 12px;
    line-height: 1.6;
}

.metaverse-featured-notice {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.6;
}

.metaverse-featured-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.metaverse-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.metaverse-button-booking {
    background-color: #10b981;
    color: #ffffff;
}

.metaverse-button-booking:hover {
    background-color: #059669;
}

.metaverse-button-play {
    background-color: #2563eb;
    color: #ffffff;
}

.metaverse-button-play:hover {
    background-color: #1d4ed8;
}

.metaverse-button-icon {
    font-size: 16px;
}

/* 多彩なテーマのメタバース探索セクション */
.metaverse-explore {
    margin-bottom: 64px;
}

.metaverse-explore-title {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    margin-bottom: 32px;
}

.metaverse-themes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.metaverse-theme-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.metaverse-theme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.metaverse-theme-badge {
    display: inline-block;
    padding: 6px 12px;
    background-color: #f3f4f6;
    color: #374151;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
}

.metaverse-theme-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.metaverse-theme-release {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

.metaverse-theme-release-icon {
    font-size: 16px;
}

.metaverse-theme-description {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 24px;
}

.metaverse-theme-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metaverse-theme-button {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.metaverse-theme-button-play {
    background-color: #2563eb;
    color: #ffffff;
}

.metaverse-theme-button-play:hover {
    background-color: #1d4ed8;
}

.metaverse-theme-button-booking {
    background-color: #dc2626;
    color: #ffffff;
}

.metaverse-theme-button-booking:hover {
    background-color: #b91c1c;
}

.metaverse-theme-button-contact {
    background-color: #10b981;
    color: #ffffff;
}

.metaverse-theme-button-contact:hover {
    background-color: #059669;
}

.metaverse-theme-button-icon {
    font-size: 14px;
}

/* カスタムメタバース開発セクション */
.metaverse-custom {
    background: linear-gradient(135deg, #f472b6 0%, #9333ea 100%);
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 32px;
}

.metaverse-custom-content {
    max-width: 800px;
    margin: 0 auto;
}

.metaverse-custom-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.metaverse-custom-description {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 32px;
    line-height: 1.6;
}

.metaverse-custom-button {
    display: inline-block;
    padding: 12px 32px;
    background-color: #ffffff;
    color: #9333ea;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.metaverse-custom-button:hover {
    background-color: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .metaverse-main-title {
        font-size: 32px;
    }

    .metaverse-featured {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    .metaverse-featured-title {
        font-size: 24px;
    }

    .metaverse-featured-description {
        font-size: 16px;
    }

    .metaverse-featured-buttons {
        flex-direction: column;
    }

    .metaverse-button {
        width: 100%;
        justify-content: center;
    }

    .metaverse-themes-grid {
        grid-template-columns: 1fr;
    }

    .metaverse-explore-title {
        font-size: 24px;
    }

    .metaverse-custom {
        padding: 32px 24px;
    }

    .metaverse-custom-title {
        font-size: 24px;
    }

    .metaverse-custom-description {
        font-size: 16px;
    }
}

/* ========================================
   クーポン機能スタイル
   ======================================== */

/* クーポンセクション */
.coupon-section {
    margin-bottom: 24px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.coupon-section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #333;
}

/* クーポン入力グループ */
.coupon-input-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.coupon-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.coupon-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.coupon-apply-button {
    padding: 12px 24px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.coupon-apply-button:hover:not(:disabled) {
    background-color: #0056b3;
}

.coupon-apply-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* クーポン適用済み情報 */
.coupon-applied-info {
    margin-top: 12px;
}

.coupon-info-card {
    background-color: white;
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.coupon-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.coupon-info-name {
    font-size: 18px;
    font-weight: 600;
    color: #28a745;
}

.coupon-remove-button {
    padding: 6px 12px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.coupon-remove-button:hover {
    background-color: #c82333;
}

.coupon-info-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coupon-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon-info-label {
    font-size: 14px;
    color: #666;
}

.coupon-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* 料金表示での割引表示 */
.price-item-subtotal {
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
    margin-top: 8px;
}

.price-item-discount {
    color: #28a745;
    font-weight: 600;
}

.price-value-discount {
    color: #28a745;
}

.confirm-value-discount {
    color: #28a745;
    font-weight: 600;
}

/* ハイヤー料金見積もりでのクーポン表示 */
.billing-info-with-coupon {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.billing-info-original {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #666;
}

.billing-info-label {
    font-size: 14px;
    color: #666;
}

.billing-info-amount-original {
    font-size: 14px;
    text-decoration: line-through;
    color: #999;
}

.billing-info-discount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #28a745;
    font-weight: 600;
}

.billing-info-amount-discount {
    font-size: 14px;
    color: #28a745;
    font-weight: 600;
}

.coupon-applied-badge {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
}

.coupon-applied-text {
    font-size: 12px;
    color: #155724;
    font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .coupon-input-group {
        flex-direction: column;
    }

    .coupon-input {
        width: 100%;
    }

    .coupon-apply-button {
        width: 100%;
    }

    .coupon-info-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .coupon-remove-button {
        width: 100%;
    }
}

/* -----------------------
  rc-slider カスタムスタイル（料金帯スライダー）
  ----------------------- */
/* Chakra UIは範囲スライダー非対応のためrc-sliderを利用 */
.rc-slider {
    position: relative;
    width: 100%;
    height: 20px;
    padding: 5px 0;
    border-radius: 6px;
    touch-action: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rc-slider-rail {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #e2e8f0;
    border-radius: 2px;
}

.rc-slider-track {
    position: absolute;
    height: 4px;
    background-color: #ff6b35;
    border-radius: 2px;
}

.rc-slider-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    background-color: #fff;
    border: 2px solid #ff6b35;
    border-radius: 50%;
    cursor: grab;
    cursor: -webkit-grab;
    touch-action: pan-x;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.rc-slider-handle:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.rc-slider-handle:active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1.15);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.rc-slider-handle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.rc-slider-handle-dragging {
    border-color: #ff6b35;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.rc-slider-mark {
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    font-size: 12px;
}

.rc-slider-mark-text {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    color: #999;
}

.rc-slider-mark-text-active {
    color: #333;
}

.rc-slider-step {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
}

.rc-slider-dot {
    position: absolute;
    bottom: -2px;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    background-color: #fff;
    border: 2px solid #e9e9e9;
    border-radius: 50%;
    cursor: pointer;
}

.rc-slider-dot-active {
    border-color: #ff6b35;
}

.rc-slider-disabled {
    background-color: #e9e9e9;
}

.rc-slider-disabled .rc-slider-track {
    background-color: #ccc;
}

.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
    border-color: #ccc;
    box-shadow: none;
    background-color: #fff;
    cursor: not-allowed;
}

.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
    cursor: not-allowed !important;
}

/* 検索条件を追加ボタンのフォーカス時の背景色を透明に保つ */
.css-dzgzin {
    background-color: transparent !important;
}

.css-dzgzin:focus {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.css-dzgzin:focus-visible {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.css-dzgzin:focus-within {
    background-color: transparent !important;
}

.css-dzgzin:active {
    background-color: transparent !important;
}

/* -----------------------
  保険パッケージ選択セクション
  ----------------------- */
.insurance-package-card {
    transition: all 0.2s ease;
}

.insurance-package-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.insurance-benefit-bar {
    display: flex;
    align-items: center;
    gap: 4px;
}

.insurance-benefit-bar-item {
    width: 8px;
    height: 4px;
    border-radius: 2px;
}

/* モーダル内のテーブル */
.insurance-comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.insurance-comparison-table th,
.insurance-comparison-table td {
    padding: 12px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.insurance-comparison-table th {
    background-color: #f9fafb;
    font-weight: bold;
}

.insurance-comparison-table td {
    background-color: white;
    vertical-align: top;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .insurance-comparison-table {
        font-size: 12px;
    }
    
    .insurance-comparison-table th,
    .insurance-comparison-table td {
        padding: 8px;
    }
}

/* -----------------------
  管理画面テーブルヘッダー
  ----------------------- */
/* テーブルヘッダーの折り返しスタイル */
/* Chakra UIのTable.ColumnHeader用スタイル */
[data-part="columnHeader"],
.chakra-table__column-header {
    max-width: 180px !important;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    vertical-align: middle;
}

/* テーブルヘッダー内のテキスト折り返し */
[data-part="columnHeader"] > *,
.chakra-table__column-header > * {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* -----------------------
  マイページ クーポン
  ----------------------- */
/* ソート・絞り込みボタン内のアイコンを確実に表示 */
.mypage-coupons-sort-trigger svg,
.mypage-coupons-filter-trigger svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #374151;
    fill: currentColor;
}
.mypage-coupons-sort-trigger svg:last-of-type,
.mypage-coupons-filter-trigger svg:last-of-type {
    width: 12px;
    height: 12px;
}

.mypage-coupons-faq-link {
    text-decoration: none;
}

.mypage-coupons-faq-link:hover {
    text-decoration: none;
}