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

#systemCatch

----------------------------------------------------------- */
      
#systemCatch { padding:0px 0 30px; text-align:center; }
@media only screen and (max-width: 800px) { 
#systemcatch { padding:0px 5% 30px; }
}
@media only screen and (max-width: 738px) { 
#systemCatch { padding: 0px 5% 30px;}
}
@media only screen and (max-width: 414px) { 
#systemCatch { padding: 0px 5% 20px;}
}

/* --- h3 --- */
#systemCatch h3 { font-size:24px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;letter-spacing:2px;line-height:1.6; color: #BE0014; font-weight: 600; }
#systemCatch h3 br.spblock { display:none; }
#systemCatch h3 span { font-size: 14px; margin-top: -2px; }
@media only screen and (max-width: 800px) { 
#systemCatch h3 { margin-top:15px; font-size: 20px;}
}
@media only screen and (max-width: 738px) { 
#systemCatch h3 { font-size: 18px; letter-spacing: 2px; line-height: 1.8; margin-top:10px;}
#systemCatch h3 br { display: none }
}
@media only screen and (max-width: 414px) { 
#systemCatch h3 { font-size: 16px; letter-spacing: 2px; line-height: 1.8; text-align: center; }
}

/* --- .txtArea --- */
#systemCatch .txtArea { margin: 25px 12.5% 0; }
#systemCatch .txtArea p{font-size:14px; line-height:2; letter-spacing:2px; margin-top:1em;}

@media only screen and (max-width: 738px) { 
#systemCatch .txtArea { margin: 20px auto 0; padding:0 2.5%; text-align:left; }
#systemCatch .txtArea p { font-size: 13px; line-height: 2; letter-spacing: 1px; margin-top: 1em; }
}
@media only screen and (max-width: 414px) { 
#systemCatch .txtArea p { font-size: 12px;}
}

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

#systemFlow

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

#systemFlow { padding: 0px 10% 60px; text-align:center; }
@media only screen and (max-width: 800px) { 
#systemFlow { padding:0px 5% 80px; }
}
@media only screen and (max-width: 738px) { 
#systemFlow { padding: 0px 5% 70px;}
}
@media only screen and (max-width: 414px) { 
#systemFlow { padding: 0px 5% 40px;}
}

/* --- .txtArea --- */
#systemFlow .txtArea { margin: 25px auto 0; max-width:700px; }
#systemFlow .txtArea p{font-size:14px; line-height:2; letter-spacing:2px; margin-top:1em;}

@media only screen and (max-width: 738px) { 
#systemFlow .txtArea { margin: 20px auto 0; padding:0 2.5%; text-align:left; }
#systemFlow .txtArea p { font-size: 13px; line-height: 2; letter-spacing: 1px; margin-top: 1em; }
#systemFlow .txtArea p br { display:none; }
}
@media only screen and (max-width: 414px) { 
#systemFlow .txtArea p { font-size: 12px;}
}

/* --- .flowBox --- */
#systemFlow .flowBox { padding: 20px 5px; border-bottom: #ddd 1px dashed; text-align: left; }
/* --- .titleArea --- */
#systemFlow .flowBox .titleArea { float: left; width: 25%; position: relative; z-index: 1; }
#systemFlow .flowBox .titleArea:after { position: absolute; top: 0; right: -2.5%; bottom: 0; width: 0; content: ""; border-right: #ddd 1px dotted; z-index: -1; }
#systemFlow .flowBox h4.step { color: #BE0014; font-size: 16px; font-weight: bold; letter-spacing: 1px; line-height: 2; }
#systemFlow .flowBox h4.jp { font-size: 14px; letter-spacing: 1px; line-height: 1.8; }
/* --- .txtArea --- */
#systemFlow .flowBox .txtBox p { font-size: 12px; line-height: 1.6; margin: 0; width: 100%; float: right; width: 73%;  }
#systemFlow .flowBox .txtBox p img { width: 400px !important; padding-top:5px }

@media only screen and (max-width: 950px) {
#systemFlow .flowBox .titleArea { float: none; width: 100%; text-align:center; margin-bottom:15px; }
#systemFlow .flowBox h4.jp { letter-spacing: 2px;  }
#systemFlow .flowBox .txtBox p { float: none; width: 100%; }
#systemFlow .flowBox .titleArea:after { display: none;}
}

@media only screen and (max-width: 738px) {
#systemFlow .flowBox .txtBox p img { width: 280px !important; }	
}


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

#systemAtt

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

#systemAtt { padding: 0px 10% 60px; text-align:center; }
@media only screen and (max-width: 800px) { 
#systemAtt { padding:0px 5% 80px; }
}
@media only screen and (max-width: 738px) { 
#systemAtt { padding: 0px 5% 70px;}
}
@media only screen and (max-width: 414px) { 
#systemAtt { padding: 0px 5% 40px;}
}

/* --- .txtArea --- */
#systemAtt .txtArea { margin: 25px 10px 0; }
#systemAtt .txtArea p{font-size:12px; line-height:1.6; letter-spacing:2px; margin-top:1em; text-align: left;}

@media only screen and (max-width: 738px) { 
#systemAtt .txtArea { margin: 20px auto 0; padding:0 2.5%; text-align:left; }
#systemAtt .txtArea p { font-size: 12px; line-height: 1.6; letter-spacing: 1px; margin-top: 1em; }
}
@media only screen and (max-width: 414px) { 
#systemAtt .txtArea p { font-size: 12px;}
}