@charset "UTF-8";
/* ===================================================
Services / 489ban / Flow & Security CSS
====================================================== */

/* ---------------------------------------------------
Global Header Overwrite
------------------------------------------------------ */
#g_header { position: absolute;}

/* ---------------------------------------------------
	Sub Header Overwrite
------------------------------------------------------ */
@media screen and (max-width: 600px) {
.sub_header .sub_box_01 .sub_btn_01{ width: 100%; padding: 0; margin: 0;}
}

/* ---------------------------------------------------
Contents Overwrite
------------------------------------------------------ */
#contents { padding: 200px 0 0 !important;}

@media screen and (max-width: 600px) {
#contents { padding: 200px 0 0 !important;}
}

/* ---------------------------------------------------
Section Flow
------------------------------------------------------ */
.sec_flow { background: url(../img/services/489ban/flow_security/flow_bg_pc.jpg)no-repeat center; background-size: cover; overflow: hidden;}
#flow_arrow { width: 0; height: 0; border-top: 125px solid #fff; border-right: 50vw solid transparent; border-bottom: 125px solid transparent; border-left: 50vw solid transparent;}
.sec_flow .inner_flow { width: 870px; margin: -40px auto 0; padding: 0 0 100px;}
.sec_flow .cmn_tit_01{ padding: 0 0 50px;}
.sec_flow dd > span { font-size: 14px;}
.sec_flow h2+p { text-align: center; padding: 0 0 70px; font-size: 20px; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; color: #ff7e00;}
.sec_flow dl { float: left; width: 226px; margin: 0 0 45px; color: #000;}
.sec_flow dl+img { float: left; padding: 90px 30px 0;}
.sec_flow dt { margin: 0 0 20px;}
.sec_flow dd span span:not(.tel-link) { font-size: 13px;}
.sec_flow .inner_flow > div >a { display: block; clear: both; width: 560px; margin: 0 auto; padding: 30px 0; background-color: #ff7e00; color: #fff; text-align: center; font-size: 21px; border-radius: 50px; font-weight: bold;}
.sec_flow .inner_flow > div >a span { padding: 0 30px 0 0; background: url(../img/services/489ban/flow_security/btn_arrow.png)no-repeat right center;}
.sec_flow .inner_flow > div >a:hover { text-decoration: none; background-color: #ff8c1c;}
.sec_flow .inner_flow > div >a:hover img { opacity: inherit;}

@media screen and (max-width: 1400px) {
.sec_flow .sec_lead > p.lead_tit { font-size: 28px;}
}

@media screen and (max-width: 1100px) {
#flow_arrow { border-right: 550px solid transparent; border-left: 550px solid transparent;}
}

@media screen and (max-width: 600px) {
.sec_flow { background: url(../img/services/489ban/flow_security/flow_bg_sp.jpg)no-repeat; background-size: cover;}
#flow_arrow { border-top: 70px solid #fff; border-right: 50vw solid transparent; border-left: 50vw solid transparent;}
.sec_flow .inner_flow { width: 94%; padding: 0 0 50px;}
.sec_flow h2+p { padding: 0 0 35px;}
.sec_flow dl { float: none; width: 100%; margin: 0 auto; padding: 20px 0; display: table; border-bottom: 1px solid #ccc;}
.sec_flow dl:nth-of-type(1) { padding: 0 0 20px;}
.sec_flow dl:nth-of-type(3) { padding: 20px 0 0; border-bottom: none;}
.sec_flow dt,
.sec_flow dd { display: table-cell; vertical-align: middle;}
.sec_flow dt { width: 30%;}
.sec_flow dd { padding: 0 0 0 4%;}
.sec_flow dd > span { display: block;}
.sec_flow dl+img { display: none;}
.sec_flow .inner_flow > div >a { width: 100%; max-width: 340px; margin: 50px auto 0; padding: 15px 0; font-size: 16px;}
}

/* ---------------------------------------------------
Section Security
------------------------------------------------------ */
.sec_security { width: 1100px; margin: 0 auto; padding: 95px 0 175px; overflow: hidden; clear: both;}
.sec_security .cmn_tit_01{ padding: 0;}
.sec_security h2+p { padding: 50px 0 95px; text-align: center;}
.sec_security > img { float: left;}
.sec_security .sec_lead { float: right; width: 515px;}
.sec_security .sec_lead ul { margin: 0 0 35px;}
.sec_security .sec_lead li { margin: 0 0 15px; padding: 0 0 0 35px; background: url(../img/services/489ban/flow_security/security_icon.png)no-repeat left 5px;}
.sec_security dl { display: table; width: 100%; border: 1px solid #c2c2c2; box-sizing: border-box; margin-top: 5px;}
.sec_security dt,.sec_security dd { display: table-cell; vertical-align: middle;}
.sec_security dt { width: 140px; text-align: center;}
.sec_security dd { padding: 30px 25px 30px 0;}
.sec_security dt a { display: inline-block; width: 90px;}

@media screen and (max-width: 1400px) {
.sec_security .sec_lead > p.lead_tit { font-size: 28px;}
}

@media screen and (max-width: 1100px) {
.sec_security { width: 94%;}
.sec_security > img { width: 50%;}
.sec_security .sec_lead { width: 46%;}
}

@media screen and (max-width: 600px) {
.sec_security { padding: 50px 0;}
.sec_security h2+p { padding: 25px 0 20px; text-align: left;}
.sec_security > img { float: none; width: 100%;}
.sec_security .sec_lead { float: none; width: 100%; margin: 20px 0 0;}
.sec_security dl,.sec_security dt,.sec_security dd { display: block;}
.sec_security dt { margin: 20px auto 0;}
.sec_security dd { padding: 20px}
}