@charset "utf-8";

/* =================================
   ■ 共通
================================== */

@keyframes fb_mpn_landing_page_slide_out {
    0% {
        margin: 0 12px;
        width: calc(100% - 24px);
    }
}

body p.caption{
	padding:11px 70px;
	text-align:center;
	margin:0 auto;
	position: relative;
	font-size: 16px;
}

body h3 .jp{
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.20rem;
	font-family: "Zen Old Mincho";
	font-weight: 500;
}

/* --------------------------------
   □ flow
-------------------------------- */

/*--- accent ---*/
#flow section#accent p.accent{
	margin: 0;
}
#flow section#accent p.accent img{
	width:100%;
}
section.contact-box .area {
    margin-top: 0;
}

/*--- step ---*/
#flow section#step .container{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin: 80px auto;
	width: 100%;
	max-width: 1228px;
}

	#flow section#step .container.reverse{
		flex-direction: row-reverse;
	}

	#flow section#step .subsection {
		width: calc(100% - 525px - 8%);
		min-height: 286px;
		box-sizing: border-box;
		padding: 20px 0px;
		position: relative;
	}

	#flow section#step .imageBox {
		display: block;
		width: 525px;
		height: auto;
	}

	#flow section#step .subsection h3 {
		margin-bottom: 15px;
	}

#flow section#step .container.noImage{
	display: block;
	text-align: left;
}

#flow section#step .container.noImage .subsection{
	width: 100%;
	min-height: inherit;
}

	#flow section#step .subsection ul.btn--list {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		gap: 20px;
	}

	#flow section#step .subsection p.buttonStyle{
		width: 260px;
		box-sizing: border-box;
		margin: 0;
	}

	#flow section#step .subsection.no5 p.buttonStyle {
		width: auto;
		max-width: 480px;
		box-sizing: border-box;
		margin: 0;
	}

	#flow section#step .subsection p.buttonStyle.large{
		width: 262px;
	}

	#flow section#step .subsection p.buttonStyle a{
		display: block;
		line-height: 1.6;
		padding: 13px 5px 9px;
		border-radius: 30px;
		background-color: #A38D75;
		color: #fff;
	}

	#flow section#step .subsection p.buttonStyle a::before{
		background: url("../../images/common/contents/arrow-w.svg") no-repeat;
		right: 15px;
		top: calc(50% - 3.5px);
	}

/*--- cta ---*/

#flow section#cta .container .line{
	display: block;
	width: 10px;
	margin: 0 auto;
}

#flow section#cta .container .ctaBox .cta__text{
    display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 5px;
	margin-top: 10px;
}

#flow section#cta .container .ctaBox p.buttonStyle{
    width: 493px;
	margin: 0 auto 15px;
}

#flow section#cta .container .ctaBox p.buttonStyle a{
	display: block;
	padding: 29px 5px 26px;
    border: 1px solid #574D43;
    border-radius: 47px;
    color: #574D43;
    letter-spacing: 0.1em;
}

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

	#flow section#step .subsection p.buttonStyle{
		width: 100%;
	}
	#flow section#cta .container .ctaBox p.buttonStyle {
		width: 100%;
		margin: 0 auto 15px;
		padding: 0 2vw;
	}

}

/*--- movie ---*/

#flow .movie > iframe{
	display: block;
	margin: 0 auto;
	text-align: center;
}

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

	#flow .movie > iframe{
		width: 100%;
		padding: 0 2vw;
		height: 280px;
		box-sizing: border-box;
	}	
}

/*--- image--list ---*/

#flow .image--area .image--list{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 52px auto 92px;
}

	#flow .image--area .image--list li{
		width: 409px;
		height: auto;
		position: relative;
	}

	#flow .image--area .image--list li .label{
		position: absolute;
		padding: 6px 12px 3px;
		background-color: #fff;
		border-radius: 4px;
		font-size: 13px;
		top: 10px;
		left: 10px;
	}

@media only screen and
	(max-width : 767px) {
		
	/*--- step ---*/
	#flow section#step .container{
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		margin: 30px auto;
		padding: 0 3%;
		box-sizing: border-box;
	}

	#flow section#step .container.reverse{
		flex-direction: column;
	}

	#flow section#step .subsection {
		width: 100%;
		min-height: inherit;
	}

	#flow section#step .subsection p.txt {
		margin-bottom: 28px;
		font-size: 1.5rem;
	}

	#flow section#step .imageBox {
		display: block;
		width: 100%;
		height: auto;
	}
		
		#flow section#step .imageBox img{
			width: 100%;
			height: auto;
			object-fit: scale-down;
		}
	
		#flow section#step .subsection ul.btn--list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;
			height: auto;
			gap: 0;
			row-gap: 12px;
		}
		#flow section#step .subsection ul.btn--list li {
			width: 49%;
		}
		#flow section#step .subsection ul.btn--list li a {
			font-size: 1.4rem;
		}

	
		
}