@charset "utf-8";
/* CSS Document */

.system_main,.system_main2{width:100%;}
.system_main h2{text-indent:100%; white-space:nowrap; line-height:100%; overflow:hidden; margin:0; padding-top:73.19%; height:0; background-image:url("../../img/sp/top_main_large1_sp.jpg"); background-repeat:no-repeat; background-size:contain;}

.system_main2 h2{text-indent:100%; white-space:nowrap; line-height:100%; overflow:hidden; margin:0; padding-top:73.19%; height:0; background-image:url("../../img/sp/system1_main_sp.jpg"); background-repeat:no-repeat; background-size:contain;}

.system_main3 h2{text-indent:100%; white-space:nowrap; line-height:100%; overflow:hidden; margin:0; padding-top:73.19%; height:0; background-image:url("../../img/sp/system2_main_sp2.jpg"); background-repeat:no-repeat; background-size:contain;}

.system_main4 h2{text-indent:100%; white-space:nowrap; line-height:100%; overflow:hidden; margin:0; padding-top:73.19%; height:0; background-image:url("../../img/sp/system3_main_sp.jpg"); background-repeat:no-repeat; background-size:contain;}

.system_main5 h2{text-indent:100%; white-space:nowrap; line-height:100%; overflow:hidden; margin:0; padding-top:73.19%; height:0; background-image:url("../../img/sp/system4_main_sp.jpg"); background-repeat:no-repeat; background-size:contain;}

#system_sub{width:100%; margin:5% auto 0 auto;}
#system_sub h3{font-size:120%; color:#4b5861; text-align:center; margin:0 auto; padding:0;}
#system_sub p{text-align:left; font-size:100%; line-height:200%; margin:5% auto 7% auto; width:88%;}

#system_con{width:100%; margin:0 auto 20% auto;}

#system_con p{text-align:center; font-size:100%; line-height:200%; margin:40px auto;}

#system_con ul{list-style:none; width:100%; margin:0 auto 10% auto; padding:0;}
#system_con ul a{text-decoration:none;}
#system_con li.service_li1{width:100%; margin:5% 0; padding:0; border-top:2px solid #30709b;}
#system_con li.service_li2{width:100%; margin:5% 0; padding:0; border-top:2px solid #30709b;}

#system_con li a{text-decoration:none; color:#000;}
#system_con li a:hover{text-decoration:none; color:#000;}
#system_con li h4{padding:3% 0; margin:0 0 0 0; font-size:110%; width:100%; text-align:center;}
#system_con li h4 span{padding:0; color:#000; width:100%;}
#system_con li h4 span:hover{color:#4b5861; text-decoration:none;}
#system_con li p{text-align:left; line-height:200%; margin:3% auto 7% auto; width:88%; color:#333;}

#system1_sub{width:100%; margin:5% auto 0 auto;}
#system1_sub h3,#system1_con h5{font-size:120%; color:#4b5861; text-align:center; margin:0 auto; padding:0;}
#system1_sub p{text-align:left; font-size:90%; line-height:200%; margin:5% auto 7% auto; width:88%;}

.system_btn1{width:60%; margin:7% auto 10% auto; padding:0;}
.system_btn2{width:60%; margin:0 auto 7% auto; padding:0;}
.system_btn3{width:60%; margin:7% auto 5% auto; padding:0;}
.system_btn_box{width:60%; margin:7% auto 0 auto; padding:0;}
.system_btn_box ul{width:100%; margin:0 auto; padding:0; list-style:none;}
.system_btn_box li{width:100%; margin:0 auto 2.5% auto; padding:0;}

#system1_con{width:100%; border-top:1px solid #ddd; margin:5% auto;}
#system1_con h4{font-size:110%; color:#333; text-align:center; border-bottom:4px solid #30709b; margin:0 auto; padding:10px 0;}
#system1_con p{text-align:left; font-size:90%; line-height:200%; margin:5% auto 7% auto; width:88%;}
#system1_con p.system1_text1{text-align:center; font-size:90%; line-height:200%; margin:5% auto 7% auto; width:88%;}
#system1_con p.system1_text1 a{color:#30709b; text-decoration:none; font-weight:bold;}
#system1_con p.system1_text1 a:hover{color:#30709b; text-decoration:underline;}
#system1_con ul{list-style:none; width:100%; margin:0 0 10% 0; padding:0;}
#system1_con ul.system2_spt5{margin-top:5%;}
#system1_con li.system1_pict_l{width:90%; margin:6% auto 4% auto; padding:0;}
#system1_con li.system1_pict_r{width:90%; margin:0 auto 4% auto; padding:0;}
#system1_con .system1_box{width:90%; border:3px solid #afc0cc; margin:4% auto;}
#system1_con .system1_box p{text-align:left; font-size:90%; line-height:250%; padding:2% 4% 2% 12%; color:#333; margin:1% 0;}
#system1_con li{float:none; width:100%; margin:0 0 2% 0; padding:0;}

