@-webkit-keyframes fade-effect { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 10% { opacity: 1; } 100% { -webkit-transform: scale(1) !important; transform: scale(1) !important; } } @keyframes fade-effect { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 10% { opacity: 1; } 100% { -webkit-transform: scale(1) !important; transform: scale(1) !important; } } @-webkit-keyframes hover { 0% { opacity: 0; } 10% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes hover { 0% { opacity: 0; } 10% { opacity: 0.5; } 100% { opacity: 1; } } /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 8rem; } @media (min-width: 768px) and (max-width: 1200px) { html { font-size: 0.8333333333vw; } } @media (max-width: 767px) { html { font-size: 2.5vw; } } body { min-height: 100vh; font-family: "Noto Sans JP", sans-serif; color: #ffffff; font-weight: 500; overflow-wrap: break-word; overflow-x: hidden; letter-spacing: 0; background-color: #1B1717; } @media screen and (max-width: 767px) { body.js-open { overflow: hidden; } } a { color: inherit; text-decoration: none; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } a:hover { text-decoration: none; } a:focus { outline: none; text-decoration: none; } @media screen and (min-width: 768px) { a[href^=tel] { pointer-events: none; text-decoration: none; opacity: 1 !important; cursor: default !important; } } @media screen and (min-width: 768px) { .onlySP { display: none !important; } } @media screen and (max-width: 767px) { .onlyPC { display: none !important; } } ul, ol { margin: 0; padding: 0; } ul li, ol li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0; } figure { margin: 0; padding: 0; line-height: 0; } figure img { width: 100%; } input[type=submit] { border: none; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } table { border-spacing: inherit; border-collapse: collapse; } * { -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-word; } img { max-width: 100%; height: auto; vertical-align: bottom; } strong, b { font-weight: bold; } .u-img-fit { font-family: "object-fit: cover;"; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .l-container { max-width: 148rem; margin: 0 auto; padding: 0 8rem; } @media screen and (max-width: 767px) { .l-container { max-width: 100%; padding: 0 3.2rem; } } .c-txt { font-weight: 500; font-size: 1.9rem; line-height: 2.2; letter-spacing: 0.14em; } @media screen and (max-width: 767px) { .c-txt { font-size: 1.4rem; letter-spacing: 0.08em; } } .c-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-heading__ja { font-weight: 700; font-size: 1.6rem; line-height: 1.6; letter-spacing: 0.24em; margin-top: 1.2rem; } @media screen and (max-width: 767px) { .c-heading__ja { font-size: 1.3rem; margin-top: 1rem; } } .align-center { text-align: center; } .align-right { text-align: right; } .align-left { text-align: left; } @-webkit-keyframes slideBg { from { left: -100%; } to { left: 0; } } @keyframes slideBg { from { left: -100%; } to { left: 0; } } .fade-content { opacity: 0; -webkit-transform: translateY(2rem); transform: translateY(2rem); -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } .fade-content:nth-child(1) { -webkit-transition-delay: 100ms; transition-delay: 100ms; } .fade-content:nth-child(2) { -webkit-transition-delay: 200ms; transition-delay: 200ms; } .fade-content:nth-child(3) { -webkit-transition-delay: 300ms; transition-delay: 300ms; } .fade-content:nth-child(4) { -webkit-transition-delay: 400ms; transition-delay: 400ms; } .fade-content:nth-child(5) { -webkit-transition-delay: 500ms; transition-delay: 500ms; } .fade-content:nth-child(6) { -webkit-transition-delay: 600ms; transition-delay: 600ms; } .fade-content:nth-child(7) { -webkit-transition-delay: 700ms; transition-delay: 700ms; } .fade-content:nth-child(8) { -webkit-transition-delay: 800ms; transition-delay: 800ms; } .fade-content:nth-child(9) { -webkit-transition-delay: 900ms; transition-delay: 900ms; } .fade-content:nth-child(10) { -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .fade-content:nth-child(11) { -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .fade-content:nth-child(12) { -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .fade-content:nth-child(13) { -webkit-transition-delay: 1300ms; transition-delay: 1300ms; } .fade-content:nth-child(14) { -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .fade-content:nth-child(15) { -webkit-transition-delay: 1500ms; transition-delay: 1500ms; } .fade-content:nth-child(16) { -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .fade-content:nth-child(17) { -webkit-transition-delay: 1700ms; transition-delay: 1700ms; } .fade-content:nth-child(18) { -webkit-transition-delay: 1800ms; transition-delay: 1800ms; } .fade-content.show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .l-header { position: fixed; top: 0; height: 8.8rem; left: 0; right: 0; z-index: 99; background: rgba(12, 7, 5, 0.9); } .l-header__inner { padding-left: 10rem; } .l-header__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .l-header__logo { width: 18.2rem; } .l-header__logo a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .l-header__logo a:hover { opacity: 0.7; } .l-header__nav { width: 65.6rem; } .l-header__nav .c-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .l-header__nav .c-nav__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3.8rem; padding-top: 0.2rem; } .l-header__nav .c-nav__link { color: #ffffff; position: relative; font-variant: small-caps; } .l-header__nav .c-nav__link ._en { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 2.2rem; line-height: 1; letter-spacing: 0.08em; } .l-header__nav .c-nav__link::after { content: ""; position: absolute; bottom: -0.2rem; left: 0; right: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff)); background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: bottom right; background-size: 0 0.1rem; -webkit-transition: background-size 0.3s; transition: background-size 0.3s; } .l-header__nav .c-nav__link:hover::after { background-position: bottom left; background-size: 100% 0.1rem; } .l-header__nav .c-nav__btn { width: 30.8rem; } .l-header__nav .c-nav__btn .btn-links { width: 100%; height: 8.8rem; background: url(/assets/images/bg_contact.png) no-repeat; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 4.5rem 0 5.4rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .l-header__nav .c-nav__btn .btn-links--txt { font-weight: 700; font-size: 1.8rem; line-height: 1; letter-spacing: 0.08em; text-align: center; position: relative; } .l-header__nav .c-nav__btn .btn-links--txt:after { content: ""; position: absolute; top: 50%; right: -1.6rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1.2rem; height: 1.2rem; background: url(/assets/images/icon_blank.svg) no-repeat; background-size: cover; } .l-header__nav .c-nav__btn .btn-links:hover { opacity: 0.7; } @media screen and (max-width: 767px) { .l-header { top: 0; height: 7.2rem; background: #0C0705; } .l-header__inner { padding: 2.1rem 3.2rem; } .l-header__logo { width: 14.2rem; } .l-header__nav { width: 100%; height: 100vh; position: absolute; top: 7.2rem; right: -100%; -webkit-transition: right 0.3s ease-in-out; transition: right 0.3s ease-in-out; } .l-header__nav.open { right: 0; overflow-x: scroll; } .l-header__nav .c-nav { width: 100%; display: block; padding: 3rem 3.2rem 20rem; position: relative; margin-top: -7.7rem; } .l-header__nav .c-nav::before { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: #2C2C2C; -webkit-transform: skewY(5deg); transform: skewY(5deg); -webkit-transform-origin: top left; transform-origin: top left; } .l-header__nav .c-nav__menu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0; padding-top: 0; } .l-header__nav .c-nav__menu li { display: block; width: 100%; } .l-header__nav .c-nav__menu li:last-child .c-nav__link::before { display: none; } .l-header__nav .c-nav__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.6rem; width: 100%; height: 11.8rem; padding-left: 0.8rem; } .l-header__nav .c-nav__link ._en { font-weight: 500; font-style: Italic; font-size: 2.8rem; line-height: 1; letter-spacing: 0.11em; } .l-header__nav .c-nav__link ._ja { font-weight: 700; font-size: 1.2rem; line-height: 1.6; letter-spacing: 0.24em; } .l-header__nav .c-nav__link::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 0.1rem; background: -webkit-gradient(linear, left top, right top, from(#E0E0E0), color-stop(85%, #E0E0E0), to(rgba(224, 224, 224, 0))); background: linear-gradient(90deg, #E0E0E0 0%, #E0E0E0 85%, rgba(224, 224, 224, 0) 100%); } .l-header__nav .c-nav__link::after { display: none; } .l-header__nav .c-nav__btn { width: 24.6rem; position: fixed; right: 0; bottom: 0; } .l-header__nav .c-nav__btn .btn-links { height: 5.6rem; background: url(/assets/images/bg_contact_sp.png) no-repeat; background-size: cover; padding: 0 3.6rem; } .l-header__nav .c-nav__btn .btn-links--txt { font-size: 1.5rem; } .l-header__nav .c-nav__btn .btn-links--txt:after { content: ""; position: absolute; top: 50%; right: -1.6rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1.2rem; height: 1.2rem; background: url(/assets/images/icon_blank.svg) no-repeat; background-size: cover; } .l-header .openbtn1 { position: absolute; top: 2.8rem; right: 3.2rem; background: transparent; cursor: pointer; width: 2.4rem; height: 1.6rem; z-index: 99; } .l-header .openbtn1 span { display: inline-block; -webkit-transition: all 0.4s; transition: all 0.4s; position: absolute; left: 0; right: 0; height: 0.2rem; background: #ffffff; } .l-header .openbtn1 span:nth-of-type(1) { width: 1.6rem; top: 0; } .l-header .openbtn1 span:nth-of-type(2) { width: 2rem; top: 0.7rem; } .l-header .openbtn1 span:nth-of-type(3) { width: 100%; top: 1.4rem; } .l-header .openbtn1.active span:nth-of-type(1) { width: 100%; top: 0.7rem; left: 0.2rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .l-header .openbtn1.active span:nth-of-type(2) { opacity: 0; } .l-header .openbtn1.active span:nth-of-type(3) { top: 0.7rem; left: 0.2rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); } } .l-footer__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 0 12rem 3.2rem; } .l-footer__logo { width: 11.1rem; } .l-footer__logo a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .l-footer__logo a:hover { opacity: 0.7; } .l-footer__copyright { font-family: "Inter", sans-serif; font-weight: 400; font-size: 1.3rem; line-height: 1; } @media screen and (max-width: 767px) { .l-footer__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4.8rem 0 8rem; row-gap: 4.2rem; } .l-footer__copyright { text-align: center; } } #loading-page { position: fixed; inset: 0; background: #1B1717; z-index: 9999; overflow: hidden; opacity: 1; -webkit-transition: opacity 0.8s ease-out; transition: opacity 0.8s ease-out; } #loading-page .loading-bg { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: url(/assets/images/bg_loadingPage.png) repeat center/auto; -webkit-animation: slideBg 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; animation: slideBg 1s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; } body.loaded #loading-page { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #loading-page, #loading-page .loading-bg { -webkit-animation: none; animation: none; -webkit-transition: none; transition: none; } } .l-mv { position: relative; background: url(/assets/images/mv_pc.png) no-repeat center/cover; height: 83.6rem; } .l-mv__inner { width: 64.1rem; height: 61.3rem; position: absolute; bottom: 6.5rem; left: 10rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .l-mv__text { width: 100%; } .l-mv__youtube { width: 32rem; } @media screen and (max-width: 1480px) { .l-mv__inner { left: 8rem; } } @media screen and (max-width: 767px) { .l-mv { background: url(/assets/images/mv_sp.png) no-repeat center/cover; height: 60.6rem; margin-top: 4.6rem; } .l-mv__inner { width: 100%; height: 100%; bottom: 0; left: 0; padding: 6.1rem 0 5.6rem 3rem; } .l-mv__text { width: 32.9rem; } .l-mv__youtube { width: 18.6rem; margin-left: 0.4rem; } } .l-intro { height: 62.2rem; margin-top: 0.4rem; background: url(/assets/images/intro_bg.jpg) no-repeat center/cover; position: relative; } .l-intro__content { width: 65rem; position: absolute; top: 11.6rem; left: calc(31.82vw - 37.2rem); } .l-intro__content .c-txt { margin-bottom: 4rem; } .l-intro__content .c-txt:last-child { margin-bottom: 0; } @media screen and (min-width: 1201px) and (max-width: 1480px) { .l-intro { background: url(/assets/images/intro_bg_02.png) no-repeat left/cover; } .l-intro__content { left: 10rem; } } @media screen and (max-width: 1200px) { .l-intro { background: url(/assets/images/intro_bg_02.png) no-repeat left/cover; } .l-intro__content { left: 8rem; } } @media screen and (max-width: 767px) { .l-intro { height: auto; margin-top: 0; background: transparent; } .l-intro__content { width: 100%; position: relative; top: 0; left: 0; background: url(/assets/images/intro-bg_sp.png) no-repeat; background-size: cover; padding: 4.4rem 2.1rem 5.4rem 3.2rem; } .l-intro__content .c-txt { margin-bottom: 2rem; letter-spacing: 0.04em; } } .l-feature { padding: 10.4rem 0 14.7rem; background: linear-gradient(197.25deg, #2D2A2A 22.63%, #3F3F3F 41.11%, #161212 66.2%); position: relative; } .l-feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: url(/assets/images/texture01.jpg) repeat center/auto; opacity: 0.14; mix-blend-mode: plus-lighter; } .l-feature .l-container { position: relative; z-index: 1; } .l-feature .c-heading__en { width: 34.7rem; } .l-feature__boxSlider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 9.4rem; margin-top: 7.2rem; position: relative; } .l-feature__boxSlider .l-feature__item { width: calc(100% - 74.2rem - 9.4rem); } .l-feature__boxSlider .l-feature__item--heading { margin-bottom: 2.4rem; } .l-feature__boxSlider .l-feature__item--text { margin-top: 0; } .l-feature__boxSlider .l-feature__item--text .--txt { letter-spacing: 0.03em; } .l-feature__boxSlider-carousel { width: 74.2rem; } .l-feature__boxSlider-carousel .mySwiper2 { position: relative; direction: ltr; } .l-feature__boxSlider-carousel .mySwiper2 .slide-caption { width: 25rem; height: 3.6rem; position: absolute; left: 0; bottom: 0; background: url(/assets/images/bg_caption_slider.png) no-repeat; background-size: cover; padding: 0.6rem 1.6rem; z-index: 10; } .l-feature__boxSlider-carousel .mySwiper2 .slide-caption span { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 2.4rem; line-height: 1; letter-spacing: 0.15em; } .l-feature__boxSlider-carousel .mySwiper { position: absolute; left: 0; top: 40.2rem; max-width: 48.4rem; width: 100%; direction: rtl; } .l-feature__boxSlider-carousel .mySwiper .pause { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 0.9rem; -moz-column-gap: 0.9rem; column-gap: 0.9rem; margin-bottom: 1.6rem; direction: ltr; } .l-feature__boxSlider-carousel .mySwiper .pause-ttl { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: 0.15em; } .l-feature__boxSlider-carousel .mySwiper .pause .btn-pause { width: 1.8rem; height: 1.8rem; cursor: pointer; position: relative; border: none; background: transparent; } .l-feature__boxSlider-carousel .mySwiper .pause .btn-pause::before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: url(/assets/images/icon_pause.png) no-repeat; background-size: cover; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .l-feature__boxSlider-carousel .mySwiper .pause .btn-pause::after { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: url(/assets/images/icon_play.png) no-repeat; background-size: cover; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .l-feature__boxSlider-carousel .mySwiper .pause .btn-pause.is-pause::before { opacity: 1; } .l-feature__boxSlider-carousel .mySwiper .pause .btn-pause.is-pause::after { opacity: 0; } .l-feature__boxSlider-carousel .mySwiper .pause .btn-pause.is-play::before { opacity: 0; } .l-feature__boxSlider-carousel .mySwiper .pause .btn-pause.is-play::after { opacity: 1; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide { width: 33.3333333333%; height: 3.6rem; background: #686868; border-right: 0.1rem solid #9A9A9A; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide.swiper-slide-thumb-active { background: #CC0001; position: relative; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide.swiper-slide-thumb-active span { -webkit-transform: translateX(0.8rem); transform: translateX(0.8rem); } .l-feature__boxSlider-carousel .mySwiper .swiper-slide.swiper-slide-thumb-active span::before { opacity: 1; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide:first-child { border-right: none; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide span { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 1.9rem; line-height: 1; letter-spacing: 0.12em; position: relative; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide span::before { content: ""; position: absolute; top: 50%; left: -1.6rem; width: 0.6rem; height: 0.7rem; background: url(/assets/images/icon_arrow_thumb.png) no-repeat; background-size: cover; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide:hover { background: #CC0001; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide:hover span { -webkit-transform: translateX(0.8rem); transform: translateX(0.8rem); } .l-feature__boxSlider-carousel .mySwiper .swiper-slide:hover span::before { opacity: 1; } @media screen and (min-width: 1201px) and (max-width: 1480px) { .l-feature__boxSlider { gap: 5.4rem; } .l-feature__boxSlider .l-feature__item { width: 48.4rem; } .l-feature__boxSlider-carousel { width: calc(100% - 48.4rem - 5.4rem); } .l-feature__boxSlider-carousel .mySwiper { max-width: 48.4rem; } } @media screen and (max-width: 1200px) { .l-feature__boxSlider { gap: 5.4rem; } .l-feature__boxSlider .l-feature__item { width: calc(100% - 49.9rem - 5.4rem); } .l-feature__boxSlider-carousel { width: 49.9rem; } } .l-feature__boxWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 9.6rem; margin-top: 8rem; } @media screen and (max-width: 1480px) { .l-feature__boxWrap { gap: 6.4rem; } } .l-feature__item { width: calc((100% - 9.6rem) / 2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .l-feature__item--heading { margin-bottom: 3.2rem; } .l-feature__item--heading .--number { font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: Italic; font-size: 7rem; line-height: 1; letter-spacing: 0.06em; color: #BC0001; margin-bottom: 0.8rem; } .l-feature__item--heading .--title { font-weight: 700; font-size: 3rem; line-height: 1.6; letter-spacing: 0.1em; } .l-feature__item--text { margin-top: 3.2rem; } .l-feature__item--text .--txt { font-weight: 500; font-size: 1.7rem; line-height: 1.8; letter-spacing: 0.1em; color: #C5C5C5; } .l-feature__item--text .--note { font-weight: 500; font-size: 1.3rem; line-height: 1.6923076923; letter-spacing: 0.06em; color: #C5C5C5; margin-top: 0.8rem; } @media screen and (max-width: 1480px) { .l-feature__item { width: calc((100% - 6.4rem) / 2); } } .l-feature__lifestyle { margin-top: 9.6rem; } .l-feature__lifestyle--title { width: 66.4rem; margin: 0 auto; } .l-feature__lifestyle--list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 4rem; margin-top: 4rem; } .l-feature__lifestyle--item { width: calc((100% - 8rem) / 3); } .l-feature__lifestyle--item-detail { margin-top: 2.4rem; } .l-feature__lifestyle--item-detail .--ttl { font-weight: 700; font-size: 2.2rem; line-height: 1.3636363636; letter-spacing: 0.08em; margin-bottom: 1rem; } .l-feature__lifestyle--item-detail .--txt { font-weight: 500; font-size: 1.7rem; line-height: 1.8; letter-spacing: 0.08em; color: #C5C5C5; } @media screen and (max-width: 767px) { .l-feature { padding: 5.6rem 0 6.4rem; } .l-feature .c-heading__en { width: 21.9rem; } .l-feature__boxSlider { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.4rem; margin-top: 1.9rem; } .l-feature__boxSlider .l-feature__item { width: 100%; } .l-feature__boxSlider .l-feature__item--heading { margin-bottom: 1.2rem; } .l-feature__boxSlider .l-feature__item--text { margin-bottom: 0; } .l-feature__boxSlider .l-feature__item--text .--txt { letter-spacing: 0.02em; } .l-feature__boxSlider-carousel { width: 100%; } .l-feature__boxSlider-carousel .mySwiper2 .slide-caption { width: 14.4rem; height: 2.3rem; background: url(/assets/images/bg_caption_slider_sp.png) no-repeat; background-size: cover; padding: 0.5rem 1rem; z-index: 10; } .l-feature__boxSlider-carousel .mySwiper2 .slide-caption span { font-size: 1.4rem; } .l-feature__boxSlider-carousel .mySwiper { position: relative; top: 0; max-width: 100%; margin-top: 2rem; } .l-feature__boxSlider-carousel .mySwiper .pause { -webkit-column-gap: 0.6rem; -moz-column-gap: 0.6rem; column-gap: 0.6rem; } .l-feature__boxSlider-carousel .mySwiper .pause-ttl { font-size: 1.5rem; } .l-feature__boxSlider-carousel .mySwiper .pause .btn-pause { width: 2rem; height: 2rem; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide { height: 3.4rem; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide.swiper-slide-thumb-active span { -webkit-transform: translateX(0.5rem); transform: translateX(0.5rem); } .l-feature__boxSlider-carousel .mySwiper .swiper-slide span { font-size: 1.5rem; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide span::before { left: -1.1rem; } .l-feature__boxSlider-carousel .mySwiper .swiper-slide:hover span { -webkit-transform: translateX(0.5rem); transform: translateX(0.5rem); } .l-feature__boxWrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4rem; margin-top: 4rem; } .l-feature__item { width: 100%; } .l-feature__item--heading { margin-bottom: 1.2rem; } .l-feature__item--heading .--number { font-size: 4.5rem; margin-bottom: 0.6rem; } .l-feature__item--heading .--title { font-size: 1.8rem; } .l-feature__item--pic { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .l-feature__item--text { margin-top: 0; margin-bottom: 2.4rem; } .l-feature__item--text .--txt { font-size: 1.4rem; } .l-feature__item--text .--note { font-size: 1.2rem; line-height: 1.6; margin-top: 0.6rem; } .l-feature__lifestyle { margin: 6.4rem -3.2rem 0; } .l-feature__lifestyle--title { width: 100%; } .l-feature__lifestyle--list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.2rem; margin-top: 4.8rem; } .l-feature__lifestyle--item { width: 100%; } .l-feature__lifestyle--item:nth-child(2) { width: 29.6rem; margin-left: auto; } .l-feature__lifestyle--item:nth-child(2) .l-feature__lifestyle--item-pic { text-align: right; } .l-feature__lifestyle--item:nth-child(2) .l-feature__lifestyle--item-detail { padding-left: 0; padding-right: 0; } .l-feature__lifestyle--item-pic { width: 29.6rem; } .l-feature__lifestyle--item-detail { margin-top: 1.6rem; padding-left: 3.6rem; padding-right: 4.2rem; } .l-feature__lifestyle--item-detail .--ttl { font-size: 1.6rem; line-height: 1.875; margin-bottom: 0.4rem; } .l-feature__lifestyle--item-detail .--txt { font-size: 1.4rem; } } .l-layout { padding: 10.4rem 0 12.8rem; background: url(/assets/images/layout_bg_pc.png) no-repeat center/cover; } .l-layout .c-heading__en { width: 30.3rem; } .l-layout__design { margin-top: 6.4rem; } .l-layout__design--list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 2.4rem; } .l-layout__design--pic { width: calc((100% - 4.8rem) / 3); } .l-layout__design--note { font-weight: 500; font-size: 1.7rem; line-height: 1.8; letter-spacing: 0.08em; color: #C5C5C5; margin-top: 1.6rem; } .l-layout__gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 3.2rem 2.4rem; margin-top: 4.8rem; } .l-layout__gallery--img { width: calc((100% - 9.6rem) / 5); } @media screen and (max-width: 767px) { .l-layout { padding: 5.6rem 0 6.4rem; background: #403C3C url(/assets/images/layout_bg_sp.png) no-repeat top/contain; } .l-layout .c-heading__en { width: 19.1rem; } .l-layout__design { margin-top: 3.6rem; } .l-layout__design--list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.9rem; } .l-layout__design--pic { width: 100%; } .l-layout__design--note { font-size: 1.4rem; margin-top: 2.4rem; } .l-layout__gallery { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.8rem; margin-top: 4rem; } .l-layout__gallery--img { width: calc((100% - 0.8rem) / 2); } .l-layout__gallery--img:nth-child(5) { width: calc((100% - 1.6rem) / 3); } .l-layout__gallery--img:nth-child(6) { width: calc((100% - 1.6rem) / 3); } .l-layout__gallery--img:nth-child(7) { width: calc((100% - 1.6rem) / 3); } .l-layout__gallery--img:nth-child(8) { width: calc((100% - 1.6rem) / 3); } .l-layout__gallery--img:nth-child(9) { width: calc((100% - 1.6rem) / 3); } .l-layout__gallery--img:nth-child(10) { width: calc((100% - 1.6rem) / 3); } } .l-overview { padding: 10.4rem 0 12.8rem; } .l-overview .c-heading__en { width: 40rem; } .l-overview__info { margin-top: 5.6rem; } .l-overview__info--ttl { font-weight: 700; font-size: 2.8rem; line-height: 1.1; letter-spacing: 0.08em; padding-left: 1.4rem; border-left: 0.3rem solid #CC0001; } .l-overview__info--address { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 7.2rem; margin-top: 4rem; } .l-overview__info--map { width: calc(100% - 7.2rem - 50.2rem); height: 52.5rem; } .l-overview__info--deatail { width: 50.2rem; } .l-overview__info--deatail ul { margin-top: 4.1rem; } .l-overview__info--deatail ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 2.4rem; -moz-column-gap: 2.4rem; column-gap: 2.4rem; margin-bottom: 1.9rem; } .l-overview__info--deatail ul li:last-child { margin-bottom: 0; } .l-overview__info--deatail ul li span { font-weight: 500; font-size: 1.7rem; line-height: 1; letter-spacing: 0.08em; } .l-overview__info--deatail ul li span:first-child { width: 7.2rem; } .l-overview__info--deatail ul li span:last-child { width: calc(100% - 7.2rem - 2.4rem); } @media screen and (max-width: 1480px) { .l-overview__info--address { gap: 6.4rem; } .l-overview__info--map { width: calc(100% - 6.4rem - 50.2rem); } } .l-overview__message { position: relative; margin-top: 8rem; background: url(/assets/images/bg_overview_message_pc.png) no-repeat; background-size: cover; } .l-overview__message--inner { padding: 7.2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6.4rem; position: relative; z-index: 1; } .l-overview__message--left { width: 48.8rem; } .l-overview__message--logo { width: 100%; margin-bottom: 4rem; } .l-overview__message--detail { margin-top: 2.4rem; } .l-overview__message--detail .--ttl { font-weight: 700; font-size: 1.8rem; line-height: 1.6666666667; margin-bottom: 0.8rem; } .l-overview__message--detail .--txt { font-weight: 400; font-size: 1.3rem; line-height: 1.8; letter-spacing: 0.06em; } .l-overview__message--right { width: calc(100% - 48.8rem - 6.4rem); } .l-overview__message--title { width: 100%; } .l-overview__message--text { margin-top: 2.4rem; } .l-overview__message--text .--txt { font-weight: 400; font-size: 1.4rem; line-height: 1.8; letter-spacing: 0.06em; margin-bottom: 1.2rem; } .l-overview__message--text .--txt:last-child { margin-bottom: 0; } @media screen and (max-width: 1480px) { .l-overview__message--left { width: 44.6rem; } .l-overview__message--right { width: calc(100% - 44.6rem - 6.4rem); } } @media screen and (max-width: 767px) { .l-overview { padding: 5.6rem 0 0; } .l-overview .l-container { padding: 0; } .l-overview .c-heading__en { width: 25.2rem; } .l-overview__info { margin-top: 4.8rem; } .l-overview__info--ttl { font-size: 1.8rem; padding-left: 1.1rem; border-left: 0.3rem solid #CC0001; margin-left: 3.2rem; } .l-overview__info--address { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5.1rem; margin-top: 2.4rem; } .l-overview__info--map { width: 100%; height: 52rem; } .l-overview__info--deatail { width: 100%; padding: 0 3.2rem; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .l-overview__info--deatail ul { margin-top: 2.6rem; } .l-overview__info--deatail ul li { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; margin-bottom: 2rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .l-overview__info--deatail ul li span { font-size: 1.4rem; line-height: 1.2; } .l-overview__info--deatail ul li span:first-child { width: 6.6rem; } .l-overview__info--deatail ul li span:last-child { width: calc(100% - 6.6rem); } .l-overview__message { margin-top: 0; background: url(/assets/images/bg_overview_message_sp.png) repeat; background-size: contain; } .l-overview__message--inner { padding: 4rem 3.2rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 3.2rem; } .l-overview__message--left { width: 100%; } .l-overview__message--logo { margin-bottom: 3.2rem; } .l-overview__message--detail { margin-top: 2.4rem; } .l-overview__message--detail .--ttl { font-size: 1.6rem; line-height: 1.875; margin-bottom: 0.4rem; } .l-overview__message--detail .--txt { font-size: 1.3rem; } .l-overview__message--right { width: 100%; padding-top: 0.5rem; } .l-overview__message--text { margin-top: 2.4rem; } .l-overview__message--text .--txt { font-size: 1.4rem; } } /*# sourceMappingURL=style.css.map */