@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 -------------------------------------------- */ /* -------------------------------------------- KEYFRAMES -------------------------------------------- */ /* -------------------------------------------- BASE -------------------------------------------- */ html, body { width: 100%; overflow-x: clip; } html { overscroll-behavior: none; font-size: calc(62.5% + 2.5 * (100vw - 390px) / 186); scroll-padding-top: 7rem; text-size-adjust: 100%; } @media (width < 390px) { html { font-size: 2.5641025641vw; } } @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); scroll-padding-top: 13rem; } } @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.4rem; font-weight: 400; font-kerning: normal; line-height: 1.75; color: #2a2f4e; letter-spacing: 0.06em; word-wrap: break-word; overflow-wrap: break-word; background-color: #f6f7f9; -webkit-font-smoothing: antialiased; } @media (width >= 768px) and (width < 1025px) { body { font-size: 1.5rem; } } html.is-bg body { color: #fff; } *, *::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; } @media (width < 1025px) { input:not([type=checkbox], [type=radio]), select, textarea { font-size: max(1.4rem, 16px); } } select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------- LAYOUT -------------------------------------------- */ /* -------------------------------------------- CONTENT -------------------------------------------- */ .l-content { position: relative; padding-top: 5.1rem; } @media (width >= 1025px) { .l-content { padding-top: 10.2rem; } } .l-content__bg { position: absolute; inset: 0; z-index: -1; background: #444863; opacity: 0; transition: opacity 0.3s; } .l-content__bg::before { position: absolute; inset: 0; z-index: 1; content: ""; background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .l-content__bg::before { background-size: 10rem 10rem; } } html.is-bg .l-content__bg { opacity: 1; } .l-content__headerFrame { position: fixed; top: 0; right: 0; left: 0; z-index: 100; color: #2a2f4e; } .l-content__fixedNavFrame { position: fixed; top: 6rem; right: 0; left: 0; z-index: 99; pointer-events: none; opacity: 0; transition: opacity 0.6s 0.4s; } @media (width >= 1025px) { .l-content__fixedNavFrame { top: auto; bottom: 3rem; } } .is-pageLoad .l-content__fixedNavFrame, .is-pageLoad.is-scrollUp .l-content__fixedNavFrame { opacity: 1 !important; } .is-pageLoad .l-content__fixedNavFrame > *, .is-pageLoad.is-scrollUp .l-content__fixedNavFrame > * { pointer-events: auto !important; } .is-pageLoad.is-scrollDown .l-content__fixedNavFrame { opacity: 0 !important; transition-delay: 0.2s; } .is-pageLoad.is-scrollDown .l-content__fixedNavFrame > * { pointer-events: none !important; } /* -------------------------------------------- OBJECT -------------------------------------------- */ /* -------------------------------------------- ANCHOR -------------------------------------------- */ .c-anc { text-decoration: underline; text-underline-offset: 0.3rem; } @media (hover: hover) { .c-anc:hover { text-decoration: none; } } @media (width >= 1025px) { .c-anc.--peNonePc { text-decoration: none; pointer-events: none; } } .c-anc[target]::after { display: inline-block; width: 0.786em; height: 0.786em; margin-left: 0.3em; content: ""; background-color: currentColor; clip-path: url("#window_01"); transform: translateZ(0); translate: 0 5%; will-change: transform; } .c-anc.--pdf::after { display: inline-block; width: 1em; height: 1em; margin-left: 0.3em; content: ""; background-color: currentColor; clip-path: url("#pdf_01"); transform: translateZ(0); translate: 0 15%; will-change: transform; } .c-anc.--map::before { display: inline-block; width: 0.9em; height: 1.2em; margin-right: 0.3em; content: ""; background-color: currentColor; clip-path: url("#map_01"); transform: translateZ(0); translate: 0 20%; will-change: transform; } /* -------------------------------------------- ARROW -------------------------------------------- */ .c-ancArrow { position: relative; display: inline-flex; gap: 0.36em; align-items: center; text-decoration: underline; text-underline-offset: 0.4rem; } @media (hover: hover) { .c-ancArrow:hover { text-decoration: none; } } .c-ancArrow:not([target]) { padding-right: 1em; } .c-ancArrow:not([target])::before { position: absolute; top: 0.1em; right: 0.1em; bottom: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid #1630c6; border-bottom: 2px solid #1630c6; transform: skew(3deg, 3deg); rotate: -45deg; } .c-ancArrow[target]::after { display: inline-block; width: 0.7em; height: 0.7em; content: ""; background-color: currentColor; clip-path: url("#window_01"); transform: translateZ(0); will-change: transform; } /* -------------------------------------------- SQUARE ARROW -------------------------------------------- */ .c-ancSquareArrow { display: inline-flex; gap: 2rem; align-items: center; font-weight: 500; } @media (hover: hover) { .c-ancSquareArrow:hover { color: #1630c6; } .c-ancSquareArrow:hover .c-ancSquareArrow__arrow::before { opacity: 1; scale: 1.05; } .c-ancSquareArrow:hover .c-ancSquareArrow__arrow::after { color: #fff; } } @media (width >= 1025px) { .c-ancSquareArrow__text { font-size: 1.1428571429em; } } .c-ancSquareArrow__arrow { position: relative; z-index: 1; display: block; width: 5rem; height: 5rem; margin: auto; color: #1630c6; background: #f0f1f5; border-radius: 0.5rem; } .c-ancSquareArrow__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: 0.3s; transition-property: opacity, scale; } .c-ancSquareArrow__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: -25% 0; transition: border-color 0.3s; } @media (width >= 1025px) { .c-ancSquareArrow__arrow::after { width: 1rem; height: 1rem; } } /* -------------------------------------------- ARROW SM -------------------------------------------- */ .c-btnArrowSm { position: relative; z-index: 1; display: block; width: 18rem; max-width: 100%; padding: 1.3rem 3rem; font-weight: 500; line-height: 1; color: #fff; text-align: center; letter-spacing: 0.08em; border-radius: 0.6rem; } @media (hover: hover) { .c-btnArrowSm:hover::before { scale: 1.08; } } .c-btnArrowSm::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; transition: 0.3s; transition-property: opacity, scale; } .c-btnArrowSm::after { position: absolute; top: 0; right: 2rem; bottom: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid; border-bottom: 2px solid; rotate: -45deg; } /* -------------------------------------------- ARROW -------------------------------------------- */ .c-btnArrow { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 33rem; max-width: 100%; padding: 2.2rem 6rem; font-weight: 500; line-height: 1.2142857143; text-align: center; letter-spacing: 0.08em; border-radius: 1rem; } @media (width >= 1025px) { .c-btnArrow { width: 46rem; padding: 3rem 8rem; font-size: 1.1428571429em; } } @media (hover: hover) { .c-btnArrow:hover::before { scale: 1.05; } .c-btnArrow:hover .c-btnArrow__arrow { color: #fff; } .c-btnArrow:hover .c-btnArrow__arrow::before { opacity: 1; } } .c-btnArrow::before { position: absolute; inset: 0; z-index: -1; content: ""; background: #fff; border-radius: inherit; transition: scale 0.3s; } .c-btnArrow__text.--tel, .c-btnArrow__text.--mail, .c-btnArrow__text.--excel, .c-btnArrow__text.--pdf { display: inline-flex; gap: 0.8rem; align-items: center; margin: 0 -3rem; } .c-btnArrow__text.--tel::before, .c-btnArrow__text.--mail::before, .c-btnArrow__text.--excel::before, .c-btnArrow__text.--pdf::before { display: block; flex-shrink: 0; width: 1.7rem; height: 1.7rem; content: ""; background-color: currentColor; transform: translateZ(0); translate: 0 10%; will-change: transform; } .c-btnArrow__text.--tel { gap: 0.8rem; } .c-btnArrow__text.--tel::before { width: 1.7rem; height: 1.7rem; clip-path: url("#tel_01"); translate: 0 0%; } .c-btnArrow__text.--mail { gap: 0.8rem; } .c-btnArrow__text.--mail::before { width: 2rem; height: 1.4rem; clip-path: url("#mail_clip_01"); translate: 0 5%; } .c-btnArrow__text.--excel { gap: 0.8rem; } .c-btnArrow__text.--excel::before { width: 1.8rem; height: 1.6rem; clip-path: url("#excel_01"); translate: 0 5%; } .c-btnArrow__text.--pdf { gap: 0.8rem; letter-spacing: 0; } .c-btnArrow__text.--pdf::before { width: 1.8rem; height: 1.8rem; clip-path: url("#pdf_01"); translate: 0 5%; } .c-btnArrow__text.--iconColorMain::before { background-color: #1630c6; } .c-btnArrow__arrow { position: absolute; top: 0; right: 0.5rem; bottom: 0; z-index: 1; display: block; width: 5rem; height: 5rem; margin: auto; color: #1630c6; background: #f0f1f5; border-radius: 0.5rem; } @media (width >= 1025px) { .c-btnArrow__arrow { right: 0.8rem; width: 6rem; height: 6rem; } } .c-btnArrow__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: opacity 0.3s; } .c-btnArrow__arrow:not(.--download)::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: -25% 0; } .c-btnArrow__arrow.--download { display: flex; align-items: center; justify-content: center; } .c-btnArrow__arrow.--download::after { position: relative; z-index: 2; display: block; width: 1.7rem; height: 1.6rem; content: ""; background-color: currentColor; clip-path: url("#download_01"); transform: translateZ(0); will-change: transform; } .c-btnArrow[target=_blank] .c-btnArrow__arrow:not(.--download) { display: flex; align-items: center; justify-content: center; } .c-btnArrow[target=_blank] .c-btnArrow__arrow:not(.--download)::after { position: relative; z-index: 2; display: block; width: 2.1rem; height: 2.1rem; content: ""; background-color: currentColor; clip-path: url("#window_01"); transform: translateZ(0); rotate: unset; translate: 5% 0; will-change: transform; } .c-btnArrow.--pdlXs { padding-left: 2.5rem; } @media (width >= 1025px) { .c-btnArrow.--pdlXs { padding-left: 4rem; } } @media (width < 1025px) { .c-btnArrow.--pdlXsSPTB { padding-left: 2.5rem; } } .c-btnArrow.--pdlrSmSPTB { padding-right: 5rem; padding-left: 5rem; } @media (width >= 1025px) { .c-btnArrow.--pdlrSmSPTB { padding-right: 6.5rem; padding-left: 6.5rem; } } .c-btnArrow.--xs { width: 15.5rem; padding: 1rem 4rem 1rem 1rem; font-size: 0.8571428571em; letter-spacing: 0; } @media (width >= 1025px) { .c-btnArrow.--xs { width: 22rem; padding: 1.5rem 4rem 1.5rem 1.5rem; font-size: 1.0714285714em; } .c-btnArrow.--xs .c-btnArrow__arrow { width: 4.4rem; height: 4.4rem; } } .c-btnArrow.--xs .c-btnArrow__text.--tel, .c-btnArrow.--xs .c-btnArrow__text.--mail, .c-btnArrow.--xs .c-btnArrow__text.--excel, .c-btnArrow.--xs .c-btnArrow__text.--pdf { gap: 0.4rem; } .c-btnArrow.--xs .c-btnArrow__arrow { width: 3rem; height: 3rem; } .c-btnArrow.--xs .c-btnArrow__arrow.--download::after { scale: 0.8; } .c-btnArrow.--sm, .c-btnArrow.--smLong { width: 30rem; min-height: 6rem; padding: 2rem 6rem; } @media (width >= 1025px) { .c-btnArrow.--sm, .c-btnArrow.--smLong { font-size: 1.0714285714em; } .c-btnArrow.--sm .c-btnArrow__arrow, .c-btnArrow.--smLong .c-btnArrow__arrow { width: 4.4rem; height: 4.4rem; } } .c-btnArrow.--sm.--pdlXs, .c-btnArrow.--smLong.--pdlXs { padding-left: 2.5rem; } .c-btnArrow.--smLong { width: 30rem; } @media (width >= 1025px) { .c-btnArrow.--smLong { width: 36rem; } } .c-btnArrow.--multiLine { width: 50rem; padding: 1.3rem 6rem 1.3rem 3rem; font-size: 1em; } @media (width >= 1025px) { .c-btnArrow.--multiLine { padding: 2rem 6rem 2rem 3rem; font-size: 1.1428571429em; } .c-btnArrow.--multiLine .c-btnArrow__arrow { width: 4rem; height: 4rem; } } @media (width >= 1025px) { .c-btnArrow.--stretchPC { width: auto; min-width: 46rem; } } .c-btnArrow.--back .c-btnArrow__arrow { right: auto; left: 0.5rem; scale: -1 1; } @media (width >= 1025px) { .c-btnArrow.--back .c-btnArrow__arrow { left: 0.8rem; } } .c-btnArrow.--colorMain { color: #fff; } .c-btnArrow.--colorMain::before { background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); } .c-btnArrow.--colorMain .c-btnArrow__arrow { background: #f0f1f5; } .c-btnArrow.--colorMain .c-btnArrow__arrow::before { background: #fff; } .c-btnArrow.--colorMain .c-btnArrow__arrow::after { color: #1630c6; } /* -------------------------------------------- MORE -------------------------------------------- */ .c-btnMore { position: relative; display: block; width: fit-content; padding: 1.5rem 1.5rem 1.5rem 3rem; font-size: 1.2142857143em; line-height: 1; } @media (hover: hover) { .c-btnMore:hover { color: #1630c6; } } .c-btnMore::before, .c-btnMore::after { position: absolute; top: 0; bottom: 0; left: 0; width: 1.8rem; height: 2px; margin: auto; content: ""; background-color: #1630c6; } .c-btnMore::after { rotate: -90deg; } /* -------------------------------------------- INNER -------------------------------------------- */ .c-inner { width: 100%; padding-right: 7.6923076923vw; padding-left: 7.6923076923vw; 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(100rem + 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: 100rem; } .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; } /* -------------------------------------------- MOUSE STALKER -------------------------------------------- */ .c-mouse { display: none; pointer-events: none; } @media (width >= 1025px) { .c-mouse { position: fixed; top: 0; left: 0; z-index: 999; } } @media (width >= 1025px) and (hover: hover) { .c-mouse { display: block; } .is-cursorWhite .c-mouse .c-mouse__iconFrame { color: #1630c6; background-color: #fff; opacity: 0.95; } .is-cursorMain .c-mouse .c-mouse__iconFrame { color: #fff; background-color: #1630c6; opacity: 0.8; } .is-cursorWorks .c-mouse .c-mouse__pic.--works, .is-cursorCompany .c-mouse .c-mouse__pic.--company, .is-cursorRecruit .c-mouse .c-mouse__pic.--recruit, .is-cursorTransit .c-mouse .c-mouse__pic.--transit, .is-cursorContent .c-mouse .c-mouse__pic.--content, .is-cursorMarketing .c-mouse .c-mouse__pic.--marketing { opacity: 1; } } @media (width >= 1025px) { .c-mouse__iconFrame { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; border-radius: 0.4rem; opacity: 0; translate: -45% -65%; transition: 0.3s; transition-property: opacity, background-color, color; } .c-mouse__icon { width: 1.3rem; height: 1.3rem; stroke: currentColor; stroke-width: 2; } .c-mouse__picFrame { position: absolute; top: 0; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 37.6rem; height: auto; aspect-ratio: 376/250; overflow: clip; border-radius: 1rem; translate: -50% -45%; } .c-mouse__pic { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; } .c-mouse__pic::before { position: absolute; inset: 0; z-index: 1; content: ""; background: url("../img/common/bg_noise_01.png.webp"); background-size: 10rem 10rem; mix-blend-mode: color-dodge; opacity: 0.3; } .c-mouse__pic::after { position: absolute; inset: 0; z-index: 1; content: ""; background-color: #000; border-radius: 1rem; opacity: 0.1; } } /* -------------------------------------------- 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.6rem 1rem; font-size: 0.7857142857em; line-height: 1; text-align: center; white-space: nowrap; background: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .c-label { font-size: 0.8571428571em; } } /* -------------------------------------------- BORDER -------------------------------------------- */ .c-labelBd { display: flex; justify-content: center; width: fit-content; padding: 0.6rem 1.4rem; font-size: 0.8571428571em; line-height: 1; color: #1630c6; text-align: center; letter-spacing: 0; white-space: nowrap; border: 1px solid currentColor; border-radius: 0.4rem; } .c-labelBd.--inline { display: inline-flex; } /* -------------------------------------------- LINK -------------------------------------------- */ /* -------------------------------------------- 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.--pdlSm .c-list__item { padding-left: 1em; } .c-list.--fzSm { font-size: 86%; } .c-list.--lhInherit .c-list__item { line-height: inherit; } .c-list.--lhInherit .c-list__item:not(:first-child) { margin-top: 1rem; } /* -------------------------------------------- SQUARE -------------------------------------------- */ .c-listSquare { display: grid; gap: 1.2rem; } .c-listSquare__item { position: relative; padding-left: 1.5rem; line-height: 1.8571428571; } @media (width >= 1025px) { .c-listSquare__item { padding-left: 1.7rem; line-height: 2; } } .c-listSquare__item::before { position: absolute; top: 0.75em; left: 0; width: 0.6rem; height: auto; aspect-ratio: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 2px; } @media (width >= 1025px) { .c-listSquare__item::before { width: 0.8rem; } } /* -------------------------------------------- DATE -------------------------------------------- */ .c-listDate { display: grid; gap: 1rem; } @media (width >= 1025px) { .c-listDate { gap: 0.6rem; } } @media (width >= 1025px) { .c-listDate__item { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; } } /* -------------------------------------------- NUMBER -------------------------------------------- */ .c-listNum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; counter-reset: number 0; } .c-listNum__item { position: relative; padding-left: 2.5rem; line-height: 1.8571428571; } .c-listNum__item::before { position: absolute; top: 0; left: 0; content: counter(number) "."; counter-increment: number 1; } /* -------------------------------------------- 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; pointer-events: none; } .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.is-open > * { pointer-events: auto; opacity: 1; } .c-modal__overlay { background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: all 0.3s; } .c-modal__item { padding: 5rem calc(7.6923076923vw); } @media (width >= 1025px) { .c-modal__item { max-width: calc(116rem + 6.25vw * 2); padding: 10rem 6.25vw; } } .c-modal__item > * { opacity: 0; transition: opacity 0.3s; } .c-modal__itemCloseBtn { position: absolute; top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 999px; } @media (width >= 1025px) { .c-modal__itemCloseBtn { top: 2rem; right: 2rem; } } .c-modal__itemCloseBtn::before, .c-modal__itemCloseBtn::after { position: absolute; inset: 0; width: 1.2rem; height: 1px; margin: auto; content: ""; background-color: #fff; rotate: 45deg; } @media (width >= 1025px) { .c-modal__itemCloseBtn::before, .c-modal__itemCloseBtn::after { width: 1.4rem; } } .c-modal__itemCloseBtn::after { rotate: -45deg; } .c-modal__itemInner { background-color: #f6f7f9; border-radius: 1rem; overflow: auto; overscroll-behavior: none; scrollbar-width: none; } .c-modal__itemInner::-webkit-scrollbar { display: none; } .c-modal__itemBtn { position: fixed; top: 0; right: 5rem; bottom: 0; display: block; width: 5rem; height: 5rem; margin: auto; color: #fff; border-radius: 0.4rem; } @media (width < 1025px) { .c-modal__itemBtn { display: none; } } @media (width >= 1025px) { .c-modal__itemBtn { width: 6rem; height: 6rem; } } @media (hover: hover) { .c-modal__itemBtn:hover::before { scale: 1.1; } } .c-modal__itemBtn.--inact { pointer-events: none; opacity: 0.7; } .c-modal__itemBtn::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; transition: 0.3s; transition-property: scale; } .c-modal__itemBtn::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: -45deg; translate: -25% 0; } @media (width >= 1025px) { .c-modal__itemBtn::after { width: 1rem; height: 1rem; border-width: 2px; } } .c-modal__itemBtn.--prev { right: auto; left: 5rem; } .c-modal__itemBtn.--prev::after { rotate: 135deg; translate: 25% 0; } /* stylelint-enable no-duplicate-selectors */ /* -------------------------------------------- TEXT -------------------------------------------- */ /* -------------------------------------------- TITLE -------------------------------------------- */ .c-title { font-size: 1.4285714286em; font-weight: 600; line-height: 1.6; } @media (width >= 1025px) { .c-title { font-size: 2.1428571429em; line-height: 2; } } /* -------------------------------------------- DOT -------------------------------------------- */ .c-titleDot { line-height: 1; } .c-titleDot__supUp { margin-bottom: 0.5rem; font-family: "Montserrat", sans-serif; font-size: 0.7857142857em; font-weight: 500; color: #1630c6; letter-spacing: 0.12em; } @media (width >= 1025px) { .c-titleDot__supUp { font-size: 1.1428571429em; } } .c-titleDot__main { font-family: "Montserrat", sans-serif; font-size: 3.9285714286em; font-weight: 600; color: #1630c6; letter-spacing: 0; } @media (width >= 1025px) { .c-titleDot__main { font-size: 6.4285714286em; } } .c-titleDot__main::after { display: inline-block; width: 0.8rem; height: 0.8rem; margin-left: 0.8rem; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 0.2rem; } @media (width >= 1025px) { .c-titleDot__main::after { width: 1.5rem; height: 1.5rem; margin-left: 1.5rem; } } .c-titleDot__main.--nowrap { white-space: nowrap; } .c-titleDot__sup { margin-top: 1rem; font-size: 1em; font-weight: 600; } @media (width >= 1025px) { .c-titleDot__sup { font-size: 1.1428571429em; } } .c-titleDot.--white { color: #fff; } .c-titleDot.--white .c-titleDot__main { color: #fff; } .c-titleDot.--white .c-titleDot__main::after { background: #fff; } .c-titleDot.--xs .c-titleDot__main { font-size: 2.8571428571em; } @media (width >= 1025px) { .c-titleDot.--xs .c-titleDot__main { font-size: 3.5714285714em; } } .c-titleDot.--xs .c-titleDot__main::after { width: 0.6rem; height: 0.6rem; } @media (width >= 1025px) { .c-titleDot.--xs .c-titleDot__main::after { width: 1rem; height: 1rem; } } .c-titleDot.--sm .c-titleDot__main { font-size: 2.8571428571em; } @media (width >= 1025px) { .c-titleDot.--sm .c-titleDot__main { font-size: 4.2857142857em; } } .c-titleDot.--sm .c-titleDot__main::after { width: 0.6rem; height: 0.6rem; } @media (width >= 1025px) { .c-titleDot.--sm .c-titleDot__main::after { width: 1rem; height: 1rem; } } /* -------------------------------------------- SQUARE -------------------------------------------- */ .c-titleSquare { position: relative; padding-left: 1.5rem; font-size: 1.1428571429em; font-weight: 600; line-height: 1.7333333333; color: #1630c6; } @media (width >= 1025px) { .c-titleSquare { font-size: 1.4285714286em; } } .c-titleSquare::before { position: absolute; top: 0.6em; left: 0; width: 0.9rem; height: auto; aspect-ratio: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 1px; } .c-titleSquare.--colorBase { color: #2a2f4e; } .c-titleSquare.--xs { font-size: 1.0714285714em; } @media (width >= 1025px) { .c-titleSquare.--xs { font-size: 1.1428571429em; } } .c-titleSquare.--sm { font-size: 1em; } @media (width >= 1025px) { .c-titleSquare.--sm { font-size: 1.4285714286em; } } .c-titleSquare.--sm::before { top: 0.55em; } @media (width >= 1025px) { .c-titleSquare.--sm::before { top: 0.6em; } } .c-titleSquare.--md { font-size: 1.0714285714em; } @media (width >= 1025px) { .c-titleSquare.--md { padding-left: 2rem; font-size: 1.5714285714em; } } @media (width >= 1025px) { .c-titleSquare.--md::before { top: 0.7em; } } /* -------------------------------------------- CORNER -------------------------------------------- */ .c-titleCorner { position: relative; display: flex; justify-content: center; } .c-titleCorner__decoFrame { position: absolute; inset: 0; z-index: 1; } .c-titleCorner__deco { position: absolute; width: 2rem; height: 2rem; border-radius: 0.4rem; } @media (width >= 1025px) { .c-titleCorner__deco { width: 3rem; height: 3rem; } } .c-titleCorner__deco::before { position: absolute; inset: 0; z-index: -1; padding: 1px; content: ""; background: linear-gradient(135deg, currentColor, transparent, transparent, transparent); border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: xor; mask-composite: exclude; } .c-titleCorner__deco:nth-child(1) { top: 0; left: 0; } .c-titleCorner__deco:nth-child(2) { top: 0; right: 0; scale: -1 1; } .c-titleCorner__deco:nth-child(3) { bottom: 0; left: 0; scale: 1 -1; } .c-titleCorner__deco:nth-child(4) { right: 0; bottom: 0; scale: -1 -1; } .c-titleCorner__text { padding: 1rem 2.5rem; font-size: 1.4285714286em; font-weight: 600; line-height: 1.3; text-align: center; } @media (width >= 1025px) { .c-titleCorner__text { padding: 1.5rem 4.5rem; font-size: 1.7142857143em; } } @media (width >= 1280px) { .c-titleCorner__text { font-size: 2.1428571429em; } } /* -------------------------------------------- BREADCRUMB -------------------------------------------- */ @media (width < 1025px) { .p-breadcrumb { margin: 0 calc(50% - 50vw); 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: 0.8571428571em; line-height: 1.1; white-space: nowrap; } @media (width < 1025px) { .p-breadcrumb__list { padding: 0 7.6923076923vw; } } @media (width >= 1025px) { .p-breadcrumb__list { font-size: 1em; } } .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: 0.6rem; height: 0.6rem; margin: auto; content: ""; border-right: 1px solid #b2b3bc; border-bottom: 1px solid #b2b3bc; rotate: -45deg; } .p-breadcrumb__item:not(.p-breadcrumb__item:last-child) { color: #b2b3bc; } .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; } } /* -------------------------------------------- RECRUIT -------------------------------------------- */ .p-footerRecruit { padding: 3rem 0; background-color: #e5e9f2; } @media (width >= 1025px) { .p-footerRecruit { padding: 4rem 0; } } .p-footerRecruit__inner { padding: 0 7.6923076923vw; } @media (width >= 1025px) { .p-footerRecruit__inner { padding: 0 2.5vw; } } .p-footerRecruitLink { display: grid; gap: 1rem; } @media (width >= 768px) { .p-footerRecruitLink { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } @media (width >= 1025px) { .p-footerRecruitLink { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .p-footerRecruitLink__anc { display: block; } @media (hover: hover) { .p-footerRecruitLink__anc:hover .p-footerRecruitLink__pic > img { scale: 1.1; } } .p-footerRecruitLink__pic { width: 100%; aspect-ratio: 660/310; overflow: hidden; border-radius: 1rem; } @media (width >= 768px) { .p-footerRecruitLink__pic { aspect-ratio: 492/300; } } .p-footerRecruitLink__pic > img { transition: scale 0.3s; } @media (width >= 1025px) { .p-footerRecruitLink.--top .p-footerRecruitLink__item:nth-child(2) { translate: 0 -5rem; } .p-footerRecruitLink.--top .p-footerRecruitLink__item:nth-child(3) { translate: 0 -10rem; } } @media (width >= 1280px) { .p-footerRecruitLink.--top .p-footerRecruitLink__item:nth-child(2) { translate: 0 -8rem; } .p-footerRecruitLink.--top .p-footerRecruitLink__item:nth-child(3) { translate: 0 -16rem; } } .p-footerRecruitLink.--top .p-footerRecruitLink__pic { aspect-ratio: 660/360; } @media (width >= 768px) { .p-footerRecruitLink.--top .p-footerRecruitLink__pic { aspect-ratio: 492/300; } } /* -------------------------------------------- CONTACT -------------------------------------------- */ .p-footerContact { color: #fff; } .p-footerContact * { transition: 0.6s; } .p-footerContact__stickyFrame { position: sticky; top: 0; right: 0; left: 0; display: flex; align-items: center; } .p-footerContact__stickyFrame .lil-gui.lil-root { position: absolute; top: 150px; right: 0; z-index: 10; } .p-footerContact__anc { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 6.5rem 12.8205128205vw 5.5rem; } @media (width >= 768px) { .p-footerContact__anc { padding: 8rem 12.8205128205vw; } } @media (width >= 1025px) { .p-footerContact__anc { padding: 9rem 3.125vw 10rem; } } .p-footerContact__bgFrame { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .p-footerContact__bgFrame::before { position: absolute; inset: 0; z-index: 1; content: ""; background: url("../img/common/bg_noise_01.png.webp") center center; background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .p-footerContact__bgFrame::before { background-size: 10rem 10rem; } } .p-footerContact__bgCanvas { position: absolute; top: 50%; left: 50%; display: block; width: 100vw !important; height: 100lvh !important; min-height: 100%; translate: -50% -50%; } .p-footerContact__bgCanvas.--line { opacity: 0.5; } .p-footerContact__titleFrame { margin-bottom: 2rem; } @media (width >= 1025px) { .p-footerContact__titleFrame { margin-bottom: 4.5rem; } } .p-footerContact__text { font-weight: 500; font-feature-settings: "palt"; line-height: 2.0714285714; text-align: center; letter-spacing: 0.1em; } @media (width >= 1025px) { .p-footerContact__text { font-size: 1.2857142857em; } } .p-footerContact__arrow { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin-top: 2rem; color: #1630c6; background: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .p-footerContact__arrow { display: none; } } .p-footerContact__arrowIcon { width: 1rem; height: 1rem; } .p-footerContact.--top { min-height: 200lvh; } .p-footerContact.--top * { transition: 0.6s; } .p-footerContact.--top .p-footerContact__stickyFrame { min-height: 100lvh; } .p-footerContact.--top .p-footerContact__anc { min-height: 21rem; padding: 5rem 12.8205128205vw 2rem; } @media (width >= 768px) { .p-footerContact.--top .p-footerContact__anc { min-height: 30rem; padding: 8rem 12.8205128205vw; } } @media (width >= 1025px) { .p-footerContact.--top .p-footerContact__anc { min-height: 46rem; padding: 10rem 3.125vw 5rem; } } .p-footerContact.--top .p-footerContact__bgFrame { inset: 0 3.8461538462vw; clip-path: inset(0 round 1rem); } @media (width >= 1025px) { .p-footerContact.--top .p-footerContact__bgFrame { inset: 0 6.25vw; } } .p-footerContact.--top .p-footerContact__bgCanvas.--line { opacity: 0; transition: opacity 0.3s; } @media (width < 1025px) { .p-footerContact.--top .p-footerContact__titleFrame .c-titleDot__main { font-size: 3.2142857143em; } } .p-footerContact.--top .p-footerContact__text { overflow: clip; } @media (width < 1025px) { .p-footerContact.--top .p-footerContact__text { max-height: 0; opacity: 0; } } .p-footerContact.--top .p-footerContact__arrow { margin-top: 0; } .p-footerContact.--top.is-act .p-footerContact__anc { min-height: 100lvh; padding: 10rem 12.8205128205vw 5rem; } .p-footerContact.--top.is-act .p-footerContact__bgFrame { inset: 0; clip-path: inset(0 round 0); } .p-footerContact.--top.is-act .p-footerContact__bgCanvas.--line { opacity: 0.5; } @media (width < 1025px) { .p-footerContact.--top.is-act .p-footerContact__titleFrame .c-titleDot__main { font-size: 3.9285714286em; } } @media (width < 1025px) { .p-footerContact.--top.is-act .p-footerContact__text { max-height: 15rem; opacity: 1; } } .p-footerContact.--top.is-act .p-footerContact__arrow { margin-top: 3rem; } /* -------------------------------------------- FOOTER -------------------------------------------- */ .p-footer { position: relative; color: #b2b3bc; background: #444863; } .p-footer::before { position: absolute; inset: 0; z-index: 1; content: ""; background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .p-footer::before { background-size: 10rem 10rem; } } .p-footer > * { position: relative; z-index: 2; } .p-footer__mainFrame { padding-top: 10rem; padding-bottom: 7rem; } @media (width >= 1025px) { .p-footer__mainFrame { padding-top: 12rem; padding-bottom: 6rem; } } .p-footer__mainLayout { display: flex; flex-direction: column-reverse; } @media (width >= 1025px) { .p-footer__mainLayout { display: grid; grid-template-columns: 35rem minmax(0, 1fr); gap: 5rem; } } @media (width >= 1280px) { .p-footer__mainLayout { grid-template-columns: 45rem minmax(0, 1fr); } } .p-footer__infoFrame { margin-top: 7rem; } @media (width >= 1025px) { .p-footer__infoFrame { margin-top: 0; } } .p-footer__logoFrame { display: flex; justify-content: center; } @media (width >= 1025px) { .p-footer__logoFrame { justify-content: flex-start; } } .p-footer__logoAnc { display: block; } @media (hover: hover) { .p-footer__logoAnc:hover { opacity: 0.7; } } .p-footer__logoPic { width: 22rem; max-width: 100%; aspect-ratio: 327/168; } @media (width >= 1025px) { .p-footer__logoPic { width: 32.5rem; } } .p-footer__addressFrame { margin-top: 3rem; font-size: 0.8571428571em; font-feature-settings: "palt"; line-height: 1.7142857143; } @media (width >= 1025px) { .p-footer__addressFrame { margin-top: 5.5rem; font-size: 1em; } } .p-footer__addressTitle { margin-bottom: 1.2rem; font-size: 1.0833333333em; font-weight: 500; line-height: 1; color: #fff; } @media (width >= 1025px) { .p-footer__addressTitle { margin-bottom: 1.5rem; font-size: 1em; } } .p-footer__addressMap { margin-top: 0.8rem; } @media (width >= 1025px) { .p-footer__addressMap { margin-top: 0.4rem; } } .p-footer__addressMapAnc { position: relative; display: flex; gap: 0.5rem; align-items: center; width: fit-content; line-height: 1.7142857143; text-decoration: underline; } @media (hover: hover) { .p-footer__addressMapAnc:hover { text-decoration: none; } } .p-footer__addressMapAnc::before { display: block; width: 1rem; height: 1.4rem; content: ""; background-color: currentColor; clip-path: url("#map_01"); transform: translateZ(0); will-change: transform; } .p-footer__addressTel { margin-top: 0.8rem; } @media (width >= 1025px) { .p-footer__addressTel { margin-top: 1.2rem; } } .p-footer__navFrame { border-top: 1px solid #61657d; } @media (width >= 1025px) { .p-footer__navFrame { display: flex; gap: 2rem; justify-content: space-between; border-top: none; } } @media (width >= 1025px) { .p-footer__navItem { display: flex; flex-direction: column; justify-content: space-between; } } .p-footer__navSubLinkFrame { margin-top: 3rem; } @media (width >= 1025px) { .p-footer__supFrame { display: flex; flex-direction: row-reverse; gap: 2rem; align-items: center; justify-content: space-between; padding: 3rem 0; border-top: 1px solid #61657d; } } .p-footer__pagetopFrame { display: flex; justify-content: center; margin-bottom: 2rem; } @media (width >= 1025px) { .p-footer__pagetopFrame { margin-bottom: 0; } } .p-footer__pagetopAnc { display: flex; gap: 2rem; align-items: center; font-family: "Montserrat", sans-serif; font-size: 0.9285714286em; line-height: 1; } @media (width >= 1025px) { .p-footer__pagetopAnc { font-size: 1em; } } @media (hover: hover) { .p-footer__pagetopAnc:hover .p-footer__pagetopArrow { color: #444863; background-color: #b2b3bc; } } .p-footer__pagetopArrow { display: flex; align-items: center; justify-content: center; width: 3.8rem; height: 3.8rem; border: 1px solid currentColor; border-radius: 0.4rem; transition: background-color 0.3s; } @media (width >= 1025px) { .p-footer__pagetopArrow { width: 5rem; height: 5rem; } } .p-footer__pagetopArrow::before { display: block; width: 0.8rem; height: 0.8rem; content: ""; border-top: 1px solid currentColor; border-right: 1px solid currentColor; rotate: -45deg; translate: 0 20%; } @media (width >= 1025px) { .p-footer__pagetopArrow::before { width: 1rem; height: 1rem; border-width: 2px; } } .p-footer__copyright { position: relative; padding: 2rem 0; font-family: "Montserrat", sans-serif; font-size: 0.7857142857em; line-height: 1.1; text-align: center; } @media (width >= 1025px) { .p-footer__copyright { font-size: 0.8571428571em; } } .p-footer__copyright::before { position: absolute; top: 0; right: calc(50% - 50vw); left: calc(50% - 50vw); height: 1px; content: ""; background-color: #61657d; } @media (width >= 1025px) { .p-footer__copyright::before { display: none; } } /* -------------------------------------------- NAV -------------------------------------------- */ @media (width < 1025px) { .p-footerNav__list { padding: 1rem 0; border-bottom: 1px solid #61657d; } .p-footerNav__anc, .p-footerNav__text { position: relative; display: block; padding: 1.5rem 0; font-size: 1.0714285714em; font-weight: 500; line-height: 1; color: #fff; } .p-footerNav__anc:not(.js-accordionShift)::before, .p-footerNav__text:not(.js-accordionShift)::before { position: absolute; top: 0; right: 0.6rem; bottom: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; } .p-footerNav__anc.js-accordionShift::before, .p-footerNav__anc.js-accordionShift::after, .p-footerNav__text.js-accordionShift::before, .p-footerNav__text.js-accordionShift::after { position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 1.5rem; height: 2px; margin: auto; content: ""; background-color: currentcolor; transition: 0.3s; } .p-footerNav__anc.js-accordionShift::after, .p-footerNav__text.js-accordionShift::after { rotate: 90deg; } .p-footerNav__anc.js-accordionShift.is-act::before, .p-footerNav__text.js-accordionShift.is-act::before { opacity: 0; } .p-footerNav__anc.js-accordionShift.is-act::after, .p-footerNav__text.js-accordionShift.is-act::after { rotate: 0deg; } .p-footerNav__subFrame { display: none; } } @media (width >= 1025px) { .p-footerNav { display: grid; gap: 2.5rem; } .p-footerNav__anc, .p-footerNav__text { font-size: 1.1428571429em; font-weight: 500; line-height: 1; color: #fff; } } @media (width >= 1025px) and (hover: hover) { .p-footerNav__anc:hover { text-decoration: underline; text-underline-offset: 3px; } } @media (width >= 1025px) { .p-footerNav__subFrame { display: block !important; } } /* -------------------------------------------- NAV SUB -------------------------------------------- */ .p-footerNavSub { display: grid; gap: 1rem; padding: 1rem 0 1.5rem; } @media (width >= 1025px) { .p-footerNavSub { padding: 2rem 0 0; } } .p-footerNavSub__anc { position: relative; display: flex; gap: 0.5rem; align-items: center; width: fit-content; padding-left: 1.6rem; line-height: 1.7142857143; } @media (hover: hover) { .p-footerNavSub__anc:hover { text-decoration: underline; text-underline-offset: 2px; } } .p-footerNavSub__anc::before { position: absolute; top: 0.85em; left: 0; display: block; width: 0.9rem; height: 1px; content: ""; background-color: currentColor; } .p-footerNavSub__anc[target=_blank]::after { display: block; width: 1.1rem; height: 1.1rem; content: ""; background-color: currentColor; clip-path: url("#window_01"); transform: translateZ(0); will-change: transform; } /* -------------------------------------------- SUB LINK -------------------------------------------- */ .p-footerSubLink { display: grid; gap: 0.8rem; } .p-footerSubLink__anc { position: relative; display: flex; gap: 0.5rem; align-items: center; width: fit-content; font-size: 0.8571428571em; line-height: 1.7142857143; } @media (hover: hover) { .p-footerSubLink__anc:hover { text-decoration: underline; text-underline-offset: 2px; } } .p-footerSubLink__anc[target=_blank]::after { display: block; width: 1.1rem; height: 1.1rem; content: ""; background-color: currentColor; clip-path: url("#window_01"); transform: translateZ(0); will-change: transform; } .p-footerSubLink__anc.--pdf::after { width: 1.4rem; height: 1.4rem; clip-path: url("#pdf_01"); transform: translateZ(0); will-change: transform; } /* -------------------------------------------- GLOBAL NAV -------------------------------------------- */ @media (width < 1025px) { .p-gnav { height: 100%; background-color: #f6f7f9; 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: 9rem 7.6923076923vw 10rem; } .p-gnav__contFrame { display: grid; gap: 4rem; width: 100%; max-width: 44rem; } .p-gnav__subFrame { display: contents; } .p-gnav__subBnrFrame { display: grid; gap: 1rem; } .p-gnav__subBnrAnc { position: relative; display: block; overflow: hidden; border-radius: 1rem; } .p-gnav__subBnrPic { width: 100%; height: auto; aspect-ratio: 33/8; } .p-gnav__subBnrArrow { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background-color: #fff; border-radius: 0.4rem; } .p-gnav__subBnrArrow::before { display: block; width: 0.6rem; height: 0.6rem; content: ""; border-right: 1px solid #1630c6; border-bottom: 1px solid #1630c6; rotate: -45deg; translate: -25% 0; } .p-gnav__subLangFrame { display: flex; justify-content: center; } .p-gnav__subLangAnc { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem; color: #a0a1a6; } .p-gnav__subLangIcon { width: 1.4rem; height: 1.4rem; } .p-gnav__subLangText { line-height: 1; } .p-gnav__subFEventrame { display: none; } } @media (width >= 1025px) { .p-gnav__contFrame { display: flex; gap: 1.8rem; align-items: center; } .p-gnav__subFrame { display: flex; align-items: center; justify-content: flex-end; } .p-gnav__subBnrFrame { display: none; } .p-gnav__subLangFrame { position: relative; padding-left: 1.5rem; } .p-gnav__subLangFrame::before { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; height: 2rem; margin: auto; content: ""; background-color: #a0a1a6; } .p-gnav__subLangAnc { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; padding: 0.5rem; font-size: 0.9285714286em; color: #a0a1a6; } } @media (width >= 1025px) and (hover: hover) { .p-gnav__subLangAnc:hover { color: #1630c6; } } @media (width >= 1025px) { .p-gnav__subLangIcon { width: 2.2rem; height: 2rem; } .p-gnav__subLangText { line-height: 1; } } /* -------------------------------------------- LINK -------------------------------------------- */ @media (width < 1025px) { .p-gnavLink__item { padding: 1rem 0; border-bottom: 1px solid #e4e7ed; } .p-gnavLink__item:first-child { border-top: 1px solid #e4e7ed; } .p-gnavLink__text, .p-gnavLink__anc { position: relative; display: block; padding: 1.4rem 2.5rem 1.4rem 0; font-size: 1.0714285714em; font-weight: 500; line-height: 1.1; } .p-gnavLink__text::before, .p-gnavLink__text::after { position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 1.5rem; 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__anc::before { position: absolute; top: 0; right: 0.5rem; bottom: 0; display: block; width: 0.9rem; height: 0.9rem; margin: auto; content: ""; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: -45deg; } .p-gnavLink__megaFrame { display: none; } } @media (width >= 1025px) { .p-gnavLink__link { display: flex; gap: 1.8rem; } } @media (width >= 1025px) and (width >= 1280px) { .p-gnavLink__link { gap: 1.8rem; } } @media (width >= 1025px) and (width >= 1440px) { .p-gnavLink__link { gap: 1.8rem; } } @media (width >= 1025px) { .p-gnavLink__item.--mega.is-act .p-gnavLink__text::before { rotate: 225deg; } .p-gnavLink__item.--mega.is-act .p-gnavLink__megaFrame { pointer-events: auto; opacity: 1; translate: 0; } .p-gnavLink__text, .p-gnavLink__anc { display: block; padding: 3.8rem 0; font-size: 0.9285714286em; font-weight: 500; } } @media (width >= 1025px) and (width >= 1280px) { .p-gnavLink__text, .p-gnavLink__anc { font-size: 1em; } } @media (width >= 1025px) and (width >= 1440px) { .p-gnavLink__text, .p-gnavLink__anc { font-size: 1.0714285714em; } } @media (width >= 1025px) { .p-gnavLink__text { position: relative; } .p-gnavLink__text::before { position: absolute; right: 0; bottom: 2.8rem; left: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid #1630c6; border-bottom: 2px solid #1630c6; transform-origin: 60% 60%; rotate: 45deg; transition: 0.3s; } } @media (width >= 1025px) and (hover: hover) { .p-gnavLink__anc:hover { color: #1630c6; } } @media (width >= 1025px) { .p-gnavLink__megaFrame { position: absolute; right: 0; left: 0; z-index: -2; pointer-events: none; opacity: 0; translate: 0 -1rem; transition: 0.3s; } } /* -------------------------------------------- MEGA -------------------------------------------- */ @media (width < 1025px) { .p-gnavMega { padding: 1rem 0 1.4rem; } .p-gnavMega__linkList { display: grid; gap: 1rem; } .p-gnavMega__linkAnc { position: relative; display: block; padding-left: 2rem; color: #2a2f4e; } .p-gnavMega__linkAnc::before { position: absolute; top: 0; bottom: 0; left: 0; display: block; width: 0.9rem; height: 1px; margin: auto; content: ""; background-color: currentColor; } .p-gnavMega__linkArrow, .p-gnavMega__linkPic { display: none; } } @media (width >= 1025px) { .p-gnavMega { position: relative; z-index: 1; padding: 3rem 0; background-color: #f6f7f9; } .p-gnavMega__inner { padding-right: 4rem; padding-left: 4rem; margin-right: auto; margin-left: auto; } .p-gnavMega__linkList { display: flex; gap: 2rem; justify-content: center; } .p-gnavMega__linkItem.--title { display: flex; align-items: center; } } @media (width >= 1025px) and (width >= 1280px) { .p-gnavMega__linkItem.--title { padding-right: 2rem; } } @media (width >= 1025px) and (width >= 1600px) { .p-gnavMega__linkItem.--title { padding-right: 4rem; } } @media (width >= 1025px) { .p-gnavMega__linkAnc { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; letter-spacing: 0.08em; } } @media (width >= 1025px) and (hover: hover) { .p-gnavMega__linkAnc:hover { color: #1630c6; } .p-gnavMega__linkAnc:hover .p-gnavMega__linkPic > img { scale: 1.1; } .p-gnavMega__linkAnc:hover .p-gnavMega__linkArrow::before { scale: 1.1; } } @media (width >= 1025px) { .p-gnavMega__linkTitle { font-size: 1.4285714286em; font-weight: 600; line-height: 1; } .p-gnavMega__linkArrow { position: relative; z-index: 1; display: block; width: 3.3rem; height: 3.3rem; margin-top: 2.5rem; border-radius: 0.4rem; } .p-gnavMega__linkArrow::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; transition: scale 0.3s; } .p-gnavMega__linkArrow::after { position: absolute; inset: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; translate: -25% 0; } .p-gnavMega__linkPic { width: 19rem; aspect-ratio: 220/165; overflow: hidden; border-radius: 1rem; } } @media (width >= 1025px) and (width >= 1280px) { .p-gnavMega__linkPic { width: 20rem; } } @media (width >= 1025px) and (width >= 1600px) { .p-gnavMega__linkPic { width: 22rem; } } @media (width >= 1025px) { .p-gnavMega__linkPic > img { transition: scale 0.3s; } .p-gnavMega__linkText { margin-top: 1.2rem; font-size: 1.1428571429em; font-weight: 500; line-height: 1.3; } } /* -------------------------------------------- HEADER -------------------------------------------- */ @media (width < 1025px) { .p-header { position: relative; z-index: 1; display: flex; gap: 1.5rem; align-items: center; padding: 0.8rem 5.1282051282vw; } .p-header::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: #f6f7f9; border-radius: 0 0 1rem 1rem; } .p-header__logoFrame { display: flex; flex: 1; align-items: center; } .p-header__logoAnc { display: block; } .p-header__logoPic { width: 14rem; height: auto; aspect-ratio: 60/11; } .p-header__gnavFrame { position: fixed; top: 0; right: 0; left: 0; z-index: -2; height: 100dvh; pointer-events: none; opacity: 0; transition: opacity 0.3s; } .is-menuOpen .p-header__gnavFrame { pointer-events: auto; opacity: 1; } .p-header__contactAnc { position: relative; z-index: 1; display: flex; gap: 0.6rem; align-items: center; padding: 1.2rem 1.7rem; font-size: 0.7857142857em; color: #fff; letter-spacing: 0.08em; border-radius: 999px; } .p-header__contactAnc::before { position: absolute; inset: 0; z-index: -1; display: block; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; } .p-header__contactIcon { width: 1.5rem; height: 1rem; } .p-header__contactText { display: block; font-weight: 500; line-height: 1; } .p-header__bnrFrame { display: none; } .p-header__menuBtn { position: relative; display: block; width: 3rem; height: 3rem; } .p-header__menuBtn::before, .p-header__menuBtn::after { position: absolute; inset: 0; width: 100%; height: 1px; margin: auto; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); translate: 0 -0.3rem; transition: 0.3s; } .p-header__menuBtn::after { translate: 0 0.3rem; } .is-menuOpen .p-header__menuBtn::before, .is-menuOpen .p-header__menuBtn::after { rotate: 20deg; translate: 0; } .is-menuOpen .p-header__menuBtn::after { rotate: -20deg; } } @media (width >= 1025px) { .p-header { position: relative; z-index: 1; display: flex; align-items: center; padding: 0 4rem; white-space: nowrap; } .p-header:has(.--mega.is-act)::before { border-bottom: 1px solid #dbdada; border-radius: unset; } .p-header::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: #f6f7f9; border-radius: 0 0 1rem 1rem; } .p-header__logoFrame { display: flex; flex: 1; align-items: center; } .p-header__logoAnc { display: block; } } @media (width >= 1025px) and (hover: hover) { .p-header__logoAnc:hover { opacity: 0.7; } } @media (width >= 1025px) { .p-header__logoPic { width: 20.5rem; height: auto; aspect-ratio: 60/11; } .p-header__contactFrame { margin-left: 2rem; } .p-header__contactAnc { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; justify-content: center; width: 8rem; height: 8rem; padding: 2.2rem; font-size: 1em; color: #fff; letter-spacing: 0.08em; border-radius: 0.8rem; } } @media (width >= 1025px) and (width >= 1280px) { .p-header__contactAnc { width: 8rem; } } @media (width >= 1025px) and (hover: hover) { .p-header__contactAnc:hover::before { scale: 1.05; } } @media (width >= 1025px) { .p-header__contactAnc::before { position: absolute; inset: 0; z-index: -1; display: block; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; transition: scale 0.3s; } .p-header__contactIcon { width: 2.3rem; height: 1.5rem; } .p-header__contactText { display: block; font-weight: 500; line-height: 1; } .p-header__bnrFrame { display: flex; gap: 0.3rem; align-items: center; margin-left: 0.3rem; } .p-header__bnrAnc { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: 0.8rem; } } @media (width >= 1025px) and (hover: hover) { .p-header__bnrAnc:hover .p-header__bnrPic > img { scale: 1.05; } } @media (width >= 1025px) { .p-header__bnrPic { width: 17rem; aspect-ratio: 17/8; overflow: hidden; } } @media (width >= 1025px) and (width >= 1280px) { .p-header__bnrPic { width: 17rem; } } @media (width >= 1025px) { .p-header__bnrPic > img { transition: scale 0.3s; } .p-header__menuBtnFrame { display: none; } } /* -------------------------------------------- PAGER -------------------------------------------- */ .p-pager { display: flex; gap: 2rem; align-items: center; justify-content: center; font-family: "Montserrat", sans-serif; font-size: 0.9285714286em; font-weight: 500; } @media (width >= 1025px) { .p-pager { gap: 5rem; font-size: 1em; } } .p-pager.--spaceBetween { justify-content: space-between; } .p-pager__arrow { position: relative; padding-top: 1rem; padding-bottom: 1rem; } @media (hover: hover) { .p-pager__arrow:hover { color: #1630c6; } } .p-pager__arrow::before { position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid #1630c6; border-bottom: 2px solid #1630c6; transform: skew(3deg, 3deg); rotate: -45deg; } .p-pager__arrow.--prev { padding-left: 1.5rem; } @media (width >= 1025px) { .p-pager__arrow.--prev { padding-right: 1rem; } } .p-pager__arrow.--prev::before { right: auto; left: 0; rotate: 45deg; scale: -1 1; } .p-pager__arrow.--next { padding-right: 1.5rem; } @media (width >= 1025px) { .p-pager__arrow.--next { padding-left: 1rem; } } .p-pager__arrow.--inact { color: #b2b3bc; pointer-events: none; } .p-pager__arrow.--inact::before { border-color: currentColor; opacity: 0.4; } .p-pager__btn { position: relative; z-index: 1; display: flex; gap: 1.5rem; align-items: center; justify-content: center; width: 18rem; max-width: 100%; padding: 2.3rem; font-family: "Noto Sans JP", sans-serif; font-weight: 500; line-height: 1; text-align: center; letter-spacing: 0.08em; border-radius: 0.6rem; } @media (width >= 1025px) { .p-pager__btn { gap: 2rem; width: 30rem; padding: 3rem; font-size: 1.1428571429em; } } @media (hover: hover) { .p-pager__btn:hover::after { scale: 1.05; } } .p-pager__btn::before { display: block; width: 1.4rem; height: 1.2rem; content: ""; background-color: #1630c6; clip-path: url("#list_01"); transform: translateZ(0); will-change: transform; } @media (width >= 1025px) { .p-pager__btn::before { width: 1.7rem; height: 1.4rem; } } .p-pager__btn::after { position: absolute; inset: 0; z-index: -1; content: ""; background: #fff; border-radius: inherit; transition: scale 0.3s; } .p-pager__list { display: flex; gap: 0.3rem; align-items: center; } @media (width >= 1025px) { .p-pager__list { gap: 0.5rem; } } .p-pager__anc, .p-pager__current { display: flex; align-items: center; justify-content: center; width: 4.3rem; height: 4.3rem; border-radius: 0.4rem; } @media (width >= 1025px) { .p-pager__anc, .p-pager__current { width: 5rem; height: 5rem; } } @media (hover: hover) { .p-pager__anc:hover { color: #fff; background-color: #1630c6; } } @media (width < 1025px) { .p-pager:has(.p-pager__ellipsis.--front):has(.p-pager__ellipsis.--back) .p-pager__anc.--loop { display: none; } } .p-pager__current { background-color: #fff; } @media (width >= 1025px) { .p-pager__ellipsis { display: block; width: 4rem; text-align: center; } } /* -------------------------------------------- DOCUMENT -------------------------------------------- */ .p-databookDoc { padding-top: 5rem; padding-bottom: 7.5rem; } @media (width >= 1025px) { .p-databookDoc { padding-top: 9rem; padding-bottom: 15rem; } } .p-databookDoc__desc { line-height: 1.8571428571; } @media (width >= 1025px) { .p-databookDoc__desc { font-size: 1.1428571429em; line-height: 2.25; text-align: center; } } .p-databookDoc__listFrame { margin-top: 9rem; } @media (width >= 1025px) { .p-databookDoc__listFrame { margin-top: 12rem; } } /* -------------------------------------------- DOCUMENT LIST -------------------------------------------- */ .p-databookDocList { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5.5rem; } @media (width < 768px) { .p-databookDocList { margin-right: -2.5641025641vw; margin-left: -2.5641025641vw; } } @media (width >= 768px) { .p-databookDocList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } .p-databookDocList__item { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); padding: 0 2.5rem 2.5rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-databookDocList__item { display: flex; flex-direction: row-reverse; gap: 2rem; padding: 4rem; } } .p-databookDocList__picFrame { width: 20rem; margin: -5rem auto -2rem; } @media (width >= 1025px) { .p-databookDocList__picFrame { width: 25.5rem; margin: 0 -2rem 0 0; } } .p-databookDocList__pic { width: 100%; height: auto; aspect-ratio: 530/598; overflow: hidden; border-radius: 1rem; } .p-databookDocList__contFrame { display: flex; flex-direction: column; padding: 2rem 0 0; } @media (width >= 1025px) { .p-databookDocList__contFrame { width: calc(100% - 23.5rem - 2rem); padding: 0; } } .p-databookDocList__title { font-size: 1.4285714286em; font-weight: 600; line-height: 1.35; text-align: center; } @media (width >= 1025px) { .p-databookDocList__title { font-size: 1.5714285714em; text-align: left; } } .p-databookDocList__titleSup { margin-top: 0.5rem; line-height: 1; text-align: center; } @media (width >= 1025px) { .p-databookDocList__titleSup { margin-top: 1rem; text-align: left; } } .p-databookDocList__text { margin-top: 1.5rem; margin-bottom: auto; line-height: 1.8571428571; letter-spacing: 0; } @media (width >= 1025px) { .p-databookDocList__text { margin-top: 3rem; font-size: 1.1428571429em; line-height: 2; } } .p-databookDocList__btnFrame { display: flex; justify-content: center; margin-top: 2.5rem; } @media (width >= 1025px) { .p-databookDocList__btnFrame { justify-content: flex-start; margin-top: 4rem; } } /* -------------------------------------------- reCAPTCHA -------------------------------------------- */ .grecaptcha-badge { z-index: 999; } /* -------------------------------------------- FORM -------------------------------------------- */ .p-form { padding-bottom: 10rem; } @media (width >= 1025px) { .p-form { padding-bottom: 15rem; } } .p-form__stepFrame { margin-bottom: 4.5rem; } @media (width >= 1025px) { .p-form__stepFrame { margin-bottom: 6.5rem; } } .p-form__noteFrame { margin-bottom: 7.5rem; } @media (width >= 1025px) { .p-form__noteFrame { margin-bottom: 6rem; } } .p-form__noteFrame:has(~ .p-form__btnFrame) { margin-bottom: 0; } .p-form__noteTitle { margin-bottom: 2rem; font-size: 1.5em; font-weight: 600; line-height: 1.4523809524; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-form__noteTitle { font-size: 2.2857142857em; line-height: 1.4375; } } .p-form__noteText { line-height: 1.8571428571; } @media (width >= 1025px) { .p-form__noteText { font-size: 1.1428571429em; line-height: 2.5; text-align: center; } .p-form__noteText .c-labelBd { font-size: 0.75em; } } .p-form__btnFrame { display: flex; justify-content: center; margin-top: 5rem; } @media (width >= 1025px) { .p-form__btnFrame { margin-top: 6rem; } } /* -------------------------------------------- STEP -------------------------------------------- */ .p-formStep { display: flex; gap: 5.5rem; align-items: center; justify-content: center; text-align: center; counter-reset: number 0; } @media (width >= 1025px) { .p-formStep { gap: 7rem; } } .p-formStep__item { position: relative; display: flex; gap: 0 1rem; align-items: center; color: #b2b3bc; } @media (width >= 1025px) { .p-formStep__item { gap: 0 2rem; } } .p-formStep__item.is-act { color: #1630c6; } .p-formStep__item + *::before { position: absolute; top: 0; bottom: 0; left: -4rem; width: 2.5rem; height: 1px; margin: auto; content: ""; background-color: #c2cada; } @media (width >= 1025px) { .p-formStep__item + *::before { left: -5rem; width: 3rem; } } .p-formStep__num { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: currentColor; border-radius: 0.3rem; } @media (width >= 1025px) { .p-formStep__num { width: 3rem; height: 3rem; } } .p-formStep__num::before { display: block; font-family: "Montserrat", sans-serif; font-size: 0.8571428571em; font-weight: 600; line-height: 1; color: #fff; content: counter(number); counter-increment: number 1; } @media (width >= 1025px) { .p-formStep__num::before { font-size: 1em; } } .p-formStep__text { font-weight: 500; } @media (width >= 1025px) { .p-formStep__text { font-size: 1.2857142857em; } } /* -------------------------------------------- LAYOUT -------------------------------------------- */ .p-formLayout__formFrame { display: grid; gap: 3rem; } @media (width >= 1025px) { .p-formLayout__formFrame { gap: 4rem; } } .p-formLayout__formItem { display: grid; gap: 1.5rem; } @media (width >= 1025px) { .p-formLayout__formItem { display: flex; gap: 8rem; align-items: flex-start; } } .p-formLayout__nameFrame { display: flex; gap: 1rem; align-items: center; } @media (width >= 1025px) { .p-formLayout__nameFrame { justify-content: space-between; width: 22rem; } } .p-formLayout__name { font-weight: 500; } @media (width >= 1025px) { .p-formLayout__name { font-size: 1.1428571429em; } } @media (width >= 1025px) { .p-formLayout__contFrame { flex: 1; font-size: 1.1428571429em; } } .p-formLayout__contChildFrame + .p-formLayout__contChildFrame { margin-top: 1.5rem; } @media (width >= 1025px) { .p-formLayout__contChildFrame + .p-formLayout__contChildFrame { margin-top: 2rem; } } .p-formLayout__contChildText { margin-bottom: 1.5rem; } .p-formLayout__policyFrame { height: 20rem; padding: 3rem 2rem; margin-top: 7rem; background-color: #fff; border-radius: 1rem; overflow: auto; overscroll-behavior: none; scrollbar-color: #1630c6 #d3d9e5; } .p-formLayout__policyFrame::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } .p-formLayout__policyFrame::-webkit-scrollbar-track { background: #d3d9e5; border-radius: 99rem; } .p-formLayout__policyFrame::-webkit-scrollbar-thumb { background: #1630c6; border-radius: 99rem; } @media (width >= 1025px) { .p-formLayout__policyFrame { height: 30rem; padding: 5rem 8rem; } } .p-formLayout__policyTitle { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1.5rem; font-size: 1.1428571429em; font-weight: 600; line-height: 1.3; color: #1630c6; } @media (width >= 1025px) { .p-formLayout__policyTitle { gap: 1.4rem; margin-bottom: 2rem; font-size: 1.4285714286em; } } .p-formLayout__policyTitle::before { display: block; flex-shrink: 0; width: 1.9rem; height: 1.7rem; content: ""; background-color: currentColor; clip-path: url("#attention_01"); transform: translateZ(0); translate: 0 10%; will-change: transform; } @media (width >= 1025px) { .p-formLayout__policyTitle::before { width: 2.6rem; height: 2.3rem; } } .p-formLayout__agreeFrame { margin-top: 3.5rem; } @media (width >= 1025px) { .p-formLayout__agreeFrame { margin-top: 5rem; } } .p-formLayout__btnFrame { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; justify-content: center; margin-top: 6rem; } @media (width >= 1025px) { .p-formLayout__btnFrame { gap: 4rem; } } @media (width >= 1025px) { .p-formLayout.--input .p-formLayout__nameFrame { padding-top: 1.8rem; } } /* -------------------------------------------- CF7 -------------------------------------------- */ .wpcf7-not-valid-tip { display: block; margin-top: 1rem; line-height: 1.5; color: #e50606; } /* -------------------------------------------- INPUT -------------------------------------------- */ .p-formInput { width: 100%; padding: 1.2rem 2rem; color: #707070; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-formInput { padding: 1.6rem 3rem; } } .p-formInput::placeholder { color: #bcbcbc; } .p-formInput.wpcf7-not-valid { outline: 1px solid #e50606; } @media (width >= 1025px) { .p-formInput.wpcf7-not-valid { outline-width: 2px; } } /* -------------------------------------------- TEXTAREA -------------------------------------------- */ .p-formTextarea { width: 100%; height: 20rem; padding: 1.2rem 2rem; color: #707070; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-formTextarea { padding: 1.6rem 3rem; } } .p-formTextarea::placeholder { color: #bcbcbc; } .p-formTextarea.wpcf7-not-valid { outline: 1px solid #e50606; } @media (width >= 1025px) { .p-formTextarea.wpcf7-not-valid { outline-width: 2px; } } /* -------------------------------------------- SELECTBOX -------------------------------------------- */ .p-formSelect { position: relative; color: #707070; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-formSelect { max-width: 40rem; cursor: pointer; } } .p-formSelect::before { position: absolute; top: 0; right: 2rem; bottom: 0; display: block; width: 0.8rem; height: 0.8rem; margin: auto; pointer-events: none; content: ""; border-right: 1px solid #1630c6; border-bottom: 1px solid #1630c6; rotate: 45deg; translate: -20% -30%; } .p-formSelect select { width: 100%; padding: 1.2rem 2rem; padding-right: 4rem; } @media (width >= 1025px) { .p-formSelect select { padding: 1.6rem 3rem; padding-right: 5rem; } } .p-formSelect:has(.wpcf7-not-valid) { margin-bottom: 3rem; outline: 1px solid #e50606; } @media (width >= 1025px) { .p-formSelect:has(.wpcf7-not-valid) { margin-bottom: 3.5rem; outline-width: 2px; } } .p-formSelect:has(.wpcf7-not-valid) .wpcf7-form-control-wrap { position: static; } .p-formSelect:has(.wpcf7-not-valid) .wpcf7-not-valid-tip { position: absolute; top: calc(100% + 1rem); right: 0; left: 0; display: block; margin-top: 0; } /* -------------------------------------------- AGREE CHECKBOX -------------------------------------------- */ .p-formAgree { display: flex; flex-direction: column; align-items: center; width: 100%; } .p-formAgree__text { margin-bottom: 1.5rem; line-height: 1.8571428571; } @media (width >= 1025px) { .p-formAgree__text { margin-bottom: 2rem; font-size: 1.1428571429em; line-height: 2; } } .p-formAgree__checkFrame .wpcf7-form-control-wrap { display: flex; flex-direction: column; align-items: center; } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control { display: contents; } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item { display: contents; } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label { display: block; padding: 1.3rem; line-height: 1.5; cursor: pointer; background-color: #fff; border-radius: 0.6rem; } @media (width >= 1025px) { .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label { padding: 1rem 1.5rem 1rem 1rem; font-size: 1.1428571429em; } } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label:has(input:checked) { outline: 1px solid #1630c6; } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label > input { position: absolute; visibility: hidden; } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label > input + span { position: relative; display: inline-block; padding-left: 2.5rem; } @media (width >= 1025px) { .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label > input + span { padding-left: 3.5rem; } } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label > input + span::before { position: absolute; top: 0.25rem; left: 0; display: block; width: 1.6rem; height: 1.6rem; content: ""; border: 1px solid #c2cada; border-radius: 0.3rem; } @media (width >= 1025px) { .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label > input + span::before { top: 0.1rem; width: 2.4rem; height: 2.4rem; border-radius: 0.5rem; } } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label > input:checked + span::before { background-color: #1630c6; border-color: #1630c6; } .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label > input:checked + span::after { position: absolute; top: 0.7rem; left: 0.3rem; display: block; width: 1rem; height: 0.5rem; content: ""; border-bottom: 2px solid #fff; border-left: 2px solid #fff; rotate: -45deg; } @media (width >= 1025px) { .p-formAgree__checkFrame .wpcf7-form-control-wrap .wpcf7-form-control .wpcf7-list-item label > input:checked + span::after { top: 0.7rem; left: 0.6rem; width: 1.3rem; height: 0.8rem; } } /* -------------------------------------------- ARCHIVE -------------------------------------------- */ .p-newsArchive { padding-bottom: 10rem; } @media (width >= 1025px) { .p-newsArchive { padding-bottom: 15rem; } } .p-newsArchive__paginationFrame { margin-top: 5rem; } @media (width >= 1025px) { .p-newsArchive__paginationFrame { margin-top: 10rem; } } /* -------------------------------------------- SINGLE -------------------------------------------- */ .p-newsSingle { padding-bottom: 10rem; } @media (width >= 1025px) { .p-newsSingle { padding-bottom: 15rem; } } .p-newsSingle__inner { padding: 0 7.6923076923vw; } @media (width >= 1025px) { .p-newsSingle__inner { max-width: calc(100rem + 6.25vw * 2); padding: 0 6.25vw; margin-right: auto; margin-left: auto; } } .p-newsSingle__titleFrame { padding-bottom: 2.5rem; margin-bottom: 3rem; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-newsSingle__titleFrame { padding-bottom: 5.5rem; margin-bottom: 6rem; } } .p-newsSingle__titleInfoFrame { display: flex; gap: 1.5rem; align-items: center; } @media (width >= 1025px) { .p-newsSingle__titleInfoFrame { gap: 2rem; } } .p-newsSingle__titleInfoDate { display: block; font-family: "Montserrat", sans-serif; font-weight: 500; line-height: 1; color: #aaadc1; } @media (width >= 1025px) { .p-newsSingle__titleInfoCat { min-width: 10.5rem; padding: 0.6rem; } } .p-newsSingle__title { margin-top: 1.5rem; font-size: 1.4285714286em; font-weight: 600; line-height: 1.6; } @media (width >= 1025px) { .p-newsSingle__title { font-size: 2.1428571429em; } } .p-newsSingle__pagerFrame { padding-top: 3rem; margin-top: 5rem; border-top: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-newsSingle__pagerFrame { padding-top: 6rem; margin-top: 10rem; } } /* -------------------------------------------- LABO -------------------------------------------- */ .p-laboSingle { padding-bottom: 5rem; } @media (width >= 1025px) { .p-laboSingle { padding-bottom: 15rem; margin-top: -5rem; } } .p-laboSingle__frame { position: relative; z-index: 1; padding-top: 5rem; padding-bottom: 5rem; } @media (width >= 1025px) { .p-laboSingle__frame { z-index: 3; padding: 7rem 8rem 9rem; } } .p-laboSingle__frame::before { position: absolute; inset: -4rem calc(50% - 50vw) 0; z-index: -1; content: ""; background-color: #fff; } @media (width >= 1025px) { .p-laboSingle__frame::before { inset: 0; border-radius: 1rem; } } .p-laboSingle__descSec { padding: 2.5rem 2rem; margin-bottom: 6rem; background: #f0f1f5; border-radius: 1rem; } @media (width >= 1025px) { .p-laboSingle__descSec { padding: 3.5rem 4rem; margin-bottom: 10rem; } } .p-laboSingle__desc { line-height: 1.8571428571; } @media (width >= 1025px) { .p-laboSingle__desc { font-size: 1.1428571429em; line-height: 2; } } .p-laboSingle__summaryTitleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-laboSingle__summaryTitleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- ACTIONS PLAN -------------------------------------------- */ .p-plan { padding-bottom: 10rem; } @media (width >= 1025px) { .p-plan { padding-bottom: 15rem; } } .p-plan__bdFrame { padding: 3rem 0 4rem; border-top: 1px solid #d3d9e5; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-plan__bdFrame { padding: 6rem 4rem; } } .p-plan__title { margin-bottom: 1.2rem; font-size: 1.4285714286em; font-weight: 600; line-height: 1.7692307692; } @media (width >= 1025px) { .p-plan__title { margin-bottom: 1.5rem; font-size: 1.8571428571em; } } .p-plan__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-plan__text { font-size: 1.1428571429em; line-height: 2; } } .p-plan__btnFrame { margin-top: 3rem; } @media (width >= 1025px) { .p-plan__btnFrame { margin-top: 4rem; } } /* -------------------------------------------- 404 -------------------------------------------- */ .p-404 { padding-bottom: 10rem; } @media (width >= 1025px) { .p-404 { padding-bottom: 15rem; } } .p-404__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-404__text { font-size: 1.1428571429em; line-height: 2; text-align: center; } } .p-404__btnFrame { display: flex; justify-content: center; margin-top: 5rem; } @media (width >= 1025px) { .p-404__btnFrame { margin-top: 6rem; } } /* -------------------------------------------- SENSING -------------------------------------------- */ .p-sensing { padding-top: 5rem; padding-bottom: 7.5rem; } @media (width >= 1025px) { .p-sensing { padding-top: 12rem; } } /* -------------------------------------------- LOCATION -------------------------------------------- */ .p-sensingLoc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } @media (width >= 1025px) { .p-sensingLoc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } } .p-sensingLoc__anc { position: relative; z-index: 1; display: block; overflow: hidden; border-radius: 1rem; } @media (hover: hover) { .p-sensingLoc__anc:hover .p-sensingLoc__pic > img { scale: 1.05; } } .p-sensingLoc__pic { position: relative; z-index: -1; width: 100%; height: auto; aspect-ratio: 600/342; } .p-sensingLoc__pic::before { position: absolute; inset: 0; z-index: 1; display: block; content: ""; background: linear-gradient(to bottom, #2a2f4e 0%, rgba(42, 47, 78, 0) 35%, rgba(42, 47, 78, 0) 100%); } .p-sensingLoc__pic > img { transition: scale 0.3s; } .p-sensingLoc__title { position: absolute; top: 0; right: 0; left: 0; padding: 1rem 1rem 0; line-height: 1.4285714286; color: #fff; } @media (width < 1025px) { .p-sensingLoc__title { letter-spacing: 0.03em; } } @media (width >= 1025px) { .p-sensingLoc__title { padding: 2rem 2.5rem 0; font-size: 1.4285714286em; } } .p-sensingLoc__textMore { position: absolute; right: 1rem; bottom: 1rem; padding: 1rem 3rem 1rem 1.3rem; line-height: 1; color: #fff; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 0.6rem; } @media (width >= 1025px) { .p-sensingLoc__textMore { padding: 1.2rem 3.5rem 1.2rem 1.5rem; } } .p-sensingLoc__textMore::before, .p-sensingLoc__textMore::after { position: absolute; top: 0; right: 1.3rem; bottom: 0; display: block; width: 1rem; height: 1px; margin: auto; content: ""; background-color: #fff; } @media (width >= 1025px) { .p-sensingLoc__textMore::before, .p-sensingLoc__textMore::after { width: 1.2rem; } } .p-sensingLoc__textMore::after { rotate: 90deg; } /* -------------------------------------------- MODAL -------------------------------------------- */ .p-sensingModal { padding: 5rem 2rem 2.5rem; } @media (width >= 1025px) { .p-sensingModal { padding: 5rem; } } .p-sensingModal__inner { max-width: 104rem; margin: 0 auto; } .p-sensingModal__titleFrame { margin-bottom: 3rem; } @media (width >= 1025px) { .p-sensingModal__titleFrame { margin-bottom: 7rem; } } .p-sensingModal__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.3636363636; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-sensingModal__title { font-size: 2.8571428571em; line-height: 1.45; } } .p-sensingModal__layout { display: flex; flex-direction: column; gap: 3.5rem; } @media (width >= 1025px) { .p-sensingModal__layout { flex-direction: row-reverse; gap: 7rem; } } @media (width >= 1025px) { .p-sensingModal__picFrame { width: 57.2rem; } } .p-sensingModal__pic { width: 100%; height: auto; aspect-ratio: 584/413; overflow: hidden; border-radius: 1rem; } .p-sensingModal__subTitleFrame { margin-bottom: 1.5rem; } @media (width >= 1025px) { .p-sensingModal__subTitleFrame { margin-bottom: 2rem; } } @media (width >= 1025px) { .p-sensingModal__infoFrame { flex: 1; } } .p-sensingModal__info { border-top: 1px solid #d3d9e5; } .p-sensingModal__infoItem { padding: 1rem; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-sensingModal__infoItem { padding: 2rem; } } .p-sensingModal__infoTitleFrame { margin-bottom: 0.5rem; font-weight: 600; line-height: 1.3571428571; } @media (width >= 1025px) { .p-sensingModal__infoTitleFrame { margin-bottom: 1rem; } } .p-sensingModal__mapFrame { margin-top: 3rem; } @media (width >= 1025px) { .p-sensingModal__mapFrame { margin-top: 7rem; } } .p-sensingModal__mapPic { max-width: 100%; margin: auto; } .p-sensingModal__mapPic.--loc01 { width: 42.4rem; } .p-sensingModal__mapPic.--loc02 { width: 80.8rem; } .p-sensingModal__mapPic.--loc03 { width: 56.7rem; } @media (width >= 1025px) { .p-sensingModal__mapPic.--loc03 { translate: 9%; } } .p-sensingModal__mapPic.--loc04 { width: 68.8rem; } /* -------------------------------------------- ARCHIVE -------------------------------------------- */ .p-worksArchive { padding-bottom: 10rem; } @media (width >= 1025px) { .p-worksArchive { padding-bottom: 18rem; } } .p-worksArchive__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-worksArchive__titleFrame { margin-bottom: 6rem; } } .p-worksArchive__navFrame { margin-bottom: 5rem; } @media (width >= 1025px) { .p-worksArchive__navFrame { margin-bottom: 6rem; } } .p-worksArchive__paginationFrame { margin-top: 4rem; } @media (width >= 1025px) { .p-worksArchive__paginationFrame { margin-top: 15rem; } } /* -------------------------------------------- SINGLE -------------------------------------------- */ .p-worksSingle { padding-top: 4.5rem; padding-bottom: 7.5rem; } @media (width >= 1025px) { .p-worksSingle { padding-top: 27rem; padding-bottom: 15rem; } } .p-worksSingle__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-worksSingle__titleFrame { margin-bottom: 7rem; } } .p-worksSingle__bgSec { margin-bottom: 6rem; } @media (width >= 1025px) { .p-worksSingle__bgSec { margin-bottom: 14rem; } } @media (width < 1025px) { .p-worksSingle__bgInner { padding: 0 5.1282051282vw; } } .p-worksSingle__bgFrame { padding: 5rem 2.5rem; background: #f0f1f5; border-radius: 1rem; } @media (width >= 1025px) { .p-worksSingle__bgFrame { padding: 7rem 7rem 8rem; } .p-worksSingle__bgFrame > * { max-width: 100rem; margin-right: auto; margin-left: auto; } } .p-worksSingle__resultSec { margin-top: 7.5rem; } @media (width >= 1025px) { .p-worksSingle__resultSec { margin-top: 15rem; } } @media (width < 1025px) { .p-worksSingle__resultInner { padding: 0 5.1282051282vw; } } .p-worksSingle__resultFrame { position: relative; z-index: 1; padding: 7.5rem 2.5rem 5.5rem; color: #fff; } @media (width >= 1025px) { .p-worksSingle__resultFrame { padding: 7rem 7rem 8rem; } .p-worksSingle__resultFrame > * { max-width: 100rem; margin-right: auto; margin-left: auto; } } .p-worksSingle__resultFrame::before, .p-worksSingle__resultFrame::after { position: absolute; inset: 0 calc(50% - 50vw); content: ""; } @media (width >= 1025px) { .p-worksSingle__resultFrame::before, .p-worksSingle__resultFrame::after { inset: 0; border-radius: 1rem; } } .p-worksSingle__resultFrame::before { z-index: -1; background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .p-worksSingle__resultFrame::before { background-size: 10rem 10rem; } } .p-worksSingle__resultFrame::after { z-index: -2; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); } .p-worksSingle__voiceFrame { padding: 2rem; margin-top: 4rem; background-color: #6475db; border-radius: 0.4rem; } @media (width >= 1025px) { .p-worksSingle__voiceFrame { padding: 3.5rem 4rem 4rem; } } .p-worksSingle__voiceTitle { position: relative; padding-left: 2rem; margin-bottom: 1.5rem; font-size: 1.0714285714em; font-weight: 600; line-height: 1.6666666667; } @media (width >= 1025px) { .p-worksSingle__voiceTitle { margin-bottom: 3rem; font-size: 1.4285714286em; } } .p-worksSingle__voiceTitle::before { position: absolute; top: 0.55em; left: 0; width: 1rem; height: 1rem; content: ""; background-color: currentColor; border-radius: 0.2rem; } .p-worksSingle__voiceLayout { display: grid; gap: 2rem; } @media (width >= 1025px) { .p-worksSingle__voiceLayout { display: flex; gap: 4rem; align-items: center; } } .p-worksSingle__voicePicFrame { display: flex; justify-content: center; } @media (width >= 1025px) { .p-worksSingle__voicePicFrame { flex-shrink: 0; width: 10rem; } } .p-worksSingle__voicePic { width: 100%; max-width: 10rem; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: 50%; } .p-worksSingle__voiceText { line-height: 1.8571428571; } @media (width >= 1025px) { .p-worksSingle__voiceText { font-size: 1.1428571429em; } } .p-worksSingle__staffSec { margin-top: 5rem; } @media (width >= 1025px) { .p-worksSingle__staffSec { margin-top: 7rem; } } @media (width < 1025px) { .p-worksSingle__staffInner { padding: 0 5.1282051282vw; } } .p-worksSingle__staffFrame { padding: 5rem 2.5rem; background: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-worksSingle__staffFrame { padding: 7rem 7rem 8rem; } .p-worksSingle__staffFrame > * { max-width: 100rem; margin-right: auto; margin-left: auto; } } .p-worksSingle__commentLayout { display: grid; gap: 4rem; } @media (width >= 1025px) { .p-worksSingle__commentLayout { grid-template-columns: 18rem minmax(0, 1fr); gap: 5rem; direction: rtl; } } .p-worksSingle__commentPicFrame { display: flex; align-items: flex-start; justify-content: center; } .p-worksSingle__commentPic { width: 100%; max-width: 20rem; height: auto; aspect-ratio: 400/533; overflow: hidden; border-radius: 0.5rem; } @media (width >= 1025px) { .p-worksSingle__commentPic { border-radius: 1rem; } } .p-worksSingle__commentContFrame { direction: ltr; } @media (width >= 1025px) { .p-worksSingle__commentContFrame { font-size: 1.1428571429em; } } .p-worksSingle__commentText { line-height: 1.8571428571; } @media (width >= 1025px) { .p-worksSingle__commentText { line-height: 2; } } .p-worksSingle__commentName { margin-top: 4rem; text-align: right; } @media (width >= 1025px) { .p-worksSingle__commentName { margin-top: 1.5rem; } } .p-worksSingle__supSec { margin-top: 7.5rem; } @media (width >= 1025px) { .p-worksSingle__supSec { margin-top: 15rem; } } /* -------------------------------------------- RELATED -------------------------------------------- */ .p-worksSingleRelated { position: relative; z-index: 1; padding: 7.5rem 0; } @media (width >= 1025px) { .p-worksSingleRelated { padding: 10rem 0; } } .p-worksSingleRelated::before, .p-worksSingleRelated::after { position: absolute; inset: 0 calc(50% - 50vw); content: ""; } @media (width >= 1025px) { .p-worksSingleRelated::before, .p-worksSingleRelated::after { inset: 0; } } .p-worksSingleRelated::before { z-index: -1; background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .p-worksSingleRelated::before { background-size: 10rem 10rem; } } .p-worksSingleRelated::after { z-index: -2; background: #444863; } .p-worksSingleRelated__titleFrame { margin-bottom: 5rem; } @media (width >= 1025px) { .p-worksSingleRelated__titleFrame { margin-bottom: 7rem; } .p-worksSingleRelated__titleFrame .c-titleDot.--sm .c-titleDot__main { font-size: 3.5714285714em; } } .p-worksSingleRelated__btnFrame { display: flex; justify-content: center; margin-top: 4rem; } @media (width >= 1025px) { .p-worksSingleRelated__btnFrame { margin-top: 7rem; } } /* -------------------------------------------- RELATED SLIDE -------------------------------------------- */ .p-worksSingleRelatedSlide { position: relative; } .p-worksSingleRelatedSlide__track { overflow: visible !important; } .p-worksSingleRelatedSlide__slide { width: 27rem; } @media (width >= 1025px) { .p-worksSingleRelatedSlide__slide { width: 27.5rem; } } .p-worksSingleRelatedSlide__navFrame { display: flex; flex-direction: column; gap: 4rem; align-items: center; margin-top: 5rem; } @media (width >= 1025px) { .p-worksSingleRelatedSlide__navFrame { flex-direction: row; gap: 6.5rem; } } .p-worksSingleRelatedSlide__progress { position: relative; width: 100%; height: 1px; background-color: #d3d9e5; } @media (width >= 1025px) { .p-worksSingleRelatedSlide__progress { height: 2px; } } .p-worksSingleRelatedSlide__progressBar { position: absolute; top: 0; bottom: 0; left: 0; background-color: #687df4; transition: width 0.1s; } .p-worksSingleRelatedSlide__arrows { display: flex; gap: 0.5rem; justify-content: center; } .p-worksSingleRelatedSlide__arrow { position: relative; display: block; width: 5rem; height: 5rem; color: #1630c6; background-color: #f0f1f5; border-radius: 0.4rem; } @media (width >= 1025px) { .p-worksSingleRelatedSlide__arrow { width: 6rem; height: 6rem; } } @media (hover: hover) { .p-worksSingleRelatedSlide__arrow:hover { color: #fff; } .p-worksSingleRelatedSlide__arrow:hover::before { opacity: 1; scale: 1.1; } } .p-worksSingleRelatedSlide__arrow[disabled] { pointer-events: none; opacity: 0.7; } .p-worksSingleRelatedSlide__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: 0.3s; transition-property: opacity, scale; } .p-worksSingleRelatedSlide__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: -45deg; translate: -25% 0; } @media (width >= 1025px) { .p-worksSingleRelatedSlide__arrow::after { width: 1rem; height: 1rem; border-width: 2px; } } .p-worksSingleRelatedSlide__arrow.--prev::after { rotate: 135deg; translate: 25% 0; } .p-worksSingleRelatedSlide.--labo .p-worksSingleRelatedSlide__slide { width: 33rem; } @media (width >= 1025px) { .p-worksSingleRelatedSlide.--labo .p-worksSingleRelatedSlide__slide { width: 37.5rem; } } /* -------------------------------------------- HISTORY -------------------------------------------- */ .p-aboutHistory { padding-top: 8rem; padding-bottom: 12rem; } @media (width >= 1025px) { .p-aboutHistory { padding-top: 14rem; padding-bottom: 14rem; } } .p-aboutHistory__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-aboutHistory__titleFrame { margin-bottom: 7.5rem; } } /* -------------------------------------------- TIMELINE -------------------------------------------- */ .p-aboutHistoryTimeline { display: grid; gap: 0.8rem; } @media (width >= 1025px) { .p-aboutHistoryTimeline { gap: 1rem; } } .p-aboutHistoryTimeline__item { display: flex; gap: 0.5rem; } @media (width < 1025px) { .p-aboutHistoryTimeline__item:not(:first-child, :has(.p-aboutHistoryTimeline__periodFrame:empty)) { padding-top: 3.5rem; } .p-aboutHistoryTimeline__item:not(:first-child, :has(.p-aboutHistoryTimeline__periodFrame:empty)) .p-aboutHistoryTimeline__circleFrame::before { top: -4.5rem; } } @media (width >= 1025px) { .p-aboutHistoryTimeline__item { gap: 0; align-items: center; } } .p-aboutHistoryTimeline__item:first-child .p-aboutHistoryTimeline__circleFrame::before { display: none; } .p-aboutHistoryTimeline__item:last-child .p-aboutHistoryTimeline__circleFrame::after { display: none; } .p-aboutHistoryTimeline__periodFrame { position: absolute; } @media (width >= 1025px) { .p-aboutHistoryTimeline__periodFrame { position: static; flex-shrink: 0; width: 9rem; } } .p-aboutHistoryTimeline__periodText { font-family: "Montserrat", sans-serif; font-size: 1.1428571429em; font-weight: 500; line-height: 1; color: #1630c6; } @media (width >= 1025px) { .p-aboutHistoryTimeline__periodText { font-size: 1.7142857143em; } } .p-aboutHistoryTimeline__yearFrame { flex-shrink: 0; width: 5.5rem; padding-top: 2rem; } @media (width >= 768px) { .p-aboutHistoryTimeline__yearFrame { width: 6.5rem; } } @media (width >= 1025px) { .p-aboutHistoryTimeline__yearFrame { flex-shrink: 0; width: 8rem; padding-top: 0; margin-right: 4rem; margin-left: 2.5rem; } } .p-aboutHistoryTimeline__yearText { display: flex; gap: 0.2rem; align-items: flex-end; font-family: "Montserrat", sans-serif; font-size: 1.1428571429em; font-weight: 500; line-height: 0.9; color: #aaadc1; } @media (width >= 1025px) { .p-aboutHistoryTimeline__yearText { font-size: 1.7142857143em; } } .p-aboutHistoryTimeline__yearText > span { font-family: "Noto Sans JP", sans-serif; font-size: 0.75em; line-height: 1.1; } @media (width >= 1025px) { .p-aboutHistoryTimeline__yearText > span { font-size: 0.6666666667em; } } .p-aboutHistoryTimeline__circleFrame { position: relative; z-index: 1; flex-shrink: 0; padding-top: 2rem; } @media (width >= 1025px) { .p-aboutHistoryTimeline__circleFrame { display: flex; align-items: center; height: 100%; padding-top: 0; margin-right: 3.5rem; } } .p-aboutHistoryTimeline__circleFrame::before, .p-aboutHistoryTimeline__circleFrame::after { position: absolute; inset: -1rem 0 calc(100% - 3rem); z-index: -1; width: 1px; margin: auto; content: ""; background-color: #d3d9e5; } @media (width >= 1025px) { .p-aboutHistoryTimeline__circleFrame::before, .p-aboutHistoryTimeline__circleFrame::after { inset: -1.1rem 0 50%; } } .p-aboutHistoryTimeline__circleFrame::after { top: 3rem; bottom: 0; } @media (width >= 1025px) { .p-aboutHistoryTimeline__circleFrame::after { top: 50%; } } .p-aboutHistoryTimeline__circle { position: relative; width: 1.6rem; height: auto; aspect-ratio: 1; background-color: #dfe2f4; border-radius: 50%; } @media (width >= 1025px) { .p-aboutHistoryTimeline__circle { width: 3.2rem; } } .p-aboutHistoryTimeline__circle::before { position: absolute; inset: 0; width: 0.6rem; height: auto; aspect-ratio: 1; margin: auto; content: ""; background-color: #1630c6; border-radius: 50%; } @media (width >= 1025px) { .p-aboutHistoryTimeline__circle::before { width: 1.1rem; } } .p-aboutHistoryTimeline__contFrame { flex: auto; padding: 1.5rem 1.5rem 2.2rem; background: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-aboutHistoryTimeline__contFrame { padding: 3rem 4rem; } } .p-aboutHistoryTimeline__monthLayout { display: flex; flex-direction: column; gap: 0.5rem; } @media (width >= 1025px) { .p-aboutHistoryTimeline__monthLayout { flex-direction: row; gap: 0; align-items: center; } } @media (width >= 1025px) { .p-aboutHistoryTimeline__monthFrame { width: 8rem; } } .p-aboutHistoryTimeline__month { display: flex; gap: 0.2rem; align-items: flex-end; font-family: "Montserrat", sans-serif; font-size: 1.5em; font-weight: 500; line-height: 0.9; color: #aaadc1; } @media (width >= 1025px) { .p-aboutHistoryTimeline__month { font-size: 1.7142857143em; } } .p-aboutHistoryTimeline__month > span { font-family: "Noto Sans JP", sans-serif; font-size: 0.5714285714em; line-height: 1.3; } @media (width >= 1025px) { .p-aboutHistoryTimeline__month > span { font-size: 0.6666666667em; } } .p-aboutHistoryTimeline__monthContFrame { line-height: 1.8571428571; } @media (width >= 1025px) { .p-aboutHistoryTimeline__monthContFrame { font-size: 1.1428571429em; line-height: 2; } } /* -------------------------------------------- MESSAGE -------------------------------------------- */ .p-aboutMessage { padding-top: 8rem; padding-bottom: 5rem; background-color: #e5e9f2; } @media (width >= 1025px) { .p-aboutMessage { padding-top: 14rem; padding-bottom: 14rem; } } .p-aboutMessage__titleFrame { margin-bottom: 7.5rem; } @media (width >= 1025px) { .p-aboutMessage__titleFrame { margin-bottom: 6rem; } } .p-aboutMessage__ceoPicFrame { position: relative; margin: 0 -7.6923076923vw; } .p-aboutMessage__ceoPic { width: 100%; height: auto; aspect-ratio: 780/931; } @media (width >= 1025px) { .p-aboutMessage__ceoPic { aspect-ratio: 1400/500; } } .p-aboutMessage__ceoCatchPic { position: absolute; top: -3rem; right: 7.6923076923vw; width: 33.3333333333vw; max-width: 20rem; } @media (width >= 1025px) { .p-aboutMessage__ceoCatchPic { top: 6rem; width: 23rem; max-width: unset; } } .p-aboutMessage__contFrame { position: relative; padding-top: 5rem; } @media (width >= 1025px) { .p-aboutMessage__contFrame { width: 72.5%; padding-top: 10rem; } } .p-aboutMessage__textFrame { display: grid; gap: 3rem; } @media (width >= 1025px) { .p-aboutMessage__textFrame { gap: 5rem; } } .p-aboutMessage__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-aboutMessage__text { font-size: 1.1428571429em; line-height: 2.5; } } .p-aboutMessage__nameFrame { display: flex; flex-direction: column; align-items: flex-end; padding-right: 2rem; margin-top: 3.5rem; } @media (width >= 1025px) { .p-aboutMessage__nameFrame { position: absolute; right: 0; bottom: calc(100% + 4.5rem); padding-right: 0.5rem; } } .p-aboutMessage__namePosition { margin-bottom: 0.5rem; } @media (width >= 1025px) { .p-aboutMessage__namePosition { margin-bottom: 1rem; font-size: 1.1428571429em; } } .p-aboutMessage__namePic { width: 16rem; height: auto; aspect-ratio: 320/85.33; mix-blend-mode: multiply; } @media (width >= 1025px) { .p-aboutMessage__namePic { width: 20rem; } } /* -------------------------------------------- PHILOSOPHY -------------------------------------------- */ .p-aboutPhilosophy { color: #fff; } .p-aboutPhilosophy__topPicFrame { position: relative; z-index: 2; margin-right: -7.6923076923vw; } @media (width >= 1025px) { .p-aboutPhilosophy__topPicFrame { margin-right: calc(50% - 50vw); } } .p-aboutPhilosophy__topPic { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 720/420; overflow: hidden; border-radius: 1rem 0 0 1rem; } @media (width >= 1025px) { .p-aboutPhilosophy__topPic { height: 42rem; aspect-ratio: unset; } } .p-aboutPhilosophy__topPic::before { position: absolute; inset: 0; display: block; content: ""; background: #000; mix-blend-mode: multiply; opacity: 0.13; } .p-aboutPhilosophy__bgrame { position: relative; z-index: 1; padding-top: 9rem; padding-bottom: 64.1025641026vw; } @media (width >= 1025px) { .p-aboutPhilosophy__bgrame { padding-top: 24rem; padding-bottom: 33rem; } } .p-aboutPhilosophy__bgrame::before, .p-aboutPhilosophy__bgrame::after { position: absolute; inset: -7rem -7.6923076923vw 0; z-index: -1; content: ""; } @media (width >= 1025px) { .p-aboutPhilosophy__bgrame::before, .p-aboutPhilosophy__bgrame::after { inset: -10rem calc(50% - 50vw) 0; } } .p-aboutPhilosophy__bgrame::before { background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); } .p-aboutPhilosophy__bgrame::after { background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .p-aboutPhilosophy__bgrame::after { background-size: 10rem 10rem; } } .p-aboutPhilosophy__decoFrame { position: absolute; inset: 0 -7.6923076923vw; max-width: 160rem; margin: auto; pointer-events: none; } @media (width >= 1025px) { .p-aboutPhilosophy__decoFrame { inset: 0 calc(50% - 50vw); } } .p-aboutPhilosophy__decoItem { position: absolute; } .p-aboutPhilosophy__decoItem.--deco01 { bottom: 12.8205128205vw; left: -2.5641025641vw; width: 23.0769230769vw; } @media (width >= 1025px) { .p-aboutPhilosophy__decoItem.--deco01 { top: min(5vw, 8rem); right: min(6.875vw, 11rem); left: auto; width: min(15vw, 24rem); } } .p-aboutPhilosophy__decoItem.--deco02 { right: -7.6923076923vw; bottom: 28.2051282051vw; width: 28.2051282051vw; } @media (width >= 1025px) { .p-aboutPhilosophy__decoItem.--deco02 { right: auto; bottom: min(6.875vw, 11rem); left: min(3.75vw, 6rem); width: min(18.75vw, 30rem); } } .p-aboutPhilosophy__decoItem.--deco03 { right: 20.5128205128vw; bottom: -15.3846153846vw; width: 35.8974358974vw; } @media (width >= 1025px) { .p-aboutPhilosophy__decoItem.--deco03 { right: auto; bottom: max(-6.25vw, -10rem); left: min(22.5vw, 36rem); width: min(23.75vw, 38rem); } } .p-aboutPhilosophy__decoPic { overflow: clip; border-radius: 1rem; filter: blur(5px); will-change: filter; } .p-aboutPhilosophy__titleFrame { margin-bottom: 9rem; } @media (width >= 1025px) { .p-aboutPhilosophy__titleFrame { margin-bottom: 11rem; } } .p-aboutPhilosophy__layout { display: grid; gap: 6rem; } @media (width >= 1025px) { .p-aboutPhilosophy__layout { grid-template-columns: minmax(0, 1fr) 50%; gap: 8rem; } } .p-aboutPhilosophy__catchPic { width: 72%; max-width: 45rem; height: auto; aspect-ratio: 886/295; margin: 0 auto; } @media (width >= 1025px) { .p-aboutPhilosophy__catchPic { width: 100%; max-width: unset; translate: 0 -3.5rem; } } .p-aboutPhilosophy__subTitleFrame { margin-bottom: 3rem; } @media (width >= 1025px) { .p-aboutPhilosophy__subTitleFrame { margin-bottom: 5rem; } } .p-aboutPhilosophy__textFrame { display: grid; gap: 3rem; } @media (width >= 1025px) { .p-aboutPhilosophy__textFrame { gap: 4rem; } } .p-aboutPhilosophy__text { font-weight: 500; line-height: 1.8571428571; } @media (width >= 1025px) { .p-aboutPhilosophy__text { font-size: 1.4285714286em; } } /* -------------------------------------------- REASON -------------------------------------------- */ .p-aboutReason { padding-top: 43.5897435897vw; } @media (width >= 1025px) { .p-aboutReason { padding-top: 35rem; } } .p-aboutReason__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-aboutReason__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- SLIDE -------------------------------------------- */ .p-aboutReasonSlideX__list { display: flex; gap: 2.5rem; width: fit-content; } @media (width >= 1025px) { .p-aboutReasonSlideX__list { gap: 15rem; } } .p-aboutReasonSlideX__slide { width: 75vw; } @media (width >= 1025px) { .p-aboutReasonSlideX__slide { display: grid; grid-template-columns: 48% minmax(0, 1fr); gap: 7rem; align-items: center; width: min(72.5vw, 116rem); } } .p-aboutReasonSlideX__pic { width: 100%; height: auto; aspect-ratio: 1; overflow: clip; border-radius: 1rem; } .p-aboutReasonSlideX__contFrame { padding: 2rem 1.5rem 0; } @media (width >= 1025px) { .p-aboutReasonSlideX__contFrame { padding: 0; } } .p-aboutReasonSlideX__title { position: relative; display: flex; gap: 1.5rem; min-height: 7.5rem; margin-bottom: 1.5rem; font-weight: 600; color: #1630c6; } @media (width >= 1025px) { .p-aboutReasonSlideX__title { gap: 3rem; min-height: 16rem; margin-bottom: 5rem; } } .p-aboutReasonSlideX__titleNum { position: relative; font-family: "Montserrat", sans-serif; font-size: 2.5em; line-height: 1; } @media (width >= 1025px) { .p-aboutReasonSlideX__titleNum { font-size: 5em; } } .p-aboutReasonSlideX__titleNum::before { position: absolute; top: -0.8rem; right: 0; width: 1px; height: 10rem; content: ""; background-color: currentColor; rotate: 45deg; } @media (width >= 1025px) { .p-aboutReasonSlideX__titleNum::before { top: -1.5rem; height: 20rem; } } .p-aboutReasonSlideX__titleMain { padding-top: 3rem; font-size: 1.0714285714em; font-feature-settings: "palt"; line-height: 1.6666666667; } @media (width >= 1025px) { .p-aboutReasonSlideX__titleMain { padding-top: 6rem; font-size: 2em; } } @media (width >= 1280px) { .p-aboutReasonSlideX__titleMain { font-size: 2.1428571429em; } } .p-aboutReasonSlideX__text { font-size: 0.9285714286em; } @media (width >= 1025px) { .p-aboutReasonSlideX__text { font-size: 1.1428571429em; line-height: 1.8571428571; } } .p-aboutReasonSlideX__progress { position: relative; width: 100%; height: 1px; margin-top: 3rem; background-color: #d3d9e5; } @media (width >= 1025px) { .p-aboutReasonSlideX__progress { height: 2px; margin-top: 6rem; } } .p-aboutReasonSlideX__progressBar { position: absolute; top: 0; bottom: 0; left: 0; background-color: #1630c6; transition: width 0.1s; } /* -------------------------------------------- SERVICE -------------------------------------------- */ .p-aboutService { padding-top: 10rem; padding-bottom: 9rem; } @media (width >= 1025px) { .p-aboutService { padding-top: 15rem; padding-bottom: 15rem; } } .p-aboutService__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-aboutService__titleFrame { margin-bottom: 8rem; } } .p-aboutService__detailText { margin-bottom: 4rem; line-height: 1.8571428571; text-align: center; } @media (width >= 1025px) { .p-aboutService__detailText { margin-bottom: 6rem; font-size: 1.1428571429em; line-height: 2.25; } } /* -------------------------------------------- BUSINESS -------------------------------------------- */ .p-aboutServiceBiz { position: relative; display: grid; gap: 1.5rem; height: min-content; } @media (width >= 1025px) { .p-aboutServiceBiz { gap: 3rem; } } .p-aboutServiceBiz__item { position: sticky; top: 7rem; right: 0; left: 0; will-change: scale; } @media (width < 1025px) and (orientation: landscape) { .p-aboutServiceBiz__item { position: static; } } @media (width >= 1025px) { .p-aboutServiceBiz__item { top: 15rem; } } .p-aboutServiceBiz__anc { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3rem; padding: 2rem 2rem 4rem; overflow: clip; border-radius: 1rem; } @media (width >= 1025px) { .p-aboutServiceBiz__anc { flex-direction: row-reverse; gap: 4rem; padding: 4rem; } } @media (hover: hover) { .p-aboutServiceBiz__anc:hover { color: #fff; } .p-aboutServiceBiz__anc:hover::after { opacity: 0; } } .p-aboutServiceBiz__anc::before, .p-aboutServiceBiz__anc::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); transition: opacity 0.3s; } .p-aboutServiceBiz__anc::after { background: #fff; } @media (width >= 1025px) { .p-aboutServiceBiz__picFrame { flex-shrink: 0; width: 42.5%; } } .p-aboutServiceBiz__pic { width: 100%; height: auto; aspect-ratio: 580/360; overflow: clip; border-radius: 1rem; } .p-aboutServiceBiz__contFrame { display: flex; flex-direction: column; gap: 4rem; align-items: center; justify-content: center; } @media (width >= 1025px) { .p-aboutServiceBiz__contFrame { flex: 1; text-align: center; } } .p-aboutServiceBiz__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-aboutServiceBiz__text { font-size: 1.1428571429em; line-height: 2.5; } } /* -------------------------------------------- INFORMATION -------------------------------------------- */ .p-companyInfo { padding-top: 4.5rem; } @media (width >= 1025px) { .p-companyInfo { padding-top: 10rem; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-companyInfoList { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } @media (width >= 1025px) { .p-companyInfoList { gap: 7rem; } } .p-companyInfoList__item { padding: 5rem 2.5rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-companyInfoList__item { padding: 8rem; } .p-companyInfoList__item > * { max-width: 116rem; margin: 0 auto; } } .p-companyInfoList__titleFrame { margin-bottom: 4rem; } .p-companyInfoList__titleFrame.--bdb { padding-bottom: 4rem; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-companyInfoList__titleFrame.--mgbLgPC { margin-bottom: 10rem; } } .p-companyInfoList__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.3636363636; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-companyInfoList__title { font-size: 2.2857142857em; } } .p-companyInfoList__chartPicFrame { position: relative; } .p-companyInfoList__chartPicFrame:has(.p-companyInfoList__chartScrollFrame.is-act) .p-companyInfoList__chartGuideFrame { opacity: 0; } .p-companyInfoList__chartGuideWrapFrame { position: absolute; inset: 18rem 0; pointer-events: none; } @media (width >= 1025px) { .p-companyInfoList__chartGuideWrapFrame { display: none; } } .p-companyInfoList__chartGuideFrame { position: sticky; top: 50%; right: 0; left: 0; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; justify-content: center; width: fit-content; padding: 1rem; margin: auto; color: #fff; background: rgba(42, 47, 78, 0.7); border-radius: 0.5rem; translate: 0 -50%; transition: opacity 0.3s 0.2s; } .p-companyInfoList__chartGuideIcon { width: 3.8rem; height: 5rem; } .p-companyInfoList__chartGuideText { font-size: 0.7142857143em; font-weight: 500; line-height: 1; } @media (width < 1025px) { .p-companyInfoList__chartScrollFrame { padding-bottom: 1.5rem; overscroll-behavior: auto !important; overflow: auto; overscroll-behavior: none; scrollbar-color: #1630c6 #d3d9e5; } .p-companyInfoList__chartScrollFrame::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } .p-companyInfoList__chartScrollFrame::-webkit-scrollbar-track { background: #d3d9e5; border-radius: 99rem; } .p-companyInfoList__chartScrollFrame::-webkit-scrollbar-thumb { background: #1630c6; border-radius: 99rem; } } .p-companyInfoList__chartPic { width: auto; height: 117.2rem; aspect-ratio: 2320/3400; } @media (width >= 1025px) { .p-companyInfoList__chartPic { width: 100%; height: auto; } } /* -------------------------------------------- OFFICE -------------------------------------------- */ .p-companyInfoOffice { border-bottom: 1px solid #d3d9e5; } .p-companyInfoOffice__item { position: relative; padding: 2rem 0; border-top: 1px solid #d3d9e5; } @media (width < 1025px) { .p-companyInfoOffice__item.--sub { padding-left: 1.5rem; } } @media (width >= 1025px) { .p-companyInfoOffice__item { display: grid; grid-template-columns: 20rem minmax(0, 1fr) auto; padding: 3.5rem 3rem 3.5rem 3.5rem; } .p-companyInfoOffice__item.--sub { padding-top: 1.5rem; border-top: none; } .p-companyInfoOffice__item.--sub .p-companyInfoOffice__titleFrame { padding-left: 5rem; } } .p-companyInfoOffice__titleFrame { margin-bottom: 1.5rem; } @media (width < 1025px) { .p-companyInfoOffice__titleFrame { padding-right: 13rem; } } @media (width >= 1025px) { .p-companyInfoOffice__titleFrame { display: flex; align-items: center; margin-bottom: 0; } } .p-companyInfoOffice__title { font-weight: 600; line-height: 1.3; color: #1630c6; } @media (width >= 1025px) { .p-companyInfoOffice__title { font-size: 1.4285714286em; } } .p-companyInfoOffice__contFrame { line-height: 1.8571428571; } @media (width < 1025px) { .p-companyInfoOffice__contFrame { letter-spacing: 0; } } @media (width >= 1025px) { .p-companyInfoOffice__contFrame { padding: 0.5rem 3rem; font-size: 1.1428571429em; line-height: 1.625; border-left: 1px solid #d3d9e5; } } .p-companyInfoOffice__text + .p-companyInfoOffice__text { margin-top: 1rem; } .p-companyInfoOffice__btnFrame { position: absolute; top: 1.5rem; right: 0; } @media (width >= 1025px) { .p-companyInfoOffice__btnFrame { position: static; display: flex; align-items: center; } } .p-companyInfoOffice__btn { position: relative; z-index: 1; display: block; padding: 0.5rem 1.5rem 0.6rem; font-size: 0.8571428571em; line-height: 1.5; color: #fff; } @media (hover: hover) { .p-companyInfoOffice__btn:hover::after { scale: 1.1; } } @media (width >= 1025px) { .p-companyInfoOffice__btn { padding: 1.1rem 1.8rem 1.2rem; } } .p-companyInfoOffice__btn::before { display: inline-block; width: 0.9em; height: 1.2em; margin-right: 0.3em; content: ""; background-color: currentColor; clip-path: url("#map_01"); transform: translateZ(0); translate: 0 20%; will-change: transform; } .p-companyInfoOffice__btn::after { position: absolute; inset: 0; z-index: -1; content: ""; background-color: #1630c6; border-radius: 0.5rem; transition: scale 0.3s; } @media (width >= 1025px) { .p-companyInfoOffice__btn::after { border-radius: 1rem; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-contactList { padding-top: 7.5rem; } @media (width >= 1025px) { .p-contactList { padding-top: 10rem; } } .p-contactList__railwayFrame { padding: 7rem 0; } /* -------------------------------------------- DETAIL -------------------------------------------- */ .p-contactListDetail { display: grid; gap: 2.5rem; } @media (width >= 1025px) { .p-contactListDetail { gap: 7rem; } } .p-contactListDetail__item { padding: 5rem 2.5rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-contactListDetail__item { padding: 7rem; } .p-contactListDetail__item > * { max-width: 116rem; margin: 0 auto; } } .p-contactListDetail__titleFrame { padding-bottom: 4rem; margin-bottom: 4rem; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-contactListDetail__titleFrame { margin-bottom: 3rem; } } .p-contactListDetail__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.3636363636; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-contactListDetail__title { font-size: 2.2857142857em; line-height: 1.4375; } } .p-contactListDetail__textFrame { display: grid; gap: 2rem; margin-bottom: 4rem; } @media (width < 1025px) { .p-contactListDetail__textFrame { letter-spacing: 0; } } @media (width >= 1025px) { .p-contactListDetail__textFrame { gap: 3rem; margin-bottom: 5rem; text-align: center; } } .p-contactListDetail__textFrame:last-child { margin-bottom: 0; } .p-contactListDetail__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-contactListDetail__text { font-size: 1.1428571429em; line-height: 2; } } .p-contactListDetail__text.--strong { font-size: 1.1428571429em; font-weight: 600; text-align: center; } @media (width >= 1025px) { .p-contactListDetail__text.--strong { font-size: 1.4285714286em; } } .p-contactListDetail__downloadFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 2.5rem 2rem; margin-bottom: 1rem; background-color: #f6f7f9; border-radius: 0.6rem; } @media (width >= 1025px) { .p-contactListDetail__downloadFrame { grid-template-columns: 37% repeat(2, minmax(0, 1fr)); gap: 3rem; padding: 3rem 4rem; margin-bottom: 2rem; } } @media (width >= 1280px) { .p-contactListDetail__downloadFrame { padding: 3rem 6rem; } } @media (width >= 1025px) { .p-contactListDetail__downloadTitleFrame { display: flex; align-items: center; } } .p-contactListDetail__downloadTitle { font-weight: 600; line-height: 1.7857142857; text-align: center; } @media (width >= 1025px) { .p-contactListDetail__downloadTitle { font-size: 1.4285714286em; text-align: left; } } .p-contactListDetail__downloadBtnFrame { display: flex; justify-content: center; } .p-contactListDetail__methodFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } @media (width >= 1025px) { .p-contactListDetail__methodFrame:has(> *:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } .p-contactListDetail__methodItem { position: relative; padding: 2.5rem 2rem; background-color: #f6f7f9; border-radius: 0.6rem; } @media (width >= 1025px) { .p-contactListDetail__methodItem { padding: 3.5rem 4rem 4rem; } } @media (width >= 1280px) { .p-contactListDetail__methodItem { padding: 3.5rem 6rem 4rem; } } .p-contactListDetail__methodTitle { margin-bottom: 1rem; font-weight: 600; line-height: 1.7857142857; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-contactListDetail__methodTitle { margin-bottom: 1.5rem; font-size: 1.1428571429em; } } .p-contactListDetail__methodBtnFrame { display: flex; justify-content: center; } .p-contactListDetail__methodTelText { display: none; } @media (width >= 1025px) { .p-contactListDetail__methodTelText { display: flex; gap: 1rem; align-items: center; justify-content: center; font-family: "Montserrat", sans-serif; font-size: 2.7142857143em; font-weight: 600; line-height: 1.2368421053; } .p-contactListDetail__methodTelText::before { display: inline-block; width: 0.63em; height: 0.63em; content: ""; background-color: currentColor; clip-path: url("#tel_01"); transform: translateZ(0); will-change: transform; } .p-contactListDetail__methodTelText > span { font-family: "Noto Sans JP", sans-serif; font-size: 0.3684210526em; font-weight: 500; translate: 0 35%; } } .p-contactListDetail__methodSup { margin-top: 1.2rem; font-size: 0.8571428571em; line-height: 1.5; text-align: center; } @media (width >= 1025px) { .p-contactListDetail__methodSup { font-size: 0.9285714286em; } } .p-contactListDetail__methodSup.--sm { font-size: 0.7857142857em; } @media (width >= 1025px) { .p-contactListDetail__methodSup.--sm { font-size: 0.8571428571em; } } @media (width >= 1025px) { .p-contactListDetail__methodSup.--absolute { position: absolute; right: 0; left: 0; } } /* -------------------------------------------- NOTE -------------------------------------------- */ .p-contactNote { padding-top: 7.5rem; } @media (width >= 1025px) { .p-contactNote { padding-top: 10rem; } } .p-contactNote__frame { padding: 2.5rem 2rem; background-color: #fff; border-radius: 0.6rem; } @media (width >= 1025px) { .p-contactNote__frame { padding: 6rem; } } /* -------------------------------------------- DETAIL -------------------------------------------- */ @media (width >= 1025px) { .p-contactNoteDetail { max-width: 116rem; margin: 0 auto; } } .p-contactNoteDetail__titleFrame { margin-bottom: 2rem; } .p-contactNoteDetail__title { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 1.1428571429em; font-weight: 600; line-height: 1.3; color: #1630c6; } @media (width >= 1025px) { .p-contactNoteDetail__title { gap: 1.4rem; font-size: 1.4285714286em; } } .p-contactNoteDetail__title::before { display: block; flex-shrink: 0; width: 1.9rem; height: 1.7rem; content: ""; background-color: currentColor; clip-path: url("#attention_01"); transform: translateZ(0); translate: 0 10%; will-change: transform; } @media (width >= 1025px) { .p-contactNoteDetail__title::before { width: 2.6rem; height: 2.3rem; } } @media (width < 1025px) { .p-contactNoteDetail__contFrame { letter-spacing: 0; } } .p-contactNoteDetail.--modal { padding: 5rem 2rem 2.5rem; } @media (width < 1025px) { .p-contactNoteDetail.--modal { height: 100%; } } @media (width >= 1025px) { .p-contactNoteDetail.--modal { padding: 5rem; } } .p-contactNoteDetail.--modal .p-contactNoteDetail__inner { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 100rem; height: 100%; margin: 0 auto; } @media (width < 1025px) { .p-contactNoteDetail.--modal .p-contactNoteDetail__inner { grid-template-rows: auto 1fr auto auto; } } @media (width < 1025px) { .p-contactNoteDetail.--modal .p-contactNoteDetail__titleFrame { display: flex; justify-content: center; } } @media (width < 1025px) { .p-contactNoteDetail.--modal .p-contactNoteDetail__title { font-size: 1em; } } @media (width < 1025px) { .p-contactNoteDetail.--modal .p-contactNoteDetail__contFrame { padding-right: 1.5rem; overflow: auto; overscroll-behavior: none; scrollbar-color: #1630c6 #d3d9e5; } .p-contactNoteDetail.--modal .p-contactNoteDetail__contFrame::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } .p-contactNoteDetail.--modal .p-contactNoteDetail__contFrame::-webkit-scrollbar-track { background: #d3d9e5; border-radius: 99rem; } .p-contactNoteDetail.--modal .p-contactNoteDetail__contFrame::-webkit-scrollbar-thumb { background: #1630c6; border-radius: 99rem; } } @media (width >= 1025px) { .p-contactNoteDetail.--modal .p-contactNoteDetail__contFrame .c-listSquare { gap: 0.8rem; letter-spacing: 0; } .p-contactNoteDetail.--modal .p-contactNoteDetail__contFrame .c-listSquare__item { line-height: 2; } } .p-contactNoteDetail.--modal .p-contactNoteDetail__agreeFrame { margin-top: 2rem; } @media (width >= 1025px) { .p-contactNoteDetail.--modal .p-contactNoteDetail__agreeFrame { margin-top: 3rem; } } .p-contactNoteDetail.--modal .p-contactNoteDetail__agreeFrame:has(input:checked) + .p-contactNoteDetail__btnFrame > * { pointer-events: auto; opacity: 1; } .p-contactNoteDetail.--modal .p-contactNoteDetail__btnFrame { display: flex; flex-direction: column; align-items: center; margin-top: 2rem; } @media (width >= 1025px) { .p-contactNoteDetail.--modal .p-contactNoteDetail__btnFrame { margin-top: 3rem; } } .p-contactNoteDetail.--modal .p-contactNoteDetail__btnFrame > * { pointer-events: none; opacity: 0.8; transition: opacity 0.3s; } .p-contactQaListWrapper { padding: 0 0 7.5rem; } @media (width >= 1025px) { .p-contactQaListWrapper { padding: 0 0 15rem; } } .p-contactQaItem { background: #fff; border-radius: 1rem; } .p-contactQaItem__block .p-contactQaItem__inner { position: relative; display: flex; gap: 0 1rem; } @media (width >= 1025px) { .p-contactQaItem__block .p-contactQaItem__inner { gap: 0 1.8rem; } } .p-contactQaItem__block .p-contactQaItem__icon { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-family: "Montserrat", sans-serif; font-size: 0.8571428571em; font-weight: 600; line-height: 1; border-radius: 0.2rem; } @media (width >= 1025px) { .p-contactQaItem__block .p-contactQaItem__icon { width: 4rem; height: 4rem; font-size: 1.1428571429em; border-radius: 0.4rem; } } .p-contactQaItem__block .p-contactQaItem__text { flex: 1; margin: -0.3rem 0 0; font-size: 1em; line-height: 1.85; letter-spacing: 0.06em; } @media (width >= 1025px) { .p-contactQaItem__block .p-contactQaItem__text { margin: 0.3rem 0 0; font-size: 1.1428571429em; line-height: 2; } } .p-contactQaItem__block .p-contactQaItem__text a { text-decoration: underline; text-underline-offset: 0.25rem; } @media (width >= 1025px) { .p-contactQaItem__block .p-contactQaItem__text a { text-underline-offset: 0.5rem; } } @media (hover: hover) { .p-contactQaItem__block .p-contactQaItem__text a[target=_blank]:hover { text-decoration: none; } } .p-contactQaItem__block .p-contactQaItem__text a[target=_blank]::after { display: inline-block; content: ""; background-color: currentColor; clip-path: url("#window_01"); transform: translateZ(0); will-change: transform; } @media (width >= 1025px) { .p-contactQaItem__block .p-contactQaItem__text a[target=_blank]::after { width: 1.3rem; height: 1.3rem; margin: 0 0 0 0.5rem; } } .p-contactQaItem__block .p-contactQaItem__text span { font-size: 85.8%; color: #bcbcbc; } @media (width >= 1025px) { .p-contactQaItem__block .p-contactQaItem__text span { font-size: 81.25%; } } .p-contactQaItem__block.--question .p-contactQaItem__inner { padding: 1.5rem 4.5rem 1.5rem 1.5rem; } @media (width >= 1025px) { .p-contactQaItem__block.--question .p-contactQaItem__inner { padding: 2.5rem 10.5rem 2.5rem 3.5rem; } } .p-contactQaItem__block.--question .p-contactQaItem__icon { color: #fff; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); } .p-contactQaItem__block.--question .p-contactQaItem__text { font-weight: 600; } .p-contactQaItem__block.--question .p-contactQaItem__toggle { position: absolute; top: 2rem; right: 1.5rem; width: 1rem; height: 1rem; } @media (width >= 1025px) { .p-contactQaItem__block.--question .p-contactQaItem__toggle { top: 3.5rem; right: 3.5rem; width: 1.5rem; height: 1.5rem; } } .p-contactQaItem__block.--question .p-contactQaItem__toggle::before, .p-contactQaItem__block.--question .p-contactQaItem__toggle::after { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; content: ""; background: #1a30c6; border-radius: 999px; } @media (width >= 1025px) { .p-contactQaItem__block.--question .p-contactQaItem__toggle::before, .p-contactQaItem__block.--question .p-contactQaItem__toggle::after { height: 2px; } } .p-contactQaItem__block.--question .p-contactQaItem__toggle::after { transform: rotate(90deg); transition: transform 0.4s; } .p-contactQaItem__block.--question.is-act .p-contactQaItem__toggle::after { transform: rotate(180deg); } .p-contactQaItem__block.--answer { position: relative; display: none; } .p-contactQaItem__block.--answer::before { position: absolute; top: 0; left: 0; width: 100%; height: 1px; content: ""; background: #d3d9e5; } .p-contactQaItem__block.--answer .p-contactQaItem__inner { padding: 1.5rem; } @media (width >= 1025px) { .p-contactQaItem__block.--answer .p-contactQaItem__inner { padding: 2.5rem 3.5rem; } } .p-contactQaItem__block.--answer .p-contactQaItem__icon { color: #1630c6; background: #f0f1f5; } .p-contactQaItem + .p-contactQaItem { margin: 1rem 0 0; } @media (width >= 1025px) { .p-contactQaItem + .p-contactQaItem { margin: 2rem 0 0; } } .p-contactQaItem.--bg { background-color: #f6f7f9; } /* -------------------------------------------- BUSINESS -------------------------------------------- */ .p-contentBusiness__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-contentBusiness__titleFrame { margin-bottom: 8rem; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-contentBusinessList { display: grid; gap: 11rem; } @media (width >= 1025px) { .p-contentBusinessList { gap: 16rem; } } .p-contentBusinessList__item { padding: 0 2.5rem 2.5rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-contentBusinessList__item { padding: 0 6rem 6rem; } } .p-contentBusinessList__layout { display: flex; flex-direction: column-reverse; gap: 4rem; } @media (width >= 1025px) { .p-contentBusinessList__layout { display: grid; grid-template-columns: minmax(0, 1fr) 44.5%; } } @media (width >= 1025px) { .p-contentBusinessList__contFrame { padding-top: 8rem; padding-bottom: 4rem; padding-left: 3rem; } } @media (width >= 1280px) { .p-contentBusinessList__contFrame { padding-left: 6rem; } } .p-contentBusinessList__titleFrame { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-bottom: 5rem; text-align: center; } @media (width >= 1025px) { .p-contentBusinessList__titleFrame { align-items: flex-start; text-align: left; } } .p-contentBusinessList__titleLabel { padding: 0.5rem 1.5rem; font-family: "Montserrat", sans-serif; font-size: 0.8571428571em; font-weight: 500; line-height: 1; color: #aaadc1; background-color: #f6f7f9; border-radius: 999px; } @media (width >= 1025px) { .p-contentBusinessList__titleLabel { padding: 0.8rem 3rem; font-size: 1.2857142857em; } } .p-contentBusinessList__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.3636363636; color: #1630c6; } @media (width >= 1025px) { .p-contentBusinessList__title { font-size: 2.2857142857em; } } .p-contentBusinessList__catch { margin-bottom: 1.5rem; font-size: 1.4285714286em; font-weight: 600; line-height: 1.8; } @media (width >= 1025px) { .p-contentBusinessList__catch { font-size: 1.8571428571em; line-height: 1.9230769231; } } .p-contentBusinessList__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-contentBusinessList__text { font-size: 1.1428571429em; line-height: 2.5; } } .p-contentBusinessList__figPicFrame { display: flex; justify-content: center; margin-top: 2rem; } @media (width >= 1025px) { .p-contentBusinessList__figPicFrame { margin-top: 4rem; } } .p-contentBusinessList__figPic { width: 100%; max-width: 58rem; height: auto; } .p-contentBusinessList__figPic.--service02 { aspect-ratio: 1160/982; } .p-contentBusinessList__picFrame { padding: 0 1.5rem; margin-top: -6.25rem; } @media (width >= 1025px) { .p-contentBusinessList__picFrame { margin-top: -10rem; } } .p-contentBusinessList__pic { width: 100%; height: auto; aspect-ratio: 3/4; overflow: hidden; border-radius: 1rem; } .p-contentBusinessList__caseFrame { position: relative; display: flex; flex-direction: column; gap: 5rem; padding: 2rem; margin-top: 8rem; background-color: #f6f7f9; border-radius: 1rem; } @media (width >= 1025px) { .p-contentBusinessList__caseFrame { padding: 4rem 6rem 5rem; margin-top: 5rem; } } .p-contentBusinessList__caseTitle { position: absolute; bottom: 100%; left: 0; width: fit-content; padding: 1rem 1.5rem; font-weight: 600; line-height: 1; color: #fff; background-color: #1630c6; border-radius: 0.6rem 0.6rem 0 0; } @media (width >= 1025px) { .p-contentBusinessList__caseTitle { padding: 1.5rem 3rem; font-size: 1.4285714286em; } } .p-contentBusinessList__caseHideFrame { display: none; } .p-contentBusinessList__caseBtn { order: 3; margin: -1rem auto 3rem; } @media (width >= 1025px) { .p-contentBusinessList__caseBtn { margin-bottom: 0; } } /* -------------------------------------------- CASE -------------------------------------------- */ .p-contentBusinessCase { display: grid; gap: 5rem; } @media (width >= 1025px) { .p-contentBusinessCase { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4rem 2rem; } } .p-contentBusinessCase__anc { display: block; } @media (hover: hover) { .p-contentBusinessCase__anc:hover .p-contentBusinessCase__pic::before { opacity: 1; } .p-contentBusinessCase__anc:hover .p-contentBusinessCase__title { color: #1630c6; } } .p-contentBusinessCase__pic { position: relative; aspect-ratio: 520/706; padding: 1.8rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-contentBusinessCase__pic { aspect-ratio: 275/367; padding: 1.4rem 1.8rem; } } .p-contentBusinessCase__pic::before { position: absolute; inset: 0; content: ""; border: 4px solid #1630c6; border-radius: inherit; opacity: 0; transition: opacity 0.3s; } .p-contentBusinessCase__title { margin-top: 1.5rem; font-size: 1.0714285714em; font-weight: 600; line-height: 1.4; transition: color 0.3s; } @media (width >= 1025px) { .p-contentBusinessCase__title { margin-top: 2rem; font-size: 1.2142857143em; } } .p-contentBusinessCase__text { margin-top: 1.2rem; font-size: 0.9285714286em; line-height: 2; } @media (width >= 1025px) { .p-contentBusinessCase__text { font-size: 1.0714285714em; line-height: 1.6666666667; } } .p-contentBusinessCase__sup { margin-top: 0.8rem; font-size: 0.7857142857em; line-height: 1.3; } @media (width >= 1025px) { .p-contentBusinessCase__sup { margin-top: 1.2rem; font-size: 0.8571428571em; } } @media (width < 1025px) { .p-contentBusinessCase.--init .p-contentBusinessCase__item:nth-child(3), .p-contentBusinessCase.--init .p-contentBusinessCase__item:nth-child(4) { display: none; } } @media (width >= 1025px) { .p-contentBusinessCase:not(.--init) .p-contentBusinessCase__item:nth-child(1), .p-contentBusinessCase:not(.--init) .p-contentBusinessCase__item:nth-child(2) { display: none; } } /* -------------------------------------------- MOVIE -------------------------------------------- */ .p-contentMovie { padding-bottom: 10rem; } @media (width >= 1025px) { .p-contentMovie { padding-bottom: 14rem; } } .p-contentMovie__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-contentMovie__titleFrame { margin-bottom: 6rem; } } .p-contentMovie__slideFrame { max-width: 100rem; margin: 0 auto; } /* -------------------------------------------- SLIDE -------------------------------------------- */ .p-contentMovieSlide { position: relative; } .p-contentMovieSlide__track { overflow: visible !important; } @media (width >= 1025px) { .p-contentMovieSlide__slide.is-current .p-contentMovieSlide__videoWrapFrame { transform-origin: center center !important; } .p-contentMovieSlide__slide.is-current + * .p-contentMovieSlide__videoWrapFrame { transform-origin: left center; } .p-contentMovieSlide__slide:not(.is-current) .p-contentMovieSlide__videoBtn { pointer-events: none; } .p-contentMovieSlide__slide:not(.is-current) .p-contentMovieSlide__videoWrapFrame { scale: 0.8; } .p-contentMovieSlide__slide:not(.is-current) .p-contentMovieSlide__text { opacity: 0; } } .p-contentMovieSlide__videoWrapFrame { position: relative; z-index: 1; overflow: hidden; border-radius: 1rem; transform-origin: right center; transition: scale 0.3s; } .p-contentMovieSlide__videoBtn { position: absolute; inset: 0; z-index: 2; display: block; } @media (hover: hover) { .p-contentMovieSlide__videoBtn:hover .p-contentMovieSlide__videoPic { scale: 1.05; } } .p-contentMovieSlide__videoBtn::before { position: absolute; inset: 0; z-index: 2; display: block; content: ""; background: #0b102f; mix-blend-mode: multiply; opacity: 0.1; } .p-contentMovieSlide__videoPic { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; transition: scale 0.3s; } .p-contentMovieSlide__playFrame { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; justify-content: center; color: #fff; } @media (width >= 1025px) { .p-contentMovieSlide__playFrame { gap: 1.5rem; } } .p-contentMovieSlide__playIconFrame { position: relative; display: flex; align-items: center; justify-content: center; width: 6rem; height: auto; aspect-ratio: 1; } @media (width >= 1025px) { .p-contentMovieSlide__playIconFrame { width: 12rem; } } .p-contentMovieSlide__playIconFrame::before { position: absolute; inset: 0; display: block; content: ""; border-color: currentColor; border-style: solid; border-width: 1px 0; border-radius: 50%; transform: translateZ(0); rotate: -45deg; } .p-contentMovieSlide__playIcon { width: 25%; height: auto; translate: 15% 0; } .p-contentMovieSlide__playText { font-family: "Montserrat", sans-serif; font-size: 0.8571428571em; line-height: 1; } @media (width >= 1025px) { .p-contentMovieSlide__playText { font-size: 1.1428571429em; } } .p-contentMovieSlide__videoFrame { width: 100%; height: auto; aspect-ratio: 16/9; padding-top: 0; } .p-contentMovieSlide__slide:has(.p-contentMovieSlide__videoBtn) .p-contentMovieSlide__videoFrame { opacity: 0; } .p-contentMovieSlide__text { margin-top: 1.5rem; font-size: 1.0714285714em; font-weight: 600; line-height: 1.4; transition: opacity 0.3s; } @media (width >= 1025px) { .p-contentMovieSlide__text { padding-right: 14rem; margin-top: 2.5rem; font-size: 1.2857142857em; } } .p-contentMovieSlide__progress { position: relative; width: 100%; height: 1px; margin-top: 4rem; background-color: #d3d9e5; } @media (width >= 1025px) { .p-contentMovieSlide__progress { height: 2px; margin-top: 6.5rem; } } .p-contentMovieSlide__progressBar { position: absolute; top: 0; bottom: 0; left: 0; background-color: #1630c6; transition: width 0.1s; } .p-contentMovieSlide__arrows { display: flex; gap: 0.5rem; justify-content: center; margin-top: 4rem; } @media (width >= 1025px) { .p-contentMovieSlide__arrows { position: absolute; right: 0; bottom: 3rem; gap: 1rem; margin: 0; } } .p-contentMovieSlide__arrow { position: relative; display: block; width: 5rem; height: 5rem; color: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .p-contentMovieSlide__arrow { width: 6rem; height: 6rem; } } @media (hover: hover) { .p-contentMovieSlide__arrow:hover::before { scale: 1.1; } } .p-contentMovieSlide__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; transition: 0.3s; transition-property: scale; } .p-contentMovieSlide__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: -45deg; translate: -25% 0; } @media (width >= 1025px) { .p-contentMovieSlide__arrow::after { width: 1rem; height: 1rem; border-width: 2px; } } .p-contentMovieSlide__arrow.--prev::after { rotate: 135deg; translate: 25% 0; } /* -------------------------------------------- ABOUT -------------------------------------------- */ .p-homeAbout { position: relative; z-index: 2; padding: 64.1025641026vw 0; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); } @media (width >= 1025px) { .p-homeAbout { padding: 30rem 0; } } .p-homeAbout::before { position: absolute; inset: 0; z-index: 1; content: ""; background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .p-homeAbout::before { background-size: 10rem 10rem; } } .p-homeAbout > * { position: relative; z-index: 3; } .p-homeAbout__bgCanvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: 0.5; } .p-homeAbout__decoFrame { position: absolute; inset: 0; max-width: 160rem; margin: auto; pointer-events: none; } .p-homeAbout__decoItem { position: absolute; } .p-homeAbout__decoItem.--deco01 { top: -7.6923076923vw; left: 20.5128205128vw; width: 35.8974358974vw; } @media (width >= 1025px) { .p-homeAbout__decoItem.--deco01 { top: max(-8.75vw, -14rem); left: min(21.25vw, 34rem); width: min(23.75vw, 38rem); } } .p-homeAbout__decoItem.--deco02 { top: 16.6666666667vw; right: -3.8461538462vw; width: 23.0769230769vw; } @media (width >= 1025px) { .p-homeAbout__decoItem.--deco02 { top: min(9.375vw, 15rem); right: min(11.25vw, 18rem); width: min(15vw, 24rem); } } .p-homeAbout__decoItem.--deco03 { top: 28.2051282051vw; left: -7.6923076923vw; width: 28.2051282051vw; } @media (width >= 1025px) { .p-homeAbout__decoItem.--deco03 { top: min(15vw, 24rem); left: min(2.5vw, 4rem); width: min(18.75vw, 30rem); } } .p-homeAbout__decoItem.--deco04 { right: -7.6923076923vw; bottom: 28.2051282051vw; width: 28.2051282051vw; } @media (width >= 1025px) { .p-homeAbout__decoItem.--deco04 { right: min(2.5vw, 4rem); bottom: min(15vw, 24rem); width: min(18.75vw, 30rem); } } .p-homeAbout__decoItem.--deco05 { bottom: 16.6666666667vw; left: -3.8461538462vw; width: 23.0769230769vw; } @media (width >= 1025px) { .p-homeAbout__decoItem.--deco05 { bottom: min(9.375vw, 15rem); left: min(11.25vw, 18rem); width: min(15vw, 24rem); } } .p-homeAbout__decoItem.--deco06 { right: 20.5128205128vw; bottom: -7.6923076923vw; width: 35.8974358974vw; } @media (width >= 1025px) { .p-homeAbout__decoItem.--deco06 { right: min(21.25vw, 34rem); bottom: max(-8.75vw, -14rem); width: min(23.75vw, 38rem); } } .p-homeAbout__decoPic { overflow: clip; border-radius: 1rem; filter: blur(5px); will-change: filter; } .p-homeAbout__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-homeAbout__titleFrame { margin-bottom: 6rem; } } .p-homeAbout__catchFrame { display: grid; gap: 1.5rem; font-feature-settings: "palt"; color: #fff; letter-spacing: 0.1em; } @media (width >= 1025px) { .p-homeAbout__catchFrame { gap: 2rem; } } .p-homeAbout__catchText { font-size: 1.2142857143em; font-weight: 600; line-height: 1.8823529412; text-align: center; } @media (width >= 1025px) { .p-homeAbout__catchText { font-size: 1.8571428571em; } } .p-homeAbout__btnFrame { display: flex; justify-content: center; margin-top: 4rem; } @media (width >= 1025px) { .p-homeAbout__btnFrame { margin-top: 6rem; } } /* -------------------------------------------- COMPANY -------------------------------------------- */ .p-homeCompany { padding: 10rem 0; } @media (width >= 1025px) { .p-homeCompany { padding: 20rem 0; } } @media (width >= 1025px) { .p-homeCompany__layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8rem; } } .p-homeCompany__mainFrame { display: flex; flex-direction: column; justify-content: space-between; } .p-homeCompany__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-homeCompany__titleFrame { margin-bottom: 5rem; } } html.is-bg .p-homeCompany__titleFrame .c-titleDot__main { color: #fff; transition: 0.3s; } html.is-bg .p-homeCompany__titleFrame .c-titleDot__main::after { background: #fff; } .p-homeCompany__picFrame { display: none; } @media (width >= 1025px) { .p-homeCompany__picFrame { position: relative; display: block; margin-left: 2rem; } .p-homeCompany__picFrame.is-organization .p-homeCompany__pic.--organization { opacity: 1; } .p-homeCompany__picFrame.is-offices .p-homeCompany__pic.--offices { opacity: 1; } } @media (width >= 1280px) { .p-homeCompany__picFrame { min-height: 80rem; } } .p-homeCompany__pic { position: absolute; inset: 0; overflow: hidden; border-radius: 1rem; } .p-homeCompany__pic.--organization, .p-homeCompany__pic.--offices { opacity: 0; transition: opacity 0.3s; } /* -------------------------------------------- LINK -------------------------------------------- */ .p-homeCompanyLink__item { border-bottom: 1px solid #d3d9e5; } .p-homeCompanyLink__item:first-child { border-top: 1px solid #d3d9e5; } .p-homeCompanyLink__anc { display: flex; gap: 2rem; align-items: center; padding: 1.5rem 0; } @media (hover: hover) { .p-homeCompanyLink__anc:hover { color: #1630c6; } .p-homeCompanyLink__anc:hover .p-homeCompanyLink__pic > img { scale: 1.1; } .p-homeCompanyLink__anc:hover .p-homeCompanyLink__arrow { color: #fff; } .p-homeCompanyLink__anc:hover .p-homeCompanyLink__arrow::before { opacity: 1; scale: 1.1; } } .p-homeCompanyLink__pic { flex-shrink: 0; width: 13rem; aspect-ratio: 1; overflow: hidden; border-radius: 1rem; } @media (width >= 1025px) { .p-homeCompanyLink__pic { width: 14rem; } } .p-homeCompanyLink__pic > img { transition: scale 0.3s; } .p-homeCompanyLink__title { flex: 1; font-size: 1.1428571429em; font-weight: 600; line-height: 1.3; } @media (width >= 768px) { .p-homeCompanyLink__title { font-size: 1.3571428571em; } } @media (width >= 1025px) { .p-homeCompanyLink__title { font-size: 1.5714285714em; } } .p-homeCompanyLink__arrow { position: relative; z-index: 1; display: block; flex-shrink: 0; width: 5rem; height: 5rem; margin: auto; color: #1630c6; background: #f0f1f5; border-radius: 0.5rem; } .p-homeCompanyLink__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: 0.3s; transition-property: opacity, scale; } .p-homeCompanyLink__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: -25% 0; } /* -------------------------------------------- MV -------------------------------------------- */ .p-homeMv__slideFrame { position: relative; padding: 0 5.1282051282vw; } @media (width >= 768px) { .p-homeMv__slideFrame { padding: 0 4rem; } } .p-homeMv__slideCatchPic { position: absolute; top: 8%; left: 2.5641025641vw; width: 87.1794871795vw; pointer-events: none; } @media (width >= 768px) { .p-homeMv__slideCatchPic { top: 2rem; left: 0; width: 54.0625vw; max-width: 90rem; } } .p-homeMv__btnFrame { position: relative; z-index: 2; margin-top: -5.5rem; overflow: clip; } @media (width >= 768px) { .p-homeMv__btnFrame { margin-top: -7.5rem; } } .p-homeMv__btnInner { padding: 0 7.6923076923vw; } @media (width >= 768px) { .p-homeMv__btnInner { padding: 0 7.8125vw; } } @media (width >= 1025px) { .p-homeMv__btnInner { padding: 0 4.375vw; } } .p-homeMv__btnList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2rem; } @media (width >= 768px) { .p-homeMv__btnList { gap: 1rem; } } @media (width >= 1025px) { .p-homeMv__btnList { gap: 2.2rem; } } @media (width >= 1025px) { .p-homeMv__btnItem { position: relative; } .p-homeMv__btnItem::before, .p-homeMv__btnItem::after { position: absolute; top: 5rem; right: calc(100% - 1px); width: 2.7rem; height: 2.7rem; content: ""; background: url("../img/common/deco_mv_radius_01.svg") center/100% 100% no-repeat; } .p-homeMv__btnItem::after { right: auto; left: calc(100% - 1px); scale: -1 1; } } @media (width >= 1280px) { .p-homeMv__btnItem::before, .p-homeMv__btnItem::after { top: 4.9rem; } } @media (width < 1025px) { .p-homeMv__btnItem.is-active .p-homeMv__btnArrow { color: #fff; } .p-homeMv__btnItem.is-active .p-homeMv__btnArrow::before { opacity: 1; } } .p-homeMv__btnItem.is-active .p-homeMv__btnAnc { translate: 0 0; } .p-homeMv__btnItem.is-active .p-homeMv__btnProgress { visibility: visible; } .p-homeMv__btnAnc { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 1rem 0.5rem 3.1rem; background-color: #f6f7f9; border-radius: 0.6rem 0.6rem 0 0; translate: 0 3rem; transition: translate 0.3s; } @media (width >= 768px) { .p-homeMv__btnAnc { padding: 2rem 1rem 3.1rem; } } @media (width >= 1025px) { .p-homeMv__btnAnc { padding: 3rem 2rem 1.5rem; translate: 0 5rem; } } @media (width >= 1025px) and (hover: hover) { .p-homeMv__btnAnc:hover { color: #1630c6; } } .p-homeMv__btnProgress { position: absolute; top: 0; left: 0; visibility: hidden; width: 0%; height: 2px; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; } @media (width >= 768px) { .p-homeMv__btnProgress { height: 4px; } } .p-homeMv__btnText { margin: auto; font-size: 0.8571428571em; font-weight: 600; line-height: 1.4166666667; text-align: center; } @media (width >= 768px) { .p-homeMv__btnText { font-size: 1em; } } @media (width >= 1025px) { .p-homeMv__btnText { font-size: 1.2857142857em; } } .p-homeMv__btnArrow { position: relative; display: block; width: 2.5rem; height: 2.5rem; margin-top: 0.5rem; color: #1630c6; background-color: #fff; border-radius: 0.4rem; } @media (width >= 768px) { .p-homeMv__btnArrow { width: 3.3rem; height: 3.3rem; margin-top: 1.5rem; } } @media (width >= 1025px) { .p-homeMv__btnArrow { color: #fff; } } .p-homeMv__btnArrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: 0.3s; transition-property: opacity, scale; } @media (width >= 1025px) { .p-homeMv__btnArrow::before { opacity: 1; } } .p-homeMv__btnArrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.6rem; height: 0.6rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: -45deg; translate: -25% 0; } /* -------------------------------------------- SLIDE -------------------------------------------- */ .p-homeMvSlide { position: relative; } .p-homeMvSlide__track { overflow: visible; } .p-homeMvSlide__slide { position: relative; } .p-homeMvSlide__pickupAnc { position: absolute; right: 1rem; bottom: 7rem; z-index: 2; display: block; width: 14.5rem; overflow: clip; border-radius: 0.6rem; } @media (width >= 768px) { .p-homeMvSlide__pickupAnc { right: 3rem; bottom: 20%; width: 16rem; } } @media (width >= 1025px) { .p-homeMvSlide__pickupAnc { width: 22rem; } } @media (hover: hover) { .p-homeMvSlide__pickupAnc:hover { color: #1630c6; } .p-homeMvSlide__pickupAnc:hover .p-homeMvSlide__pickupPic > img { scale: 1.1; } } .p-homeMvSlide__pickupLabel { padding: 0.9rem; font-family: "Montserrat", sans-serif; font-size: 0.7857142857em; font-weight: 500; line-height: 1; color: #fff; text-align: center; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); } @media (width >= 1025px) { .p-homeMvSlide__pickupLabel { padding: 1.5rem; font-size: 1em; } } .p-homeMvSlide__pickupContFrame { padding: 0.5rem 0.5rem 1rem; background-color: #fff; } @media (width >= 1025px) { .p-homeMvSlide__pickupContFrame { padding: 1rem 1rem 1.5rem; } } .p-homeMvSlide__pickupPic { width: 100%; aspect-ratio: 1; overflow: clip; } .p-homeMvSlide__pickupPic > img { transition: scale 0.3s; } .p-homeMvSlide__pickupTitle { display: flex; align-items: center; height: 2lh; padding: 0 0.5rem; margin-top: 0.5rem; font-size: 0.7142857143em; font-weight: 600; line-height: 1.5; } @media (width >= 1025px) { .p-homeMvSlide__pickupTitle { padding: 0 1rem; margin-top: 1rem; font-size: 1em; } } .p-homeMvSlide__pickupTitle > span { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .p-homeSubSlide::before { position: absolute; inset: 0; z-index: 1; content: ""; background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: color-dodge; opacity: 0.3; } @media (width >= 1025px) { .p-homeSubSlide::before { background-size: 10rem 10rem; } } .p-homeSubSlide::after { position: absolute; inset: 0; z-index: 1; content: ""; background-color: #000; border-radius: 1rem; opacity: 0.15; } .p-homeSubSlide__track { overflow: visible; } .p-homeSubSlide__slide { position: relative; z-index: 1; background-color: #fff; } .p-homeSubSlide__slide.--slide03Num01 .p-homeSubSlide__canvas { z-index: -1; } .p-homeSubSlide__slide.--slide03Num02 .p-homeSubSlide__canvas { z-index: -1; } .p-homeSubSlide__pic { width: 100%; height: calc(100svh - 10rem); min-height: 50rem; overflow: hidden; border-radius: 1rem; } @media (width >= 1025px) { .p-homeSubSlide__pic { height: calc(100svh - 16rem); } } .p-homeSubSlide__pic.--bg { position: absolute; inset: 0; z-index: -2; } .p-homeSubSlide__canvas { position: absolute; inset: 50%; width: auto !important; height: 100% !important; aspect-ratio: 1600/720; translate: -50% -50%; } @media (width >= 1025px) { .p-homeSubSlide__canvas { inset: 0 -4rem; width: 100vw !important; width: 100svw !important; aspect-ratio: unset; translate: unset; } } /* -------------------------------------------- NEWS -------------------------------------------- */ .p-homeNews { padding-top: 7rem; padding-bottom: 15rem; } @media (width >= 1025px) { .p-homeNews { padding-top: 10rem; padding-bottom: 25rem; } } .p-homeNews__headerFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-homeNews__headerFrame { margin-bottom: 5rem; } } /* -------------------------------------------- TAB CONTENT -------------------------------------------- */ .p-homeNewsTabCont__item { display: none; } .p-homeNewsTabCont__item.is-act { display: block; } /* -------------------------------------------- RECRUIT -------------------------------------------- */ .p-homeRecruit { position: relative; z-index: 1; padding-top: 12rem; padding-bottom: 5rem; } @media (width >= 1025px) { .p-homeRecruit { padding-top: 26rem; } } .p-homeRecruit__bgFrame { position: absolute; top: 0; right: 0; left: 0; z-index: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 30rem; overflow: hidden; } @media (width >= 1025px) { .p-homeRecruit__bgFrame { height: 50rem; } } .p-homeRecruit__bgFrame::before, .p-homeRecruit__bgFrame::after { position: absolute; inset: 0; z-index: 1; content: ""; } .p-homeRecruit__bgFrame::before { background: #0b102f; mix-blend-mode: multiply; opacity: 0.45; } .p-homeRecruit__bgFrame::after { background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.3; } @media (width >= 1025px) { .p-homeRecruit__bgFrame::after { background-size: 10rem 10rem; } } .p-homeRecruit__bgPic { width: 100%; height: 100%; } @media (width < 1025px) { .p-homeRecruit__bgPic.--left > img { object-position: 10% center; } } .p-homeRecruit__inner { padding: 0 7.6923076923vw; } @media (width >= 1025px) { .p-homeRecruit__inner { padding: 0 2.5vw; } } .p-homeRecruit__headerFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-homeRecruit__headerFrame { max-width: 140rem; margin-right: auto; margin-bottom: 5rem; margin-left: auto; } } /* -------------------------------------------- SERVICE -------------------------------------------- */ .p-homeService { position: relative; z-index: 1; padding: 15rem 0 10rem; } @media (width >= 1025px) { .p-homeService { padding: 24rem 0 20rem; } } @media (hover: hover) { .p-homeService.is-advertising .p-homeService__bgFrame, .p-homeService.is-transit .p-homeService__bgFrame, .p-homeService.is-contents .p-homeService__bgFrame { opacity: 1; } .p-homeService.is-advertising .c-titleDot, .p-homeService.is-transit .c-titleDot, .p-homeService.is-contents .c-titleDot { color: #fff; } .p-homeService.is-advertising .c-titleDot__main, .p-homeService.is-transit .c-titleDot__main, .p-homeService.is-contents .c-titleDot__main { color: #fff; } .p-homeService.is-advertising .c-titleDot__main::after, .p-homeService.is-transit .c-titleDot__main::after, .p-homeService.is-contents .c-titleDot__main::after { background: #fff; } .p-homeService.is-advertising .p-homeService__bgPic[data-type=advertising] { opacity: 1; } .p-homeService.is-transit .p-homeService__bgPic[data-type=transit] { opacity: 1; } .p-homeService.is-contents .p-homeService__bgPic[data-type=contents] { opacity: 1; } } .p-homeService__bgFrame { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.3s; } .p-homeService__bgFrame::before { position: absolute; inset: 0; z-index: 1; content: ""; background-color: rgba(11, 16, 47, 0.45); mix-blend-mode: multiply; } .p-homeService__bgPic { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; } .p-homeService__inner { padding: 0 7.6923076923vw; } @media (width >= 1025px) { .p-homeService__inner { padding: 0 2.5vw; } } .p-homeService__titleFrame { margin-bottom: 4.5rem; } @media (width >= 1025px) { .p-homeService__titleFrame { margin-bottom: 5rem; } } .p-homeService__bnrFrame { display: grid; gap: 1rem; max-width: 44rem; margin: 5rem auto 0; } @media (width >= 1025px) { .p-homeService__bnrFrame { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 116rem; margin: auto; margin-top: 4rem; } } .p-homeService__bnrAnc { position: relative; display: block; overflow: hidden; border-radius: 1rem; } @media (hover: hover) { .p-homeService__bnrAnc:hover .p-homeService__bnrPic > img { scale: 1.05; } } .p-homeService__bnrPic { width: 100%; aspect-ratio: 660/160; } @media (width >= 1025px) { .p-homeService__bnrPic { aspect-ratio: 575/120; } } .p-homeService__bnrPic > img { transition: scale 0.3s; } .p-homeService__bnrArrow { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background-color: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .p-homeService__bnrArrow { width: 3.5rem; height: 3.5rem; } } .p-homeService__bnrArrow::before { display: block; width: 0.6rem; height: 0.6rem; content: ""; border-right: 1px solid #1630c6; border-bottom: 1px solid #1630c6; rotate: -45deg; translate: -25% 0; } @media (width >= 1025px) { .p-homeService__bnrArrow::before { width: 0.8rem; height: 0.8rem; border-width: 2px; } } /* -------------------------------------------- LINK -------------------------------------------- */ .p-homeServiceLink { display: grid; gap: 1rem; } @media (width >= 1025px) { .p-homeServiceLink { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .p-homeServiceLink__anc { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 7rem 1.5rem 1.5rem; background-color: rgba(255, 255, 255, 0.95); border-radius: 1rem; transition: 0.3s; } @media (width >= 1025px) { .p-homeServiceLink__anc { height: 100%; padding: 12rem 3rem 10rem; } } @media (hover: hover) { .p-homeServiceLink__anc:hover { color: #fff; background-color: rgba(255, 255, 255, 0); } .p-homeServiceLink__anc:hover::before { opacity: 0.9; } } .p-homeServiceLink__anc::before { position: absolute; inset: 0; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); opacity: 0; transition: opacity 0.3s; } .p-homeServiceLink__anc > * { position: relative; z-index: 1; } .p-homeServiceLink__titleFrame { margin-bottom: 2rem; } @media (width >= 1025px) { .p-homeServiceLink__titleFrame { margin-bottom: 3.5rem; } } .p-homeServiceLink__text { font-weight: 500; font-feature-settings: "palt"; line-height: 1.8571428571; text-align: center; letter-spacing: 0.05em; } @media (width >= 1025px) { .p-homeServiceLink__text { font-size: 1.1428571429em; } } @media (width >= 1280px) { .p-homeServiceLink__text { font-size: 1.2857142857em; } } .p-homeServiceLink__arrow { display: flex; align-items: center; align-self: flex-end; justify-content: center; width: 4.5rem; height: 4.5rem; margin-top: 3rem; color: #fff; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 0.4rem; } @media (width >= 1025px) { .p-homeServiceLink__arrow { display: none; } } .p-homeServiceLink__arrowIcon { width: 1rem; height: 1rem; } /* -------------------------------------------- WORKS -------------------------------------------- */ .p-homeWorks { position: relative; z-index: 2; padding: 10rem 0; } @media (width >= 1025px) { .p-homeWorks { padding: 20rem 0; } } .p-homeWorks > * { position: relative; z-index: 2; } .p-homeWorks__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-homeWorks__titleFrame { margin-bottom: 5rem; } } html.is-bg .p-homeWorks__titleFrame .c-titleDot__main { color: #fff; transition: 0.3s; } html.is-bg .p-homeWorks__titleFrame .c-titleDot__main::after { background: #fff; } .p-homeWorks__tabBtnFrame { margin-bottom: 5rem; } @media (width >= 1025px) { .p-homeWorks__tabBtnFrame { margin-bottom: 6rem; } } .p-homeWorks__contItem { display: none; } .p-homeWorks__contItem.is-act { display: block; } .p-homeWorks__btnFrame { display: flex; justify-content: center; margin-top: 5rem; color: #2a2f4e; } @media (width >= 1025px) { .p-homeWorks__btnFrame { margin-top: 6rem; } } .p-homeWorks__laboFrame { margin-top: 8rem; } @media (width >= 1025px) { .p-homeWorks__laboFrame { margin-top: 10rem; } } .p-homeWorks__laboAnc { position: relative; display: block; padding: 2rem 2rem 3.5rem; overflow: hidden; color: #2a2f4e; background: linear-gradient(to right, #e5e9f2 0%, #d0dbef 100%); border-radius: 1rem; } @media (width >= 1025px) { .p-homeWorks__laboAnc { display: flex; gap: 4rem; align-items: center; max-width: 116rem; padding: 2rem; margin: 0 auto; } } @media (hover: hover) { .p-homeWorks__laboAnc:hover .p-homeWorks__laboPic > img { scale: 1.05; } } .p-homeWorks__laboPicFrame { padding: 2.2rem 3rem; background: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-homeWorks__laboPicFrame { flex-shrink: 0; width: 38rem; padding: 3rem 4rem; } } .p-homeWorks__laboPic { width: 100%; max-width: 30rem; height: auto; aspect-ratio: 122/32; margin: 0 auto; } .p-homeWorks__laboPic > img { transition: scale 0.3s; } .p-homeWorks__laboContFrame { margin-top: 2.5rem; text-align: center; } @media (width >= 1025px) { .p-homeWorks__laboContFrame { flex: 1; margin-top: 0; text-align: left; } } .p-homeWorks__laboTitle { font-size: 1.4285714286em; font-weight: 600; line-height: 1.1; } @media (width >= 1025px) { .p-homeWorks__laboTitle { font-size: 2.1428571429em; } } .p-homeWorks__laboText { margin-top: 1.5rem; font-weight: 500; } @media (width >= 1025px) { .p-homeWorks__laboText { margin-top: 2.5rem; font-size: 1.2857142857em; } } .p-homeWorks__laboArrow { position: absolute; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background-color: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .p-homeWorks__laboArrow { width: 3.5rem; height: 3.5rem; } } .p-homeWorks__laboArrow::before { display: block; width: 0.6rem; height: 0.6rem; content: ""; border-right: 1px solid #1630c6; border-bottom: 1px solid #1630c6; rotate: -45deg; translate: -25% 0; } @media (width >= 1025px) { .p-homeWorks__laboArrow::before { width: 0.8rem; height: 0.8rem; border-width: 2px; } } /* -------------------------------------------- SERVICE -------------------------------------------- */ .p-marketingService { padding-top: 10rem; } @media (width >= 1025px) { .p-marketingService { padding-top: 14rem; } } .p-marketingService__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-marketingService__titleFrame { margin-bottom: 8rem; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-marketingServiceList { display: grid; gap: 23rem; } .p-marketingServiceList__item { padding: 0 2.5rem 2.5rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-marketingServiceList__item { padding: 0 6rem 6rem; } } .p-marketingServiceList__topPicFrame { margin-top: -19rem; margin-left: calc(50% - 50vw); } @media (width >= 1025px) { .p-marketingServiceList__topPicFrame { padding-right: 6rem; margin-top: -13.5rem; } } .p-marketingServiceList__topPic { width: 100%; height: auto; aspect-ratio: 680/420; overflow: hidden; border-radius: 0 1rem 1rem 0; } @media (width >= 1025px) { .p-marketingServiceList__topPic { height: 50rem; aspect-ratio: unset; } } .p-marketingServiceList__layout { display: grid; gap: 4rem; margin-top: 3rem; } @media (width >= 1025px) { .p-marketingServiceList__layout { grid-template-columns: 33rem minmax(0, 1fr); padding: 0 6rem; margin-top: 6rem; } } .p-marketingServiceList__titleFrame { display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; } @media (width >= 1025px) { .p-marketingServiceList__titleFrame { align-items: flex-start; text-align: left; } } .p-marketingServiceList__titleLabel { padding: 0.5rem 1.5rem; font-family: "Montserrat", sans-serif; font-size: 0.8571428571em; font-weight: 500; line-height: 1; color: #aaadc1; background-color: #f6f7f9; border-radius: 999px; } @media (width >= 1025px) { .p-marketingServiceList__titleLabel { padding: 0.8rem 3rem; font-size: 1.2857142857em; } } .p-marketingServiceList__title { font-size: 1.7857142857em; font-weight: 600; line-height: 1.6; color: #1630c6; } @media (width >= 1025px) { .p-marketingServiceList__title { font-size: 2.2857142857em; } } @media (width >= 1025px) { .p-marketingServiceList__contFrame { padding-top: 5rem; } } .p-marketingServiceList__catch { font-size: 1.2857142857em; font-weight: 600; line-height: 1.9444444444; } @media (width >= 1025px) { .p-marketingServiceList__catch { font-size: 1.8571428571em; } } .p-marketingServiceList__text { margin-top: 1.5rem; line-height: 1.8571428571; } @media (width >= 1025px) { .p-marketingServiceList__text { margin-top: 2rem; font-size: 1.1428571429em; line-height: 2.5; } } .p-marketingServiceList__secFrame { margin-top: 5rem; } .p-marketingServiceList__secTitleFrame { margin-bottom: 1.5rem; } @media (width >= 1025px) { .p-marketingServiceList__secTitleFrame { margin-bottom: 3.5rem; } } .p-marketingServiceList__requestList { display: grid; gap: 0.5rem; } @media (width >= 1280px) { .p-marketingServiceList__requestList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem; } } .p-marketingServiceList__requestItem { display: flex; align-items: center; justify-content: center; padding: 1.2rem; font-weight: 600; line-height: 1.2857142857; text-align: center; background-color: #f6f7f9; border-radius: 0.4rem; } @media (width >= 1025px) { .p-marketingServiceList__requestItem { padding: 2.3rem; font-size: 1.1428571429em; } } .p-marketingServiceList__caseFrame { position: relative; margin-top: 5rem; } .p-marketingServiceList__caseHideFrame { position: relative; height: 30rem; margin-top: 5rem; overflow: hidden; } .p-marketingServiceList__caseHideFrame::before { position: absolute; inset: 0; display: block; pointer-events: none; content: ""; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 95%, rgb(255, 255, 255) 100%); transition: opacity 0.3s; } .p-marketingServiceList__caseHideFrame.is-act::before { opacity: 0; } .p-marketingServiceList__caseBtn { position: absolute; right: 0; bottom: -1rem; left: 0; z-index: 2; margin: auto; } /* -------------------------------------------- RESULT -------------------------------------------- */ .p-marketingServiceResult { display: grid; gap: 4rem; margin-top: 3.5rem; } @media (width >= 1025px) { .p-marketingServiceResult { margin-top: 4rem; } } @media (width >= 1440px) { .p-marketingServiceResult { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } } .p-marketingServiceResult__item { padding: 0 2rem 2rem; background-color: #fff; border: 1px solid #d3def5; border-radius: 0.4rem; } @media (width >= 1025px) { .p-marketingServiceResult__item { padding: 0 3rem 3.5rem; } } .p-marketingServiceResult__iconFrame { width: 10.2rem; height: auto; aspect-ratio: 1; margin: -2.5rem auto 1.5rem; background-color: #f6f7f9; border-radius: 50%; } @media (width >= 1025px) { .p-marketingServiceResult__iconFrame { width: 13rem; margin: -3rem auto 2rem; } } .p-marketingServiceResult__icon { width: 100%; height: auto; fill: #1630c6; } .p-marketingServiceResult__title { display: flex; flex-direction: column; gap: 1rem; align-items: center; } .p-marketingServiceResult__titleMain { font-size: 1.2857142857em; font-weight: 600; line-height: 1.1; } @media (width >= 1025px) { .p-marketingServiceResult__titleMain { font-size: 1.5714285714em; } } .p-marketingServiceResult__titleSup { font-size: 0.8571428571em; line-height: 1.1; color: #a0a1a6; } @media (width >= 1025px) { .p-marketingServiceResult__titleSup { font-size: 0.9285714286em; } } .p-marketingServiceResult__text { margin-top: 1rem; font-weight: 600; line-height: 1; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-marketingServiceResult__text { margin-top: 1.5rem; font-size: 1.4285714286em; } } .p-marketingServiceResult__text strong { background-image: linear-gradient(transparent 60%, #f0f98f 60%); background-repeat: no-repeat; } .p-marketingServiceResult__text span { font-family: "Montserrat", sans-serif; font-size: 2.6428571429em; font-weight: 700; } @media (width >= 1025px) { .p-marketingServiceResult__text span { font-size: 2.5em; } } .p-marketingServiceResult__sup { margin-top: 1rem; font-weight: 600; text-align: center; } @media (width >= 1440px) { .p-marketingServiceResult__sup { margin-top: 1.5rem; } } @media (width >= 1440px) { .p-marketingServiceResult.--mono { grid-template-columns: minmax(0, 1fr); } .p-marketingServiceResult.--mono .p-marketingServiceResult__item { display: flex; gap: 2rem; align-items: center; padding: 4rem 5rem; } .p-marketingServiceResult.--mono .p-marketingServiceResult__iconFrame { flex-shrink: 0; margin: 0; } .p-marketingServiceResult.--mono .p-marketingServiceResult__contFrame { flex: 1; } .p-marketingServiceResult.--mono .p-marketingServiceResult__titleFrame { display: flex; gap: 2rem; align-items: center; } .p-marketingServiceResult.--mono .p-marketingServiceResult__title { align-items: flex-start; } .p-marketingServiceResult.--mono .p-marketingServiceResult__text { margin-top: 0; } .p-marketingServiceResult.--mono .p-marketingServiceResult__sup { text-align: left; } } /* -------------------------------------------- CASE -------------------------------------------- */ .p-marketingServiceCase { display: grid; gap: 5rem; } .p-marketingServiceCase__tabLabel { width: fit-content; padding: 1rem 1.5rem; font-weight: 600; line-height: 1; color: #fff; background-color: #1630c6; border-radius: 0.6rem 0.6rem 0 0; } @media (width >= 1025px) { .p-marketingServiceCase__tabLabel { padding: 1.5rem 3rem; font-size: 1.4285714286em; } } .p-marketingServiceCase__frame { padding: 2rem; background-color: #f6f7f9; border-radius: 0 1rem 1rem; } @media (width >= 1025px) { .p-marketingServiceCase__frame { padding: 8rem 6rem; } } .p-marketingServiceCase__layout { display: flex; flex-direction: column-reverse; gap: 3rem; } @media (width >= 1025px) { .p-marketingServiceCase__layout { display: grid; grid-template-columns: 50% minmax(0, 1fr); gap: 6rem; } } .p-marketingServiceCase__pic { width: 100%; height: auto; aspect-ratio: 2/3; overflow: hidden; border-radius: 1rem; } .p-marketingServiceCase__titleFrame { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 4rem; } .p-marketingServiceCase__titleInfoFrame { display: flex; flex-direction: column; gap: 0.5rem; } @media (width >= 1025px) { .p-marketingServiceCase__titleInfoFrame { flex-direction: row; gap: 2.5rem; align-items: center; } } .p-marketingServiceCase__titleInfoName { font-size: 1.1428571429em; font-weight: 600; line-height: 1.5625; } @media (width >= 1025px) { .p-marketingServiceCase__titleInfoName { font-size: 1.4285714286em; } } .p-marketingServiceCase__titleInfoLabel { width: fit-content; padding: 0.5rem; font-size: 0.8571428571em; line-height: 1; background-color: #fff; } @media (width >= 1025px) { .p-marketingServiceCase__titleInfoLabel { padding: 0.8rem 1rem; font-size: 1em; } } .p-marketingServiceCase__title { font-size: 1.4285714286em; font-weight: 600; line-height: 1.5; } @media (width >= 1025px) { .p-marketingServiceCase__title { font-size: 2.1428571429em; } } .p-marketingServiceCase__secFrame + * { margin-top: 4rem; } .p-marketingServiceCase__secTitleFrame { margin-bottom: 1.5rem; } .p-marketingServiceCase__secCatch { margin-bottom: 1rem; font-size: 1.0714285714em; font-weight: 600; line-height: 1.6666666667; } @media (width >= 1025px) { .p-marketingServiceCase__secCatch { font-size: 1.2857142857em; } } .p-marketingServiceCase__secText { line-height: 1.8571428571; } @media (width >= 1025px) { .p-marketingServiceCase__secText { font-size: 1.1428571429em; line-height: 2.25; } } .p-marketingServiceCase__personLayout { display: flex; flex-direction: column; gap: 1.5rem; padding: 2rem; margin-top: 4rem; background-color: #fff; border-radius: 0.8rem; } @media (width >= 1025px) { .p-marketingServiceCase__personLayout { flex-direction: row; gap: 3rem; align-items: center; } } .p-marketingServiceCase__personIconFrame { width: 6rem; height: auto; aspect-ratio: 1; margin: auto; overflow: hidden; background: #f6f7f9; border-radius: 50%; } @media (width >= 1025px) { .p-marketingServiceCase__personIconFrame { flex-shrink: 0; width: 9rem; } } .p-marketingServiceCase__personIcon { fill: #1630c6; } .p-marketingServiceCase__personContFrame { line-height: 1.5; text-align: center; } @media (width >= 1025px) { .p-marketingServiceCase__personContFrame { flex: 1; text-align: left; } } .p-marketingServiceCase__personDept { margin-bottom: 0.8rem; } @media (width >= 1025px) { .p-marketingServiceCase__personDept { margin-bottom: 1.5rem; } } .p-marketingServiceCase__personText { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; } @media (width >= 1025px) { .p-marketingServiceCase__personText { align-items: stretch; } } .p-marketingServiceCase__personName { font-size: 1.2857142857em; font-weight: 600; line-height: 1; } /* -------------------------------------------- STRENGTHS -------------------------------------------- */ .p-marketingStrengths { padding-top: 12rem; } @media (width >= 1025px) { .p-marketingStrengths { padding-top: 15rem; } } .p-marketingStrengths__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-marketingStrengths__titleFrame { margin-bottom: 19rem; } } /* -------------------------------------------- ABOUT -------------------------------------------- */ .p-guideAbout { padding-top: 4.5rem; } @media (width >= 1025px) { .p-guideAbout { padding-top: 10rem; } } @media (width < 1025px) { .p-guideAbout__inner { padding-right: 5.1282051282vw; padding-left: 5.1282051282vw; } } .p-guideAbout__desc { line-height: 1.8571428571; } @media (width >= 1025px) { .p-guideAbout__desc { font-size: 1.1428571429em; line-height: 2.25; text-align: center; } } .p-guideAbout__dlFrame { padding: 1.5rem 1.5rem 2.5rem; margin-top: 5rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-guideAbout__dlFrame { display: flex; flex-direction: row-reverse; gap: 6rem; padding: 6rem 12rem; margin-top: 10rem; } } @media (width >= 1025px) { .p-guideAbout__dlPicFrame { width: 48rem; } } .p-guideAbout__dlPic { width: 100%; height: auto; aspect-ratio: 960/730; overflow: hidden; border-radius: 1rem; } .p-guideAbout__dlContFrame { padding: 2rem 1rem 0; } @media (width >= 1025px) { .p-guideAbout__dlContFrame { flex: 1; padding: 0; } } .p-guideAbout__dlTitle { font-size: 1.4285714286em; font-weight: 600; line-height: 1.35; text-align: center; } @media (width >= 1025px) { .p-guideAbout__dlTitle { font-size: 2em; text-align: left; } } .p-guideAbout__dlTitleSup { margin-top: 0.5rem; line-height: 1; text-align: center; } @media (width >= 1025px) { .p-guideAbout__dlTitleSup { margin-top: 1rem; text-align: left; } } .p-guideAbout__dlText { margin-top: 2rem; line-height: 1.8571428571; } @media (width >= 1025px) { .p-guideAbout__dlText { margin-top: 3rem; font-size: 1.1428571429em; line-height: 2; } } .p-guideAbout__dlBtnFrame { display: flex; flex-direction: column; gap: 2rem; align-items: center; margin-top: 3rem; } @media (width >= 1025px) { .p-guideAbout__dlBtnFrame { gap: 2.5rem; align-items: flex-start; margin-top: 4rem; } } /* -------------------------------------------- SERVICE -------------------------------------------- */ .p-guideService { padding-top: 10rem; } /* -------------------------------------------- LIST -------------------------------------------- */ .p-guideServiceList { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10rem; } @media (width >= 1025px) { .p-guideServiceList { gap: 13rem; } } .p-guideServiceList__headFrame { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; } @media (width >= 1025px) { .p-guideServiceList__headFrame { margin-bottom: 4rem; } } .p-guideServiceList__headTitle { font-size: 1.5714285714em; font-weight: 600; line-height: 1.4545454545; color: #1630c6; } @media (width < 1025px) { .p-guideServiceList__headTitle { letter-spacing: 0; } } @media (width >= 768px) { .p-guideServiceList__headTitle { font-size: 2.1428571429em; } } @media (width >= 1025px) { .p-guideServiceList__headTitle { font-size: 2.8571428571em; } } .p-guideServiceList__supFrame { display: flex; justify-content: center; margin-top: 3rem; } @media (width < 1025px) { .p-guideServiceList__supFrame > .c-btnArrow { width: 35rem; } } @media (width >= 1025px) { .p-guideServiceList__supFrame { justify-content: flex-end; margin-top: 6rem; } } /* -------------------------------------------- DETAIL -------------------------------------------- */ .p-guideServiceDetail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; } @media (width >= 1025px) { .p-guideServiceDetail { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .p-guideServiceDetail * { min-width: 0; } .p-guideServiceDetail__item { display: grid; grid-template-rows: auto 1fr; padding: 1.5rem 1.5rem 2rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-guideServiceDetail__item { grid-column: span 2; padding: 3rem 3rem 4rem; } .p-guideServiceDetail__item.--half { grid-column: span 3; } } .p-guideServiceDetail__pic { width: 100%; height: auto; aspect-ratio: 640/335; overflow: hidden; border-radius: 1rem; } .p-guideServiceDetail__contFrame { display: flex; flex-direction: column; padding: 2rem 1rem 0; } @media (width >= 1025px) { .p-guideServiceDetail__contFrame { padding: 3rem 2rem 0; } } .p-guideServiceDetail__title { font-size: 1.4285714286em; font-weight: 600; line-height: 1.35; text-align: center; } @media (width >= 1025px) { .p-guideServiceDetail__title { font-size: 1.5714285714em; } } .p-guideServiceDetail__titleSup { margin-top: 0.5rem; line-height: 1; text-align: center; } @media (width >= 1025px) { .p-guideServiceDetail__titleSup { margin-top: 1rem; } } .p-guideServiceDetail__text { margin-top: 2rem; margin-bottom: auto; line-height: 1.8571428571; } @media (width >= 1025px) { .p-guideServiceDetail__text { margin-top: 3rem; font-size: 1.1428571429em; line-height: 2; } } .p-guideServiceDetail__btnFrame { display: flex; justify-content: center; margin-top: 2rem; } @media (width >= 1025px) { .p-guideServiceDetail__btnFrame { margin-top: 3rem; } } /* -------------------------------------------- ABOUT -------------------------------------------- */ .p-oscAbout { position: relative; padding-top: 9rem; padding-bottom: 7.5rem; } @media (width >= 1025px) { .p-oscAbout { padding-top: 11rem; padding-bottom: 14rem; text-align: center; } } .p-oscAbout::before { position: absolute; top: 4rem; left: 50%; z-index: -1; display: block; width: 140vw; aspect-ratio: 1095/550; content: ""; background: url("../img/common/bg_particle_01.png.webp") center bottom/100% auto no-repeat; mix-blend-mode: screen; transform: translateX(-50%); } @media (width >= 1025px) { .p-oscAbout::before { top: 50%; width: 160rem; aspect-ratio: 3200/2246; background-image: url("../img/common/bg_particle_pc_01.png.webp"); transform: translate(-50%, -50%); } } .p-oscAbout__catch { font-size: 1.7857142857em; font-weight: 600; } @media (width >= 1025px) { .p-oscAbout__catch { font-size: 2.8571428571em; line-height: 2; } } .p-oscAbout__textFrame { display: grid; gap: 3rem; margin-top: 4rem; } @media (width >= 1025px) { .p-oscAbout__textFrame { gap: 4rem; } } .p-oscAbout__text { font-weight: 500; line-height: 1.8571428571; } @media (width >= 1025px) { .p-oscAbout__text { font-size: 1.1428571429em; line-height: 2.25; } } /* -------------------------------------------- EVENT -------------------------------------------- */ .p-oscEvent { padding-top: 7.5rem; padding-bottom: 7.5rem; background-color: #fff; } @media (width >= 1025px) { .p-oscEvent { padding-top: 9rem; padding-bottom: 11rem; } } .p-oscEvent__inner { width: 100%; padding-right: 5.1282051282vw; padding-left: 5.1282051282vw; margin-right: auto; margin-left: auto; } @media (width >= 1025px) { .p-oscEvent__inner { max-width: calc(147rem + 8.125vw); padding-right: 4.0625vw; padding-left: 4.0625vw; } } .p-oscEvent__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-oscEvent__titleFrame { margin-bottom: 10rem; } } /* -------------------------------------------- SPACE -------------------------------------------- */ @media (width < 1025px) { .p-oscEventSpace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; } .p-oscEventSpace__mapFrame { padding: 0 1rem; } .p-oscEventSpace__mapLogoFrame { display: flex; gap: 4rem; align-items: center; justify-content: center; margin-top: 2.5rem; } .p-oscEventSpace__mapLogoPic.--osc { width: 100%; max-width: 25rem; height: auto; aspect-ratio: 25/3; margin: auto; } .p-oscEventSpace__mapLogoPic.--south, .p-oscEventSpace__mapLogoPic.--north { width: 100%; max-width: 13rem; height: auto; aspect-ratio: 150/19; } .p-oscEventSpace__mapLogoPic.--south { max-width: 13.5rem; aspect-ratio: 60/7; } .p-oscEventSpace__mapNote { width: 100%; max-width: 34rem; padding: 0.6rem; margin-top: 2rem; text-align: center; background-color: #f6f7f9; border-radius: 999px; } .p-oscEventSpace__mapPicFrame { position: relative; margin-top: 1.5rem; } .p-oscEventSpace__mapPic { width: 100%; height: auto; aspect-ratio: 400/365; } .p-oscEventSpace__mapNavAnc { position: absolute; display: block; width: 7.6%; height: auto; aspect-ratio: 1; } .p-oscEventSpace__mapNavNum, .p-oscEventSpace__titleNum { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: "Montserrat", sans-serif; font-size: 1.0714285714em; font-weight: 500; line-height: 1; color: #fff; background-color: #00416f; } .p-oscEventSpace__mapNavNum.--colorDgry, .p-oscEventSpace__titleNum.--colorDgry { background-color: #585656; } .p-oscEventSpace__mapNavNum.--colorGry, .p-oscEventSpace__titleNum.--colorGry { background-color: #b5b6b6; } .p-oscEventSpace__mapNavNum.--colorYel, .p-oscEventSpace__titleNum.--colorYel { background-color: #f4cd00; } .p-oscEventSpace__contFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } .p-oscEventSpace__contItem { background-color: #f6f7f9; border-radius: 1rem; } .p-oscEventSpace__titleFrame { position: relative; padding: 1.8rem 6.5rem; } .p-oscEventSpace__titleNum { position: absolute; top: 1.8rem; left: 2.5rem; width: 2.5rem; height: 2.5rem; } .p-oscEventSpace__titleLogoPic { width: 100%; max-width: 10.5rem; height: auto; } .p-oscEventSpace__titleLogoPic.--osc { aspect-ratio: 25/3; } .p-oscEventSpace__titleLogoPic.--north { aspect-ratio: 150/19; } .p-oscEventSpace__titleLogoPic.--south { aspect-ratio: 60/7; } .p-oscEventSpace__title { margin-top: 0.5rem; font-size: 1.1428571429em; font-weight: 600; line-height: 1.1; } .p-oscEventSpace__title ruby { ruby-position: over; } .p-oscEventSpace__title ruby > rt { font-size: 0.4285714286em; } .p-oscEventSpace__titleIcon { position: absolute; top: 0; right: 2.5rem; bottom: 0; width: 1.1rem; height: 1px; margin: auto; } .p-oscEventSpace__titleIcon::before, .p-oscEventSpace__titleIcon::after { position: absolute; inset: 0; display: block; content: ""; background-color: #1630c6; transition: 0.3s; } .p-oscEventSpace__titleIcon::after { rotate: 90deg; } .is-act .p-oscEventSpace__titleIcon::before { opacity: 0; } .is-act .p-oscEventSpace__titleIcon::after { rotate: 0deg; } .p-oscEventSpace__detailFrame { display: none; } .p-oscEventSpace__detailAccInner { padding: 0 2.5rem 2.5rem; } .p-oscEventSpace__detailPic { width: 100%; height: auto; aspect-ratio: 600/312; overflow: hidden; border-radius: 1rem; } .p-oscEventSpace__detailCatch { margin-top: 2rem; font-size: 1.1428571429em; line-height: 1.90625; } .p-oscEventSpace__detailText { margin-top: 2rem; line-height: 1.8571428571; } .p-oscEventSpace__detailNote { margin-top: 1rem; } .p-oscEventSpace__detailBtnFrame { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-top: 2.5rem; } } @media (width >= 1025px) { .p-oscEventSpace { display: grid; grid-template-columns: 64rem minmax(0, 1fr); } .p-oscEventSpace.is-space01 .p-oscEventSpace__mapNavBtn.--space01 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space01 .p-oscEventSpace__mapNavBtn.--space01 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space01 .p-oscEventSpace__contItem:has(#space01) { pointer-events: auto; opacity: 1; } .p-oscEventSpace.is-space02 .p-oscEventSpace__mapNavBtn.--space02 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space02 .p-oscEventSpace__mapNavBtn.--space02 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space02 .p-oscEventSpace__contItem:has(#space02) { pointer-events: auto; opacity: 1; } .p-oscEventSpace.is-space03 .p-oscEventSpace__mapNavBtn.--space03 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space03 .p-oscEventSpace__mapNavBtn.--space03 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space03 .p-oscEventSpace__contItem:has(#space03) { pointer-events: auto; opacity: 1; } .p-oscEventSpace.is-space04 .p-oscEventSpace__mapNavBtn.--space04 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space04 .p-oscEventSpace__mapNavBtn.--space04 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space04 .p-oscEventSpace__contItem:has(#space04) { pointer-events: auto; opacity: 1; } .p-oscEventSpace.is-space05 .p-oscEventSpace__mapNavBtn.--space05 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space05 .p-oscEventSpace__mapNavBtn.--space05 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space05 .p-oscEventSpace__contItem:has(#space05) { pointer-events: auto; opacity: 1; } .p-oscEventSpace.is-space06 .p-oscEventSpace__mapNavBtn.--space06 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space06 .p-oscEventSpace__mapNavBtn.--space06 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space06 .p-oscEventSpace__contItem:has(#space06) { pointer-events: auto; opacity: 1; } .p-oscEventSpace.is-space07 .p-oscEventSpace__mapNavBtn.--space07 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space07 .p-oscEventSpace__mapNavBtn.--space07 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space07 .p-oscEventSpace__contItem:has(#space07) { pointer-events: auto; opacity: 1; } .p-oscEventSpace.is-space08 .p-oscEventSpace__mapNavBtn.--space08 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space08 .p-oscEventSpace__mapNavBtn.--space08 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space08 .p-oscEventSpace__contItem:has(#space08) { pointer-events: auto; opacity: 1; } .p-oscEventSpace.is-space09 .p-oscEventSpace__mapNavBtn.--space09 .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace.is-space09 .p-oscEventSpace__mapNavBtn.--space09 .p-oscEventSpace__mapNavText::before { opacity: 1; } .p-oscEventSpace.is-space09 .p-oscEventSpace__contItem:has(#space09) { pointer-events: auto; opacity: 1; } .p-oscEventSpace__mapFrame { display: flex; flex-direction: column; grid-column: 2; justify-content: center; padding: 3rem 7rem 5rem; } } @media (width >= 1025px) and (width < 1280px) { .p-oscEventSpace__mapFrame { padding: 3rem 6rem 5rem 4rem; } } @media (width >= 1025px) { .p-oscEventSpace__mapNote { margin-bottom: 3rem; font-size: 1.1428571429em; text-align: center; } .p-oscEventSpace__mapLogoFrame { display: flex; gap: 10rem; align-items: center; justify-content: center; margin-top: 5rem; } .p-oscEventSpace__mapLogoPic.--osc { width: 100%; max-width: 35rem; height: auto; aspect-ratio: 25/3; margin: 0 auto; } .p-oscEventSpace__mapLogoPic.--south, .p-oscEventSpace__mapLogoPic.--north { width: 100%; max-width: 25rem; height: auto; aspect-ratio: 150/19; } .p-oscEventSpace__mapLogoPic.--south { max-width: 25.5rem; aspect-ratio: 60/7; } .p-oscEventSpace__mapPicFrame { position: relative; margin-top: 3rem; } .p-oscEventSpace__mapPic { width: 100%; height: auto; aspect-ratio: 666/607; } .p-oscEventSpace__mapNavBtn { position: absolute; z-index: 1; display: flex; width: 7%; height: auto; aspect-ratio: 1; } .p-oscEventSpace__mapNavNum, .p-oscEventSpace__titleNum { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; aspect-ratio: 1; font-family: "Montserrat", sans-serif; font-size: 1.8571428571em; font-weight: 500; line-height: 1; color: #fff; background-color: #00416f; } } @media (width >= 1025px) and (width >= 1025px) { .p-oscEventSpace__mapNavNum, .p-oscEventSpace__titleNum { font-size: 1.4285714286em; } } @media (width >= 1025px) and (width >= 1440px) { .p-oscEventSpace__mapNavNum, .p-oscEventSpace__titleNum { font-size: 1.8571428571em; } } @media (width >= 1025px) { .p-oscEventSpace__mapNavNum.--colorDgry, .p-oscEventSpace__titleNum.--colorDgry { background-color: #585656; } .p-oscEventSpace__mapNavNum.--colorGry, .p-oscEventSpace__titleNum.--colorGry { background-color: #b5b6b6; } .p-oscEventSpace__mapNavNum.--colorYel, .p-oscEventSpace__titleNum.--colorYel { background-color: #f4cd00; } .p-oscEventSpace__mapNavNum::before, .p-oscEventSpace__mapNavText::before { position: absolute; inset: 0; content: ""; border: 0.3rem solid #1630c6; opacity: 0; transition: opacity 0.3s; } .p-oscEventSpace__mapNavNum::before { border-right: 0; } .p-oscEventSpace__mapNavText { position: absolute; top: 0; bottom: 0; left: calc(100% - 1px); z-index: -1; display: flex; align-items: center; padding: 0.5rem 1rem; font-size: 0.875vw; font-weight: 500; line-height: 100%; color: #707070; white-space: nowrap; background-color: rgba(247, 247, 247, 0.8); } .p-oscEventSpace__mapNavText ruby { ruby-position: over; } .p-oscEventSpace__mapNavText ruby > rt { font-size: 57%; } .p-oscEventSpace__mapNavText > span > span { font-size: 86%; } .p-oscEventSpace__mapNavText::before { border-left: 0; } .p-oscEventSpace__contFrame { position: relative; display: grid; grid-row: 1; background-color: #f6f7f9; border-radius: 1rem; } .p-oscEventSpace__contItem { grid-area: 1/1; padding: 6rem; pointer-events: none; opacity: 0; transition: opacity 0.3s; } } @media (width >= 1025px) and (width < 1280px) { .p-oscEventSpace__contItem { padding: 4rem; } } @media (width >= 1025px) { .p-oscEventSpace__titleFrame { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; } .p-oscEventSpace__titleNum { width: 4rem; height: 4rem; margin-bottom: 2rem; font-size: 1.4285714286em; } .p-oscEventSpace__titleLogoPic { order: 2; width: 100%; max-width: 16.5rem; height: auto; margin-top: 1.5rem; } .p-oscEventSpace__titleLogoPic.--osc { aspect-ratio: 25/3; } .p-oscEventSpace__titleLogoPic.--north { aspect-ratio: 150/19; } .p-oscEventSpace__titleLogoPic.--south { aspect-ratio: 60/7; } .p-oscEventSpace__title { font-size: 2.1428571429em; font-weight: 600; line-height: 1.1; } .p-oscEventSpace__title ruby { ruby-position: over; } .p-oscEventSpace__title ruby > rt { font-size: 40%; } .p-oscEventSpace__titleIcon { display: none; } .p-oscEventSpace__detailFrame { display: block !important; } .p-oscEventSpace__detailAccInner { display: contents; } .p-oscEventSpace__detailPic { width: 100%; height: auto; aspect-ratio: 600/312; overflow: hidden; border-radius: 1rem; } .p-oscEventSpace__detailCatch { margin-top: 4rem; font-size: 1.7142857143em; line-height: 1.5833333333; } .p-oscEventSpace__detailText { margin-top: 2rem; font-size: 1.1428571429em; line-height: 2; } .p-oscEventSpace__detailNote { margin-top: 2rem; } .p-oscEventSpace__detailBtnFrame { display: flex; gap: 2rem; justify-content: center; margin-top: 4rem; } .p-oscEventSpace__detailBtnFrame > .c-btnArrow { flex-shrink: 0; width: calc(50% - 1rem); } } .p-oscEventSpace__mapNavAnc.--space01, .p-oscEventSpace__mapNavBtn.--space01 { right: 8.5%; bottom: 8%; } .p-oscEventSpace__mapNavAnc.--space02, .p-oscEventSpace__mapNavBtn.--space02 { right: 38%; bottom: 0%; } .p-oscEventSpace__mapNavAnc.--space03, .p-oscEventSpace__mapNavBtn.--space03 { top: 30%; right: 49%; } .p-oscEventSpace__mapNavAnc.--space04, .p-oscEventSpace__mapNavBtn.--space04 { top: 83%; left: 16%; } .p-oscEventSpace__mapNavAnc.--space05, .p-oscEventSpace__mapNavBtn.--space05 { top: 71%; left: 1.5%; } .p-oscEventSpace__mapNavAnc.--space06, .p-oscEventSpace__mapNavBtn.--space06 { top: 71.3%; right: 5%; } .p-oscEventSpace__mapNavAnc.--space07, .p-oscEventSpace__mapNavBtn.--space07 { top: 31.5%; right: 0%; } .p-oscEventSpace__mapNavAnc.--space08, .p-oscEventSpace__mapNavBtn.--space08 { top: 20.8%; right: 0%; } .p-oscEventSpace__mapNavAnc.--space09, .p-oscEventSpace__mapNavBtn.--space09 { top: 32%; left: 0%; } /* -------------------------------------------- MODAL -------------------------------------------- */ .p-oscModal { height: 100%; padding: 5rem 2rem 2.5rem; } @media (width >= 1025px) { .p-oscModal { padding: 6rem 5rem 3.5rem; } } .p-oscModal__inner { display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); height: 100%; } @media (width >= 1025px) { .p-oscModal__inner { max-width: 104rem; margin: 0 auto; } } .p-oscModal__contFrame { padding-right: 0.4rem; overflow: auto; overscroll-behavior: none; scrollbar-color: #1630c6 #d3d9e5; } .p-oscModal__contFrame::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; } .p-oscModal__contFrame::-webkit-scrollbar-track { background: #d3d9e5; border-radius: 99rem; } .p-oscModal__contFrame::-webkit-scrollbar-thumb { background: #1630c6; border-radius: 99rem; } .p-oscModal__mvFrame { margin-bottom: 4rem; overflow: hidden; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-oscModal__mvFrame { display: grid; grid-template-columns: 44rem minmax(0, 1fr); margin-bottom: 7rem; } } .p-oscModal__mvTitleFrame { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 2rem 2rem; } @media (width >= 1025px) { .p-oscModal__mvTitleFrame { padding: 2rem; } } .p-oscModal__mvTitleNum { position: relative; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: auto; aspect-ratio: 1; margin-bottom: 0.5rem; font-family: "Montserrat", sans-serif; font-size: 0.9285714286em; font-weight: 500; line-height: 1; color: #fff; background-color: #00416f; } @media (width >= 1025px) { .p-oscModal__mvTitleNum { width: 5rem; margin-bottom: 1.5rem; font-size: 1.7857142857em; } } .p-oscModal__mvTitleNum.--colorDgry { background-color: #585656; } .p-oscModal__mvTitleNum.--colorGry { background-color: #b5b6b6; } .p-oscModal__mvTitleNum.--colorYel { background-color: #f4cd00; } .p-oscModal__mvTitle { font-size: 1.5714285714em; font-weight: 600; line-height: 1.4545454545; text-align: center; } @media (width >= 768px) { .p-oscModal__mvTitle { font-size: 2.1428571429em; } } @media (width >= 1025px) { .p-oscModal__mvTitle { font-size: 2.5714285714em; } } .p-oscModal__mvTitle ruby { ruby-position: over; } .p-oscModal__mvTitle ruby > rt { font-size: 40%; } .p-oscModal__mvLogoPic { width: 100%; max-width: 15rem; height: auto; margin-top: 1rem; } @media (width >= 1025px) { .p-oscModal__mvLogoPic { max-width: 20rem; } } .p-oscModal__mvLogoPic.--osc { aspect-ratio: 25/3; } .p-oscModal__mvLogoPic.--north { aspect-ratio: 150/19; } .p-oscModal__mvLogoPic.--south { aspect-ratio: 60/7; } .p-oscModal__mvPicFrame { width: 100%; height: auto; aspect-ratio: 584/390; } .p-oscModal__layout { display: grid; gap: 2rem; } @media (width >= 1025px) { .p-oscModal__layout { grid-template-columns: 59rem minmax(0, 1fr); gap: 5rem; } } .p-oscModal__descTitle { margin-bottom: 2rem; font-size: 1.4285714286em; font-weight: 600; line-height: 1.525; letter-spacing: 0.03em; } @media (width >= 1025px) { .p-oscModal__descTitle { font-size: 1.8571428571em; line-height: 1.7692307692; } } @media (width < 768px) { .p-oscModal__descTitle.--ls0SP { letter-spacing: 0; } } .p-oscModal__descText { line-height: 1.8571428571; } @media (width >= 1025px) { .p-oscModal__descText { font-size: 1.1428571429em; line-height: 2; } } .p-oscModal__descNote { margin-top: 1rem; } @media (width >= 1025px) { .p-oscModal__descNote { margin-top: 2rem; font-size: 1.1428571429em; } } .p-oscModal__mapPic { width: 100%; height: auto; } .p-oscModal__mapPic.--space01 { aspect-ratio: 400/341; } .p-oscModal__mapNote { margin-top: 1rem; font-size: 0.7857142857em; letter-spacing: -0.03em; } @media (width >= 1025px) { .p-oscModal__mapNote { margin-top: 1.5rem; font-size: 0.9285714286em; letter-spacing: 0; } } .p-oscModal__infoFrame { margin-top: 3rem; } @media (width >= 1025px) { .p-oscModal__infoFrame { margin-top: 5.5rem; } } .p-oscModal__btnFrame { display: flex; justify-content: center; margin-top: 2rem; } @media (width >= 1025px) { .p-oscModal__btnFrame { margin-top: 3rem; } } @media (width >= 1025px) { .p-oscModal.--noPdf { padding: 6rem 5rem 5rem; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-oscList { padding-top: 7.5rem; padding-bottom: 7.5rem; } @media (width >= 1025px) { .p-oscList { padding-top: 10rem; padding-bottom: 7rem; } } .p-oscList__contactFrame { padding-top: 7.5rem; } @media (width >= 1025px) { .p-oscList__contactFrame { padding-top: 7rem; } } /* -------------------------------------------- SLIDE -------------------------------------------- */ .p-oscListSlide { position: relative; } .p-oscListSlide__track { overflow: visible !important; } .p-oscListSlide__slide { width: 25rem; padding: 4rem 2rem; background-color: #f6f7f9; border-radius: 1rem; } @media (width >= 1025px) { .p-oscListSlide__slide { width: 26rem; padding: 5rem 2.5rem 4rem; } } .p-oscListSlide__slide:not(:last-child) { position: relative; } .p-oscListSlide__slide:not(:last-child)::before { position: absolute; top: 0; bottom: 0; left: 100%; display: block; width: 0; height: 0; margin: auto; content: ""; border-color: transparent transparent transparent #f6f7f9; border-style: solid; border-width: 1.4rem 0 1.4rem 1.1rem; } @media (width >= 1025px) { .p-oscListSlide__slide:not(:last-child)::before { border-width: 2rem 0 2rem 1.6rem; } } .p-oscListSlide__iconStepFrame { display: flex; justify-content: center; margin-bottom: 1.5rem; color: #1630c6; } @media (width >= 1025px) { .p-oscListSlide__iconStepFrame { margin-bottom: 2rem; } } .p-oscListSlide__iconStep { position: relative; z-index: 1; padding-top: 0.5rem; font-family: "Montserrat", sans-serif; font-weight: 500; line-height: 0.9; white-space: nowrap; } @media (width >= 1025px) { .p-oscListSlide__iconStep { padding-top: 1rem; } } .p-oscListSlide__iconStep > span:first-child { position: absolute; right: 0; bottom: 100%; left: 0; font-size: 0.7142857143em; text-align: center; } @media (width < 1025px) { .p-oscListSlide__iconStep > span:first-child { transform-origin: center bottom; scale: 0.9; } } @media (width >= 1025px) { .p-oscListSlide__iconStep > span:first-child { font-size: 0.7857142857em; } } .p-oscListSlide__iconStep > span:last-child { font-size: 1.8571428571em; } @media (width >= 1025px) { .p-oscListSlide__iconStep > span:last-child { font-size: 2.4285714286em; } } .p-oscListSlide__iconFrame { width: 9rem; height: 9rem; background: #fff; border-radius: 50%; translate: -9% 0; } @media (width >= 1025px) { .p-oscListSlide__iconFrame { width: 10.5rem; height: 10.5rem; } } .p-oscListSlide__titleFrame { margin-bottom: 1rem; } .p-oscListSlide__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-oscListSlide__text { line-height: 1.7142857143; } } .p-oscListSlide__navFrame { display: flex; flex-direction: column; gap: 4rem; align-items: center; margin-top: 2rem; } @media (width >= 1025px) { .p-oscListSlide__navFrame { flex-direction: row; gap: 6.5rem; margin-top: 4rem; } } .p-oscListSlide__progress { position: relative; width: 100%; height: 1px; background-color: #d3d9e5; } @media (width >= 1025px) { .p-oscListSlide__progress { height: 2px; } } .p-oscListSlide__progressBar { position: absolute; top: 0; bottom: 0; left: 0; background-color: #1630c6; transition: width 0.1s; } .p-oscListSlide__arrows { display: flex; gap: 0.5rem; justify-content: center; } .p-oscListSlide__arrow { position: relative; display: block; width: 5rem; height: 5rem; color: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .p-oscListSlide__arrow { width: 6rem; height: 6rem; } } @media (hover: hover) { .p-oscListSlide__arrow:hover::before { scale: 1.1; } } .p-oscListSlide__arrow[disabled] { pointer-events: none; opacity: 0.7; } .p-oscListSlide__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; transition: 0.3s; transition-property: scale; } .p-oscListSlide__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: -45deg; translate: -25% 0; } @media (width >= 1025px) { .p-oscListSlide__arrow::after { width: 1rem; height: 1rem; border-width: 2px; } } .p-oscListSlide__arrow.--prev::after { rotate: 135deg; translate: 25% 0; } /* -------------------------------------------- MV -------------------------------------------- */ .p-oscMvCv { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 10; transition: opacity 0.3s; } @media (width >= 1025px) { .p-oscMvCv { right: 4rem; bottom: 4rem; } } .p-oscMvCv.is-hidden { pointer-events: none; opacity: 0; } .p-oscMvCv__anc { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; justify-content: center; width: 10rem; height: auto; aspect-ratio: 1; padding-top: 1rem; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 50%; box-shadow: 0 0.3rem 3rem rgba(0, 0, 0, 0.2); } @media (width >= 1025px) { .p-oscMvCv__anc { width: 12rem; padding-top: 1.5rem; } } .p-oscMvCv__text { font-size: 0.7857142857em; font-weight: 500; line-height: 1.4545454545; color: #fff; text-align: center; } @media (width >= 1025px) { .p-oscMvCv__text { font-size: 1em; } } .p-oscMvCv__arrow { position: relative; display: block; width: 2rem; height: 2rem; color: #fff; border-radius: 0.4rem; } @media (width >= 768px) { .p-oscMvCv__arrow { width: 2.4rem; height: 2.4rem; } } .p-oscMvCv__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: #fff; border-radius: inherit; } .p-oscMvCv__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.5rem; height: 0.5rem; margin: auto; content: ""; border-right: 1px solid #1630c6; border-bottom: 1px solid #1630c6; rotate: 45deg; translate: 0 -15%; } @media (width >= 1025px) { .p-oscMvCv__arrow::after { width: 0.6rem; height: 0.6rem; } } .p-privacyDetail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: 0 0 10rem; } @media (width >= 1025px) { .p-privacyDetail { gap: 7rem; padding: 0 0 15rem; } } .p-privacyDetail__item { padding: 5rem 2.5rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-privacyDetail__item { padding: 7rem; } .p-privacyDetail__item > * { max-width: 116rem; margin: 0 auto; } } .p-privacyDetail__titleFrame { padding-bottom: 4rem; margin-bottom: 4rem; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-privacyDetail__titleFrame { margin-bottom: 3rem; } } .p-privacyDetail__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.3636363636; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-privacyDetail__title { font-size: 2.2857142857em; line-height: 1.4375; } } .p-privacyDetail__contFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; } @media (width >= 1025px) { .p-privacyDetail__contFrame { gap: 5rem; } } .p-privacyDetail__contTitle { margin-bottom: 1rem; font-size: 1.1428571429em; font-weight: 600; line-height: 1.5; text-align: center; } @media (width >= 1025px) { .p-privacyDetail__contTitle { margin-bottom: 1.5rem; font-size: 1.4285714286em; } } .p-privacyDetail__textFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-bottom: 3rem; } @media (width < 1025px) { .p-privacyDetail__textFrame { letter-spacing: 0; } } @media (width >= 1025px) { .p-privacyDetail__textFrame { gap: 3rem; margin-bottom: 6rem; } } .p-privacyDetail__textFrame:last-child { margin-bottom: 0; } .p-privacyDetail__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-privacyDetail__text { font-size: 1.1428571429em; line-height: 2; } } .p-privacyDetail__text + .p-privacyDetail__text { margin-top: 1.5rem; } .p-privacyDetail__termFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; counter-reset: termNumber 0; } @media (width >= 1025px) { .p-privacyDetail__termFrame { gap: 5rem; } } .p-privacyDetail__termItem { counter-reset: termInnerNumber 0; counter-increment: termNumber 1; } .p-privacyDetail__termItem .c-listSquare { margin-bottom: 1rem; font-weight: 600; } @media (width >= 1025px) { .p-privacyDetail__termItem .c-listSquare { margin-bottom: 2rem; font-size: 1.1428571429em; } } @media (width >= 1025px) { .p-privacyDetail__termItem .c-listNum { margin-bottom: 3rem; } } .p-privacyDetail__termItem .c-listNum__item { counter-increment: termInnerNumber 1; } @media (width >= 1025px) { .p-privacyDetail__termItem .c-listNum__item { padding-left: 4rem; font-size: 16px; } } .p-privacyDetail__termItem .c-listNum__item::before { color: #1630c6; content: counter(termInnerNumber, decimal-leading-zero) "."; } @media (width >= 1025px) { .p-privacyDetail__termItem .c-listNum__item::before { width: 2.5rem; text-align: right; } } .p-privacyDetail__termTitleMd { margin-bottom: 2rem; font-size: 1.5714285714em; font-weight: 600; line-height: 1.6; color: #1630c6; } @media (width >= 1025px) { .p-privacyDetail__termTitleMd { margin-bottom: 2.5rem; font-size: 2em; } } .p-privacyDetail__termTitle { position: relative; padding-left: 1.3em; margin-bottom: 2rem; font-size: 1.4285714286em; font-weight: 600; line-height: 1.6; } @media (width >= 1025px) { .p-privacyDetail__termTitle { margin-bottom: 2.5rem; font-size: 1.8571428571em; } } .p-privacyDetail__termTitle::before { position: absolute; left: 0; content: counter(termNumber) ". "; } .p-privacyDetail__termSubTitle { position: relative; margin-bottom: 1rem; font-size: 1.1428571429em; font-weight: 600; line-height: 1.6; } @media (width >= 1025px) { .p-privacyDetail__termSubTitle { margin-bottom: 2rem; font-size: 1.4285714286em; } } * + .p-privacyDetail__termSubTitle { margin-top: 3rem; } @media (width >= 1025px) { * + .p-privacyDetail__termSubTitle { margin-top: 4rem; } } .p-privacyDetail__termText { line-height: 1.8571428571; } @media (width >= 1025px) { .p-privacyDetail__termText { font-size: 1.1428571429em; line-height: 2; } } .p-privacyDetail__methodItem { position: relative; padding: 2.5rem 2rem; background-color: #f6f7f9; border-radius: 0.6rem; } @media (width >= 1025px) { .p-privacyDetail__methodItem { padding: 3.5rem 4rem 4rem; } } .p-privacyDetail__methodTitle { margin-bottom: 1rem; font-weight: 600; line-height: 1.7857142857; color: #1630c6; } @media (width >= 1025px) { .p-privacyDetail__methodTitle { margin-bottom: 1.5rem; font-size: 1.1428571429em; } } .p-privacyDetail__methodSubTitle { font-weight: 700; } @media (width >= 1025px) { .p-privacyDetail__methodSubTitle { font-size: 1.1428571429em; line-height: 2; letter-spacing: 0.06em; } } .p-privacyDetail__note { font-size: 0.8571428571em; font-weight: 400; text-align: right; letter-spacing: 0.075em; } @media (width >= 1025px) { .p-privacyDetail__note { font-size: 1em; } } .p-privacyDetail__markCont { display: flex; flex-direction: column; gap: 1rem 0; align-items: center; padding: 2rem; background: #fff; } @media (width >= 1025px) { .p-privacyDetail__markCont { flex-direction: row; gap: 0 3rem; max-width: 116rem; padding: 4rem; margin: 0 auto; } } .p-privacyDetail__markImg { flex-shrink: 0; } .p-privacyDetail__markImg img { width: 8rem; } @media (width >= 1025px) { .p-privacyDetail__markImg img { width: 14rem; } } .p-recruitIntroduction { padding: 8rem 0 0; } @media (width >= 1025px) { .p-recruitIntroduction { padding: 16rem 0 0; } } .p-recruitIntroduction .p-recruitIntroduction__contents { position: relative; } .p-recruitIntroduction .p-recruitIntroduction__contents::before { position: absolute; top: 40.85rem; left: 50%; width: 54.75rem; height: 27.55rem; content: ""; background: url("../img/pages/recruit/contents_bg.png.webp"); background-repeat: no-repeat; background-position: center; background-size: contain; mix-blend-mode: screen; transform: translateX(-50%); } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__contents::before { top: -18.5rem; width: 169.2rem; height: 85.1rem; background: url("../img/pages/recruit/contents_bg_pc.png.webp"); } } .p-recruitIntroduction .p-recruitIntroduction__contents .p-recruitIntroduction__inner { position: relative; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__contents .p-recruitIntroduction__inner { display: flex; } } .p-recruitIntroduction .p-recruitIntroduction__contents .p-recruitIntroduction__hdg { font-size: 1.7857142857em; font-weight: 600; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.06em; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__contents .p-recruitIntroduction__hdg { font-size: 2.8571428571em; line-height: 2; } } .p-recruitIntroduction .p-recruitIntroduction__contents .p-recruitIntroduction__txt { margin: 5rem 0 0; font-size: 1em; font-weight: 400; line-height: 1.85; letter-spacing: 0.06em; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__contents .p-recruitIntroduction__txt { flex: 1; margin: 0 0 0 12rem; font-size: 1.4285714286em; line-height: 2.1; } } .p-recruitIntroduction__decoFrame { position: absolute; inset: 0; max-width: 160rem; margin: auto; pointer-events: none; } .p-recruitIntroduction__decoItem { position: absolute; } .p-recruitIntroduction__decoItem.--deco1 { top: 123.0769230769vw; left: 5.1282051282vw; width: 26.9230769231vw; } @media (width >= 1025px) { .p-recruitIntroduction__decoItem.--deco1 { top: max(21.25vw, 34rem); left: min(4.0625vw, 6.5rem); width: min(13.125vw, 21rem); } } .p-recruitIntroduction__decoItem.--deco2 { top: 106.4102564103vw; left: 42.3076923077vw; width: 22.0512820513vw; } @media (width >= 1025px) { .p-recruitIntroduction__decoItem.--deco2 { top: max(16.5625vw, 26.5rem); left: min(22.1875vw, 35.5rem); width: min(10.75vw, 17.2rem); } } .p-recruitIntroduction__decoItem.--deco3 { top: 147.4358974359vw; left: 64.1025641026vw; width: 30vw; } @media (width >= 1025px) { .p-recruitIntroduction__decoItem.--deco3 { top: max(20vw, 32rem); left: min(80vw, 128rem); width: min(14.625vw, 23.4rem); } } .p-recruitIntroduction__decoPic { overflow: clip; border-radius: 1rem; filter: blur(5px); will-change: filter; } .p-recruitIntroduction__bnr { margin: 41rem 0 0; } .p-recruitIntroduction__bnr .p-recruitIntroductionBnr { position: relative; display: grid; gap: 1.5rem; height: min-content; } @media (width >= 1025px) { .p-recruitIntroduction__bnr .p-recruitIntroductionBnr { gap: 3rem; } } .p-recruitIntroduction__bnr .p-recruitIntroductionBnr__item { position: sticky; top: 7rem; right: 0; left: 0; will-change: scale; } @media (width < 1025px) and (orientation: landscape) { .p-recruitIntroduction__bnr .p-recruitIntroductionBnr__item { position: static; } } @media (width >= 1025px) { .p-recruitIntroduction__bnr .p-recruitIntroductionBnr__item { top: 15rem; } } .p-recruitIntroduction__bnr .p-recruitIntroductionBnr__item > a > picture { position: relative; z-index: 1; overflow: hidden; border-radius: 1rem; } .p-recruitIntroduction .p-recruitIntroduction__data { margin: 10rem 0 0; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__data { margin: 15rem 0 0; } } .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroduction__dataList { display: flex; gap: 0 0.75rem; margin: 1.5rem 0 0; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroduction__dataList { gap: 0 4rem; margin: 3rem 0 0; } } .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroduction__dataList .p-recruitIntroduction__dataItem { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; height: 8.5rem; background: #fff; border-radius: 0.5rem; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroduction__dataList .p-recruitIntroduction__dataItem { height: 17rem; border-radius: 1rem; } } .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionDataYear { display: flex; font-size: 0.8571428571em; font-weight: 600; letter-spacing: 0.075em; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionDataYear { font-size: 1.4285714286em; } } .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionDataYear__num { font-family: "Montserrat", sans-serif; } .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionDataRatio { display: flex; align-items: baseline; font-family: "Montserrat", sans-serif; font-weight: 700; line-height: 1.2; color: #1630c6; } .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionDataRatio__num { font-size: 2.5em; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionDataRatio__num { font-size: 5em; } } .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionDataRatio__unit { font-size: 1.1428571429em; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionDataRatio__unit { font-size: 2.2857142857em; } } .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionNote { margin: 1rem 0 0; font-size: 0.8571428571em; font-weight: 400; text-align: right; letter-spacing: 0.075em; } @media (width >= 1025px) { .p-recruitIntroduction .p-recruitIntroduction__data .p-recruitIntroductionNote { font-size: 1em; } } /* -------------------------------------------- EVENT -------------------------------------------- */ .p-transitEvent { position: relative; z-index: 1; padding-top: 8rem; padding-bottom: 9rem; background: #444863; } @media (width >= 1025px) { .p-transitEvent { padding-top: 15rem; padding-bottom: 15rem; } } .p-transitEvent::before { position: absolute; inset: 0; z-index: -1; content: ""; background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .p-transitEvent::before { background-size: 10rem 10rem; } } .p-transitEvent__titleFrame { margin-bottom: 6rem; } @media (width >= 1025px) { .p-transitEvent__titleFrame { margin-bottom: 7.5rem; } } .p-transitEvent__layoutFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5rem; color: #fff; } @media (width >= 1025px) { .p-transitEvent__layoutFrame { grid-template-columns: 50% minmax(0, 1fr); gap: 8rem; } } @media (width >= 1280px) { .p-transitEvent__descFrame { padding-top: 3rem; padding-left: 6rem; } } .p-transitEvent__descTitle { margin-bottom: 5rem; font-size: 1.5714285714em; font-weight: 600; line-height: 1.3636363636; text-align: center; } @media (width >= 1025px) { .p-transitEvent__descTitle { font-size: 2.2857142857em; line-height: 1.625; text-align: left; } } .p-transitEvent__descCatch { margin-bottom: 2rem; font-size: 1.2142857143em; font-weight: 600; } @media (width >= 1025px) { .p-transitEvent__descCatch { font-size: 1.8571428571em; } } .p-transitEvent__descText { line-height: 1.8571428571; } @media (width >= 1025px) { .p-transitEvent__descText { font-size: 1.1428571429em; line-height: 2.25; } } @media (width >= 1025px) { .p-transitEvent__slideFrame { padding-right: 30vw; margin-right: -30vw; overflow: clip; } } .p-transitEvent__supFrame { display: flex; justify-content: center; margin-top: 5rem; } @media (width >= 1025px) { .p-transitEvent__supFrame { margin-top: 6rem; } } /* -------------------------------------------- SLIDE -------------------------------------------- */ .p-transitEventSlide { position: relative; } .p-transitEventSlide__track { overflow: visible !important; } .p-transitEventSlide__slide { width: 30rem; } @media (width >= 1025px) { .p-transitEventSlide__slide { width: auto; } } .p-transitEventSlide__pic { width: 100%; height: auto; aspect-ratio: 600/450; overflow: hidden; border-radius: 1rem; } .p-transitEventSlide__title { margin-top: 1rem; color: rgba(255, 255, 255, 0.5); } @media (width >= 1025px) { .p-transitEventSlide__title { padding-right: 6rem; font-size: 0.9285714286em; } } .p-transitEventSlide__navFrame { display: flex; flex-direction: column; gap: 4rem; align-items: center; margin-top: 3rem; } @media (width >= 1025px) { .p-transitEventSlide__navFrame { align-items: flex-end; margin-top: -2rem; } } .p-transitEventSlide__progress { position: relative; width: 100%; height: 1px; background-color: #d3d9e5; } @media (width >= 1025px) { .p-transitEventSlide__progress { display: none; } } .p-transitEventSlide__progressBar { position: absolute; top: 0; bottom: 0; left: 0; background-color: #687df4; transition: width 0.1s; } .p-transitEventSlide__arrows { display: flex; gap: 0.5rem; justify-content: center; } @media (width >= 1025px) { .p-transitEventSlide__arrows { gap: 1.5rem; justify-content: flex-end; } } .p-transitEventSlide__arrow { position: relative; display: block; width: 5rem; height: 5rem; color: #1630c6; background-color: #f0f1f5; border-radius: 0.4rem; } @media (width >= 1025px) { .p-transitEventSlide__arrow { width: 2rem; height: 2rem; color: #fff; background-color: unset; } } @media (hover: hover) { .p-transitEventSlide__arrow:hover { color: #687df4; } } .p-transitEventSlide__arrow[disabled] { pointer-events: none; opacity: 0.4; } .p-transitEventSlide__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: -45deg; translate: -25% 0; } @media (width >= 1025px) { .p-transitEventSlide__arrow::after { width: 1rem; height: 1rem; border-width: 2px; } } .p-transitEventSlide__arrow.--prev::after { rotate: 135deg; translate: 25% 0; } /* -------------------------------------------- INTRODUCTION -------------------------------------------- */ .p-transitIntro { padding-top: 10rem; } @media (width >= 1025px) { .p-transitIntro { margin-bottom: -5rem; } } .p-transitIntro__anc { position: relative; display: block; overflow: hidden; } @media (hover: hover) { .p-transitIntro__anc:hover .p-transitIntro__pic > img { scale: 1.05; } } .p-transitIntro__pic { width: 100%; height: auto; aspect-ratio: 660/500; } @media (width >= 1025px) { .p-transitIntro__pic { aspect-ratio: 1000/200; } } .p-transitIntro__pic > img { transition: scale 0.3s; } .p-transitIntro__arrow { position: absolute; right: 1rem; bottom: 1rem; z-index: 1; display: block; width: 5rem; height: 5rem; margin: auto; color: #1630c6; background: #f0f1f5; border-radius: 0.5rem; } @media (width >= 1025px) { .p-transitIntro__arrow { right: 2rem; bottom: 2rem; width: 6rem; height: 6rem; } } .p-transitIntro__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: opacity 0.3s; } .p-transitIntro__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: -25% 0; } /* -------------------------------------------- MODAL -------------------------------------------- */ .p-transitIntroModal { padding: 5rem 2rem; } @media (width >= 1025px) { .p-transitIntroModal { padding: 6rem; } } .p-transitIntroModal__headFrame { margin-bottom: 3rem; } @media (width >= 1025px) { .p-transitIntroModal__headFrame { margin-bottom: 4rem; } } .p-transitIntroModal__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.4545454545; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-transitIntroModal__title { font-size: 2.8571428571em; } } .p-transitIntroModal__desc { margin-top: 2rem; line-height: 1.8571428571; } @media (width >= 1025px) { .p-transitIntroModal__desc { font-size: 1.1428571429em; line-height: 2.25; text-align: center; } } .p-transitIntroModal__charaLayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6rem 9rem; padding: 3.5rem 2rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-transitIntroModal__charaLayout { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4rem 4.5rem; } } .p-transitIntroModal__charaItem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } @media (width >= 1025px) { .p-transitIntroModal__charaItem { display: flex; gap: 2rem; align-items: center; } } .p-transitIntroModal__charaItem + .p-transitIntroModal__charaItem { position: relative; } .p-transitIntroModal__charaItem + .p-transitIntroModal__charaItem::before { position: absolute; top: -3rem; right: 0; left: 0; display: block; height: 1px; content: ""; background-color: #d3d9e5; } @media (width >= 1025px) { .p-transitIntroModal__charaItem + .p-transitIntroModal__charaItem::before { inset: 0 auto 0 -4.5rem; width: 1px; height: 100%; } } @media (width >= 1025px) { .p-transitIntroModal__charaPicFrame { flex-shrink: 0; width: 13rem; } } .p-transitIntroModal__charaPic { width: 10rem; height: auto; aspect-ratio: 1; margin: auto; overflow: hidden; border-radius: 50%; } @media (width >= 1025px) { .p-transitIntroModal__charaPic { width: 100%; } } @media (width >= 1025px) { .p-transitIntroModal__charaContFrame { flex: 1; } } .p-transitIntroModal__charaTitle { font-size: 1.0714285714em; font-weight: 600; line-height: 1.3; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-transitIntroModal__charaTitle { font-size: 1.2142857143em; text-align: left; } } .p-transitIntroModal__charaText { margin-top: 1rem; line-height: 1.5; } @media (width >= 1025px) { .p-transitIntroModal__charaText { font-size: 1.0714285714em; line-height: 1.6666666667; } } .p-transitIntroModal__videoLayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 4rem; margin-top: 3rem; } @media (width >= 1025px) { .p-transitIntroModal__videoLayout { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6rem; } } .p-transitIntroModal__videoFrame { box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2); } .p-transitIntroModal__videoText { margin-top: 1rem; font-weight: 600; line-height: 1.3; text-align: center; } @media (width >= 1025px) { .p-transitIntroModal__videoText { margin-top: 2.5rem; font-size: 1.1428571429em; } } /* -------------------------------------------- MEDIA -------------------------------------------- */ .p-transitMedia { padding-top: 8rem; padding-bottom: 10rem; background-color: #e5e9f2; } @media (width >= 1025px) { .p-transitMedia { padding-top: 15rem; padding-bottom: 15rem; } } .p-transitMedia__titleFrame { margin-bottom: 5rem; } @media (width >= 1025px) { .p-transitMedia__titleFrame { margin-bottom: 8rem; } } .p-transitMedia__descFrame { margin-bottom: 12rem; } @media (width >= 1025px) { .p-transitMedia__descText { font-size: 1.1428571429em; line-height: 2.25; text-align: center; } } .p-transitMedia__supFrame { display: flex; flex-direction: column; gap: 2.5rem; align-items: center; justify-content: center; margin-top: 5rem; } @media (width >= 1025px) { .p-transitMedia__supFrame { margin-top: 6rem; } .p-transitMedia__supFrame .c-ancArrow { font-size: 1.1428571429em; } } /* -------------------------------------------- TYPE -------------------------------------------- */ .p-transitMediaType { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12rem; } .p-transitMediaType__item { display: flex; flex-direction: column; gap: 4.5rem; padding: 0 2.5rem 3rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-transitMediaType__item { align-items: center; } .p-transitMediaType__item:nth-child(odd) { flex-direction: row-reverse; padding: 6rem 4rem 6rem 6rem; } .p-transitMediaType__item:nth-child(even) { flex-direction: row; padding: 6rem 6rem 6rem 4rem; } } @media (width >= 1280px) { .p-transitMediaType__item { gap: 10rem; } .p-transitMediaType__item:nth-child(odd) { padding-left: 12rem; } .p-transitMediaType__item:nth-child(even) { padding-right: 12rem; } } .p-transitMediaType__picFrame { margin-top: -6.5rem; } @media (width >= 1025px) { .p-transitMediaType__picFrame { flex-shrink: 0; width: 48rem; margin-top: -12.5rem; } } @media (width >= 1280px) { .p-transitMediaType__picFrame { width: 56rem; } } .p-transitMediaType__pic { width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: 1rem; } @media (width >= 1025px) { .p-transitMediaType__contFrame { flex: 1; } } .p-transitMediaType__titleFrame { display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; } @media (width >= 1025px) { .p-transitMediaType__titleFrame { align-items: flex-start; text-align: left; } } .p-transitMediaType__titleLabel { padding: 0.5rem 1.5rem; font-family: "Montserrat", sans-serif; font-size: 0.8571428571em; font-weight: 500; line-height: 1; color: #aaadc1; background-color: #f6f7f9; border-radius: 999px; } @media (width >= 1025px) { .p-transitMediaType__titleLabel { padding: 0.8rem 3rem; font-size: 1.2857142857em; } } .p-transitMediaType__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.6; color: #1630c6; } @media (width >= 1025px) { .p-transitMediaType__title { font-size: 2.2857142857em; } } .p-transitMediaType__text { margin-top: 4.5rem; line-height: 1.8571428571; } @media (width < 1025px) { .p-transitMediaType__text { letter-spacing: 0; } } @media (width >= 1025px) { .p-transitMediaType__text { margin-top: 3.5rem; font-size: 1.1428571429em; } } @media (width >= 1280px) { .p-transitMediaType__text { line-height: 2.5; } } .p-transitMediaType__btnFrame { display: flex; justify-content: flex-end; margin-top: 4.5rem; } @media (width >= 1025px) { .p-transitMediaType__btnFrame { margin-top: 5rem; } } /* -------------------------------------------- MV -------------------------------------------- */ .p-transitMvBnr { position: fixed; right: 2rem; bottom: 2rem; z-index: 10; transition: opacity 0.3s; } .p-transitMvBnr.is-hidden { pointer-events: none; opacity: 0; } .p-transitMvBnr.is-close { display: none !important; } .p-transitMvBnr__closeBtn { position: absolute; top: -1rem; right: -1rem; z-index: 1; width: 3rem; height: 3rem; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 999px; } .p-transitMvBnr__closeBtn::before, .p-transitMvBnr__closeBtn::after { position: absolute; inset: 0; width: 1.2rem; height: 1px; margin: auto; content: ""; background-color: #fff; rotate: 45deg; } @media (width >= 1025px) { .p-transitMvBnr__closeBtn::before, .p-transitMvBnr__closeBtn::after { width: 1.4rem; } } .p-transitMvBnr__closeBtn::after { rotate: -45deg; } .p-transitMvBnr__anc { display: block; width: 24rem; overflow: hidden; } @media (width >= 1025px) { .p-transitMvBnr__anc { width: 26rem; } } @media (hover: hover) { .p-transitMvBnr__anc:hover .p-transitMvBnr__pic > img { scale: 1.1; } } .p-transitMvBnr__pic { width: 100%; height: auto; aspect-ratio: 260/100; } .p-transitMvBnr__pic > img { transition: scale 0.3s; } /* -------------------------------------------- RELATED -------------------------------------------- */ .p-transitRelated { padding-bottom: 9rem; } @media (width >= 1025px) { .p-transitRelated { padding-bottom: 15rem; } } .p-transitRelated__titleFrame { margin-bottom: 5rem; } @media (width >= 1025px) { .p-transitRelated__titleFrame { margin-bottom: 8rem; } } /* -------------------------------------------- STRENGTHS -------------------------------------------- */ .p-transitStrengths { padding-bottom: 10rem; } @media (width >= 1025px) { .p-transitStrengths { padding-bottom: 15rem; } } .p-transitStrengths__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-transitStrengths__titleFrame { margin-bottom: 16rem; } } /* -------------------------------------------- NOTE -------------------------------------------- */ .p-whistleblowingAbout__frame { padding: 2.5rem 2rem; background-color: #fff; border-radius: 0.6rem; } @media (width >= 1025px) { .p-whistleblowingAbout__frame { padding: 6rem; } .p-whistleblowingAbout__frame > * { max-width: 116rem; margin: 0 auto; } } .p-whistleblowingAbout__title { margin-bottom: 1.5rem; font-size: 1.1428571429em; font-weight: 600; line-height: 1.3; color: #1630c6; } @media (width >= 1025px) { .p-whistleblowingAbout__title { margin-bottom: 2.5rem; font-size: 1.4285714286em; } } @media (width >= 1025px) { .p-whistleblowingAbout__text { font-size: 1.1428571429em; line-height: 2; } } /* -------------------------------------------- LIST -------------------------------------------- */ .p-whistleblowingList { padding-top: 7.5rem; } @media (width >= 1025px) { .p-whistleblowingList { padding-top: 10rem; } } /* -------------------------------------------- DETAIL -------------------------------------------- */ .p-whistleblowingListDetail { display: grid; gap: 2.5rem; } @media (width >= 1025px) { .p-whistleblowingListDetail { gap: 7rem; } } .p-whistleblowingListDetail__item { padding: 5rem 2.5rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-whistleblowingListDetail__item { padding: 7rem; } .p-whistleblowingListDetail__item > * { max-width: 116rem; margin: 0 auto; } } .p-whistleblowingListDetail__titleFrame { padding-bottom: 4rem; margin-bottom: 4rem; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-whistleblowingListDetail__titleFrame { margin-bottom: 3rem; } } .p-whistleblowingListDetail__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.3636363636; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-whistleblowingListDetail__title { font-size: 2.2857142857em; line-height: 1.4375; } } .p-whistleblowingListDetail__contFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; } @media (width >= 1025px) { .p-whistleblowingListDetail__contFrame { gap: 5rem; } } .p-whistleblowingListDetail__contTitle { margin-bottom: 1rem; font-size: 1.1428571429em; font-weight: 600; line-height: 1.5; text-align: center; } @media (width >= 1025px) { .p-whistleblowingListDetail__contTitle { margin-bottom: 1.5rem; font-size: 1.4285714286em; } } .p-whistleblowingListDetail__contTitle.--mgbLg { margin-bottom: 3rem; } @media (width >= 1025px) { .p-whistleblowingListDetail__contTitle.--mgbLg { margin-bottom: 4rem; } } .p-whistleblowingListDetail__textFrame { display: grid; gap: 2rem; margin-bottom: 3rem; } @media (width < 1025px) { .p-whistleblowingListDetail__textFrame { letter-spacing: 0; } } @media (width >= 1025px) { .p-whistleblowingListDetail__textFrame { gap: 3rem; margin-bottom: 4rem; text-align: center; } } .p-whistleblowingListDetail__textFrame:last-child { margin-bottom: 0; } .p-whistleblowingListDetail__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-whistleblowingListDetail__text { font-size: 1.1428571429em; line-height: 2; } } .p-whistleblowingListDetail__methodFrame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } @media (width >= 1025px) { .p-whistleblowingListDetail__methodFrame:has(> *:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } .p-whistleblowingListDetail__methodItem { position: relative; padding: 2.5rem 2rem; background-color: #f6f7f9; border-radius: 0.6rem; } @media (width >= 1025px) { .p-whistleblowingListDetail__methodItem { padding: 3.5rem 4rem 4rem; } } .p-whistleblowingListDetail__methodTitle { margin-bottom: 1rem; font-weight: 600; line-height: 1.7857142857; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-whistleblowingListDetail__methodTitle { margin-bottom: 1.5rem; font-size: 1.1428571429em; } } .p-whistleblowingListDetail__methodBtnFrame { display: flex; justify-content: center; } @media (width >= 768px) { .p-whistleblowingListDetail__methodText { text-align: center; } } @media (width >= 1025px) { .p-whistleblowingListDetail__methodText { font-size: 1.1428571429em; line-height: 1.75; } } .p-whistleblowingListDetail__termFrame { display: grid; gap: 3.5rem; } @media (width >= 1025px) { .p-whistleblowingListDetail__termFrame { gap: 5rem; } } .p-whistleblowingListDetail__termItem { counter-reset: number 0; } @media (width >= 1025px) { .p-whistleblowingListDetail__termItem .c-listSquare { font-size: 1.1428571429em; } } .p-whistleblowingListDetail__termTitle { margin-bottom: 2rem; font-size: 1.4285714286em; font-weight: 600; line-height: 1.6; } @media (width >= 1025px) { .p-whistleblowingListDetail__termTitle { margin-bottom: 3rem; font-size: 1.8571428571em; } } .p-whistleblowingListDetail__termSubTitle { position: relative; margin-bottom: 1rem; font-size: 1.1428571429em; font-weight: 600; line-height: 1.6; } @media (width >= 1025px) { .p-whistleblowingListDetail__termSubTitle { margin-bottom: 2rem; font-size: 1.4285714286em; } } .p-whistleblowingListDetail__termSubTitle.--num { position: relative; padding-left: 1.25em; } .p-whistleblowingListDetail__termSubTitle.--num::before { position: absolute; top: 0; left: 0; content: counter(number) "."; counter-increment: number 1; } * + .p-whistleblowingListDetail__termSubTitle { margin-top: 3rem; } @media (width >= 1025px) { * + .p-whistleblowingListDetail__termSubTitle { margin-top: 4rem; } } @media (width >= 1025px) { .p-whistleblowingListDetail__termText { font-size: 1.1428571429em; line-height: 2; } } /* -------------------------------------------- NEWS -------------------------------------------- */ .p-archiveNewsLayout { display: grid; } @media (width >= 1025px) { .p-archiveNewsLayout { grid-template-columns: 18rem minmax(0, 1fr); gap: 6rem; } } .p-archiveNewsLayout__navFrame { display: contents; } @media (width >= 1025px) { .p-archiveNewsLayout__navFrame { display: flex; flex-direction: column; justify-content: space-between; } } .p-archiveNewsLayout__navBtnFrame { margin-bottom: 3rem; } @media (width >= 1025px) { .p-archiveNewsLayout__navBtnFrame { margin-bottom: 0; } } .p-archiveNewsLayout__navMoreBtnFrame { order: 2; margin-top: 3rem; } @media (width < 1025px) { .p-archiveNewsLayout__navMoreBtnFrame { display: flex; justify-content: center; } } .p-archiveNewsNav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } @media (width >= 1025px) { .p-archiveNewsNav { display: grid; gap: 1.5rem 1rem; } } .p-archiveNewsNav__btn { position: relative; display: block; padding: 0.5rem 0 0.5rem 1rem; font-size: 0.9285714286em; line-height: 1; opacity: 0.4; transition: opacity 0.3s; } @media (width >= 1025px) { .p-archiveNewsNav__btn { padding: 0.5rem 0 0.5rem 1.5rem; font-size: 1.1428571429em; } } @media (hover: hover) { .p-archiveNewsNav__btn:hover { opacity: 1; } } .p-archiveNewsNav__btn::before { position: absolute; top: 0; bottom: 0; left: 0; width: 0.6rem; height: 0.6rem; margin: auto; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 0.2rem; opacity: 0; transition: opacity 0.3s; } @media (width >= 1025px) { .p-archiveNewsNav__btn::before { width: 0.8rem; height: 0.8rem; } } .p-archiveNewsNav__btn.is-act { font-weight: 500; pointer-events: none; opacity: 1; } .p-archiveNewsNav__btn.is-act::before { opacity: 1; } .p-archiveNews { display: grid; gap: 1rem; } .p-archiveNews__anc { position: relative; display: block; padding: 2rem 2rem 3rem; background: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-archiveNews__anc { display: flex; gap: 2rem; align-items: center; padding: 2.7rem 13rem 2.7rem 3rem; } } @media (hover: hover) { .p-archiveNews__anc:hover .p-archiveNews__title { color: #1630c6; } .p-archiveNews__anc:hover .p-archiveNews__arrow { color: #fff; } .p-archiveNews__anc:hover .p-archiveNews__arrow::before { opacity: 1; scale: 1.1; } } .p-archiveNews__infoFrame { display: flex; gap: 1.5rem; align-items: center; } @media (width >= 1025px) { .p-archiveNews__infoFrame { justify-content: space-between; min-width: 23rem; } } .p-archiveNews__infoDate { display: block; font-family: "Montserrat", sans-serif; font-weight: 500; line-height: 1; color: #aaadc1; } @media (width >= 1025px) { .p-archiveNews__infoCat { min-width: 12.5rem; padding: 0.6rem; } } .p-archiveNews__title { margin-top: 1rem; line-height: 1.8571428571; } @media (width >= 1025px) { .p-archiveNews__title { margin-top: 0; font-size: 1.1428571429em; transition: 0.3s; } } .p-archiveNews__arrow { display: none; } @media (width >= 1025px) { .p-archiveNews__arrow { position: absolute; top: 0; right: 2.5rem; bottom: 0; display: block; width: 5rem; height: 5rem; margin: auto; color: #1630c6; background-color: #f0f1f5; border-radius: 0.4rem; } .p-archiveNews__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: 0.3s; transition-property: opacity, scale; } .p-archiveNews__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 1rem; height: 1rem; margin: auto; content: ""; border-right: 2px solid; border-bottom: 2px solid; rotate: -45deg; translate: -25% 0; } } @media (width >= 1025px) { .p-archiveNews.--subMv { position: relative; } .p-archiveNews.--subMv::before, .p-archiveNews.--subMv::after { position: absolute; top: -0.6rem; right: calc(100% - 1px); width: 2.7rem; height: 2.7rem; content: ""; background: url("../img/common/deco_mv_radius_01.svg") center/100% 100% no-repeat; } .p-archiveNews.--subMv::after { right: auto; left: calc(100% - 1px); scale: -1 1; } } .p-archiveNews.--subMv .p-archiveNews__anc { background: #f6f7f9; } /* -------------------------------------------- WORKS -------------------------------------------- */ .p-archiveWorksNav { white-space: nowrap; overflow: auto; overscroll-behavior: none; scrollbar-width: none; } .p-archiveWorksNav::-webkit-scrollbar { display: none; } @media (width < 1025px) { .p-archiveWorksNav { margin: 0 calc(50% - 50vw); } } .p-archiveWorksNav__list { position: relative; display: flex; gap: 1.5rem; justify-content: center; margin: 0 auto; } @media (width < 1025px) { .p-archiveWorksNav__list { width: fit-content; min-width: 100%; padding: 0 7.6923076923vw; } } @media (width >= 768px) { .p-archiveWorksNav__list { gap: 3rem; } } @media (width >= 1025px) { .p-archiveWorksNav__list { gap: 4rem; } } .p-archiveWorksNav__list::before { position: absolute; right: 7.6923076923vw; bottom: 0; left: 7.6923076923vw; content: ""; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-archiveWorksNav__list::before { right: 0; left: 0; } } .p-archiveWorksNav__btn { position: relative; display: flex; align-items: center; height: 100%; padding-top: 0.5rem; padding-bottom: 1.5rem; font-weight: 500; line-height: 1.3; text-align: center; opacity: 0.4; transition: opacity 0.3s; } @media (width >= 1025px) { .p-archiveWorksNav__btn { padding-bottom: 2rem; font-size: 1.1428571429em; } } @media (hover: hover) { .p-archiveWorksNav__btn:hover { opacity: 1; } } .p-archiveWorksNav__btn::before { position: absolute; right: 0; bottom: 0; left: 0; height: 0.3rem; content: ""; background-color: #687df4; opacity: 0; transition: opacity 0.3s; } .p-archiveWorksNav__btn.is-act { pointer-events: none; opacity: 1; } .p-archiveWorksNav__btn.is-act::before { opacity: 1; } .p-archiveWorksNav.--top .p-archiveWorksNav__list::before { border-bottom-color: rgba(255, 255, 255, 0.3); } @media (width < 1025px) { .p-archiveWorksNav.--labo .p-archiveWorksNav__list { gap: 3rem; } } .p-archiveWorks { display: grid; gap: 4rem; } @media (width >= 768px) { .p-archiveWorks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 2rem; } } @media (width >= 1025px) { .p-archiveWorks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6rem 2.5rem; } } .p-archiveWorks__anc { display: block; } @media (hover: hover) { .p-archiveWorks__anc:hover .p-archiveWorks__pic { outline-color: #044ac7; } } .p-archiveWorks__pic { display: flex; align-items: center; width: 100%; aspect-ratio: 660/868; padding: 2.2rem 2.7rem; overflow: hidden; outline: 4px solid transparent; background: #ededf0; border-radius: 1rem; } .p-archiveWorks__pic > img { box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.2); } .p-archiveWorks__title { display: -webkit-box; margin-top: 1.5rem; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; font-size: 1.0714285714em; font-weight: 500; line-height: 1.4333333333; color: #fff; -webkit-box-orient: vertical; } @media (width >= 1025px) { .p-archiveWorks__title { margin-top: 2rem; font-size: 1.1428571429em; } } .p-archiveWorks__tagFrame { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .p-archiveWorks__tag { position: relative; z-index: 1; color: #2a2f4e; } @media (hover: hover) { .p-archiveWorks__tag:hover { color: #fff; } .p-archiveWorks__tag:hover::before { opacity: 1; } } .p-archiveWorks__tag::before { position: absolute; inset: -1px; z-index: -1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: opacity 0.3s; } @media (width < 768px) { .p-archiveWorks.--top .p-archiveWorks__item:nth-child(n+5) { display: none; } } .p-archiveWorks.--sub .p-archiveWorks__pic { background: #fff; } .p-archiveWorks.--sub .p-archiveWorks__title { color: #2a2f4e; } .p-archiveWorks.--mono { grid-template-columns: minmax(0, 1fr); } .p-archiveWorks.--mono .p-archiveWorks__pic { padding: 1.8rem 2.2rem; } @media (width >= 1025px) { .p-archiveWorks.--mono .p-archiveWorks__pic { padding: 1.5rem 1.8rem; } } .p-archiveWorks.--labo .p-archiveWorks__pic { aspect-ratio: 660/438; padding: 0; overflow: hidden; } .p-archiveWorks.--labo .p-archiveWorks__pic > img { box-shadow: none; } .p-archiveWorks.--labo:not(.--mono) .p-archiveWorks__title { color: #2a2f4e; } /* -------------------------------------------- INFOMATION -------------------------------------------- */ .p-objInfo { border-top: 1px solid #d3d9e5; } .p-objInfo__item { padding: 1.5rem 0; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-objInfo__item { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 4rem; padding: 3rem; } } .p-objInfo__titleFrame { margin-bottom: 1.2rem; } @media (width >= 1025px) { .p-objInfo__titleFrame { display: flex; align-items: center; margin-bottom: 0; } } .p-objInfo__title { font-weight: 500; line-height: 1.3; } @media (width >= 1025px) { .p-objInfo__title { font-size: 1.1428571429em; } } .p-objInfo__contFrame { line-height: 1.8571428571; } @media (width < 1025px) { .p-objInfo__contFrame { letter-spacing: 0; } } @media (width >= 1025px) { .p-objInfo__contFrame { font-size: 1.1428571429em; line-height: 1.5625; } } /* -------------------------------------------- COLUMN OFFSET -------------------------------------------- */ .p-objColOffset { display: grid; gap: 5rem; } @media (width >= 1025px) { .p-objColOffset { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem; } } @media (width >= 1025px) { .p-objColOffset__item:nth-child(2) { translate: 0 -10rem; } .p-objColOffset__item:nth-child(3) { translate: 0 -20rem; } } .p-objColOffset__pic { width: 100%; height: auto; aspect-ratio: 1; overflow: clip; border-radius: 1rem; } .p-objColOffset__pic.--retio02 { aspect-ratio: 560/480; } .p-objColOffset__contFrame { padding-top: 2.2rem; } @media (width >= 1025px) { .p-objColOffset__contFrame { padding-top: 4.5rem; } } .p-objColOffset__title { position: relative; display: flex; gap: 2rem; min-height: 7.5rem; margin-bottom: 3rem; font-weight: 600; color: #1630c6; } @media (width >= 1025px) { .p-objColOffset__title { margin-bottom: 2rem; } } .p-objColOffset__titleNum { position: relative; font-family: "Montserrat", sans-serif; font-size: 2.5em; line-height: 1; } @media (width >= 1025px) { .p-objColOffset__titleNum { font-size: 2.2857142857em; } } .p-objColOffset__titleNum::before { position: absolute; top: -0.8rem; right: 0; width: 1px; height: 10rem; content: ""; background-color: currentColor; rotate: 45deg; } .p-objColOffset__titleMain { padding-top: 3rem; font-size: 1.4285714286em; font-feature-settings: "palt"; line-height: 1.7; } @media (width >= 1025px) { .p-objColOffset__titleMain { font-size: 1.6428571429em; } } @media (width >= 1280px) { .p-objColOffset__titleMain { font-size: 1.8571428571em; } } .p-objColOffset__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-objColOffset__text { font-size: 1.1428571429em; line-height: 2.5; } } .p-objColOffset__btnFrame { display: flex; justify-content: center; margin-top: 3rem; } @media (width >= 1025px) { .p-objColOffset__btnFrame { margin-top: 4rem; } } .p-objColOffset__supLinkFrame { display: flex; justify-content: center; margin-top: 2.5rem; } @media (width >= 1025px) { .p-objColOffset__supLinkFrame { font-size: 1.1428571429em; } } @media (width >= 1025px) { .p-objColOffset.--col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } } /* -------------------------------------------- COLUMN LINK -------------------------------------------- */ @media (width >= 1025px) { .p-objColLink { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } } .p-objColLink__item { padding: 3rem 0; border-top: 1px solid #d3d9e5; border-bottom: 1px solid #d3d9e5; } @media (width < 1025px) { .p-objColLink__item:not(:last-child) { border-bottom: none; } } @media (width >= 1025px) { .p-objColLink__item { padding: 6rem 4rem; } } .p-objColLink__title { font-size: 1.2142857143em; font-weight: 600; } @media (width < 1025px) { .p-objColLink__title.--ls0SPTB { letter-spacing: 0; } } @media (width >= 1025px) { .p-objColLink__title { font-size: 1.5714285714em; } } .p-objColLink__text { margin-top: 1.5rem; line-height: 1.8571428571; } @media (width >= 1025px) { .p-objColLink__text { font-size: 1.1428571429em; line-height: 2.5; } } .p-objColLink__linkFrame { margin-top: 3rem; } @media (width < 1025px) { .p-objColLink__linkFrame { display: flex; justify-content: flex-end; } } @media (width >= 1025px) { .p-objColLink__linkFrame { margin-top: 4rem; } } /* -------------------------------------------- XXX -------------------------------------------- */ /* -------------------------------------------- MV -------------------------------------------- */ .p-subMv { padding-top: 2rem; padding-bottom: 4rem; } @media (width >= 1025px) { .p-subMv { padding-top: 2.5rem; padding-bottom: 10rem; } } .p-subMv__bcFrame { margin-bottom: 8rem; } @media (width >= 1025px) { .p-subMv__bcFrame { margin-bottom: 13rem; } } .p-subMv__title { font-size: 1.8571428571em; font-weight: 600; line-height: 1.6; color: #1630c6; text-align: center; } @media (width >= 1025px) { .p-subMv__title { font-size: 3.5714285714em; } } .p-subMv__picFrame { position: relative; z-index: 2; margin-top: 9rem; margin-right: -7.6923076923vw; } @media (width >= 1025px) { .p-subMv__picFrame { margin-top: 11rem; margin-right: calc(50% - 50vw); } } .p-subMv__pic { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 720/420; overflow: hidden; border-radius: 1rem 0 0 1rem; } @media (width >= 1025px) { .p-subMv__pic { height: 42rem; aspect-ratio: unset; } } .p-subMv:has(.p-subMv__picFrame) { padding-bottom: 0; } @media (width < 1025px) { .p-subMv.--pdbLgSP { padding-bottom: 9rem; } } /* -------------------------------------------- MV BACKGROUND IMAGE -------------------------------------------- */ .p-subMvBgImg { padding-top: 2rem; } @media (width >= 1025px) { .p-subMvBgImg { padding-top: 0; } } .p-subMvBgImg__mainInner { padding: 0 5.1282051282vw; } @media (width >= 1025px) { .p-subMvBgImg__mainInner { position: relative; width: calc(100% - 8rem); padding: 0; margin: 0 auto; } } .p-subMvBgImg__bcFrame { padding: 0 2.5641025641vw; margin-bottom: 1.5rem; } @media (width >= 1025px) { .p-subMvBgImg__bcFrame { position: absolute; top: 3rem; left: 6rem; z-index: 1; padding: 0; color: #fff; } } .p-subMvBgImg__mainBgPicFrame { position: relative; pointer-events: none; } .p-subMvBgImg__mainBgPic { width: 100%; height: auto; aspect-ratio: 700/800; overflow: hidden; border-radius: 1rem; } @media (width >= 1025px) { .p-subMvBgImg__mainBgPic { aspect-ratio: 1520/560; } } .p-subMvBgImg__title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; font-weight: 600; color: #fff; text-align: center; filter: drop-shadow(0 0 5rem rgba(0, 0, 0, 0.9)); } .p-subMvBgImg__titleMain { font-size: 1.7142857143em; line-height: 1; line-height: 1.5; } @media (width >= 768px) { .p-subMvBgImg__titleMain { font-size: 3em; } } @media (width >= 1025px) { .p-subMvBgImg__titleMain { font-size: 4.2857142857em; } } .p-subMvBgImg__titleSupMiddle { display: flex; align-items: flex-end; margin-top: 1rem; font-size: 1em; line-height: 1; } @media (width >= 768px) { .p-subMvBgImg__titleSupMiddle { margin-top: 1.5rem; font-size: 1.2857142857em; } } @media (width >= 1025px) { .p-subMvBgImg__titleSupMiddle { font-size: 1.5714285714em; } } .p-subMvBgImg__titleSup { display: flex; align-items: flex-end; margin-top: 1.5rem; font-family: "Montserrat", sans-serif; font-size: 0.8571428571em; line-height: 1; } @media (width >= 768px) { .p-subMvBgImg__titleSup { margin-top: 2.5rem; font-size: 1.1428571429em; } } @media (width >= 1025px) { .p-subMvBgImg__titleSup { font-size: 1.4285714286em; } } .p-subMvBgImg__titleSup::after { display: block; width: 0.3rem; height: 0.3rem; margin-left: 0.15rem; content: ""; background: #fff; translate: 0 -70%; } @media (width >= 1025px) { .p-subMvBgImg__titleSup::after { width: 0.5rem; height: 0.5rem; margin-left: 0.3rem; } } .p-subMvBgImg__newsFrame { margin-top: -1.5rem; } @media (width >= 1025px) { .p-subMvBgImg__newsFrame { margin-top: -2rem; } } .p-subMvBgImg__btnFrame { position: relative; z-index: 2; margin-top: -5.5rem; overflow: clip; } @media (width >= 768px) { .p-subMvBgImg__btnFrame { margin-top: -7.5rem; } } .p-subMvBgImg__btnInner { padding: 0 7.6923076923vw; } @media (width >= 768px) { .p-subMvBgImg__btnInner { padding: 0 7.8125vw; } } @media (width >= 1025px) { .p-subMvBgImg__btnInner { padding: 0 4.375vw; } } .p-subMvBgImg__btnList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } @media (width >= 768px) { .p-subMvBgImg__btnList { gap: 1rem; } } @media (width >= 1025px) { .p-subMvBgImg__btnList { gap: 2.2rem; } } @media (width >= 1025px) { .p-subMvBgImg__btnItem { position: relative; } .p-subMvBgImg__btnItem::before, .p-subMvBgImg__btnItem::after { position: absolute; top: 5rem; right: calc(100% - 1px); width: 2.7rem; height: 2.7rem; content: ""; background: url("../img/common/deco_mv_radius_01.svg") center/100% 100% no-repeat; } .p-subMvBgImg__btnItem::after { right: auto; left: calc(100% - 1px); scale: -1 1; } } @media (width >= 1280px) { .p-subMvBgImg__btnItem::before, .p-subMvBgImg__btnItem::after { top: 4.9rem; } } @media (hover: hover) { .p-subMvBgImg__btnItem:hover .p-subMvBgImg__btnAnc { translate: 0 0; } .p-subMvBgImg__btnItem:hover .p-subMvBgImg__btnTextFrame { filter: grayscale(0%); } .p-subMvBgImg__btnItem:hover .p-subMvBgImg__btnLogoPic > img, .p-subMvBgImg__btnItem:hover .p-subMvBgImg__btnText { opacity: 1; } } .p-subMvBgImg__btnItem.is-active { pointer-events: none; } .p-subMvBgImg__btnItem.is-active .p-subMvBgImg__btnArrow { visibility: hidden; } .p-subMvBgImg__btnItem.is-active .p-subMvBgImg__btnAnc { translate: 0 0; } .p-subMvBgImg__btnItem.is-active .p-subMvBgImg__btnProgress { visibility: visible; } .p-subMvBgImg__btnItem.is-active .p-subMvBgImg__btnTextFrame { filter: grayscale(0%); } .p-subMvBgImg__btnItem.is-active .p-subMvBgImg__btnLogoPic > img, .p-subMvBgImg__btnItem.is-active .p-subMvBgImg__btnText { opacity: 1; } .p-subMvBgImg__btnAnc { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 1rem 1rem 3.1rem; background-color: #f6f7f9; border-radius: 0.6rem 0.6rem 0 0; translate: 0 3rem; transition: translate 0.3s; } @media (width >= 768px) { .p-subMvBgImg__btnAnc { padding: 2rem 1rem 3.1rem; } } @media (width >= 1025px) { .p-subMvBgImg__btnAnc { padding: 3rem 2rem 1rem; translate: 0 5rem; } } .p-subMvBgImg__btnProgress { position: absolute; top: 0; left: 0; visibility: hidden; width: 100%; height: 2px; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; } @media (width >= 768px) { .p-subMvBgImg__btnProgress { height: 4px; } } .p-subMvBgImg__btnTextFrame { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; justify-content: center; filter: grayscale(100%); } @media (width >= 1025px) { .p-subMvBgImg__btnTextFrame { flex-direction: row; transition: filter 0.3s; } } .p-subMvBgImg__btnLogoPic { width: auto; height: 2.6rem; aspect-ratio: 150/50; padding: 0.4rem; background-color: #fff; } @media (width >= 1025px) { .p-subMvBgImg__btnLogoPic { height: 5rem; padding: 1rem; } } .p-subMvBgImg__btnLogoPic > img { opacity: 0.4; } @media (width >= 1025px) { .p-subMvBgImg__btnLogoPic > img { transition: opacity 0.3s; } } .p-subMvBgImg__btnText { margin: auto; font-size: 0.8571428571em; font-weight: 600; line-height: 1.4166666667; text-align: center; opacity: 0.4; } @media (width >= 768px) { .p-subMvBgImg__btnText { font-size: 1.2em; } } @media (width >= 1025px) { .p-subMvBgImg__btnText { font-size: 1.7142857143em; transition: opacity 0.3s; } } .p-subMvBgImg__btnArrow { position: relative; display: none; width: 2.5rem; height: 2.5rem; margin-top: 0.5rem; color: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .p-subMvBgImg__btnArrow { display: block; width: 3.9rem; height: 3.9rem; margin-top: 2rem; } } .p-subMvBgImg__btnArrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; } .p-subMvBgImg__btnArrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.6rem; height: 0.6rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: -45deg; translate: -25% 0; } /* -------------------------------------------- MV WORKS -------------------------------------------- */ .p-subMvWorks { position: relative; z-index: 2; padding-top: 2rem; } @media (width >= 1025px) { .p-subMvWorks { padding-top: 0; } } .p-subMvWorks__bcFrame { margin-bottom: 1.5rem; } @media (width >= 1025px) { .p-subMvWorks__bcFrame { position: absolute; top: 3rem; left: 9rem; z-index: 3; margin-bottom: 0; color: #fff; } } .p-subMvWorks__bcInner { padding: 0 7.6923076923vw; } @media (width >= 1025px) { .p-subMvWorks__bcInner { padding: 0; } } .p-subMvWorks__mainInner { padding: 0 5.1282051282vw; } @media (width >= 1025px) { .p-subMvWorks__mainInner { padding: 0 4rem; } } .p-subMvWorks__mainBg { position: relative; z-index: 1; padding: 3.5rem 2.5rem 4rem; } @media (width >= 1025px) { .p-subMvWorks__mainBg { padding: 12rem 5rem; } } @media (width >= 1280px) { .p-subMvWorks__mainBg { padding: 15rem 5rem; } } .p-subMvWorks__mainBg::before, .p-subMvWorks__mainBg::after { position: absolute; inset: 0; content: ""; border-radius: 1rem; } .p-subMvWorks__mainBg::before { z-index: -1; background: url("../img/common/bg_noise_01.png.webp"); background-size: 5rem 5rem; mix-blend-mode: soft-light; opacity: 0.35; } @media (width >= 1025px) { .p-subMvWorks__mainBg::before { background-size: 10rem 10rem; } } .p-subMvWorks__mainBg::after { z-index: -2; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); } .p-subMvWorks__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; } @media (width >= 1025px) { .p-subMvWorks__layout { grid-template-columns: minmax(0, 1fr) 38.5%; gap: 7.5rem; max-width: 128rem; margin: 0 auto; direction: rtl; } } .p-subMvWorks__contFrame { direction: ltr; } .p-subMvWorks__typeFrame { display: flex; width: fit-content; margin-bottom: 3rem; color: #fff; border: 1px solid currentColor; } .p-subMvWorks__typeLogoFrame { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1.3rem; background: currentColor; } @media (width >= 1025px) { .p-subMvWorks__typeLogoFrame { padding: 0.7rem 1.8rem; } } .p-subMvWorks__typeLogoPic { width: 6rem; height: auto; aspect-ratio: 84/25; } @media (width >= 1025px) { .p-subMvWorks__typeLogoPic { width: 8.4rem; } } .p-subMvWorks__typeText { display: flex; align-items: center; justify-content: center; padding: 0.4rem 1rem 0.5rem; font-size: 0.7857142857em; font-weight: 500; line-height: 1.1; letter-spacing: 0; } @media (width >= 1025px) { .p-subMvWorks__typeText { padding: 0.4rem 1.5rem 0.5rem; font-size: 1.1428571429em; } } .p-subMvWorks__titleSup { margin-bottom: 2rem; font-weight: 600; line-height: 1.7857142857; color: #fff; } @media (width >= 1025px) { .p-subMvWorks__titleSup { font-size: 1.4285714286em; } } .p-subMvWorks__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.4545454545; color: #fff; } @media (width >= 1025px) { .p-subMvWorks__title { font-size: 2.8571428571em; line-height: 1.5; } } .p-subMvWorks__titleSupUnder { margin-top: 2rem; font-size: 0.9285714286em; line-height: 1.6153846154; color: #fff; } @media (width >= 1025px) { .p-subMvWorks__titleSupUnder { font-size: 1.2857142857em; } } .p-subMvWorks__tagFrame { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; } @media (width >= 1025px) { .p-subMvWorks__tagFrame { margin-top: 4rem; } } .p-subMvWorks__tag { position: relative; z-index: 1; } @media (hover: hover) { .p-subMvWorks__tag:hover { color: #fff; } .p-subMvWorks__tag:hover::before { opacity: 1; } } .p-subMvWorks__tag::before { position: absolute; inset: -1px; z-index: -1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: opacity 0.3s; } .p-subMvWorks__picFrame { position: relative; } .p-subMvWorks__pic { width: 100%; height: auto; aspect-ratio: 600/802; padding: 2rem 2.2rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-subMvWorks__pic { position: absolute; top: -3rem; right: 0; left: 0; padding: 3.2rem 3.6rem; } } @media (width >= 1280px) { .p-subMvWorks__pic { top: -5rem; } } .p-subMvWorks__pic > img { filter: drop-shadow(0 0.2rem 1.5rem rgba(0, 0, 0, 0.2)); } @media (width >= 1025px) { .p-subMvWorks:not(:has(.p-subMvWorks__picFrame)) .p-subMvWorks__layout { grid-template-columns: minmax(0, 1fr); } .p-subMvWorks:not(:has(.p-subMvWorks__picFrame)) .p-subMvWorks__contFrame { display: flex; flex-direction: column; align-items: center; text-align: center; } } /* -------------------------------------------- BREADCRUMB -------------------------------------------- */ .p-subBc { padding-top: 2rem; padding-bottom: 9rem; } @media (width >= 1025px) { .p-subBc { padding-top: 2.5rem; padding-bottom: 14rem; } } /* -------------------------------------------- FIXED NAV -------------------------------------------- */ .p-subFixedNav { width: calc(100% - 2rem); padding: 1rem; margin: 0 auto; background-color: #fff; border-radius: 1rem; box-shadow: 0 0 1rem rgba(42, 47, 78, 0.1); } @media (width >= 1025px) { .p-subFixedNav { width: fit-content; border: 2px solid #1630c6; box-shadow: unset; } } .p-subFixedNav__btn { position: relative; display: flex; gap: 1rem; align-items: center; width: 100%; padding-left: 3rem; } @media (width >= 1025px) { .p-subFixedNav__btn { display: none; } } .p-subFixedNav__btn.is-act .p-subFixedNav__btnIcon { background-color: #b2b3bc; } .p-subFixedNav__btn.is-act .p-subFixedNav__btnIcon::before, .p-subFixedNav__btn.is-act .p-subFixedNav__btnIcon::after { background-color: #fff; } .p-subFixedNav__btn.is-act .p-subFixedNav__btnIcon::after { rotate: 0deg; } .p-subFixedNav__btnText { flex: 1; font-family: "Montserrat", sans-serif; font-size: 1.2857142857em; font-weight: 600; line-height: 1; text-align: center; } .p-subFixedNav__btnIcon { position: relative; width: 3rem; height: auto; aspect-ratio: 1; background-color: #f6f7f9; border-radius: 0.5rem; transition: background-color 0.3s; } .p-subFixedNav__btnIcon::before, .p-subFixedNav__btnIcon::after { position: absolute; inset: 0; width: 1.5rem; height: 1px; margin: auto; content: ""; background-color: #1630c6; transition: 0.3s; } .p-subFixedNav__btnIcon::after { rotate: -90deg; } .p-subFixedNav__contFrame { display: none; } @media (width >= 1025px) { .p-subFixedNav__contFrame { display: contents !important; } } .p-subFixedNav__list { display: grid; gap: 0.6rem; padding: 2rem 1rem 1rem; } @media (width >= 1025px) { .p-subFixedNav__list { display: flex; gap: 0.5rem; padding: 0; } } .p-subFixedNav__anc { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 0.8rem 0.8rem 1.8rem; background-color: #f0f1f5; border-radius: 0.5rem; } @media (width >= 1025px) { .p-subFixedNav__anc { padding: 1.2rem 2rem 1.2rem 4rem; background-color: unset; } } @media (width >= 1025px) and (hover: hover) { .p-subFixedNav__anc:hover { color: #fff; } .p-subFixedNav__anc:hover::before { background: #fff; } .p-subFixedNav__anc:hover::after { opacity: 1; } } @media (width >= 1025px) { .p-subFixedNav__anc::before { position: absolute; top: 0; bottom: 0; left: 2rem; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; background: #1630c6; border-radius: 0.2rem; transition: background 0.3s; } .p-subFixedNav__anc::after { position: absolute; inset: 0; z-index: -1; display: block; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: opacity 0.3s; } } .p-subFixedNav__text { font-size: 1.1428571429em; font-weight: 600; line-height: 1; } .p-subFixedNav__arrow { position: relative; display: block; width: 3rem; height: 3rem; color: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .p-subFixedNav__arrow { display: none; } } .p-subFixedNav__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; } .p-subFixedNav__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.7rem; height: 0.7rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: 45deg; translate: 0 -15%; } /* -------------------------------------------- ABOUT -------------------------------------------- */ .p-subAbout { padding-top: 9rem; padding-bottom: 10rem; } @media (width >= 1025px) { .p-subAbout { padding-top: 17rem; padding-bottom: 12rem; } .p-subAbout.--pdbLgPC { padding-bottom: 18rem; } } .p-subAbout.--particle { position: relative; } .p-subAbout.--particle::before { position: absolute; top: 7rem; left: 50%; z-index: -1; display: block; width: 140vw; aspect-ratio: 1095/550; content: ""; background: url("../img/common/bg_particle_01.png.webp") center bottom/100% auto no-repeat; mix-blend-mode: screen; transform: translateX(-50%); } @media (width >= 1025px) { .p-subAbout.--particle::before { top: 10rem; width: 160rem; aspect-ratio: 1600/470; background-image: url("../img/common/bg_particle_pc_01.png.webp"); } } .p-subAbout__mainLayout { display: grid; gap: 5rem; } @media (width >= 1025px) { .p-subAbout__mainLayout { grid-template-columns: minmax(0, 1fr) 50%; } } .p-subAbout__mainCatch { font-size: 1.7857142857em; font-weight: 600; } @media (width >= 1025px) { .p-subAbout__mainCatch { font-size: 2.8571428571em; line-height: 2; } } .p-subAbout__mainTextFrame { display: grid; gap: 3rem; } @media (width >= 1025px) { .p-subAbout__mainTextFrame { gap: 4rem; } } .p-subAbout__mainText { font-weight: 500; line-height: 1.8571428571; } @media (width >= 1025px) { .p-subAbout__mainText { font-size: 1.4285714286em; line-height: 2.1; } } .p-subAbout__picFrame { margin-top: 5rem; } @media (width >= 1025px) { .p-subAbout__picFrame { margin-top: 14rem; } } .p-subAbout__picFrame.--particleMarketing, .p-subAbout__picFrame.--particleContent { position: relative; } .p-subAbout__picFrame.--particleMarketing::before, .p-subAbout__picFrame.--particleContent::before { position: absolute; top: -3rem; bottom: -2rem; left: 50%; z-index: -1; display: block; content: ""; background: url("../img/common/bg_particle_01.png.webp") center/auto 100% no-repeat; mix-blend-mode: screen; transform: translateX(-50%); } @media (width >= 1025px) { .p-subAbout__picFrame.--particleMarketing::before, .p-subAbout__picFrame.--particleContent::before { top: auto; bottom: -9rem; aspect-ratio: 3200/2246; background-image: url("../img/common/bg_particle_pc_01.png.webp"); background-size: 100% auto; } } .p-subAbout__picFrame.--particleMarketing::before { width: 175vw; } @media (width >= 1025px) { .p-subAbout__picFrame.--particleMarketing::before { width: 160rem; } } .p-subAbout__picFrame.--particleContent::before { width: 130vw; } @media (width >= 1025px) { .p-subAbout__picFrame.--particleContent::before { width: 183rem; } } .p-subAbout__pic { width: 100%; height: auto; margin: 0 auto; } .p-subAbout__pic.--marketing { max-width: 45rem; aspect-ratio: 780/1043; } @media (width < 576px) { .p-subAbout__pic.--marketing { width: auto; margin-right: -7.6923076923vw; margin-left: -7.6923076923vw; } } @media (width >= 1025px) { .p-subAbout__pic.--marketing { max-width: 95rem; aspect-ratio: 1898/1340; } } .p-subAbout__contentPicFrame { position: relative; width: 100%; max-width: 45rem; height: auto; aspect-ratio: 700/749; margin: 0 auto; counter-reset: number 0; } @media (width >= 1025px) { .p-subAbout__contentPicFrame { max-width: 102rem; aspect-ratio: 2040/1739; } } .p-subAbout__contentPic { width: 100%; height: 100%; } .p-subAbout__contentPicAnc { position: relative; position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 0.3rem; align-items: center; justify-content: space-between; width: 28.8%; height: auto; aspect-ratio: 1; padding: 1rem 0.5rem 0.5rem; text-align: center; border-radius: 50%; } @media (hover: hover) { .p-subAbout__contentPicAnc:hover::before { scale: 1.05; } } @media (width >= 768px) { .p-subAbout__contentPicAnc { padding: 1.5rem 0.5rem 1rem; } } @media (width >= 1025px) { .p-subAbout__contentPicAnc { width: 27.45%; padding: 3.5rem 1rem 2rem; } } .p-subAbout__contentPicAnc::before { position: absolute; inset: 0; z-index: -1; content: ""; background-color: #fff; border-radius: 50%; transition: scale 0.3s; } .p-subAbout__contentPicAnc.--ip01 { top: 3.3%; left: 8.2%; } @media (width >= 1025px) { .p-subAbout__contentPicAnc.--ip01 { top: 4.5%; left: 15.7%; } } .p-subAbout__contentPicAnc.--ip02 { top: 48.2%; left: 2%; } @media (width >= 1025px) { .p-subAbout__contentPicAnc.--ip02 { top: 42.5%; } } .p-subAbout__contentPicAnc.--ip03 { bottom: 2%; left: 36.3%; } @media (width >= 1025px) { .p-subAbout__contentPicAnc.--ip03 { bottom: 2.3%; } } .p-subAbout__contentPicAnc.--ip04 { top: 49.4%; right: 2%; } @media (width >= 1025px) { .p-subAbout__contentPicAnc.--ip04 { top: 42.5%; } } .p-subAbout__contentPicAnc.--ip05 { top: 3.3%; right: 8.2%; } @media (width >= 1025px) { .p-subAbout__contentPicAnc.--ip05 { top: 4.5%; right: 15.7%; } } .p-subAbout__contentPicNum { position: absolute; top: 0.2rem; left: -0.4rem; display: flex; align-items: center; justify-content: center; width: 31%; height: auto; aspect-ratio: 1; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 50%; } .p-subAbout__contentPicNum::before { font-size: 0.7142857143em; font-weight: 500; color: #fff; content: counter(number, decimal-leading-zero); counter-increment: number 1; } @media (width >= 1025px) { .p-subAbout__contentPicNum::before { font-size: 2em; } } .p-subAbout__contentPicIcon { width: 38%; height: auto; aspect-ratio: 45/32; fill: #1630c6; } .p-subAbout__contentPicTitle { font-size: 0.6785714286em; font-weight: 600; line-height: 1.5; color: #1630c6; letter-spacing: 0.04em; } @media (width >= 768px) { .p-subAbout__contentPicTitle { font-size: 0.8214285714em; } } @media (width >= 1025px) { .p-subAbout__contentPicTitle { font-size: 1.2857142857em; } } .p-subAbout__contentPicTitle.--sm { font-size: 0.6071428571em; } @media (width >= 768px) { .p-subAbout__contentPicTitle.--sm { font-size: 0.75em; } } @media (width >= 1025px) { .p-subAbout__contentPicTitle.--sm { font-size: 1.2857142857em; } } .p-subAbout__contentPicText { display: none; } @media (width >= 1025px) { .p-subAbout__contentPicText { display: block; line-height: 1.7142857143; } } .p-subAbout__contentPicArrow { position: relative; display: block; width: 2rem; height: 2rem; color: #fff; border-radius: 0.4rem; } @media (width >= 1025px) { .p-subAbout__contentPicArrow { width: 3.3rem; height: 3.3rem; } } .p-subAbout__contentPicArrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 1; transition: 0.3s; transition-property: scale; } @media (width >= 1025px) { .p-subAbout__contentPicArrow::before { opacity: 1; } } .p-subAbout__contentPicArrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.6rem; height: 0.6rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: 45deg; translate: 0 -15%; } @media (width >= 1025px) { .p-subAbout__contentPicArrow::after { width: 0.8rem; height: 0.8rem; border-width: 2px; } } /* -------------------------------------------- WORKS -------------------------------------------- */ .p-subWorks { padding-top: 8rem; padding-bottom: 9rem; } @media (width >= 1025px) { .p-subWorks { padding-top: 15rem; padding-bottom: 15rem; } } .p-subWorks__titleFrame { margin-bottom: 4rem; } @media (width >= 1025px) { .p-subWorks__titleFrame { margin-bottom: 7.5rem; } } .p-subWorks__btnFrame { display: flex; justify-content: center; margin-top: 4rem; } @media (width >= 1025px) { .p-subWorks__btnFrame { margin-top: 6rem; } } /* -------------------------------------------- PAGE NAV -------------------------------------------- */ .p-subPageNav { position: relative; z-index: 1; padding-bottom: 10rem; } @media (width >= 1025px) { .p-subPageNav { padding-bottom: 15rem; } } .p-subPageNav::before { position: absolute; inset: 2.5rem calc(50% - 50vw) 0; z-index: -1; content: ""; background-color: #e5e9f2; } .p-subPageNav__listFrame { padding: 2.5rem 2rem 0; background-color: #e5e9f2; border-radius: 1rem; } @media (width >= 1025px) { .p-subPageNav__listFrame { padding: 0; } } .p-subPageNav__list { border-top: 1px dashed #a8b9d9; } @media (width >= 1025px) { .p-subPageNav__list { display: grid; border-top: none; } } .p-subPageNav__item { border-bottom: 1px dashed #a8b9d9; } @media (width >= 1025px) { .p-subPageNav__item { border-bottom: none; } .p-subPageNav__item + .p-subPageNav__item { position: relative; } .p-subPageNav__item + .p-subPageNav__item::before { position: absolute; top: 3rem; bottom: 4.5rem; left: 0; height: 3rem; margin: auto; content: ""; border-left: 1px dashed #a8b9d9; } } .p-subPageNav__anc { display: flex; gap: 1rem; align-items: center; justify-content: space-between; height: 100%; padding: 2rem 1.5rem; } @media (width >= 1025px) { .p-subPageNav__anc { flex-direction: column; gap: 1.5rem; padding: 3rem 1rem 0; } } @media (hover: hover) { .p-subPageNav__anc:hover { color: #1630c6; } .p-subPageNav__anc:hover .p-subPageNav__arrow::before { scale: 1.1; } } .p-subPageNav__text { display: flex; gap: 1rem; align-items: center; font-weight: 600; line-height: 1.5714285714; letter-spacing: 0.03em; } @media (width >= 1025px) { .p-subPageNav__text { flex: 1; font-size: 1.1428571429em; } } .p-subPageNav__arrow { position: relative; display: block; width: 2.3rem; height: 2.3rem; color: #fff; border-radius: 0.4rem; } @media (width >= 768px) { .p-subPageNav__arrow { width: 3.3rem; height: 3.3rem; } } .p-subPageNav__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 1; transition: 0.3s; transition-property: scale; } @media (width >= 1025px) { .p-subPageNav__arrow::before { opacity: 1; } } .p-subPageNav__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.6rem; height: 0.6rem; margin: auto; content: ""; border-right: 1px solid; border-bottom: 1px solid; rotate: 45deg; translate: 0 -15%; } @media (width >= 1025px) { .p-subPageNav__arrow::after { width: 0.8rem; height: 0.8rem; border-width: 2px; } } .p-subPageNav__listDeco { position: relative; width: 1px; height: 10.5rem; margin: auto; background-color: #c2cada; } @media (width >= 1025px) { .p-subPageNav__listDeco { height: 14rem; } } .p-subPageNav__listDeco::before { position: absolute; right: 0; bottom: 0; left: 0; display: block; width: 1px; height: 2rem; content: ""; background-color: #1630c6; } @media (width >= 1025px) { .p-subPageNav__listDeco::before { height: 4rem; } } .p-subPageNav__listDeco::after { position: absolute; top: 4.5rem; right: calc(50% - 50vw); left: calc(50% - 50vw); height: 1px; content: ""; background-color: #c2cada; } @media (width >= 1025px) { .p-subPageNav__listDeco::after { top: 2rem; } } .p-subPageNav__contFrame { margin-right: -1rem; margin-left: -1rem; } @media (width >= 1025px) { .p-subPageNav__contFrame { margin: 0; } } .p-subPageNav.--headNum { counter-reset: number 0; } .p-subPageNav.--headNum .p-subPageNav__text::before { font-family: "Montserrat", sans-serif; font-size: 1.0714285714em; font-weight: 500; line-height: 1; color: #aaadc1; content: counter(number, decimal-leading-zero) "."; counter-increment: number 1; } @media (width >= 1025px) { .p-subPageNav.--headNum .p-subPageNav__text::before { font-size: 1.2857142857em; } } .p-subPageNav.--marketing .p-subPageNav__listFrame { margin-bottom: 21rem; } @media (width >= 1025px) { .p-subPageNav.--marketing .p-subPageNav__listFrame { margin-bottom: 17.5rem; } } @media (width >= 1025px) { .p-subPageNav.--marketing .p-subPageNav__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .p-subPageNav.--content .p-subPageNav__listFrame { margin-bottom: 9rem; } @media (width >= 1025px) { .p-subPageNav.--content .p-subPageNav__listFrame { margin-bottom: 8rem; } } @media (width >= 1025px) { .p-subPageNav.--content .p-subPageNav__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .p-subPageNav.--contact { padding-bottom: 7rem; } .p-subPageNav.--contact .p-subPageNav__listFrame { margin-bottom: 2.5rem; } @media (width >= 1025px) { .p-subPageNav.--contact .p-subPageNav__listFrame { margin-bottom: 4rem; } } @media (width >= 1025px) { .p-subPageNav.--contact .p-subPageNav__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (width >= 1025px) { .p-subPageNav.--contact .p-subPageNav__anc { text-align: center; } } .p-subPageNav.--osc { padding-bottom: 7rem; } .p-subPageNav.--osc .p-subPageNav__listFrame { margin-bottom: 3.5rem; } @media (width >= 1025px) { .p-subPageNav.--osc .p-subPageNav__listFrame { margin-bottom: 4rem; } } @media (width >= 1025px) { .p-subPageNav.--osc .p-subPageNav__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .p-subPageNav.--company .p-subPageNav__listFrame, .p-subPageNav.--whistleblowing .p-subPageNav__listFrame, .p-subPageNav.--mediaGuide .p-subPageNav__listFrame { max-width: 106rem; margin: 0 auto 3rem; } @media (width >= 1025px) { .p-subPageNav.--company .p-subPageNav__listFrame, .p-subPageNav.--whistleblowing .p-subPageNav__listFrame, .p-subPageNav.--mediaGuide .p-subPageNav__listFrame { margin-bottom: 4rem; } } @media (width >= 1025px) { .p-subPageNav.--company .p-subPageNav__list, .p-subPageNav.--whistleblowing .p-subPageNav__list, .p-subPageNav.--mediaGuide .p-subPageNav__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* -------------------------------------------- RELATED -------------------------------------------- */ .p-subRelated { padding-bottom: 10rem; } @media (width >= 1025px) { .p-subRelated { padding-bottom: 15rem; } } .p-subRelated__titleFrame { margin-bottom: 2.5rem; } @media (width >= 1025px) { .p-subRelated__titleFrame { margin-bottom: 5rem; } } /* -------------------------------------------- RELATED LINK -------------------------------------------- */ .p-subRelatedLink__item { border-bottom: 1px solid #d3d9e5; } .p-subRelatedLink__item:first-child { border-top: 1px solid #d3d9e5; } .p-subRelatedLink__anc { display: flex; gap: 2rem; align-items: center; padding: 3rem 0; } @media (hover: hover) { .p-subRelatedLink__anc:hover { color: #1630c6; } .p-subRelatedLink__anc:hover .p-subRelatedLink__arrow { color: #fff; } .p-subRelatedLink__anc:hover .p-subRelatedLink__arrow::before { opacity: 1; scale: 1.1; } } @media (width >= 1025px) { .p-subRelatedLink__anc { padding: 5rem 0; } } .p-subRelatedLink__title { display: flex; flex: 1; flex-direction: column; gap: 0.8rem; font-weight: 600; } @media (width >= 1025px) { .p-subRelatedLink__title { flex-direction: row; gap: 1.5rem; } } .p-subRelatedLink__titleMain { font-size: 1.2857142857em; line-height: 1; } @media (width >= 1025px) { .p-subRelatedLink__titleMain { font-size: 2em; } } .p-subRelatedLink__titleSup { display: inline-flex; align-items: flex-end; font-size: 0.8571428571em; line-height: 1; color: #1630c6; } @media (width >= 1025px) { .p-subRelatedLink__titleSup { font-size: 1.1428571429em; } } .p-subRelatedLink__titleSup::after { display: block; width: 0.2rem; height: 0.2rem; margin-left: 0.2rem; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 0.1rem; translate: 0 -40%; } @media (width >= 1025px) { .p-subRelatedLink__titleSup::after { width: 0.4rem; height: 0.4rem; margin-left: 0.4rem; } } .p-subRelatedLink__arrow { position: relative; z-index: 1; display: block; flex-shrink: 0; width: 5rem; height: 5rem; margin: auto; color: #1630c6; background: #f0f1f5; border-radius: 0.5rem; } .p-subRelatedLink__arrow::before { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: inherit; opacity: 0; transition: 0.3s; transition-property: opacity, scale; } .p-subRelatedLink__arrow::after { position: absolute; inset: 0; z-index: 2; display: block; width: 0.8rem; height: 0.8rem; margin: auto; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; translate: -25% 0; } /* -------------------------------------------- ABOUT US -------------------------------------------- */ .p-subAboutUs { padding: 10rem 0; } @media (width >= 1025px) { .p-subAboutUs { padding: 15rem 0; } } .p-subAboutUsGrid { display: grid; gap: 1rem 0; margin: 3.5rem 0 0; } @media (width >= 1025px) { .p-subAboutUsGrid { grid-template-columns: repeat(6, 1fr); gap: 2rem; } } .p-subAboutUsGrid .p-subAboutUsGrid__item:nth-child(1), .p-subAboutUsGrid .p-subAboutUsGrid__item:nth-child(2) { grid-column: span 3; } .p-subAboutUsGrid .p-subAboutUsGrid__item:nth-child(3), .p-subAboutUsGrid .p-subAboutUsGrid__item:nth-child(4), .p-subAboutUsGrid .p-subAboutUsGrid__item:nth-child(5) { grid-column: span 2; } .p-subAboutUsCard { position: relative; display: block; overflow: hidden; border-radius: 0.5rem; } @media (width >= 1025px) { .p-subAboutUsCard { border-radius: 1rem; } } @media (hover: hover) { .p-subAboutUsCard:hover .p-subAboutUsCard__bg { scale: 1.05; } } .p-subAboutUsCard .p-subAboutUsCard__bg { transition: scale 0.3s; } .p-subAboutUsCard .p-subAboutUsCard__contents { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 600; color: #f6f7f9; } .p-subAboutUsCard .p-subAboutUsCard__contents .p-subAboutUsCard__ttl { font-size: 1.4285714286em; letter-spacing: 0.05em; } @media (width >= 1025px) { .p-subAboutUsCard .p-subAboutUsCard__contents .p-subAboutUsCard__ttl { font-size: 2em; } } .p-subAboutUsCard .p-subAboutUsCard__contents .p-subAboutUsCard__subTtl { display: inline-flex; align-items: flex-end; font-family: "Montserrat", sans-serif; font-size: 0.8571428571em; letter-spacing: 0; } @media (width >= 1025px) { .p-subAboutUsCard .p-subAboutUsCard__contents .p-subAboutUsCard__subTtl { font-size: 1.1428571429em; } } .p-subAboutUsCard .p-subAboutUsCard__contents .p-subAboutUsCard__subTtl::after { display: block; width: 0.2rem; height: 0.2rem; margin-left: 0.2rem; content: ""; background: #f6f7f9; translate: 0 -300%; } @media (width >= 1025px) { .p-subAboutUsCard .p-subAboutUsCard__contents .p-subAboutUsCard__subTtl::after { width: 0.3rem; height: 0.3rem; margin-left: 0.3rem; } } /* -------------------------------------------- TOP NAV -------------------------------------------- */ .p-subTopNav { padding-top: 1.5rem; } @media (width >= 1025px) { .p-subTopNav { padding-top: 3rem; margin-bottom: 2rem; } } .p-subTopNav__inner { white-space: nowrap; overflow: auto; overscroll-behavior: none; scrollbar-width: none; } .p-subTopNav__inner::-webkit-scrollbar { display: none; } @media (width >= 1025px) { .p-subTopNav__inner { width: calc(100% - 8rem); margin: 0 auto; } } .p-subTopNav__list { position: relative; display: flex; gap: 2rem; padding: 0 5.1282051282vw; } @media (width < 768px) { .p-subTopNav__list { width: fit-content; min-width: 100%; } } @media (width >= 768px) { .p-subTopNav__list { gap: 3rem; justify-content: center; } } @media (width >= 1025px) { .p-subTopNav__list { gap: 5rem; padding: 0; } } .p-subTopNav__list::before { position: absolute; right: 5.1282051282vw; bottom: 0; left: 5.1282051282vw; content: ""; border-bottom: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-subTopNav__list::before { right: 0; left: 0; } } .p-subTopNav__anc { position: relative; display: flex; align-items: center; height: 100%; padding-top: 0.5rem; padding-bottom: 1.5rem; font-size: 0.9285714286em; font-weight: 500; line-height: 1.3; text-align: center; letter-spacing: 0; opacity: 0.4; transition: opacity 0.3s; } @media (width >= 1025px) { .p-subTopNav__anc { padding-bottom: 2rem; font-size: 1.1428571429em; letter-spacing: 0.08em; } } @media (hover: hover) { .p-subTopNav__anc:hover { opacity: 1; } } .p-subTopNav__anc::before { position: absolute; right: 0; bottom: 0; left: 0; height: 0.3rem; content: ""; background-color: #687df4; opacity: 0; transition: opacity 0.3s; } .p-subTopNav__anc.--current { color: #1630c6; pointer-events: none; opacity: 1; } .p-subTopNav__anc.--current::before { opacity: 1; } .p-subTopNav.--withFixedNav { padding-top: 6.5rem; } @media (width >= 1025px) { .p-subTopNav.--withFixedNav { padding-top: 3rem; } } /* -------------------------------------------- FRAME LIST -------------------------------------------- */ .p-subFrameList { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; } @media (width >= 1025px) { .p-subFrameList { gap: 7rem; } } .p-subFrameList__item { padding: 5rem 2.5rem; overflow: hidden; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .p-subFrameList__item { padding: 7rem; } .p-subFrameList__item > * { max-width: 116rem; margin: 0 auto; } } .p-subFrameList__titleFrame { padding-bottom: 4rem; margin-bottom: 4rem; border-bottom: 1px solid #d3d9e5; } @media (width < 1025px) { .p-subFrameList__titleFrame:has(+ .p-subFrameList__contFrame.--bd) { margin-bottom: 2rem; } } .p-subFrameList__title { font-size: 1.5714285714em; font-weight: 600; line-height: 1.3636363636; color: #1630c6; text-align: center; } @media (width < 768px) { .p-subFrameList__title.--negativeLetterSP { letter-spacing: -0.05em; } } @media (width >= 1025px) { .p-subFrameList__title { font-size: 2.2857142857em; line-height: 1.4375; } } .p-subFrameList__contFrame { display: grid; grid-template-columns: minmax(0, 1fr); } .p-subFrameList__contFrame.--bd .p-subFrameList__childItem + * { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid #d3d9e5; } @media (width >= 1025px) { .p-subFrameList__contFrame.--bd .p-subFrameList__childItem + * { padding-top: 4rem; margin-top: 4rem; } } .p-subFrameList__contFrame:not(.--bd) { gap: 5rem; } @media (width >= 1025px) { .p-subFrameList__contFrame:not(.--bd) { gap: 10rem; } } .p-subFrameList__childTitleFrame { margin-bottom: 1.2rem; } @media (width >= 1025px) { .p-subFrameList__childTitleFrame { margin-bottom: 1.5rem; } } .p-subFrameList__textFrame { display: grid; gap: 1.5rem; } @media (width < 1025px) { .p-subFrameList__textFrame { letter-spacing: 0; } } @media (width >= 1025px) { .p-subFrameList__textFrame { gap: 3rem; } } .p-subFrameList__text { line-height: 1.8571428571; } @media (width >= 1025px) { .p-subFrameList__text { font-size: 1.1428571429em; line-height: 2; } } .p-subFrameList__btnFrame { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; padding-top: 2rem; text-align: center; } @media (width >= 1025px) { .p-subFrameList__btnFrame { gap: 2rem; padding-top: 0; } } .p-subFrameList__btnFrame > .c-btnArrow { width: 48rem; } @media (width < 1025px) { .p-subFrameList__btnFrame > .c-btnArrow { padding-top: 1.3rem; padding-bottom: 1.3rem; } } @media (width >= 1025px) { .p-subFrameList__btnFrame > .c-btnArrow { padding-left: 2rem; } } .p-subFrameList__btnText { line-height: 1.8571428571; } @media (width >= 1025px) { .p-subFrameList__btnText { font-size: 1.1428571429em; line-height: 2; } } @media (width < 1025px) { .p-subFrameList.--wide { margin-right: -1rem; margin-left: -1rem; } } /* -------------------------------------------- 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: #1630c6; } .u-point05 { color: #d31b0d; } /* -------------------------------------------- FONT -------------------------------------------- */ .u-palt { font-feature-settings: "palt"; } /* -------------------------------------------- FONT FAMILY -------------------------------------------- */ .u-ffEn { font-family: "Montserrat", 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 -------------------------------------------- */ /* -------------------------------------------- KEYFRAMES -------------------------------------------- */ /* -------------------------------------------- ANIMATION -------------------------------------------- */ /* -------------------------------------------- EDITOR -------------------------------------------- */ @media (width >= 1025px) { .wp-editor { font-size: 1.1428571429em; } } .wp-editor > * + * { margin-top: 4.5rem; } @media (width >= 1025px) { .wp-editor > * + * { margin-top: 7rem; } } .wp-editor .wp-block-columns { gap: 2.5rem 1rem; } @media (width >= 1025px) { .wp-editor .wp-block-columns { gap: 4rem 2rem; } } @media (width >= 768px) { .wp-editor .wp-block-columns:has(:nth-child(3)):not(:has(:nth-child(4))) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } } .wp-editor .gallery { display: grid; gap: 2.5rem 1rem; } @media (width >= 1025px) { .wp-editor .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 2rem; } } .wp-editor > h2 + *, .wp-editor > h3 + *, .wp-editor > h4 + *, .wp-editor > h5 + * { margin-top: 1.5rem; } @media (width >= 1025px) { .wp-editor > h2 + *, .wp-editor > h3 + *, .wp-editor > h4 + *, .wp-editor > h5 + * { margin-top: 2.5rem; } } .wp-editor h2, .wp-editor h3, .wp-editor h4 { font-weight: 600; line-height: 1.5; } .wp-editor h2 { font-size: 1.4285714286em; } @media (width >= 1025px) { .wp-editor h2 { font-size: 1.625em; } } .wp-editor h3 { font-size: 1.2142857143em; } @media (width >= 1025px) { .wp-editor h3 { font-size: 1.25em; } } .wp-editor h4 { font-size: 1.0714285714em; } @media (width >= 1025px) { .wp-editor h4 { font-size: 1em; } } .wp-editor h5 { position: relative; padding-left: 1.33em; font-size: 1.0714285714em; } @media (width >= 1025px) { .wp-editor h5 { font-size: 1em; } } .wp-editor h5::before { position: absolute; top: 0.55em; left: 0; display: block; width: 0.67em; height: 0.67em; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 0.2rem; } .wp-editor p { line-height: 1.8571428571; } @media (width >= 1025px) { .wp-editor p { line-height: 2; } } .wp-editor a { position: relative; display: inline-flex; gap: 0.36em; align-items: center; text-decoration: underline; text-underline-offset: 0.5rem; } @media (hover: hover) { .wp-editor a:hover { text-decoration: none; } } .wp-editor a[target] { padding-right: 1.1em; } .wp-editor a[target]::after { position: absolute; top: 0.5em; right: 0; display: block; width: 0.786em; height: 0.786em; content: ""; background-color: currentColor; clip-path: url("#window_01"); transform: translateZ(0); will-change: transform; } .wp-editor strong { font-weight: 600; } .wp-editor ul, .wp-editor ol { line-height: 1.5; } .wp-editor ul > li, .wp-editor ol > li { position: relative; } .wp-editor ul > li:not(:first-child), .wp-editor ol > li:not(:first-child) { margin-top: 0.8rem; } .wp-editor ul > li ul, .wp-editor ul > li ol, .wp-editor ol > li ul, .wp-editor ol > li ol { margin-top: 0.8rem; } .wp-editor ul > li ul > li:not(:first-child), .wp-editor ul > li ol > li:not(:first-child), .wp-editor ol > li ul > li:not(:first-child), .wp-editor ol > li ol > li:not(:first-child) { margin-top: 0.6rem; } .wp-editor ul > li { padding-left: 1.1em; } .wp-editor ul > li::before { position: absolute; top: 0.55em; left: 0; display: block; width: 0.43em; height: 0.43em; content: ""; background: linear-gradient(to right, rgb(77, 97, 212) 0%, rgb(22, 48, 198) 100%); border-radius: 0.2rem; } .wp-editor ol { padding-left: 1.1em; } .wp-editor ol > li { list-style-type: decimal; } .wp-editor ol > li::marker { color: #1630c6; } .wp-editor img { display: block; } .wp-editor .aligncenter { float: none !important; margin-right: auto; margin-left: auto; } .wp-editor .alignleft { float: none !important; } .wp-editor .alignright { float: none !important; margin-left: auto; } .wp-editor figure { max-width: 100%; } .wp-editor figcaption { margin-top: 1rem; margin-bottom: 0; font-size: 0.8571428571em; line-height: 1.5; text-align: center; } @media (width >= 1025px) { .wp-editor figcaption { margin-top: 1.5rem; font-size: 0.875em; } } .wp-editor table, .wp-editor tr, .wp-editor td, .wp-editor th { height: auto !important; } .wp-editor table { width: 100%; border-top: 1px solid #d3d9e5; } .wp-editor table tr { border-bottom: 1px solid #d3d9e5; } @media (width < 1025px) { .wp-editor table tr { display: block; padding: 1.5rem 0; } } .wp-editor table tr > *:first-child { font-weight: 500; } @media (width < 1025px) { .wp-editor table tr > *:first-child { margin-bottom: 1.2rem; } } @media (width >= 1025px) { .wp-editor table tr > *:first-child { width: 21rem !important; padding: 3rem; } } .wp-editor table th, .wp-editor table td { width: auto !important; } @media (width < 1025px) { .wp-editor table th, .wp-editor table td { display: block; width: 100% !important; } } @media (width >= 1025px) { .wp-editor table th, .wp-editor table td { padding: 3rem 4rem; } } .wp-editor blockquote, .wp-editor .wp-block-quote { display: grid; gap: 1.5rem; padding: 2.5rem 1.8rem; background-color: #fff; border-radius: 1rem; } @media (width >= 1025px) { .wp-editor blockquote, .wp-editor .wp-block-quote { gap: 2.5rem; padding: 3.5rem 4rem; } } .wp-editor blockquote.is-style-border, .wp-editor blockquote:not(.wp-block-quote), .wp-editor .wp-block-quote.is-style-border, .wp-editor .wp-block-quote:not(.wp-block-quote) { background-color: unset; border: 1px solid #d7dbe3; } .wp-editor .has-small-font-size { font-size: 86%; } .wp-editor .has-large-font-size { font-size: 120%; } .wp-editor .c-iframe { padding-top: 56.25%; } .wp-editor.--gapSm > * + * { margin-top: 3rem; } @media (width >= 1025px) { .wp-editor.--gapSm > * + * { margin-top: 4rem; } } .wp-editor.--gapSm > h2 + *, .wp-editor.--gapSm > h3 + *, .wp-editor.--gapSm > h4 + *, .wp-editor.--gapSm > h5 + * { margin-top: 1rem; } @media (width >= 1025px) { .wp-editor.--gapSm > h2 + *, .wp-editor.--gapSm > h3 + *, .wp-editor.--gapSm > h4 + *, .wp-editor.--gapSm > h5 + * { margin-top: 1.5rem; } } .wp-editor.--colorWhite ul > li::before { background: #fff; } .wp-editor.--colorWhite ol > li::marker { color: #fff; }