@charset "UTF-8";
.footer-breadcrumb__list{min-height:413px}
.main-visual{background-image:url(/society/traffic/solutions/img/main_visual.jpg);background-position:center 80%}
.main-visual .container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:500px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.main-visual__title{font-size:200%;text-align:center;margin-bottom:54px}
.main-visual__title span{font-weight:700;font-size:156.25%;display:inline-block;margin-top:7px}
/*! ============================== ソリューションリンク ============================== */
.link-wrap{background-color:#ebebeb;overflow:hidden}
.link-list{margin:100px 0}
.link-list__ele{background-color:#fff}
.link-list__ele a{color:#333}
.link-list__ele a:hover{text-decoration:none}
.solution{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;height:399px}
.solution::before{content:'';display:block;width:90px;height:60px;position:absolute;top:-webkit-calc(50% - 22px);top:calc(50% - 22px);bottom:0;left:-webkit-calc(50% - 25px);left:calc(50% - 25px);-webkit-transform:rotate(34deg) skewX(-22deg);-ms-transform:rotate(34deg) skewX(-22deg);transform:rotate(34deg) skewX(-22deg);background-color:#fff;-webkit-box-shadow:0 0 19px 0 rgba(0,0,0,.5);box-shadow:0 0 19px 0 rgba(0,0,0,.5);z-index:3;-webkit-transition:.4s ease-out;transition:.4s ease-out}
.solution__textWrap{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #ccc;border-left:1px solid #fff;background-color:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:5;-webkit-transition:.4s ease-out;transition:.4s ease-out}
.solution__inner{width:82.051282051282051%;margin:20px auto 0;position:relative}
.solution__title{text-align:center;font-size:212.5%;line-height:1.588235294117647;font-weight:700;margin-bottom:26px;-webkit-transition:.4s ease-out;transition:.4s ease-out}
.solution__title span{display:inline-block;position:relative}
.solution__title span::before{content:'';display:block;width:100%;height:1px;position:absolute;bottom:4px;left:0;-webkit-transition:.4s ease-out;transition:.4s ease-out}
.solution__title--oneline{height:108px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.solution__title--oneline span{margin-top:24px}
.solution__text{font-size:112.5%;line-height:1.666666666666667;margin:0 0 33px;-webkit-transition:.4s ease-out;transition:.4s ease-out}
.solution__btn{text-align:center;color:#fff;padding:16px 0 15px;-webkit-transition:.4s ease-out;transition:.4s ease-out}
.solution__btn .arr::before{border-left-color:#fff;-webkit-transition:.4s ease-out;transition:.4s ease-out}
.solution__img{width:50%;border:1px solid #ccc;border-right-color:#a3a3a3;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-webkit-background-size:cover;background-size:cover;background-position:center center;background-repeat:no-repeat}
.solution__img::after{content:'';width:100%;height:100%;display:block;-webkit-box-shadow:-19px 0 19px -19px rgba(0,0,0,.5) inset;box-shadow:-19px 0 19px -19px rgba(0,0,0,.5) inset;position:absolute;top:0;left:0}
.solution__img img{vertical-align:bottom}
.solution__img--transport{background-image:url(/society/traffic/solutions/img/img_01.jpg)}
.solution__img--maintenance{background-image:url(/society/traffic/solutions/img/img_02.jpg)}
.solution__img--safety{background-image:url(/society/traffic/solutions/img/img_03.jpg)}
/*! ---------- 左右逆 ---------- */
.link-list__ele--reverse .solution{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}
.link-list__ele--reverse .solution::before{top:-webkit-calc(50% - 37px);top:calc(50% - 37px);right:-webkit-calc(50% - 25px);right:calc(50% - 25px);left:auto}
.link-list__ele--reverse .solution__textWrap{border-right:1px solid #fff;border-left:1px solid #ccc}
.link-list__ele--reverse .solution__img{border-right-color:#ccc;border-left-color:#a3a3a3}
.link-list__ele--reverse .solution__img::after{-webkit-box-shadow:19px 0 19px -19px rgba(0,0,0,.5) inset;box-shadow:19px 0 19px -19px rgba(0,0,0,.5) inset}
/*! ---------- カラー ---------- */
.link-list__ele--green .solution__title{color:#005946}
.link-list__ele--green .solution__title span::before{background-color:#005946;border-top:1px solid #7faca2;border-bottom:1px solid #bfd5d1}
.link-list__ele--green .solution__btn{background-color:#005946}
.link-list__ele--blue .solution__title{color:#003973}
.link-list__ele--blue .solution__title span::before{background-color:#003973;border-top:1px solid #7f9cb9;border-bottom:1px solid #bfcddc}
.link-list__ele--blue .solution__btn{background-color:#003973}
.link-list__ele--red .solution__title{color:#b60005}
.link-list__ele--red .solution__title span::before{background-color:#b60005;border-top:1px solid #da7f82;border-bottom:1px solid #edbfc0}
.link-list__ele--red .solution__btn{background-color:#b60005}
@media screen and (min-width:768px){.link-list__ele+.link-list__ele .solution__img,.link-list__ele+.link-list__ele .solution__textWrap{border-top:none}
.link-list__ele+.link-list__ele a:hover .solution__textWrap{border-top:none}
.link-list__ele a:hover .solution__text,.link-list__ele a:hover .solution__title{color:#fff}
.link-list__ele a:hover .solution__title span::before{background-color:#fff}
.link-list__ele a:hover .solution__btn{background-color:#fff;color:#333}
.link-list__ele a:hover .solution__btn .arr::before{border-left-color:#c00}
.link-list__ele--green a:hover::before{background-color:#005946}
.link-list__ele--green a:hover .solution__textWrap{background-color:#005946;border:1px solid #005946}
.link-list__ele--green a:hover .solution__title span::before{border-top:1px solid #80aca3;border-bottom:1px solid #408374}
.link-list__ele--green a:hover .solution__btn .arr:before{border-left-color:#005946}
.link-list__ele--blue a:hover::before{background-color:#003973}
.link-list__ele--blue a:hover .solution__textWrap{background-color:#003973;border:1px solid #003973}
.link-list__ele--blue a:hover .solution__title span::before{border-top:1px solid #809cb9;border-bottom:1px solid #406b96}
.link-list__ele--blue a:hover .solution__btn .arr:before{border-left-color:#003973}
.link-list__ele--red a:hover::before{background-color:#b60005}
.link-list__ele--red a:hover .solution__textWrap{background-color:#b60005;border:1px solid #b60005}
.link-list__ele--red a:hover .solution__title span::before{border-top:1px solid #db8082;border-bottom:1px solid #c84044}
.link-list__ele--red a:hover .solution__btn .arr:before{border-left-color:#b60005}
}
@media screen and (min-width:768px) and (max-width:767px){.link-list__ele--green a:hover .solution__title span::before{border:none}
.link-list__ele--blue a:hover .solution__title span::before{border:none}
}
@media (max-width:767px){.footer-breadcrumb__list{min-height:auto}
.main-visual{background-image:url(/society/traffic/solutions/img/main_visual_2x.jpg);height:250px}
.main-visual .container{height:250px}
.main-visual__title{font-size:87.5%;line-height:1.571428571428571;margin-bottom:56px}
.main-visual__title span{font-size:171.428571428571429%;line-height:1.4375;margin-top:6px}
.link-list{margin:50px 0}
.link-list__ele+.link-list__ele{margin-top:20px}
.solution{display:block;height:auto}
.solution::before{display:none}
.solution__textWrap{width:100%;border-left:1px solid #ccc;border-top:none;display:block;overflow:hidden}
.solution__inner{width:85.714285714285714%;margin:0 auto 0}
.solution__title{font-size:112.5%;line-height:1.611111111111111;margin-bottom:13px;margin-top:30px}
.solution__title span::before{bottom:3px}
.solution__title--oneline{display:block;height:auto}
.solution__title--oneline span{margin-top:0}
.solution__text{font-size:87.5%;margin:0 0 13px}
.solution__btn{font-size:87.5%;padding:17px 0 16px;margin-bottom:24px}
.solution__img{width:100%;border-right-color:#ccc;background-image:none}
.solution__img::after{-webkit-box-shadow:none;box-shadow:none}
.solution__img img{width:100%}
.link-list__ele--reverse .solution__textWrap{border-right:1px solid #ccc}
.link-list__ele--reverse .solution__img{border-left-color:#ccc}
.link-list__ele--reverse .solution__img::after{-webkit-box-shadow:none;box-shadow:none}
.link-list__ele--green .solution__title span::before{border:none}
}