/* ***** 基本SMACSSで設計・baseレイヤー: プレフィックスなし・layoutレイヤー: プレフィックス l- ・moduleレイヤー: プレフィックスなし・stateレイヤー: プレフィックス is-, js- ・themeレイヤー: 使用なし・utilityレイヤー: 追加m_memberCard ***** */ /* ----- base ----- */ /* リセットCSS */ /*** The new CSS reset - version 1.8.3 (last updated 21.1.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (窶｢) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* 初期設定 */ :root{ color:#222; font:400 16px YakuHanJPs, "helvetica neue", "noto sans jp", "yu gothic", YuGothic, "ヒラギノ角ゴ pron w3", "hiragino kaku gothic pron", Arial, メイリオ, Meiryo, sans-serif; line-height: 1.6; letter-spacing: 0; } @media screen and (max-width: 768px){ :root{ font-size: 14px ; line-height: 2; } } /* アニメーション */ @keyframes btn-icon { 0% { text-indent: 0; } 50% { text-indent: 1em; } 50.01% { text-indent: -1em; } 100% { text-indent: 0; } } @keyframes canScrollMove{ 0%{ height:0; top:1.5em; opacity: 0; } 30%{ height:75%; opacity: 1; } 100%{ height:0; top:100%; opacity: 0; } } /* 既存CSS（insource）のオーバーライド */ .intvwBox { font-size: 17px; line-height: 1.6; } .intvwQuestion{ font-weight: bold; font-size: 24px; color: #E5262D; } .intvwBoxTxt .firstLine{ font-size: 28px; } .timeSchedule{ font-size: 14px; } .timeSchedule_content>p:first-of-type { font-size: 18px; } .timeSchedule_content { font-size: 16px; } .timeAxis::before{ top: 8px; } .timeBtn{ line-height: 1.6; } .timeBtn::before{ width: 14px; height: 14px; vertical-align: -2px; } .timeSchedule .timeAxis::before{ left: 4% !important; height: 96% !important; } @media screen and (max-width: 768px){ .intvwBoxImg{ margin-top: 24px; } .intvwBoxTxt p{ font-size: 14px; } .intvwQuestion{ font-size: 20px; } .intvwBoxTxt .firstLine{ font-size: 20px; } .timeSchedule_content > p:first-of-type { font-size: 15px; } .timeSchedule_content { font-size: 13px; } .timeBtn{ font-size: 13px; } } /* ----- layout ----- */ /* ラップコンテンツ */ .l_wrap{} @media screen and (max-width: 1180px){ .l_wrap{ overflow: hidden; } } /* メインコンテンツ */ .l_main{} /* フッターコンテンツ */ .l_footer{} /* グリッドレイアウト */ .l_grid{ display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; margin: -15px; } .l_grid__item{ display: flex; padding: 15px; } .l_grid__inner{ display: block; width: 100%; } .l_grid--start{ align-items: flex-start; } .l_grid--contact{ justify-content: center; } .l_grid--tab{ margin: -5px; } .l_grid--tab > .l_grid__item{ padding: 5px; } @media screen and (max-width: 768px){ .l_grid--resMdRev{ flex-direction: column-reverse; } } /* ナビ */ .l_nav{ align-items: stretch; display: flex; justify-content: flex-start; margin: -1px; } .l_nav__item{ display: flex; width: 100%; padding: 1px; } .l_nav__target{ display: block; width: 100%; } .l_nav--global{ margin: 0 -15px; } .l_nav--global > .l_nav__item{ padding: 0 15px; } .l_nav--gFooter { justify-content: flex-end; margin: 0 -15px; } .l_nav--gFooter > .l_nav__item { width: auto; padding: 0 15px; } @media screen and (max-width: 1180px) { .l_nav--global{ margin: 0 -8px; } .l_nav--global > .l_nav__item{ padding: 0 8px; } .l_nav--gFooter { margin: 0 -8px; } .l_nav--gFooter > .l_nav__item { padding: 0 8px; } } /* 節 */ .l_section{} .l_section__item{} .l_section--primary > .l_section__item + .l_section__item{ padding-top: 120px; } .l_section--secondary > .l_section__item + .l_section__item{ padding-top: 64px; } .l_section--hasBorder > .l_section__item + .l_section__item{ border-top: 1px solid #707070; } .l_section--hasBorder.l_section--primary > .l_section__item + .l_section__item{ margin-top: 60px; padding-top: 60px; } .l_section--hasBorder.l_section--secondary > .l_section__item + .l_section__item{ margin-top: 32px; padding-top: 32px; } @media screen and (max-width: 768px){ .l_section--primary > .l_section__item + .l_section__item{ margin-top: 32px; padding-top: 32px; } .l_section--secondary > .l_section__item + .l_section__item{ margin-top: 20px; padding-top: 20px; } } /* ----- moduleS ----- */ /* グローバルエリア */ .m_gArea{ position: fixed; top: 0; z-index: 999; width: 100%; height: 70px; background: #fff; } .m_gArea__wrap{ width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 20px; } .m_gArea__logo{ line-height: 0; text-align: center; } .m_gArea__logo img{ max-width: 100%; height: auto; } .m_gArea__body{ display: flex; align-items: center; margin: 0 -15px; } .m_gArea__body--sp { display: none; } .m_gArea__item{ padding: 0 15px; } @media screen and (max-width: 1180px) { .m_gArea__wrap{ width: 95%; padding: 0; } } @media screen and (max-width: 768px) { .m_gArea__inner { width: 95%; padding: 0; } .m_gArea__logo { width: 100px; } .m_gArea__body { margin: 0 -5px; } .m_gArea__item { padding: 0 5px; } } @media screen and (max-width: 768px) { .m_gArea__body--pc { display: none; } .m_gArea__body--sp { display: block; } } /* ハンバーガーメニュー */ @media screen and (max-width: 768px) { .m_hamburerMenu__ico { display: none; } .m_hamburerMenu__open { display: flex; height: 60px; width: 60px; justify-content: center; align-items: center; position: relative; z-index: 100; cursor: pointer; } .m_hamburerMenu__open span, .m_hamburerMenu__open span:before, .m_hamburerMenu__open span:after { content: ""; display: block; height: 1px; width: 20px; background: #333; transition: 0.2s; position: absolute; } .m_hamburerMenu__open span:before { bottom: 7px; } .m_hamburerMenu__open span:after { top: 7px; } #hamburerMenuOpcl:checked ~ .m_hamburerMenu__open span { background: rgba(255, 255, 255, 0); } #hamburerMenuOpcl:checked ~ .m_hamburerMenu__open span::before { bottom: 0; transform: rotate(45deg); } #hamburerMenuOpcl:checked ~ .m_hamburerMenu__open span::after { top: 0; transform: rotate(-45deg); } .m_hamburerMenu__content { width: 100%; height: 100%; position: fixed; top: 70px; z-index: 99; left: 0; background: #fff; opacity: 0; visibility: hidden; transition: 0.5s; } .m_hamburerMenu__list { list-style: none; } .m_hamburerMenu__item { padding: 13px 20px; } .m_hamburerMenu__item--textlink a { font-size: 15px; color: #333; transition: 0.2s; } #hamburerMenuOpcl:checked ~ .m_hamburerMenu__content { opacity: 1; visibility: visible; } } /* グローバルナビ */ .m_globalNav{ position: relative; display: block; font-size: 15px; color: inherit; white-space: nowrap; transition: .3s opacity; } .m_globalNav:hover{ opacity: .7; } @media screen and (max-width: 1180px) { .m_globalNav{ font-size: 13px; } } /* グローバルフッターエリア */ .m_gFooterArea{ background: #fff; } .m_gFooterArea__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 20px; } .m_gFooterArea__logo { line-height: 0; } .m_gFooterArea__logoLink { display: block; } .m_gFooterArea__item + .m_gFooterArea__item { margin-top: 10px; } .m_gFooterArea__nav { line-height: 1.6; font-size: 14px; } @media screen and (max-width: 768px) { .m_gFooterArea__inner { display: block; width: 95%; padding: 10px 0; } .m_gFooterArea__logo { width: 100px; } .m_gFooterArea__logo + .m_gFooterArea__body{ margin-top: 8px; } .m_gFooterArea__item + .m_gFooterArea__item { margin-top: 5px; } } /* フッターナビ */ .m_footerNav{} @media screen and (max-width: 1180px) { .m_footerNav{ font-size: 13px; } } /* コピーライト */ .m_copyRight{ font-size: 12px; } @media screen and (max-width: 768px) { .m_copyRight{ text-align: center; font-size: 10px; } } /* コンテンツ */ .m_contents{} .m_contents__body{} .m_contents__itemWrap{ padding: 120px 0; background: #fff; } .m_contents__itemWrap--themeColor{ background: #E5262D; } .m_contents__itemWrap--lead{ padding: 240px 0; } .m_contents__item{ max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .m_contents__item--full{ max-width: none; width: 100%; padding-left: 0; padding-right: 0; } .m_contents--noKeyvisual{ padding-top: 140px; } @media screen and (max-width: 768px){ .m_contents__itemWrap{ padding: 64px 0; } } /* フッター */ .m_recruitFooter{} .m_recruitFooter__item{ max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* テキストボックス */ .m_txtBox{} .m_txtBox__txt--em{ font-weight: bold; } .m_txtBox__txt + .m_txtBox__txt{ margin-top: 15px; } .m_txtBox--top{ line-height: 2.2; } .m_txtBox--top .m_txtBox__txt + .m_txtBox__txt{ margin-top: 40px; } @media screen and (max-width: 1180px){ .m_txtBox--top br{ display: none; } } @media screen and (max-width: 768px){ .m_txtBox__txt + .m_txtBox__txt{ margin-top: 10px; } } /* アイコン */ .m_hasIco{ position: relative; display: block; } .m_hasIco::before, .m_hasIco::after{ position: absolute; display: block; } .m_hasIco::before{ left: 0; } .m_hasIco::after{ right: 0; } .m_hasIco--dot{ padding-left: 1em; } .m_hasIco--dot::before{ content: "・"; } .m_hasIco--ast{ padding-left: 1em; } .m_hasIco--ast::before{ content: "※"; } .m_hasIco--otherLink{ display: inline-block; padding-right: 1.2em; } .m_hasIco--otherLink::after{ content: "\f35d"; position: absolute; right: 0; top: 0; bottom: 0; display: block; height: 1em; margin: auto 0; line-height: 1; font-weight: bold; font-size: .7em; font-family: "Font Awesome 5 Free"; } /* ボタン */ .m_btn{ display: flex; align-items: stretch; } .m_btn::before{ content: ""; width: 0; } .m_btn__target{ display: flex; align-items: center; justify-content: center; transition: .3s opacity; } .m_btn__target:hover{ opacity: .7; } .m_btn--center{ justify-content: center; } .m_btn--gCta{} .m_btn--gCta::before{ height: 34px; } .m_btn--gCta > .m_btn__target{ position: relative; width: 130px; padding: 0; border-radius: 5px; color: #fff; background: #E5262D; } .m_btn--gCta > .m_btn__target::before{ content: "\f35d"; position: absolute; right: 8px; top: 0; bottom: 0; display: block; height: 1em; margin: auto 0; line-height: 1; font-weight: bold; font-size: 12px; font-family: "Font Awesome 5 Free"; } .m_btn--recruit{} .m_btn--recruit::before{ height: 80px; } .m_btn--recruit > .m_btn__target{ position: relative; width: 400px; border: 2px solid #E5262D; border-radius: 5px; color: #E5262D; font-weight: bold; font-size: 20px; background: #fff; } .m_btn--recruit > .m_btn__target::before{ content: "\f105"; position: absolute; right: 20px; top: 0; bottom: 0; display: block; height: 1em; margin: auto 0; line-height: 1; font-weight: bold; font-size: 20px; font-family: "Font Awesome 5 Free"; } .m_btn--ask{} .m_btn--ask::before{ height: 80px; } .m_btn--ask > .m_btn__target{ position: relative; width: 270px; border-radius: 5px; color: #fff; font-weight: bold; font-size: 20px; background: #E5262D; } .m_btn--ask > .m_btn__target::before{ content: "\f105"; position: absolute; right: 20px; top: 0; bottom: 0; display: block; height: 1em; margin: auto 0; line-height: 1; font-weight: bold; font-size: 20px; font-family: "Font Awesome 5 Free"; } .m_btn--recruitSummary{} .m_btn--recruitSummary::before{ height: 48px; } .m_btn--recruitSummary > .m_btn__target{ position: relative; width: 100%; border-radius: 5px; color: #fff; font-weight: bold; font-size: 16px; background: #E5262D; } .m_btn--recruitSummary > .m_btn__target::before{ content: "\f105"; position: absolute; right: 20px; top: 0; bottom: 0; display: block; height: 1em; margin: auto 0; line-height: 1; font-weight: bold; font-size: 16px; font-family: "Font Awesome 5 Free"; } .m_btn--entry{} .m_btn--entry::before{ height: 132px; } .m_btn--entry > .m_btn__target{ position: relative; width: 540px; border-radius: 5px; color: #fff; font-weight: bold; font-size: 16px; background: #E5262D; } .m_btn--entry > .m_btn__target::before{ content: "\f105"; position: absolute; right: 20px; top: 0; bottom: 0; display: block; height: 1em; margin: auto 0; line-height: 1; font-weight: bold; font-size: 16px; font-family: "Font Awesome 5 Free"; } .m_btn--noLink > .m_btn__target::before{ content: none; } .m_btn--noLink > .m_btn__target:hover{ opacity: 1; } @media screen and (max-width: 768px){ .m_btn--recruit > .m_btn__target{ width: 100%; } .m_btn--ask > .m_btn__target{ width: 100%; } .m_btn--gCta > .m_btn__target{ width: 100%; } } /* 脚注 */ .m_footNote{ position: relative; display: block; padding-left: 1em; font-size: 12px } .m_footNote::before{ content: "※"; position: absolute; left: 0; display: block; } /* 見出し */ .m_heading{} .m_heading__title{ line-height: 1.4; font-weight: bold; } .m_heading__subTitle{ line-height: 1; font-weight: bold; font-family: YakuHanJPs, "Inter", sans-serif; } .m_heading__lead{ line-height: 1.6; font-weight: bold; } .m_heading--primary{ margin-bottom: 56px; } .m_heading--primary .m_heading__title{ font-size: 40px; white-space: nowrap; word-break: keep-all; } .m_heading--primary .m_heading__subTitle{ letter-spacing: 2px; } .m_heading--primary .m_heading__lead{ font-size: 18px; letter-spacing: 2px; } .m_heading--primary .m_heading__title + .m_heading__subTitle, .m_heading--primary .m_heading__subTitle + .m_heading__title{ margin-top: 24px; } .m_heading--primary .m_heading__title + .m_heading__lead{ margin-top: 18px; } .m_heading--secondary{ margin-bottom: 32px; } .m_heading--secondary .m_heading__title{ line-height: 1.6; font-size: 20px; } .m_heading--themeColor{ color: #E5262D; } .m_heading--interview .m_heading__title{ line-height: 1.4; } .m_heading--wColor{ color: #fff; } .m_heading--center{ text-align: center; } @media screen and (max-width: 1180px){ .m_heading--primary .m_heading__title{ font-size: 32px; } .m_heading--primary .m_heading__title + .m_heading__subTitle{ margin-top: 18px; } } @media screen and (max-width: 768px){ .m_heading--primary{ margin-bottom: 28px; } .m_heading--primary .m_heading__title{ font-size: 28px; line-height: 1.4; white-space: normal; word-break: normal; } .m_heading--primary .m_heading__title + .m_heading__subTitle{ margin-top: 16px; } .m_heading--secondary{ margin-bottom: 20px; } .m_heading--secondary .m_heading__title{ font-size: 18px; } } /* 表 */ .m_table{ border-top: 1px solid #707070; border-bottom: 1px solid #707070; } .m_table__item + .m_table__item{ border-top: 1px solid #707070; } .m_table__item{ display: flex; align-items: stretch; } .m_table__heading{ flex: 0 0 25%; padding: 15px 30px; background: #F7F7F7; } .m_table__body{ flex: 1 1 auto; padding: 15px 30px; } .m_table__msg + .m_table__msg{ margin-top: 10px; } .m_table__link{ color: #052674; &:hover{ color: #005580; text-decoration: underline; } } @media screen and (max-width: 1180px){ .m_table__heading{ flex: 0 0 33.333%; } } @media screen and (max-width: 768px){ .m_table__heading{ padding: 15px; } .m_table__body{ padding: 15px; } .m_table__msg + .m_table__msg{ margin-top: 5px; } } @media screen and (max-width: 599px){ .m_table__heading{ flex: 0 0 40%; } } /* タブ */ .m_tab{ display: inline-block; padding: 5px 15px; border: 1px solid; border-radius: 100px; color: #333; line-height: 1; font-size: 12px; } /* キービジュアル */ .m_keyvisual{ position: relative; padding-top: 70px; background: #fff; } .m_keyvisual::before{ content: ""; position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, .2); } /* .m_keyvisual::before{ content: ""; position: absolute; bottom: 0; left: 50%; z-index: 2; display: block; width: 120%; padding-top: 25%; border-radius: 50%; background:#0ABC86; transform: translate(-50%, 75%); } */ .m_keyvisual__item{} .m_keyvisual__body{ position: relative; height: calc(100vh - 70px) !important; height: calc(100svh - 70px) !important; background: content-box no-repeat center center / cover; overflow: hidden; } .m_keyvisual__body--img1{ background-image: url(../../img/recruit/top/img_freshman-top-mv01.jpg); } .m_keyvisual__body--img2{ background-image: url(../../img/recruit/top/img_freshman-top-mv02.jpg); } .m_keyvisual__body--img3{ background-image: url(../../img/recruit/top/img_freshman-top-mv03.jpg); } .m_keyvisual__body--img4{ background-image: url(../../img/recruit/top/img_freshman-top-mv04.jpg); } .m_keyvisual__body--img5{ background-image: url(../../img/recruit/top/img_freshman-top-mv05-2.jpg); } .m_keyvisual__body--img6{ background-image: url(../../img/recruit/top/img_freshman-top-mv06-2.jpg); } .m_keyvisual__body--img7{ background-image: url(../../img/recruit/top/img_freshman-top-mv07-2.jpg); } .m_keyvisual__copy{ position: absolute; top: 60%; left: 50%; z-index: 2; color: #fff; white-space: nowrap; line-height: 1.6; letter-spacing: .1em; font-weight: bold; font-size: 42px; transform: translate(-50%, -50%); } .m_keyvisual__copyEm{ line-height: 100%; font-size: 2em; } .m_keyvisual__canScroll{ position: absolute; bottom: 0; left: 50%; z-index: 3; padding-bottom: 120px; color: #fff; line-height: 1; text-transform: capitalize; transform: translate(-50%, 50%); } .m_keyvisual__canScroll::before{ content: ""; position: absolute; left: 0; right: 0; top: 2em; display: block; width: 2px; height: 75%; margin: 0 auto; background: #fff; animation: canScrollMove 2s ease-in-out infinite; } @media screen and (max-width: 1180px){ .m_keyvisual__copy{ font-size: 3.4vw; } } @media screen and (max-width: 768px){ .m_keyvisual__copy{ top: 66.666%; font-size: 4.8vw; } .m_keyvisual__body--img1{ background-image: url(../../img/recruit//top/img_freshman-top-mv01-sp.jpg); } .m_keyvisual__body--img2{ background-image: url(../../img/recruit//top/img_freshman-top-mv02-sp.jpg); } .m_keyvisual__body--img3{ background-image: url(../../img/recruit//top/img_freshman-top-mv03-sp.jpg); } .m_keyvisual__body--img4{ background-image: url(../../img/recruit//top/img_freshman-top-mv04-sp.jpg); } .m_keyvisual__body--img5{ background-image: url(../../img/recruit/top/img_freshman-top-mv05-2-sp.jpg); } .m_keyvisual__body--img6{ background-image: url(../../img/recruit/top/img_freshman-top-mv06-sp.jpg); } .m_keyvisual__body--img7{ background-image: url(../../img/recruit/top/img_freshman-top-mv07-sp.jpg); } .m_keyvisual__body--img8{ background-image: url(../../img/recruit/top/img_freshman-top-mv08-sp.jpg); } .m_keyvisual__canScroll{ bottom: 30px; padding-bottom: 64px; } } /* ボトムのキービジュアル */ .m_bottomKeyvisual{ position: relative; margin-bottom: 120px; padding-top: 70px; height: calc(100vh) !important; height: calc(100svh) !important; background: content-box no-repeat center center / cover; overflow: hidden; } .m_bottomKeyvisual--company{ background-image: url(../../img/recruit/company/img_freshman-company-keyvisual.jpg); } .m_bottomKeyvisual--interview{} .m_bottomKeyvisual--interview01{ background-image: url("../../img/recruit/interview/img_freshman-interview-vol01-keyvisual.jpg"); } .m_bottomKeyvisual__heading{ position: absolute; left: 0; right: 0; bottom: 64px; width: 1180px; margin: 0 auto; padding: 0 20px; } .m_bottomKeyvisual__headingInner{ position: relative; left: 30px; display: inline-block; padding: 40px; background: rgba(255, 255, 255, .8); } .m_bottomKeyvisual__headingInner::before{ content: ""; position: absolute; top: -30px; left: -30px; display: block; border-left: 120px solid #E5262D; border-bottom: 120px solid rgba(255, 255, 255, 0); } @media screen and (max-width: 1180px){ .m_bottomKeyvisual__heading{ width: 100%; } } @media screen and (max-width: 768px){ .m_bottomKeyvisual{ margin-bottom: 64px; } .m_bottomKeyvisual__heading{ bottom: 32px; } .m_bottomKeyvisual--company{ background-image: url(../../img/recruit/company/img_freshman-company-keyvisual-sp.jpg); } .m_bottomKeyvisual--interview{ margin: 0; padding-top: calc(100% * 730 / 1280 + 70px); height: auto !important; background-position: center top 70px; background-origin: padding-box; background-clip: padding-box; background-size: contain; } .m_bottomKeyvisual--interview .m_bottomKeyvisual__heading{ position: static; bottom: 0; padding: 0; } .m_bottomKeyvisual--interview .m_bottomKeyvisual__headingInner{ left: 0; display: block; padding: 20px; } .m_bottomKeyvisual--interview .m_bottomKeyvisual__headingInner::before{ content: none; } } /* パパラックス画像 */ .m_recruitSection{ position: relative; height: 400px; background: rgba(0, 0, 0, .4); } .m_recruitSection::before { content: ""; height: 100vh; position: fixed; top: 0; left: 0; width: 100%; z-index: -1; background: url(../../img/recruit/top/img_freshman-top-recruitBk02.jpg) no-repeat center center / cover; } .m_recruitSection__inner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .m_recruitSection__heading{ display: flex; justify-content: center; } @media screen and (max-width: 768px){ .m_recruitSection{ height: 320px; } .m_recruitSection::before { background-image: url(../../img/recruit/top/img_freshman-top-recruitBk02-sp.jpg); } .m_recruitSection__inner{ width: 100%; } } /* 採用トップリード */ .m_lead{ position: relative; z-index: 2; overflow: hidden; } .m_lead__heading{ margin-bottom: 80px; } .m_lead__title{ color:#E5262D; line-height: 1.5; font-weight: bold; font-size: 52px; white-space: nowrap; } .m_lead__body{ width: 75%; } .m_lead__item + .m_lead__item{ margin-top: 80px; } .m_lead__cards{} .m_lead__card{ display: block; max-width: 375px; margin: 0 auto; } .m_lead__cardImg{ line-height: 0; text-align: center; } .m_lead__cardImg img{ max-width: 100%; height: auto; transition: .4s transform ease-out; } .m_lead__cardImg + .m_lead__cardTtl{ margin-top: 32px; } .m_lead__cardTtl{ color: #e5262d; text-align: center; font-weight: bold; line-height: 1.6; font-size: 18px; } .m_lead__treatments{} .m_lead__treatment{} .m_lead__treatment--img1{ position: absolute; top: 142px; right: 8.333%; z-index: 1; width: 24vw; max-width: 272px; line-height: 0; } .m_lead__treatment--img1 img{ max-width: 100%; height: auto; } .m_lead__treatment--img2{ position: absolute; top: 540px; z-index: 2; right: 4.333%; width: 18vw; max-width: 203px; line-height: 0; } .m_lead__treatment--img2 img{ max-width: 100%; height: auto; } .m_lead__treatment--theme1{ position: absolute; top: 0; right: 0; z-index: -1; line-height: 0; white-space: nowrap; } .m_lead__treatment--theme2{ position: absolute; bottom: 0; left: 0; z-index: -1; line-height: 0; white-space: nowrap; } .m_lead__treatment--theme1 img{ height: auto; } .m_lead__treatment--theme2 img{ height: auto; } @media screen and (max-width: 1180px){ .m_lead__body{ padding-right: 20px; } .m_lead__treatment--img1{ right: 0; width: 25%; padding-right: 20px; } .m_lead__treatment--img2{ top: 480px; right: 0; width: 20%; padding-right: 20px; } } @media screen and (max-width: 1180px){ .m_lead__title{ font-size: 32px; } } @media screen and (max-width: 768px){ .m_lead__heading{ margin-bottom: 40px; } .m_lead__title{ font-size: 28px; } .m_lead__body{ width: 100%; padding: 0; } .m_lead__cardTtl{ font-size: 16px; } .m_lead__treatment--img1, .m_lead__treatment--img2{ display: none; } .m_lead__treatment--theme1 img, .m_lead__treatment--theme2 img{ width: 640px; } } /* 最新情報のラッパー */ .m_newsWrap{ display: flex; align-items: stretch; } .m_newsWrap__heading{ flex: 0 0 25%; width: 25%; } .m_newsWrap__body{ flex: 1 1 auto; } .m_newsWrap__linkItem{ display: flex; align-items: stretch; } .m_newsWrap__linkItem::before{ content: ""; display: block; height: 72px; } .m_newsWrap__linkItem{ border-bottom: 1px solid #fff; } .m_newsWrap__linkTarget{ position: relative; width: 100%; padding: 10px 64px 10px 16px; color: #fff; font-weight: bold; } .m_newsWrap__linkTarget::before{ content: "→"; position: absolute; top: 0; bottom: 0; right: 1em; color: #fff; display: block; width: 1em; height: 1em; margin: auto 0; line-height: 1; font-size: 24px; overflow: hidden; } .m_newsWrap__linkTarget:hover::before{ animation: .4s btn-icon cubic-bezier(0.215, 0.61, 0.355, 1) forwards; } .m_newsWrap__linkTarget--noLink::before{ content: none; } @media screen and (max-width: 768px){ .m_newsWrap{ display: block; } .m_newsWrap__heading{ width: 100%; } } /* 最新情報 */ .m_news{ font-weight: 500; line-height: 1.6; } .m_news__time + .m_news__ttl{ margin-top: 5px; } /* ICSの特徴 */ .m_about{ overflow: visible; } .m_about__item{} .m_about__item + .m_about__item{ margin-top: 120px; } @media screen and (max-width: 768px){ .m_about__item + .m_about__item{ margin-top: 64px; } } /* 働く環境 */ .m_office{ position: relative; } .m_office__wrap{ position: relative; left: 50%; bottom: 0; z-index: 3; width: calc(50% + 20px); max-width: 705px; margin: 0; transform: translateX(-20px); } .m_office__inner{ padding: 100px; border-radius: 20px; background: #fff; } .m_office__body{} .m_office__treatment{ position: absolute; top: 0; right: 50%; z-index: 2; width: calc(50% + 20px); text-align: center; line-height: 0; transform: translate(40px, -240px); } .m_office__treatment img{ max-width: 100%; height: auto; } @media screen and (max-width: 1180px){ .m_office__inner{ padding: 64px; } } @media screen and (max-width: 768px){ .m_office{ display: flex; flex-direction: column-reverse; } .m_office__wrap{ position: static; width: 100%; transform: none; } .m_office__inner{ padding: 48px 32px; border-radius: 0; } .m_office__treatment{ position: static; width: 100%; transform: none; } } /* 会社を知る */ .m_company{ display: flex; align-items: stretch; } .m_company__heading{ flex: 0 0 25%; width: 25%; } .m_company__body{ flex: 1 1 auto; } .m_company__linkItem{ display: flex; align-items: stretch; } .m_company__linkItem::before{ content: ""; display: block; height: 72px; } .m_company__linkItem + .m_company__linkItem{ border-top: 1px solid #fff; } .m_company__linkTarget{ position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 0 16px; color: #fff; font-weight: bold; } .m_company__linkTarget::before{ content: "→"; position: absolute; top: 0; bottom: 0; right: 1em; color: #fff; display: block; width: 1em; height: 1em; margin: auto 0; line-height: 1; font-size: 24px; overflow: hidden; } .m_company__linkTarget:hover::before{ animation: .4s btn-icon cubic-bezier(0.215, 0.61, 0.355, 1) forwards; } @media screen and (max-width: 768px){ .m_company{ display: block; } .m_company__heading{ width: 100%; } } /* 仲間たちのラッパー */ .m_members{ position: relative; z-index: 1; overflow: hidden; } .m_members__body{} .m_members__treatments{} .m_members__treatment{} .m_members__treatment--theme{ position: absolute; top: 0; right: 0; z-index: -1; line-height: 0; white-space: nowrap; } .m_members__treatment--theme img{ height: auto; } @media screen and (max-width: 768px){ .m_members__treatment--theme{ top: 0; } .m_members__treatment--theme img{ width: 640px; } } /* 仲間たちのカード */ .m_memberCard{ position: relative; display: block; max-width: 280px; margin: 0 auto; } .m_memberCard__img{ position: relative; width: 100%; padding-top: 100%; border-radius: 50%; overflow: hidden; } .m_memberCard:hover .m_memberCard__img img{ transform: translate(-50%, -50%) scale(1.2); } .m_memberCard--noLink:hover .m_memberCard__img img{ transform: translate(-50%, -50%); } .m_memberCard__img img{ position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%); transition: .3s transform; } .m_memberCard__body{ position: absolute; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; } .m_memberCard__division{ padding: 8px 12px; line-height: 1; font-weight: bold; font-size: 12px; background: #fff; } .m_memberCard__division + .m_memberCard__name{ margin-top: 8px; } .m_memberCard__name{ padding: 8px 12px; line-height: 1; font-weight: bold; font-size: 16px; background: #fff; } /* お問合せ */ .m_contact{ padding: 48px; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.16); } /* 電話 */ .m_tel{ line-height: 1; } .m_tel__num{ display: block; font-size: 24px; } .m_tel__time{ display: block; font-size: 14px; } .m_tel__num + .m_tel__time{ margin-top: 10px; } /* 採用情報概要 */ .m_recruitSummary{} .m_recruitSummary__body{} .m_recruitSummary__body + .m_recruitSummary__info{ margin-top: 32px; } .m_recruitSummary__info{} .m_recruitSummary__btns{} .m_recruitSummary__btn + .m_recruitSummary__btn{ margin-top: 16px; } /* 応募するボタン */ .m_entryBtn{ text-align: center; line-height: 1; } .m_entryBtn__ttl{ font-size: 38px; } .m_entryBtn__ttl + .m_entryBtn__subTtl{ margin-top: 16px; } .m_entryBtn__subTtl{ font-size: 24px; } /* インタビューの名前 */ .m_interviewName{ display: flex; justify-content: flex-end; } .m_interviewName__division{ display: inline-block; padding: 8px 12px; line-height: 1; font-weight: bold; font-size: 12px; color: #fff; background: #E5262D; } .m_interviewName__division + .m_interviewName__name{ margin-top: 16px; } .m_interviewName__name{ line-height: 1; text-align: right; font-weight: bold; } /* インタビューページのキービジュアル */ .m_interviewKeyvisual{ max-width: 1180px; margin: 0 auto 80px; padding: 0 20px; } .m_interviewKeyvisual__wrap{ display: flex; align-items: center; margin: 0 -30px; } .m_interviewKeyvisual__img{ width: 66.666%; padding: 0 30px; line-height: 0; text-align: center; } .m_interviewKeyvisual__img img{ width: 100%; height: auto; } .m_interviewKeyvisual__body{ width: 33.333%; padding: 0 15px; } .m_interviewKeyvisual--division{ position: relative; padding-left: 200px; } .m_interviewKeyvisual--division::before{ content: ""; position: absolute; left: 20px; top: 50%; display: block; width: 140px; aspect-ratio: 219 / 236; background: url(../../img/recruit/division/img_divisioncard_balloon.png) no-repeat center center / contain; transform: translateY(-50%); } .m_interviewKeyvisual--division::after{ content: ""; position: absolute; left: 90px; top: 50%; display: block; transform: translate(-50%, -50%); } .m_interviewKeyvisual--contentsCreate.m_interviewKeyvisual--division::after{ content: url(../../img/recruit/division/img_divisioncard_ico_contents.png); } .m_interviewKeyvisual--digitalSolutions.m_interviewKeyvisual--division::after{ content: url(../../img/recruit/division/img_divisioncard_ico_digital.png); } .m_interviewKeyvisual--webMarketing.m_interviewKeyvisual--division::after{ content: url(../../img/recruit/division/img_divisioncard_ico_web.png); } @media screen and (max-width: 1180px){ .m_interviewKeyvisual__img{ width: 50%; } .m_interviewKeyvisual__body{ width: 50%; } } @media screen and (max-width: 768px){ .m_interviewKeyvisual__wrap{ display: block; margin: -15px 0; } .m_interviewKeyvisual__img{ width: 100%; padding: 15px 0; } .m_interviewKeyvisual__body{ width: 100%; padding: 15px 0; } .m_interviewKeyvisual--division{ padding-left: 20px; } .m_interviewKeyvisual--division::before{ content: none; } .m_interviewKeyvisual--division::after{ content: none !important; } } /* インタビューページの情報 */ .m_interviewInfo{} .m_interviewInfo__tagWrap + .m_interviewInfo__name{ margin-top: 20px; } .m_interviewInfo__tags{ display: flex; flex-wrap: wrap; margin: -10px; } .m_interviewInfo__tag{ padding: 10px; } .m_interviewInfo__tag::before{ content: "#"; } @media screen and (max-width: 768px){ .m_interviewInfo__tagWrap + .m_interviewInfo__name{ margin-top: 10px; } } /* インタビューページのキャッチコピー */ .m_interviewCatch--narrow .m_interviewCatch__inner{ width: 730px; max-width: 100%; } .m_interviewCatch{ display: flex; justify-content: center; } .m_interviewCatch__inner{ position: relative; padding: 30px 60px; font-size: 28px; } .m_interviewCatch__inner::before{ content: ""; position: absolute; top: 0; left: 0; display: block; border-left: 30px solid #E5262D; border-bottom: 30px solid rgba(255, 255, 255, 0); } .m_interviewCatch__inner::after{ content: ""; position: absolute; bottom: 0; right: 0; display: block; border-right: 30px solid #E5262D; border-top: 30px solid rgba(255, 255, 255, 0); } @media screen and (max-width: 768px){ .m_interviewCatch__inner{ padding: 30px 40px; font-size: 20px; } } /* インタビューの本文 */ .m_interviewCont{ max-width: 730px; margin-inline: auto; } /* インタビューページのスケジュールラッパー */ .m_scheduleWrap{ max-width: 900px; margin-inline: auto; padding: 60px 80px; background: #fafafa; } .m_scheduleWrap__title{ text-align: center; } .m_scheduleWrap__list{} .m_scheduleWrap__item + .m_scheduleWrap__item { margin-top: 40px; } @media screen and (max-width: 768px){ .m_scheduleWrap{ padding: 40px 20px; background: #fafafa; } } /* インタビューページのスケジュール */ .m_schedule__ttl{ display: flex; align-items: center; margin-bottom: 15px; font-size: 20px; } .m_schedule__time{ display: block; margin-right: 20px; padding: 5px 10px; color: #fff; font-size: 18px; font-weight: bold; line-height: 1; background-color:#e5262d; } .m_schedule__body{ padding-left: 88px; } @media screen and (max-width: 768px){ .m_schedule__ttl{ margin-bottom: 10px; font-size: 18px; } .m_schedule__body{ padding-left: 0; } } /* 部署紹介：やりがいリスト */ .m_divisionYarigai{} .m_divisionYarigai__item{ padding: 20px 0; border-top: 1px solid #ddd; } .m_divisionYarigai__item:last-child{ border-bottom: 1px solid #ddd; } .m_divisionYarigai__ttl{ display: inline-flex; align-items: center; gap: 10px; font-weight: bold; font-size: 17px; line-height: 1.5; } .m_divisionYarigai__ttl::before{ content: ""; display: inline-block; flex-shrink: 0; width: 12px; height: 12px; background: #E5262D; } .m_divisionYarigai__ttl + .m_divisionYarigai__txt{ margin-top: 10px; } .m_divisionYarigai__txt{ color: #555; line-height: 1.8; padding-left: 24px; } @media screen and (max-width: 599px){ .m_divisionYarigai__ttl{ font-size: 15px; } .m_divisionYarigai__txt{ padding-left: 0; } } /* よくある質問 */ .m_faq__inner{ display: flex; align-items: flex-start; gap: 40px; } .m_faq__heading{ flex: 0 0 220px; } .m_faq__body{ flex: 1 1 auto; padding: clamp(32px, 5.42vw, 64px); border-radius: 20px; background: #fff; } .m_faq__list{ border-top: 1px solid #ddd; } .m_faq__item{ border-bottom: 1px solid #ddd; } .m_faq__question{ position: relative; padding: 24px 48px 24px 48px; font-weight: bold; font-size: 16px; line-height: 1.6; cursor: default; } .m_faq__question::before{ content: "Q"; position: absolute; left: 0; top: 24px; font-weight: bold; font-size: 20px; color: #E5262D; line-height: 1; } .m_faq__answer{ padding: 0 48px 24px 48px; } .m_faqAswer__msg{ color: #555; font-size: 15px; line-height: 1.8; } .m_faqAswer__msg + .m_faqAswer__msg{ margin-top: 12px; } .m_faqAswer__link{ color: #052674; text-decoration: underline; } .m_faqAswer__link:hover{ opacity: .7; } @media screen and (max-width: 768px){ .m_faq__inner{ display: block; } .m_faq__heading{ width: 100%; } .m_faq__body{ padding: 32px; } } @media screen and (max-width: 599px){ .m_faq__question{ padding: 20px 16px 20px 32px; font-size: 14px; } .m_faq__question::before{ top: 20px; font-size: 16px; } .m_faq__answer{ padding: 0 16px 20px 32px; } .m_faqAswer__msg{ font-size: 14px; } } /* 部署紹介ラッパー */ .m_divisions{ position: relative; z-index: 1; overflow: hidden; } .m_divisions__body{} .m_divisions__treatments{} .m_divisions__treatment{} .m_divisions__treatment--theme{ position: absolute; top: 0; right: 0; z-index: -1; line-height: 0; white-space: nowrap; } .m_divisions__treatment--theme img{ height: auto; } @media screen and (max-width: 768px){ .m_divisions__treatment--theme img{ width: 640px; } } /* 部署カード */ .m_divisionCard{ background-image: url('../../img/recruit/division/img_divisioncard_balloon.png'); background-repeat: no-repeat; background-position: center; background-size: contain; aspect-ratio: 219 / 236; display: flex; align-items: center; justify-content: center; color: #fff; transition: opacity .3s; } .m_divisionCard:hover{ opacity: .6; } .m_divisionCard__name{ position: relative; display: block; padding-top: 72px; font-size: 15px; font-weight: bold; text-align: center; line-height: 1.5; } .m_divisionCard__name::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; text-align: center; line-height: 0; margin: auto; } .m_divisionCard--contentsCreate .m_divisionCard__name::before{ content: url('../../img/recruit/division/img_divisioncard_ico_contents.png'); } .m_divisionCard--digitalSolutions .m_divisionCard__name::before{ content: url('../../img/recruit/division/img_divisioncard_ico_digital.png'); } .m_divisionCard--webMarketing .m_divisionCard__name::before{ content: url('../../img/recruit/division/img_divisioncard_ico_web.png'); } @media screen and (max-width: 599px){ .m_divisionCard__name{ font-size: 13px; } } /* ----- state ----- */ /* フェードイン */ .m_fader{ opacity: 0; transform: translateY(50px); transition: 1s opacity ease-out, 1s transform ease-out; } .m_fader.is-show{ opacity: 1; transform: translateY(0px); } /* ローダー */ .loader.is-loaded, .overlay.is-loaded{ opacity: 0; pointer-events: none; } .loader{ position: fixed; top: 50vh; top: 50svh; left: 50vw; z-index: 11; transform: translate(-50%, -50%); transition: 1s opacity ease-out; } .overlay{ position: fixed; top: 0; left: 0; z-index: 10; width: 100vw; height: 100vh; background: #fff; transition: 1s opacity ease-out; } /* インタービュースライダー（slickのオーバーライド） */ .js-slider-interview .slick-track { display: flex; } .js-slider-interview .slick-slide { height: auto !important; } /* 画像スライダー（slickのオーバーライド） */ .js-imgSlider{ padding-bottom: 32px; } .js-imgSlider img{ width: 100%; height: auto; } .js-imgSlider .slick-dots{ position: absolute; bottom: 0; left: 50%; display: flex !important; align-items: stretch; transform: translateX(-50%); } .js-imgSlider .slick-dots li{ padding: 0 4px; } .js-imgSlider .slick-dots button{ display: block; width: 10px; height: 10px; border: none; border-radius: 100px; background: #DEF0EC; text-indent: -99999px; } .js-imgSlider .slick-dots .slick-active button{ width: 30px; background: #05A984; } /* ----- utility ----- */ /*横幅*/ .u_col1{width:8.333%;} .u_col2{width:16.667%;} .u_col3{width:25%;} .u_col4{width:33.333%;} .u_col5{width:41.666%;} .u_col6{width:50%;} .u_col7{width:58.333%;} .u_col8{width:66.666%;} .u_col9{width:75%;} .u_col10{width:83.33%;} .u_col11{width:91.666%;} .u_col12{width:100%;} @media screen and (max-width:1180px){ .u_resMdCol1{width:8.333%;} .u_resMdCol2{width:16.667%;} .u_resMdCol3{width:25%;} .u_resMdCol4{width:33.333%;} .u_resMdCol5{width:41.666%;} .u_resMdCol6{width:50%;} .u_resMdCol7{width:58.333%;} .u_resMdCol8{width:66.666%;} .u_resMdCol9{width:75%;} .u_resMdCol10{width:83.33%;} .u_resMdCol11{width:91.666%;} .u_resMdCol12{width:100%;} } @media screen and (max-width:768px){ .u_resSmCol1{width:8.333%;} .u_resSmCol2{width:16.667%;} .u_resSmCol3{width:25%;} .u_resSmCol4{width:33.333%;} .u_resSmCol5{width:41.666%;} .u_resSmCol6{width:50%;} .u_resSmCol7{width:58.333%;} .u_resSmCol8{width:66.666%;} .u_resSmCol9{width:75%;} .u_resSmCol10{width:83.33%;} .u_resSmCol11{width:91.666%;} .u_resSmCol12{width:100%;} } @media screen and (max-width:599px){ .u_resXsCol1{width:8.333%;} .u_resXsCol2{width:16.667%;} .u_resXsCol3{width:25%;} .u_resXsCol4{width:33.333%;} .u_resXsCol5{width:41.666%;} .u_resXsCol6{width:50%;} .u_resXsCol7{width:58.333%;} .u_resXsCol8{width:66.666%;} .u_resXsCol9{width:75%;} .u_resXsCol10{width:83.33%;} .u_resXsCol11{width:91.666%;} .u_resXsCol12{width:100%;} } /*間隙*/ .u_mb0{ margin-bottom: 0; } .u_mt8{ margin-top: 8px; } .u_mt16{ margin-top: 16px; } .u_mt24{ margin-top: 24px; } .u_mt30{ margin-top: 30px; } .u_mt36{ margin-top: 36px; } .u_mt56{ margin-top: 56px; } .u_mt90{ margin-top: 90px; } .u_mt120{ margin-top: 120px; } .u_pt120{ padding-top: 120px; } .u_pb120{ padding-bottom: 120px; } @media screen and (max-width:768px){ .u_resSmMt24{ margin-top: 24px; } .u_resSmMt24{ margin-top: 24px; } .u_resSmMb28{ margin-bottom: 28px; } } /*文字のサイズ*/ @media screen and (max-width:768px){ .u_resSmFs15{ font-size: 15px; } } /*文字の太さ*/ .u_fwB{ font-weight: bold; } /*表示*/ .u_hide{ display: none; } @media screen and (max-width:1180px){ .u_resMdHide{ display: none; } } @media screen and (max-width:768px){ .u_resSmHide{ display: none; } .u_resSmInline{ display: inline; } .u_resSmBlock{ display: block; } } /*画像*/ .u_onlyImg{ line-height: 0; text-align: center; } .u_onlyImg img{ max-width: 100%; height: auto; } /* 背景色 */ .u_bkW{ background: #fff; }