/* --- イチオシセクション (ichioshi-section.css) --- */

.ichioshi-section {
    padding: 100px 0;   /* セクション全体の余白 */
    background-color: #fff; /* セクション自体の背景は白 */
    z-index: 1;
}

/* タイトル部分：白背景に乗るためレクストンブルー */
.intro-subtitle-accent {
    text-align: center;
    /* 2. 要素自体の上のマージンを 0 に設定（デフォルトの余白を消す） */
    margin-top: 30px; 
    margin-bottom: 0;
    font-weight: bold;
    color: #0054a6;     
    font-size: 30px;
    line-height: 1.4;
}

/* 2カラムレイアウト：ここを青パネルの基準に変更 */
.ichioshi-grid {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
    max-width: 1000px;  
    margin-left: auto;
    margin-right: auto;
    position: relative; /* ★背面の青パネルの基準点 */
    padding: 60px 40px; /* ★パネル内の上下左右の余白 */
    z-index: 1;
}

/* レクストンblueの背景パネル（ichioshi-gridの範囲に連動） */
.ichioshi-grid::before {
    content: "";
    position: absolute;
    z-index: -1;        /* コンテンツ（文字・画像）の背面に配置 */
    background-color: #0054a6;

    /* gridの範囲いっぱいにパネルを広げる設定（数値を維持） */
    top: 21%;
    left: 0;
    right: 0;
    bottom: 3%;
    
    width: 100%;        
    border-radius: 4px; 
}

.ichioshi-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 画像比率 1200:790 (約1.52:1) を維持 */
.ichioshi-img {
    width: 100%;
    aspect-ratio: 1200 / 790;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 4px;
}

.ichioshi-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* ホバー時に少しズームする演出 */
.ichioshi-item:hover .ichioshi-img img {
    transform: scale(1.05);
}

/* --- テキスト部分：中央表示 --- */
.ichioshi-body {
    text-align: center;
}

/* 記事見出し：白を維持 ＋ アンダーバー（1px・全幅）追加 */
.ichioshi-caption-lg {
    display: block;        /* 横幅いっぱいに広げるため block に変更 */
    position: relative;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;   /* 下の線とテキストの距離を考慮 */
    padding-bottom: 12px;  /* テキストと線の間の隙間 */
    color: #fff;
}

/* 見出しのアンダーバー設定 */
.ichioshi-caption-lg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;               /* 左端から開始 */
    width: 100%;           /* カラム内いっぱいの幅（100%） */
    height: 1px;           /* 修正：さらに細く（1px） */
    background-color: #fff; /* 線の色 */
}

/* 説明文：白を維持 */
.ichioshi-caption-sm {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

/* 注意事項：gridの外（白背景）にあるので、赤文字が維持され、青が追いかけてきません */
.ichioshi-note {
    text-align: center;
    color: #d93333;     
    font-size: 16px;
    margin-top: 0;
    font-weight: 500;
}

/* --- レスポンシブ --- */

@media (max-width: 768px) {
    .ichioshi-section {
        padding: 50px 0;
    }

    .ichioshi-grid {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px; /* スマホ時のパネル内余白 */
        width: 92%;         /* スマホではパネルを少し浮かせる */
    }
    
    .intro-subtitle-accent {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .ichioshi-caption-lg {
        font-size: 18px;
    }

    .ichioshi-note {
        padding: 0 20px;
        font-size: 13px;
        margin-top: 60px; /* スマホでは少し余白を詰める */
    }
}