@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-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; } 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 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; } body{ color: #000; font-family: "Noto","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%; } img{ height: auto; max-width: 100%; } @media screen and (max-width: 768px) { .hidden-sp{ display: none !important; } } @media screen and (min-width: 769px) { .hidden-pc{ display: none !important; } } /*@font-face { font-family: Noto; src: url('../fonts/NotoSansJP-Medium.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; } /*------------------------------------------ cmn ------------------------------------------*/ img{ vertical-align: top; } h2{ } .hoverBtn{ -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .hoverBtn:hover{ } @media screen and (max-width: 768px) { img{ width: 100%; } } /*------------------------------------------ menu ------------------------------------------*/ @media screen and (max-width: 768px) { } /*------------------------------------------ header ------------------------------------------*/ header, header *{ line-height: 1.5 !important; box-sizing: border-box !important; } header{ } @media screen and (max-width: 768px) { } /*------------------------------------------ nav ------------------------------------------*/ @media screen and (min-width: 769px) { nav{ width: 100%; background: #eeece1; } nav .boxLR{ width: 980px; margin: 0 auto; display: block !important; position: relative; } nav .boxLR .boxR > ul > li{ width: 326px; float: left; text-align: center; border-right: 1px solid #FFF; position: relative; &:first-child{ border-left: 1px solid #FFF; } > dl{ width: 100%; border: 5px solid #eeece1; background: #eeece1; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; > dt{ padding: 20px 0; font-size: 20px; font-weight: bold; color: #333; cursor: pointer; background: url("../img/arrow_down.png") no-repeat center bottom 10px / 20px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; &:hover{ opacity: 0.8; background: url("../img/arrow_down.png") no-repeat center bottom 5px / 20px; } span{ position: relative; &:before{ content: ""; width: 21px; height: 15px; background: url("../img/nav_menu.png") no-repeat center / 21px; display: inline-block; position: absolute; left: -30px; top: 3px; } } } > dd{ padding: 10px 10px 20px 10px; display: none; ul{ li{ a{ padding: 20px 0 20px 75px; font-size: 20px; color: #333333; text-align: left; border-bottom: 1px solid #e1e1e1; display: block; text-decoration: none; } &:last-child a{ border-bottom: none; } &:nth-child(1){ a{ background: url("../img/icon_nav_01.png") no-repeat left 10px center / 59px; } } &:nth-child(2){ a{ background: url("../img/icon_nav_02.png") no-repeat left 10px center / 59px; } } &:nth-child(3){ a{ background: url("../img/icon_nav_03.png") no-repeat left 10px center / 59px; } } } } } &.active{ background: #FFF; border: 5px solid #6a9a2d; position: absolute; > dt{ background: url("../img/arrow_up.png") no-repeat center bottom 10px / 20px; } } } > a{ padding: 25px 0; display: block; text-decoration: none; font-size: 20px; font-weight: bold; color: #333; background: url("../img/arrow_down.png") no-repeat center bottom 10px / 20px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; &:hover{ opacity: 0.8; background: url("../img/arrow_down.png") no-repeat center bottom 5px / 20px; } } } } @media screen and (max-width: 768px) { nav{ width: 100%; padding: 0; position: fixed; z-index: 10000; background: #FFF; top: 0; .btnList{ display: block; width: 100%; right: inherit; top: inherit; ul{ position: inherit; } li{ float: inherit; margin-right: 5px; &:last-child{ margin-right: 0; } a{ width: inherit; height: inherit; background: none; color: #FFF; text-decoration: none; font-size: 12px; font-weight: bold; display: block; span{ display: inherit; text-align: center; vertical-align: inherit; } } } } } nav .boxLR{ width: 100%; margin: 0 auto; box-shadow: 0 0 5px rgba(0,0,0,0.2); } nav .boxLR .boxL{ padding: 10px 5% 10px 5%; float: left; } nav .boxLR .boxL img{ width: 100px; position: relative; z-index: 2; } nav .menuBtn{ width: 30px; float: inherit; position: fixed; right: 5%; top: 16px; } nav .menuBtn img.close{ display: none; } nav .menuBtn.active img.open{ display: none; } nav .menuBtn.active img.close{ display: inline-block; } nav .boxLR .boxR{ width: 100%; padding: 30px 0 0 0; display: none; background: rgba(106,154,45,0.9); position: absolute; left: 0; top: 59px; z-index: 10; } nav .boxLR .boxR ul li{ height: inherit; float: inherit; margin: 0 0 30px 0; text-align: center; display: block; } nav .boxLR .boxR ul li img{ width: 60px; } nav .boxLR .boxR ul li span{ display: block; } nav .boxLR .boxR ul li:last-child{ margin-right: 0; } nav .boxLR .boxR ul li a{ text-decoration: none; font-size: 12px; font-weight: bold; color: #FFF; display: block; } nav .boxLR .boxR ul li a:hover{ text-decoration: underline; } } /*------------------------------------------ footer ------------------------------------------*/ footer{ padding: 35px 0; background: #6a9a2d; box-sizing: border-box !important; } footer *{ line-height: 1.5 !important; font-family: sans-serif !important; box-sizing: border-box !important; letter-spacing: 1px !important; } footer .innerBox{ width: 980px; margin: 0 auto; text-align: center; } footer #links{ float: right; font-size: 12px; color: #FFF } footer #links *{ color: #FFF; text-decoration: none; font-size: 12px; } footer #links a:hover{ text-decoration: underline; } footer #copy{ float: left; } footer #copy small{ font-size: 12px; color: #FFF; } @media screen and (max-width: 768px) { footer{ width: 100%; padding: 5%; margin: 0 auto; text-align: center; } footer .innerBox{ width: 100%; } footer #links{ float: inherit; padding-bottom: 1%; } footer #links, footer #links *{ font-size: 12px; } footer #copy{ float: inherit; font-size: 12px; } footer #copy small{ font-size: 12px; } } /*------------------------------------------ mv ------------------------------------------*/ #mv{ height: 640px; background: url("../img/mv_bg.jpg") no-repeat center / cover; position: relative; .imgBox{ width: 980px; height: 640px; padding: 110px 0 0 35px; margin: 0 auto; } h1{ text-indent: -9999px; width: 278px; height: 327px; background: url("../img/logo.png") no-repeat center / 278px; position: absolute; left: 60%; top: 50%; margin: -160px 0 0 -50px; } } .slick-arrow{ width: 64px; height: 64px; border-radius: 32px; z-index: 2; text-indent: -9999px; box-shadow: 10px 10px 20px rgba(0,0,0,0.15); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .slick-arrow:hover{ opacity: 0.8; } .slick-prev,.slick-prev:hover{ background: #6a9a2d url(../img/arrow_l.png) no-repeat center / 12px; left: 50%; margin-left: -520px; } .slick-next,.slick-next:hover{ background: #6a9a2d url(../img/arrow_w.png) no-repeat center / 12px; right: 50%; margin-right: -520px; } @media screen and (max-width: 768px) { #mv{ height: auto; background: url("../img/mv_bg.jpg") no-repeat center / cover; position: relative; .imgBox{ width: 100%; height: auto; padding: 100px 0 30px 0; margin: 0 auto; } h1{ width: 100px; height: 119px; background: url("../img/logo.png") no-repeat center / 100px; position: absolute; left: inherit; top: inherit; right: 5%; bottom: 5%; margin: 0; } } .slick-arrow{ width: 30px; height: 30px; border-radius: 32px; z-index: 2; text-indent: -9999px; box-shadow: 10px 10px 20px rgba(0,0,0,0.15); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .slick-arrow:hover{ opacity: 0.8; } .slick-prev,.slick-prev:hover{ background: #6a9a2d url(../img/arrow_l.png) no-repeat center / 6px; left: 2%; margin-left: 0; } .slick-next,.slick-next:hover{ background: #6a9a2d url(../img/arrow_w.png) no-repeat center / 6px; right: 2%; margin-right: 0; } } /*------------------------------------------ #links_01 ------------------------------------------*/ .sttl{ text-align: center; .imgBox{ margin-bottom: 20px; display: block; } .txtBox{ font-size: 26px; font-weight: normal; color: #333; letter-spacing: 0.1em; position: relative; span{ position: relative; z-index: 2; } &:after{ content: ""; display: block; width: 240px; height: 8px; background: #ffbe20; position: absolute; bottom: -1px; left: 50%; margin-left: -120px; z-index: 1; } } } .contents_bg_01{ padding: 130px 0 0 0; background: url("../img/bg_job_01.png") no-repeat center top 70px / 1450px; > .ttlBox{ text-align: center; margin-bottom: 100px; } } #links_01{ width: 980px; padding: 45px 30px 30px 30px; margin: 0 auto 85px auto; background: #eeece1; border-radius: 11px; .sttl{ margin-top: -105px; margin-bottom: 30px; } ul{ li{ width: 32%; margin-right: 2%; float: left; text-align: center; &:last-child{ margin-right: 0; } .imgBox{ margin-bottom: 10px; } select{ width: 100%; height: 60px; padding-left: 115px; border: 1px solid 000; background: #FFF url("../img/arrow_down.png") no-repeat right 10px center / 24px; border-radius: 4px; font-size: 22px; color: #333; cursor: pointer; -webkit-appearance: none; appearance: none; &::-ms-expand{ display: none; } } } } } @media screen and (max-width: 768px) { .sttl{ .imgBox{ margin-bottom: 20px; display: block; } .txtBox{ font-size: 18px; &:after{ content: ""; display: block; width: 200px; height: 8px; background: #ffbe20; position: absolute; bottom: -1px; left: 50%; margin-left: -100px; z-index: 1; } } } .contents_bg_01{ padding: 50px 0 0 0; background: url("../img/bg_job_01.png") no-repeat right -300px top 70px / 1000px; > .ttlBox{ text-align: center; margin-bottom: 100px; img{ width: 250px; } } } #links_01{ width: 100%; padding: 45px 5% 30px 5%; margin: 0 auto 85px auto; background: #eeece1; border-radius: 11px; .sttl{ margin-top: -75px; margin-bottom: 30px; img{ width: 70px; } } ul{ li{ width: 100%; margin: 0 0 50px 0; float: inherit; &:last-child{ margin-right: 0; } .imgBox{ img{ width: 100px; } } select{ width: 100%; height: 60px; padding-left: 42%; border: 1px solid 000; background: #FFF url("../img/arrow_down.png") no-repeat right 10px center / 18px; border-radius: 4px; font-size: 18px; color: #333; cursor: pointer; -webkit-appearance: none; appearance: none; &::-ms-expand{ display: none; } } } } } } /*------------------------------------------ #links_02 ------------------------------------------*/ .contents_bg_02{ position: relative; &:after{ content: ""; width: 100%; height: 153px; background: url("../img/bg_job_03.png") no-repeat center top / 1540px; position: absolute; bottom: -122px; z-index: -1; } } #links_02{ width: 980px; margin: 0 auto 60px auto; padding: 0 20px 75px 20px; background: #eeece1; border-radius: 11px; position: relative; .sttl{ position: relative; top: -40px; margin-bottom: -20px; } .boxLR{ padding: 30px 40px; margin-bottom: 10px; background: #FFF url("../img/bg_job_02.png") no-repeat right 15px top 25px / 336px; &:last-child{ margin-bottom: 0; } .imgBox{ float: left; } .txtBox{ width: 510px; float: right; h3{ margin-bottom: 30px; font-size: 26px; font-weight: bold; color: #6a9a2d; } p{ margin-bottom: 30px; font-size: 14px; color: #4d4d4d; line-height: 1.8; } .btnBox{ a{ width: 440px; height: 60px; display: table; border-radius: 4px; background: #6a9a2d url("../img/arrow_w.png") no-repeat right 15px center / 12px; text-decoration: none; span{ display: table-cell; font-size: 20px; text-align: center; vertical-align: middle; color: #FFF; } &:hover{ background: #6a9a2d url("../img/arrow_w.png") no-repeat right 10px center / 12px; } } } } } .sushiset{ position: absolute; right: 40px; bottom: -24px; } } @media screen and (max-width: 768px) { .contents_bg_02{ &:after{ content: ""; width: 100%; height: 153px; background: url("../img/bg_job_03.png") no-repeat center top / 1540px; position: absolute; bottom: -122px; z-index: -1; } } #links_02{ width: 100%; margin: 0 auto 100px auto; padding: 0 20px 40px 20px; background: #eeece1; border-radius: 11px; position: relative; .sttl{ position: relative; top: -25px; margin-bottom: 0px; img{ width: 90px; } } .boxLR{ padding: 50px 5%; margin-bottom: 10px; background: #FFF url("../img/bg_job_02.png") no-repeat right 15px top 25px / 336px; &:last-child{ margin-bottom: 0; } .imgBox{ margin-bottom: 20px; float: inherit; text-align: center; img{ width: 200px; } } .txtBox{ width: 100%; float: inherit; h3{ margin-bottom: 20px; font-size: 18px; text-align: center; } p{ margin-bottom: 30px; font-size: 14px; color: #4d4d4d; line-height: 1.8; } .btnBox{ a{ width: 100%; background: #6a9a2d url("../img/arrow_w.png") no-repeat right 15px center / 8px; span{ font-size: 16px; } &:hover{ background: #6a9a2d url("../img/arrow_w.png") no-repeat right 10px center / 8px; } } } } } .sushiset{ width: 70%; position: absolute; right: 5%; bottom: -24px; } } } /*------------------------------------------ #links_03 ------------------------------------------*/ .contents_bg_03{ } #links_03{ width: 980px; margin: 0 auto 60px auto; padding: 40px 40px 75px 40px; background: #eeece1; border-radius: 11px; position: relative; .sttl{ margin-bottom: 45px; .txtBox{ &:before{ content: ""; width: 65px; height: 111px; background: url("../img/icon_ttl_03_l.png") no-repeat center bottom / 65px; position: absolute; left: -75px; bottom: -4px; } span:after{ content: ""; width: 59px; height: 111px; background: url("../img/icon_ttl_03_r.png") no-repeat center bottom / 59px; position: absolute; right: -72px; bottom: -4px; } } } ul{ margin-bottom: 40px; li{ float: left; &:nth-child(even){ float: right; } a{ width: 440px; height: 60px; background: #FFF url("../img/arrow_b.png") no-repeat right 15px center / 12px; text-decoration: none; border: 1px solid #000; border-radius: 4px; display: table; &:hover{ background: #FFF url("../img/arrow_b.png") no-repeat right 10px center / 12px; } span{ display: table-cell; text-align: center; vertical-align: middle; font-size: 22px; color: #333; } } } } .btnBox{ a{ width: 440px; height: 80px; margin: 0 auto; background: #6a9a2d url("../img/arrow_w.png") no-repeat right 15px center / 12px; text-decoration: none; border-radius: 4px; display: table; &:hover{ background: #6a9a2d url("../img/arrow_w.png") no-repeat right 10px center / 12px; } span{ display: table-cell; text-align: center; vertical-align: middle; font-size: 24px; color: #FFF; } } } } @media screen and (max-width: 768px) { #links_03{ width: 100%; margin: 0 auto 40px auto; padding: 40px 5% 40px 5%; background: #eeece1; border-radius: 11px; position: relative; .sttl{ margin-bottom: 45px; .txtBox{ &:before{ content: ""; width: 40px; height: 111px; background: url("../img/icon_ttl_03_l.png") no-repeat center bottom / 40px; position: absolute; left: -75px; bottom: -4px; } span:after{ content: ""; width: 40px; height: 111px; background: url("../img/icon_ttl_03_r.png") no-repeat center bottom / 37px; position: absolute; right: -72px; bottom: -4px; } } } ul{ margin-bottom: 40px; li{ float: inherit; margin-bottom: 20px; &:nth-child(even){ float: inherit; margin-bottom: 0; } a{ width: 100%; height: 60px; background: #FFF url("../img/arrow_b.png") no-repeat right 15px center / 12px; text-decoration: none; border: 1px solid #000; border-radius: 4px; display: table; &:hover{ background: #FFF url("../img/arrow_b.png") no-repeat right 10px center / 12px; } span{ display: table-cell; text-align: center; vertical-align: middle; font-size: 18px; color: #333; } } } } .btnBox{ a{ width: 100%; height: 60px; margin: 0 auto; background: #6a9a2d url("../img/arrow_w.png") no-repeat right 15px center / 12px; text-decoration: none; border-radius: 4px; display: table; &:hover{ background: #6a9a2d url("../img/arrow_w.png") no-repeat right 10px center / 12px; } span{ display: table-cell; text-align: center; vertical-align: middle; font-size: 20px; color: #FFF; } } } } } /*------------------------------------------ #links_04 ------------------------------------------*/ .contents_bg_04{ padding: 90px 0; background: #eeece1; } #links_04{ .ttlBox{ margin-bottom: 55px; text-align: center; } .txtBox{ width: 600px; padding: 70px 50px; background: rgba(255,255,255,0.8); border-radius: 10px; position: relative; dl{ dt{ padding-left: 30px; margin-bottom: 15px; position: relative; font-size: 22px; font-weight: bold; color: #6a9a2d; &:before{ content: ""; width: 22px; height: 22px; position: absolute; left: 0; top: 5px; display: block; background: url("../img/icon_q.png") no-repeat center / 22px; } } dd{ padding-left: 30px; margin-bottom: 30px; font-size: 14px; line-height: 1.8; color: #333; &:last-child{ margin-bottom: 0; } } } } .box_01{ min-height: 746px; margin-bottom: 70px; background: url("../img/img_voice_01.png") no-repeat center top / 1310px; h3{ text-align: right; margin-bottom: 30px; } .txtBox{ float: right; right: -20px; } } .box_02{ min-height: 746px; background: url("../img/img_voice_02.png") no-repeat center top / 1310px; position: relative; &:before{ content: ""; width: 100%; height: 153px; background: url("../img/bg_voice_01.png") no-repeat center top / 1260px; position: absolute; top: -90px; } h3{ margin-bottom: 30px; position: relative; z-index: 2; } .txtBox{ left: -20px; } } .innerBox{ width: 980px; margin: 0 auto; } } @media screen and (max-width: 768px) { .contents_bg_04{ padding: 60px 0; } #links_04{ padding: 0 5%; .ttlBox{ margin-bottom: 30px; img{ width: 250px; } } .imgBox{ margin-bottom: 10px; } .txtBox{ width: 100%; padding: 40px 5%; background: rgba(255,255,255,0.8); border-radius: 10px; position: relative; dl{ dt{ padding-left: 30px; margin-bottom: 15px; position: relative; font-size: 18px; font-weight: bold; color: #6a9a2d; &:before{ content: ""; width: 22px; height: 22px; position: absolute; left: 0; top: 5px; display: block; background: url("../img/icon_q.png") no-repeat center / 22px; } } dd{ padding-left: 30px; margin-bottom: 30px; font-size: 14px; line-height: 1.8; color: #333; &:last-child{ margin-bottom: 0; } } } } .box_01{ min-height: inherit; margin-bottom: 60px; background: none; h3{ text-align: center; margin-bottom: 30px; img{ width: 150px; } } .txtBox{ float: inherit; right: inherit; } } .box_02{ min-height: inherit; background: none; position: relative; &:before{ content: ""; width: 100%; height: 153px; background: url("../img/bg_voice_01.png") no-repeat center top / 1260px; position: absolute; top: -90px; } h3{ margin-bottom: 30px; position: relative; z-index: 2; text-align: center; img{ width: 150px; } } .txtBox{ left: inherit; } } .innerBox{ width: 100%; margin: 0 auto; } } } /*------------------------------------------ #links_05 ------------------------------------------*/ .contents_bg_05{ padding: 90px 0 0 0; background: url("../img/bg_welfare.png") no-repeat center top 90px / 1350px; } #links_05{ .ttlBox{ text-align: center; margin-bottom: 60px; } ul{ width: 980px; margin: 0 auto 100px auto; li{ width: 239px; padding: 30px 0; margin-right: 8px; float: left; background: #eeece1; &:last-child{ margin-right: 0; } .imgBox{ margin-bottom: 25px; text-align: center; } dt{ margin-bottom: 20px; font-size: 18px; font-weight: bold; color: #333; text-align: center; } dd{ padding: 0 20px; font-size: 14px; line-height: 1.8; .sTxt{ font-size: 12px; } } } } } @media screen and (max-width: 768px) { .contents_bg_05{ padding: 60px 0 0 0; background: url("../img/bg_welfare.png") no-repeat center top 90px / 1350px; } #links_05{ .ttlBox{ text-align: center; margin-bottom: 60px; img{ width: 250px; } } ul{ width: 100%; margin: 0 auto 60px auto; padding: 0 5%; li{ width: 100%; padding: 30px 0; margin: 0 0 5% 0; float: inherit; background: #eeece1; &:last-child{ margin-right: 0; } .imgBox{ margin-bottom: 25px; text-align: center; img{ width: 100px; } } dt{ margin-bottom: 20px; font-size: 18px; font-weight: bold; color: #333; text-align: center; } dd{ padding: 0 20px; font-size: 14px; line-height: 1.8; .sTxt{ font-size: 12px; } } } } } } /* ------------------------------ トップへ戻る ------------------------------ */ #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; } }