


@media (min-width: 769px) {
	


.top-row-container {background:#d4ecea;padding: 3% 6.4% 0%;
    width: 100%;
}
/* ラッパー設定 */
.page-wrapper {
    width: 100%;margin: 0% 0 0%;background:#d4ecea;padding: 3% 0% 0%;
}

.content-wrapper5 {
    width: 100%;
    margin: 0 auto; /* 下段の左右マージンを管理 */padding: 0% 6.4%;
}

/* ▼変更箇所▼：上段用のフルワイドコンテナを追加 */
.top-row-container {
    width: 100%;
    margin: 0% 0 0; /* 指示通り3%のmargin-topを設定 */
}

/* 行の共通スタイル */
.row {
    display: flex;
    justify-content: space-between;
}

.top-row {
    gap: 4%;
}

/* ▼変更箇所▼：下段の上部マージンを調整 */
.bottom-row {
    margin-top: 0%; /* 上段との隙間を調整 */
    gap: 4%;
}

/* カード（各列のコンテンツ）の共通スタイル */
.card {
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

/* ▼変更箇所▼：上段カードのボーダーを左右のみ削除して繋がって見えるように */
.top-card-left,
.top-card-right {
    flex: 1 1 48%;
    padding: 2%;
    border-left: none;
    border-right: none;
}


.card-content-wrapper {
    display: flex;
    flex-grow: 1;
    align-items: stretch;;padding: 3% 0% 0%;
}

.card-title {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 0.7em 0.5em;
    margin: 0 0 1em 0;
    font-size: clamp(16px, 1.8vw, 22px);
}

.top-card-left .text-content {
    flex-basis: 35%;
    padding: 0 2%;
}

.top-card-left .image-content {
    flex-basis: 65%;
}

.top-card-right .text-content {
    flex-basis: 50%;
    padding: 0 2%;
}

.top-card-right .image-content {
    flex-basis: 50%;
}

.image-content {
    min-height: 150px;
    width: 100%;
}

.text-content {
    text-align: left;
    font-size: clamp(14px, 1.5vw, 16px);
}

/* 下段カードのスタイル */
.bottom-card {
    flex: 1 1 32%;padding: 2% 2%;
}

.image-content-bottom {
    width: 100%;
    height: 200px;
}

.text-content-bottom {
    padding: 2%;
    flex-grow: 1;
    text-align: left;
}

.card-title-bottom {
    color: #388E3C;
    text-align: center;
    margin: 0.5em 0;
    font-size: clamp(15px, 1.6vw, 18px);
}

.text-content-bottom p {
     font-size: clamp(14px, 1.5vw, 16px);
}

.small-text {
    font-size: 0.8em;
    font-weight: normal;
}
.note {width: 96%;
    font-size: 0.7rem;
    color: #000;
    text-align:left!important;padding: 3% 0% 0% ; margin: 0 auto 0 auto;
}

}

/* スマートフォン対応 (768px以下で適用) */
@media (max-width: 768px) {
	.pfont5 {font-size: clamp(0.9rem, 0.9vw, 1.0rem); color:#00ada9;line-height: 150%;padding: 0% 0% 1% 0%;text-align: center;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
.top-row-container {background:#d4ecea;padding: 0% 10% 0%;width: 100%;margin: 0 0;}
/* ラッパー設定 */
.page-wrapper {
    width: 100%;margin: 0% 0 0%;background:#d4ecea;padding: 0% 0% 0%;
}

.content-wrapper5 {
    width: 100%;
    margin: 0 auto; /* 下段の左右マージンを管理 */padding: 0% 5% 0%;
}

/* ▼変更箇所▼：上段用のフルワイドコンテナを追加 */
.top-row-container {
    width: 100%;
    margin: 0% 0% 0 0%; /* 指示通り3%のmargin-topを設定 */
}

/* 行の共通スタイル */
.row {
    display: flex;
    justify-content: space-between;
}

.top-row {
    gap: 0%;
}

/* ▼変更箇所▼：下段の上部マージンを調整 */
.bottom-row {
    margin-top: 0%; /* 上段との隙間を調整 */
    gap: 4%;
}

/* カード（各列のコンテンツ）の共通スタイル */
.card {
    background-color: #fff;
    display: flex;
    flex-direction: column;padding: 0% 3% 3%;
}

/* ▼変更箇所▼：上段カードのボーダーを左右のみ削除して繋がって見えるように */
.top-card-left,
.top-card-right {
    flex: 1 1 48%;
    padding: 0% 3% 3% 3%;
    border-left: none;
    border-right: none;margin: 0% 0 8%;
}


.card-content-wrapper {
    display: flex;
    flex-grow: 1;
    align-items: stretch;
}

.card-title {
    color: white;width: 80%;
    text-align: center;
    padding: 0em 0.5em;
    margin: 0 0 1em 0;
    font-size: clamp(16px, 1.8vw, 22px);
}

.top-card-left .text-content {
    flex-basis: 35%;
    padding: 0 2%;
}

.top-card-left .image-content {
    flex-basis: 65%;
}

.top-card-right .text-content {
    flex-basis: 50%;
    padding: 0 2%;
}

.top-card-right .image-content {
    flex-basis: 50%;
}

.image-content {
    min-height: 150px;
    width: 100%; padding: 0 2% 3%;
}

.text-content {
    text-align: left;
    font-size: clamp(14px, 1.5vw, 16px);
}

/* 下段カードのスタイル */
.bottom-card {
    flex: 1 1 32%;padding: 2% 2%;margin: 3% 0 5% 0;
}

.image-content-bottom {
    width: 100%;
    height: auto;  padding: 1% 0% 0%;margin: 0 0 0 0;
}

.text-content-bottom {
    padding: 0% 2% 2%;margin: 0 0 0 0;
    flex-grow: 1;
    text-align: left;
}

.card-title-bottom {
    color: #388E3C;
    text-align: center;
    margin: 0.5em 0;
    font-size: clamp(15px, 1.6vw, 18px);
}

.text-content-bottom p {
     font-size: clamp(14px, 1.5vw, 16px);
}

.small-text {
    font-size: 0.8em;
    font-weight: normal;
}

	
    .content-wrapper5 {
        width: 90%;
    }

    /* ▼変更箇所▼：スマホでは上段の左右ボーダーも無くす */
    .top-card-left,
    .top-card-right {
        border-left: none;
        border-right: none;margin: 0% 0 6% 0;
    }

    .row {
        flex-direction: column;

    }

    .bottom-row {
        gap:2%
    }
    
    .card-content-wrapper {
        flex-direction: column;
    }

    .text-content {
        margin-bottom: 1em;
    }
	
	.note {width: 96%;
    font-size: 0.7rem;
    color: #000;
    text-align:left!important;padding: 3% 0% 3% ; margin: 0 auto 0 auto;
}
}