@charset "utf-8";
/* ==================================================
		
		ご成婚までの流れ PC

================================================== */
@media screen and (min-width:751px) {
  
/* --------------------------------------------------
		#vi
-------------------------------------------------- */
#vi {
 background: url(/flow/img/bak_vi_pc.jpg) no-repeat center top / cover;
}
  
/* --------------------------------------------------
		.main
-------------------------------------------------- */
.main li:first-of-type .flow > div h2,
.main li:first-of-type .img {
 padding-top: 25px;
}
.main li .flow > div {
 min-height: 250px;
}
.main li:last-of-type .flow > div {
 min-height: auto;
 margin-left: 88px;
}
.main li .flow > div h2 > span {
 margin-left: 30px;
 position: relative;
 top: -2px;
 padding-bottom: 4px;
}
.main li .flow .step {
 font-size: 18px;
 color: #ffffff;
 font-family: 'Noto Serif JP', serif;
 letter-spacing: 3px;
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
 width: 58px;
 margin-right: 30px;
 position: relative;
}
.main li .flow .step p {
 height: 90px;
 position: absolute;
 top: 40%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}
.main li .flow .step p span {
 -webkit-text-combine: horizontal;
 -ms-text-combine-horizontal: all;
 text-combine-upright: all;
 position: absolute;
 left: 2px;
}
.main li .flow .st01 {
 background:#697d2a url(/flow/img/bak_st01.gif) no-repeat center bottom;
}
.main li .flow .st02 {
 background:#7f904a url(/flow/img/bak_st02.gif) no-repeat center bottom;
}
.main li .flow .st03 {
 background:#8f9e5f url(/flow/img/bak_st03.gif) no-repeat center bottom;
}
.main li .flow .st04 {
 background:#7f904a url(/flow/img/bak_st04.gif) no-repeat center bottom;
}

}


/* ==================================================
		
		ご成婚までの流れ SP

================================================== */
@media screen and (max-width:750px) {
  
/* --------------------------------------------------
		#vi
-------------------------------------------------- */
#vi {
 background: url(/flow/img/bak_vi_sp.jpg) no-repeat right top / cover;
 position: relative;
}
  
/* --------------------------------------------------
		.main
-------------------------------------------------- */
.main li .flow > div h2,
.main li .img {
 padding-top: 10px;
}
.main li .flow > div {
 min-height: 33%;
}
.main li:last-of-type .flow > div {
 min-height: auto;
 margin-left: 50px;
}
.main li .flow > div p {
 padding-bottom: 20px;
}
.main li:last-of-type .flow > div p {
 padding-bottom: 0;
}
.main li .flow .step {
 font-size: 14px;
 color: #ffffff;
 font-family: 'Noto Serif JP', serif;
 letter-spacing: 3px;
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
 width: 35px;
 margin-right: 15px;
 position: relative;
}
.main li .flow .step p {
 height: 90px;
 position: absolute;
 top: 44%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
}
.main li .flow .step p span {
 -webkit-text-combine: horizontal;
 -ms-text-combine-horizontal: all;
 text-combine-upright: all;
 position: absolute;
 left: 2px;
}
.main li .flow .st01 {
 background:#697d2a url(/flow/img/bak_st01.gif) no-repeat center bottom / contain;
}
.main li .flow .st02 {
 background:#7f904a url(/flow/img/bak_st02.gif) no-repeat center bottom / contain;
}
.main li .flow .st03 {
 background:#8f9e5f url(/flow/img/bak_st03.gif) no-repeat center bottom / contain;
}
.main li .flow .st04 {
 background:#7f904a url(/flow/img/bak_st04.gif) no-repeat center bottom / contain;
}

}