@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; } } /*====================================================== 　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; } /*------------------------------------------------------ 　Project ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Top MainVisual ------------------------------------------------------*/ .p-mv { position: fixed; width: 100%; overflow: hidden; z-index: -1; } .p-mv #p-mv__particle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .p-blank { height: 100vh; } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Top ABOUT ------------------------------------------------------*/ .p-about { display: grid; background: #D2FF40; } .p-about__inner { display: flex; justify-content: space-between; gap: 5.6rem; } .p-about__inner .p-about__main .p-about__h3--en { padding-left: 2.4rem; padding-right: 1.6rem; position: relative; color: #7B9526; } .p-about__inner .p-about__main .p-about__h3--en .p-about__h3-highlight { color: #21221F; } .p-about__inner .p-about__main .p-about__h3--en::before { position: absolute; content: "“"; top: 0; left: 0; color: #21221F; } .p-about__inner .p-about__main .p-about__h3--en::after { position: absolute; content: "”"; bottom: 0.8rem; right: 0; color: #21221F; } .p-about__inner .p-about__main .p-about__txt { margin-top: 5.6rem; } .p-about__inner .p-about__h3--ja { writing-mode: vertical-rl; } .p-about__inner .p-about__h3--ja .p-about__h3-br { display: block; } .p-about__inner .p-about__h3--ja .p-about__h3-br:nth-child(2) { margin: 8rem 1.6rem 0 1.6rem; } .p-about__inner .p-about__h3--ja .p-about__h3-br:nth-child(3) { margin-top: 14rem; } @media (max-width: 767px) { .p-about { height: inherit; } .p-about__inner { flex-direction: column-reverse; gap: 2.4rem; } .p-about__inner .p-about__main .p-about__txt { margin-top: 2.4rem; } .p-about__inner .p-about__h3--ja { margin-right: 3.2rem; } .p-about__inner .p-about__h3--ja .p-about__h3-br:nth-child(2) { margin-top: 4rem; } .p-about__inner .p-about__h3--ja .p-about__h3-br:nth-child(3) { margin-top: 8rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Top SERVICE ------------------------------------------------------*/ .p-service__inner .p-service__main { display: flex; flex-direction: column; gap: 8rem; } .p-service__inner .p-service__main .p-service__card { padding: 4.8rem; display: flex; justify-content: space-between; align-items: center; background: #ffffff; background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)); background-size: 4rem 4rem; background-repeat: repeat; background-position: center center; border: 1px solid #21221F; border-radius: 2rem; transform: translateY(100px) rotate(-10deg); will-change: transform, opacity; } .p-service__inner .p-service__main .p-service__card:nth-child(even) { transform: translateY(100px) rotate(10deg); } .p-service__inner .p-service__main .p-service__card-img { width: 46%; } .p-service__inner .p-service__main .p-service__card-txt { width: 50%; } .p-service__inner .p-service__main .p-service__card-txt .p-service__h3--ja { margin-bottom: 0.8rem; font-size: 3.6rem; letter-spacing: 0.1em; } @media (max-width: 767px) { .p-service__inner { overflow: hidden; } .p-service__inner .p-service__main { gap: 3.2rem; } .p-service__inner .p-service__main .p-service__card { padding: 2.4rem; flex-direction: column; gap: 1.6rem; } .p-service__inner .p-service__main .p-service__card-img { width: 100%; } .p-service__inner .p-service__main .p-service__card-txt { width: 100%; } .p-service__inner .p-service__main .p-service__card-txt .p-service__h3--ja { font-size: 2.4rem; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Top WORKS ------------------------------------------------------*/ #js-works__particle { height: 400vh; } .p-works { height: auto; } .p-works__inner .p-works__main .p-works__lead { margin-bottom: 8rem; display: flex; justify-content: space-between; align-items: center; } .p-works__inner .p-works__main .p-works__ul { display: grid; grid-template-columns: calc(50% - 1.6rem) calc(16% - 3.2rem) calc(34% - 1.6rem); grid-template-rows: 1fr 1fr 1fr 1fr; gap: 3.2rem; rotate: 4deg; } .p-works__inner .p-works__main .p-works__ul .p-works__li { position: relative; width: 100%; height: 100%; min-height: 200px; perspective: 1200px; } .p-works__inner .p-works__main .p-works__ul .p-works__li a { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s ease-in-out; } .p-works__inner .p-works__main .p-works__ul .p-works__li a .p-works__item-front, .p-works__inner .p-works__main .p-works__ul .p-works__li a .p-works__item-back { position: absolute; width: 100%; height: 100%; border-radius: 2rem; overflow: hidden; backface-visibility: hidden; } .p-works__inner .p-works__main .p-works__ul .p-works__li a .p-works__item-front img { height: 100%; -o-object-fit: cover; object-fit: cover; } .p-works__inner .p-works__main .p-works__ul .p-works__li a .p-works__item-back { padding: 2.4rem; background: #D2FF40; transform: rotateY(180deg); } .p-works__inner .p-works__main .p-works__ul .p-works__li a .p-works__item-back .p-works__item-label { margin-bottom: 0.8rem; } .p-works__inner .p-works__main .p-works__ul .p-works__li a .p-works__item-back .p-works__item-ttl { margin-bottom: 0.8rem; font-size: 1.8rem; } .p-works__inner .p-works__main .p-works__ul .p-works__li a:hover { transform: rotateY(180deg); } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(1) { grid-column: 1/2; grid-row: 1/3; } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(2) { grid-column: 2/4; grid-row: 1/3; } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(3) { grid-column: 1/3; grid-row: span 2; } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(4) { grid-column: 3/4; grid-row: 3/4; } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(5) { grid-column: 3/4; grid-row: 4/5; } @media (max-width: 767px) { .p-works__inner .p-works__main .p-works__lead { margin-bottom: 6.4rem; } .p-works__inner .p-works__main .p-works__ul { gap: 2.4rem; grid-template-columns: 0; rotate: 0deg; } .p-works__inner .p-works__main .p-works__ul .p-works__li a:hover { transform: rotateY(0deg); } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(1) { grid-column: 1/4; grid-row: 1/2; } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(2) { grid-column: 1/4; grid-row: 2/3; } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(3) { grid-column: 1/4; grid-row: 3/4; } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(4) { grid-column: 1/4; grid-row: 4/5; } .p-works__inner .p-works__main .p-works__ul .p-works__li:nth-child(5) { grid-column: 1/4; grid-row: 5/6; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Top NEWS ------------------------------------------------------*/ .p-news { display: grid; } .p-news__inner { display: flex; justify-content: space-between; width: 100%; } .p-news__inner .p-news__ul { display: grid; gap: 2.4rem; width: 72%; } .p-news__inner .p-news__ul .p-news__li a { display: flex; gap: 4.8rem; } .p-news__inner .p-news__ul .p-news__li a .p-news__img { width: 14rem; border-radius: 1rem; overflow: hidden; } .p-news__inner .p-news__ul .p-news__li a .p-news__txt { width: calc(100% - 14rem - 4.8rem); } .p-news__inner .p-news__ul .p-news__li a .p-news__txt .p-news__sub { margin-bottom: 1.6rem; } .p-news__inner .p-news__ul .p-news__li a .p-news__txt .p-news__sub .p-news__date { margin-right: 1.6rem; } .p-news__inner .p-news__ul .p-news__border { width: 100%; height: 1px; background-image: linear-gradient(to right, #21221F 4px, transparent 4px); background-size: 12px 4px; background-repeat: repeat-x; background-position: left bottom; } @media (max-width: 767px) { .p-news { height: inherit; } .p-news__inner { flex-direction: column; } .p-news__inner .p-news__ul { width: 100%; } .p-news__inner .p-news__ul .p-news__li a { gap: 1.6rem; } .p-news__inner .p-news__ul .p-news__li a .p-news__img { width: 12rem; } .p-news__inner .p-news__ul .p-news__li a .p-news__txt { width: calc(100% - 12rem - 1.6rem); } .p-news__inner .p-news__ul .p-news__li a .p-news__txt .p-news__sub { margin-bottom: 0.8rem; } .p-news__inner .p-news__ul .p-news__li a .p-news__txt .p-news__sub .p-news__date { margin-right: 0; } } /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　@mixin関数、変数呼び出し ------------------------------------------------------*/ /*------------------------------------------------------ 　Top CONTACT ------------------------------------------------------*/ .p-contact { height: auto; } .p-contact__inner .p-contact__link { display: grid; justify-content: center; align-content: center; height: 40rem; border-radius: 3rem; rotate: -6deg; background: #D2FF40; filter: drop-shadow(20px 24px 10px rgba(66, 97, 132, 0.15)); } @media (max-width: 767px) { .p-contact__inner .p-contact__link { height: 32rem; filter: drop-shadow(14px 16px 10px rgba(66, 97, 132, 0.15)); } .p-contact__inner .p-contact__link .c-ttl__h2 { margin-bottom: 0; } } /*------------------------------------------------------ 　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=top.css.map */