.card-box {
	display: flex;
	width: 100%;
}

.card-1::before,
.card-2::before,
.card-3::before,
.card-4::before {
	content: '';
    display: inline-block;
	width: 50px;
	height: 50px;
    background-size: contain;
    vertical-align: middle;
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%);
}

.card-1::before {
    background-image: url(../images/petal.webp);
}

.card-2::before {
	background-image: url(../images/teacher.webp);
}

.card-3::before {
	background-image: url(../images/house.webp);
}

.card-4::before {
	background-image: url(../images/bed.webp);
}

.card-1,
.card-2,
.card-3,
.card-4 {
	position: relative;
	background-color: #fafaff;
	padding: 80px 10px 20px 10px;
	text-align: center;
	flex-basis: 0;
	flex-grow: 1;
	border-radius: 10px;
	font-size: 14px;
}

.card-1 {
	margin-right: 15px;
}

.card-2,
.card-3 {
	margin: 0px 15px;
}

.card-4 {
	margin-left: 15px;
}

.card-2::after,
.card-3::after,
.card-4::after {
	content: '→';
	position: absolute;
	left: -30px;
	top: 40%;
	font-size: 20px;
	font-weight: 600;
}

.card-title {
	color: #7f7fff;
	font-size: 18px;
	font-weight: 600;
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝モバイル版　↓＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media screen and (max-width: 767px) {

    /* 2カラムレイアウトに変更 */
    .card-box {
		position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

	.card-box::after {
		content: '';
		background-image: url(../images/turn-sharp-right.webp);
		height: 50px;
		width: 50px;
		position: absolute;
		left: 44%;
		top: 47%;
		transform: rotate(135deg);
	}

    .card-1,
    .card-2,
    .card-3,
    .card-4 {
        margin: 5px !important;                         /* 適宜調整 */
        flex: none !important;                          /* flex プロパティをリセット */
        width: calc(50% - 10px) !important;             /* 固定幅に変更 */
        box-sizing: border-box !important;             /* 余白込みに */
    }

	.card-2::after,
	.card-3::after,
	.card-4::after {
		display: none;
	}
	
}