/* Copyright (c) 2011, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version:2.9.0 */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000} /* For modern browsers */ .cf:before,.cf:after {content:"";display:table;} .cf:after {clear:both;} .cf {zoom:1;} /* common */ body,html{width:100%;height:100%;font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;} #wrap{width: 100%; overflow-x: hidden;} /* COLOR ********************** LIGHT GRAY : 595959 GRAY : 525252 BLUE : 1196ed / 0085eb / 006ed2 BLUE(shadow) : 1e7ab5 ********************************/ @font-face { font-family: 'icon'; src:url('../font/icon.eot'); src:url('../font/icon.eot?#iefix') format('embedded-opentype'), url('../font/icon.woff') format('woff'), url('../font/icon.ttf') format('truetype'), url('../font/icon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } [data-icon]:before {font-family: 'icon'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-cog, .icon-plus-alt, .icon-minus-alt, .icon-check-alt, .icon-pen-alt-fill, .icon-checkmark, .icon-minus, .icon-plus, .icon-pen-alt-stroke, .icon-search, .icon-list {font-family: 'icon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-cog:before {content: "\31"; } .icon-plus-alt:before {content: "\32"; } .icon-minus-alt:before {content: "\33"; } .icon-check-alt:before {content: "\34"; } .icon-pen-alt-fill:before {content: "\35"; } .icon-checkmark:before {content: "\36"; } .icon-minus:before {content: "\37"; } .icon-plus:before {content: "\38"; } .icon-pen-alt-stroke:before {content: "\39"; } .icon-search:before {content: "\30"; } .icon-list:before {content: "\21"; } /*---------- fonts ----------*/ .rb{font-family:'Roboto', sans-serif;} .hd{font-family:'Handlee', cursive;} .ico{font-family: 'icon';} /*---------- sprites ----------*/ .bk_pc,.bk_pen,.bk_step,.bk_step_fin,.bk_step_form_fin,.bk_step_form_off,.bk_step_form_on,.boder,.logo,.panel_1,.panel_2,.panel_3,.panel_4,.panel_phi_1,.panel_phi_2,.panel_phi_3,.panel_phi_4,.panel_phi_5,.pointer_right,.pointer_under,.pulldown,.titles_designer,.titles_enginner,.titles_marketer,.titles_member,.titles_office{ background-repeat:no-repeat;display:block; background-position:0 0; } .bk_pc{background-image:url(../img/sp/bk_pc.png);width:922px;height:704px;} .bk_pen{background-image:url(../img/sp/bk_pen.png);width:223px;height:123px;} .bk_step{background-image:url(../img/sp/bk_step.png);width:231px;height:125px;} .bk_step_fin{background-image:url(../img/sp/bk_step_fin.png);width:232px;height:124px;} .bk_step_form_fin{background-image:url(../img/sp/bk_step_form_fin.png);width:232px;height:62px;} .bk_step_form_fin2{background-image:url(../img/sp/bk_step_form_fin2.png);width:232px;height:62px;} .bk_step_form_off{background-image:url(../img/sp/bk_step_form_off.png);width:201px;height:62px;padding-right:30px;} .bk_step_form_off2{background-image:url(../img/sp/bk_step_form_off2.png);width:201px;height:62px;padding-right:30px;} .bk_step_form_on{background-image:url(../img/sp/bk_step_form_on.png);width:201px;height:62px;padding-right:30px;} .boder{background-image:url(../img/sp/boder.png);width:1500px;height:45px;} .logo{background-image:url(../img/sp/logo.png);background-position:0px 50%;width:240px;height:50px;} .panel_1{background-image:url(../img/sp/panel_1.png);width:338px;height:224px;} .panel_2{background-image:url(../img/sp/panel_2.png);width:338px;height:224px;} .panel_3{background-image:url(../img/sp/panel_3.png);width:338px;height:224px;} .panel_4{background-image:url(../img/sp/panel_4.png);width:338px;height:224px;} .panel_phi_1{background-image:url(../img/panel_phi_1.jpg);width:320px;height:321px;} .panel_phi_2{background-image:url(../img/panel_phi_2.jpg);width:320px;height:321px;} .panel_phi_3{background-image:url(../img/panel_phi_3.jpg);width:320px;height:321px;} .panel_phi_4{background-image:url(../img/panel_phi_4.jpg);width:320px;height:321px;} .panel_phi_5{background-image:url(../img/panel_phi_5.jpg);width:320px;height:320px;} .pointer_right{background-image:url(../img/sp/pointer_right.png);width:6px;height:6px;} .pointer_under{background-image:url(../img/sp/pointer_under.png);width:13px;height:13px;} .pulldown{background-image:url(../img/sp/pulldown.png);width:23px;height:36px;} .titles_designer{background-image:url(../img/sp/titles_designer.png);width:239px;height:21px;} .titles_enginner{background-image:url(../img/sp/titles_enginner.png);width:158px;height:21px;} .titles_marketer{background-image:url(../img/sp/titles_marketer.png);width:170px;height:21px;} .titles_member{background-image:url(../img/sp/titles_member.png);width:273px;height:45px;} .titles_service{background-image:url(../img/sp/titles_service.png);width:273px;height:45px;} .titles_office{background-image:url(../img/sp/titles_office.png);width:191px;height:21px;} /*---------- common ----------*/ a{text-decoration: none;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;} p{color: #525252; font-size: 12px; line-height: 2; letter-spacing: 1px;} #loader{height:80px; width: 80px; overflow: hidden; display:;position: fixed; z-index: 999; left:50%; top:50%; margin: -40px 0 0 -40px; display: none;} .box{width:1020px; margin: 0 auto; position: relative; z-index: 2;} .subnav{z-index: 3;} .subnav ul.fixed{margin-top: 70px;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;} .bkstBd{position: relative; overflow: hidden;} .bkst{width: 100%; height: 120%; top: 0px; z-index:0; position: absolute;} .btn{display: block; text-align: center; background-color: #1196ed; background-position: 0 0; color: #fff; font-size: 14px; letter-spacing: 1px; padding: 1em 0; border-radius: 5px; box-shadow: 0 4px 0 0 #1e7ab5; text-shadow:0 1px 0px #1e7ab5; -webkit-transition:background-position 20s linear,box-shadow 0.3s ease,text-shadow 0.3s ease,margin 0.3s ease; transition:background-position 20s linear,box-shadow 0.3s ease,text-shadow 0.3s ease,margin 0.3s ease; } .btn:hover{box-shadow: 0 0 0 0 #1e7ab5; text-shadow:0 0 0 #1e7ab5; margin: 4px 0 0 0; } .btn2{display: block; text-align: center; background-color: #15C39E; background-position: 0 0; color: #fff; font-size: 14px; letter-spacing: 1px; padding: 1em 0; border-radius: 5px; box-shadow: 0 4px 0 0 #10772B; text-shadow:0 1px 0px #10772B; -webkit-transition:background-position 20s linear,box-shadow 0.3s ease,text-shadow 0.3s ease,margin 0.3s ease; transition:background-position 20s linear,box-shadow 0.3s ease,text-shadow 0.3s ease,margin 0.3s ease; } .btn2:hover{box-shadow: 0 0 0 0 #10772B; text-shadow:0 0 0 #10772B; margin: 4px 0 0 0; } #philosophy .panel a.btnon,#recruit .subnav ul li a.btnon,#globalnav #nav li a.btnon,#factory .subnav ul li a.btnon, .btnon{background-image: url(../img/bk_btn.png); background-color: #1196ed; background-repeat: repeat; background-position: 0 1000px; } .border{display: block; height: 2px; width: 100%; background: #0085eb;} .sub{padding: 40px 0} .sub h2{font-family:'Roboto', sans-serif; color: #0085eb; font-size: 22px; letter-spacing: 3px; font-weight: 700; margin: 0 0 30px 0; } .sub p{padding: 0 0 10px 0; width: 860px; } .sub a.hd{position: absolute; right: 0px; font-size: 22px; color: #0085eb; bottom:0; line-height:7em;} .subsub{padding: 70px 0; background: #fbfbfb} .subsub_new{padding-top: 10px;} .subsub ul li{float: left; line-height: 22px; color: #525252; letter-spacing: 1px} .subsub ul li:first-child{font-family:'Roboto', sans-serif; color: #0085eb; font-size: 22px; margin: 0 20px 0 0; letter-spacing: 3px} .subsub ul li:first-child h4{font-weight: bold;} .poly{background: url(../img/bk_poly.png) center;} .subtitles{margin: 55px 0} .subtitles li{float: left; letter-spacing: 2px; line-height: 30px; padding:3px 0 0 0} .subtitles li:first-child{margin: 0 20px 0 0;padding:0;} .subtitles .name{font-size: 20px; color: #0085eb; font-family: 'Roboto', sans-serif; font-weight: bold;} .subtitles_new .name{font-size: 20px; color: #0085eb; font-family: 'Roboto', sans-serif; font-weight: bold;} .subtitles .jp{font-size: 14px; color: #525252; } .subtitles_new .jp{font-size: 32px; color: #0085EB; } .backstretch img{user-select:none;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;} /* header */ .header{margin: 70px 0 0 0} #globalnav{position: fixed; z-index: 1000; background: #fff; width: 100%; top: 0} #nav li{float: right;} #nav li.logoL{text-indent: -9999px; float: left;} #nav li a.btnR{background: #1196ed; color: #fff; padding: 0 36px; -webkit-transition:background-position 20s linear,box-shadow 0.3s ease,text-shadow 0.3s ease,margin 0.3s ease; transition:background-position 20s linear,box-shadow 0.3s ease,text-shadow 0.3s ease,margin 0.3s ease; } #nav li a{font-size: 12px; font-family:'Roboto', sans-serif; letter-spacing: 1px; display: block;line-height: 70px;height: 70px;padding: 0 15px;font-weight: bold;color: #595959;-webkit-transition:all 0.3s;transition:all 0.3s;} #nav li.sptoggle a{font-family: 'icon'; cursor: pointer; color: #1196ed; display: none;} #nav li a.navs:hover{background: #1196ed; color: #fff;} #nav li.logoL a {line-height: 50px;height: 50px;padding: 0;margin: 10px 0;} /* footer */ #footer{background: #c1cdd7; } #footer dl{padding: 50px 0} #footer dd ul li{float: left;} #footer dd ul li a{color: #fff; display: block; padding: 0 15px; border-left:1px solid #eee;} #footer dd ul li:first-child a{border:none;} #footer dt,#footer dd{float: left; font-size: 12px; letter-spacing: 1px; margin: 12px 0; line-height: 12px; } #footer dt{font-family:'Roboto', sans-serif; font-weight: bold; color: #94a8b9; font-size: 15px;} #footer dt{width: 140px; clear: both;} #footer address{text-align: center; color: #fff; font-size: 10px; letter-spacing: 2px; padding: 30px 0} /**↓20140226更新***/ #footer .clearfix.table {} #footer .clearfix.table div:first-child { float:left; } #footer .clearfix.table div:last-child { float:right; margin-rigth:10px; } #footer dl.list { color:#535353; font-size:12px; padding:0; margin:0; } #footer dl.list dt { margin:6px 0; width:80px; padding:0; font-size:12px; } #footer dl.list dd { margin:6px 0; padding:0; font-size:12px; line-height:16px;} #footer dl.list dd span { font-size:10px; } #footer dl.list dd a { text-decoration:underline; color:#1196ED; } #footer dl.list dd a:hover { text-decoration:none; color:#fff; } #footer .media { font-size: 0; padding: 30px 0 20px 0; position: relative; border-top: solid 1px rgba(0,0,0,0.2); border-bottom: solid 1px rgba(0,0,0,0.2); margin-bottom: 50px; } #footer .media img {border:none; outline::none;margin:0 6px 6px 0; font-size:0; vertical-align:bottom; } #footer .media img:nth-child(6n) { margin-right:0; } /*---------- index ----------*/ #indexhd{height: 560px; position: relative;} .header .fades{position: absolute; top: 195px;} .header .fade_out{display: none;} .header .fade_in{display: none;} .header .btn {width:253px; position: absolute; top:245px; right: 0px;} .header .btn2 {width:300px; position: absolute; top:245px; right: 0px;} #mid .header .btn {top: 242px;} .header .btn span{padding: 0 0 0 25px; background: url(../img/sp/pointer_under.png) no-repeat left center} .header .btn span.r{background: url(../img/sp/pointer_right.png) no-repeat left center} #indexmember,#indexmember .box{height: 560px; } #indexmember .center{position: absolute; height: 290px; width: 520px; margin: -145px 0 0 -260px; text-align: center; left:50%; top :50%; } #indexmember .center h1{text-indent: -9999px; margin: 0 auto; } #indexmember .center .border{width: 38px; margin: 20px auto; } #indexmember .center h2{font-size: 14px; font-weight: bold; color: #525252; margin: 0 0 20px 0 } #indexmember p{font-size: 12px; line-height: 1.8 } #indexmember .center a{float: right; line-height: 120px; text-align: center; color: #525252; margin: 5px 0 0 0; } #indexmember .center a:hover{line-height: 110px; } #indexrecruit{min-height: 774px;} #indexrecruit h1{text-align: center; color: #fff; font-weight: bold; letter-spacing: 2px; font-size: 46px; padding: 80px 0 70px 0; line-height: 1} #indexrecruit p{color: #99bce8; text-align: center;} #indexrecruit .boxes{text-align: center;vertical-align: top;} #indexrecruit .boxesL{display: inline-block; width: 20%; max-width: 338px; min-width: 200px; margin: 30px 15px 30px 15px; background: #fff; box-shadow: 5px 5px 0 0 rgba(0,0,0,0.1);vertical-align: top;} #indexrecruit .boxesL h2{text-indent: -9999px; padding: 88px 0 0 0;} #indexrecruit .boxesL h2 span{margin: 0 auto;} #indexrecruit .boxesL .boxeshd{height: 220px; width: 100%} #indexrecruit .boxesL .boxeshd p{margin: 1em 0; color: #fff; font-size: 14px;} #indexrecruit .boxesL p{margin: 2em 10px; color: #555; font-size: 11px;min-height: 66px} #indexrecruit .boxesL a{margin: 10px 10px 14px 10px} #ftcontent {text-align: center;} #ftcontent .box{width: 1050px;} #ftcontent .ftcontents{display: inline-block; text-align: left; width: 316px; margin: 160px 15px; } #ftcontent .ftcontents h2{font-family:'Roboto', sans-serif; font-size: 30px; letter-spacing: 2px; font-weight: bold; color: #0085eb; line-height: 1; } #ftcontent .ftcontents h3{font-size: 14px; color: #525252; font-weight: bold; margin: 0 0 20px 0} #ftcontent .ftcontents p{font-size: 12px; margin: 0 0 20px 0} #ftcontent .ftcontents .border{width: 20px; margin: 20px 0} #ftcontent .ftcontents a.hd{text-align: right; display: block; color: #525252;} /*---------- sub ----------*/ #min #subhd{height: 270px; position: relative;} #subhd{height: 430px; position: relative;} #wbs_top{height: 560px; position: relative;} .wbs{background: url(../img/head.jpg) center no-repeat; background-size: cover;} #subhd h1,#subhd h2,#subhd h3{color: #fff;} #subhd h1{font-size:21px;letter-spacing:2px;font-family:'Roboto', sans-serif; margin: 100px 0 0 0} #subhd h2{font-size:60px;letter-spacing:2px;font-weight: bold;margin: 0 0 20px 0} #min #subhd h2{margin: 55px 0 0 0} #mid #subhd h1{margin: 70px 0 0 0} #mem #subhd h1{margin: 70px 0 0 0} #mem #subhd h2{margin: 5px 0 20px 0} #mid #subhd h2{font-size: 50px; margin: 20px 0} #subhd h3{font-size:14px;letter-spacing:1px;width:680px; line-height: 2} .content p.title{letter-spacing: 3px; font-size: 40px; margin:70px 0 30px 0} .content p{font-size: 14px;} /*---------- vision ----------*/ #vision{margin-bottom:230px; } #indexvision{margin-bottom:175px;} #indexvision h1{text-indent: -9999px; margin: 55px auto 0; } #indexvision .border{width: 38px; margin: 20px auto; } .index_vision .bx-pager .bx-pager-item a{display: block; height: 10px; width: 10px; border-radius: 5px; background: #0085eb; margin: 0 5px; opacity: 0.2} #visionservice{height: 663px; width: 100%;} #pcBd {width: 972px; height: 704px; margin: 0 auto; top: -145px; position: relative;} #pcBd .pc li .bk_pc{margin: 0 25px} #pcBd .pc li .bk_pc img {margin: 40px 0 0 39px;} .bx-viewport{overflow: visible !important;} .bx-controls{margin: 40px 0 0 0} .bx-pager {text-align: center;} .bx-pager .bx-pager-item{text-indent: -9999px; display: inline-block;} .bx-pager .bx-pager-item a{display: block; height: 10px; width: 10px; border-radius: 5px; background: #fff; margin: 0 5px; opacity: 0.2} .bx-pager .bx-pager-item a.active{ opacity: 0.5} .bx-controls-direction{clear: both; text-indent: -9999px} .bx-controls-direction a{display: block;width: 849px;height:474px;background:none;position: absolute;top:40px;} .bx-controls-direction a.bx-prev{left: -908px;} .bx-controls-direction a.bx-next{left: 1036px;} /*---------- recruit ----------*/ #recruit .flow{padding: 40px 0} #recruit .flow ol li:first-child{margin: 0} #recruit .flow ol li{float: left; text-align: center; line-height: 62px; font-weight: bold; font-size: 13px; color: #0085eb; margin: 0 0 0 30px} #recruit .flow ol li.bk_step_form_on{color:#fff;} #recruit .subnav{height: 80px} #recruit .subnav ul{display:table; position: absolute; top: 0; width: 100%; z-index: 99} #recruit .subnav ul li{display:table-cell;} #recruit .subnav ul li a{display: block; height: 50px; line-height: 50px; background: #0085eb; text-align: center; color: #fff; font-size: 14px; -webkit-transition:background-position 20s linear,background-color 0.2s linear; transition:background-position 20s linear,background-color 0.2s linear;} #recruit .subnav ul li a span{padding: 0 25px 0 0;background: url(../img/sp/pointer_under.png) no-repeat right center;} .detail_recruit .borderL{height: 45px; width: 100%; background: url(../img/sp/boder.jpg) center center; display: block;} .detail_recruit .detail{margin: 40px 0 0 0} .detail_recruit .detail .detailBd{width: 490px} .detail_recruit .detail .detailL{float: left;} .detail_recruit .detail .detailR{float: right;} .detail_recruit .detail .detailBd .detailhead{color: #0085eb; margin: 0 0 15px 0; font-weight: bold;} .detail_recruit .detail .detailBd .detailtxt {margin: 0 0 20px 0} .detail_recruit .detail .detailR .detailhead{margin: 0 0 3px 0;} .detail_recruit .detail .detailR .detailtxt {color: #525252; margin: 0 0 10px 0} .detail_recruit .detail .detailBd .detailsub{font-weight:bold;} .detail_recruit .detail .detailBd .detailtxt a{color: #525252; text-decoration: underline;} .detail_recruit .btn{width: 400px; margin: 30px auto 50px auto} .entry_btn{text-align: center;} .entry_btn a{display: inline-block; padding:10px 40px; border:3px solid #0085EB; color:#0085EB; font-size:16px;} .entry_btn a:hover{display: inline-block; padding:10px 60px; background: #0085EB; color:#fff; font-size:16px;} #recruit .recruit_16{background:url("/common/img/bk_poly.png"); background-size:cover; padding:20px; text-align:center; font-size:18px;} #recruit .recruit_16 a{color:#fff; border: 3px solid #fff; display:inline-block; padding:5px 100px;} #recruit .recruit_16 a:hover{background-color: #fff; color:#0085EB;} #recruit img{vertical-align: top;} #recruit .job_top{background:url("/common/img/career_top.jpg") no-repeat center center; background-size:cover; height:602px;} #recruit .head_text{position:relative; text-align:center; padding:95px 0 70px;} #recruit .head_text h2{animation: copyIn 1500ms ease 0 1 alternate; -moz-animation: copyIn 1500ms ease 0 1 alternate; -webkit-animation: copyIn 1500ms ease 0 1 alternate;} @keyframes copyIn{ 0% {opacity:0; transform:scale(1.5, 1.5);} 100% {opacity:1; transform:scale(1, 1);} } @-moz-keyframes copyIn{ 0% {opacity:0; transform:scale(1.5, 1.5);} 100% {opacity:1; transform:scale(1, 1);} } @-webkit-keyframes copyIn{ 0% {opacity:0; transform:scale(1.5, 1.5);} 100% {opacity:1; transform:scale(1, 1);} } @-o-keyframes copyIn{ 0% {opacity:0; transform:scale(1.5, 1.5);} 100% {opacity:1; transform:scale(1, 1);} } @-ms-keyframes copyIn{ 0% {opacity:0; transform:scale(1.5, 1.5);} 100% {opacity:1; transform:scale(1, 1);} } #recruit .head_text h2{background:url("/common/img/career_top_ttl.png") no-repeat center center; width:473px; height:59px; margin:0 auto 60px;} #recruit .head_text h3{font-size:18px; margin-bottom:60px;} #recruit .section_ttl{text-indent: -9999px; margin:90px auto 0;} #recruit .border{width: 38px;margin: 20px auto;} #recruit .titles_culture{background-image:url("/common/img/career_culture_ttl.png"); width: 290px; height: 45px;} #recruit .titles_jobs{background-image:url("/common/img/career_jobs_ttl.png"); width: 160px; height: 45px;} #recruit .job_message{background: url("/common/img/bk_poly.png"); background-size:cover; padding:60px 0 1px;} #recruit .job_message dl{margin-bottom:60px;} #recruit .job_message dt{width:300px; float:left;} #recruit .job_message dd{width:600px; float:right;} #recruit .job_message dd p{color:#fff; font-size:14px; line-height:1.8em;} #recruit .job_message .job_message_title{font-size:24px; color:#fff;} #recruit .job_culture dl{display:table; width:100%; position:relative;} #recruit .job_culture dd{display:table-cell; position:relative;} #recruit .job_culture dd p{position:absolute; z-index:100; top:0; padding:20px; color:#fff; width: 300px;height:300px;opacity:0;} #recruit .job_culture dd p:hover{position:absolute; z-index:100; top:0; padding:20px; width: 300px;height:300px; opacity:1; background:rgba(0, 133, 235, 0.8);} #recruit .job_culture dd .jt{font-size:18px;} #recruit .job_culture dd jd{font-size:15px;} #recruit .job_title{text-align:center;} #recruit .job_title:before{content:""; display: block; width: 100%; height: 60px;} #recruit .job_title h4{font-size:36px; font-family:'Roboto', sans-serif; color:#0085EB; font-weight:bold;} #recruit .job_title span{font-size:18px;} #recruit .job_sub_title h5{font-size:24px; font-family:'Roboto', sans-serif; color:#0085EB; font-weight:bold; text-align: left; margin-bottom:50px;} #recruit .job_sub_title h5:after{display:block; content:""; width:100%; height:2px; background:#0085EB; text-align:left; margin-top:10px;} #recruit .job_detail{padding:60px 60px 0;} #recruit .job_detail__main{margin-bottom:35px;} #recruit .job_detail__main dl{display:table;} #recruit .job_detail__main dt{font-size:18px; color:#0085EB; display:table-cell; width:240px; vertical-align: top;} #recruit .job_detail__main dd{font-size:16px; display:table-cell; line-height:1.8em; padding-bottom:30px; border-bottom:1px solid #0085EB; vertical-align: top;} #recruit .job_detail__subt{display:table; width:100%;} #recruit .job_detail__sub{display:table-cell; width:33%; padding:0 1%;} #recruit .job_detail__sub dt{font-size:16px; color:#808080; margin-bottom:10px;} #recruit .job_detail__sub dd{font-size:14px; line-height:1.8em;} /*---------- recruit ----------*/ /*---------- recruit_new ----------20150303*/ .detail_recruit_new_about { background: #fff url(../img/bg_newgrade_about.png) no-repeat center center; background-size:cover; max-height: none; max-width: none; width: 100%; height: 600px; margin: 0 auto; padding: 0px; overflow: hidden; text-align: center;} #recruit_new .flow{padding: 40px 0} #recruit_new .flow ol li:first-child{margin: 0} #recruit_new .flow ol li{float: left; text-align: center; line-height: 62px; font-weight: bold; font-size: 13px; color: #0085eb; margin: 0 0 0 30px} #recruit_new .flow ol li.bk_step_form_on{color:#fff;} #recruit_new .subnav{height: 80px} #recruit_new .subnav ul{text-align: center; width: 100%; z-index: 99} .detail_recruit_new .borderL{height: 45px; width: 100%; background: url(../img/sp/boder.jpg) center center; display: block; margin: 30px 0 0;} .detail_recruit_new .detail{margin: 40px 0 0 0} .detail_recruit_new .detail .detailBd{width: 490px} .detail_recruit_new .detail .detailL{float: left;} .detail_recruit_new .detail .detailR{float: right;} .detail_recruit_new .detail .detailBd .detailhead{color: #0085eb; margin: 0 0 15px 0; font-weight: bold;} .detail_recruit_new .detail .detailBd .detailtxt {margin: 0 0 20px 0} .detail_recruit_new .detail .detailR .detailhead{margin: 0 0 3px 0;} .detail_recruit_new .detail .detailR .detailtxt {color: #525252; margin: 0 0 10px 0} .detail_recruit_new .detail .detailBd .detailsub{font-weight:bold;} .detail_recruit_new .detail .detailBd .detailtxt a{color: #525252; text-decoration: underline;} .detail_recruit_new .btn{width: 400px; margin: 30px auto 50px auto} .subtitles_new {margin: 40px 0;} .hov_newgrade:hover{opacity: 0.6;} .miya15{background: url(../img/mv_newgrade.png) center no-repeat; background-size: cover;} #philosophy_new .subtitles_new ul{text-align: center; width: 100%; z-index: 99} #philosophy_new .box{width: 1050px} #philosophy_new .panel{display: block; margin:15px; float: left; text-align: center;} #philosophy_new .panel div{padding: 30px;} #philosophy_new .panel .head{color: #0085eb; font-size: 25px; letter-spacing: 1px} #philosophy_new .panel .border{width: 20px; margin: 20px auto 40px auto} #about_wp .subtitles_new ul{text-align: center; width: 100%; z-index: 99} #about_wp .box{width: 1050px} #about_wp .panel{display: block; margin:15px; float: left; text-align: center;} #about_wp .panel div{padding: 30px;} #about_wp .panel .head{color: #0085eb; font-size: 25px; letter-spacing: 1px} #about_wp .panel .border{width: 20px; margin: 20px auto 40px auto} /*---------- recruit_new ----------*/ #philosophy {margin: 0 0 80px 0} #philosophy .box{width: 1050px} #philosophy .panel{display: block; margin: 30px 15px 0px 15px; float: left; text-align: center;} #philosophy .panel div{padding: 30px;} #philosophy .panel .head{color: #0085eb; font-size: 25px; letter-spacing: 1px} #philosophy .panel .border{width: 20px; margin: 20px auto 40px auto} #philosophy .panel a{display: block; line-height: 318px; height: 318px; width: 318px; text-align: center; background: #0085eb; color: #fff; letter-spacing: 3px; font-weight: bold; font-size: 20px;-webkit-transition:background-position 20s linear,background-color 0.2s linear; transition:background-position 20s linear,background-color 0.2s linear;} #philosophy .panel a:hover{color:#fff;} #message {padding: 50px 0} #message .messageL{float: left; width:500px;} #message .messageL p{color: #fff; font-size: 15px;} #message .messageR{float: right;width:480px; line-height: 0;} #message .messageR p{color: #fff; font-size: 15px;} #message .messageF{width:1020px; line-height: 0;} #message .messageF p{color: #fff; font-size: 15px;} #message .messageF1{width:1020px; line-height: 0;} #message .messageF1 p{color: #525252; font-size: 15px;} /*---------- culture ----------*/ #culture div{width: 20%; height: 200px; float: left; position: relative; overflow: hidden;cursor: pointer;} #culture div img{max-width: 100%; min-height:100%; position: absolute;} #culture div span{position: absolute; z-index: 2; padding: 20px; display: block; opacity: 0; margin: 10px; background: rgba(0, 133, 235, 0.8); } #culture div:hover span{opacity: 1;} #thumbBd .addtxt p.n,#culture div span p.n{font-weight: bold; font-size: 14px;} #culture div span p{color: #fff;} #thumbBd img{box-shadow: 10px 10px 0 0 #1e7ab5;} #thumbBd {line-height: 0; text-align: center; padding: 80px 0 160px; background: #1196ed; position: relative; display: none;} #thumbBd .addtxt {position: absolute;text-align: left;left: 50%;margin-left: -333px;top: 620px;} #thumbBd .addtxt p{color: #fff} #thumbBd .closebtn{position: absolute; font-size: 40px; display: block; right: 0px; top: 0px; width: 80px; height: 80px; text-align: center; line-height: 80px; cursor: pointer; color: #fff; background: #1e7ab5; font-weight: 100; -webkit-transition:all 0.2s;transition:all 0.2s; } #thumbBd .closebtn:hover{background: #1196ed;} /*---------- member ----------*/ .memberBd{width: 100%; height: 430px; overflow: hidden;} .memberBd:nth-child(2n){background: #fbfbfb} .memberBd .memberL,.memberBd .memberR{width: 50%; float: left; position: relative; height: 430px} .memberBd .memberL ul{padding: 30px 30px 0 0} .memberBd .memberR ul{padding: 30px 0 0 30px} .memberBd .memberL .bkst{right:0px;} .memberBd .memberR .bkst{left:0px;} .memberBd .mem_name{font-size: 35px; font-family:'Century',serif; font-weight: bold; letter-spacing: 3px;} .memberBd .mem_job {color: #dadada; letter-spacing: 2px; margin: 10px 0 30px 0; font-size: 14px;} .memberBd .mem_job span{font-weight: bold;} .memberBd .mem_txt p{font-size: 14px; margin: 0 0 30px 0} /*---------- history ---------*/ #history .subnav2{height: 110px} #history .subnav2 ul{position: absolute; top: 0; width: 100%; z-index: 99} #history .subnav2 ul li{float: left; width: 16.6%;} #history .subnav2 ul li:nth-of-type(n+3){float: left; width: 16.7%;} #history .subnav2 ul li a{display: block; height: 50px; line-height: 50px; background: #0085eb; text-align: center; color: #fff; font-size: 14px; -webkit-transition:background-position 20s linear,background-color 0.2s linear; transition:background-position 20s linear,background-color 0.2s linear;} #history .subnav2 ul li a span{padding: 0 25px 0 0;background: url(../img/sp/pointer_under.png) no-repeat right center;} #history .history_contents .box .year_contents h2{font-family:'Roboto', sans-serif; font-size: 30px; letter-spacing: 2px; font-weight: bold; color: #0085eb; line-height: 1; } #history .history_contents .box .year_contents .border{width: 20px; margin: 20px 0px 50px 0px} #history .history_contents .box .info{font-size:12px; margin-bottom:42px;} #history .history_contents .box .info .media{box-sizing:border-box;width:78px;height:20px;background-color:#0085EB;margin:0px 15px 0px 30px;color:#FFF;padding:1px 17px;text-align:center;line-height:20px;} #history .history_contents .box .info .message{box-sizing:border-box;width:78px;height:20px;background-color:#444444;margin:0px 15px 0px 30px;color:#FFF;padding:1px 11px;text-align:center;line-height:20px;} #history .history_contents .borderL{height: 45px; width: 100%; background: url(../img/sp/boder.jpg) center center; display: block; margin:36px 0px;} #back-top { position: fixed; bottom: 20px; right: -5px; } #back-top a { width: 60px; height: 60px; display: block; padding-top: 5px; background: #000000; /* IE用 */ background: -moz-linear-gradient(top, #333, #666 50%,#333 51%, #000);/* Firefox用 */ background: -webkit-gradient(linear, left top, left bottom, from(#333), color-stop(0.5, #666), color-stop(0.51, #333), to(#000));/* Safari,Google Chrome用 */ background: -o-linear-gradient(top, #333, #666 50%,#333 51%, #000); background: linear-gradient(top, #333, #666 50%,#333 51%, #000); color: #FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 1.2; text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } #mid .flow{padding: 80px 0px 40px} #mid .flow ol li:first-child{margin: 0} #mid .flow ol li{float: left; text-align: center; line-height: 62px; font-weight: bold; font-size: 13px; color: #0085eb; margin: 0 0 0 30px} #mid .flow ol li.bk_step_form_on{color:#fff;} /*---------- interview ----------*/ #interview .memberBd .mem_job {font-size: 20px} #interview .memberBd{width: 100%; height: auto; overflow: visible;} #interview .memberBd:nth-child(2n){background: #fbfbfb} #interview .memberBd .memberL,#interview .memberBd .memberR{width: 50%; float: left; position: relative; height: auto} #interview .memberBd .bkst{height:430px; position: relative !important; left:20px;} #interview .memberBd .mem_txt img{margin: 0 0 20px 0; max-width: 100%} #interview .memberBd .mem_txt p{font-size: 12px; line-height: 1.8; margin: 0 0 1em 0} #interview .memberBd .mem_txt h4{margin: 1.5em 0; color: #1196ed; font-size: 16px; line-height: 1.6;} #interview .memberBd .profile{padding: 30px; margin: 50px 0; border: 1px solid #ccc; } #interview .memberBd .profile p:first-child{font-size: 15px;} #interview .memberBd .profile p{font-size: 11px} #interview .memberBd .memberL ul{padding: 30px 20px 0 0} #interview .memberBd .memberR ul{padding: 0px 0 0 20px} #interview .memberBd .mem_btn a{margin: 0} .othermember {margin: 40px 0 0 0} .othermember ol li:first-child{margin: 0} .othermember ol li{float: left; margin: 0 0 0 20px; text-align: center;} .othermember ol li p.name{font-family:'Roboto', sans-serif; color: #1196ed} .othermember ol li p.jp{font-size: 11px} .othermember ol li a{margin: 10px 0;display: block;font-family:'Roboto', sans-serif;font-size: 11px;font-weight: bold;color: #1196ed;line-height: 26px;height: 25px;border: 2px solid #1196ed;background-image: url(../img/sp/pointer_rightbottom.png);background-position: 130px 10px;background-repeat: no-repeat;} .othermember ol li a:hover{background-position: 135px 15px;} #interview_msg .box{width: 1050px} #interview_msg ul li{float: left; width: 320px; margin: 60px 15px;} #interview_msg ul li p{color: #fff} #interview_msg ul li p.rb{font-size: 18px; margin: 0 0 20px 0;} /*---------- entry ----------*/ .bklb{background:#f7fafc; padding:10px 0; margin: 30px 0 0;} .formnote,#mfp_phase_confirm_inner h4{color: #0085EB; font-size:12px;font-weight:bold;} form {font-size:12px;font-weight:bold;} form .formtext {line-height: 38px; color:#8f8f8f;} form .mb10 {margin-bottom: 10px;} form .need {color:#d2005e;} form .detail .detailBd .formhead {width:80px; float:left; color: #0085EB; font-weight: bold; min-height:51px; padding-top:5px;} form .detail .detailBd .formdata {width:390px; float:right; margin-right:20px; margin-bottom:15px;} form .detail .detailBd .set .formhead {width:71px; color:#8f8f8f;} form .detail .detailBd .set .formdata {width:319px; margin-right:0;} form .bklb .detail .detailBd .formhead {width:122px;} form .bklb .detail .detailBd .formdata {width:320px;} form .detail_recruit .detail .detailBd .textareahead {margin-bottom:15px;} form input[type="text"], form input[type="email"], form textarea {border:2px solid #383838; font-size:12px; font-weight:bold; line-height:1.4; padding:7px 10px; } form .inputfull input {width:351px;} form .set .inputfull input {width:280px;} form .inputhalf {width:181px; margin-right:10px; display:inline-block; vertical-align: top;} form .inputhalf input {width:156px;} form .inputmini input {width: 90px;} form textarea {width:432px; height:180px; box-shadow: 0 5px 0 #000; line-height:1.6;} form .customSelect {font-size:12px; color:#000; line-height: 38px; height: 41px; width: 294px; padding: 0 0 0 10px; background:url(../img/form_select.png) no-repeat; } form .customSelect.customSelectDisabledOption {color:#8f8f8f;} form .radio label input[type='radio']{filter: alpha(opacity=0); -moz-opacity:0; opacity:0; position: absolute; } form .radio label{background:url(../img/form_radio.png) no-repeat left bottom; height: 17px; line-height: 20px; padding: 0 0 0 20px; overflow: hidden; margin: 5px 10px 0 0;display: inline-block; color:#8f8f8f;} form .radio label.mfp_checked{background-position:left top;} form .form_btn, .mfp_buttons{text-align: center;} form .form_btn button.btn{border:none; display: inline-block; margin:30px 7px 50px; cursor:pointer;} .mfp_buttons button{border:none; display: inline-block; margin:30px 7px 50px; text-align: center; background-color: #1196ED; background-position: 0 0; color: #FFF; font-size: 14px; font-weight:bold; letter-spacing: 1px; padding: 1em 0; border-radius: 5px; box-shadow: 0 4px 0 0 #1E7AB5; text-shadow: 0 1px 0px #1E7AB5; -webkit-transition: background-position 20s linear,box-shadow 0.3s ease,text-shadow 0.3s ease,margin 0.3s ease; transition: background-position 20s linear,box-shadow 0.3s ease,text-shadow 0.3s ease,margin 0.3s ease; width:400px; cursor:pointer;} .mfp_buttons button:hover{background-image: url(../img/bk_btn.png); background-color: #1196ed; background-repeat: repeat; background-position: 0 1000px;box-shadow: 0 0 0 0 #1e7ab5; text-shadow:0 0 0 #1e7ab5; } form .form_btn button[type="reset"], #mfp_button_cancel{background:#adadad; box-shadow:0 4px 0 0 #919191; text-shadow:0 1px 0px #919191; width:148px;} form .form_btn button[type="reset"]:hover, #mfp_button_cancel:hover{box-shadow:0 0 0 0 #919191; text-shadow:0 0 0 #919191;} #mfp_hidden {overflow: hidden; width: 1px; height: 1px; padding: 0px; margin: 0px; } #mfp_hidden input {margin: 10px; } .confirm {border-spacing: 0px; border-collapse: collapse;} .confirm tr th, .confirm tr td {text-align: left; font-size: 12px; vertical-align: top; line-height: 2; } .confirm tr th {width:120px; color: #0085EB; font-weight: bold; } .confirm tr td {color: #525252; letter-spacing: 1px; word-break: break-all; padding: 0 0px 15px 0; } #mfp_phase_confirm {clear: both; display: none; } .mfp_err {display: none; margin: 5px 0px 0px 0px; padding: 3px 0px 5px 0; color: #d2005e; } .problem {border-color: #d2005e!important; } .svg #load_svg{display: block;} .svg #load_gif{display: none;} .no-svg #load_svg{display: none;} .no-svg #load_gif{display: block; margin: 20px} .service{margin: 0 0 100px 0;} .service p{font-size: 14px; color:#525252; width: 980px; margin-left: 15px;} .service img{margin: 30px 0; display: block;} .service .btn{width: 400px; position: absolute; left: 330px; margin-bottom: 100px;} /*---------- media ----------*/ /* 一旦、メディアクエリ邪魔なので、1340→2000に変更 */ @media screen and (max-width:2000px){ .titles_designer, .titles_enginner, .titles_marketer, .titles_office{background: none; width: 100%} #indexrecruit .boxesL h2{text-indent: 0;font-family:'Roboto', sans-serif;font-weight: bold;color: #fff;letter-spacing: 2px;font-size: 24px} } @media screen and (max-width:1024px){ #ftcontent .box, #interview_msg .box, #philosophy .box{width: 100%} .box{width: 96%;} #ftcontent .ftcontents ,#interview_msg ul li{width: 31%;margin: 160px 1%;vertical-align: top;} #nav li a {padding: 0 12px;} #recruit .flow ol li {margin:0;} .detail_recruit .detail .detailBd {width: 48%;} } /*---------- factory ----------*/ .factory_message{ background: #fff url(../img/bg_shirt.png) no-repeat center; max-height: none; max-width: none; width: 100%; height:420px; margin: 0 auto; padding: 0px; overflow: hidden; text-align: center; } .factory_message h4{ color: #0082e9; font-size: 50px; margin:40px 0 20px; } .factory_message .line, .factory_information .line{ width: 100px; border-bottom: 1px solid #0082e9; margin:0 auto 20px; } .factory_message p{ font-size: 14px; line-height: 30px; } .factory_information{ text-align: center; } .factory_information h4{ color: #0082e9; font-size: 50px; margin:80px 0 20px; } .factory_information p{ font-size: 14px; line-height: 30px; } .factory_information .factory_detail{ border: 2px solid #0082e9; margin: 0 auto; padding:10px 40px 40px 40px; text-align: left; line-height: 1.6; color: #525252; width: 80%; } .factory_information .factory_detail .title{ color: #525252; font-size: 30px; padding:20px 0 10px 0; } .factory_information .factory_detail ul { margin-left: 50px; } .factory_information .factory_detail ul li{ position: relative; padding: 0 0 0 2em; } .factory_information .factory_detail ul li:before { content: ""; position: absolute; background: #0082e9; top: 50%; left: 0.5em; margin-top :-10px; height: 15px; width: 15px; } .factory_information .factory_detail .youkou{ border: 2px solid #0082e9; border-radius: 3px; font-weight: bold; padding: 10px; width: 150px; margin-left:60px; margin-right: 5px; line-height: 3.6; color: #0082e9; } .factory_information .contact{ width: 400px; border: 2px solid #0082e9; text-align: center; margin: 0 auto; padding: 20px 30px; border-radius: 10px; background-color: #ACD1E8; } .bg_lilaqua{ background-color: #e2f2fc; } .bg_aqua{ background-color: #d0eafa; } .bg_blue{ background-color: #b9dbf8; } .bg_lilnavy{ background-color: #4aa6ef; } .bg_liblue{ background-color: #CBE1EE; } .bg_navy{ background-color: #0082e9; } .factory_list{ margin: 0 auto; text-align: center; } .factory_list td{ padding: 20px 40px; } .factory_list td:first-child { color: #fff; } .f_flow{ background: url(../img/img_flow_factory.png) no-repeat ; background-position: 150px; text-align: left; height: 930px; } .f_flow p{ margin-left:390px; margin-bottom: 30px; } .f_interview{ text-align: left; margin-left: 120px; } .f_interview .sub-title{ color:#0080D8; font-size: 24px; padding: 20px 0; } .f_interview .strong{ font-weight: bold; padding: 20px 0 10px; } #factory {margin-top: 30px;} #factory .subnav{height: 80px} #factory .subnav ul{display:table; position: absolute; top: 0; width: 100%; z-index: 99} #factory .subnav ul li{display:table-cell;} #factory .subnav ul li a{display: block; height: 50px; line-height: 50px; background: #0085eb; text-align: center; color: #fff; font-size: 14px; -webkit-transition:background-position 20s linear,background-color 0.2s linear; transition:background-position 20s linear,background-color 0.2s linear;} #factory .subnav ul li a span{padding: 0 25px 0 0;background: url(../img/sp/pointer_under.png) no-repeat right center;} .fac{background: url(../img/head_factory.png) center no-repeat; background-size: cover;} /* clearfix */ .clearfix { min-height: 1px; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; font-size:.01em; height:0; overflow:hidden; } /* news */ .news{ border-collapse: collapse; border-spacing: 0; color: #525252; font-size: 12px; line-height: 2em; letter-spacing: 1px; position: relative; } .news table th { width:100px; } /* new_top_201503*/ .ht{text-indent:-9999px;} .color_lenet{ color:#0080c9;} .color_hiroie{ color:#d69901;} .color_white{ color:#ffffff;} .news_area{background:#efefef;} .awards-type-small{font-size:14px; padding:20px 0;} .awards-type-small dl{display: table; width: 100%;} .awards-type-small dd{display: table-cell; vertical-align: middle;} .awards-type-large{border-top:10px solid #0080c9; border-bottom:10px solid #0080c9;background:url(/common/img/award.jpg) no-repeat top; width: 100%; height:480px; background-size:cover;} .awards-type-large p{text-align:center;} .awards-type-large span{font-size:16px; font-weight: bold; line-height:16px;} .awards-type-large dl{display: table; width: 100%; margin-top:50px;} .awards-type-large dd{display: table-cell;} .titles_WhoWeAre{background: url(/common/img/titles_WhoWeAre.png) no-repeat; width: 373px; height: 84px; margin:100px auto 0;} .titles_WhatWeDo{background: url(/common/img/titles_WhatWeDo.png) no-repeat; width: 374px; height: 84px; margin:100px auto 0;} .titles_WhatWeThink{background: url(/common/img/titles_WhatWeThink.png) no-repeat; width: 475px; height: 84px; margin:100px auto 0;} .titles_HowWeWork{background: url(/common/img/titles_HowWeWork.png) no-repeat; width: 430px; height: 84px; margin:100px auto 0;} .titles_border{display:block; content:""; background:#0080c9; height:2px; width:90px; margin:20px auto 30px;} #indexmission .bkimg{background:url(/common/img/wh_mission.jpg) no-repeat top; width:100%; height:425px; background-size:cover;} #indexmission dl{display: table; width: 100%; height:425px;} #indexmission dt, #indexmission dd{display: table-cell; font-size:14px;} #indexmission dt{ width:40%;} #indexmission dd{ width:60%; padding-top:100px} .vision_disc{text-align:center; margin:0 auto 60px; font-size:18px;} .outcome dl{display:table; width: 100%;} .outcome dt{display:table-cell; width:55%;} .outcome dd{display:table-cell; width:45%;} .outcome__lenet{ background: url(/common/img/air_lenet.png) no-repeat top; background-size:contain; height:360px; margin-bottom:50px;} .outcome__hiroie{ background: url(/common/img/air_hiroie.png) no-repeat top;background-size:contain; height:360px;} .solution { background:#0080c9;} .solution dl{ display:table; width: 100%; height:350px;} .solution dd{ display:table-cell;} .solution .solution__disc{ width: 50%; color:#fff; padding: 50px;} .solution .solution__disc__boxR{ float:right; width:80%;} .solution .solution__disc__boxL{ float:left;} .solution .solution__disc h4{ font-size:26px; margin-bottom:20px;} .solution .solution__disc:after{ content:""; width: 16px; height: 16px; transform:rotate(45deg); background:#0080c9; } .solution .solution__world{ background: url(/common/img/solution_world.jpg) no-repeat center; background-size:cover; width: 50%;} .solution .solution__customer{ background: url(/common/img/solution_customer.jpg) no-repeat center; background-size:cover; width: 50%;} .solution .solution__quality{ background: url(/common/img/solution_quality.jpg) no-repeat center; background-size:cover; width: 50%;} .system dl.system-type-three{display:table; width: 100%;} .system dl.system-type-two{display:table; width: 66%; margin:0 auto;} .system dd{display:table-cell;} .system__01, .system__02, .system__03, .system__04, .system__05{position:relative;} .system__image01, .system__image02, .system__image03, .system__image04, .system__image05{width:320px; height:320px;} .system__image01{background: url(/common/img/system_image01.png) no-repeat;} .system__image02{background: url(/common/img/system_image02.png) no-repeat;} .system__image03{background: url(/common/img/system_image03.png) no-repeat;} .system__image04{background: url(/common/img/system_image04.png) no-repeat;} .system__image05{background: url(/common/img/system_image05.png) no-repeat;} .system__overlay{opacity:0; position:absolute; top:0; width: 320px; height: 320px; text-align:center; background: rgba(0, 133, 235, 0.8); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;} .system__overlay:hover{opacity:1;} .system__text{ padding:50px;} .system__text__title{color:#fff; font-size:22px; border-bottom:2px solid white; padding-bottom:15px;} .system__text h4{margin-bottom:25px;} .system__text p{font-size:14px;}