@charset "UTF-8"; /* Theme Name: atf-corporate Description: ATF Corporate Web Theme Author: AI TALENT FORCE Version: 1.0.0 */ * { margin: 0; padding: 0; border: 0; box-sizing: border-box; word-break: break-all; } *:before, *:after { margin: 0; padding: 0; border: 0; box-sizing: border-box; word-break: break-all; } img { vertical-align: bottom; height: auto; max-width: 100%; opacity: 1; } img[data-src] { opacity: 0; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } html { font-size: 62.5%; vertical-align: baseline; margin: 0 !important; color: #222222; } body { font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; --view-height: 100vh; --footer-height: 0; } @media all and (max-width: 767px) { body { font-size: 14px; } } h1, h2, h3, h4 { line-height: 1.5; } body, pre, input, textarea { font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; } #wpadminbar { display: none !important; } .terms-def { font-size: 18px; } @media all and (max-width: 767px) { .terms-def { font-size: 14px; } } .terms-def > dt { font-weight: bold; } .terms-def > dt + dd { margin-top: 12px; } .terms-def + .terms-def { margin-top: 40px; } @media all and (max-width: 767px) { .terms-def + .terms-def { margin-top: 32px; } } .terms-def ol { margin-top: 12px; } .terms-def a { color: dodgerblue; } .terms-def-child { margin-top: 16px; } .terms-def-child > dt { font-weight: bold; font-size: 16px; } @media all and (max-width: 767px) { .terms-def-child > dt { font-size: 13px; } } .terms-def-child > dt + dd { margin-top: 4px; } .terms-def-child + .terms-def-child { margin-top: 16px; } .terms-list > li { position: relative; } .terms-list > li:before { content: ''; position: absolute; top: 0; left: 0; } .terms-list > li + li { margin-top: 8px; } .terms-list .terms-list { padding-bottom: 8px; } .terms-list.ordered > li { padding-left: 1.7em; } .terms-list.ordered > li:nth-of-type(1):before { content: "(1)"; } .terms-list.ordered > li:nth-of-type(2):before { content: "(2)"; } .terms-list.ordered > li:nth-of-type(3):before { content: "(3)"; } .terms-list.ordered > li:nth-of-type(4):before { content: "(4)"; } .terms-list.ordered > li:nth-of-type(5):before { content: "(5)"; } .terms-list.ordered > li:nth-of-type(6):before { content: "(6)"; } .terms-list.ordered > li:nth-of-type(7):before { content: "(7)"; } .terms-list.ordered > li:nth-of-type(8):before { content: "(8)"; } .terms-list.ordered > li:nth-of-type(9):before { content: "(9)"; } .terms-list.ordered-circle > li { padding-left: 1.4em; } .terms-list.ordered-circle > li:nth-of-type(1):before { content: "①"; } .terms-list.ordered-circle > li:nth-of-type(2):before { content: "②"; } .terms-list.ordered-circle > li:nth-of-type(3):before { content: "③"; } .terms-list.ordered-circle > li:nth-of-type(4):before { content: "④"; } .terms-list.ordered-circle > li:nth-of-type(5):before { content: "⑤"; } .terms-list.ordered-circle > li:nth-of-type(6):before { content: "⑥"; } .terms-list.ordered-circle > li:nth-of-type(7):before { content: "⑦"; } .terms-list.ordered-circle > li:nth-of-type(8):before { content: "⑧"; } .terms-list.ordered-circle > li:nth-of-type(9):before { content: "⑨"; } .terms-list.ordered-kana > li { padding-left: 1.4em; } .terms-list.ordered-kana > li:nth-of-type(1):before { content: "ｱ）"; } .terms-list.ordered-kana > li:nth-of-type(2):before { content: "ｲ）"; } .terms-list.ordered-kana > li:nth-of-type(3):before { content: "ｳ）"; } .terms-list.ordered-kana > li:nth-of-type(4):before { content: "ｴ）"; } .terms-list.ordered-kana > li:nth-of-type(5):before { content: "ｵ）"; } .terms-list.ordered-alphabet > li { padding-left: 1.4em; } .terms-list.ordered-alphabet > li + li { margin-top: 0; } .terms-list.ordered-alphabet > li:nth-of-type(1):before { content: "a."; } .terms-list.ordered-alphabet > li:nth-of-type(2):before { content: "b."; } .terms-list.ordered-alphabet > li:nth-of-type(3):before { content: "c."; } .terms-list.ordered-alphabet > li:nth-of-type(4):before { content: "d."; } .terms-list.ordered-alphabet > li:nth-of-type(5):before { content: "e."; } .terms-list.ordered-alphabet > li:nth-of-type(6):before { content: "f."; } .terms-list.ordered-alphabet > li:nth-of-type(7):before { content: "g."; } .terms-list.ordered-alphabet > li:nth-of-type(8):before { content: "h."; } .terms-list.ordered-alphabet > li:nth-of-type(9):before { content: "i."; } .button { position: relative; appearance: none; text-decoration: none; border-radius: 9999px; height: 56px; display: inline-flex; align-items: center; min-width: 236px; padding-left: 40px; padding-right: 64px; font-size: 16px; font-weight: bold; text-align: left; cursor: pointer; overflow: hidden; transition: 0.24s ease-out; } @media all and (max-width: 767px) { .button { height: 48px; padding-left: 28px; padding-right: 56px; min-width: 208px; } } .button:before { content: ''; display: block; position: absolute; z-index: 0; width: 100%; transform: translateX(100%); top: 0; left: 0; height: 100%; transition: 0.24s ease-in; border-radius: 9999px; } @keyframes inButtonBg { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .button:after { content: ''; display: block; position: absolute; right: 28px; top: 50%; transform: translateY(-50%); width: 13px; height: 12px; background: no-repeat center; background-size: contain; z-index: 1; } .button.secondary { background-color: #fff; color: #000000; } .button.secondary:before { background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%), var(--White, #FFF); } .button.secondary:after { background-image: url("./assets/images/shared/icon_arrow_right_black.svg"); } .button.tertiary { background-color: #000000; color: #ffffff; } .button.tertiary:before { background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%), var(--White, #FFF); } .button.tertiary:after { background-image: url("./assets/images/shared/icon_arrow_right_black.svg"); } .button.primary { background-color: #4C2AC7; color: #ffffff; } .button.primary:before { background: linear-gradient(90deg, rgba(217, 199, 252, 0.7) 2.33%, rgba(188, 189, 255, 0.7) 50%, rgba(199, 246, 252, 0.7) 97.67%), var(--Purple, #4C2AC7); } .button.primary:after { transition: 0.24s ease-in; background-image: url("./assets/images/shared/icon_arrow_right_white.svg"); } .button.primary > span { transition: 0.24s ease-in; } .button.primary.hovered-enter:after { transition: 0s; } .button.primary.hovered > span { transition: 0.24s ease-out; } .button.primary.hovered:after { transition: 0.24s ease-out; } .button:disabled { background-color: #CCCCCC; } .button:enabled:active { opacity: 0.6; } .button:enabled.hovered-enter:before { transition: 0s; transform: translateX(-100%); } .button:enabled.hovered:before { transition: 0.24s ease-out; transform: translateX(0); } .button.square { border-radius: 6px; min-width: 224px; } .button.square:before { border-radius: 6px; } .button > span { position: relative; z-index: 1; } @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 700; src: url("./assets/fonts/NotoSansJP-Bold.woff") format("woff"); } @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 500; src: url("./assets/fonts/NotoSansJP-Medium.woff") format("woff"); } @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 400; src: url("./assets/fonts/NotoSansJP-Regular.woff") format("woff"); } @keyframes headerIn { 0% { position: fixed; transform: translate(-50%, -104px); } 100% { position: fixed; transform: translate(-50%, -24px); } } .header { position: absolute; top: 40px; left: 50%; transform: translate(-50%, 0); width: calc(100% - 80px); z-index: 10; transition: 0.2s ease-out; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 6px; overflow: hidden; background-color: rgba(218, 223, 223, 0.5); } @media all and (max-width: 1023px) { .header { top: 24px; width: calc(100% - 40px); } } .header.fixed { animation: 0.48s headerIn ease-out both; } @media all and (max-width: 1023px) { .header.fixed { top: 48px; } } @media all and (max-width: 1023px) { .header.is-active-sp-nav { padding-top: 14px; padding-bottom: 32px; } } .header-inner { border-radius: 6px; display: flex; align-items: center; height: 64px; padding-left: 32px; padding-right: 16px; justify-content: space-between; } @media all and (max-width: 1023px) { .header-inner { padding-left: 24px; height: 48px; padding-right: 24px; } } .header-main { display: flex; align-items: center; height: 40px; gap: 24px; } .header-brand { display: flex; align-items: center; } .header-brand-link { display: block; height: 30px; width: 55px; } @media all and (max-width: 1023px) { .header-brand-link { height: 24px; width: 44px; } } .header-logo { display: block; height: 100%; width: 100%; object-fit: contain; } .header-nav-list { display: flex; align-items: center; gap: 16px; } @media all and (max-width: 1023px) { .header-nav-list { display: none; } } .header-nav-item { position: relative; font-size: 15px; display: block; padding: 4px 8px; font-weight: 500; border-radius: 4px; transition: 0.24s ease-out; } .header-nav-item:before { content: ''; display: block; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%) scaleX(0); width: 32px; height: 2px; background-color: #4C2AC7; transition: 0.24s ease-out; } .header-nav-item[aria-selected=true] { color: #4C2AC7; } .header-nav-item[aria-selected=true]:before { transform: translateX(-50%) scaleX(1); } @media (hover: hover) { .header-nav-item:hover { color: #4C2AC7; } .header-nav-item:hover:before { transform: translateX(-50%) scaleX(1); } } .header-action { display: flex; align-items: center; gap: 16px; } .header-button.square { background: #4C2AC7; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding-left: 24px; padding-right: 24px; color: #ffffff; min-width: 0; font-weight: bold; border-radius: 6px; font-size: 14px; transition: 0.24s; } @media (hover: hover) { .header-button.square:hover { background-color: #4225ae; } } .header-button.square:active { opacity: 0.88; } .header-button.square:after { content: none; } @media all and (max-width: 1023px) { .header-button.square { display: none; } } .header-link { color: #4C2AC7; display: inline-flex; align-items: center; font-size: 16px; height: 40px; padding-left: 16px; padding-right: 16px; font-weight: bold; border-radius: 6px; transition: 0.24s; } @media (hover: hover) { .header-link:hover { color: #4225ae; background-color: rgba(76, 42, 199, 0.12); } } .header-link:active { opacity: 0.88; } @media all and (max-width: 1023px) { .header-link { display: none; } } .header-nav-hamburger { display: none; } @media all and (max-width: 1023px) { .header-nav-hamburger { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } } .header-nav-hamburger.is-active .header-nav-hamburger-inner > i:nth-of-type(1) { top: 50%; transform: translate(-50%, -50%) rotate(225deg); } .header-nav-hamburger.is-active .header-nav-hamburger-inner > i:nth-of-type(2) { opacity: 0; } .header-nav-hamburger.is-active .header-nav-hamburger-inner > i:nth-of-type(3) { top: 50%; transform: translate(-50%, -50%) rotate(-225deg); } .header-nav-hamburger-inner { position: relative; display: flex; flex-direction: column; width: 16px; height: 12px; } .header-nav-hamburger-inner > i { display: block; height: 1.5px; width: 100%; background-color: #000000; border-radius: 3px; position: absolute; left: 50%; transition: 0.24s ease-out; } .header-nav-hamburger-inner > i:nth-of-type(1) { top: 0; transform: translate(-50%, -50%); } .header-nav-hamburger-inner > i:nth-of-type(2) { top: 50%; transform: translate(-50%, -50%); } .header-nav-hamburger-inner > i:nth-of-type(3) { top: 100%; transform: translate(-50%, -50%); } .header-sp-nav { opacity: 0; pointer-events: none; display: none; } @media all and (max-width: 1023px) { .header-sp-nav.is-active { display: block; pointer-events: auto; opacity: 1; padding-top: 8px; } } .header-sp-nav-list { padding-left: 8px; padding-right: 8px; } .header-sp-nav-item { display: flex; align-items: center; height: 48px; font-size: 16px; font-weight: 500; padding-left: 16px; padding-right: 16px; -webkit-tap-highlight-color: rgba(76, 42, 199, 0.12); border-radius: 8px; overflow: hidden; } .header-sp-nav-item[aria-selected="true"] { background-color: rgba(76, 42, 199, 0.12); color: #4C2AC7; } .header-sp-nav-actions { margin-top: 24px; display: flex; flex-direction: column; padding-left: 24px; padding-right: 24px; } .header-sp-nav-actions > li + li { margin-top: 16px; } .header-sp-nav-actions .button { width: 100%; text-align: center; justify-content: center; } .header-sp-nav-actions .button:after { content: none; } .wrapper { overflow: hidden; } .container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 80px; padding-right: 80px; } @media all and (max-width: 767px) { .container { padding-left: 32px; padding-right: 32px; } } .footer { padding-top: 72px; padding-bottom: 56px; background-color: #24354A; } .footer-main { display: flex; justify-content: space-between; align-items: center; } @media all and (max-width: 1023px) { .footer-main { flex-direction: column-reverse; align-items: flex-start; } } .footer-catch img { height: 149px; width: auto; } @media all and (max-width: 1023px) { .footer-catch img { height: 88px; margin-top: 24px; } } .footer-logo img { height: 81px; width: auto; } @media all and (max-width: 1023px) { .footer-logo img { height: 40px; } } .footer-isms img { height: 30px; } .footer-nav { margin-top: 72px; } @media all and (max-width: 1023px) { .footer-nav { margin-top: 40px; } } .footer-nav-list { display: flex; gap: 16px 24px; } @media all and (max-width: 1023px) { .footer-nav-list { flex-wrap: wrap; } } .footer-nav-link { font-size: 14px; color: #ffffff; line-height: 1.8; } .footer-nav-link:hover { text-decoration: underline; } .footer-sub { display: flex; margin-top: 20px; align-items: center; gap: 24px; } @media all and (max-width: 1023px) { .footer-sub { margin-top: 16px; } } .footer-copyright { font-size: 12px; color: rgba(255, 255, 255, 0.5); } @media all and (max-width: 1023px) { .footer-copyright { font-size: 11px; } } .page { background-color: #F1F3F3; min-height: calc(var(--view-height) - var(--footer-height)); } .page-kv { position: relative; aspect-ratio: 1280 / 880; max-height: 100vh; max-height: 100dvh; width: 100%; background-color: #788C8C; padding-top: clamp(27px, calc(100vw * (36/1280)), 45px); display: flex; align-items: center; color: #ffffff; padding-left: 88px; padding-right: 88px; background: no-repeat center; background-size: cover; } @media all and (max-width: 1023px) { .page-kv { height: 600px; padding-left: 32px; padding-right: 32px; } } .page-kv.in-view .page-kv-title { opacity: 1; } .page-kv.in-view .page-kv-title > span { opacity: 1; transform: translateX(0); } .page-kv.in-view .page-kv-body { opacity: 1; transform: translateY(0); } .page-kv-inner { position: relative; z-index: 1; width: 100%; padding-left: 88px; padding-right: 88px; } .page-kv-inner .recruit .page-kv { background-image: url("./assets/images/recruit/kv.jpg"); } .page-kv-title { display: flex; align-items: center; font-size: clamp(73.5px, calc(100vw * (98/1280)), 122.5px); font-family: 'Poppins'; line-height: 1.4; font-weight: 600; opacity: 0; } @media all and (max-width: 1023px) { .page-kv-title { font-size: 40px; } } .page-kv-title > span { display: inline-flex; opacity: 0; transition: 0.32s ease-out; } .page-kv-title > span:nth-of-type(1) { transform: translateX(9px); transition-delay: 0.08s; } .page-kv-title > span:nth-of-type(2) { transform: translateX(10px); transition-delay: 0.16s; } .page-kv-title > span:nth-of-type(3) { transform: translateX(11px); transition-delay: 0.24s; } .page-kv-title > span:nth-of-type(4) { transform: translateX(12px); transition-delay: 0.32s; } .page-kv-title > span:nth-of-type(5) { transform: translateX(13px); transition-delay: 0.4s; } .page-kv-title > span:nth-of-type(6) { transform: translateX(14px); transition-delay: 0.48s; } .page-kv-title > span:nth-of-type(7) { transform: translateX(15px); transition-delay: 0.56s; } .page-kv-title > span:nth-of-type(8) { transform: translateX(16px); transition-delay: 0.64s; } .page-kv-title > span:nth-of-type(9) { transform: translateX(17px); transition-delay: 0.72s; } .page-kv-title > span:nth-of-type(10) { transform: translateX(18px); transition-delay: 0.8s; } .page-kv-title > span:nth-of-type(11) { transform: translateX(19px); transition-delay: 0.88s; } .page-kv-title > span:nth-of-type(12) { transform: translateX(20px); transition-delay: 0.96s; } .page-kv-title > span:nth-of-type(13) { transform: translateX(21px); transition-delay: 1.04s; } .page-kv-title > span:nth-of-type(14) { transform: translateX(22px); transition-delay: 1.12s; } .page-kv-title > span:nth-of-type(15) { transform: translateX(23px); transition-delay: 1.2s; } .page-kv-title > span:nth-of-type(16) { transform: translateX(24px); transition-delay: 1.28s; } .page-kv-title > span:nth-of-type(17) { transform: translateX(25px); transition-delay: 1.36s; } .page-kv-title > span:nth-of-type(18) { transform: translateX(26px); transition-delay: 1.44s; } .page-kv-title > span:nth-of-type(19) { transform: translateX(27px); transition-delay: 1.52s; } .page-kv-title > span:nth-of-type(20) { transform: translateX(28px); transition-delay: 1.6s; } .page-kv-title > span.empty { width: 0.25em; } .page-kv-body { opacity: 0; transform: translateY(24px); transition: 0.64s ease-out 0.4s; } @media all and (max-width: 1023px) { .page-kv-def { margin-top: 8px; } } .page-kv-def > dt { font-weight: bold; font-size: clamp(36px, calc(100vw * (48/1280)), 60px); line-height: 1.6; font-weight: bold; color: #ffffff; } @media all and (max-width: 1023px) { .page-kv-def > dt { font-size: 30px; } } .page-kv-def > dd { margin-top: clamp(12px, calc(100vw * (16/1280)), 20px); font-size: clamp(15px, calc(100vw * (20/1280)), 25px); font-weight: bold; line-height: 1.8; } @media all and (max-width: 1023px) { .page-kv-def > dd { margin-top: 8px; font-size: 14px; } } .page-kv-button.primary { margin-top: clamp(32px, calc(100vw * (40/1280)), 56px); height: clamp(56px, calc(100vw * (56/1280)), 78.4px); font-size: clamp(16px, calc(100vw * (16/1280)), 22.4px); padding-left: clamp(40px, calc(100vw * (40/1280)), 56px); padding-right: clamp(64px, calc(100vw * (64/1280)), 89.6px); } @media all and (max-width: 1023px) { .page-kv-button.primary { margin-top: clamp(32px, calc(100vw * (40/393)), 56px); } } @media all and (max-width: 767px) { .page-kv-button.primary { margin-top: clamp(32px, calc(100vw * (40/393)), 56px); } } @media all and (max-width: 1023px) { .page-kv-button.primary { height: clamp(56px, calc(100vw * (56/393)), 78.4px); } } @media all and (max-width: 767px) { .page-kv-button.primary { height: clamp(56px, calc(100vw * (56/393)), 78.4px); } } @media all and (max-width: 1023px) { .page-kv-button.primary { font-size: clamp(16px, calc(100vw * (16/393)), 22.4px); } } @media all and (max-width: 767px) { .page-kv-button.primary { font-size: clamp(16px, calc(100vw * (16/393)), 22.4px); } } @media all and (max-width: 1023px) { .page-kv-button.primary { padding-left: clamp(40px, calc(100vw * (40/393)), 56px); } } @media all and (max-width: 767px) { .page-kv-button.primary { padding-left: clamp(40px, calc(100vw * (40/393)), 56px); } } @media all and (max-width: 1023px) { .page-kv-button.primary { padding-right: clamp(64px, calc(100vw * (64/393)), 89.6px); } } @media all and (max-width: 767px) { .page-kv-button.primary { padding-right: clamp(64px, calc(100vw * (64/393)), 89.6px); } } .page-kv-button.primary:after { width: clamp(12px, calc(100vw * (12/1280)), 16.8px); height: clamp(12px, calc(100vw * (12/1280)), 16.8px); right: clamp(28px, calc(100vw * (28/1280)), 39.2px); background-image: url("./assets/images/home/kv_button_arrow.svg"); } @media all and (max-width: 1023px) { .page-kv-button.primary:after { width: clamp(12px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 767px) { .page-kv-button.primary:after { width: clamp(12px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 1023px) { .page-kv-button.primary:after { height: clamp(12px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 767px) { .page-kv-button.primary:after { height: clamp(12px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 1023px) { .page-kv-button.primary:after { right: clamp(28px, calc(100vw * (28/393)), 39.2px); } } @media all and (max-width: 767px) { .page-kv-button.primary:after { right: clamp(28px, calc(100vw * (28/393)), 39.2px); } } .section { padding-top: 48px; padding-bottom: 48px; } .section.in-view .section-subtitle:before { transform: scaleX(0); } .section.in-view .section-title > span { opacity: 1; transform: translateX(0); } .section.in-view .section-body { opacity: 1; filter: blur(0); transform: translateY(0); } .section.in-view .section-supplement { transform: translateY(0); opacity: 1; } .section-header { padding-bottom: 40px; width: 100%; } @media all and (max-width: 1023px) { .section-header { padding-bottom: 24px; } } .section-header.centering { text-align: center; } .section-header.centering .section-title { justify-content: center; } .section-subtitle { position: relative; display: inline-flex; font-size: 24px; line-height: 1.5; font-family: 'Poppins'; font-weight: 600; color: #4C2AC7; padding-bottom: 8px; } @media all and (max-width: 1023px) { .section-subtitle { font-size: 16px; } } .section-subtitle:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 240px; height: 100%; background-color: #fff; transform-origin: right; transition: 0.48s ease-in 0.04s; } .section-title { font-size: 48px; font-weight: bold; line-height: 1.6; display: flex; flex-wrap: nowrap; } @media all and (max-width: 1023px) { .section-title { font-size: 24px; } } .section-title > span { display: inline-flex; transform: translateX(8px); opacity: 0; transition: 0.4s; } .section-title > span:nth-of-type(1) { transform: translateX(9px); transition-delay: 0.28s; } .section-title > span:nth-of-type(2) { transform: translateX(10px); transition-delay: 0.36s; } .section-title > span:nth-of-type(3) { transform: translateX(11px); transition-delay: 0.44s; } .section-title > span:nth-of-type(4) { transform: translateX(12px); transition-delay: 0.52s; } .section-title > span:nth-of-type(5) { transform: translateX(13px); transition-delay: 0.6s; } .section-title > span:nth-of-type(6) { transform: translateX(14px); transition-delay: 0.68s; } .section-title > span:nth-of-type(7) { transform: translateX(15px); transition-delay: 0.76s; } .section-title > span:nth-of-type(8) { transform: translateX(16px); transition-delay: 0.84s; } .section-title > span:nth-of-type(9) { transform: translateX(17px); transition-delay: 0.92s; } .section-title > span:nth-of-type(10) { transform: translateX(18px); transition-delay: 1s; } .section-title > span:nth-of-type(11) { transform: translateX(19px); transition-delay: 1.08s; } .section-title > span:nth-of-type(12) { transform: translateX(20px); transition-delay: 1.16s; } .section-title > span:nth-of-type(13) { transform: translateX(21px); transition-delay: 1.24s; } .section-title > span:nth-of-type(14) { transform: translateX(22px); transition-delay: 1.32s; } .section-title > span:nth-of-type(15) { transform: translateX(23px); transition-delay: 1.4s; } .section-title > span:nth-of-type(16) { transform: translateX(24px); transition-delay: 1.48s; } .section-title > span:nth-of-type(17) { transform: translateX(25px); transition-delay: 1.56s; } .section-title > span:nth-of-type(18) { transform: translateX(26px); transition-delay: 1.64s; } .section-title > span:nth-of-type(19) { transform: translateX(27px); transition-delay: 1.72s; } .section-title > span:nth-of-type(20) { transform: translateX(28px); transition-delay: 1.8s; } .section-supplement { font-size: 20px; line-height: 1.8; font-weight: bold; margin-top: 8px; transform: translateY(24px); opacity: 0; transition: 0.4s ease-out 0.56s; } @media all and (max-width: 1023px) { .section-supplement { font-size: 16px; } } .section-body { transform: translateY(24px); opacity: 0; filter: blur(16px); transition: 0.64s ease-out 0.72s; } .splide__arrows { display: flex; align-items: center; gap: 20px; } @media all and (max-width: 1023px) { .splide__arrows { gap: 16px; } } .splide__arrow { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 48px; height: 48px; background-color: #000; border-radius: 100%; display: flex; align-items: center; justify-content: center; transform: none; opacity: 1; transition: 0.24s ease-out; } @media all and (max-width: 1023px) { .splide__arrow { width: 40px; height: 40px; } } .splide__arrow:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: no-repeat center; background-size: cover; transition: 0.24s ease-out; } @media (hover: hover) { .splide__arrow:hover:after { transform: translate(-50%, -50%) scale(1.5); } } .splide__arrow:active:not(:disabled) { opacity: 0.8; } .splide__arrow.splide__arrow--prev:after { background-image: url("./assets/images/shared/slider_arrow_left.svg"); } .splide__arrow.splide__arrow--next:after { background-image: url("./assets/images/shared/slider_arrow_right.svg"); } .splide__pagination { display: flex; align-items: center; justify-content: center; gap: 12px; top: auto; left: auto; right: auto; bottom: auto; } @media all and (max-width: 1023px) { .splide__pagination { gap: 8px; } } .splide__pagination__page { width: 12px; height: 12px; background-color: #788C8C; margin: 0; padding: 0; } @media all and (max-width: 1023px) { .splide__pagination__page { width: 8px; height: 8px; } } @media (hover: hover) { .splide__pagination__page:hover { background-color: #6c7f7f; } } .splide__pagination__page.is-active { background-color: #4C2AC7; transform: scale(1); } .notify { position: relative; z-index: 2; margin-top: -40px; border-top-left-radius: 40px; border-top-right-radius: 40px; padding: 94px 80px; background: #4C2AC7 no-repeat center; background-size: cover; text-align: center; color: #ffffff; } @media all and (max-width: 1023px) { .notify { padding: 56px 32px; } } .notify-title { font-size: 24px; line-height: 1.6; font-weight: bold; } @media all and (max-width: 1023px) { .notify-title { font-size: 16px; } } .notify-lead { font-weight: 600; font-family: 'Poppins'; font-size: 84px; line-height: 1; margin-top: 8px; display: block; } @media all and (max-width: 1023px) { .notify-lead { margin-top: 4px; font-size: 48px; line-height: 1.4; } } .notify-desc { margin-top: 8px; line-height: 1.6; font-size: 20px; } @media all and (max-width: 1023px) { .notify-desc { font-size: 14px; margin-top: 4px; } } .notify-action { display: flex; justify-content: center; margin-top: 32px; gap: 24px; } @media all and (max-width: 1023px) { .notify-action { flex-direction: column; align-items: center; gap: 16px; width: 208px; margin-left: auto; margin-right: auto; } } .form { padding-top: 144px; padding-bottom: 100px; display: flex; gap: 64px; } @media all and (max-width: 1023px) { .form { padding-top: 104px; padding-bottom: 64px; flex-direction: column; margin-left: -12px; margin-right: -12px; gap: 40px; } } .form-detail + .form-inner { padding: 48px; } @media all and (max-width: 1023px) { .form-detail + .form-inner { padding: 40px 24px; margin-bottom: 24px; } } .form-detail + .form-inner .form-title { font-size: 36px; } @media all and (max-width: 1023px) { .form-detail + .form-inner .form-title { font-size: 28px; } } .form-detail-def > dt { font-size: 36px; line-height: 1.6; font-weight: bold; } @media all and (max-width: 1023px) { .form-detail-def > dt { font-size: 20px; } } .form-detail-def > dd { font-size: 16px; line-height: 1.8; margin-top: 16px; } @media all and (max-width: 1023px) { .form-detail-def > dd { font-size: 14px; } } .form-detail-thumbnails { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; } @media all and (max-width: 1023px) { .form-detail-thumbnails { margin-top: 24px; margin-right: -32px; margin-left: -32px; padding-left: 32px; padding-right: 32px; overflow: auto; flex-direction: row; gap: 16px; } } .form-detail-thumbnail { border-radius: 8px; overflow: hidden; box-shadow: 0px 176.512px 49.566px 0px transparent, 0px 113.039px 45.287px 0px rgba(0, 0, 0, 0.01), 0px 63.473px 38.155px 0px rgba(0, 0, 0, 0.05), 0px 28.171px 28.171px 0px rgba(0, 0, 0, 0.09), 0px 7.132px 15.69px 0px rgba(0, 0, 0, 0.1); } @media all and (max-width: 1023px) { .form-detail-thumbnail { min-width: calc(100% - 32px); } } .form-inner { position: relative; border-radius: 16px; padding: 60px 48px 80px; width: 100%; background-color: #fff; min-width: 53.75%; } @media all and (max-width: 1023px) { .form-inner { padding: 40px 24px; } } .form-header { text-align: center; } .form-title { font-size: 48px; line-height: 1.6; font-weight: bold; } @media all and (max-width: 1023px) { .form-title { font-size: 28px; } } .form-desc { margin-top: 24px; font-size: 16px; line-height: 1.8; } @media all and (max-width: 1023px) { .form-desc { text-align: left; font-size: 13px; } } .form-desc em { font-style: normal; color: #C70000; } .form-body { margin-top: 32px; display: flex; flex-direction: column; gap: 40px; max-width: 638px; margin-left: auto; margin-right: auto; } @media all and (max-width: 1023px) { .form-body { gap: 32px; } } .form-field-pair { display: flex; gap: 24px; } .form-field { width: 100%; display: flex; flex-direction: column; gap: 8px; } .form-field > dt { font-size: 16px; font-weight: bold; letter-spacing: 0.02em; line-height: 1.4; } @media all and (max-width: 1023px) { .form-field > dt { font-size: 14px; } } .form-field.required > dt:after { content: '*'; color: #C70000; margin-left: 5px; } input[type="text"], input[type="tel"], input[type="email"], textarea { border-radius: 4px; background-color: #F1F3F3; font-size: 14px; padding: 13px 20px; line-height: 1.8; width: 100%; transition: 0.12s ease-out; } input[type="text"]:focus-visible, input[type="tel"]:focus-visible, input[type="email"]:focus-visible, textarea:focus-visible { outline: 2px solid #4C2AC7; } input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="email"]::placeholder, textarea::placeholder { color: #C6C6C6; } .form-action { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 32px; } .form-action-check { display: flex; justify-content: center; cursor: pointer; } .form-action-check input[type="checkbox"] { width: 0; height: 0; border: 0; } .form-action-check input[type="checkbox"]:checked ~ span:before { border: 2px solid #4C2AC7; } .form-action-check input[type="checkbox"]:checked ~ span:after { content: ''; display: block; position: absolute; top: 50%; left: 11px; width: 12px; height: 7px; border-left: 2px solid #4C2AC7; border-bottom: 2px solid #4C2AC7; transform: rotate(-45deg) translateY(-100%); } .form-action-check span { position: relative; font-size: 14px; line-height: 1.8; padding-left: 48px; } @media all and (max-width: 1023px) { .form-action-check span { font-size: 12px; padding-left: 36px; } } .form-action-check span:before { content: ''; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 4px; background-color: #F6F6F6; } @media all and (max-width: 1023px) { .form-action-check span:before { width: 20px; height: 20px; } } .form-action-check a { color: #4C2AC7; } .u-font-accent { font-family: 'Poppins'; line-height: 1; } .sp-db { display: none; } @media all and (max-width: 767px) { .sp-db { display: block; } } .sp-di { display: none; } @media all and (max-width: 767px) { .sp-di { display: inline; } } @media all and (max-width: 767px) { .sp-dn { display: none !important; } } .tab-db { display: none; } @media all and (max-width: 1023px) { .tab-db { display: block; } } @media all and (max-width: 1023px) { .tab-dn { display: none !important; } } @keyframes kvVisualIn { 0% { opacity: 0; filter: blur(10px); transform: translate(240px, -50%); } 100% { opacity: 1; filter: blur(0); transform: translate(0, -50%); } } .home-kv { position: relative; padding-top: 32px; padding-bottom: 32px; aspect-ratio: 1280 / 880; height: var(--view-height); width: 100%; background-color: #788C8C; display: flex; max-height: 1180px; align-items: center; } @media all and (max-width: 1023px) { .home-kv { aspect-ratio: 392 / 500; height: 500px; padding-top: 72px; } } .home-kv:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 32px; background-color: #4C2AC7; } .home-kv-slider { position: absolute; top: 50%; right: 0; height: 100%; transform: translateY(-50%); aspect-ratio: 1950 / 1836; z-index: 0; overflow: hidden; } @media all and (max-width: 1023px) { .home-kv-slider { transform: translate(26%, -50%); } } @keyframes inOne { 0% { transform: scaleX(1); } 99.9% { opacity: 1; } 100% { opacity: 0; transform: scaleX(0); } } @keyframes inSecond { 0% { transform: rotate(-67.48deg) skew(22.4deg) translateX(0); } 99.9% { opacity: 1; } 100% { opacity: 0; transform: rotate(-67.48deg) skew(22.4deg) translateX(100%); } } @keyframes inThird { 0% { transform: skew(22.5deg) translateY(0); } 99.9% { opacity: 1; } 100% { opacity: 0; transform: skew(22.5deg) translateY(100%); } } @keyframes inOneSp { 0% { transform: scaleX(1); } 99.9% { opacity: 1; } 100% { opacity: 0; transform: scaleX(0); } } @keyframes inSecondSp { 0% { transform: rotate(-67.67deg) skew(22.4deg) translateX(0); } 99.9% { opacity: 1; } 100% { opacity: 0; transform: rotate(-67.67deg) skew(22.4deg) translateX(100%); } } @keyframes inThirdSp { 0% { transform: skew(22.5deg) translateY(0); } 99.9% { opacity: 1; } 100% { opacity: 0; transform: skew(22.5deg) translateY(100%); } } .home-kv-slider.is-initialized .splide__slide { filter: blur(12px); transition: 0.4s ease-out !important; } .home-kv-slider.is-initialized .splide__slide.is-active { filter: blur(0); } .home-kv-slider.is-initialized .splide__slide.is-next i { opacity: 0; } .home-kv-slider.is-initialized .splide__slide.is-active { z-index: 1; } .home-kv-slider.is-initialized .splide__slide.is-active .home-kv-slider-item i:nth-of-type(5), .home-kv-slider.is-initialized .splide__slide.is-active .home-kv-slider-item i:nth-of-type(4), .home-kv-slider.is-initialized .splide__slide.is-prev .home-kv-slider-item i:nth-of-type(5), .home-kv-slider.is-initialized .splide__slide.is-prev .home-kv-slider-item i:nth-of-type(4) { animation: 0.4s inOne 0.48s ease-out both; } .home-kv-slider.is-initialized .splide__slide.is-active .home-kv-slider-item i:nth-of-type(3), .home-kv-slider.is-initialized .splide__slide.is-prev .home-kv-slider-item i:nth-of-type(3) { animation: 0.32s inSecond 0.16s ease-out both; } .home-kv-slider.is-initialized .splide__slide.is-active .home-kv-slider-item i:nth-of-type(2), .home-kv-slider.is-initialized .splide__slide.is-prev .home-kv-slider-item i:nth-of-type(2) { animation: 0.33s inThird 0.3s ease-out both; } .home-kv-slider.is-initialized .splide__slide.is-active .home-kv-slider-item i:nth-of-type(1), .home-kv-slider.is-initialized .splide__slide.is-prev .home-kv-slider-item i:nth-of-type(1) { animation: 0.08s inThird 0.62s ease-out both; } .home-kv-slider.is-initialized .splide__slide:not(.is-active) .home-kv-slider-item { opacity: 1; filter: blur(12px); } .home-kv-slider.is-initialized .splide__slide:not(.is-active) .home-kv-slider-item i { opacity: 1 !important; } .home-kv-slider-item { transition: 0.4s ease-out !important; } .home-kv-slider-item i { position: absolute; display: block; background-color: #788C8C; } .home-kv-slider-item i:nth-of-type(5) { height: calc(143 / 918 * 100%); width: calc(620 / 975 * 100%); transform: translateX(0); left: 0; bottom: 0; transform-origin: right; } .home-kv-slider-item i:nth-of-type(4) { height: 32px; width: calc(620 / 975 * 100%); left: 0; bottom: 0; background-color: #4C2AC7; z-index: 1; transform-origin: right; } .home-kv-slider-item i:nth-of-type(3) { height: 18%; width: 105%; left: -17.2%; bottom: 58%; transform: rotate(-67.48deg) skew(22.4deg); } .home-kv-slider-item i:nth-of-type(2) { height: calc(100% - 32px); width: 100%; transform: skew(22.5deg); background-image: #788C8C; top: 0; right: -50%; } .home-kv-slider-item i:nth-of-type(1) { height: 32px; width: 100%; transform: skew(22.5deg); background: #4C2AC7; bottom: 0; right: -68.2%; z-index: 10; } .home-kv-inner { position: relative; z-index: 1; width: 100%; padding-left: 88px; padding-right: 88px; } @media all and (max-width: 1023px) { .home-kv-inner { padding-left: 32px; padding-right: 32px; } } .home-kv-inner.in-view .home-kv-title-row:after { transform: translateX(100%); } .home-kv-inner.in-view .home-kv-title-row + .home-kv-title-row:after { transform: translateX(-100%); } .home-kv-inner.in-view .home-kv-desc { opacity: 1; transform: translateY(0); } .home-kv-inner.in-view .home-kv-button { opacity: 1; transform: translateY(0); } .home-kv-container { display: flex; flex-direction: column; } .home-kv-title { line-height: 1; position: relative; display: inline-flex; flex-direction: column; } .home-kv-title-row { position: relative; display: flex; align-items: center; overflow: hidden; } .home-kv-title-row:after { content: ''; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #788C8C; transform: translateX(0); transition: 0.48s cubic-bezier(0.65, 0, 0.35, 1) 0.06s; } .home-kv-title-row + .home-kv-title-row { margin-top: clamp(16px, calc(100vw * (20/1280)), 28px); } @media all and (max-width: 1023px) { .home-kv-title-row + .home-kv-title-row { margin-top: clamp(16px, calc(100vw * (20/393)), 28px); } } @media all and (max-width: 767px) { .home-kv-title-row + .home-kv-title-row { margin-top: clamp(16px, calc(100vw * (20/393)), 28px); } } @media all and (max-width: 1023px) { .home-kv-title-row + .home-kv-title-row { margin-top: clamp(6.4px, calc(100vw * (8/1280)), 11.2px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-title-row + .home-kv-title-row { margin-top: clamp(6.4px, calc(100vw * (8/393)), 11.2px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-title-row + .home-kv-title-row { margin-top: clamp(6.4px, calc(100vw * (8/393)), 11.2px); } } .home-kv-title-row + .home-kv-title-row:after { transition: 0.48s cubic-bezier(0.65, 0, 0.35, 1) 0.06s; } .home-kv-title-row > strong { font-size: clamp(64px, calc(100vw * (80/1280)), 112px); letter-spacing: 0.08em; } @media all and (max-width: 1023px) { .home-kv-title-row > strong { font-size: clamp(64px, calc(100vw * (80/393)), 112px); } } @media all and (max-width: 767px) { .home-kv-title-row > strong { font-size: clamp(64px, calc(100vw * (80/393)), 112px); } } @media all and (max-width: 1023px) { .home-kv-title-row > strong { font-size: clamp(25.6px, calc(100vw * (32/1280)), 44.8px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-title-row > strong { font-size: clamp(25.6px, calc(100vw * (32/393)), 44.8px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-title-row > strong { font-size: clamp(25.6px, calc(100vw * (32/393)), 44.8px); } } .home-kv-title-row > span { font-size: clamp(57.6px, calc(100vw * (72/1280)), 100.8px); letter-spacing: -0.02em; } @media all and (max-width: 1023px) { .home-kv-title-row > span { font-size: clamp(57.6px, calc(100vw * (72/393)), 100.8px); } } @media all and (max-width: 767px) { .home-kv-title-row > span { font-size: clamp(57.6px, calc(100vw * (72/393)), 100.8px); } } @media all and (max-width: 1023px) { .home-kv-title-row > span { font-size: clamp(24px, calc(100vw * (30/1280)), 42px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-title-row > span { font-size: clamp(24px, calc(100vw * (30/393)), 42px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-title-row > span { font-size: clamp(24px, calc(100vw * (30/393)), 42px); } } .home-kv-title-row:nth-of-type(1) > span { padding-top: clamp(7.2px, calc(100vw * (9/1280)), 12.6px); } @media all and (max-width: 1023px) { .home-kv-title-row:nth-of-type(1) > span { padding-top: clamp(7.2px, calc(100vw * (9/393)), 12.6px); } } @media all and (max-width: 767px) { .home-kv-title-row:nth-of-type(1) > span { padding-top: clamp(7.2px, calc(100vw * (9/393)), 12.6px); } } @media all and (max-width: 1023px) { .home-kv-title-row:nth-of-type(1) > span { padding-top: clamp(0.8px, calc(100vw * (1/1280)), 1.4px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-title-row:nth-of-type(1) > span { padding-top: clamp(0.8px, calc(100vw * (1/393)), 1.4px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-title-row:nth-of-type(1) > span { padding-top: clamp(0.8px, calc(100vw * (1/393)), 1.4px); } } .home-kv-title-row:nth-of-type(2) { color: #ffffff; } .home-kv-title-row:nth-of-type(2) > span { padding-top: clamp(3.2px, calc(100vw * (4/1280)), 5.6px); } @media all and (max-width: 1023px) { .home-kv-title-row:nth-of-type(2) > span { padding-top: clamp(3.2px, calc(100vw * (4/393)), 5.6px); } } @media all and (max-width: 767px) { .home-kv-title-row:nth-of-type(2) > span { padding-top: clamp(3.2px, calc(100vw * (4/393)), 5.6px); } } @media all and (max-width: 1023px) { .home-kv-title-row:nth-of-type(2) > span { padding-top: clamp(2.4px, calc(100vw * (3/1280)), 4.2px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-title-row:nth-of-type(2) > span { padding-top: clamp(2.4px, calc(100vw * (3/393)), 4.2px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-title-row:nth-of-type(2) > span { padding-top: clamp(2.4px, calc(100vw * (3/393)), 4.2px); } } .home-kv-desc { font-size: clamp(16px, calc(100vw * (20/1280)), 28px); margin-top: clamp(19.2px, calc(100vw * (24/1280)), 33.6px); position: relative; overflow: hidden; display: inline-flex; line-height: 1.8; letter-spacing: 0.04em; font-weight: bold; color: #ffffff; opacity: 0; transform: translateY(24px); transition: 0.4s ease-out 0.24s; } @media all and (max-width: 1023px) { .home-kv-desc { font-size: clamp(16px, calc(100vw * (20/393)), 28px); } } @media all and (max-width: 767px) { .home-kv-desc { font-size: clamp(16px, calc(100vw * (20/393)), 28px); } } @media all and (max-width: 1023px) { .home-kv-desc { margin-top: clamp(19.2px, calc(100vw * (24/393)), 33.6px); } } @media all and (max-width: 767px) { .home-kv-desc { margin-top: clamp(19.2px, calc(100vw * (24/393)), 33.6px); } } @media all and (max-width: 1023px) { .home-kv-desc { font-size: clamp(11.2px, calc(100vw * (14/1280)), 19.6px); margin-top: clamp(9.6px, calc(100vw * (12/1280)), 16.8px); width: clamp(211.2px, calc(100vw * (264/1280)), 369.6px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-desc { font-size: clamp(11.2px, calc(100vw * (14/393)), 19.6px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-desc { font-size: clamp(11.2px, calc(100vw * (14/393)), 19.6px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-desc { margin-top: clamp(9.6px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-desc { margin-top: clamp(9.6px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-desc { width: clamp(211.2px, calc(100vw * (264/393)), 369.6px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-desc { width: clamp(211.2px, calc(100vw * (264/393)), 369.6px); } } .home-kv-button { opacity: 0; transform: translateY(24px); transition: 0.4s ease-out 0.24s; } .home-kv-button.primary { margin-top: clamp(32px, calc(100vw * (40/1280)), 56px); height: clamp(56px, calc(100vw * (56/1280)), 78.4px); font-size: clamp(16px, calc(100vw * (16/1280)), 22.4px); padding-left: clamp(40px, calc(100vw * (40/1280)), 56px); padding-right: clamp(64px, calc(100vw * (64/1280)), 89.6px); } @media all and (max-width: 1023px) { .home-kv-button.primary { margin-top: clamp(32px, calc(100vw * (40/393)), 56px); } } @media all and (max-width: 767px) { .home-kv-button.primary { margin-top: clamp(32px, calc(100vw * (40/393)), 56px); } } @media all and (max-width: 1023px) { .home-kv-button.primary { height: clamp(56px, calc(100vw * (56/393)), 78.4px); } } @media all and (max-width: 767px) { .home-kv-button.primary { height: clamp(56px, calc(100vw * (56/393)), 78.4px); } } @media all and (max-width: 1023px) { .home-kv-button.primary { font-size: clamp(16px, calc(100vw * (16/393)), 22.4px); } } @media all and (max-width: 767px) { .home-kv-button.primary { font-size: clamp(16px, calc(100vw * (16/393)), 22.4px); } } @media all and (max-width: 1023px) { .home-kv-button.primary { padding-left: clamp(40px, calc(100vw * (40/393)), 56px); } } @media all and (max-width: 767px) { .home-kv-button.primary { padding-left: clamp(40px, calc(100vw * (40/393)), 56px); } } @media all and (max-width: 1023px) { .home-kv-button.primary { padding-right: clamp(64px, calc(100vw * (64/393)), 89.6px); } } @media all and (max-width: 767px) { .home-kv-button.primary { padding-right: clamp(64px, calc(100vw * (64/393)), 89.6px); } } @media all and (max-width: 1023px) { .home-kv-button.primary { height: 48px; font-size: 16px; margin-top: clamp(19.2px, calc(100vw * (24/1280)), 33.6px); } } @media all and (max-width: 1023px) and (max-width: 1023px) { .home-kv-button.primary { margin-top: clamp(19.2px, calc(100vw * (24/393)), 33.6px); } } @media all and (max-width: 1023px) and (max-width: 767px) { .home-kv-button.primary { margin-top: clamp(19.2px, calc(100vw * (24/393)), 33.6px); } } .home-kv-button.primary:after { width: clamp(12px, calc(100vw * (12/1280)), 16.8px); height: clamp(12px, calc(100vw * (12/1280)), 16.8px); right: clamp(28px, calc(100vw * (28/1280)), 39.2px); background-image: url("./assets/images/home/kv_button_arrow.svg"); } @media all and (max-width: 1023px) { .home-kv-button.primary:after { width: clamp(12px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 767px) { .home-kv-button.primary:after { width: clamp(12px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 1023px) { .home-kv-button.primary:after { height: clamp(12px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 767px) { .home-kv-button.primary:after { height: clamp(12px, calc(100vw * (12/393)), 16.8px); } } @media all and (max-width: 1023px) { .home-kv-button.primary:after { right: clamp(28px, calc(100vw * (28/393)), 39.2px); } } @media all and (max-width: 767px) { .home-kv-button.primary:after { right: clamp(28px, calc(100vw * (28/393)), 39.2px); } } .home-intro { margin-top: -32px; padding-top: 80px; padding-bottom: 80px; background-color: #4C2AC7; color: #ffffff; } @media all and (max-width: 1023px) { .home-intro { margin-top: calc(-100vw * (32/1280)); padding-top: 56px; padding-bottom: 56px; } } .home-intro.in-view .home-intro-title > span { opacity: 1; transform: translateX(0); } .home-intro.in-view .home-intro-def > dt, .home-intro.in-view .home-intro-def > dd { opacity: 1; transform: translateX(0); } .home-intro-title { font-size: 72px; line-height: 1.4; display: flex; font-family: 'Poppins'; } @media all and (max-width: 1023px) { .home-intro-title { font-size: 32px; } } .home-intro-title > span { display: inline-flex; opacity: 0; transition: 0.32s; } .home-intro-title > span:nth-of-type(1) { transform: translateX(9px); transition-delay: 0.06s; } .home-intro-title > span:nth-of-type(2) { transform: translateX(10px); transition-delay: 0.12s; } .home-intro-title > span:nth-of-type(3) { transform: translateX(11px); transition-delay: 0.18s; } .home-intro-title > span:nth-of-type(4) { transform: translateX(12px); transition-delay: 0.24s; } .home-intro-title > span:nth-of-type(5) { transform: translateX(13px); transition-delay: 0.3s; } .home-intro-title > span:nth-of-type(6) { transform: translateX(14px); transition-delay: 0.36s; } .home-intro-title > span:nth-of-type(7) { transform: translateX(15px); transition-delay: 0.42s; } .home-intro-title > span:nth-of-type(8) { transform: translateX(16px); transition-delay: 0.48s; } .home-intro-title > span:nth-of-type(9) { transform: translateX(17px); transition-delay: 0.54s; } .home-intro-title > span:nth-of-type(10) { transform: translateX(18px); transition-delay: 0.6s; } .home-intro-title > span:nth-of-type(11) { transform: translateX(19px); transition-delay: 0.66s; } .home-intro-title > span:nth-of-type(12) { transform: translateX(20px); transition-delay: 0.72s; } .home-intro-title > span:nth-of-type(13) { transform: translateX(21px); transition-delay: 0.78s; } .home-intro-title > span:nth-of-type(14) { transform: translateX(22px); transition-delay: 0.84s; } .home-intro-title > span:nth-of-type(15) { transform: translateX(23px); transition-delay: 0.9s; } .home-intro-title > span:nth-of-type(16) { transform: translateX(24px); transition-delay: 0.96s; } .home-intro-title > span:nth-of-type(17) { transform: translateX(25px); transition-delay: 1.02s; } .home-intro-title > span:nth-of-type(18) { transform: translateX(26px); transition-delay: 1.08s; } .home-intro-title > span:nth-of-type(19) { transform: translateX(27px); transition-delay: 1.14s; } .home-intro-title > span:nth-of-type(20) { transform: translateX(28px); transition-delay: 1.2s; } .home-intro-title > span.empty { width: 0.32em; } .home-intro-main { margin-top: 24px; } .home-intro-def { display: flex; justify-content: space-between; gap: 24px; } @media all and (max-width: 1023px) { .home-intro-def { flex-direction: column; gap: 24px; } } .home-intro-def > dt { line-height: 1.6; font-size: 48px; font-weight: bold; flex-shrink: 0; opacity: 0; transform: translateX(-40px); transition: 0.56s ease-out 0.64s; } @media all and (max-width: 1023px) { .home-intro-def > dt { font-size: 36px; transform: translateX(-24px); } } @media all and (max-width: 375px) { .home-intro-def > dt { font-size: 31px; } } .home-intro-def > dd { font-size: 20px; line-height: 2.2; font-weight: 500; opacity: 0; transform: translateX(40px); max-width: 480px; transition: 0.56s ease-out 0.64s; } @media all and (max-width: 1023px) { .home-intro-def > dd { font-size: 14px; } } .home-intro-def > dd p + p { margin-top: 24px; } .home-features { padding-top: 48px; padding-bottom: 48px; } @media all and (max-width: 1023px) { .home-features { padding-top: 0; padding-bottom: 0; } } @keyframes strengthItemVisible { 0% { filter: blur(24px); transform: translateX(64px); } 100% { filter: blur(0); transform: translateX(0); } } .home-strength-slider { position: relative; padding-bottom: 64px; } @media all and (max-width: 1023px) { .home-strength-slider { padding-bottom: 0; } } .home-strength-slider .splide__slide.is-visible img { animation: 0.48s strengthItemVisible ease-out both; } .home-strength-slider .splide__arrows { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 720px; width: 100%; } @media all and (max-width: 1023px) { .home-strength-slider .splide__arrows { top: 348px; bottom: auto; right: 32px; transform: translateX(0); left: auto; width: auto; } } .home-strength-slider .splide__pagination { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); } @media all and (max-width: 1023px) { .home-strength-slider .splide__pagination { bottom: auto; top: 364px; } } .home-strength-slider .splide__pagination > li { display: flex; } .home-strength-catch { position: absolute; font-size: calc(100vw * (48 / 1280)); z-index: 1; top: calc(100vw * (40 / 1280)); left: calc(100vw * (190 / 1280)); } @media all and (max-width: 1023px) { .home-strength-catch { display: none; } } @media all and (max-width: 1023px) { .home-strength-slider-item img { height: 336px; aspect-ratio: 375 / 336; width: 100%; object-fit: cover; } } .home-strength-slider-item-def { position: absolute; width: calc(100vw * (294 / 1280)); top: calc(100vw * (40 / 1280)); right: calc(100vw * (160 / 1280)); } @media all and (max-width: 1023px) { .home-strength-slider-item-def { position: static; margin-top: 76px; width: 100%; padding-left: 32px; padding-right: 32px; } } .home-strength-slider-item-def > dt { font-size: calc(100vw * (36 / 1280)); font-weight: bold; line-height: 1.6; } @media all and (max-width: 1023px) { .home-strength-slider-item-def > dt { font-size: 24px; } } .home-strength-slider-item-def > dd { font-size: 16px; line-height: 2.2; font-weight: 500; margin-top: calc(100vw * (24 / 1280)); } @media all and (max-width: 1023px) { .home-strength-slider-item-def > dd { margin-top: 16px; font-size: 14px; } } .home-projects.in-view .section-body { transition: none; } .home-project-list { display: flex; gap: 24px; } @media all and (max-width: 1023px) { .home-project-list { margin-left: -32px; margin-right: -32px; gap: 16px; overflow: auto; padding-right: 32px; padding-left: 32px; } } .home-project-list > li { opacity: 0; width: 33.33333%; transition: 0.64s ease-out; } @media all and (max-width: 1023px) { .home-project-list > li { width: calc(100% - 32px); min-width: calc(100% - 32px); } } .home-project-list > li:nth-of-type(1) { transform: translateX(40px); transition-delay: 0.4s; } .home-project-list > li:nth-of-type(2) { transform: translateX(64px); transition-delay: 0.6s; } .home-project-list > li:nth-of-type(3) { transform: translateX(88px); transition-delay: 0.8s; } .home-project-list.in-view > li { opacity: 1; transform: translateX(0); } .home-project-item { border-radius: 16px; overflow: hidden; background-color: #F7F8F9; height: 100%; } .home-project-item-def { padding: 24px; } .home-project-item-def > dt { padding-bottom: 16px; font-size: 24px; line-height: 1.6; font-weight: bold; } .home-project-item-def > dt > span { color: #878787; padding-left: 0.3em; } .home-project-item-def > dd { font-size: 16px; line-height: 1.8; } .home-training-banner { position: relative; margin-top: 40px; display: flex; align-items: center; height: 224px; padding-left: 48px; background-color: #F7F8F9; border-radius: 16px; overflow: hidden; } @media all and (max-width: 1023px) { .home-training-banner { display: flex; flex-direction: column; align-items: flex-start; height: auto; padding: 24px; gap: 24px; max-width: 400px; margin-left: auto; margin-right: auto; } } .home-training-banner:before { content: ''; display: block; position: absolute; height: 100%; top: 50%; right: 6.52952%; transform: translateY(-50%); aspect-ratio: 1052 / 448; background: url("./assets/images/home/home_training_illust.png") no-repeat center; background-size: cover; } @media all and (max-width: 1023px) { .home-training-banner:before { position: static; height: auto; width: 100%; transform: translateY(0); aspect-ratio: 1052 / 788; background-image: url("./assets/images/home/home_training_illust_sp.png"); text-align: left; } } .home-training-banner-inner { position: relative; z-index: 1; } .home-training-banner-caption { font-size: 14px; line-height: 1.8; color: #878787; } .home-training-banner-title { display: block; font-size: 24px; line-height: 1.6; margin-top: 4px; } @media all and (max-width: 1023px) { .home-training-banner-title { font-size: 20px; } } .home-training-banner-action { margin-top: 16px; } .home-training-banner-action .button { height: 40px; padding-left: 24px; padding-right: 24px; min-width: 0; font-size: 14px; } .home-training-banner-action .button:after { content: none; } @media all and (max-width: 1023px) { .home-talents { background-color: #F7F8F9; } } @media all and (max-width: 1023px) { .home-talents .section-subtitle:before { background-color: #F7F8F9; } } .home-talents-slider { position: relative; padding-bottom: 64px; } .home-talents-slider li { overflow: hidden; } .home-talents-slider .splide__arrows { position: absolute; bottom: 0; overflow: hidden; max-width: 1080px; width: 100%; margin-left: auto; margin-right: auto; left: 50%; transform: translateX(-50%); } @media all and (max-width: 1023px) { .home-talents-slider .splide__arrows { right: 32px; left: auto; transform: translateX(0); width: auto; bottom: 4px; } } .home-talents-slider .splide__pagination { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); } .home-talents-slider-item { display: flex; width: 100%; max-width: 1280px; padding-left: 80px; padding-right: 80px; margin-left: auto; margin-right: auto; } @media all and (max-width: 1023px) { .home-talents-slider-item { flex-direction: column-reverse; padding-left: 32px; padding-right: 32px; } } .home-talents-slider-item-detail { padding: 28px 48px 28px 24px; width: 428px; } @media all and (max-width: 1023px) { .home-talents-slider-item-detail { padding: 0; width: auto; margin-top: 32px; } } .home-talents-slider-item-figure { position: relative; height: 600px; width: calc(100% - 428px); } @media all and (max-width: 1023px) { .home-talents-slider-item-figure { height: auto; width: 100%; } } .home-talents-slider-item-figure img { position: absolute; top: 0; left: 0; height: 100%; max-width: none; aspect-ratio: 3 / 2; } @media all and (max-width: 1023px) { .home-talents-slider-item-figure img { height: auto; position: static; width: 100%; } } .home-talents-slider-item-caption { display: inline-flex; font-size: 24px; color: #878787; font-family: 'Poppins'; font-weight: 600; padding-bottom: 16px; } @media all and (max-width: 1023px) { .home-talents-slider-item-caption { font-size: 16px; } } .home-talents-slider-item-title { font-size: 36px; line-height: 1.6; font-weight: bold; } @media all and (max-width: 1023px) { .home-talents-slider-item-title { font-size: 24px; } } .home-talents-slider-item-def { margin-top: 16px; line-height: 1.8; } @media all and (max-width: 1023px) { .home-talents-slider-item-def { margin-top: 8px; } } .home-talents-slider-item-def > dt { font-size: 20px; font-weight: bold; } @media all and (max-width: 1023px) { .home-talents-slider-item-def > dt { font-size: 14px; } } .home-talents-slider-item-def > dd { font-size: 16px; margin-top: 16px; text-align: justify; } @media all and (max-width: 1023px) { .home-talents-slider-item-def > dd { font-size: 12px; margin-top: 8px; } } @keyframes recruitBgText { 0% { transform: translateX(calc(-33.33333% - 60px)); } 100% { transform: translateX(calc(-66.66666% - 120px)); } } @keyframes recruitBgTextSp { 0% { transform: translateX(calc(-33.33333% - 40px)); } 100% { transform: translateX(calc(-66.66666% - 80px)); } } .home-recruit { position: relative; padding-top: 264px; background: url("./assets/images/home/recruit_bg_lg.jpg") no-repeat top; background-size: auto 100%; color: #ffffff; } @media all and (max-width: 1023px) { .home-recruit { padding-top: 132px; } } .home-recruit-bg-text { content: ''; position: absolute; top: 80px; left: 120px; display: flex; gap: 120px; opacity: 0; transition: 0.2s; } @media all and (max-width: 1023px) { .home-recruit-bg-text { top: 50px; left: 40px; gap: 80px; } } .home-recruit-bg-text.in-view { opacity: 1; animation: 24s recruitBgText linear both infinite; } @media all and (max-width: 1023px) { .home-recruit-bg-text.in-view { animation: 20s recruitBgTextSp linear both infinite; } } .home-recruit-bg-text img { aspect-ratio: 1846 / 130; height: 130px; max-width: none; } @media all and (max-width: 1023px) { .home-recruit-bg-text img { height: 56px; } } .home-recruit-title { font-size: 72px; font-weight: 600; font-family: 'Poppins'; text-align: center; line-height: 1.4; display: flex; justify-content: center; } @media all and (max-width: 1023px) { .home-recruit-title { font-size: 32px; } } .home-recruit-title > span { display: inline-flex; opacity: 0; transition: 0.4s; } .home-recruit-title > span:nth-of-type(1) { transform: translateX(9px); transition-delay: 0.08s; } .home-recruit-title > span:nth-of-type(2) { transform: translateX(10px); transition-delay: 0.16s; } .home-recruit-title > span:nth-of-type(3) { transform: translateX(11px); transition-delay: 0.24s; } .home-recruit-title > span:nth-of-type(4) { transform: translateX(12px); transition-delay: 0.32s; } .home-recruit-title > span:nth-of-type(5) { transform: translateX(13px); transition-delay: 0.4s; } .home-recruit-title > span:nth-of-type(6) { transform: translateX(14px); transition-delay: 0.48s; } .home-recruit-title > span:nth-of-type(7) { transform: translateX(15px); transition-delay: 0.56s; } .home-recruit-title > span:nth-of-type(8) { transform: translateX(16px); transition-delay: 0.64s; } .home-recruit-title > span:nth-of-type(9) { transform: translateX(17px); transition-delay: 0.72s; } .home-recruit-title > span:nth-of-type(10) { transform: translateX(18px); transition-delay: 0.8s; } .home-recruit-title > span:nth-of-type(11) { transform: translateX(19px); transition-delay: 0.88s; } .home-recruit-title > span:nth-of-type(12) { transform: translateX(20px); transition-delay: 0.96s; } .home-recruit-title > span:nth-of-type(13) { transform: translateX(21px); transition-delay: 1.04s; } .home-recruit-title > span:nth-of-type(14) { transform: translateX(22px); transition-delay: 1.12s; } .home-recruit-title > span:nth-of-type(15) { transform: translateX(23px); transition-delay: 1.2s; } .home-recruit-title > span:nth-of-type(16) { transform: translateX(24px); transition-delay: 1.28s; } .home-recruit-title > span:nth-of-type(17) { transform: translateX(25px); transition-delay: 1.36s; } .home-recruit-title > span:nth-of-type(18) { transform: translateX(26px); transition-delay: 1.44s; } .home-recruit-title > span:nth-of-type(19) { transform: translateX(27px); transition-delay: 1.52s; } .home-recruit-title > span:nth-of-type(20) { transform: translateX(28px); transition-delay: 1.6s; } .home-recruit-title.in-view > span { opacity: 1; transform: translateX(0); } .home-recruit-body { padding-bottom: 124px; } @media all and (max-width: 1023px) { .home-recruit-body { padding-bottom: 48px; } } .home-recruit-def { margin-top: 8px; text-align: center; } .home-recruit-def > dt { font-size: 48px; line-height: 1.6; font-weight: bold; opacity: 0; transform: translateX(40px); transition: 0.64s ease-out 0.28s; } @media all and (max-width: 1023px) { .home-recruit-def > dt { font-size: 36px; } } .home-recruit-def > dd { font-size: 16px; line-height: 2; font-weight: 500; margin-top: 8px; opacity: 0; transform: translateX(-40px); transition: 0.64s ease-out 0.28s; } @media all and (max-width: 1023px) { .home-recruit-def > dd { margin-top: 24px; font-size: 14px; text-align: left; } } .home-recruit-def.in-view > dt, .home-recruit-def.in-view > dd { opacity: 1; transform: translateX(0); } .home-recruit-features { display: flex; margin-top: 48px; gap: 80px; max-width: 1028px; margin-left: auto; margin-right: auto; } @media all and (max-width: 1023px) { .home-recruit-features { margin-top: 32px; gap: 32px; flex-direction: column; } } .home-recruit-features > li { width: 33.33333%; transform: translateY(-24px) scale(1.1); opacity: 0; filter: blur(10px); transform-origin: top; transition: 0.64s ease-out 0.2s; } @media all and (max-width: 1023px) { .home-recruit-features > li { width: 100%; } } .home-recruit-features > li:nth-of-type(1) { transition-delay: 0.32s; } .home-recruit-features > li:nth-of-type(2) { transition-delay: 0.52s; } .home-recruit-features > li:nth-of-type(3) { transition-delay: 0.72s; } .home-recruit-features > li:nth-of-type(4) { transition-delay: 0.92s; } .home-recruit-features > li:nth-of-type(5) { transition-delay: 1.12s; } .home-recruit-features > li:nth-of-type(6) { transition-delay: 1.32s; } .home-recruit-features > li:nth-of-type(7) { transition-delay: 1.52s; } .home-recruit-features > li:nth-of-type(8) { transition-delay: 1.72s; } .home-recruit-features > li:nth-of-type(9) { transition-delay: 1.92s; } .home-recruit-features > li:nth-of-type(10) { transition-delay: 2.12s; } .home-recruit-features.in-view > li { opacity: 1; transform: scale(1); filter: blur(0); } @media all and (max-width: 1023px) { .home-recruit-feature-figure { width: 248px; margin-left: auto; margin-right: auto; } } .home-recruit-feature-def { margin-top: 24px; text-align: center; } .home-recruit-feature-def > dt { font-size: 24px; font-weight: bold; line-height: 1.6; } .home-recruit-feature-def > dd { margin-top: 8px; font-size: 16px; line-height: 2; } @media all and (max-width: 1023px) { .home-recruit-feature-def > dd { font-size: 14px; margin-top: 16px; } } .home-recruit-action { display: flex; justify-content: center; margin-top: 48px; gap: 24px; } @media all and (max-width: 1023px) { .home-recruit-action { flex-direction: column; gap: 16px; margin-top: 48px; max-width: 208px; margin-left: auto; margin-right: auto; } } .home-recruit-action .button.primary { border: 1px solid #6a4bd9; } .home-recruit-gallery { height: 1200px; display: flex; justify-content: center; gap: 24px; overflow: hidden; } @media all and (max-width: 1023px) { .home-recruit-gallery { gap: 14px; height: 620px; } } .home-recruit-gallery.in-view .home-recruit-gallery-line { opacity: 1; filter: blur(0); transform: scale(1); } @keyframes recruitLineUp { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-50% - 21px)); } } @keyframes recruitLineDown { 0% { transform: translateY(calc(-50% - 21px)); } 100% { transform: translateY(0); } } .home-recruit-gallery-line { width: 27%; min-width: 27%; border-radius: 16px; overflow: hidden; opacity: 0; filter: blur(32px); transition: 0.72s ease-out 0.32s; } @media all and (max-width: 1023px) { .home-recruit-gallery-line { gap: 14px; border-radius: 10px; min-width: 50%; } } .home-recruit-gallery-line:nth-of-type(1) .home-recruit-gallery-line-track, .home-recruit-gallery-line:nth-of-type(3) .home-recruit-gallery-line-track { animation: 40s recruitLineUp linear both infinite; } .home-recruit-gallery-line:nth-of-type(2) .home-recruit-gallery-line-track, .home-recruit-gallery-line:nth-of-type(4) .home-recruit-gallery-line-track { animation: 40s recruitLineDown linear both infinite; } .home-recruit-gallery-line-track { display: flex; flex-direction: column; gap: 24px; } @media all and (max-width: 1023px) { .home-recruit-gallery-line-track { gap: 14px; } } .home-recruit-gallery-line-track figure { border-radius: 16px; overflow: hidden; aspect-ratio: 673 / 672; } @media all and (max-width: 1023px) { .home-recruit-gallery-line-track figure { border-radius: 12px; } } .home-recruit-gallery-line-track figure.long { aspect-ratio: 673 / 924; } .recruit { background-color: #fff; } .recruit .page-kv { background-image: url("./assets/images/recruit/kv.jpg"); } .recruit .notify { background-image: url("./assets/images/recruit/notify_bg.jpg"); color: #000; backdrop-filter: blur(62px); } .recruit-intro { padding-top: 98px; padding-bottom: 98px; } @media all and (max-width: 1023px) { .recruit-intro { padding-top: 54px; padding-bottom: 54px; } } .recruit-intro.in-view .recruit-intro-title { opacity: 1; } .recruit-intro.in-view .recruit-intro-title > span { opacity: 1; transform: translateX(0); } .recruit-intro.in-view .recruit-intro-def > dt, .recruit-intro.in-view .recruit-intro-def > dd { opacity: 1; transform: translateX(0); } .recruit-intro-title { font-size: 72px; font-family: 'Poppins'; font-weight: 600; line-height: 1.4; display: flex; color: #4C2AC7; opacity: 0; } @media all and (max-width: 1023px) { .recruit-intro-title { font-size: 32px; } } .recruit-intro-title > span { display: inline-flex; opacity: 0; transition: 0.28s; } .recruit-intro-title > span:nth-of-type(1) { transform: translateX(9px); transition-delay: 0.06s; } .recruit-intro-title > span:nth-of-type(2) { transform: translateX(10px); transition-delay: 0.12s; } .recruit-intro-title > span:nth-of-type(3) { transform: translateX(11px); transition-delay: 0.18s; } .recruit-intro-title > span:nth-of-type(4) { transform: translateX(12px); transition-delay: 0.24s; } .recruit-intro-title > span:nth-of-type(5) { transform: translateX(13px); transition-delay: 0.3s; } .recruit-intro-title > span:nth-of-type(6) { transform: translateX(14px); transition-delay: 0.36s; } .recruit-intro-title > span:nth-of-type(7) { transform: translateX(15px); transition-delay: 0.42s; } .recruit-intro-title > span:nth-of-type(8) { transform: translateX(16px); transition-delay: 0.48s; } .recruit-intro-title > span:nth-of-type(9) { transform: translateX(17px); transition-delay: 0.54s; } .recruit-intro-title > span:nth-of-type(10) { transform: translateX(18px); transition-delay: 0.6s; } .recruit-intro-title > span:nth-of-type(11) { transform: translateX(19px); transition-delay: 0.66s; } .recruit-intro-title > span:nth-of-type(12) { transform: translateX(20px); transition-delay: 0.72s; } .recruit-intro-title > span:nth-of-type(13) { transform: translateX(21px); transition-delay: 0.78s; } .recruit-intro-title > span:nth-of-type(14) { transform: translateX(22px); transition-delay: 0.84s; } .recruit-intro-title > span:nth-of-type(15) { transform: translateX(23px); transition-delay: 0.9s; } .recruit-intro-title > span:nth-of-type(16) { transform: translateX(24px); transition-delay: 0.96s; } .recruit-intro-title > span:nth-of-type(17) { transform: translateX(25px); transition-delay: 1.02s; } .recruit-intro-title > span:nth-of-type(18) { transform: translateX(26px); transition-delay: 1.08s; } .recruit-intro-title > span:nth-of-type(19) { transform: translateX(27px); transition-delay: 1.14s; } .recruit-intro-title > span:nth-of-type(20) { transform: translateX(28px); transition-delay: 1.2s; } .recruit-intro-title > span.empty { width: 0.32em; } .recruit-intro-main { margin-top: 24px; } .recruit-intro-def { display: flex; justify-content: space-between; gap: 48px; } @media all and (max-width: 1023px) { .recruit-intro-def { flex-direction: column; gap: 24px; } } .recruit-intro-def > dt { line-height: 1.6; font-size: 48px; font-weight: bold; opacity: 0; transform: translateX(-40px); transition: 0.56s ease-out 0.64s; white-space: nowrap; } @media all and (max-width: 1023px) { .recruit-intro-def > dt { font-size: 32px; } } .recruit-intro-def > dd { font-size: 20px; line-height: 2.2; font-weight: 500; opacity: 0; transform: translateX(40px); transition: 0.56s ease-out 0.64s; max-width: 563px; } @media all and (max-width: 1023px) { .recruit-intro-def > dd { max-width: 100%; font-size: 14px; line-height: 1.8; } } .recruit-intro-def > dd p + p { margin-top: 24px; } .recruit-strength { padding-top: 98px; padding-bottom: 98px; } @media all and (max-width: 1023px) { .recruit-strength { padding-top: 16px; padding-bottom: 56px; } } .recruit-strength .section-header { padding-bottom: 80px; } @media all and (max-width: 1023px) { .recruit-strength .section-header { padding-bottom: 32px; } } .recruit-strength .section-body { max-width: 1048px; margin-left: auto; margin-right: auto; } .recruit-strength-link-list { display: flex; gap: 76px; } @media all and (max-width: 1023px) { .recruit-strength-link-list { flex-direction: column; gap: 32px; padding-bottom: 72px; } } .recruit-strength-link-list.in-view > li { opacity: 1; transform: translateY(0); filter: blur(0); } .recruit-strength-link-list > li { width: 33.33333%; opacity: 0; transform: translateY(40px); filter: blur(12px); transition: 0.4s ease-out; } @media all and (max-width: 1023px) { .recruit-strength-link-list > li { width: 100%; } } .recruit-strength-link-list > li:nth-of-type(2) { transition-delay: 0.2s; } .recruit-strength-link-list > li:nth-of-type(3) { transition-delay: 0.4s; } .recruit-strength-link-item { position: relative; } @media (hover: hover) { .recruit-strength-link-item:hover .recruit-strength-link-item-figure img { transform: scale(1.1); } } .recruit-strength-link-item-thumbnail { position: relative; } @media all and (max-width: 1023px) { .recruit-strength-link-item-thumbnail { max-width: 248px; margin-left: auto; margin-right: auto; } } .recruit-strength-link-item-figure { position: relative; border-radius: 100%; overflow: hidden; } .recruit-strength-link-item-figure img { transition: 0.4s ease-out; } .recruit-strength-arrow { position: absolute; width: 48px; height: 48px; background-color: #4C2AC7; border-radius: 100%; right: 19px; bottom: 12px; transition: 0.4s ease-out; } @media (hover: hover) { .recruit-strength-arrow:hover { background-color: #4225ae; } .recruit-strength-arrow:hover:after { transform: translate(-50%, -50%) scale(1.5); } } .recruit-strength-arrow:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: url("./assets/images/shared/icon_arrow_down_white.svg") no-repeat center; background-size: cover; transition: 0.4s ease-out; } .recruit-strength-link-desc { margin-top: 24px; font-size: 22px; font-weight: bold; line-height: 1.6; letter-spacing: 0.02em; text-align: center; } @media all and (max-width: 1023px) { .recruit-strength-link-desc { font-size: 16px; line-height: 1.8; } } .recruit-strength-section { padding-top: 80px; display: flex; gap: 40px; justify-content: space-between; } @media all and (max-width: 1023px) { .recruit-strength-section { flex-direction: column-reverse; gap: 32px; padding-top: 0; } } .recruit-strength-section .recruit-strength-section-detail { opacity: 0; transition: 0.48s ease-out 0.2s; } .recruit-strength-section .recruit-strength-section-figure { opacity: 0; filter: blur(16px); transition: 0.48s ease-out 0.2s; } .recruit-strength-section:nth-of-type(odd) .recruit-strength-section-detail { transform: translateX(-40px); } .recruit-strength-section:nth-of-type(odd) .recruit-strength-section-figure { transform: translateX(40px); } .recruit-strength-section:nth-of-type(even) { flex-direction: row-reverse; } @media all and (max-width: 1023px) { .recruit-strength-section:nth-of-type(even) { flex-direction: column-reverse; } } .recruit-strength-section:nth-of-type(even) .recruit-strength-section-detail { transform: translateX(40px); } .recruit-strength-section:nth-of-type(even) .recruit-strength-section-figure { transform: translateX(-40px); } .recruit-strength-section.in-view .recruit-strength-section-detail, .recruit-strength-section.in-view .recruit-strength-section-figure { opacity: 1; transform: translateX(0); filter: blur(0); } @media all and (max-width: 1023px) { .recruit-strength-section + .recruit-strength-section { margin-top: 48px; } } .recruit-strength-section-detail { width: 468px; flex-shrink: 0; } @media all and (max-width: 1023px) { .recruit-strength-section-detail { width: auto; } } .recruit-strength-section-number { font-size: 72px; font-family: 'Poppins'; font-weight: 600; color: #4C2AC7; } @media all and (max-width: 1023px) { .recruit-strength-section-number { font-size: 40px; } } .recruit-strength-section-title { font-size: 36px; line-height: 1.6; font-weight: bold; margin-top: 16px; } @media all and (max-width: 1023px) { .recruit-strength-section-title { font-size: 24px; } } .recruit-strength-section-desc { font-size: 20px; font-weight: 500; line-height: 2.2; margin-top: 16px; } @media all and (max-width: 1023px) { .recruit-strength-section-desc { font-size: 14px; } } .recruit-strength-section-figure { flex-grow: 1; max-width: 478px; border-radius: 24px; overflow: hidden; } @media all and (max-width: 1023px) { .recruit-strength-section-figure { max-width: calc(100% + 64px); margin-left: -32px; margin-right: -32px; border-radius: 0; width: calc(100% + 64px); } } .recruit-career { position: relative; background-color: #F7F9F9; padding-bottom: 0; } .recruit-career .section-subtitle:before { background-color: #F7F9F9; } .recruit-career .section-header { position: absolute; top: 60px; left: 0; z-index: 1; } .recruit-career-steps { aspect-ratio: 1280 / 800; filter: blur(16px); opacity: 0; transition: 0.48s ease-out 0.6s; } @media all and (max-width: 1023px) { .recruit-career-steps { aspect-ratio: 786 / 1934; } } .recruit-career-steps.in-view { opacity: 1; filter: blur(0); } .recruit-about { padding-top: 98px; padding-bottom: 138px; } @media all and (max-width: 1023px) { .recruit-about { padding-top: 56px; padding-bottom: 120px; } } .recruit-about-title { font-size: 72px; color: #4C2AC7; font-family: 'Poppins'; font-weight: 600; line-height: 1.4; display: flex; } @media all and (max-width: 1023px) { .recruit-about-title { font-size: 32px; } } .recruit-about-title > span { display: inline-flex; opacity: 0; transition: 0.4s; } .recruit-about-title > span.empty { width: 0.25em; } .recruit-about-title > span:nth-of-type(1) { transform: translateX(9px); transition-delay: 0.08s; } .recruit-about-title > span:nth-of-type(2) { transform: translateX(10px); transition-delay: 0.16s; } .recruit-about-title > span:nth-of-type(3) { transform: translateX(11px); transition-delay: 0.24s; } .recruit-about-title > span:nth-of-type(4) { transform: translateX(12px); transition-delay: 0.32s; } .recruit-about-title > span:nth-of-type(5) { transform: translateX(13px); transition-delay: 0.4s; } .recruit-about-title > span:nth-of-type(6) { transform: translateX(14px); transition-delay: 0.48s; } .recruit-about-title > span:nth-of-type(7) { transform: translateX(15px); transition-delay: 0.56s; } .recruit-about-title > span:nth-of-type(8) { transform: translateX(16px); transition-delay: 0.64s; } .recruit-about-title > span:nth-of-type(9) { transform: translateX(17px); transition-delay: 0.72s; } .recruit-about-title > span:nth-of-type(10) { transform: translateX(18px); transition-delay: 0.8s; } .recruit-about-title > span:nth-of-type(11) { transform: translateX(19px); transition-delay: 0.88s; } .recruit-about-title > span:nth-of-type(12) { transform: translateX(20px); transition-delay: 0.96s; } .recruit-about-title > span:nth-of-type(13) { transform: translateX(21px); transition-delay: 1.04s; } .recruit-about-title > span:nth-of-type(14) { transform: translateX(22px); transition-delay: 1.12s; } .recruit-about-title > span:nth-of-type(15) { transform: translateX(23px); transition-delay: 1.2s; } .recruit-about-title > span:nth-of-type(16) { transform: translateX(24px); transition-delay: 1.28s; } .recruit-about-title > span:nth-of-type(17) { transform: translateX(25px); transition-delay: 1.36s; } .recruit-about-title > span:nth-of-type(18) { transform: translateX(26px); transition-delay: 1.44s; } .recruit-about-title > span:nth-of-type(19) { transform: translateX(27px); transition-delay: 1.52s; } .recruit-about-title > span:nth-of-type(20) { transform: translateX(28px); transition-delay: 1.6s; } .recruit-about-title.in-view > span { opacity: 1; transform: translateX(0); } .recruit-about-def { margin-top: 40px; display: flex; justify-content: space-between; gap: 40px; } @media all and (max-width: 1023px) { .recruit-about-def { gap: 24px; flex-direction: column; } } .recruit-about-def > dt, .recruit-about-def > dd { opacity: 0; transition: 0.4s ease-out 0.24s; } .recruit-about-def > dt { font-size: 48px; font-weight: bold; line-height: 1.6; transform: translateX(-40px); } @media all and (max-width: 1023px) { .recruit-about-def > dt { font-size: 36px; } } .recruit-about-def > dd { width: 600px; transform: translateX(40px); } @media all and (max-width: 1023px) { .recruit-about-def > dd { width: 100%; } } .recruit-about-def.in-view > dt, .recruit-about-def.in-view > dd { opacity: 1; transform: translateX(0); } .recruit-about-terms > li + li { margin-top: 40px; } @media all and (max-width: 1023px) { .recruit-about-terms > li + li { margin-top: 24px; } } .recruit-about-term > dt { font-size: 36px; font-weight: bold; line-height: 1.6; } @media all and (max-width: 1023px) { .recruit-about-term > dt { font-size: 24px; } } .recruit-about-term > dd { margin-top: 16px; font-size: 16px; line-height: 1.8; } @media all and (max-width: 1023px) { .recruit-about-term > dd { font-size: 14px; } } .recruit-about-doc-title { font-size: 48px; line-height: 1.6; font-weight: bold; } @media all and (max-width: 1023px) { .recruit-about-doc-title { font-size: 24px; } } .recruit-about-doc-body { position: relative; margin-top: 40px; border-radius: 40px; overflow: hidden; aspect-ratio: 1120 / 630; } @media all and (max-width: 1023px) { .recruit-about-doc-body { margin-top: 24px; border-radius: 12px; } } .recruit-about-doc-body iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about { background-color: #fff; } .about .page-kv { background-image: url("./assets/images/about/kv.jpg"); } @media all and (max-width: 1023px) { .about .page-kv { background-image: url("./assets/images/about/kv_sp.jpg"); } } .about-section-header { padding-bottom: 48px; } @media all and (max-width: 1023px) { .about-section-header { padding-bottom: 24px; } } .about-section-title { font-size: 72px; font-weight: 600; font-family: 'Poppins'; color: #4C2AC7; line-height: 1.4; display: flex; opacity: 0; } @media all and (max-width: 1023px) { .about-section-title { font-size: 32px; } } .about-section-title > span { display: inline-flex; opacity: 0; transition: 0.28s; } .about-section-title > span:nth-of-type(1) { transform: translateX(9px); transition-delay: 0.06s; } .about-section-title > span:nth-of-type(2) { transform: translateX(10px); transition-delay: 0.12s; } .about-section-title > span:nth-of-type(3) { transform: translateX(11px); transition-delay: 0.18s; } .about-section-title > span:nth-of-type(4) { transform: translateX(12px); transition-delay: 0.24s; } .about-section-title > span:nth-of-type(5) { transform: translateX(13px); transition-delay: 0.3s; } .about-section-title > span:nth-of-type(6) { transform: translateX(14px); transition-delay: 0.36s; } .about-section-title > span:nth-of-type(7) { transform: translateX(15px); transition-delay: 0.42s; } .about-section-title > span:nth-of-type(8) { transform: translateX(16px); transition-delay: 0.48s; } .about-section-title > span:nth-of-type(9) { transform: translateX(17px); transition-delay: 0.54s; } .about-section-title > span:nth-of-type(10) { transform: translateX(18px); transition-delay: 0.6s; } .about-section-title > span:nth-of-type(11) { transform: translateX(19px); transition-delay: 0.66s; } .about-section-title > span:nth-of-type(12) { transform: translateX(20px); transition-delay: 0.72s; } .about-section-title > span:nth-of-type(13) { transform: translateX(21px); transition-delay: 0.78s; } .about-section-title > span:nth-of-type(14) { transform: translateX(22px); transition-delay: 0.84s; } .about-section-title > span:nth-of-type(15) { transform: translateX(23px); transition-delay: 0.9s; } .about-section-title > span:nth-of-type(16) { transform: translateX(24px); transition-delay: 0.96s; } .about-section-title > span:nth-of-type(17) { transform: translateX(25px); transition-delay: 1.02s; } .about-section-title > span:nth-of-type(18) { transform: translateX(26px); transition-delay: 1.08s; } .about-section-title > span:nth-of-type(19) { transform: translateX(27px); transition-delay: 1.14s; } .about-section-title > span:nth-of-type(20) { transform: translateX(28px); transition-delay: 1.2s; } .about-section-title > span.empty { width: 0.32em; } .about-section-title.in-view { opacity: 1; } .about-section-title.in-view > span { opacity: 1; transform: translateX(0); } .about-mission { padding-top: 96px; } @media all and (max-width: 1023px) { .about-mission { padding-top: 54px; padding-bottom: 56px; } } @media all and (max-width: 1023px) { .about-mission .about-section-title { justify-content: center; } } .about-mission .about-section-header { position: relative; } .about-mission .about-section-header:before { content: ''; display: block; max-width: 822px; width: 100%; aspect-ratio: 1644 / 2272; position: absolute; left: -164px; top: -30px; background: url("./assets/images/about/mission_bg.png") no-repeat center; background-size: cover; transform: translateY(24px) scale(0.5, 0.7); opacity: 0; transition: 1.28s ease-in-out 0.04s; transform-origin: bottom; } @media all and (max-width: 1023px) { .about-mission .about-section-header:before { width: 1136px; top: 84px; left: 87%; transform: translate(-50%, 24px) scale(0.5, 0.7); } } .about-mission .about-section-header.in-view:before { transform: translateY(0) scale(1, 1); opacity: 1; } @media all and (max-width: 1023px) { .about-mission .about-section-header.in-view:before { transform: translate(-50%, 0) scale(1, 1); } } .about-mission-def { display: flex; gap: 48px; justify-content: center; } @media all and (max-width: 1023px) { .about-mission-def { gap: 24px; flex-direction: column; align-items: center; text-align: center; } } .about-mission-def > dt { font-weight: bold; font-size: 72px; letter-spacing: -0.02em; opacity: 0; transform: translateX(-48px); } @media all and (max-width: 1023px) { .about-mission-def > dt { font-size: 36px; line-height: 1.6; } } .about-mission-def > dd { margin-top: 190px; font-size: 24px; font-weight: bold; line-height: 1.6; letter-spacing: 0.04em; opacity: 0; transform: translateX(48px); } @media all and (max-width: 1023px) { .about-mission-def > dd { font-size: 16px; line-height: 1.8; margin-top: 0; } } .about-mission-def > dt, .about-mission-def > dd { transition: 0.48s ease-out 0.2s; } .about-mission-def.in-view > dt, .about-mission-def.in-view > dd { opacity: 1; transform: translateX(0); } .about-value { padding-top: 64px; } @media all and (max-width: 1023px) { .about-value { padding-top: 56px; } } .about-value .about-section-body { display: flex; flex-direction: column; align-items: flex-end; } .about-value-def { width: 580px; opacity: 0; filter: blur(12px); transform: translateY(24px); transition: 0.48s ease-out; } @media all and (max-width: 1023px) { .about-value-def { width: auto; } } .about-value-def:nth-of-type(2) { transition-delay: 0.1s; } .about-value-def:nth-of-type(3) { transition-delay: 0.2s; } .about-value-def.in-view { opacity: 1; filter: blur(0); transform: translateY(0); } .about-value-def > dt { font-size: 36px; font-weight: bold; line-height: 1.6; } @media all and (max-width: 1023px) { .about-value-def > dt { font-size: 24px; } } .about-value-def > dd { margin-top: 16px; line-height: 1.8; } @media all and (max-width: 1023px) { .about-value-def > dd { font-size: 14px; } } .about-value-def + .about-value-def { margin-top: 40px; } @media all and (max-width: 1023px) { .about-value-def + .about-value-def { margin-top: 24px; } } .about-value-visual { margin-top: 148px; padding-bottom: 146px; opacity: 0; filter: blur(16px); transform: skew(-8deg); transition: 0.64s ease-out; } @media all and (max-width: 1023px) { .about-value-visual { margin-top: 56px; padding-bottom: 64px; } } .about-value-visual.in-view { opacity: 1; filter: blur(0); transform: skew(0deg); } .about-message { position: relative; padding-top: 100px; padding-bottom: 124px; color: #ffffff; background-color: #24354A; } @media all and (max-width: 1023px) { .about-message { padding-top: 72px; padding-bottom: 72px; } } .about-message:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("./assets/images/about/message_bg.jpg") no-repeat center; background-size: cover; opacity: 0; transform: scale(0.8); filter: blur(16px); transform-origin: right top; transition: 0.72s ease-out; } @media all and (max-width: 1023px) { .about-message:before { background-image: url("./assets/images/about/mission_bg_sp.jpg"); } } .about-message.in-view:before { opacity: 1; transform: scale(1); filter: blur(0); } .about-message .about-section-title { color: #ffffff; } .about-message .about-section-body { opacity: 0; transform: translateX(-40px); transition: 0.64s ease-out 0.24s; } .about-message .about-section-body.in-view { opacity: 1; transform: translateX(0); } .about-message-def > dt { font-size: 36px; line-height: 1.6; font-weight: bold; } @media all and (max-width: 1023px) { .about-message-def > dt { font-size: 24px; } } .about-message-def > dd { max-width: 636px; margin-top: 32px; font-size: 14px; line-height: 1.8; } @media all and (max-width: 1023px) { .about-message-def > dd { font-size: 14px; margin-top: 16px; } } .about-message-from { font-size: 20px; display: block; margin-top: 32px; line-height: 1.8; font-weight: 500; } @media all and (max-width: 1023px) { .about-message-from { margin-top: 24px; } } .about-board { padding-top: 100px; padding-bottom: 132px; } @media all and (max-width: 1023px) { .about-board { padding-top: 56px; padding-bottom: 56px; } } .about-board-list { display: flex; flex-wrap: wrap; gap: 48px 40px; } @media all and (max-width: 1023px) { .about-board-list { gap: 32px 0; } } .about-board-list > li { width: calc(50% - 20px); } @media all and (max-width: 1023px) { .about-board-list > li { width: 100%; } } .about-board-list > li:nth-of-type(1) .about-board-item-figure, .about-board-list > li:nth-of-type(1) .about-board-item-body { transition: 0.48s ease-out 0.1s; } .about-board-list > li:nth-of-type(2) .about-board-item-figure, .about-board-list > li:nth-of-type(2) .about-board-item-body { transition: 0.48s ease-out 0.2s; } .about-board-list > li:nth-of-type(3) .about-board-item-figure, .about-board-list > li:nth-of-type(3) .about-board-item-body { transition: 0.48s ease-out 0.3s; } .about-board-list > li:nth-of-type(4) .about-board-item-figure, .about-board-list > li:nth-of-type(4) .about-board-item-body { transition: 0.48s ease-out 0.4s; } .about-board-list > li:nth-of-type(5) .about-board-item-figure, .about-board-list > li:nth-of-type(5) .about-board-item-body { transition: 0.48s ease-out 0.5s; } .about-board-list > li:nth-of-type(6) .about-board-item-figure, .about-board-list > li:nth-of-type(6) .about-board-item-body { transition: 0.48s ease-out 0.6s; } .about-board-list > li:nth-of-type(7) .about-board-item-figure, .about-board-list > li:nth-of-type(7) .about-board-item-body { transition: 0.48s ease-out 0.7s; } .about-board-list > li:nth-of-type(8) .about-board-item-figure, .about-board-list > li:nth-of-type(8) .about-board-item-body { transition: 0.48s ease-out 0.8s; } .about-board-list > li:nth-of-type(9) .about-board-item-figure, .about-board-list > li:nth-of-type(9) .about-board-item-body { transition: 0.48s ease-out 0.9s; } .about-board-list > li:nth-of-type(10) .about-board-item-figure, .about-board-list > li:nth-of-type(10) .about-board-item-body { transition: 0.48s ease-out 1s; } .about-board-item.in-view .about-board-item-figure { opacity: 1; filter: blur(0); } .about-board-item.in-view .about-board-item-body { opacity: 1; transform: translateX(0); } .about-board-item-figure { border-radius: 24px; overflow: hidden; opacity: 0; filter: blur(12px); transition: 0.48s ease-out var(----delay); } .about-board-item-body { margin-top: 24px; opacity: 0; transform: translateX(24px); transition: 0.48s ease-out var(----delay); } .about-board-item-title { font-size: 24px; line-height: 1.6; font-weight: bold; } .about-board-item-caption { display: block; font-family: 'Poppins'; font-size: 20px; font-weight: 600; line-height: 1.8; margin-top: 8px; } @media all and (max-width: 1023px) { .about-board-item-caption { font-size: 16px; } } .about-board-item-desc { line-height: 1.8; margin-top: 8px; font-size: 14px; } .about-profile { padding-bottom: 146px; } @media all and (max-width: 1023px) { .about-profile { padding-top: 56px; padding-bottom: 100px; } } .about-profile-def { display: flex; font-size: 16px; line-height: 1.8; } @media all and (max-width: 1023px) { .about-profile-def { flex-direction: column; gap: 16px; } } .about-profile-def > dt { width: 35%; flex-shrink: 0; font-weight: bold; } @media all and (max-width: 1023px) { .about-profile-def > dt { width: auto; line-height: 1.6; } } .about-profile-def > dt > span { width: auto; display: inline; } .about-profile-def > dd { flex-grow: 1; } .about-profile-def + .about-profile-def { margin-top: 32px; } .about-profile-map { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 720 / 400; margin-top: 32px; } .about-profile-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about-profile-logo img { height: 88px; width: auto; } .news-list { border-top: 1px solid rgba(120, 140, 140, 0.4); border-bottom: 1px solid rgba(120, 140, 140, 0.4); } .news-list > li + li { border-top: 1px solid rgba(120, 140, 140, 0.4); } .news-item { display: flex; align-items: center; padding-top: 28px; padding-bottom: 32px; transition: 0.24s ease-out; } @media all and (max-width: 767px) { .news-item { padding-top: 20px; padding-bottom: 20px; flex-direction: column; } } .news-item:hover { opacity: 0.8; } .news-item:hover .news-item-thumbnail img { transform: scale(1.12); } .news-item-thumbnail { flex-shrink: 0; width: 280px; aspect-ratio: 380 / 214; position: relative; overflow: clip; } @media all and (max-width: 767px) { .news-item-thumbnail { width: 100%; } } .news-item-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: 0.24s ease-out; } .news-item-main { flex-grow: 1; padding-left: 50px; } @media all and (max-width: 767px) { .news-item-main { padding-left: 0; padding-top: 20px; } } .news-item-lead { display: flex; color: #788C8C; font-size: 20px; } @media all and (max-width: 767px) { .news-item-lead { font-size: 16px; } } .news-item-lead > * + * { position: relative; padding-left: 20px; } .news-item-lead > * + *:before { content: ''; display: block; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); height: 20px; width: 1px; background-color: #788c8c; } .news-item-title { font-size: 24px; font-weight: bold; margin-top: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media all and (max-width: 767px) { .news-item-title { margin-top: 12px; font-size: 20px; } } .news-item-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 12px; font-size: 20px; } @media all and (max-width: 767px) { .news-item-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 12px; font-size: 14px; } } .news-back { margin-top: 80px; display: flex; justify-content: center; } .news-back-link { display: inline-flex; font-size: 22px; padding-right: 16px; transition: 0.24s; } .news-back-link:hover { opacity: 0.8; } @media all and (max-width: 767px) { .news-back-link { font-size: 18px; } } .news { max-width: 1080px; margin-left: auto; margin-right: auto; } .news-content { font-size: 16px; } @media all and (max-width: 767px) { .news-content { font-size: 15px; } } .news-content * { margin: 0; font-family: "Noto Sans JP", sans-serif; } .news-content p { font-size: 18px; line-height: 1.75; } @media all and (max-width: 767px) { .news-content p { font-size: 15px; } } .news-content p + h3 { margin-top: 40px; } .news-content p + * { margin-top: 16px; } .news-content h2 { margin: 0; font-size: 34px; } @media all and (max-width: 767px) { .news-content h2 { font-size: 22px; } } .news-content h2:not(:first-child) { margin-top: 40px; } .news-content h2 + * { margin-top: 24px; } .news-content h2 + h3 { margin-top: 24px; } .news-content h3 { margin: 0; font-size: 24px; } @media all and (max-width: 767px) { .news-content h3 { font-size: 18px; } } .news-content h3:not(:first-child) { margin-top: 32px; } .news-content h3 + * { margin-top: 20px; } .news-content a { color: #0426A0; } .news-content img { margin-top: 16px; vertical-align: middle; height: auto; max-width: 100%; } .news-content hr { margin-top: 50px; margin-bottom: 50px; height: 1px; background-color: #CCCCCC; } .news-content .wp-block-image { text-align: center; } .news-content .wp-block-image .alignleft { text-align: left; } .news-content .wp-block-image .alignright { text-align: right; } .news-content .wp-block-image .aligncenter { text-align: center; } .news-content .wp-block-image + * { margin-top: 32px; } .news-content .wp-block-image + .wp-block-image { margin-top: 32px; } .news-content ul, .news-content ol { list-style: none; padding-left: 0; } .news-content ul:not(:first-child), .news-content ol:not(:first-child) { margin-top: 1.5em; margin-bottom: 1.5em; } .news-content ul > li, .news-content ol > li { position: relative; } .news-content ul > li + li, .news-content ol > li + li { margin-top: 0.5em; } .news-content ul > li:before, .news-content ol > li:before { position: absolute; top: 0; left: 0; } .news-content ul > li { padding-left: 1.2em; } .news-content ul > li:before { content: '・'; } .news-content ol { counter-reset: ol-list; } .news-content ol > li { padding-left: 1.4em; counter-increment: ol-list; } .news-content ol > li:before { content: counter(ol-list) "."; padding-left: 0.25em; font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; } .news-content iframe { max-width: 100%; } .news-thumbnail { margin-top: -12px; padding-bottom: 64px; } @media all and (max-width: 767px) { .news-thumbnail { padding-bottom: 40px; margin-left: -24px; margin-right: -24px; } } .privacy { padding-top: 200px; padding-bottom: 100px; max-width: 1180px; margin-left: auto; margin-right: auto; font-size: 18px; } @media all and (max-width: 1023px) { .privacy { padding-top: 108px; padding-bottom: 64px; } } .privacy-title { font-size: 50px; padding-bottom: 64px; } @media all and (max-width: 1023px) { .privacy-title { font-size: 32px; padding-bottom: 40px; } } .security { padding-top: 200px; padding-bottom: 100px; max-width: 1180px; margin-left: auto; margin-right: auto; font-size: 18px; } @media all and (max-width: 1023px) { .security { padding-top: 108px; padding-bottom: 64px; } } .security-title { font-size: 50px; padding-bottom: 64px; } @media all and (max-width: 1023px) { .security-title { font-size: 32px; padding-bottom: 40px; } }