/* 記事全体のコンテナ */
.CaseArticle {
    max-width: 960px;
    margin: 0 auto;
    border-radius: 8px;
}

/* タイトル */
.CaseTitle {
    font-size: 22px;
    color: #47372a;
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 3px solid #711717;
    padding-bottom: 15px;
}

/* セクションタイトル */
.CaseSubTitle {
    font-size: 22px;
    color: #47372a;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 5px solid #47372a;
}

/* 小見出し */
.CaseHeading {
    font-size: 18px;
    color: #333;
    margin-top: 15px;
    margin-bottom: 10px;
}

/* テキスト */
.CaseText {
    margin-bottom: 15px;
    font-size: 16px;
}

.CaseText strong {
    color: #47372a;
}

/* セクション */
.CaseSection {
    margin-bottom: 40px;
}

/* 画像コンテナの共通設定 */
.CaseImageContainer {
    margin: 10px 0;
    text-align: center;
    /* パターン２のグループ内の子要素用設定 */
    width: 100%; 
}

/* 親要素のpaddingを無視して広がる画像コンテナ */
.CaseImageContainer--full {
    margin: 20px 0;
}

/* 画像グループ (縦長写真2枚横並び用) */
.CaseImageGroup {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.CaseImageGroup .CaseImageContainer {
    flex: 1; /* 均等幅 */
}

/* 画像本体 */
.CaseImage {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    object-fit: cover;
}

/* 画像キャプション */
.CaseCaption {
    font-size: 14px;
    color: #666;
    margin-top: 8px;
}

/* 特徴のボックスコンテナ (3列表示) */
.CaseFeatureContainer {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.CaseFeatureBox {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 280px;
    background: #f3ede2;
    padding: 10px;
    /* border-radius: 6px; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
}



.CaseFeatureHeading {
    font-size: 18px;
    color: #47372a;
    margin-bottom: 10px;
    border-bottom: 1px dashed #47372a;
    padding-bottom: 5px;
}

/* お問い合わせ文 */
.CaseContact {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #e53935;
    margin-top: 30px;
    padding: 15px;
    border: 2px solid #e53935;
    border-radius: 5px;
}



/* -------------------
    マルチデバイス対応
   ------------------- */

/* タブレット・スマートフォン向け (画面幅768px以下) */
@media (max-width: 768px) {
    .CaseArticle {
        padding: 20px 15px;
    }

    .CaseTitle {
        font-size: 24px;
    }

    /* 親要素のpaddingを無視して広がる画像コンテナの調整 */
    .CaseImageContainer--full {
        margin-left: -15px;
        margin-right: -15px;
    }

    /* パターン２：縦長写真グループ (スマホでも2枚横並びを維持) */
    .CaseImageGroup {
        flex-direction: row; /* 横並びを維持 */
        gap: 10px; /* ギャップを少し狭める */
    }
    
    /* 画像グループ内の画像サイズ調整 (スマホで若干小さくなるように調整) */
    .CaseImageGroup .CaseImageContainer {
        min-width: calc(50% - 5px);
    }
    
    /* 特徴ボックスを縦並びにする */
    .CaseFeatureBox {
        flex: 1 1 100%; /* 1列表示 */
        min-width: unset;
    }
}
* 問い合わせ導線全体を囲むコンテナのスタイル */
.contact-info-box {
    /* 枠線の設定: double（二重線）、8px（太さ）、sienna（茶色系） */
    border: 8px double #a0522d; 
    /* 内側の余白 */
    padding: 15px; 
    /* 外側の余白 */
    margin: 20px 0; 
    /* 背景色（必要に応じて設定） */
    background-color: #fff8e1; 
    /* フォントサイズの調整（必要に応じて） */
    font-size: 1.1em;
    /* 中央揃え（必要に応じて） */
    text-align: center; 
}

/* 会社名や住所のフォントを太くするスタイル */
.contact-info-box strong {
    font-weight: bold;
    color: #8b4513; /* 茶色系の強調色 */
}

/* 電話番号を特に目立たせるスタイル */
.contact-info-box .tel-number {
    font-size: 1.4em;
    color: #8b0000; /* 濃い赤色で強調 */
    font-weight: bold;
}