@charset "utf-8";

#Top #MV .copy{font-size: 30px; line-height: 64px;}
#Top #MV .job{padding-top:20px;}

@media screen and (max-width : 999px ){	
	#Top #MV .copy{font-size: 17px; line-height: 34px;}
	#Top #MV .job{padding-top:10px;}
	#Top #Profile .name{line-height:1.2em;}
	#Voice #MV h2 {font-size: 32px;}
}

/*-------------------------------
Service
-------------------------------*/
#Service #MV {width: 100%; height: 240px; padding-top: 80px; background-color: #FF3D00; text-align: center}
#Service #MV h2 {color: #FFF; font-size: 36px; line-height: 1em; margin:88px 0 0;}
#Service #MV h2:after {content: ''; display: block; position: absolute; height: 2px; width: 48px; background-color: #FFF; left: 50%; top:228px;  transform: translateX(-50%); }

#Service #About {text-align: center; padding-bottom: 150px;}
#Service #About img{padding: 80px 0 40px}
#Service #About p{font-size: 16px; line-height: 1em}

#Service #Flow {background-color: #F5F5F5; padding: 0 0 30px;}
#Service #Flow .FlowInn {width: 960px; position: relative; text-align: center; top: -50px; left: 50%; transform: translateX(-50%);}
#Service #Flow .FlowInn .base {display: flex; width: 100%;}
#Service #Flow .FlowInn .arrow:after {content: ''; display: block; position: absolute; height: 60px; width: 960px; background: url("../img/arrow-pc.png") no-repeat center 22px; background-size: auto 16px;}
#Service #Flow .FlowInn .sec01 {background-color: #FF3D00; width: 480px; color: #FFF; height: 100px; line-height: 100px; font-size: 20px; border-radius: 5px 0 0 5px;}
#Service #Flow .FlowInn .sec02 {background-color: #646464; width: 480px; color: #FFF; height: 100px; line-height: 100px; font-size: 20px; border-radius: 0 5px 5px 0;}
#Service #Flow .FlowInn .frame {background-color: #FFF; line-height: 32px; font-size: 18px; border-radius: 5px; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.08); min-height: 100px; align-items: center; margin-top: 60px; position: relative;}
#Service #Flow .FlowInn .frame p {min-width: 440px; padding: 0 20px;}
#Service #Flow .FlowInn .frame p:nth-child(2):before {content: ''; display: block; position: absolute; width: 1px; height: 70%; left: 50%; top:15%; background-color: #DCDCDC; }
#Service #Flow .FlowInn .frame .p2 {width: 960px;}

@media screen and (max-width : 999px ){	
	#Service #MV {height: 160px; padding-top: 60px; }
	#Service #MV h2 {margin:48px 0 0;}
	#Service #MV h2:after {top:168px;}

	#Service #About {padding-bottom: 80px;}
	#Service #About img{padding: 32px 0 16px; width: 325px; height: auto;}
	#Service #About p{font-size: 14px; line-height: 26px;}

	#Service #Flow {padding: 0 0 10px;}
	#Service #Flow .FlowInn {width: 90%; top: -40px;}
	#Service #Flow .FlowInn .base {}
	#Service #Flow .FlowInn .arrow:after {height: 46px; width: 100%; background: url("../img/arrow-sp.png") no-repeat center 16px; background-size: auto 14px;}
	#Service #Flow .FlowInn .sec01 {width: 50%; height: 80px; line-height: 80px; font-size: 18px;}
	#Service #Flow .FlowInn .sec02 {width: 50%; height: 80px; line-height: 80px; font-size: 18px;}
	#Service #Flow .FlowInn .frame {line-height: 24px; font-size: 14px; min-height: 100px; align-items: center; margin-top: 46px;}
	#Service #Flow .FlowInn .frame p {min-width: 42%; padding: 4%;}
	#Service #Flow .FlowInn .frame .p2 {width: 100%;}
}