/*
 * Custom Layout Adjustments
 * -------------------------
 */

/* 1. 画像が親要素からはみ出さないように確実に設定 (モバイル/PC共通) */
#content img {
    max-width: 100% !important; 
    height: auto;
}


/* 2. PCレイアウト (960px以上) に限定して固定幅の拡張を適用 */
@media only screen and (min-width: 960px) {

    /* ページ全体幅を 940px から 1090px へ変更 */
    #wrapper, .inner{
        width: 1090px !important;
    }
    
    /* 右サイド部 (#content) の幅を 625px から 775px へ変更 */
    #content{
        width: 775px !important;
    }
    
    /* トップページのサムネイルラッパー (thumbWrap) を #contentの幅に合わせ、中央配置 */
    .thumbWrap{
        width: 775px !important; 
        /* ★★★ ズレの相殺: margin: 0 auto 0 20px に変更 ★★★ */
        /* margin: 0 auto; は 上 右 下 左 の順。 
           autoで中央に寄せた後、左マージンを正の値 (20px) にすることで、
           要素全体を右に20px強制的に移動させます。
        */
        margin: 0 auto 0 20px !important; 
    }

    /* thumbWrap内の3つのリストアイテム (li) の幅とマージンを再調整 */
    .thumbWrap li{
        width: 235px !important;
        margin: 0 15px 0 0 !important; 
        padding: 2px 0 40px !important;
        text-align: center !important; 
    }
    
    /* 最後の要素のマージンをリセットして、横幅に収める */
    .thumbWrap li:nth-child(3) {
        margin-right: 0 !important;
    }
}




/* 既存CSSの影響を避けるため、可能な限りクラスセレクタを使用 */

/* 見出し部分のコンテナとスタイル */
.service-heading-container {
    max-width: 900px;
    margin: 0 auto 20px auto;
}
.service-heading {
    font-size: 1.5em; 
    font-weight: bold;
    color: #333;
}

/* ---------------------------------------------------- */
/* PC/デフォルト設定: 2列（Grid） */
/* ---------------------------------------------------- */
.service-item-container {
    max-width: 900px;
    margin: 0 auto;
    /* PC表示 (769px以上) で Grid を使って2列にする */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1の2列 */
    gap: 30px; /* 項目間の隙間 */
}

/* サービス項目全体を囲む部分 */
.service-item {
    /* アイコンがないため display: flex は不要だが、余計な影響を避けるため維持しても問題なし */
    /* ここでは要素一つで完結するため flex 関連を削除 */
    /* display: flex; */ 
    /* align-items: flex-start; */ 
    
    margin-bottom: 0; 
    border: 1px solid #ccc; 
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* タイトルと説明文のコンテナ (今回は service-item の唯一の子要素) */
.item-content {
    /* 特にPCでは調整不要 */
}

/* タイトル (Hタグの代替) のスタイル */
.item-title {
    font-size: 1.2em; /* H3相当のサイズ */
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 5px;
    /* 項目名にご指定のエンジ色を適用 */
    color: #b3424a; 
}

/* 説明文のスタイル */
.item-description {
    margin: 0;
    color: #555;
    line-height: 1.6;
    font-size: 0.95em;
}

/* ---------------------------------------------------- */
/* スマホ用設定: 縦一列 (メディアクエリ) */
/* 画面幅が768px以下の時に適用されるスタイル */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
    
    /* service-item-container の Grid を解除し、縦一列に戻す */
    .service-item-container {
        display: block; 
        padding: 0 10px; 
    }
    
    /* 縦一列に戻した際、項目間の下余白を復活させる */
    .service-item {
        margin-bottom: 20px; 
        /* アイコンがないため、テキストを中央寄せ */
        text-align: center;
        padding: 20px 15px;
    }

    /* タイトルと説明文を中央揃えに */
    .item-title,
    .item-description {
        text-align: center;
    }
}