#system1_con li .system1_feature{border-radius:15px; background-color:#f7f8f8; margin:0 auto; padding:4% 4% 2% 3%; width:85%;}
#system1_con li .system1_feature .system1_feature_l{float:left; width:13%; margin:2% 3% 0 0; padding:0;}
#system1_con li .system1_feature .system1_feature_r{float:left; width:84%; margin:0; padding:0;}
#system1_con li .system1_feature .system1_feature_r h6{color:#c13a1f; font-size:100%; margin:0 0 0 0; line-height:140%; padding:0 0 0 2%;}
#system1_con li .system1_feature .system1_feature_r p{border-top:1px solid #000; width:98%; text-align:left; font-size:90%; line-height:200%; padding:3% 0 0 2%; color:#333; margin:2% 0;}

#system1_con li .system3_feature{border-radius:15px; background-color:#f7f8f8; margin:0 auto; padding:4% 4% 2% 3%; width:85%;}
#system1_con li .system3_feature .system3_feature_l{float:left; width:13%; margin:2% 3% 0 0; padding:0;}
#system1_con li .system3_feature .system3_feature_r{float:left; width:84%; margin:0; padding:0;}
#system1_con li .system3_feature .system3_feature_r h6{color:#0180c9; font-size:100%; margin:0 0 0 0; line-height:140%; padding:0 0 0 2%;}
#system1_con li .system3_feature .system3_feature_r p{border-top:1px solid #000; width:98%; text-align:left; font-size:90%; line-height:200%; padding:3% 0 0 2%; color:#333; margin:2% 0;}


#system1_con .system1_pict{width:90%; margin:6% auto 0 auto; padding:0;}
.system1_ico1{margin-top:2%;}

#system1_con .system2_pict1{width:90%; margin:6% auto; padding:0;}
#system1_con .system2_pict2{width:90%; margin:5% auto 0 auto; padding:0;}
#system1_con .system2_pict3{width:90%; margin:2% auto 9% auto; padding:0;}
#system1_con .system2_pict6{width:90%; margin:2% auto 4% auto; padding:0;}
#system1_con .system2_subtitle1{color:#000; font-size:100%; margin:0; line-height:140%; padding:0 1%; text-align:center; font-weight:bold;}

#system1_con h5.system1_con_h5_2{font-size:100%; color:#df7915; text-align:center; margin:5% auto 0 auto; padding:0;}

#system1_con .system3_pict1,#system1_con .system3_pict2{position:relative; overflow:hidden; max-width:90%; height:200px; margin:6% auto; text-indent:100%; white-space:nowrap; padding:0; border:1px solid #bababa;}
#system1_con .system3_pict1:after{position:absolute; content:""; display:block; width:100%; height:100%; top:0; background:url(../../img/pc/system3_pict1_2.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -ms-background-size:cover; background-size:cover; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out;}
#system1_con .system3_pict2:after{position:absolute; content:""; display:block; width:100%; height:100%; top:0; background:url(../../img/pc/system3_pict2_2.jpg) no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -ms-background-size:cover; background-size:cover; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out;}
#system1_con .system3_pict1:hover:after,#system1_con .system3_pict2:hover:after{opacity:.8; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform:scale(1.1);}


#system1_con .system3_box{padding:0; margin:0 auto; width:100%;}
#system1_con .system3_box .system3_l{width:70%; margin:0 auto; padding:0;}
#system1_con .system3_box .system3_l img:hover{opacity:.7;}
#system1_con .system3_box .system3_r{width:90%; margin:0 auto; padding:0;}
#system1_con .system3_box .system3_r p{text-align:center; font-size:90%; color:#c32727; line-height:200%; margin:3% auto; padding:0;}