@charset "UTF-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; box-sizing:border-box; } html { line-height: 1; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } .clear{ clear:both; } em.red{ color:#d4145a; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a { color: inherit; text-decoration: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { height: auto; max-width: 100%; vertical-align: bottom; } /*------------------------------------------ font ------------------------------------------*/ /*@font-face { font-family: NotoSerif; src: url('../fonts/NotoSerifJP-Medium.otf'); } @font-face { font-family: Noto; src: url('../fonts/NotoSansJP-Light.otf'); }*/ /*------------------------------------------ サービス別レスポンシブ ------------------------------------------*/ /*youtube*/ .youtubeWrapper{ position: relative; width: 100%; padding-top: 56.25%; } .youtubeWrapper iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /*googlemap*/ .ggmapWrapper{ position: relative; /*padding-bottom: 56.25%;*/ height: 390px; overflow: hidden; } .ggmapWrapper iframe, .ggmapWrapper object, .ggmapWrapper embed{ position: absolute; top: -200px; left: 0; width: 100%; height: 600px; } .ggmapWrapper iframe{ height: 800px; width: 100%; } @media screen and (max-width: 768px) { .ggmapWrapper iframe{ width: 100%; } } /*------------------------------------------ body / 共通 ------------------------------------------*/ body { color: #000; font-size: 14px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", "sans-serif"; line-height: 1.5; letter-spacing: 1px; -webkit-text-size-adjust: 100%; min-width: 1000px; } @media screen and (max-width: 768px) { body { min-width: 100%; } .hidden-sp { display: none; } } @media screen and (min-width: 769px) { .hidden-pc { display: none !important; } } @media screen and (max-width: 768px) { } /*/////////////////////cmn/////////////////////*/ .body * { line-height: 1.5; } img { vertical-align: top; } .hoverBtn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .hoverBtn:hover { opacity: 0.8; } h2{ margin: 0 0 40px 0; text-align: center; } @media screen and (max-width: 768px) { h2{ margin: 0 0 10% 0; } } /*------------------------------------------ header ------------------------------------------*/ header{ .boxL{ float: left; padding: 40px 0 0 40px; } .boxR{ float: right; a{ width: 190px; height: 110px; display: table; background: #f4524d url(../img/arrow_01.png) no-repeat right 20px center / 8px; span{ display: table-cell; text-align: center; vertical-align: middle; font-size: 20px; font-weight: bold; color: #FFF; } } } } /* SP */ @media screen and (max-width: 768px) { .body{ padding: 40px 0 0 0; } nav{ width: 100%; min-height: 40px; padding: 9px; background: rgba(255,255,255,0.8); position: fixed; top: 0; z-index: 1000; .logoBox{ width: 225px; float: left; } .menuBtn{ text-align: right; .close{ display: none; } } .menuBtn.active{ .close{ display: inline-block; } .open{ display: none; } } ul{ display: none; padding: 20px 0; li{ width: 25%; padding: 5% 1%; float: left; img{ } &:last-child{ width: 100%; a{ height: 100%; padding: 5%; text-align: center; display: block; color: #FFF; background: #f4524d url(../img/arrow_01.png) no-repeat right 20px center / 8px; } } } } } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 20px 0; background: #595757; } footer .inner{ width: 980px; margin: 0 auto; text-align: center; } footer *{ line-height: 1.5 !important; font-family: sans-serif !important; box-sizing: border-box !important; } footer #links{ margin-bottom: 20px; } footer #links, footer #links *{ text-decoration: none; font-size: 12px; color: #FFF; } footer #links a:hover{ text-decoration: underline; } footer #copy{ } footer #copy small{ font-size: 10px; color: #FFF; } @media screen and (max-width: 768px) { footer{ width: 100%; padding: 0 5% 5% 5%; } footer .inner{ width: auto; padding: 0; } footer #links{ padding: 5% 0; margin: 0; float: inherit; text-align: center; } footer #links, footer #links *{ font-size: 11px; line-height: 1.5; } footer #copy{ float: inherit; text-align: center; } footer #copy small{ float: inherit; font-size: 10px; text-align: center; } footer #links a{ display: inline-block; } } /*/////////////////////一覧ボタン/////////////////////*/ /*.listBtn{ text-align: center; } .listBtn.top{ position: relative; } .listBtn.bottom{ padding: 80px 0; } .listBtn a{ width: 660px; height: 70px; margin: 0 auto; display: table; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .listBtn.bottom a{ } .listBtn a:hover{ opacity: 0.8; } .listBtn a > span{ padding: 3px; display: table-cell; font-size: 22px; vertical-align: middle; text-align: center; color: #FFF; } .listBtn a > span > span{ display: block; padding: 15px 0; border: 1px solid #FFF; } @media screen and (max-width: 768px) { .listBtn{ padding: 10% 5% 10% 5%; } .listBtn.top{ padding: 0; } .listBtn.bottom{ padding: 10% 5% 10% 5%; } .listBtn a{ width: 100%; height: 60px; } }*/ /*------------------------------------------ mv ------------------------------------------*/ .mvWrapper{ min-width: 980px; position: relative; h1{ position: absolute; text-indent: -9999px; width: 508px; height: 112px; background: url("../img/mv_txt.png") no-repeat center / 508px; bottom: 15%; left: 50%; margin-left: -254px; } } @media screen and (max-width: 768px) { .mvWrapper{ min-width: 100%; h1{ width: auto; height: auto; background: none; } } } /*------------------------------------------ nav ------------------------------------------*/ @media screen and (min-width: 769px) { nav{ padding: 55px 0 90px 0; ul{ display: table; margin: 0 auto; li{ padding: 0 10px; display: table-cell; } } } } /*------------------------------------------ links_01 ------------------------------------------*/ .contents_bg_01{ padding: 0 0 65px 0; } #links_01{ .selectBox{ text-align: center; } select{ -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; width: 580px; height: 80px; padding: 0 0 0 20px; border: 3px solid #2eafbf; font-size: 24px; color: #2eafbf; cursor: pointer; background: url("../img/pul.png") no-repeat right 20px center / 38px; } } @media screen and (max-width: 768px) { .contents_bg_01{ padding: 10% 5%; } #links_01{ .selectBox{ text-align: center; } select{ width: 100%; height: 60px; padding: 0 0 0 20px; font-size: 18px; background: url("../img/pul.png") no-repeat right 20px center / 30px; box-sizing: border-box; } } } /*------------------------------------------ links_02 ------------------------------------------*/ .contents_bg_02{ padding: 40px 0; background: #f2f9ef; } #links_02{ p{ width: 650px; margin: 0 auto; font-size: 18px; line-height: 1.8; } } @media screen and (max-width: 768px) { .contents_bg_02{ padding: 10% 0; } #links_02{ p{ width: 100%; padding: 0 5%; font-size: 14px; } } } /*------------------------------------------ links_03 ------------------------------------------*/ .contents_bg_03{ padding: 60px 0; } #links_03{ ul{ width: 980px; margin: 0 auto; li{ width: 460px; margin: 0 0 55px 0; float: left; &:nth-child(even){ float: right; } &:nth-last-child(1), &:nth-last-child(2){ margin-bottom: 0; } } .txtBox{ padding: 0 0 20px 0; position: relative; color: #FFF; .icon{ position: absolute; left: 50%; top: -50px; margin-left: -40px; } h3{ padding: 20px 0 10px 0; text-align: center; font-size: 28px; font-weight: bold; } p{ padding: 0 60px 10px 60px; font-size: 18px; line-height: 1.8; } } .btnBox{ a{ width: 420px; height: 60px; margin: 0 auto; display: table; border-radius: 6px; span{ display: table-cell; font-size: 23px; font-weight: bold; text-align: center; vertical-align: middle; } } } .pinkBox{ background: #f693a6; .btnBox{ a{ color: #f693a6; background: #FFF url("../img/arrow_02_01.png") no-repeat right 20px center / 8px; } } } .purpleBox{ background: #ac86c0; .btnBox{ a{ color: #ac86c0; background: #FFF url("../img/arrow_02_02.png") no-repeat right 20px center / 8px; } } } } } @media screen and (max-width: 768px) { .contents_bg_03{ padding: 10% 0 5% 0; } #links_03{ ul{ width: 100%; padding: 0 5%; li{ width: 100%; margin: 0 0 5% 0; float: inherit; &:nth-child(even){ float: inherit; } &:nth-last-child(1), &:nth-last-child(2){ margin-bottom: 5%; } } .imgBox{ text-align: center; img{ width: 100%; } } .txtBox{ padding: 0 0 20px 0; h3{ padding: 20px 0 10px 0; font-size: 16px; position: relative; z-index: 2; } p{ padding: 0 5% 10px 5%; font-size: 14px; } } .btnBox{ padding: 0 5%; a{ width: 100%; height: 50px; span{ font-size: 18px; } } } } } } /*------------------------------------------ links_04 ------------------------------------------*/ .contents_bg_04{ } #links_04{ .contents{ .boxLR{ width: 980px; margin: 0 auto; .imgBox{ float: left; img{ position: relative; left: -40px; } } .txtBox{ width: 480px; float: right; } dl{ dt{ padding: 14px 0 14px 60px; margin-bottom: 10px; font-size: 21px; font-weight: bold; color: #eb981a; background: url("../img/icon_interview_q.png") no-repeat left center / 54px; } dd{ padding-bottom: 20px; margin-bottom: 20px; font-size: 18px; line-height: 1.7; background: url("../img/dot.png") repeat-x left bottom / 5px; &:last-child{ background: none; } } } &:first-child{ padding-bottom: 20px; } &:last-child{ .imgBox{ float: right; img{ left: inherit; right: -40px; } } .txtBox{ float: left; } dl{ dt:first-child{ width: 550px; } dd:last-child{ padding-bottom: 0; margin-bottom: 0; } } } } } } @media screen and (max-width: 768px) { .contents_bg_04{ padding: 10% 0; } #links_04{ .contents{ .boxLR{ width: 100%; padding: 0 5%; .imgBox{ float: inherit; text-align: center; img{ position: relative; left: inherit; } } .txtBox{ width: 100%; float: inherit; } dl{ dt{ padding: 10px 0 10px 50px; font-size: 18px; background: url("../img/icon_interview_q.png") no-repeat left center / 35px; } dd{ font-size: 14px; line-height: 1.7; background: url("../img/dot.png") repeat-x left bottom / 5px; } } &:first-child{ padding-bottom: 20px; } &:last-child{ .imgBox{ float: inherit; img{ left: inherit; right: inherit; } } .txtBox{ float: inherit; } dl{ dt:first-child{ width: 100%; } } } } } } } /*------------------------------------------ links_05 ------------------------------------------*/ .contents_bg_05{ background: url("../img/bg_flow.png") repeat center / 8px; } #links_05{ padding: 40px 0; ul{ width: 980px; margin: 0 auto; li{ width: 210px; margin-right: 46px; float: left; &:last-child{ margin-right: 0; .imgBox:after{ content: none; } } .imgBox{ position: relative; &:after{ content: ""; width: 16px; height: 29px; background: url("../img/arrow_03.png") no-repeat center / 16px; display: block; position: absolute; bottom: 90px; right: -30px; } } p{ padding: 10px 10px 0 10px; font-size: 16px; } } } } @media screen and (max-width: 768px) { .contents_bg_05{ } #links_05{ padding: 10% 0; ul{ width: 100%; margin: 0 auto; li{ width: 50%; padding: 0 5%; margin-right: 0; float: left; &:last-child{ margin-right: 0; .imgBox:after{ content: none; } } &:nth-child(even){ float: right; } .imgBox{ text-align: center; img{ width: 100%; } &:after{ content: none; } } p{ padding: 10px 10px 5% 10px; font-size: 14px; } } } } } /*------------------------------------------ links_06 ------------------------------------------*/ .contents_bg_06{ } #links_06{ padding: 60px 0; .contents{ width: 980px; margin: 0 auto; dl{ dt{ padding: 20px 0 20px 45px; margin-bottom: 2px; font-size: 20px; font-weight: bold; color: #FFF; background: #ddc33d url("../img/icon_plus.png") no-repeat right 25px center / 24px; border-radius: 4px; cursor: pointer; } dd{ padding: 20px 70px; margin-bottom: 2px; font-size: 16px; line-height: 1.9; background: #eeeeef; border-radius: 4px; display: none; } } } } @media screen and (max-width: 768px) { .contents_bg_06{ } #links_06{ padding: 10% 0; .contents{ width: 100%; padding: 0 5%; dl{ dt{ padding: 20px 25px 20px 5%; font-size: 14px; background: #ddc33d url("../img/icon_plus.png") no-repeat right 10px center / 16px; } dd{ padding: 5%; font-size: 14px; } } } } } /*------------------------------------------ links_07 ------------------------------------------*/ .contents_bg_07{ } #links_07{ padding: 60px 0 0 0; .contents{ .boxLR{ width: 100%; display: table; .boxL{ width: 50%; padding: 70px 50px 70px 0; background: #a9927a; display: table-cell; .inner{ float: right; p{ margin-bottom: 40px; font-size: 16px; color: #FFF; &:last-child{ margin-bottom: 0; } strong{ font-size: 24px; font-weight: bold; } } } } .boxR{ width: 50%; display: table-cell; background: url("../img/img_company.jpg") no-repeat center / cover; } } } } @media screen and (max-width: 768px) { .contents_bg_07{ } #links_07{ padding: 10% 0 0 0; .contents{ .boxLR{ width: 100%; display: block; .boxL{ width: 100%; padding: 5%; display: block; .inner{ float: inherit; p{ margin-bottom: 10px; font-size: 14px; &:last-child{ margin-bottom: 0; } strong{ font-size: 16px; } } } } .boxR{ width: 100%; height: 200px; display: block; background: url("../img/img_company.jpg") no-repeat center / cover; } } } } } /* ------------------------------ トップへ戻る ------------------------------ */ #toTop{ position: fixed; right: 0; bottom: 0; display: none; z-index: 4; } #toTop a{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #toTop a:hover{ opacity: 0.8; } @media screen and (max-width: 768px) { #toTop img{ width: 40px; } }