@charset "UTF-8"; body { font-family: Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; background: var(--bg, linear-gradient(102deg, #1C44A3 8.61%, #122D6E 77.02%)); } /*** 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 */ 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; -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; } .cta { display: inline-flex; align-items: center; width: auto; padding: 40px; background: linear-gradient(102deg, rgba(59, 104, 211, 0.08) 8.61%, rgba(18, 43, 168, 0.08) 77.02%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #1F3466; box-sizing: border-box; } .cta_wrap { text-align: center; } @media screen and (max-width: 767px) { .cta_wrap { margin-top: -32px; } } @media screen and (max-width: 767px) { .cta { width: calc(100% - 32px); margin: 0 auto; padding: 32px 24px; flex-flow: column; } } .cta_textWrap { text-align: left; } .cta_subText { font-size: 24px; line-height: 1.5; } @media screen and (max-width: 767px) { .cta_subText { font-size: 16px; } } .cta_mainText { font-size: 36px; line-height: 1.5; font-weight: bold; } @media screen and (max-width: 767px) { .cta_mainText { font-size: 24px; } } .cta a { display: flex; justify-content: center; align-items: center; gap: 4px; background: #fff; border: solid 2px #06C755; color: #06C755; font-size: 20px; font-weight: bold; width: 260px; height: 54px; border-radius: 32px; padding: 8px; box-sizing: border-box; box-shadow: 0px 2px 12px 0px rgba(42, 238, 153, 0.4); transition: all 0.3s; } @media screen and (max-width: 767px) { .cta a { font-size: 16px; margin-top: 32px; } } .cta a img { width: 36px; height: 36px; } @media screen and (max-width: 767px) { .cta a img { width: 32px; height: 32px; } } .cta a:hover { background: #06C755; color: #FFF; transition: all 0.3s; } .header { position: absolute; top: 0; display: flex; padding: 32px 64px; justify-content: space-between; width: 100%; box-sizing: border-box; z-index: 10; } @media screen and (max-width: 767px) { .header { padding: 16px; } } .header h1 img { width: auto; height: 54px; } @media screen and (max-width: 767px) { .header h1 img { width: auto; height: 32px; } } .header_links { display: flex; gap: 16px; align-items: center; } .header_links a { display: flex; justify-content: center; align-items: center; gap: 4px; background: #fff; border: solid 2px #06C755; color: #06C755; font-size: 16px; font-weight: bold; width: 260px; height: 54px; border-radius: 32px; padding: 8px; box-sizing: border-box; box-shadow: 0px 2px 12px 0px rgba(42, 238, 153, 0.4); transition: all 0.4s; } @media screen and (max-width: 767px) { .header_links a { width: 160px; height: 32px; padding: 4px; font-size: 12px; } } .header_links a img { width: 36px; height: 36px; } @media screen and (max-width: 767px) { .header_links a img { width: 20px; height: 20px; } } .header_links a:hover { background: #06C755; color: #FFF; transition: all 0.4s; } .hamburger { position: relative; z-index: 100; width: 56px; height: 56px; border: none; background: #fff; border-radius: 32px; cursor: pointer; box-shadow: 0px 2px 12px 0px rgba(221, 221, 255, 0.4); } @media screen and (max-width: 767px) { .hamburger { width: 32px; height: 32px; } } .hamburger_line { position: absolute; left: 15px; width: 26px; height: 2px; background-color: #1F3466; transition: all 0.4s; } @media screen and (max-width: 767px) { .hamburger_line { width: 16px; left: 8px; } } .hamburger_line:nth-of-type(1) { top: 18px; } @media screen and (max-width: 767px) { .hamburger_line:nth-of-type(1) { top: 9px; } } .hamburger_line:nth-of-type(2) { top: 27px; } @media screen and (max-width: 767px) { .hamburger_line:nth-of-type(2) { top: 15px; } } .hamburger_line:nth-of-type(3) { top: 36px; } @media screen and (max-width: 767px) { .hamburger_line:nth-of-type(3) { top: 21px; } } /* メニューオープン時 */ .hamburger.active { background: var(--TSO_button, linear-gradient(90deg, #1F3466 0%, #0B3EAC 100%)); } .hamburger.active .hamburger_line:nth-of-type(1) { transform: translateY(9px) rotate(-45deg); background-color: #fff; } @media screen and (max-width: 767px) { .hamburger.active .hamburger_line:nth-of-type(1) { transform: translateY(6px) rotate(-45deg); } } .hamburger.active .hamburger_line:nth-of-type(2) { opacity: 0; background-color: #fff; } .hamburger.active .hamburger_line:nth-of-type(3) { transform: translateY(-9px) rotate(45deg); background-color: #fff; } @media screen and (max-width: 767px) { .hamburger.active .hamburger_line:nth-of-type(3) { transform: translateY(-6px) rotate(45deg); } } .nav { position: absolute; top: 100px; right: 67px; width: 400px; padding: 32px; border-radius: 8px; background: linear-gradient(102deg, rgba(28, 68, 163, 0.8) 8.61%, rgba(18, 45, 110, 0.8) 77.02%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0px 2px 12px 0px rgba(221, 221, 255, 0.4); opacity: 0; transition: all 0.4s; z-index: 90; pointer-events: none; } @media screen and (max-width: 767px) { .nav { top: 54px; right: 16px; width: 260px; padding: 24px; } } .nav.active { opacity: 1; pointer-events: all; } .nav_list { display: flex; flex-flow: column; gap: 24px; margin: 0; list-style: none; } .nav_link { position: relative; display: block; color: #fff; font-size: 24px; font-weight: bold; text-decoration: none; } .nav_link::before, .nav_link::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0; width: 18.3px; height: 2px; border-radius: 9999px; background-color: #ffffff; transform-origin: calc(100% - 1px) 50%; } @media screen and (max-width: 767px) { .nav_link::before, .nav_link::after { width: 12px; } } .nav_link::before { transform: rotate(42.5deg); } .nav_link::after { transform: rotate(-42.5deg); } @media screen and (max-width: 767px) { .nav_link { font-size: 16px; } } .footer { background: linear-gradient(170deg, #FFF 4.59%, #E7EEFF 92.29%); } .footer_logo { display: flex; gap: 24px; } .footer_link { position: relative; top: -120px; display: flex; gap: 24px; justify-content: center; } @media screen and (max-width: 767px) { .footer_link { flex-flow: column; padding: 0 16px; align-items: center; gap: 32px; } } .footer_link a { width: 480px; overflow: hidden; position: relative; transition: all 0.3s; } @media screen and (max-width: 767px) { .footer_link a { width: calc(100% - 32px); } } .footer_link a img { width: 100%; height: auto; transition: all 0.3s; } .footer_link a span { display: inline-block; width: 180px; padding: 12px 24px; font-size: 14px; font-weight: bold; border-radius: 36px; box-sizing: border-box; position: absolute; right: 24px; bottom: 24px; border: 2px solid #EBF1FF; background: var(--TSO_button_w, linear-gradient(90deg, #EBF1FF 0%, #FFF 100%)); box-shadow: 0px 2px 12px 0px rgba(221, 221, 255, 0.4); color: #1F3466; text-align: left; transition: all 0.3s; } @media screen and (max-width: 1440px) and (min-width: 768px) { .footer_link a span { width: 180px; padding: 12px 24px; font-size: 16px; margin-top: 40px; } } .footer_link a span::after { content: ""; position: absolute; top: calc(50% - 10px); right: 24px; display: inline-block; width: 12px; height: 20px; background: #1F3466; -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%); clip-path: polygon(0 0, 0 100%, 100% 50%); } @media screen and (max-width: 767px) { .footer_link a span::after { top: calc(50% - 8px); width: 8px; height: 14px; } } .footer_link a:hover img { transform: scale(1.1, 1.1); } .footer_link a:hover span { background: var(--TSO_button, linear-gradient(90deg, #1F3466 0%, #0B3EAC 100%)); color: #fff; transition: all 0.3s; } .footer_link a:hover span::after { content: ""; position: absolute; top: calc(50% - 10px); right: 24px; display: inline-block; width: 12px; height: 20px; background: #fff; -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%); clip-path: polygon(0 0, 0 100%, 100% 50%); } .footer_pageLinkWrap { padding: 32px 80px; margin-top: 56px; } @media screen and (max-width: 767px) { .footer_pageLinkWrap { padding: 32px 16px; } } .footer_logoImg { width: 240px; height: auto; } @media screen and (max-width: 767px) { .footer_logoImg { width: 120px; } } .footer_pageLink { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; gap: 64px; } @media screen and (max-width: 767px) { .footer_pageLink { flex-flow: column; align-items: normal; margin-top: 40px; gap: 40px; } } .footer_catchImg { width: 400px; height: auto; } @media screen and (max-width: 767px) { .footer_catchImg { width: 256px; } } @media screen and (max-width: 767px) { .footer_linkList { display: flex; flex-flow: wrap; gap: 12px; } } .footer_linkList li { display: inline-block; margin-right: 24px; } .footer_linkList a { color: #1F3466; font-size: 20px; font-weight: bold; } .footer small { display: inline-block; width: 100%; font-size: 16px; text-align: right; margin-top: 16px; } @media screen and (max-width: 767px) { .footer small { margin-top: 40px; } } .slide { width: 100vw; } .slick-slider { margin: 0; padding: 0; } .slick-slider img { width: 100%; height: 100%; } .content_wrap { position: relative; -webkit-clip-path: polygon(0 6vw, 100% 0, 100% calc(100% - 6vw), 0 100%); clip-path: polygon(0 6vw, 100% 0, 100% calc(100% - 6vw), 0 100%); margin-top: -6.5vw; } @media screen and (max-width: 767px) { .content_wrap { margin-top: -8.5vw; } } @media screen and (max-width: 767px) { .content_wrap--whiteGradient { background: linear-gradient(170deg, #FFF 4.59%, #E7EEFF 92.29%); } } .content_wrap--white { background: #fff; color: #1F3466; } .content_wrap--about { color: #fff; } .content_wrap--aboutWhite { background: #fff; color: #1F3466; } .content_wrap--aboutWhiteCompany { -webkit-clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%); background: #fff; color: #1F3466; } .content_wrap--reqruitWhite { background: #fff; padding: 12vw 96px; text-align: center; } @media screen and (max-width: 767px) { .content_wrap--reqruitWhite { padding: 12vw 16px 24vw; text-align: left; } } .content_wrap--reqruitWhiteBottom { -webkit-clip-path: polygon(0 5.5vw, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 5.5vw, 100% 0, 100% 100%, 0 100%); } @media screen and (max-width: 767px) { .content_wrap--reqruitWhiteBottom { margin-top: -7.5vw; } } @media screen and (max-width: 767px) { .content_wrap--reqruitWhiteBg { background: linear-gradient(102deg, rgba(59, 104, 211, 0.08) 8.61%, rgba(18, 43, 168, 0.08) 77.02%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); width: 100%; padding: 32px 24px; } } .content_wrap--reqruitWhiteBg a { display: flex; justify-content: center; align-items: center; gap: 4px; background: #fff; border: solid 2px #06C755; color: #06C755; font-size: 20px; font-weight: bold; width: 320px; height: 54px; border-radius: 32px; padding: 8px; box-sizing: border-box; box-shadow: 0px 2px 12px 0px rgba(42, 238, 153, 0.4); transition: all 0.4s; margin: 40px auto 0; } @media screen and (max-width: 767px) { .content_wrap--reqruitWhiteBg a { font-size: 16px; margin-top: 32px; width: 256px; height: 50px; } } .content_wrap--reqruitWhiteBg a img { width: 36px; height: 36px; } @media screen and (max-width: 767px) { .content_wrap--reqruitWhiteBg a img { width: 32px; height: 32px; } } .content_wrap--reqruitWhiteBg a:hover { background: #06C755; color: #FFF; transition: all 0.4s; } .content_wrapImg { position: relative; top: 0; left: 0; width: 100%; height: auto; } .content_main { position: absolute; z-index: 10; width: 606px; height: -moz-fit-content; height: fit-content; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_main { width: calc(50% - 96px); } } @media screen and (max-width: 767px) { .content_main { position: static; width: 100%; padding: 54px 16px 80px 16px; box-sizing: border-box; } } .content_main--right { top: 0; bottom: 0; right: 80px; margin: auto 0; color: #1F3466; } .content_main--left { top: 0; bottom: 0; left: 80px; margin: auto 0; color: #fff; } .content_main--leftReqruit { top: 120px; color: #1F3466; } .content_interviewWrap { display: flex; align-items: center; gap: 80px; padding: 80px 0 16vw; overflow: hidden; } @media screen and (max-width: 767px) { .content_interviewWrap { flex-wrap: wrap; gap: 0; padding: 54px 0 240px 0; } } .content_interviewWrap--reqruit { display: inline-block; padding: 80px 0 0; } @media screen and (max-width: 767px) { .content_interviewWrap--reqruit { padding: 54px 0 0 0; } } .content_interviewText { color: #fff; margin-left: 80px; } @media screen and (max-width: 767px) { .content_interviewText { margin: 0; padding: 0px 16px; } } .content_interviewImg { display: flex; width: 100%; gap: 24px; right: -24px; position: relative; } @media screen and (max-width: 767px) { .content_interviewImg { flex-wrap: wrap; margin-top: 40px; justify-content: end; } } .content_interviewImgItem { position: relative; width: calc(50% - 24px); transform: skewY(-3deg); overflow: hidden; } .content_interviewImgItem:first-of-type { margin-top: 18px; } @media screen and (max-width: 767px) { .content_interviewImgItem { width: calc(100% - 16px); } } .content_interviewImgItem a img { width: 100%; height: auto; transition: all 0.3s; } @media screen and (max-width: 767px) { .content_interviewImgItem a img { width: 100%; position: relative; } } .content_interviewImgItem a:hover img { transform: scale(1.1, 1.1); transition: all 0.3s; } .content_interviewImgItem p { position: absolute; left: 0; bottom: 48px; color: #fff; font-size: 28px; font-weight: bold; padding: 0 24px; box-sizing: border-box; line-height: 1.2; transform: skewY(3deg); } @media screen and (max-width: 767px) { .content_interviewImgItem p { width: calc(100% - 32px); font-size: 24px; padding: 0 16px; bottom: 32px; } } .content_title h2 { font-family: "Hiragino Kaku Gothic Std"; font-size: 64px; color: inherit; line-height: 1.2; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_title h2 { font-size: 48px; } } @media screen and (max-width: 767px) { .content_title h2 { font-size: 40px; } } .content_title span { font-family: "Hiragino Kaku Gothic Std"; font-size: 20px; line-height: 1.2; color: inherit; opacity: 0.6; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_title span { font-size: 20px; } } @media screen and (max-width: 767px) { .content_title span { font-size: 16px; } } .content_title--interview h2 { font-size: 64px; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_title--interview h2 { font-size: 48px; } } @media screen and (max-width: 767px) { .content_title--interview h2 { font-size: 40px; } } .content_title--reqruit h2 { font-size: 56px; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_title--reqruit h2 { font-size: 48px; } } @media screen and (max-width: 767px) { .content_title--reqruit h2 { font-size: 32px; } } .content_title--reqruitTop h2 { width: -moz-fit-content; width: fit-content; font-size: 56px; margin-top: 120px; padding: 4px; background: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_title--reqruitTop h2 { font-size: 48px; } } @media screen and (max-width: 767px) { .content_title--reqruitTop h2 { width: auto; padding: 0; background: none; font-size: 32px; margin-top: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } } .content_title--reqruitTop span { background: #fff; } .content_text { font-size: 20px; line-height: 1.5; margin-top: 56px; color: inherit; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_text { margin-top: 32px; font-size: 14px; } } @media screen and (max-width: 767px) { .content_text { font-size: 14px; margin-top: 40px; } } .content_text--reqruitTop { background: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 4px; } @media screen and (max-width: 767px) { .content_text--reqruitTop { background: none; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } } .content_link { display: inline-block; width: 100%; } .content_link--right { text-align: right; } .content_link--left { text-align: left; } @media screen and (max-width: 767px) { .content_link--left { text-align: right; } } .content_link--blue { position: relative; border: 2px solid #1F3466; background: var(--TSO_button, linear-gradient(90deg, #1F3466 0%, #0B3EAC 100%)); box-shadow: 0px 2px 12px 0px rgba(46, 49, 233, 0.4); color: #FFF; text-align: left; transition: all 0.3s; } .content_link--blue::after { content: ""; position: absolute; top: calc(50% - 10px); right: 24px; display: inline-block; width: 12px; height: 20px; background: #ffffff; -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%); clip-path: polygon(0 0, 0 100%, 100% 50%); } .content_link--blue:hover { background: var(--TSO_button_w, linear-gradient(90deg, #EBF1FF 0%, #FFF 100%)); color: #1F3466; transition: all 0.3s; } .content_link--blue:hover::after { content: ""; position: absolute; top: calc(50% - 10px); right: 24px; display: inline-block; width: 12px; height: 20px; background: #1F3466; -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%); clip-path: polygon(0 0, 0 100%, 100% 50%); } .content_link--white { position: relative; border: 2px solid #EBF1FF; background: var(--TSO_button_w, linear-gradient(90deg, #EBF1FF 0%, #FFF 100%)); box-shadow: 0px 2px 12px 0px rgba(221, 221, 255, 0.4); color: #1F3466; text-align: left; transition: all 0.3s; } .content_link--white::after { content: ""; position: absolute; top: calc(50% - 10px); right: 24px; display: inline-block; width: 12px; height: 20px; background: #1F3466; -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%); clip-path: polygon(0 0, 0 100%, 100% 50%); } .content_link--white:hover { background: var(--TSO_button, linear-gradient(90deg, #1F3466 0%, #0B3EAC 100%)); color: #fff; transition: all 0.3s; } .content_link--white:hover::after { content: ""; position: absolute; top: calc(50% - 10px); right: 24px; display: inline-block; width: 12px; height: 20px; background: #fff; -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%); clip-path: polygon(0 0, 0 100%, 100% 50%); } .content_link--whiteInterview { margin-right: 16px; } .content_link a { display: inline-block; width: 320px; padding: 20px 24px; margin-top: 56px; font-size: 20px; font-weight: bold; border-radius: 36px; box-sizing: border-box; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_link a { width: 280px; padding: 12px 24px; font-size: 16px; margin-top: 40px; } } @media screen and (max-width: 767px) { .content_link a { padding: 12px 24px; } } .content_reqruitInterview { position: relative; width: calc(100% - 96px); margin: 0 0 0 auto; } @media screen and (max-width: 767px) { .content_reqruitInterview { width: auto; margin-top: 40px; } } .content_reqruitInterview--bottom { margin: 0 auto 0 0; } .content_reqruitInterviewContent { position: absolute; top: 50%; right: 32px; color: #1F3466; width: 50%; transform: translateY(-50%); } @media screen and (max-width: 767px) { .content_reqruitInterviewContent { position: static; width: 100%; transform: translateY(0); margin-top: -5px; padding: 24px 16px 64px 24px; background: #fff; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%); } } .content_reqruitInterviewContent--bottom { right: 0; left: 32px; } .content_reqruitInterviewTitle { font-size: 32px; font-weight: bold; line-height: 1.5; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_reqruitInterviewTitle { font-size: 24px; } } @media screen and (max-width: 767px) { .content_reqruitInterviewTitle { font-size: 24px; } } .content_reqruitInterviewText { font-size: 16px; line-height: 1.8; margin-top: 40px; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_reqruitInterviewText { font-size: 14px; } } @media screen and (max-width: 767px) { .content_reqruitInterviewText { font-size: 14px; margin-top: 24px; } } .content_reqruitContentBg { background: linear-gradient(102deg, rgba(59, 104, 211, 0.08) 8.61%, rgba(18, 43, 168, 0.08) 77.02%); padding: 48px; margin-top: 64px; } @media screen and (max-width: 767px) { .content_reqruitContentBg { padding: 24px 16px; margin-top: 32px; } } .content_reqruitContentBg_title { font-size: 40px; font-weight: bold; color: #1F3466; } @media screen and (max-width: 767px) { .content_reqruitContentBg_title { font-size: 24px; } } .content_reqruitJobList { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 24px; } @media screen and (max-width: 767px) { .content_reqruitJobList { flex-flow: column; } } .content_reqruitJobItem { width: calc(50% - 16px); height: 180px; box-shadow: 0px 2px 12px 0px rgba(46, 49, 233, 0.4); cursor: pointer; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_reqruitJobItem { height: 140px; } } @media screen and (max-width: 767px) { .content_reqruitJobItem { width: 100%; height: 140px; } } .content_reqruitJobButton { display: inline-block; width: 100%; height: 100%; font-size: 32px; background: url("https://2024083115525833k366.com/wp-content/themes/massive_tcd084/img/250610/reqruit/job/01.png"); color: #fff; position: relative; background-size: cover; cursor: pointer; } @media screen and (max-width: 1440px) and (min-width: 768px) { .content_reqruitJobButton { font-size: 20px; } } @media screen and (max-width: 767px) { .content_reqruitJobButton { font-size: 20px; } } .content_reqruitJobButton img { width: 100%; height: auto; } .content_reqruitJobButton span { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); z-index: 10; } .content_reqruitStepList { display: flex; gap: 32px; margin-top: 24px; flex-flow: column; } @media screen and (max-width: 767px) { .content_reqruitStepList { gap: 24px; flex-flow: column; } } .content_reqruitStepItem { position: relative; background: #FFF; display: flex; padding: 32px; justify-content: space-between; align-items: center; gap: 16px; } .content_reqruitStepItem:not(:last-child)::before { content: ""; position: absolute; top: 120px; left: 68px; width: 1px; border-right: 2px dashed rgba(31, 52, 102, 0.2); height: calc(100% - 20px); z-index: 10; } @media screen and (max-width: 960px) { .content_reqruitStepItem:not(:last-child)::before { top: 80px; left: 52px; } } @media screen and (max-width: 767px) { .content_reqruitStepItem:not(:last-child)::before { top: 40px; left: 26px; height: 100%; } } @media screen and (max-width: 960px) { .content_reqruitStepItem { flex-flow: column; align-items: flex-start; padding: 16px; } } .content_reqruitStepContent { display: flex; gap: 48px; align-items: center; } @media screen and (max-width: 960px) { .content_reqruitStepContent { gap: 8px; align-items: flex-start; } } .content_reqruitStepNum { width: 72px; height: auto; z-index: 2; } @media screen and (max-width: 767px) { .content_reqruitStepNum { width: 24px; } } .content_reqruitStepTitle { font-size: 24px; font-weight: bold; } @media screen and (max-width: 767px) { .content_reqruitStepTitle { font-size: 16px; } } .content_reqruitStepText { font-size: 16px; margin-top: 8px; } @media screen and (max-width: 767px) { .content_reqruitStepText { font-size: 14px; } } .content_reqruitStepImg { width: 280px; height: auto; } @media screen and (max-width: 960px) { .content_reqruitStepImg { width: calc(100% - 80px); margin: 0 0 0 auto; } } @media screen and (max-width: 767px) { .content_reqruitStepImg { width: calc(100% - 32px); margin: 0 0 0 auto; } } .modal { background-color: #fff; width: calc(100% - 240px); height: calc(100% - 240px); overflow: auto; -webkit-backdrop-filter: blur(7px); transition: opacity 0.5s; border: none; margin: auto; padding: 0; } .modal::backdrop { background: linear-gradient(102deg, rgba(18, 45, 110, 0.8) 23.42%, rgba(0, 20, 67, 0.8) 91.83%); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } @media screen and (max-width: 1440px) and (min-width: 768px) { .modal { width: calc(100% - 64px); height: calc(100% - 64px); } } @media screen and (max-width: 767px) { .modal { width: calc(100% - 32px); height: calc(100% - 32px); } } .modal_container { position: relative; padding: 48px 56px; } @media screen and (max-width: 767px) { .modal_container { padding: 16px; } } .modal_title { color: #1F3466; font-size: 40px; font-weight: bold; margin-bottom: 48px; } @media screen and (max-width: 767px) { .modal_title { font-size: 16px; margin-bottom: 24px; } } .modal_table { color: #1F3466; border: solid 1px #1F3466; margin-bottom: 64px; } .modal_tr:not(:first-of-type) { border-top: solid 1px #1F3466; } .modal_th { font-size: 24px; font-weight: bold; border: solid 1px #1F3466; padding: 24px; width: 196px; box-sizing: border-box; vertical-align: middle; } @media screen and (max-width: 767px) { .modal_th { font-size: 12px; width: 96px; padding: 16px; vertical-align: top; } } .modal_td { font-size: 20px; line-height: 1.8; padding: 24px; } @media screen and (max-width: 767px) { .modal_td { font-size: 12px; padding: 16px; } } .icon-close { color: #1F3466; width: 24px; height: 24px; position: absolute; top: 24px; right: 24px; cursor: pointer; } @media screen and (max-width: 767px) { .icon-close { top: 12px; right: 12px; } } .icon-close:before, .icon-close:after { content: ""; position: absolute; top: 12px; width: 24px; height: 4px; background-color: #1F3466; border-radius: 4px; } .icon-close:before { transform: rotate(-45deg); } .icon-close:after { transform: rotate(45deg); } .iframe_wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 48px; } @media screen and (max-width: 767px) { .iframe_wrapper { margin-top: 32px; } } .iframe_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about_wrap { max-width: 1248px; width: 100%; padding: 14vw 96px; box-sizing: border-box; margin: 0 auto; } @media screen and (max-width: 767px) { .about_wrap { padding: 20vw 16px; } } .about_wrap--relative { position: relative; padding: 14vw 96px 240px; } @media screen and (max-width: 767px) { .about_wrap--relative { padding: 20vw 16px 240px; } } .about_officeImg { position: absolute; top: 360px; right: 80px; width: 320px; height: auto; } @media screen and (max-width: 767px) { .about_officeImg { width: 160px; top: 180px; right: 16px; } } .about_businessList { display: flex; flex-flow: column; gap: 40px; margin-top: 48px; } @media screen and (max-width: 767px) { .about_businessList { gap: 32px; margin-top: 32px; } } .about_businessItem { display: flex; background: #fff; color: #1F3466; } @media screen and (max-width: 767px) { .about_businessItem { flex-flow: column; } } .about_businessItem img { width: 364px; height: auto; -o-object-fit: contain; object-fit: contain; } @media screen and (max-width: 767px) { .about_businessItem img { width: 100%; } } .about_businessItem div { padding: 24px; box-sizing: border-box; } @media screen and (max-width: 767px) { .about_businessItem div { padding: 16px; } } .about_businessTitle { font-size: 24px; font-weight: bold; color: inherit; } @media screen and (max-width: 767px) { .about_businessTitle { font-size: 20px; } } .about_businessText { font-size: 14px; line-height: 1.5; color: inherit; margin-top: 16px; } .about_profile { display: flex; align-items: center; gap: 48px; color: #1F3466; margin-top: 96px; } @media screen and (max-width: 767px) { .about_profile { flex-flow: column; justify-content: center; margin-top: 64px; gap: 32px; } } .about_profile img { width: 320px; height: auto; } @media screen and (max-width: 767px) { .about_profile img { width: 240px; } } .about_profilePost { font-size: 24px; } @media screen and (max-width: 767px) { .about_profilePost { font-size: 14px; } } .about_profileName { font-size: 40px; font-weight: bold; } @media screen and (max-width: 767px) { .about_profileName { font-size: 32px; } } .about_profileText { font-size: 20px; line-height: 1.8; } @media screen and (max-width: 767px) { .about_profileText { font-size: 14px; } } .about_content { margin-top: 80px; } .about_contentTitle { font-size: 40px; font-weight: bold; color: inherit; } .about_contentText { font-size: 20px; line-height: 1.5; margin-top: 16px; } .about_galleryList { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; } @media screen and (max-width: 767px) { .about_galleryList { gap: 16px; } } .about_galleryItem { width: calc(25% - 18px); } @media screen and (max-width: 767px) { .about_galleryItem { width: calc(50% - 8px); } } .about_annualSales { margin-top: 32px; } .about_list { display: flex; flex-flow: column; gap: 32px; padding: 0 80px; margin-top: 80px; } @media screen and (max-width: 767px) { .about_list { margin-top: 32px; padding: 0; } } .about_itemTitle { font-size: 20px; font-weight: bold; line-height: 1.4; color: inherit; } .about_itemText { font-size: 16px; line-height: 1.4; color: inherit; margin: 8px 0 0 8px; } .about_itemBranch { display: flex; flex-flow: wrap; gap: 8px 16px; margin: 8px 0 0 8px; } .about_boardMemberWrap { display: flex; gap: 24px; margin-top: 8px; } @media screen and (max-width: 767px) { .about_boardMemberWrap { flex-flow: wrap; gap: 16px; } } .about_boardMember { width: calc(100% - 30px); text-align: center; } .about_boardMember img { width: 100%; height: auto; } @media screen and (max-width: 767px) { .about_boardMember { width: calc(50% - 8px); } } .about_boardMemberText { font-size: 16px; line-height: 1.4; } @media screen and (max-width: 767px) { .about_boardMemberText { font-size: 12px; } } .about_boardMemberName { font-size: 24px; font-weight: bold; line-height: 1.4; } @media screen and (max-width: 767px) { .about_boardMemberName { font-size: 16px; } } .about_organizationChart { margin-top: 8px; } .about_history { position: relative; display: flex; gap: 32px; flex-flow: column; margin: 24px 0 0 64px; } .about_history::before { content: ""; position: absolute; top: 4px; left: 9px; width: 2px; height: calc(100% - 20px); background: rgba(31, 52, 102, 0.2); } @media screen and (max-width: 767px) { .about_history::before { height: calc(100% - 36px); } } @media screen and (max-width: 767px) { .about_history { margin-left: 0; } } .about_historyItem { display: flex; gap: 16px; align-items: center; padding-left: 36px; color: #1F3466; position: relative; } .about_historyItem::before { content: ""; position: absolute; top: 4px; left: 0; width: 20px; height: 20px; border-radius: 10px; background: linear-gradient(90deg, #1F3466 0%, #0B3EAC 100%); border: 2px rgba(31, 52, 102, 0.2); } @media screen and (max-width: 767px) { .about_historyItem { flex-flow: column; gap: 0; align-items: normal; } } .about_historyDate { font-size: 20px; font-weight: bold; line-height: 1.4; } @media screen and (max-width: 767px) { .about_historyDate { font-size: 14px; } } .about_historyText { font-size: 16px; line-height: 1.4; } @media screen and (max-width: 767px) { .about_historyText { font-size: 14px; } } .reqruit_wrap { max-width: 1248px; width: 100%; padding: 14vw 96px; box-sizing: border-box; margin: 0 auto; } @media screen and (max-width: 767px) { .reqruit_wrap { padding: 20vw 16px 56vw; } } @keyframes infinity-scroll-right { from { transform: translateX(-100%); } to { transform: translateX(0%); } } .scrollWrap { width: 110%; overflow: hidden; transform: rotate(-3.5deg); margin-top: -3.5vw; } .scroll-infinity { padding: 5.5vw 0 3vw; margin-top: -5.5vw; } .scroll-infinity_wrap { display: flex; width: 110%; } .scroll-infinity_list { display: flex; list-style: none; padding: 0; } .scroll-infinity_list--right { animation: infinity-scroll-right 20s infinite linear 0.5s both; } .scroll-infinity_item { width: 28vw; } .scroll-infinity_item > img { width: 100%; } .js-fadein { opacity: 0; transform: translate(0, 0); transition: all 0.3s; } .js-fadein.scrollin { opacity: 1 !important; transform: translate(0, 0) !important; } html:has(dialog[open]) { overflow: hidden; } main { overflow: hidden; } .pc_only { display: inline-block; } @media screen and (max-width: 767px) { .pc_only { display: none; } } .sp_only { display: none; } @media screen and (max-width: 767px) { .sp_only { display: inline-block; } } .color_navy { color: #1F3466; }/*# sourceMappingURL=style.css.map */