@charset "utf-8";

@import "./common.css";
@import "./layout.css";

.main-visual {position:relative; overflow:hidden; height:550px;}
.main-visual .image {position:relative;}
.main-visual .image li {position:absolute; top:0; left:50%; margin-left:-800px;}

.responsive-mobile .main-visual {width:100%; height:200px;}
.responsive-mobile .main-visual .mob .image li {left:0; margin-left:0;}
.responsive-mobile .main-visual .mob .image li img {width:100%;}

.company {background-color:#fff;}
.company .tit {text-align:center; margin-bottom:30px;}
.company .company-list {width:100%; overflow:hidden;}
.company .company-list li {float:left; width:308px; margin-left:20px; font-size:13px; line-height:18px; letter-spacing:-0.5px; overflow:hidden;}
.company .company-list li:first-child {margin-left:0;}
.company .company-list li .image {position:relative; margin-bottom:12px;}
.company .company-list li .image strong {position:absolute; bottom:0; left:0; display:block; width:100%; text-align:center; color:#fff; font-size:18px; padding:10px 0; background-color:rgba(0,0,0,0.7);}

.responsive-mobile .company .tit img {width:240px;}
.responsive-mobile .company .company-list li {float:none; width:100%; margin:0 0 15px 0;}
.responsive-mobile .company .company-list li .image {height:100px; overflow:hidden;}
.responsive-mobile .company .company-list li .image img.mob {width:100%;}
.responsive-mobile .company .company-list li .image strong {top:0; right:0; left:auto; width:44%; height:100%; font-size:12px; padding:0; line-height:100px;}

.vision {position:relative; background-color:#f8f7f5;}
.vision .deco {position:absolute; top:-100px; left:-45px;}
.vision .txt-wrap {padding:45px 0 45px 415px; background:url(../images/vision_obj.png) 0 0 no-repeat; line-height:22px; letter-spacing:-0.5px;}
.vision .txt-wrap strong {display:block; margin-bottom:30px;}

.responsive-mobile .vision .txt-wrap {padding:236px 0 45px 0; background-position:center 0; background-size:230px 217px;}

.business {background-color:#37383d;}
.business .business-list {width:100%; overflow:hidden;}
.business .business-list li {float:left; width:308px; margin-left:20px;}
.business .business-list li:first-child {margin-left:0;}
.business .business-list li span {display:block; text-align:center;}
.business .business-list li p {margin-top:30px; color:#a5a7af; padding:0 20px;}

.responsive-mobile .business .business-list li {margin-left:0; margin-bottom:15px; width:100%; overflow:hidden;}
.responsive-mobile .business .business-list li span {float:left; width:37%;}
.responsive-mobile .business .business-list li span img {width:100%;}
.responsive-mobile .business .business-list li p {float:right; width:58%; margin:0; padding:30px 0 0 10px;}

.history {position:relative; background-color:#fff; overflow:hidden;}
.history .deco {position:absolute; top:115px; right:-30px;}
.history .history-list {margin:-30px 0 0 -20px; overflow:hidden; *zoom:1;}
.history .history-list > li {float:left; width:308px; margin:30px 0 0 20px;}
.history .history-list > li h3 {padding-bottom:10px; border-bottom:6px solid #000;}
.history .history-list > li ul {margin-top:20px;}
.history .history-list > li ul li {position:relative; font-size:12px; padding-left:30px;}
.history .history-list > li ul li span {position:absolute; top:0; left:0; display:inline-block; color:#27a1e5; *zoom:1; *display:inline;}
.history_title {font-family:'Verdana';color:#000000;font-size:32px;line-height:32px;font-weight:bold;}

.responsive-mobile .history .history-list {margin:0 0 20px 0; overflow:hidden; *zoom:1;}
.responsive-mobile .history .history-list > li {float:none; width:100%; margin:0; padding:15px 0; border-bottom:3px solid #000; overflow:hidden;}
.responsive-mobile .history .history-list > li:last-child {border-bottom:none;}
.responsive-mobile .history .history-list > li h3 {border:none; float:left; width:21%;}
.responsive-mobile .history .history-list > li h3 img {width:40px;}
.responsive-mobile .history .history-list > li ul {margin-top:-5px; float:right; width:79%;}
.responsive-mobile .history .history-list > li ul li {padding-left:19px;}

.contact {background-color:#f9f8f6;}
.contact .con-inner {width:100%; overflow:hidden;}
.contact #map {float:left; width:634px; border:1px solid #000;}
.contact .info {float:right; width:308px;}
.contact .info strong {display:block;}
.contact .info strong > * {border-top:3px solid #000; padding:4px 0 5px;}
.contact .info span {display:block; margin-bottom:22px;}

.responsive-mobile .contact #map {float:none; width:100%; border:1px solid #000;}
.responsive-mobile .contact .info {float:none; width:100%; margin:15px 0;}
.responsive-mobile .contact .info li {position:relative;}
.responsive-mobile .contact .info li.n01 img {width:42px;}
.responsive-mobile .contact .info li.n02 img {width:17px;}
.responsive-mobile .contact .info li.n03 img {width:18px;}
.responsive-mobile .contact .info li.n04 img {width:45px;}
.responsive-mobile .contact .info strong {position:absolute; top:0; left:0;}
.responsive-mobile .contact .info strong > * {border-top-width:2px; padding:4px 0 5px;}
.responsive-mobile .contact .info span {display:block; padding-left:60px; margin-bottom:14px; font-size:10px;}