@charset "UTF-8"; /*** The new CSS reset - version 1.8.2 (last updated 23.12.2022) 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; appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: ""; } /* 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; } html { font-size: 62.5%; } a { text-decoration: none; } img { max-width: 100%; height: auto; vertical-align: bottom; } iframe { display: block; width: 100%; } @media screen and (min-width: 600px) { .sp { display: none; } } .pc { display: none; } @media screen and (min-width: 1025px) { .pc { display: block; } } .main { display: block; } html { scroll-behavior: smooth; } body { font-family: "Noto Sans JP", serif; color: #121212; } @media screen and (min-width: 1025px) { .wrapper { width: 100%; max-width: 1600px; margin: 0 auto; } } header { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 16px; background-color: #fff; } @media screen and (min-width: 1025px) { header { padding: 2rem 4rem; } } header img { height: 40px; } header #menu { --rotate:45deg; background-color: transparent; top: 20px; right: 16px; width: 3em; aspect-ratio: 1; border: none; display: grid; place-items: center; cursor: pointer; z-index: 999; } header #menu.is-active span:nth-child(1) { opacity: 0; } header #menu.is-active span:nth-child(2) { background-color: #fff; rotate: var(--rotate); translate: 0 0; } header #menu.is-active span:nth-child(3) { background-color: #fff; rotate: calc(var(--rotate) * -1); translate: 0 0; } header #menu span { background-color: #121212; display: block; border-radius: 0.1em; width: 3em; height: 2px; grid-area: 1/1/-1/-1; transition: rotate 0.5s, color 0.5s; } header #menu span:nth-child(2) { translate: 0 0.8rem; } header #menu span:nth-child(3) { translate: 0 -0.8rem; } header #nav { position: fixed; display: block; width: 100%; height: 100vh; top: 0; left: -100%; background: rgba(0, 0, 0, 0.8); transition: left 0.5s; } header #nav.is-active { left: 0%; pointer-events: all; } header #nav #nav-bg { display: block; background-color: #000; height: 100vh; width: 30rem; } header #nav #nav-bg ul { display: flex; flex-direction: column; color: #fff; padding-top: 6rem; } header #nav #nav-bg ul:nth-child(1) li { font-size: 1.44rem; line-height: 2.44rem; margin-inline: 2.5rem; padding: 2rem 0; border-top: #fff 0.1em solid; } header #nav #nav-bg ul:nth-child(1) li:last-child { border-bottom: #fff 0.1em solid; margin-bottom: 6.5rem; } header #nav #nav-bg ul:nth-child(2) li { font-size: 1.44rem; line-height: 2.44rem; margin-left: 2.5rem; padding-bottom: 1rem; } #fv { height: 100vh; } #fv video { height: 100%; width: 100%; object-fit: cover; } #main { overflow: hidden; margin-top: 80px; } #main .swiper { padding-top: 8em; padding-bottom: 10em; } @media screen and (min-width: 1025px) { #main .swiper { padding-top: 10rem; } } #main .swiper h2 { font-size: 24px; font-weight: bold; line-height: 1.7; text-align: center; padding-bottom: 2rem; } @media screen and (min-width: 1025px) { #main .swiper h2 { font-size: 3.6em; padding-bottom: 3rem; } } #main .swiper .swiper-wrapper { display: flex; } #main .swiper .swiper-wrapper .swiper-slide { flex-shrink: 0; width: 23.5em; height: 100%; } #main #feature { padding-block: 8em 10em; } #main #feature h2 { font-size: 2.4em; font-weight: bold; line-height: 1.7; text-align: center; padding-bottom: 2em; } @media screen and (min-width: 1025px) { #main #feature h2 { font-size: 3.6em; } } #main #feature ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 4rem; margin-inline: 1.6em; } @media screen and (min-width: 1025px) { #main #feature ul { margin-inline: 19.6em; } } #main #feature ul a { transition: all 0.3s ease; } #main #feature ul a:hover { scale: 1.05; } #main #feature ul li { box-shadow: 0 0 0.5em 0.5em rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; } #main #feature ul li div { display: grid; gap: 2em; padding: 1.6em; background-color: #fff; } #main #feature ul li div p { font-size: 1.2em; line-height: 1.7; } #main #feature ul li div p:nth-child(1) { font-size: 1.44em; font-weight: bold; order: 2; } #main #feature ul li div p:nth-child(2) { order: 1; } #main #feature ul li div p:nth-child(3) { order: 3; text-align: right; } #main #contact { background: #000; } #main #contact h2 { font-size: 2.4em; font-weight: bold; line-height: 1.7; text-align: center; padding: 8rem 0 2rem; color: #fff; } #main #contact p { color: #fff; font-size: 1.44em; line-height: 2.45em; padding: 0 1.6rem 3rem; } #main #contact #contact-form p { color: #fff; font-size: 1.44em; line-height: 2.45em; padding-bottom: 2rem; } #main #contact #contact-form p:last-child { text-align: center; display: grid; border: 1px solid #fff; margin-inline: 16px; padding-block: 1.2em; transition: all 0.5s ease; } @media screen and (min-width: 1025px) { #main #contact #contact-form p:last-child:hover { border: 1px solid transparent; background-color: #fff; color: #121212; } } #main #contact #contact-form p:last-child input { place-items: center; } #main #contact #contact-form input[type=text], #main #contact #contact-form input[type=email], #main #contact #contact-form textarea { width: 100%; background-color: #fff; color: #121212; } @media screen and (min-width: 1025px) { #main #contact #contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); padding-inline: 196px; } } footer { background-color: #000; text-align: center; padding-block: 1em 0.7em; } footer small { color: #fff; font-size: 1.2em; line-height: 1.7; }/*# sourceMappingURL=style.css.map */