@import url("https://fonts.googleapis.com/css2?family=Gloock&family=Noto+Sans+JP&family=Poppins&display=swap"); /*** The new CSS reset - version 1.7.3 (last updated 7.8.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-width: 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; } /* reset default text opacity of input placeholder */ ::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; } html { font-size: 62.5%; font-family: "Poppins", "Noto Sans JP", sans-serif; font-weight: 400; background: #FEFEFA; } body { position: relative; z-index: 1; } img { max-width: 100%; } a { text-decoration: none; } p, ul, ol, dl, table { line-height: 2; font-size: 1.6rem; color: #333333; } @media screen and (max-width: 768px) { p, ul, ol, dl, table { font-size: 3.7333333333vw; } } .l-header { padding: 55px 55px 50px; position: fixed; top: 0; left: 0; width: 100%; z-index: 50; transition: all 0.3s ease; background: #FEFEFA; } @media screen and (max-width: 768px) { .l-header { padding: 4.2666666667vw 9.3333333333vw; } } .l-header.is-hide { opacity: 0; pointer-events: none; } .l-header.is-narrow { padding: 24px; } @media screen and (max-width: 768px) { .l-header.is-narrow { padding: 3.7333333333vw 9.3333333333vw; } } .l-header.is-border { border-bottom: 1px solid #DED7CA; } .l-header__inner { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; max-width: 1620px; } .l-header__logo { position: relative; z-index: 20; } .l-header__logo img { width: 175px; transition: width 0.3s ease; } @media screen and (max-width: 768px) { .l-header__logo img { width: 25.8666666667vw; } } .l-header__hamburger { display: none; } @media screen and (max-width: 768px) { .l-header__hamburger { display: block; width: 7.4666666667vw; height: 7.4666666667vw; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; position: relative; z-index: 20; } .l-header__hamburger.is-act .l-header__hamburger__bar:nth-child(1) { transform: rotate(26deg); top: 16%; width: 9.6vw; } .l-header__hamburger.is-act .l-header__hamburger__bar:nth-child(2) { transform: rotate(-26deg); top: -16%; width: 9.6vw; } } @media screen and (max-width: 768px) { .l-header__hamburger__bar { position: relative; height: 1px; display: block; width: 100%; margin: 1.0666666667vw 0; background: #707070; transition: all 0.3s ease; } } .l-header__navigation { display: flex; align-items: center; } @media screen and (max-width: 768px) { .l-header__navigation { display: block; text-align: center; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: #DBD4C7; z-index: 10; padding: 21.3333333333vw 5.3333333333vw 5.3333333333vw; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .l-header__navigation.is-act { opacity: 1; pointer-events: auto; } } .l-header__navigation__menu { display: flex; align-items: center; margin-right: 364px; } @media screen and (max-width: 1550px) { .l-header__navigation__menu { margin-right: 10vw; } } @media screen and (max-width: 768px) { .l-header__navigation__menu { display: block; margin-right: 0; } } .l-header__navigation__menu a { display: inline-block; letter-spacing: 0.02em; font-size: 1.8rem; margin: 0 50px; position: relative; transition: opacity 0.3s ease; } .l-header__navigation__menu a:hover { opacity: 0.5; } @media screen and (max-width: 768px) { .l-header__navigation__menu a { margin: 5.8666666667vw 0 0; font-size: 5.6vw; } } .l-header__navigation__insta { display: inline-block; transition: opacity 0.3s ease; } .l-header__navigation__insta:hover { opacity: 0.5; } @media screen and (max-width: 768px) { .l-header__navigation__insta { margin-top: 12.2666666667vw; } } .l-footer { padding: 65px 0 70px; background: #b6d3e0; } @media screen and (max-width: 768px) { .l-footer { padding: 12vw 0 10.1333333333vw; } } .l-footer__row { display: flex; position: relative; } @media screen and (max-width: 768px) { .l-footer__row { display: block; position: relative; padding-bottom: 16vw; } } .l-footer__logo { width: 218px; margin-top: 10px; } @media screen and (max-width: 768px) { .l-footer__logo { width: 25.8666666667vw; margin-top: 0; } } .l-footer__privacy { display: inline-block; margin-top: 68px; font-size: 1.2rem; transition: opacity 0.3s ease; letter-spacing: 0.08em; } .l-footer__privacy:hover { opacity: 0.5; } @media screen and (max-width: 768px) { .l-footer__privacy { position: absolute; bottom: 7.4666666667vw; left: 0; } } .l-footer__copyright { margin-top: 4px; font-size: 1.2rem; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .l-footer__copyright { position: absolute; bottom: 0; left: 0; font-size: 3.2vw; } } .l-footer__navigation { margin-left: 175px; } @media screen and (max-width: 768px) { .l-footer__navigation { margin: 5.8666666667vw 0 0; display: flex; justify-content: space-between; } } .l-footer__navigation a { display: block; font-size: 1.8rem; margin-bottom: 9px; letter-spacing: 0.02em; transition: opacity 0.3s ease; } @media screen and (max-width: 768px) { .l-footer__navigation a { font-size: 3.7333333333vw; } } .l-footer__navigation a:hover { opacity: 0.5; } .l-footer__address { margin-left: 310px; letter-spacing: 0.08em; } @media screen and (max-width: 768px) { .l-footer__address { display: flex; justify-content: space-between; align-items: flex-end; margin: 1.0666666667vw 0 0; } } .l-footer__address a { transition: opacity 0.3s ease; text-decoration: underline; } .l-footer__address a:hover { opacity: 0.5; } .l-footer__address__insta { display: inline-block; margin-top: 40px; transition: opacity 0.3s ease; } @media screen and (max-width: 768px) { .l-footer__address__insta { margin-top: 0; padding: 1.3333333333vw 0; } } .l-footer__address__insta:hover { opacity: 0.5; } .l-main { border-bottom: 1px solid #DED7CA; } .l-wrap { max-width: 100%; overflow: hidden; position: relative; z-index: 1; } .l-container { max-width: 1200px; padding: 0 50px; margin: 0 auto; } @media screen and (max-width: 768px) { .l-container { padding: 0 9.3333333333vw; } } .l-container.l-container--narrow { max-width: 1100px; } .c-title { text-align: center; font-size: 3.2rem; font-weight: 400; letter-spacing: 0.1em; } @media screen and (max-width: 768px) { .c-title { font-size: 4.8vw; } } .c-button { display: block; text-align: center; font-size: 1.6rem; letter-spacing: 0.1em; background: #333333; color: #ffffff; border-radius: 50px; padding: 15px; transition: background 0.3s ease, color 0.3s ease; } @media screen and (max-width: 768px) { .c-button { font-size: 3.7333333333vw; padding: 3.7333333333vw; } } .c-button:hover { background: #b6d3e0; color: #333333; } .c-button.c-button--invalid { pointer-events: none; background: #b6d3e0; } .p-mainvisual { padding-top: 146px; } @media screen and (max-width: 768px) { .p-mainvisual { padding-top: 16vw; } } @media screen and (max-width: 768px) { .p-mainvisual__movie { display: flex; align-items: center; justify-content: center; } } .p-mainvisual__movie video { display: block; width: 100%; } @media screen and (max-width: 768px) { .p-mainvisual__movie video { height: 100vw; width: auto; } } .p-concept { padding: 242px 0 0; background-image: url("../img/concept_background.png"); background-repeat: no-repeat; background-size: 1861px auto; background-position: top -55px center; } @media screen and (max-width: 768px) { .p-concept { padding-top: 18.6666666667vw; background-image: url("../img/concept_background_sp.png"); background-size: 100% auto; background-position: center top; } } .p-concept__inner { position: relative; display: flex; padding-bottom: 215px; } @media screen and (max-width: 768px) { .p-concept__inner { display: block; padding-bottom: 36.2666666667vw; } } .p-concept__title { margin-left: 85px; opacity: 0; transform: translateY(40px); transition: all 0.8s; } .p-concept__title.aos-animate { opacity: 1; transform: translateY(0px); } @media screen and (max-width: 768px) { .p-concept__title { margin: 0 auto 17.6vw; width: 48vw; } } .p-concept__text { padding-top: 60px; margin-left: 164px; } @media screen and (max-width: 768px) { .p-concept__text { padding-top: 0; margin-left: 0; } } .p-concept__text p + p { margin-top: 32px; } @media screen and (max-width: 768px) { .p-concept__text p + p { white-space: nowrap; margin-top: 7.4666666667vw; } } .p-concept__text p { opacity: 0; transform: translateY(40px); transition: all 0.8s; } .p-concept__text p:nth-child(1) { transition-delay: 0.2s; } .p-concept__text p:nth-child(2) { transition-delay: 0.4s; } .p-concept__text p:nth-child(3) { transition-delay: 0.6s; } .p-concept__text p:nth-child(4) { transition-delay: 0.8s; } .p-concept__text p:nth-child(5) { transition-delay: 1s; } .p-concept__text p:nth-child(6) { transition-delay: 1.2s; } .p-concept__text.aos-animate p { opacity: 1; transform: translateY(0px); } .p-concept__card { position: absolute; left: 0; bottom: -155px; width: 450px; opacity: 0; transform: translateY(40px); transition: all 0.8s; transition-delay: 0.3s; } .p-concept__card.aos-animate { opacity: 1; transform: translateY(0px); } @media screen and (max-width: 768px) { .p-concept__card { bottom: -14.6666666667vw; width: 40vw; } } .p-lineup { padding: 188px 0 50px; } @media screen and (max-width: 768px) { .p-lineup { padding-top: 16.5333333333vw; padding-bottom: 0; } } .p-lineup__title { margin-bottom: 148px; } @media screen and (max-width: 768px) { .p-lineup__title { margin-bottom: 10.6666666667vw; } } .p-lineup__block { position: relative; margin-bottom: 200px; } @media screen and (max-width: 768px) { .p-lineup__block { margin-bottom: 20vw; } } .p-lineup__block:nth-child(odd) .p-lineup__image { right: auto; left: calc(50% - 38px); } @media screen and (max-width: 768px) { .p-lineup__block:nth-child(odd) .p-lineup__image { left: 0; } } .p-lineup__block:nth-child(odd) .p-lineup__information { margin-left: 0; } .p-lineup__block:nth-child(odd) .p-lineup__information__en { left: auto; right: calc(50% + 1px); } @media screen and (max-width: 768px) { .p-lineup__block:nth-child(odd) .p-lineup__information__en { right: auto; left: 0; } } .p-lineup__image { position: absolute; right: calc(50% - 38px); top: 0; } .p-lineup__image.p-lineup__image--invalid { pointer-events: none; } @media screen and (max-width: 768px) { .p-lineup__image { position: relative; right: 0; } } .p-lineup__image img { width: calc(50vw + 38px); max-width: 1000px; display: block; } @media screen and (max-width: 768px) { .p-lineup__image img { width: 58.6666666667vw; } } .p-lineup__image img:nth-child(1) { position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; transition: opacity 0.5s ease; } @media screen and (max-width: 768px) { .p-lineup__image img:nth-child(1) { position: relative; opacity: 1; left: -9.3333333333vw; margin-bottom: -9.3333333333vw; } } @media screen and (max-width: 768px) { .p-lineup__image img:nth-child(2) { position: relative; margin-left: auto; left: 9.3333333333vw; z-index: 10; } } .p-lineup__image:hover img:nth-child(1) { opacity: 1; } .p-lineup__information { width: 316px; margin-left: auto; padding-top: 390px; } @media screen and (max-width: 768px) { .p-lineup__information { width: 100%; padding-top: 5.8666666667vw; } } .p-lineup__information.p-lineup__information--supplement { padding-top: 235px; } @media screen and (max-width: 768px) { .p-lineup__information.p-lineup__information--supplement { padding-top: 5.8666666667vw; } } .p-lineup__information.p-lineup__information--supplement .p-lineup__information__price { margin-top: 6px; } @media screen and (max-width: 768px) { .p-lineup__information.p-lineup__information--supplement .p-lineup__information__price { margin-top: 1.6vw; margin-bottom: -1.0666666667vw; } } .p-lineup__information__en { position: absolute; top: 42px; left: calc(50% + 1px); font-size: 12rem; letter-spacing: 0.06em; line-height: 1.04; font-family: "Gloock"; color: #b6d3e0; white-space: nowrap; z-index: 10; opacity: 0; transform: translateY(40px); transition: all 0.8s; } .p-lineup__information__en.aos-animate { opacity: 1; transform: translateY(0px); } @media screen and (max-width: 768px) { .p-lineup__information__en { top: 46.9333333333vw; left: 0; line-height: 1.1; font-size: 8vw; } } .p-lineup__information__name { font-size: 2.1rem; opacity: 0; transform: translateY(40px); transition: all 0.8s; } .p-lineup__information__name.aos-animate { opacity: 1; transform: translateY(0px); } @media screen and (max-width: 768px) { .p-lineup__information__name { font-size: 4.2666666667vw; } } .p-lineup__information__text { margin-top: 28px; opacity: 0; transform: translateY(40px); transition: all 0.8s; } .p-lineup__information__text.aos-animate { opacity: 1; transform: translateY(0px); } .p-lineup__information__text + h4 { margin-top: 45px; } @media screen and (max-width: 768px) { .p-lineup__information__text + h4 { margin-top: 4.2666666667vw; } } @media screen and (max-width: 768px) { .p-lineup__information__text { margin-top: 4.2666666667vw; } } .p-lineup__information__price { margin-top: 32px; letter-spacing: 0.1em; opacity: 0; transform: translateY(40px); transition: all 0.8s; } .p-lineup__information__price.aos-animate { opacity: 1; transform: translateY(0px); } @media screen and (max-width: 768px) { .p-lineup__information__price { margin-top: 4.2666666667vw; } } .p-lineup__information__button { margin-top: 28px; opacity: 0; transform: translateY(40px); transition: all 0.8s; } .p-lineup__information__button.aos-animate { opacity: 1; transform: translateY(0px); } @media screen and (max-width: 768px) { .p-lineup__information__button { margin-top: 4.2666666667vw; } } .p-lineup__information__button + .p-lineup__information__name { margin-top: 56px; } @media screen and (max-width: 768px) { .p-lineup__information__button + .p-lineup__information__name { margin-top: 8vw; } } .p-news { background: #F0EFEB; } @media screen and (max-width: 768px) { .p-news__front { line-height: 0; } } .p-news__inner { background: #DED7CA; position: relative; z-index: 2; margin-top: -154px; padding-top: 138px; padding-bottom: 150px; } @media screen and (max-width: 768px) { .p-news__inner { margin: 0 -9.3333333333vw; padding-top: 17.6vw; padding-bottom: 19.7333333333vw; } } .p-news__list { max-width: 900px; margin: 62px auto 0; border-top: 1px solid #ffffff; } .p-news__list.aos-animate .p-news__list__row { opacity: 1; transform: translateY(0px); } @media screen and (max-width: 768px) { .p-news__list { margin: 9.6vw 9.3333333333vw 0; } } .p-news__list__row { border-bottom: 1px solid #ffffff; padding-top: 20px; padding-bottom: 34px; letter-spacing: 0.12rem; opacity: 0; transform: translateY(40px); transition: all 0.8s; } .p-news__list__row:nth-child(1) { transition-delay: 0.2s; } .p-news__list__row:nth-child(2) { transition-delay: 0.4s; } .p-news__list__row:nth-child(3) { transition-delay: 0.6s; } .p-news__list__row:nth-child(4) { transition-delay: 0.8s; } .p-news__list__row:nth-child(5) { transition-delay: 1s; } @media screen and (max-width: 768px) { .p-news__list__row { padding-top: 7.4666666667vw; padding-bottom: 6.9333333333vw; } } .p-news__list__row__date { display: block; color: #969696; font-size: 1.4rem; letter-spacing: 0.14rem; margin-bottom: 5px; } @media screen and (max-width: 768px) { .p-news__list__row__date { font-size: 3.7333333333vw; margin-bottom: 1.3333333333vw; } } .p-contact { background: #F0EFEB; padding: 162px 0 200px; } @media screen and (max-width: 768px) { .p-contact { padding: 18.1333333333vw 0 26.6666666667vw; } } .p-contact form { padding-top: 200px; margin-top: -200px; } @media screen and (max-width: 768px) { .p-contact form { padding-top: 21.3333333333vw; margin-top: -21.3333333333vw; } } .p-contact .mw_wp_form_complete { padding-top: 100px; margin-top: -100px; } @media screen and (max-width: 768px) { .p-contact .mw_wp_form_complete { padding-top: 26.6666666667vw; margin-top: -26.6666666667vw; } } .p-contact__row { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 70px; } @media screen and (max-width: 768px) { .p-contact__row { display: block; margin-top: 0; } } .p-contact__row__company { width: 270px; margin-top: 10px; margin-bottom: 50px; } @media screen and (max-width: 768px) { .p-contact__row__company { width: 100%; margin-top: 8.5333333333vw; margin-bottom: 2.6666666667vw; } } .p-contact__row__form { width: 708px; } @media screen and (max-width: 768px) { .p-contact__row__form { width: 100%; } } .p-contact__row__form input[type=text], .p-contact__row__form input[type=email], .p-contact__row__form textarea { background: #fff !important; display: block; width: 100%; font-size: 1.6rem; line-height: 2; padding: 19px 24px; margin-top: 36px; } .p-contact__row__form input[type=text]::placeholder, .p-contact__row__form input[type=email]::placeholder, .p-contact__row__form textarea::placeholder { color: #969696; } .p-contact__row__form input[type=text]:has(+ .error), .p-contact__row__form input[type=email]:has(+ .error), .p-contact__row__form textarea:has(+ .error) { border: #B70000 1px solid; } @media screen and (max-width: 768px) { .p-contact__row__form input[type=text], .p-contact__row__form input[type=email], .p-contact__row__form textarea { padding: 2.9333333333vw 2.6666666667vw; margin-top: 7.2vw; } } .p-contact__row__form .mwform-radio-field { display: inline-block; margin-bottom: 0; } .p-contact__row__form .mwform-radio-field:not(:first-child) { margin-left: 84px !important; } @media screen and (max-width: 768px) { .p-contact__row__form .mwform-radio-field { margin: 0; display: block; } .p-contact__row__form .mwform-radio-field:not(:first-child) { margin: -1.6vw 0 0 !important; } } .p-contact__row__form .mwform-radio-field-text { font-size: 1.6rem; line-height: 1.4; cursor: pointer; position: relative; display: flex; align-items: center; } @media screen and (max-width: 768px) { .p-contact__row__form .mwform-radio-field-text { font-size: 3.7333333333vw; } } .p-contact__row__form .mwform-radio-field-text::before { content: ""; display: block; border: 1px solid #333333; width: 13px; height: 13px; margin-right: 10px; } @media screen and (max-width: 768px) { .p-contact__row__form .mwform-radio-field-text::before { width: 3.2vw; height: 3.2vw; margin-right: 2.1333333333vw; } } .p-contact__row__form .mwform-radio-field-text::after { content: ""; position: absolute; left: 3px; display: block; width: 7px; height: 7px; background-color: #333333; opacity: 0; } @media screen and (max-width: 768px) { .p-contact__row__form .mwform-radio-field-text::after { width: 1.6vw; height: 1.6vw; left: 0.8vw; } } .p-contact__row__form input[type=radio]:checked + .mwform-radio-field-text::after { opacity: 1; } .p-contact__row__form .error { font-size: 1.4rem !important; margin-top: 10px; } @media screen and (max-width: 768px) { .p-contact__row__form .error { margin-top: 2.1333333333vw; font-size: 3.2vw; } } .p-contact__row__form .mw_wp_form_confirm .block { background: #fff; font-size: 1.6rem; line-height: 2; margin-bottom: 36px; padding: 19px 24px; } @media screen and (max-width: 768px) { .p-contact__row__form .mw_wp_form_confirm .block { padding: 2.9333333333vw 2.6666666667vw; margin-top: 7.2vw; } } .p-contact__row__form .mw_wp_form_confirm .block.radio { background: transparent; padding: 0; } .p-contact__row__form .mw_wp_form_confirm .p-contact__form__submit { display: flex; justify-content: space-between; } .p-contact__row__form .mw_wp_form_confirm .p-contact__form__submit input { width: calc(50% - 9px); } .p-contact__row__form .mw_wp_form_confirm .p-contact__form__submit input[name=submitBack] { background: #fff; color: #333; transition: background 0.3s ease; } .p-contact__row__form .mw_wp_form_confirm .p-contact__form__submit input[name=submitBack]:hover { background: #DED7CA; } .p-contact__form__submit { margin-top: 36px; } @media screen and (max-width: 768px) { .p-contact__form__submit { margin-top: 9.6vw; } } .p-contact__form__submit input { display: block; width: 100%; text-align: center; font-size: 1.6rem; cursor: pointer; background: #333333; color: #ffffff; border-radius: 50px; padding: 22px; transition: background 0.3s ease, color 0.3s ease; } @media screen and (max-width: 768px) { .p-contact__form__submit input { font-size: 3.7333333333vw; padding: 3.7333333333vw; } } .p-contact__form__submit input:hover { background: #DED7CA; color: #333333; } .p-complete { text-align: center; padding-top: 440px; padding-bottom: 300px; background: #F0EFEB; } @media screen and (max-width: 768px) { .p-complete { padding-top: 35.4666666667vw; padding-bottom: 20vw; } } .p-complete__button a { display: flex; align-items: center; justify-content: center; height: 70px; width: 345px; border-radius: 50px; background: #ffffff; margin: 95px auto 0; font-size: 1.6rem; transition: background 0.3s ease; } .p-complete__button a:hover { background: #DED7CA; } @media screen and (max-width: 768px) { .p-complete__button a { height: 12.8vw; width: 38.6666666667vw; margin: 11.2vw auto 0; font-size: 3.7333333333vw; } } .p-lower { padding-top: 308px; padding-bottom: 175px; background: #F0EFEB; } @media screen and (max-width: 768px) { .p-lower { padding-top: 35.4666666667vw; padding-bottom: 20vw; } } .p-lower__title { text-align: center; font-size: 3.2rem; letter-spacing: 0.1em; } @media screen and (max-width: 768px) { .p-lower__title { font-size: 4.8vw; } } .p-lower__company { margin: 76px auto 0; letter-spacing: 0.08em; } @media screen and (max-width: 768px) { .p-lower__company { margin: 8.5333333333vw 0 0 0; } } .p-lower__company th { width: 125px; } .p-lower__company th, .p-lower__company td { text-align: left; padding-bottom: 18px; } @media screen and (max-width: 768px) { .p-lower__company th, .p-lower__company td { padding-bottom: 0; display: block; width: 100%; } } @media screen and (max-width: 768px) { .p-lower__company td { padding-bottom: 6.9333333333vw; } } .p-lower__privacy { margin-top: 80px; } @media screen and (max-width: 768px) { .p-lower__privacy { margin-top: 8vw; } } .p-lower__privacy p + p { margin-top: 20px; } @media screen and (max-width: 768px) { .p-lower__privacy p + p { margin-top: 3.7333333333vw; } } .p-lower__privacy__title { font-size: 1.8rem; font-weight: bold; margin-top: 40px; margin-bottom: 24px; letter-spacing: 0.02em; } @media screen and (max-width: 768px) { .p-lower__privacy__title { font-size: 4.2666666667vw; margin-top: 8vw; margin-bottom: 3.7333333333vw; } } .p-lower__privacy__table { width: 100%; margin-top: 22px; } @media screen and (max-width: 768px) { .p-lower__privacy__table { margin-top: 4vw; } } .p-lower__privacy__table th, .p-lower__privacy__table td { border: 1px solid #DCD5C8; padding: 17px 25px; } @media screen and (max-width: 768px) { .p-lower__privacy__table th, .p-lower__privacy__table td { padding: 1.0666666667vw 4.8vw; display: block; width: 100%; } } .p-lower__privacy__table th { font-weight: bold; } .u-hide_pc { display: none; } @media screen and (max-width: 768px) { .u-hide_pc { display: block; } } .u-hide_sp { display: block; } @media screen and (max-width: 768px) { .u-hide_sp { display: none; } }