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

@media (min-width: 769px) {
/* 特徴セクション全体 */
.feature-section {
    width: 100%;
    background-color: #d4ecea; /* 画像の背景色 */
    padding: 0px 0 5%; /* 上下の余白 */
    color: #594e47; /* 画像を参考にしたテキスト色 */
	margin: 7% auto 0%; 
}

/* コンテンツ全体を囲むラッパー（PCでは80%幅） */
.content-wrapper {
    width: 80%;
    margin: 0 auto; /* 水平方向中央寄せ */
    display: flex;
    align-items: stretch; /* 子要素の高さを親要素いっぱいに伸ばす */
}

/* 左側：画像エリア */
.feature-image {
    flex-basis: 42%; /* PCでの幅を35%に指定 */
    height: auto;
}

/* 右側：テキストエリア */
.feature-description {
    flex-basis: 65%; /* PCでの幅を65%に指定 */
    box-sizing: border-box; /* paddingを幅の内側で計算する */
    padding: 20px 5%; /* テキストエリア内の余白 */

    /* 説明文を下に固定するための設定 */
    display: flex;
    flex-direction: column;
	text-align: left
}

.title-block {
    /* この要素が余白を全て埋めることで、次の要素を下に押しやる */
    flex-grow: 1; padding: 11vw 0% 0 0; 
}

.description-block {
    /* この要素は常に下部に配置される */padding: 0 0% 0 0;  margin: 0;
}

/* テキストのスタイル */
.feature-description h2 {
    margin: 0;
    font-weight: normal;
}

.feature-description .sub-title {
    display: block;
    margin-top: 0.5em;
}

.feature-description .main-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 1.5em; /* 上の要素との間隔 */
}}


/* ===============================================
   スマートフォン表示のスタイル (画面幅が768px以下)
   =============================================== */
@media (max-width: 768px) {
	.feature-section {
    width: 100%;
    background-color: #d4ecea; /* 画像の背景色 */
    padding: 0px 0 5%; /* 上下の余白 */
    color: #594e47; /* 画像を参考にしたテキスト色 */
	margin: 7% auto 0%; 
}

/* コンテンツ全体を囲むラッパー（PCでは80%幅） */
.content-wrapper {
    width: 80%;
    margin: 0 auto; /* 水平方向中央寄せ */
    display: flex;
    align-items: stretch; /* 子要素の高さを親要素いっぱいに伸ばす */
}

/* 左側：画像エリア */
.feature-image {
    flex-basis: 42%; /* PCでの幅を35%に指定 */
    height: auto;
}

/* 右側：テキストエリア */
.feature-description {
    flex-basis: 65%; /* PCでの幅を65%に指定 */
    box-sizing: border-box; /* paddingを幅の内側で計算する */
    padding: 20px 5%; /* テキストエリア内の余白 */

    /* 説明文を下に固定するための設定 */
    display: flex;
    flex-direction: column;
	text-align: left
}

.title-block {
    /* この要素が余白を全て埋めることで、次の要素を下に押しやる */
    flex-grow: 1; padding: 3vw 0% 3vw 0; 
}

.description-block {
    /* この要素は常に下部に配置される */padding: 0 0% 0 0;  margin: 0;
}

/* テキストのスタイル */
.feature-description h2 {
    margin: 0;
    font-weight: normal;
}

.feature-description .sub-title {
    display: block;
    margin-top: 0.5em;
}

.feature-description .main-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 1.5em; /* 上の要素との間隔 */
}
	

    .content-wrapper {
        width: 100%; /* スマホでは幅を100%に */
        flex-direction: column; /* 要素を縦積みに変更 */
    }

    /* 画像エリア（上部に表示される） */
    .feature-image {
        width: 100%;
        min-height: 300px; /* スマホ用に高さを調整 */
    }

    /* テキストエリア（下部に表示される） */
    .feature-description {
        width: 100%;
        padding: 40px 20px; /* スマホ用に余白を調整 */
    }

    .title-block {
        flex-grow: 0; /* 縦積みなので余白を埋める必要はない */
    }
    
    .feature-description h2 {
        font-size: 2rem; /* スマホ用に文字サイズを調整 */
    }
}
	

