@charset "utf-8";

.sub-tab {text-align:center; margin-bottom:50px;}
.sub-tab ul {display:flex; justify-content:center; flex-wrap:wrap; margin:-5px;}
.sub-tab ul li {padding:5px;}
.sub-tab ul li a {display:flex; height:50px; justify-content:center; align-items:center; padding:0 25px; color:#454545; font-size:18px; line-height:1.3em; font-weight:500; border:1px solid #ddd; border-radius:50px;}
.sub-tab ul li.active a {background:#2f2e2e; border-color:#2f2e2e; color:#fff;}

.company-overview {display:flex; flex-wrap:wrap; text-align:center; margin:-20px;}
.company-overview .box {width:calc(33.33333333% - 40px); height:373px; margin:20px; padding:64px 30px 10px; border:1px solid #e0e0e0; transition:.2s;}
.company-overview .box .tt {color:#c1272d; font-size:20px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; margin-bottom:32px;}
.company-overview .box i {display:block; margin:0 auto; width:120px; height:120px; background-position:50% 50%; background-repeat:no-repeat; transition:.2s;}
.company-overview .box .ico-1 {background-image:url("../images/sub/overview_icon1.png");}
.company-overview .box .ico-2 {background-image:url("../images/sub/overview_icon2.png");}
.company-overview .box .ico-3 {background-image:url("../images/sub/overview_icon3.png");}
.company-overview .box .ico-4 {background-image:url("../images/sub/overview_icon4.png");}
.company-overview .box .ico-5 {background-image:url("../images/sub/overview_icon5.png");}
.company-overview .box .ico-6 {background-image:url("../images/sub/overview_icon6.png");}
.company-overview .box .txt {color:#454545; font-size:26px; font-weight:600; line-height:1.154em; letter-spacing:-.03em; margin-top:22px;}
.company-overview .box:hover {background:#2f2e2e; border-color:#2f2e2e;}
.company-overview .box:hover .tt {color:#fff;}
.company-overview .box:hover .ico-1 {background-image:url("../images/sub/overview_icon1_on.png");}
.company-overview .box:hover .ico-2 {background-image:url("../images/sub/overview_icon2_on.png");}
.company-overview .box:hover .ico-3 {background-image:url("../images/sub/overview_icon3_on.png");}
.company-overview .box:hover .ico-4 {background-image:url("../images/sub/overview_icon4_on.png");}
.company-overview .box:hover .ico-5 {background-image:url("../images/sub/overview_icon5_on.png");}
.company-overview .box:hover .ico-6 {background-image:url("../images/sub/overview_icon6_on.png");}
.company-overview .box:hover .txt {color:#fff;}

.biz-area {padding:80px 120px; background:url("../images/sub/biz_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.biz-area .wrap {display:flex; flex-wrap:wrap; margin:-20px;}
.biz-area .box {width:calc(50% - 40px); margin:20px; padding:44px; background:#fff; color:#454545; font-size:18px; line-height:1.667em; letter-spacing:-.03em;}
.biz-area .box h3 {position:relative; padding-right:50px; margin-bottom:18px; color:#242424; font-size:18px; line-height:1.4em;}
.biz-area .box h3 i {position:absolute; top:0; right:0; width:46px; height:46px; background-position:50% 50%; background-repeat:no-repeat;}
.biz-area .box .ico-1 {background-image:url("../images/sub/biz_icon1.png");}
.biz-area .box .ico-2 {background-image:url("../images/sub/biz_icon2.png");}
.biz-area .box .ico-3 {background-image:url("../images/sub/biz_icon3.png");}
.biz-area .box .ico-4 {background-image:url("../images/sub/biz_icon4.png");}
.biz-area .box ul li {position:relative; padding-left:15px;}
.biz-area .box ul li:before {content:""; position:absolute; top:12px; left:0; width:4px; height:4px; background:#c1272d; border-radius:100%;}

.team {margin-bottom:40px;}
.team:last-child {margin-bottom:0;}
.team .tit {color:#242424; font-size:22px; line-height:1.3em; letter-spacing:-.03em; margin-bottom:16px;}
.team .list ul {display:flex; flex-wrap:wrap; margin:-20px;}
.team .list ul li {width:33.33333333%; padding:20px;}
.team .list ul li a {display:flex; flex-direction:column; justify-content:center; height:280px; padding:30px; text-align:center; border:1px solid #ddd;}
.team .list ul li .txt1 {color:#c1272d; font-size:20px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; margin-bottom:14px;}
.team .list ul li .txt2 {color:#242424; font-size:32px; font-weight:600; line-height:1.154em; letter-spacing:.4em; margin-left:.4em; margin-bottom:10px;}
.team .list ul li a:hover {background:#2f2e2e; border-color:#2f2e2e;}
.team .list ul li a:hover *{color:#fff;}
.team .team-layer {display:none;}

.team-layer {padding:60px;}
.team-layer .title {position:relative; padding:0 0 29px; margin:-5px 0 34px; color:#242424; font-size:40px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; border-bottom:1px solid #ddd;}
.team-layer .title img {position:absolute; top:-6px; right:0;}
.team-layer .info {font-size:18px; line-height:1.6em; letter-spacing:-.03em;}
.team-layer .info dl {display:flex; margin-bottom:35px;}
.team-layer .info dl:last-child {margin-bottom:0;}
.team-layer .info dl:first-child dd {font-weight:600; color:#242424;}
.team-layer .info dt {width:147px; color:#242424; font-weight:700;}
.team-layer .info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

.portfolio-list ul {display:flex; flex-wrap:wrap; margin:-20px;}
.portfolio-list ul li {width:25%; padding:20px; text-align:center;}
.portfolio-list ul li a {display:block; position:relative; padding-bottom:calc(100% - 2px); border:1px solid #ddd;}
.portfolio-list ul li .img {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.portfolio-list ul li .img img {max-width:70%;}
.portfolio-list ul li .hover {position:absolute; top:0; left:0; width:100%; height:100%; padding:20px; display:flex; flex-direction:column; justify-content:center; opacity:0; transition:.2s; background:#2f2e2e; color:#fff;}
.portfolio-list ul li .hover .cate {font-size:18px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; margin-bottom:10px;}
.portfolio-list ul li .hover .tit {font-size:30px; font-weight:700; line-height:1.3em; letter-spacing:-.03em; margin-bottom:15px;}
.portfolio-list ul li .hover .more {width:40px; height:40px; background:url("../images/sub/more.png") 50% 50% no-repeat; margin:0 auto;}
.portfolio-list ul li a:hover {border-color:#2f2e2e;}
.portfolio-list ul li a:hover .hover {opacity:1;}

.portfolio-layer {max-width:1150px; display:flex;}
.portfolio-layer .left {width:500px; padding:25px; background:url("../images/sub/port_view_bg.jpg") 50% 50% no-repeat; background-size:cover;}
.portfolio-layer .left .logo {margin-bottom:30px;}
.portfolio-layer .left .img {display:flex; align-items:center; justify-content:center; width:270px; height:200px; background:#fff; margin:0 auto 26px;}
.portfolio-layer .left .img img {max-width:70%;}
.portfolio-layer .left .cate {text-align:center; color:#c1272d; font-size:18px; font-weight:700; line-height:1.3em; letter-spacing:-.03em; margin-bottom:6px;}
.portfolio-layer .left .tit {text-align:center; color:#fff; font-size:30px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; margin-bottom:20px;}
.portfolio-layer .left .link {display:flex; align-items:center; justify-content:center; margin-bottom:15px; text-align:center; padding:0 15px; height:60px; color:#fff; font-size:18px; font-weight:500; line-height:1.3em; background:rgba(193,39,45,.7);}
.portfolio-layer .left .link:after {content:""; width:23px; height:8px; margin-left:15px; background:url("../images/sub/btn_arr.png") 50% 50% no-repeat;}
.portfolio-layer .right {padding:65px; flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; justify-content:center;}
.portfolio-layer .right .tit {position:relative; padding:0 0 29px; margin:-5px 0 34px; color:#242424; font-size:40px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; border-bottom:1px solid #ddd;}
.portfolio-layer .right .info {font-size:18px; line-height:1.6em; letter-spacing:-.03em;}
.portfolio-layer .right .info dl {display:flex; margin-bottom:35px;}
.portfolio-layer .right .info dl:last-child {margin-bottom:0;}
.portfolio-layer .right .info dl:first-child dd {font-weight:600; color:#242424;}
.portfolio-layer .right .info dt {width:130px; color:#242424; font-weight:700;}
.portfolio-layer .right .info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

.ir-list ul {display:flex; flex-wrap:wrap; margin:-20px;}
.ir-list ul li {width:25%; padding:20px; text-align:center;}
.ir-list ul li a {display:block; position:relative; padding-bottom:calc(100% - 2px); border:1px solid #ddd; color:#454545; font-size:18px; font-weight:600; line-height:1.4em; letter-spacing:-.03em;}
.ir-list ul li .in {position:absolute; top:0; left:0; width:100%; height:100%; padding:20px; display:flex; flex-direction:column; justify-content:center;}
.ir-list ul li .in:after {content:""; display:block; width:40px; height:40px; background:url("../images/sub/icon_down.png") 50% 50% no-repeat; border:1px solid #454545; margin:22px auto 0; transition:.2s;}
.ir-list ul li a:hover {color:#fff; background:#2f2e2e; border-color:#2f2e2e;}
.ir-list ul li a:hover .in:after {background-image:url("../images/sub/icon_down_w.png"); border-color:#fff;}

.contact-wrap {display:flex; height:500px; background:#181717; color:#fff;}
.contact-wrap .map {width:50%;}
.contact-wrap .map iframe {display:block; width:100%; height:100%;}
.contact-wrap .cnt {width:50%; padding:85px 70px; background:url("../images/sub/logo_o.png") 95% 95% no-repeat;}
.contact-wrap .tit {margin-bottom:58px;}
.contact-wrap .tit p {font-size:20px; font-weight:700; line-height:1.3em; letter-spacing:-.02em; margin-bottom:8px;}
.contact-wrap .tit h3 {font-size:37px; font-weight:800; line-height:1.3em; letter-spacing:-.02em;}
.contact-wrap .info {font-size:20px; font-weight:400; line-height:1.5em; letter-spacing:-.03em;}
.contact-wrap .info p {position:relative; padding-left:40px; margin-bottom:23px;}
.contact-wrap .info p img {position:absolute; top:0; left:0;}