@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: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; font-size: 1.6rem; letter-spacing: 0.1em; color: #21221F; } html body img { width: 100%; vertical-align: bottom; } @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: -10rem; } .l-header { position: fixed; padding: 0 2.4rem; top: 1.6rem; z-index: 1010; width: 100%; transition: all 1s ease; } .l-header__inner { max-width: 1344px; margin: auto; padding: 1.6rem 4rem; display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.6); border-radius: 50vw; box-shadow: 0 0 16px rgba(0, 0, 0, 0.1); } .l-header__inner .l-header__logo { width: 13.6rem; } .l-header__inner .l-header__link-wrapper { display: flex; align-items: center; } .l-header__inner .l-header__link-wrapper .l-header__menu { display: flex; gap: 3.2rem; } .l-header__inner .l-header__link-wrapper .l-header__menu-list { display: grid; align-items: center; } .l-header__inner .l-header__link-wrapper .l-header__menu-list a { padding: 0.8rem; } .l-header__inner .l-header__link-wrapper .l-header__menu-list .l-header__menu-btn a { padding: 0.8rem 1.6rem; position: relative; display: inline-block; background: rgba(255, 255, 255, 0.6); border: 1px solid #21221F; border-radius: 50vw; box-shadow: 4px 4px 0 #21221F; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .l-header__inner .l-header__link-wrapper .l-header__menu-list .l-header__menu-btn a:hover { transform: translate(4px, 4px); box-shadow: 0px 0px 0 #21221F; } .l-header__inner .l-header__link-wrapper .l-header__menu-list .l-header__menu-btn a:active { transform: translate(6px, 6px); box-shadow: -2px -2px 0 #21221F; } .l-header__inner .l-g-nav__hamburger--open { display: none; } @media (max-width: 767px) { .overflow-hidden { overflow: hidden; } .l-header { padding: 0 1.6rem; } .l-header__inner { max-width: 737px; padding: 1.6rem 2rem; } .l-header__inner .l-header__logo { width: 10.4rem; } .l-header__inner .l-header__link-wrapper .l-header__menu { display: none; } .l-header__inner .l-header__link-wrapper .l-header__btns { display: none; } .l-header__inner .l-header__link-wrapper .l-g-nav { position: relative; width: 2.4rem; height: 2rem; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-bar__outer .hamburger-bar { position: absolute; content: ""; width: 100%; height: 2px; background: #21221F; border-radius: 50vw; transform: translateY(-50%); transition: all 0.4s ease; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-bar__outer .hamburger-bar:nth-child(1) { top: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-bar__outer .hamburger-bar:nth-child(2) { top: 50%; left: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger .hamburger-bar__outer .hamburger-bar:nth-child(3) { top: 100%; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-bar__outer .hamburger-bar:nth-child(1) { top: 50%; border-radius: 100vw; transform: rotate(-45deg); } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-bar__outer .hamburger-bar:nth-child(2) { left: 100%; opacity: 0; } .l-header__inner .l-header__link-wrapper .l-g-nav__hamburger.active .hamburger-bar__outer .hamburger-bar:nth-child(3) { top: 50%; border-radius: 100vw; transform: rotate(45deg); } .l-header__inner .l-g-nav__hamburger--open { position: fixed; display: block; top: 10rem; right: -100%; width: calc(100% - 3.2rem); background: rgba(0, 0, 0, 0.7); z-index: 1030; border-radius: 2rem; transition: all 0.6s ease; } .l-header__inner .l-g-nav__hamburger--open.panelactive { right: 50%; transform: translateX(50%); } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list { padding: 4rem; display: flex; flex-direction: column; gap: 2.4rem; } .l-header__inner .l-g-nav__hamburger--open .l-g-nav__hamburger-list .l-g-nav__hamburger-item a { display: block; color: #ffffff; font-size: 1.6rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　footer ------------------------------------------------------*/ .l-footer { background: #21221F; } .l-footer__inner { max-width: 1152px; margin: auto; padding: 4.8rem 2.4rem; display: flex; justify-content: space-between; } .l-footer__inner .l-footer__logo { width: 13.4rem; } .l-footer__inner .l-footer__link { display: flex; justify-content: space-between; width: 80%; } .l-footer__inner .l-footer__link-ul { display: flex; gap: 3.2rem; } .l-footer__inner .l-footer__link-ul .l-footer__link-li { display: grid; align-items: center; font-size: 1.6rem; } .l-footer__inner .l-footer__link-ul .l-footer__link-li a { padding: 0.8rem; } .l-footer__inner .l-footer__link .l-footer__other-ul { display: flex; gap: 1.6rem; font-size: 1.2rem; } .l-footer__inner .l-footer__link .l-footer__other-ul .l-footer__other-li { display: grid; align-items: center; } .l-footer__inner .l-footer__link .l-footer__other-ul .l-footer__other-li a { padding: 0.8rem; } @media (max-width: 767px) { .l-footer__inner { padding: 3.2rem 2rem 1.6rem 2rem; gap: 3.2rem; } .l-footer__inner .l-footer__logo { width: 12rem; } .l-footer__inner .l-footer__link { flex-direction: column; gap: 2.4rem; width: 100%; } .l-footer__inner .l-footer__link-ul { flex-wrap: wrap; gap: 0.8rem; } .l-footer__inner .l-footer__link-ul .l-footer__link-li { width: calc(50% - 0.4rem); font-size: 1.5rem; } .l-footer__inner .l-footer__link-ul .l-footer__link-li a { padding: 0.4rem; } .l-footer__inner .l-footer__link .l-footer__other-ul { flex-direction: column; gap: 0.8rem; font-size: 1rem; } .l-footer__inner .l-footer__link .l-footer__other-ul .l-footer__other-li { width: 100%; } .l-footer__inner .l-footer__link .l-footer__other-ul .l-footer__other-li a { padding: 0.4rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Section ------------------------------------------------------*/ .l-section { height: 100vh; } .l-section__inner { max-width: 1152px; margin: auto; padding: 9.6rem 4rem 11.2rem 4rem; } .l-section-lower { height: inherit; } @media (max-width: 767px) { .l-section__inner { padding: 5.6rem 2rem 8rem 2rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Section ------------------------------------------------------*/ .l-lower-mv__inner { padding-top: 16rem; padding-bottom: 0; display: flex; } .l-lower-mv__inner .l-lower-mv__lead-inner { margin: auto 0 auto auto; width: 80%; } @media (max-width: 767px) { .l-lower-mv__inner { padding-top: 13.6rem; flex-direction: column; } .l-lower-mv__inner .l-lower-mv__lead-inner { width: 100%; } } /*====================================================== 　Object ======================================================*/ /*------------------------------------------------------ 　Component ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H1 Title ------------------------------------------------------*/ .c-ttl__h1 { position: relative; display: flex; align-items: center; overflow: hidden; } .c-ttl__h1__inner { display: flex; min-width: 200%; animation: scroll-left 20s linear infinite; } .c-ttl__h1__inner img { display: block; width: auto; height: 100%; } @keyframes scroll-left { from { transform: translateX(0%); } to { transform: translateX(-50%); } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H2 Title ------------------------------------------------------*/ .c-ttl__h2 { margin-bottom: 4rem; width: -moz-fit-content; width: fit-content; height: 7.5rem; } .c-ttl__h2 img { width: auto; height: 100%; } @media (max-width: 767px) { .c-ttl__h2 { margin-bottom: 3.2rem; height: 5.5rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　H3 Title ------------------------------------------------------*/ .c-ttl__h3--ja { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.4em; } .c-ttl__h3--en { font-size: 3.6rem; font-weight: 700; } @media (max-width: 767px) { .c-ttl__h3--ja { font-size: 2.4rem; } .c-ttl__h3--en { font-size: 2.8rem; font-weight: 700; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Main Text ------------------------------------------------------*/ .c-txt__main { line-height: 2; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Btn ------------------------------------------------------*/ .c-btn__section { color: #ffffff; } .c-btn__section a { padding: 0.8rem 1.6rem; position: relative; display: inline-block; border: 1px solid #ffffff; border-radius: 50vw; box-shadow: 4px 4px 0 #ffffff; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .c-btn__section a:hover { transform: translate(4px, 4px); box-shadow: 0px 0px 0 #ffffff; } .c-btn__section a:active { transform: translate(6px, 6px); box-shadow: -2px -2px 0 #ffffff; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Label ------------------------------------------------------*/ .c__label { padding: 0.2rem 1.2rem; display: inline-block; border: 1px solid #21221F; border-radius: 50vw; font-size: 1.4rem; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Form ------------------------------------------------------*/ .c-form__inner form { margin: auto; width: 90%; } .c-form__inner form .c-form__horizontal { margin-bottom: 4.8rem; } .c-form__inner form .c-form__horizontal .c-form__list { margin-bottom: 4rem; 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: 20%; 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: #D2FF40; font-size: 1.2rem; font-weight: 400; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover { display: inline-grid; width: 76%; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__input { color: #21221F; padding: 1.2rem 1.6rem 1.2rem 1.6rem; background: #f8f8f9; border-radius: 5px; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__input::-moz-placeholder { color: #dedede; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__input-cover .c-form__input::placeholder { color: #dedede; } .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: #e84646; } .c-form__inner form .c-form__horizontal .c-form__list:last-child { margin-bottom: 0; align-items: flex-start; } .c-form__inner form .c-form__check { margin-bottom: 3.2rem; 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: #21221F; } .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 #DEE2E4; 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 #21221F; } .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: 1.6rem 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 { background: rgba(255, 255, 255, 0.6); border: 1px solid #21221F; border-radius: 50vw; box-shadow: 4px 6px 0 #21221F; color: #21221F; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .c-form__inner form .c-form__btn #js-submit-btn.active:hover { transform: translate(4px, 4px); box-shadow: 0px 0px 0 #21221F; } .c-form__inner form .c-form__btn #js-submit-btn.active:active { transform: translate(6px, 6px); box-shadow: -2px -2px 0 #21221F; } @media (max-width: 767px) { .c-form__inner form { width: 100%; } .c-form__inner form .c-form__horizontal .c-form__list { margin-bottom: 3.2rem; align-items: flex-start; flex-direction: column; } .c-form__inner form .c-form__horizontal .c-form__list .c-form__label { padding-bottom: 0.8rem; 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; } } /*------------------------------------------------------ 　Project ------------------------------------------------------*/ /*------------------------------------------------------ 　Utility ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　White Text ------------------------------------------------------*/ .u-txt--white { color: #ffffff; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Main Text ------------------------------------------------------*/ .u-txt--medium { font-weight: 500; } .u-txt--bold { font-weight: 700; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Text align ------------------------------------------------------*/ .u-txt__center { text-align: center; } .u-txt__right { text-align: right; } .u-txt__left { text-align: left; } /*------------------------------------------------------ 　JS ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Top NEWS ------------------------------------------------------*/ main { transition: background-color 0.5s ease-in-out; } main.scrolled-works { background-color: #21221F; } main.scrolled-news { background-color: rgba(255, 255, 255, 0.75); }/*# sourceMappingURL=contact.css.map */