/* styles.css */
:root {
    /* カラーシステム */
    --color-primary: #0D7734;
    --color-primary-dark: #006e32;
    --color-primary-light: #40a060;
    
    --color-secondary: #e60012;
    --color-secondary-dark: #c50010;
    --color-secondary-light: #ff3333;
    
    --color-accent: #00a0e9;
    --color-accent-dark: #0080c0;
    --color-accent-light: #b3e3f5;
    
    --color-warning: #f39800;
    --color-info: #b3e3f5;
    --color-info-text: #001F73;
    
    --color-text-dark: #333333;
    --color-text-light: #ffffff;
    --color-text-accent: #7A0625;
    
    --color-border: #e0e0e0;
    
    --color-inheritance-bg: #FFF3D1; /* 相続問題背景色 */
    
    /* レイアウト変数 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 20px;
    
    /* アクション色 */
    --color-contact-btn: #00439B;
    --color-contact-btn-hover: #003278;
    
    /* Bootstrap互換変数（Bootstrapのカスタマイズ用） */
    --bs-success: var(--color-primary);
    --bs-danger: var(--color-secondary);
    --bs-warning: var(--color-warning);
    --bs-info: var(--color-accent-light);
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400; 
    color: var(--color-text-dark);
    line-height: 1.6;
    position: relative;
}

/* タブレット以上の背景画像設定 */
@media (min-width: 768px) {
    body::before {
        content: "";
        position: absolute;
        top: -50px;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../images/background-image.png');
        background-size: 100% auto;
        background-position: center top;
        background-repeat: no-repeat;
        opacity: 0.5;
        filter: blur(15px);
        -webkit-filter: blur(15px);
        z-index: -1;
        pointer-events: none;
    }
}

/* PC以上の背景画像設定 */
@media (min-width: 992px) {
    body::before {
        top: -180px;
    }
}

/* ヘッダースタイル */
.company-header {
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.bg-white {
    background-color: transparent !important;
}

.logo {
    max-height: 40px;
}

.phone-icon {
    width: 36px;
    height: 36px;
}

/* メインヘッダー */
.page-header {
    background-color: var(--color-primary) !important;
}

.main-title {
    line-height: 1.8;
    font-size: 1rem;
}

/* コンテンツエリア */
.content-area {
}

.inheritance-problem.bg-danger {
    background-color: var(--color-secondary) !important;
    border-radius: var(--border-radius-md);
}

.inheritance-problem.bg-warning {
    background-color: var(--color-warning) !important;
    border-radius: var(--border-radius-md);
    color: var(--color-text-dark);
}

.steps.bg-info {
    background-color: var(--color-info) !important;
    border-radius: var(--border-radius-lg);
    color: var(--color-info-text);
}

.steps .check-item::before {
    border-color: var(--color-info-text);
}

.company-support {
}

.support-title {
    color: var(--color-secondary);
}

.company-info.bg-success, .contact-area.bg-success, footer.bg-success {
    background-color: var(--color-primary) !important;
    border-radius: var(--border-radius-md);
}

.contact-button .btn {
    background-color: var(--color-secondary);
    color: white;
    border-radius: 0;
    padding: 6px 12px 6px 40px;
    position: relative;
    border: none;
    line-height: 1.2;
    text-align: left;
}

.contact-button .btn::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 50%;
}

.contact-button .btn::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent white;
}

/* 画像スタイル */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* イントロ部分の会話イラスト */
.conversation-image-sm {
    max-width: 179px;
    margin: 0 auto;
}

.conversation-image-md {
}

/* 相続問題のイラスト */
.inheritance-image-sm {
    max-width: 100%;
    margin: 0 auto;
}

.inheritance-image-md {
    max-width: 100%;
}

.inheritance-image-lg {
    max-width: 100%;
}

/* 相続問題背景色 */
.inheritance-bg {
    background-color: var(--color-inheritance-bg) !important;
}

/* 夫婦のイラスト */
.couple-image {
    max-width: 183px;
}

/* 相談員のイラスト */
.consultant-image {
    max-width: 145px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .conversation-image-md {
        max-width: 198px;
    }
    
    .couple-image {
        max-width: 185px;
    }
    
    .consultant-image {
        max-width: 169px;
    }
}

@media (min-width: 768px) {
}

/* ==========================================
   フォントサイズ管理（レスポンシブ対応）
   ========================================== */

/* ベースフォントサイズ（モバイル: ~767px） */
.fs-custom-md {
    font-size: 1.125rem !important; /* 18px相当 */
}

.fs-custom-lg {
    font-size: 1.375rem !important; /* 22px相当 */
}

