@charset "utf-8";

/*
************************************************************************
* ご利用の流れ
* @copyright Revolme Inc.
************************************************************************
*/

/*
************************************************************************
* ご利用の流れ
************************************************************************
*/

.flow
{
	
}
.flow .flow-item
{
	display: flex;
	align-items: stretch;
	
	margin-bottom:80px;
}
.flow .flow-item .eyecatch
{
	flex:0 0 auto;
}
.flow .flow-item .eyecatch img
{
	border-radius:3em;
}
.flow .flow-item .body
{
	flex:1 1 auto;
	padding-left:100px;
}
.flow .flow-item .body .title
{
	display: flex;
	align-items: center;
	align-content: center;
	
	line-height:1;
}
.flow .flow-item .body .title .no
{
	font-size:3.6rem;
	margin-right:0.5em;
}
.flow .flow-item .body .title .main
{
	font-size:2.4rem;
	padding-bottom: 0.3em;
}
.flow .flow-item .body .description
{
	font-size:1.6rem;
	line-height:2;
	
	margin-top:2em;
}
.flow .flow-item .body .buttons
{
	display: flex;
	align-items: center;
	align-content: center;
	margin-top:2em;
}
.flow .flow-item .body .buttons .button
{
	margin-right:1em;
}

/* == ブレークポイント ==========================================================*/
@media screen and (max-width: 1100px) {
}
/* == スマートフォンサイズ ======================================================*/
@media screen and (max-width: 767px) {
	.flow
	{
		
	}
	.flow .flow-item
	{
		flex-wrap: wrap;
		margin-bottom:9vw;
	}
	.flow .flow-item .eyecatch
	{
		flex:0 0 100%;
	}
	.flow .flow-item .eyecatch img
	{
		width:100%;
		border-radius:2em;
	}
	.flow .flow-item .body
	{
		flex:0 0 100%;
		padding-left:0;
	}
	.flow .flow-item .body .title
	{
		display: flex;
		align-items: center;
		align-content: center;
		
		line-height:1;
		margin-top:2em;
	}
	.flow .flow-item .body .title .no
	{
		font-size:5.6rem;
	}
	.flow .flow-item .body .title .main
	{
		font-size:3.6rem;
		padding-bottom: 0.3em;
	}
	.flow .flow-item .body .description
	{
		font-size:2.6rem;
		line-height:2;
		
		margin-top:1.5em;
	}
	.flow .flow-item .body .buttons
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top:2em;
	}
	.flow .flow-item .body .buttons .button
	{
		margin-right:0em;
		margin-bottom:1em;
	}
}