@charset "UTF-8"; /* Scss Document */ @import url(../css/common.css); @import url(../css/header.css); html { scroll-behavior: smooth; } .entry-btn-pc { width: 80px; position: fixed; display: block; background: #ffc431; border-radius: 10px 0 0 10px; z-index: 50; right: 0; top: 100px; text-align: center; padding: 5px; } .entry-btn-sp { width: 95%; margin: auto; position: fixed; padding: 5px 0; background: #ffc431; color: #fff; text-align: center; left: 0; right: 0; bottom: 3px; border: 5px solid #fff; border-radius: 30px; font-size: 14px; font-weight: bold; line-height: 1; z-index: 50; max-height: 50px; } .entry-btn-sp a { display: block; width: 100%; height: 100%; color: #fff; background: url(../img/entry_btn-sp.png) no-repeat 95% center; background-size: 10px; } .entry-btn-sp span { font-size: 10px; font-weight: normal; } #mainimage { background: url(../img/main-bg.jpg) no-repeat center top; background-size: 120%; color: #fff; padding: 2rem 0 6rem; position: relative; margin-bottom: 6rem; margin-top: 3rem; } .mainimg { display: block; margin: auto; } @media screen and (max-width: 768px) { #mainimage { background: url(../img/main-bg_sp.jpg) no-repeat center 15px; background-size: 100% auto; margin-bottom: 0; padding-bottom: 0; } } #menu_name_btn { display: inline-flex; justify-content: space-around; width: 90%; max-width: 900px; margin: 2rem auto; } #menu_name_btn > li { background: rgba(255, 255, 255, 0.6); border: 3px solid #C70079; width: 30%; margin-right: .5rem; transition: 0.1s; position: relative; padding-bottom: 1.5rem; } #menu_name_btn > li:last-child { margin-right: 0; } #menu_name_btn > li:hover { transform: translate(0, -5px); } #menu_name_btn > li > a { display: block; width: 100%; height: 100%; padding: .3rem 1rem; color: #C70079; font-weight: bold; font-size: 1rem; } #menu_name_btn > li > a:after { font-family: "Font Awesome 5 Free"; content: '\f358'; display: block; text-align: center; position: absolute; bottom: 5px; left: 0; right: 0; margin: auto; } @media screen and (max-width: 768px) { #menu_name_btn > li { padding-bottom: 1rem; } #menu_name_btn > li > a { font-size: 0.7rem; padding: .3rem; } #menu_name_btn > li > a > img { height: 25px; } } .news_area { display: table; background: #fff; width: 95%; max-width: 1200px; margin: 1.8rem auto 1rem; font-size: .8rem; } .news_area dt { display: table-cell; background: #C70079; color: #fff; padding: .3rem 0; } .news_area dd { display: table-cell; text-align: left; padding-left: 1.5rem; color: #212121; } .news_area dd > ul > li { border-bottom: 1px dashed #ccc; padding: 0.5rem; } .news_area dd > ul > li:last-child { border-bottom: none; } @media screen and (max-width: 768px) { .news_area { margin: 0 auto 1rem; font-size: .8rem; } .news_area dd { padding-left: 0.5rem; } } .page-info { background: rgba(0, 0, 0, 0.95); width: 95%; margin: auto; padding: 1.8rem 0; position: absolute; left: 0; right: 0; bottom: -6rem; } .page-info > ul { width: 95%; max-width: 1000px; margin: auto; } .page-info > ul > li > div { border: 1px solid #fff; width: 70%; padding: 1rem; margin: auto; } @media screen and (max-width: 768px) { .page-info { bottom: auto; position: relative; width: 100%; } .page-info li:first-child { margin-bottom: 1rem; } } /*///////////////制度の紹介/////////////////////*/ .IntroductionOfTheSystem_title { background: url(../img/introductionofthesystem_bg.jpg) no-repeat center top; background-size: cover; padding-top: 4rem; padding-bottom: 4rem; } @media screen and (max-width: 768px) { .IntroductionOfTheSystem_title { background-size: auto 100%; } } /*地域限定正社員の仕事*/ #RecruitmentArea { counter-reset: titleNum; } #RecruitmentArea:before { content: ""; display: inline-block; height: 50px; margin-top: -50px; vertical-align: top; } .cara { position: absolute; bottom: 0; right: 10px; max-width: 270px; width: 40%; } .map-area { background: url(../img/map.png) no-repeat right center; background-size: 70%; padding: 40px 20px; min-height: 200px; } .map-content { width: 60%; } .area-map{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc431+0,ffc431+50,ffc431+50,ffbb32+50,ffbb32+100 */ background: #ffc431; /* Old browsers */ background: -moz-linear-gradient(top, #ffc431 0%, #ffc431 50%, #ffc431 50%, #ffbb32 50%, #ffbb32 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffc431 0%,#ffc431 50%,#ffc431 50%,#ffbb32 50%,#ffbb32 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffc431 0%,#ffc431 50%,#ffc431 50%,#ffbb32 50%,#ffbb32 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc431', endColorstr='#ffbb32',GradientType=0 ); /* IE6-9 */ text-align: center; border-radius: 10px; font-weight:bold; } .area-map a{ padding: 20px 0; color:#fff; display: block; width:100%; height: 100%; margin: auto; vertical-align: middle; font-size:1.4rem; } .area-map a:after{ content: ""; width:1em; height:1em; background: url(../img/entry_arrow.png) no-repeat center; background-size: contain; display: inline-block; margin: 10px auto 0; } } #area dd span { display: inline-block; background: rgba(255, 255, 255, 0.7); margin: 5px auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #area dd a { display: block; width: 100%; height: 100%; padding: 5px 15px; color: #000000; } #area dd a:before { font-family: "Font Awesome 5 Free"; font-weight: bold; content: "\f0da"; padding-right: 0.5rem; } @media screen and (min-width: 769px) { .cara { width: 200px; } } @media screen and (max-width: 768px) { .area-map a{ font-size:1.2rem; font-weight:bold; } } h5 { font-size: 1.1rem; font-weight: normal; margin-top: 1.2rem; margin-bottom: 0.5rem; } .count { counter-increment: titleNum; position: relative; padding: 0 0 .5em 2em; border-bottom: 1px solid #ccc; } .count:before { position: absolute; top: 0; left: 0; content: counter(titleNum); width: 28px; height: 28px; line-height: 28px; background-color: #ccc; border-radius: 100%; color: #fff; font-size: .9em; text-align: center; } .RecruitmentArea_title { background: url(../img/recruitmentarea_bg.jpg) no-repeat center; background-size: 100% auto; padding-top: 6rem; padding-bottom: 2rem; } @media screen and (max-width: 768px) { .RecruitmentArea_title { background-size: auto 100%; } } .cap { padding: 0.5rem 0; } /*/地域限定正社員の仕事*/ /*福利厚生*/ #IOTS_welfare:before { content: ""; display: inline-block; height: 100px; margin-top: -100px; vertical-align: top; } #IOTS_welfare h4 { text-align: center; color: #444341; font-size: 1.2rem; margin: 1.2rem auto; } .welfare_ex { margin-top: 80px; } .welfare_ex li { border: 1px solid #9b9b9b; padding: 50px 1rem 1rem; margin-bottom: 80px; position: relative; } .welfare_ex h6 { font-size: 1.1rem; text-align: center; padding: .5rem 0; } .welfare-icon { position: absolute; top: -40px; left: 0; right: 0; margin: auto; } @media screen and (min-width: 769px) { .welfare_ex { display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-justify-content: space-around; justify-content: space-around; } .welfare_ex li { width: 32%; } } @media screen and (max-width: 768px) { .welfare_ex li { padding: 1rem; margin-bottom: 10px; overflow: hidden; } .welfare-icon { position: static; float: left; width: 70px; margin-right: 10px; } .welfare_ex h6 { text-align: left; padding-top: 0; } .welfare_ex p { margin-left: 80px; } } /*/福利厚生*/ /*キャリアプラン*/ #IOTS_carrer { background: url(../img/careerplan_bg.png) no-repeat center bottom; background-size: 100% auto; } #IOTS_carrer:before { content: ""; display: inline-block; height: 100px; margin-top: -100px; vertical-align: top; } .balloon { border: 1px solid #494949; padding: 1rem; position: relative; margin: 2rem auto; } .balloon::before, .balloon::after { position: absolute; top: 100%; left: 30px; content: ''; height: 0; width: 0; border: 10px solid transparent; } .balloon::before { border-top: 15px solid #494949; } .balloon::after { margin-top: -2px; border-top: 15px solid #fff; } .dia { display: inline-block; padding: 0.3rem 1rem; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 0.5rem; } @media screen and (min-width: 767px) { .balloon { display: table; } .balloon li { display: table-cell; } .balloon li:last-child { padding-left: 1rem; } .dia { text-align: center; width: 20%; } } /*/キャリアプラン*/ /*店舗内部署一覧・募集要項*/ #IOTS_outline:before { content: ""; display: inline-block; height: 100px; margin-top: -100px; vertical-align: top; } .circle:before { content: "●"; color: #828282; margin-right: 0.3rem; } .dashborder-list li { border-bottom: 1px dashed #adadad; padding-bottom: 0.5rem; } .dashborder-list li p { padding-left: 1rem; } /*/店舗内部署一覧・募集要項*/ /*///////////////制度の紹介end/////////////////////*/ /*///////////////選考の流れ/////////////////////*/ .FlowOfSelection_title { background: url(../img/flowofselection_bg.jpg) no-repeat center top; padding-top: 4rem; padding-bottom: 4rem; margin-bottom: 2rem; } .schedule > li { margin-bottom: 2rem; } .schedule dl { display: table; } .schedule dt, .schedule dd { display: table-cell; } .schedule dt { background: #ff9785; color: #fff; font-size: 1.5rem; padding: 0 1rem; position: relative; width: 50px; text-align: center; } .schedule dt:after { border: solid transparent; content: ''; height: 0; width: 0; pointer-events: none; position: absolute; border-color: rgba(106, 90, 205, 0); border-top-width: 15px; border-bottom-width: 15px; border-left-width: 25px; border-right-width: 25px; margin-left: -25px; border-top-color: #ff9785; top: 100%; left: 50%; } .schedule dd { padding-left: 1rem; width: 100%; } .schedule h5 { font-weight: bold; border: 1px solid #ff9785; display: block; padding: .5rem 1rem; margin-top: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .schedule dd p { padding-left: 1rem; } .schedule a { color: #0074b5; text-decoration: underline; } .schedule a.target-b:after { font-family: "Font Awesome 5 Free"; font-weight: bold; content: "\f061"; padding-left: 0.5rem; } @media screen and (min-width: 769px) { .FlowOfSelection_title { background-size: 100% auto; } } @media screen and (max-width: 768px) { .FlowOfSelection_title { background-size: cover; } } /*/選考の流れ*/ #openshop-list { position: relative; background: #f7f7f7; } .list-header { background: url(../img/dot.png); padding: 2rem 0 1rem; } .openshop-list_title { background: url(../img/open-bg.jpg) no-repeat center top; padding: 2rem 0 8rem; position: relative; } .title_sub span { border-bottom: 1px solid #212121; padding-top: 2rem; } /*店舗リストアコーディオン*/ .tenpo-accordion { margin: 10px auto; } .tenpo-accordion_1 { border: 1px solid #545454; } .tenpo-accordion_1 .nest { padding: .5rem; border-bottom: 1px solid #545454; } .tenpo-accordion_1 .nest a { display: block; width: 100%; height: 100%; text-decoration: underline; color: #212121; text-indent: 1em; } .tenpo-accordion_1 .nest a:before { font-family: "Font Awesome 5 Free"; color: #C70079; font-weight: bold; content: "\f0da"; } .button { padding: 10px; width: 100%; background-color: #e0ded3; color: #111111; text-align: left; cursor: pointer; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 0; } .butoon-title { font-size: 1.1rem; padding-right: 1.5rem; position: relative; } .butoon-title > p:after { display: block; content: "\f067"; font-family: "Font Awesome 5 Free"; position: absolute; top: 11px; right: 13px; font-weight: bold; } button.button.butoon-title.active > p:after { content: "\f068"; font-family: "Font Awesome 5 Free"; } .butoon-last { border-bottom: none; } .button.active { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px 5px 0 0 / 5px 5px 0 0; } .button.active.butoon-last { border-bottom: 1px dashed #545454; } .button.button_1 { border-radius: 0; background-color: #fff; color: #212121; font-weight: bold; border-bottom: 1px dashed #545454; } .button:after { content: "\f067"; font-family: "Font Awesome 5 Free"; position: absolute; top: 11px; right: 13px; } .button.active:after { content: "\f068"; } .butoon-title:after { content: none; } .butoon-title.active:after { content: none; } /*店舗リストアコーディオンここまで*/ @media screen and (min-width: 769px) { .openday { background-color: #383a38; color: #fff; float: right; padding: .5rem 1rem .5rem 3rem; width: 40%; margin-top: -1rem; position: relative; } .openday:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 2.35rem 1.8rem; border-color: transparent transparent #383a38 transparent; position: absolute; left: -1.7rem; top: -1px; } } @media screen and (max-width: 768px) { .openday { text-align: center; padding: 1rem 0; } .openday:before { content: ""; background: url(../img/openday-l.png) no-repeat left center; padding: .6rem 1rem; background-size: auto 100%; } .openday:after { content: ""; background: url(../img/openday-r.png) no-repeat right center; padding: .6rem 1rem; background-size: auto 100%; } .perth { padding: 1rem 0; } } .list_inner { background: #fff; margin-bottom: 3rem; padding-bottom: 3rem; } .list_inner h3 { position: relative; } .list_inner h3 span { background: #C70079; color: #fff; padding: .3rem 1rem; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: relative; z-index: 2; font-size: 1.2rem; } .list_inner h3:before { position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 3px; background-color: #C70079; } .list_detail { border-bottom: 1px dashed #9b9b9b; padding-bottom: 2rem; } @media screen and (max-width: 768px) { .list_inner h3 { text-align: center; margin: 0 auto 1rem; } .open_place { text-align: center; } } @media screen and (min-width: 769px) { .list_detail { margin: 2rem auto; display: table; } .list_detail li { display: table-cell; vertical-align: middle; } } .comment { padding: 0 0 1rem; } .address { background: url(../img/icon-address.png) no-repeat center left; background-size: auto 1.5rem; } .access { background: url(../img/icon-access.png) no-repeat center left; background-size: auto 1.5rem; } .scheduleddate { background: url(../img/menuicon-newopen.png) no-repeat center left; background-size: auto 1.3rem; } .conditions { margin-bottom: 1rem; } .conditions a { text-decoration: underline; color: #212121; background: url(../img/blank-01.png) no-repeat right center; background-size: .8rem; padding-right: 1.5rem; } .conditions a:before { font-family: "Font Awesome 5 Free"; content: "\f061"; display: inline-block; padding-right: .5rem; font-weight: bold; } .tenpo-info dt { padding-left: 2rem; } .tenpo-info dt span { font-size: .6rem; } @media screen and (min-width: 769px) { .tenpo-info { display: table; width: 100%; margin: .5rem; } .tenpo-info dt { display: table-cell; width: 10rem; vertical-align: middle; border-right: 1px solid #9B9B9B; } .tenpo-info dt span { display: block; } .tenpo-info dd { display: table-cell; padding-left: 1rem; vertical-align: middle; } } @media screen and (max-width: 768px) { .tenpo-info dt { border-bottom: 1px solid #212121; padding: .5rem 0 .5rem 2rem; } .tenpo-info dd { padding: .5rem 0; } } .chirashi { border: 1px solid #c70079; text-decoration: none; width: 95%; margin: 1rem auto auto; border-bottom: solid 4px #c70079; border-radius: 10px; position: relative; } .chirashi a { color: #c70079; display: block; width: 100%; height: 100%; text-align: center; background: url(../img/icon-chirashi.png) no-repeat 5% center; background-size: 2.3rem auto; padding: 1rem 0; } .chirashi a:after { content: "CHECK"; background: url(../img/arrow-01.png) no-repeat right center; padding-right: 1rem; color: #212121; margin: auto; position: absolute; right: .5rem; } .recruit-btn { width: 80%; margin: 1rem auto; background: #333333; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .g-map { font-size: 1.5rem; font-weight: bold; padding-left: 2rem; background: url(../img/icon-gmap.png) no-repeat left center; background-size: auto 80%; } .map_canvas { position: relative; padding-bottom: 26.25%; padding-top: 30px; height: 0; overflow: hidden; margin: 1rem auto; } .map_canvas iframe, .map_canvas object, .map_canvas embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px) { .map_canvas { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } } .recruit-btn a { color: #fff; display: block; width: 100%; height: 100%; padding: .5rem 2rem .5rem 0; text-align: center; background: url(../img/blank-02.png) no-repeat 95% center; background-size: 1rem; font-size: 1.2rem; } /*リンクボタンエリア*/ #link-area { background: url(../img/link-bg.jpg) no-repeat center top; padding: 4rem 0; } .about-link li { position: relative; padding: 2rem 0; margin-bottom: 1.5rem; } .about-link li h2 { position: absolute; top: -1.5rem; left: 0; right: 0; } .about-link li a { display: block; width: 100%; height: 100%; color: #212121; } .about-link_info { font-weight: bold; font-size: 1.2rem; } .about-link_info span { font-weight: normal; font-size: .8rem; } .jobdescription-btn { background: #aac9ff; } .qa-btntc { background: #fffde9; } @media screen and (max-width: 768px) { .top-btn { bottom: 55px !important; } footer { padding: 0.5rem 0 4rem !important; } } @media (min-width: 321px) { /*Android*/ /*ここに321px〜360pxの記述*/ /* ** */ } @media (min-width: 361px) { /*iPhone 8・iPhone X*/ /*ここに361px〜375pxの記述*/ /* ** */ } @media (min-width: 376px) { /*Android*/ /*ここに376px〜412pxの記述*/ /* ** */ } @media (min-width: 413px) { /*iPhone 8+*/ /*ここに413px〜414pxの記述*/ /* ** */ } @media (min-width: 415px) { /*iPhone SE・iPhone 8・iPhone 8+・iPhone X横 Android系横 iPad縦*/ /*ここに415px〜834pxの記述*/ /* ** */ } @media (min-width: 835px) { /*ここに835px〜959pxの記述*/ /* ** */ } @media (min-width: 960px) { /*ここに960px〜1023pxの記述*/ /* ** */ } @media (min-width: 1024px) { /*iPad横 iPad Pro縦*/ /*ここに1024px〜1059pxの記述*/ /* ** */ } @media (min-width: 1060px) { /*ここに1060px〜1199pxの記述*/ /* ** */ } @media (min-width: 1200px) { /*iPad Pro横*/ /*ここに1200px〜の記述*/ /* ** */ }