/* タブレット以上（768px~） */
@media (min-width: 768px) {
    /* ルートフォントサイズ調整 */
    html {
        font-size: 112.5%; /* 16px → 18px (18÷16=1.125=112.5%) */
    }
    
    /* タイトル要素 */
    .main-title, 
    .section-title {
        font-size: 1.556rem !important; /* 28px相当 (28÷18=1.556) */
    }
    
    /* 説明文要素 */
    .problem-description {
        font-size: 1.278rem !important; /* 23px相当 (23÷18=1.278) */
    }
    
    /* カスタムフォントサイズクラス */
    .fs-custom-md {
        font-size: 1.333rem !important; /* 24px相当 (24÷18=1.333) */
    }
    
    .fs-custom-lg {
        font-size: 1.556rem !important; /* 28px相当 (28÷18=1.556) */
    }
}

/* PC以上（992px~） */
@media (min-width: 992px) {
    /* コンテナ幅の調整 */
    .content-area .container {
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* 画像サイズ設定 */
    .conversation-image-md {
        max-width: 230px;
    }
    
    .couple-image {
        max-width: 205px;
    }
    
    .consultant-image {
        max-width: 157px;
    }
    
    /* ステップエリア */
    .steps {
        font-size: 1.111rem !important; /* 20px相当 (20÷18=1.111) */
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* 相続問題エリア */
    .inheritance-problem {
        max-width: 850px;
        margin-left: auto;
        margin-right: auto;
    }

    /* タイトル要素 */
    .main-title,
    .section-title {
        font-size: 2rem !important; /* 36px相当 (36÷18=2) */
    }
    
    /* 説明文要素 */
    .problem-description {
        font-size: 1.444rem !important; /* 26px相当 (26÷18=1.444) */
    }
    
    /* カスタムフォントサイズクラス */
    .fs-custom-md {
        font-size: 1.556rem !important; /* 28px相当 (28÷18=1.556) */
    }
    
    .fs-custom-lg {
        font-size: 2rem !important; /* 36px相当 (36÷18=2) */
    }
}

/* 丸みを持たせたスタイル */
.rounded {
    border-radius: var(--border-radius-md) !important;
}

/* フッタースタイル */
footer {
    font-size: 0.75rem;
}

.footer-contact-text {
    font-size: 1.111rem !important; /* 20px相当 (20÷18=1.111) */
}

/* スペーシング調整 */
.container {
    padding-left: 12px;
    padding-right: 12px;
}

/* テキストスタイル */
.fw-bold {
    font-weight: 500 !important;
}

/* Extra Bold (900)スタイル - Bootstrapの拡張 */
.fw-extra-bold {
    font-weight: 900 !important;
}

/* カスタムカラー */
.text-custom-maroon {
    color: var(--color-text-accent) !important;
}

/* カスタムボーダー - Bootstrapの拡張 */
.border-custom-gray {
    border-color: var(--color-border) !important;
}

p {
    margin-bottom: 0.8rem;
}

/* 追従するお問い合わせボタン */
.floating-contact-buttons {
    position: fixed;
    top: 30px; 
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transition: top 0.3s ease;
}

/* メインビジュアルが見えているときのポジション調整用クラス - 実際の位置はJSで動的に設定 */
.floating-contact-buttons.below-main-title {
    /* 位置はJSで動的に設定 */
}

/* 四角マーク付きのテキスト */
.check-item {
    position: relative;
    padding-left: 1.5em;
}

.check-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em; 
    width: 1em;
    height: 1em;
    border: 1px solid #fff;
    box-sizing: border-box;
}

/* Bootstrapクラスのオーバーライド */
.bg-success {
    background-color: var(--color-primary) !important;
}

.btn-success {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* セクションタイトル */
.section-title {
    line-height: 1.8;
}

.phone-area .section-title {
    line-height: 1.6; 
}

/* 電話ボタンスタイル */
.phone-button .btn {
    background-color: #4C0000;
    color: white;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.phone-button a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transition: all 0.3s ease;
}

.phone-button a:hover {
    transform: scale(1.1);
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.contact-button a,
.contact-button .btn,
.contact-button a.btn {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    border-radius: 0 !important; 
    background-color: var(--color-contact-btn) !important;
    border-color: var(--color-contact-btn) !important;
    color: var(--color-text-light) !important;
    transition: all 0.3s ease;
}

.contact-button a:hover,
.contact-button .btn:hover,
.contact-button a.btn:hover {
    transform: scale(1.05);
    background-color: var(--color-contact-btn-hover) !important;
    border-color: var(--color-contact-btn-hover) !important;
}