@charset "UTF-8"; /*** The new CSS reset - version 1.11.1 (last updated 24.10.2023) 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 { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-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; } /* 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::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; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Base */ /* ============================================ */ body { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; background: #fff; color: #060605; font-size: 1rem; letter-spacing: 0.125em; line-height: 1; overflow-wrap: anywhere; word-break: normal; line-break: strict; } @media (max-width: 767px) { body { font-size: 0.875rem; } } .body-container { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -999; display: block; background: #060605; } .body-container--sub { background: #fff; } button:focus-visible, input:focus-visible, optgroup:focus-visible, select:focus-visible, textarea:focus-visible { outline: auto; } picture { display: block; } img { width: 100%; height: auto; } a[href^="tel:"] { pointer-events: none; } @media (max-width: 767px) { a[href^="tel:"] { pointer-events: auto; } } /* l-contact */ /* ============================================ */ .l-contact { position: relative; overflow: hidden; background: #060605; z-index: 10; } .l-contact::before { content: ""; display: block; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; z-index: -10; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.5s linear; transition: -webkit-transform 0.5s linear; transition: transform 0.5s linear; transition: transform 0.5s linear, -webkit-transform 0.5s linear; } .l-contact.-active::before { -webkit-transform: translateY(0); transform: translateY(0); } .l-contact__title { text-align: center; } .l-contact__desc { text-align: center; margin: 0 0 56px; } @media (max-width: 767px) { .l-contact__desc { margin: 0 0 48px; } } .l-contact__form { background: #060605; width: 100%; display: block; padding: 64px 40px; position: relative; z-index: 10; overflow: hidden; } @media (max-width: 767px) { .l-contact__form { padding: 40px 20px; } } .l-contact__form::before { content: ""; background: #060605; display: inline-block; width: 100%; height: 100%; z-index: -10; position: absolute; top: 0; left: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .l-contact__form:hover::before { -webkit-transform: scale(0, 1); transform: scale(0, 1); } .l-contact__form__text { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "Inter", sans-serif; font-weight: 700; font-size: 3rem; color: #fff; letter-spacing: 0.075em; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto 0 0; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @media (max-width: 767px) { .l-contact__form__text { font-size: 2.5rem; } } .l-contact__form:hover .l-contact__form__text { -webkit-transform: translateX(20px); transform: translateX(20px); } .l-contact__form__arrow { position: absolute; top: 50%; right: 40px; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 56px; height: 56px; border-radius: 50%; z-index: -10; background: #fff; -webkit-transition: background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @media (max-width: 767px) { .l-contact__form__arrow { right: 20px; width: 40px; height: 40px; } } .l-contact__form:hover .l-contact__form__arrow { background: #f19753; -webkit-transform: translateY(-50%) scale(8); transform: translateY(-50%) scale(8); } @media (max-width: 767px) { .l-contact__form:hover .l-contact__form__arrow { -webkit-transform: translateY(-50%) scale(5); transform: translateY(-50%) scale(5); } } .l-contact__form__arrow::before { content: ""; position: absolute; top: 50%; right: calc(50% + 2px); display: inline-block; width: 16px; height: 16px; border-top: 4px solid #060605; border-right: 4px solid #060605; -webkit-transform: translate(50%, -50%) rotate(45deg); transform: translate(50%, -50%) rotate(45deg); } @media (max-width: 767px) { .l-contact__form__arrow::before { width: 12px; height: 12px; border-width: 3px; } } .l-contact__form__bg { position: absolute; top: 0; z-index: -20; width: 100%; height: 100%; opacity: 0.2; } .l-contact__form__bg video { width: 140%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 767px) { .l-contact__form__bg video { display: none; } } /* l-footer */ /* ============================================ */ .l-footer { padding: 56px 0; background: #060605; } @media (max-width: 767px) { .l-footer { padding: 40px 0; } } .l-footer__copyright { color: #fff; text-align: center; } /* =============================================== Layout =============================================== */ /* l-header */ /* ============================================ */ .l-header { background: transparent; position: fixed; z-index: 5000; width: 100%; top: 0; left: 0; padding: 40px 48px; mix-blend-mode: difference; pointer-events: none; } @media (max-width: 767px) { .l-header { padding: 20px; } } .l-header.-active { mix-blend-mode: unset; } .l-header__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .l-header-logo, .l-header-nav { pointer-events: auto; } .l-header-logo { width: 120px; position: relative; z-index: 999; mix-blend-mode: difference; } .l-header-logo a { display: block; font-size: 0; } .l-header-hamburger { text-align: center; z-index: 100; position: absolute; top: 0; right: 0; width: 120px; height: 100%; cursor: pointer; } @media (max-width: 767px) { .l-header-hamburger { width: 60px; } } .l-header-hamburger.-active { margin: 0; font-size: 0; } .l-header-hamburger__line { display: inline-block; width: 32px; height: 4px; position: absolute; top: calc(50% - 2px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); will-change: transform; -webkit-transition: margin 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; transition: margin 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, margin 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, margin 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } @media (max-width: 767px) { .l-header-hamburger__line { width: 20px; height: 3px; } } .l-header-hamburger__line--upper { margin-top: -10px; } @media (max-width: 767px) { .l-header-hamburger__line--upper { margin-top: -8px; } } .l-header-hamburger__line--middle { -webkit-transition: 0s opacity 0.3s; transition: 0s opacity 0.3s; } .l-header-hamburger__line--lower { margin-top: 10px; } @media (max-width: 767px) { .l-header-hamburger__line--lower { margin-top: 8px; } } .l-header-hamburger.-active .l-header-hamburger__line { -webkit-transition: margin 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; transition: margin 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; transition: margin 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; transition: margin 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s, -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s; } .l-header-hamburger.-active .l-header-hamburger__line--middle { -webkit-transition: 0.3s opacity 0s; transition: 0.3s opacity 0s; } .l-header-hamburger__line::before { content: ""; display: block; background: #fff; width: 100%; height: 100%; } .l-header-hamburger.-active .l-header-hamburger__line--upper { margin: 0; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .l-header-hamburger.-active .l-header-hamburger__line--middle { opacity: 0; } .l-header-hamburger.-active .l-header-hamburger__line--lower { margin: 0; -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); } .l-header-menu { position: fixed; z-index: 10; width: 100%; top: 0; left: 0; bottom: 0; overflow: auto; height: auto; background-color: #060605; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .l-header-menu.-active { visibility: visible; opacity: 1; } .l-header-menu__list { margin: 140px auto 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; overflow: auto; } @media (max-width: 767px) { .l-header-menu__list { width: 100%; margin: 80px 0 0; } } @media (max-width: 767px) { .l-header-menu__item { border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding: 20px 0; } } .l-header-menu__item a { display: inline-block; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "Inter", sans-serif; font-weight: 700; font-size: 4rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.125em; color: #fff; padding: 12px 0; margin: 12px 0; position: relative; -webkit-transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 767px) { .l-header-menu__item a { font-size: 2rem; padding: 0; margin: 0 20px; } } .l-header-menu__list:hover .l-header-menu__item a:not(:hover) { color: rgba(255, 255, 255, 0.4); } .l-header-menu__item a::before { content: ""; background: #fff; display: inline-block; width: 100%; height: 100%; z-index: 10; position: absolute; top: 0; left: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: right; transform-origin: right; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s, -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; } .l-header.-active .l-header-menu__item a::before { -webkit-transform: scale(0, 1); transform: scale(0, 1); } /* l-inner */ /* ============================================ */ .l-inner { max-width: 1100px; padding: 0 40px; width: 100%; margin: 0 auto; } @media (max-width: 767px) { .l-inner { padding: 0 20px; } } .l-inner--narrow { max-width: 920px; } .l-inner--wide { max-width: 1240px; padding: 0 20px; } /* l-main */ /* ============================================ */ /* l-mv */ /* ============================================ */ .l-mv { margin: 100px 0 0; padding: 120px 0 0; } @media (max-width: 767px) { .l-mv { margin: 60px 0 0; padding: 80px 0 0; } } .l-mv__title.c-title { margin-bottom: 0; } /* l-section */ /* ============================================ */ .l-section { padding: 120px 0; } @media (max-width: 767px) { .l-section { padding: 80px 0; } } /* =============================================== Component =============================================== */ /* c-button */ /* ============================================ */ .c-button { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; display: inline-block; width: 240px; border-radius: 32px; text-align: center; background: #060605; color: #fff; border: 2px solid #060605; padding: 20px 0; position: relative; z-index: 10; overflow: hidden; } .c-button--white { background: #fff; color: #060605; border: 2px solid #fff; } .c-button:hover { color: #060605; } .c-button--white:hover { color: #fff; } .c-button::before { content: ""; display: inline-block; width: 100%; height: 100%; background: #fff; pointer-events: none; position: absolute; top: 0; left: 0; z-index: -10; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } .c-button--white::before { background: #060605; } .c-button:hover::before { -webkit-transform: scale(1, 1); transform: scale(1, 1); } /* c-case */ /* ============================================ */ .c-case { position: relative; } .c-case__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 64px; } @media (max-width: 767px) { .c-case__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 64px 0; } } .c-case__item__link { display: block; } .c-case__item__img { margin: 0 0 16px; overflow: hidden; } @media (max-width: 767px) { .c-case__item__img { margin: 0 0 14px; } } .c-case__item__img img { -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .c-case__item__link:hover .c-case__item__img img { -webkit-transform: scale(1.2); transform: scale(1.2); } .c-case__item__org { font-size: 0.875rem; margin: 0 0 1em; } .c-case__item__name { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.6; } @media (max-width: 767px) { .c-case__item__name { font-size: 1.125rem; } } .c-case__item__link:hover .c-case__item__name { text-decoration: underline; } .c-case__arrow { display: inline-block; width: 24px; height: 24px; border-radius: 50%; position: relative; background: #060605; margin: 0 0.5rem 0 0; vertical-align: -0.2em; } .c-case__arrow::before { content: ""; position: absolute; top: 50%; right: calc(50% + 2px); display: inline-block; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: translate(50%, -50%) rotate(45deg); transform: translate(50%, -50%) rotate(45deg); } /* c-desc */ /* ============================================ */ .c-desc { line-height: 2; } /* c-head */ /* ============================================ */ .c-head { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; margin: 0 0 48px; } @media (max-width: 767px) { .c-head { margin: 0 0 40px; } } .c-head--white { color: #fff; } .c-head__en { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "Inter", sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.6; margin: 0 0 0.25em; text-transform: uppercase; letter-spacing: 0.125em; position: relative; } @media (max-width: 767px) { .c-head__en { font-size: 1.5rem; } } .c-head__ja { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .c-head.js-addActive .c-head__en::before, .c-head.js-addActive .c-head__ja::before { content: ""; background: #fff; display: inline-block; width: 100%; height: 100%; z-index: 10; position: absolute; top: 0; left: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: right; transform-origin: right; } .c-head.js-addActive .c-head__en::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .c-head.js-addActive .c-head__ja::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s, -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; } .c-head--white.js-addActive .c-head__en::before, .c-head--white.js-addActive .c-head__ja::before { background: #fff; } .c-head.-active .c-head__en::before, .c-head.-active .c-head__ja::before { -webkit-transform: scale(0, 1); transform: scale(0, 1); } /* c-title */ /* ============================================ */ .c-title { margin: 0 0 64px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (max-width: 767px) { .c-title { margin: 0 0 56px; } } .c-title--white { color: #fff; } .c-title__en { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "Inter", sans-serif; font-weight: 700; font-size: 4.5rem; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.125em; position: relative; } @media (max-width: 767px) { .c-title__en { font-size: 2.5rem; margin: 0 0 6px; } } .c-title__ja { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .c-title.js-addActive .c-title__en::before, .c-title.js-addActive .c-title__ja::before { content: ""; background: #fff; display: inline-block; width: 100%; height: 100%; z-index: 10; position: absolute; top: 0; left: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: right; transform-origin: right; } .c-title.js-addActive .c-title__en::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .c-title.js-addActive .c-title__ja::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s, -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; } .c-title--white.js-addActive .c-title__en::before, .c-title--white.js-addActive .c-title__ja::before { background: #fff; } .c-title.-active .c-title__en::before, .c-title.-active .c-title__ja::before { -webkit-transform: scale(0, 1); transform: scale(0, 1); } /* p-top */ /* ============================================ */ .p-top-mv { height: 100vh; height: 100svh; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .p-top-mv__container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .p-top-mv__logo { width: 300px; margin: 0 0 80px; } @media (max-width: 767px) { .p-top-mv__logo { width: max(200px, 36.5058670143vw); margin: 0 0 64px; } } .p-top-mv__catch { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; color: #060605; font-size: 2rem; letter-spacing: 0.125em; margin: 0 0 1em; } @media (max-width: 767px) { .p-top-mv__catch { font-size: 1.625rem; } } .p-top-mv__desc { color: #060605; font-size: 1.25rem; letter-spacing: 0.125em; line-height: 1.6; text-align: center; } @media (max-width: 767px) { .p-top-mv__desc { font-size: 1rem; } } .p-top-about { position: relative; overflow: hidden; } @media (max-width: 767px) { .p-top-about { padding: 80px 0 40px; } } .p-top-about__container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 40px; } @media (max-width: 767px) { .p-top-about__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 24px; } } .p-top-about__text { width: 480px; } @media (max-width: 767px) { .p-top-about__text { width: 100%; } } .p-top-about__img { width: 400px; } @media (max-width: 767px) { .p-top-about__img { width: 160px; position: absolute; right: 0; top: -40px; } } .p-top-about__img:last-of-type { position: absolute; right: 0; top: 400px; width: min(400px, 40vw); } @media (max-width: 767px) { .p-top-about__img:last-of-type { top: 80px; right: 40px; } } .p-top-about__desc { color: #fff; margin: 0 0 56px; } @media (max-width: 767px) { .p-top-about__desc { margin: 0 0 48px; } } .p-top-about__scroll { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 200px 0 0; opacity: 0.2; } @media (max-width: 767px) { .p-top-about__scroll { margin: 120px 0 0; } } .p-top-about__scroll__text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; top: 0 !important; } .p-top-about__scroll__text span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; white-space: nowrap; font-size: 8rem; padding: 0 0.25em; width: 640px; } @media (max-width: 767px) { .p-top-about__scroll__text span { font-size: 4rem; width: max(400px, 73.0117340287vw); } } .p-top-services__item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 40px; } @media (max-width: 767px) { .p-top-services__item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 24px; } } .p-top-services__item + .p-top-services__item { margin: 90px 0 0; } .p-top-services__item__img { width: 480px; } @media (max-width: 767px) { .p-top-services__item__img { width: 100%; } } .p-top-services__item__text { width: 400px; } @media (max-width: 767px) { .p-top-services__item__text { width: 100%; } } .p-top-services__item__title { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; color: #fff; font-size: 1.5rem; letter-spacing: 0.125em; margin: 40px 0; } @media (max-width: 767px) { .p-top-services__item__title { margin: 8px 0 24px; } } .p-top-services__item__desc { color: #fff; line-height: 2.2; } .p-top-case__cta { margin: 80px 0 0; text-align: center; } @media (max-width: 767px) { .p-top-case__cta { margin: 64px 0 0; } } .p-top-case__item__org, .p-top-case__item__name { color: #fff; } .p-top-case__arrow { background: #fff; } .p-top-case__arrow::before { border-color: #060605; } /* p-about */ /* ============================================ */ .p-about-outline__table { width: 100%; } .p-about-outline__table tr { display: grid; grid-template-columns: 120px minmax(0, 1fr); padding: 24px 0; border-bottom: 1px solid #ddd; } .p-about-outline__table th, .p-about-outline__table td { line-height: 1.6; } .p-about-outline__table td a { color: #1a73e8; -webkit-transition: color cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s; transition: color cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s; } .p-about-outline__table td a:hover { color: #174ea6; } .p-about-profile__box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } @media (max-width: 767px) { .p-about-profile__box { grid-template-columns: unset; } } .p-about-profile__name { grid-area: 1/1/2/3; } @media (max-width: 767px) { .p-about-profile__name { grid-area: unset; } } .p-about-profile__name__ja { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: 0.125em; margin: 0 0 0.75rem; } .p-about-profile__name__en { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "Inter", sans-serif; font-weight: 500; } .p-about-profile__career__title, .p-about-profile__certification__title { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; font-size: 1rem; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; } .p-about-profile__career__desc, .p-about-profile__certification__list li { line-height: 1.8; } .p-about-profile__certification__list li::before { content: "・"; } .p-about-profile__certification__list li + li { margin: 0.5em 0 0; } /* p-case */ /* ============================================ */ .p-case-mv__name { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; font-size: 2.5rem; margin: 0 0 1rem; line-height: 1.4; position: relative; } @media (max-width: 767px) { .p-case-mv__name { font-size: 1.5rem; } } .p-case-mv__desc { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; line-height: 1.4; position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; color: #888; } .p-case-mv__title.js-addActive .p-case-mv__name::before, .p-case-mv__title.js-addActive .p-case-mv__desc::before { content: ""; background: #fff; display: inline-block; width: 100%; height: 100%; z-index: 10; position: absolute; top: 0; left: 0; -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform-origin: right; transform-origin: right; } .p-case-mv__title.js-addActive .p-case-mv__name::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .p-case-mv__title.js-addActive .p-case-mv__desc::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s, -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s; } .p-case-mv--white.js-addActive .p-case-mv__name::before, .p-case-mv--white.js-addActive .p-case-mv__desc::before { background: #fff; } .p-case-mv__title.-active .p-case-mv__name::before, .p-case-mv__title.-active .p-case-mv__desc::before { -webkit-transform: scale(0, 1); transform: scale(0, 1); } .p-case__table { width: 100%; margin: 0 0 48px; } .p-case__table tr { display: grid; grid-template-columns: 240px minmax(0, 1fr); padding: 24px 0; border-bottom: 1px solid #ddd; } @media (max-width: 767px) { .p-case__table tr { grid-template-columns: minmax(0, 1fr); gap: 1em; } } .p-case__table th, .p-case__table td { line-height: 1.6; } .p-case__table th { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 400; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-weight: 700; } .p-case__table td a { color: #1a73e8; -webkit-transition: color cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s; transition: color cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s; } .p-case__table td a:hover { color: #174ea6; } .p-case__pc { background: #ddd; font-size: 0; padding: 40px 0; border-radius: 16px; } .p-case__cta { margin: 80px 0 0; text-align: center; } @media (max-width: 767px) { .p-case__cta { margin: 64px 0 0; } } /* p-contact */ /* ============================================ */ .p-contact-body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100vh; height: 100svh; } .p-contact-body .l-main { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } /* =============================================== Utility =============================================== */ /* display */ /* ============================================ */ .u-dis-i { display: inline; } .u-dis-ib { display: inline-block; } .u-dis-b { display: block; } .u-dis-f { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .u-pc-i { display: inline; } @media (max-width: 767px) { .u-pc-i { display: none; } } .u-sp-i { display: none; } @media (max-width: 767px) { .u-sp-i { display: inline; } } .u-pc-ib { display: inline-block; } @media (max-width: 767px) { .u-pc-ib { display: none; } } .u-sp-ib { display: none; } @media (max-width: 767px) { .u-sp-ib { display: inline-block; } } .u-pc-b { display: block; } @media (max-width: 767px) { .u-pc-b { display: none; } } .u-sp-b { display: none; } @media (max-width: 767px) { .u-sp-b { display: block; } } .u-pc-f { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media (max-width: 767px) { .u-pc-f { display: none; } } .u-sp-f { display: none; } @media (max-width: 767px) { .u-sp-f { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } /* visibility */ /* ============================================ */ .u-hidden { visibility: hidden; } .u-visible { visibility: visible; } /* margin */ /* ============================================ */ .u-m-0 { margin: 0; } .u-mt-0 { margin-top: 0; } .u-mr-0 { margin-right: 0; } .u-mb-0 { margin-bottom: 0; } .u-ml-0 { margin-left: 0; } .u-mx-0 { margin-right: 0; margin-left: 0; } .u-my-0 { margin-top: 0; margin-bottom: 0; } .u-m-a { margin: auto; } .u-mt-a { margin-top: auto; } .u-mr-a { margin-right: auto; } .u-mb-a { margin-bottom: auto; } .u-ml-a { margin-left: auto; } .u-mx-a { margin-right: auto; margin-left: auto; } .u-my-a { margin-top: auto; margin-bottom: auto; } /* padding */ /* ============================================ */ .u-p-0 { padding: 0; } .u-pt-0 { padding-top: 0; } .u-pr-0 { padding-right: 0; } .u-pb-0 { padding-bottom: 0; } .u-pl-0 { padding-left: 0; } .u-px-0 { padding-right: 0; padding-left: 0; } .u-py-0 { padding-top: 0; padding-bottom: 0; } .u-p-a { padding: auto; } .u-pt-a { padding-top: auto; } .u-pr-a { padding-right: auto; } .u-pb-a { padding-bottom: auto; } .u-pl-a { padding-left: auto; } .u-px-a { padding-right: auto; padding-left: auto; } .u-py-a { padding-top: auto; padding-bottom: auto; } /* border */ /* ============================================ */ .u-b-none { border: none; } .u-bt-none { border-top: none; } .u-br-none { border-right: none; } .u-bb-none { border-bottom: none; } .u-bl-none { border-left: none; } /* text-align */ /* ============================================ */ .u-ta-l { text-align: left; } .u-ta-c { text-align: center; } .u-ta-r { text-align: right; } /* kerning */ /* ============================================ */ .u-palt { -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; }/*# sourceMappingURL=style.css.map */