@charset "UTF-8";
/* CSS Document */

/* --- 特集コンポーネント全体 --- */
        .feature-wrapper {
            max-width: 1040px; /* ★制約: max-width: 1040px */
            margin: 40px auto; /* ページ内で中央揃え */
        }

        .feature-container {
            display: flex;
            width: 100%;
        }

        /* --- 左側：テキストコンテンツ --- */
        .text-content {
                flex-basis: 55%;
                background-color: #005bac;
                color: #ffffff;
                padding: 40px 30px;
                position: relative;
                z-index: 1;
                clip-path: polygon(0 0, 100% 0, 66% 100%, 0 100%);
                padding-right: 3%;
        }


.text-content h2 {
	font-size: 3rem;
	line-height: 1.5;
    margin: 20px 0px;
}

.text-content p {
	width:360px;
}

        .feature-header {
            display: flex;
            align-items: center;
            gap: 15px; /* タグとタイトルの間のスペース */
            margin-bottom: 24px;
        }


/* --- 変数定義（色の管理） --- */
        :root {
    --header-bg-blue: #005bac;
    --tag-bg-blue: #1c325c;
    --text-dark: #333333;
    --text-light: #ffffff;
}

        /* --- ヘッダーコンポーネント --- */
        .feature-header {
            /* ★外側の青い背景 */
            background-color: var(--header-bg-blue);
            padding: 8px; /* 青いフチの太さ */
            max-width: 1040px; /* PCでの最大幅 */
            margin: 0 auto; /* 中央揃え */
            box-sizing: border-box; /* paddingを含めて幅を計算 */
			position: relative;
        }

        .feature-header-content {
            background-color: var(--text-light);
            color: var(--text-dark);
            padding: 0px 30px 0px 120px;
            position: relative;
            z-index: 1;
            font-size: 2rem;
            font-weight: 600;
            box-sizing: border-box;
            min-height: 40px;
            display: flex;
            align-items: center;
            clip-path: polygon(5% 0, 100% 0, 96% 100%, 0 100%);
            /* width: 100%; */
            min-width: 476px;
        }

        .feature-header::before {
            /* ★「特集」タグの作成 */
    content: '特集';
    position: absolute;

    /* ★変更点：配置位置を調整 */
    /* 親のpadding(8px) - 5px = 3px */
    left: 3px;
    top: 3px;
    
    /* ★変更点：z-indexで白ボックスより手前に配置 */
    z-index: 2;

    /* ★変更点：bottom: 0 を削除し、heightを明示 */
    width: 115px;
    height: 40px; 
    
    background-color: var(--tag-bg-blue);
    color: var(--text-light);
    font-size: 2rem; /* ユーザー指定のサイズ */
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
        }

.image-content figure {
	display: none;
}


/* --- ★レスポンシブ対応 (スマホ) --- */
@media (max-width: 1360px) {
    .feature-header {
        width: 100%;
        padding: 8px 0px;
    }

    .feature-header-content {
        font-size: 1.3rem;
        padding: 0 26px 0 60px;
        min-height: 32px; /* 高さを調整 */
        min-width: auto;
    }

    /* ★変更点：セレクタを .feature-header::before に変更 */
    .feature-header::before {
        width: 60px;
        font-size: 1.3rem;
        clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
        height: 32px; /* 高さを調整 */
        /* top, left は 3px のまま（同じ重なり具合を維持） */
        left: -4px;
    }
	
	.text-content h2 br {
		display: none;
	}
	
			.text-content p {
    width: 100%;
}
	
.image-content figure {
	display: block;
}
	
	
}


        /* --- 右側：画像コンテンツ --- */
        .image-content {
            flex-basis: 55%;
            display: flex;
            justify-content: center;
            gap: 25px;
            padding: 31% 20px 20px 140px;
            margin-left: -20%;
            background-image: url(../future/img/future_pic_main.png);
			background-repeat: no-repeat;
			background-position: right;
        }

        .person-card {
            flex: 1; /* 3つのカードで幅を均等に分割 */
            max-width: 150px; /* カードが広がりすぎないように */
            text-align: center;
        }

        .person-card img {
            width: 100%;
            height: auto;
            display: block;
        }

        .person-card .caption {
            border: 1px solid #e0e0e0;
            padding: 8px 5px;
            background: #ffffff;
            margin-top: -2px; /* 画像とピッタリくっつける */
            height: 58px;
        }

        .person-card .title {
            font-size: 10px;
            color: #333;
            /* margin: 0 0 8px 0; */
            line-height: 1.5;
            text-align: center;
        }

        .person-card .name {
            font-size: 16px;
            font-weight: bold;
            color: #111;
            margin: 0;
            text-align: center;
        }

        /* --- ★レスポンシブ対応 --- */
        @media (max-width: 1360px) {
            .feature-container {
                /* ★ご要望：テキストの後に画像が来るように */
                flex-direction: column; 
            }

            .text-content {
                /* 幅を100%に戻し、切り抜きを解除 */
                flex-basis: auto;
                clip-path: none;
                padding: 15px;
				padding-bottom: 30px;
            }
			.text-content h2 {
				font-size: 2.3rem;
			}
			

            .image-content {
                /* 幅を100%に戻し、ネガティブマージンを解除 */
                flex-basis: auto;
                margin-left: 0;
                flex-direction: column;
                align-items: center;
				background-image: none!important;
				padding: 0px;
        margin-top: 10px;
            }
			
            


        }


.jirei_future_67_right_pc {
    float: right;
	width:40%;
	max-width: 200px;
	margin-left: 20px;
	    margin-top: 25px;
	clear:both;
}
.jirei_future_67_right_sp {
    display: none;
}

.jirei_future_67_left {
    float: left;
	width:40%;
	max-width: 200px;
	margin-right: 20px;
	clear:both;
}
.jirei_future_67_left figcaption{
    font-size: 14px;
    margin-top: 6px;
}
.jirei_future_67_left figcaption span {
	font-size: 1.3em;
	font-weight: bold;
}

        /* --- ★レスポンシブ対応 --- */
@media print, screen and (max-width: 769px) {

.jirei_future_67_right_pc {
    display: none;
}
.jirei_future_67_right_sp {
    display: block;
    float: none;
	width:100%;
	max-width: 420px;
	margin:20px auto;
	clear:both;
}
			
.jirei_future_67_left {
    float:none;
	width:100%;
	max-width: 420px;
	margin:20px auto;
	clear:both;
}

}