/* CSS Document */

@media (min-width:751px){

	#p0 { padding: 120px 0 0; }
	#p0 h3.ch3 { margin-bottom: 30px; }
	#p0 .lead { margin-bottom: 70px; }
	#p0 .fmenu { display: flex; justify-content:space-between; }
	#p0 .fmenu li {  }
	#p0 .fmenu li a { width: 146px; height: 130px; display: block; border: #dbe3f1 5px solid;
		background: #ffffff; padding-top: 42px; text-align: center; font-size: 18px; position: relative;
		line-height: 22px; }
	#p0 .fmenu li a span { width: 70px; height: 70px; text-align: center; line-height: 70px; color: #d1dbe8;
		background: url(../images/flowno_menu.svg) center center no-repeat; font-size: 26px;
		display: block; position: absolute; top:-35px; left: 50%; margin-left: -35px; }
	#p0 .fmenu li:last-child a { font-size: 16px; }
	#p0 .fmenu li a:after { content: ""; width: 8px; height: 4px; position: absolute; bottom: 13px; 
		background: url(../../images/icon_btn_db.svg) center center no-repeat; left: 50%; margin-left: -4px;
		background-size: 7px auto; transition:0.3s; }
	#p0 .fmenu li a:hover { opacity: 1; }
	#p0 .fmenu li a:hover:after { bottom: 8px; }

	.funit { padding-top: 120px; position: relative; }
	.funit:after { content: ""; width: 16px; height: 73px; position: absolute; bottom: -100px;
		background: url(../images/line_flow.svg) center center no-repeat; left: 50%;
		margin-left: -8px; }
	#p1 { margin-top: -60px; }
	.funit .mainw { border: #dbe3f1 1px solid; position: relative; display: flex; padding: 40px 50px;
		justify-content:space-between; }
	.funit .fno { position: absolute; left: 0; top:0; width: 124px; height: 110px; padding: 12px;
		background: url(../images/flowno.svg) left top no-repeat; color: #d1dbe8; }
	.funit .fno span { font-size: 15px; display: block; }
	.funit .fno span.no { font-size: 28px; padding-left: 15px; }
	.funit .txt { width: 530px; padding-top: 50px; }
	.funit h4 { font-size: 22px; letter-spacing: 3px; padding-bottom: 15px; position: relative;
		margin-bottom: 25px; }
	.funit h4:before { content: ""; width: 170px; height: 1px; background: #e0e0e0; position: absolute;
		bottom: 0; left: 0; }
	.funit h4:after { content: ""; width: 30px; height: 1px; background: #3d4856; position: absolute;
		bottom: 0; left: 0; }
	.funit .txt p { font-size: 16px; line-height: 50px; background: url(../../images/line_txt.svg) left top repeat-y; padding-bottom: 10px; }
	.funit .img { width: 410px; border: #edf1f7 25px solid; background: #ffffff; }
	#p7 { margin-bottom: 170px; }
	#p7.funit:after { background: none; }

} /* End @media (min-width: 751px) */

/* ---------------------------------------------------------------------------------------------------- */

@media (min-width: 751px) and  (max-width:1245px){
	
}

/* ---------------------------------------------------------------------------------------------------- */

/* Start @media (max-width: 750px) */

@media (max-width:750px){
	#mv .img { background: url(../images/mv_sp.jpg) center center no-repeat; background-size: cover; }

	#p0 { padding: 20vw 0 0; }
	#p0 h3.ch3 { margin-bottom: 4vw; }
	#p0 .lead { margin-bottom: 10vw; }
	#p0 .fmenu { display: flex; flex-wrap:wrap; justify-content:center; }
	#p0 .fmenu li { margin-bottom: 8vw; margin-right: 2vw; }
	#p0 .fmenu li:nth-child(even) { margin-right: 0; }
	#p0 .fmenu li a { width: 42vw; height: 30vw; display: block; border: #dbe3f1 5px solid;
		background: #ffffff; padding-top:7vw; text-align: center; font-size: 4.2vw; position: relative;
		line-height: 7vw; }
	#p0 .fmenu li a span { width: 12vw; height: 12vw; text-align: center; line-height: 12vw; color: #d1dbe8;
		background: url(../images/flowno_menu.svg) center center no-repeat; font-size: 5vw;
		display: block; position: absolute; top:-6vw; left: 50%; margin-left: -6vw;
		background-size: 12vw auto; }
	#p0 .fmenu li:last-child a { font-size: 4vw; }
	#p0 .fmenu li a:after { content: ""; width: 3vw; height: 2vw; position: absolute; bottom: 2vw; 
		background: url(../../images/icon_btn_db.svg) center center no-repeat; left: 50%; margin-left: -1.5vw;
		background-size: 2vw auto; }

	.funit { padding-top: 20vw; position: relative; }
	#p1 { margin-top: -10vw; }
	.funit:after { content: ""; width: 2vw; height: 12vw; position: absolute; bottom: -16vw;
		background: url(../images/line_flow.svg) center center no-repeat; left: 50%;
		margin-left: -1vw; background-size: 2vw auto; }
	.funit .mainw { border: #dbe3f1 1px solid; position: relative; padding: 6vw; }
	.funit .fno { position: absolute; left: 0; top:0; width: 24vw; height: 24vw; padding: 2vw;
		background: url(../images/flowno.svg) left top no-repeat; color: #d1dbe8;
		background-size: 24vw auto; }
	.funit .fno span { font-size: 3.4vw; display: block; }
	.funit .fno span.no { font-size: 5vw; padding-left: 2vw; }
	.funit .txt { width: 100%; padding-top: 8vw; }
	.funit h4 { font-size: 5vw; letter-spacing: 3px; padding-bottom: 2vw; position: relative;
		margin-bottom: 4vw; }
	.funit h4:before { content: ""; width: 20vw; height: 1px; background: #e0e0e0; position: absolute;
		bottom: 0; left: 0; }
	.funit h4:after { content: ""; width: 6vw; height: 1px; background: #3d4856; position: absolute;
		bottom: 0; left: 0; }
	.funit .txt p { line-height: 8vw; font-size: 4.2vw; 
		background: url(../../images/line_txt.svg) left top repeat-y; padding-bottom: 2vw;
		background-size: auto 8vw; }
	.funit .img { width: 100%; border: #edf1f7 4vw solid; background: #ffffff; margin-top: 6vw; }
	#p7 { margin-bottom: 20vw; }
	#p7.funit:after { background: none; }


} /* End @media (max-width: 750px) */