@charset "UTF-8"; /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @keyframes splide-loading { 0% { transform: rotate(0); } to { transform: rotate(1turn); } } .splide__track--draggable { -webkit-touch-callout: none; -webkit-user-select: none; -ms-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: -ms-flexbox; display: flex; height: 100%; margin: 0 !important; padding: 0 !important; } .splide.is-initialized:not(.is-active) .splide__list { display: block; } .splide__pagination { -ms-flex-align: center; align-items: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; 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; -ms-flex-negative: 0; 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; } /* -------------------------------------------- FOUNDATION -------------------------------------------- */ /* -------------------------------------------- MAP GET -------------------------------------------- */ /* -------------------------------------------- DIV -------------------------------------------- */ /* -------------------------------------------- UPPER CASE -------------------------------------------- */ /* -------------------------------------------- LOWER CASE -------------------------------------------- */ /* -------------------------------------------- NTH -------------------------------------------- */ /* -------------------------------------------- LENGTH -------------------------------------------- */ /* -------------------------------------------- TYPE OF -------------------------------------------- */ /* -------------------------------------------- MEDIA QUERY -------------------------------------------- */ /* -------------------------------------------- MEDIA QUERY -------------------------------------------- */ /* -------------------------------------------- COLOR -------------------------------------------- */ /* -------------------------------------------- BASE -------------------------------------------- */ /* -------------------------------------------- GUTTER & INNER -------------------------------------------- */ /* -------------------------------------------- FONT -------------------------------------------- */ /* -------------------------------------------- TRANSITION -------------------------------------------- */ /* -------------------------------------------- BORDER RADIUS -------------------------------------------- */ /* -------------------------------------------- MARGIN -------------------------------------------- */ /* -------------------------------------------- UNITLESS -------------------------------------------- */ /* -------------------------------------------- % -------------------------------------------- */ /* -------------------------------------------- VW -------------------------------------------- */ /* -------------------------------------------- EM -------------------------------------------- */ /* -------------------------------------------- FONT SIZE -------------------------------------------- */ /* -------------------------------------------- FONT FAMIRY -------------------------------------------- */ /* -------------------------------------------- FONT WEIGHT -------------------------------------------- */ /* -------------------------------------------- COLOR -------------------------------------------- */ /* -------------------------------------------- GUTTER -------------------------------------------- */ /* -------------------------------------------- FONT-SIZE WIDTH -------------------------------------------- */ /* -------------------------------------------- INNER -------------------------------------------- */ /* -------------------------------------------- BORDER RADIUS -------------------------------------------- */ /* -------------------------------------------- DURATION -------------------------------------------- */ /* -------------------------------------------- SCROLLBAR -------------------------------------------- */ /* -------------------------------------------- TYPING CHILD SPAN -------------------------------------------- */ /* -------------------------------------------- BORDER GUTTER -------------------------------------------- */ /* -------------------------------------------- KEYFRAMES -------------------------------------------- */ @keyframes blink { 50% { background-color: transparent; } } @keyframes floatUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(2.5rem); } 100% { transform: translateY(0); } } @keyframes floatUpDownStrong { 0% { transform: translateY(0); } 50% { transform: translateY(5rem); } 100% { transform: translateY(0); } } @keyframes floatUpDownWeek { 0% { transform: translateY(0); } 50% { transform: translateY(1.5rem); } 100% { transform: translateY(0); } } /* -------------------------------------------- BASE -------------------------------------------- */ html { overscroll-behavior: none; font-size: calc(62.5% + 2.5 * (100vw - 375px) / 201); scroll-padding-top: 12rem; text-size-adjust: 100%; } @media (width < 375px) { html { font-size: 2.6666666667vw; } } @media (width >= 576px) { html { font-size: calc(62.5% + 2 * (100vw - 576px) / 192); } } @media (width >= 768px) { html { font-size: calc(62.5% + 2 * (100vw - 768px) / 257); } } @media (width >= 1025px) { html { font-size: calc(50% + 1.5 * (100vw - 1025px) / 255); } } @media (width >= 1280px) { html { font-size: calc(56.25% + 1 * (100vw - 1280px) / 160); } } @media (width >= 1440px) { html { font-size: 62.5%; } } @media (width >= 1920px) { html { font-size: 0.5208333333vw; } } body { font-family: "Noto Sans JP", sans-serif; font-size: 1.3rem; font-weight: 400; font-kerning: normal; line-height: 1.75; color: #212121; letter-spacing: 0.06em; word-wrap: break-word; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } @media (width >= 768px) and (width < 1025px) { body { font-size: 1.4rem; } } *, *::before, *::after { box-sizing: border-box; } main, picture, object { display: block; } img { display: block; max-width: 100%; height: auto; } table { width: 100%; } a, button { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a { color: currentcolor; text-decoration: none; outline: none; transition: all 0.3s; } button { padding: 0; color: currentcolor; cursor: pointer; outline: none; background: transparent; border: none; transition: all 0.3s; } svg { display: block; fill: currentcolor; } input:not([type=checkbox], [type=radio]), select, textarea { max-width: 100%; outline: none; } select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------- LAYOUT -------------------------------------------- */ /* -------------------------------------------- CONTENT -------------------------------------------- */ .l-content { position: relative; } .l-content__lineFrame { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: 5.3333333333vw repeat(2, minmax(0, 1fr)) 5.3333333333vw; } @media (width >= 1025px) { .l-content__lineFrame { grid-template-columns: 6.25vw repeat(4, minmax(0, 1fr)) 6.25vw; } } .l-content__line { border-left: 1px solid #f2f3f4; } .l-content__line:first-child { border-right: 1px solid #f2f3f4; } .l-content__line:nth-child(-n+2) { border-left: none; } .l-content__headerFrame { position: absolute; top: 0; right: 0; left: 0; z-index: 100; } .l-content__headerFrame.is-fixed { position: fixed; translate: 0 calc(-100% - 1px); } /* -------------------------------------------- OBJECT -------------------------------------------- */ /* -------------------------------------------- ANCHOR -------------------------------------------- */ .c-anc { display: inline-block; text-decoration: underline; text-underline-offset: 0.7rem; } .c-anc:hover { text-decoration: none; } /* -------------------------------------------- ARROW SMALL -------------------------------------------- */ .c-btnArrowSm { --arrowHeight: 3.6rem; position: relative; z-index: 1; display: flex; align-items: center; width: fit-content; height: var(--arrowHeight); padding: 0.5rem 4.5rem; } @media (hover: hover) { .c-btnArrowSm:hover { color: #fff; } .c-btnArrowSm:hover .c-btnArrowSm__arrowFrame { width: 100%; background-color: #212121; } } .c-btnArrowSm__arrowFrame { position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: var(--arrowHeight); border: 1px solid color-mix(in srgb, #212121 90%, transparent); border-radius: 999px; transition: 0.3s; } .c-btnArrowSm__arrow { position: absolute; top: 0; right: 1.2rem; bottom: 0; width: 0.9rem; height: 0.9rem; margin: auto; transition: fill 0.3s; } .c-btnArrowSm__text { letter-spacing: 0.08em; } @media (width >= 1025px) { .c-btnArrowSm__text { font-size: max(1.0769230769em, 10px); } } @media (hover: hover) { .c-btnArrowSm.--white:hover { color: #ff9d00; } .c-btnArrowSm.--white:hover .c-btnArrowSm__arrowFrame { background-color: #fff; } } .c-btnArrowSm.--white .c-btnArrowSm__arrowFrame { border: 1px solid color-mix(in srgb, #fff 90%, transparent); } /* -------------------------------------------- ARROW -------------------------------------------- */ .c-btnArrow { --arrowHeight: 6rem; position: relative; z-index: 1; display: flex; align-items: center; width: fit-content; height: var(--arrowHeight); padding: 1rem 7.5rem; } @media (width >= 1025px) { .c-btnArrow { --arrowHeight: 8rem; padding: 1rem 10rem; } } @media (hover: hover) { .c-btnArrow:hover { color: #fff; } .c-btnArrow:hover .c-btnArrow__arrowFrame { width: 100%; background-color: #212121; } } .c-btnArrow__arrowFrame { position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: var(--arrowHeight); border: 1px solid color-mix(in srgb, #212121 90%, transparent); border-radius: 999px; transition: 0.3s; } .c-btnArrow__arrow { position: absolute; top: 0; right: 2.5rem; bottom: 0; width: 1rem; height: 0.8rem; margin: auto; transition: fill 0.3s; } @media (width >= 1025px) { .c-btnArrow__arrow { right: 3.2rem; width: 1.4rem; height: 1.2rem; } } .c-btnArrow__text { letter-spacing: 0.08em; } @media (width >= 1025px) { .c-btnArrow__text { font-size: max(1.1538461538em, 10px); } } @media (hover: hover) { .c-btnArrow.--white:hover { color: #ff9d00; } .c-btnArrow.--white:hover .c-btnArrow__arrowFrame { background-color: #fff; } } .c-btnArrow.--white .c-btnArrow__arrowFrame { border: 1px solid color-mix(in srgb, #fff 90%, transparent); } /* -------------------------------------------- ARROW FILL -------------------------------------------- */ .c-btnArrowFill { position: relative; display: block; width: 33.5rem; max-width: 100%; padding: 2rem 6.5rem; font-size: max(1.1538461538em, 10px); font-weight: 700; line-height: 1.2; color: #fff; text-align: center; letter-spacing: 0.08em; background-color: #ff9d00; border: 1px solid #ff9d00; border-radius: 999px; } @media (hover: hover) { .c-btnArrowFill:hover { color: #ff9d00; background-color: #fff; } } @media (width >= 1025px) { .c-btnArrowFill { width: 34rem; padding: 2.9rem 7rem; font-size: max(1.2307692308em, 10px); } } .c-btnArrowFill__arrowFrame { position: absolute; top: 0; right: 2rem; bottom: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: auto; border: 1px solid currentColor; border-radius: inherit; } @media (width >= 1025px) { .c-btnArrowFill__arrowFrame { width: 3.6rem; height: 3.6rem; } } .c-btnArrowFill__arrow { width: 0.8rem; height: 0.8rem; } /* -------------------------------------------- INNER -------------------------------------------- */ .c-inner { width: 100%; padding-right: 5.3333333333vw; padding-left: 5.3333333333vw; margin-right: auto; margin-left: auto; } @media (width >= 1025px) { .c-inner { max-width: calc(140rem + 6.25vw * 2); padding-right: 6.25vw; padding-left: 6.25vw; } .c-inner.--xxs { max-width: calc(90rem + 6.25vw * 2); } .c-inner.--xs { max-width: calc(116rem + 6.25vw * 2); } .c-inner.--sm { max-width: calc(128rem + 6.25vw * 2); } .c-inner.--full { max-width: 100%; } .c-inner.--gutter0 { max-width: 140rem; } .c-inner.--gutter0.--xxs { max-width: 90rem; } .c-inner.--gutter0.--xs { max-width: 116rem; } .c-inner.--gutter0.--sm { max-width: 128rem; } } .c-inner.--gutter0 { padding-right: 0; padding-left: 0; } /* -------------------------------------------- IFRAME RESPONSIVE -------------------------------------------- */ .c-iframe { position: relative; height: 0; padding-top: 65%; overflow: hidden; } @media (width >= 768px) { .c-iframe { padding-top: 52.5%; } } .c-iframe.-video { padding-top: 56.25%; } .c-iframe iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /* -------------------------------------------- IMAGE -------------------------------------------- */ .c-img { display: block; max-width: 100%; height: auto; } .c-img.--full { width: 100%; } .c-img.--cover, .c-img.--contain { width: 100%; height: 100%; object-fit: cover; } .c-img.--contain { object-fit: contain; } /* -------------------------------------------- LABEL -------------------------------------------- */ .c-label { display: block; width: fit-content; padding: 0.2rem 1rem 0.3rem; font-size: max(0.7692307692em, 10px); line-height: 1; color: #fff; letter-spacing: 0.08em; background-color: #ff9d00; border-radius: 999px; } @media (width >= 1025px) { .c-label { padding: 0.4rem 1.5rem 0.5rem; font-size: max(1em, 10px); } } .c-label > span { display: block; scale: 0.9; } @media (width >= 1025px) { .c-label > span { scale: 1; } } /* -------------------------------------------- LINK -------------------------------------------- */ .c-link { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; line-height: 1.5; } @media (hover: hover) { .c-link__anc:hover { text-decoration: underline; } } /* -------------------------------------------- LABEL -------------------------------------------- */ .c-linkLabel { display: flex; gap: 0.5rem; } .c-linkLabel__anc { display: block; padding: 0.2rem 0.8rem 0.3rem; font-size: max(0.7692307692em, 10px); line-height: 1; color: #fff; background-color: #212121; border-radius: 999px; } @media (hover: hover) { .c-linkLabel__anc:hover { background-color: #454545; } } @media (width >= 1025px) { .c-linkLabel__anc { padding: 0.7rem 1.6rem; font-size: max(1.0769230769em, 10px); } } .c-linkLabel__anc > span { display: block; scale: 0.9; } @media (width >= 1025px) { .c-linkLabel__anc > span { scale: 1; } } .c-linkLabel.--white .c-linkLabel__anc { color: #212121; background-color: #fff; } .c-linkLabel.--whiteBd .c-linkLabel__anc { color: #fff; background-color: transparent; border: 1px solid #fff; } @media (width >= 1025px) { .c-linkLabel.--smPC .c-linkLabel__anc { padding: 0.4rem 1.2rem; font-size: max(0.8461538462em, 10px); } } /* -------------------------------------------- HASHTAG -------------------------------------------- */ .c-linkHash { display: flex; flex-wrap: wrap; gap: 1rem 0.8rem; font-size: max(0.8461538462em, 10px); line-height: 1.5; } @media (width >= 1025px) { .c-linkHash { gap: 1.2rem 1rem; font-size: max(1.0769230769em, 10px); } } .c-linkHash__anc { text-decoration: underline; text-underline-offset: 0.2rem; } @media (hover: hover) { .c-linkHash__anc:hover { text-decoration: none; } } /* -------------------------------------------- LIST -------------------------------------------- */ .c-list__item { position: relative; padding-left: 1.4em; line-height: 1.5; } .c-list__item:not(:first-child) { margin-top: 0.6rem; } .c-list__head { position: absolute; left: 0; } .c-list.--fzSm { font-size: max(0.8461538462em, 10px); } @media (width >= 1025px) { .c-list.--fzSm { font-size: max(0.8125em, 10px); } } /* -------------------------------------------- DOT -------------------------------------------- */ .c-listDot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7692307692em 1.1538461538em; } @media (width >= 768px) { .c-listDot { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (width >= 1025px) { .c-listDot { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .c-listDot__item { position: relative; padding-left: 0.7692307692em; line-height: 1.5; } .c-listDot__item::before { position: absolute; top: 0; left: -0.3em; content: "・"; } /* -------------------------------------------- CIRCLE -------------------------------------------- */ .c-listCirc__item { position: relative; padding-left: 1.2307692308em; line-height: 1.5; } .c-listCirc__item + .c-listCirc__item { margin-top: 0.6923076923em; } .c-listCirc__item::before { position: absolute; top: 0.5em; left: 0; width: 0.6153846154em; height: 0.6153846154em; content: ""; background-color: #ff9d00; border-radius: 50%; } /* -------------------------------------------- LABEL -------------------------------------------- */ .c-listLabel { display: flex; gap: 0.5rem; } .c-listLabel__item { padding: 0.2rem 0.8rem 0.3rem; font-size: max(0.7692307692em, 10px); line-height: 1; color: #fff; background-color: #212121; border-radius: 999px; } @media (width >= 1025px) { .c-listLabel__item { padding: 0.7rem 1.6rem; font-size: max(1.0769230769em, 10px); } } .c-listLabel__item > span { display: block; scale: 0.9; } @media (width >= 1025px) { .c-listLabel__item > span { scale: 1; } } .c-listLabel.--white .c-listLabel__item { color: #212121; background-color: #fff; } .c-listLabel.--whiteBd .c-listLabel__item { color: #fff; background-color: transparent; border: 1px solid #fff; } @media (width >= 1025px) { .c-listLabel.--smPC .c-listLabel__item { padding: 0.4rem 1.2rem; font-size: max(0.8461538462em, 10px); } } /* -------------------------------------------- DEFINE -------------------------------------------- */ .c-listDefine__item { display: flex; } .c-listDefine__item + * { margin-top: 0.8rem; } @media (width >= 1025px) { .c-listDefine__item + * { margin-top: 1rem; } } .c-listDefine__label { position: relative; width: 8rem; padding-right: 1rem; font-size: max(0.8461538462em, 10px); line-height: 1.5; letter-spacing: 0; } @media (width >= 768px) { .c-listDefine__label { width: 8.5rem; } } @media (width >= 1025px) { .c-listDefine__label { width: 11rem; padding-right: 2rem; font-size: max(1.0769230769em, 10px); letter-spacing: 0.04em; } } .c-listDefine__label::before { position: absolute; top: 0; right: 0.2rem; content: "："; } @media (width >= 1025px) { .c-listDefine__label::before { right: 0.5rem; } } @media (width >= 1025px) { .c-listDefine__desc.--label > * { translate: 0 -10%; } } /* -------------------------------------------- DIFINE BORDER -------------------------------------------- */ @media (width >= 1025px) { .c-listDefineBd { font-size: max(1.2307692308em, 10px); } } .c-listDefineBd__item { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 2rem; padding: 3rem 0; border-top: 1px solid #eceeef; } @media (width >= 1025px) { .c-listDefineBd__item { grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem; padding: 4rem 0; } } .c-listDefineBd__item::before { position: absolute; top: 0; left: 0; width: 5rem; height: 2px; content: ""; background-color: #ff9d00; } @media (width >= 1025px) { .c-listDefineBd__item::before { width: 6rem; } } .c-listDefineBd__title { font-weight: 700; } .c-listDefineBd__contFrame { line-height: 1.7692307692; } /* -------------------------------------------- BASE -------------------------------------------- */ .c-modal { position: fixed; inset: 0; z-index: 999; display: none; overflow: auto; overscroll-behavior: none; scrollbar-width: none; } .c-modal::-webkit-scrollbar { display: none; } .c-modal__overlay { position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(100% + 1px); } .c-modal__inner { display: contents; } .c-modal__item { position: absolute; inset: auto 0 200%; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; margin: 0 auto; } .c-modal__item.is-open { inset: 0; } .c-modal__itemCloseBtnFrame { position: relative; z-index: 3; height: 0; } .c-modal__itemInner { position: relative; z-index: 2; max-height: 100%; overflow: auto; overscroll-behavior: none; scrollbar-width: none; } .c-modal__itemInner::-webkit-scrollbar { display: none; } /* -------------------------------------------- CUSTOMIZE -------------------------------------------- */ /* stylelint-disable no-duplicate-selectors */ html.is-modalOpen .c-modal .c-modal__overlay { opacity: 1; } html.is-modalOpen .c-modal .c-modal__item > * { opacity: 1; } .c-modal__overlay { opacity: 0; backdrop-filter: blur(0.4rem); transition: all 0.3s; } @media (width >= 1025px) { .c-modal__overlay { backdrop-filter: blur(0.8rem); } } .c-modal__closeBtn { position: fixed; top: 1rem; right: 1rem; z-index: 3; width: 3.5rem; height: 3.5rem; } @media (hover: hover) { .c-modal__closeBtn:hover { opacity: 0.7; } } @media (width >= 1025px) { .c-modal__closeBtn { top: 3rem; right: 3rem; width: 6rem; height: 6rem; } } .c-modal__closeBtn::before, .c-modal__closeBtn::after { position: absolute; inset: 0; width: 100%; height: 1px; margin: auto; content: ""; background-color: #fff; rotate: 45deg; } .c-modal__closeBtn::after { rotate: -45deg; } .c-modal__item { padding: 5rem calc(5.3333333333vw / 2); } @media (width >= 1025px) { .c-modal__item { max-width: calc(90rem + 6.25vw * 2); padding: 12rem 6.25vw; } } .c-modal__item > * { opacity: 0; transition: opacity 0.3s; } .c-modal__itemCloseBtn { position: absolute; top: 0; right: 0; width: 4rem; height: 4rem; background-color: #eceeef; border-radius: 999px; translate: 10% -25%; } .c-modal__itemCloseBtn::before, .c-modal__itemCloseBtn::after { position: absolute; inset: 0; width: 1.3rem; height: 1px; margin: auto; content: ""; background-color: #212121; rotate: 45deg; } .c-modal__itemCloseBtn::after { rotate: -45deg; } .c-modal__itemInner { background-color: #fff; border-radius: 2rem; box-shadow: 0 0 2.3rem 0 rgba(0, 0, 0, 0.12); } @media (width >= 1025px) { .c-modal__itemInner { border-radius: 2.5rem; } } /* stylelint-enable no-duplicate-selectors */ /* -------------------------------------------- TEXT FRAME -------------------------------------------- */ .c-txtFrame { display: grid; gap: 2rem; line-height: 1.9230769231; } @media (width >= 1025px) { .c-txtFrame { gap: 4.5rem; font-size: max(1.2307692308em, 10px); line-height: 2.25; } } /* -------------------------------------------- TITLE -------------------------------------------- */ .c-ttl { font-size: max(1.9230769231em, 10px); font-weight: 700; line-height: 1.32; } @media (width >= 1025px) { .c-ttl { font-size: max(2.4615384615em, 10px); font-weight: 600; line-height: 1.625; } } /* -------------------------------------------- TYPING -------------------------------------------- */ .c-titleTyping { --cap: 0.11em; --capAdjust: 0rem; position: relative; z-index: 1; } @media (width >= 1025px) { .c-titleTyping { --cap: 0.13em; --capAdjust: 0.1rem; } } .c-titleTyping::before, .c-titleTyping::after { position: relative; z-index: -4; display: block; width: 100%; height: 1px; content: ""; } .c-titleTyping__main { margin-top: calc(var(--cap) * -1); margin-bottom: calc((1lh - 1cap - var(--cap)) * -1 - var(--capAdjust)); font-family: "Hind", sans-serif; font-size: max(4.6153846154em, 10px); font-weight: 500; line-height: 1.1083333333; letter-spacing: 0; translate: -0.07em; position: relative; } .c-titleTyping__main > span::after { display: inline-block; width: 0.05em; height: 1.3cap; margin-left: 0.2em; vertical-align: -0.15cap; content: ""; background-color: currentcolor; animation: blink 1.2s infinite step-end; } .c-titleTyping__main > span[aria-hidden] { visibility: hidden; opacity: 0; } .c-titleTyping__main > span[data-text] { position: absolute; top: 0; left: 0; } .c-titleTyping__main > span[data-text][data-en]::after { height: 1cap; vertical-align: initial; } @media (width < 768px) { .c-titleTyping__main.--smSP { font-size: max(4.1538461538em, 10px); } } @media (width >= 1025px) { .c-titleTyping__main { font-size: max(9.2307692308em, 10px); } } .c-titleTyping__main > span > span { font-size: 95%; } .c-titleTyping__sup { top: calc(100% + 1rem); right: 0; left: 0; font-size: max(0.9230769231em, 10px); font-weight: 600; line-height: 1.9166666667; letter-spacing: 0.08em; position: absolute; } .c-titleTyping__sup > span::after { display: inline-block; width: 0.05em; height: 1.3cap; margin-left: 0.2em; vertical-align: -0.15cap; content: ""; background-color: currentcolor; animation: blink 1.2s infinite step-end; } .c-titleTyping__sup > span[aria-hidden] { visibility: hidden; opacity: 0; } .c-titleTyping__sup > span[data-text] { position: absolute; top: 0; left: 0; } .c-titleTyping__sup > span[data-text][data-en]::after { height: 1cap; vertical-align: initial; } @media (width >= 1025px) { .c-titleTyping__sup { font-size: max(1.3846153846em, 10px); } } .c-titleTyping.--xs .c-titleTyping__main { font-size: max(3.4615384615em, 10px); } @media (width >= 1025px) { .c-titleTyping.--xs .c-titleTyping__main { font-size: max(6.4615384615em, 10px); } } .c-titleTyping.--border::before, .c-titleTyping.--border::after, .c-titleTyping.--borderSubMv::before, .c-titleTyping.--borderSubMv::after, .c-titleTyping.--borderRecruitMv::before, .c-titleTyping.--borderRecruitMv::after, .c-titleTyping.--borderRight::before, .c-titleTyping.--borderRight::after { width: 200vw; background-color: #f2f3f4; translate: -50vw; } @media (width >= 1025px) { .c-titleTyping.--borderRecruitMv::before, .c-titleTyping.--borderRecruitMv::after { visibility: hidden; } } .c-titleTyping.--borderSubMv { z-index: unset; } .c-titleTyping.--borderSubMv::before, .c-titleTyping.--borderSubMv::after { border-color: #f3ecd2; } .c-titleTyping.--borderRight::before, .c-titleTyping.--borderRight::after { width: auto; margin-right: -5.3333333333vw; margin-left: -5.3333333333vw; translate: 0; } @media (width >= 1025px) { .c-titleTyping.--borderRight::before, .c-titleTyping.--borderRight::after { margin-left: 0; } } /* -------------------------------------------- BREADCRUMB -------------------------------------------- */ .p-breadcrumb { overflow: auto; overscroll-behavior: none; scrollbar-width: none; } .p-breadcrumb::-webkit-scrollbar { display: none; } .p-breadcrumb__list { display: flex; gap: 2.5rem; width: fit-content; font-size: max(0.7692307692em, 10px); line-height: 1.1; white-space: nowrap; } @media (width >= 1025px) { .p-breadcrumb__list { font-size: max(1.0769230769em, 10px); } } .p-breadcrumb__item + .p-breadcrumb__item { position: relative; } .p-breadcrumb__item + .p-breadcrumb__item::before { position: absolute; top: 0; bottom: 0; left: -1.8rem; display: block; width: 1rem; height: 1px; margin: auto; content: ""; background-color: #212121; } .p-breadcrumb__item:last-child { pointer-events: none; } .p-breadcrumb__anc { display: block; padding: 0.5rem 0; } @media (hover: hover) { .p-breadcrumb__anc:hover { text-decoration: underline; } } /* -------------------------------------------- CV -------------------------------------------- */ .p-footerCv { padding: 10rem 0; overflow: hidden; } @media (width >= 1025px) { .p-footerCv { padding: 15rem 0; } } .p-footerCv__anc { position: relative; z-index: 1; display: block; padding: 5rem 2rem 3rem; background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } @media (hover: hover) { .p-footerCv__anc:hover { z-index: 1; box-shadow: 0 0 2.3rem 0 rgba(0, 0, 0, 0.12); } .p-footerCv__anc:hover:not(.--entry) .p-footerCv__arrowFrame { background-color: #ff9d00; border-color: #ff9d00; scale: 1.25; } .p-footerCv__anc:hover:not(.--entry) .p-footerCv__arrow { color: #fff; } } @media (width >= 1025px) { .p-footerCv__anc { padding: 6rem 16rem 5.5rem; } } .p-footerCv__anc.--entry { background-color: #f8f8f8; } @media (width < 1025px) { .p-footerCv__anc.--entry { margin: 0 calc(-5.3333333333vw / 2); color: #fff; border-radius: 2rem; } .p-footerCv__anc.--entry .p-footerCv__bgPic { opacity: 1; } .p-footerCv__anc.--entry .p-footerCv__title, .p-footerCv__anc.--entry .p-footerCv__textFrame { text-shadow: 0 0 6rem rgba(0, 0, 0, 0.9), 0 0 4rem rgba(0, 0, 0, 0.9); } .p-footerCv__anc.--entry .p-footerCv__arrowFrame { border-color: #fff; } } @media (width >= 1025px) { .p-footerCv__anc.--entry { padding: 13rem 16rem; margin: 0 -5vw; border-radius: 2.5rem; } } @media (width >= 1025px) and (hover: hover) { .p-footerCv__anc.--entry:hover { color: #fff; } .p-footerCv__anc.--entry:hover .p-footerCv__lottieFrame { opacity: 1; } .p-footerCv__anc.--entry:hover .p-footerCv__bgPic { opacity: 1; } .p-footerCv__anc.--entry:hover .p-footerCv__title, .p-footerCv__anc.--entry:hover .p-footerCv__textFrame { text-shadow: 0 0 5rem rgba(0, 0, 0, 0.9); } .p-footerCv__anc.--entry:hover .p-footerCv__arrowFrame { border-color: #fff; } } @media (width >= 1025px) { .p-footerCv__anc.--entry .p-footerCv__lottieFrame { opacity: 0; } .p-footerCv__anc.--entry .p-footerCv__text { font-size: max(1.5384615385em, 10px); } } .p-footerCv__lottieFrame { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .p-footerCv__lottieItem { position: absolute; width: 31.5rem; height: auto; aspect-ratio: 625/375; } @media (width >= 1025px) { .p-footerCv__lottieItem { width: 62.5rem; } } .p-footerCv__lottieItem:first-child { top: 0; left: 0; translate: -13.6% -32%; } @media (width >= 1025px) { .p-footerCv__lottieItem:first-child { translate: -14.4% -13.3333333333%; } } .p-footerCv__lottieItem:last-child { right: 0; bottom: 0; scale: -1 -1; translate: 13.6% 32%; } @media (width >= 1025px) { .p-footerCv__lottieItem:last-child { translate: 14.4% 13.3333333333%; } } .p-footerCv__bgPic { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; opacity: 0; transition: opacity 0.3s; } .p-footerCv__bgPic::after { position: absolute; inset: 0; content: ""; background-color: rgba(0, 0, 0, 0.25); } .p-footerCv__title { margin-bottom: 2.5rem; text-align: center; } @media (width >= 1025px) { .p-footerCv__title { margin-bottom: 4rem; } } .p-footerCv__titleMain { font-family: "Hind", sans-serif; font-size: max(3.6153846154em, 10px); font-weight: 500; line-height: 1; } @media (width >= 1025px) { .p-footerCv__titleMain { font-size: max(6.4615384615em, 10px); } } .p-footerCv__titleSup { margin-top: 0.5rem; font-size: max(0.9230769231em, 10px); font-weight: 600; line-height: 1; } @media (width >= 1025px) { .p-footerCv__titleSup { font-size: max(1.3846153846em, 10px); } } .p-footerCv__textFrame { display: grid; gap: 1rem; text-align: center; } .p-footerCv__text { font-size: max(0.9230769231em, 10px); line-height: 1.5833333333; letter-spacing: 0.04em; } @media (width >= 1025px) { .p-footerCv__text { font-size: max(1.2307692308em, 10px); } } .p-footerCv__arrowFrame { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; margin: 3rem auto 0; border: 1px solid rgba(33, 33, 33, 0.9); border-radius: 999px; transition: 0.3s; } @media (width >= 1025px) { .p-footerCv__arrowFrame { position: absolute; top: 0; right: 5rem; bottom: 0; width: 8rem; height: 8rem; margin: auto; } } .p-footerCv__arrow { width: 1rem; height: 8rem; transition: fill 0.3s; } /* -------------------------------------------- LOOP -------------------------------------------- */ .p-footerLoop { --gap: 4rem; padding-bottom: 4rem; } @media (width >= 1025px) { .p-footerLoop { --gap: 8rem; padding-bottom: 5rem; } } .p-footerLoop__splideSlide { display: flex; gap: var(--gap); align-items: center; width: fit-content; padding-right: var(--gap); } .p-footerLoop__splideSlideText { padding-top: 0.15em; font-family: "Hind", sans-serif; font-size: max(6.1538461538em, 10px); font-weight: 700; line-height: 1; color: #454545; letter-spacing: 0; white-space: nowrap; } .p-footerLoop__splideSlideText::after { display: inline-block; width: 0.05em; height: 1.3cap; margin-left: 0.2em; vertical-align: -0.15cap; content: ""; background-color: currentcolor; animation: blink 1.2s infinite step-end; } @media (width >= 768px) { .p-footerLoop__splideSlideText { font-size: max(7.6923076923em, 10px); } } @media (width >= 1025px) { .p-footerLoop__splideSlideText { font-size: max(12.3076923077em, 10px); } } .p-footerLoop__splideSlidePic { width: 15rem; aspect-ratio: 300/200; } @media (width >= 768px) { .p-footerLoop__splideSlidePic { width: 20rem; } } @media (width >= 1025px) { .p-footerLoop__splideSlidePic { width: 30rem; } } /* -------------------------------------------- FOOTER -------------------------------------------- */ .p-footer { --colWidth: 25rem; --colGap: 5rem; overflow: hidden; color: #fff; background-color: #454545; } .p-footer__rowMain { display: flex; flex-direction: column; padding-top: 6rem; padding-bottom: 5rem; } @media (width >= 1025px) { .p-footer__rowMain { flex-flow: row wrap; gap: var(--colGap); padding-top: 6rem; padding-bottom: 8rem; } } @media (width >= 1025px) { .p-footer__linkFrame { order: 4; width: var(--colWidth); } } .p-footer__btnCvFrame { display: flex; align-items: flex-start; justify-content: center; margin-top: 4rem; } @media (width >= 1025px) { .p-footer__btnCvFrame { align-self: flex-start; justify-content: flex-end; order: 2; width: var(--colWidth); margin-top: 0; } } .p-footer__btnCv { position: relative; display: block; width: 33.5rem; max-width: 100%; padding: 2rem 9rem; font-size: max(1.1538461538em, 10px); font-weight: 500; line-height: 1.2; color: #212121; text-align: center; letter-spacing: 0.08em; background-color: #fff; border: 1px solid #fff; border-radius: 999px; } @media (hover: hover) { .p-footer__btnCv:hover { color: #fff; background-color: #454545; } } @media (width >= 1025px) { .p-footer__btnCv { width: 22rem; padding: 1.7rem 5rem; padding-right: 8rem; font-size: max(1.2307692308em, 10px); text-align: left; } } .p-footer__btnCvArrowFrame { position: absolute; top: 0; right: 2rem; bottom: 0; display: flex; align-items: center; justify-content: center; width: 6rem; height: 3rem; margin: auto; border: 1px solid color-mix(in srgb, currentcolor 40%, transparent); border-radius: inherit; } @media (width >= 1025px) { .p-footer__btnCvArrowFrame { width: 4.8rem; height: 2.7rem; } } .p-footer__btnCvArrow { width: 1.2rem; height: 1rem; } .p-footer__logoFrame { display: flex; justify-content: center; margin-top: 6rem; } @media (width >= 1025px) { .p-footer__logoFrame { justify-content: flex-start; order: 1; width: calc(100% - var(--colWidth) - var(--colGap)); margin-top: 0; } } @media (hover: hover) { .p-footer__logoAnc:hover { opacity: 0.7; } } @media (width >= 1025px) { .p-footer__logoAnc { display: flex; gap: 2rem; align-items: center; } } .p-footer__logoPic { width: 6.8rem; aspect-ratio: 136/220; filter: brightness(0) invert(1); } @media (width >= 1025px) { .p-footer__logoPic { width: 4.6rem; } } @media (width >= 1025px) { .p-footer__logoText { font-size: max(1.5384615385em, 10px); font-weight: 600; line-height: 1.1; letter-spacing: 0.08em; } } .p-footer__addressFrame { display: grid; gap: 2rem; margin-top: 3rem; font-size: max(0.8461538462em, 10px); line-height: 1.6363636364; letter-spacing: 0.04em; } @media (width >= 768px) { .p-footer__addressFrame { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } @media (width >= 1025px) { .p-footer__addressFrame { grid-template-columns: repeat(3, minmax(0, 1fr)); order: 3; width: calc(100% - var(--colWidth) - var(--colGap)); margin-top: 0; font-size: max(1.0769230769em, 10px); } } .p-footer__addressItem { display: grid; grid-template-columns: 10rem minmax(0, 1fr); } @media (width >= 1025px) { .p-footer__addressItem { display: block; } } .p-footer__addressOffice { padding-right: 1rem; padding-left: 1.5rem; font-weight: 600; } @media (width >= 1025px) { .p-footer__addressOffice { padding: 0; margin-bottom: 1.8rem; line-height: 1.1; } } .p-footer__addressTextFrame { opacity: 0.7; } .p-footer__addressMap { margin-top: 0.5rem; line-height: 1.3; } .p-footer__addressMapAnc { display: inline-flex; gap: 0.5rem; align-items: center; text-decoration: underline; text-underline-offset: 0.3rem; } @media (hover: hover) { .p-footer__addressMapAnc:hover { text-decoration: none; } } .p-footer__addressMapIcon { width: 0.8rem; translate: 0 25%; } @media (width >= 1025px) { .p-footer__addressMapIcon { width: 1.1rem; translate: 0 20%; } } .p-footer__rowSup { position: relative; display: flex; gap: 2rem; align-items: center; justify-content: space-between; padding: 2rem 0; font-size: max(0.8461538462em, 10px); } @media (width >= 1025px) { .p-footer__rowSup { padding: 2.5rem 0 5rem; font-size: max(0.9230769231em, 10px); } } .p-footer__rowSup::before { position: absolute; top: 0; right: -5.3333333333vw; left: -5.3333333333vw; content: ""; border-top: 1px solid rgba(255, 255, 255, 0.2); } @media (width >= 1025px) { .p-footer__rowSup::before { right: 0; left: 0; } } .p-footer__copyright { padding-top: 0.15em; font-family: "Hind", sans-serif; line-height: 1.3; letter-spacing: 0.08em; } /* -------------------------------------------- LINK -------------------------------------------- */ @media (width < 1025px) { .p-footerLink { letter-spacing: 0.08em; border-top: 1px solid rgba(255, 255, 255, 0.2); } .p-footerLink__item { padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .p-footerLink__anc { position: relative; display: block; padding: 1.8rem 0; font-size: max(1.3076923077em, 10px); font-weight: 600; line-height: 1; } .p-footerLink__anc.--accordionTB::before, .p-footerLink__anc.--accordionTB::after { position: absolute; top: 0; right: 2rem; bottom: 0; display: block; width: 1.3rem; height: 1px; margin: auto; content: ""; background-color: currentcolor; transition: 0.3s; } .p-footerLink__anc.--accordionTB::after { rotate: 90deg; } .p-footerLink__anc.--accordionTB.is-act::before { opacity: 0; } .p-footerLink__anc.--accordionTB.is-act::after { rotate: 0deg; } .p-footerLink__arrow { position: absolute; top: 0; right: 2rem; bottom: 0; width: 1.2rem; height: 1rem; margin: auto; fill: #fff; } .p-footerLink__subFrame { display: none; } .p-footerLink__sub { padding: 0.5rem 1.5rem 2rem; opacity: 0.7; } .p-footerLink__subItem + * { margin-top: 0.5rem; } } @media (width >= 1025px) { .p-footerLink { display: grid; grid-template-rows: auto auto 1fr; grid-template-columns: auto auto; gap: 0.8rem 1.5rem; letter-spacing: 0.08em; } .p-footerLink__item:first-child { grid-row: 1/-1; } .p-footerLink__anc { position: relative; display: block; padding: 0.5rem 0; font-size: max(1.0769230769em, 10px); font-weight: 600; line-height: 1; } } @media (width >= 1025px) and (hover: hover) { .p-footerLink__anc:hover { opacity: 0.7; } } @media (width >= 1025px) { .p-footerLink__arrow { display: none; } .p-footerLink__subFrame { margin-top: 1rem; } .p-footerLink__sub { font-size: max(1.0769230769em, 10px); opacity: 0.7; } .p-footerLink__subItem + * { margin-top: 0.3rem; } } @media (width >= 1025px) and (hover: hover) { .p-footerLink__subAnc:hover { opacity: 0.7; } } /* -------------------------------------------- GLOBAL NAV -------------------------------------------- */ @media (width < 1025px) { .p-gnav { height: 100%; background-color: #fff; overflow: auto; overscroll-behavior: none; scrollbar-width: none; } .p-gnav::-webkit-scrollbar { display: none; } .p-gnav__scrollFrame { display: flex; align-items: flex-start; justify-content: center; min-height: calc(100% + 1px); padding: 3rem 10.6666666667vw 10rem; } .p-gnav__contFrame { display: grid; gap: 4rem; width: 100%; max-width: 40rem; } .p-gnav__logoFrame { display: flex; justify-content: center; } .p-gnav__logoAnc { display: block; width: 5rem; } .p-gnav__logoPic { width: 100%; height: auto; aspect-ratio: 98/160; } .p-gnav__btnCvFrame { display: flex; justify-content: center; } .p-gnav__btnCv { position: relative; display: block; width: 29.5rem; max-width: 100%; padding: 2rem 9rem; font-family: "Hind", sans-serif; font-size: max(1.1538461538em, 10px); font-weight: 500; line-height: 1.2; color: #fff; text-align: center; letter-spacing: 0.08em; background-color: #ff9d00; border: 1px solid #ff9d00; border-radius: 999px; } .p-gnav__btnCvArrowFrame { position: absolute; top: 0; right: 2rem; bottom: 0; display: flex; align-items: center; justify-content: center; width: 6rem; height: 3rem; margin: auto; background-color: #ff9d00; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: inherit; } .p-gnav__btnCvArrow { width: 1.2rem; height: 1rem; } } @media (width >= 1025px) { .p-gnav__scrollFrame, .p-gnav__contFrame { display: contents; } } /* -------------------------------------------- LINK -------------------------------------------- */ @media (width < 1025px) { .p-gnavLink { border-top: 1px solid #f2f3f4; } .p-gnavLink__item { padding: 1rem 0; border-bottom: 1px solid #f2f3f4; } .p-gnavLink__anc, .p-gnavLink__text { position: relative; display: block; padding: 1.5rem 4rem 1.5rem 0; font-family: "Hind", sans-serif; font-size: max(1.3846153846em, 10px); font-weight: 500; line-height: 1; letter-spacing: 0.08em; } .p-gnavLink__arrow { position: absolute; top: 0; right: 2rem; bottom: 0; width: 1.2rem; height: 1rem; margin: auto; } .p-gnavLink__text::before, .p-gnavLink__text::after { position: absolute; top: 0; right: 2rem; bottom: 0; display: block; width: 1.3rem; height: 1px; margin: auto; content: ""; background-color: currentcolor; transition: 0.3s; } .p-gnavLink__text::after { rotate: 90deg; } .p-gnavLink__text.is-act::before { opacity: 0; } .p-gnavLink__text.is-act::after { rotate: 0deg; } .p-gnavLink__megamenuFrame, .p-gnavLink__megamenuFilter { display: none; } } @media (width >= 1025px) { .p-gnavLink { display: flex; gap: 4rem; } .p-gnavLink__item.--megamenu:hover::before, .p-gnavLink__item.--megamenu.--hover::before { position: absolute; height: 100%; padding-right: 5.5rem; padding-left: 4rem; font-family: "Hind", sans-serif; font-size: max(1.2307692308em, 10px); font-weight: 500; color: transparent; letter-spacing: 0.08em; content: "ABOUT"; translate: -4rem; } .p-gnavLink__item.--megamenu:hover .p-gnavLink__text::after, .p-gnavLink__item.--megamenu.--hover .p-gnavLink__text::after { opacity: 1; } .p-gnavLink__item.--megamenu:hover .p-gnavLink__megamenuFrame, .p-gnavLink__item.--megamenu.--hover .p-gnavLink__megamenuFrame { pointer-events: auto; opacity: 1; translate: 0; } .p-gnavLink__item.--megamenu:hover .p-gnavLink__megamenuFilter, .p-gnavLink__item.--megamenu.--hover .p-gnavLink__megamenuFilter { opacity: 1; } .p-gnavLink__anc, .p-gnavLink__text { position: relative; display: block; padding: 3.5rem 0; font-family: "Hind", sans-serif; font-size: max(1.2307692308em, 10px); font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; } .p-gnavLink__anc::after, .p-gnavLink__text::after { position: absolute; right: 0; bottom: 0; left: 0; height: 0.2rem; content: ""; background-color: currentcolor; opacity: 0; transition: opacity 0.3s; } } @media (width >= 1025px) and (hover: hover) { .p-gnavLink__anc:hover::after { opacity: 1; } } @media (width >= 1025px) { .p-gnavLink__arrow { display: none; } .p-gnavLink__text { padding-right: 1.6rem; } .p-gnavLink__text::before { position: absolute; top: 0; right: 0; bottom: 0.15em; display: block; width: 0; height: 0; margin: auto; content: ""; border-color: currentcolor transparent transparent; border-style: solid; border-width: 0.6rem 0.4rem 0; transition: 0.3s; } .p-gnavLink__megamenuFrame { position: absolute; right: 0; left: 0; z-index: -1; display: block !important; pointer-events: none; box-shadow: 0 0 4rem 0 rgba(0, 0, 0, 0.12); opacity: 0; translate: 0 -1rem; transition: 0.3s; } .p-gnavLink__megamenuFilter { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0; backdrop-filter: blur(0.8rem); transition: opacity 0.3s; } } /* -------------------------------------------- MEGAMENU -------------------------------------------- */ @media (width < 1025px) { .p-gnavMega { padding: 0.5rem 1.5rem 1.5rem; } .p-gnavMega__inner { padding: 0; } .p-gnavMega__linkItem + * { margin-top: 0.5rem; } .p-gnavMega__linkAnc { display: block; padding: 0.5rem 0; line-height: 1.3; color: rgba(33, 33, 33, 0.7); letter-spacing: 0.08em; } .p-gnavMega__linkPic, .p-gnavMega__entryBnrFrame { display: none; } } @media (width >= 1025px) { .p-gnavMega { position: relative; z-index: 1; } .p-gnavMega::before { position: absolute; inset: -20rem 0 0; z-index: -1; content: ""; background-color: #fff; } .p-gnavMega__inner { padding-top: 4rem; padding-bottom: 5rem; } .p-gnavMega__titleFrame { margin-bottom: 3rem; } .p-gnavMega__titleMain { font-family: "Hind", sans-serif; font-size: max(6.1538461538em, 10px); font-weight: 500; line-height: 1; letter-spacing: 0; } .p-gnavMega__titleSup { font-size: max(1.3846153846em, 10px); font-weight: 600; line-height: 1; } .p-gnavMega__link { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } .p-gnavMega__link.--textOnly { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem 0; overflow: hidden; } .p-gnavMega__link.--textOnly .p-gnavMega__linkItem { position: relative; } .p-gnavMega__link.--textOnly .p-gnavMega__linkItem::before { position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; content: ""; background-color: #eceeef; } .p-gnavMega__link.--textOnly .p-gnavMega__linkAnc { position: relative; padding: 0.4rem 0; } } @media (width >= 1025px) and (hover: hover) { .p-gnavMega__link.--textOnly .p-gnavMega__linkAnc:hover { background-color: #f8f8f8; } } @media (width >= 1025px) { .p-gnavMega__linkAnc { display: block; } } @media (width >= 1025px) and (hover: hover) { .p-gnavMega__linkAnc:hover .p-gnavMega__linkPic > img { scale: 1.1; } } @media (width >= 1025px) { .p-gnavMega__linkPic { width: 100%; aspect-ratio: 264/198; margin-bottom: 1.8rem; overflow: hidden; } .p-gnavMega__linkPic > img { transition: scale 0.3s; } .p-gnavMega__linkText { font-size: max(1.4615384615em, 10px); font-weight: 500; line-height: 1.3; color: #454545; text-align: center; letter-spacing: 0.08em; } .p-gnavMega__entryBnrFrame { display: flex; justify-content: center; margin-top: 4rem; } .p-gnavMega__entryBnrAnc { position: relative; z-index: 1; width: 100%; max-width: 70rem; padding: 3rem; overflow: hidden; border-radius: 1.5rem; } } @media (width >= 1025px) and (hover: hover) { .p-gnavMega__entryBnrAnc:hover .p-gnavMega__entryBnrMainPic > img { scale: 1.05; } } @media (width >= 1025px) { .p-gnavMega__entryBnrMainPic, .p-gnavMega__entryBnrDecoPic { position: absolute; inset: 0; z-index: -2; } .p-gnavMega__entryBnrMainPic::after { position: absolute; inset: 0; content: ""; background-color: rgba(0, 0, 0, 0.25); } .p-gnavMega__entryBnrMainPic > img { transition: scale 0.3s; } .p-gnavMega__entryBnrText { line-height: 1; color: #fff; text-align: center; text-shadow: 0 0 6rem rgba(0, 0, 0, 0.9), 0 0 4rem rgba(0, 0, 0, 0.9); } .p-gnavMega__entryBnrTextMain { font-family: "Hind", sans-serif; font-size: max(3.0769230769em, 10px); font-weight: 500; } .p-gnavMega__entryBnrTextSup { margin-top: 0.5rem; font-size: max(0.9230769231em, 10px); font-weight: 600; } } /* -------------------------------------------- SUB -------------------------------------------- */ .p-gnavSub { background-color: #fff; overflow: auto; overscroll-behavior: none; scrollbar-width: none; } .p-gnavSub::-webkit-scrollbar { display: none; } .p-gnavSub__list { display: flex; gap: 2rem; width: fit-content; padding: 0 2rem; white-space: nowrap; } .p-gnavSub__anc { display: block; padding: 0.8rem 0; line-height: 1.1; } html.is-navTop .p-gnavSub__anc[href="#"], html.is-navMsg .p-gnavSub__anc[href="#message"], html.is-navVal .p-gnavSub__anc[href="#value"], html.is-navBiz .p-gnavSub__anc[href="#business"], html.is-navFlow .p-gnavSub__anc[href="#flow"], html.is-navCo .p-gnavSub__anc[href="#company"], html.is-navWork .p-gnavSub__anc[href="#work"], html.is-navIntv .p-gnavSub__anc[href="#interview"], html.is-navStyle .p-gnavSub__anc[href="#style"], html.is-navBenefits .p-gnavSub__anc[href="#benefits"], html.is-navLookfor .p-gnavSub__anc[href="#lookfor"], html.is-navJob .p-gnavSub__anc[href="#job"] { color: #ff9d00; } /* -------------------------------------------- HEADER -------------------------------------------- */ @media (width < 1025px) { .p-header__inner { display: flex; gap: 1rem; align-items: center; padding: 0.8rem; padding-left: 3rem; } .p-header__logoFrame { display: flex; flex: 1; align-items: center; } .p-header__logoAnc { display: block; width: 2.8rem; } .p-header__logoPic { transform-origin: center top; scale: 1.3; } .p-header__gnavFrame { position: fixed; top: 0; right: 0; left: 0; z-index: 1; height: 100dvh; pointer-events: none; opacity: 0; transition: opacity 0.3s; } .is-menuOpen .p-header__gnavFrame { pointer-events: auto; opacity: 1; } .p-header__btnCvFrame { width: 11rem; } .p-header__btnCv { display: block; padding: 1rem 2rem; color: #fff; text-align: center; background-color: #ff9d00; border-radius: 999px; } .p-header__btnCvText { display: block; font-size: max(0.9230769231em, 10px); font-weight: 500; line-height: 1; letter-spacing: 0.08em; } .p-header__btnMenuFrame { position: relative; z-index: 2; align-self: stretch; width: 3.8rem; } .p-header__btnMenu { position: relative; display: block; width: 100%; height: 100%; } .p-header__btnMenu::before, .p-header__btnMenu::after { position: absolute; inset: 0 1rem; height: 1px; margin: auto; content: ""; background-color: #212121; translate: 0 -0.3rem; transition: 0.3s; } .p-header__btnMenu::after { translate: 0 0.3rem; } .is-menuOpen .p-header__btnMenu::before, .is-menuOpen .p-header__btnMenu::after { rotate: 45deg; translate: 0; } .is-menuOpen .p-header__btnMenu::after { rotate: -45deg; } .p-header__subInner { position: absolute; top: 100%; right: 0; left: 0; z-index: -2; opacity: 0; translate: 0 -101%; transition: translate 0.2s; } } @media (width >= 1025px) { .p-header { transition: background-color 0.3s; } .p-header:has(.--megamenu:hover) { pointer-events: none; background-color: #fff; border-bottom: 1px solid #eceeef; } .p-header:has(.--megamenu:hover) > * { pointer-events: auto; } .p-header__inner { display: flex; gap: 6rem; align-items: center; padding: 0 6rem 0 7.5rem; } .p-header__logoFrame { display: flex; align-items: center; padding: 1rem 0; } .p-header__logoAnc { display: block; width: 3.3rem; } } @media (width >= 1025px) and (hover: hover) { .p-header__logoAnc:hover { opacity: 0.7; } } @media (width >= 1025px) { .p-header__logoPic { transform-origin: center; scale: 1.3; } .p-header__gnavFrame { flex: 1; } .p-header__btnCvFrame { width: 22rem; } .p-header__btnCv { position: relative; display: block; padding: 1.8rem 4rem; padding-right: 8rem; color: #fff; background-color: #ff9d00; border: 1px solid #ff9d00; border-radius: 999px; } } @media (width >= 1025px) and (hover: hover) { .p-header__btnCv:hover { color: #ff9d00; background-color: #fff; } } @media (width >= 1025px) { .p-header__btnCvText { display: block; font-size: max(1.2307692308em, 10px); font-weight: 500; line-height: 1; letter-spacing: 0.08em; } .p-header__btnCvArrowFrame { position: absolute; top: 0; right: 2rem; bottom: 0; display: flex; align-items: center; justify-content: center; width: 4.8rem; height: 2.7rem; margin: auto; border: 1px solid color-mix(in srgb, currentcolor 50%, transparent); border-radius: inherit; } .p-header__btnCvArrow { width: 1.2rem; height: 0.9rem; } } .is-fixed .p-header { position: relative; z-index: 1; transition: translate 0.2s; } .is-fixed .p-header::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: #fff; border-bottom: 1px solid #eceeef; } .is-fixed .p-header .p-header__logoPic { scale: 1; } @media (width >= 1025px) { .is-fixed .p-header .p-header__btnCvFrame { width: 18rem; } } @media (width >= 1025px) { .is-fixed .p-header .p-header__btnCv { padding: 1.4rem 4rem; padding-right: 5rem; } } @media (width >= 1025px) { .is-fixed .p-header .p-header__btnCvText { font-size: max(1.0769230769em, 10px); } } @media (width >= 1025px) { .is-fixed .p-header .p-header__btnCvArrowFrame { right: 1rem; width: 3rem; height: 1.7rem; } } @media (width >= 1025px) { .is-fixed .p-header .p-header__btnCvArrow { width: 0.8rem; height: 0.8rem; } } .is-fixed .p-header.is-view { translate: 0 100%; } .is-fixed .p-header.is-view .p-header__subInner { opacity: 1; } html.is-scrollUp .is-fixed .p-header.is-view .p-header__subInner { translate: 0; } /* -------------------------------------------- PAGER -------------------------------------------- */ .p-pager { display: flex; gap: 2rem; align-items: center; justify-content: center; } @media (width >= 1025px) { .p-pager { gap: 4rem; font-size: max(1.2307692308em, 10px); } } .p-pager__arrow { display: flex; align-items: center; justify-content: center; width: 5rem; height: 2.6rem; border: 1px solid #212121; border-radius: 999px; } @media (hover: hover) { .p-pager__arrow:hover { color: #fff; background-color: #212121; } } .p-pager__arrow.--prev { scale: -1 1; } .p-pager__arrow.--inact { pointer-events: none; opacity: 0.2; } .p-pager__arrowIcon { width: 0.8rem; height: 0.7rem; } @media (width >= 1025px) { .p-pager__arrowIcon { width: 1.2rem; height: 0.9rem; } } .p-pager__list { display: flex; gap: 1.5rem; align-items: center; } @media (width >= 1025px) { .p-pager__list { gap: 2.5rem; } } .p-pager__current, .p-pager__anc { display: block; min-width: 1.5rem; padding: 0.5rem 0; font-family: "Hind", sans-serif; line-height: 1; text-align: center; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-pager__current, .p-pager__anc { min-width: 2rem; } } .p-pager__ellipsis { display: block; font-family: "Hind", sans-serif; line-height: 1; translate: 0 -20%; } .p-pager__current { color: #ff9d00; border-bottom: 1px solid #ff9d00; } @media (hover: hover) { .p-pager__anc:hover { background-color: #f2f3f4; } } /* -------------------------------------------- CASE -------------------------------------------- */ .p-case__filterFrame { margin-bottom: 5rem; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-case__filterFrame { margin-bottom: 8rem; } } .p-case__filterTitleFrame { display: flex; gap: 2rem; align-items: center; justify-content: space-between; margin-bottom: 3rem; line-height: 1.1; } @media (width >= 1025px) { .p-case__filterTitleFrame { margin-bottom: 4rem; } } .p-case__filterTitle { font-size: max(1.3076923077em, 10px); font-weight: 700; } @media (width >= 1025px) { .p-case__filterTitle { font-size: max(1.8461538462em, 10px); } } .p-case__filterReset { display: block; padding: 0.5rem 0; font-size: max(0.9230769231em, 10px); color: #7d7d7d; text-decoration: underline; text-underline-offset: 0.5rem; } @media (hover: hover) { .p-case__filterReset { text-decoration: underline; } } @media (width >= 1025px) { .p-case__filterReset { font-size: max(1.0769230769em, 10px); } } .p-case__pagerFrame { margin-top: 5rem; } @media (width >= 1025px) { .p-case__pagerFrame { margin-top: 8rem; } } .p-case__pagerFrame:empty { margin-top: 0 !important; } /* -------------------------------------------- FILTER -------------------------------------------- */ .p-caseFilter { position: relative; } @media (width >= 1025px) { .p-caseFilter__optionsFrame { position: relative; z-index: 2; height: 0; pointer-events: none; } html.is-optionJob .p-caseFilter__optionsFrame, html.is-optionTech .p-caseFilter__optionsFrame, html.is-optionService .p-caseFilter__optionsFrame, html.is-optionKeyword .p-caseFilter__optionsFrame { pointer-events: auto; } .p-caseFilter__optionsOverlay { position: fixed; inset: 0; z-index: -1; } .p-caseFilter__optionsGroup { position: absolute; top: 2rem; right: 0; left: 0; padding: 3rem; background-color: #fff; border-radius: 2.3rem; opacity: 0; filter: drop-shadow(0 0 2.3rem rgba(0, 0, 0, 0.12)); transition: opacity 0.3s; } html.is-optionJob .p-caseFilter__optionsGroup[data-option=ind], html.is-optionTech .p-caseFilter__optionsGroup[data-option=tech], html.is-optionService .p-caseFilter__optionsGroup[data-option=serv], html.is-optionKeyword .p-caseFilter__optionsGroup[data-option=htag] { z-index: 1; opacity: 1; } .p-caseFilter__optionsList { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .p-caseFilter__optionsLabel { display: block; padding: 1.6rem; font-size: max(1.0769230769em, 10px); text-align: center; cursor: pointer; transition: 0.3s; } } @media (width >= 1025px) and (hover: hover) { .p-caseFilter__optionsLabel:hover { background-color: #f2f3f4; } } @media (width >= 1025px) { .p-caseFilter__optionsLabel:has(input:checked) { color: #ff9d00; pointer-events: none; } .p-caseFilter__optionsRadio { display: none; } } .p-caseFilter__form { display: block; } .p-caseFilter__btnFrame { display: grid; gap: 1rem; line-height: 1.3; } @media (width >= 1025px) { .p-caseFilter__btnFrame { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } } .p-caseFilter__btnItem { display: grid; grid-template-columns: 10rem minmax(0, 1fr); } @media (width >= 768px) { .p-caseFilter__btnItem { grid-template-columns: 15rem minmax(0, 1fr); } } @media (width >= 1025px) { .p-caseFilter__btnItem { display: block; padding-right: 2rem; } } .p-caseFilter__btnType { display: flex; align-items: center; padding-right: 1rem; font-size: max(1em, 10px); font-weight: 700; } @media (width >= 1025px) { .p-caseFilter__btnType { padding-right: 0; margin-bottom: 1.2rem; font-size: max(1.0769230769em, 10px); } } .p-caseFilter__btnSelectFrame { position: relative; background-color: #f2f3f4; border-radius: 999px; } @media (width >= 1025px) { .p-caseFilter__btnSelectFrame { cursor: pointer; } } .p-caseFilter__btnSelectFrame::before { position: absolute; top: 0; right: 2.4rem; bottom: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 1px solid #454545; border-bottom: 1px solid #454545; rotate: 45deg; translate: -20% -30%; } @media (width >= 1025px) { .p-caseFilter__btnSelectFrame::before { right: 3rem; width: 0.6rem; height: 0.6rem; } } .p-caseFilter__btnSelect { display: block; width: 100%; padding: 1.2rem 4rem 1.2rem 2rem; } @media (width >= 1025px) { .p-caseFilter__btnSelect { padding: 1.6rem 5rem 1.6rem 3rem; font-size: max(1.0769230769em, 10px); pointer-events: none; } } /* -------------------------------------------- FORM -------------------------------------------- */ .p-form { padding-bottom: 10rem; } @media (width >= 1025px) { .p-form { padding-bottom: 16rem; } } .p-form__catchFrame { padding: 4rem 2rem; background-color: #fff; } .p-form__catchFrame { position: relative; } .p-form__catchFrame::before { position: absolute; top: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } @media (width >= 1025px) { .p-form__catchFrame::before { right: -6.25vw; left: -6.25vw; } } .p-form__catchFrame { position: relative; } .p-form__catchFrame::after { position: absolute; bottom: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } @media (width >= 1025px) { .p-form__catchFrame::after { right: -6.25vw; left: -6.25vw; } } @media (width >= 1025px) { .p-form__catchFrame { padding: 7.5rem 6.25vw; margin: 0 -6.25vw; } .p-form__catchFrame { position: relative; } .p-form__catchFrame::before { position: absolute; top: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: 0; left: 0; } } @media (width >= 1025px) and (width >= 1025px) { .p-form__catchFrame::before { right: 0; left: 0; } } @media (width >= 1025px) { .p-form__catchFrame { position: relative; } .p-form__catchFrame::after { position: absolute; bottom: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: 0; left: 0; } } @media (width >= 1025px) and (width >= 1025px) { .p-form__catchFrame::after { right: 0; left: 0; } } .p-form__catch { line-height: 1.9230769231; text-align: center; } @media (width >= 1025px) { .p-form__catch { font-size: max(1.2307692308em, 10px); line-height: 2; } } .p-form__stepFrame { display: flex; gap: 3.2rem; align-items: center; justify-content: center; padding: 5rem 0 2.5rem; } @media (width >= 1025px) { .p-form__stepFrame { gap: 5.4rem; padding: 10rem 0 6rem; } } .p-form__stepItem { position: relative; display: flex; align-items: center; justify-content: center; width: 9rem; height: 9rem; background-color: #f8f8f8; border: 1px solid transparent; border-radius: 999px; } @media (width >= 1025px) { .p-form__stepItem { width: 15rem; height: 15rem; border-width: 2px; } } .p-form__stepItem + .p-form__stepItem::before { position: absolute; top: 0; right: calc(100% + 1.1rem); bottom: 0; width: 0; height: 0; margin: auto; content: ""; border-color: transparent transparent transparent #454545; border-style: solid; border-width: 0.8rem 0 0.8rem 1.1rem; } @media (width >= 1025px) { .p-form__stepItem + .p-form__stepItem::before { right: calc(100% + 2rem); border-width: 1rem 0 1rem 1.4rem; } } .p-form__stepItem.--current { color: #ff9d00; background-color: transparent; border-color: #ff9d00; } .p-form__stepText { font-weight: 700; line-height: 1.1; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-form__stepText { font-size: max(1.5384615385em, 10px); } } .p-form__inputFrame, .p-form__confirmFrame { padding-bottom: 3.5rem; } @media (width >= 1025px) { .p-form__inputFrame, .p-form__confirmFrame { padding-bottom: 6rem; } } @media (width >= 1025px) { .p-form__confirmFrame { padding-bottom: 10rem; } } .p-form__inputText, .p-form__confirmText { line-height: 1.9230769231; text-align: center; } @media (width >= 1025px) { .p-form__inputText, .p-form__confirmText { font-size: max(1.2307692308em, 10px); line-height: 2; } } .p-form__inputText .c-label, .p-form__confirmText .c-label { display: inline-block; margin-right: 0.5rem; } @media (width >= 1025px) { .p-form__inputText .c-label, .p-form__confirmText .c-label { margin-right: 1rem; font-size: max(0.8125em, 10px); } } .p-form__thanksFrame { text-align: center; } .p-form__thanksTitle { margin-bottom: 2rem; font-size: max(1.3846153846em, 10px); font-weight: 700; line-height: 1.5555555556; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-form__thanksTitle { margin-bottom: 2.5rem; font-size: max(2.3076923077em, 10px); line-height: 1.5333333333; } } .p-form__thanksText { line-height: 1.9230769231; } @media (width >= 1025px) { .p-form__thanksText { font-size: max(1.2307692308em, 10px); line-height: 2; } } .p-form__thanksBtnFrame { display: flex; justify-content: center; margin-top: 3rem; } @media (width >= 1025px) { .p-form__thanksBtnFrame { margin-top: 5rem; } } /* -------------------------------------------- MW WP FORM -------------------------------------------- */ .mw_wp_form .vertical-item + .vertical-item { margin-top: 0 !important; } .mw_wp_form .horizontal-item + .horizontal-item { margin-left: 0 !important; } .mw_wp_form.mw_wp_form_input .u-visibleConfirm { display: none; } .mw_wp_form.mw_wp_form_confirm .u-visibleInput { display: none; } .mw_wp_form .error { display: block; margin-top: 0.8rem; font-size: max(0.9230769231em, 10px); line-height: 1.5; color: #ce3000; } /* -------------------------------------------- LAYOUT -------------------------------------------- */ .p-formLayout { letter-spacing: 0.08em; border-top: 1px solid #f2f3f4; } .p-formLayout__group { padding: 2.5rem 2rem 3rem; background-color: #fff; border-bottom: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-formLayout__group { padding: 4rem; } } .p-formLayout__group + .p-formLayout__group { border-top: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-formLayout__item { display: flex; gap: 6rem; align-items: flex-start; } } .p-formLayout__item + .p-formLayout__item { padding-top: 2.5rem; } @media (width >= 1025px) { .p-formLayout__item + .p-formLayout__item { padding-top: 4rem; } } .p-formLayout__termFrame { display: flex; gap: 2rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; } @media (width >= 1025px) { .p-formLayout__termFrame { flex-shrink: 0; width: 25rem; margin-bottom: 0; } .mw_wp_form_input .p-formLayout__termFrame { padding-top: 2rem; } } .mw_wp_form_confirm .p-formLayout__termFrame .c-label { display: none; } .p-formLayout__termFrame.--pdt0 { padding-top: 0; } .p-formLayout__term { font-weight: 700; } @media (width >= 1025px) { .p-formLayout__term { font-size: max(1.2307692308em, 10px); } } @media (width >= 1025px) { .p-formLayout__contFrame { flex: 1; font-size: max(1.2307692308em, 10px); } } .p-formLayout__btnFrame { display: flex; flex-direction: column; align-items: center; padding-top: 4rem; } @media (width >= 1025px) { .p-formLayout__btnFrame { padding-top: 6rem; } } .p-formLayout__btnFrame .c-anc { margin-top: 2rem; } @media (width >= 1025px) { .p-formLayout__btnFrame .c-anc { margin-top: 3rem; font-size: max(1.2307692308em, 10px); } } /* -------------------------------------------- INPUT -------------------------------------------- */ .p-formInput { width: 100%; padding: 1.4rem 2rem; background-color: #f2f3f4; border-radius: 999px; } @media (width >= 1025px) { .p-formInput { padding: 1.6rem 3rem; } } .p-formInput::placeholder { opacity: 0.3; } .p-formInput:has(+ span.error) { background-color: #ffebea; border: 1px solid #ce3000; } /* -------------------------------------------- TEXTAREA -------------------------------------------- */ .p-formTextarea { width: 100%; height: 23rem; padding: 1.4rem 2rem; background-color: #f2f3f4; border-radius: 2.5rem; } @media (width >= 1025px) { .p-formTextarea { height: 36rem; padding: 1.6rem 3rem; border-radius: 3rem; } } .p-formTextarea::placeholder { opacity: 0.3; } .p-formTextarea:has(+ span.error) { background-color: #ffebea; border: 1px solid #ce3000; } /* -------------------------------------------- SELECTBOX -------------------------------------------- */ .mw_wp_form_input .p-formSelect { position: relative; background-color: #f2f3f4; border-radius: 999px; } @media (width >= 1025px) { .mw_wp_form_input .p-formSelect { max-width: 33rem; cursor: pointer; } } .mw_wp_form_input .p-formSelect::before { position: absolute; top: 0; right: 2.3rem; bottom: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; pointer-events: none; content: ""; border-right: 1px solid #454545; border-bottom: 1px solid #454545; rotate: 45deg; translate: -20% -30%; } @media (width >= 1025px) { .mw_wp_form_input .p-formSelect::before { right: 3rem; width: 0.6rem; height: 0.6rem; } } .mw_wp_form_input .p-formSelect select { width: 100%; padding: 1.4rem 2rem; padding-right: 4rem; } @media (width >= 1025px) { .mw_wp_form_input .p-formSelect select { padding: 1.6rem 3rem; padding-right: 6rem; } } .p-formSelect:has(+ span.error) { background-color: #ffebea; border: 1px solid #ce3000; } /* -------------------------------------------- CHECKBOX & RADIO -------------------------------------------- */ .p-formCheck, .p-formRadio { display: flex; flex-wrap: wrap; gap: 1rem 2rem; line-height: 1.6; } @media (width >= 1025px) { .p-formCheck, .p-formRadio { line-height: 1.9; } } .p-formCheck.--vertical, .p-formRadio.--vertical { flex-direction: column; align-items: flex-start; } .p-formCheck label, .p-formRadio label { display: block; cursor: pointer; } .p-formCheck label > input, .p-formRadio label > input { position: absolute; visibility: hidden; } .p-formCheck label > input + span, .p-formRadio label > input + span { position: relative; display: inline-block; } .p-formCheck label > input + span::before, .p-formRadio label > input + span::before { position: absolute; display: block; content: ""; } .p-formCheck label > input:checked + span::after, .p-formRadio label > input:checked + span::after { position: absolute; display: block; content: ""; } .p-formCheck:has(+ span.error) label > input + span::before, .p-formRadio:has(+ span.error) label > input + span::before { background-color: #ffebea; border: 1px solid #ce3000; } .p-formCheck label > input + span { padding-left: 2.3em; } @media (width >= 1025px) { .p-formCheck label > input + span { padding-left: 2.8em; } } .p-formCheck label > input + span::before { top: 0; left: 0; width: 1.54em; height: 1.54em; background-color: #f2f3f4; } @media (width >= 1025px) { .p-formCheck label > input + span::before { width: 1.875em; height: 1.875em; } } .p-formCheck label > input:checked + span::after { top: 0.38em; left: 0.38em; width: 0.77em; height: 0.77em; background-color: #454545; } @media (width >= 1025px) { .p-formCheck label > input:checked + span::after { top: 0.4375em; left: 0.4375em; width: 1em; height: 1em; } } .p-formRadio label > input + span { padding-left: 2.3em; } @media (width >= 1025px) { .p-formRadio label > input + span { padding-left: 2.8em; } } .p-formRadio label > input + span::before { top: 0; left: 0; width: 1.54em; height: 1.54em; background-color: #f2f3f4; border-radius: 50%; } @media (width >= 1025px) { .p-formRadio label > input + span::before { width: 1.875em; height: 1.875em; } } .p-formRadio label > input:checked + span::after { top: 0.38em; left: 0.38em; width: 0.77em; height: 0.77em; background-color: #454545; border-radius: 50%; } @media (width >= 1025px) { .p-formRadio label > input:checked + span::after { top: 0.4375em; left: 0.4375em; width: 1em; height: 1em; } } /* -------------------------------------------- AGREE CHECKBOX -------------------------------------------- */ .p-formAgree { display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 3rem; } @media (width >= 1025px) { .p-formAgree { margin-bottom: 5rem; font-size: max(1.2307692308em, 10px); } } .p-formAgree__text { margin-bottom: 1.5rem; line-height: 1.9230769231; text-align: center; } @media (width >= 1025px) { .p-formAgree__text { margin-bottom: 2.5rem; line-height: 2; } } .p-formAgree__checkFrame .mwform-checkbox-field label { font-weight: 700; } .p-formAgree:has(span.error) label > input + span::before { background-color: #ffebea; border: 1px solid #ce3000; } /* -------------------------------------------- INTERVIEW -------------------------------------------- */ .p-intv__pagerFrame { margin-top: 5rem; } @media (width >= 1025px) { .p-intv__pagerFrame { margin-top: 8rem; } } .p-intv__pagerFrame:empty { margin-top: 0 !important; } .p-intv__headerFrame { padding-top: 11rem; padding-bottom: 2.5rem; } @media (width >= 1025px) { .p-intv__headerFrame { padding-top: 18rem; padding-bottom: 5rem; } } @media (width >= 1025px) { .p-intv__headerTitleFrame { display: flex; gap: 5rem; align-items: flex-end; justify-content: space-between; } } .p-intv__headerTitle { font-size: max(1.9230769231em, 10px); font-weight: 700; line-height: 1.32; } @media (width >= 1025px) { .p-intv__headerTitle { width: 75%; font-size: max(3.5384615385em, 10px); line-height: 1.5652173913; } } .p-intv__headerTitleSup { margin-top: 2.5rem; line-height: 1.5; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-intv__headerTitleSup { margin-top: 0; } } .p-intv__headerTitleSup > span { font-size: max(0.8461538462em, 10px); } @media (width >= 1025px) { .p-intv__headerTitleSup > span { font-size: max(0.9230769231em, 10px); } } .p-intv__headerTitleSup > span:first-child { opacity: 0.6; } .p-intv__headerTitleSup > strong { display: inline-block; margin-right: 0.5rem; font-weight: 600; } @media (width >= 1025px) { .p-intv__headerTitleSup > strong { font-size: max(1.2307692308em, 10px); } } .p-intv__headerBcFrame { margin-top: 4rem; } @media (width >= 1025px) { .p-intv__headerBcFrame { margin-top: 8rem; } } .p-intv__otherFrame { margin-top: 10rem; } @media (width >= 1025px) { .p-intv__otherFrame { margin-top: 15rem; } } .p-intv__otherTitleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-intv__otherTitleFrame { margin-bottom: 10rem; } } .p-intv__otherMoreFrame { display: flex; justify-content: center; margin-top: 5rem; } @media (width >= 1025px) { .p-intv__otherMoreFrame { justify-content: flex-end; margin-top: 4rem; } } .p-intv__otherMoreFrame > * { translate: 15% 0; } @media (width >= 1025px) { .p-intv__otherMoreFrame > * { translate: unset; } } /* -------------------------------------------- NEWS -------------------------------------------- */ .p-news__catFrame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 5rem; } @media (width >= 768px) { .p-news__catFrame { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (width >= 1025px) { .p-news__catFrame { gap: 2rem; padding: 0 1rem; margin-bottom: 8rem; } } .p-news__catAnc { display: block; padding: 1.3rem 2rem; line-height: 1; text-align: center; letter-spacing: 0.08em; border: 1px solid #dcdcdc; border-radius: 999px; } @media (hover: hover) { .p-news__catAnc:hover { color: #ff9d00; } } @media (width >= 1025px) { .p-news__catAnc { padding: 1.7rem 2rem; font-size: max(1.0769230769em, 10px); } } .p-news__catAnc.--current { color: #fff; pointer-events: none; background-color: #ff9d00; border-color: #ff9d00; } .p-news__pagerFrame { margin-top: 5rem; } @media (width >= 1025px) { .p-news__pagerFrame { margin-top: 8rem; } } .p-news__pagerFrame:empty { margin-top: 0 !important; } .p-news__headerFrame { padding-top: 12rem; padding-bottom: 3.5rem; } @media (width >= 1025px) { .p-news__headerFrame { padding-top: 19rem; padding-bottom: 5.5rem; } } .p-news__headerInfoFrame { display: flex; gap: 1rem; align-items: center; } @media (width >= 1025px) { .p-news__headerInfoFrame { gap: 2rem; } } .p-news__headerInfoDate { font-family: "Hind", sans-serif; font-size: max(0.9230769231em, 10px); line-height: 1; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-news__headerInfoDate { font-size: max(1.3846153846em, 10px); } } .p-news__headerInfoCat { padding: 0.2rem 1rem 0.3rem; font-size: max(0.7692307692em, 10px); line-height: 1; color: #fff; background-color: #212121; border-radius: 999px; } @media (width >= 1025px) { .p-news__headerInfoCat { padding: 0.4rem 1.5rem 0.5rem; font-size: max(1.0769230769em, 10px); } } .p-news__headerInfoCat > span { display: block; scale: 0.9; } @media (width >= 1025px) { .p-news__headerInfoCat > span { scale: 1; } } .p-news__headerTitle { margin-top: 1.5rem; font-size: max(1.9230769231em, 10px); font-weight: 700; line-height: 1.32; } @media (width >= 1025px) { .p-news__headerTitle { font-size: max(3.5384615385em, 10px); line-height: 1.5652173913; } } .p-news__headerBcFrame { margin-top: 4rem; } @media (width >= 1025px) { .p-news__headerBcFrame { margin-top: 8rem; } } .p-news__detailFrame { padding: 4rem 2rem 4.5rem; background-color: #fff; } .p-news__detailFrame { position: relative; } .p-news__detailFrame::before { position: absolute; top: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } @media (width >= 1025px) { .p-news__detailFrame::before { right: -6.25vw; left: -6.25vw; } } .p-news__detailFrame { position: relative; } .p-news__detailFrame::after { position: absolute; bottom: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } @media (width >= 1025px) { .p-news__detailFrame::after { right: -6.25vw; left: -6.25vw; } } @media (width >= 1025px) { .p-news__detailFrame { padding: 8rem 10rem 10rem; } } .p-news__editorFrame { max-width: 90rem; margin: 0 auto; } .p-news__btnFrame { display: flex; justify-content: center; margin-top: 5rem; } @media (width >= 1025px) { .p-news__btnFrame { margin-top: 8rem; } } .p-news__btnFrame > * { translate: 15% 0; } /* -------------------------------------------- 404 -------------------------------------------- */ .p-404__text { line-height: 1.9230769231; } @media (width >= 1025px) { .p-404__text { font-size: max(1.2307692308em, 10px); line-height: 2; text-align: center; } } .p-404__btnFrame { display: flex; justify-content: center; margin-top: 3rem; } @media (width >= 1025px) { .p-404__btnFrame { margin-top: 5rem; } } /* -------------------------------------------- VALUE -------------------------------------------- */ .p-recruitVal { padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitVal { padding-bottom: 15rem; } } .p-recruitVal__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-recruitVal__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- BUSINESS -------------------------------------------- */ .p-aboutBiz { padding-bottom: 10rem; } @media (width >= 1025px) { .p-aboutBiz { padding-bottom: 15rem; } } .p-aboutBiz__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-aboutBiz__titleFrame { margin-bottom: 10rem; } } .p-aboutBiz__serviceFrame { margin-top: 5rem; margin-left: -1px; } @media (width >= 1025px) { .p-aboutBiz__serviceFrame { margin-top: 8rem; } } /* -------------------------------------------- DESCRIPTION -------------------------------------------- */ .p-aboutBizDesc { display: grid; gap: 3rem; } @media (width >= 1025px) { .p-aboutBizDesc { gap: 4rem; } } .p-aboutBizDesc__item { background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } @media (width >= 768px) { .p-aboutBizDesc__item { display: flex; align-items: center; } .p-aboutBizDesc__item:nth-child(odd) { flex-direction: row-reverse; } } .p-aboutBizDesc__pic { width: 100%; aspect-ratio: 670/434; overflow: hidden; border-radius: 2rem; } @media (width >= 768px) { .p-aboutBizDesc__pic { flex-shrink: 0; width: 50%; aspect-ratio: 525/570; border-radius: 2.5rem; } } .p-aboutBizDesc__contFrame { padding: 3.5rem 2rem 4rem; } @media (width >= 768px) { .p-aboutBizDesc__contFrame { flex-shrink: 0; width: 50%; } } @media (width >= 1025px) { .p-aboutBizDesc__contFrame { padding: 6rem; } } .p-aboutBizDesc__title { margin-bottom: 1.5rem; font-size: max(1.3076923077em, 10px); font-weight: 700; line-height: 1.3529411765; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-aboutBizDesc__title { margin-bottom: 2.5rem; font-size: max(1.8461538462em, 10px); } } .p-aboutBizDesc__text { line-height: 1.9230769231; } @media (width >= 1025px) { .p-aboutBizDesc__text { font-size: max(1.2307692308em, 10px); } } .p-aboutBizDesc__listFrame { padding: 2rem; margin-top: 2.5rem; font-size: max(0.9230769231em, 10px); letter-spacing: 0; background-color: #f8f8f8; } @media (width >= 1025px) { .p-aboutBizDesc__listFrame { padding: 3.5rem 3rem; margin-top: 3.5rem; font-size: max(1.0769230769em, 10px); } } /* -------------------------------------------- COMPANY -------------------------------------------- */ .p-aboutCo__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-aboutCo__titleFrame { margin-bottom: 10rem; } } .p-aboutCo__defineFrame { padding: 4rem 2rem 1rem; background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-aboutCo__defineFrame { padding: 8rem 10rem 4rem; } } /* -------------------------------------------- FLOW -------------------------------------------- */ .p-aboutFlow { padding-bottom: 10rem; } @media (width >= 1025px) { .p-aboutFlow { padding-bottom: 15rem; } } .p-aboutFlow__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-aboutFlow__titleFrame { margin-bottom: 10rem; } } .p-aboutFlow__techFrame { margin-top: 5rem; } @media (width >= 1025px) { .p-aboutFlow__techFrame { margin-top: 6rem; } } /* -------------------------------------------- TECH -------------------------------------------- */ .p-aboutFlowTech { overflow: hidden; background-color: #eceeef; border-radius: 3rem; } @media (width >= 1025px) { .p-aboutFlowTech { border-radius: 4rem; } } .p-aboutFlowTech__btn { position: relative; display: block; width: 100%; padding: 2rem 6rem; font-size: max(1.0769230769em, 10px); font-weight: 700; line-height: 1; text-align: center; } @media (width >= 1025px) { .p-aboutFlowTech__btn { padding: 3rem 10rem; font-size: max(1.3846153846em, 10px); } } .p-aboutFlowTech__btn::before, .p-aboutFlowTech__btn::after { position: absolute; top: 0; right: 3rem; bottom: 0; width: 1.6rem; height: 1px; margin: auto; content: ""; background-color: #454545; transition: 0.3s; } @media (width >= 1025px) { .p-aboutFlowTech__btn::before, .p-aboutFlowTech__btn::after { right: 6rem; width: 1.8rem; height: 2px; } } .p-aboutFlowTech__btn::after { rotate: 90deg; } .p-aboutFlowTech__btn.is-act::before { opacity: 0; } .p-aboutFlowTech__btn.is-act::after { rotate: 0deg; } .p-aboutFlowTech__accFrame { display: none; } .p-aboutFlowTech__typeFrame { display: grid; gap: 1rem; padding: 2rem; border-top: 1px solid #dbddde; } @media (width >= 1025px) { .p-aboutFlowTech__typeFrame { padding: 3rem; } } .p-aboutFlowTech__typeItem { padding: 2rem 2rem 2.5rem; background-color: #fff; } @media (width >= 1025px) { .p-aboutFlowTech__typeItem { display: grid; grid-template-columns: 22rem minmax(0, 1fr); padding: 4rem 4rem 4rem 0; } } .p-aboutFlowTech__typeTitle { padding-bottom: 2rem; margin-bottom: 2rem; font-size: max(1.0769230769em, 10px); font-weight: 700; line-height: 1; text-align: center; border-bottom: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-aboutFlowTech__typeTitle { display: flex; align-items: center; justify-content: center; padding: 0 2rem; margin-bottom: 0; font-size: max(1.3846153846em, 10px); border-right: 1px solid #f2f3f4; border-bottom: none; } } @media (width >= 1025px) { .p-aboutFlowTech__typeContFrame { padding-left: 4rem; font-size: max(1.0769230769em, 10px); } } /* -------------------------------------------- MESSAGE -------------------------------------------- */ .p-aboutMsg { padding-bottom: 10rem; } @media (width >= 1025px) { .p-aboutMsg { padding-bottom: 15rem; } } .p-aboutMsg__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-aboutMsg__titleFrame { margin-bottom: 10rem; } } .p-aboutMsg__contFrame { padding-bottom: 4.5rem; background-color: #fff; border-bottom: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-aboutMsg__contFrame { padding-bottom: 9rem; } } .p-aboutMsg__ceoPicFrame { margin-bottom: 4.5rem; } @media (width >= 1025px) { .p-aboutMsg__ceoPicFrame { margin-bottom: 6rem; } } .p-aboutMsg__ceoPic { aspect-ratio: 750/450; margin: 0 -5.3333333333vw; } @media (width >= 1025px) { .p-aboutMsg__ceoPic { aspect-ratio: 1050/450; margin: 0; } } .p-aboutMsg__ceoText { margin-top: 1.5rem; line-height: 1.1; text-align: right; } @media (width >= 1025px) { .p-aboutMsg__ceoText { font-size: max(1.0769230769em, 10px); } } .p-aboutMsg__ceoText > span { display: inline-block; margin-right: 0.8rem; font-size: max(0.8461538462em, 10px); } @media (width >= 1025px) { .p-aboutMsg__ceoText > span { font-size: max(0.8571428571em, 10px); } } .p-aboutMsg__textFrame { padding: 0 5.3333333333vw; } @media (width >= 1025px) { .p-aboutMsg__textFrame { padding: 0; } } .p-aboutMsg__catchFrame { margin-bottom: 3.5rem; } @media (width >= 1025px) { .p-aboutMsg__catchFrame { margin-bottom: 5rem; } } .p-aboutMsg__purposeFrame { margin-top: 3rem; } @media (width >= 1025px) { .p-aboutMsg__purposeFrame { margin-top: 0; } } /* -------------------------------------------- PURPOSE -------------------------------------------- */ .p-aboutMsgPurpose { display: grid; gap: 3rem; } @media (width >= 1025px) { .p-aboutMsgPurpose { gap: 0; } } .p-aboutMsgPurpose__item { background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } @media (width >= 768px) { .p-aboutMsgPurpose__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } } .p-aboutMsgPurpose__pic { width: 100%; aspect-ratio: 670/300; } @media (width >= 768px) { .p-aboutMsgPurpose__pic { aspect-ratio: 350/300; } } .p-aboutMsgPurpose__contFrame { padding: 3rem 2rem; text-align: center; border-top: 1px solid #f2f3f4; } @media (width >= 768px) { .p-aboutMsgPurpose__contFrame { display: flex; flex-direction: column; justify-content: center; text-align: left; border-top: none; border-left: 1px solid #f2f3f4; } } @media (width >= 1025px) { .p-aboutMsgPurpose__contFrame { padding: 5rem 6rem; } } .p-aboutMsgPurpose__title { margin-bottom: 1.2rem; font-family: "Hind", sans-serif; font-size: max(2.3076923077em, 10px); font-weight: 500; line-height: 1.1; letter-spacing: 0; } @media (width >= 1025px) { .p-aboutMsgPurpose__title { margin-bottom: 2rem; font-family: "Hind", sans-serif; font-size: max(3.0769230769em, 10px); font-weight: 500; } } .p-aboutMsgPurpose__text { line-height: 1.7692307692; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-aboutMsgPurpose__text { font-size: max(1.2307692308em, 10px); line-height: 1.875; } } @media (width >= 1025px) { .p-aboutMsgPurpose__text > span { font-size: max(1.125em, 10px); } } /* -------------------------------------------- VALUE -------------------------------------------- */ .p-aboutVal { padding-bottom: 10rem; } @media (width >= 1025px) { .p-aboutVal { padding-bottom: 15rem; } } .p-aboutVal__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-aboutVal__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- ABOUT -------------------------------------------- */ .p-homeAbout { position: relative; z-index: 1; padding: 15rem 0 17.5rem; overflow: hidden; background: #f8f8f8; } @media (width >= 1025px) { .p-homeAbout { padding: 29rem 0 26rem; } } .p-homeAbout__lottieFrame { position: absolute; bottom: 7rem; left: 50%; z-index: -2; width: 116.8vw; max-width: 50rem; translate: -50% 0; } @media (width >= 1025px) { .p-homeAbout__lottieFrame { bottom: 50%; width: 61.25vw; max-width: 98rem; translate: -86.7346938776% 50%; } } .p-homeAbout__lottieFrame > svg { height: auto !important; } .p-homeAbout__decoFrame { position: absolute; inset: 0; z-index: -1; } .p-homeAbout__decoPic { position: absolute; } .p-homeAbout__decoPic.--deco01 { top: 2.4242424242%; left: 0; width: 22.5rem; opacity: 0.5; filter: blur(1rem); translate: -20%; animation: floatUpDownStrong 5s ease-in-out infinite; } @media (width >= 768px) { .p-homeAbout__decoPic.--deco01 { top: 5.1724137931%; left: 60%; } } @media (width >= 1025px) { .p-homeAbout__decoPic.--deco01 { width: 44.5rem; filter: blur(2rem); } } .p-homeAbout__decoPic.--deco02 { right: 5.3333333333%; bottom: 38.7878787879%; width: 12.5rem; opacity: 0.9; filter: blur(0.15rem); animation: floatUpDown 5s -2s ease-in-out infinite; } @media (width >= 768px) { .p-homeAbout__decoPic.--deco02 { right: 0; bottom: 9.0517241379%; left: auto; translate: 10%; } } @media (width >= 1025px) { .p-homeAbout__decoPic.--deco02 { width: 24.5rem; filter: blur(0.3rem); } } .p-homeAbout__contFrame { padding: 0 5.3333333333vw; } @media (width >= 1025px) { .p-homeAbout__contFrame { max-width: 50%; padding: 0; margin-left: auto; } } .p-homeAbout__title { margin-bottom: 3.5rem; font-size: max(1.9230769231em, 10px); font-weight: 700; line-height: 1.32; letter-spacing: 0; white-space: nowrap; } @media (width >= 1025px) { .p-homeAbout__title { margin-bottom: 4.5rem; font-size: max(2.4615384615em, 10px); line-height: 1.625; } } .p-homeAbout__textFrame { display: grid; gap: 1.5rem; line-height: 1.7692307692; } @media (width >= 1025px) { .p-homeAbout__textFrame { gap: 2rem; font-size: max(1.2307692308em, 10px); line-height: 2.125; } } .p-homeAbout__btnFrame { margin-top: 4rem; } /* -------------------------------------------- BUSINESS -------------------------------------------- */ .p-homeBusiness { padding: 10rem 0; overflow: hidden; } @media (width >= 1025px) { .p-homeBusiness { padding: 15rem 0; } } @media (width >= 1025px) { .p-homeBusiness__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 1025px) { .p-homeBusiness__titleFrame { padding-right: 2rem; background-color: #fff; } } .p-homeBusiness__bgFrame { padding-top: 5.5rem; } @media (width >= 1025px) { .p-homeBusiness__bgFrame { padding-top: 9rem; background-color: #fff; } } .p-homeBusiness__text { line-height: 1.7692307692; } @media (width >= 1025px) { .p-homeBusiness__text { padding-right: 2rem; font-size: max(1.2307692308em, 10px); line-height: 2; } } .p-homeBusiness__link { display: grid; gap: 1rem 0; margin-top: 4rem; } @media (width >= 768px) { .p-homeBusiness__link { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 1025px) { .p-homeBusiness__link { display: block; gap: 0; margin-top: 5rem; } } .p-homeBusiness__linkItem { border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } @media (width >= 768px) { .p-homeBusiness__linkItem:nth-child(even) { border-left: 1px solid #f2f3f4; } } @media (width >= 1025px) { .p-homeBusiness__linkItem { margin-top: -1px; } .p-homeBusiness__linkItem:nth-child(even) { border-left: none; } } .p-homeBusiness__linkAnc { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background-color: #fff; } @media (hover: hover) { .p-homeBusiness__linkAnc:hover { z-index: 1; box-shadow: 0 0 2.3rem 0 rgba(0, 0, 0, 0.12); } .p-homeBusiness__linkAnc:hover .p-homeBusiness__linkArrowFrame { background-color: #ff9d00; border-color: #ff9d00; scale: 1.55; } .p-homeBusiness__linkAnc:hover .p-homeBusiness__linkArrow { color: #fff; } } @media (width >= 1025px) { .p-homeBusiness__linkAnc { position: relative; display: block; } } .p-homeBusiness__linkPic { width: 100%; overflow: hidden; border-radius: 1.25rem; } @media (width >= 1025px) { .p-homeBusiness__linkPic { display: none; } } .p-homeBusiness__linkContFrame { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1rem 3rem; } @media (width >= 1025px) { .p-homeBusiness__linkContFrame { padding: 2rem 4rem 2.5rem; } } .p-homeBusiness__linkNum { margin-bottom: 1rem; font-family: "Hind", sans-serif; font-size: max(0.8461538462em, 10px); font-weight: 600; line-height: 1; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-homeBusiness__linkNum { font-size: max(1.0769230769em, 10px); } } .p-homeBusiness__linkTitle { font-size: max(1.0769230769em, 10px); font-weight: 700; line-height: 1.3571428571; letter-spacing: 0.02em; } @media (width >= 1025px) { .p-homeBusiness__linkTitle { font-size: max(1.5384615385em, 10px); } } .p-homeBusiness__linkArrowFrame { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid rgba(33, 33, 33, 0.9); border-radius: 999px; transition: 0.3s; } @media (width >= 1025px) { .p-homeBusiness__linkArrowFrame { top: 0; right: 4rem; bottom: 0; width: 3.6rem; height: 3.6rem; margin: auto; } } .p-homeBusiness__linkArrow { width: 0.9rem; height: 0.9rem; transition: fill 0.3s; } @media (width >= 1025px) { .p-homeBusiness__picFrame { position: relative; z-index: 2; } } .p-homeBusiness__pic { position: absolute; inset: 0; overflow: hidden; border-radius: 2.5rem; opacity: 0; transition: opacity 0.3s; } .is-web .p-homeBusiness__pic.--web { opacity: 1; } .is-app .p-homeBusiness__pic.--app { opacity: 1; } .is-system .p-homeBusiness__pic.--system { opacity: 1; } .is-auto .p-homeBusiness__pic.--auto { opacity: 1; } .p-homeBusiness__logoFrame { position: relative; margin-top: 4rem; margin-right: -1px; margin-left: -1px; } @media (width >= 1025px) { .p-homeBusiness__logoFrame { margin-top: 8rem; margin-right: 0; } } .p-homeBusiness__logoFrame::before, .p-homeBusiness__logoFrame::after { position: absolute; top: 0; z-index: 1; display: block; width: 200vw; height: 1px; content: ""; background-color: #f2f3f4; translate: -50vw; } .p-homeBusiness__logoFrame::after { top: auto; bottom: 0; } /* -------------------------------------------- CASE -------------------------------------------- */ .p-homeCase { position: relative; z-index: 1; padding: 10rem 0; } @media (width >= 1025px) { .p-homeCase { padding: 15rem 0 6rem; } } .p-homeCase::before { position: absolute; inset: 0; z-index: -3; content: ""; background-color: #eceeef; border-radius: 3rem; } @media (width >= 1025px) { .p-homeCase::before { right: 2rem; left: 2rem; } } .p-homeCase__lottieFrame { position: absolute; inset: 0; z-index: -2; } .p-homeCase__lottieInner { position: absolute; top: 3rem; left: 50%; width: 213.3333333333vw; max-width: 100rem; translate: -63% 0; } @media (width >= 1025px) { .p-homeCase__lottieInner { top: 5rem; width: 109.125vw; max-width: 174.6rem; translate: -50% 0; } } .p-homeCase__lottieInner > svg { height: auto !important; } .p-homeCase__decoFrame { position: absolute; inset: 0; z-index: -1; } .p-homeCase__decoPic { position: absolute; right: 0; bottom: 0; width: 9rem; translate: -50% 33.3333333333%; animation: floatUpDown 5s ease-in-out infinite; } @media (width >= 768px) { .p-homeCase__decoPic { right: auto; left: 0; translate: 124.3243243243% 33.3333333333%; } } @media (width >= 1025px) { .p-homeCase__decoPic { width: 18.5rem; } } .p-homeCase__titleFrame { margin-bottom: 5.5rem; } @media (width >= 1025px) { .p-homeCase__titleFrame { margin-bottom: 9rem; } } .p-homeCase__text { line-height: 1.7692307692; } @media (width >= 1025px) { .p-homeCase__text { font-size: max(1.2307692308em, 10px); line-height: 2; } } .p-homeCase__listFrame, .p-homeCase__btnFrame { margin-top: 4.5rem; } @media (width >= 1025px) { .p-homeCase__btnFrame { display: flex; justify-content: flex-end; } } /* -------------------------------------------- MV -------------------------------------------- */ .p-homeMv { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100svh; padding: 2rem 0 1rem; overflow: hidden; background: #f8f8f8; } @media (width >= 768px) { .p-homeMv { padding: 14rem 0 2rem; } } .p-homeMv__lottieFrame { position: absolute; top: 0; bottom: 0; left: 50%; z-index: -3; display: flex; align-items: center; width: 170.6vw; opacity: 0.2; translate: -50% -8%; } @media (width >= 768px) { .p-homeMv__lottieFrame { top: auto; bottom: 50%; left: 30%; width: 155vw; max-width: 248rem; translate: -50% 50%; } } @media (width >= 1025px) { .p-homeMv__lottieFrame { bottom: 0; translate: -50% 8.606557377%; } } .p-homeMv__lottieFrame > svg { height: auto !important; } .p-homeMv__decoFrame { position: absolute; inset: 0; z-index: -1; } .p-homeMv__decoPic { position: absolute; animation: floatUpDown 5s ease-in-out infinite; } .p-homeMv__decoPic.--deco01 { top: 11.9940029985%; right: 8%; width: 12rem; } @media (width >= 768px) { .p-homeMv__decoPic.--deco01 { top: 6.7708333333%; right: 49%; width: 20rem; } } @media (width >= 1025px) { .p-homeMv__decoPic.--deco01 { width: 28rem; } } .p-homeMv__decoPic.--deco02 { top: 29.9850074963%; left: 4.0625%; width: 6.2rem; animation-delay: -2s; } @media (width >= 768px) { .p-homeMv__decoPic.--deco02 { top: auto; bottom: 16.6666666667%; left: 12.1875%; width: 11rem; } } @media (width >= 1025px) { .p-homeMv__decoPic.--deco02 { width: 17.5rem; } } .p-homeMv__decoPic.--deco03 { top: 56.2218890555%; right: 17.3%; width: 4rem; animation-duration: 4s; animation-delay: -4s; } @media (width >= 768px) { .p-homeMv__decoPic.--deco03 { top: auto; right: 9.6875%; bottom: 11.9791666667%; width: 6rem; } } @media (width >= 1025px) { .p-homeMv__decoPic.--deco03 { width: 10rem; } } .p-homeMv__inner { position: relative; display: flex; flex: 1; flex-direction: column; gap: 3rem; justify-content: center; } @media (width >= 768px) { .p-homeMv__inner { gap: 10rem; } } .p-homeMv__mainFrame { display: flex; flex: 1; flex-direction: column; justify-content: center; } .p-homeMv__triangleFrame { position: relative; left: -10.3333333333vw; z-index: -2; width: 109vw; } @media (hover: hover) { .p-homeMv__triangleFrame { perspective: 200rem; } } @media (width >= 768px) { .p-homeMv__triangleFrame { position: absolute; top: 40%; right: 0; left: auto; width: 66.875%; max-width: 107rem; translate: 12% -50%; } } .p-homeMv__trianglePic { width: 100%; aspect-ratio: 801/812; } @media (hover: hover) { .p-homeMv__trianglePic { transform-style: preserve-3d; } } @media (width >= 768px) { .p-homeMv__trianglePic { aspect-ratio: 1067/1148; } } .p-homeMv__trianglePic.--shadow { position: absolute; inset: 0; z-index: -1; filter: blur(1.5rem); } @media (width >= 768px) { .p-homeMv__trianglePic.--shadow { filter: blur(3rem); } } .p-homeMv__catchMain { font-family: "Hind", sans-serif; font-size: max(3.8461538462em, 10px); font-weight: 700; line-height: 0.9; letter-spacing: 0; position: relative; } .p-homeMv__catchMain > span::after { display: inline-block; width: 0.05em; height: 1.3cap; margin-left: 0.2em; vertical-align: -0.15cap; content: ""; background-color: currentcolor; animation: blink 1.2s infinite step-end; } .p-homeMv__catchMain > span[aria-hidden] { visibility: hidden; opacity: 0; } .p-homeMv__catchMain > span[data-text] { position: absolute; top: 0; left: 0; } .p-homeMv__catchMain > span[data-text][data-en]::after { height: 1cap; vertical-align: initial; } @media (width >= 768px) { .p-homeMv__catchMain { font-size: max(5.4285714286em, 10px); } } @media (width >= 1025px) { .p-homeMv__catchMain { font-size: max(9.2307692308em, 10px); } } .p-homeMv__catchSup { margin-top: 0.5rem; font-weight: 600; line-height: 1.5384615385; letter-spacing: 0.04em; position: relative; } .p-homeMv__catchSup > span::after { display: inline-block; width: 0.05em; height: 1.3cap; margin-left: 0.2em; vertical-align: -0.15cap; content: ""; background-color: currentcolor; animation: blink 1.2s infinite step-end; } .p-homeMv__catchSup > span[aria-hidden] { visibility: hidden; opacity: 0; } .p-homeMv__catchSup > span[data-text] { position: absolute; top: 0; left: 0; } .p-homeMv__catchSup > span[data-text][data-en]::after { height: 1cap; vertical-align: initial; } @media (width >= 768px) { .p-homeMv__catchSup { font-size: max(1.2857142857em, 10px); } } @media (width >= 1025px) { .p-homeMv__catchSup { font-size: max(1.6923076923em, 10px); } } .p-homeMv__newsFrame { background-color: #f2f3f4; border-radius: 1rem; } @media (width >= 1025px) { .p-homeMv__newsFrame { --titleWidth: 8.5rem; padding: 0 4rem; border-radius: 999px; } } @media (width >= 1025px) { .p-homeMv__newsLayout { display: flex; gap: 4rem; } } @media (width >= 1025px) { .p-homeMv__newsTitleFrame { position: relative; display: flex; align-items: center; width: var(--titleWidth); padding-right: 2rem; } .p-homeMv__newsTitleFrame::before { position: absolute; top: 1rem; right: 0; bottom: 1rem; width: 1px; content: ""; background-color: rgba(33, 33, 33, 0.1); } } @media (width >= 1025px) { .p-homeMv__newsTitle { font-family: "Hind", sans-serif; font-size: max(1.1538461538em, 10px); font-weight: 600; line-height: 1.1; letter-spacing: 0.08em; } } @media (width >= 1025px) { .p-homeMv__newsSlideFrame { width: calc(100% - var(--titleWidth)); } } .p-homeMv.js-anime .p-homeMv__decoFrame, .p-homeMv.js-anime .p-homeMv__triangleFrame { opacity: 0; scale: 0.95; transition: 1s 1s; } .p-homeMv.js-anime .p-homeMv__decoFrame { scale: 1.05; } .p-homeMv.js-anime .p-homeMv__catch { opacity: 0; transition: opacity 0s 1.2s; } .p-homeMv.js-anime .p-homeMv__newsFrame { opacity: 0; transition: opacity 1s 2.4s; } .p-homeMv.js-anime.is-anime .p-homeMv__decoFrame, .p-homeMv.js-anime.is-anime .p-homeMv__triangleFrame, .p-homeMv.js-anime.is-anime .p-homeMv__catch, .p-homeMv.js-anime.is-anime .p-homeMv__newsFrame { opacity: 1; scale: 1; } /* -------------------------------------------- NEWS SLIDE -------------------------------------------- */ .p-homeMvSplide { position: relative; padding: 1rem 2rem; } @media (width >= 1025px) { .p-homeMvSplide { display: flex; flex-direction: row-reverse; gap: 4rem; align-items: center; padding: 0; } } .p-homeMvSplide__arrows { position: absolute; top: 1rem; right: 2rem; z-index: 1; display: flex; gap: 0.8rem; align-items: center; } @media (width >= 1025px) { .p-homeMvSplide__arrows { position: static; flex-shrink: 0; gap: 1.5rem; } } .p-homeMvSplide__arrow { display: block; width: 1.1rem; height: 1.5rem; } @media (hover: hover) { .p-homeMvSplide__arrow:hover { opacity: 0.7; } } @media (width >= 1025px) { .p-homeMvSplide__arrow { width: 1.3rem; } } .p-homeMvSplide__arrow.--prev { scale: -1 1; } .p-homeMvSplide__arrow[disabled] { pointer-events: none; opacity: 0.2; } .p-homeMvSplide__arrowIcon { width: 100%; height: 100%; } .p-homeMvSplide__track { flex: 1; } .p-homeMvSplide__anc { display: flex; flex-direction: column; gap: 0.8rem; line-height: 1; letter-spacing: 0.08em; } @media (hover: hover) { .p-homeMvSplide__anc:hover .p-homeMvSplide__text { text-decoration: underline; } } @media (width >= 1025px) { .p-homeMvSplide__anc { flex-direction: row; gap: 1.5rem; padding: 1.7rem 0; } } .p-homeMvSplide__infoFrame { display: flex; gap: 0.8rem; align-items: center; } @media (width >= 1025px) { .p-homeMvSplide__infoFrame { flex-shrink: 0; gap: 1.5rem; } } .p-homeMvSplide__date { font-family: "Hind", sans-serif; font-size: max(0.7692307692em, 10px); } @media (width >= 1025px) { .p-homeMvSplide__date { font-size: max(1.1538461538em, 10px); } } .p-homeMvSplide__cat { padding: 0.2rem 0.5rem 0.3rem; font-size: max(0.7692307692em, 10px); color: #fff; background-color: #212121; border-radius: 999px; } @media (width >= 1025px) { .p-homeMvSplide__cat { padding: 0.4rem 1.2rem; font-size: max(0.8461538462em, 10px); } } .p-homeMvSplide__cat > span { display: block; scale: 0.9; } @media (width >= 1025px) { .p-homeMvSplide__cat > span { scale: 1; } } .p-homeMvSplide__text { overflow: hidden; text-overflow: ellipsis; font-size: max(0.8461538462em, 10px); white-space: nowrap; } @media (width >= 1025px) { .p-homeMvSplide__text { font-size: max(1.0769230769em, 10px); } } /* -------------------------------------------- NEWS -------------------------------------------- */ .p-homeNews { padding: 10rem 0; } @media (width >= 1025px) { .p-homeNews { padding: 15rem 0; } } @media (width >= 1025px) { .p-homeNews__inner { position: relative; z-index: 1; } .p-homeNews__inner::after { position: absolute; bottom: 0; left: 0; z-index: -1; display: block; width: 200vw; height: 1px; content: ""; background-color: #f2f3f4; translate: -50vw; } } @media (width >= 1025px) { .p-homeNews__titleFrame { position: relative; z-index: 1; } .p-homeNews__titleFrame::before, .p-homeNews__titleFrame::after { position: absolute; top: 0; bottom: 0; left: 0; width: 33%; content: ""; background-color: #fff; } .p-homeNews__titleFrame::after { right: 0; left: auto; } } .p-homeNews__layout { padding-top: 8rem; background-color: #fff; } @media (width >= 1025px) { .p-homeNews__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); padding-top: 9rem; background-color: transparent; } } .p-homeNews__tabBtnFrame { margin-bottom: 2.5rem; } @media (width >= 1025px) { .p-homeNews__tabBtnFrame { display: flex; flex-direction: column; gap: 5rem; margin-bottom: 0; } } @media (width >= 1025px) { .p-homeNews__tabContFrame { padding-left: 1px; } } .p-homeNews__tabContItem { display: none; } .p-homeNews__tabContItem.is-act { display: block !important; } .p-homeNews__btnFrame { margin-top: 2.5rem; } /* -------------------------------------------- TAB -------------------------------------------- */ .p-homeNewsTab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } @media (width >= 1025px) { .p-homeNewsTab { grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 13rem; } } .p-homeNewsTab__anc { display: block; padding: 0.6rem 1rem; font-size: max(0.8461538462em, 10px); line-height: 1; text-align: center; border: 1px solid #dcdcdc; border-radius: 999px; transition: 0.3s; } @media (hover: hover) { .p-homeNewsTab__anc:hover { background-color: #eceeef; } } @media (width >= 1025px) { .p-homeNewsTab__anc { padding: 1rem 1.5rem; font-size: max(1.0769230769em, 10px); } } .p-homeNewsTab__anc.is-act { color: #fff; pointer-events: none; background-color: #ff9d00; border-color: #ff9d00; } /* -------------------------------------------- RECRUIT -------------------------------------------- */ .p-homeRecruit { position: relative; z-index: 1; padding: 10rem 0; color: #fff; } @media (width >= 1025px) { .p-homeRecruit { padding: 15rem 0 10rem; } } .p-homeRecruit::before { position: absolute; inset: 0; z-index: -3; content: ""; background-color: #ff9d00; border-radius: 3rem; } @media (width >= 1025px) { .p-homeRecruit::before { right: 2rem; left: 2rem; } } .p-homeRecruit__lottieFrame { position: absolute; inset: 0; z-index: -2; scale: -1 1; } .p-homeRecruit__lottieInner { position: absolute; top: 5rem; left: 50%; width: 213.3333333333vw; max-width: 100rem; translate: -63% 0; } @media (width >= 1025px) { .p-homeRecruit__lottieInner { top: 5rem; width: 109.125vw; max-width: 174.6rem; translate: -50% 0; } } .p-homeRecruit__lottieInner > svg { height: auto !important; } .p-homeRecruit__decoFrame { position: absolute; inset: 0; z-index: -1; } .p-homeRecruit__decoPic { position: absolute; top: 0; right: 0; width: 6.5rem; translate: 24% -40%; animation: floatUpDown 5s -2s ease-in-out infinite; } @media (width >= 768px) { .p-homeRecruit__decoPic { right: 0; translate: -180% -40%; } } @media (width >= 1025px) { .p-homeRecruit__decoPic { width: 12.5rem; } } .p-homeRecruit__layout { display: flex; flex-direction: column; gap: 7rem; } @media (width >= 1025px) { .p-homeRecruit__layout { flex-direction: row; gap: 5rem; } } @media (width >= 1025px) { .p-homeRecruit__titleFrame { flex: 1; } } @media (width >= 1025px) { .p-homeRecruit__contFrame { width: 50%; } } .p-homeRecruit__text { font-size: max(1.1538461538em, 10px); font-weight: 500; line-height: 1.8666666667; } @media (width >= 1025px) { .p-homeRecruit__text { font-size: max(1.8461538462em, 10px); line-height: 2; } } .p-homeRecruit__btnFrame { margin-top: 3rem; } @media (width >= 1025px) { .p-homeRecruit__btnFrame { margin-top: 4rem; } } .p-homeRecruit__loopFrame { margin-top: 3rem; } @media (width >= 1025px) { .p-homeRecruit__loopFrame { margin-top: 6rem; } } /* -------------------------------------------- BENEFITS -------------------------------------------- */ .p-recruitBenefits { padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitBenefits { padding-bottom: 15rem; } } .p-recruitBenefits__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-recruitBenefits__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- FLOW -------------------------------------------- */ .p-recruitFlow__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-recruitFlow__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-recruitFlowList { display: grid; gap: 3rem; padding: 4rem 2rem; counter-reset: number 0; background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-recruitFlowList { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4.5rem; padding: 5rem 4rem; } } .p-recruitFlowList__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 6rem; padding: 1rem 2rem; text-align: center; background-color: #f8f8f8; border-radius: 999px; } @media (width >= 1025px) { .p-recruitFlowList__item { width: 16rem; height: auto; aspect-ratio: 1; } } .p-recruitFlowList__item::before { position: absolute; top: 50%; left: 2rem; padding: 0.5rem 1.6rem 0.4rem; margin: auto; font-family: "Hind", sans-serif; font-size: max(0.9230769231em, 10px); font-weight: 700; line-height: 1; color: #fff; content: counter(number, decimal-leading-zero); counter-increment: number 1; background-color: #ff9d00; border-radius: 999px; translate: 0 -50%; } @media (width >= 1025px) { .p-recruitFlowList__item::before { top: 1rem; left: 0; padding: 0.6rem 1.8rem 0.4rem; font-size: max(1.0769230769em, 10px); translate: 0; } } .p-recruitFlowList__item + .p-recruitFlowList__item::after { position: absolute; right: 0; bottom: calc(100% + 0.9rem); left: 0; display: block; width: 0; height: 0; margin: auto; content: ""; border-color: #212121 transparent transparent; border-style: solid; border-width: 1rem 0.8rem 0; } @media (width >= 1025px) { .p-recruitFlowList__item + .p-recruitFlowList__item::after { inset: 0 calc(100% + 1.3rem) 0 auto; border-color: transparent transparent transparent #212121; border-width: 1rem 0 1rem 1.4rem; } } .p-recruitFlowList__text { font-size: max(1.0769230769em, 10px); font-weight: 700; line-height: 1.2; } @media (width >= 1025px) { .p-recruitFlowList__text { font-size: max(1.3846153846em, 10px); } } .p-recruitFlowList__text > span { font-size: max(0.7857142857em, 10px); } @media (width >= 1025px) { .p-recruitFlowList__text > span { font-size: max(0.7222222222em, 10px); } } /* -------------------------------------------- INTERVIEW -------------------------------------------- */ .p-recruitIntv { padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitIntv { padding-bottom: 15rem; } } .p-recruitIntv__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-recruitIntv__titleFrame { margin-bottom: 10rem; } } .p-recruitIntv__btnFrame { display: flex; justify-content: center; margin-top: 5rem; } @media (width >= 1025px) { .p-recruitIntv__btnFrame { justify-content: flex-end; margin-top: 4rem; } } .p-recruitIntv__btnFrame > * { translate: 15% 0; } @media (width >= 1025px) { .p-recruitIntv__btnFrame > * { translate: unset; } } /* -------------------------------------------- JOB -------------------------------------------- */ .p-recruitJob { padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitJob { padding-bottom: 15rem; } } .p-recruitJob__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-recruitJob__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- TAB -------------------------------------------- */ .p-recruitJobTab { background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } .p-recruitJobTab__btnFrame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (width >= 1025px) { .p-recruitJobTab__btnFrame { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .p-recruitJobTab__btn { padding: 1.7rem; font-size: max(0.9230769231em, 10px); font-weight: 700; line-height: 1.3; text-align: center; letter-spacing: 0.08em; transition: 0.3s; } @media (width >= 1025px) { .p-recruitJobTab__btn { padding: 2rem; font-size: max(1.3846153846em, 10px); } } .p-recruitJobTab__btn.is-act { color: #fff; pointer-events: none; background-color: #212121; } .p-recruitJobTab__contFrame { padding: 4rem 2rem 1rem; border-top: 1px solid #f2f3f4; } @media (width >= 768px) { .p-recruitJobTab__contFrame { padding: 5.5rem 5rem 2rem; } } @media (width >= 1025px) { .p-recruitJobTab__contFrame { padding: 8rem 10rem 4rem; } } .p-recruitJobTab__contItem:not(.is-act) { display: none; } /* -------------------------------------------- LOOK FOR -------------------------------------------- */ .p-recruitLookfor { padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitLookfor { padding-bottom: 15rem; } } .p-recruitLookfor__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-recruitLookfor__titleFrame { margin-bottom: 10rem; } } .p-recruitLookfor__titleFrame .c-titleTyping__main { letter-spacing: -0.05em; white-space: nowrap; } /* -------------------------------------------- POINT -------------------------------------------- */ .p-recruitLookforPoint { border-top: 1px solid #f2f3f4; } .p-recruitLookforPoint__item { position: relative; padding: 3.5rem 2rem 4rem; background-color: #fff; border-bottom: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-recruitLookforPoint__item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; } } @media (width >= 1600px) { .p-recruitLookforPoint__item { grid-template-columns: 52.5rem minmax(0, 1fr); } } .p-recruitLookforPoint__item::before { position: absolute; top: 0; left: 0; width: 6rem; height: 2px; content: ""; background-color: #ff9d00; } .p-recruitLookforPoint__title { margin-bottom: 1.5rem; font-size: max(1.3076923077em, 10px); font-weight: 700; line-height: 1.3; } @media (width >= 1025px) { .p-recruitLookforPoint__title { display: flex; flex-direction: column; justify-content: center; padding: 5rem 6rem; margin-bottom: 0; font-size: max(1.5384615385em, 10px); } } @media (width >= 1280px) { .p-recruitLookforPoint__title { padding: 5rem 8rem; } } @media (width >= 1025px) { .p-recruitLookforPoint__contFrame { padding: 5rem; padding-left: 0; font-size: max(1.2307692308em, 10px); line-height: 2; } } /* -------------------------------------------- MESSAGE -------------------------------------------- */ .p-recruitMsg { position: relative; z-index: 1; padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitMsg { padding-bottom: 15rem; } } .p-recruitMsg__decoFrame { position: absolute; inset: 0; z-index: -1; } .p-recruitMsg__decoPic { position: absolute; } .p-recruitMsg__decoPic.--deco01 { top: 0; right: 0; width: 9rem; opacity: 0.9; translate: 11.1111111111% 50%; animation: floatUpDownWeek 5s -2s ease-in-out infinite; } @media (width >= 1025px) { .p-recruitMsg__decoPic.--deco01 { width: 18rem; translate: -27.7777777778% 27.7777777778%; } } .p-recruitMsg__decoPic.--deco02 { bottom: 0; left: 0; width: 22.5rem; opacity: 0.4; filter: blur(1rem); translate: -24.4444444444% -31.1111111111%; animation: floatUpDown 5s ease-in-out infinite; } @media (width >= 1025px) { .p-recruitMsg__decoPic.--deco02 { width: 44.5rem; filter: blur(2rem); translate: -38.202247191% -17.9775280899%; } } .p-recruitMsg__contFrame { position: relative; padding-top: 8rem; padding-bottom: 4.5rem; } @media (width >= 1025px) { .p-recruitMsg__contFrame { padding-top: 16rem; padding-bottom: 9rem; } } .p-recruitMsg__contFrame::before, .p-recruitMsg__contFrame::after { position: absolute; z-index: -2; content: ""; } .p-recruitMsg__contFrame::before { inset: 0; background-color: #fff; } .p-recruitMsg__contFrame::after { right: 0; bottom: 0; left: 0; height: 1px; background-color: #f2f3f4; } .p-recruitMsg__textFrame { position: relative; padding: 0 5.3333333333vw; } @media (width >= 1025px) { .p-recruitMsg__textFrame { padding: 0; } } .p-recruitMsg__catchFrame { margin-bottom: 3.5rem; } @media (width >= 1025px) { .p-recruitMsg__catchFrame { margin-bottom: 5rem; } } /* -------------------------------------------- MV -------------------------------------------- */ .p-recruitMv { padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitMv { padding-bottom: 14.5rem; } } .p-recruitMv__frame { position: relative; z-index: 1; display: flex; padding-top: 11rem; overflow: hidden; } @media (width >= 1025px) { .p-recruitMv__frame { min-height: 63rem; padding-top: 10rem; } } @media (width >= 1025px) { .p-recruitMv__inner { display: flex; flex-direction: column; gap: 2rem; } } .p-recruitMv__titleFrame { margin-bottom: 7rem; } @media (width >= 1025px) { .p-recruitMv__titleFrame { display: flex; flex: 1; flex-direction: column; justify-content: center; padding-bottom: 3rem; margin-bottom: 0; } } .p-recruitMv__slideFrame { margin: 0 -5.3333333333vw; } @media (width >= 1025px) { .p-recruitMv__slideFrame { position: absolute; inset: 0 0 0 34%; z-index: -1; display: flex; flex-direction: column; justify-content: flex-end; } .p-recruitMv__slideFrame::before { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: 24rem; content: ""; background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(250, 250, 250) 25%, rgba(242, 242, 242, 0) 60%, rgba(229, 229, 229, 0) 100%); } } .p-recruitMv__bcFrame { margin-top: 3.5rem; } @media (width >= 1025px) { .p-recruitMv__bcFrame { margin-top: 0; } } .p-recruitMv.js-anime .p-recruitMv__frame, .p-recruitMv.js-anime .p-recruitMv__slideFrame { opacity: 0; transition: 1s 0s; } .p-recruitMv.js-anime .p-recruitMv__slideFrame { transition-delay: 0.8s; } .p-recruitMv.js-anime .p-recruitMv__bcFrame { opacity: 0; transition: opacity 1s 1.2s; } .p-recruitMv.js-anime.is-anime .p-recruitMv__frame, .p-recruitMv.js-anime.is-anime .p-recruitMv__slideFrame, .p-recruitMv.js-anime.is-anime .p-recruitMv__bcFrame { opacity: 1; } /* -------------------------------------------- STYLE -------------------------------------------- */ .p-recruitPlace { padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitPlace { padding-bottom: 15rem; } } .p-recruitPlace__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-recruitPlace__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-recruitPlaceList { display: grid; gap: 3rem; } @media (width >= 768px) { .p-recruitPlaceList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 0; } } @media (width >= 1025px) { .p-recruitPlaceList { gap: 4rem 0; margin-left: -1px; } } .p-recruitPlaceList__item { background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } @media (width >= 768px) { .p-recruitPlaceList__item { border-left: 1px solid #f2f3f4; } } @media (width >= 768px) and (width < 1025px) { .p-recruitPlaceList__item:nth-child(odd) { border-left: none; } } .p-recruitPlaceList__pic { width: 100%; aspect-ratio: 670/434; overflow: hidden; border-radius: 2rem; } @media (width >= 1025px) { .p-recruitPlaceList__pic { border-radius: 2.5rem; } } .p-recruitPlaceList__contFrame { padding: 2.5rem 2rem 3rem; } @media (width >= 1025px) { .p-recruitPlaceList__contFrame { padding: 4rem 5.5rem 5rem; } } .p-recruitPlaceList__title { margin-bottom: 2rem; font-size: max(1.3076923077em, 10px); font-weight: 700; line-height: 1.3529411765; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-recruitPlaceList__title { font-size: max(1.8461538462em, 10px); letter-spacing: 0.06em; } } .p-recruitPlaceList__text { line-height: 1.7692307692; } @media (width >= 1025px) { .p-recruitPlaceList__text { font-size: max(1.2307692308em, 10px); line-height: 2; } } /* -------------------------------------------- WORK -------------------------------------------- */ .p-recruitWork { padding-bottom: 10rem; } @media (width >= 1025px) { .p-recruitWork { padding-bottom: 15rem; } } .p-recruitWork__titleFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-recruitWork__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-recruitWorkList { display: grid; gap: 3rem; counter-reset: number 0; } @media (width >= 1025px) { .p-recruitWorkList { gap: 4rem; } } .p-recruitWorkList__item { background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-recruitWorkList__item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } .p-recruitWorkList__pic { width: 100%; aspect-ratio: 670/434; overflow: hidden; border-radius: 2rem; } @media (width >= 1025px) { .p-recruitWorkList__pic { aspect-ratio: unset; border-radius: 2.5rem; } } .p-recruitWorkList__contFrame { padding: 2.5rem 2rem 3.5rem; } @media (width >= 1025px) { .p-recruitWorkList__contFrame { display: flex; flex-direction: column; justify-content: center; padding: 4rem 6rem 5rem; } } .p-recruitWorkList__title { margin-bottom: 2rem; font-size: max(1.3076923077em, 10px); font-weight: 700; line-height: 1.1; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-recruitWorkList__title { font-size: max(1.8461538462em, 10px); } } .p-recruitWorkList__title::before { display: block; margin-bottom: 1rem; font-family: "Hind", sans-serif; font-size: max(0.6470588235em, 10px); font-weight: 600; content: "( " counter(number, decimal-leading-zero) " )"; counter-increment: number 1; } @media (width >= 1025px) { .p-recruitWorkList__title::before { font-size: max(0.5833333333em, 10px); } } .p-recruitWorkList__text { line-height: 1.7692307692; } @media (width >= 1025px) { .p-recruitWorkList__text { font-size: max(1.2307692308em, 10px); line-height: 2; } } /* -------------------------------------------- NEWS -------------------------------------------- */ .p-archiveNews { border-top: 1px solid #f2f3f4; } .p-archiveNews__item { border-bottom: 1px solid #f2f3f4; } .p-archiveNews__anc { position: relative; display: flex; flex-direction: column; gap: 0.8rem; padding: 2rem; padding-right: 6rem; background-color: #fff; } @media (hover: hover) { .p-archiveNews__anc:hover { z-index: 1; box-shadow: 0 0 2.3rem 0 rgba(0, 0, 0, 0.12); } .p-archiveNews__anc:hover .p-archiveNews__arrowFrame { background-color: #ff9d00; border-color: #ff9d00; scale: 1.55; } .p-archiveNews__anc:hover .p-archiveNews__arrow { color: #fff; } } @media (width >= 1025px) { .p-archiveNews__anc { flex-direction: row; gap: 1.5rem; padding: 3.5rem 4rem; padding-right: 13rem; } } .p-archiveNews__infoFrame { display: flex; flex-shrink: 0; gap: 1rem; align-items: center; } @media (width >= 1025px) { .p-archiveNews__infoFrame { gap: 1.5rem; } } .p-archiveNews__date { font-family: "Hind", sans-serif; font-size: max(0.9230769231em, 10px); line-height: 1; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-archiveNews__date { font-size: max(1.2307692308em, 10px); } } .p-archiveNews__cat { padding: 0.2rem 0.5rem 0.3rem; font-size: max(0.7692307692em, 10px); line-height: 1; color: #fff; background-color: #212121; border-radius: 999px; } @media (width >= 1025px) { .p-archiveNews__cat { padding: 0.4rem 1.2rem 0.5rem; font-size: max(1em, 10px); } } .p-archiveNews__cat > span { display: block; scale: 0.9; } @media (width >= 1025px) { .p-archiveNews__cat > span { scale: 1; } } .p-archiveNews__title { line-height: 1.7692307692; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-archiveNews__title { font-size: max(1.2307692308em, 10px); } } .p-archiveNews__arrowFrame { position: absolute; top: 0; right: 2rem; bottom: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: auto; border: 1px solid rgba(33, 33, 33, 0.9); border-radius: 999px; transition: 0.3s; } @media (width >= 1025px) { .p-archiveNews__arrowFrame { right: 4rem; width: 3.6rem; height: 3.6rem; } } .p-archiveNews__arrow { width: 0.9rem; height: 0.9rem; transition: fill 0.3s; } /* -------------------------------------------- CASE -------------------------------------------- */ .p-archiveCase { display: grid; gap: 1rem; } @media (width >= 768px) { .p-archiveCase { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (width >= 1025px) { .p-archiveCase { gap: 4rem; } } .p-archiveCase__anc { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 22rem; padding: 1.8rem; overflow: hidden; color: #fff; background-color: rgba(0, 0, 0, 0.5); border-radius: 2rem; } @media (hover: hover) { .p-archiveCase__anc:hover .p-archiveCase__pic > img { scale: 1.1; } } @media (width >= 1025px) { .p-archiveCase__anc { min-height: 44rem; padding: 2.8rem 3rem; } } .p-archiveCase__anc::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: rgba(0, 0, 0, 0.5); } .p-archiveCase__pic { position: absolute; inset: 0; z-index: -2; } .p-archiveCase__pic > img { transition: scale 0.3s; } .p-archiveCase__mainFrame { margin-bottom: 2.5rem; } .p-archiveCase__titleSup { margin-bottom: 0.5rem; font-size: max(0.8461538462em, 10px); line-height: 1.1; } @media (width >= 1025px) { .p-archiveCase__titleSup { margin-bottom: 1rem; font-size: max(1.0769230769em, 10px); font-weight: 600; } } .p-archiveCase__titleMain { font-size: max(1.1538461538em, 10px); font-weight: 700; line-height: 1.4666666667; } @media (width >= 1025px) { .p-archiveCase__titleMain { font-size: max(2.3076923077em, 10px); } } .p-archiveCase__techFrame { margin-top: 1rem; } @media (width >= 1025px) { .p-archiveCase__techFrame { margin-top: 2rem; } } .p-archiveCase__serviceFrame { margin-top: 0.6rem; } .p-archiveCase__supFrame { padding-right: 4rem; margin-top: auto; } @media (width >= 1025px) { .p-archiveCase__supFrame { padding-right: 5rem; } } .p-archiveCase__plus { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 3rem; height: 3rem; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; } @media (width >= 1025px) { .p-archiveCase__plus { right: 3rem; bottom: 3rem; width: 4rem; height: 4rem; } } .p-archiveCase__plus::before, .p-archiveCase__plus::after { position: absolute; inset: 0; display: block; width: 0.9rem; height: 1px; margin: auto; content: ""; background-color: #fff; } @media (width >= 1025px) { .p-archiveCase__plus::before, .p-archiveCase__plus::after { width: 1.1rem; } } .p-archiveCase__plus::after { rotate: 90deg; } @media (width < 768px) { .p-archiveCase.--top .p-archiveCase__item:nth-child(n+3) { display: none; } } /* -------------------------------------------- INTERVIEW -------------------------------------------- */ .p-archiveIntv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 0; } @media (width >= 768px) { .p-archiveIntv { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: -1px; } } @media (width >= 1025px) { .p-archiveIntv { gap: 4rem 0; } } .p-archiveIntv__item { position: relative; background-color: #fff; border-top: 1px solid #f2f3f4; border-bottom: 1px solid #f2f3f4; border-left: 1px solid #f2f3f4; } @media (width < 768px) { .p-archiveIntv__item:nth-child(odd) { border-left: none; } } .p-archiveIntv__anc { display: block; } @media (hover: hover) { .p-archiveIntv__anc:hover .p-archiveIntv__pic > img { scale: 1.05; } .p-archiveIntv__anc:hover .p-archiveIntv__arrowFrame { color: #fff; background-color: #ff9d00; border-color: #ff9d00; scale: 1.3; } } .p-archiveIntv__pic { width: 100%; aspect-ratio: 335/432; overflow: hidden; border-radius: 1.3rem; } @media (width >= 1025px) { .p-archiveIntv__pic { border-radius: 2.5rem; } } .p-archiveIntv__pic > img { transition: scale 0.3s; } .p-archiveIntv__contFrame { padding: 3rem 1.5rem; } @media (width >= 1025px) { .p-archiveIntv__contFrame { padding: 3.5rem 4rem; } } .p-archiveIntv__catch { font-weight: 700; line-height: 1.7692307692; } @media (width >= 1025px) { .p-archiveIntv__catch { font-size: max(1.5384615385em, 10px); line-height: 1.5; } } .p-archiveIntv__name { margin-top: 1.5rem; font-size: max(0.8461538462em, 10px); line-height: 1.6; letter-spacing: 0.08em; opacity: 0.6; } @media (width >= 1025px) { .p-archiveIntv__name { font-size: max(0.9230769231em, 10px); } } .p-archiveIntv__name > span { display: inline-block; padding-right: 3rem; font-size: max(1.0909090909em, 10px); } @media (width >= 1025px) { .p-archiveIntv__name > span { font-size: max(1.1666666667em, 10px); } } .p-archiveIntv__arrowFrame { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid rgba(33, 33, 33, 0.7); border-radius: 999px; transition: 0.3s; } @media (width >= 1025px) { .p-archiveIntv__arrowFrame { right: 2rem; bottom: 2rem; width: 3.6rem; height: 3.6rem; } } .p-archiveIntv__arrow { width: 0.8rem; height: 0.8rem; } @media (width >= 1025px) { .p-archiveIntv.--archive { gap: 4rem; } } @media (width >= 1025px) { .p-archiveIntv.--archive .p-archiveIntv__item { border-right: 1px solid #f2f3f4; } .p-archiveIntv.--archive .p-archiveIntv__item:nth-child(3n) { border-right: none; } } @media (width >= 768px) { .p-archiveIntv.--single { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* -------------------------------------------- LOGO -------------------------------------------- */ .p-objLogo { display: grid; gap: 3rem; } @media (width >= 768px) { .p-objLogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 0; } } @media (width >= 1025px) { .p-objLogo { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .p-objLogo__item { border-top: 1px solid #f2f3f4; } .p-objLogo:not(.--top) .p-objLogo__item { border-left: 1px solid #f2f3f4; } .p-objLogo__anc { position: relative; display: block; border-bottom: 1px solid #f2f3f4; } @media (hover: hover) { .p-objLogo__anc:hover { box-shadow: 0 0 2.3rem 0 rgba(0, 0, 0, 0.12); } } .p-objLogo__anc.--comingsoon { pointer-events: none; } .p-objLogo__anc.--comingsoon .p-objLogo__arrow { display: none; } .p-objLogo__pic { width: 100%; aspect-ratio: 56/13; } @media (width >= 1025px) { .p-objLogo__pic { aspect-ratio: 56/15; } } .p-objLogo__arrow { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; background-color: #eceeef; border-radius: 999px; } .p-objLogo__arrow::before { display: block; width: 0.3rem; height: 0.3rem; content: ""; border-right: 1px solid #454545; border-bottom: 1px solid #454545; transform: skew(-10deg, -10deg); rotate: -45deg; translate: -20%; } .p-objLogo__contFrame { padding: 2rem; font-size: max(0.9230769231em, 10px); line-height: 1.6666666667; background-color: #fff; border-bottom: 1px solid #f2f3f4; } @media (width >= 768px) { .p-objLogo__contFrame { padding-bottom: 0; border-bottom: none; } } @media (width >= 1025px) { .p-objLogo__contFrame { padding: 1.5rem 3rem 0; font-size: max(1.0769230769em, 10px); } } .p-objLogo.--top { gap: 0; } @media (width >= 768px) { .p-objLogo.--top { gap: 2rem 2.8rem; } } .p-objLogo.--top .p-objLogo__item { border: 1px solid #f2f3f4; } @media (width < 768px) { .p-objLogo.--top .p-objLogo__item + * { margin-top: -1px; } } @media (width >= 1025px) { .p-objLogo.--top .p-objLogo__item:last-child { border-right: none; } } .p-objLogo.--top .p-objLogo__anc { border-bottom: none; } /* -------------------------------------------- POINT -------------------------------------------- */ .p-objPoint { counter-reset: number 0; border-bottom: 1px solid #f2f3f4; } @media (width >= 768px) { .p-objPoint { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-left: -1px; } } .p-objPoint__item { padding: 4rem 1.5rem; text-align: center; background-color: #fff; border-top: 1px solid #f2f3f4; } @media (width >= 768px) { .p-objPoint__item { border-left: 1px solid #f2f3f4; } .p-objPoint__item:nth-child(-n+3) { grid-column: span 2; } .p-objPoint__item:nth-child(n+4) { grid-column: span 3; } } @media (width >= 1025px) { .p-objPoint__item { padding: 6rem 2.5rem 6.5rem; } } @media (width >= 1280px) { .p-objPoint__item { padding: 6rem 4rem 6.5rem; } } .p-objPoint__title { margin-bottom: 1rem; font-size: max(1.1538461538em, 10px); font-weight: 700; line-height: 1.4166666667; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-objPoint__title { margin-bottom: 1.5rem; font-size: max(1.5384615385em, 10px); } } @media (width >= 1600px) { .p-objPoint__title { margin-bottom: 3rem; font-size: max(1.8461538462em, 10px); } } .p-objPoint__title::before { display: block; margin-bottom: 1rem; font-family: "Hind", sans-serif; font-size: max(0.7333333333em, 10px); font-weight: 600; content: "( " counter(number, decimal-leading-zero) " )"; counter-increment: number 1; } @media (width >= 1025px) { .p-objPoint__title::before { font-size: max(0.5833333333em, 10px); } } .p-objPoint__text { line-height: 1.7692307692; } @media (width >= 768px) { .p-objPoint:not(.--centerPC) .p-objPoint__text { text-align: left; } } @media (width >= 1025px) { .p-objPoint__text { font-size: max(1.2307692308em, 10px); } } /* -------------------------------------------- RECRUIT LOOP -------------------------------------------- */ .p-objRecruitLoop { --gap: 0.5rem; --shift: 3rem; } .p-objRecruitLoop__slide { display: grid; grid-template-columns: repeat(6, 17rem); gap: var(--gap); padding-right: var(--gap); } @media (width >= 768px) { .p-objRecruitLoop__slide { grid-template-columns: repeat(6, 24rem); } } @media (width >= 1025px) { .p-objRecruitLoop__slide { --gap: 1rem; --shift: 5rem; grid-template-columns: repeat(6, 46rem); } } .p-objRecruitLoop__slidePicFrame { display: grid; gap: var(--gap); aspect-ratio: 170/290; } .p-objRecruitLoop__slidePicFrame:nth-child(odd) { padding-bottom: var(--shift); } .p-objRecruitLoop__slidePicFrame:nth-child(even) { padding-top: var(--shift); } .p-objRecruitLoop__slidePic { overflow: hidden; border-radius: 1.25rem; } @media (width >= 1025px) { .p-objRecruitLoop__slidePic { border-radius: 2.5rem; } } .p-objRecruitLoop.--sm { --gap: 0.5rem; --shift: 4rem; } .p-objRecruitLoop.--sm .p-objRecruitLoop__slide { grid-template-columns: repeat(6, 20.5rem); } @media (width >= 768px) { .p-objRecruitLoop.--sm .p-objRecruitLoop__slide { grid-template-columns: repeat(6, 24rem); } } @media (width >= 1025px) { .p-objRecruitLoop.--sm .p-objRecruitLoop__slide { --shift: 6rem; grid-template-columns: repeat(6, 34rem); } } /* -------------------------------------------- ICON CARD -------------------------------------------- */ .p-objIconCard { border-top: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-objIconCard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: -1px; } } .p-objIconCard__item { display: flex; background-color: #fff; border-bottom: 1px solid #f2f3f4; } @media (width >= 1025px) { .p-objIconCard__item { flex-direction: column; border-left: 1px solid #f2f3f4; } } .p-objIconCard__picFrame { display: flex; flex-shrink: 0; align-items: center; justify-content: center; padding: 2.5rem; } @media (width >= 1025px) { .p-objIconCard__picFrame { padding: 6rem 2.5rem 2.5rem; } } .p-objIconCard__pic { width: 12rem; height: 12rem; background-color: #f8f8f8; border-radius: 999px; } @media (width >= 1025px) { .p-objIconCard__pic { width: 15rem; height: 15rem; } } .p-objIconCard__contFrame { flex: 1; align-self: center; padding: 2.5rem 0; } @media (width >= 1025px) { .p-objIconCard__contFrame { width: 100%; padding: 0 1.5rem 5.5rem; text-align: center; } } .p-objIconCard__title { margin-bottom: 1rem; font-size: max(1.0769230769em, 10px); font-weight: 700; line-height: 1.5; } @media (width >= 1025px) { .p-objIconCard__title { margin-bottom: 1.5rem; font-size: max(1.3076923077em, 10px); } } @media (width >= 1280px) { .p-objIconCard__title { font-size: max(1.3846153846em, 10px); } } @media (width >= 1600px) { .p-objIconCard__title { font-size: max(1.5384615385em, 10px); } } .p-objIconCard__text { font-size: max(0.9230769231em, 10px); line-height: 1.8333333333; } @media (width >= 1025px) { .p-objIconCard__text { font-size: max(1em, 10px); } } @media (width >= 1280px) { .p-objIconCard__text { font-size: max(1.1538461538em, 10px); } } @media (width >= 1600px) { .p-objIconCard__text { font-size: max(1.2307692308em, 10px); } } @media (width >= 1025px) { .p-objIconCard.--benefits .p-objIconCard__pic { width: 20rem; height: 20rem; } } .p-objIconCard.--benefits .p-objIconCard__pic > img { scale: 1.2; } @media (width >= 1025px) { .p-objIconCard.--benefits .p-objIconCard__pic > img { scale: 1; } } @media (width >= 1025px) { .p-objIconCard.--benefits .p-objIconCard__contFrame { width: 100%; padding: 0 3.5rem 5.5rem; text-align: left; } } @media (width >= 1025px) { .p-objIconCard.--benefits .p-objIconCard__title { text-align: center; } } .p-objIconCard.--flow { counter-reset: number 0; } .p-objIconCard.--flow .p-objIconCard__item { position: relative; } @media (width >= 1025px) { .p-objIconCard.--flow .p-objIconCard__item:nth-child(3n+1) .p-objIconCard__picFrame::before { display: none; } } .p-objIconCard.--flow .p-objIconCard__item:first-child .p-objIconCard__picFrame::before { display: none; } .p-objIconCard.--flow .p-objIconCard__picFrame { position: relative; } @media (width >= 1025px) { .p-objIconCard.--flow .p-objIconCard__picFrame { position: static; } } .p-objIconCard.--flow .p-objIconCard__picFrame::before { position: absolute; right: 0; bottom: calc(100% - 0.5rem); left: 0; width: 0; height: 0; margin: auto; content: ""; border-color: #454545 transparent transparent; border-style: solid; border-width: 1rem 0.8rem 0; } @media (width >= 1025px) { .p-objIconCard.--flow .p-objIconCard__picFrame::before { inset: 0 calc(100% - 0.7rem) 0 auto; border-color: transparent transparent transparent #454545; border-width: 1rem 0 1rem 1.4rem; } } .p-objIconCard.--flow .p-objIconCard__pic { position: relative; } .p-objIconCard.--flow .p-objIconCard__pic > img { scale: 1.05; } @media (width >= 1025px) { .p-objIconCard.--flow .p-objIconCard__pic > img { scale: 1; } } .p-objIconCard.--flow .p-objIconCard__pic::before { position: absolute; top: 1rem; left: 0; padding: 0.4rem 1.5rem 0.3rem; font-family: "Hind", sans-serif; font-size: max(0.9230769231em, 10px); font-weight: 600; line-height: 1; color: #fff; content: counter(number, decimal-leading-zero); counter-increment: number 1; background-color: #ff9d00; border-radius: 999px; } @media (width >= 1025px) { .p-objIconCard.--flow .p-objIconCard__pic::before { padding: 0.6rem 2rem 0.3rem; font-size: max(1.0769230769em, 10px); } } /* -------------------------------------------- CASE (MODAL) -------------------------------------------- */ .p-singleCase__pic { width: 100%; aspect-ratio: 355/140; } @media (width >= 1025px) { .p-singleCase__pic { aspect-ratio: 900/260; } } .p-singleCase__contFrame { padding: 4rem 3rem; } @media (width >= 1025px) { .p-singleCase__contFrame { padding: 4rem 8rem 5rem; } } .p-singleCase__titleSup { margin-bottom: 1.2rem; line-height: 1.3076923077; opacity: 0.7; } @media (width >= 1025px) { .p-singleCase__titleSup { font-size: max(1.3846153846em, 10px); font-weight: 600; letter-spacing: 0.08em; } } .p-singleCase__titleSupAnc { color: rgba(33, 33, 33, 0.7); text-decoration: underline; text-underline-offset: 0.4rem; } @media (hover: hover) { .p-singleCase__titleSupAnc:hover { text-decoration: none; } } .p-singleCase__titleMain { font-size: max(1.5384615385em, 10px); font-weight: 700; line-height: 1.5; } @media (width >= 1025px) { .p-singleCase__titleMain { font-size: max(2.3076923077em, 10px); letter-spacing: 0.08em; } } .p-singleCase__defineFrame { margin-top: 1.5rem; } @media (width >= 1025px) { .p-singleCase__defineFrame { margin-top: 2rem; } } .p-singleCase__text { margin-top: 2.5rem; line-height: 1.7692307692; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-singleCase__text { margin-top: 4rem; font-size: max(1.2307692308em, 10px); line-height: 2; } } /* -------------------------------------------- INTERVIEW -------------------------------------------- */ .p-singleIntv__mvFrame { margin-bottom: 3rem; } @media (width >= 1025px) { .p-singleIntv__mvFrame { margin-bottom: 4rem; } .p-singleIntv__mvFrame { position: relative; } .p-singleIntv__mvFrame::before { position: absolute; top: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } } @media (width >= 1025px) and (width >= 1025px) { .p-singleIntv__mvFrame::before { right: -6.25vw; left: -6.25vw; } } .p-singleIntv__mvPic { aspect-ratio: 750/450; margin: 0 -5.3333333333vw; } @media (width >= 1025px) { .p-singleIntv__mvPic { aspect-ratio: 1400/700; margin: 0; overflow: hidden; border-radius: 2.5rem; } } .p-singleIntv__mvDesc { position: relative; padding: 3.5rem 1.5rem; line-height: 1.9230769231; text-align: center; background-color: #fff; } .p-singleIntv__mvDesc { position: relative; } .p-singleIntv__mvDesc::after { position: absolute; bottom: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } @media (width >= 1025px) { .p-singleIntv__mvDesc::after { right: -6.25vw; left: -6.25vw; } } @media (width >= 1025px) { .p-singleIntv__mvDesc { padding: 3.5rem 6.25vw; margin: 0 -6.25vw; font-size: max(1.2307692308em, 10px); line-height: 2; } .p-singleIntv__mvDesc { position: relative; } .p-singleIntv__mvDesc::before { position: absolute; top: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: 0; left: 0; } } @media (width >= 1025px) and (width >= 1025px) { .p-singleIntv__mvDesc::before { right: 0; left: 0; } } @media (width >= 1025px) { .p-singleIntv__mvDesc { position: relative; } .p-singleIntv__mvDesc::after { position: absolute; bottom: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: 0; left: 0; } } @media (width >= 1025px) and (width >= 1025px) { .p-singleIntv__mvDesc::after { right: 0; left: 0; } } .p-singleIntv__faqFrame { display: grid; gap: 3rem; } @media (width >= 1025px) { .p-singleIntv__faqFrame { gap: 4rem; } } .p-singleIntv__faqItem { position: relative; } .p-singleIntv__faqItem::before { position: absolute; top: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } @media (width >= 1025px) { .p-singleIntv__faqItem::before { right: -6.25vw; left: -6.25vw; } } .p-singleIntv__faqItem { position: relative; } .p-singleIntv__faqItem::after { position: absolute; bottom: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } @media (width >= 1025px) { .p-singleIntv__faqItem::after { right: -6.25vw; left: -6.25vw; } } @media (width >= 1025px) { .p-singleIntv__faqItem { display: flex; } .p-singleIntv__faqItem:nth-child(even) { flex-direction: row-reverse; } .p-singleIntv__faqItem > * { width: 50%; } } .p-singleIntv__faqPicFrame { position: relative; } .p-singleIntv__faqPic { width: 100%; aspect-ratio: 670/435; overflow: hidden; border-radius: 1.3rem; } @media (width >= 1025px) { .p-singleIntv__faqPic { position: sticky; top: 8.8rem; right: 0; left: 0; } } .p-singleIntv__faqContFrame { padding: 3.5rem 2rem; background-color: #fff; } @media (width >= 1025px) { .p-singleIntv__faqContFrame { padding: 7.5rem 6rem; } } .p-singleIntv__faqTitle { margin-bottom: 3.5rem; font-size: max(1.3076923077em, 10px); font-weight: 700; line-height: 1.5882352941; color: #ff9d00; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-singleIntv__faqTitle { margin-bottom: 6rem; font-size: max(2.1538461538em, 10px); line-height: 1.7142857143; } } .p-singleIntv__faqList { display: grid; gap: 3rem; } @media (width >= 1025px) { .p-singleIntv__faqList { gap: 6rem; } } .p-singleIntv__faqTitleSub { position: relative; padding-left: 4rem; margin-bottom: 1.5rem; font-size: max(1.0769230769em, 10px); font-style: italic; font-weight: 700; line-height: 1.7857142857; letter-spacing: 0.08em; } @media (width >= 1025px) { .p-singleIntv__faqTitleSub { padding-left: 4.5rem; margin-bottom: 2.5rem; font-size: max(1.3846153846em, 10px); line-height: 1.7777777778; } } .p-singleIntv__faqTitleSub::before { position: absolute; top: 0.85em; left: 0; width: 3rem; height: 1px; content: ""; background-color: currentColor; } @media (width >= 1025px) { .p-singleIntv__faqTitleSub::before { width: 3.6rem; } } .p-singleIntv__faqText { line-height: 1.9230769231; } @media (width >= 1025px) { .p-singleIntv__faqText { font-size: max(1.2307692308em, 10px); line-height: 2.25; } } .p-singleIntv__msgFrame { margin-top: 3rem; } @media (width >= 1025px) { .p-singleIntv__msgFrame { margin-top: 4rem; } .p-singleIntv__msgFrame { position: relative; } .p-singleIntv__msgFrame::before { position: absolute; top: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } } @media (width >= 1025px) and (width >= 1025px) { .p-singleIntv__msgFrame::before { right: -6.25vw; left: -6.25vw; } } .p-singleIntv__msgPic { aspect-ratio: 750/450; margin: 0 -5.3333333333vw; } @media (width >= 1025px) { .p-singleIntv__msgPic { aspect-ratio: 1400/700; margin: 0; overflow: hidden; border-radius: 2.5rem; } } .p-singleIntv__msgContFrame { padding: 3.5rem 2rem; background-color: #fff; } .p-singleIntv__msgContFrame { position: relative; } .p-singleIntv__msgContFrame::after { position: absolute; bottom: 0; display: block; height: 1px; content: ""; background-color: #f2f3f4; right: -5.3333333333vw; left: -5.3333333333vw; } @media (width >= 1025px) { .p-singleIntv__msgContFrame::after { right: -6.25vw; left: -6.25vw; } } @media (width >= 1025px) { .p-singleIntv__msgContFrame { padding: 3.5rem 6rem 6rem; } } .p-singleIntv__msgTitle { margin-bottom: 1.5rem; font-size: max(1.1538461538em, 10px); font-weight: 700; line-height: 1.6666666667; text-align: center; } @media (width >= 1025px) { .p-singleIntv__msgTitle { margin-bottom: 3rem; font-size: max(1.5384615385em, 10px); line-height: 1.6; } } .p-singleIntv__msgText { position: relative; line-height: 1.9230769231; } @media (width >= 1025px) { .p-singleIntv__msgText { column-gap: 11rem; max-width: 104rem; margin: 0 auto; font-size: max(1.2307692308em, 10px); line-height: 2.25; column-count: 2; column-rule: 1px solid #dbddde; } } /* -------------------------------------------- MV -------------------------------------------- */ .p-subMv { padding-bottom: 10rem; } @media (width >= 1025px) { .p-subMv { padding-bottom: 14.5rem; } } .p-subMv__frame { position: relative; z-index: 1; display: flex; min-height: 30rem; padding-top: 8rem; padding-bottom: 1.5rem; overflow: hidden; } @media (width >= 1025px) { .p-subMv__frame { min-height: 50rem; padding-top: 10rem; padding-bottom: 3.5rem; } } .p-subMv__frame::before { position: absolute; inset: 0; z-index: -4; content: ""; background: url("../img/common/bg_noise_01.png.webp") 5rem 5rem repeat; } @media (width >= 1025px) { .p-subMv__frame::before { background-size: 10rem 10rem; } } .p-subMv__lineFrame { position: absolute; inset: 0; z-index: -3; display: grid; grid-template-columns: 5.3333333333vw repeat(2, minmax(0, 1fr)) 5.3333333333vw; } @media (width >= 1025px) { .p-subMv__lineFrame { grid-template-columns: 6.25vw repeat(4, minmax(0, 1fr)) 6.25vw; } } .p-subMv__line { border-left: 1px solid #f3ecd2; } .p-subMv__line:first-child { border-right: 1px solid #f3ecd2; } .p-subMv__line:nth-child(-n+2) { border-left: none; } .p-subMv__decoFrame { position: absolute; inset: 0; z-index: -2; } .p-subMv__decoPic { position: absolute; } .p-subMv__decoPic.--deco01 { top: 0; left: 0; width: 18rem; opacity: 0.5; filter: blur(1rem); translate: -25% -38.8888888889%; animation: floatUpDown 5s ease-in-out infinite; } @media (width >= 768px) { .p-subMv__decoPic.--deco01 { right: 50%; left: auto; translate: -12.3595505618% -50%; } } @media (width >= 1025px) { .p-subMv__decoPic.--deco01 { width: 44.5rem; filter: blur(2rem); } } .p-subMv__decoPic.--deco02 { bottom: 0; left: 0; width: 10rem; opacity: 0.9; filter: blur(0.15rem); translate: -16.6666666667% 25%; animation: floatUpDownWeek 5s -2s ease-in-out infinite; } @media (width >= 1025px) { .p-subMv__decoPic.--deco02 { width: 24.5rem; filter: blur(0.3rem); } } .p-subMv__lottieFrame { position: absolute; bottom: 50%; left: 50%; z-index: -1; width: 90.6666666667vw; max-width: 50rem; aspect-ratio: 680/640; margin: auto; translate: -14.7058823529% 38.2352941176%; } @media (width >= 1025px) { .p-subMv__lottieFrame { width: 61.25vw; max-width: 100rem; translate: -5.1020408163% 31.5217391304%; } } .p-subMv__inner { display: flex; flex-direction: column; gap: 2rem; } .p-subMv__titleFrame { display: flex; flex: 1; flex-direction: column; justify-content: center; padding-bottom: 2rem; } .p-subMv.--pdb0 { padding-bottom: 0; } .p-subMv.js-anime .p-subMv__frame, .p-subMv.js-anime .p-subMv__decoFrame { opacity: 0; transition: 1s 0s; } .p-subMv.js-anime .p-subMv__decoFrame { scale: 0.9; transition-delay: 0.8s; } .p-subMv.js-anime .p-subMv__bcFrame { opacity: 0; transition: opacity 1s 1.2s; } .p-subMv.js-anime.is-anime .p-subMv__frame, .p-subMv.js-anime.is-anime .p-subMv__decoFrame, .p-subMv.js-anime.is-anime .p-subMv__bcFrame { opacity: 1; scale: 1; } /* -------------------------------------------- LAYOUT -------------------------------------------- */ .p-subLayout { display: grid; grid-template-columns: 5.3333333333vw minmax(0, 1fr) 5.3333333333vw; } @media (width >= 1025px) { .p-subLayout { grid-template-columns: 6.25vw minmax(0, 1fr) minmax(0, 3fr) 6.25vw; } } .p-subLayout::before, .p-subLayout::after { display: block; pointer-events: none; content: ""; } @media (width >= 1025px) { .p-subLayout__sideNavFrame { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-right: 5rem; } .p-subLayout__sideNavFrame > * { position: sticky; top: 0; left: 0; padding-top: 8.8rem; margin-top: -8.8rem; } } @media (width >= 1025px) { .p-subLayout__contFrame { padding-left: 1px; } } /* -------------------------------------------- NAV -------------------------------------------- */ .p-subNav__list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; padding: 6rem 3.5rem 6rem 0; margin-left: -2rem; letter-spacing: 0.08em; } .p-subNav__list::before { position: absolute; inset: 0 0 0 -6.25vw; z-index: -1; content: ""; background-color: #ff9d00; border-radius: 0 2.5rem 2.5rem 0; } .p-subNav__item { display: flex; } .p-subNav__anc { position: relative; display: block; padding: 1rem 2rem; padding-right: 4.5rem; font-size: max(1.0769230769em, 10px); font-weight: 500; line-height: 1.1; color: #fff; border-radius: 999px; } @media (hover: hover) { .p-subNav__anc:hover { color: #ff9d00 !important; background-color: #fff; } .p-subNav__anc:hover .p-subNav__arrow { opacity: 1; } } html.is-navTop .p-subNav__anc[href="#"], html.is-navMsg .p-subNav__anc[href="#message"], html.is-navVal .p-subNav__anc[href="#value"], html.is-navBiz .p-subNav__anc[href="#business"], html.is-navFlow .p-subNav__anc[href="#flow"], html.is-navCo .p-subNav__anc[href="#company"], html.is-navWork .p-subNav__anc[href="#work"], html.is-navIntv .p-subNav__anc[href="#interview"], html.is-navStyle .p-subNav__anc[href="#style"], html.is-navBenefits .p-subNav__anc[href="#benefits"], html.is-navLookfor .p-subNav__anc[href="#lookfor"], html.is-navJob .p-subNav__anc[href="#job"] { color: #212121; background-color: #fff; } html.is-navTop .p-subNav__anc[href="#"] .p-subNav__arrow, html.is-navMsg .p-subNav__anc[href="#message"] .p-subNav__arrow, html.is-navVal .p-subNav__anc[href="#value"] .p-subNav__arrow, html.is-navBiz .p-subNav__anc[href="#business"] .p-subNav__arrow, html.is-navFlow .p-subNav__anc[href="#flow"] .p-subNav__arrow, html.is-navCo .p-subNav__anc[href="#company"] .p-subNav__arrow, html.is-navWork .p-subNav__anc[href="#work"] .p-subNav__arrow, html.is-navIntv .p-subNav__anc[href="#interview"] .p-subNav__arrow, html.is-navStyle .p-subNav__anc[href="#style"] .p-subNav__arrow, html.is-navBenefits .p-subNav__anc[href="#benefits"] .p-subNav__arrow, html.is-navLookfor .p-subNav__anc[href="#lookfor"] .p-subNav__arrow, html.is-navJob .p-subNav__anc[href="#job"] .p-subNav__arrow { opacity: 1; } .p-subNav__arrow { position: absolute; top: 0; right: 2rem; bottom: 0; width: 1.3rem; height: 1rem; margin: auto; opacity: 0; transition: opacity 0.3s; } /* -------------------------------------------- TEXT ALIGN -------------------------------------------- */ .u-center { text-align: center; } .u-left { text-align: left; } .u-right { text-align: right; } /* -------------------------------------------- BREAKPOINT -------------------------------------------- */ @media (0px <= width < 576px) { .u-centerXXS { text-align: center; } .u-leftXXS { text-align: left; } .u-rightXXS { text-align: right; } } @media (576px <= width < 768px) { .u-centerXS { text-align: center; } .u-leftXS { text-align: left; } .u-rightXS { text-align: right; } } @media (768px <= width < 1025px) { .u-centerSM { text-align: center; } .u-leftSM { text-align: left; } .u-rightSM { text-align: right; } } @media (1025px <= width < 1280px) { .u-centerMD { text-align: center; } .u-leftMD { text-align: left; } .u-rightMD { text-align: right; } } @media (1280px <= width < 1440px) { .u-centerLG { text-align: center; } .u-leftLG { text-align: left; } .u-rightLG { text-align: right; } } @media (1440px <= width < 1600px) { .u-centerXL { text-align: center; } .u-leftXL { text-align: left; } .u-rightXL { text-align: right; } } @media (1600px <= width < 9999px) { .u-centerXXL { text-align: center; } .u-leftXXL { text-align: left; } .u-rightXXL { text-align: right; } } /* -------------------------------------------- DEVICE -------------------------------------------- */ @media (width < 768px) { .u-centerSP { text-align: center; } .u-leftSP { text-align: left; } .u-rightSP { text-align: right; } } @media (768px <= width < 1025px) { .u-centerTB { text-align: center; } .u-leftTB { text-align: left; } .u-rightTB { text-align: right; } } @media (width >= 1025px) { .u-centerPC { text-align: center; } .u-leftPC { text-align: left; } .u-rightPC { text-align: right; } } @media (width >= 1280px) { .u-centerNB { text-align: center; } .u-leftNB { text-align: left; } .u-rightNB { text-align: right; } } @media (width >= 1440px) { .u-centerDT { text-align: center; } .u-leftDT { text-align: left; } .u-rightDT { text-align: right; } } /* -------------------------------------------- COLOR -------------------------------------------- */ .u-white01 { color: #fff; } .u-main01 { color: #ff9d00; } /* -------------------------------------------- FONT -------------------------------------------- */ .u-palt { font-feature-settings: "palt"; } /* -------------------------------------------- FONT FAMILY -------------------------------------------- */ .u-ffEn { font-family: "Hind", sans-serif; } .u-ffSans { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic Medium", "Yu Gothic", meiryo, verdana, arial, sans-serif; } .u-ffSerif { font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "BIZ UDPMincho", "Yu Mincho", "Times New Roman", georgia, serif; } .u-ffCursive { font-family: "HG行書体", cursive, serif; } /* -------------------------------------------- FONT WEIGHT -------------------------------------------- */ .u-fwT { font-weight: 100; } .u-fwUL { font-weight: 200; } .u-fwL { font-weight: 300; } .u-fwR { font-weight: 400; } .u-fwM { font-weight: 500; } .u-fwSB { font-weight: 600; } .u-fwB { font-weight: 700; } .u-fwEB { font-weight: 800; } .u-fwBK { font-weight: 900; } /* -------------------------------------------- MARGIN -------------------------------------------- */ .u-mgt0 { margin-top: 0rem; } .u-mgl0 { margin-left: 0rem; } .u-mgr0 { margin-right: 0rem; } .u-mgb0 { margin-bottom: 0rem; } .u-mgt1 { margin-top: 0.25rem; } .u-mgl1 { margin-left: 0.25rem; } .u-mgr1 { margin-right: 0.25rem; } .u-mgb1 { margin-bottom: 0.25rem; } .u-mgt2 { margin-top: 0.5rem; } .u-mgl2 { margin-left: 0.5rem; } .u-mgr2 { margin-right: 0.5rem; } .u-mgb2 { margin-bottom: 0.5rem; } .u-mgt3 { margin-top: 0.75rem; } .u-mgl3 { margin-left: 0.75rem; } .u-mgr3 { margin-right: 0.75rem; } .u-mgb3 { margin-bottom: 0.75rem; } .u-mgt4 { margin-top: 1rem; } .u-mgl4 { margin-left: 1rem; } .u-mgr4 { margin-right: 1rem; } .u-mgb4 { margin-bottom: 1rem; } .u-mgt5 { margin-top: 1.25rem; } .u-mgl5 { margin-left: 1.25rem; } .u-mgr5 { margin-right: 1.25rem; } .u-mgb5 { margin-bottom: 1.25rem; } .u-mgt6 { margin-top: 1.5rem; } .u-mgl6 { margin-left: 1.5rem; } .u-mgr6 { margin-right: 1.5rem; } .u-mgb6 { margin-bottom: 1.5rem; } .u-mgt7 { margin-top: 1.75rem; } .u-mgl7 { margin-left: 1.75rem; } .u-mgr7 { margin-right: 1.75rem; } .u-mgb7 { margin-bottom: 1.75rem; } .u-mgt8 { margin-top: 2rem; } .u-mgl8 { margin-left: 2rem; } .u-mgr8 { margin-right: 2rem; } .u-mgb8 { margin-bottom: 2rem; } .u-mgt9 { margin-top: 2.25rem; } .u-mgl9 { margin-left: 2.25rem; } .u-mgr9 { margin-right: 2.25rem; } .u-mgb9 { margin-bottom: 2.25rem; } .u-mgt10 { margin-top: 2.5rem; } .u-mgl10 { margin-left: 2.5rem; } .u-mgr10 { margin-right: 2.5rem; } .u-mgb10 { margin-bottom: 2.5rem; } .u-mgt11 { margin-top: 2.75rem; } .u-mgl11 { margin-left: 2.75rem; } .u-mgr11 { margin-right: 2.75rem; } .u-mgb11 { margin-bottom: 2.75rem; } .u-mgt12 { margin-top: 3rem; } .u-mgl12 { margin-left: 3rem; } .u-mgr12 { margin-right: 3rem; } .u-mgb12 { margin-bottom: 3rem; } .u-mgt13 { margin-top: 3.25rem; } .u-mgl13 { margin-left: 3.25rem; } .u-mgr13 { margin-right: 3.25rem; } .u-mgb13 { margin-bottom: 3.25rem; } .u-mgt14 { margin-top: 3.5rem; } .u-mgl14 { margin-left: 3.5rem; } .u-mgr14 { margin-right: 3.5rem; } .u-mgb14 { margin-bottom: 3.5rem; } .u-mgt15 { margin-top: 3.75rem; } .u-mgl15 { margin-left: 3.75rem; } .u-mgr15 { margin-right: 3.75rem; } .u-mgb15 { margin-bottom: 3.75rem; } .u-mgt16 { margin-top: 4rem; } .u-mgl16 { margin-left: 4rem; } .u-mgr16 { margin-right: 4rem; } .u-mgb16 { margin-bottom: 4rem; } .u-mgt17 { margin-top: 4.25rem; } .u-mgl17 { margin-left: 4.25rem; } .u-mgr17 { margin-right: 4.25rem; } .u-mgb17 { margin-bottom: 4.25rem; } .u-mgt18 { margin-top: 4.5rem; } .u-mgl18 { margin-left: 4.5rem; } .u-mgr18 { margin-right: 4.5rem; } .u-mgb18 { margin-bottom: 4.5rem; } .u-mgt19 { margin-top: 4.75rem; } .u-mgl19 { margin-left: 4.75rem; } .u-mgr19 { margin-right: 4.75rem; } .u-mgb19 { margin-bottom: 4.75rem; } .u-mgt20 { margin-top: 5rem; } .u-mgl20 { margin-left: 5rem; } .u-mgr20 { margin-right: 5rem; } .u-mgb20 { margin-bottom: 5rem; } /* -------------------------------------------- BREAKPOINT -------------------------------------------- */ @media (0px <= width < 576px) { .u-mgt0XXS { margin-top: 0rem; } .u-mgl0XXS { margin-left: 0rem; } .u-mgr0XXS { margin-right: 0rem; } .u-mgb0XXS { margin-bottom: 0rem; } .u-mgt1XXS { margin-top: 0.25rem; } .u-mgl1XXS { margin-left: 0.25rem; } .u-mgr1XXS { margin-right: 0.25rem; } .u-mgb1XXS { margin-bottom: 0.25rem; } .u-mgt2XXS { margin-top: 0.5rem; } .u-mgl2XXS { margin-left: 0.5rem; } .u-mgr2XXS { margin-right: 0.5rem; } .u-mgb2XXS { margin-bottom: 0.5rem; } .u-mgt3XXS { margin-top: 0.75rem; } .u-mgl3XXS { margin-left: 0.75rem; } .u-mgr3XXS { margin-right: 0.75rem; } .u-mgb3XXS { margin-bottom: 0.75rem; } .u-mgt4XXS { margin-top: 1rem; } .u-mgl4XXS { margin-left: 1rem; } .u-mgr4XXS { margin-right: 1rem; } .u-mgb4XXS { margin-bottom: 1rem; } .u-mgt5XXS { margin-top: 1.25rem; } .u-mgl5XXS { margin-left: 1.25rem; } .u-mgr5XXS { margin-right: 1.25rem; } .u-mgb5XXS { margin-bottom: 1.25rem; } .u-mgt6XXS { margin-top: 1.5rem; } .u-mgl6XXS { margin-left: 1.5rem; } .u-mgr6XXS { margin-right: 1.5rem; } .u-mgb6XXS { margin-bottom: 1.5rem; } .u-mgt7XXS { margin-top: 1.75rem; } .u-mgl7XXS { margin-left: 1.75rem; } .u-mgr7XXS { margin-right: 1.75rem; } .u-mgb7XXS { margin-bottom: 1.75rem; } .u-mgt8XXS { margin-top: 2rem; } .u-mgl8XXS { margin-left: 2rem; } .u-mgr8XXS { margin-right: 2rem; } .u-mgb8XXS { margin-bottom: 2rem; } .u-mgt9XXS { margin-top: 2.25rem; } .u-mgl9XXS { margin-left: 2.25rem; } .u-mgr9XXS { margin-right: 2.25rem; } .u-mgb9XXS { margin-bottom: 2.25rem; } .u-mgt10XXS { margin-top: 2.5rem; } .u-mgl10XXS { margin-left: 2.5rem; } .u-mgr10XXS { margin-right: 2.5rem; } .u-mgb10XXS { margin-bottom: 2.5rem; } .u-mgt11XXS { margin-top: 2.75rem; } .u-mgl11XXS { margin-left: 2.75rem; } .u-mgr11XXS { margin-right: 2.75rem; } .u-mgb11XXS { margin-bottom: 2.75rem; } .u-mgt12XXS { margin-top: 3rem; } .u-mgl12XXS { margin-left: 3rem; } .u-mgr12XXS { margin-right: 3rem; } .u-mgb12XXS { margin-bottom: 3rem; } .u-mgt13XXS { margin-top: 3.25rem; } .u-mgl13XXS { margin-left: 3.25rem; } .u-mgr13XXS { margin-right: 3.25rem; } .u-mgb13XXS { margin-bottom: 3.25rem; } .u-mgt14XXS { margin-top: 3.5rem; } .u-mgl14XXS { margin-left: 3.5rem; } .u-mgr14XXS { margin-right: 3.5rem; } .u-mgb14XXS { margin-bottom: 3.5rem; } .u-mgt15XXS { margin-top: 3.75rem; } .u-mgl15XXS { margin-left: 3.75rem; } .u-mgr15XXS { margin-right: 3.75rem; } .u-mgb15XXS { margin-bottom: 3.75rem; } .u-mgt16XXS { margin-top: 4rem; } .u-mgl16XXS { margin-left: 4rem; } .u-mgr16XXS { margin-right: 4rem; } .u-mgb16XXS { margin-bottom: 4rem; } .u-mgt17XXS { margin-top: 4.25rem; } .u-mgl17XXS { margin-left: 4.25rem; } .u-mgr17XXS { margin-right: 4.25rem; } .u-mgb17XXS { margin-bottom: 4.25rem; } .u-mgt18XXS { margin-top: 4.5rem; } .u-mgl18XXS { margin-left: 4.5rem; } .u-mgr18XXS { margin-right: 4.5rem; } .u-mgb18XXS { margin-bottom: 4.5rem; } .u-mgt19XXS { margin-top: 4.75rem; } .u-mgl19XXS { margin-left: 4.75rem; } .u-mgr19XXS { margin-right: 4.75rem; } .u-mgb19XXS { margin-bottom: 4.75rem; } .u-mgt20XXS { margin-top: 5rem; } .u-mgl20XXS { margin-left: 5rem; } .u-mgr20XXS { margin-right: 5rem; } .u-mgb20XXS { margin-bottom: 5rem; } } @media (576px <= width < 768px) { .u-mgt0XS { margin-top: 0rem; } .u-mgl0XS { margin-left: 0rem; } .u-mgr0XS { margin-right: 0rem; } .u-mgb0XS { margin-bottom: 0rem; } .u-mgt1XS { margin-top: 0.25rem; } .u-mgl1XS { margin-left: 0.25rem; } .u-mgr1XS { margin-right: 0.25rem; } .u-mgb1XS { margin-bottom: 0.25rem; } .u-mgt2XS { margin-top: 0.5rem; } .u-mgl2XS { margin-left: 0.5rem; } .u-mgr2XS { margin-right: 0.5rem; } .u-mgb2XS { margin-bottom: 0.5rem; } .u-mgt3XS { margin-top: 0.75rem; } .u-mgl3XS { margin-left: 0.75rem; } .u-mgr3XS { margin-right: 0.75rem; } .u-mgb3XS { margin-bottom: 0.75rem; } .u-mgt4XS { margin-top: 1rem; } .u-mgl4XS { margin-left: 1rem; } .u-mgr4XS { margin-right: 1rem; } .u-mgb4XS { margin-bottom: 1rem; } .u-mgt5XS { margin-top: 1.25rem; } .u-mgl5XS { margin-left: 1.25rem; } .u-mgr5XS { margin-right: 1.25rem; } .u-mgb5XS { margin-bottom: 1.25rem; } .u-mgt6XS { margin-top: 1.5rem; } .u-mgl6XS { margin-left: 1.5rem; } .u-mgr6XS { margin-right: 1.5rem; } .u-mgb6XS { margin-bottom: 1.5rem; } .u-mgt7XS { margin-top: 1.75rem; } .u-mgl7XS { margin-left: 1.75rem; } .u-mgr7XS { margin-right: 1.75rem; } .u-mgb7XS { margin-bottom: 1.75rem; } .u-mgt8XS { margin-top: 2rem; } .u-mgl8XS { margin-left: 2rem; } .u-mgr8XS { margin-right: 2rem; } .u-mgb8XS { margin-bottom: 2rem; } .u-mgt9XS { margin-top: 2.25rem; } .u-mgl9XS { margin-left: 2.25rem; } .u-mgr9XS { margin-right: 2.25rem; } .u-mgb9XS { margin-bottom: 2.25rem; } .u-mgt10XS { margin-top: 2.5rem; } .u-mgl10XS { margin-left: 2.5rem; } .u-mgr10XS { margin-right: 2.5rem; } .u-mgb10XS { margin-bottom: 2.5rem; } .u-mgt11XS { margin-top: 2.75rem; } .u-mgl11XS { margin-left: 2.75rem; } .u-mgr11XS { margin-right: 2.75rem; } .u-mgb11XS { margin-bottom: 2.75rem; } .u-mgt12XS { margin-top: 3rem; } .u-mgl12XS { margin-left: 3rem; } .u-mgr12XS { margin-right: 3rem; } .u-mgb12XS { margin-bottom: 3rem; } .u-mgt13XS { margin-top: 3.25rem; } .u-mgl13XS { margin-left: 3.25rem; } .u-mgr13XS { margin-right: 3.25rem; } .u-mgb13XS { margin-bottom: 3.25rem; } .u-mgt14XS { margin-top: 3.5rem; } .u-mgl14XS { margin-left: 3.5rem; } .u-mgr14XS { margin-right: 3.5rem; } .u-mgb14XS { margin-bottom: 3.5rem; } .u-mgt15XS { margin-top: 3.75rem; } .u-mgl15XS { margin-left: 3.75rem; } .u-mgr15XS { margin-right: 3.75rem; } .u-mgb15XS { margin-bottom: 3.75rem; } .u-mgt16XS { margin-top: 4rem; } .u-mgl16XS { margin-left: 4rem; } .u-mgr16XS { margin-right: 4rem; } .u-mgb16XS { margin-bottom: 4rem; } .u-mgt17XS { margin-top: 4.25rem; } .u-mgl17XS { margin-left: 4.25rem; } .u-mgr17XS { margin-right: 4.25rem; } .u-mgb17XS { margin-bottom: 4.25rem; } .u-mgt18XS { margin-top: 4.5rem; } .u-mgl18XS { margin-left: 4.5rem; } .u-mgr18XS { margin-right: 4.5rem; } .u-mgb18XS { margin-bottom: 4.5rem; } .u-mgt19XS { margin-top: 4.75rem; } .u-mgl19XS { margin-left: 4.75rem; } .u-mgr19XS { margin-right: 4.75rem; } .u-mgb19XS { margin-bottom: 4.75rem; } .u-mgt20XS { margin-top: 5rem; } .u-mgl20XS { margin-left: 5rem; } .u-mgr20XS { margin-right: 5rem; } .u-mgb20XS { margin-bottom: 5rem; } } @media (768px <= width < 1025px) { .u-mgt0SM { margin-top: 0rem; } .u-mgl0SM { margin-left: 0rem; } .u-mgr0SM { margin-right: 0rem; } .u-mgb0SM { margin-bottom: 0rem; } .u-mgt1SM { margin-top: 0.25rem; } .u-mgl1SM { margin-left: 0.25rem; } .u-mgr1SM { margin-right: 0.25rem; } .u-mgb1SM { margin-bottom: 0.25rem; } .u-mgt2SM { margin-top: 0.5rem; } .u-mgl2SM { margin-left: 0.5rem; } .u-mgr2SM { margin-right: 0.5rem; } .u-mgb2SM { margin-bottom: 0.5rem; } .u-mgt3SM { margin-top: 0.75rem; } .u-mgl3SM { margin-left: 0.75rem; } .u-mgr3SM { margin-right: 0.75rem; } .u-mgb3SM { margin-bottom: 0.75rem; } .u-mgt4SM { margin-top: 1rem; } .u-mgl4SM { margin-left: 1rem; } .u-mgr4SM { margin-right: 1rem; } .u-mgb4SM { margin-bottom: 1rem; } .u-mgt5SM { margin-top: 1.25rem; } .u-mgl5SM { margin-left: 1.25rem; } .u-mgr5SM { margin-right: 1.25rem; } .u-mgb5SM { margin-bottom: 1.25rem; } .u-mgt6SM { margin-top: 1.5rem; } .u-mgl6SM { margin-left: 1.5rem; } .u-mgr6SM { margin-right: 1.5rem; } .u-mgb6SM { margin-bottom: 1.5rem; } .u-mgt7SM { margin-top: 1.75rem; } .u-mgl7SM { margin-left: 1.75rem; } .u-mgr7SM { margin-right: 1.75rem; } .u-mgb7SM { margin-bottom: 1.75rem; } .u-mgt8SM { margin-top: 2rem; } .u-mgl8SM { margin-left: 2rem; } .u-mgr8SM { margin-right: 2rem; } .u-mgb8SM { margin-bottom: 2rem; } .u-mgt9SM { margin-top: 2.25rem; } .u-mgl9SM { margin-left: 2.25rem; } .u-mgr9SM { margin-right: 2.25rem; } .u-mgb9SM { margin-bottom: 2.25rem; } .u-mgt10SM { margin-top: 2.5rem; } .u-mgl10SM { margin-left: 2.5rem; } .u-mgr10SM { margin-right: 2.5rem; } .u-mgb10SM { margin-bottom: 2.5rem; } .u-mgt11SM { margin-top: 2.75rem; } .u-mgl11SM { margin-left: 2.75rem; } .u-mgr11SM { margin-right: 2.75rem; } .u-mgb11SM { margin-bottom: 2.75rem; } .u-mgt12SM { margin-top: 3rem; } .u-mgl12SM { margin-left: 3rem; } .u-mgr12SM { margin-right: 3rem; } .u-mgb12SM { margin-bottom: 3rem; } .u-mgt13SM { margin-top: 3.25rem; } .u-mgl13SM { margin-left: 3.25rem; } .u-mgr13SM { margin-right: 3.25rem; } .u-mgb13SM { margin-bottom: 3.25rem; } .u-mgt14SM { margin-top: 3.5rem; } .u-mgl14SM { margin-left: 3.5rem; } .u-mgr14SM { margin-right: 3.5rem; } .u-mgb14SM { margin-bottom: 3.5rem; } .u-mgt15SM { margin-top: 3.75rem; } .u-mgl15SM { margin-left: 3.75rem; } .u-mgr15SM { margin-right: 3.75rem; } .u-mgb15SM { margin-bottom: 3.75rem; } .u-mgt16SM { margin-top: 4rem; } .u-mgl16SM { margin-left: 4rem; } .u-mgr16SM { margin-right: 4rem; } .u-mgb16SM { margin-bottom: 4rem; } .u-mgt17SM { margin-top: 4.25rem; } .u-mgl17SM { margin-left: 4.25rem; } .u-mgr17SM { margin-right: 4.25rem; } .u-mgb17SM { margin-bottom: 4.25rem; } .u-mgt18SM { margin-top: 4.5rem; } .u-mgl18SM { margin-left: 4.5rem; } .u-mgr18SM { margin-right: 4.5rem; } .u-mgb18SM { margin-bottom: 4.5rem; } .u-mgt19SM { margin-top: 4.75rem; } .u-mgl19SM { margin-left: 4.75rem; } .u-mgr19SM { margin-right: 4.75rem; } .u-mgb19SM { margin-bottom: 4.75rem; } .u-mgt20SM { margin-top: 5rem; } .u-mgl20SM { margin-left: 5rem; } .u-mgr20SM { margin-right: 5rem; } .u-mgb20SM { margin-bottom: 5rem; } } @media (1025px <= width < 1280px) { .u-mgt0MD { margin-top: 0rem; } .u-mgl0MD { margin-left: 0rem; } .u-mgr0MD { margin-right: 0rem; } .u-mgb0MD { margin-bottom: 0rem; } .u-mgt1MD { margin-top: 0.25rem; } .u-mgl1MD { margin-left: 0.25rem; } .u-mgr1MD { margin-right: 0.25rem; } .u-mgb1MD { margin-bottom: 0.25rem; } .u-mgt2MD { margin-top: 0.5rem; } .u-mgl2MD { margin-left: 0.5rem; } .u-mgr2MD { margin-right: 0.5rem; } .u-mgb2MD { margin-bottom: 0.5rem; } .u-mgt3MD { margin-top: 0.75rem; } .u-mgl3MD { margin-left: 0.75rem; } .u-mgr3MD { margin-right: 0.75rem; } .u-mgb3MD { margin-bottom: 0.75rem; } .u-mgt4MD { margin-top: 1rem; } .u-mgl4MD { margin-left: 1rem; } .u-mgr4MD { margin-right: 1rem; } .u-mgb4MD { margin-bottom: 1rem; } .u-mgt5MD { margin-top: 1.25rem; } .u-mgl5MD { margin-left: 1.25rem; } .u-mgr5MD { margin-right: 1.25rem; } .u-mgb5MD { margin-bottom: 1.25rem; } .u-mgt6MD { margin-top: 1.5rem; } .u-mgl6MD { margin-left: 1.5rem; } .u-mgr6MD { margin-right: 1.5rem; } .u-mgb6MD { margin-bottom: 1.5rem; } .u-mgt7MD { margin-top: 1.75rem; } .u-mgl7MD { margin-left: 1.75rem; } .u-mgr7MD { margin-right: 1.75rem; } .u-mgb7MD { margin-bottom: 1.75rem; } .u-mgt8MD { margin-top: 2rem; } .u-mgl8MD { margin-left: 2rem; } .u-mgr8MD { margin-right: 2rem; } .u-mgb8MD { margin-bottom: 2rem; } .u-mgt9MD { margin-top: 2.25rem; } .u-mgl9MD { margin-left: 2.25rem; } .u-mgr9MD { margin-right: 2.25rem; } .u-mgb9MD { margin-bottom: 2.25rem; } .u-mgt10MD { margin-top: 2.5rem; } .u-mgl10MD { margin-left: 2.5rem; } .u-mgr10MD { margin-right: 2.5rem; } .u-mgb10MD { margin-bottom: 2.5rem; } .u-mgt11MD { margin-top: 2.75rem; } .u-mgl11MD { margin-left: 2.75rem; } .u-mgr11MD { margin-right: 2.75rem; } .u-mgb11MD { margin-bottom: 2.75rem; } .u-mgt12MD { margin-top: 3rem; } .u-mgl12MD { margin-left: 3rem; } .u-mgr12MD { margin-right: 3rem; } .u-mgb12MD { margin-bottom: 3rem; } .u-mgt13MD { margin-top: 3.25rem; } .u-mgl13MD { margin-left: 3.25rem; } .u-mgr13MD { margin-right: 3.25rem; } .u-mgb13MD { margin-bottom: 3.25rem; } .u-mgt14MD { margin-top: 3.5rem; } .u-mgl14MD { margin-left: 3.5rem; } .u-mgr14MD { margin-right: 3.5rem; } .u-mgb14MD { margin-bottom: 3.5rem; } .u-mgt15MD { margin-top: 3.75rem; } .u-mgl15MD { margin-left: 3.75rem; } .u-mgr15MD { margin-right: 3.75rem; } .u-mgb15MD { margin-bottom: 3.75rem; } .u-mgt16MD { margin-top: 4rem; } .u-mgl16MD { margin-left: 4rem; } .u-mgr16MD { margin-right: 4rem; } .u-mgb16MD { margin-bottom: 4rem; } .u-mgt17MD { margin-top: 4.25rem; } .u-mgl17MD { margin-left: 4.25rem; } .u-mgr17MD { margin-right: 4.25rem; } .u-mgb17MD { margin-bottom: 4.25rem; } .u-mgt18MD { margin-top: 4.5rem; } .u-mgl18MD { margin-left: 4.5rem; } .u-mgr18MD { margin-right: 4.5rem; } .u-mgb18MD { margin-bottom: 4.5rem; } .u-mgt19MD { margin-top: 4.75rem; } .u-mgl19MD { margin-left: 4.75rem; } .u-mgr19MD { margin-right: 4.75rem; } .u-mgb19MD { margin-bottom: 4.75rem; } .u-mgt20MD { margin-top: 5rem; } .u-mgl20MD { margin-left: 5rem; } .u-mgr20MD { margin-right: 5rem; } .u-mgb20MD { margin-bottom: 5rem; } } @media (1280px <= width < 1440px) { .u-mgt0LG { margin-top: 0rem; } .u-mgl0LG { margin-left: 0rem; } .u-mgr0LG { margin-right: 0rem; } .u-mgb0LG { margin-bottom: 0rem; } .u-mgt1LG { margin-top: 0.25rem; } .u-mgl1LG { margin-left: 0.25rem; } .u-mgr1LG { margin-right: 0.25rem; } .u-mgb1LG { margin-bottom: 0.25rem; } .u-mgt2LG { margin-top: 0.5rem; } .u-mgl2LG { margin-left: 0.5rem; } .u-mgr2LG { margin-right: 0.5rem; } .u-mgb2LG { margin-bottom: 0.5rem; } .u-mgt3LG { margin-top: 0.75rem; } .u-mgl3LG { margin-left: 0.75rem; } .u-mgr3LG { margin-right: 0.75rem; } .u-mgb3LG { margin-bottom: 0.75rem; } .u-mgt4LG { margin-top: 1rem; } .u-mgl4LG { margin-left: 1rem; } .u-mgr4LG { margin-right: 1rem; } .u-mgb4LG { margin-bottom: 1rem; } .u-mgt5LG { margin-top: 1.25rem; } .u-mgl5LG { margin-left: 1.25rem; } .u-mgr5LG { margin-right: 1.25rem; } .u-mgb5LG { margin-bottom: 1.25rem; } .u-mgt6LG { margin-top: 1.5rem; } .u-mgl6LG { margin-left: 1.5rem; } .u-mgr6LG { margin-right: 1.5rem; } .u-mgb6LG { margin-bottom: 1.5rem; } .u-mgt7LG { margin-top: 1.75rem; } .u-mgl7LG { margin-left: 1.75rem; } .u-mgr7LG { margin-right: 1.75rem; } .u-mgb7LG { margin-bottom: 1.75rem; } .u-mgt8LG { margin-top: 2rem; } .u-mgl8LG { margin-left: 2rem; } .u-mgr8LG { margin-right: 2rem; } .u-mgb8LG { margin-bottom: 2rem; } .u-mgt9LG { margin-top: 2.25rem; } .u-mgl9LG { margin-left: 2.25rem; } .u-mgr9LG { margin-right: 2.25rem; } .u-mgb9LG { margin-bottom: 2.25rem; } .u-mgt10LG { margin-top: 2.5rem; } .u-mgl10LG { margin-left: 2.5rem; } .u-mgr10LG { margin-right: 2.5rem; } .u-mgb10LG { margin-bottom: 2.5rem; } .u-mgt11LG { margin-top: 2.75rem; } .u-mgl11LG { margin-left: 2.75rem; } .u-mgr11LG { margin-right: 2.75rem; } .u-mgb11LG { margin-bottom: 2.75rem; } .u-mgt12LG { margin-top: 3rem; } .u-mgl12LG { margin-left: 3rem; } .u-mgr12LG { margin-right: 3rem; } .u-mgb12LG { margin-bottom: 3rem; } .u-mgt13LG { margin-top: 3.25rem; } .u-mgl13LG { margin-left: 3.25rem; } .u-mgr13LG { margin-right: 3.25rem; } .u-mgb13LG { margin-bottom: 3.25rem; } .u-mgt14LG { margin-top: 3.5rem; } .u-mgl14LG { margin-left: 3.5rem; } .u-mgr14LG { margin-right: 3.5rem; } .u-mgb14LG { margin-bottom: 3.5rem; } .u-mgt15LG { margin-top: 3.75rem; } .u-mgl15LG { margin-left: 3.75rem; } .u-mgr15LG { margin-right: 3.75rem; } .u-mgb15LG { margin-bottom: 3.75rem; } .u-mgt16LG { margin-top: 4rem; } .u-mgl16LG { margin-left: 4rem; } .u-mgr16LG { margin-right: 4rem; } .u-mgb16LG { margin-bottom: 4rem; } .u-mgt17LG { margin-top: 4.25rem; } .u-mgl17LG { margin-left: 4.25rem; } .u-mgr17LG { margin-right: 4.25rem; } .u-mgb17LG { margin-bottom: 4.25rem; } .u-mgt18LG { margin-top: 4.5rem; } .u-mgl18LG { margin-left: 4.5rem; } .u-mgr18LG { margin-right: 4.5rem; } .u-mgb18LG { margin-bottom: 4.5rem; } .u-mgt19LG { margin-top: 4.75rem; } .u-mgl19LG { margin-left: 4.75rem; } .u-mgr19LG { margin-right: 4.75rem; } .u-mgb19LG { margin-bottom: 4.75rem; } .u-mgt20LG { margin-top: 5rem; } .u-mgl20LG { margin-left: 5rem; } .u-mgr20LG { margin-right: 5rem; } .u-mgb20LG { margin-bottom: 5rem; } } @media (1440px <= width < 1600px) { .u-mgt0XL { margin-top: 0rem; } .u-mgl0XL { margin-left: 0rem; } .u-mgr0XL { margin-right: 0rem; } .u-mgb0XL { margin-bottom: 0rem; } .u-mgt1XL { margin-top: 0.25rem; } .u-mgl1XL { margin-left: 0.25rem; } .u-mgr1XL { margin-right: 0.25rem; } .u-mgb1XL { margin-bottom: 0.25rem; } .u-mgt2XL { margin-top: 0.5rem; } .u-mgl2XL { margin-left: 0.5rem; } .u-mgr2XL { margin-right: 0.5rem; } .u-mgb2XL { margin-bottom: 0.5rem; } .u-mgt3XL { margin-top: 0.75rem; } .u-mgl3XL { margin-left: 0.75rem; } .u-mgr3XL { margin-right: 0.75rem; } .u-mgb3XL { margin-bottom: 0.75rem; } .u-mgt4XL { margin-top: 1rem; } .u-mgl4XL { margin-left: 1rem; } .u-mgr4XL { margin-right: 1rem; } .u-mgb4XL { margin-bottom: 1rem; } .u-mgt5XL { margin-top: 1.25rem; } .u-mgl5XL { margin-left: 1.25rem; } .u-mgr5XL { margin-right: 1.25rem; } .u-mgb5XL { margin-bottom: 1.25rem; } .u-mgt6XL { margin-top: 1.5rem; } .u-mgl6XL { margin-left: 1.5rem; } .u-mgr6XL { margin-right: 1.5rem; } .u-mgb6XL { margin-bottom: 1.5rem; } .u-mgt7XL { margin-top: 1.75rem; } .u-mgl7XL { margin-left: 1.75rem; } .u-mgr7XL { margin-right: 1.75rem; } .u-mgb7XL { margin-bottom: 1.75rem; } .u-mgt8XL { margin-top: 2rem; } .u-mgl8XL { margin-left: 2rem; } .u-mgr8XL { margin-right: 2rem; } .u-mgb8XL { margin-bottom: 2rem; } .u-mgt9XL { margin-top: 2.25rem; } .u-mgl9XL { margin-left: 2.25rem; } .u-mgr9XL { margin-right: 2.25rem; } .u-mgb9XL { margin-bottom: 2.25rem; } .u-mgt10XL { margin-top: 2.5rem; } .u-mgl10XL { margin-left: 2.5rem; } .u-mgr10XL { margin-right: 2.5rem; } .u-mgb10XL { margin-bottom: 2.5rem; } .u-mgt11XL { margin-top: 2.75rem; } .u-mgl11XL { margin-left: 2.75rem; } .u-mgr11XL { margin-right: 2.75rem; } .u-mgb11XL { margin-bottom: 2.75rem; } .u-mgt12XL { margin-top: 3rem; } .u-mgl12XL { margin-left: 3rem; } .u-mgr12XL { margin-right: 3rem; } .u-mgb12XL { margin-bottom: 3rem; } .u-mgt13XL { margin-top: 3.25rem; } .u-mgl13XL { margin-left: 3.25rem; } .u-mgr13XL { margin-right: 3.25rem; } .u-mgb13XL { margin-bottom: 3.25rem; } .u-mgt14XL { margin-top: 3.5rem; } .u-mgl14XL { margin-left: 3.5rem; } .u-mgr14XL { margin-right: 3.5rem; } .u-mgb14XL { margin-bottom: 3.5rem; } .u-mgt15XL { margin-top: 3.75rem; } .u-mgl15XL { margin-left: 3.75rem; } .u-mgr15XL { margin-right: 3.75rem; } .u-mgb15XL { margin-bottom: 3.75rem; } .u-mgt16XL { margin-top: 4rem; } .u-mgl16XL { margin-left: 4rem; } .u-mgr16XL { margin-right: 4rem; } .u-mgb16XL { margin-bottom: 4rem; } .u-mgt17XL { margin-top: 4.25rem; } .u-mgl17XL { margin-left: 4.25rem; } .u-mgr17XL { margin-right: 4.25rem; } .u-mgb17XL { margin-bottom: 4.25rem; } .u-mgt18XL { margin-top: 4.5rem; } .u-mgl18XL { margin-left: 4.5rem; } .u-mgr18XL { margin-right: 4.5rem; } .u-mgb18XL { margin-bottom: 4.5rem; } .u-mgt19XL { margin-top: 4.75rem; } .u-mgl19XL { margin-left: 4.75rem; } .u-mgr19XL { margin-right: 4.75rem; } .u-mgb19XL { margin-bottom: 4.75rem; } .u-mgt20XL { margin-top: 5rem; } .u-mgl20XL { margin-left: 5rem; } .u-mgr20XL { margin-right: 5rem; } .u-mgb20XL { margin-bottom: 5rem; } } @media (1600px <= width < 9999px) { .u-mgt0XXL { margin-top: 0rem; } .u-mgl0XXL { margin-left: 0rem; } .u-mgr0XXL { margin-right: 0rem; } .u-mgb0XXL { margin-bottom: 0rem; } .u-mgt1XXL { margin-top: 0.25rem; } .u-mgl1XXL { margin-left: 0.25rem; } .u-mgr1XXL { margin-right: 0.25rem; } .u-mgb1XXL { margin-bottom: 0.25rem; } .u-mgt2XXL { margin-top: 0.5rem; } .u-mgl2XXL { margin-left: 0.5rem; } .u-mgr2XXL { margin-right: 0.5rem; } .u-mgb2XXL { margin-bottom: 0.5rem; } .u-mgt3XXL { margin-top: 0.75rem; } .u-mgl3XXL { margin-left: 0.75rem; } .u-mgr3XXL { margin-right: 0.75rem; } .u-mgb3XXL { margin-bottom: 0.75rem; } .u-mgt4XXL { margin-top: 1rem; } .u-mgl4XXL { margin-left: 1rem; } .u-mgr4XXL { margin-right: 1rem; } .u-mgb4XXL { margin-bottom: 1rem; } .u-mgt5XXL { margin-top: 1.25rem; } .u-mgl5XXL { margin-left: 1.25rem; } .u-mgr5XXL { margin-right: 1.25rem; } .u-mgb5XXL { margin-bottom: 1.25rem; } .u-mgt6XXL { margin-top: 1.5rem; } .u-mgl6XXL { margin-left: 1.5rem; } .u-mgr6XXL { margin-right: 1.5rem; } .u-mgb6XXL { margin-bottom: 1.5rem; } .u-mgt7XXL { margin-top: 1.75rem; } .u-mgl7XXL { margin-left: 1.75rem; } .u-mgr7XXL { margin-right: 1.75rem; } .u-mgb7XXL { margin-bottom: 1.75rem; } .u-mgt8XXL { margin-top: 2rem; } .u-mgl8XXL { margin-left: 2rem; } .u-mgr8XXL { margin-right: 2rem; } .u-mgb8XXL { margin-bottom: 2rem; } .u-mgt9XXL { margin-top: 2.25rem; } .u-mgl9XXL { margin-left: 2.25rem; } .u-mgr9XXL { margin-right: 2.25rem; } .u-mgb9XXL { margin-bottom: 2.25rem; } .u-mgt10XXL { margin-top: 2.5rem; } .u-mgl10XXL { margin-left: 2.5rem; } .u-mgr10XXL { margin-right: 2.5rem; } .u-mgb10XXL { margin-bottom: 2.5rem; } .u-mgt11XXL { margin-top: 2.75rem; } .u-mgl11XXL { margin-left: 2.75rem; } .u-mgr11XXL { margin-right: 2.75rem; } .u-mgb11XXL { margin-bottom: 2.75rem; } .u-mgt12XXL { margin-top: 3rem; } .u-mgl12XXL { margin-left: 3rem; } .u-mgr12XXL { margin-right: 3rem; } .u-mgb12XXL { margin-bottom: 3rem; } .u-mgt13XXL { margin-top: 3.25rem; } .u-mgl13XXL { margin-left: 3.25rem; } .u-mgr13XXL { margin-right: 3.25rem; } .u-mgb13XXL { margin-bottom: 3.25rem; } .u-mgt14XXL { margin-top: 3.5rem; } .u-mgl14XXL { margin-left: 3.5rem; } .u-mgr14XXL { margin-right: 3.5rem; } .u-mgb14XXL { margin-bottom: 3.5rem; } .u-mgt15XXL { margin-top: 3.75rem; } .u-mgl15XXL { margin-left: 3.75rem; } .u-mgr15XXL { margin-right: 3.75rem; } .u-mgb15XXL { margin-bottom: 3.75rem; } .u-mgt16XXL { margin-top: 4rem; } .u-mgl16XXL { margin-left: 4rem; } .u-mgr16XXL { margin-right: 4rem; } .u-mgb16XXL { margin-bottom: 4rem; } .u-mgt17XXL { margin-top: 4.25rem; } .u-mgl17XXL { margin-left: 4.25rem; } .u-mgr17XXL { margin-right: 4.25rem; } .u-mgb17XXL { margin-bottom: 4.25rem; } .u-mgt18XXL { margin-top: 4.5rem; } .u-mgl18XXL { margin-left: 4.5rem; } .u-mgr18XXL { margin-right: 4.5rem; } .u-mgb18XXL { margin-bottom: 4.5rem; } .u-mgt19XXL { margin-top: 4.75rem; } .u-mgl19XXL { margin-left: 4.75rem; } .u-mgr19XXL { margin-right: 4.75rem; } .u-mgb19XXL { margin-bottom: 4.75rem; } .u-mgt20XXL { margin-top: 5rem; } .u-mgl20XXL { margin-left: 5rem; } .u-mgr20XXL { margin-right: 5rem; } .u-mgb20XXL { margin-bottom: 5rem; } } /* -------------------------------------------- DEVICE -------------------------------------------- */ @media (width < 768px) { .u-mgt0SP { margin-top: 0rem; } .u-mgl0SP { margin-left: 0rem; } .u-mgr0SP { margin-right: 0rem; } .u-mgb0SP { margin-bottom: 0rem; } .u-mgt1SP { margin-top: 0.25rem; } .u-mgl1SP { margin-left: 0.25rem; } .u-mgr1SP { margin-right: 0.25rem; } .u-mgb1SP { margin-bottom: 0.25rem; } .u-mgt2SP { margin-top: 0.5rem; } .u-mgl2SP { margin-left: 0.5rem; } .u-mgr2SP { margin-right: 0.5rem; } .u-mgb2SP { margin-bottom: 0.5rem; } .u-mgt3SP { margin-top: 0.75rem; } .u-mgl3SP { margin-left: 0.75rem; } .u-mgr3SP { margin-right: 0.75rem; } .u-mgb3SP { margin-bottom: 0.75rem; } .u-mgt4SP { margin-top: 1rem; } .u-mgl4SP { margin-left: 1rem; } .u-mgr4SP { margin-right: 1rem; } .u-mgb4SP { margin-bottom: 1rem; } .u-mgt5SP { margin-top: 1.25rem; } .u-mgl5SP { margin-left: 1.25rem; } .u-mgr5SP { margin-right: 1.25rem; } .u-mgb5SP { margin-bottom: 1.25rem; } .u-mgt6SP { margin-top: 1.5rem; } .u-mgl6SP { margin-left: 1.5rem; } .u-mgr6SP { margin-right: 1.5rem; } .u-mgb6SP { margin-bottom: 1.5rem; } .u-mgt7SP { margin-top: 1.75rem; } .u-mgl7SP { margin-left: 1.75rem; } .u-mgr7SP { margin-right: 1.75rem; } .u-mgb7SP { margin-bottom: 1.75rem; } .u-mgt8SP { margin-top: 2rem; } .u-mgl8SP { margin-left: 2rem; } .u-mgr8SP { margin-right: 2rem; } .u-mgb8SP { margin-bottom: 2rem; } .u-mgt9SP { margin-top: 2.25rem; } .u-mgl9SP { margin-left: 2.25rem; } .u-mgr9SP { margin-right: 2.25rem; } .u-mgb9SP { margin-bottom: 2.25rem; } .u-mgt10SP { margin-top: 2.5rem; } .u-mgl10SP { margin-left: 2.5rem; } .u-mgr10SP { margin-right: 2.5rem; } .u-mgb10SP { margin-bottom: 2.5rem; } .u-mgt11SP { margin-top: 2.75rem; } .u-mgl11SP { margin-left: 2.75rem; } .u-mgr11SP { margin-right: 2.75rem; } .u-mgb11SP { margin-bottom: 2.75rem; } .u-mgt12SP { margin-top: 3rem; } .u-mgl12SP { margin-left: 3rem; } .u-mgr12SP { margin-right: 3rem; } .u-mgb12SP { margin-bottom: 3rem; } .u-mgt13SP { margin-top: 3.25rem; } .u-mgl13SP { margin-left: 3.25rem; } .u-mgr13SP { margin-right: 3.25rem; } .u-mgb13SP { margin-bottom: 3.25rem; } .u-mgt14SP { margin-top: 3.5rem; } .u-mgl14SP { margin-left: 3.5rem; } .u-mgr14SP { margin-right: 3.5rem; } .u-mgb14SP { margin-bottom: 3.5rem; } .u-mgt15SP { margin-top: 3.75rem; } .u-mgl15SP { margin-left: 3.75rem; } .u-mgr15SP { margin-right: 3.75rem; } .u-mgb15SP { margin-bottom: 3.75rem; } .u-mgt16SP { margin-top: 4rem; } .u-mgl16SP { margin-left: 4rem; } .u-mgr16SP { margin-right: 4rem; } .u-mgb16SP { margin-bottom: 4rem; } .u-mgt17SP { margin-top: 4.25rem; } .u-mgl17SP { margin-left: 4.25rem; } .u-mgr17SP { margin-right: 4.25rem; } .u-mgb17SP { margin-bottom: 4.25rem; } .u-mgt18SP { margin-top: 4.5rem; } .u-mgl18SP { margin-left: 4.5rem; } .u-mgr18SP { margin-right: 4.5rem; } .u-mgb18SP { margin-bottom: 4.5rem; } .u-mgt19SP { margin-top: 4.75rem; } .u-mgl19SP { margin-left: 4.75rem; } .u-mgr19SP { margin-right: 4.75rem; } .u-mgb19SP { margin-bottom: 4.75rem; } .u-mgt20SP { margin-top: 5rem; } .u-mgl20SP { margin-left: 5rem; } .u-mgr20SP { margin-right: 5rem; } .u-mgb20SP { margin-bottom: 5rem; } } @media (768px <= width < 1025px) { .u-mgt0TB { margin-top: 0rem; } .u-mgl0TB { margin-left: 0rem; } .u-mgr0TB { margin-right: 0rem; } .u-mgb0TB { margin-bottom: 0rem; } .u-mgt1TB { margin-top: 0.25rem; } .u-mgl1TB { margin-left: 0.25rem; } .u-mgr1TB { margin-right: 0.25rem; } .u-mgb1TB { margin-bottom: 0.25rem; } .u-mgt2TB { margin-top: 0.5rem; } .u-mgl2TB { margin-left: 0.5rem; } .u-mgr2TB { margin-right: 0.5rem; } .u-mgb2TB { margin-bottom: 0.5rem; } .u-mgt3TB { margin-top: 0.75rem; } .u-mgl3TB { margin-left: 0.75rem; } .u-mgr3TB { margin-right: 0.75rem; } .u-mgb3TB { margin-bottom: 0.75rem; } .u-mgt4TB { margin-top: 1rem; } .u-mgl4TB { margin-left: 1rem; } .u-mgr4TB { margin-right: 1rem; } .u-mgb4TB { margin-bottom: 1rem; } .u-mgt5TB { margin-top: 1.25rem; } .u-mgl5TB { margin-left: 1.25rem; } .u-mgr5TB { margin-right: 1.25rem; } .u-mgb5TB { margin-bottom: 1.25rem; } .u-mgt6TB { margin-top: 1.5rem; } .u-mgl6TB { margin-left: 1.5rem; } .u-mgr6TB { margin-right: 1.5rem; } .u-mgb6TB { margin-bottom: 1.5rem; } .u-mgt7TB { margin-top: 1.75rem; } .u-mgl7TB { margin-left: 1.75rem; } .u-mgr7TB { margin-right: 1.75rem; } .u-mgb7TB { margin-bottom: 1.75rem; } .u-mgt8TB { margin-top: 2rem; } .u-mgl8TB { margin-left: 2rem; } .u-mgr8TB { margin-right: 2rem; } .u-mgb8TB { margin-bottom: 2rem; } .u-mgt9TB { margin-top: 2.25rem; } .u-mgl9TB { margin-left: 2.25rem; } .u-mgr9TB { margin-right: 2.25rem; } .u-mgb9TB { margin-bottom: 2.25rem; } .u-mgt10TB { margin-top: 2.5rem; } .u-mgl10TB { margin-left: 2.5rem; } .u-mgr10TB { margin-right: 2.5rem; } .u-mgb10TB { margin-bottom: 2.5rem; } .u-mgt11TB { margin-top: 2.75rem; } .u-mgl11TB { margin-left: 2.75rem; } .u-mgr11TB { margin-right: 2.75rem; } .u-mgb11TB { margin-bottom: 2.75rem; } .u-mgt12TB { margin-top: 3rem; } .u-mgl12TB { margin-left: 3rem; } .u-mgr12TB { margin-right: 3rem; } .u-mgb12TB { margin-bottom: 3rem; } .u-mgt13TB { margin-top: 3.25rem; } .u-mgl13TB { margin-left: 3.25rem; } .u-mgr13TB { margin-right: 3.25rem; } .u-mgb13TB { margin-bottom: 3.25rem; } .u-mgt14TB { margin-top: 3.5rem; } .u-mgl14TB { margin-left: 3.5rem; } .u-mgr14TB { margin-right: 3.5rem; } .u-mgb14TB { margin-bottom: 3.5rem; } .u-mgt15TB { margin-top: 3.75rem; } .u-mgl15TB { margin-left: 3.75rem; } .u-mgr15TB { margin-right: 3.75rem; } .u-mgb15TB { margin-bottom: 3.75rem; } .u-mgt16TB { margin-top: 4rem; } .u-mgl16TB { margin-left: 4rem; } .u-mgr16TB { margin-right: 4rem; } .u-mgb16TB { margin-bottom: 4rem; } .u-mgt17TB { margin-top: 4.25rem; } .u-mgl17TB { margin-left: 4.25rem; } .u-mgr17TB { margin-right: 4.25rem; } .u-mgb17TB { margin-bottom: 4.25rem; } .u-mgt18TB { margin-top: 4.5rem; } .u-mgl18TB { margin-left: 4.5rem; } .u-mgr18TB { margin-right: 4.5rem; } .u-mgb18TB { margin-bottom: 4.5rem; } .u-mgt19TB { margin-top: 4.75rem; } .u-mgl19TB { margin-left: 4.75rem; } .u-mgr19TB { margin-right: 4.75rem; } .u-mgb19TB { margin-bottom: 4.75rem; } .u-mgt20TB { margin-top: 5rem; } .u-mgl20TB { margin-left: 5rem; } .u-mgr20TB { margin-right: 5rem; } .u-mgb20TB { margin-bottom: 5rem; } } @media (width >= 1025px) { .u-mgt0PC { margin-top: 0rem; } .u-mgl0PC { margin-left: 0rem; } .u-mgr0PC { margin-right: 0rem; } .u-mgb0PC { margin-bottom: 0rem; } .u-mgt1PC { margin-top: 0.25rem; } .u-mgl1PC { margin-left: 0.25rem; } .u-mgr1PC { margin-right: 0.25rem; } .u-mgb1PC { margin-bottom: 0.25rem; } .u-mgt2PC { margin-top: 0.5rem; } .u-mgl2PC { margin-left: 0.5rem; } .u-mgr2PC { margin-right: 0.5rem; } .u-mgb2PC { margin-bottom: 0.5rem; } .u-mgt3PC { margin-top: 0.75rem; } .u-mgl3PC { margin-left: 0.75rem; } .u-mgr3PC { margin-right: 0.75rem; } .u-mgb3PC { margin-bottom: 0.75rem; } .u-mgt4PC { margin-top: 1rem; } .u-mgl4PC { margin-left: 1rem; } .u-mgr4PC { margin-right: 1rem; } .u-mgb4PC { margin-bottom: 1rem; } .u-mgt5PC { margin-top: 1.25rem; } .u-mgl5PC { margin-left: 1.25rem; } .u-mgr5PC { margin-right: 1.25rem; } .u-mgb5PC { margin-bottom: 1.25rem; } .u-mgt6PC { margin-top: 1.5rem; } .u-mgl6PC { margin-left: 1.5rem; } .u-mgr6PC { margin-right: 1.5rem; } .u-mgb6PC { margin-bottom: 1.5rem; } .u-mgt7PC { margin-top: 1.75rem; } .u-mgl7PC { margin-left: 1.75rem; } .u-mgr7PC { margin-right: 1.75rem; } .u-mgb7PC { margin-bottom: 1.75rem; } .u-mgt8PC { margin-top: 2rem; } .u-mgl8PC { margin-left: 2rem; } .u-mgr8PC { margin-right: 2rem; } .u-mgb8PC { margin-bottom: 2rem; } .u-mgt9PC { margin-top: 2.25rem; } .u-mgl9PC { margin-left: 2.25rem; } .u-mgr9PC { margin-right: 2.25rem; } .u-mgb9PC { margin-bottom: 2.25rem; } .u-mgt10PC { margin-top: 2.5rem; } .u-mgl10PC { margin-left: 2.5rem; } .u-mgr10PC { margin-right: 2.5rem; } .u-mgb10PC { margin-bottom: 2.5rem; } .u-mgt11PC { margin-top: 2.75rem; } .u-mgl11PC { margin-left: 2.75rem; } .u-mgr11PC { margin-right: 2.75rem; } .u-mgb11PC { margin-bottom: 2.75rem; } .u-mgt12PC { margin-top: 3rem; } .u-mgl12PC { margin-left: 3rem; } .u-mgr12PC { margin-right: 3rem; } .u-mgb12PC { margin-bottom: 3rem; } .u-mgt13PC { margin-top: 3.25rem; } .u-mgl13PC { margin-left: 3.25rem; } .u-mgr13PC { margin-right: 3.25rem; } .u-mgb13PC { margin-bottom: 3.25rem; } .u-mgt14PC { margin-top: 3.5rem; } .u-mgl14PC { margin-left: 3.5rem; } .u-mgr14PC { margin-right: 3.5rem; } .u-mgb14PC { margin-bottom: 3.5rem; } .u-mgt15PC { margin-top: 3.75rem; } .u-mgl15PC { margin-left: 3.75rem; } .u-mgr15PC { margin-right: 3.75rem; } .u-mgb15PC { margin-bottom: 3.75rem; } .u-mgt16PC { margin-top: 4rem; } .u-mgl16PC { margin-left: 4rem; } .u-mgr16PC { margin-right: 4rem; } .u-mgb16PC { margin-bottom: 4rem; } .u-mgt17PC { margin-top: 4.25rem; } .u-mgl17PC { margin-left: 4.25rem; } .u-mgr17PC { margin-right: 4.25rem; } .u-mgb17PC { margin-bottom: 4.25rem; } .u-mgt18PC { margin-top: 4.5rem; } .u-mgl18PC { margin-left: 4.5rem; } .u-mgr18PC { margin-right: 4.5rem; } .u-mgb18PC { margin-bottom: 4.5rem; } .u-mgt19PC { margin-top: 4.75rem; } .u-mgl19PC { margin-left: 4.75rem; } .u-mgr19PC { margin-right: 4.75rem; } .u-mgb19PC { margin-bottom: 4.75rem; } .u-mgt20PC { margin-top: 5rem; } .u-mgl20PC { margin-left: 5rem; } .u-mgr20PC { margin-right: 5rem; } .u-mgb20PC { margin-bottom: 5rem; } } @media (width >= 1280px) { .u-mgt0NB { margin-top: 0rem; } .u-mgl0NB { margin-left: 0rem; } .u-mgr0NB { margin-right: 0rem; } .u-mgb0NB { margin-bottom: 0rem; } .u-mgt1NB { margin-top: 0.25rem; } .u-mgl1NB { margin-left: 0.25rem; } .u-mgr1NB { margin-right: 0.25rem; } .u-mgb1NB { margin-bottom: 0.25rem; } .u-mgt2NB { margin-top: 0.5rem; } .u-mgl2NB { margin-left: 0.5rem; } .u-mgr2NB { margin-right: 0.5rem; } .u-mgb2NB { margin-bottom: 0.5rem; } .u-mgt3NB { margin-top: 0.75rem; } .u-mgl3NB { margin-left: 0.75rem; } .u-mgr3NB { margin-right: 0.75rem; } .u-mgb3NB { margin-bottom: 0.75rem; } .u-mgt4NB { margin-top: 1rem; } .u-mgl4NB { margin-left: 1rem; } .u-mgr4NB { margin-right: 1rem; } .u-mgb4NB { margin-bottom: 1rem; } .u-mgt5NB { margin-top: 1.25rem; } .u-mgl5NB { margin-left: 1.25rem; } .u-mgr5NB { margin-right: 1.25rem; } .u-mgb5NB { margin-bottom: 1.25rem; } .u-mgt6NB { margin-top: 1.5rem; } .u-mgl6NB { margin-left: 1.5rem; } .u-mgr6NB { margin-right: 1.5rem; } .u-mgb6NB { margin-bottom: 1.5rem; } .u-mgt7NB { margin-top: 1.75rem; } .u-mgl7NB { margin-left: 1.75rem; } .u-mgr7NB { margin-right: 1.75rem; } .u-mgb7NB { margin-bottom: 1.75rem; } .u-mgt8NB { margin-top: 2rem; } .u-mgl8NB { margin-left: 2rem; } .u-mgr8NB { margin-right: 2rem; } .u-mgb8NB { margin-bottom: 2rem; } .u-mgt9NB { margin-top: 2.25rem; } .u-mgl9NB { margin-left: 2.25rem; } .u-mgr9NB { margin-right: 2.25rem; } .u-mgb9NB { margin-bottom: 2.25rem; } .u-mgt10NB { margin-top: 2.5rem; } .u-mgl10NB { margin-left: 2.5rem; } .u-mgr10NB { margin-right: 2.5rem; } .u-mgb10NB { margin-bottom: 2.5rem; } .u-mgt11NB { margin-top: 2.75rem; } .u-mgl11NB { margin-left: 2.75rem; } .u-mgr11NB { margin-right: 2.75rem; } .u-mgb11NB { margin-bottom: 2.75rem; } .u-mgt12NB { margin-top: 3rem; } .u-mgl12NB { margin-left: 3rem; } .u-mgr12NB { margin-right: 3rem; } .u-mgb12NB { margin-bottom: 3rem; } .u-mgt13NB { margin-top: 3.25rem; } .u-mgl13NB { margin-left: 3.25rem; } .u-mgr13NB { margin-right: 3.25rem; } .u-mgb13NB { margin-bottom: 3.25rem; } .u-mgt14NB { margin-top: 3.5rem; } .u-mgl14NB { margin-left: 3.5rem; } .u-mgr14NB { margin-right: 3.5rem; } .u-mgb14NB { margin-bottom: 3.5rem; } .u-mgt15NB { margin-top: 3.75rem; } .u-mgl15NB { margin-left: 3.75rem; } .u-mgr15NB { margin-right: 3.75rem; } .u-mgb15NB { margin-bottom: 3.75rem; } .u-mgt16NB { margin-top: 4rem; } .u-mgl16NB { margin-left: 4rem; } .u-mgr16NB { margin-right: 4rem; } .u-mgb16NB { margin-bottom: 4rem; } .u-mgt17NB { margin-top: 4.25rem; } .u-mgl17NB { margin-left: 4.25rem; } .u-mgr17NB { margin-right: 4.25rem; } .u-mgb17NB { margin-bottom: 4.25rem; } .u-mgt18NB { margin-top: 4.5rem; } .u-mgl18NB { margin-left: 4.5rem; } .u-mgr18NB { margin-right: 4.5rem; } .u-mgb18NB { margin-bottom: 4.5rem; } .u-mgt19NB { margin-top: 4.75rem; } .u-mgl19NB { margin-left: 4.75rem; } .u-mgr19NB { margin-right: 4.75rem; } .u-mgb19NB { margin-bottom: 4.75rem; } .u-mgt20NB { margin-top: 5rem; } .u-mgl20NB { margin-left: 5rem; } .u-mgr20NB { margin-right: 5rem; } .u-mgb20NB { margin-bottom: 5rem; } } @media (width >= 1440px) { .u-mgt0DT { margin-top: 0rem; } .u-mgl0DT { margin-left: 0rem; } .u-mgr0DT { margin-right: 0rem; } .u-mgb0DT { margin-bottom: 0rem; } .u-mgt1DT { margin-top: 0.25rem; } .u-mgl1DT { margin-left: 0.25rem; } .u-mgr1DT { margin-right: 0.25rem; } .u-mgb1DT { margin-bottom: 0.25rem; } .u-mgt2DT { margin-top: 0.5rem; } .u-mgl2DT { margin-left: 0.5rem; } .u-mgr2DT { margin-right: 0.5rem; } .u-mgb2DT { margin-bottom: 0.5rem; } .u-mgt3DT { margin-top: 0.75rem; } .u-mgl3DT { margin-left: 0.75rem; } .u-mgr3DT { margin-right: 0.75rem; } .u-mgb3DT { margin-bottom: 0.75rem; } .u-mgt4DT { margin-top: 1rem; } .u-mgl4DT { margin-left: 1rem; } .u-mgr4DT { margin-right: 1rem; } .u-mgb4DT { margin-bottom: 1rem; } .u-mgt5DT { margin-top: 1.25rem; } .u-mgl5DT { margin-left: 1.25rem; } .u-mgr5DT { margin-right: 1.25rem; } .u-mgb5DT { margin-bottom: 1.25rem; } .u-mgt6DT { margin-top: 1.5rem; } .u-mgl6DT { margin-left: 1.5rem; } .u-mgr6DT { margin-right: 1.5rem; } .u-mgb6DT { margin-bottom: 1.5rem; } .u-mgt7DT { margin-top: 1.75rem; } .u-mgl7DT { margin-left: 1.75rem; } .u-mgr7DT { margin-right: 1.75rem; } .u-mgb7DT { margin-bottom: 1.75rem; } .u-mgt8DT { margin-top: 2rem; } .u-mgl8DT { margin-left: 2rem; } .u-mgr8DT { margin-right: 2rem; } .u-mgb8DT { margin-bottom: 2rem; } .u-mgt9DT { margin-top: 2.25rem; } .u-mgl9DT { margin-left: 2.25rem; } .u-mgr9DT { margin-right: 2.25rem; } .u-mgb9DT { margin-bottom: 2.25rem; } .u-mgt10DT { margin-top: 2.5rem; } .u-mgl10DT { margin-left: 2.5rem; } .u-mgr10DT { margin-right: 2.5rem; } .u-mgb10DT { margin-bottom: 2.5rem; } .u-mgt11DT { margin-top: 2.75rem; } .u-mgl11DT { margin-left: 2.75rem; } .u-mgr11DT { margin-right: 2.75rem; } .u-mgb11DT { margin-bottom: 2.75rem; } .u-mgt12DT { margin-top: 3rem; } .u-mgl12DT { margin-left: 3rem; } .u-mgr12DT { margin-right: 3rem; } .u-mgb12DT { margin-bottom: 3rem; } .u-mgt13DT { margin-top: 3.25rem; } .u-mgl13DT { margin-left: 3.25rem; } .u-mgr13DT { margin-right: 3.25rem; } .u-mgb13DT { margin-bottom: 3.25rem; } .u-mgt14DT { margin-top: 3.5rem; } .u-mgl14DT { margin-left: 3.5rem; } .u-mgr14DT { margin-right: 3.5rem; } .u-mgb14DT { margin-bottom: 3.5rem; } .u-mgt15DT { margin-top: 3.75rem; } .u-mgl15DT { margin-left: 3.75rem; } .u-mgr15DT { margin-right: 3.75rem; } .u-mgb15DT { margin-bottom: 3.75rem; } .u-mgt16DT { margin-top: 4rem; } .u-mgl16DT { margin-left: 4rem; } .u-mgr16DT { margin-right: 4rem; } .u-mgb16DT { margin-bottom: 4rem; } .u-mgt17DT { margin-top: 4.25rem; } .u-mgl17DT { margin-left: 4.25rem; } .u-mgr17DT { margin-right: 4.25rem; } .u-mgb17DT { margin-bottom: 4.25rem; } .u-mgt18DT { margin-top: 4.5rem; } .u-mgl18DT { margin-left: 4.5rem; } .u-mgr18DT { margin-right: 4.5rem; } .u-mgb18DT { margin-bottom: 4.5rem; } .u-mgt19DT { margin-top: 4.75rem; } .u-mgl19DT { margin-left: 4.75rem; } .u-mgr19DT { margin-right: 4.75rem; } .u-mgb19DT { margin-bottom: 4.75rem; } .u-mgt20DT { margin-top: 5rem; } .u-mgl20DT { margin-left: 5rem; } .u-mgr20DT { margin-right: 5rem; } .u-mgb20DT { margin-bottom: 5rem; } } /* -------------------------------------------- UTILITY -------------------------------------------- */ .u-nowrap { white-space: nowrap; } .u-peNone { pointer-events: none; } .u-ofHidden { overflow: hidden; } .u-centerBlock { display: block; margin-right: auto; margin-left: auto; } .u-counterReset { counter-reset: number 0; } .u-srOnly { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; white-space: nowrap !important; border: 0 !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; } /* -------------------------------------------- ALL　※併用不可 -------------------------------------------- */ .u-hidden { display: none !important; } /* -------------------------------------------- BREAKPOINT　※併用可 -------------------------------------------- */ @media (0px <= width < 576px) { .u-visibleXS:not(.u-visibleXXS) { display: none !important; } .u-visibleSM:not(.u-visibleXXS) { display: none !important; } .u-visibleMD:not(.u-visibleXXS) { display: none !important; } .u-visibleLG:not(.u-visibleXXS) { display: none !important; } .u-visibleXL:not(.u-visibleXXS) { display: none !important; } .u-visibleXXL:not(.u-visibleXXS) { display: none !important; } .u-hiddenXXS { display: none !important; } } @media (576px <= width < 768px) { .u-visibleXXS:not(.u-visibleXS) { display: none !important; } .u-visibleSM:not(.u-visibleXS) { display: none !important; } .u-visibleMD:not(.u-visibleXS) { display: none !important; } .u-visibleLG:not(.u-visibleXS) { display: none !important; } .u-visibleXL:not(.u-visibleXS) { display: none !important; } .u-visibleXXL:not(.u-visibleXS) { display: none !important; } .u-hiddenXS { display: none !important; } } @media (768px <= width < 1025px) { .u-visibleXXS:not(.u-visibleSM) { display: none !important; } .u-visibleXS:not(.u-visibleSM) { display: none !important; } .u-visibleMD:not(.u-visibleSM) { display: none !important; } .u-visibleLG:not(.u-visibleSM) { display: none !important; } .u-visibleXL:not(.u-visibleSM) { display: none !important; } .u-visibleXXL:not(.u-visibleSM) { display: none !important; } .u-hiddenSM { display: none !important; } } @media (1025px <= width < 1280px) { .u-visibleXXS:not(.u-visibleMD) { display: none !important; } .u-visibleXS:not(.u-visibleMD) { display: none !important; } .u-visibleSM:not(.u-visibleMD) { display: none !important; } .u-visibleLG:not(.u-visibleMD) { display: none !important; } .u-visibleXL:not(.u-visibleMD) { display: none !important; } .u-visibleXXL:not(.u-visibleMD) { display: none !important; } .u-hiddenMD { display: none !important; } } @media (1280px <= width < 1440px) { .u-visibleXXS:not(.u-visibleLG) { display: none !important; } .u-visibleXS:not(.u-visibleLG) { display: none !important; } .u-visibleSM:not(.u-visibleLG) { display: none !important; } .u-visibleMD:not(.u-visibleLG) { display: none !important; } .u-visibleXL:not(.u-visibleLG) { display: none !important; } .u-visibleXXL:not(.u-visibleLG) { display: none !important; } .u-hiddenLG { display: none !important; } } @media (1440px <= width < 1600px) { .u-visibleXXS:not(.u-visibleXL) { display: none !important; } .u-visibleXS:not(.u-visibleXL) { display: none !important; } .u-visibleSM:not(.u-visibleXL) { display: none !important; } .u-visibleMD:not(.u-visibleXL) { display: none !important; } .u-visibleLG:not(.u-visibleXL) { display: none !important; } .u-visibleXXL:not(.u-visibleXL) { display: none !important; } .u-hiddenXL { display: none !important; } } @media (1600px <= width < 9999px) { .u-visibleXXS:not(.u-visibleXXL) { display: none !important; } .u-visibleXS:not(.u-visibleXXL) { display: none !important; } .u-visibleSM:not(.u-visibleXXL) { display: none !important; } .u-visibleMD:not(.u-visibleXXL) { display: none !important; } .u-visibleLG:not(.u-visibleXXL) { display: none !important; } .u-visibleXL:not(.u-visibleXXL) { display: none !important; } .u-hiddenXXL { display: none !important; } } /* -------------------------------------------- DEVICE　※併用不可 -------------------------------------------- */ @media (width >= 768px) { .u-visibleSP { display: none !important; } } @media (width < 768px) { .u-hiddenSP { display: none !important; } } @media (width < 768px), (width >= 1025px) { .u-visibleTB { display: none !important; } } @media (768px <= width < 1025px) { .u-hiddenTB { display: none !important; } } @media (width < 1025px) { .u-visiblePC { display: none !important; } } @media (width >= 1025px) { .u-hiddenPC { display: none !important; } } @media (width < 1280px) { .u-visibleNB { display: none !important; } } @media (width >= 1280px) { .u-hiddenNB { display: none !important; } } @media (width < 1440px) { .u-visibleDT { display: none !important; } } @media (width >= 1440px) { .u-hiddenDT { display: none !important; } } /* -------------------------------------------- PRINT　※併用可 -------------------------------------------- */ @media screen { .u-visiblePRINT { display: none !important; } } @media print { .u-hiddenPRINT { display: none !important; } } /* -------------------------------------------- OTHER -------------------------------------------- */ /* -------------------------------------------- ANIMATION -------------------------------------------- */ .a-fade.js-anime { opacity: 0; transition: opacity 1s 0.2s; } .a-fade.is-anime { opacity: 1; } .a-fadeFast.js-anime { opacity: 0; transition: opacity 0.4s 0.1s; } .a-fadeFast.is-anime { opacity: 1; } /* -------------------------------------------- EDITOR -------------------------------------------- */ .wp-editor > * + * { margin-top: 2.5rem; } @media (width >= 1025px) { .wp-editor > * + * { margin-top: 5rem; } } .wp-editor > h1 + *, .wp-editor > h2 + *, .wp-editor > h3 + *, .wp-editor > h4 + *, .wp-editor > h5 + *, .wp-editor > h6 + * { margin-top: 1.5rem; } @media (width >= 1025px) { .wp-editor > h1 + *, .wp-editor > h2 + *, .wp-editor > h3 + *, .wp-editor > h4 + *, .wp-editor > h5 + *, .wp-editor > h6 + * { margin-top: 3rem; } } .wp-editor h2, .wp-editor h3, .wp-editor h4 { font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; } .wp-editor h2 { font-size: max(1.3846153846em, 10px); } @media (width >= 1025px) { .wp-editor h2 { font-size: max(2.3076923077em, 10px); } } .wp-editor h3 { font-size: max(1.2307692308em, 10px); } @media (width >= 1025px) { .wp-editor h3 { font-size: max(1.8461538462em, 10px); } } .wp-editor h4 { font-size: max(1.0769230769em, 10px); } @media (width >= 1025px) { .wp-editor h4 { font-size: max(1.5384615385em, 10px); } } .wp-editor p { line-height: 1.9230769231; } @media (width >= 1025px) { .wp-editor p { font-size: max(1.2307692308em, 10px); line-height: 2; letter-spacing: 0.08em; } } .wp-editor a { position: relative; display: inline-block; text-decoration: underline; text-underline-offset: 0.7rem; } @media (hover: hover) { .wp-editor a:hover { text-decoration: none; } } .wp-editor a[target] { padding-right: 1.5rem; } .wp-editor a[target]::after { position: absolute; top: 0; right: 0; bottom: 0; width: 1rem; height: 1rem; margin: auto; content: ""; background: url("../img/common/icon_window_01.png.webp") center/contain no-repeat; } .wp-editor strong { font-weight: 700; } .wp-editor img { width: 100%; height: auto; overflow: hidden; border-radius: 1.3rem; } @media (width >= 1025px) { .wp-editor img { border-radius: 2.5rem; } } .wp-editor figcaption { margin-top: 1.2rem; margin-bottom: 0; font-size: max(0.9230769231em, 10px); line-height: 1.5; text-align: center; } @media (width >= 1025px) { .wp-editor figcaption { margin-top: 1.5rem; font-size: max(1.0769230769em, 10px); } }