@media (min-width: 769px) {
	/* ===============================================
   比較セクションのスタイル
   クラス名が重複しないように "comparison-" を接頭辞として使用
   =============================================== */

.comparison-section {
    /* 右カラムの背景色と10%のマージン部分の色 */
    background-color: #ebf6f4;
    padding: 0px 0;
    /* PC表示ではFlexboxで左右カラムを配置 */
    display: flex;
}

/* --- 左カラム (55%) --- */
.comparison-left {
    flex-basis: 55%;
    background-color: #ffffff;
    padding-bottom: 1%; /* 細則テキストの下に余白を持たせる */
}

/* --- 右カラム (35%) --- */
.comparison-right {
    flex-basis: 35%;
    margin-left: 2.2%; /* 左カラムとの間に10%のマージン（溝）を作る */
    padding: 3% 2%;
    box-sizing: border-box; /* paddingを幅の内側で計算 */
}

/* --- 左カラム内の要素 --- */
.left-top-image img {
    width: 100%;
    display: block; /* 画像下の余分な余白を防ぐ */
}

.left-bottom-image-wrapper {
    /* 画像を右寄せにするためのコンテナ */
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.left-bottom-image-wrapper img {
    width: 70%; /* 親要素の90%幅 */
    display: block;margin: 20px auto 0 19%; 
}

.left-fine-print {
    width: 70%;margin: 20px auto 0 19%;
    text-align: center;
    font-size: 11px;
    color: #888;
    line-height: 1.6;
}


/* --- 右カラム内の要素 --- */
.info-block {
    margin-bottom: 50px; /* 各ブロック間の余白 */ 
}

.info-block:last-of-type {
    margin-bottom: 0;
}

.info-block h3 {
    margin-top: 0;
    margin-bottom: 1em;
}

.info-block p {
    margin: 0;
    line-height: 1.8;
}

.info-block img {
    width: 100%;
    display: block;
    margin-top: 20px;
}

.right-sidenote {
    text-align: right;
    font-size: 12px;
    color: #888;
    margin-top: 40px;
}}


/* ===============================================
   スマートフォン表示のスタイル (画面幅が992px以下)
   =============================================== */
@media (max-width: 768px) {
	
	.comparison-section {
    /* 右カラムの背景色と10%のマージン部分の色 */
    background-color: #ebf6f4;
    padding: 0px 0;
    /* PC表示ではFlexboxで左右カラムを配置 */
    display: flex;
}

/* --- 左カラム (55%) --- */
.comparison-left {
    flex-basis: 55%;
    background-color: #ffffff;
    padding-bottom: 1%; /* 細則テキストの下に余白を持たせる */
}

/* --- 右カラム (35%) --- */
.comparison-right {
    flex-basis: 35%;
    margin-left: 2.2%; /* 左カラムとの間に10%のマージン（溝）を作る */
    padding: 3% 2%;
    box-sizing: border-box; /* paddingを幅の内側で計算 */
}

/* --- 左カラム内の要素 --- */
.left-top-image img {
    width: 100%;
    display: block; /* 画像下の余分な余白を防ぐ */
}

.left-bottom-image-wrapper {
    /* 画像を右寄せにするためのコンテナ */
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.left-bottom-image-wrapper img {
    width: 80%; /* 親要素の90%幅 */
    display: block;margin: 10px auto 0 auto; 
}

.left-fine-print {
    width: 80%;margin: 10px auto 10px auto;
    text-align: left;
    font-size: 11px;
    color: #888;
    line-height: 1.6;
}


/* --- 右カラム内の要素 --- */
.info-block {
    margin-bottom: 2%; /* 各ブロック間の余白 */ 
}

.info-block:last-of-type {
    margin-bottom: 0;
}

.info-block h3 {
    margin-top: 0;
    margin-bottom: 1em;
}

.info-block p {
    margin: 0;
    line-height: 1.8;
}

.info-block img {
    width: 100%;
    display: block;
    margin-top: 20px;
}

.right-sidenote {
    text-align: right;
    font-size: 12px;
    color: #888;
    margin-top: 40px;
}
	
	
	
    .comparison-section {
        flex-direction: column; /* 縦積みに変更 */
        padding: 0; /* スマホでは上下の大きな余白は不要に */
    }

    .comparison-left,
    .comparison-right {
        flex-basis: auto; /* flex-basisをリセット */
        width: 100%; 
    }

    .comparison-right {
        margin-left: 0; /* 横のマージンをリセット */
        padding: 20px 0px; /* スマホ用に左右の余白を調整 */width: 90%; margin: 15px auto;
    }
}



@media (min-width: 769px) {
	/* ===============================================
   Features Grid Section
   =============================================== */

/* セクション全体の背景と余白 */
.features-grid-section {
    background-color: #d4ecea;
    padding: 3% 0 0%;
	margin: 0 auto;
}

/* コンテンツラッパー (80%幅で中央寄せ) */
.features-grid__wrapper {
    width: 80%;
    margin: 0 auto;
}

/* 各段の共通設定 */
.features-row {
    display: grid;
    gap: 3%; /* 各カード間の隙間 */
}
.features-row:not(:last-child) {
    margin-bottom: 3%; /* 各段の間の余白 */
}

/* カードの基本スタイル */
.feature-card {
    background-color: #ffffff;
    display: flex;
    flex-direction: column; /* 基本は縦積み（画像が上、テキストが下など） */
}
.feature-card img {
    width: 100%;
    display: block;
}
.feature-card .card__text {
    padding: 3% 3% 5% 3%;
    flex-grow: 1; /* カードの高さを揃えた時にテキストエリアが伸びるようにする */
    display: flex;
    flex-direction: column;
}
.feature-card .card__text h4 {
    margin: 0 0 0.5em 0;
}
.feature-card .card__text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #555;
}
.feature-card .card__text .card__fine-print {
    font-size: 10px;
    color: #000;
    padding-top: 10%;
    line-height: 1.6;
	text-align: left;width: 94%;margin: 0 auto;
}
.text-padded {
    padding-left: 1% !important;
    padding-right: 1% !important;
}

/* --- PCレイアウト --- */

/* 1段目: 65% vs 30% の比率 */
.features-row-1 {
    grid-template-columns: 65fr 30fr;
}
.feature-card-large {
    flex-direction: row; /* PCでは画像を左、テキストを右に */
}
.feature-card-large .card__image { width: 60%; }
.feature-card-large .card__text {
    width: 55%;
    box-sizing: border-box; /* paddingを幅の内側で計算 */
}

/* 2段目: 4列 */
.features-row-2 {
    grid-template-columns: repeat(4, 1fr);
}

/* 3段目: 左(2/4) + 右(1/4) + 右(1/4) */
.features-row-3 {
    grid-template-columns: repeat(4, 1fr);
}
.feature-card-text-heavy {
    grid-column: span 2; /* 4列グリッドの2列分を占有 */
    flex-direction: row; /* PCでは画像を左、テキストを右に */
}
.feature-card-text-heavy .card__image {
    width: 50%;
    display: flex;
    align-items: flex-end; /* 画像を下揃えに */
}
.feature-card-text-heavy .card__text {
    width: 50%;
    box-sizing: border-box;
}}



/* スマホサイズで、2段目と3段目の一部を2列に */
@media (max-width: 767px) {
	
	/* セクション全体の背景と余白 */
.features-grid-section {
    background-color: #d4ecea;
    padding: 10% 0 5%;
	margin: 0 auto;
}

/* コンテンツラッパー (80%幅で中央寄せ) */
.features-grid__wrapper {
    width: 90%;
    margin: 0 auto;
}

/* 各段の共通設定 */
.features-row {
    display: grid;
    gap: 5% 5%; /* 各カード間の隙間 */
}
.features-row:not(:last-child) {
    margin-bottom: 8%; /* 各段の間の余白 */
}

/* カードの基本スタイル */
.feature-card {
    background-color: #ffffff;
    display: flex;
    flex-direction: column; /* 基本は縦積み（画像が上、テキストが下など） */
	margin-bottom: 10%;margin-top: 0%;
}
.feature-card img {
    width: 100%;
    display: block;
}
.feature-card .card__text {
    padding: 3% 3% 3% 3%;
    flex-grow: 1; /* カードの高さを揃えた時にテキストエリアが伸びるようにする */
    display: flex;
    flex-direction: column;
}
.feature-card .card__text h4 {
    margin: 0 0 0em 0;
}
.feature-card .card__text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #555;
}
.feature-card .card__text .card__fine-print {
    font-size: 10px;
    color: #000;
    padding-top: 10%;
    line-height: 1.6;
	text-align: left;width: 94%;}
	
.feature-card-large{margin: 0px ;padding: 0px}
	
.text-padded {
    padding-left: 1% !important;
    padding-right: 1% !important;
}



.feature-card-text-heavy {
    grid-column: span 2; /* 4列グリッドの2列分を占有 */
    flex-direction: row; /* PCでは画像を左、テキストを右に */
	margin: 4% auto 0%;
}
.feature-card-text-heavy .card__image {
    width: 50%;
    display: flex;
    align-items: flex-end; /* 画像を下揃えに */
}
.feature-card-text-heavy .card__text {
    width: 50%;
    box-sizing: border-box;
}
	.mobile-2col-item{margin: 0% 0 0;}
	
    .features-row-2,
    .features-row-3 {
        grid-template-columns: 1fr 1fr; /* 2列にする */
    }
    
	 .features-row-3 {margin: 0% 0 0;}
	
    /* ただし、3段目の幅広カードは1列のままにする */
    .feature-card-text-heavy {
        grid-column: 1 / -1; /* グリッドの全幅を占有する */
    }
	
	
}