@charset "UTF-8";
:root {
--base: 16;
--z-go-top: 10;
--z-header: 150;
--z-drawer: 200;
--z-hamburger: 300;
--z-skip-main: 999;
--z-loading: 1000;
--artboard-width: 1400px;
--inner: 1100px;
--inner-sm: 980px;
--inner-lg: 1340px;
--inner-gutter: 1rem;
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
--space-xxl: calc(5.25 * var(--space-unit));
--c-font: #333;
--c-black: #000;
--c-white: #fff;
--c-base: #F2F2F2;
--c-main: #0097DA;
--c-main-dark: #00418D;
--c-main-light: #044B9E;
--g-main: linear-gradient(to right, #00418D 0%, #0097DA 100%);
--ff-body: 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;
--ff-title: 'Noto Sans JP', '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;
--ff-en: 'Outfit', sans-serif;
--ff-serif: 'Noto Serif JP', '游明朝体', 'YuMincho', '游明朝', 'Yu Mincho', serif;
--fz-xxs: 10px;
--fz-xs: 12px;
--fz-sm: 14px;
--fz-default: 16px;
--fz-md: 18px;
--fz-lg: 22px;
--fz-xl: 24px;
--fz-xxl: 28px;
--fz-clamp-xs: clamp(11px, 2.75vw, var(--fz-xs));
--fz-clamp-sm: clamp(12px, 3.2vw, var(--fz-sm));
--fz-clamp-default: clamp(15px, 1.875vw, var(--fz-default));
--fz-clamp-md: clamp(16px, 4vw, var(--fz-md));
--fz-clamp-lg: clamp(18px, 4.5vw, var(--fz-lg));
--fz-clamp-xl: clamp(20px, 5vw, var(--fz-xl));
--fz-clamp-xxl: clamp(22px, 5.5vw, var(--fz-xxl));
--outer-link-svg: url('data:image/svg+xml;charset=UTF-8,');
}
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
min-width: 0;
}
/* Document */
/* ============================================ */
/** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. * 3. Remove gray overlay on links for iOS. */
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-webkit-tap-highlight-color: transparent;
/* 3*/
}
/* Sections */
/* ============================================ */
/** * Remove the margin in all browsers. */
body {
margin: 0;
}
/** * Render the `main` element consistently in IE. */
main {
display: block;
}
/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}
/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Lists (definition) */
/* ============================================ */
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
/* Grouping content */
/* ============================================ */
/** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}
/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
pre {
font-family: monospace, monospace;
/* 1 */
font-size: inherit;
/* 2 */
}
address {
font-style: inherit;
}
/* Text-level semantics */
/* ============================================ */
/** * Remove the gray background on active links in IE 10. */
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
/** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
/* 2 */
}
/** * Add the correct font weight in Chrome, Edge, and Safari. */
b,
strong {
font-weight: bolder;
}
/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: inherit;
/* 2 */
}
/** * Add the correct font size in all browsers. */
small {
font-size: 80%;
}
/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Replaced content */
/* ============================================ */
/** * Prevent vertical alignment issues. */
svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}
/* Forms */
/* ============================================ */
/** * Reset form fields to make them styleable. * 1. Make form elements stylable across systems iOS especially. * 2. Inherit text-transform from parent. */
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
/* 1 */
-moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit;
/* 2 */
}
/** * Correct cursors for clickable elements. */
button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
cursor: default;
}
/** * Improve outlines for Firefox and unify style with input elements & buttons. */
:-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
}
/** * Remove padding */
option {
padding: 0;
}
/** * Reset to invisible */
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}
/** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress {
vertical-align: baseline;
}
/** * Remove the default vertical scrollbar in IE 10+. */
textarea {
overflow: auto;
}
/** * Correct the cursor style of increment and decrement buttons in Chrome. */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/** * Correct the outline style in Safari. */
[type=search] {
outline-offset: -2px;
/* 1 */
}
/** * Remove the inner padding in Chrome and Safari on macOS. */
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Fix font inheritance. */
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/** * Fix appearance for Firefox */
[type=number] {
-moz-appearance: textfield;
}
/** * Clickable labels */
label[for] {
cursor: pointer;
}
/* Interactive */
/* ============================================ */
/* * Add the correct display in Edge, IE 10+, and Firefox. */
details {
display: block;
}
/* * Add the correct display in all browsers. */
summary {
display: list-item;
}
/* * Remove outline for editable content. */
[contenteditable]:focus {
outline: auto;
}
/* Tables */
/* ============================================ */
/** 1. Correct table border color inheritance in all Chrome and Safari. */
table {
border-color: inherit;
/* 1 */
border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}
html {
font-size: 100%;
}
body {
overflow: hidden;
font-family: var(--ff-body);
color: var(--c-font);
font-size: 1rem;
font-weight: 500;
line-height: 1.6;
padding-top: 80px;
}
body:has(.occupation-nav),
body:has(.news-nav) {
overflow: visible;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-size: revert;
font-family: var(--ff-title);
font-weight: 700;
line-height: 1.4;
}
a {
display: inline-block;
color: currentColor;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
button {
padding: 0;
background-color: transparent;
border: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
dt {
font-weight: 700;
}
summary {
display: block;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
small {
font-size: 100%;
}
button,
input,
select,
textarea {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
border-width: 1px;
background-color: transparent;
}
/* 選択系パーツ */
input[type=radio],
input[type=checkbox] {
cursor: pointer;
vertical-align: revert;
}
/* スクリーンリーダー ---------------------------------------------*/
.visually-hidden:not(:focus-visible) {
position: absolute;
border: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.l-breadcrumb {
--breadcrumb-gap: 8px;
margin: 0 auto;
width: 100%;
}
.l-breadcrumb__list {
display: flex;
align-items: center;
gap: var(--breadcrumb-gap);
}
.l-breadcrumb__item {
display: flex;
align-items: center;
gap: var(--breadcrumb-gap);
}
.l-breadcrumb__item:not(:last-of-type)::after {
content: ">";
font-size: 1em;
}
.l-footer {
margin-top: -1px;
}
.l-footer__inner {
margin: 0 auto;
display: flex;
justify-content: space-between;
display: flex;
flex-direction: column;
}
.l-footer__info {
width: 30%;
}
.l-footer__logo {
width: 200px;
margin-bottom: 30px;
}
.l-footer__logo img {
width: 100%;
}
.l-footer__address {
font-size: 14px;
line-height: 1.8;
font-weight: 500;
}
.l-footer__link {
margin-top: 30px;
display: inline-block;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.l-footer__link:hover {
opacity: 0.7;
}
.l-footer__nav {
width: 30%;
}
.l-footer__menu {
display: flex;
flex-direction: column;
gap: 20px;
}
.l-footer__menu-item a {
font-weight: bold;
font-size: 16px;
text-decoration: none;
}
.l-footer__menu-item a:hover {
opacity: 0.7;
}
.l-footer__external {
width: 30%;
display: flex;
flex-direction: column;
gap: 30px;
}
.l-footer__group-title {
font-weight: bold;
font-size: 18px;
margin-bottom: 20px;
}
.l-footer__sub-nav {
display: flex;
flex-direction: column;
gap: 15px;
}
.l-footer__sub-nav a {
font-size: 14px;
text-decoration: none;
position: relative;
padding-left: 20px;
}
.l-footer__sub-nav a::before {
content: "—";
position: absolute;
left: 0;
}
.l-footer__sub-nav a:hover {
opacity: 0.7;
}
.l-footer__banner {
border: 1px solid #000;
padding: 10px;
display: block;
transition: opacity 0.3s;
}
.l-footer__banner img {
width: 100%;
}
.l-footer__banner:hover {
opacity: 0.8;
}
.l-footer__copyright {
border-top: 1px solid #ccc;
padding-top: 20px;
text-align: left;
font-size: 12px;
color: #999;
max-width: 1280px;
margin: 0 auto;
}
/* ヘッダー ---------------------------------------------*/
.l-header {
width: 100%;
height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: var(--z-header);
background-color: rgba(255, 255, 255, 0.95);
transition: background-color 0.3s;
}
.l-header__inner {
max-width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 32px;
padding-right: 0;
/* Buttons go to edge? */
}
/* ロゴ */
.l-header__logo {
width: 200px;
display: flex;
align-items: center;
}
.l-header__logo img {
width: 100%;
height: auto;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
/* ナビゲーション（PC） */
.l-header__nav {
margin-left: auto;
}
.l-header__list {
display: flex;
}
.l-header__link {
font-size: 16px;
font-weight: 500;
color: #333;
text-decoration: none !important;
position: relative;
padding-bottom: 4px;
padding: 24px;
}
.l-header__recruit-link {
color: var(--c-white);
display: flex;
align-items: center;
justify-content: center;
width: 150px;
height: 100%;
color: #fff !important;
font-weight: 700;
font-size: 16px;
text-decoration: none !important;
transition: opacity 0.3s;
letter-spacing: 0.05em;
}
.l-header__recruit-link.--new,
.l-header__recruit-link.--career {
font-size: 18px;
font-weight: normal;
letter-spacing: 0.04em;
max-width: 100%;
}
/* Footer Wrapper */
.l-footer {
background-color: #f2f2f2;
}
/* Footer Bottom: Slogan & Copyright (Figma Node 635-1935) */
.l-footer__bottom {
position: relative;
padding: 60px 30px 40px;
text-align: center;
background: radial-gradient(ellipse at 70% 50%, rgba(231, 246, 255, 1) 0%, rgba(197, 228, 255, 1) 45%, rgba(219, 235, 255, 1) 100%);
margin-top: -30px;
}
.l-footer__slogan {
font-family: var(--ff-serif);
font-weight: 700;
font-size: clamp(1.875rem, -1.315rem + 6.65vw, 4.5rem);
/*30px,72px*/
line-height: 1.4;
color: #044b9e;
margin-bottom: 40px;
font-style: italic;
text-indent: 58px;
padding-left: clamp(0rem, -29.907rem + 37.04vw, 2.5rem);
/*0px,40px*/
}
.l-footer__copy {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 500;
font-size: 12px;
color: #00418d;
margin: 0;
}
/* Job Info Section in Footer */
.l-footer__job-info {
background-color: transparent;
}
.l-footer__job-info-inner {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
max-width: 1340px;
margin: 0 auto;
padding-top: 100px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
color: #fff;
}
.l-footer__job-info-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 80px;
gap: 40px;
width: 1100px;
max-width: 100%;
margin-inline: auto;
}
.l-footer__job-info-content {
text-align: left;
margin-bottom: 0;
}
.l-footer__job-info-btns {
display: flex;
justify-content: flex-end;
gap: 20px;
margin-bottom: 0;
flex: 0 0 auto;
max-width: 100%;
width: 428px;
display: flex;
flex-direction: column;
gap: 24px;
}
.l-footer__job-info-btn:hover {
text-decoration: none;
background-color: #fff;
opacity: 1;
/* Override default link hover opacity if needed */
}
/* Footer Card with Dot Pattern */
.l-footer__card {
background-color: #fff;
border-radius: 20px;
padding: 70px 120px;
max-width: 1400px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
position: relative;
background-image: radial-gradient(circle, #c4c4c44d 1px, transparent 2px);
background-size: 20px 20px;
}
.l-footer__card-cols {
display: flex;
justify-content: flex-end;
gap: 50px;
flex-wrap: wrap;
}
/* Col 1: Company */
.l-footer__card-company {
flex: 1 0 300px;
}
.l-footer__card-logo img {
width: 200px;
height: auto;
margin-bottom: 25px;
}
.l-footer__card-address {
font-size: 14px;
line-height: 1.8;
color: #333;
margin-bottom: 30px;
}
.l-footer__company-name {
font-weight: 500;
font-size: 16px;
margin-bottom: 10px;
}
.l-footer__card-logo img {
margin-bottom: 14px;
}
.l-footer__card-corp-link {
font-size: 14px;
text-decoration: none;
padding-bottom: 2px;
transition: opacity 0.3s;
}
.l-footer__card-corp-link:hover {
opacity: 0.6;
}
/* Col 2: Nav */
.l-footer__card-nav {
padding-top: 10px;
}
.l-footer__card-list {
display: flex;
flex-direction: column;
gap: 25px;
}
.l-footer__card-list li {
position: relative;
padding-left: 20px;
}
.l-footer__card-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
transform: translateY(20%);
border-radius: 50%;
background: var(--g-main);
}
.l-footer__card-list a {
font-size: 18px;
font-weight: 500;
color: #333;
text-decoration: none;
transition: color 0.3s;
}
.l-footer__card-list a:hover {
color: var(--c-main);
}
/* Col 3: Recruit */
.l-footer__card-recruit {
flex: 0 0 250px;
padding-top: 10px;
}
.l-footer__card-col-title {
font-size: 18px;
font-weight: 500;
color: #333;
margin-bottom: 25px;
position: relative;
padding-left: 20px;
}
.l-footer__card-col-title::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
transform: translateY(20%);
border-radius: 50%;
background: var(--g-main);
}
.l-footer__card-recruit-list {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 40px;
width: fit-content;
margin-left: auto;
}
.l-footer__card-recruit-list a {
font-size: 16px;
color: #333;
text-decoration: none;
transition: opacity 0.3s;
}
.l-footer__card-recruit-list a:hover {
opacity: 0.7;
}
.l-footer__card-banner {
width: 224px;
margin-left: auto;
}
.l-footer__card-banner a {
transition: all .4s;
}
.l-footer__card-banner a:hover {
opacity: 0.8;
}
.l-footer__card-banner img {
width: 100%;
border: 1px solid #eee;
}
.l-drawer-link-group {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-top: 24px;
padding-bottom: 38px;
padding-left: 18px;
padding-right: 18px;
}
.l-drawer-link-group__link {
font-size: 12px;
font-weight: normal;
letter-spacing: 0.04em;
line-height: 2;
color: #fff !important;
border-bottom: 1px solid #fff;
}
.l-footer__bottom-inner {
--inner: 1400px;
display: flex;
align-items: last baseline;
justify-content: space-between;
}
/* Responsive */
@media screen and (max-width: 768px) {
.l-footer__card {
padding: 24px;
}
.l-footer__card-cols {
flex-direction: column;
gap: 60px;
}
.l-footer__card-company,
.l-footer__card-nav,
.l-footer__card-recruit {
flex: auto;
width: 100%;
}
.l-footer__bottom-inner {
display: block;
}
.l-footer__card-address p {
font-size: 12px;
}
}
.l-header__link:hover {
color: var(--c-main);
}
.l-header__link::after {
content: '';
position: absolute;
inset-inline: 0;
margin-inline: auto;
width: calc(100% - 48px);
bottom: 22px;
height: 2px;
background: linear-gradient(90deg, rgba(0, 65, 141, 1) 0%, rgba(197, 228, 255, 1) 70%, rgba(0, 151, 218, 1) 100%);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s;
}
.l-header__link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* アクションエリア（ボタン・ハンバーガー） */
.l-header__actions {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
/* 採用ボタンエリア */
.l-header__recruit {
display: flex;
height: 100%;
}
.l-header__recruit-link:hover {
opacity: 0.9;
}
.l-header__recruit-link.--new {
background: linear-gradient(75deg, #0097DA 0%, #25B2F1 100%);
}
.l-header__recruit-link.--career {
background: linear-gradient(75deg, #00418D 0%, #2568B7 100%);
}
/* ハンバーガーボタン */
.l-header__toggle {
display: none;
position: relative;
width: 50px;
height: 50px;
z-index: var(--z-hamburger);
background-color: transparent;
}
.l-header__toggle span {
position: absolute;
left: 50%;
width: 40px;
height: 1px;
background-color: #333;
transform: translateX(-50%);
transition: all 0.3s;
}
.l-header__toggle span:nth-of-type(1) {
top: 21px;
}
.l-header__toggle span:nth-of-type(2) {
top: 31px;
}
.l-header__toggle span:nth-of-type(3) {
height: auto;
background-color: transparent;
}
.l-header__toggle.is-active span:nth-of-type(1) {
top: 16px;
transform: translateX(-50%) rotate(30deg);
}
.l-header__toggle.is-active span:nth-of-type(2) {
top: 16px;
transform: translateX(-50%) rotate(-30deg);
}
.l-header__toggle.is-active span:nth-of-type(3) {
background-color: transparent;
color: #fff;
}
/* ドロワーメニュー */
.l-drawer {
position: fixed;
right: 0;
width: 100%;
height: 100vh;
background-color: #1f272b;
z-index: var(--z-drawer);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
display: block;
overflow-y: auto;
padding-top: 80px;
/* header toggle height */
}
.l-drawer a:hover {
text-decoration: none;
}
.l-drawer.is-active {
opacity: 1;
pointer-events: auto;
}
.l-drawer__inner {
width: 100%;
height: 100%;
overflow-y: auto;
}
.l-drawer__scroll {
padding: 0px 32px 140px;
padding-right: 0px;
padding-left: 0px;
max-width: 600px;
margin: 0 auto;
}
.l-drawer__list {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.l-drawer__recruit-section {
margin-top: 20px;
}
.l-drawer__item {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.l-drawer__item--last {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.l-drawer__link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 13px 0;
padding-left: 18px;
padding-right: 18px;
font-weight: normal;
font-size: 14px;
color: #fff !important;
text-decoration: none;
position: relative;
}
.l-drawer__link::after {
content: "";
/* arrow placeholder */
width: 18px;
height: 4px;
background-image: url("../images/home/icon_white_arrow.svg");
background-repeat: no-repeat;
margin-right: 5px;
}
/* 募集要項セクション */
.l-drawer__recruit-section {
color: #fff;
padding: 0 18px;
}
.l-drawer__section-title {
color: var(--c-white);
font-size: 15px;
margin-bottom: 24px;
}
.l-drawer__group-title {
color: #fff;
font-size: 15px;
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px;
}
.l-drawer__group-title span {
font-size: 15px;
font-weight: normal;
}
.l-drawer__group {
margin-bottom: 36px;
}
.l-drawer__group:last-of-type {
margin-bottom: 24px;
}
.l-drawer__external-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.l-drawer__external-btn {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #D9D9D9;
}
.l-drawer__entry-btn {
grid-column: 1 / -1;
background: linear-gradient(75deg, #0097DA 0%, #25B2F1 100%);
height: 70px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff !important;
font-weight: normal !important;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.l-drawer__career-header {
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 16px;
}
.l-drawer__career-header .l-drawer__group-title {
margin-bottom: 0;
}
.l-drawer__sub-link {
font-size: 14px;
color: #fff !important;
text-decoration: underline;
}
.l-drawer__contact-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 70px;
background: linear-gradient(75deg, #00418D 0%, #2568B7 100%);
color: #fff !important;
text-decoration: none;
font-weight: normal;
transition: background-color 0.3s, color 0.3s;
}
.l-drawer__contact-btn:hover {
background-color: #fff;
color: #333;
}
/* Toggle Button Color for Dark BG handled by z-index? The toggle is fixed. If drawer is active, toggle needs to be white. */
.l-header__toggle.is-active span {
background-color: #fff;
}
.l-header__logo {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
}
.l-main {
flex-grow: 1;
}
.l-main--has-sidebar {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px 60px;
}
/* ドロワーメニュー ---------------------------------------------- */
.l-site-menu-drawer-hamburger {
--hamburger-size: 60px;
position: relative;
z-index: var(--z-hamburger);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: var(--hamburger-size);
height: var(--hamburger-size);
background-color: var(--c-black);
color: #fff;
cursor: pointer;
border: none;
padding: 0;
}
.l-site-menu-drawer-hamburger__icon {
position: relative;
width: 30px;
height: 14px;
margin-bottom: 6px;
}
.l-site-menu-drawer-hamburger__label {
font-size: 10px;
line-height: 1;
font-family: var(--ff-serif);
font-weight: 500;
text-transform: uppercase;
}
.l-site-menu-drawer-hamburger__line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transform: translateY(-50%);
transition: all 0.3s;
}
.l-site-menu-drawer-hamburger__line::before,
.l-site-menu-drawer-hamburger__line::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: #fff;
transition: all 0.3s;
}
.l-site-menu-drawer-hamburger__line::before {
top: -8px;
}
.l-site-menu-drawer-hamburger__line::after {
top: 8px;
}
.l-site-menu-drawer[open] .l-site-menu-drawer-hamburger {
background-color: transparent;
}
.l-site-menu-drawer[open] .l-site-menu-drawer-hamburger__line {
background-color: transparent;
}
.l-site-menu-drawer[open] .l-site-menu-drawer-hamburger__line::before {
top: 0;
transform: rotate(45deg);
}
.l-site-menu-drawer[open] .l-site-menu-drawer-hamburger__line::after {
top: 0;
transform: rotate(-45deg);
}
.l-site-menu-drawer-content {
--top-position: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--c-main);
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s;
z-index: var(--z-drawer);
}
.l-site-menu-drawer[open] .l-site-menu-drawer-content {
opacity: 1;
visibility: visible;
}
.l-site-menu-drawer-content__inner {
overflow: auto;
height: 100%;
padding: 80px var(--inner-gutter);
}
.l-site-menu-drawer-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 1em;
text-align: center;
font-size: 18px;
}
.l-site-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
padding-top: var(--header-height-gutter);
}
.c-btn {
display: flex;
align-items: center;
text-decoration: none;
cursor: pointer;
}
.c-btn--arrow {
gap: 14px;
color: #1f272b;
font-family: var(--ff-body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0;
transition: opacity 0.3s;
justify-content: flex-end;
align-items: center;
}
.c-btn--arrow:hover {
opacity: 1;
color: #00418d;
text-decoration: none;
}
.c-btn--arrow:hover .c-btn--arrow__circle,
.c-btn--arrow:hover .c-btn__icon {
border-color: transparent;
background: linear-gradient(90deg, #00418d 0%, #0097da 100%);
border: none;
}
.c-btn--arrow:hover .c-btn--arrow__circle::before,
.c-btn--arrow:hover .c-btn__icon::before {
background: linear-gradient(90deg, rgba(0, 65, 141, 1) 0%, rgba(0, 65, 141, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}
.c-btn--arrow:hover .c-btn--arrow__circle::after,
.c-btn--arrow:hover .c-btn__icon::after {
border-color: #fff;
}
.c-btn--arrow__circle,
.c-btn--arrow .c-btn__icon {
display: flex;
justify-content: center;
align-items: center;
width: 58px;
height: 58px;
background: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: relative;
border-radius: 50%;
transition: background-color 0.3s, border-color 0.3s;
margin-left: 29.5px;
}
.c-btn--white.c-btn--arrow .c-btn__icon {
background: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.c-btn--white.c-btn--arrow:hover .c-btn__icon {
border-color: transparent;
background: #fff;
}
.c-btn--white.c-btn--arrow:hover .c-btn__icon::before {
background: linear-gradient(-90deg, rgba(0, 65, 141, 1) 0%, rgba(0, 65, 141, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}
.c-btn--white.c-btn--arrow:hover .c-btn__icon::after {
border-color: #00418D;
}
.c-btn--white.c-btn--arrow:hover {
opacity: 1;
}
.c-btn--arrow__circle::before,
.c-btn--arrow .c-btn__icon::before {
content: '';
width: 58.5px;
height: 1px;
background-color: currentColor;
display: block;
transition: background-color 0.3s;
position: absolute;
left: -29.5px;
top: 50%;
transform: translateY(-50%);
}
.c-btn--arrow__circle::after,
.c-btn--arrow .c-btn__icon::after {
content: '';
width: 6px;
height: 6px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: translate(-2px, 0) rotate(45deg);
display: block;
transition: border-color 0.3s;
}
.c-btn--circle {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: transparent;
border: 1px solid #fff;
border-radius: 50%;
transition: all 0.3s;
}
.c-btn--circle::before {
content: none;
}
.c-btn--circle::after {
content: "";
display: block;
width: 15px;
height: 15px;
mask: url("../images/home/job-info-arrow.svg") no-repeat center center;
-webkit-mask: url("../images/home/job-info-arrow.svg") no-repeat center center;
-webkit-mask-size: contain;
mask-size: contain;
background-color: #fff;
transform: none;
margin: 0;
border: none;
}
.c-btn--circle:hover {
border-color: #0097da;
/* Fallback */
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #00418d 0%, #0097da 100%) border-box;
border: 1px solid transparent;
opacity: 1;
}
.c-btn--circle:hover::after {
background: linear-gradient(90deg, #00418d 0%, #0097da 100%);
}
.c-btn--white {
color: #fff;
border-color: #fff;
}
.c-btn--white .c-btn__text,
.c-btn--white .c-btn__icon {
color: var(--c-white);
}
.c-btn--white .c-btn--arrow__circle,
.c-btn--white .c-btn__icon {
border-color: #fff;
}
.c-btn--white:hover {
color: #fff;
opacity: 0.8;
}
.c-grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
row-gap: var(--grid-row-gap, 0);
-moz-column-gap: min(var(--grid-column-gap, 0), 9.0909090909%);
column-gap: min(var(--grid-column-gap, 0), 9.0909090909%);
}
.c-grid__item {
display: flex;
flex-direction: column;
}
.c-grid__item>* {
min-height: 0;
min-width: 0%;
}
.c-grid[data-columns~="1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="12"] {
--grid-columns: 12;
}
.c-grid[data-gap~="0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~=x-0] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~=y-0] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~=xxs] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~=x-xxs] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~=y-xxs] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~=xs] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~=x-xs] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~=y-xs] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~=sm] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~=x-sm] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~=y-sm] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~=md] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~=x-md] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~=y-md] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~=lg] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~=x-lg] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~=y-lg] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~=xl] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~=x-xl] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~=y-xl] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~=xxl] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~=x-xxl] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~=y-xxl] {
--grid-row-gap: 4rem;
}
.c-grid__item[data-span~="1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="12"] {
grid-column: span 12;
}
.c-grid[data-align~=start] {
justify-content: start;
}
.c-grid[data-align~=center] {
justify-content: center;
}
.c-grid[data-align~=end] {
justify-content: end;
}
.c-grid[data-align~=justify] {
justify-content: space-between;
}
.c-grid[data-align~=top] {
align-items: start;
}
.c-grid[data-align~=middle] {
align-items: center;
}
.c-grid[data-align~=bottom] {
align-items: end;
}
.c-grid__item[data-align~=start] {
align-items: flex-start;
}
.c-grid__item[data-align~=center] {
align-items: center;
}
.c-grid__item[data-align~=end] {
align-items: flex-end;
}
.c-grid__item[data-align~=top] {
justify-content: flex-start;
align-self: stretch;
}
.c-grid__item[data-align~=middle] {
justify-content: center;
align-self: stretch;
}
.c-grid__item[data-align~=bottom] {
justify-content: flex-end;
align-self: stretch;
}
.c-grid__item[data-nowrap] {
flex-shrink: 0;
}
.c-inner {
box-sizing: content-box;
max-width: var(--inner);
margin-left: auto;
margin-right: auto;
padding-right: var(--inner-gutter);
padding-left: var(--inner-gutter);
}
.c-inner.--lg {
max-width: var(--inner-lg);
}
.c-inner.--sm {
max-width: var(--inner-sm);
}
.c-flex {
display: flex;
row-gap: var(--flex-row-gap, 0);
-moz-column-gap: var(--flex-column-gap, 0);
column-gap: var(--flex-column-gap, 0);
}
.c-flex[data-gap~="0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~=x-0] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~=y-0] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~=xxs] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~=x-xxs] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~=y-xxs] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~=xs] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~=x-xs] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~=y-xs] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~=sm] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~=x-sm] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~=y-sm] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~=md] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~=x-md] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~=y-md] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~=lg] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~=x-lg] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~=y-lg] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~=xl] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~=x-xl] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~=y-xl] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~=xxl] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~=x-xxl] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~=y-xxl] {
--flex-row-gap: 4rem;
}
.c-flex[data-align~=wrap] {
flex-wrap: wrap;
}
.c-flex[data-align~=col] {
flex-direction: column;
}
.c-flex[data-align~=start] {
justify-content: start;
}
.c-flex[data-align~=center] {
justify-content: center;
}
.c-flex[data-align~=end] {
justify-content: end;
}
.c-flex[data-align~=between] {
justify-content: space-between;
}
.c-flex[data-align~=top] {
align-items: start;
}
.c-flex[data-align~=stretch] {
align-items: stretch;
}
.c-flex[data-align~=base] {
align-items: first baseline;
}
.c-flex[data-align~=middle] {
align-items: center;
}
.c-flex[data-align~=bottom] {
align-items: end;
}
.c-flex__item[data-align~=start] {
align-items: flex-start;
}
.c-flex__item[data-align~=base] {
align-items: first baseline;
}
.c-flex__item[data-align~=center] {
align-items: center;
}
.c-flex__item[data-align~=end] {
align-items: flex-end;
}
.c-flex__item[data-align~=top] {
justify-content: flex-start;
align-self: stretch;
}
.c-flex__item[data-align~=middle] {
justify-content: center;
align-self: stretch;
}
.c-flex__item[data-align~=bottom] {
justify-content: flex-end;
align-self: stretch;
}
.hm-mv {
position: relative;
width: 100%;
background: linear-gradient(0deg, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 18%, rgba(255, 255, 255, 1) 18%, rgba(255, 255, 255, 1) 100%);
}
.hm-mv__inner {
position: relative;
width: 100%;
margin: 0 auto;
/* max-height: 830px;
aspect-ratio: 1300/830; */
}
.hm-mv__visual {
/* top: 0;
width: 100%;
max-height: 830px;
aspect-ratio: 1300/830;
right: 0;
overflow: hidden; */
}
.hm-mv__visual img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.p-section-head {
margin-bottom: 40px;
}
.p-section-head__title {
line-height: 1.5;
font-family: var(--ff-en);
font-size: 100px;
font-weight: 500;
background: var(--g-main);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
margin-top: -10px;
}
.p-page-header {
background-color: #F2F2F2;
background-image: repeating-linear-gradient(to right, #E1E1E1,
/* 線の色 */
#E1E1E1 1px,
/* 線の太さ */
transparent 1px, transparent 240px
/* 線の間隔（ここを調整） */
);
}
.p-page-header--diagonal {
background-color: #F2F2F2;
background-image: repeating-linear-gradient(-60deg,
/* 角度を60度に設定 */
#E1E1E1,
/* 線の色 */
#E1E1E1 1px,
/* 線の太さ */
transparent 1px,
transparent 240px
/* 線の間隔 */
);
}
.p-page-header--dotted {
/* 背景色 */
background-color: #F2F2F2;
/* ドットの作成: 中心から1pxだけ色を付け、残りを透明にする */
background-image: radial-gradient(#E1E1E1 2px, transparent 2px);
/* ドットの間隔を 80px 四方に設定 */
background-size: 80px 80px;
/* 必要に応じて：ドットを中央から開始させる場合 */
background-position: center;
}
.p-page-header .p-section-head {
margin-bottom: 16px;
}
.p-page-header .p-section-banner {
margin-bottom: 32px;
}
.p-page-header__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
}
.p-page-header__img-box {
width: 550px;
max-width: 100%;
}
.p-section-head__sub {
font-size: 18px;
display: flex;
align-items: center;
gap: 15px;
letter-spacing: 0.06em;
}
.p-section-head__sub::before {
content: "";
display: block;
width: 8px;
height: 8px;
transform: translateY(20%);
border-radius: 50%;
background: var(--g-main);
}
.p-section-text {
font-size: 18px;
line-height: 2;
letter-spacing: 0.06em;
margin-bottom: 56px;
font-weight: 400;
}
/* Modifier: Card Context for Section Head */
.p-section-head--card .p-section-head__sub {
font-family: var(--ff-body);
font-weight: 500;
color: #1f272b;
margin-bottom: 0;
line-height: 1.8;
letter-spacing: 0.06em;
display: block;
gap: 0;
}
.p-section-head--card .p-section-head__sub::before {
display: none;
}
.p-section-head--card .p-section-head__title {
font-family: var(--ff-body);
font-size: 20px;
font-weight: 500;
color: #1f272b;
background: none;
-webkit-text-fill-color: initial;
letter-spacing: 0.04em;
margin-bottom: 0;
}
.p-has-sidebar {
display: grid;
grid-template-columns: auto 1fr;
gap: 80px;
}
.hm-about {
position: relative;
width: 100%;
padding-bottom: 120px;
background-color: var(--c-base);
border-bottom-right-radius: 100px;
}
.hm-about__inner {
padding-top: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.hm-about__grid {
margin-top: 120px;
width: 100%;
}
.hm-about__card {
position: relative;
width: 100%;
height: 285px;
background-color: #f5f5f5;
overflow: hidden;
}
.hm-about__card img.bg {
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
top: 0;
left: 0;
}
.hm-about__card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hm-about__card.--industry::after {
background: linear-gradient(to right, #1b63b7 0%, #00418D 100%);
transition: all .4s;
}
.hm-about__card:hover.--industry::after {
opacity: 0.9;
}
.hm-about__card.--general::after {
background: linear-gradient(to left, #0097DA 0%, #00BFFF 100%);
transition: all .4s;
}
.hm-about__card:hover.--general::after {
opacity: 0.9;
}
.hm-about__card-content {
position: absolute;
z-index: 2;
top: 50%;
left: 50px;
transform: translateY(-50%);
color: #fff;
}
.hm-about__card-title {
color: var(--c-white);
font-size: 40px;
font-weight: 700;
margin-bottom: 2px;
letter-spacing: 0.1em;
font-family: var(--ff-serif);
}
.hm-about__card-text {
color: var(--c-white);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.04em;
}
.hm-about__card .c-btn--circle {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 2;
}
.hm-about__card:hover .c-btn--circle {
border-color: #0097da;
/* Fallback */
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #00418d 0%, #0097da 100%) border-box;
border: 1px solid transparent;
}
.hm-about__card:hover .c-btn--circle::after {
background: linear-gradient(90deg, #00418d 0%, #0097da 100%);
}
.hm-about__visual {
width: 50%;
position: relative;
height: 480px;
margin-right: -200px;
}
.hm-about__img {
position: absolute;
overflow: hidden;
border-radius: 4px;
}
.hm-about__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.hm-about__img.--01 {
top: -130px;
right: calc(0% - 10px);
width: 320px;
max-width: 100%;
z-index: 1;
aspect-ratio: 440/240;
}
.hm-about__img.--02 {
top: 52px;
left: 50%;
transform: translateX(-70%);
width: 320px;
max-width: 100%;
z-index: 2;
aspect-ratio: 440/240;
}
.hm-about__img.--03 {
bottom: 72px;
right: 0;
transform: translateX(40px);
width: 320px;
max-width: 100%;
z-index: 3;
aspect-ratio: 440/240;
}
.hm-message {
background: #F2F2F2;
}
.hm-message__content .c-btn--arrow {
justify-content: flex-start;
}
.hm-message__content {
flex: 0 1 560px;
}
.hm-message__wrapper {
position: relative;
width: 100%;
background-image: radial-gradient(#EBEBEB 2px, transparent 2px);
background-size: 25px 25px;
background-color: var(--c-white);
border-bottom-right-radius: 100px;
border-top-left-radius: 100px;
}
.hm-message__inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
border-radius: 100px 0 100px 0;
padding: 80px 0px;
position: relative;
display: flex;
justify-content: space-between;
gap: 60px;
}
.p-section-banner {
background: var(--c-main-light);
background: linear-gradient(to right, #00418D 0%, #0097DA 100%);
color: #fff;
padding: 14px 20px;
font-size: 32px;
letter-spacing: 0.08em;
font-weight: bold;
font-family: var(--ff-serif);
margin-bottom: 40px;
display: block;
width: fit-content;
}
/* Modifier: Card Context for Section Banner */
.p-section-banner--card {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--ff-serif);
font-size: 32px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 58px;
padding: 10px 20px;
margin: 0;
}
.hm-message__visual {
flex: 0 1 470px;
position: relative;
display: flex;
justify-content: flex-end;
}
.hm-message__img-box {
position: relative;
width: 100%;
max-width: 470px;
aspect-ratio: 470/512;
}
/* .hm-message__img-box::before {
content: "";
position: absolute;
top: 27px;
left: 45px;
width: 100%;
height: 100%;
background-color: transparent;
background: linear-gradient(to bottom, #00418D 0%, #0097DA 100%);
clip-path: polygon(19% 0, 99% 0, 81% 100%, 0% 100%);
z-index: 1;
} */
.hm-message__main-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 2;
}
.hm-message__logo {
position: absolute;
bottom: -90px;
right: -40px;
width: 320px;
max-width: 100%;
aspect-ratio: 320/298;
z-index: 3;
}
@keyframes splide-loading {
0% {
transform: rotate(0);
}
to {
transform: rotate(1turn);
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.splide__track--fade>.splide__list>.splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0;
}
.splide__track--fade>.splide__list>.splide__slide.is-active {
opacity: 1;
z-index: 1;
}
.splide--rtl {
direction: rtl;
}
.splide__track--ttb>.splide__list {
display: block;
}
.splide__container {
box-sizing: border-box;
position: relative;
}
.splide__list {
backface-visibility: hidden;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block;
}
.splide__pagination {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
pointer-events: none;
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
display: none;
}
.splide__progress__bar {
width: 0;
}
.splide {
position: relative;
visibility: hidden;
}
.splide.is-initialized,
.splide.is-rendered {
visibility: visible;
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative;
}
.splide__slide img {
vertical-align: bottom;
}
.splide__spinner {
animation: splide-loading 1s linear infinite;
border: 2px solid #999;
border-left-color: transparent;
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
}
.splide__sr {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline;
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0;
}
.hm-interview {
position: relative;
background-color: #0097DA;
}
.hm-about::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background-image: radial-gradient(#EBEBEB 2px, transparent 2px);
background-size: 25px 25px;
z-index: -1;
}
.hm-interview::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-image: radial-gradient(#EBEBEB 2px, transparent 2px);
background-size: 25px 25px;
background-color: var(--c-white);
}
.hm-interview__wrapper {
background-color: #F2F2F2;
border-bottom-right-radius: 100px;
border-top-left-radius: 100px;
position: relative;
z-index: 1;
}
.hm-interview__inner {
max-width: 100vw;
margin: 0 auto;
position: relative;
padding-top: 100px;
padding-bottom: 88px;
}
/* Slider container with left padding */
.hm-interview__splide {
overflow: visible;
position: relative;
margin-right: calc(50% - 50vw);
/* Space for arrows */
}
/* Slide width includes text-box area for overlap */
.hm-interview__slide {
position: relative;
opacity: 0.4;
transition: opacity 0.5s;
/* Reduced width to allow overlap (Image ~470px + overlap buffer) */
}
.hm-interview__slide.is-next {
margin-left: 192px;
}
.hm-interview__splide .splide__list {
align-items: flex-end;
}
/* Ensure the card retains full width despite narrow slide */
.hm-interview__slide .hm-interview__card {
display: flex;
align-items: flex-end;
/* Align bottom if needed, or check original flex alignment */
}
.hm-interview__slide.is-active {
opacity: 1;
z-index: 10;
/* Ensure active slide sits on top of next slide */
}
/* Hide text-box on inactive slides */
.hm-interview__slide .hm-interview__card-text-box {
display: none;
transition: opacity 0.3s, visibility 0.3s;
}
/* Show text-box only on active (current) slide */
.hm-interview__slide.is-active .hm-interview__card-text-box {
display: flex;
opacity: 1;
visibility: visible;
}
/* Next slide overlaps the active text-box */
.hm-interview__slide .hm-interview__card-img {
position: relative;
z-index: 3;
clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}
.hm-interview__slide.is-active .hm-interview__card {
z-index: 1;
}
.hm-interview__slide.is-active .hm-interview__card-text-box {
z-index: 2;
}
/* Custom Arrow Container - Below Slider */
.hm-interview__arrows {
display: flex;
gap: 46px;
margin-top: 40px;
}
.hm-interview__arrow {
width: 58px;
height: 58px;
border: 1px solid #1f272b;
border-radius: 50%;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s, opacity 0.3s;
position: relative;
}
.hm-interview__arrow:hover {
background-color: rgba(31, 39, 43, 0.1);
}
.hm-interview__arrow::before {
content: "";
display: block;
width: 13px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.13299 0L6.20396 0.950133L10.4845 5.32816H0V6.67184H10.4845L6.20396 11.0499L7.13299 12L13 6L7.13299 0Z' fill='%231F272B'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.hm-interview__arrow--prev::before {
transform: rotate(180deg);
}
/* Hide default Slick arrows */
.hm-interview__slider .slick-arrow {
display: none !important;
}
.hm-interview__header {
display: flex;
align-items: center;
margin-bottom: 30px;
column-gap: 100px;
}
.hm-interview__desc {
text-align: left;
font-size: 18px;
line-height: 2;
font-weight: 400;
letter-spacing: 0.06em;
}
.hm-interview .splide {}
.hm-interview .splide__arrow {
position: relative;
background: transparent;
border: none;
width: 58px;
height: 58px;
border-radius: 50%;
opacity: 1;
padding: 0;
}
.hm-interview .splide__arrow::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: url("../images/home/interview-arrow-circle.svg") no-repeat center center;
background-size: contain;
transition: transform 0.3s;
}
.hm-interview .splide__arrow::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: url("../images/home/interview-arrow-vector.svg") no-repeat center center;
background-size: contain;
}
.hm-interview .splide__arrow:hover::before,
.hm-interview .splide__arrow:hover::after {
opacity: 0.8;
}
.hm-interview .splide__arrow--prev {
transform: none;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
.hm-interview .splide__arrow--prev::after {
transform: translate(-50%, -50%) rotate(180deg);
}
.hm-interview .splide__arrow--next {
transform: none;
left: auto;
right: auto;
top: auto;
bottom: auto;
}
.hm-interview .splide__arrow svg {
display: none;
}
.hm-interview .splide__pagination {
bottom: -30px;
}
.hm-interview__card {
display: flex;
align-items: flex-start;
gap: 0;
position: relative;
transition: all .4s;
}
.hm-interview__card:hover {
text-decoration: none;
}
.hm-interview__card img {
transition: all .4s;
}
.hm-interview__card:hover img {
transform: scale(1.05);
}
.hm-interview__card-img {
/* border-radius: 20px; */
overflow: hidden;
width: 100%;
max-width: 470px;
}
.hm-interview__card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hm-interview__card-text-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: -20px;
}
/* .hm-interview__card-sub-title {
font-family: var(--ff-body);
font-weight: 500;
color: #1f272b;
margin-bottom: 20px;
margin-left: 20px;
}
.hm-interview__card-sub {
font-size: 16px;
line-height: 1.8;
letter-spacing: 0.06em;
margin-bottom: 0;
}
.hm-interview__card-main {
font-size: 20px;
letter-spacing: 0.04em;
margin-bottom: 0;
}
*/
.hm-interview__card-sub-title {
margin-top: 15px;
margin-bottom: 0;
}
.hm-interview__card-title-box {
display: flex;
flex-direction: column;
gap: 0;
}
/* .hm-interview__card-title {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #00418d 0%, #0097da 100%);
color: #fff;
font-family: var(--ff-serif);
font-size: 32px;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 58px;
padding: 10px 20px;
margin: 0;
}
*/
@media screen and (max-width: 768px) {
.hm-interview__slide .hm-interview__card {
flex-direction: column;
align-items: flex-start;
}
.hm-interview__card-img {
width: 100%;
height: auto;
aspect-ratio: 290 / 326;
}
.hm-interview__card-text-box {
margin-left: 0;
padding-top: 12px;
}
.hm-interview__wrapper {
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.hm-interview__slide {
max-width: 100%;
}
.hm-interview__slide .hm-interview__card-text-box {
display: block;
}
.hm-interview__slide.is-next {
margin-left: 0px;
}
.hm-interview__slide.is-next .hm-interview__card-text-box {
opacity: 0;
}
.hm-interview__slide.is-active .hm-interview__card-text-box {
opacity: 1;
}
}
.hm-benefits {
background-color: #f2f2f2;
}
.hm-benefits__container {
margin: 0 auto;
background: linear-gradient(to left, #0097da 0%, #166acc 65%);
border-radius: 100px 0 100px 0;
position: relative;
overflow: hidden;
}
.hm-benefits__inner {
display: flex;
gap: 70px;
}
.hm-benefits__img {
margin-left: -320px;
}
.hm-benefits__img img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.hm-benefits__content {
padding: 120px 0 64px;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
flex: 0 0 550px;
}
.hm-benefits__head {
margin-bottom: 48px;
}
.hm-benefits__sub {
color: var(--c-white);
font-size: 16px;
font-weight: 500;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.hm-benefits__sub::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--g-main);
}
.hm-benefits__title {
font-size: 80px;
line-height: 1;
font-weight: bold;
margin-bottom: 0;
color: #fff;
}
.hm-benefits__text {
font-size: 18px;
line-height: 2;
margin-bottom: 80px;
font-weight: normal;
}
.hm-benefits__text p {
color: var(--c-white);
}
.hm-news {
margin-top: -1px;
background: linear-gradient(140deg, rgba(0, 151, 218, 1) 0%, rgba(0, 151, 218, 1) 50%, rgba(4, 75, 158, 1) 50%, rgba(4, 75, 158, 1) 100%);
}
.hm-news__wrapper {
background-color: #F5F5F5;
border-bottom-right-radius: 100px;
border-top-left-radius: 100px;
}
.hm-news__inner {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding-top: 100px;
padding-bottom: 64px;
padding-left: 60px;
padding-right: 60px;
position: relative;
display: flex;
justify-content: space-between;
border-radius: 40px;
}
.hm-news .p-section-head {
width: 30%;
}
.hm-news__content {
width: 65%;
}
.hm-news__list {}
.hm-news__item {
padding: 0;
border-bottom: none;
}
.hm-news__link-wrapper {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.625em 1em;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid #E1E1E1;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.hm-news__item:first-of-type .hm-news__link-wrapper {
padding-top: 0;
}
.hm-news__link-wrapper:hover {
text-decoration: none;
}
.hm-news__link-wrapper::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg, #00418D 0%, #C5E4FF 70%, #0097DA 100%);
transition: width 0.3s ease;
}
.hm-news__link-wrapper:hover::after {
width: 100%;
}
.hm-news__date {
font-family: var(--ff-en);
font-weight: 500;
letter-spacing: 0.06em;
color: #787878;
}
.hm-news__cat {
text-align: center;
width: fit-content;
padding: 0 10px;
font-size: 14px;
font-weight: 500;
position: relative;
border: 1px solid transparent;
background: linear-gradient(#F5F5F5, #F5F5F5) padding-box, linear-gradient(to right, #00418D, #0097DA) border-box;
color: #00418D;
}
.hm-news__cat span {
background: linear-gradient(to right, #00418D, #0097DA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hm-news__title {
color: #1F272B;
grid-column: 1 / span 2;
flex: 1;
font-weight: normal;
transition: opacity 0.3s;
}
.hm-news__link-wrapper:hover .hm-news__title {
opacity: 0.7;
}
.hm-news__btn-wrap {
margin-top: 60px;
}
.hm-news__btn-wrap .c-btn--arrow {
justify-content: flex-start;
}
.l-footer__job-info {
/* background-image: url("../images/home/job-info-bg.png");
background-size: cover;
background-position: center; */
position: relative;
border-radius: 100px 0 24px 24px;
overflow: hidden;
}
.l-footer__job-info::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #044B9E;
z-index: 1;
}
.l-footer__job-info-head {
margin-bottom: 50px;
}
.l-footer__job-info-sub {
color: var(--c-white);
font-size: 16px;
font-weight: 500;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 10px;
}
.l-footer__job-info-sub::before {
content: "";
display: block;
width: 8px;
height: 8px;
transform: translateY(20%);
border-radius: 50%;
background: var(--g-main);
}
.l-footer__job-info-title {
color: var(--c-white);
font-size: 80px;
line-height: 1;
font-weight: 500;
}
.l-footer__job-info-text p {
font-size: 18px;
line-height: 2;
color: var(--c-white);
}
.l-footer__job-info-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100px;
border: 1px solid #fff;
padding: 0 40px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.l-footer__job-info-btn:hover .l-footer__job-info-btn-text {
background: linear-gradient(90deg, #00418d 0%, #0097da 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #00418d;
/* Fallback */
}
.l-footer__job-info-btn:hover .l-footer__job-info-btn-icon {
border-color: #0097da;
/* Fallback */
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #00418d 0%, #0097da 100%) border-box;
border: 1px solid transparent;
}
.l-footer__job-info-btn:hover .l-footer__job-info-btn-icon::after {
background: linear-gradient(90deg, #00418d 0%, #0097da 100%);
}
.l-footer__job-info-btn-text {
color: var(--c-white);
font-size: 32px;
font-weight: 500;
letter-spacing: 0.1em;
text-align: left;
flex: 1;
}
.l-footer__job-info-btn-icon {
width: 50px;
height: 50px;
border: 1px solid #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.l-footer__job-info-btn-icon::after {
content: "";
display: block;
width: 15px;
height: 15px;
mask: url("../images/home/job-info-arrow.svg") no-repeat center center;
-webkit-mask: url("../images/home/job-info-arrow.svg") no-repeat center center;
-webkit-mask-size: contain;
mask-size: contain;
background-color: #fff;
}
.c-title-en {
font-family: var(--ff-serif);
font-size: 72px;
font-weight: bold;
}
.u-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-mt-md {
margin-top: var(--space-md) !important;
}
.u-mr-md {
margin-right: var(--space-md) !important;
}
.u-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-ml-md {
margin-left: var(--space-md) !important;
}
.u-pt-md {
padding-top: var(--space-md) !important;
}
.u-pr-md {
padding-right: var(--space-md) !important;
}
.u-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-pl-md {
padding-left: var(--space-md) !important;
}
.u-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-mt-0 {
margin-top: 0 !important;
}
.u-mr-0 {
margin-right: 0 !important;
}
.u-mb-0 {
margin-bottom: 0 !important;
}
.u-ml-0 {
margin-left: 0 !important;
}
.u-pt-0 {
padding-top: 0 !important;
}
.u-pr-0 {
padding-right: 0 !important;
}
.u-pb-0 {
padding-bottom: 0 !important;
}
.u-pl-0 {
padding-left: 0 !important;
}
.u-color-black {
color: var(--c-black) !important;
}
.u-color-white {
color: var(--c-white) !important;
}
.u-color-main {
color: var(--c-main) !important;
}
.u-color-main-light {
color: var(--c-main-light) !important;
}
.u-color-accent {
color: var(--c-accent) !important;
}
.u-color-gray {
color: var(--c-gray-dark) !important;
}
.u-color-link {
color: var(--c-link) !important;
}
.u-color-note {
color: var(--c-note) !important;
}
/* ===================== font-size ===================== */
.u-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-fz-default {
font-size: var(--fz-default) !important;
}
.u-fz-md {
font-size: var(--fz-md) !important;
}
.u-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-fz-xxl {
font-size: var(--fz-xxl) !important;
}
.u-fz-clamp-xs {
font-size: var(--fz-clamp-xs) !important;
}
.u-fz-clamp-sm {
font-size: var(--fz-clamp-sm) !important;
}
.u-fz-clamp-default {
font-size: var(--fz-clamp-default) !important;
}
.u-fz-clamp-md {
font-size: var(--fz-clamp-md) !important;
}
.u-fz-clamp-lg {
font-size: var(--fz-clamp-lg) !important;
}
.u-fz-clamp-xl {
font-size: var(--fz-clamp-xl) !important;
}
.u-fw-n {
font-weight: normal !important;
}
.u-fw-m {
font-weight: 500 !important;
}
.u-fw-b {
font-weight: bold !important;
}
.u-ls-0 {
letter-spacing: 0 !important;
}
.u-ls-20 {
letter-spacing: 0.02em !important;
}
.u-lh-10 {
line-height: 1 !important;
}
.u-lh-15 {
line-height: 1.5 !important;
}
.u-lh-20 {
line-height: 2 !important;
}
.u-underline {
text-decoration: underline;
}
.u-tal {
text-align: left !important;
}
.u-tac {
text-align: center !important;
}
.u-tar {
text-align: right !important;
}
.u-dib {
display: inline-block !important;
}
[class*=js-scroll-animation] {
transition-property: var(--property);
transition-timing-function: var(--easing);
}
[class*=js-scroll-animation].is-animated {
transition-duration: var(--duration);
}
/* Fade ---------------------------------------------- */
.js-scroll-animation-fade-in {
--property: opacity;
--easing: ease;
--duration: 1s;
}
.js-scroll-animation-fade-in:not(.is-animated) {
opacity: 0;
}
.js-scroll-animation-fade-in-up {
--property: opacity, translate;
--easing: ease-in-out;
--duration: 1s;
--starting-position: 40px;
}
.js-scroll-animation-fade-in-up:not(.is-animated) {
opacity: 0;
translate: 0 var(--starting-position);
}
/* Header Navigation -------------------------------------------------- */
.gnav {
float: right;
margin-top: 35px;
/* Adjust vertical alignment */
}
.gnav__list {
display: flex;
gap: 30px;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.gnav__item {
margin: 0;
padding: 0;
}
.gnav__link {
font-size: 16px;
font-weight: 700;
color: var(--c-main-dark);
/* Using defined variable */
text-decoration: none;
text-transform: uppercase;
font-family: var(--ff-title);
letter-spacing: 0.05em;
transition: color 0.3s ease;
display: block;
line-height: 1;
}
.gnav__link:hover {
color: var(--c-main);
text-decoration: none;
}
/* Responsive adjustment */
@media screen and (max-width: 1024px) {
.gnav {
display: none;
/* Hide on tablet/mobile where hamburger likely takes over */
}
}
/* Chat Component */
.p-chat-content {
padding-top: 120px;
padding-bottom: 120px;
}
.p-chat {
display: flex;
flex-direction: column;
gap: 80px;
}
.p-chat__item {
display: flex;
flex-direction: column;
gap: 24px;
}
.p-chat__item-img {
text-align: center;
}
.p-chat__head {
align-self: flex-end;
max-width: 100%;
/* or constrained? */
width: fit-content;
background: var(--g-main);
padding: 18px 24px;
border-radius: 32px 32px 0 32px;
font-size: 16px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.08em;
}
.p-chat__head p {
font-weight: normal;
font-size: 18px;
color: var(--c-white);
letter-spacing: 0.06em;
}
.p-chat__body {
width: 100%;
background-color: var(--c-base);
color: #1f272b;
/* Figma: px 24, py 20. But usually even padding. React says py 20 px 24. */
padding: 24px;
/* Figma: rounded-br, tl, tr. BL is 0. */
/* TL=24, TR=24, BR=24, BL=0 */
border-radius: 24px 24px 24px 0;
font-size: 16px;
line-height: 1.8;
}
.p-chat__body p {
font-size: 18px;
line-height: 2;
letter-spacing: 0.06em;
margin-bottom: 0;
}
.p-chat__body p+p {
margin-top: 1.8em;
/* Gap between paragraphs? React code had mb-0 on ps. But if multiple ps? */
/* React code: p + p has no margin? No, React code had explicit s. */
/* I used
s in HTML. */
/* Let's set some margin for readability if multiple paragraphs. */
margin-top: 1em;
}
/* Other People Section */
.p-other-people__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.p-other-people__card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: all 0.4s;
width: fit-content;
margin-inline: auto;
}
.p-other-people__card:hover {
opacity: 0.8;
text-decoration: none;
}
.p-other-people__card-img {
max-width: 360px;
width: 100%;
/* aspect-ratio: 360/406; Use aspect ratio if consistent */
position: relative;
/* Rounded corners for image */
overflow: hidden;
}
.p-other-people__card-img img {
width: 100%;
height: auto;
vertical-align: bottom;
}
/* Modifier for Other People Banner */
.p-section-banner--other-people {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--ff-serif);
font-size: 20px;
font-weight: 700;
letter-spacing: 0.05em;
/* 1px for 20px is 0.05em */
line-height: 1.2;
/* Adjust for vertical centering in 40px height */
padding: 0 10px;
height: 44px;
margin: 0;
width: auto;
}
.p-other-people__card-banner-box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
/* Left align */
gap: 0;
}
/* .p-other-people__card-banner {
color: #fff;
}
*/
.p-other-people__card-content {
padding-top: 14px;
}
.p-other-people__card-sub {
font-family: "Noto Sans JP", sans-serif;
/* Ensuring Noto Sans JP */
font-size: 16px;
margin-bottom: 5px;
font-weight: 500;
letter-spacing: 0.08em;
/* 1.28px / 16px = 0.08 */
line-height: normal;
}
.p-other-people__card-title {
font-family: "Noto Sans JP", sans-serif;
font-size: 18px;
font-weight: 500;
/* Medium */
margin-bottom: 0;
letter-spacing: 0.04em;
/* 0.72px / 18px = 0.04 */
line-height: normal;
}
/* Other People Section Container Styles (Replicating hm-news visual style) */
.p-other-people {
background: linear-gradient(140deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgba(4, 75, 158, 1) 50%, rgba(4, 75, 158, 1) 100%);
}
.p-other-people__wrapper {
background-color: #f2f2f2;
border-bottom-right-radius: 100px;
border-top-left-radius: 100px;
}
.p-other-people__inner {
padding-top: 120px;
padding-bottom: 60px;
max-width: 1098px;
margin: 0 auto;
padding-left: 60px;
padding-right: 60px;
}
/* Remove or override old p-other-people__card-banner styles if they conflict, but since I changed the class name in HTML to banner-box, strictly speaking I should be safe. However, I should verify if p-section-banner--card needs overrides for this context. p-section-banner--card has margin: 0. I might want to ensure they align nicely. */
/* Sticky Sidebar Image Overlay Styles */
.p-chat__sidebar-figure {
position: relative;
width: 100%;
}
.js-sidebar-img-02 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
@media print {
.no-print {
display: none;
}
}
@media (max-width: 1400px) {
.c-grid[data-columns~="xl:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="xl:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="xl:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="xl:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="xl:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="xl:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="xl:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="xl:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="xl:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="xl:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="xl:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="xl:12"] {
--grid-columns: 12;
}
.c-grid[data-gap~="xl:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="xl:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="xl:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="xl:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="xl:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="xl:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="xl:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="xl:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="xl:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="xl:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="xl:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="xl:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="xl:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="xl:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="xl:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="xl:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="xl:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="xl:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="xl:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="xl:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="xl:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="xl:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="xl:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="xl:y-xxl"] {
--grid-row-gap: 4rem;
}
.c-grid__item[data-span~="xl:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="xl:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="xl:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="xl:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="xl:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="xl:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="xl:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="xl:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="xl:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="xl:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="xl:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="xl:12"] {
grid-column: span 12;
}
.c-grid[data-align~="xl:start"] {
justify-content: start;
}
.c-grid[data-align~="xl:center"] {
justify-content: center;
}
.c-grid[data-align~="xl:end"] {
justify-content: end;
}
.c-grid[data-align~="xl:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="xl:top"] {
align-items: start;
}
.c-grid[data-align~="xl:middle"] {
align-items: center;
}
.c-grid[data-align~="xl:bottom"] {
align-items: end;
}
.c-flex[data-gap~="xl:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="xl:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="xl:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="xl:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="xl:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="xl:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="xl:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="xl:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="xl:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="xl:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="xl:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="xl:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="xl:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="xl:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="xl:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="xl:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="xl:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="xl:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="xl:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="xl:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="xl:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="xl:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="xl:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="xl:y-xxl"] {
--flex-row-gap: 4rem;
}
.c-flex[data-align~="xl:col"] {
flex-direction: column;
}
.c-flex[data-align~="xl:start"] {
justify-content: start;
}
.c-flex[data-align~="xl:center"] {
justify-content: center;
}
.c-flex[data-align~="xl:end"] {
justify-content: end;
}
.c-flex[data-align~="xl:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="xl:top"] {
align-items: start;
}
.c-flex[data-align~="xl:base"] {
align-items: first baseline;
}
.c-flex[data-align~="xl:middle"] {
align-items: center;
}
.c-flex[data-align~="xl:bottom"] {
align-items: end;
}
.u-xl-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-xl-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-xl-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-xl-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-xl-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-xl-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-xl-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-xl-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-xl-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-xl-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-xl-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-xl-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-xl-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-xl-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-xl-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-xl-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-xl-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-xl-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-xl-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-xl-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-xl-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-xl-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-xl-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-xl-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-xl-mt-md {
margin-top: var(--space-md) !important;
}
.u-xl-mr-md {
margin-right: var(--space-md) !important;
}
.u-xl-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-xl-ml-md {
margin-left: var(--space-md) !important;
}
.u-xl-pt-md {
padding-top: var(--space-md) !important;
}
.u-xl-pr-md {
padding-right: var(--space-md) !important;
}
.u-xl-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-xl-pl-md {
padding-left: var(--space-md) !important;
}
.u-xl-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-xl-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-xl-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-xl-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-xl-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-xl-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-xl-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-xl-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-xl-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-xl-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-xl-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-xl-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-xl-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-xl-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-xl-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-xl-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-xl-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-xl-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-xl-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-xl-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-xl-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-xl-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-xl-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-xl-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-xl-mt-0 {
margin-top: 0 !important;
}
.u-xl-mr-0 {
margin-right: 0 !important;
}
.u-xl-mb-0 {
margin-bottom: 0 !important;
}
.u-xl-ml-0 {
margin-left: 0 !important;
}
.u-xl-pt-0 {
padding-top: 0 !important;
}
.u-xl-pr-0 {
padding-right: 0 !important;
}
.u-xl-pb-0 {
padding-bottom: 0 !important;
}
.u-xl-pl-0 {
padding-left: 0 !important;
}
.u-xl-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-xl-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-xl-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-xl-fz-md {
font-size: var(--fz-md) !important;
}
.u-xl-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-xl-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-xl-fz-xxl {
font-size: var(--fz-xxl) !important;
}
.u-xl-tal {
text-align: left !important;
}
.u-xl-tac {
text-align: center !important;
}
.u-xl-tar {
text-align: right !important;
}
.u-xl-over-only {
display: none !important;
}
}
@media not all and (max-width: 1400px) {
.u-xl-over-tal {
text-align: left !important;
}
.u-xl-over-tac {
text-align: center !important;
}
.u-xl-over-tar {
text-align: right !important;
}
.u-xl-only {
display: none !important;
}
}
@media screen and (max-width: 1399px) {
.hm-about__visual {
margin-right: -10vw;
}
}
@media (max-width: 1280px) {
.c-grid[data-columns~="lg:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="lg:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="lg:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="lg:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="lg:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="lg:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="lg:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="lg:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="lg:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="lg:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="lg:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="lg:12"] {
--grid-columns: 12;
}
.c-grid[data-gap~="lg:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="lg:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="lg:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="lg:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="lg:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="lg:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="lg:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="lg:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="lg:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="lg:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="lg:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="lg:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="lg:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="lg:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="lg:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="lg:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="lg:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="lg:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="lg:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="lg:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="lg:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="lg:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="lg:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="lg:y-xxl"] {
--grid-row-gap: 4rem;
}
.c-grid__item[data-span~="lg:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="lg:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="lg:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="lg:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="lg:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="lg:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="lg:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="lg:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="lg:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="lg:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="lg:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="lg:12"] {
grid-column: span 12;
}
.c-grid[data-align~="lg:start"] {
justify-content: start;
}
.c-grid[data-align~="lg:center"] {
justify-content: center;
}
.c-grid[data-align~="lg:end"] {
justify-content: end;
}
.c-grid[data-align~="lg:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="lg:top"] {
align-items: start;
}
.c-grid[data-align~="lg:middle"] {
align-items: center;
}
.c-grid[data-align~="lg:bottom"] {
align-items: end;
}
.c-flex[data-gap~="lg:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="lg:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="lg:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="lg:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="lg:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="lg:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="lg:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="lg:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="lg:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="lg:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="lg:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="lg:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="lg:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="lg:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="lg:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="lg:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="lg:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="lg:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="lg:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="lg:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="lg:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="lg:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="lg:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="lg:y-xxl"] {
--flex-row-gap: 4rem;
}
.c-flex[data-align~="lg:col"] {
flex-direction: column;
}
.c-flex[data-align~="lg:start"] {
justify-content: start;
}
.c-flex[data-align~="lg:center"] {
justify-content: center;
}
.c-flex[data-align~="lg:end"] {
justify-content: end;
}
.c-flex[data-align~="lg:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="lg:top"] {
align-items: start;
}
.c-flex[data-align~="lg:base"] {
align-items: first baseline;
}
.c-flex[data-align~="lg:middle"] {
align-items: center;
}
.c-flex[data-align~="lg:bottom"] {
align-items: end;
}
.u-lg-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-lg-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-lg-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-lg-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-lg-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-lg-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-lg-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-lg-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-lg-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-lg-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-lg-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-lg-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-lg-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-lg-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-lg-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-lg-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-lg-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-lg-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-lg-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-lg-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-lg-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-lg-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-lg-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-lg-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-lg-mt-md {
margin-top: var(--space-md) !important;
}
.u-lg-mr-md {
margin-right: var(--space-md) !important;
}
.u-lg-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-lg-ml-md {
margin-left: var(--space-md) !important;
}
.u-lg-pt-md {
padding-top: var(--space-md) !important;
}
.u-lg-pr-md {
padding-right: var(--space-md) !important;
}
.u-lg-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-lg-pl-md {
padding-left: var(--space-md) !important;
}
.u-lg-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-lg-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-lg-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-lg-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-lg-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-lg-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-lg-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-lg-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-lg-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-lg-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-lg-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-lg-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-lg-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-lg-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-lg-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-lg-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-lg-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-lg-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-lg-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-lg-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-lg-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-lg-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-lg-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-lg-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-lg-mt-0 {
margin-top: 0 !important;
}
.u-lg-mr-0 {
margin-right: 0 !important;
}
.u-lg-mb-0 {
margin-bottom: 0 !important;
}
.u-lg-ml-0 {
margin-left: 0 !important;
}
.u-lg-pt-0 {
padding-top: 0 !important;
}
.u-lg-pr-0 {
padding-right: 0 !important;
}
.u-lg-pb-0 {
padding-bottom: 0 !important;
}
.u-lg-pl-0 {
padding-left: 0 !important;
}
.u-lg-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-lg-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-lg-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-lg-fz-md {
font-size: var(--fz-md) !important;
}
.u-lg-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-lg-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-lg-fz-xxl {
font-size: var(--fz-xxl) !important;
}
.u-lg-tal {
text-align: left !important;
}
.u-lg-tac {
text-align: center !important;
}
.u-lg-tar {
text-align: right !important;
}
.u-lg-over-only {
display: none !important;
}
}
@media not all and (max-width: 1280px) {
.u-lg-over-tal {
text-align: left !important;
}
.u-lg-over-tac {
text-align: center !important;
}
.u-lg-over-tar {
text-align: right !important;
}
.u-lg-only {
display: none !important;
}
}
@media screen and (max-width: 1200px) {
.l-header__nav {
display: none;
}
.l-header__recruit.is-active {
display: flex;
position: relative;
z-index: 300;
}
.l-header__toggle {
display: block;
flex: 0 0 56px;
height: 100%;
aspect-ratio: 1;
background-color: #1F272B;
}
body {
padding-top: 56px;
}
.l-header {
height: 56px;
}
.l-header__inner {
padding-left: 20px;
padding-right: 0px;
gap: 20px;
}
.l-header__logo h1 {
display: flex;
width: 100%;
}
.l-header__logo a {
height: 100%;
width: 100%;
display: flex;
}
.l-header__logo {
width: 114px;
}
.l-header__recruit-link {
width: auto;
}
.l-header__recruit-link.--new,
.l-header__recruit-link.--career {
width: 84px;
font-size: 12px;
}
.l-drawer {
padding-top: 0px;
}
.l-header__toggle span {
width: 26px;
background-color: #fff;
}
.l-header__toggle span:nth-of-type(1) {
top: 14px;
}
.l-header__toggle span:nth-of-type(2) {
top: 20px;
}
.l-header__toggle span:nth-of-type(3) {
font-size: 10px;
text-align: center;
color: #fff;
}
}
@media (max-width: 1024px) {
.c-grid[data-columns~="md:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="md:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="md:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="md:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="md:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="md:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="md:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="md:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="md:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="md:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="md:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="md:12"] {
--grid-columns: 12;
}
.c-grid[data-gap~="md:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="md:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="md:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="md:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="md:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="md:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="md:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="md:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="md:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="md:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="md:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="md:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="md:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="md:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="md:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="md:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="md:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="md:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="md:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="md:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="md:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="md:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="md:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="md:y-xxl"] {
--grid-row-gap: 4rem;
}
.c-grid__item[data-span~="md:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="md:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="md:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="md:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="md:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="md:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="md:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="md:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="md:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="md:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="md:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="md:12"] {
grid-column: span 12;
}
.c-grid[data-align~="md:start"] {
justify-content: start;
}
.c-grid[data-align~="md:center"] {
justify-content: center;
}
.c-grid[data-align~="md:end"] {
justify-content: end;
}
.c-grid[data-align~="md:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="md:top"] {
align-items: start;
}
.c-grid[data-align~="md:middle"] {
align-items: center;
}
.c-grid[data-align~="md:bottom"] {
align-items: end;
}
.c-flex[data-gap~="md:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="md:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="md:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="md:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="md:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="md:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="md:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="md:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="md:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="md:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="md:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="md:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="md:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="md:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="md:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="md:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="md:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="md:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="md:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="md:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="md:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="md:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="md:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="md:y-xxl"] {
--flex-row-gap: 4rem;
}
.c-flex[data-align~="md:col"] {
flex-direction: column;
}
.c-flex[data-align~="md:start"] {
justify-content: start;
}
.c-flex[data-align~="md:center"] {
justify-content: center;
}
.c-flex[data-align~="md:end"] {
justify-content: end;
}
.c-flex[data-align~="md:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="md:top"] {
align-items: start;
}
.c-flex[data-align~="md:base"] {
align-items: first baseline;
}
.c-flex[data-align~="md:middle"] {
align-items: center;
}
.c-flex[data-align~="md:bottom"] {
align-items: end;
}
.u-md-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-md-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-md-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-md-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-md-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-md-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-md-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-md-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-md-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-md-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-md-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-md-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-md-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-md-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-md-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-md-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-md-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-md-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-md-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-md-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-md-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-md-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-md-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-md-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-md-mt-md {
margin-top: var(--space-md) !important;
}
.u-md-mr-md {
margin-right: var(--space-md) !important;
}
.u-md-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-md-ml-md {
margin-left: var(--space-md) !important;
}
.u-md-pt-md {
padding-top: var(--space-md) !important;
}
.u-md-pr-md {
padding-right: var(--space-md) !important;
}
.u-md-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-md-pl-md {
padding-left: var(--space-md) !important;
}
.u-md-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-md-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-md-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-md-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-md-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-md-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-md-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-md-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-md-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-md-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-md-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-md-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-md-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-md-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-md-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-md-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-md-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-md-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-md-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-md-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-md-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-md-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-md-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-md-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-md-mt-0 {
margin-top: 0 !important;
}
.u-md-mr-0 {
margin-right: 0 !important;
}
.u-md-mb-0 {
margin-bottom: 0 !important;
}
.u-md-ml-0 {
margin-left: 0 !important;
}
.u-md-pt-0 {
padding-top: 0 !important;
}
.u-md-pr-0 {
padding-right: 0 !important;
}
.u-md-pb-0 {
padding-bottom: 0 !important;
}
.u-md-pl-0 {
padding-left: 0 !important;
}
.u-md-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-md-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-md-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-md-fz-md {
font-size: var(--fz-md) !important;
}
.u-md-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-md-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-md-fz-xxl {
font-size: var(--fz-xxl) !important;
}
.u-md-tal {
text-align: left !important;
}
.u-md-tac {
text-align: center !important;
}
.u-md-tar {
text-align: right !important;
}
.u-md-over-only {
display: none !important;
}
}
@media not all and (max-width: 1024px) {
.u-md-over-tal {
text-align: left !important;
}
.u-md-over-tac {
text-align: center !important;
}
.u-md-over-tar {
text-align: right !important;
}
.u-md-only {
display: none !important;
}
}
@media screen and (max-width: 768px) {
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
th,
td,
dt,
dd,
label,
address {
color: #1F272B;
}
.l-footer__card-nav,
.l-footer__card-recruit {
display: none;
}
.l-footer__inner {
flex-direction: column;
padding: 0;
}
.l-footer__info {
width: 100%;
margin-bottom: 40px;
}
.l-footer__nav {
width: 100%;
margin-bottom: 40px;
}
.l-footer__external {
width: 100%;
}
.l-footer__copyright {
padding-left: 20px;
padding-right: 20px;
}
.l-footer__slogan {
font-size: 28px;
text-indent: 0.7em;
letter-spacing: 0;
margin-bottom: 28px;
}
.l-footer__bottom-inner {
padding: 0;
}
.l-footer__copy {
font-size: 10px;
display: block;
width: 100%;
text-indent: 0;
}
.l-footer__bottom {
padding: 40px 12px 26px;
margin-top: 0;
padding-top: 20px;
}
.l-footer__job-info-top {
flex-direction: column;
text-align: center;
}
.l-footer__job-info-head {
margin-bottom: 24px;
}
.l-footer__job-info-btn-text {
font-size: 24px;
font-weight: 500;
}
.l-footer__job-info-content {
text-align: left;
width: 100%;
margin-bottom: 0px;
}
.l-footer__job-info-text p {
font-size: 14px;
font-weight: normal;
}
.l-footer__job-info-btns {
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
gap: 16px;
}
.l-footer__job-info-btn {
height: 80px;
padding: 0 20px;
}
.l-footer__job-info-sub::before {
width: 4px;
height: 4px;
}
.l-footer__card-logo {
width: 180px;
}
.l-footer__card-corp-link {
font-size: 12px;
font-weight: normal;
text-decoration: underline !important;
text-underline-offset: 6px;
}
.l-footer__card-address {
margin-bottom: 22px;
}
.l-main--has-sidebar {
grid-template-columns: 1fr;
}
.p-section-head__title {
font-size: 60px;
}
.p-chat-content {
padding-top: 56px;
padding-bottom: 80px;
}
.p-has-sidebar {
grid-template-columns: auto;
gap: 60px;
margin-top: 0px;
}
.p-has-sidebar__side {
display: none;
}
.hm-about__inner {
flex-direction: column-reverse;
padding-left: var(--inner-gutter);
padding-right: var(--inner-gutter);
gap: 26px;
}
.hm-about {
padding-bottom: 80px;
border-bottom-right-radius: 40px;
}
.p-section-text {
font-size: 14px;
line-height: 2;
letter-spacing: 0.04em;
margin-bottom: 24px;
}
.p-section-head {
margin-bottom: 14px;
}
.hm-news .p-section-head {
display: contents;
}
.hm-news__btn-wrap {
order: 1;
margin-top: 24px;
}
.hm-news__btn-wrap .c-btn--arrow {
justify-content: flex-end;
}
.hm-about__grid {
margin-top: 88px;
margin-left: 0;
margin-right: 0;
width: auto;
}
.hm-about__card {
height: 185px;
}
.hm-about__card-title {
font-size: 26px;
font-weight: normal;
margin-bottom: 10px;
}
.hm-about__card-content {
left: 20px;
}
.hm-about__card-text {
font-weight: normal;
font-size: 12px;
}
.hm-about__card .c-btn--circle {
width: 40px;
height: 40px;
bottom: 12px;
right: 12px;
}
.hm-about__card .c-btn--circle::after {
width: 10px;
height: 10px;
}
.hm-about__card.--general::after,
.hm-about__card.--industry::after {
opacity: 0.9;
}
.hm-about__visual {
width: 100%;
height: 91px;
}
.hm-about__img.--01,
.hm-about__img.--02,
.hm-about__img.--03 {
width: 36vw;
max-width: 100%;
z-index: 1;
aspect-ratio: 134/80;
}
.hm-about__img.--01 {
top: -44vw;
}
.hm-about__img.--02 {
top: -23vw;
bottom: 0;
left: auto;
right: 0;
transform: translateX(-49%);
}
.hm-about__img.--03 {
bottom: auto;
top: -1vw;
transform: translateX(22%);
}
.hm-about__img img {
object-fit: contain;
}
.hm-message__container {
border-radius: 50px 0 50px 0;
padding: 60px 20px;
}
.hm-message__wrapper {
border-bottom-right-radius: 40px;
border-top-left-radius: 0;
background-image: radial-gradient(#EBEBEB 1px, transparent 1px);
background-size: 12px 12px;
}
.hm-message__inner {
flex-direction: column;
gap: 24px;
padding: 56px 18px;
padding-bottom: 84px;
}
.hm-benefits__text {
font-size: 14px;
font-weight: normal;
margin-bottom: 24px;
}
.hm-benefits__sub {
color: var(--c-white);
font-size: 14px;
font-weight: normal;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 10px;
}
.hm-news__title {
font-size: 14px;
}
.hm-news__date {
font-size: 14px;
}
.hm-news__cat {
font-size: 12px;
}
.p-section-body {
width: 100%;
}
.p-section-banner {
font-size: 18px;
padding: 15px 20px;
width: fit-content;
margin-inline: auto;
text-align: center;
letter-spacing: 0.05em;
margin-bottom: 0;
}
.p-section-banner--other-people {
margin: 0;
}
.p-section-banner--card {
font-size: 18px;
line-height: 1.6;
padding: 8px 16px;
width: auto;
margin: 0;
letter-spacing: 0.05em;
justify-content: flex-start;
}
.p-section-head__sub {
font-size: 14px;
gap: 8px;
}
.p-section-head__sub::before {
width: 4px;
height: 4px;
}
.p-section-head--card .p-section-head__title {
font-size: 14px;
line-height: 1.4;
}
.p-section-head--card .p-section-head__sub {
font-size: 12px;
line-height: 1;
}
.hm-message__visual {
flex: auto;
width: 100%;
justify-content: center;
margin-top: 0px;
}
.hm-message__content {
display: contents;
}
.hm-message__content .c-btn--arrow {
justify-content: flex-end;
}
.hm-message__content .p-section-text {
margin-bottom: 0;
}
.hm-message__content .p-section-head {
margin-bottom: 0;
order: -1;
}
.hm-about::before,
.hm-interview::before {
background-image: radial-gradient(#EBEBEB 1px, transparent 1px);
background-size: 12px 12px;
}
.hm-interview__inner .c-inner {
padding: 0;
}
.hm-interview__arrows {
gap: 24px;
margin-top: 10px;
}
.hm-interview .splide__arrow {
width: 48px;
height: 48px;
}
.hm-interview__header {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.hm-interview__desc {
font-size: 14px;
letter-spacing: 0.04em;
line-height: 2;
}
.hm-benefits__container {
flex-direction: column;
border-radius: 40px 0 40px 0;
}
.hm-benefits__inner {
padding-top: 84px;
flex-direction: column-reverse;
gap: 32px;
}
.hm-benefits__img {
width: 544px;
max-width: 155%;
margin-left: 50%;
transform: translateX(-52%);
}
.hm-benefits__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hm-benefits__content {
padding: 0;
flex: auto;
}
.hm-benefits__title {
font-size: 48px;
}
.hm-news__wrapper {
border-top-left-radius: 40px;
}
.hm-news__inner {
flex-direction: column;
padding: 80px 18px;
}
.hm-news__content {
width: 100%;
margin-top: 40px;
}
.hm-news__link-wrapper {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 16px 0;
}
.hm-news__wrapper {
border-bottom-right-radius: 40px;
}
.hm-benefits__head {
margin-bottom: 34px;
}
.l-footer__job-info {
border-top-left-radius: 40px;
}
.l-footer__job-info-inner {
flex-direction: column;
padding: 80px 18px 24px;
}
.l-footer__job-info-title {
font-size: 50px;
}
.p-page-header__inner {
flex-direction: column;
padding-top: 30px;
padding-bottom: 18px;
padding-left: 18px;
padding-right: 18px;
gap: 0;
align-items: flex-start;
width: fit-content;
margin-inline: auto;
}
.p-page-header__content {
display: contents;
}
.p-page-header .p-section-head,
.p-page-header__visual {
order: -1;
}
.p-page-header__content {
display: contents;
}
.p-page-header .p-section-banner {
margin: 0;
font-size: 20px;
padding: 6px 20px;
}
.p-page-header .p-section-banner.u-mb-0 {
margin-top: -70px;
}
.p-page-header .p-section-text {
margin-top: 14px;
}
.p-page-header__img-box {
max-width: 460px;
width: 100%;
}
.p-chat {
gap: 40px;
}
.p-chat__head {
padding: 12px 24px;
font-size: 14px;
border-radius: 24px 24px 0 24px;
}
.p-chat__body {
padding: 16px 24px;
border-radius: 24px 24px 24px 0;
}
.p-chat__head p {
font-size: 14px;
letter-spacing: 0.04em;
line-height: 2;
}
.p-chat__body p {
font-size: 14px;
letter-spacing: 0.04em;
line-height: 2;
}
.p-other-people__list {
grid-template-columns: 1fr;
gap: 40px;
}
.p-other-people__wrapper {
border-radius: 40px 0 40px 0;
/* Mimic mobile hm-news radius if needed, presumably 40px based on benefits section mobile styles or general theme */
}
.p-other-people__inner {
padding: 60px 20px;
}
.c-title-en {
font-size: 48px;
}
.c-btn--arrow {
font-size: 10px;
font-weight: 500;
gap: 7px;
}
.c-btn--arrow__circle,
.c-btn--arrow .c-btn__icon {
width: 48px;
height: 48px;
}
.c-btn--arrow__circle::before,
.c-btn--arrow .c-btn__icon::before {
width: 52px;
left: -27px;
}
}
@media not screen and (max-width: 768px) {
.l-main-sidebar-container {
min-width: 280px;
}
}
@media (max-width: 768px) {
.l-site-menu-drawer-hamburger {
--hamburger-size: 50px;
}
.c-grid[data-columns~="sm:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="sm:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="sm:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="sm:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="sm:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="sm:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="sm:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="sm:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="sm:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="sm:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="sm:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="sm:12"] {
--grid-columns: 12;
}
.c-grid[data-gap~="sm:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="sm:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="sm:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="sm:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="sm:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="sm:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="sm:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="sm:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="sm:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="sm:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="sm:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="sm:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="sm:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="sm:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="sm:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="sm:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="sm:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="sm:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="sm:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="sm:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="sm:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="sm:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="sm:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="sm:y-xxl"] {
--grid-row-gap: 4rem;
}
.c-grid__item[data-span~="sm:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="sm:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="sm:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="sm:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="sm:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="sm:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="sm:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="sm:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="sm:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="sm:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="sm:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="sm:12"] {
grid-column: span 12;
}
.c-grid[data-align~="sm:start"] {
justify-content: start;
}
.c-grid[data-align~="sm:center"] {
justify-content: center;
}
.c-grid[data-align~="sm:end"] {
justify-content: end;
}
.c-grid[data-align~="sm:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="sm:top"] {
align-items: start;
}
.c-grid[data-align~="sm:middle"] {
align-items: center;
}
.c-grid[data-align~="sm:bottom"] {
align-items: end;
}
.c-flex[data-gap~="sm:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="sm:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="sm:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="sm:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="sm:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="sm:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="sm:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="sm:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="sm:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="sm:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="sm:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="sm:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="sm:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="sm:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="sm:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="sm:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="sm:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="sm:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="sm:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="sm:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="sm:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="sm:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="sm:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="sm:y-xxl"] {
--flex-row-gap: 4rem;
}
.c-flex[data-align~="sm:col"] {
flex-direction: column;
}
.c-flex[data-align~="sm:start"] {
justify-content: start;
}
.c-flex[data-align~="sm:center"] {
justify-content: center;
}
.c-flex[data-align~="sm:end"] {
justify-content: end;
}
.c-flex[data-align~="sm:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="sm:top"] {
align-items: start;
}
.c-flex[data-align~="sm:base"] {
align-items: first baseline;
}
.c-flex[data-align~="sm:middle"] {
align-items: center;
}
.c-flex[data-align~="sm:bottom"] {
align-items: end;
}
.u-sm-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-sm-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-sm-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-sm-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-sm-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-sm-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-sm-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-sm-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-sm-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-sm-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-sm-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-sm-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-sm-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-sm-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-sm-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-sm-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-sm-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-sm-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-sm-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-sm-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-sm-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-sm-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-sm-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-sm-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-sm-mt-md {
margin-top: var(--space-md) !important;
}
.u-sm-mr-md {
margin-right: var(--space-md) !important;
}
.u-sm-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-sm-ml-md {
margin-left: var(--space-md) !important;
}
.u-sm-pt-md {
padding-top: var(--space-md) !important;
}
.u-sm-pr-md {
padding-right: var(--space-md) !important;
}
.u-sm-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-sm-pl-md {
padding-left: var(--space-md) !important;
}
.u-sm-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-sm-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-sm-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-sm-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-sm-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-sm-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-sm-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-sm-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-sm-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-sm-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-sm-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-sm-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-sm-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-sm-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-sm-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-sm-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-sm-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-sm-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-sm-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-sm-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-sm-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-sm-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-sm-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-sm-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-sm-mt-0 {
margin-top: 0 !important;
}
.u-sm-mr-0 {
margin-right: 0 !important;
}
.u-sm-mb-0 {
margin-bottom: 0 !important;
}
.u-sm-ml-0 {
margin-left: 0 !important;
}
.u-sm-pt-0 {
padding-top: 0 !important;
}
.u-sm-pr-0 {
padding-right: 0 !important;
}
.u-sm-pb-0 {
padding-bottom: 0 !important;
}
.u-sm-pl-0 {
padding-left: 0 !important;
}
.u-sm-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-sm-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-sm-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-sm-fz-md {
font-size: var(--fz-md) !important;
}
.u-sm-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-sm-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-sm-fz-xxl {
font-size: var(--fz-xxl) !important;
}
.u-sm-tal {
text-align: left !important;
}
.u-sm-tac {
text-align: center !important;
}
.u-sm-tar {
text-align: right !important;
}
.u-sm-over-only {
display: none !important;
}
}
@media not all and (max-width: 768px) {
.u-sm-over-tal {
text-align: left !important;
}
.u-sm-over-tac {
text-align: center !important;
}
.u-sm-over-tar {
text-align: right !important;
}
.u-sm-only {
display: none !important;
}
}
@media (max-width: 480px) {
.c-grid[data-columns~="xs:1"] {
--grid-columns: 1;
}
.c-grid[data-columns~="xs:2"] {
--grid-columns: 2;
}
.c-grid[data-columns~="xs:3"] {
--grid-columns: 3;
}
.c-grid[data-columns~="xs:4"] {
--grid-columns: 4;
}
.c-grid[data-columns~="xs:5"] {
--grid-columns: 5;
}
.c-grid[data-columns~="xs:6"] {
--grid-columns: 6;
}
.c-grid[data-columns~="xs:7"] {
--grid-columns: 7;
}
.c-grid[data-columns~="xs:8"] {
--grid-columns: 8;
}
.c-grid[data-columns~="xs:9"] {
--grid-columns: 9;
}
.c-grid[data-columns~="xs:10"] {
--grid-columns: 10;
}
.c-grid[data-columns~="xs:11"] {
--grid-columns: 11;
}
.c-grid[data-columns~="xs:12"] {
--grid-columns: 12;
}
.c-grid[data-gap~="xs:0"] {
--grid-row-gap: 0px;
--grid-column-gap: 0px;
}
.c-grid[data-gap~="xs:x-0"] {
--grid-column-gap: 0px;
}
.c-grid[data-gap~="xs:y-0"] {
--grid-row-gap: 0px;
}
.c-grid[data-gap~="xs:xxs"] {
--grid-row-gap: 0.5rem;
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="xs:x-xxs"] {
--grid-column-gap: 0.5rem;
}
.c-grid[data-gap~="xs:y-xxs"] {
--grid-row-gap: 0.5rem;
}
.c-grid[data-gap~="xs:xs"] {
--grid-row-gap: 1rem;
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="xs:x-xs"] {
--grid-column-gap: 1rem;
}
.c-grid[data-gap~="xs:y-xs"] {
--grid-row-gap: 1rem;
}
.c-grid[data-gap~="xs:sm"] {
--grid-row-gap: 1.5rem;
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="xs:x-sm"] {
--grid-column-gap: 1.5rem;
}
.c-grid[data-gap~="xs:y-sm"] {
--grid-row-gap: 1.5rem;
}
.c-grid[data-gap~="xs:md"] {
--grid-row-gap: 2rem;
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="xs:x-md"] {
--grid-column-gap: 2rem;
}
.c-grid[data-gap~="xs:y-md"] {
--grid-row-gap: 2rem;
}
.c-grid[data-gap~="xs:lg"] {
--grid-row-gap: 2.5rem;
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="xs:x-lg"] {
--grid-column-gap: 2.5rem;
}
.c-grid[data-gap~="xs:y-lg"] {
--grid-row-gap: 2.5rem;
}
.c-grid[data-gap~="xs:xl"] {
--grid-row-gap: 3rem;
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="xs:x-xl"] {
--grid-column-gap: 3rem;
}
.c-grid[data-gap~="xs:y-xl"] {
--grid-row-gap: 3rem;
}
.c-grid[data-gap~="xs:xxl"] {
--grid-row-gap: 4rem;
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="xs:x-xxl"] {
--grid-column-gap: 4rem;
}
.c-grid[data-gap~="xs:y-xxl"] {
--grid-row-gap: 4rem;
}
.c-grid__item[data-span~="xs:1"] {
grid-column: span 1;
}
.c-grid__item[data-span~="xs:2"] {
grid-column: span 2;
}
.c-grid__item[data-span~="xs:3"] {
grid-column: span 3;
}
.c-grid__item[data-span~="xs:4"] {
grid-column: span 4;
}
.c-grid__item[data-span~="xs:5"] {
grid-column: span 5;
}
.c-grid__item[data-span~="xs:6"] {
grid-column: span 6;
}
.c-grid__item[data-span~="xs:7"] {
grid-column: span 7;
}
.c-grid__item[data-span~="xs:8"] {
grid-column: span 8;
}
.c-grid__item[data-span~="xs:9"] {
grid-column: span 9;
}
.c-grid__item[data-span~="xs:10"] {
grid-column: span 10;
}
.c-grid__item[data-span~="xs:11"] {
grid-column: span 11;
}
.c-grid__item[data-span~="xs:12"] {
grid-column: span 12;
}
.c-grid[data-align~="xs:start"] {
justify-content: start;
}
.c-grid[data-align~="xs:center"] {
justify-content: center;
}
.c-grid[data-align~="xs:end"] {
justify-content: end;
}
.c-grid[data-align~="xs:justify"] {
justify-content: space-between;
}
.c-grid[data-align~="xs:top"] {
align-items: start;
}
.c-grid[data-align~="xs:middle"] {
align-items: center;
}
.c-grid[data-align~="xs:bottom"] {
align-items: end;
}
.c-flex[data-gap~="xs:0"] {
--flex-row-gap: 0px;
--flex-column-gap: 0px;
}
.c-flex[data-gap~="xs:x-0"] {
--flex-column-gap: 0px;
}
.c-flex[data-gap~="xs:y-0"] {
--flex-row-gap: 0px;
}
.c-flex[data-gap~="xs:xxs"] {
--flex-row-gap: 0.5rem;
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="xs:x-xxs"] {
--flex-column-gap: 0.5rem;
}
.c-flex[data-gap~="xs:y-xxs"] {
--flex-row-gap: 0.5rem;
}
.c-flex[data-gap~="xs:xs"] {
--flex-row-gap: 1rem;
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="xs:x-xs"] {
--flex-column-gap: 1rem;
}
.c-flex[data-gap~="xs:y-xs"] {
--flex-row-gap: 1rem;
}
.c-flex[data-gap~="xs:sm"] {
--flex-row-gap: 1.5rem;
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="xs:x-sm"] {
--flex-column-gap: 1.5rem;
}
.c-flex[data-gap~="xs:y-sm"] {
--flex-row-gap: 1.5rem;
}
.c-flex[data-gap~="xs:md"] {
--flex-row-gap: 2rem;
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="xs:x-md"] {
--flex-column-gap: 2rem;
}
.c-flex[data-gap~="xs:y-md"] {
--flex-row-gap: 2rem;
}
.c-flex[data-gap~="xs:lg"] {
--flex-row-gap: 2.5rem;
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="xs:x-lg"] {
--flex-column-gap: 2.5rem;
}
.c-flex[data-gap~="xs:y-lg"] {
--flex-row-gap: 2.5rem;
}
.c-flex[data-gap~="xs:xl"] {
--flex-row-gap: 3rem;
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="xs:x-xl"] {
--flex-column-gap: 3rem;
}
.c-flex[data-gap~="xs:y-xl"] {
--flex-row-gap: 3rem;
}
.c-flex[data-gap~="xs:xxl"] {
--flex-row-gap: 4rem;
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="xs:x-xxl"] {
--flex-column-gap: 4rem;
}
.c-flex[data-gap~="xs:y-xxl"] {
--flex-row-gap: 4rem;
}
.c-flex[data-align~="xs:col"] {
flex-direction: column;
}
.c-flex[data-align~="xs:start"] {
justify-content: start;
}
.c-flex[data-align~="xs:center"] {
justify-content: center;
}
.c-flex[data-align~="xs:end"] {
justify-content: end;
}
.c-flex[data-align~="xs:justify"] {
justify-content: space-between;
}
.c-flex[data-align~="xs:top"] {
align-items: start;
}
.c-flex[data-align~="xs:base"] {
align-items: first baseline;
}
.c-flex[data-align~="xs:middle"] {
align-items: center;
}
.c-flex[data-align~="xs:bottom"] {
align-items: end;
}
.u-xs-mt-xxs {
margin-top: var(--space-xxs) !important;
}
.u-xs-mr-xxs {
margin-right: var(--space-xxs) !important;
}
.u-xs-mb-xxs {
margin-bottom: var(--space-xxs) !important;
}
.u-xs-ml-xxs {
margin-left: var(--space-xxs) !important;
}
.u-xs-pt-xxs {
padding-top: var(--space-xxs) !important;
}
.u-xs-pr-xxs {
padding-right: var(--space-xxs) !important;
}
.u-xs-pb-xxs {
padding-bottom: var(--space-xxs) !important;
}
.u-xs-pl-xxs {
padding-left: var(--space-xxs) !important;
}
.u-xs-mt-xs {
margin-top: var(--space-xs) !important;
}
.u-xs-mr-xs {
margin-right: var(--space-xs) !important;
}
.u-xs-mb-xs {
margin-bottom: var(--space-xs) !important;
}
.u-xs-ml-xs {
margin-left: var(--space-xs) !important;
}
.u-xs-pt-xs {
padding-top: var(--space-xs) !important;
}
.u-xs-pr-xs {
padding-right: var(--space-xs) !important;
}
.u-xs-pb-xs {
padding-bottom: var(--space-xs) !important;
}
.u-xs-pl-xs {
padding-left: var(--space-xs) !important;
}
.u-xs-mt-sm {
margin-top: var(--space-sm) !important;
}
.u-xs-mr-sm {
margin-right: var(--space-sm) !important;
}
.u-xs-mb-sm {
margin-bottom: var(--space-sm) !important;
}
.u-xs-ml-sm {
margin-left: var(--space-sm) !important;
}
.u-xs-pt-sm {
padding-top: var(--space-sm) !important;
}
.u-xs-pr-sm {
padding-right: var(--space-sm) !important;
}
.u-xs-pb-sm {
padding-bottom: var(--space-sm) !important;
}
.u-xs-pl-sm {
padding-left: var(--space-sm) !important;
}
.u-xs-mt-md {
margin-top: var(--space-md) !important;
}
.u-xs-mr-md {
margin-right: var(--space-md) !important;
}
.u-xs-mb-md {
margin-bottom: var(--space-md) !important;
}
.u-xs-ml-md {
margin-left: var(--space-md) !important;
}
.u-xs-pt-md {
padding-top: var(--space-md) !important;
}
.u-xs-pr-md {
padding-right: var(--space-md) !important;
}
.u-xs-pb-md {
padding-bottom: var(--space-md) !important;
}
.u-xs-pl-md {
padding-left: var(--space-md) !important;
}
.u-xs-mt-lg {
margin-top: var(--space-lg) !important;
}
.u-xs-mr-lg {
margin-right: var(--space-lg) !important;
}
.u-xs-mb-lg {
margin-bottom: var(--space-lg) !important;
}
.u-xs-ml-lg {
margin-left: var(--space-lg) !important;
}
.u-xs-pt-lg {
padding-top: var(--space-lg) !important;
}
.u-xs-pr-lg {
padding-right: var(--space-lg) !important;
}
.u-xs-pb-lg {
padding-bottom: var(--space-lg) !important;
}
.u-xs-pl-lg {
padding-left: var(--space-lg) !important;
}
.u-xs-mt-xl {
margin-top: var(--space-xl) !important;
}
.u-xs-mr-xl {
margin-right: var(--space-xl) !important;
}
.u-xs-mb-xl {
margin-bottom: var(--space-xl) !important;
}
.u-xs-ml-xl {
margin-left: var(--space-xl) !important;
}
.u-xs-pt-xl {
padding-top: var(--space-xl) !important;
}
.u-xs-pr-xl {
padding-right: var(--space-xl) !important;
}
.u-xs-pb-xl {
padding-bottom: var(--space-xl) !important;
}
.u-xs-pl-xl {
padding-left: var(--space-xl) !important;
}
.u-xs-mt-xxl {
margin-top: var(--space-xxl) !important;
}
.u-xs-mr-xxl {
margin-right: var(--space-xxl) !important;
}
.u-xs-mb-xxl {
margin-bottom: var(--space-xxl) !important;
}
.u-xs-ml-xxl {
margin-left: var(--space-xxl) !important;
}
.u-xs-pt-xxl {
padding-top: var(--space-xxl) !important;
}
.u-xs-pr-xxl {
padding-right: var(--space-xxl) !important;
}
.u-xs-pb-xxl {
padding-bottom: var(--space-xxl) !important;
}
.u-xs-pl-xxl {
padding-left: var(--space-xxl) !important;
}
.u-xs-mt-0 {
margin-top: 0 !important;
}
.u-xs-mr-0 {
margin-right: 0 !important;
}
.u-xs-mb-0 {
margin-bottom: 0 !important;
}
.u-xs-ml-0 {
margin-left: 0 !important;
}
.u-xs-pt-0 {
padding-top: 0 !important;
}
.u-xs-pr-0 {
padding-right: 0 !important;
}
.u-xs-pb-0 {
padding-bottom: 0 !important;
}
.u-xs-pl-0 {
padding-left: 0 !important;
}
.u-xs-fz-xs {
font-size: var(--fz-xs) !important;
}
.u-xs-fz-sm {
font-size: var(--fz-sm) !important;
}
.u-xs-fz-normal {
font-size: var(--fz-normal) !important;
}
.u-xs-fz-md {
font-size: var(--fz-md) !important;
}
.u-xs-fz-lg {
font-size: var(--fz-lg) !important;
}
.u-xs-fz-xl {
font-size: var(--fz-xl) !important;
}
.u-xs-fz-xxl {
font-size: var(--fz-xxl) !important;
}
.u-xs-tal {
text-align: left !important;
}
.u-xs-tac {
text-align: center !important;
}
.u-xs-tar {
text-align: right !important;
}
.u-xs-over-only {
display: none !important;
}
}
@media not all and (max-width: 480px) {
.u-xs-over-tal {
text-align: left !important;
}
.u-xs-over-tac {
text-align: center !important;
}
.u-xs-over-tar {
text-align: right !important;
}
.u-xs-only {
display: none !important;
}
}