@charset "UTF-8"; /* CSS Document ************************ */ /*                                  */ /* 内容 : 初期設定させているスタイルをリセットしている */ /* 作成日: 2010年09月29日 */ /* 変更日: 9999年99月99日 */ /*                                  */ /* ******************************** */ :where(.mod-freeHTML) { text-decoration: none; } :where(.mod-freeHTML) fieldset { border: none; } :where(.mod-freeHTML) h1, :where(.mod-freeHTML) h2, :where(.mod-freeHTML) h3, :where(.mod-freeHTML) h4, :where(.mod-freeHTML) h5, :where(.mod-freeHTML) h6, :where(.mod-freeHTML) p, :where(.mod-freeHTML) dl, :where(.mod-freeHTML) dt, :where(.mod-freeHTML) dd, :where(.mod-freeHTML) ul, :where(.mod-freeHTML) li, :where(.mod-freeHTML) ol, :where(.mod-freeHTML) form, :where(.mod-freeHTML) input, :where(.mod-freeHTML) select { margin: 0; padding: 0; } :where(.mod-freeHTML) h1, :where(.mod-freeHTML) h2, :where(.mod-freeHTML) h3, :where(.mod-freeHTML) h4, :where(.mod-freeHTML) h5, :where(.mod-freeHTML) h6 { font-weight: 400; } :where(.mod-freeHTML) img { border: none; vertical-align: bottom; max-width: 100%; } :where(.mod-freeHTML) a { text-decoration: none; } :where(.mod-freeHTML) em { font-style: normal; } :where(.mod-freeHTML) ul li { list-style-type: none; list-style-image: none; } :where(.mod-freeHTML) address { font-style: normal; } :where(.mod-freeHTML) { /* リセット */ } :where(.mod-freeHTML) input:focus, :where(.mod-freeHTML) textarea:focus { outline: none; } :where(.mod-freeHTML) input, :where(.mod-freeHTML) textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; } :where(.mod-freeHTML) button, :where(.mod-freeHTML) input[type=submit], :where(.mod-freeHTML) input[type=button] { -webkit-appearance: none; -moz-appearance: none; appearance: none; /*padding: 0;*/ border: none; outline: none; background: transparent; cursor: pointer; border-radius: 0; box-shadow: none; } :where(.mod-freeHTML) button { font-size: 100%; line-height: inherit; } :where(.mod-freeHTML) select { outline: none; text-indent: 0.01px; background: none transparent; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; } :where(.mod-freeHTML) select option { background-color: #fff; color: #333; } :where(.mod-freeHTML) select::-ms-expand { display: none; } :where(.mod-freeHTML) select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #828c9a; } :where(.mod-freeHTML) .slick-slide:focus { outline: none; } :where(.mod-freeHTML) { /* float解除 */ } :where(.mod-freeHTML) .cbox:after { content: ""; clear: both; height: 0; display: block; visibility: hidden; } @media screen and (min-width: 801px), print { :where(.mod-freeHTML) .sp { display: none !important; } } @media only screen and (max-width: 800px) { :where(.mod-freeHTML) .pc { display: none !important; } } /* CSS Document ************************ */ /*                                  */ /* 内容 : サイト全体で使用する細かい関数など */ /* 作成日: 2024年07月22日 */ /* 変更日: 2025年03月31日 */ /*                                  */ /* ******************************** */ /* */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ /* 色 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ :root { --opacity:1.0; --col-corp:16, 46, 161; --col-wh:255, 255, 255; --col-gray:236, 236, 236; --col-txt:33, 33, 33; --col-bl1:0, 110, 250; --col-bl2:44, 210, 255; --col-bl3:111, 218, 185; --col-bl4:191, 219, 254; --col-bl5:153, 197, 253; --col-bl6:76, 153, 251; --col-pl: 75, 58, 192; --col-cr: 96, 97, 203; } /* ブレイクポイント */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ /* ウィンドウサイズに伴うサイズ計算 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ /* 共通装飾 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ :root { --rad: 8px; } @media screen and (max-width: 800px) { :root { --rad: 4px; } } /* ++++++++++++++++++++++++++++++++++++++++++++++ */ /* 共通項目 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ /* 採用サイト下で上書き */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ .st-backToTopFixed { z-index: 1; bottom: 90px; } @media screen and (max-width: 1024px) { .st-backToTopFixed { bottom: 50px; } } .no-scroll .st-backToTopFixed, .on .st-backToTopFixed, .js-modalopen .st-backToTopFixed { z-index: -1; } @media screen and (max-width: 1024px) { .st-siteFooter { padding-bottom: 60px; } } .mod-freeHTML:has(+ .mod-freeHTML) { overflow: visible; z-index: 2; } /* 採用サイト/編集箇所のみに適用 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ .mod-freeHTML { font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "MS ゴシック", "MS Gothic", sans-serif; color: rgb(33, 33, 33); font-weight: 400; letter-spacing: 1px; -webkit-text-size-adjust: 100%; position: relative; line-break: strict; line-height: 1.5; font-size: clamp(13.7403031906px, 13.7403031906px + (15 - 13.7403031906) * (100vw - 375px) / (1440 - 375), 15px); scroll-behavior: smooth; overflow: hidden; } .mod-freeHTML-header { position: absolute; width: 100%; overflow: visible; } .mod-freeHTML { /* フォント */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ } .mod-freeHTML .en { font-family: "Poppins", sans-serif; font-weight: 600; font-style: normal; } .mod-freeHTML .en--md { font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; } .mod-freeHTML { /* リンク */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ } .mod-freeHTML a { color: inherit; transition: 0.4s; } .mod-freeHTML .hover_anim { transition: 0.4s; } @media screen and (min-width: 801px), print { .mod-freeHTML .hover_anim:hover { opacity: 0.5; } } @media screen and (max-width: 800px) { .mod-freeHTML .hover_anim:active { opacity: 0.5; } } .mod-freeHTML { /* テキスト装飾 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ /* 小文字 */ } .mod-freeHTML .cap { line-height: 1.5; font-size: 0.86em; } .mod-freeHTML .indent { margin-left: 1em; text-indent: -1em; } .mod-freeHTML { /* 画像 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ } .mod-freeHTML img { pointer-events: none; user-select: none; } .mod-freeHTML { /* リスト */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ } .mod-freeHTML li { list-style: none; } .mod-freeHTML .num-list { counter-reset: section; } .mod-freeHTML .num-list .num-list-li, .mod-freeHTML .num-list > li { position: relative; padding-left: 2em; counter-increment: section; line-height: 1.5; } .mod-freeHTML .num-list .num-list-li:not(:first-child), .mod-freeHTML .num-list > li:not(:first-child) { margin-top: 10px; } .mod-freeHTML .num-list .num-list-li::before, .mod-freeHTML .num-list > li::before { content: counter(section, decimal-leading-zero) "."; position: absolute; left: 0; top: 3px; border-radius: 100%; color: rgb(0, 110, 250); box-sizing: border-box; font-weight: 500; line-height: 1em; } .mod-freeHTML .circle-list .circle-list-li, .mod-freeHTML .circle-list li { position: relative; padding-left: 1em; line-height: 1.5; } .mod-freeHTML .circle-list .circle-list-li:not(:first-child), .mod-freeHTML .circle-list li:not(:first-child) { margin-top: 10px; } .mod-freeHTML .circle-list .circle-list-li::before, .mod-freeHTML .circle-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6em; height: 0.6em; border-radius: 100%; background-color: rgb(0, 110, 250); } .mod-freeHTML .sq-list .sq-list-li, .mod-freeHTML .sq-list li { position: relative; padding-left: 1em; line-height: 1.5; } .mod-freeHTML .sq-list .sq-list-li:not(:first-child), .mod-freeHTML .sq-list li:not(:first-child) { margin-top: 10px; } .mod-freeHTML .sq-list .sq-list-li::before, .mod-freeHTML .sq-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5em; height: 0.5em; background-color: rgb(0, 110, 250); } .mod-freeHTML { /* ナビゲーション */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ } .mod-freeHTML .recruit-nav { position: relative; background-color: rgba(0, 110, 250, 0.6); } .mod-freeHTML .recruit-nav-list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-nav-list { flex-direction: column; } } .mod-freeHTML .recruit-nav-item { position: relative; text-align: center; } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-nav-item { width: 100%; box-sizing: border-box; } } .mod-freeHTML .recruit-nav-item:not(:last-child)::before { content: ""; background: rgba(255, 255, 255, 0.5); position: absolute; margin: auto; } @media screen and (min-width: 801px), print { .mod-freeHTML .recruit-nav-item:not(:last-child)::before { width: 1px; height: 60%; top: 0; bottom: 0; right: 0; } } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-nav-item:not(:last-child)::before { width: 90%; height: 1px; left: 0; right: 0; bottom: 0; } } .mod-freeHTML .recruit-nav-link { padding: clamp(19.875px, 19.875px + (25 - 19.875) * (100vw - 375px) / (1440 - 375), 25px) clamp(26.775px, 26.775px + (35 - 26.775) * (100vw - 375px) / (1440 - 375), 35px) clamp(26.775px, 26.775px + (35 - 26.775) * (100vw - 375px) / (1440 - 375), 35px); box-sizing: border-box; display: inline-block; position: relative; font-size: clamp(15.1938299618px, 15.1938299618px + (17 - 15.1938299618) * (100vw - 375px) / (1440 - 375), 17px); color: rgb(255, 255, 255); font-weight: 500; } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-nav-link { padding: clamp(16.2px, 16.2px + (20 - 16.2) * (100vw - 375px) / (1440 - 375), 20px) clamp(8.4px, 8.4px + (10 - 8.4) * (100vw - 375px) / (1440 - 375), 10px) clamp(23.4px, 23.4px + (30 - 23.4) * (100vw - 375px) / (1440 - 375), 30px); width: 100%; } } .mod-freeHTML .recruit-nav-link::before, .mod-freeHTML .recruit-nav-link::after { content: ""; display: block; width: 10px; height: 1px; background: rgb(255, 255, 255); position: absolute; top: calc(100% - 22px); left: calc(50% - 4px); transform-origin: 50% calc(100% - 5px); transition: top 0.3s ease; } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-nav-link::before, .mod-freeHTML .recruit-nav-link::after { width: 1px; height: 6px; background: rgb(255, 255, 255); position: absolute; left: calc(50% - 0.5px); transform-origin: 50% calc(100% - 0.55px); } } .mod-freeHTML .recruit-nav-link::before { transform: rotate(45deg); } .mod-freeHTML .recruit-nav-link::after { transform: rotate(-45deg); } @media (any-hover: hover) { .mod-freeHTML .recruit-nav-link:hover::before, .mod-freeHTML .recruit-nav-link:hover::after { top: calc(100% - 18px); } } .mod-freeHTML { /* アコーディオン */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ } .mod-freeHTML summary::-webkit-details-marker { display: none; } .mod-freeHTML .accordion { border-radius: 50px; border: 1px solid rgb(191, 219, 254); background: rgb(255, 255, 255); } .mod-freeHTML .accordion.is-opened .question::after { rotate: 90deg; } .mod-freeHTML .accordion.is-opened .answer { opacity: 1; } .mod-freeHTML .question { padding: clamp(18.423px, 18.423px + (23 - 18.423) * (100vw - 375px) / (1440 - 375), 23px) clamp(42.903px, 42.903px + (63 - 42.903) * (100vw - 375px) / (1440 - 375), 63px) clamp(16.2px, 16.2px + (20 - 16.2) * (100vw - 375px) / (1440 - 375), 20px) clamp(30px, 30px + (40 - 30) * (100vw - 375px) / (1440 - 375), 40px); position: relative; } .mod-freeHTML .question::before, .mod-freeHTML .question::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; background: rgb(0, 110, 250); } .mod-freeHTML .question::before { right: 40px; width: 23px; height: 2px; } @media screen and (max-width: 800px) { .mod-freeHTML .question::before { width: 16px; right: 20px; } } .mod-freeHTML .question::after { right: 50px; width: 2px; height: 23px; transition: rotate 0.3s ease; } @media screen and (max-width: 800px) { .mod-freeHTML .question::after { height: 16px; right: 27px; } } @media (any-hover: hover) { .mod-freeHTML .question:hover { cursor: pointer; } } .mod-freeHTML .answer { height: 0; opacity: 0; overflow: hidden; transition: height 0.4s ease, opacity 0.4s ease; } .mod-freeHTML .answer-inner { padding: clamp(12.375px, 12.375px + (15 - 12.375) * (100vw - 375px) / (1440 - 375), 15px) clamp(30px, 30px + (40 - 30) * (100vw - 375px) / (1440 - 375), 40px) clamp(18.423px, 18.423px + (23 - 18.423) * (100vw - 375px) / (1440 - 375), 23px) clamp(30px, 30px + (40 - 30) * (100vw - 375px) / (1440 - 375), 40px); } /* グラデーションデコレーション */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ .deco { height: auto; aspect-ratio: 1/1; border-radius: 50%; position: absolute; } .deco.bl1 { background: radial-gradient(circle at center, rgba(0, 110, 250, 0.3) 0%, rgba(0, 110, 250, 0) 47%); } .deco.bl2 { background: radial-gradient(circle at center, rgba(44, 210, 255, 0.5) 0%, rgba(44, 210, 255, 0) 47%); } .deco.bl3 { background: radial-gradient(circle at center, rgba(111, 218, 185, 0.7) 0%, rgba(111, 218, 185, 0) 47%); } .deco.s { width: 40vw; } @media screen and (max-width: 800px) { .deco.s { width: min(40vw, 200px); } } .deco.m { width: 60vw; } @media screen and (max-width: 800px) { .deco.m { width: min(50vw, 300px); } } .deco.l { width: 70vw; } @media screen and (max-width: 800px) { .deco.l { width: min(70vw, 400px); } } /* 砂粒背景 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ .bg-grain { position: absolute; inset: 0; mix-blend-mode: luminosity; pointer-events: none; z-index: -1; } .bg-grain.portal { filter: brightness(1.3); } .bg-grain.career { filter: brightness(1.3); } /* Safari */ _::-webkit-full-page-media, _:future, :root .mod-freeHTML > .bg-grain { position: fixed; } _::-webkit-full-page-media, _:future, :root header { position: relative; z-index: 1; background-color: #fff; } _::-webkit-full-page-media, _:future, :root .on header, _::-webkit-full-page-media, _:future, :root .js-modalopen header { position: static; } _::-webkit-full-page-media, _:future, :root .st-freeContents { z-index: 0; position: relative; } _::-webkit-full-page-media, _:future, :root .recruit-header-drawer-wrap { min-height: 100svh; } @media screen and (min-width: 801px), print { _::-webkit-full-page-media, _:future, :root .recruit-header-drawer-wrap { padding: 210px 80px 500px; } } [class^=deco] { position: absolute; aspect-ratio: 1/1; filter: blur(40px); pointer-events: none; } /* アニメーション */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ .fadein { opacity: 0; transition-delay: 0.2s; transition-duration: 1s; } .fadein-t { opacity: 0; transition-duration: 1s; transform: translateY(10px); } .fadein-b { opacity: 0; transition-duration: 1s; transform: translateY(-10px); } .fadein-l { opacity: 0; transition-delay: 0.2s; transition-duration: 1s; transform: translateX(-10px); } .fadein-r { opacity: 0; transition-delay: 0.2s; transition-duration: 1s; transform: translateX(10px); } .fadein-blur { opacity: 0; transition-delay: 0.2s; transition-duration: 1s; filter: blur(6px); } .fadein.on, .fadein-t.on, .fadein-b.on, .fadein-l.on, .fadein-r.on, .fadein-blur.on { opacity: 1; transform: translateY(0px); transform: translateX(0px); filter: blur(0); } .link--arrow { display: flex; align-items: center; } .link--arrow:after { content: ""; display: inline-block; margin-left: 0.3em; width: 1em; aspect-ratio: 1/1; background-color: rgb(var(--col-bl1)); clip-path: polygon(100% 50%, 48.86% 28.433%, 55.99% 45.124%, 0% 45.124%, 0% 54.828%, 55.99% 54.828%, 48.86% 71.567%, 100% 50%); transition: 0.4s; } @media (any-hover: hover) { .link--arrow:hover { opacity: 1; } .link--arrow:hover:after { transform: translateX(7px); } } /* ++++++++++++++++++++++++++++++++++++++++++++++ */ /* recruitサイト用header */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ :root { --header-height:111px; --header-padding:100px; } @media screen and (max-width: 1024px) { :root { --header-height:60px; --header-padding:45px; } } :root { --basecolor: var(--col-bl1); } .js-secondmenu-trigger { cursor: pointer; } .js-secondmenu { position: absolute; opacity: 0; pointer-events: none; transition: 0.4s; } .is-open .js-secondmenu { opacity: 1; pointer-events: all; } .recruit-header { font-size: clamp(12px, 1vw, 14px); } .recruit-header--padding { padding-top: calc(var(--header-padding) + 50px); } @media screen and (max-width: 800px) { .recruit-header--padding { padding-top: calc(var(--header-padding) + 30px); } } .recruit-header.is-fixed { position: fixed; top: 0; left: 0; z-index: 99; } .recruit-header .com { pointer-events: none; color: rgba(var(--col-txt), 0.2) !important; } .recruit-header .com.link--arrow:after { display: none; } .recruit-header .com:before { content: "COMING SOON"; display: block; position: absolute; font-family: "Poppins--semi", sans-serif; color: rgba(var(--col-txt), 0.6); } .recruit-header { position: absolute; padding-inline: 1.3888888889%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; z-index: 999; column-gap: 1.3888888889%; top: 0; left: 0; width: 100%; height: 100px; } @media screen and (max-width: 800px) { .recruit-header { padding-inline: 0; height: 45px; } } .recruit-header-left { display: flex; align-items: center; column-gap: 2em; height: 100%; color: rgb(33, 33, 33); flex-grow: 1; } @media screen and (max-width: 800px) { .recruit-header-left { display: none; } } .recruit-header-right { display: grid; grid-template-columns: auto 50px; } @media screen and (max-width: 800px) { .recruit-header-right { grid-template-columns: auto 45px; } } .recruit-header-right { align-items: center; column-gap: 1em; height: 100%; flex-grow: 1; flex-shrink: 0; } @media screen and (min-width: 801px), print { .recruit-header-right { max-width: 435px; } } @media screen and (max-width: 800px) { .recruit-header-right { width: 100%; height: 100%; column-gap: 0; } } @media screen and (max-width: 800px) { .recruit-header-sitename { display: none; } } .recruit-header-sitename a { display: block; height: 100%; font-size: clamp(12.2480425826px, 12.2480425826px + (13 - 12.2480425826) * (100vw - 375px) / (1440 - 375), 13px); text-transform: uppercase; } .recruit-header-nav { display: flex; justify-content: space-around; padding: 0 1em; height: 100%; flex-grow: 1; } @media screen and (max-width: 1200px) { .recruit-header-nav { display: none; } } .recruit-header-nav-secondmenu { background-color: rgba(var(--col-wh), 0.95); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); padding: 30px 35px; position: absolute; left: 50%; transform: translateX(-50%); width: auto; top: calc(100% - 40px); } @media screen and (min-width: 801px), print { .recruit-header-nav-secondmenu { border-radius: 20px; } } @media screen and (max-width: 1024px) { .recruit-header-nav-secondmenu { top: auto; bottom: 100%; position: fixed; inset: 160px 0 auto 0; z-index: 100; box-sizing: border-box; box-shadow: none; transform: translateX(0); } } @media screen and (max-width: 800px) { .recruit-header-nav-secondmenu { inset: 105px 0 auto 0; } } .is-open .recruit-header-nav-secondmenu { bottom: auto; } @media screen and (max-width: 1024px) { .is-open .recruit-header-nav-secondmenu { top: 100%; } } @media screen and (max-width: 1024px) and (max-width: 800px) { .is-open .recruit-header-nav-secondmenu { top: calc(var(--header-height) + var(--header-padding)); } } @media screen and (min-width: 1201px), print { .is-open .recruit-header-nav-secondmenu { top: calc(100% - 30px); } } .is-fixed .recruit-header-nav-secondmenu { top: 45px; bottom: auto; } .recruit-header-nav-item { position: relative; width: 100%; } .recruit-header-nav-item-catname { display: flex; padding: 0 0.5em; align-items: center; height: 100%; width: 100%; box-sizing: border-box; justify-content: center; } @media (any-hover: hover) { .mod-freeHTML .recruit-header-nav-item-catname { opacity: 1; } .recruit-header-nav-item-catname { transition: 0.4s; } .recruit-header-nav-item-catname:hover { background-color: rgba(var(--col-wh), 0.6); color: rgb(var(--col-bl1)); } } .recruit-header-nav-item-second-link { white-space: nowrap; padding: 0.3em 0; display: flex; line-height: 1.5; } @media (any-hover: hover) { .recruit-header-nav-item-second-link { transition: color 0.4s; } .recruit-header-nav-item-second-link:hover { opacity: 1; color: rgb(var(--col-bl1)); } } .recruit-header-btn { width: 100%; padding: 8px min(10%, 20px); box-sizing: border-box; display: grid; align-items: center; text-align: center; row-gap: 5px; border-radius: 50px; color: rgb(255, 255, 255); background: rgb(var(--basecolor)); border: 1px solid rgb(var(--basecolor)); box-sizing: border-box; letter-spacing: 0; transition: 0.4s; } .recruit-header-btn.experienced { --basecolor: var(--col-pl); } @media screen and (max-width: 800px) { .recruit-header-btn { height: 100%; border-radius: 0%; } } .is-open .recruit-header-btn { background-color: rgb(255, 255, 255); color: rgb(var(--basecolor)); } .recruit-header-btn-wrap { flex-grow: 1; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0.5em; height: 100%; } @media screen and (max-width: 800px) { .recruit-header-btn-wrap { column-gap: 0; height: 100%; flex: 1; } } .recruit-header-btn-txt { font-weight: 400; line-height: 1; } .recruit-header-btn-txt.main { font-size: clamp(15.1938299618px, 15.1938299618px + (17 - 15.1938299618) * (100vw - 375px) / (1440 - 375), 17px); } .recruit-header-btn-txt.sub { font-size: clamp(12px, 12px + (12 - 12) * (100vw - 375px) / (1440 - 375), 12px); } @media screen and (max-width: 800px) { .recruit-header-btn-txt.sub { display: none; } } .recruit-header-btnmenu { position: relative; display: grid; align-items: center; height: 100%; } .recruit-header-btnmenu--career { --basecolor: var(--col-pl); } .recruit-header-btnmenu-second { display: grid; gap: 20px; background-color: color-mix(in srgb, rgb(var(--basecolor)) 20%, #fff); top: 100%; } @media screen and (max-width: 1024px) { .recruit-header-btnmenu-second { top: auto; bottom: 100%; border-top: 1px solid rgb(var(--basecolor)); border-bottom: 1px solid rgb(var(--basecolor)); } } @media screen and (max-width: 800px) { .recruit-header-btnmenu-second { border-top: none; } } @media screen and (min-width: 1201px), print { .is-open .recruit-header-btnmenu-second { top: calc(100% - 10px); } } .recruit-header-btnmenu-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .recruit-header-btnmenu-toplink { display: flex; align-items: center; gap: 5px 10px; font-size: clamp(22.6867017024px, 22.6867017024px + (28 - 22.6867017024) * (100vw - 375px) / (1440 - 375), 28px); } @media screen and (max-width: 800px) { .recruit-header-btnmenu-toplink { justify-content: space-between; } } .recruit-header-btnmenu-toplink-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; } @media screen and (max-width: 800px) { .recruit-header-btnmenu-toplink-tit { flex-direction: column; align-items: flex-start; } } .recruit-header-btnmenu-toplink-sub { font-size: clamp(20.0440884236px, 20.0440884236px + (24 - 20.0440884236) * (100vw - 375px) / (1440 - 375), 24px); color: rgb(var(--basecolor)); line-height: 1; } @media screen and (max-width: 1200px) { .recruit-header-btnmenu-toplink-sub br { display: none; } } @media screen and (max-width: 800px) { .recruit-header-btnmenu-toplink-sub br { display: block; } } .recruit-header-btnmenu-toplink-main { font-size: clamp(14.4715347705px, 14.4715347705px + (16 - 14.4715347705) * (100vw - 375px) / (1440 - 375), 16px); } .recruit-header-btnmenu-toplink:after { background-color: rgb(var(--basecolor)); } @media (any-hover: hover) { .recruit-header-btnmenu-toplink:hover { color: rgb(var(--basecolor)); } } .recruit-header-btnmenu-catname { color: rgb(var(--basecolor)); font-size: clamp(15.9078148989px, 15.9078148989px + (18 - 15.9078148989) * (100vw - 375px) / (1440 - 375), 18px); white-space: nowrap; margin-bottom: 0.5em; } .recruit-header-btnmenu-link { white-space: nowrap; padding: 0.3em 0; display: flex; line-height: 1.3; font-size: clamp(12.9994166045px, 12.9994166045px + (14 - 12.9994166045) * (100vw - 375px) / (1440 - 375), 14px); } @media (any-hover: hover) { .recruit-header-btnmenu-link:hover { opacity: 1; color: rgb(var(--basecolor)); } } .recruit-header-btnmenu .link--arrow::after { background-color: rgb(var(--basecolor)); } .mod-freeHTML .recruit-header-hamburger { flex-shrink: 0; width: 50px; height: auto; aspect-ratio: 1/1; border-radius: 50%; background: rgb(255, 255, 255); position: absolute; top: 25px; } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-header-hamburger { top: 0; } } .mod-freeHTML .recruit-header-hamburger { right: 1.3888888889vw; z-index: 9999; cursor: pointer; } .mod-freeHTML .recruit-header-hamburger.is-fixed { position: fixed; top: 25px; } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-header-hamburger { width: 45px; border-radius: 0%; right: 0; } } .mod-freeHTML .recruit-header-hamburger-icon { margin-inline: auto; display: block; width: 50%; height: 2px; background: #333; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-header-hamburger-icon { width: 50%; } } .mod-freeHTML .recruit-header-hamburger-icon::before, .mod-freeHTML .recruit-header-hamburger-icon::after { content: ""; display: block; width: 100%; height: 100%; background: #333; position: absolute; left: 0; transition: 0.3s; } .mod-freeHTML .recruit-header-hamburger-icon::before { top: -8px; } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-header-hamburger-icon::before { top: -6px; } } .mod-freeHTML .recruit-header-hamburger-icon::after { bottom: -8px; } @media screen and (max-width: 800px) { .mod-freeHTML .recruit-header-hamburger-icon::after { bottom: -6px; } } .recruit-header-hamburger.is-open { background-color: #333; } .recruit-header-hamburger.is-open .recruit-header-hamburger-icon { background: transparent; } .recruit-header-hamburger.is-open .recruit-header-hamburger-icon:before { transform: rotate(45deg); background-color: #fff; top: 0; } .recruit-header-hamburger.is-open .recruit-header-hamburger-icon:after { transform: rotate(-45deg); background-color: #fff; bottom: 0; } .recruit-header-hamburger_cover { transition: 0.4s; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(255, 255, 255, 0.97); } .recruit-header-hamburger_cover.is-open { display: block; } @media screen and (max-width: 800px) { .recruit-header-hamburger_cover.is-open { display: none; } } .recruit-header-drawer { pointer-events: none; visibility: hidden; opacity: 0; position: fixed; z-index: 1000; inset: 0; background-color: rgba(255, 255, 255, 0.97); background-image: radial-gradient(at 12% 8%, rgba(var(--col-bl2), 0.4) 0px, transparent 40%), radial-gradient(at 94% 93%, rgba(var(--col-bl1), 0.4) 0px, transparent 30%); transform: scale(1.4); transition: opacity 0.3s ease, transform 0.3s ease; overflow-y: auto; } .recruit-header-drawer.is-open { pointer-events: all; visibility: visible; opacity: 1; transform: scale(1); } .recruit-header-drawer-wrap { margin-inline: auto; padding: 100px 80px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 1440px; min-height: 100%; row-gap: 100px; } @media screen and (max-width: 800px) { .recruit-header-drawer-wrap { padding: 110px 45px; row-gap: 60px; } } .recruit-header-drawer-list { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 50px; } .recruit-header-drawer-item-catname { font-size: clamp(17.3129907451px, 17.3129907451px + (20 - 17.3129907451) * (100vw - 375px) / (1440 - 375), 20px); } .mod-freeHTML .recruit-header-drawer-item-catname { color: rgb(0, 110, 250); margin-bottom: 0.4em; } .mod-freeHTML .recruit-header-drawer-item-second-link { display: flex; align-items: center; position: relative; line-height: 1.3; font-size: clamp(12.9994166045px, 12.9994166045px + (14 - 12.9994166045) * (100vw - 375px) / (1440 - 375), 14px); padding: 0.5em 0 0.5em 0; } .recruit-header-drawer-item-second-link { transition: opacity 0.3s ease; } @media (any-hover: hover) { .recruit-header-drawer-item-second-link:hover { color: rgb(0, 110, 250); opacity: 1; } } .recruit-header-drawer-list--type { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); } @media screen and (max-width: 800px) { .recruit-header-drawer-list--type { grid-template-columns: repeat(1, 1fr); } } .recruit-header-drawer-list--type { gap: 50px; } .recruit-header-drawer-list--type-item { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 0; } .recruit-header-drawer-list--type-item--career { --basecolor: var(--col-pl); } .recruit-header-drawer-list--type-item-head { background-color: rgba(var(--basecolor), 1); padding: 0 2em 0 10px; height: 70px; line-height: 1.8; border-radius: 0 70px 0 0; font-size: clamp(18.690760826px, 18.690760826px + (22 - 18.690760826) * (100vw - 375px) / (1440 - 375), 22px); position: relative; z-index: 1; } .recruit-header-drawer-list--type-item-body { padding: 20px max(30px, 5%); border: 1px solid rgba(var(--basecolor), 0.4); background-color: rgba(255, 255, 255, 0.4); font-size: clamp(18.690760826px, 18.690760826px + (22 - 18.690760826) * (100vw - 375px) / (1440 - 375), 22px); display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } @media screen and (max-width: 800px) { .recruit-header-drawer-list--type-item-body { grid-template-columns: repeat(1, 1fr); } } .recruit-header-drawer-list--type-item-body { gap: 30px; } .recruit-header-drawer-list--type-item-toplink { display: flex; justify-content: space-between; align-items: center; gap: 5px 20px; box-sizing: border-box; } .recruit-header-drawer-list--type-item-toplink:after { background-color: rgb(255, 255, 255); } .recruit-header-drawer-list--type-item-toplink-tit { display: grid; align-self: center; gap: 5px 0; padding: 0 1em; color: #fff; } .recruit-header-drawer-list--type-item-toplink-sub { font-size: 12px; line-height: 1; color: #fff; opacity: 0.6; } .recruit-header-drawer-list--type-item-toplink-main { font-size: clamp(18.690760826px, 18.690760826px + (22 - 18.690760826) * (100vw - 375px) / (1440 - 375), 22px); line-height: 1; } .recruit-header-drawer-list--type-item-toplink-icon { width: 20px; aspect-ratio: 1/1; border-radius: 100%; padding: 15px; align-self: center; } @media screen and (min-width: 801px), print { .recruit-header-drawer-list--type-item-toplink-icon { transition: 0.4s; } } @media screen and (min-width: 801px), print { .recruit-header-drawer-list--type-item-toplink:hover { opacity: 1; } .recruit-header-drawer-list--type-item-toplink:hover .recruit-header-drawer-list--type-item-toplink-icon { transform: translateX(7px); } } .recruit-header-drawer-list--type-item-catname { color: rgba(var(--basecolor), 1); font-size: clamp(15.9078148989px, 15.9078148989px + (18 - 15.9078148989) * (100vw - 375px) / (1440 - 375), 18px); margin-bottom: 0.5em; } .mod-freeHTML .recruit-header-drawer-list--type-item-second-link:after { background-color: rgba(var(--basecolor), 1); } @media (any-hover: hover) { .recruit-header-drawer-list--type-item-second-link:hover { color: rgba(var(--basecolor), 1); } } #js-slideup-trigger { cursor: pointer; } .recruit-fixedmenu { position: fixed; bottom: 0; right: 0; z-index: 100; width: min(100%, 300px); transform: translateY(calc(100% - 72px)); transition: 0.4s; } @media screen and (max-width: 800px) { .recruit-fixedmenu { transform: translateY(calc(100% - 40px)); } } .recruit-fixedmenu.is-open { transform: translateY(0); } @media screen and (max-width: 800px) { .recruit-fixedmenu { width: 100%; } } .recruit-fixedmenu-title { color: rgb(255, 255, 255); background-color: rgb(var(--col-corp)); font-size: clamp(21.3753968324px, 21.3753968324px + (26 - 21.3753968324) * (100vw - 375px) / (1440 - 375), 26px); letter-spacing: 0.15em; padding: 0 2em; display: flex; justify-content: center; align-items: center; text-align: center; gap: 1em; height: 72px; border-radius: 72px 0 0 0; } @media screen and (max-width: 800px) { .recruit-fixedmenu-title { border-radius: 0; height: 40px; font-size: clamp(17.3129907451px, 17.3129907451px + (20 - 17.3129907451) * (100vw - 375px) / (1440 - 375), 20px); } } .recruit-fixedmenu-title:before, .recruit-fixedmenu-title:after { content: ""; display: block; width: 0.6em; height: 0.6em; } @media screen and (min-width: 801px), print { .recruit-fixedmenu-title:after { display: none; } } .recruit-fixedmenu-title:before { border-right: 3px solid rgb(255, 255, 255); border-bottom: 3px solid rgb(255, 255, 255); box-sizing: border-box; transform: rotate(-135deg) translateY(-0.3em); transition: transform 0.2s; } @media screen and (max-width: 800px) { .recruit-fixedmenu-title:before { border-right: 2px solid rgb(255, 255, 255); border-bottom: 2px solid rgb(255, 255, 255); } } .is-open .recruit-fixedmenu-title:before { transform: rotate(45deg) translateY(-0.1em); } .recruit-fixedmenu-body { background-color: rgb(var(--col-corp)); padding: 30px; } .recruit-fixedmenu-btn { display: grid; align-items: center; padding: 0 1em; font-size: clamp(17.3129907451px, 17.3129907451px + (20 - 17.3129907451) * (100vw - 375px) / (1440 - 375), 20px); text-align: center; background-color: rgb(0, 110, 250); height: 50px; border-radius: 50px; } .mod-freeHTML .recruit-fixedmenu-btn { color: rgb(255, 255, 255); } .recruit-fixedmenu-btn:not(:first-child) { margin-top: 10px; } .recruit-fixedmenu-btn--career { background-color: rgb(75, 58, 192); } .no-scroll { overflow: hidden; } .recruit-footer { background-color: #f2f2f2; border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: clamp(12px, 1vw, 14px); } .recruit-footer .com { pointer-events: none; color: rgba(var(--col-txt), 0.2) !important; } .recruit-footer .com.link--arrow:after { display: none; } .recruit-footer .com:before { content: "COMING SOON"; display: block; position: absolute; font-family: "Poppins--semi", sans-serif; color: rgba(var(--col-txt), 0.6); } .recruit-footer { box-sizing: border-box; } .recruit-footer-inner-wrap { padding: 80px 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; row-gap: 50px; } @media screen and (max-width: 800px) { .recruit-footer-inner-wrap { padding: 80px 20px; row-gap: 50px; } } .recruit-footer-inner-list { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 50px; } .recruit-footer-inner-item-catname { font-size: clamp(17.3129907451px, 17.3129907451px + (20 - 17.3129907451) * (100vw - 375px) / (1440 - 375), 20px); } .mod-freeHTML .recruit-footer-inner-item-catname { color: rgb(0, 110, 250); } .mod-freeHTML .recruit-footer-inner-item-second-link { display: flex; align-items: center; position: relative; line-height: 1.3; font-size: clamp(12.9994166045px, 12.9994166045px + (14 - 12.9994166045) * (100vw - 375px) / (1440 - 375), 14px); padding: 0.5em 0 0.5em 0; } .recruit-footer-inner-item-second-link { transition: opacity 0.3s ease; } @media (any-hover: hover) { .recruit-footer-inner-item-second-link:hover { color: rgb(0, 110, 250); opacity: 1; } } /* ラッパークラス */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ .main:has([class^=wrap]) { container: main/inline-size; } [class^=wrap] { margin-left: auto; margin-right: auto; } .wrap-ss { margin-inline: auto; width: min(60%, 864px); } @container main (width < 864px) { .wrap-ss { width: 90%; } } .wrap-s { margin-inline: auto; width: min(70%, 1008px); } @media screen and (max-width: 800px) { .wrap-s { width: 90%; } } @container main (width < 864px) { .wrap-s { width: 90%; } } .wrap-m { margin-inline: auto; width: min(80%, 1152px); } @media screen and (max-width: 800px) { .wrap-m { width: 90%; } } @container main (width < 864px) { .wrap-m { width: 90%; } } .wrap-l { margin-inline: auto; width: min(90%, 1296px); } /* 共通装飾 */ /* ++++++++++++++++++++++++++++++++++++++++++++++ */ .icon-win { display: inline-block; width: 1em; margin-left: 0.2em; padding-bottom: 1px; line-height: 1; } .btn .more { width: fit-content; min-width: 158px; background-color: rgb(33, 33, 33); color: rgb(255, 255, 255); display: flex; justify-content: space-between; border-radius: 50px; display: flex; align-items: center; transition: 0.3s !important; opacity: 1 !important; } @media (hover: hover) and (pointer: fine) { .btn .more:hover { background-color: rgb(75, 58, 192); } } .btn .more-txt { padding: 0.5em 1.2em 0.5em 1.8em; line-height: 0.7; font-size: 12px; font-weight: 500; } @media screen and (max-width: 800px) { .btn .more-txt { font-size: 10px; } } .btn .more .icon { width: clamp(25px, 3vw, 35px); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background-color: rgb(255, 255, 255); border-radius: 50px; } .btn .more .icon img { width: 44%; } .table { border-collapse: collapse; } .table-body:first-child .table-body-th:not(:empty) { background-color: rgb(0, 110, 250); color: rgb(255, 255, 255); border-left: 1px solid rgb(255, 255, 255); } .table-body:not(:first-child) .table-body-th { background-color: rgba(0, 110, 250, 0.2); border-bottom: 1px solid rgb(255, 255, 255); } @media screen and (min-width: 801px), print { .table-body:not(:first-child) .table-body-th { padding-left: 1.5em; padding-right: 1.5em; } } .table-body:not(:first-child) .table-body-td { border-bottom: 1px solid rgba(0, 110, 250, 0.3); } .table-body:not(:first-child) .table-body-td:nth-of-type(even) { background-color: rgba(0, 110, 250, 0.1); } .table-body:last-child .table-body-th { border: none; } .table-body:last-child .table-body-td { border: none; } .table-body-th, .table-body-td { padding: 0.3em 0.5em; text-align: center; } .table-body-th.last, .table-body-td.last { border-bottom: none; } .table-body-th { font-weight: 500; } .txt-under-marker { padding: 0 0.3em; line-height: 1; --opacity:0.8; background-image: linear-gradient(to right, rgba(var(--col-bl1), 0.2), rgba(var(--col-bl1), 0.2)); background-size: 100% 0.5em; background-position: bottom left; background-repeat: no-repeat; box-decoration-break: clone; } .txt-under-wh { display: inline; padding: 0 0.3em; line-height: 1; display: inline; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.68)); background-size: 100% 0.35em; background-position: bottom left; background-repeat: no-repeat; box-decoration-break: clone; } .en .txt-under-wh { background-position: bottom 0.28em left; } .txt-underline { text-decoration: underline; } .txt_hol_center { position: relative; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 2em; margin-bottom: 1em; } .txt_hol_center:before, .txt_hol_center:after { content: ""; display: block; flex-grow: 1; background-color: rgba(0, 110, 250, 0.15); height: 1px; } .txt_cat { background-color: rgb(0, 110, 250); padding: 0.2em 0.5em; border-radius: 2em; text-align: center; } .txt_justify { text-align: justify; letter-spacing: 0.005em; } .img_rad { border-radius: var(--rad); overflow: hidden; } .img_rad > img { width: 100%; object-fit: cover; } .img_link { overflow: hidden; } .img_link > img { transition: transform 1s; } @media screen and (min-width: 801px), print { a.img_link:hover > img, a:hover .img_link > img { transform: scale(1.05); } } .l_grid { display: grid; } .l_flex { display: flex; } .recruit-pagetitle { color: rgb(255, 255, 255); position: relative; } .recruit-pagetitle h1 { position: relative; z-index: 1; } .recruit-pagetitle::before { position: absolute; content: ""; inset: 0; } .recruit-pagetitle.portal::before { background-color: rgba(0, 110, 250, 0.4); } .recruit-pagetitle.gradu::before { background-color: rgba(0, 110, 250, 0.7); } .recruit-pagetitle.career::before { background-color: rgba(75, 58, 192, 0.5); } .recruit-pagetitle-sub--en { color: #d9e9fe; text-transform: uppercase; font-size: 12px; } @media screen and (max-width: 800px) { .recruit-pagetitle-sub--en { font-size: 10px; } } .recruit-pagetitle-sub--ja { font-size: 12px; } @media screen and (max-width: 800px) { .recruit-pagetitle-sub--ja { font-size: 10px; } } .recruit-pagetitle-main--en { margin-top: 0.4em; text-transform: uppercase; line-height: 1.1; letter-spacing: 0.05em; display: block; font-size: clamp(57.964624984px, 57.964624984px + (90 - 57.964624984) * (100vw - 375px) / (1440 - 375), 90px); } @media screen and (max-width: 800px) { .recruit-pagetitle-main--en { font-size: clamp(35.5654353388px, 35.5654353388px + (49 - 35.5654353388) * (100vw - 375px) / (1440 - 375), 49px); } } .recruit-pagetitle-main--ja { margin-top: clamp(12.375px, 12.375px + (15 - 12.375) * (100vw - 375px) / (1440 - 375), 15px); font-size: clamp(18.690760826px, 18.690760826px + (22 - 18.690760826) * (100vw - 375px) / (1440 - 375), 22px); font-weight: 500; letter-spacing: 0.1em; display: block; } @media screen and (max-width: 800px) { .recruit-pagetitle-main--ja { margin-top: clamp(8.4px, 8.4px + (10 - 8.4) * (100vw - 375px) / (1440 - 375), 10px); font-size: clamp(15.9078148989px, 15.9078148989px + (18 - 15.9078148989) * (100vw - 375px) / (1440 - 375), 18px); } } .recruit-pagetitle:not(:has(.recruit-pagetitle-img)) { padding-bottom: clamp(50.4px, 50.4px + (80 - 50.4) * (100vw - 375px) / (1440 - 375), 80px); } .recruit-pagetitle-img { margin-block-start: -0.9em; margin-inline: auto 0; width: 95%; position: relative; font-size: clamp(69.0981401078px, 69.0981401078px + (112 - 69.0981401078) * (100vw - 375px) / (1440 - 375), 112px); } @media screen and (max-width: 800px) { .recruit-pagetitle-img { margin-block-start: -0.75em; width: 90%; } } .recruit-pagetitle-img img { width: 100%; object-fit: cover; border-radius: 650px 0 0 650px; } @media screen and (min-width: 801px), print { .recruit-pagetitle-img img { min-height: 650px; max-height: 40vw; } } @media screen and (max-width: 800px) { .recruit-pagetitle-img img { height: 70vw; } } .recruit-pagetitle-txt { color: rgb(33, 33, 33); letter-spacing: 0.15em; font-weight: 500; line-height: 1.8; } @media screen and (min-width: 801px), print { .recruit-pagetitle-txt { position: absolute; top: 0; left: 10%; bottom: 0; width: fit-content; height: fit-content; margin: auto; font-size: clamp(23.979703803px, 23.979703803px + (30 - 23.979703803) * (100vw - 375px) / (1440 - 375), 30px); } } @media screen and (max-width: 800px) { .recruit-pagetitle-txt { margin-top: 1em; padding-bottom: 1.5em; font-size: clamp(20.0440884236px, 20.0440884236px + (24 - 20.0440884236) * (100vw - 375px) / (1440 - 375), 24px); text-align: center; margin-left: -10%; } } .recruit-pagecontents .other-nav { padding: clamp(57px, 57px + (100 - 57) * (100vw - 375px) / (1440 - 375), 100px) clamp(0px, 0px + (0 - 0) * (100vw - 375px) / (1440 - 375), 0px); position: relative; } .recruit-pagecontents .other-nav::before { position: absolute; content: ""; inset: 0; background-color: rgba(0, 110, 250, 0.4); z-index: -1; } .recruit-pagecontents .other-nav-tit { display: flex; flex-direction: column; text-align: center; } .recruit-pagecontents .other-nav-tit-en { color: rgba(255, 255, 255, 0.5); line-height: 0.9; font-size: clamp(34.9811279075px, 34.9811279075px + (48 - 34.9811279075) * (100vw - 375px) / (1440 - 375), 48px); } .recruit-pagecontents .other-nav-tit-ja { letter-spacing: 0.1em; font-size: clamp(17.3129907451px, 17.3129907451px + (20 - 17.3129907451) * (100vw - 375px) / (1440 - 375), 20px); } .recruit-pagecontents .other-nav-list { margin-top: clamp(30px, 30px + (40 - 30) * (100vw - 375px) / (1440 - 375), 40px); gap: 40px 4%; display: grid; grid-template-columns: repeat(auto-fit, minmax(auto, 300px)); justify-content: center; } @media screen and (max-width: 800px) { .recruit-pagecontents .other-nav-list { gap: 5vw 5%; grid-template-columns: 1fr 1fr; } } .recruit-pagecontents .other-nav-list-item.com { pointer-events: none; } .recruit-pagecontents .other-nav-list-item.com .other-nav-list-item-pht { position: relative; } .recruit-pagecontents .other-nav-list-item.com .other-nav-list-item-pht::before { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; inset: 0; } .recruit-pagecontents .other-nav-list-item.com .other-nav-list-item-pht::after { content: "COMING SOON"; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "Poppins--semi", sans-serif; color: rgba(var(--col-wh), 0.8); font-size: clamp(15.1938299618px, 15.1938299618px + (17 - 15.1938299618) * (100vw - 375px) / (1440 - 375), 17px); white-space: nowrap; } @media screen and (max-width: 800px) { .recruit-pagecontents .other-nav-list-item.com .other-nav-list-item-pht::after { font-size: clamp(13.7403031906px, 13.7403031906px + (15 - 13.7403031906) * (100vw - 375px) / (1440 - 375), 15px); } } .recruit-pagecontents .other-nav-list-item.com .other-nav-list-item-arrow { display: none; } .recruit-pagecontents .other-nav-list-item a { opacity: 1 !important; } @media (hover: hover) and (pointer: fine) { .recruit-pagecontents .other-nav-list-item a:hover .other-nav-list-item-pht img { transform: scale(1.1); } } .recruit-pagecontents .other-nav-list-item-pht { overflow: hidden; } .recruit-pagecontents .other-nav-list-item-pht img { transition: 0.3s; } .recruit-pagecontents .other-nav-list-item-box { position: relative; margin-top: 0.5em; } .recruit-pagecontents .other-nav-list-item-tit { margin-right: 30px; line-height: 1.4; font-size: clamp(12.9994166045px, 12.9994166045px + (14 - 12.9994166045) * (100vw - 375px) / (1440 - 375), 14px); } .recruit-pagecontents .other-nav-list-item-arrow { position: absolute; inset: 0 0 0 auto; width: 20px; margin: auto; } section:where([class^=sec]) { position: relative; padding: clamp(75px, 75px + (150 - 75) * (100vw - 375px) / (1440 - 375), 150px) clamp(0px, 0px + (0 - 0) * (100vw - 375px) / (1440 - 375), 0px); } @media screen and (max-width: 800px) { section:where([class^=sec]) { padding: clamp(57px, 57px + (100 - 57) * (100vw - 375px) / (1440 - 375), 100px) clamp(0px, 0px + (0 - 0) * (100vw - 375px) / (1440 - 375), 0px); } } .sec-tit { display: flex; flex-direction: column; text-align: center; } .sec-tit-en { color: rgba(255, 255, 255, 0.5); line-height: 0.9; font-size: clamp(41.8496001509px, 41.8496001509px + (60 - 41.8496001509) * (100vw - 375px) / (1440 - 375), 60px); font-weight: 600; letter-spacing: 0.1em; margin-bottom: 0.2em; } @media screen and (max-width: 800px) { .sec-tit-en { font-size: clamp(33.2135679471px, 33.2135679471px + (45 - 33.2135679471) * (100vw - 375px) / (1440 - 375), 45px); letter-spacing: 0.05em; } } .sec-tit-ja { letter-spacing: 0.1em; font-size: clamp(23.979703803px, 23.979703803px + (30 - 23.979703803) * (100vw - 375px) / (1440 - 375), 30px); font-weight: 500; } @media screen and (max-width: 800px) { .sec-tit-ja { font-size: clamp(20.0440884236px, 20.0440884236px + (24 - 20.0440884236) * (100vw - 375px) / (1440 - 375), 24px); } } .sec-tit-sub { position: relative; color: rgb(0, 110, 250); font-size: clamp(14.4715347705px, 14.4715347705px + (16 - 14.4715347705) * (100vw - 375px) / (1440 - 375), 16px); line-height: 1.5; padding-bottom: 0.3em; margin-bottom: 1em; width: fit-content; } @media screen and (max-width: 800px) { .sec-tit-sub { font-size: clamp(12.9994166045px, 12.9994166045px + (14 - 12.9994166045) * (100vw - 375px) / (1440 - 375), 14px); } } .sec-tit-sub::before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 2px; background-color: rgb(0, 110, 250); } .sec-tit-main { margin-bottom: 1em; letter-spacing: 0.1em; font-size: clamp(20.0440884236px, 20.0440884236px + (24 - 20.0440884236) * (100vw - 375px) / (1440 - 375), 24px); } @media screen and (max-width: 800px) { .sec-tit-main { font-size: clamp(18.690760826px, 18.690760826px + (22 - 18.690760826) * (100vw - 375px) / (1440 - 375), 22px); } } .contents { overflow: hidden; } .contents:not(.special) .page-tit { display: flex; flex-direction: column; color: rgb(255, 255, 255); } .contents:not(.special) .page-tit-cat { display: flex; gap: 15px; line-height: 1; align-items: center; } .contents:not(.special) .page-tit-cat-en { opacity: 0.8; } .contents:not(.special) .page-tit-cat-ja { font-size: 12px; } .contents:not(.special) .page-tit-main { margin-top: clamp(30px, 30px + (40 - 30) * (100vw - 375px) / (1440 - 375), 40px); } .contents:not(.special) .page-tit-main span { display: block; } .contents:not(.special) .page-tit-main-en { font-weight: 600; line-height: 1; letter-spacing: 0.05em; margin-bottom: 0.15em; line-height: 0.9; font-size: clamp(63.0847807992px, 63.0847807992px + (100 - 63.0847807992) * (100vw - 375px) / (1440 - 375), 100px); } @media screen and (max-width: 800px) { .contents:not(.special) .page-tit-main-en { font-size: clamp(41.8496001509px, 41.8496001509px + (60 - 41.8496001509) * (100vw - 375px) / (1440 - 375), 60px); } } .contents:not(.special) .page-tit-main-ja { letter-spacing: 0.15em; font-weight: 600; font-size: clamp(18.690760826px, 18.690760826px + (22 - 18.690760826) * (100vw - 375px) / (1440 - 375), 22px); } @media screen and (max-width: 800px) { .contents:not(.special) .page-tit-main-ja { font-size: clamp(15.9078148989px, 15.9078148989px + (18 - 15.9078148989) * (100vw - 375px) / (1440 - 375), 18px); } } .contents:not(.special) .sec-tit { font-size: clamp(18.690760826px, 18.690760826px + (22 - 18.690760826) * (100vw - 375px) / (1440 - 375), 22px); color: rgb(0, 110, 250); font-weight: 700; } .js-modal-btn:hover { cursor: pointer; } .modal-container { display: none; position: fixed; inset: 0; z-index: 10000; } .modal-container.on { display: block; } .modal-container .modal-wrap { position: absolute; inset: 0; width: 90%; height: fit-content; max-width: 1008px; max-height: 90%; margin: auto; border-radius: 35px; box-sizing: border-box; overflow: hidden auto; z-index: 101; background-color: rgb(255, 255, 255); } .modal-container .modal-inner { position: relative; padding: clamp(41.4px, 41.4px + (60 - 41.4) * (100vw - 375px) / (1440 - 375), 60px); } .modal-container .modal-bg { position: fixed; inset: 0; background: rgba(128, 182, 252, 0.9); } .modal-container .modal-btn { width: 100%; margin: 30px auto -20px; display: flex; align-items: center; justify-content: center; gap: 20px; } .modal-container .modal-btn .modal-counter { font-size: clamp(17.3129907451px, 17.3129907451px + (20 - 17.3129907451) * (100vw - 375px) / (1440 - 375), 20px); } .modal-container .modal-btn-prev, .modal-container .modal-btn-next { width: 40px; } .modal-container .modal-close { position: absolute; width: 40px; height: 40px; top: 15px; right: 15px; background-color: #006efa; border-radius: 40px; cursor: pointer; } .modal-container .modal-close::before, .modal-container .modal-close::after { position: absolute; content: ""; background-color: #fff; inset: 0; width: 50%; height: 2px; margin: auto; transition: 0.4s; transform-origin: center; } .modal-container .modal-close::before { transform: rotate(45deg); } .modal-container .modal-close::after { transform: rotate(-45deg); }/*# sourceMappingURL=base.css.map */