@charset "utf-8";

/*----------------------------------------------------------
    Styles for accordionContent
----------------------------------------------------------*/
.accordion { height: 200px; }
.accordion .ac_btn { cursor: pointer; position: relative; }
.accordion .ac_btn .btnOpened { visibility: hidden; position: absolute; top: 0; left: 0; }
.accordion .open .btnOpened { visibility: visible; }
.accordion .ac_content { display: none; }

/*----------------------------------------------------------
    Styles for Tab
----------------------------------------------------------*/
.tabchange { height: 200px; }
.tabchange .tab { overflow: hidden; }
.tabchange .tab li { float: left; cursor: pointer; position: relative; }
.tabchange .tab li.select { }
.tabchange .tab li .active { visibility: hidden; position: absolute; top: 0; left: 0; color: #f00; }
.tabchange .tab li.select .active, .tabchenge .tab li:hover .active { visibility: visible; }
.tabchange .content > * { display: none; }
.tabchange .content > *.select { display: block; }

/*----------------------------------------------------------
    Styles for slider
----------------------------------------------------------*/
.bx-wrapper img { max-width: 100%; display: inline !important; }
.sliderArea { position: relative; }

/*  default control */
.sliderArea .bx-wrapper .bx-controls-direction a { width: 64px; height: auto; text-indent: 0; }
.sliderArea .bx-wrapper .bx-prev { left: -30px; background: none; }
.sliderArea .bx-wrapper .bx-next { right: -30px; background: none; }

/* default pager */
.sliderArea .bx-wrapper .bx-pager { bottom: 0px; }
.sliderArea .bx-wrapper .bx-pager.bx-default-pager a { background-color: #868686; margin: 0 15px; height: 16px; width: 16px; border-radius: 8px; }
.sliderArea .bx-wrapper .bx-pager.bx-default-pager a:hover, .sliderArea .bx-wrapper .bx-pager.bx-default-pager a.active { background-color: #ff9900; }

/* custom pager */
.sliderArea .pager { overflow: hidden; }
.sliderArea .pager a { color: #333; float: left; display: block; position: relative; float: left; }
.sliderArea .pager a .on { visibility: hidden; position: absolute; top: 0; left: 0; color: #f00; }
.sliderArea .pager a.active .on, .sliderArea .pager a:hover .on { visibility: visible; }

/*----------------------------------------------------------
    Styles for Common
----------------------------------------------------------*/
body { background-color: #fff; }
#header { background-color: #e7e7e8; height: 110px; }
#header .title { float: left; padding-top: 20px; position: relative; width: 770px; }
#header .title p { position: absolute; top: 42px; left: 570px; }
#header .title p a { color: #003BFF; }
#header .title h1 { font-weight: bold; margin-bottom: 16px; position: relative; z-index: 1; }
#header .title .logo { margin-left: 13px; }
#header .title .powered { left: 320px; bottom: 0; position: absolute; }
#header .btn { float: right; margin-bottom: -2px; }
#footer { padding: 30px 0; text-align: center; background-image: url(../img/cv_bg03.png); background-color: #000; }
#footer .copyright { font-size: 16px; color: #fff; max-height: 100%; }
#gnav { background-color: #000; width: 100%; }
#gnav ul li { float: left; }
#gnav ul li a { background-color: #333; color: #fff; width: 160px; padding: 1em 0; text-align: center; display: block; }
#goTop { position: fixed; right: 0; top: 140px; z-index: 100; }

/*----------------------------------------------------------
    Styles for Container
----------------------------------------------------------*/
.kv { background-repeat: no-repeat; background-position: 50% 0; background-image: url(../img/kv_bg.jpg); height: 632px; background-size: cover; }
.kv .title { padding: 173px 0 0; text-align: center; }
#about { background-color: #000; }
#about li { width: 50%; text-align: center; margin-bottom: 20px; float: left; }
#about li p { font-size: 18px; line-height: 1.88; margin-top: 20px; color: #fff; }
#about .inner { padding: 47px 0 35px; }
#about .title { margin-bottom: 38px; text-align: center; }
#about .bg-dive .tac { margin-bottom: 24px; }
.cv { background-color: #000000; background-image: url(../img/cv_bg03.png); }
.cv.bg2 { background: url(../img/cv_bg02.png); }
.cv .inner { padding: 44px 0 43px; text-align: center; }
.loop { background: url(../img/cv_bg01.png); padding-top: 8px; }
.catch p { font-size: 18px; color: #fff; }
#needs .first { background: #4295c2 url(../img/needs_bg.png) no-repeat 50% 0; height: 582px; }
#needs .first .catch { padding: 60px 0 0 30px; width: 400px; }
#needs .first .catch .title { margin-bottom: 35px; }
#needs .first .image { position: absolute; left: 50%; top: 0; }
#needs .specialist .inner { background: url(../img/specialist_bg.png) no-repeat 80px 150px; padding-bottom: 70px; }
#needs .specialist ul { padding: 60px 0 0; }
#needs .specialist li { width: 324px; height: 330px; border-right: 1px solid #8f8f8f; border-left: 1px solid #fff; float: left; text-align: center; }
#needs .specialist li:first-child { border-left: none; }
#needs .specialist li:last-child { border-right: none; }
#needs .specialist li p { font-size: 18px; margin-top: 38px; padding: 0 20px; text-align: left; }
#needs .specialist li .image { margin-top: -26px; }
#needs .specialist h3 { padding-top: 40px; text-align: center; }
#localize .first { background: #01aa8c; height: 550px; }
#localize .first .catch { padding: 56px 0 0 530px; width: 400px; }
#localize .first .catch .title { margin-bottom: 40px; }
#localize .first .catch p { line-height: 1.44; }
#localize .first .image { position: absolute; right: 50%; top: 0; }
#localize .message p { font-size: 16px; margin-bottom: 1em; width: 594px; }
#localize .message .body { width: 530px; float: right; padding-right: 145px; }
#localize .message .body p { font-size: 16px; text-align: justify; max-height: 100%; }
#localize .message .body h3 { margin-bottom: 30px; }
#localize .message .image { margin-top: 26px; margin-left: 22px; }
#localize .message .inner { padding: 67px 30px 60px; background-repeat: no-repeat; background-position: 50% 0; background-image: url(../img/message_bg.png); width: 1032px; }
#project .first { background: #d27121 url(../img/project_bg.png) no-repeat 50% 0; height: 582px; }
#project .first .catch { padding: 58px 0 0 30px; width: 400px; }
#project .first .catch .title { margin-bottom: 35px; }
#project .first .image { position: absolute; left: 50%; top: 0; }
#project .graph .inner { padding: 58px 0 30px; }
#project .graph h3 { margin-bottom: 50px; text-align: center; }
#project .graph li { width: 280px; padding: 0 23px; float: left; text-align: center; }
#project .graph li p { font-size: 16px; line-height: 1.8; text-align: left; margin-top: 15px; }
#case { background: #fff url(../img/case_bg.png) no-repeat 50% bottom; background-size: cover; }
#case .title { text-align: center; padding: 66px 0 44px; }
#case .inner { padding-bottom: 54px; }
#case .sliderArea { width: 922px; margin:0 auto; }
#case .pager a { width: 223px; margin-left: 10px; margin-bottom:10px; }
#case .pager a:first-child { margin: 0; }
#case .pager a:nth-child(5) { margin: 0; }
#case .bx-viewport { border: 1px solid #b1a067; background-color: #f4f2ea; background-color: rgba(244, 242, 234, 0.7); box-shadow: 0 3px 2px #cec9b9 }
#case .slider li p { font-size: 15px; line-height: 1.7; }
#case .slider li { padding: 17px 0 25px; }
#case .slider li .head { margin-bottom: 30px; text-align: center; }
#case .slider li .overview { margin-bottom: 34px; text-align: center; }
#case .slider li .position:before { content: url(../img/case_txt01.png); margin-left: 42px; }
#case .slider li .position p { margin-top: 12px; }
#case .slider li .outcome:before { content: url(../img/case_txt02.png); }
#case .slider li .skill { margin-top: 20px; }
#case .slider li .skill:before { content: url(../img/case_txt03.png); }
#case .slider li .reward { margin-top: 20px; }
#case .slider li .reward:before { content: url(../img/case_txt04.png); }
#case .slider li div.left { padding-left: 50px; float: left; }
#case .slider li div.right { float: left; width: 400px; margin-left: 24px; padding-bottom: 20px; }
#case .slider li div.right p { margin-top: 6px; }
#case .inner .p-btn { margin: 38px 0 0 0; text-align: center; }
#feature { background-repeat: no-repeat; background-position: 50% 0; background-image: url(../img/feature_bg.jpg); }
#feature .title { padding-top: 43px; padding-right: 0; padding-left: 0; padding-bottom: 36px; text-align: center; }
#feature .image { margin-top: 22px; margin-right: 0; margin-left: 0; margin-bottom: 12px; }
#feature .body { margin: 0 56px; padding: 30px;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.7+0,0.7+100;White+to+Transparent */ background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0.7))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#b3ffffff', GradientType=0); /* IE6-9 */ }
#feature .body p { font-size: 18px; line-height: 1.5; max-height: 100%; }
#feature .inner { padding-bottom: 50px; }
#feature .workstyle { background-color: #eeeeee; }
#feature .workstyle ul { padding: 60px 0 0; }
#feature .workstyle li { width: 324px; height: 330px; border-right: 1px solid #8f8f8f; border-left: 1px solid #fff; float: left; text-align: center; }
#feature .workstyle li:first-child { border-left: none; }
#feature .workstyle li:last-child { border-right: none; }
#feature .workstyle li p { font-size: 18px; margin-top: 38px; padding: 0 20px; text-align: left; }
#feature .workstyle li .image { margin-top: -26px; }
#feature .workstyle h3 { padding-top: 40px; text-align: center; }
#support .title { padding: 48px 0 33px; text-align: center; }
#support .inner { width: 810px; padding-bottom: 37px; }
#support li { float: left; width: 405px; position: relative; }
#support li p { font-size: 18px; color: #fff; position: absolute; top: 140px; left: 57px; width: 270px; }
#support li.right p { left: 91px; }
#support li.btm p { top: 154px; }
#support .katsuyou { background-image: url(../img/katsuyou-bg.jpg); background-repeat: no-repeat; background-size: cover; }
#support .katsuyou .inner { width: 980px; }
#support .katsuyou h3 { padding: 48px 0 45px; text-align: center; }
#support .katsuyou li { float: left; width: 460px; margin-left: 20px; margin-bottom: 12px; }
#support .katsuyou ul { padding-bottom: 24px; }
#flow .title { padding: 58px 0 44px; text-align: center; }
#flow ol { padding-left: 17px; }
#flow li { float: left; }
#flow li p { font-size: 14px; line-height: 1.7; width: 160px; margin: 30px auto 0; }
#flow .inner { padding-bottom: 47px; }
#faq { background-repeat: no-repeat; background-position: 50% 0; background-image: url(../img/faq_bg.jpg); background-size: cover; }
#faq .title { padding: 48px 0 58px; text-align: center; }
#faq .content { font-size: 0; padding-left: 10px; padding-bottom: 20px; }
#faq dl { font-size: 16px; display: inline-block; width: 417px; padding: 0 30px; vertical-align: top; }
#faq dd { line-height: 1.5; padding: 30px 15px; }
#company { background-repeat: no-repeat; background-position: 50% 0; background-image: url(../img/company_bg_typed.jpg); max-height: 1000px; background-size: cover; }
#company .title { padding: 60px 0 38px; text-align: center; }
#company .inner { width: 810px; }
#company p, #company dl { font-size: 16px; color: #fff; }
#company dl { line-height: 1.7; position: relative; padding: 44px 0 58px; }
#company dt { float: left; }
#company dd { padding-left: 220px; }
#company dd .kyoka { display: inline-block; width: 8em; }
#company .img { bottom: 0; right: -190px; position: absolute; }
#kvbtm:before { background: url(../img/cv_bg01.png); height: 9px; width: 100%; display: block; content: ''; }
#container #about .bg-dive { background-image: url(../img/about_bg.png); background-position: 50% 0; background-repeat: no-repeat; }
#about .about01 { margin-right: 50px; }
#about .about02 { margin-left: 41px; }
#about .inner .tac.light { margin-top: 30px; margin-bottom: 17px; }