@charset "UTF-8"; /*------------------------------------------------------ 　Foundation ------------------------------------------------------*/ /*** The new CSS reset - version 1.8.4 (last updated 14.2.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 */ *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { 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; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数管理 ------------------------------------------------------*/ /*------------------------------------------------------ 　変数管理 ------------------------------------------------------*/ /*------------------------------------------------------ 　common ------------------------------------------------------*/ * { box-sizing: border-box; } html { font-size: 1rem; font-size: calc(10px * 1); position: relative; scroll-behavior: smooth; } html body { min-width: 1152px; background: #ffffff; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.1em; color: #333333; transition: all 1s ease; } html body img { width: 100%; vertical-align: bottom; } html body h1, html body h2, html body h3, html body h4 { letter-spacing: 0.2em; } @media (max-width: 767px) { html body { min-width: 375px; max-width: 767px; font-size: 1.4rem; margin: 0 auto; } } /*------------------------------------------------------ 　Layout ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　header ------------------------------------------------------*/ #header.hide { top: -13rem; } .l-header { position: fixed; top: 0; z-index: 1010; width: 100%; -webkit-backdrop-filter: blur(0.4rem); backdrop-filter: blur(0.4rem); transition: all 1.4s ease; } .l-header__inner { max-width: 1344px; min-width: 1152px; margin: auto; padding: 3.2rem 2.4rem; display: flex; justify-content: space-between; align-items: center; } .l-header__inner .l-header__logo { width: 27.2rem; } .l-header__inner .l-header__link-wrapper { display: flex; gap: 2.4rem; } .l-header__inner .l-header__link-wrapper .l-g-nav { display: flex; align-items: center; gap: 8rem; z-index: 1030; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger { display: flex; flex-direction: column; align-items: center; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-circle__outer { display: flex; justify-content: space-between; align-items: center; width: 3.2rem; height: 3.2rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-circle__outer .hamburger-circle { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #333333; transition: all 0.2s ease; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-txt { font-weight: 700; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-circle__outer .hamburger-circle { transform: rotate(-45deg); } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-circle__outer .hamburger-circle:nth-child(1) { opacity: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-circle__outer .hamburger-circle:nth-child(2) { width: 0.3rem; height: 80%; border-radius: 100vw; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-circle__outer .hamburger-circle:nth-child(3) { opacity: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger:hover .hamburger-circle__outer .hamburger-circle { transform: rotate(270deg); } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger:hover .hamburger-circle__outer .hamburger-circle:nth-child(1) { opacity: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger:hover .hamburger-circle__outer .hamburger-circle:nth-child(2) { width: 0.3rem; height: 80%; border-radius: 100vw; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger:hover .hamburger-circle__outer .hamburger-circle:nth-child(3) { opacity: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; z-index: 1020; transform: translateY(160%) rotate(-20deg) scale(0.6, 0.6); transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open.panelactive { transform: translateY(0%) rotate(0deg) scale(1); } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__bg-circle { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 240vw; aspect-ratio: 1; background: #ffffff; border-radius: 50%; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container { padding: 0 16rem 0 9.6rem; display: flex; justify-content: center; align-items: center; gap: 8rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-logo { width: 40rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list { display: flex; flex-direction: column; gap: 2.4rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list .l-g-nav__hamburger-item a { display: flex; gap: 1.6rem; color: #333333; transition: all 0.2s ease; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list .l-g-nav__hamburger-item a .l-g-nav__list-num { padding-top: 1.2rem; font-size: 1.2rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list .l-g-nav__hamburger-item a .l-g-nav__list-txt { font-size: 3.8rem; font-weight: 700; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list .l-g-nav__hamburger-item a .l-g-nav__list-txt span { display: block; font-size: 1.4rem; font-weight: 400; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list .l-g-nav__hamburger-item a:hover { color: #F78C00; } @media (max-width: 767px) { .l-header__inner { max-width: 737px; min-width: 375px; padding: 1.6rem 1.5rem; justify-content: space-between; } .l-header__inner .l-header__btn { display: none; } .l-header__inner .l-header__logo { width: 28rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-circle__outer .hamburger-circle { transform: rotate(-45deg) !important; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-circle__outer .hamburger-circle:nth-child(1) { opacity: 0 !important; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-circle__outer .hamburger-circle:nth-child(2) { width: 0.3rem !important; height: 80% !important; border-radius: 100vw !important; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-circle__outer .hamburger-circle:nth-child(3) { opacity: 0 !important; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger:hover .hamburger-circle__outer .hamburger-circle { transform: rotate(0); } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger:hover .hamburger-circle__outer .hamburger-circle:nth-child(1) { opacity: 1; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger:hover .hamburger-circle__outer .hamburger-circle:nth-child(2) { width: 0.5rem; height: 0.5rem; border-radius: 50%; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger:hover .hamburger-circle__outer .hamburger-circle:nth-child(3) { opacity: 1; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__bg-circle { top: -10%; width: 120vh; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner { top: 32rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container { padding: 0 1.5rem; gap: 6.4rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-logo { display: none; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list .l-g-nav__hamburger-item a .l-g-nav__list-num { font-size: 1rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list .l-g-nav__hamburger-item a .l-g-nav__list-txt { font-size: 3.2rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger--open .l-g-nav__hamburger-inner .l-g-nav__hamburger-container .l-g-nav__hamburger-list .l-g-nav__hamburger-item a .l-g-nav__list-txt span { font-size: 1.2rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　footer ------------------------------------------------------*/ .l-footer { background: #333333; } .l-footer__inner { max-width: 1344px; margin: auto; padding: 8rem 2.4rem 6.4rem 2.4rem; } .l-footer__inner .l-footer__link-wrapper { padding-bottom: 5.6rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #666666; } .l-footer__inner .l-footer__link-wrapper .l-footer__logo { width: 28rem; } .l-footer__inner .l-footer__link-wrapper .l-footer__link-list { display: flex; gap: 3.2rem; } .l-footer__inner .l-footer__link-wrapper .l-footer__link-list .l-footer__link-item a:hover { opacity: 0.6; } .l-footer__inner .l-footer__bottom-wrapper { padding-top: 4.8rem; display: flex; justify-content: flex-end; gap: 5.6rem; font-size: 1.2rem; } .l-footer__inner .l-footer__bottom-wrapper .l-footer__pp a:hover { opacity: 0.6; } .l-footer__inner .l-footer__copylight { color: #666666; } @media (max-width: 767px) { .l-footer__inner { padding: 5.6rem 2.4rem 2.4rem 2.4rem; } .l-footer__inner .l-footer__link-wrapper { padding-bottom: 0; flex-direction: column; gap: 4rem; } .l-footer__inner .l-footer__link-wrapper .l-footer__logo { width: 32rem; } .l-footer__inner .l-footer__link-wrapper .l-footer__link-list { flex-direction: column; gap: 0; width: 100%; text-align: center; font-size: 1.8rem; } .l-footer__inner .l-footer__link-wrapper .l-footer__link-list .l-footer__link-item { padding: 2.4rem 0; width: 100%; border-top: 1px solid #666666; } .l-footer__inner .l-footer__bottom-wrapper { padding-top: 2.4rem; flex-direction: column; align-items: flex-end; gap: 1.6rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Section ------------------------------------------------------*/ .l-section__inner { max-width: 1152px; margin: auto; padding: 11.2rem 4rem 16rem 4rem; } @media (max-width: 767px) { .l-section__inner { padding: 11.2rem 1.5rem 16rem 1.5rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Section ------------------------------------------------------*/ .l-lower-mv__inner { padding-top: 16rem; padding-bottom: 0; } .l-lower-mv__inner .l-lower-mv__lead { position: relative; margin-top: 8rem; } .l-lower-mv__inner .l-lower-mv__lead::before { position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 46%; height: 1px; background: #333333; } .l-lower-mv__inner .l-lower-mv__lead-inner { margin: auto 0 auto auto; width: 50%; } @media (max-width: 767px) { .l-lower-mv__inner { padding-top: 13.6rem; } .l-lower-mv__inner .l-lower-mv__lead { margin-top: 5.6rem; } .l-lower-mv__inner .l-lower-mv__lead::before { width: 0; height: 0; } .l-lower-mv__inner .l-lower-mv__lead-inner { width: 100%; } } /*====================================================== 　Object ======================================================*/ /*------------------------------------------------------ 　Component ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H1 Title ------------------------------------------------------*/ .c-ttl__h1 { font-size: 7.2rem; font-weight: 700; line-height: 1.8; mix-blend-mode: difference; color: #ffffff; } .c-ttl__h1-lower { font-weight: 700; letter-spacing: 0.04em; } .c-ttl__h1-lower .c-h1-lower__inner .c-ttl__h1-lower--en { color: #F78C00; font-size: 7.2rem; font-weight: 700; } .c-ttl__h1-lower .c-h1-lower__inner .c-ttl__h1-lower--ja { position: relative; padding-left: 4.8rem; font-weight: 400; } .c-ttl__h1-lower .c-h1-lower__inner .c-ttl__h1-lower--ja::before { position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 4rem; height: 1px; background: #333333; } @media (max-width: 767px) { .c-ttl__h1 { font-size: 7.6vw; } .c-ttl__h1-lower .c-h1-lower__inner .c-ttl__h1-lower--en { font-size: 6.8rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H2 Title ------------------------------------------------------*/ .c-ttl__h2 .c-h2__inner { display: flex; gap: 1.6rem; mix-blend-mode: difference; color: #ffffff; } .c-ttl__h2 .c-h2__inner .c-ttl__h2--num { font-size: 1.4rem; } .c-ttl__h2 .c-h2__inner .c-ttl__h2--en { line-height: 0.8; font-size: 4.8rem; font-weight: 700; } @media (max-width: 767px) { .c-ttl__h2 { margin-bottom: 8rem; } .c-ttl__h2 .c-h2__inner { flex-direction: column; } .c-ttl__h2 .c-h2__inner .c-ttl__h2--en { font-size: 4.2rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H3 Title ------------------------------------------------------*/ .c-ttl__h3 { font-size: 2.4rem; font-weight: 700; line-height: 2; } @media (max-width: 767px) { .c-ttl__h3 { font-size: 2rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H4 Title ------------------------------------------------------*/ .c-ttl__h4 { font-size: 2rem; font-weight: 700; } @media (max-width: 767px) { .c-ttl__h4 { font-size: 1.8rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Main Text ------------------------------------------------------*/ .c-txt__main { line-height: 2; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Title S-size ------------------------------------------------------*/ .c-label--l { font-size: 1.5rem; font-weight: 700; } @media (max-width: 767px) { .c-label--l { font-size: 1.4rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Btn ------------------------------------------------------*/ .c-btn { text-align: right; } .c-btn__link { display: inline-flex; justify-content: flex-end; align-items: center; gap: 1.6rem; } .c-btn__link:hover { transition: all 0.2s ease-in-out; } .c-btn__link:hover .c-btn__txt::after { width: 100%; } .c-btn__link:hover .c-btn__icon { transform: scale(1.2); } .c-btn__link:hover .c-btn__icon-arrow { background-position-y: 7.7rem; } .c-btn__link .c-btn__txt { position: relative; } .c-btn__link .c-btn__txt::after { position: absolute; content: ""; width: 0%; height: 1px; background: #333333; bottom: -0.8rem; left: 0; transition: all 0.2s ease; } .c-btn__link .c-btn__icon { display: inline-flex; justify-content: center; align-items: center; height: 5.6rem; width: 5.6rem; background: #333333; border-radius: 50%; transition: all 0.4s ease-in-out; } .c-btn__link .c-btn__icon-arrow { width: 1.6rem; height: 2.4rem; background: url(../img/common/icon_arrow.svg); background-size: cover; background-position-y: 0; rotate: 220deg; transition: all 0.4s ease-in-out; } .c-btn__contact-link { position: relative; display: flex; align-items: center; gap: 1.6rem; padding: 1.6rem 4rem; background: #333333; border-radius: 50vh; transition: all 0.2s 0s ease; } .c-btn__contact-link-txt { color: #ffffff; font-size: 1.4rem; } .c-btn__contact-link-icon { height: 2rem; transform: rotate(-90deg); } .c-btn__contact-link:active { transform: scale(0.95); } .c-btn__contact-link::before, .c-btn__contact-link::after { position: absolute; content: ""; left: 50%; transform: translateX(-50%); width: 150%; height: 100%; z-index: -1; background-repeat: no-repeat; } .c-btn__contact-link:hover { background: #F78C00; } .c-btn__contact-link:hover::before { top: -70%; background-image: radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, transparent 20%, #F78C00 20%, transparent 30%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, transparent 10%, #F78C00 15%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%); background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%; background-position: 50% 120%; animation: BubblesAnimeTop 0.6s ease; } @keyframes BubblesAnimeTop { 0% { background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%; } 50% { background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%; } 100% { background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } .c-btn__contact-link:hover::after { bottom: -70%; background-image: radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, transparent 10%, #F78C00 15%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%), radial-gradient(circle, #F78C00 20%, transparent 20%); background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%; background-position: 50% 0%; animation: BubblesAnimeBottom 0.6s ease; } @keyframes BubblesAnimeBottom { 0% { background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%; } 50% { background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%; } 100% { background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%; background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } } .c-btn__request-link { padding: 1.6rem 3.2rem; background: #0AA2E5; } .c-btn__request-link-icon { aspect-ratio: 1/1; transform: rotate(0deg); } .c-btn__request-link-icon img { vertical-align: inherit; } @media (max-width: 767px) { .c-btn__contact-link::before, .c-btn__contact-link::after { width: 0; height: 0; } .c-btn__contact-link:hover { background: #0AA2E5; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Form ------------------------------------------------------*/ .c-form__inner .c-form__step { display: flex; justify-content: center; margin-bottom: 6.4rem; } .c-form__inner .c-form__step-txt { display: flex; padding-bottom: 3.2rem; width: 33%; justify-content: center; flex-direction: column; text-align: center; } .c-form__inner .c-form__step-txt br { display: none; } .c-form__inner .c-form__step-txt--on { position: relative; color: #0AA2E5; } .c-form__inner .c-form__step-txt--on::after { position: absolute; content: ""; width: 100%; height: 1px; top: 100%; left: 0; background: #0AA2E5; } .c-form__inner .c-form__step-txt--off { position: relative; } .c-form__inner .c-form__step-txt--off::after { position: absolute; content: ""; width: 100%; height: 1px; top: 100%; left: 0; background: #333333; } .c-form__inner form .c-form__horizontal { margin-bottom: 8rem; } .c-form__inner form .c-form__horizontal .c-form__list { margin-bottom: 5.6rem; display: flex; justify-content: space-between; align-items: center; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__label { display: inline-block; width: 25%; font-size: 1.6rem; font-weight: 700; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__label span { border-radius: 50vw; margin-left: 0.8rem; padding: 0.2rem 0.8rem; background: #F78C00; font-size: 1.5rem; font-weight: 400; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover { display: inline-grid; width: 74%; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__input { padding: 1.2rem 1.6rem 1.2rem 1.6rem; width: 100%; background: #eceef1; border-radius: 5px; color: #333333; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__input::-moz-placeholder { color: #b1b1b1; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__input::placeholder { color: #b1b1b1; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__text { height: 18rem; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__validation { margin-top: 0.8rem; font-size: 1.2rem; color: #F78C00; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__select-cover { position: relative; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__select-cover .c-form__select { padding-right: 4.8rem; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__select-cover:hover { cursor: pointer; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__select-cover::before, .c-form__inner form .c-form__horizontal .c-form__list .c-form__select-cover::after { position: absolute; content: ""; width: 1rem; height: 0.24rem; top: 46%; right: 2.4rem; background: #666666; border-radius: 50vw; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__select-cover::before { right: 2.94rem; transform: translateY(-50%) rotate(45deg); } .c-form__inner form .c-form__horizontal .c-form__list .c-form__select-cover::after { transform: translateY(-50%) rotate(-45deg); } .c-form__inner form .c-form__horizontal .c-form__list:last-child { margin-bottom: 0; } .c-form__inner form .c-form__horizontal .c-form__list--flex-start { align-items: flex-start; } .c-form__inner form .c-form__check { margin-bottom: 4rem; text-align: center; } .c-form__inner form .c-form__check-outer input:checked + .c-form__check-box::after { position: absolute; content: ""; width: 1rem; height: 0.6rem; top: 0.9rem; left: 0.5rem; border-style: solid; border-width: 2px 2px 0 0; border-color: #ffffff; transform: rotate(135deg); } .c-form__inner form .c-form__check-outer input:checked + .c-form__check-box::before { background: #333333; } .c-form__inner form .c-form__check-outer .c-form__check-box { position: relative; padding-left: 3.2rem; } .c-form__inner form .c-form__check-outer .c-form__check-box::before { position: absolute; content: ""; width: 2rem; height: 2rem; top: 0.3rem; left: 0; background: #ffffff; border: 1px solid #333333; border-radius: 0.2rem; transition: all 0.6s; } .c-form__inner form .c-form__check-outer .c-form__check-box a { border-bottom: 1px solid #333333; } .c-form__inner form .c-form__check-outer .c-form__check-box a:hover { opacity: 0.5; } .c-form__inner form .c-form__btn { display: flex; margin: auto; justify-content: center; font-size: 1.8rem; } .c-form__inner form .c-form__btn #js-submit-btn { padding: 2.4rem 3.2rem; color: #ffffff; width: 32rem; text-align: center; background: #d9d9d9; border-radius: 50vw; transition: all 0.5s ease-in-out; } .c-form__inner form .c-form__btn #js-submit-btn:active { transform: scale(0.95); } .c-form__inner form .c-form__btn #js-submit-btn.active { background: #0AA2E5; } .c-form__inner form .c-form__btn #js-submit-btn.active:hover { background: #F78C00; } .c-form__inner form .c-form__btn .c-form__btn-confirm { padding: 2.4rem 3.2rem; color: #ffffff; width: 32rem; text-align: center; background: #0AA2E5; border-radius: 50vw; transition: all 0.5s ease-in-out; } .c-form__inner form .c-form__btn .c-form__btn-confirm:active { transform: scale(0.95); } .c-form__inner form .c-form__btn .c-form__btn-confirm:hover { background: #F78C00; } .c-form__inner form .c-form__back { margin-top: 3.2rem; text-align: center; } .c-form__inner form .c-form__back button:hover { opacity: 0.5; } @media (max-width: 767px) { .c-form__inner .c-form__step-txt { padding-bottom: 2.4rem; } .c-form__inner .c-form__step-txt br { display: block; } .c-form__inner form .c-form__horizontal { margin-bottom: 6.4rem; } .c-form__inner form .c-form__horizontal .c-form__list { margin-bottom: 4rem; align-items: flex-start; flex-direction: column; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__label { padding-bottom: 1.2rem; width: 100%; font-size: 1.5rem; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__label span { display: inline-block; padding: 0.1rem 0.8rem; font-size: 1.4rem; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover { width: 100%; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__input { font-size: 1.4rem; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__text { height: 16rem; } .c-form__inner form .c-form__btn { width: 34.5rem; } .c-form__inner form .c-form__btn #js-submit-btn:hover { background: #0AA2E5; } .c-form__inner form .c-form__btn-confirm { width: 34.5rem; } .c-form__inner form .c-form__btn-confirm:hover { background: #0AA2E5; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Loading ------------------------------------------------------*/ #c-splash { position: fixed; z-index: 2010; display: grid; justify-content: center; align-items: center; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300%; aspect-ratio: 1; background: #f0f0f0; border-radius: 50%; overflow: hidden; transition: all 1s cubic-bezier(0.65, 0.05, 0.36, 1); } #c-splash.circle-fade { width: 0; } #c-splash #splash__progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20rem; height: 20rem; } #c-splash__logo { opacity: 1; width: 10rem; animation: logo-anime 0.4s infinite alternate; } @keyframes logo-anime { 0% { transform: rotate(6deg); } 100% { transform: rotate(-6deg); } } #c-splash__next { position: fixed; content: ""; top: calc(50% - 10rem); left: calc(50% - 10rem); z-index: 2000; transform: scale(0); background: #F78C00; width: 20rem; height: 20rem; border-radius: 50%; transition: transform 1s cubic-bezier(0.65, 0.05, 0.36, 1); } #c-splash__next.fadeout { transform: scale(20); } @media (max-width: 767px) { #c-splash #splash__progress { width: 10rem; height: 10rem; } #c-splash__logo { width: 6rem; } } /*------------------------------------------------------ 　Project ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　COMPANY Message ------------------------------------------------------*/ .p-message__inner .p-message__wrapper { display: flex; margin-top: 8rem; } .p-message__inner .p-message__wrapper .p-message__img { display: grid; justify-items: center; width: 50%; } .p-message__inner .p-message__wrapper .p-message__img-inner { width: 64%; aspect-ratio: 1/1.616; border-radius: 2rem; transform: rotate(-6deg); overflow: hidden; } .p-message__inner .p-message__wrapper .p-message__img-inner img { height: 100%; -o-object-fit: cover; object-fit: cover; } .p-message__inner .p-message__wrapper .p-message__txt-area { width: 50%; } .p-message__inner .p-message__wrapper .p-message__txt-area .p-message__sign { margin-top: 3.2rem; width: 20rem; } @media (max-width: 767px) { .p-message__inner .p-message__wrapper { flex-direction: column; gap: 5.6rem; margin-top: 6.4rem; } .p-message__inner .p-message__wrapper .p-message__img { width: 100%; } .p-message__inner .p-message__wrapper .p-message__img-inner { width: 56%; border-radius: 1rem; } .p-message__inner .p-message__wrapper .p-message__txt-area { width: 100%; } .p-message__inner .p-message__wrapper .p-message__txt-area .p-message__sign { width: 16rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　COMPANY Officer ------------------------------------------------------*/ .p-officer__inner .p-officer__wrapper { display: flex; flex-wrap: wrap; gap: 5%; row-gap: 6.4rem; margin-top: 8rem; } .p-officer__inner .p-officer__wrapper .p-officer__mem { width: 30%; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__img { display: grid; justify-items: center; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__img-inner { width: 80%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__img-inner img { height: 100%; -o-object-fit: cover; object-fit: cover; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__info { margin-top: 2.4rem; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__info .p-officer__role { display: block; margin-bottom: 0.8rem; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__info .p-officer__ruby { position: relative; margin-left: 2.4rem; color: #d9d9d9; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__info .p-officer__ruby::before { position: absolute; content: ""; top: 0; left: -1.6rem; width: 1px; height: 100%; background: #d9d9d9; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__info .p-officer__txt { margin-top: 1.6rem; } @media (max-width: 767px) { .p-officer__inner .p-officer__wrapper { flex-direction: column; gap: 6.4rem; margin-top: 6.4rem; } .p-officer__inner .p-officer__wrapper .p-officer__mem { width: 100%; } .p-officer__inner .p-officer__wrapper .p-officer__mem .p-officer__img-inner { width: 60%; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　COMPANY Outline ------------------------------------------------------*/ .p-outline .p-outline__inner .p-outline__dl { margin-top: 8rem; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line { position: relative; display: flex; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line::after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 1px; background: #d9d9d9; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line .p-outline__dt { padding: 2.4rem 0 2.4rem 1.6rem; width: 24%; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line .p-outline__dd { padding: 2.4rem 0; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line:first-child .p-outline__dt { padding-top: 0; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line:first-child .p-outline__dd { padding-top: 0; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line:last-child::after { width: 0; height: 0; } @media (max-width: 767px) { .p-outline .p-outline__inner .p-outline__dl .p-outline__line { flex-direction: column; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line .p-outline__dt { padding: 2.4rem 0 1.6rem 0; width: 100%; } .p-outline .p-outline__inner .p-outline__dl .p-outline__line .p-outline__dd { padding: 0 0 2.4rem 0; width: 100%; } } /*------------------------------------------------------ 　Utility ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Main Text ------------------------------------------------------*/ .u-txt--white { color: #ffffff; } /*------------------------------------------------------ 　JS ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　JS delay-Scloll ------------------------------------------------------*/ .js-delay-scroll .js-box { opacity: 0; } .js-delay-scroll .fade-up { animation-name: fadeAnime; animation-duration: 1.6s; animation-fill-mode: forwards; } @keyframes fadeAnime { from { opacity: 0; transform: translateY(4rem); } to { opacity: 1; transform: translateY(0); } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Color Reverse ------------------------------------------------------*/ .js-viewport-inside { background: #F78C00; color: #ffffff; }/*# sourceMappingURL=company.css.map */