/* =========================
   タイトル
========================= */
.flow-title{
	text-align:center;
	font-size:36px;
	margin:60px 0;
	font-weight:bold;
}


/* =========================
   コンテナ
========================= */
.flow-container{
	position:relative;
	max-width:800px;
	margin:auto;
	padding:20px 0;
	min-height:600px;
}


/* =========================
   LINE予約用ライン（アニメーション）
========================= */
.flow-line{
	position:absolute;
	left:40px;
	top:120px;
	width:4px;
	height:0;
	background:#ff4d4d;
	transition:height 1.5s ease;
}

.flow-line.show{
	height:80%;
}
/* =========================
   電話予約用ライン（アニメーション）
========================= */
.flow-line-tel{
	position:absolute;
	left:40px;
	top:150px;
	width:4px;
	height:0;
	background:#ff4d4d;
	transition:height 1.5s ease;
}

.flow-line-tel.show{
	height:70%;
}


/* =========================
   各ステップ（初期は非表示）
========================= */
.flow-item{
	display:flex;
	align-items:center;
	margin-bottom:60px;
	position:relative;

	opacity:0;
	transform:translateY(50px);
	transition:all 0.6s ease;
}

.flow-item.show{
	opacity:1;
	transform:translateY(0);
}


/* =========================
   番号（丸）
========================= */
.flow-number{
	width:80px;
	height:80px;
	background:#ff4d4d;
	color:white;
	border-radius:50%;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:28px;
	font-weight:bold;

	z-index:2;

	transform:scale(0.5);
	opacity:0;
	transition:all 0.4s ease 0.2s;
}

.flow-item.show .flow-number{
	transform:scale(1);
	opacity:1;
}


/* =========================
   カード
========================= */
.flow-card{
	background:white;
	padding:20px 30px;
	margin-left:30px;
	border-radius:10px;
	box-shadow:0 5px 20px rgba(0,0,0,0.15);

	transform:translateX(50px);
	opacity:0;
	transition:all 0.6s ease 0.3s;
}

.flow-item.show .flow-card{
	transform:translateX(0);
	opacity:1;
}


/* =========================
   ホバー効果
========================= */
.flow-card:hover{
	transform:translateY(-5px);
	box-shadow:0 10px 30px rgba(0,0,0,0.25);
}


/* =========================
   カード内文字
========================= */
.flow-card h2{
	margin-top:0;
	margin-bottom:10px;
	font-size:22px;
}

.flow-card p{
	margin:0;
	line-height:1.6;
}


/* =========================
   モバイル用
========================= */
@media screen and (max-width: 768px) {


/* =========================
   LINE予約用ライン（アニメーション）
========================= */
.flow-line{
	position:absolute;
	left:10px;
	top:120px;
	width:4px;
	height:0;
	background:#ff4d4d;
	transition:height 1.5s ease;
}

.flow-line.show{
	display: none;
}
/* =========================
   電話予約用ライン（アニメーション）
========================= */
.flow-line-tel{
	position:absolute;
	left:10px;
	top:150px;
	width:4px;
	height:0;
	background:#ff4d4d;
	transition:height 1.5s ease;
}
.flow-line-tel.show{
	display: none;
}


/* =========================
   番号（丸）
========================= */
.flow-number{
	width:50px;
	height:50px;
	background:white;
	color:black;
	border-radius:50%;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:16px;
	font-weight:bold;

	z-index:2;

	transform:scale(0.5);
	opacity:0;
	transition:all 0.4s ease 0.2s;
}

.flow-item.show .flow-number{
	transform:scale(1);
	opacity:1;
}

}