@charset "UTF-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ /* 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { --color-primary: #00b2b2; --color-text-base: #333333; --color-text-light: #737373; --color-text-bg: #f7f8fa; } * { font-size: 16px; font-weight: 400; font-style: normal; font-family: "Noto Sans JP", serif; line-height: 1.6em; letter-spacing: 0.08em; color: var(--color-text-base); } .poppins { font-family: "Poppins", serif; } path { transition: fill 0.3s; } .header__inner { box-shadow: 0px 0px 20px 0px rgba(92, 112, 153, 0.2); } .mt0 { margin-top: 0 !important; } body { height: unset !important; } html { scroll-behavior: smooth; } main { width: 100%; min-width: 1080px; padding-top: 193px; } @media screen and (max-width: 767px) { main { min-width: 0; padding-top: 0; } } .pc { display: block !important; } @media screen and (max-width: 767px) { .pc { display: none !important; } } .pc-flex { display: flex !important; } @media screen and (max-width: 767px) { .pc-flex { display: none !important; } } .sp { display: none !important; } @media screen and (max-width: 767px) { .sp { display: block !important; } } .sp-flex { display: none !important; } @media screen and (max-width: 767px) { .sp-flex { display: flex !important; } } .bind { width: 1020px; margin: 0 auto; } @media screen and (max-width: 767px) { .bind { max-width: calc(100% - 40px); margin: 0 auto; } } .mainv01__bg h1 { color: #ffffff; } .mainv01__bg h2 { color: #ffffff; } .mainv01__bg p { color: #ffffff; } .breadcrumb { width: 1020px; margin: 0 auto; margin: 24px auto 0 auto; -ms-overflow-style: none; scrollbar-width: none; overflow-x: scroll; overflow-y: hidden; } .breadcrumb::-webkit-scrollbar { display: none; } @media screen and (max-width: 767px) { .breadcrumb { max-width: calc(100% - 40px); margin: 0 auto; margin: 20px auto 0 auto; } } .breadcrumb ol { display: flex; flex-flow: row; justify-content: flex-start; align-items: center; } .breadcrumb a { font-size: 14px; line-height: 1em; color: #737373; text-decoration: underline; white-space: nowrap; display: block; position: relative; top: -1px; transition: opacity 0.3s; opacity: 1; } .breadcrumb a:hover { opacity: 0.6; } @media screen and (max-width: 767px) { .breadcrumb a { font-size: 12px; } } .breadcrumb li { display: flex; flex-flow: row; align-items: center; margin: 0 8px 0 0; } .breadcrumb li::after { content: ""; display: block; width: 24px; height: 24px; background-image: url(/recruit/common/img/common/aroow-gray.svg); background-position: center center; background-repeat: no-repeat; background-size: cover; margin: 0 0 0 8px; position: relative; top: 1px; } @media screen and (max-width: 767px) { .breadcrumb li::after { width: 12px; height: 12px; background-image: url(/recruit/common/img/common/aroow-gray_small.svg); } } .breadcrumb li.--current { position: relative; } .breadcrumb li.--current span { font-size: 14px; line-height: 1em; color: var(--color-primary); font-weight: 700; text-decoration: none; white-space: nowrap; top: -1px; } @media screen and (max-width: 767px) { .breadcrumb li.--current span { font-size: 12px; } } .breadcrumb li.--current::after { display: none; } .content { width: 100%; min-width: 1080px !important; margin-left: auto !important; margin-right: auto !important; } @media screen and (max-width: 767px) { .content { width: calc(100% - 40px) !important; min-width: 0 !important; } } .c-local-nav { width: 100%; padding: 24px 0; background-color: #ffffff; position: fixed; top: 100px; z-index: 100; } .c-local-nav__inner { width: 1020px; margin: 0 auto; display: flex; flex-flow: row; justify-content: space-between; align-items: stretch; } .c-local-nav__item { width: 150px; position: relative; } .c-local-nav__item::before { content: ""; display: block; width: 1px; height: 100%; background-color: #E4E7EB; position: absolute; top: 0; right: -12px; } .c-local-nav__link { width: 100%; height: 100%; display: flex; flex-flow: column; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; text-align: center; transition: all 0.3s; } .c-local-nav__link:hover { opacity: 0.6; } .c-job { width: 100%; max-width: 1270px; height: 388px; background-color: #ffffff; border-radius: 16px; box-shadow: 0px 0px 32px 0px rgba(20, 51, 51, 0.1); margin-left: auto; margin-right: auto; display: flex; flex-flow: column; justify-content: center; align-items: center; position: relative; z-index: 10; } @media screen and (max-width: 767px) { .c-job { height: auto; padding: 40px 32px; } } .c-job__inner { width: 1020px; display: flex; flex-flow: column; justify-content: center; align-items: center; } @media screen and (max-width: 767px) { .c-job__inner { width: 100%; } } .c-job__top { width: 100%; display: flex; flex-flow: row; justify-content: space-between; align-items: center; } @media screen and (max-width: 767px) { .c-job__top { flex-flow: column; } } .c-job__middle { width: 900px; display: flex; flex-flow: row; justify-content: space-between; align-items: center; margin-top: 20px; margin-left: auto; } @media screen and (max-width: 767px) { .c-job__middle { width: 100%; flex-flow: column; justify-content: center; margin-top: 32px; } } .c-job__middle .primary-button { width: 284px; } @media screen and (max-width: 767px) { .c-job__middle .primary-button { width: 100%; } } @media screen and (max-width: 767px) { .c-job__middle .primary-button:nth-child(n+2) { margin-top: 16px; } } .c-job__bottom { width: 900px; display: flex; flex-flow: row; justify-content: flex-end; align-items: center; margin-left: auto; } @media screen and (max-width: 767px) { .c-job__bottom { width: 100%; justify-content: center; } } .c-job__txtArea { display: flex; flex-flow: row; justify-content: flex-start; align-items: center; } @media screen and (max-width: 767px) { .c-job__txtArea { width: 100%; flex-flow: row-reverse; justify-content: flex-end; } } .c-job__ja { font-size: 32px; font-weight: 700; line-height: 1.5em; writing-mode: vertical-lr; } @media screen and (max-width: 767px) { .c-job__ja { font-size: 24px; writing-mode: unset; margin-right: 12px; } } .c-job__en { font-size: 14px; font-weight: 600; line-height: 1.5em; color: var(--color-primary); writing-mode: vertical-lr; } @media screen and (max-width: 767px) { .c-job__en { font-size: 12px; writing-mode: unset; } } .c-job__buttonArea { width: 900px; display: flex; flex-flow: row; justify-content: space-between; align-items: center; } @media screen and (max-width: 767px) { .c-job__buttonArea { width: 100%; margin-top: 32px; } } .c-job__buttonArea .primary-button-l { width: 434px; } @media screen and (max-width: 767px) { .c-job__buttonArea .primary-button-l { width: calc((100% - 16px) / 2); } } .c-contact { width: 100%; height: 340px; background-image: url(/recruit/common/img/common/bg-contact.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; flex-flow: column; justify-content: center; align-items: center; position: relative; } @media screen and (max-width: 767px) { .c-contact { height: 460px; background-image: url(/recruit/common/img/common/sp-btn_area-cta.jpg); } } .c-contact::before { content: ""; display: block; width: 100%; height: 100%; background-color: rgba(51, 51, 51, 0.8); position: absolute; top: 0; left: 0; z-index: 1; } .c-contact__inner { width: 1020px; display: flex; flex-flow: column; justify-content: center; align-items: center; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .c-contact__inner { width: calc(100% - 40px); } } .c-contact__title { font-size: 26px; font-weight: 500; color: #ffffff; text-align: center; line-height: 1.8em; } @media screen and (max-width: 767px) { .c-contact__title { font-size: 16px; line-height: 1.6em; } } .c-contact__buttonArea { width: 100%; margin-top: 48px; display: flex; flex-flow: row; justify-content: space-between; align-items: center; } @media screen and (max-width: 767px) { .c-contact__buttonArea { flex-flow: column; justify-content: center; } } .c-contact__buttonArea .primary-button { width: 494px; height: 78px; } @media screen and (max-width: 767px) { .c-contact__buttonArea .primary-button { width: 100%; height: 68px; } } @media screen and (max-width: 767px) { .c-contact__buttonArea .primary-button--mail { margin-top: 24px; } } .c-contact__txt { font-size: 16px; color: #ffffff; text-align: center; line-height: 1.8em; margin-top: 32px; } @media screen and (max-width: 767px) { .c-contact__txt { font-size: 14px; } } .c-interview { width: 1020px; margin: 0 auto; display: flex; flex-flow: row; justify-content: center; align-items: center; } @media screen and (max-width: 767px) { .c-interview { max-width: calc(100% - 40px); margin: 0 auto; flex-flow: column; } } .c-interview__txtArea { width: 326px; margin-right: 64px; } @media screen and (max-width: 767px) { .c-interview__txtArea { width: calc(100% - 40px); margin-right: 0; } } .c-interview__title { font-size: 48px; font-weight: 700; line-height: 1em; color: var(--color-primary); } @media screen and (max-width: 767px) { .c-interview__title { font-size: 36px; font-weight: 600; } } .c-interview__txt { font-size: 16px; line-height: 1.8em; margin-top: 30px; } @media screen and (max-width: 767px) { .c-interview__txt { font-size: 14px; margin-top: 14px; } } .c-interview .primary-button { margin-top: 30px; } @media screen and (max-width: 767px) { .c-interview .primary-button { margin-top: 40px; } } .c-interview .primary-button::before { display: none; } .c-interview__staffArea { width: 630px; display: flex; flex-flow: row; justify-content: center; align-items: center; } @media screen and (max-width: 767px) { .c-interview__staffArea { display: none; } } .c-interview__staffArea .staff:nth-child(2) { margin-left: 30px; } @media screen and (max-width: 767px) { .c-interview .splide { margin-top: 40px; } } .primary-button { width: 100%; height: 78px; padding: 0 74px 0 28px; border-radius: 39px; border: 2px solid #e4e7eb; background-color: #ffffff; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; position: relative; transition: all 0.3s; font-size: 16px; font-weight: 500; } @media screen and (max-width: 767px) { .primary-button { height: 68px; font-size: 14px; padding: 0 64px 0 32px; } } .primary-button::before { content: ""; display: block; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center center; background-size: cover; margin-right: 12px; flex-shrink: 0; } @media screen and (max-width: 767px) { .primary-button::before { margin-right: 16px; } } .primary-button--mail::before { background-image: url(/recruit/common/img/common/mail_outline.png); } .primary-button--question::before { background-image: url(/recruit/common/img/common/question.svg); } .primary-button--blank::before { display: none; } .primary-button .buttonPart__arrow { width: 32px; height: 32px; margin: auto; position: absolute; top: 0; bottom: 0; right: 28px; transition: all 0.3s; } @media screen and (max-width: 767px) { .primary-button .buttonPart__arrow { width: 28px; height: 28px; right: 24px; } } @media screen and (min-width: 768px) { .primary-button:hover { color: var(--color-primary); border-color: var(--color-primary); } } @media screen and (min-width: 768px) { .primary-button:hover > .buttonPart__arrow { right: 24px; } } .primary-button--disable { background-color: #cccccc !important; pointer-events: none !important; } .primary-button--disable .primary-button__txt { color: #a6a6a6 !important; } .primary-button--disable .buttonPart__arrow { display: none !important; } .primary-button-l { width: 100%; height: 116px; padding: 0 40px 0 40px; border-radius: 58px; background-color: var(--color-primary); display: flex; flex-flow: row; justify-content: center; align-items: center; position: relative; transition: all 0.3s; } @media screen and (max-width: 767px) { .primary-button-l { height: 142px; border-radius: 16px; font-size: 18px; padding: 32px 16px 20px 16px; flex-flow: column; justify-content: flex-end; } } .primary-button-l__txt { font-size: 24px; font-weight: 700; text-align: center; color: #ffffff !important; } @media screen and (max-width: 767px) { .primary-button-l__txt { height: 44px; display: flex; flex-flow: column; justify-content: center; align-items: center; font-size: 18px; } } .primary-button-l .buttonPart__arrow { width: 36px; height: 36px; margin: auto; position: absolute; top: 0; bottom: 0; right: 40px; transition: all 0.3s; } @media screen and (max-width: 767px) { .primary-button-l .buttonPart__arrow { width: 28px; height: 28px; margin: 20px 0 0 0; position: relative; right: 0; } } @media screen and (min-width: 768px) { .primary-button-l:hover { background-color: #009999; } } @media screen and (min-width: 768px) { .primary-button-l:hover > .buttonPart__arrow { right: 24px; } } .primary-button-l--disable { background-color: #cccccc !important; pointer-events: none !important; } .primary-button-l--disable .primary-button-l__txt { color: #a6a6a6 !important; } .primary-button-l--disable .buttonPart__arrow { display: none !important; } .list-attention { margin: 12px 0 0 0; } .list-attention li { font-size: 12px; line-height: 1.6em; color: #737373; display: flex; flex-flow: row; justify-content: flex-start; align-items: flex-start; margin: 8px 0 0 0; } .list-attention li:first-child { margin-top: 0 !important; } @media screen and (max-width: 767px) { .list-attention li { line-height: 1.8em; margin: 6px 0 0 0; } } .list-attention li::before { content: "※"; display: block; margin: 0 4px 0 0; position: relative; top: 0; flex-shrink: 0; } .list-attention li.--01::before { content: "※1"; } .list-attention li.--02::before { content: "※2"; } .list-attention li.--03::before { content: "※3"; } .list-attention li p { font-size: 12px; line-height: 1.6em; color: #737373; } .list-attention li a { font-size: 12px; text-decoration: underline; color: var(--color_text-link); } .staff { width: 300px; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .staff { width: 240px; } } .staff__link { width: 100%; height: 340px; display: block; position: relative; cursor: pointer; } @media screen and (min-width: 768px) { .staff__link:hover > .staff__human { bottom: 20px; } } .staff__image { width: 100%; height: auto; display: block; } .staff__human { width: 100%; height: auto; display: block; position: absolute; left: 0; bottom: 0; z-index: 4; transition: all 0.3s; } .staff__bg { width: 100%; height: auto; display: block; position: absolute; left: 0; bottom: 0; z-index: 3; } .staff__mask { width: 100%; height: auto; display: block; position: absolute; left: 0; bottom: 0; z-index: 5; } .staff__lead { display: flex; flex-flow: column; justify-content: center; align-items: flex-start; margin-top: -40px; position: relative; z-index: 10; } .staff__leadTxt { font-size: 18px; font-weight: 700; color: #ffffff; white-space: nowrap; background-color: var(--color-primary); padding: 0 8px; } .staff__leadTxt:nth-child(2) { margin-top: 8px; } @media screen and (max-width: 767px) { .staff__leadTxt { font-size: 16px; } } .staff__history { font-size: 12px; line-height: 1em; margin-top: 20px; } .staff__name { font-size: 20px; font-weight: 500; line-height: 1em; margin-top: 10px; } .staff__tagArea { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin-top: 16px; position: relative; z-index: 10; } .staff__tag { font-size: 10px; line-height: 1em; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 2px; display: flex; flex-flow: column; justify-content: center; align-items: center; margin-bottom: 4px; margin-right: 8px; padding: 4px 8px; } @media screen and (max-width: 767px) { .staff--sp { width: 100%; margin: 0 auto; position: relative; } } @media screen and (max-width: 767px) { .staff--sp .staff__link { width: 188px; height: 213px; position: absolute; bottom: -10px; right: -40px; } } @media screen and (max-width: 767px) { .staff--sp .staff__image { width: 188px; position: absolute; right: -40px; bottom: -40px; } } @media screen and (max-width: 767px) { .staff--sp .staff__txtArea { width: 230px; } } @media screen and (max-width: 767px) { .staff--sp .staff__lead { margin-top: 0; } } @media screen and (max-width: 767px) { .staff--sp .staff__leadTxt { font-size: 14px; padding: 0 8px; } } @media screen and (max-width: 767px) { .staff--sp .staff__name { font-size: 14px; } } @media screen and (max-width: 767px) { .staff--sp .staff__tagArea { margin-top: 12px; } } /* スライド共通のスタイル */ .splide__slide .splide__item { transform: scale(0.85); transition: 0.7s; } /* アクティブなスライドのスタイル */ .splide__slide.is-active .splide__item { transform: scale(1); z-index: 1; } /* スライドのサイズ調整 */ .splide__slide .splide__item { height: auto; width: 100%; } .table { width: 100%; margin: 40px auto 0 auto; border-collapse: collapse; } .table_scroll { -ms-overflow-style: none; scrollbar-width: none; overflow-x: scroll; } .table_scroll::-webkit-scrollbar { display: none; } @media screen and (max-width: 767px) { .table_scroll { width: calc(100% + 20px); } } @media screen and (max-width: 767px) { .table_scroll .table { width: 640px; } } .table th, .table td { padding: 40px; border: 1px solid #e4e7eb; } @media screen and (max-width: 767px) { .table th, .table td { padding: 24px 16px; } } .table th { width: 300px; font-size: 16px; line-height: 1.8em; font-weight: 700; text-align: center; vertical-align: middle; background-color: #f7f8fa; } @media screen and (max-width: 767px) { .table th { width: 100%; font-size: 14px; padding: 14px; } } .table th.--left { text-align: left; } .table th.--center { text-align: center !important; } .table td { font-size: 16px; line-height: 1.8em; text-align: center; vertical-align: middle; background-color: #ffffff; } @media screen and (max-width: 767px) { .table td { font-size: 14px; } } .table td.--left { text-align: left; } .table td.--top { vertical-align: top; } .table.--top th { vertical-align: top; } .table.--left th, .table.--left td { text-align: left; } @media screen and (max-width: 767px) { .table.--block { border-top: 1px solid #e4e7eb; } } @media screen and (max-width: 767px) { .table.--block th { border-top: none; border-bottom: none; } } @media screen and (max-width: 767px) { .table.--block th, .table.--block td { width: 100%; display: block; } } .hfhd-h2 { margin-top: 124px; padding-bottom: 24px; border-bottom: 2px solid #e4e7eb; } @media screen and (max-width: 767px) { .hfhd-h2 { margin-top: 64px; padding-bottom: 22px; } } .hfhd-h2 p { font-size: 32px; font-weight: 500; line-height: 1.5em; padding-left: 24px; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; position: relative; } @media screen and (max-width: 767px) { .hfhd-h2 p { font-size: 22px; line-height: 1.6em; padding-bottom: 0; } } .hfhd-h2 p::before { content: ""; display: block; width: 6px; height: calc(100% - 8px); background-color: var(--color-primary); position: absolute; top: 8px; left: 0; } @media screen and (max-width: 767px) { .hfhd-h2 p::before { height: calc(100% - 6px); top: 4px; } } .hfhd-h2__txt { font-size: 16px; line-height: 1.8em; margin-top: 34px; } .hfhd-h3 { font-size: 28px; font-weight: 500; line-height: 1.8em; margin-top: 52px; } @media screen and (max-width: 767px) { .hfhd-h3 { font-size: 20px; margin-top: 48px; } } .hfhd-h3__txt { font-size: 16px; line-height: 1.8em; margin-top: 22px; } @media screen and (max-width: 767px) { .hfhd-h3__txt { margin-top: 26px; } } .c-list { margin-top: 20px; } .c-list__item { font-size: 16px; display: flex; flex-flow: row; justify-content: flex-start; align-items: flex-start; } @media screen and (max-width: 767px) { .c-list__item { font-size: 14px; } } .c-list__item:nth-child(n+2) { margin-top: 10px; } .c-list__item::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-primary); margin-right: 10px; position: relative; top: 10px; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-list__item::before { top: 8px; } } .c-list__item--no span { font-size: 16px; font-weight: 500; color: var(--color-primary); margin-right: 8px; } @media screen and (max-width: 767px) { .c-list__item--no span { font-size: 14px; } } .c-list__item--no::before { display: none; } .c-list--row { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .c-list--row .c-list__item { width: 33.333%; } @media screen and (max-width: 767px) { .c-list--row .c-list__item { width: 100%; } } .c-list--row .c-list__item:nth-child(n+2) { margin-top: 0; } @media screen and (max-width: 767px) { .c-list--row .c-list__item:nth-child(n+2) { margin-top: 10px; } } .c-list--row .c-list__item:nth-child(n+4) { margin-top: 10px; } .c-list--row2 { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } .c-list--row2 .c-list__item { width: 50%; } @media screen and (max-width: 767px) { .c-list--row2 .c-list__item { width: 100%; } } .c-list--row2 .c-list__item:nth-child(n+2) { margin-top: 0; } @media screen and (max-width: 767px) { .c-list--row2 .c-list__item:nth-child(n+2) { margin-top: 10px; } } .c-list--row2 .c-list__item:nth-child(n+3) { margin-top: 10px; } .c-list--title { margin-top: 8px; } @media screen and (max-width: 767px) { .c-list--title { margin-top: 6px; } } .c-list__title { font-size: 16px; font-weight: 700; color: var(--color-primary); margin-top: 20px; } @media screen and (max-width: 767px) { .c-list__title { font-size: 14px; margin-top: 8px; } } @media screen and (max-width: 767px) { .c-list__title--40 { margin-top: 28px; } } .c-listLink__item:nth-child(n+2) { margin-top: 26px; } .c-listLink__link { font-size: 16px; font-weight: 700; color: var(--color-primary) !important; display: flex; flex-flow: row; justify-content: flex-start; align-items: flex-start; transition: all 0.3s; } @media screen and (max-width: 767px) { .c-listLink__link { font-size: 14px; } } .c-listLink__link::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-primary); margin-right: 10px; position: relative; top: 10px; flex-shrink: 0; transition: all 0.3s; } @media screen and (max-width: 767px) { .c-listLink__link::before { top: 8px; } } .c-listLink__link--current { color: #a6a6a6 !important; } .c-listLink__link--current::before { background-color: #a6a6a6 !important; } @media screen and (min-width: 768px) { .c-listLink__link:hover { color: #a6a6a6 !important; } } @media screen and (min-width: 768px) { .c-listLink__link:hover::before { background-color: #a6a6a6 !important; } } .c-txtImage { display: flex; flex-flow: row-reverse; justify-content: space-between; align-items: flex-start; margin-top: 30px; } @media screen and (max-width: 767px) { .c-txtImage { flex-flow: column; justify-content: center; align-items: center; } } .c-txtImage__txt { width: calc(100% - 64px - 440px); font-size: 16px; line-height: 1.8em; margin-top: 10px; } @media screen and (max-width: 767px) { .c-txtImage__txt { width: 100%; font-size: 14px; margin-top: 26px; } } .c-txtImage__image { width: 440px; height: 290px; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } @media screen and (max-width: 767px) { .c-txtImage__image { width: 100%; height: auto; } } @media screen and (max-width: 767px) { .c-txtImage--reserve { flex-flow: column-reverse; } } @media screen and (max-width: 767px) { .c-txtImage--reserve .c-txtImage__txt { margin-top: 0; } } @media screen and (max-width: 767px) { .c-txtImage--reserve .c-txtImage__left { margin-top: 60px; } } .c-txtImage__left { width: 440px; } @media screen and (max-width: 767px) { .c-txtImage__left { width: 100%; } } .c-txtImage__right { width: calc(100% - 64px - 440px); } @media screen and (max-width: 767px) { .c-txtImage__right { width: 100%; } } .c-txtImage__right .c-txtImage__txt { width: 100%; } .c-txtImage__title { font-size: 16px; font-weight: 700; color: var(--color-primary); text-align: center; line-height: 1.4em; } .c-txtImage .table { margin-top: 20px; } .c-txtImage .table th, .c-txtImage .table td { padding: 24px 20px; } @media screen and (max-width: 767px) { .c-txtImage .table th, .c-txtImage .table td { width: 33%; } } .c-second-button { display: flex; flex-flow: row; justify-content: flex-start; align-items: center; } .c-second-button__link { display: flex; flex-flow: row; justify-content: flex-start; align-items: center; font-size: 16px; font-weight: 500; color: var(--color-primary) !important; } @media screen and (max-width: 767px) { .c-second-button__link { margin-left: 14px; } } @media screen and (min-width: 768px) { .c-second-button__link:hover > .c-second-button__arrow { margin-left: 14px; } } .c-second-button__arrow { width: 24px; height: 24px; display: block; margin-left: 12px; transition: all 0.3s; } @media screen and (max-width: 767px) { .c-second-button__arrow { width: 20px; height: 20px; margin-left: 8px; } } .c-faq { margin-top: 40px; border-radius: 8px; border: 2px solid #e4e7eb; position: relative; } .c-faq__question { width: 100%; height: 90px; padding: 24px 80px 24px 28px; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; font-size: 16px; font-weight: 700; line-height: 1.8em; text-align: left; position: relative; cursor: pointer; } @media screen and (max-width: 767px) { .c-faq__question { height: auto; padding: 24px 64px 24px 16px; font-size: 14px; } } .c-faq__question::before { content: ""; display: block; width: 24px; height: 24px; background-image: url(/recruit/common/img/faq/q.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; margin-right: 16px; flex-shrink: 0; } .c-faq__button { width: 32px; height: 32px; background-image: url(/recruit/common/img/faq/plus.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; margin: auto; position: absolute; top: 0; bottom: 0; right: 28px; cursor: pointer; transition: all 0.3s; } @media screen and (max-width: 767px) { .c-faq__button { width: 28px; height: 28px; } } .c-faq__button--open { background-image: url(/recruit/common/img/faq/minus.svg); } .c-faq__answer { width: calc(100% - 56px); margin: 0 auto; padding: 14px 8px 20px 8px; border-top: 2px solid #e4e7eb; } @media screen and (max-width: 767px) { .c-faq__answer { width: calc(100% - 32px); padding: 14px 0 20px 0; } } .c-faq__answer p { font-size: 16px; } @media screen and (max-width: 767px) { .c-faq__answer p { font-size: 14px; } } .c-faq__answer p a { font-size: 16px; color: #1558d6; text-decoration: underline; transition: all 0.3s; } .c-faq__answer p a:hover { opacity: 0.8; } @media screen and (max-width: 767px) { .c-faq__answer p a { font-size: 14px; } } .c-faq__answer .c-second-button { margin-top: 8px; } @media screen and (max-width: 767px) { .c-faq__answer .c-second-button { margin-top: 4px; } } @media screen and (max-width: 767px) { .c-faq + .c-faq { margin-top: 16px; } } .ccig-p-button { width: 600px; height: 78px; background-color: #ffffff; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; padding: 23px 80px 23px 32px; border: 2px solid var(--color-primary); border-radius: 48px; position: relative; } @media screen and (max-width: 767px) { .ccig-p-button { height: 64px; padding: 16px 64px 16px 24px; } } .ccig-p-button::after { content: ""; display: block; width: 2px; height: 38px; background-color: var(--color-primary); margin: auto; position: absolute; top: 0; bottom: 0; right: 72px; transition: background-color 0.3s; } @media screen and (max-width: 767px) { .ccig-p-button::after { height: 32px; right: 56px; } } .ccig-p-button__icon { margin-right: 12px; } @media screen and (max-width: 767px) { .ccig-p-button__icon { width: 28px; margin-right: 8px; } } .ccig-p-button__txt { font-size: 16px; font-weight: 700; line-height: 1.6em; color: var(--color-primary); transition: color 0.3s; } @media screen and (max-width: 767px) { .ccig-p-button__txt { font-size: 14px; } } .ccig-p-button__arrow { margin: auto; position: absolute; top: 0; bottom: 0; right: 24px; } @media screen and (max-width: 767px) { .ccig-p-button__arrow { right: 16px; } } @media screen and (min-width: 768px) { .ccig-p-button:hover { background-color: #009999; } .ccig-p-button:hover .ccig-p-button__txt { color: #ffffff; } .ccig-p-button:hover path { fill: #ffffff; } .ccig-p-button:hover::after { background-color: #ffffff; } } .ccig-p-button--disable { background-color: #D9D9D9; border-color: #D9D9D9; pointer-events: none; } .ccig-p-button--disable::after { background-color: #ffffff; } .ccig-p-button--disable .ccig-p-button__txt { color: #A6A6A6; } .ccig-p-button--disable path { fill: #A6A6A6; } .ccig-p-button-l { width: 600px; height: 120px; background-color: #ffffff; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; padding: 32px 95px; border: 2px solid var(--color-primary); border-radius: 60px; position: relative; } @media screen and (max-width: 767px) { .ccig-p-button-l { height: 64px; padding: 16px 64px 16px 24px; } } .ccig-p-button-l::after { content: ""; display: block; width: 2px; height: 56px; background-color: var(--color-primary); margin: auto; position: absolute; top: 0; bottom: 0; right: 88px; transition: background-color 0.3s; } @media screen and (max-width: 767px) { .ccig-p-button-l::after { height: 32px; right: 56px; } } .ccig-p-button-l__txt { width: 100%; font-size: 24px; font-weight: 700; text-align: center; line-height: 1.6em; color: var(--color-primary); transition: color 0.3s; } @media screen and (max-width: 767px) { .ccig-p-button-l__txt { font-size: 14px; text-align: left; } } .ccig-p-button-l__arrow { margin: auto; position: absolute; top: 0; bottom: 0; right: 32px; } @media screen and (max-width: 767px) { .ccig-p-button-l__arrow { right: 16px; } } @media screen and (min-width: 768px) { .ccig-p-button-l:hover { background-color: var(--color-primary); } .ccig-p-button-l:hover .ccig-p-button-l__txt { color: #ffffff; } .ccig-p-button-l:hover path { fill: #ffffff; } .ccig-p-button-l:hover::after { background-color: #ffffff; } } .ccig-p-button-l--disable { background-color: #D9D9D9; border-color: #D9D9D9; pointer-events: none; } .ccig-p-button-l--disable::after { background-color: #ffffff; } .ccig-p-button-l--disable .ccig-p-button-l__txt { color: #A6A6A6; } .ccig-p-button-l--disable path { fill: #A6A6A6; } .c-staff { width: 340px; position: relative; z-index: 5; } @media screen and (max-width: 767px) { .c-staff { width: 248px; } } @media screen and (min-width: 768px) { .c-staff:hover > .c-staff__link > .c-staff__human { bottom: 20px; } } .c-staff__link { width: 100%; height: 374px; display: block; position: relative; cursor: pointer; } @media screen and (max-width: 767px) { .c-staff__link { height: 258px; } } .c-staff__image { width: 100%; height: auto; display: block; } .c-staff__human { width: 100%; height: auto; display: block; position: absolute; left: 0; bottom: 0; z-index: 4; transition: all 0.3s; } .c-staff__bg { width: 100%; height: auto; display: block; position: absolute; left: 0; bottom: 0; z-index: 3; } .c-staff__mask { width: 100%; height: auto; display: block; position: absolute; left: 0; bottom: 0; z-index: 5; } .c-staff__lead { display: flex; flex-flow: column; justify-content: center; align-items: flex-start; margin-top: -40px; position: relative; z-index: 10; } .c-staff__leadTxt { font-size: 18px; font-weight: 700; color: #ffffff; white-space: nowrap; background-color: var(--color-primary); padding: 0 8px; } .c-staff__leadTxt:nth-child(2) { margin-top: 8px; } @media screen and (max-width: 767px) { .c-staff__leadTxt { font-size: 16px; } } .c-staff__history { font-size: 12px; line-height: 1em; margin-top: 20px; } .c-staff__tagArea { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin-top: 16px; position: relative; z-index: 10; } .c-staff__tag { font-size: 10px; line-height: 1em; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 2px; display: flex; flex-flow: column; justify-content: center; align-items: center; margin-bottom: 4px; margin-right: 8px; padding: 4px 8px; } @media screen and (max-width: 767px) { .c-staff--sp { width: 100%; margin: 0 auto; position: relative; } } @media screen and (max-width: 767px) { .c-staff--sp .c-staff__link { width: 210px; height: 213px; position: absolute; bottom: -50px; right: -40px; } } @media screen and (max-width: 767px) { .c-staff--sp .c-staff__image { width: 100%; position: absolute; right: -40px; bottom: -40px; } } @media screen and (max-width: 767px) { .c-staff--sp .c-staff__txtArea { width: 230px; } } @media screen and (max-width: 767px) { .c-staff--sp .c-staff__lead { margin-top: 0; } } @media screen and (max-width: 767px) { .c-staff--sp .c-staff__leadTxt { font-size: 15px; padding: 0 8px; } } @media screen and (max-width: 767px) { .c-staff--sp .c-staff__history { font-size: 14px; margin-top: 12px; } } @media screen and (max-width: 767px) { .c-staff--sp .c-staff__tagArea { margin-top: 12px; } } .c-contact2 { margin-top: 140px; } @media screen and (max-width: 767px) { .c-contact2 { margin-top: 80px; } } .c-contact2__top { padding: 80px 0; background-color: var(--color-primary); } @media screen and (max-width: 767px) { .c-contact2__top { padding: 48px 0; } } .c-contact2__inner { width: 1020px; margin: 0 auto; } @media screen and (max-width: 767px) { .c-contact2__inner { width: 295px; } } .c-contact2__title { font-size: 26px; font-weight: 700; text-align: center; letter-spacing: 0.18em; color: #ffffff; } @media screen and (max-width: 767px) { .c-contact2__title { font-size: 18px; } } .c-contact2__flex { display: flex; flex-flow: row; justify-content: space-between; align-items: center; margin-top: 44px; } @media screen and (max-width: 767px) { .c-contact2__flex { flex-flow: column; justify-content: center; margin-top: 26px; } } .c-contact2 .ccig-p-button { width: 500px; } @media screen and (max-width: 767px) { .c-contact2 .ccig-p-button { width: 100%; } } @media screen and (max-width: 767px) { .c-contact2 .ccig-p-button:nth-child(2) { margin-top: 16px; } } .c-contact2__txt { font-size: 14px; font-weight: 700; text-align: center; letter-spacing: 0.18em; color: #ffffff; margin-top: 44px; } @media screen and (max-width: 767px) { .c-contact2__txt { font-size: 12px; margin-top: 26px; text-align: left; } } .c-contact2__bottom { width: 100%; padding: 32px 0; background-color: #141414; } @media screen and (max-width: 767px) { .c-contact2__bottom { padding: 20px 0; } } .c-contact2__arrow { width: 36px; height: 36px; background-color: #ffffff; border-radius: 50%; display: flex; flex-flow: column; justify-content: center; align-items: center; position: relative; bottom: 0; transition: all 0.3s; } .c-contact2__arrow img { width: 15px; height: auto; display: block; position: relative; left: -1px; bottom: 0; } .c-contact2__goTop { font-size: 16px; line-height: 1em; color: #ffffff; text-align: center; margin-top: 16px; } .c-contact2__link { width: 78px; margin: 0 auto; display: flex; flex-flow: column; justify-content: center; align-items: center; } @media screen and (min-width: 768px) { .c-contact2__link:hover > .c-contact2__arrow { bottom: 4px; } } .c-switch { margin-top: 48px; position: relative; z-index: 10; } .c-switch__flex { width: 100%; height: 92px; display: flex; flex-flow: row; justify-content: space-between; align-items: flex-end; position: relative; z-index: 10; } @media screen and (max-width: 767px) { .c-switch__flex { height: 79px; } } .c-switch__tab { height: 76px; padding: 0 20px; background-color: var(--color-primary); border-radius: 4px 4px 0 0; font-size: 16px; font-weight: 700; color: #ffffff; display: flex; flex-flow: column; justify-content: center; align-items: center; transition: all 0.3s; cursor: pointer; } @media screen and (max-width: 767px) { .c-switch__tab { height: 54px; padding: 16px 8px; font-size: 12px; } } @media screen and (min-width: 768px) { .c-switch__tab:hover { background-color: #009999; } } .c-switch__tab--3 { width: calc((100% - 16px) / 3); } @media screen and (max-width: 767px) { .c-switch__tab--3 { width: calc((100% - 8px) / 3); } } .c-switch__tab--4 { width: calc((100% - 24px) / 4); } @media screen and (max-width: 767px) { .c-switch__tab--4 { width: calc((100% - 12px) / 4); } } .c-switch__tab--active { height: 92px; color: var(--color-primary); background-color: #ffffff; position: relative; box-shadow: 0px 0px 20px 0px rgba(92, 112, 153, 0.2); } @media screen and (max-width: 767px) { .c-switch__tab--active { height: 79px; } } .c-switch__tab--active:before { content: ""; display: block; background-color: #ffffff; width: 100%; height: 30px; position: absolute; bottom: -30px; left: 0; } .c-switch__contents { display: none; padding: 80px; background-color: #ffffff; box-shadow: 0px 0px 20px 0px rgba(92, 112, 153, 0.2); border-radius: 0 0 4px 4px; position: relative; } @media screen and (max-width: 767px) { .c-switch__contents { padding: 48px 28px; } } .c-switch__contents:before { content: ""; display: block; background-color: #ffffff; width: 100%; height: 20px; position: absolute; top: 0; left: 0; } .c-switch__title { font-size: 26px; font-weight: 700; color: var(--color-primary); text-align: center; } @media screen and (max-width: 767px) { .c-switch__title { font-size: 18px; } } .c-switch__txt { line-height: 1.8em; margin-top: 16px; } @media screen and (max-width: 767px) { .c-switch__txt { font-size: 14px; margin-top: 6px; } } .c-switch__title-2 { font-size: 28px; margin-top: 56px; } @media screen and (max-width: 767px) { .c-switch__title-2 { font-size: 20px; margin-top: 40px; } } .c-switch__txt-2 { line-height: 1.8em; margin-top: 10px; } @media screen and (max-width: 767px) { .c-switch__txt-2 { font-size: 14px; } } .c-switch__link { margin-top: 48px; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } @media screen and (max-width: 767px) { .c-switch__link { margin-top: 28px; flex-flow: column; justify-content: center; align-items: center; } } .c-switch__link .ccig-p-button { width: calc((100% - 32px) / 2); margin-right: 32px; } @media screen and (max-width: 767px) { .c-switch__link .ccig-p-button { width: 100%; margin-right: 0; } } .c-switch__link .ccig-p-button:nth-child(2n) { margin-right: 0; } @media screen and (max-width: 767px) { .c-switch__link .ccig-p-button:nth-child(2n) { margin-top: 16px; } } .c-switch__link .ccig-p-button:nth-child(n+3) { margin-top: 32px; } @media screen and (max-width: 767px) { .c-switch__link .ccig-p-button:nth-child(n+3) { margin-top: 16px; } } .c-switch__form { margin-top: 80px; padding-top: 80px; border-top: 2px solid #E4E7EB; } @media screen and (max-width: 767px) { .c-switch__form { margin-top: 48px; padding-top: 48px; } } .c-switch__form .ccig-p-button { width: 600px; margin: 32px auto 0 auto; } @media screen and (max-width: 767px) { .c-switch__form .ccig-p-button { width: 100%; margin-top: 20px; } } .c-switch__bold { font-weight: 700; line-height: 1.8em; text-align: center; } @media screen and (max-width: 767px) { .c-switch__bold { font-size: 14px; } } .dei { width: 1020px; margin: 0 auto; margin-top: 28px; } @media screen and (max-width: 767px) { .dei { max-width: calc(100% - 40px); margin: 0 auto; margin-top: 20px; } } .dei__title { font-size: 26px; line-height: 1.8em; text-align: center; color: var(--color-primary); font-weight: 500; margin-top: 150px; } @media screen and (max-width: 767px) { .dei__title { font-size: 18px; line-height: 1.6em; text-align: left; margin-top: 90px; } } .dei .hfhd-h2 { margin-top: 160px; } @media screen and (max-width: 767px) { .dei .hfhd-h2 { margin-top: 114px; } } .dei .hfhd-h2--top { margin-top: 180px; } @media screen and (max-width: 767px) { .dei .hfhd-h2--top { margin-top: 120px; } } .dei .primary-button { width: 494px; margin-right: auto; margin-top: 4cqb; } @media screen and (max-width: 767px) { .dei .primary-button { width: 100%; margin-top: 30px; } } .dei .table { margin-top: 30px; } .dei .table th { width: 340px; } @media screen and (max-width: 767px) { .dei .table th { width: 110px; } } .dei .table td img { width: 160px; height: auto; display: block; margin: 0 auto; } @media screen and (max-width: 767px) { .dei .table td img { width: 80px; } } .c-contact { margin-top: 160px; } @media screen and (max-width: 767px) { .c-contact { margin-top: 80px; } } /*# sourceMappingURL=dei.css.map */