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

#lower-image {
	background: url(../../images/main_image.jpg) center -150px;
	background-size: cover;
}

#main-contents #flow .flow-wrap {
	padding-bottom: 0;
}

#main-contents #flow dl {
	margin-bottom: 30px;
	padding-left: 15px;
	border-left: 5px solid rgba(105,140,200,0.5);
	font-size: 1.4rem;
}

#main-contents #flow dt {
	font-weight: bold;
}

#main-contents #flow dd {
}

#main-contents #flow figure {
	background-color: #fff;
}


@media screen and (min-width: 768px) {
	#main-contents #flow .flow-item {
		overflow: hidden;
	}
	
	#main-contents #flow .flow-wrap {
		float: left;
		width: calc(60% - 30px);
		margin-right: 30px;
	}

	#main-contents #flow figure {
		float: right;
		width: 40%;
	}
}

@media screen and (min-width: 1280px) {
	#main-contents #flow dt {
		margin-bottom: 20px;
		font-size: 1.6rem;
	}
}

/* --- 外来リハビリの流れ：画像エリアの独自設定 --- */

/* 1. PC時に右に飛んでしまう設定(float)を解除して左揃えにする */
@media screen and (min-width: 768px) {
    #main-contents #flow .flow-item .flow-images {
        float: none;    /* 右揃えを解除 */
        width: 100%;    /* 横幅をいっぱいまで使えるようにする */
        display: flex;  /* 横並びにする */
        gap: 20px;      /* 画像間の余白 */
        margin-top: 20px;
    }
}

/* 2. リストの記号を消し、余白を調整 */
#main-contents #flow .flow-images {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

/* スマホ表示時に、各画像の下に隙間を作る */
#main-contents #flow .flow-images li {
    margin-bottom: 20px; /* ★ここで画像間の隙間を調整します */
}

/* 最後の画像だけは、下の余白をゼロにする（全体のバランス調整） */
#main-contents #flow .flow-images li:last-child {
    margin-bottom: 0;
}

/* 3. 画像の枠線と背景の設定 */
#main-contents #flow .flow-images figure {
    float: none !important; /* 強制的に右揃えを解除 */
    width: 100% !important; /* スマホでは1枚、PCではliの幅に従う */
    border: 1px solid #dcdcdc; /* 指定の枠線 */
    background-color: #fff;
    margin: 0;
    padding: 0;
}

#main-contents #flow .flow-images img {
    width: 100%;
    height: auto;
    display: block;
}

/* 4. キャプションの設定 */
#main-contents #flow .flow-images figcaption {
    padding: 8px 10px;
    font-size: 1.3rem;
    line-height: 1.4;
    text-align: center;
    background-color: #fff;
    border-top: 1px solid #dcdcdc; /* 画像との仕切り線 */
}

/* 5. PCでの横並びの幅調整（768px以上） */
@media screen and (min-width: 768px) {
    #main-contents #flow .flow-images li {
        width: calc(40% - 10px); 
        margin-bottom: 0; /* ★PCでは横並びになるので、下の隙間は不要 */
    }
}