@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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; } /* 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; } @keyframes scrollLine { 0% { top: -100%; opacity: 0; } 50% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 0; } } @keyframes decoLeft { 0% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } 50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes decoRight { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); } 50% { clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } } @keyframes imgMosaic { 0% { filter: blur(20px); } 25% { filter: blur(17px); } 40% { filter: blur(17px); } 50% { filter: blur(10px); } 60% { filter: blur(10px); } 75% { filter: blur(5px); } 90% { filter: blur(5px); } 100% { filter: blur(0px); } } html { font-size: 62.5%; } body { background: #022A61; color: #13243A; font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size: 1.1vw; letter-spacing: 0.02em; line-height: 1.2; min-width: 375px; overflow-x: hidden; } @media screen and (min-width: 601px) { body { overflow-y: scroll; min-width: 1140px; } } @media screen and (max-width: 600px) { body { font-size: 1.4rem; } } body.is-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } img, svg { display: block; width: 100%; height: auto; max-width: 100%; image-rendering: -o-crisp-edges; image-rendering: pixelated; } @media screen and (min-width: 601px) { img, svg { width: auto; } } .c-svg-sprite { display: none; } @media screen and (max-width: 600px) { .sp-scroll { overflow-x: scroll; } } .sp-scroll::-webkit-scrollbar { height: 4px; background: white; border-radius: 10px; } .sp-scroll::-webkit-scrollbar-thumb { height: 4px; background: #0C4B9E; border-radius: 10px; } a, button { cursor: pointer; } @media screen and (min-width: 601px) { .l-wrapper { min-width: 1080px; } } .l-inner { max-width: calc(100% - 120px); margin-inline: auto; } @media screen and (max-width: 600px) { .l-inner { max-width: unset; padding-inline: 20px; } } .c-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .c-loading__text { font-size: 1.6rem; letter-spacing: 0.12em; font-weight: 500; } .c-loading__count { font-size: 3rem; letter-spacing: 0.08em; font-weight: 500; line-height: 1; margin: 8px 0; } .c-loading__indicator { width: 400px; height: 2px; margin: 16px 0 0; background-color: rgba(0, 0, 0, 0.2); } .c-loading__progress { width: 0%; height: 100%; background-color: rgba(0, 0, 0, 0.6); transition: width 0.2s ease; } .-loaded .c-loading { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; } .-loaded .c-loading__grp { transform: translate(0, -30%); transition: transform 2s ease; } .c-svg-sprite { display: none; width: 0; height: 0; opacity: 0; overflow: hidden; } .c-sectionTitle { display: flex; flex-direction: column; margin-bottom: 40px; clip-path: inset(0 100% 0 0); transition: 1s; } .c-sectionTitle.mb-0 { margin-bottom: 0; } .c-sectionTitle.is-active { clip-path: inset(0 0 0 0); } .c-sectionTitle h3 { font-family: "Kanit"; font-style: italic; font-weight: 400; color: #E4023A; font-size: 6.3vw; line-height: 1; letter-spacing: -0.02em; } .c-sectionTitle h3 span { font-family: "Gabarito"; font-weight: 400; font-size: 6.3vw; padding-right: 5px; line-height: 1; } .c-sectionTitle span { font-size: 1.4vw; font-weight: 700; } @media screen and (max-width: 600px) { .c-sectionTitle { margin-bottom: 20px; } .c-sectionTitle h3 { font-size: 4rem; } .c-sectionTitle h3 span { font-size: 4rem; padding-right: 4px; } .c-sectionTitle span { font-size: 1.4rem; } } .c-grid { position: relative; width: calc(100% - 120px); width: 100%; padding: 0 60px; margin: auto; background-color: #f8f8f8; } .c-grid::before, .c-grid::after { position: absolute; content: ""; width: 1px; height: 100%; background-color: #B1B1B1; top: 0; } .c-grid::before { left: 60px; } .c-grid::after { right: 60px; } .c-grid.paddingTop { padding-top: 60px; } @media screen and (max-width: 600px) { .c-grid.paddingTop { padding-top: 30px; } } .c-grid.paddingBottom { padding-bottom: 60px; } @media screen and (max-width: 600px) { .c-grid.paddingBottom { padding-bottom: 30px; } } .c-grid.border-top { border-top: solid 1px #B1B1B1; } .c-grid.border-bottom { border-bottom: solid 1px #B1B1B1; } .c-grid.bottom { height: 60px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } @media screen and (max-width: 600px) { .c-grid.bottom { height: 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } } .c-grid.top { height: 60px; } .c-grid.top .border-bottom { width: 100%; height: 100%; border-bottom: solid 1px #B1B1B1; } @media screen and (max-width: 600px) { .c-grid.top { height: 30px; } } @media screen and (max-width: 600px) { .c-grid { padding: 0 30px; } .c-grid::before { left: 30px; } .c-grid::after { right: 30px; } } .c-linkParts { position: relative; display: flex; align-items: center; gap: 20px; cursor: pointer; } .c-linkParts .c-linkParts__deco { position: relative; width: 25px; height: 25px; border-radius: 50%; border: solid 1px #0C4B9E; overflow: hidden; } .c-linkParts .c-linkParts__deco svg { position: absolute; content: ""; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 6px; height: 9px; transition: 0.5s; } .c-linkParts.blue span { color: #0C4B9E; } .c-linkParts.blue .c-linkParts__deco { border: solid 1px #0C4B9E; } .c-linkParts.blue .c-linkParts__deco svg { fill: #0C4B9E; } .c-linkParts.white span { color: white; } .c-linkParts.white .c-linkParts__deco { border: solid 1px white; } .c-linkParts.white .c-linkParts__deco svg { fill: white; } .c-linkParts.button { padding: 15px 45px 15px 15px; height: 60px; } .c-linkParts.button .c-linkParts__deco { position: absolute; right: 15px; } @media screen and (max-width: 600px) { .c-linkParts.button { height: 45px; } } .c-linkParts.blue.button { justify-content: center; min-width: 210px; width: -moz-fit-content; width: fit-content; background-color: #0C4B9E; border-radius: 40px; } .c-linkParts.blue.button span { color: white; } .c-linkParts.blue.button .c-linkParts__deco { border: solid 1px white; } .c-linkParts.blue.button .c-linkParts__deco svg { fill: white; } .c-linkParts.borderButton { border: 1px #0C4B9E solid; border-radius: 120px; padding: 10px 30px; } @media screen and (max-width: 600px) { .c-linkParts.borderButton { padding: 10px 20px; gap: unset; } } .c-linkParts:hover { /* アニメーション用の keyframes */ } .c-linkParts:hover .c-linkParts__deco svg { animation: slideIcon 0.5s ease-in-out forwards; } @keyframes slideIcon { 0% { left: 0; right: 0; } 40% { right: -100%; left: 0; } 49% { opacity: 0; } 50% { opacity: 1; right: unset; left: -100%; } 100% { left: 0; right: 0; } } .c-lowerMv { position: relative; width: 100%; height: auto; aspect-ratio: 3/1; background-color: #efefef; box-shadow: 0px 4px 87.5px rgba(0, 0, 0, 0.15); border-bottom: 1px solid #B1B1B1; overflow-x: clip; } @media screen and (max-width: 600px) { .c-lowerMv { height: 330px; aspect-ratio: unset; } } .c-lowerMv__title { position: absolute; display: flex; flex-direction: column; gap: 20px; top: 38%; left: 8%; clip-path: inset(0 100% 0 0); transition: 0.5s; } .c-lowerMv__title-deco { font-family: "Kanit"; font-size: 0.95vw; line-height: 1; font-weight: 500; color: #0C4B9E; } .c-lowerMv__title h2 { font-size: 3.7vw; line-height: 1; font-weight: bold; } .c-lowerMv__title.is-active { clip-path: inset(0 0 0 0); } @media screen and (max-width: 600px) { .c-lowerMv__title { top: 120px; left: 40px; gap: 10px; } .c-lowerMv__title-deco { font-size: 1.1rem; } .c-lowerMv__title h2 { font-size: 3.2rem; } } .c-lowerMv__scroll { position: absolute; display: flex; align-items: center; flex-direction: column; gap: 10px; right: 20px; bottom: 0; } .c-lowerMv__scroll span { font-family: "Kanit"; font-size: 0.95vw; font-weight: 500; writing-mode: vertical-rl; } .c-lowerMv__scroll-line { position: relative; width: 1px; height: 100px; overflow: hidden; background: none; } .c-lowerMv__scroll-line::before { content: ""; position: absolute; top: -100%; left: 0; width: 1px; height: 100%; background: #13243A; animation: scrollLine 2s infinite; } @media screen and (max-width: 600px) { .c-lowerMv__scroll { right: 7px; } .c-lowerMv__scroll span { font-size: 1.2rem; } } .c-lowerMv__deco { position: absolute; width: 55%; top: 0; bottom: 0; margin: auto; right: 10%; left: unset; pointer-events: none; } .c-lowerMv__deco img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 600px) { .c-lowerMv__deco { width: 135%; height: 160%; right: -25%; } .c-lowerMv__deco img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .c-lowerMv::before { position: absolute; content: ""; width: 1px; height: 100%; background-color: #13243A; right: 60px; } @media screen and (max-width: 600px) { .c-lowerMv::before { right: 30px; } } .c-lowerContents { position: relative; box-shadow: 0px 4px 87.5px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 600px) { .c-lowerContents { overflow-x: clip; } } .c-lowerContents__pageLink { display: flex; border-top: 1px solid #B1B1B1; border-bottom: 1px solid #B1B1B1; } .c-lowerContents__pageLink .c-linkParts { display: flex; justify-content: center; min-width: 230px; width: -moz-fit-content; width: fit-content; height: 60px; border-right: 1px solid #B1B1B1; padding: 0 10px; } .c-lowerContents__pageLink .c-linkParts span { font-size: 1.6rem; } .c-lowerContents__pageLink .c-linkParts.is-active { background-color: #0C4B9E; } @media screen and (max-width: 600px) { .c-lowerContents__pageLink { flex-direction: column; } .c-lowerContents__pageLink .c-linkParts { width: 100%; border-right: unset; border-bottom: 1px solid #B1B1B1; } .c-lowerContents__pageLink .c-linkParts:last-of-type { border-bottom: unset; } } .c-lowerContents__lineParts { display: flex; padding: 30px 60px; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .c-lowerContents__lineParts { flex-direction: column; padding: 20px; gap: 10px; } } .c-lowerContents__lineParts-label { width: 230px; font-size: 1.9vw; font-weight: bold; } @media screen and (max-width: 600px) { .c-lowerContents__lineParts-label { width: 100%; font-size: 1.8rem; } } .c-lowerContents__lineParts-details { display: flex; justify-content: center; flex-direction: column; } @media screen and (max-width: 600px) { .c-lowerContents__lineParts-details { width: 100%; } } .c-lowerContents__lineParts-details .companyInfo { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: 2em; } .c-lowerContents__lineParts-details .companyInfo__title { position: relative; padding-left: 1em; } .c-lowerContents__lineParts-details .companyInfo__title::before { position: absolute; content: ""; width: 12px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: #0C4B9E; left: 0; top: 5px; } .c-lowerContents__lineParts-details .companyInfo__address { display: flex; gap: 1em; } @media screen and (max-width: 600px) { .c-lowerContents__lineParts-details .companyInfo__address { flex-direction: column; } } .c-lowerContents__lineParts-details .companyInfo:last-of-type { margin-bottom: unset; } .c-lowerContents__lineParts-details ul li { padding-left: 1em; text-indent: -1em; line-height: 1.7; } .c-lowerContents__lineParts-details p { line-height: 1.7; } .c-lowerContents__lineParts-contents { width: calc(100% - 230px); } .c-lowerContents__lineParts.sectionTitle { padding: 25px 60px; display: flex; flex-direction: column; gap: 5px; background-color: #DEECFF; } .c-lowerContents__lineParts.sectionTitle p { font-size: 2.8rem; font-weight: 700; } .c-lowerContents__lineParts.sectionTitle span { font-family: "Kanit"; font-size: 1.1vw; color: #0C4B9E; } @media screen and (max-width: 600px) { .c-lowerContents__lineParts.sectionTitle { padding: 20px; } .c-lowerContents__lineParts.sectionTitle p { font-size: 2rem; } .c-lowerContents__lineParts.sectionTitle span { font-size: 1.4rem; } } @media screen and (max-width: 600px) { .c-lowerContents__lineParts.sp-scroll { padding: 0 0 15px; } } .c-pagination { display: flex; justify-content: space-between; height: 60px; border-top: 1px solid #B1B1B1; border-bottom: 1px solid #B1B1B1; margin-top: -1px; } .c-pagination__prev, .c-pagination__next { position: relative; display: flex; justify-content: center; align-items: center; width: 210px; background-color: #0C4B9E; } .c-pagination__prev .c-linkParts, .c-pagination__next .c-linkParts { width: 100%; justify-content: center; } .c-pagination__prev .c-linkParts.disabled, .c-pagination__next .c-linkParts.disabled { opacity: 0.6; pointer-events: none; } .c-pagination__prev .c-linkParts__deco, .c-pagination__next .c-linkParts__deco { position: absolute; } .c-pagination__prev a, .c-pagination__next a { color: white; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .c-pagination__prev a .c-linkParts__deco, .c-pagination__next a .c-linkParts__deco { position: absolute; display: flex; justify-content: center; align-items: center; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: solid 1px white; } .c-pagination__prev a .c-linkParts__deco svg, .c-pagination__next a .c-linkParts__deco svg { width: 6px; height: 9px; fill: white; } .c-pagination__contents { display: flex; justify-content: center; align-items: center; width: calc(100% - 420px); } .c-pagination__contents ul { display: flex; justify-content: center; align-items: center; gap: 5px; } .c-pagination__contents ul li { font-size: 1.8rem; font-weight: 600; font-family: "Kanit"; opacity: 0.6; } .c-pagination__contents ul li.current { color: #0C4B9E; opacity: 1; } .c-pagination__prev .c-linkParts__deco { left: 20px; transform: scale(-1, 1); } .c-pagination__next .c-linkParts__deco { right: 20px; } @media screen and (max-width: 600px) { .c-pagination__prev, .c-pagination__next { width: 60px; } .c-pagination__contents { width: calc(100% - 120px); } } .c-form { width: calc(100% - 320px); margin: 0 auto; padding: 60px 0; } @media screen and (max-width: 600px) { .c-form { width: calc(100% - 50px); } } .c-form__parts { display: flex; flex-direction: column; gap: 20px; border-bottom: 1px solid #B1B1B1; padding-bottom: 30px; margin-bottom: 30px; } .c-form__parts-label { display: flex; align-items: center; gap: 10px; font-size: 2rem; font-weight: 700; color: #3F444B; } .c-form__parts-label__deco { font-size: 1.3rem; font-weight: 700; padding: 4px 9px; border-radius: 5px; color: white; background-color: #3F444B; } .c-form__parts-label__deco.required { background-color: #0C4B9E; } .c-form__parts-label p span { padding-left: 0.5em; font-size: 1.3rem; } @media screen and (max-width: 600px) { .c-form__parts-label p span { font-size: 1.1rem; } } .c-form__parts-contents p { display: flex; gap: 5px; } .c-form .c-form__text { background-color: #FCFCFC; border: 1px solid #B1B1B1; padding: 0.5em 1em; border-radius: 5px; } .c-form .c-form__text.full { width: 100%; } @media screen and (max-width: 600px) { .c-form .c-form__text { width: 100%; } } .c-form .c-form__textarea { background-color: #FCFCFC; border: 1px solid #B1B1B1; padding: 1em; width: 100%; border-radius: 5px; } .c-form .c-form__privacyArea { width: 100%; height: 175px; overflow-y: scroll; padding: 40px; border: 1px solid #B1B1B1; border-radius: 5px; margin-bottom: 30px; } .c-form .c-form__privacyArea-title { font-size: 2rem; font-weight: 700; margin-bottom: 25px; } .c-form .c-form__privacyArea-caption { line-height: 1.7; } @media screen and (max-width: 600px) { .c-form .c-form__privacyArea { padding: 30px; } } .c-form .c-form__privacyCheck { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } .c-form .c-form__check { position: relative; transition: 0.2s; } .c-form .c-form__check input[type=checkbox] { width: 15px; height: 15px; border: solid 1px #B1B1B1; pointer-events: auto; } .c-form .c-form__check span { font-size: 1.6rem; font-weight: 900; line-height: 1; } .c-form .c-form__check label.is-check { position: relative; } .c-form .c-form__check label.is-check::before { position: absolute; content: ""; width: 10px; height: 7px; left: 3px; top: 8px; background-image: url(../images/common/icon-check.svg); background-position: center; background-size: cover; } .c-form .c-form__file { position: relative; } .c-form .c-form__buttonArea p { position: relative; width: 210px; height: 58px; margin: 0 auto; cursor: pointer; } @media screen and (max-width: 600px) { .c-form .c-form__buttonArea p { width: 100%; height: 45px; } } .c-form .c-form__buttonArea p::before, .c-form .c-form__buttonArea p::after { position: absolute; content: ""; pointer-events: none; } .c-form .c-form__buttonArea p::before { width: 20px; height: 20px; border-radius: 50%; border: 1px solid white; top: 0; right: 20px; bottom: 0; margin: auto; z-index: 1; } .c-form .c-form__buttonArea p::after { color: white; font-size: 1rem; content: ">"; top: 0; right: 27px; bottom: 0; margin: auto; height: -moz-fit-content; height: fit-content; } .c-form .c-form__buttonArea .wpcf7-submit { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0 auto; background-color: #0C4B9E; text-align: center; color: white; font-size: 1.1vw; font-weight: 500; border-radius: 200px; } @media screen and (max-width: 600px) { .c-form .c-form__buttonArea .wpcf7-submit { font-size: 1.4rem; } } .c-form .c-form__buttonArea .wpcf7-submit::before, .c-form .c-form__buttonArea .wpcf7-submit::after { position: absolute; content: ""; } .c-form .c-form__buttonArea .wpcf7-submit::before { width: 20px; height: 20px; border-radius: 50%; border: 1px solid white; top: 0; right: 20px; bottom: 0; margin: auto; } .c-imgMosaic img { filter: blur(20px); } .c-imgMosaic.-animated img { animation: imgMosaic 1.5s; filter: blur(0px); } .p-mv { position: relative; width: 100%; height: auto; aspect-ratio: 128/107; background-color: #0C4B9E; border-bottom: 1px solid #B1B1B1; z-index: 0; } .p-mv::before { position: absolute; content: ""; width: 1px; height: 100%; right: 60px; background-color: white; z-index: 2; } @media screen and (max-width: 600px) { .p-mv { min-height: 840px; } .p-mv::before { right: 30px; } } .p-mv__deco { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; max-height: 930px; z-index: 1; pointer-events: none; opacity: 0; will-change: clip-path; transform: translateZ(0); transition: 0.5s; } .p-mv__deco img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-mv__deco.-animated { animation: decoRight 0.5s forwards; opacity: 1; } .p-mv__mainArea { position: absolute; display: flex; width: 100%; height: -moz-fit-content; height: fit-content; top: 0; bottom: 0; margin: auto; z-index: 2; } @media screen and (max-width: 600px) { .p-mv__mainArea { flex-direction: column-reverse; justify-content: left; gap: 20px; padding-left: 30px; margin-top: 110px; min-height: 840px; } } .p-mv__mainArea-textArea { position: relative; display: flex; justify-content: center; flex-direction: column; width: 50%; padding: 0 100px; z-index: 1; color: white; } .p-mv__mainArea-textArea__label { font-size: 1vw; font-weight: 500; font-family: "Kanit"; margin-bottom: 30px; } .p-mv__mainArea-textArea__catch { margin-bottom: 120px; } .p-mv__mainArea-textArea__catch p { font-size: 3.7vw; font-weight: 700; margin-bottom: 30px; } .p-mv__mainArea-textArea__catch span { font-size: 0.9vw; font-weight: 500; font-family: "Kanit"; } @media screen and (max-width: 600px) { .p-mv__mainArea-textArea { padding: unset; width: -moz-fit-content; width: fit-content; } .p-mv__mainArea-textArea__label { font-size: 1.1rem; margin-bottom: 15px; } .p-mv__mainArea-textArea__catch { margin-bottom: 20px; } .p-mv__mainArea-textArea__catch p { font-size: 3.2rem; } .p-mv__mainArea-textArea__catch span { font-size: 1rem; } } .p-mv__mainArea-textArea__control { display: flex; align-items: center; position: relative; width: 100%; height: 45px; } .p-mv__mainArea-textArea__control-pagenation { position: unset; width: 50%; } .p-mv__mainArea-textArea__control-pagenation .swiper-pagination { font-family: "Kanit"; font-size: 1.8rem; font-weight: 500; text-align: left; } @media screen and (max-width: 600px) { .p-mv__mainArea-textArea__control-pagenation .swiper-pagination { font-size: 1.4rem; } } .p-mv__mainArea-textArea__control-button { position: relative; width: 50%; display: flex; justify-content: end; gap: 15px; } .p-mv__mainArea-textArea__control-button .swiper-button-prev, .p-mv__mainArea-textArea__control-button .swiper-button-next { display: flex; justify-content: center; align-items: center; position: unset; margin: unset; width: 45px; height: 45px; border: solid 1px white; border-radius: 50%; } .p-mv__mainArea-textArea__control-button .swiper-button-prev svg, .p-mv__mainArea-textArea__control-button .swiper-button-next svg { width: 10px; height: 15px; fill: white; } @media screen and (max-width: 600px) { .p-mv__mainArea-textArea__control-button .swiper-button-prev, .p-mv__mainArea-textArea__control-button .swiper-button-next { width: 38px; height: 38px; } } .p-mv__mainArea-textArea__control-button .swiper-button-prev { transform: scale(-1, 1); } .p-mv__mainArea-textArea__control-button .swiper-button-prev:after, .p-mv__mainArea-textArea__control-button .swiper-rtl .swiper-button-next:after, .p-mv__mainArea-textArea__control-button .swiper-button-next:after, .p-mv__mainArea-textArea__control-button .swiper-rtl .swiper-button-prev:after { content: ""; } .p-mv__mainArea-slide { width: 50%; z-index: 1; overflow: hidden; pointer-events: none; } .p-mv__mainArea-slide__controlArea { position: relative; } .p-mv__mainArea-slide .swiper-slide { border-radius: 4px; overflow: hidden; } @media screen and (max-width: 600px) { .p-mv__mainArea-slide { width: 100%; } } .p-mv__bgslide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; } .p-mv__bgslide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-mv__bgslide::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: #0C4B9E; opacity: 0.7; z-index: 2; pointer-events: none; } .p-mv__newsArea { position: absolute; display: flex; justify-content: center; flex-direction: column; max-width: 630px; width: 100%; height: auto; aspect-ratio: 63/20; background-color: #f8f8f8; left: 0; bottom: 0; border-top-right-radius: 6px; border-bottom-right-radius: 0px; padding: 50px; z-index: 1; } .p-mv__newsArea-label { color: #E4023A; font-family: "Kanit"; font-size: 1.9vw; font-weight: 500; margin-bottom: 25px; } @media screen and (max-width: 600px) { .p-mv__newsArea-label { font-size: 2.4rem; } } .p-mv__newsArea a { display: flex; flex-direction: column; gap: 10px; } .p-mv__newsArea a .p-mv__newsArea-metaArea { display: flex; align-items: center; gap: 0.5em; } .p-mv__newsArea a .p-mv__newsArea-metaArea__cat { font-size: 0.95vw; font-weight: 500; padding: 3px; border: 1px solid #0C4B9E; border-radius: 3px; line-height: 1; } @media screen and (max-width: 600px) { .p-mv__newsArea a .p-mv__newsArea-metaArea__cat { font-size: 1.2rem; } } .p-mv__newsArea a .p-mv__newsArea-metaArea__date { font-family: "Kanit"; font-size: 0.8vw; font-weight: 500; } @media screen and (max-width: 600px) { .p-mv__newsArea a .p-mv__newsArea-metaArea__date { font-size: 1rem; } } .p-mv__newsArea a .p-mv__newsArea-title { font-size: 1.1vw; font-weight: bold; text-decoration: underline; line-height: 1.4; } @media screen and (max-width: 600px) { .p-mv__newsArea a .p-mv__newsArea-title { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 1.4rem; } } @media screen and (max-width: 600px) { .p-mv__newsArea { width: calc(100% - 80px); height: 185px; padding: 25px; aspect-ratio: unset; z-index: 5; } } .p-mv__scroll { position: absolute; display: flex; align-items: center; flex-direction: column; gap: 10px; right: 20px; bottom: 0; } .p-mv__scroll span { font-family: "Kanit"; font-size: 0.95vw; font-weight: 500; writing-mode: vertical-rl; color: white; } .p-mv__scroll-line { position: relative; width: 1px; height: 100px; overflow: hidden; background: none; } .p-mv__scroll-line::before { content: ""; position: absolute; top: -100%; left: 0; width: 1px; height: 100%; background: white; animation: scrollLine 2s infinite; } @media screen and (max-width: 600px) { .p-mv__scroll { right: 6px; } .p-mv__scroll span { font-size: 1.2rem; } } .p-mv__infoArea { position: absolute; display: flex; gap: 25px; z-index: 1; right: 15%; bottom: 120px; color: white; font-family: "Kanit"; font-size: 0.8vw; font-weight: 500; } .p-mv__infoArea-googlemap { text-decoration: underline; } .p-mv__infoArea-address { opacity: 0.5; } .p-mv__infoArea-snsLink { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .p-mv__infoArea-snsLink svg { width: 15px; height: 15px; fill: white; } .p-topabout { padding: 60px 0; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-topabout { padding: 40px 0; } } .p-topabout__contents { display: flex; align-items: center; gap: 70px; } @media screen and (max-width: 600px) { .p-topabout__contents { flex-direction: column; gap: 20px; } } .p-topabout__contents-visualArea { display: flex; content: ""; width: 50%; height: 100%; aspect-ratio: 1/1; } .p-topabout__contents-visualArea canvas { border-radius: 50%; } @media screen and (max-width: 600px) { .p-topabout__contents-visualArea { width: 100%; } .p-topabout__contents-visualArea canvas { width: 100%; height: 100%; } } .p-topabout__contents-textArea { width: calc(50% - 70px); display: flex; flex-direction: column; align-items: end; gap: 40px; } .p-topabout__contents-textArea__catch { width: 100%; font-size: 1.88vw; font-weight: 700; line-height: 1.3; } @media screen and (max-width: 600px) { .p-topabout__contents-textArea__catch { font-size: 2.4rem; } } .p-topabout__contents-textArea__caption { width: 100%; font-weight: 500; line-height: 1.6; } .p-topabout__contents-textArea__buttonArea { width: 100%; display: flex; gap: 10px; } @media screen and (max-width: 600px) { .p-topabout__contents-textArea__buttonArea { width: 100%; flex-direction: column; } } .p-topabout__contents-textArea .c-linkParts.blue.button { width: calc(50% - 5px); width: 40%; } @media screen and (max-width: 600px) { .p-topabout__contents-textArea .c-linkParts.blue.button { width: 100% !important; height: 45px; } } @media screen and (max-width: 600px) { .p-topabout__contents-textArea { width: 100%; } } .p-topservice { padding: 60px 0; border-bottom: 1px solid #B1B1B1; } .p-topservice .c-sectionTitle { margin-bottom: unset; } .p-topserviceTitle { padding: 45px 0; border-bottom: 1px solid #B1B1B1; } .p-topserviceTitle .c-sectionTitle { margin-bottom: unset; } @media screen and (max-width: 600px) { .p-topserviceTitle { padding: 20px 0; } } .p-topserviceList { border-bottom: 1px solid #B1B1B1; padding-bottom: unset; } .p-topserviceList__parts { position: relative; display: flex; align-items: center; gap: 70px; padding: 10px 10px 10px 40px; } .p-topserviceList__parts::before { position: absolute; content: ""; width: 100%; height: 1px; background-color: #B1B1B1; left: 0; bottom: 0; } .p-topserviceList__parts:last-child::before { display: none; } @media screen and (max-width: 600px) { .p-topserviceList__parts { display: flex; flex-direction: column; gap: 25px; padding: 10px; } } .p-topserviceList__parts-textArea { width: 60%; display: flex; gap: 175px; } .p-topserviceList__parts-textArea__label span { font-size: 5rem; font-weight: 500; font-family: "Kanit"; color: #0C4B9E; } .p-topserviceList__parts-textArea__contents-title { font-size: 2.8vw; font-weight: 700; margin-bottom: 25px; } .p-topserviceList__parts-textArea__contents-caption { margin-bottom: 30px; } .p-topserviceList__parts-textArea__contents .c-linkParts { justify-content: end; } @media screen and (max-width: 600px) { .p-topserviceList__parts-textArea { flex-direction: column; width: 100%; order: 3; gap: 20px; padding: 0 15px; } .p-topserviceList__parts-textArea__label span { font-size: 3rem; line-height: 1; } .p-topserviceList__parts-textArea__contents-title { font-size: 2.4rem; margin-bottom: 20px; } .p-topserviceList__parts-textArea__contents-caption { font-size: 1.4rem; } .p-topserviceList__parts-textArea__contents .c-linkParts { margin-bottom: 15px; } } .p-topserviceList__parts-imageArea { width: 40%; height: auto; aspect-ratio: 44/25; overflow: hidden; background-size: cover; background-position: center; border-radius: 10px; } @media screen and (max-width: 600px) { .p-topserviceList__parts-imageArea { width: 100%; order: 1; } } .p-topserviceList__parts-title { width: 100%; font-size: 3.5rem; font-weight: 700; } @media screen and (max-width: 600px) { .p-topserviceList__parts-title { font-size: 1.9vw; } } .p-topserviceList__parts-caption { font-size: 1.1vw; font-weight: 500; } .p-topqualification { padding: 60px 0; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-topqualification { padding: 40px 0; } } .p-topqualification__contents { display: flex; align-items: center; gap: 70px; } @media screen and (max-width: 600px) { .p-topqualification__contents { flex-direction: column; gap: 20px; } } .p-topqualification__contents-visualArea { display: flex; content: ""; width: 50%; height: 100%; aspect-ratio: 1/1; background-color: blanchedalmond; border-radius: 50%; } .p-topqualification__contents-visualArea img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 600px) { .p-topqualification__contents-visualArea { width: 100%; } } .p-topqualification__contents-textArea { width: calc(50% - 70px); display: flex; flex-direction: column; align-items: end; gap: 40px; } .p-topqualification__contents-textArea__catch { width: 100%; font-size: 1.9vw; font-weight: 700; line-height: 1.4; } @media screen and (max-width: 600px) { .p-topqualification__contents-textArea__catch { font-size: 2.4rem; } } .p-topqualification__contents-textArea__caption { width: 100%; font-weight: 500; line-height: 1.6; } @media screen and (max-width: 600px) { .p-topqualification__contents-textArea .c-linkParts { width: 100% !important; } } @media screen and (max-width: 600px) { .p-topqualification__contents-textArea { width: 100%; } } .p-topcompany { padding: 60px 0; } @media screen and (max-width: 600px) { .p-topcompany { padding: 40px 0; } } .p-topcompany__listArea { display: flex; justify-content: space-between; gap: 30px; } @media screen and (max-width: 600px) { .p-topcompany__listArea { flex-direction: column; } } .p-topcompany__listArea-parts { position: relative; width: 33.3333333333%; aspect-ratio: 65/79; padding: 40px; background-color: #0C4B9E; border-radius: 11px; overflow: hidden; color: white; transition: 0.5s; } .p-topcompany__listArea-parts .p-topcompany__listArea-parts__animation { position: absolute; width: 300%; height: 300%; left: -105%; top: 0%; bottom: 0; right: 0; margin: auto; opacity: 0.23; transition: 0.5s; } .p-topcompany__listArea-parts .p-topcompany__listArea-parts__animation svg path { fill: white; stroke: white; transition: 0.5s; } @media screen and (max-width: 600px) { .p-topcompany__listArea-parts .p-topcompany__listArea-parts__animation { width: 200%; height: 200%; left: -50%; } } .p-topcompany__listArea-parts .p-topcompany__listArea-parts__title p { font-size: 2.15vw; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.03em; } .p-topcompany__listArea-parts .p-topcompany__listArea-parts__title span { font-size: 1.1vw; font-weight: 400; letter-spacing: -0.03em; font-family: "Kanit"; } @media screen and (max-width: 600px) { .p-topcompany__listArea-parts .p-topcompany__listArea-parts__title p { font-size: 2.8rem; } .p-topcompany__listArea-parts .p-topcompany__listArea-parts__title span { font-size: 1.1rem; } } .p-topcompany__listArea-parts .c-linkParts { position: absolute; right: 45px; bottom: 45px; } .p-topcompany__listArea-parts:hover { color: #0C4B9E; background-color: white; } .p-topcompany__listArea-parts:hover .c-linkParts.white span { color: #0C4B9E; } .p-topcompany__listArea-parts:hover .c-linkParts.white .c-linkParts__deco { border: solid 1px #0C4B9E; } .p-topcompany__listArea-parts:hover .c-linkParts.white .c-linkParts__deco svg { fill: #0C4B9E; } .p-topcompany__listArea-parts:hover .p-topcompany__listArea-parts__animation { width: 100%; height: 100%; left: 0; top: 0; } .p-topcompany__listArea-parts:hover .p-topcompany__listArea-parts__animation svg path { fill: #0C4B9E; stroke: #0C4B9E; } @media screen and (max-width: 600px) { .p-topcompany__listArea-parts { width: 100%; padding: 30px; aspect-ratio: 4/3; } .p-topcompany__listArea-parts .p-topcompany__listArea-parts__title p { font-size: 2.4rem; font-weight: 700; line-height: 0.9; font-family: "Kanit"; margin-bottom: 5px; } .p-topcompany__listArea-parts .p-topcompany__listArea-parts__title span { font-size: 1.2rem; font-weight: 400; } .p-topcompany__listArea-parts .c-linkParts { right: 30px; bottom: 30px; } } .p-toprecruit { position: relative; width: 100%; height: auto; aspect-ratio: 8/5; padding: 90px 0 70px; overflow-x: clip; } @media screen and (max-width: 600px) { .p-toprecruit { padding: 50px 0 45px; aspect-ratio: 75/133; } } .p-toprecruit::before { position: absolute; content: ""; width: 100%; height: calc(100% + 50px); background-image: url(../images/top/bg_recruit.webp); background-size: cover; background-position: center; z-index: -1; top: -50px; } @media screen and (max-width: 600px) { .p-toprecruit::before { background-image: url(../images/top/bg_recruit-sp.webp); } } .p-toprecruit__deco { position: absolute; right: 0; bottom: -5%; width: 60%; z-index: -1; opacity: 0; will-change: clip-path; transform: translateZ(0); transition: 0.5s; } .p-toprecruit__deco img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 600px) { .p-toprecruit__deco { bottom: unset; top: 50%; width: 110%; right: -30%; } } .p-toprecruit__deco.-animated { animation: decoLeft 0.5s forwards; opacity: 1; } .p-toprecruit__title { display: flex; flex-direction: column; gap: 10px; color: white; } .p-toprecruit__title p { font-size: 9.5vw; line-height: 0.8; display: flex; align-items: anchor-center; gap: 20px; font-family: "Kanit"; } .p-toprecruit__title span { font-size: 1.5vw; font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight: 700; line-height: 1.7; } @media screen and (max-width: 600px) { .p-toprecruit__title p { font-size: 6rem; } .p-toprecruit__title p:first-of-type { margin-bottom: 10px; } .p-toprecruit__title p:last-of-type { align-items: flex-start; } .p-toprecruit__title span { font-size: 1.3rem; } } .p-toprecruit__link { position: absolute; right: 70px; bottom: 70px; } .p-toprecruit__link .c-linkParts span { position: relative; font-family: "Kanit"; font-style: italic; font-size: 12rem; line-height: 1; color: white; } .p-toprecruit__link .c-linkParts span::before { position: absolute; content: "採用情報"; color: white; font-size: 2rem; font-weight: bold; font-style: normal; top: -10px; } .p-toprecruit__link .c-linkParts .c-linkParts__deco { width: 80px; height: 80px; border: solid 2px white; } .p-toprecruit__link .c-linkParts .c-linkParts__deco svg { width: 17px; height: 25px; fill: white; } @media screen and (max-width: 600px) { .p-toprecruit__link { right: unset; left: 30px; bottom: 45px; } .p-toprecruit__link .c-linkParts span { font-size: 8rem; } .p-toprecruit__link .c-linkParts .c-linkParts__deco { width: 50px; height: 50px; } .p-toprecruit__link .c-linkParts .c-linkParts__deco svg { width: 11px; height: 16px; fill: white; } } .p-toprecruit__link-caption { display: block; color: white; font-family: "Kanit"; font-weight: 400; margin-bottom: 40px; } .p-topnews { padding: 60px 0; border-bottom: 1px solid #B1B1B1; } .p-topnews .l-inner { display: flex; flex-direction: column; } .p-topnews .c-sectionTitle { width: 100%; } @media screen and (max-width: 600px) { .p-topnews { padding: 20px 0; } .p-topnews .c-sectionTitle { width: 100%; } .p-topnews .c-sectionTitle h3 { font-size: 3.9rem; } .p-topnews .c-linkParts.blue.button { width: 100%; padding: 10px; } } .p-topnewsList { position: relative; display: flex; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-topnewsList { flex-wrap: wrap; padding: unset; border-bottom: 1px solid unset; border-bottom: unset; } .p-topnewsList::before { position: absolute; content: ""; width: 100%; height: 1px; background-color: #B1B1B1; bottom: 0; } } .p-topnewsList__parts { position: relative; display: flex; align-items: end; flex-direction: column; width: 25%; padding: 10px 10px 30px; border-right: 1px solid #B1B1B1; } .p-topnewsList__parts:nth-child(4n) { border-right: unset; } .p-topnewsList__parts-thumnail { width: 100%; height: auto; aspect-ratio: 27/25; border-radius: 10px; overflow: hidden; border-radius: 10px; margin-bottom: 40px; } .p-topnewsList__parts-thumnail img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: 0.5s; } @media screen and (max-width: 600px) { .p-topnewsList__parts-thumnail { margin-bottom: 20px; } } .p-topnewsList__parts-metaArea { width: 100%; padding-inline: 30px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 25px; } .p-topnewsList__parts-cat { padding: 2px 5px; font-size: 0.95vw; font-weight: 500; border: 1px solid #0C4B9E; border-radius: 5px; color: #0C4B9E; } .p-topnewsList__parts-date { width: -moz-fit-content; width: fit-content; font-size: 0.8vw; font-family: "Kanit"; font-weight: 500; } .p-topnewsList__parts-title { width: 100%; padding-inline: 30px; margin-bottom: 60px; font-size: 1.1vw; font-weight: 500; line-height: 1.8; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .p-topnewsList__parts .c-linkParts { position: absolute; right: 30px; bottom: 30px; } .p-topnewsList__parts:hover img { transform: scale(1.1); } @media screen and (max-width: 600px) { .p-topnewsList__parts { width: 50%; padding-bottom: 20px; border-bottom: 1px solid #B1B1B1; } .p-topnewsList__parts-metaArea { flex-direction: column; align-items: unset; padding-inline: 10px; gap: 15px; margin-bottom: 15px; } .p-topnewsList__parts-cat { width: -moz-fit-content; width: fit-content; padding: 1px 5px; font-size: 1.1rem; } .p-topnewsList__parts-date { margin-bottom: unset; font-size: 1rem; } .p-topnewsList__parts-title { font-size: 1.2rem; padding-inline: 10px; line-height: 1.7; margin-bottom: 10px; } .p-topnewsList__parts .c-linkParts { position: relative; margin-right: unset; gap: 10px; bottom: unset; left: 0; right: 0; margin: auto; } .p-topnewsList__parts .c-linkParts span { font-size: 1.2rem; } } .p-topiso { padding: 60px 0; } @media screen and (max-width: 600px) { .p-topiso { padding: 40px 0 0; } } .p-topiso .c-sectionTitle h3 { line-height: 1.2; } .p-topiso__contents { display: flex; align-items: center; gap: 70px; } @media screen and (max-width: 600px) { .p-topiso__contents { flex-direction: column; gap: 20px; } } .p-topiso__contents-visualArea { position: relative; display: flex; content: ""; width: 50%; height: 100%; aspect-ratio: 1/1; background-color: #D5DAE1; border-radius: 50%; overflow: hidden; } .p-topiso__contents-visualArea svg { position: absolute; top: 0; left: 0; } @media screen and (max-width: 600px) { .p-topiso__contents-visualArea { width: 100%; } } .p-topiso__contents-textArea { width: calc(50% - 70px); display: flex; flex-direction: column; align-items: end; gap: 40px; } .p-topiso__contents-textArea__catch { width: 100%; font-size: 1.9vw; font-weight: 700; line-height: 1.4; } .p-topiso__contents-textArea__caption { width: 100%; font-weight: 500; line-height: 1.6; } @media screen and (max-width: 600px) { .p-topiso__contents-textArea { width: 100%; } .p-topiso__contents-textArea__catch { font-size: 2.4rem; } .p-topiso__contents-textArea .c-linkParts.blue.button { width: 100%; margin-bottom: 40px; } } .p-recruitMv { position: relative; width: 100%; height: auto; aspect-ratio: 8/5; background-image: url(../images/recruit/mv_pc.webp); background-size: cover; background-position: center; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-recruitMv { aspect-ratio: 25/38; background-image: url(../images/recruit/mv_sp.webp); } } .p-recruitMv::before { position: absolute; content: ""; width: 1px; height: 100%; right: 60px; background-color: white; z-index: 1; } @media screen and (max-width: 600px) { .p-recruitMv::before { right: 30px; } } .p-recruitMv__textArea { position: absolute; top: 26%; left: 9%; color: white; } .p-recruitMv__textArea-label { display: block; font-size: 1.1vw; font-weight: 500; margin-bottom: 20px; font-family: "Kanit"; } .p-recruitMv__textArea-title { display: flex; flex-direction: column; font-size: 3.7vw; font-weight: 700; } @media screen and (max-width: 600px) { .p-recruitMv__textArea { top: 150px; left: 40px; } .p-recruitMv__textArea-label { font-size: 1.1rem; margin-bottom: 10px; } .p-recruitMv__textArea-title { font-size: 3.2rem; } } .p-recruitMv__scroll { position: absolute; display: flex; align-items: center; flex-direction: column; gap: 10px; right: 20px; bottom: 0; } .p-recruitMv__scroll span { color: white; font-family: "Kanit"; font-size: 0.95vw; font-weight: 500; writing-mode: vertical-rl; } @media screen and (max-width: 600px) { .p-recruitMv__scroll { right: 8px; } .p-recruitMv__scroll span { font-size: 1.2rem; } } .p-recruitMv__scroll-line { position: relative; width: 1px; height: 100px; overflow: hidden; background: none; } .p-recruitMv__scroll-line::before { content: ""; position: absolute; top: -100%; left: 0; width: 1px; height: 100%; background: white; animation: scrollLine 2s infinite; } .p-recruitMv__pageLink { position: absolute; display: flex; align-items: center; gap: 25px; left: 0; bottom: 0; background-color: #f8f8f8; padding: 35px 50px; border-top-right-radius: 10px; } .p-recruitMv__pageLink .c-linkParts { height: auto !important; } .p-recruitMv__pageLink .c-linkParts span { padding-right: 0.5em; } @media screen and (max-width: 600px) { .p-recruitMv__pageLink { padding: 27px; align-items: unset; flex-direction: column; gap: 7px; } .p-recruitMv__pageLink .c-linkParts { width: 100% !important; } .p-recruitMv__pageLink .c-linkParts span { font-size: 1.2rem; } } .p-recruitMv__deco { position: absolute; width: 100%; height: 100%; top: 0; } .p-recruitMv__deco img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-recruitMessage { padding: 50px 0; border-bottom: 1px solid #B1B1B1; } .p-recruitMessage__contentsArea { display: flex; align-items: center; gap: 70px; } @media screen and (max-width: 600px) { .p-recruitMessage__contentsArea { flex-direction: column-reverse; gap: 20px; } } .p-recruitMessage__textArea { width: 47%; } @media screen and (max-width: 600px) { .p-recruitMessage__textArea { width: 100%; } } .p-recruitMessage__textArea-title { font-size: 2.05vw; font-weight: bold; margin-bottom: 40px; line-height: 1.4; } @media screen and (max-width: 600px) { .p-recruitMessage__textArea-title { font-size: 2.4rem; } } .p-recruitMessage__textArea-contents { font-size: 1.1vw; line-height: 1.7; margin-bottom: 2em; } @media screen and (max-width: 600px) { .p-recruitMessage__textArea-contents { font-size: 1.4rem; } } .p-recruitMessage__textArea-footer { display: flex; align-items: baseline; justify-content: end; gap: 0.5em; } .p-recruitMessage__textArea-footer__name { font-size: 1.9vw; font-weight: 700; } @media screen and (max-width: 600px) { .p-recruitMessage__textArea-footer { font-size: 1.4rem; } .p-recruitMessage__textArea-footer__name { font-size: 2.4rem; } } .p-recruitMessage__imageArea { width: 53%; } .p-recruitMessage__imageArea img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 600px) { .p-recruitMessage__imageArea { width: 100%; } } .p-recruitNumbers { padding-top: 50px; padding-bottom: 10px; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-recruitNumbers { padding: 20px 0 0; } } .p-recruitNumbersList { display: flex; flex-wrap: wrap; } .p-recruitNumbersList__column { width: 50%; display: flex; flex-direction: column; justify-content: space-between; } .p-recruitNumbersList__column:nth-of-type(1) { border-right: 1px solid #B1B1B1; } .p-recruitNumbersList__parts { width: 33.3%; padding: 60px; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts { width: 100% !important; padding: 20px !important; } } .p-recruitNumbersList__parts:nth-of-type(odd) { border-right: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts:nth-of-type(odd) { border-right: unset; } } .p-recruitNumbersList__parts.image { width: 66.6%; display: flex; gap: 70px; background-color: white; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts.image { flex-direction: column-reverse; gap: 20px; } } .p-recruitNumbersList__parts.image .p-recruitNumbersList__parts-textArea { width: 47%; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts.image .p-recruitNumbersList__parts-textArea { width: 100%; } } .p-recruitNumbersList__parts.image .p-recruitNumbersList__parts-imageArea { width: 53%; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts.image .p-recruitNumbersList__parts-imageArea { width: 100%; } } .p-recruitNumbersList__parts.image .p-recruitNumbersList__parts-value p { background: linear-gradient(88.33deg, #335FA8 1.82%, #0189FF 98.94%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .p-recruitNumbersList__parts.image .p-recruitNumbersList__parts-value span { color: #0189FF; } .p-recruitNumbersList__parts-textArea { display: flex; flex-direction: column; } .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-title { font-size: 3rem; font-size: 2.3vw; font-weight: bold; margin-bottom: 25px; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-title { font-size: 1.3rem; margin-bottom: 10px; } } .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-caption { font-size: 1.1vw; font-weight: 500; margin-bottom: 90px; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-caption { font-size: 1.2rem; margin-bottom: 45px; } } .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-value { display: flex; align-items: baseline; } .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-value p { font-size: 10vw; font-family: "Kanit"; color: #0C4B9E; font-weight: 600; line-height: 1; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-value p { font-size: 4.2rem; } } .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-value span { font-size: 2.8vw; font-weight: 700; line-height: 1; color: #0C4B9E; } @media screen and (max-width: 600px) { .p-recruitNumbersList__parts-textArea .p-recruitNumbersList__parts-value span { font-size: 1.4rem; } } .p-recruitPoint { padding-top: 50px; padding-bottom: 10px; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-recruitPoint { padding: 20px 0 0; } } .p-recruitPointList-parts { display: flex; align-items: center; gap: 70px; padding: 10px; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-recruitPointList-parts { flex-direction: column; gap: 40px; padding: 10px 10px 40px; } } .p-recruitPointList-parts__imageArea { position: relative; width: 40%; height: 100%; aspect-ratio: 44/25; color: white; } @media screen and (max-width: 600px) { .p-recruitPointList-parts__imageArea { width: 100%; } } .p-recruitPointList-parts__imageArea::before { position: absolute; content: ""; width: 100%; height: 100%; background-image: url(../images/recruit/bg_point.svg); background-position: center; background-size: cover; z-index: 0; } .p-recruitPointList-parts__imageArea-deco { position: absolute; z-index: 1; left: 0; right: 0; top: 45px; margin: auto; width: -moz-fit-content; width: fit-content; font-size: 1.1vw; font-family: "Kanit"; } @media screen and (max-width: 600px) { .p-recruitPointList-parts__imageArea-deco { font-size: 1rem; } } .p-recruitPointList-parts__imageArea-title { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 3.5rem; font-weight: bold; } .p-recruitPointList-parts__imageArea-title span { font-size: 1.1vw; font-family: "Kanit"; } @media screen and (max-width: 600px) { .p-recruitPointList-parts__imageArea-title { font-size: 2.3rem; } .p-recruitPointList-parts__imageArea-title span { font-size: 1rem; } } .p-recruitPointList-parts__imageArea img { position: absolute; width: 80%; height: 100%; -o-object-fit: cover; object-fit: cover; left: 0; right: 0; margin: auto; } @media screen and (max-width: 600px) { .p-recruitPointList-parts__imageArea img { width: 65%; } } .p-recruitPointList-parts__textArea { width: 60%; display: flex; flex-direction: column; } @media screen and (max-width: 600px) { .p-recruitPointList-parts__textArea { width: 100%; padding: 0 30px; } } .p-recruitPointList-parts__textArea p { font-size: 1.9vw; font-weight: 700; margin-bottom: 25px; } @media screen and (max-width: 600px) { .p-recruitPointList-parts__textArea p { font-size: 2.4rem; } } .p-recruitPointList-parts__textArea ul li { position: relative; padding-left: 1em; font-size: 1.1vw; margin-bottom: 0.5rem; } @media screen and (max-width: 600px) { .p-recruitPointList-parts__textArea ul li { font-size: 1.6rem; } } .p-recruitPointList-parts__textArea ul li:last-of-type { margin-bottom: unset; } .p-recruitPointList-parts__textArea ul li::before { position: absolute; content: ""; width: 0.8em; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: #0C4B9E; left: 0; top: 3px; } .p-recruitInterviews { position: relative; padding: 100px 0; color: white; overflow: hidden; } @media screen and (max-width: 600px) { .p-recruitInterviews { padding: 50px 0 30px; } } .p-recruitInterviews__deco { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; } .p-recruitInterviews__deco img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-recruitInterviews__title { position: relative; font-size: 8rem; font-weight: 400; font-family: "Kanit"; margin-bottom: 20px; z-index: 1; } @media screen and (max-width: 600px) { .p-recruitInterviews__title { font-size: 4rem; } } .p-recruitInterviews__caption { position: relative; font-size: 2rem; font-weight: 700; line-height: 1.7; z-index: 1; } @media screen and (max-width: 600px) { .p-recruitInterviews__caption { font-size: 1.4rem; margin-bottom: 20px; } } .p-recruitInterviews__controlArea { position: relative; display: flex; align-items: center; justify-content: end; gap: 25px; z-index: 1; width: 100%; margin-bottom: 30px; } @media screen and (max-width: 600px) { .p-recruitInterviews__controlArea { justify-content: flex-start; margin-bottom: 60px; } } .p-recruitInterviews__controlArea .interviews-pagination { width: -moz-fit-content; width: fit-content; font-family: "Kanit"; font-size: 1.8rem; font-weight: 500; text-align: left; height: 100%; } .p-recruitInterviews__controlArea .interviews-buttonArea { position: relative; display: flex; justify-content: end; gap: 15px; } .p-recruitInterviews__controlArea .interviews-buttonArea .interviews-button-prev, .p-recruitInterviews__controlArea .interviews-buttonArea .interviews-button-next { display: flex; justify-content: center; align-items: center; position: unset; margin: unset; width: 45px; height: 45px; border: solid 1px white; border-radius: 50%; } .p-recruitInterviews__controlArea .interviews-buttonArea .interviews-button-prev svg, .p-recruitInterviews__controlArea .interviews-buttonArea .interviews-button-next svg { width: 10px; height: 15px; fill: white; } .p-recruitInterviews__controlArea .interviews-buttonArea .interviews-button-prev { transform: scale(-1, 1); } .p-recruitInterviews__controlArea .interviews-buttonArea .interviews-button-prev:after, .p-recruitInterviews__controlArea .interviews-buttonArea .swiper-rtl .interviews-button-next:after, .p-recruitInterviews__controlArea .interviews-buttonArea .interviews-button-next:after, .p-recruitInterviews__controlArea .interviews-buttonArea .swiper-rtl .interviews-button-prevv:after { content: ""; } .p-recruitInterviews__bgSlide { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 0; } .p-recruitInterviews__bgSlide .swiper-wrapper { width: 100%; height: 100%; } .p-recruitInterviews__bgSlide .swiper-slide { width: 100%; height: 100%; } .p-recruitInterviews__bgSlide .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-recruitInterviews__bgSlide::before { position: absolute; content: ""; width: 100%; height: 100%; background-image: url(../images/recruit/bg_interview-deco.webp); background-size: cover; background-position: center; z-index: 2; opacity: 0.9; pointer-events: none; } .p-recruitInterviews__slide { width: 100%; height: auto; aspect-ratio: 57/29; } @media screen and (max-width: 600px) { .p-recruitInterviews__slide { aspect-ratio: 62/95; } } .p-recruitInterviews__slide .swiper-wrapper { width: 100%; height: 100%; } .p-recruitInterviews__slide .swiper-slide { position: relative; overflow: hidden; border-radius: 10px; } .p-recruitInterviews__slide .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-recruitInterviews__slide .swiper-slide::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-image: url(../images/recruit/deco_interview-white.png); background-size: cover; pointer-events: none; } @media screen and (max-width: 600px) { .p-recruitInterviews__slide .swiper-slide::before { width: 80%; height: 60%; } } .p-recruitInterviews__slide .swiper-slide::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(12, 75, 158, 0) 58.36%, rgba(12, 75, 158, 0.8) 100%); pointer-events: none; } .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-name { position: absolute; display: flex; flex-direction: column; left: 45px; top: 45px; color: #0C4B9E; font-size: 1.9vw; font-weight: 700; line-height: 1; z-index: 1; } .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-name span { font-size: 10rem; font-weight: 600; font-family: "Kanit"; line-height: 1; } @media screen and (max-width: 600px) { .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-name { top: 30px; left: 30px; font-size: 2rem; } .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-name span { font-size: 8rem; } } .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-catch { position: absolute; color: white; left: 45px; bottom: 45px; font-size: 1.9vw; font-weight: bold; z-index: 1; } @media screen and (max-width: 600px) { .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-catch { font-size: 2rem; left: 30px; width: calc(100% - 60px); } } .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-deco { position: absolute; right: 45px; bottom: 45px; display: flex; justify-content: center; align-items: center; margin: unset; width: 45px; height: 45px; border: solid 1px white; border-radius: 50%; z-index: 1; } .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-deco .c-icon { width: 10px; height: 15px; fill: white; } @media screen and (max-width: 600px) { .p-recruitInterviews__slide .swiper-slide .p-recruitInterviews__slide-deco { width: 30px; height: 30px; right: 30px; bottom: 30px; } } .p-recruitInterviewsList { display: flex; flex-wrap: wrap; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-recruitInterviewsList { position: relative; border-top: 1px solid #B1B1B1; border-bottom: unset; } .p-recruitInterviewsList::before { position: absolute; content: ""; width: 100%; height: 1px; background-color: #B1B1B1; bottom: 0; } } .p-recruitInterviewsList__parts { position: relative; display: flex; flex-direction: column; gap: 30px; width: 25%; padding: 10px 10px 60px; border-right: 1px solid #B1B1B1; border-top: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-recruitInterviewsList__parts { width: 50%; gap: 20px; border-top: unset; border-bottom: 1px solid #B1B1B1; padding: 10px 10px 10px; } } .p-recruitInterviewsList__parts-images { position: relative; width: 100%; height: auto; aspect-ratio: 1/1; background-color: #B1B1B1; border-radius: 10px; overflow: hidden; } .p-recruitInterviewsList__parts-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-recruitInterviewsList__parts-images::before { position: absolute; content: ""; width: 100%; height: 100%; left: 0px; top: 0px; background: linear-gradient(138.14deg, rgba(255, 255, 255, 0.8) 28.47%, rgba(255, 255, 255, 0) 40.01%); } .p-recruitInterviewsList__parts-title { position: absolute; top: 20px; left: 20px; color: #0C4B9E; } .p-recruitInterviewsList__parts-title p { font-family: "Kanit"; font-size: 5.6rem; font-weight: bold; line-height: 1; } .p-recruitInterviewsList__parts-title span { font-size: 1.3rem; line-height: 1; font-weight: 700; } @media screen and (max-width: 600px) { .p-recruitInterviewsList__parts-title { left: 10px; top: 10px; } .p-recruitInterviewsList__parts-title p { font-size: 2.8rem; } .p-recruitInterviewsList__parts-title span { font-size: 1rem; } } .p-recruitInterviewsList__parts-caption { font-size: 1.1vw; font-weight: 500; padding: 0 30px; } .p-recruitInterviewsList__parts-caption br { display: none; } @media screen and (min-width: 601px) { .p-recruitInterviewsList__parts-caption { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } } @media screen and (max-width: 600px) { .p-recruitInterviewsList__parts-caption { font-size: 1.2rem; padding: 0 10px; } } .p-recruitInterviewsList__parts .c-linkParts { position: absolute; padding: 0 30px; gap: 10px; left: 0; right: 0; bottom: 20px; justify-content: center; margin: auto; } .p-recruitInterviewsList__parts .c-linkParts span { font-size: 0.95vw; } @media screen and (max-width: 600px) { .p-recruitInterviewsList__parts .c-linkParts { position: unset; gap: 5px; padding: 0 10px; } .p-recruitInterviewsList__parts .c-linkParts span { font-size: 1.2rem; width: calc(100% - 30px); } } .p-recruitInterviewsList__parts:nth-of-type(4n) { border-right: unset; } .p-recruitInterviewsList__parts.null { border-right: unset; } .p-recruitModalBg { position: fixed; content: ""; width: 100vw; height: 100vh; background-color: #2F2F3E; opacity: 0.5; left: 0; top: 0; opacity: 0; transition: 0.5s; pointer-events: none; } .p-recruitModalBg.is-active { opacity: 0.5; pointer-events: auto; z-index: 2; } .p-recruitModal { position: fixed; width: 81.3%; height: 81.3%; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: 0.5s; background: #f8f8f8; opacity: 0; padding: 60px 0; border-radius: 14px; overflow: hidden; } @media screen and (max-width: 600px) { .p-recruitModal { width: calc(100% - 60px); height: calc(100% - 60px); } } .p-recruitModal::before, .p-recruitModal::after { position: absolute; content: ""; width: 1px; height: 100%; background-color: #B1B1B1; top: 0; } .p-recruitModal::before { left: 60px; } .p-recruitModal::after { right: 60px; } @media screen and (max-width: 600px) { .p-recruitModal { padding: 30px 0; } .p-recruitModal::before, .p-recruitModal::after { display: none; } } .p-recruitModal .l-inner { height: 100%; } .p-recruitModal__closeBtn { position: absolute; width: 60px; height: 60px; top: 0; right: 0; background-color: #0C4B9E; border-bottom: 1px solid #B1B1B1; z-index: 1; } .p-recruitModal__closeBtn span { position: absolute; content: ""; width: 30px; height: 1px; background-color: white; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .p-recruitModal__closeBtn span:first-of-type { transform: rotate(45deg); } .p-recruitModal__closeBtn span:last-of-type { transform: rotate(-45deg); } @media screen and (max-width: 600px) { .p-recruitModal__closeBtn { width: 50px; height: 50px; } } .p-recruitModal__contents { max-width: 880px; margin: auto; display: none; } .p-recruitModal__contents.is-active { display: block; } .p-recruitModal__thumnail { position: relative; margin-bottom: 40px; } .p-recruitModal__thumnail img { width: 100%; height: auto; border-radius: 10px; } @media screen and (max-width: 600px) { .p-recruitModal__thumnail { margin-bottom: 30px; } } .p-recruitModal__thumnail-name { position: absolute; display: flex; flex-direction: column; color: #0C4B9E; top: 40px; left: 30px; font-size: 1.9vw; font-weight: bold; } .p-recruitModal__thumnail-name span { font-size: 10rem; line-height: 0.8; font-weight: 600; font-family: "Kanit"; } @media screen and (max-width: 600px) { .p-recruitModal__thumnail-name { top: 15px; left: 15px; font-size: 1rem; } .p-recruitModal__thumnail-name span { font-size: 4.4rem; } } .p-recruitModal__thumnail::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-image: url(../images/recruit/deco_interview-white.png); background-size: cover; pointer-events: none; } .p-recruitModal__catchcopy { font-size: 1.9vw; font-weight: bold; margin-bottom: 40px; } @media screen and (max-width: 600px) { .p-recruitModal__catchcopy { font-size: 2rem; } } .p-recruitModal__questionArea { display: flex; flex-direction: column; gap: 2em; padding-bottom: 60px; } @media screen and (max-width: 600px) { .p-recruitModal__questionArea { padding-bottom: 30px; } } .p-recruitModal__questionArea-parts { display: flex; flex-direction: column; font-size: 1.6rem; } .p-recruitModal__questionArea-parts__label { color: #0C4B9E; font-weight: bold; margin-bottom: 0.5em; } @media screen and (max-width: 600px) { .p-recruitModal__questionArea-parts { font-size: 1.5rem; } } .p-recruitModal.is-active { opacity: 1; z-index: 10; pointer-events: auto; } .p-recruitModal.is-active .l-inner { overflow-y: scroll; padding: 0px 50px; } .p-recruitPhoto { padding-top: 60px; padding-bottom: 50px; } @media screen and (max-width: 600px) { .p-recruitPhoto { padding: 40px 0; } } .p-recruitPhoto__slideArea { position: absolute; width: 100%; display: flex; align-items: end; position: relative; } @media screen and (max-width: 600px) { .p-recruitPhoto__slideArea { padding-bottom: 70px; } .p-recruitPhoto__slideArea::before { display: none; } } .p-recruitPhoto__control { position: relative; display: flex; align-items: center; width: 20%; height: 100%; top: 0; margin: auto; } @media screen and (max-width: 600px) { .p-recruitPhoto__control { position: absolute; top: unset; bottom: 0; width: 100%; height: -moz-fit-content; height: fit-content; } } .p-recruitPhoto__control .recruitPhoto-pagination { width: 50px; } @media screen and (max-width: 600px) { .p-recruitPhoto__control .recruitPhoto-pagination { position: absolute; width: -moz-fit-content; width: fit-content; left: unset; right: 0; bottom: 70vw; } } .p-recruitPhoto__control .recruitPhoto-buttonArea { position: relative; width: calc(100% - 50px); display: flex; gap: 10px; } @media screen and (max-width: 600px) { .p-recruitPhoto__control .recruitPhoto-buttonArea { width: 100%; justify-content: center; } } .p-recruitPhoto__control .recruitPhoto-button { display: flex; justify-content: center; align-items: center; width: 47px; height: auto; aspect-ratio: 1/1; border-radius: 50%; border: solid 1px #13243A; } .p-recruitPhoto__control .recruitPhoto-button svg { width: 10px; height: 15px; } .p-recruitPhoto__control .recruitPhoto-button.prev { transform: scale(-1, 1); } .p-recruitPhoto__slide { width: 60%; height: auto; aspect-ratio: 1/1; overflow: hidden; border-radius: 10px; margin-right: 30px; border-radius: 10px; overflow: hidden; } @media screen and (max-width: 600px) { .p-recruitPhoto__slide { width: 75%; margin-right: 5px; } } .p-recruitPhoto__slide .swiper-wrapper { width: 100%; height: 100%; } .p-recruitPhoto__slide .swiper-slide { width: 100%; height: 100%; overflow: hidden; } .p-recruitPhoto__slide .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-recruitPhoto__thumslide { width: 20%; height: auto; aspect-ratio: 1/1; overflow: hidden; border-radius: 10px; } @media screen and (max-width: 600px) { .p-recruitPhoto__thumslide { width: 25%; } } .p-recruitPhoto__thumslide .swiper-wrapper { width: 100%; height: 100%; } .p-recruitPhoto__thumslide .swiper-slide { width: 100%; height: 100%; overflow: hidden; } .p-recruitPhoto__thumslide .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-recruitEntry { position: relative; height: 700px; padding: 100px 0 80px; background-image: url(../images/recruit/bg_entry.webp); background-size: cover; background-position: center; color: white; border-radius: 10px; overflow: hidden; } @media screen and (max-width: 600px) { .p-recruitEntry { padding: 40px 0 35px; height: 580px; background-image: url(../images/recruit/bg_entry-sp.webp); } } .p-recruitEntry__deco { position: absolute; width: 60%; right: 0; bottom: -10%; z-index: 0; opacity: 0; will-change: clip-path; transform: translateZ(0); transition: 0.5s; } @media screen and (max-width: 600px) { .p-recruitEntry__deco { width: 110%; right: -30%; bottom: 0; } } .p-recruitEntry__deco.-animated { animation: decoLeft 0.5s forwards; opacity: 1; } .p-recruitEntry__title { position: relative; font-size: 12rem; font-size: 9.3vw; font-family: "Kanit"; font-style: italic; font-weight: 400; z-index: 1; } @media screen and (max-width: 600px) { .p-recruitEntry__title { font-size: 4rem; line-height: 1; margin-bottom: 15px; } } .p-recruitEntry__caption { position: relative; font-size: 1.57vw; font-weight: 700; z-index: 1; } @media screen and (max-width: 600px) { .p-recruitEntry__caption { font-size: 1.8rem; } } .p-recruitEntry__linkArea { position: absolute; display: flex; flex-direction: column; gap: 10px; left: 70px; bottom: 80px; } .p-recruitEntry__linkArea .c-linkParts { display: flex; justify-content: space-between; width: 100%; height: 60px; border: 1px solid white; padding: 0 20px; border-radius: 3px; } .p-recruitEntry__linkArea .c-linkParts span { font-size: 1.1vw; } @media screen and (max-width: 600px) { .p-recruitEntry__linkArea { width: calc(100% - 60px); left: 30px; bottom: 30px; } .p-recruitEntry__linkArea .c-linkParts { padding: 0 15px; } .p-recruitEntry__linkArea .c-linkParts span { font-size: 1.2rem; } } .p-company__history { padding: 55px 60px; } @media screen and (max-width: 600px) { .p-company__history { padding: 20px; } } .p-company__history-parts { position: relative; display: flex; align-items: center; gap: 50px; padding-left: 50px; margin-bottom: 55px; } .p-company__history-parts::before { position: absolute; content: ""; width: 15px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: #0C4B9E; left: 0; z-index: 1; } @media screen and (max-width: 600px) { .p-company__history-parts::before { top: 3px; } } .p-company__history-parts::after { position: absolute; content: ""; width: 1px; height: calc(100% + 50px); background-color: #B1B1B1; left: 7px; top: 50%; z-index: 0; } @media screen and (max-width: 600px) { .p-company__history-parts::after { height: calc(100% + 10px); } } .p-company__history-parts__year { width: 17%; font-size: 1.9vw; font-weight: 700; } .p-company__history-parts__detail { width: calc(100% - 17vw); } .p-company__history-parts:last-of-type { margin-bottom: unset; } .p-company__history-parts:last-of-type::after { display: none; } @media screen and (max-width: 600px) { .p-company__history-parts { flex-direction: column; align-items: unset; gap: 0px; margin-bottom: 20px; padding-left: 30px; } .p-company__history-parts__year { width: 100%; font-size: 1.8rem; } .p-company__history-parts__detail { width: 100%; } .p-company__history-parts:last-of-type { margin-bottom: unset; } .p-company__history-parts:last-of-type::after { display: none; } } .p-company__philosophy { padding: 60px; border-bottom: 1px solid #B1B1B1; } .p-company__philosophy p { font-size: 1.9vw; font-weight: 700; text-align: center; line-height: 1.6; } .p-company__philosophy p strong { color: #0C4B9E; } @media screen and (max-width: 600px) { .p-company__philosophy { padding: 30px; } .p-company__philosophy p { font-size: 2rem; text-align: left; } .p-company__philosophy p br { display: none; } } .p-company__vision { padding: 60px; border-bottom: 1px solid #B1B1B1; } .p-company__vision-title { font-size: 3.5rem; font-weight: bold; text-align: center; margin-bottom: 40px; } @media screen and (max-width: 600px) { .p-company__vision-title { font-size: 2rem; } } .p-company__vision-listArea { position: relative; display: flex; justify-content: center; } .p-company__vision-listArea__parts { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 40px; width: 37%; height: auto; aspect-ratio: 1/1; border-radius: 50%; border: 1px solid #B1B1B1; background-color: #f8f8f8; } .p-company__vision-listArea__parts p { font-size: 4rem; font-weight: 400; font-family: "Kanit"; font-style: italic; color: #0C4B9E; } .p-company__vision-listArea__parts span { font-size: 1.9vw; font-weight: 500; text-align: center; } .p-company__vision-listArea__parts:nth-of-type(1) { position: absolute; left: 0; z-index: 0; } .p-company__vision-listArea__parts:nth-of-type(2) { position: relative; z-index: 1; } .p-company__vision-listArea__parts:nth-of-type(3) { position: absolute; right: 0; z-index: 2; } @media screen and (max-width: 600px) { .p-company__vision { padding: 30px; } .p-company__vision-listArea { flex-direction: column; } .p-company__vision-listArea__parts { width: 100%; gap: 10px; } .p-company__vision-listArea__parts p { font-size: 3rem; } .p-company__vision-listArea__parts span { font-size: 1.6rem; } .p-company__vision-listArea__parts:nth-of-type(1) { position: relative; left: 0; z-index: 0; } .p-company__vision-listArea__parts:nth-of-type(2) { position: relative; z-index: 1; margin-top: -30px; } .p-company__vision-listArea__parts:nth-of-type(3) { position: relative; right: 0; z-index: 2; margin-top: -30px; } } .p-company__greeting { display: flex; align-items: center; gap: 70px; padding: 60px; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-company__greeting { padding: 30px; gap: 30px; flex-direction: column-reverse; } } .p-company__greeting-textArea { display: flex; flex-direction: column; gap: 40px; width: 50%; } @media screen and (max-width: 600px) { .p-company__greeting-textArea { width: 100%; } } .p-company__greeting-textArea__catch { font-size: 1.9vw; font-weight: 700; } @media screen and (max-width: 600px) { .p-company__greeting-textArea__catch { font-size: 2rem; } } .p-company__greeting-textArea__message { line-height: 1.7; } .p-company__greeting-textArea__name { display: flex; justify-content: end; align-items: baseline; gap: 0.5em; font-size: 1.9vw; font-weight: 700; text-align: end; } .p-company__greeting-textArea__name span { font-weight: 400; font-size: 1.1vw; } @media screen and (max-width: 600px) { .p-company__greeting-textArea__name { font-size: 2.4rem; } .p-company__greeting-textArea__name span { font-size: 1.4rem; } } .p-company__greeting-imageArea { width: 50%; overflow: hidden; } .p-company__greeting-imageArea img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 600px) { .p-company__greeting-imageArea { width: 100%; } } .p-partners .c-lowerContents__lineParts { padding: 60px; } @media screen and (max-width: 600px) { .p-partners .c-lowerContents__lineParts { padding: 30px; } } .p-partners__listArea { width: 100%; display: flex; flex-direction: column; border: solid 1px #B1B1B1; } .p-partners__listArea-parts { display: flex; border-bottom: 1px solid #B1B1B1; background-color: white; } .p-partners__listArea-parts__name { width: 50%; padding: 20px; border-right: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-partners__listArea-parts__name { padding: 15px; } } .p-partners__listArea-parts__url { width: 50%; padding: 20px; } .p-partners__listArea-parts__url a { width: 100%; display: inline-block; } .p-partners__listArea-parts__url a span { display: block; word-break: break-all; overflow-wrap: break-word; word-wrap: break-word; } @media screen and (max-width: 600px) { .p-partners__listArea-parts__url { padding: 15px; } } .p-partners__listArea-parts.label { background-color: #DEECFF; text-align: center; color: #0C4B9E; font-size: 1.6rem; font-weight: bold; } .p-partners__listArea-parts:last-of-type { border-bottom: unset; } .p-qualifications .c-lowerContents__lineParts { padding: 60px; } @media screen and (max-width: 600px) { .p-qualifications .c-lowerContents__lineParts { padding: 30px; } } .p-qualifications__listArea { width: 100%; display: flex; flex-direction: column; border: solid 1px #B1B1B1; } @media screen and (max-width: 600px) { .p-qualifications__listArea { width: 660px; overflow-x: scroll; border-top: unset; } } .p-qualifications__listArea-parts { display: flex; border-bottom: 1px solid #B1B1B1; background-color: white; } .p-qualifications__listArea-parts__organization { width: 23%; padding: 20px; border-right: 1px solid #B1B1B1; } .p-qualifications__listArea-parts__name { width: 54%; padding: 20px; border-right: 1px solid #B1B1B1; } .p-qualifications__listArea-parts__job { width: 23%; padding: 20px; } .p-qualifications__listArea-parts.label { background-color: #DEECFF; text-align: center; color: #0C4B9E; font-size: 1.6rem; font-weight: bold; } @media screen and (max-width: 600px) { .p-qualifications__listArea-parts.label { border-top: 1px solid #B1B1B1; } } .p-qualifications__listArea-parts:last-of-type { border-bottom: unset; } .p-serviceList { display: flex; flex-wrap: wrap; padding: unset; } .p-serviceList__parts { width: 50%; padding: 60px; } @media screen and (max-width: 600px) { .p-serviceList__parts { width: 100%; padding: 30px; } } .p-serviceList__parts-image { position: relative; width: 100%; height: auto; aspect-ratio: 23/12; margin-bottom: 40px; overflow: hidden; border-radius: 10px; } @media screen and (max-width: 600px) { .p-serviceList__parts-image { margin-bottom: 30px; } } .p-serviceList__parts-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-serviceList__parts-title { font-size: 1.9vw; font-weight: bold; margin-bottom: 25px; } @media screen and (max-width: 600px) { .p-serviceList__parts-title { font-size: 1.8rem; } } .p-serviceList__parts-caption { font-weight: 500; line-height: 1.7; } .p-serviceList__parts:first-of-type { border-right: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-serviceList__parts:first-of-type { border-right: unset; border-bottom: 1px solid #B1B1B1; } } .p-news__categoryLink { display: flex; align-items: center; height: 70px; padding: 0 30px; gap: 40px; background-color: #DEECFF; border-bottom: 1px solid #B1B1B1; font-size: 1.5rem; } .p-news__categoryLink a { opacity: 0.68; font-weight: 400; } .p-news__categoryLink .is-active { position: relative; font-weight: bold; } .p-news__categoryLink .is-active::before { position: absolute; content: ""; width: 6px; height: auto; aspect-ratio: 1.1; border-radius: 50%; background-color: #0C4B9E; top: -5px; left: 0; right: 0; margin: auto; } @media screen and (max-width: 600px) { .p-news__categoryLink { font-size: 1.3rem; gap: 20px; padding: 0 20px; } } .p-news__newsArea { display: flex; flex-wrap: wrap; padding: unset; border-bottom: unset; } @media screen and (max-width: 600px) { .p-news__newsArea { flex-direction: unset; gap: 0px; } } .p-news__newsArea-parts { position: relative; width: 25%; padding: 10px 10px 55px; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-news__newsArea-parts { width: 50%; } } .p-news__newsArea-parts__image { width: 100%; height: auto; aspect-ratio: 27/25; border-radius: 10px; overflow: hidden; border-radius: 10px; margin-bottom: 40px; } .p-news__newsArea-parts__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: 0.5s; } @media screen and (max-width: 600px) { .p-news__newsArea-parts__image { margin-bottom: 20px; } } .p-news__newsArea-parts__metaArea { width: calc(100% - 60px); display: flex; align-items: center; gap: 5px; margin: 0 auto 25px; } .p-news__newsArea-parts__metaArea-cat { font-size: 0.95vw; font-weight: 500; color: #0C4B9E; border: solid 1px #0C4B9E; border-radius: 3px; padding: 2px 5px; } .p-news__newsArea-parts__metaArea-date { font-family: "Kanit"; font-size: 0.8vw; font-weight: 500; } @media screen and (max-width: 600px) { .p-news__newsArea-parts__metaArea { width: calc(100% - 20px); flex-direction: column; align-items: unset; gap: 15px; margin-bottom: 15px; } .p-news__newsArea-parts__metaArea-cat { width: -moz-fit-content; width: fit-content; font-size: 1.1rem; } .p-news__newsArea-parts__metaArea-date { font-size: 1rem; } } .p-news__newsArea-parts__title { width: calc(100% - 60px); line-height: 1.7; font-weight: 500; margin: 0 auto; } @media screen and (max-width: 600px) { .p-news__newsArea-parts__title { width: calc(100% - 20px); margin-bottom: 10px; } } .p-news__newsArea-parts .c-linkParts { position: absolute; display: flex; justify-content: end; width: calc(100% - 60px); margin: auto; font-weight: 500; font-size: 0.95vw; bottom: 20px; font-size: 1.2rem; } @media screen and (max-width: 600px) { .p-news__newsArea-parts .c-linkParts { width: calc(100% - 20px); } } .p-news__newsArea-parts:nth-of-type(odd) { border-left: 1px solid #B1B1B1; } .p-news__newsArea-parts:nth-of-type(even) { border-left: 1px solid #B1B1B1; } .p-news__newsArea-parts:last-of-type { border-right: 1px solid #B1B1B1; } .p-news__headerArea { padding: 60px 0; } .p-news__headerArea-title { font-size: 2.65vw; font-weight: 700; margin-bottom: 20px; } .p-news__headerArea-metaArea { display: flex; align-items: center; gap: 10px; } .p-news__headerArea-metaArea__cat { font-size: 0.95vw; font-weight: 500; color: #0C4B9E; border: 1px solid #0C4B9E; padding: 2px 6px; border-radius: 3px; } .p-news__headerArea-metaArea__date { font-size: 1.1vw; font-weight: 500; font-family: "Kanit"; } @media screen and (max-width: 600px) { .p-news__headerArea { padding: 30px 0; } .p-news__headerArea-title { font-size: 2.4rem; } .p-news__headerArea-metaArea__cat { font-size: 1.2rem; } .p-news__headerArea-metaArea__date { font-size: 1.4rem; } } .p-news__contentsArea { padding-bottom: 60px; } .p-news.single .p-news__contentsArea-thumnail { width: 100%; height: auto; border-radius: 10px; overflow: hidden; margin-bottom: 40px; } .p-news.single .p-news__contentsArea-thumnail img { width: 100%; height: auto; } .p-news.single .p-news__contentsArea strong { font-weight: 900; color: #0C4B9E; } .p-news.single .p-news__contentsArea figure { margin-bottom: 30px; } .p-news.single .p-news__contentsArea figure img { width: 100%; height: auto; } .p-news.single .p-news__contentsArea p { font-weight: 600; margin-bottom: 40px; line-height: 2; } .p-news.single .p-news__contentsArea hr { position: relative; width: calc(100% + 120px); height: 1px; left: -60px; background-color: #B1B1B1; margin-bottom: 40px; } .p-news.single .p-news__contentsArea h2 { position: relative; padding: 7px 30px; background-color: #DEECFF; font-size: 2.4rem; font-size: 1.88vw; font-weight: bold; margin-bottom: 30px; } .p-news.single .p-news__contentsArea h2::before { position: absolute; content: ""; width: 3px; height: calc(100% - 14px); left: 12px; top: 0; bottom: 0; margin: auto; background-color: #0189FF; } .p-news.single .p-news__contentsArea h3 { color: #0C4B9E; font-size: 1.8rem; font-size: 1.4vw; font-weight: 600; margin-bottom: 1em; } .p-news.single .p-news__contentsArea ul { display: flex; flex-direction: column; gap: 0.5em; padding: 60px; background: #FFFFFF; border-radius: 10px; margin-bottom: 30px; } .p-news.single .p-news__contentsArea ul li { position: relative; padding-left: 1em; } .p-news.single .p-news__contentsArea ul li::before { position: absolute; content: ""; width: 0.5em; height: auto; aspect-ratio: 1/1; border-radius: 50%; background-color: #0C4B9E; top: 7px; left: 5px; } @media screen and (max-width: 600px) { .p-news.single .p-news__contentsArea { padding-bottom: 1px; } .p-news.single .p-news__contentsArea p { font-size: 1.5rem; margin-bottom: 30px; } .p-news.single .p-news__contentsArea hr { width: calc(100% + 80px); margin-bottom: 30px; } .p-news.single .p-news__contentsArea h2 { font-size: 1.8rem; margin-bottom: 20px; } .p-news.single .p-news__contentsArea h3 { font-size: 1.8rem; margin-bottom: 20px; } .p-news.single .p-news__contentsArea ul { padding: 20px; margin-bottom: 30px; } } .p-iso__title { width: calc(100% - 120px); font-size: 3.4rem; font-weight: 700; margin: 0 auto 50px; } .p-iso__block { padding: 60px; border-bottom: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-iso__block { padding: 30px; } } .p-iso__block-title { position: relative; padding: 5px 14px; background-color: #DEECFF; margin-bottom: 20px; } .p-iso__block-title::before { position: absolute; content: ""; width: 3px; height: calc(100% - 10px); background-color: #0189FF; top: 0; bottom: 0; left: 14px; margin: auto; } .p-iso__block-title p { font-size: 1.9vw; font-weight: bold; padding: 0 14px; } @media screen and (max-width: 600px) { .p-iso__block-title p { font-size: 1.8rem; } } .p-iso__block-introArea { display: flex; justify-content: space-between; margin-bottom: 30px; } .p-iso__block-introArea__textArea { width: calc(100% - 130px); } .p-iso__block-introArea__textArea-isoname { font-size: 2rem; font-weight: 700; margin-bottom: 10px; color: #0C4B9E; } .p-iso__block-introArea__textArea-caption { font-size: 1.8rem; font-weight: 500; line-height: 2; margin-bottom: 20px; } .p-iso__block-introArea__textArea-list li { position: relative; padding-left: 1em; font-size: 1.8rem; font-weight: 500; line-height: 2; } .p-iso__block-introArea__textArea-list li::before { position: absolute; content: ""; width: 5px; height: 5px; border-radius: 50%; background-color: #13243A; left: 5px; top: 15px; } @media screen and (max-width: 600px) { .p-iso__block-introArea__textArea { width: 100%; } } .p-iso__block-introArea__imageArea { width: 120px; } @media screen and (max-width: 600px) { .p-iso__block-introArea__imageArea { display: none; } } .p-iso__block-policyArea { padding: 40px 60px; background-color: white; border-radius: 10px; font-size: 1.8rem; font-weight: 500; line-height: 2; margin-bottom: 30px; } @media screen and (max-width: 600px) { .p-iso__block-policyArea { padding: 30px; font-size: 1.5rem; } } .p-iso__block-policyArea__title { position: relative; padding-left: 1em; } .p-iso__block-policyArea__title::before { position: absolute; content: ""; width: 13px; height: 13px; top: 3px; bottom: 0; left: 0; margin: auto; background-color: #0C4B9E; border-radius: 50%; } @media screen and (max-width: 600px) { .p-iso__block-policyArea__title::before { top: 9px; bottom: unset; } } .p-iso__block-principlesArea__parts { font-size: 1.8rem; font-weight: 700; margin-bottom: 2em; } @media screen and (max-width: 600px) { .p-iso__block-principlesArea__parts { font-size: 1.5rem; } } .p-iso__block-principlesArea__parts-title { color: #0C4B9E; margin-bottom: 0.5em; } .p-iso__block-principlesArea__parts-caption { padding-left: 1em; } @media screen and (max-width: 600px) { .p-iso__block-principlesArea__parts-caption { padding-left: unset; text-indent: 1em; } } .p-iso__block-principlesArea__parts:last-of-type { margin-bottom: unset; } .p-iso__block-footerArea { display: flex; justify-content: end; align-items: center; margin-top: 30px; font-size: 1.8rem; font-weight: 700; gap: 1em; } .p-iso__block-footerArea__roleArea { display: flex; justify-content: end; flex-wrap: wrap; gap: 1em; } @media screen and (max-width: 600px) { .p-iso__block-footerArea { flex-direction: column; align-items: end; } } .p-privacypolicy__block { padding: 60px 0; border-bottom: 1px solid #B1B1B1; } .p-privacypolicy__block-title { position: relative; background-color: #DEECFF; padding: 6px 24px; margin-bottom: 20px; } .p-privacypolicy__block-title p { font-size: 1.9vw; font-weight: 700; } .p-privacypolicy__block-title::before { position: absolute; content: ""; width: 3px; height: calc(100% - 14px); background-color: #0189FF; left: 12px; } @media screen and (max-width: 600px) { .p-privacypolicy__block-title p { font-size: 1.8rem; } } .p-privacypolicy__block-text { margin-bottom: 20px; } .p-privacypolicy__block-text p { font-size: 1.8rem; font-weight: 500; line-height: 2; } @media screen and (max-width: 600px) { .p-privacypolicy__block-text p { font-size: 1.5rem; } } .p-privacypolicy__block-textImage { display: flex; justify-content: space-between; margin-bottom: 20px; } .p-privacypolicy__block-textImage__text { display: flex; flex-direction: column; gap: 2em; width: calc(100% - 120px); } .p-privacypolicy__block-textImage__text p { font-size: 1.8rem; font-weight: 500; line-height: 2; } .p-privacypolicy__block-textImage__text ol { padding-left: 1.5em; } .p-privacypolicy__block-textImage__text ol li { font-size: 1.8rem; font-weight: 500; line-height: 2; list-style-type: num; } .p-privacypolicy__block-textImage__image { width: 90px; } @media screen and (max-width: 600px) { .p-privacypolicy__block-textImage { flex-direction: column-reverse; gap: 30px; } .p-privacypolicy__block-textImage__text { width: 100%; } .p-privacypolicy__block-textImage__text p { font-size: 1.5rem; } .p-privacypolicy__block-textImage__text ol li { font-size: 1.5rem; } } .p-privacypolicy__block-table { width: 100%; border: 1px solid #B1B1B1; margin-bottom: 20px; } .p-privacypolicy__block-table thead { border-bottom: 1px solid #B1B1B1; } .p-privacypolicy__block-table thead th, .p-privacypolicy__block-table thead td { font-size: 1.6rem; font-weight: bold; color: #0C4B9E; text-align: center; } @media screen and (max-width: 600px) { .p-privacypolicy__block-table thead th, .p-privacypolicy__block-table thead td { font-size: 1.2rem; padding: 15px 10px; } } .p-privacypolicy__block-table tbody { font-size: 1.1vw; } @media screen and (max-width: 600px) { .p-privacypolicy__block-table tbody { font-size: 1.2rem; } } .p-privacypolicy__block-table tr { border-bottom: 1px solid #B1B1B1; } .p-privacypolicy__block-table tr:last-of-type { border-bottom: unset; } .p-privacypolicy__block-table th { width: 345px; padding: 20px; background-color: #DEECFF; border-right: 1px solid #B1B1B1; } @media screen and (max-width: 600px) { .p-privacypolicy__block-table th { width: 110px; } } .p-privacypolicy__block-table td { width: calc(100% - 345px); padding: 20px; background-color: white; } .p-privacypolicy__block-table ul { padding-left: 1em; } .p-privacypolicy__block-table ul li { list-style-type: disc; } .p-privacypolicy__block-contactBlock { background-color: white; padding: 40px 60px; border-radius: 10px; } .p-privacypolicy__block-contactBlock p { font-size: 1.8rem; font-weight: 500; line-height: 2; } @media screen and (max-width: 600px) { .p-privacypolicy__block-contactBlock { padding: 30px; } .p-privacypolicy__block-contactBlock p { font-size: 1.5rem; } } .p-privacypolicy__block-numberParts { margin-bottom: 20px; } .p-privacypolicy__block-numberParts__title { font-size: 1.8rem; font-weight: 700; color: #0C4B9E; margin-bottom: 1em; } @media screen and (max-width: 600px) { .p-privacypolicy__block-numberParts__title { font-size: 1.5rem; line-height: 1.8; } } .p-privacypolicy__block-numberParts__caption { font-size: 1.8rem; font-weight: 500; line-height: 2; } @media screen and (max-width: 600px) { .p-privacypolicy__block-numberParts__caption { font-size: 1.5rem; line-height: 1.8; } } .p-privacypolicy__block-numberParts__list { font-size: 1.8rem; font-weight: 500; list-style-type: lower-alpha; margin-left: 1em; } @media screen and (max-width: 600px) { .p-privacypolicy__block-numberParts__list { font-size: 1.5rem; line-height: 1.8; } } .p-privacypolicy__block-alphaList { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; } .p-privacypolicy__block-alphaList__parts { display: flex; flex-direction: column; } .p-privacypolicy__block-alphaList__parts-title { font-size: 1.6rem; font-weight: 700; border-bottom: 2px solid black; margin-bottom: 5px; padding-bottom: 5px; } @media screen and (max-width: 600px) { .p-privacypolicy__block-alphaList__parts-title { font-size: 1.5rem; line-height: 1.8; } } .p-privacypolicy__block-alphaList__parts-contents { font-size: 1.8rem; font-weight: 500; } @media screen and (max-width: 600px) { .p-privacypolicy__block-alphaList__parts-contents { font-size: 1.5rem; line-height: 1.8; } } .s-header { position: fixed; top: 10px; width: calc(100% - 20px); height: auto; aspect-ratio: 63/5; left: 0; right: 0; margin: auto; background-color: white; border-radius: 6px; z-index: 3; } @media screen and (max-width: 600px) { .s-header { height: 70px; aspect-ratio: unset; overflow: hidden; } } .s-header__wrapper { position: relative; display: flex; justify-content: end; gap: 40px; width: 100%; height: 100%; } @media screen and (max-width: 600px) { .s-header__wrapper { height: 70px; gap: unset; } } .s-header__logo { position: absolute; width: 13.2vw; height: -moz-fit-content; height: fit-content; top: 0; bottom: 0; left: 40px; margin: auto; } @media screen and (max-width: 600px) { .s-header__logo { width: 50%; height: auto; left: 20px; } .s-header__logo img { width: auto; height: 100%; } } .s-header__pageLink { display: flex; gap: 30px; align-items: center; } .s-header__pageLink a { display: flex; } .s-header__pageLink a span { font-size: 1vw; font-weight: 700; } .s-header__pageLink .subOpen { position: relative; } .s-header__pageLink .subOpen .current { position: relative; padding-right: 1.5em; } .s-header__pageLink .subOpen .current::before, .s-header__pageLink .subOpen .current::after { position: absolute; content: ""; display: block; width: 8px; height: 2px; top: 0; bottom: 0; margin: auto; background-color: #0C4B9E; transition: 0.5s; } .s-header__pageLink .subOpen .current::before { transform: rotate(45deg); right: 7px; right: 0.6vw; } .s-header__pageLink .subOpen .current::after { transform: rotate(-45deg); right: 2px; right: 0.2vw; } .s-header__pageLink .subOpen:hover .current::before { transform: rotate(-45deg); } .s-header__pageLink .subOpen:hover .current::after { transform: rotate(45deg); } .s-header__pageLink .subOpen .subMenu { position: absolute; width: 11.5vw; pointer-events: none; transition: 0.5s; /* width: 100%; */ text-decoration: underline; height: auto; aspect-ratio: 31/23; left: 0; opacity: 0; } .s-header__pageLink .subOpen .subMenu.is-active { opacity: 1; pointer-events: auto; } .s-header__pageLink .subOpen .subMenu .box { display: flex; justify-content: center; flex-direction: column; gap: 0.5em; background: #FFFFFF; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 7px; padding: 2vh 1vw; } .s-header__pageLink .subOpen .subMenu .box a span { font-size: 0.9vw !important; font-weight: 500 !important; } .s-header__recruitButton { display: flex; justify-content: center; align-items: center; flex-direction: column; color: white; background-color: #E4023A; width: 12.7%; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .s-header__recruitButton p { font-size: 1.24vw; } .s-header__recruitButton span { font-family: "Kanit"; font-size: 1.24vw; font-weight: 500; } @media screen and (max-width: 600px) { .s-header__recruitButton { width: 70px; } .s-header__recruitButton p { font-size: 1.2rem; } } .s-header__hamburgerButton { position: relative; content: ""; background-color: #0C4B9E; padding: 20px; } .s-header__hamburgerButton .line { position: relative; content: ""; width: 30px; height: 2px; background-color: white; margin: auto; transition: 0.5s; } .s-header__hamburgerButton .line:nth-of-type(1) { top: 7px; } .s-header__hamburgerButton .line:nth-of-type(3) { bottom: 7px; } .s-header__hamburgerButton.is-active .line:nth-of-type(1) { transform: rotate(45deg); top: 2px; } .s-header__hamburgerButton.is-active .line:nth-of-type(2) { opacity: 0; } .s-header__hamburgerButton.is-active .line:nth-of-type(3) { transform: rotate(-45deg); bottom: 3px; } .s-menu { display: none; } @media screen and (max-width: 600px) { .s-menu { position: fixed; display: block; width: 100%; height: 100%; background-image: url(../images/common/bg_menu.webp); background-position: center; background-repeat: repeat; z-index: 1; top: 0; left: 0; overflow-y: scroll; opacity: 0; pointer-events: none; transition: 0.5s; } } .s-menu.is-active { opacity: 1; pointer-events: auto; } .s-menu__wrapper { display: flex; flex-direction: column; gap: 35px; padding: 130px 40px 65px; } .s-menu__linkBlock { color: white; } .s-menu__linkBlock a span { font-size: 2.4rem; font-weight: 700; } .s-menu__linkBlock ul { display: flex; flex-direction: column; gap: 1em; margin-top: 15px; } .s-menu__linkBlock ul li a span { font-size: 1.5rem; font-weight: 400; text-decoration: underline; } .s-footer { position: relative; padding: 120px 115px 245px; background-image: url(../images/common/bg_footer.svg); } @media screen and (max-width: 600px) { .s-footer { padding: 50px 30px 100px; } } .s-footer__wrapper { position: relative; display: flex; justify-content: space-between; } @media screen and (max-width: 600px) { .s-footer__wrapper { flex-direction: column; } } .s-footer__infoArea { position: relative; display: flex; flex-direction: column; margin-bottom: 65px; } .s-footer__infoArea-logo { font-size: 2.67vw; font-weight: 400; color: white; margin-bottom: 45px; } @media screen and (max-width: 600px) { .s-footer__infoArea-logo { font-size: 2.6rem; } } .s-footer__infoArea-addressArea { display: flex; gap: 25px; z-index: 1; color: white; font-size: 0.8vw; font-weight: 500; } @media screen and (max-width: 600px) { .s-footer__infoArea-addressArea { font-size: 1rem; } } .s-footer__infoArea-addressArea__googlemap { text-decoration: underline; } .s-footer__infoArea-addressArea__address { opacity: 0.5; } .s-footer__infoArea-addressArea__snsLink { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .s-footer__infoArea-addressArea__snsLink svg { width: 15px; height: 15px; fill: white; } @media screen and (max-width: 600px) { .s-footer__infoArea-addressArea__snsLink svg { width: 25px; height: 25px; } } @media screen and (max-width: 600px) { .s-footer__infoArea-addressArea { flex-direction: column; margin-bottom: 45px; } .s-footer__infoArea-addressArea__snsLink { justify-content: unset; } } .s-footer__infoArea-trustBadges { position: absolute; display: flex; align-items: center; gap: 10px; bottom: 0; } .s-footer__infoArea-trustBadges img { width: auto; height: 45px; } @media screen and (max-width: 600px) { .s-footer__infoArea-trustBadges { position: relative; } } .s-footer__linkArea { display: flex; width: 35vw; gap: 65px; } @media screen and (max-width: 600px) { .s-footer__linkArea { flex-direction: column; gap: 40px; width: 100%; } } .s-footer__linkArea-block { display: flex; flex-direction: column; width: 50%; gap: 35px; } @media screen and (max-width: 600px) { .s-footer__linkArea-block { gap: 40px; width: 100%; } } .s-footer__linkArea-parts { display: flex; flex-direction: column; color: white; } .s-footer__linkArea-parts.mail a { display: flex; align-items: end; gap: 0.5em; } .s-footer__linkArea-parts.mail a span { line-height: 1; } @media screen and (max-width: 600px) { .s-footer__linkArea-parts.mail a img { width: auto; } } .s-footer__linkArea-parts a { position: relative; font-size: 1.45vw; font-weight: 700; } @media screen and (max-width: 600px) { .s-footer__linkArea-parts a { font-size: 2rem; } } .s-footer__linkArea-parts ul { margin-top: 15px; } .s-footer__linkArea-parts ul li { margin-bottom: 10px; } .s-footer__linkArea-parts ul li a { font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-style: normal; display: flex; font-size: 0.95vw; font-weight: 500; text-decoration: underline; } @media screen and (max-width: 600px) { .s-footer__linkArea-parts ul li a { font-size: 1.2rem; } } .s-footer__linkArea-parts ul li:last-child { margin-bottom: unset; } .s-footer__copyright { position: absolute; right: 0; bottom: -120px; color: white; font-family: "Kanit"; font-size: 0.95vw; font-style: italic; font-weight: 400; } @media screen and (max-width: 600px) { .s-footer__copyright { font-size: 1rem; bottom: -60px; right: 0; } } @media screen and (min-width: 601px) { .u-sp { display: none; } } @media screen and (max-width: 600px) { .u-pc { display: none; } } .u-mt05 { margin-top: 0.5em; } .u-mb05 { margin-bottom: 0.5em; } .u-pt05 { padding-top: 0.5em; } .u-pb05 { padding-bottom: 0.5em; } .u-mt1 { margin-top: 1em; } .u-mb1 { margin-bottom: 1em; } .u-pt1 { padding-top: 1em; } .u-pb1 { padding-bottom: 1em; } .u-mt2 { margin-top: 2em; } .u-mb2 { margin-bottom: 2em; } .u-pt2 { padding-top: 2em; } .u-pb2 { padding-bottom: 2em; } .u-mt3 { margin-top: 3em; } .u-mb3 { margin-bottom: 3em; } .u-pt3 { padding-top: 3em; } .u-pb3 { padding-bottom: 3em; } .u-mt4 { margin-top: 4em; } .u-mb4 { margin-bottom: 4em; } .u-pt4 { padding-top: 4em; } .u-pb4 { padding-bottom: 4em; } .u-mt5 { margin-top: 5em; } .u-mb5 { margin-bottom: 5em; } .u-pt5 { padding-top: 5em; } .u-pb5 { padding-bottom: 5em; } .u-white { color: #fff; fill: #fff; } .u-white * { color: #fff; fill: #fff; } .u-center { text-align: center; margin-left: auto; margin-right: auto; } .u-right { text-align: right; margin-left: auto; } .u-left { text-align: left; margin-right: auto; } @media screen and (min-width: 601px) { .u-sp { display: none !important; } } @media screen and (max-width: 600px) { .u-pc { display: none !important; } }