@charset "UTF-8"; /* 設定読み込み */ @import url(../settings.less); /*================================================*/ .max_contents_container { .contents { padding: @cont-padding 0 0 0; } @media screen and ( max-width: @break-max-width ) { .contents { margin: 0 auto; padding: 30px 0 30px 0; } } } /* GNがプロモエリアより下の場合 */ .fixed_header .gnav_wrap { position: inherit; top: auto; } /* GNをHEADER下で固定 */ .gnav_wrap.fixed { position: fixed; top: 80px; } /* 初期値 */ .header_wrap { background: transparent; z-index: 100; position: relative; @media screen and ( max-width: @break-max-width ) { background: @header-bg-color; } } /* FIXED_HEADERの場合 */ .fixed_header .header_wrap { background: rgba(4,61,128,0.8); // 初期値を透明にする場合は0 transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; z-index: 100; position: fixed; @media screen and ( max-width: @break-max-width ) { background: @header-bg-color; } } .fixed_header .header_wrap.bg_normal { background: @header-bg-color; } /*================================================== $promo ==================================================*/ .promo_wrap.fixed { @media screen and ( max-width: @break-max-width ) { margin-top: 60px; width: 100%; } } .promo_wrap { width: 100%; height: 100vh; position: relative; background: #fafafa; background-size: cover; @media screen and ( max-width: @tb-width ) { // IPAD height: 800px; } @media screen and ( max-width: @break-max-width ) { margin-top: 60px; width: 100%; height: 300px; } /* cicle_slider */ .slider_content { width: 100%; height: 100vh; @media screen and ( max-width: @tb-width ) { // IPAD height: 800px; } @media screen and ( max-width: @break-max-width ) { width: 100%; height: 300px; } } } .promo_copy { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; color: #fff; @media screen and ( max-width: @break-max-width ) { width: 80%; img { width: 100%; } } .promo_catch { margin-bottom: 20px; font-size: 3.4rem; font-weight: bold; line-height: 1.4em; @media screen and ( max-width: @break-max-width ) { font-size: 2.0rem; } } p { line-height: 1.5em; @media screen and ( max-width: @break-max-width ) { padding: 0 20px; font-size: 1.2rem; } } } /* cycle plugin */ .slide_01 { background: url(../../_images/top/promo-01.jpg); background-size: cover; background-position: 50% 50%; } .slide_02 { background: url(../../_images/top/promo-02.jpg); background-size: cover; background-position: 50% 50%; } .slide_03 { background: url(../../_images/top/promo-03.jpg); background-size: cover; background-position: 50% 50%; } .slide_04 { background: url(../../_images/top/promo-04.jpg); background-size: cover; background-position: 50% 50%; } .promo_prev a { display: block; padding: 10px 20px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; font-size: 4.0rem; z-index: 10; @media screen and ( max-width: @break-max-width ) { font-size: 2.0rem; } i.fa { color: rgba(255,255,255,0.5); margin: 0; } } .promo_next a { display: block; padding: 10px 20px; position: absolute; margin: auto 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; font-size: 4.0rem; z-index: 10; @media screen and ( max-width: @break-max-width ) { font-size: 2.0rem; } i.fa { color: rgba(255,255,255,0.5); margin: 0; } } .promo_pager { width: 100%; position: absolute; bottom: 30px; text-align: center; z-index: 10; } .promo_pager a { display: inline-block; margin: 0 5px; width: 10px; height: 10px; text-indent: -999999px; font-size: 1px; overflow: hidden; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; background: rgba(0,0,0,0.3); } .promo_pager a.activeSlide { background: rgba(255,255,255,0.8); } /*================================================== $gnav ==================================================*/ .gnav_wrap { position: inherit; } /*================================================== $common ==================================================*/ .gbtn { @media screen and ( max-width: @break-max-width ) { padding: 0 15px; } a.button { padding: 15px 0; width: 300px; @media screen and ( max-width: @break-max-width ) { padding: 15px 0; width: 100%; } } } .contents_wrap { background-position: 50% 50%; background-size: cover; background-attachment: fixed; } /*================================================== $top_about ==================================================*/ #top_about { .box { padding: 0; } } /*================================================== $top_gallery ==================================================*/ #top_gallery { .clm3 { li { width: 313px; margin-right: 30px; @media screen and ( max-width: @break-max-width ) { margin: 0 10px; width: 100px; display: inline-block; } a { display: block; height: 313px; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; background-size: cover; background-position: center center; @media screen and ( max-width: @break-max-width ) { height: 100px; } &:hover { opacity: 0.75; filter: alpha(opacity=75); } } } } } #top_gallery { .box { @media screen and ( max-width: @break-max-width ) { padding: 0; } } .gallery_wrap { padding: 50px 0; background-image: url(../../_images/top/top-gallery-bg.jpg); background-size: cover; background-attachment: fixed; @media screen and ( max-width: @break-max-width ) { background-attachment: scroll; } .clm3 { margin: 0 auto; width: @cont-width; @media screen and ( max-width: @break-max-width ) { width: 100%; text-align: center; } } } } /*================================================== $top_recruit ==================================================*/ #top_recruit { .box { padding: 0; } .text_cont { width: 100%; } p.copy { margin-bottom: 20px; } p.recruit-button { padding: 100px 0; @media screen and ( max-width: @break-max-width ) { padding: 30px 0; } } } /*================================================== $top_company ==================================================*/ #top_company { padding-bottom: 100px; background: #fafafa; .table0 { margin: 0 auto; width: 80%; @media screen and ( max-width: @break-max-width ) { width: 100%; } th { width: 30%; text-align: right; background: none; @media screen and ( max-width: @break-max-width ) { width: 100%; text-align: left; border-bottom: 1px solid #ddd; } } td { width: 70%; } } } /*================================================== $top_map ==================================================*/ #top_map { .map_container { iframe { vertical-align: bottom; } } } /*================================================== [ utility ] $clearfix ==================================================*/ .clearfix:after { content:" "; display:block; clear:both; }