@charset "UTF-8"; /*** 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, input, textarea):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; 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; -moz-appearance: revert; appearance: revert; } /* 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; } .l-test-output { position: fixed; z-index: 9999; right: 0; bottom: 0; display: grid; justify-items: end; grid-template-columns: auto; row-gap: 10px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; background-color: #ffffff; } .l-test-output > p { font-size: 13px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 13px; color: #ffffff; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 5px 10px; background-color: #ff0000; } body * { font-family: "Zen Kaku Gothic New", sans-serif; } body.lang-en * { font-family: "Inter", sans-serif; } .res-sp { display: none; } .l-header { position: fixed; z-index: 9998; top: 0; left: 0; visibility: hidden; width: 100%; height: 45px; padding-right: 2.5%; padding-left: 5%; opacity: 0; background-color: #ffffff; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1607843137); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1607843137); } @media screen and (max-width: 900px) { .l-header { height: 55px; padding-right: 5%; } } .l-header.active { visibility: visible; opacity: 1; } .l-header__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: 100%; } .l-header__column { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; } .l-header__logo { display: block; } .l-header__logo > a { display: block; width: 90px; height: 15px; } @media screen and (max-width: 900px) { .l-header__logo > a { width: 115px; height: 20px; } } .l-header__logo > a > img { width: 100%; height: 100%; vertical-align: top; } .l-header__lang { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media screen and (max-width: 900px) { .l-header__lang { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } .l-header__lang-btn { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 18px; color: #000000; font-family: "Inter", sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 22px; height: 22px; letter-spacing: 0.03em; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 900px) { .l-header__lang-btn { font-size: 12px; line-height: 12px; width: 15px; height: 15px; } } .l-header__lang-btn:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; } .l-header__btn { margin-left: 50px; } @media screen and (max-width: 900px) { .l-header__btn { margin-left: 25px; } } .l-header__nav-close { position: absolute; z-index: 9999; top: 20px; right: 30px; width: 30px; height: 30px; cursor: pointer; background-image: url(../img/svg/menu-close.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .l-header-btn { position: relative; width: 40px; height: 15px; cursor: pointer; } @media screen and (max-width: 900px) { .l-header-btn { width: 30px; } } .l-header-btn__bar { position: absolute; left: 0; display: block; width: 100%; height: 0; border-bottom: 2px solid #000000; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .l-header-btn__bar:first-child { top: 0; } .l-header-btn__bar:last-child { bottom: 0; } .l-global-nav-wrap { position: fixed; z-index: 9999; width: 100%; height: 100%; top: 0; left: 0; display: none; } .l-global-nav-wrap.active { display: block; } .l-global-nav-wrap__inner { visibility: hidden; width: 100%; height: 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; background-color: rgba(255, 255, 255, 0.4); } .l-global-nav-wrap__inner.active { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } .l-global-nav-wrap__nav-close { position: absolute; z-index: 9999; top: 20px; right: 30px; width: 30px; height: 30px; cursor: pointer; background-image: url(../img/svg/menu-close.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .l-global-nav { position: absolute; top: 0; right: 0; display: grid; overflow: auto; -ms-overflow-style: none; grid-auto-rows: 40px; grid-template-columns: auto; gap: 40px; width: 35%; height: 100%; padding: 145px 10% 180px 0; background-color: #000000; } @media screen and (max-width: 1500px) { .l-global-nav { width: 50%; } } @media screen and (max-width: 960px) { .l-global-nav { width: 95%; } } @media screen and (max-width: 768px) { .l-global-nav { grid-auto-rows: 32px; gap: 30px; padding: 80px 0; padding-right: 15%; } } .l-global-nav::-webkit-scrollbar { display: none; } .l-global-nav__item { display: block; justify-self: end; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .l-global-nav__item > a { font-size: 40px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 40px; color: #ffffff; font-family: "Inter", sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .l-global-nav__item > a { font-size: 32px; line-height: 32px; } } .l-global-nav__item > a:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .l-footer { width: 100%; padding-right: 2.5%; padding-left: 2.5%; background-color: #000000; } .l-footer__inner { width: 100%; max-width: 1200px; margin-inline: auto; padding: 60px 0 30px; } .l-footer__logo { width: 170px; height: 30px; margin-inline: auto; } @media screen and (max-width: 768px) { .l-footer__logo { width: 115px; height: 20px; } } .l-footer__logo > img { width: 100%; height: 100%; } .l-footer__nav { margin-top: 90px; } @media screen and (max-width: 768px) { .l-footer__nav { margin-top: 60px; } } .l-footer__contact { margin-top: 90px; } @media screen and (max-width: 768px) { .l-footer__contact { margin-top: 60px; } } .l-footer__copy { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 18px; color: #ffffff; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 60px; margin-inline: auto; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .l-footer__copy { font-size: 14px; line-height: 14px; } } .l-footer__recapture { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 17px; color: #ffffff; font-family: "Inter", sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; margin-top: 10px; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .l-footer__recapture { font-size: 10px; line-height: 12.5px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .l-footer__recapture .res-sp { display: block; } } .l-footer__recapture > span > a { margin: 0 5px; text-decoration: underline; } .l-footer-nav { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; grid-template-columns: repeat(4, auto); row-gap: 30px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; width: 100%; max-width: 700px; margin-inline: auto; } @media screen and (max-width: 960px) { .l-footer-nav { grid-template-columns: repeat(2, auto); grid-template-rows: repeat(4, auto); grid-auto-flow: column; -webkit-column-gap: 55px; -moz-column-gap: 55px; column-gap: 55px; } } .l-footer-nav__item { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 120px; } @media screen and (max-width: 960px) { .l-footer-nav__item { min-width: auto; } } .l-footer-nav__item > a { font-size: 20px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #ffffff; font-family: "Inter", sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; -webkit-transition: all 0.3 ease-out; transition: all 0.3 ease-out; letter-spacing: 0.03em; } @media screen and (max-width: 960px) { .l-footer-nav__item > a { font-size: 18px; line-height: 18px; } } .l-footer-nav__item > a:hover { -webkit-transition: all 0.3 ease-out; transition: all 0.3 ease-out; opacity: 0.5; } .l-footer-contact { width: 100%; } .l-footer-contact__mail { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 16px; color: #ffffff; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; -webkit-transition: all 0.3 ease-out; transition: all 0.3 ease-out; white-space: nowrap; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .l-footer-contact__mail { font-size: 14px; line-height: 14px; } } .l-footer-contact__mail:hover { -webkit-transition: all 0.3 ease-out; transition: all 0.3 ease-out; opacity: 0.5; } .l-footer-contact__sns { margin-top: 20px; } @media screen and (max-width: 768px) { .l-footer-contact__sns { margin-top: 30px; } } .l-footer-contact-sns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 700px; margin-inline: auto; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } .l-footer-contact-sns__item { display: block; width: 24px; height: 24px; } @media screen and (max-width: 768px) { .l-footer-contact-sns__item { width: 20px; height: 20px; } } .l-footer-contact-sns__item > img { -o-object-fit: contain; object-fit: contain; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; } .l-newsletter { width: 100%; padding-right: 2.5%; padding-left: 2.5%; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1607843137); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1607843137); } @media screen and (max-width: 768px) { .l-newsletter { padding-right: 5%; padding-left: 5%; } } .l-newsletter__inner { width: 100%; max-width: 440px; margin-inline: auto; padding: 40px 0 30px; } .l-newsletter__head { font-size: 20px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .l-newsletter__head { font-size: 18px; line-height: 18px; } } .l-newsletter__form { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 24.5px; color: #000000; width: 100%; height: 30px; margin-top: 20px; } @media screen and (max-width: 768px) { .l-newsletter__form { font-size: 12px; line-height: 21px; height: 40px; } } .l-newsletter__desc { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 24.5px; color: #000000; margin-top: 10px; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .l-newsletter__desc { font-size: 12px; line-height: 21px; margin-top: 20px; } } .l-newsletter-form { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; width: 100%; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .l-newsletter-form__item, .l-newsletter-form__submit { height: 100%; } .l-newsletter-form__item { width: 80%; } @media screen and (max-width: 768px) { .l-newsletter-form__item { width: 72%; } } .l-newsletter-form__item > input { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 14px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.03em; width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #000000; outline: none; padding: 5px 0; padding-left: 8%; border-radius: 0; } .l-newsletter-form__item > input::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.5019607843); } .l-newsletter-form__item > input::-moz-placeholder { color: rgba(0, 0, 0, 0.5019607843); } .l-newsletter-form__item > input:-ms-input-placeholder { color: rgba(0, 0, 0, 0.5019607843); } .l-newsletter-form__item > input::-ms-input-placeholder { color: rgba(0, 0, 0, 0.5019607843); } .l-newsletter-form__item > input::placeholder { color: rgba(0, 0, 0, 0.5019607843); } .l-newsletter-form__submit { width: 20%; } @media screen and (max-width: 768px) { .l-newsletter-form__submit { width: 28%; } } .l-newsletter-form__submit > a { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 14px; color: #ffffff; font-family: "Inter", sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; background-color: #000000; } .l-newsletter-form__submit > a:hover { opacity: 0.7; } .l-newsletter-form-submit { display: none; } .l-controller { width: 100%; margin-top: 180px; padding-right: 2.5%; padding-left: 2.5%; } @media screen and (max-width: 768px) { .l-controller { margin-top: 120px; padding-right: 5%; padding-left: 5%; } } .l-controller__inner { position: relative; width: 100%; } .l-controller__to-top { position: absolute; top: 50%; right: 0; display: block; width: 50px; height: 50px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url(../img/svg/i-feather-arrow-up-circle.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } @media screen and (max-width: 768px) { .l-controller__to-top { width: 40px; height: 40px; } } .l-controller__to-top:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateY(-60%); transform: translateY(-60%); } .l-main { padding: 60px 0 180px; } @media screen and (max-width: 768px) { .l-main { padding-bottom: 120px; } } .l-main--top { margin-top: 0; padding-top: 45px; } @media screen and (max-width: 900px) { .l-main--top { padding-top: 55px; } } .l-breadcrumb { margin-top: 45px; } @media screen and (max-width: 900px) { .l-breadcrumb { margin-top: 55px; } } .l-modal { width: 100%; height: 100%; display: none; position: relative; } .l-modal.active { display: block; } .l-modal__inner { position: fixed; background-color: rgba(0, 0, 0, 0.7019607843); top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; padding: 7.5vh 2.5%; } @media screen and (max-width: 768px) { .l-modal__inner { padding: 12vh 5% 7vh; } } .l-modal__inner.active { opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .l-modal__btn { position: absolute; top: 50%; left: 0; z-index: 9999; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 40px; height: 65px; cursor: pointer; -webkit-mask-image: url(../img/svg/i-feather-arrow-left.svg); mask-image: url(../img/svg/i-feather-arrow-left.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: contain; mask-size: contain; background-color: #ffffff; } @media screen and (max-width: 1200px) { .l-modal__btn { width: 30px; height: 50px; } } @media screen and (max-width: 768px) { .l-modal__btn { width: 20px; height: 35px; } } .l-modal__btn--next { -webkit-transform: scale(-1, 1) translateY(-50%); transform: scale(-1, 1) translateY(-50%); left: auto; right: 0; } .l-modal__close { position: fixed; top: 7.5vh; right: 2.5%; width: 20px; height: 20px; -webkit-mask: url(../img/svg/menu-close.svg); mask: url(../img/svg/menu-close.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; background-color: #ffffff; z-index: 9999; } @media screen and (max-width: 768px) { .l-modal__close { width: 40px; height: 40px; right: 5%; top: 3vh; } } .l-swiper-modals { width: 100%; height: 100%; } .l-swiper-modals__inner { width: 100%; height: 100%; } .l-swiper-modal { display: block; width: 100%; height: 100%; } .l-swiper-modal__inner { width: 100%; max-width: 1200px; height: 100%; margin-inline: auto; overflow: auto; -ms-overflow-style: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: 10%; -moz-column-gap: 10%; column-gap: 10%; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .l-swiper-modal__inner::-webkit-scrollbar { display: none; } @media screen and (max-width: 768px) { .l-swiper-modal__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; row-gap: 30px; } } .l-swiper-modal__img { width: 42%; height: 100%; max-width: 500px; max-height: 625px; } @media screen and (max-width: 768px) { .l-swiper-modal__img { width: 100%; max-width: none; max-height: none; } } .l-swiper-modal__img > img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: 50% 50%; object-position: 50% 50%; vertical-align: bottom; } .l-swiper-modal__info { width: 48%; padding-top: 15vh; display: grid; row-gap: 60px; padding-right: 20px; grid-template-columns: auto; grid-template-rows: auto 1fr; } @media screen and (max-width: 768px) { .l-swiper-modal__info { width: 100%; padding-top: 0; } } .l-swiper-modal-info__title { font-size: 32px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 39px; color: #ffffff; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 520px) { .l-swiper-modal-info__title { font-size: 24px; line-height: 29px; } } .l-swiper-modal-info__year, .l-swiper-modal-info__size, .l-swiper-modal-info__techniques { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 20px; color: #ffffff; font-family: "Inter", sans-serif; letter-spacing: 0.04em; margin-top: 20px; word-break: break-all; } @media screen and (max-width: 520px) { .l-swiper-modal-info__year, .l-swiper-modal-info__size, .l-swiper-modal-info__techniques { font-size: 14px; line-height: 17px; } } .l-swiper-modal-info__year { margin-top: 45px; } @media screen and (max-width: 768px) { .l-swiper-modal-info__year { margin-top: 20px; } } .l-swiper-modal-info__artist { margin-top: 45px; } .l-swiper-modal-info__artist + .l-works-modal-info__year { margin-top: 20px; } .l-swiper-modal-artist__name { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 20px; color: #ffffff; letter-spacing: 0.04em; } .l-swiper-modal-artist__name--en { font-family: "Inter", sans-serif; font-size: 16px; } .l-swiper-modal-techniques__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .l-swiper-modal-techniques__item:not(:last-child)::after { content: ","; margin-right: 5px; } .l-swiper-modal-contact { font-size: 20px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 29px; color: #ffffff; letter-spacing: 0.04em; padding-bottom: 5px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #ffffff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-align-self: end; -ms-flex-item-align: end; align-self: end; justify-self: end; } @media screen and (max-width: 520px) { .l-swiper-modal-contact { font-size: 14px; line-height: 20px; } } .l-swiper-modal-contact::after { display: block; width: 25px; height: 25px; content: ""; background-color: #ffffff; -webkit-mask: url(../img/svg/i-feather-arrow-right-circle.svg); mask: url(../img/svg/i-feather-arrow-right-circle.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; } @media screen and (max-width: 520px) { .l-swiper-modal-contact::after { width: 20px; height: 20px; } } .grecaptcha-badge { visibility: hidden; } .c-content-btn { font-size: 20px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #ffffff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: 20px; width: 240px; height: 60px; margin-inline: auto; letter-spacing: 0.03em; background-color: #000000; } @media screen and (max-width: 768px) { .c-content-btn { font-size: 14px; line-height: 14px; gap: 10px; width: 155px; height: 40px; } } .c-content-btn--en { font-family: "Inter", sans-serif; } .c-content-btn:hover { background-color: #363636; } .c-content-btn::after { display: block; width: 20px; height: 20px; content: ""; background-color: #ffffff; -webkit-mask: url(../img/svg/i-feather-arrow-right-circle.svg); mask: url(../img/svg/i-feather-arrow-right-circle.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; } @media screen and (max-width: 768px) { .c-content-btn::after { width: 17px; height: 17px; } } .c-breadcrumb { position: relative; width: 100%; margin-inline: auto; padding: 13px 0 3px; padding-right: 2.5%; padding-left: 2.5%; background-color: #ffffff; } @media screen and (max-width: 768px) { .c-breadcrumb { padding-right: 5%; padding-left: 5%; } } .c-breadcrumb__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; width: 100%; margin-inline: auto; } @media screen and (max-width: 520px) { .c-breadcrumb__inner { max-width: 320px; } } .c-breadcrumb__item { font-size: 12px; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 15px; color: #c9c9c9; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } .c-breadcrumb__item--en { font-family: "Inter", sans-serif; } .c-breadcrumb__item::after { display: block; width: 4.5px; height: 8.5px; content: ""; background-image: url(../img/svg/i-feather-chevron-right.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .c-breadcrumb__item:last-of-type { color: #000000; } .c-breadcrumb__item:last-of-type::after { display: none; } .c-breadcrumb__item > a { font-size: inherit; font-weight: inherit; -webkit-font-smoothing: antialiased; line-height: inherit; color: inherit; } .c-filtering-form { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 20px; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 768px) { .c-filtering-form { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } @media screen and (max-width: 520px) { .c-filtering-form { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } .c-filtering-select { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; cursor: pointer; } .c-filtering-select::after { position: absolute; top: 50%; right: 0; display: block; width: 12px; height: 6px; content: ""; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; background-image: url(../img/svg/i-ionic-md-arrow-dropdown.svg); background-repeat: no-repeat; background-size: cover; } .c-filtering-select__inner { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; font-family: "Inter", sans-serif; width: 100%; padding-right: 25px; padding-bottom: 5px; border-bottom: 1px solid #000000; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; } @media screen and (max-width: 768px) { .c-filtering-select__inner { font-size: 14px; line-height: 18px; } } .c-filtering-select__item { width: 100%; } .c-pagination { margin-top: 150px; width: 100%; max-width: 1200px; margin-inline: auto; } @media screen and (max-width: 768px) { .c-pagination { margin-top: 60px; } } .c-pagination .c-page-cards { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; } .c-pagination .c-page-card { font-size: 20px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; font-family: "Montserrat", sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 30px; height: 30px; } .c-pagination .c-page-card:hover { background-color: #d1d1d1; } .c-pagination .c-page-card--active { color: #ffffff; background-color: #000000; pointer-events: none; } .p-content-block { padding-right: 2.5%; padding-left: 2.5%; } @media screen and (max-width: 768px) { .p-content-block { padding-right: 5%; padding-left: 5%; } } .p-content-block--home { margin-top: 180px; } @media screen and (max-width: 768px) { .p-content-block--home { margin-top: 120px; } } .p-content-block--full { padding: 0; } .p-content-block__inner { width: 100%; } .p-content-block__head { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: end; -ms-flex-align: end; align-items: end; gap: 60px; } @media screen and (max-width: 768px) { .p-content-block__head { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .p-content-block__title { font-size: 42px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 52px; color: #000000; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .p-content-block__title { font-size: 28px; line-height: 43px; } } @media screen and (max-width: 374px) { .p-content-block__title { font-size: 22px; line-height: 28px; } } .p-content-block__title--center { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; } .p-content-block__title--news { display: block; width: 100%; max-width: 1200px; margin-inline: auto; text-align: center; } .p-content-block__title--en { font-family: "Inter", sans-serif; } .p-content-block__link { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 21px; color: #000000; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-bottom: 3px; letter-spacing: 0.03em; border-bottom: 1px solid #000000; } @media screen and (max-width: 768px) { .p-content-block__link { font-size: 14px; line-height: 17px; } } .p-content-block__link:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .p-fv { position: relative; z-index: 9996; width: 100%; height: 100vh; margin-top: -45px; } @media screen and (max-width: 900px) { .p-fv { height: 100vh; margin-top: -55px; } } .p-fv__header { position: absolute; z-index: 9997; top: 0; left: 0; width: 100%; height: 55px; padding-right: 2.5%; padding-left: 5%; } .p-fv__view { width: 100%; height: 100%; } .p-fv__controller { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; width: 100%; margin-top: 20px; } @media screen and (max-width: 768px) { .p-fv__controller { -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; margin-top: 10px; } } .fv-view { width: 100%; height: 100%; } .fv-view__item { width: 100%; height: 100%; } .p-fv-view-item { position: relative; display: block; width: 100%; height: 100%; } .p-fv-view-item__img { width: 100%; height: 100%; pointer-events: none; background-color: #656565; } .p-fv-view-item__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; } .p-fv-view-item__img--no-hit { text-align: center; background-color: #b5b5b8; } .p-fv-view-item__img--no-hit > img { -o-object-fit: contain; object-fit: contain; width: 90%; } .p-fv-view-item__info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 12.5%; padding-bottom: 7.5vh; } @media screen and (max-width: 768px) { .p-fv-view-item__info { padding: 0 5%; padding-bottom: 3vh; } } .p-fv-view-item__info::before { position: absolute; z-index: 9; top: 0; left: 0; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#686868)); background: -webkit-linear-gradient(top, #ffffff, #686868); background: linear-gradient(to bottom, #ffffff, #686868); mix-blend-mode: multiply; } .p-fv-view-item:hover .p-fv-view-item__info::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 1; } .p-fv-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; } .p-fv-header__column { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; } .p-fv-header__logo { display: block; } .p-fv-header__logo > a { display: block; width: 160px; height: 30px; background-color: #ffffff; -webkit-mask: url(../img/logo/eunoia.svg); mask: url(../img/logo/eunoia.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; } @media screen and (max-width: 768px) { .p-fv-header__logo > a { width: 130px; height: 25px; } } .p-fv-header__logo > a > img { width: 100%; height: 100%; vertical-align: top; } .p-fv-header__lang { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media screen and (max-width: 900px) { .p-fv-header__lang { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } .p-fv-header__lang-btn { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 18px; color: #ffffff; font-family: "Inter", sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 22px; height: 22px; letter-spacing: 0.03em; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 900px) { .p-fv-header__lang-btn { font-size: 12px; line-height: 12px; width: 15px; height: 15px; } } .p-fv-header__lang-btn:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; } .p-fv-header__btn { margin-left: 50px; } @media screen and (max-width: 900px) { .p-fv-header__btn { margin-left: 25px; } } .p-fv-header-btn { position: relative; width: 40px; height: 15px; cursor: pointer; } @media screen and (max-width: 900px) { .p-fv-header-btn { width: 30px; } } .p-fv-header-btn__bar { position: absolute; left: 0; display: block; width: 100%; height: 0; border-bottom: 2px solid #ffffff; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-fv-header-btn__bar:first-child { top: 0; } .p-fv-header-btn__bar:last-child { bottom: 0; } .p-fv-view-item-info { position: relative; z-index: 10; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: end; -ms-flex-align: end; align-items: end; gap: 30px; width: 100%; max-width: 1200px; margin-inline: auto; } @media screen and (max-width: 768px) { .p-fv-view-item-info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 768px) { .p-fv-view-item-info__column { width: 100%; } } .p-fv-view-item-info__column--right { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @media screen and (max-width: 768px) { .p-fv-view-item-info__column--right { -webkit-box-flex: 1; -webkit-flex: auto; -ms-flex: auto; flex: auto; } } .p-fv-view-item-info__title { font-size: 48px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 60px; color: #ffffff; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; letter-spacing: 0.04em; -webkit-line-clamp: 1; } @media screen and (max-width: 768px) { .p-fv-view-item-info__title { font-size: 28px; line-height: 31.5px; } } .p-fv-view-item-info__date { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 18px; color: #ffffff; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 30px; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-fv-view-item-info__date { font-size: 14px; line-height: 14px; } } .p-fv-view-item-info__authors { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 25px; color: #ffffff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-fv-view-item-info__authors { font-size: 14px; line-height: 21px; } } .p-fv-view-item-info__more { font-size: 16px; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 16px; color: #ffffff; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-bottom: 3px; letter-spacing: 0.03em; border-bottom: 1px solid #ffffff; } @media screen and (max-width: 768px) { .p-fv-view-item-info__more { margin-right: 0; margin-left: auto; } } .p-fv-view-item-info__categories { width: 100%; } .p-fv-view-item-authors, .p-fv-view-item-info-categories { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; } .p-fv-view-item-authors__item, .p-fv-view-item-info-categories__item { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 25px; color: #ffffff; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-fv-view-item-authors__item, .p-fv-view-item-info-categories__item { font-size: 14px; line-height: 21px; } } .p-fv-view-item-authors__item:not(:last-child)::after, .p-fv-view-item-info-categories__item:not(:last-child)::after { content: "、"; } .p-fv__header--black .p-fv-header__logo > a { background-color: #000000; } .p-fv__header--black .p-fv-header__lang-btn { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #000000; } .p-fv__header--black .p-fv-header-btn__bar { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border-color: #000000; } .p-fv-view__item--black .p-fv-view-item-info__title, .p-fv-view__item--black .p-fv-view-item-info__date { color: #000000; } .p-fv-view__item--black .p-fv-view-item-info__more { color: #000000; border-color: #000000; } .p-fv-view__item--black .p-fv-view-item-authors__item, .p-fv-view__item--black .p-fv-view-item-info-categories__item { color: #000000; } .p-fv-indicator { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 1200px) { .p-fv-indicator { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } .p-fv-indicator__item { position: relative; width: 60px; height: 1px; opacity: 0.8; border-radius: 10px; background-color: #858585; } @media screen and (max-width: 1200px) { .p-fv-indicator__item { width: 30px; } } @media screen and (max-width: 768px) { .p-fv-indicator__item { width: 12px; } } .p-fv-indicator__item::after { position: absolute; top: 0; left: 0; width: 0; height: 100%; content: ""; opacity: 1; border-radius: 10px; background-color: #000000; } .p-fv-indicator__item.active::after { -webkit-animation: expand_indicator_anim 4.5s forwards linear; animation: expand_indicator_anim 4.5s forwards linear; } .p-fv-indicator__item.active.completed::after { width: 100%; -webkit-animation: none; animation: none; } @-webkit-keyframes expand_indicator_anim { from { width: 0; } to { width: 100%; } } @keyframes expand_indicator_anim { from { width: 0; } to { width: 100%; } } .p-fv-btn { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 40px; height: 65px; cursor: pointer; background-image: url(../img/svg/i-feather-arrow-left.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } @media screen and (max-width: 1200px) { .p-fv-btn { width: 30px; height: 50px; } } @media screen and (max-width: 768px) { .p-fv-btn { width: 20px; height: 35px; } } .p-fv-btn--next { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } #news { padding-top: 85px; } @media screen and (max-width: 768px) { #news { padding-top: 45px; } } .p-home-news { margin-top: 60px; } @media screen and (max-width: 768px) { .p-home-news { margin-top: 20px; } } .p-home-news__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; } @media screen and (max-width: 960px) { .p-home-news__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; row-gap: 50px; } } .p-home-news__top { position: relative; width: 100%; max-width: 720px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-home-news__top:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateY(-20px); transform: translateY(-20px); } @media screen and (max-width: 768px) { .p-home-news__top:hover { -webkit-transform: translateY(0); transform: translateY(0); } } .p-home-news__gallery { width: 100%; max-width: 720px; } .p-home-news__no-hit > p { font-size: 15px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 15px; color: #000000; } @media screen and (max-width: 520px) { .p-home-news__no-hit > p { font-size: 13px; line-height: 13px; } } .p-home-news-top { position: -webkit-sticky; position: sticky; top: 45px; } @media screen and (max-width: 900px) { .p-home-news-top { top: 55px; } } @media screen and (max-width: 960px) { .p-home-news-top { position: static; } } .p-home-news-gallery { display: grid; grid-template-columns: repeat(2, 47.5%); row-gap: 40px; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; } @media screen and (max-width: 768px) { .p-home-news-gallery { grid-template-columns: 100%; } } .p-home-news-gallery__item { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-home-news-gallery__item:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateY(-20px); transform: translateY(-20px); } @media screen and (max-width: 768px) { .p-home-news-gallery__item:hover { -webkit-transform: translateY(0); transform: translateY(0); } } .p-home-news-gallery-item__img, .p-home-news-top__img { position: relative; width: 100%; max-width: 340px; height: 180px; } @media screen and (max-width: 768px) { .p-home-news-gallery-item__img, .p-home-news-top__img { aspect-ratio: 335/200; max-width: none; height: auto; } } .p-home-news-gallery-item__img::before, .p-home-news-top__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-home-news-gallery__item:hover .p-home-news-gallery-item__img::before, .p-home-news__top:hover .p-home-news-gallery-item__img::before, .p-home-news-gallery__item:hover .p-home-news-top__img::before, .p-home-news__top:hover .p-home-news-top__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .p-home-news-gallery-item__img > img, .p-home-news-top__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-home-news-gallery-item__categories, .p-home-news-top__categories { width: 100%; margin-top: 20px; } .p-home-news-gallery-item__title, .p-home-news-top__title { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; margin-top: 18px; letter-spacing: 0.04em; -webkit-line-clamp: 3; } .p-home-news-gallery-item__row, .p-home-news-top__row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-top: 25px; } .p-home-news-gallery-item__date, .p-home-news-top__date { font-size: 14px; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 14px; color: #000000; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; letter-spacing: 0.04em; } .p-home-news-gallery-item__more, .p-home-news-top__more { font-size: 14px; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 14px; color: #000000; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-bottom: 3px; letter-spacing: 0.03em; border-bottom: 1px solid #000000; } .p-home-news-top__img { max-width: 720px; height: 480px; } @media screen and (max-width: 768px) { .p-home-news-top__img { aspect-ratio: 335/200; max-width: none; height: auto; } } .p-home-news-top__title { font-size: 32px; line-height: 44px; margin-top: 30px; } @media screen and (max-width: 768px) { .p-home-news-top__title { font-size: inherit; line-height: inherit; margin-top: 20px; } } .p-home-news-top__row { margin-top: 30px; } @media screen and (max-width: 960px) { .p-home-news-top__row { margin-top: 60px; } } .p-home-news-top__date { font-size: 20px; line-height: 20px; } @media screen and (max-width: 768px) { .p-home-news-top__date { font-size: inherit; line-height: inherit; } } .p-home-news-top__more { font-size: 18px; line-height: 18px; } @media screen and (max-width: 768px) { .p-home-news-top__more { font-size: inherit; line-height: inherit; } } .p-home-news-categories { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 10px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media screen and (max-width: 768px) { .p-home-news-categories { row-gap: 5px; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } .p-home-news-categories__item { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 14px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } .p-home-news-categories__item--top { font-size: 20px; line-height: 20px; } @media screen and (max-width: 768px) { .p-home-news-categories__item--top { font-size: inherit; line-height: inherit; } } .p-home-artists { margin-top: 80px; } @media screen and (max-width: 768px) { .p-home-artists { margin-top: 20px; } } .p-home-artists__gallery { width: 100%; max-width: 1520px; margin-inline: auto; } .p-home-artists-gallery { display: grid; grid-template-columns: repeat(3, 30%); row-gap: 60px; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; } @media screen and (max-width: 768px) { .p-home-artists-gallery { grid-template-columns: repeat(2, 47.5%); row-gap: 30px; } } .p-home-artists-gallery__item { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-home-artists-gallery__item:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateY(-20px); transform: translateY(-20px); } @media screen and (max-width: 768px) { .p-home-artists-gallery__item:hover { -webkit-transform: translateY(0); transform: translateY(0); } } .p-home-artists-gallery__no-hit { font-size: 15px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 15px; color: #000000; grid-column: 1/4; text-align: center; } @media screen and (max-width: 520px) { .p-home-artists-gallery__no-hit { font-size: 13px; line-height: 13px; } } .p-home-artists-gallery-item__img { position: relative; width: 100%; max-width: 450px; height: 255px; background-color: #656565; } @media screen and (max-width: 768px) { .p-home-artists-gallery-item__img { aspect-ratio: 160/205; height: auto; } } .p-home-artists-gallery-item__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-home-artists-gallery__item:hover .p-home-artists-gallery-item__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .p-home-artists-gallery-item__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-home-artists-gallery-item__name { font-size: 20px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 24px; color: #000000; font-family: "Inter", sans-serif; margin-top: 20px; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .p-home-artists-gallery-item__name { font-size: 18px; line-height: 21px; margin-top: 10px; } } .p-home-artists-gallery-item__name-read { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .p-home-artists-gallery-item__name-read { font-size: 12px; line-height: 17px; margin-top: 10px; } } .p-home-grid { width: 100%; max-width: 1600px; margin-inline: auto; margin-top: 80px; } @media screen and (max-width: 960px) { .p-home-grid { margin-top: 20px; } } .p-home-grid__inner { display: grid; -webkit-box-pack: end; -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; -webkit-box-align: end; -webkit-align-items: end; -ms-flex-align: end; align-items: end; grid-template-columns: auto 900px; -webkit-column-gap: 8%; -moz-column-gap: 8%; column-gap: 8%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; width: 100%; } @media screen and (max-width: 1600px) { .p-home-grid__inner { grid-template-columns: auto 57%; } } @media screen and (max-width: 960px) { .p-home-grid__inner { grid-template-columns: 100%; row-gap: 20px; } } .p-home-grid__info { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 960px) { .p-home-grid__info { width: 100%; } } .p-home-grid__img { position: relative; width: 100%; max-width: 900px; height: 600px; } @media screen and (max-width: 1200px) { .p-home-grid__img { max-width: 600px; } } @media screen and (max-width: 960px) { .p-home-grid__img { aspect-ratio: 335/195; grid-row: 1; max-width: none; height: auto; } } .p-home-grid__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-home-grid__inner:hover .p-home-grid__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .p-home-grid__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-home-grid__no-hit { font-size: 15px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 15px; color: #000000; grid-column: 1/4; text-align: center; } @media screen and (max-width: 520px) { .p-home-grid__no-hit { font-size: 13px; line-height: 13px; } } .p-home-grid-info__title { font-size: 32px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 56px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.03em; } @media screen and (max-width: 960px) { .p-home-grid-info__title .res-pc { display: none; } } @media screen and (max-width: 768px) { .p-home-grid-info__title { font-size: 20px; line-height: 44px; } } .p-home-grid-info__place, .p-home-grid-info__date, .p-home-grid-info__more { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 21px; color: #000000; font-family: "Inter", sans-serif; text-align: right; } @media screen and (max-width: 960px) { .p-home-grid-info__place, .p-home-grid-info__date, .p-home-grid-info__more { text-align: left; } } @media screen and (max-width: 768px) { .p-home-grid-info__place, .p-home-grid-info__date, .p-home-grid-info__more { font-size: 16px; line-height: 20px; } } .p-home-grid-info__place { margin-top: 120px; } @media screen and (max-width: 960px) { .p-home-grid-info__place { margin-top: 20px; } } .p-home-grid-info__row { margin-top: 20px; } @media screen and (max-width: 960px) { .p-home-grid-info__row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .p-home-grid-info__more { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: 0; margin-inline-end: 0; margin-top: 70px; padding-bottom: 3px; border-bottom: 1px solid #000000; } @media screen and (max-width: 960px) { .p-home-grid-info__more { margin-top: 0; } } .p-news-controller { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; row-gap: 20px; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; margin-top: 60px; } @media screen and (max-width: 960px) { .p-news-controller { -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-news-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } .p-news-nav__item { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 18px; color: #9c9c9c; font-family: "Inter", sans-serif; } @media screen and (max-width: 768px) { .p-news-nav__item { font-size: 14px; line-height: 14px; } } .p-news-nav__item.active, .p-news-nav__item--sep { color: #000000; } .p-news { width: 100%; margin-top: 60px; max-width: 1200px; margin-inline: auto; } .p-news__cards { width: 100%; } .p-news-list-cards { width: 100%; display: grid; grid-template-columns: 100%; row-gap: 30px; } .p-news-list-cards__no-result { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; } @media screen and (max-width: 768px) { .p-news-list-cards__no-result { font-size: 13px; line-height: 18px; } } .p-news-list-card__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; width: 100%; height: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; } .p-news-list-card__inner::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-news-list-card:hover .p-news-list-card__inner::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.3; } .p-news-list-card__column { width: 100%; } .p-news-list-card__column--left { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16%; } @media screen and (max-width: 768px) { .p-news-list-card__column--left { width: 30%; } } .p-news-list-card__img { width: 100%; aspect-ratio: 20/15; } @media screen and (max-width: 768px) { .p-news-list-card__img { aspect-ratio: 10/7.5; } } .p-news-list-card__img > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; vertical-align: bottom; } .p-news-list-card__categories { width: 100%; } .p-news-list-card__title { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 26px; color: #000000; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; margin-top: 10px; letter-spacing: 0.04em; -webkit-line-clamp: 1; } @media screen and (max-width: 768px) { .p-news-list-card__title { font-size: 12px; line-height: 21px; margin-top: 5px; } } .p-news-list-card__date { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; margin-top: 40px; } @media screen and (max-width: 768px) { .p-news-list-card__date { font-size: 10px; line-height: 12px; margin-top: 10px; } } .p-news-list-card-categories, .p-single-news-info-categories { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; row-gap: 10px; } @media screen and (max-width: 768px) { .p-news-list-card-categories, .p-single-news-info-categories { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 5px; } } .p-news-list-card-categories__item, .p-single-news-info-categories__item { font-size: 12px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 15px; color: #ffffff; font-family: "Inter", sans-serif; letter-spacing: 0.04em; padding: 2px 3px; background-color: #000000; } @media screen and (max-width: 768px) { .p-news-list-card-categories__item, .p-single-news-info-categories__item { font-size: 10px; line-height: 12px; } } .p-single-news { width: 100%; max-width: 1200px; margin-inline: auto; } .p-single-news__info { margin-top: 60px; } @media screen and (max-width: 768px) { .p-single-news__info { margin-top: 30px; } } .p-single-news__contents { margin-top: 60px; } .p-single-news__contents :where(:not(html, iframe, canvas, img, svg, video, audio, input, textarea):not(svg *, symbol *)) { all: revert; display: revert; } .p-single-news__contents * { font-family: "Zen Kaku Gothic New", sans-serif; } .p-single-news__contents.lang-en * { font-family: "Inter", sans-serif; } .p-single-news__contents .wp-block-image { max-width: 800px; margin: 120px 0; margin-inline: auto; } @media screen and (max-width: 374px) { .p-single-news__contents .wp-block-image { max-width: 200px; } } .p-single-news__contents .wp-block-image img { vertical-align: bottom; } .p-single-news__contents p { letter-spacing: 0.04em; line-height: 1.75em; } .p-single-news-info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 15px; -webkit-box-pack: end; -webkit-justify-content: end; -ms-flex-pack: end; justify-content: end; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 768px) { .p-single-news-info { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } .p-single-news-info__categories { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .p-single-news-info__date { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-news-info__date { font-size: 12px; line-height: 22.75px; } } .p-single-news-info-categories__item { font-size: 16px; line-height: 20px; } @media screen and (max-width: 768px) { .p-single-news-info-categories__item { font-size: 10px; line-height: 12px; } } .p-single-news-author { margin-top: 120px; } .p-single-news-author__title { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-news-author__title { font-size: 14px; } } .p-single-news-author__list { margin-top: 5px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 1%; row-gap: 15px; } .p-single-news-author__item, .p-single-news-author__no-result { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 18px; color: #000000; } @media screen and (max-width: 768px) { .p-single-news-author__item, .p-single-news-author__no-result { font-size: 12px; } } .p-single-news-author__item a { border-bottom: 1.5px solid #000000; padding-bottom: 1px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-single-news-author__item a:hover { opacity: 0.5; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-single-news-link { margin-top: 60px; } .p-single-news-link__title { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-news-link__title { font-size: 14px; } } .p-single-news-link__wrap { padding-left: 1%; margin-top: 5px; } .p-single-news-link__link, .p-single-news-link__no-result { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 18px; color: #000000; } @media screen and (max-width: 768px) { .p-single-news-link__link, .p-single-news-link__no-result { font-size: 12px; } } .p-single-news-link__link { border-bottom: 1.5px solid #000000; padding-bottom: 1px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-single-news-link__link:hover { opacity: 0.5; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-artists { width: 100%; margin-top: 30px; } .p-artists__filter { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-right: 0; margin-left: auto; } .p-artists__cards { margin-top: 120px; } @media screen and (max-width: 768px) { .p-artists__cards { margin-top: 60px; } } .p-artists-cards { display: grid; grid-template-columns: repeat(3, 30%); row-gap: 80px; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; width: 100%; } @media screen and (max-width: 768px) { .p-artists-cards { grid-template-columns: repeat(2, 47.5%); row-gap: 30px; } } .p-artists-cards__no-result { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; grid-column: 1/4; text-align: center; } @media screen and (max-width: 768px) { .p-artists-cards__no-result { font-size: 13px; line-height: 17px; } } .p-artists-card { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-artists-card:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateY(-20px); transform: translateY(-20px); } @media screen and (max-width: 768px) { .p-artists-card:hover { -webkit-transform: translateY(0); transform: translateY(0); } } .p-artists-card__inner { display: block; width: 100%; padding-bottom: 10px; } .p-artists-card__img { aspect-ratio: 45/55; position: relative; width: 100%; background-color: #656565; } @media screen and (max-width: 768px) { .p-artists-card__img { aspect-ratio: 16/20; } } .p-artists-card__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-artists-card:hover .p-artists-card__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .p-artists-card__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-artists-card__name { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; margin-top: 10px; padding-left: 2%; letter-spacing: 0.03em; } @media screen and (max-width: 960px) { .p-artists-card__name { font-size: 12px; line-height: 17px; } } .p-artists-card__name--en { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 500; line-height: 24px; } @media screen and (max-width: 960px) { .p-artists-card__name--en { font-size: 18px; line-height: 21px; } } @media screen and (max-width: 520px) { .p-artists-card__name--en { font-size: 15px; line-height: 18px; } } .p-single-artists { width: 100%; max-width: 1200px; margin-top: 180px; margin-inline: auto; } .p-single-artists--top { max-width: none; margin-top: 0; } .p-single-artists__title { font-size: 24px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 29px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-artists__title { font-size: 16px; line-height: 20px; } } .p-single-artists__info { width: 100%; max-width: 1520px; margin-inline: auto; } .p-single-artists__article { margin-top: 30px; } @media screen and (max-width: 768px) { .p-single-artists__article { margin-top: 20px; } } .p-single-artists__news { margin-top: 30px; } @media screen and (max-width: 768px) { .p-single-artists__news { margin-top: 20px; } } .p-single-artists-info { width: 100%; } .p-single-artists-info__row { display: grid; -webkit-box-pack: start; -webkit-justify-content: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; grid-template-columns: auto 1fr; -webkit-column-gap: 4%; -moz-column-gap: 4%; column-gap: 4%; width: 100%; } @media screen and (max-width: 960px) { .p-single-artists-info__row { grid-template-columns: 100%; row-gap: 30px; } } .p-single-artists-info__row--mono { grid-template-columns: 100%; } .p-single-artists-info__column { width: 100%; min-width: 200px; max-width: 500px; } @media screen and (max-width: 960px) { .p-single-artists-info__column { min-width: auto; max-width: none; } } .p-single-artists-info__column--right { -webkit-align-self: end; -ms-flex-item-align: end; align-self: end; min-width: auto; max-width: 800px; } @media screen and (max-width: 960px) { .p-single-artists-info__column--right { max-width: none; } } .p-single-artists-info__img { aspect-ratio: 50/55; width: 100%; margin-inline: auto; } @media screen and (max-width: 960px) { .p-single-artists-info__img { aspect-ratio: 20/25; width: 53vw; } } .p-single-artists-info__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-single-artists-info__name { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 26px; color: #000000; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .p-single-artists-info__name { font-size: 14px; line-height: 20px; } } .p-single-artists-info__name--en { font-family: "Inter", sans-serif; font-size: 42px; line-height: 51px; } @media screen and (max-width: 768px) { .p-single-artists-info__name--en { font-size: 28px; line-height: 34px; } } .p-single-artists-info__details { margin-top: 30px; } @media screen and (max-width: 768px) { .p-single-artists-info__details { margin-top: 20px; } } .p-single-artists-info__about { font-size: 15px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 25.5px; color: #000000; margin-top: 60px; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-artists-info__about { font-size: 13px; line-height: 22.75px; } } .p-single-artists-info__statement { width: 100%; margin-top: 120px; } @media screen and (max-width: 768px) { .p-single-artists-info__statement { margin-top: 60px; } } .p-single-artists-info-details__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; } .p-single-artists-info-details__item { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 26px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-artists-info-details__item { font-size: 14px; line-height: 20px; } } .p-single-artists-info-details__item::after { content: "、"; } .p-single-artists-info-details__item:last-child::after { content: ""; } .p-single-artists-info-statement { width: 100%; max-width: 1200px; margin-inline: auto; } .p-single-artists-info-statement__title, .p-single-artists-info-statement__text { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 26px; color: #000000; letter-spacing: 0.04em; } .p-single-artists-info-statement__text { font-size: 15px; font-weight: 400; line-height: 25.5px; margin-top: 20px; } .p-artists-work-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 120px clamp(10px, 1.25vw, 20px); width: min(1200px, 100%); margin-inline: auto; margin-top: 180px; } @media screen and (max-width: 960px) { .p-artists-work-cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); row-gap: 60px; margin-top: 120px; } } @media screen and (max-width: 520px) { .p-artists-work-cards { grid-template-columns: minmax(0, 1fr); } } .p-artists-work-card { display: grid; justify-self: center; grid-template-rows: subgrid; grid-row: span 2; grid-column: span 2; width: 100%; max-width: 800px; } @media screen and (max-width: 960px) { .p-artists-work-card { grid-column: auto; max-width: 58vw; } } .p-artists-work-card:nth-child(5n+4), .p-artists-work-card:nth-child(5n+5) { grid-column: span 3; } @media screen and (max-width: 960px) { .p-artists-work-card:nth-child(5n+4), .p-artists-work-card:nth-child(5n+5) { grid-column: auto; } } .p-artists-work-card__inner { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 20px; } .p-artists-work-card__img { position: relative; width: 100%; } .p-artists-work-card__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-artists-work-card:hover .p-artists-work-card__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .p-artists-work-card__img > img { -o-object-fit: contain; object-fit: contain; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; max-height: max(60.375svh, 480px); vertical-align: bottom; } .p-artists-work-card__disc { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 10px; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .p-artists-work-card__name, .p-artists-work-card__year, .p-artists-work-card__size { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 17px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .p-artists-work-card__name, .p-artists-work-card__year, .p-artists-work-card__size { font-size: 10px; line-height: 12px; } } .p-artists-work-card-techniques__list, .p-artists-available-works-card-techniques__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 5px; } .p-artists-work-card-techniques__item, .p-artists-available-works-card-techniques__item { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 17px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .p-artists-work-card-techniques__item, .p-artists-available-works-card-techniques__item { font-size: 10px; line-height: 12px; } } .p-artists-work-card-techniques__item::after, .p-artists-available-works-card-techniques__item::after { content: ","; } .p-artists-work-card-techniques__item:last-child::after, .p-artists-available-works-card-techniques__item:last-child::after { content: ""; } .p-single-artists-article { width: 100%; max-width: 1200px; margin-inline: auto; } @media screen and (max-width: 768px) { .p-single-artists-article { margin-top: 20px; } } .p-single-artists-article__nav { width: 100%; } .p-single-artists-article__cards { width: 100%; margin-top: 60px; } .p-single-artists-article-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 10px; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .p-single-artists-article-nav__item { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #8f8f8f; font-family: "Inter", sans-serif; cursor: pointer; } @media screen and (max-width: 768px) { .p-single-artists-article-nav__item { font-size: 16px; } } .p-single-artists-article-nav__item.active { pointer-events: none; color: #000000; } .p-single-artists-article-cards { display: grid; grid-template-columns: repeat(3, 30%); row-gap: 60px; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; } @media screen and (max-width: 768px) { .p-single-artists-article-cards { grid-template-columns: 100%; } } .p-single-artists-article-cards__no-result { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; grid-column: 1/4; } @media screen and (max-width: 768px) { .p-single-artists-article-cards__no-result { font-size: 13px; line-height: 17px; } } .p-single-artists-article-card { width: 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-single-artists-article-card:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translateY(-10px); transform: translateY(-10px); } .p-single-artists-article-card__inner { display: block; width: 100%; padding: 20px; -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); } .p-single-artists-article-card__img { aspect-ratio: 3/2; position: relative; width: 100%; max-width: 300px; margin-inline: auto; background-color: #656565; } @media screen and (max-width: 768px) { .p-single-artists-article-card__img { max-width: none; } } .p-single-artists-article-card__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-single-artists-article-card:hover .p-single-artists-article-card__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .p-single-artists-article-card__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-single-artists-article-card__title { font-size: 20px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 35px; color: #000000; font-family: "Inter", sans-serif; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; margin-top: 20px; letter-spacing: 0.04em; -webkit-line-clamp: 1; } .p-single-artists-article-card__location, .p-single-artists-article-card__date { font-size: 14px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 24.5px; color: #000000; } .p-single-artists-article-card__location { margin-top: 20px; } .p-single-artists-article-card__date { margin-top: 10px; } .p-single-artists-news { width: 100%; } .p-single-artists-news__cards { width: 100%; } .p-single-artists-news__no-result { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; } @media screen and (max-width: 768px) { .p-single-artists-news__no-result { font-size: 13px; line-height: 17px; } } .p-artists-available-works { margin-top: 30px; } @media screen and (max-width: 768px) { .p-artists-available-works { margin-top: 20px; } } .p-artists-available-works-cards { display: grid; grid-template-columns: repeat(2, 47.5%); row-gap: 60px; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; } @media screen and (max-width: 768px) { .p-artists-available-works-cards { grid-template-columns: 100%; row-gap: 30px; } } .p-artists-available-works-cards__modal { display: block; } .p-artists-available-works-cards__no-result { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; grid-column: 1/4; } @media screen and (max-width: 768px) { .p-artists-available-works-cards__no-result { font-size: 13px; line-height: 17px; } } .p-artists-available-works-card { width: 100%; max-width: 570px; } @media screen and (max-width: 768px) { .p-artists-available-works-card { max-width: none; } } .p-artists-available-works-card__inner { display: block; width: 100%; height: 100%; padding-bottom: 30px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1607843137); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1607843137); } .p-artists-available-works-card__img { aspect-ratio: 57/38; position: relative; width: 100%; background-color: #656565; } @media screen and (max-width: 768px) { .p-artists-available-works-card__img { aspect-ratio: 33.5/22.5; } } .p-artists-available-works-card__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-artists-available-works-card:hover .p-artists-available-works-card__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.5; } .p-artists-available-works-card__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-artists-available-works-card__disc { width: 100%; padding: 0 5%; } .p-artists-available-works-card__name, .p-artists-available-works-card__year, .p-artists-available-works-card__size { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-artists-available-works-card__name, .p-artists-available-works-card__year, .p-artists-available-works-card__size { font-size: 10px; line-height: 12px; } } .p-artists-available-works-card__name { font-size: 20px; font-weight: 500; line-height: 24px; margin-top: 20px; } @media screen and (max-width: 768px) { .p-artists-available-works-card__name { font-size: 16px; line-height: 20px; } } .p-artists-available-works-card__year { margin-top: 30px; } @media screen and (max-width: 768px) { .p-artists-available-works-card__year { margin-top: 10px; } } .p-artists-available-works-card__size, .p-artists-available-works-card__techniques { margin-top: 10px; } @media screen and (max-width: 768px) { .p-artists-available-works-card__size, .p-artists-available-works-card__techniques { margin-top: 5px; } } .p-artists-available-works-card-techniques__item { font-size: 16px; line-height: 20px; } @media screen and (max-width: 768px) { .p-artists-available-works-card-techniques__item { font-size: 10px; line-height: 12px; } } .p-events-controller { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; row-gap: 20px; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; margin-top: 60px; } @media screen and (max-width: 960px) { .p-events-controller { -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-events-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } .p-events-nav__item { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 18px; color: #9c9c9c; font-family: "Inter", sans-serif; } @media screen and (max-width: 768px) { .p-events-nav__item { font-size: 14px; line-height: 14px; } } .p-events-nav__item.active, .p-events-nav__item--sep { color: #000000; } .p-events { width: 100%; margin-top: 180px; } @media screen and (max-width: 768px) { .p-events { margin-top: 100px; } } .p-events--top { margin-top: 60px; } .p-events__title { font-size: 24px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 29px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-events__title { font-size: 16px; line-height: 20px; } } .p-events__cards { width: 100%; margin-top: 30px; } @media screen and (max-width: 768px) { .p-events__cards { margin-top: 20px; } } .p-events__list-cards { width: 100%; margin-top: 0; } .p-events-cards { display: grid; grid-template-columns: repeat(3, 30%); -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; width: 100%; max-width: 1200px; margin-inline: auto; } @media screen and (max-width: 768px) { .p-events-cards { grid-template-columns: 100%; row-gap: 60px; } } .p-events-cards__no-result { font-size: 15px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; grid-column: 1/4; } @media screen and (max-width: 768px) { .p-events-cards__no-result { font-size: 13px; line-height: 18px; } } .p-events-cards__modal { display: block; } .p-events-card { width: 100%; } .p-events-card__img { aspect-ratio: 38/25; position: relative; width: 100%; background-color: #656565; } .p-events-card__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-events-card:hover .p-events-card__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.3; } .p-events-card__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-events-card__title { font-size: 32px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 40px; color: #000000; font-family: "Inter", sans-serif; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; margin-top: 30px; letter-spacing: 0.04em; -webkit-line-clamp: 1; } @media screen and (max-width: 768px) { .p-events-card__title { font-size: 28px; line-height: 36px; } } .p-events-card__location, .p-events-card__date { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 21px; color: #000000; font-family: "Inter", sans-serif; } @media screen and (max-width: 768px) { .p-events-card__location, .p-events-card__date { font-size: 14px; line-height: 17px; } } .p-events-card__location { margin-top: 30px; } .p-events-card__date { margin-top: 10px; } .p-events-card__author { margin-top: 30px; } @media screen and (max-width: 768px) { .p-events-card__author { margin-top: 20px; } } .p-events-card-author__title { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 16px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-events-card-author__title { font-size: 14px; line-height: 28px; } } .p-events-card-author__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; } .p-events-card-author__item { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 22px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-events-card-author__item { font-size: 14px; line-height: 24.5px; } } .p-events-card-author__item::after { content: "、"; } .p-events-card-author__item:last-child::after { content: ""; } .p-events-list-cards { width: 100%; max-width: 1200px; margin-inline: auto; } .p-events-list-cards__no-result { font-size: 15px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; } @media screen and (max-width: 768px) { .p-events-list-cards__no-result { font-size: 13px; line-height: 18px; } } .p-events-list-card { width: 100%; border-width: 1px; border-color: #9c9c9c; border-top-style: solid; } .p-events-list-card:last-child { border-bottom-style: solid; } .p-events-list-card__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 6%; -moz-column-gap: 6%; column-gap: 6%; width: 100%; height: 100%; padding: 20px 0; } @media screen and (max-width: 768px) { .p-events-list-card__inner { padding: 10px 0; } } .p-events-list-card__column--left { width: 18%; min-width: 100px; max-width: 200px; } .p-events-list-card__title { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; letter-spacing: 0.04em; -webkit-line-clamp: 1; } @media screen and (max-width: 768px) { .p-events-list-card__title { font-size: 14px; line-height: 21px; } } .p-events-list-card:hover .p-events-list-card__title { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; } .p-events-list-card__img { aspect-ratio: 20/15; position: relative; width: 100%; background-color: #656565; } .p-events-list-card__img::before { position: absolute; display: block; visibility: hidden; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; background-color: #ffffff; } .p-events-list-card:hover .p-events-list-card__img::before { visibility: visible; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.3; } .p-events-list-card__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-events-list-card__location, .p-events-list-card__date { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 16px; color: #000000; font-family: "Inter", sans-serif; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; letter-spacing: 0.04em; } @media screen and (max-width: 520px) { .p-events-list-card__location, .p-events-list-card__date { font-size: 10px; line-height: 15px; } } .p-events-list-card:hover .p-events-list-card__location, .p-events-list-card:hover .p-events-list-card__date { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; } .p-events-list-card__location { margin-top: 20px; } .p-events-list-card__date { margin-top: 10px; } .p-single-events { width: 100%; max-width: 1200px; margin-top: 180px; margin-inline: auto; } @media screen and (max-width: 768px) { .p-single-events { margin-top: 120px; } } .p-single-events--top { margin-top: 0; } .p-single-events__btn { position: absolute; z-index: 1000; top: 50%; width: 25px; height: 50px; cursor: pointer; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background-color: #656565; -webkit-mask: url(../img/svg/i-feather-chevron-right.svg); mask: url(../img/svg/i-feather-chevron-right.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; } @media screen and (max-width: 768px) { .p-single-events__btn { width: 16px; height: 32px; } } .p-single-events__btn:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; } .p-single-events__btn--prev { left: 0; -webkit-transform: translate(-100%, -50%) scale(-1, 1); transform: translate(-100%, -50%) scale(-1, 1); } @media screen and (max-width: 1400px) { .p-single-events__btn--prev { left: 0; -webkit-transform: translate(-50%, -50%) scale(-1, 1); transform: translate(-50%, -50%) scale(-1, 1); } } .p-single-events__btn--next { right: 0; -webkit-transform: translate(100%, -50%); transform: translate(100%, -50%); } @media screen and (max-width: 1400px) { .p-single-events__btn--next { right: 0; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } } .p-single-events__title { font-size: 24px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 29px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events__title { font-size: 16px; line-height: 20px; } } .p-single-events__info, .p-single-events__view, .p-single-events__featured-works { width: 100%; } .p-single-events__view { position: relative; margin-top: 120px; } @media screen and (max-width: 768px) { .p-single-events__view { margin-top: 60px; } } .p-single-events__featured-works { position: relative; margin-top: 30px; } @media screen and (max-width: 768px) { .p-single-events__featured-works { margin-top: 20px; } } @media screen and (max-width: 1400px) { .p-single-events__featured-works > .p-single-events__btn { width: 20px; height: 40px; opacity: 0.6; -webkit-filter: drop-shadow(2px 2px 10px #656565); filter: drop-shadow(2px 2px 10px #656565); } } .p-single-events__featured-works > .p-single-events__btn--prev { left: -6%; -webkit-transform: translate(-100%, -50%) scale(-1, 1); transform: translate(-100%, -50%) scale(-1, 1); } @media screen and (max-width: 1400px) { .p-single-events__featured-works > .p-single-events__btn--prev { left: 0; -webkit-transform: translate(-50%, -50%) scale(-1, 1); transform: translate(-50%, -50%) scale(-1, 1); } } .p-single-events__featured-works > .p-single-events__btn--next { right: -6%; -webkit-transform: translate(100%, -50%); transform: translate(100%, -50%); } @media screen and (max-width: 1400px) { .p-single-events__featured-works > .p-single-events__btn--next { right: 0; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } } .p-single-events__media { margin-top: 30px; } @media screen and (max-width: 768px) { .p-single-events__media { margin-top: 20px; } } .p-single-events__media + .p-single-events__about { margin-top: 180px; } @media screen and (max-width: 768px) { .p-single-events__media + .p-single-events__about { margin-top: 120px; } } .p-single-events__about { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events__about { font-size: 13px; line-height: 22.75px; } } .p-single-events__statement { margin-top: 60px; } @media screen and (max-width: 768px) { .p-single-events__statement { margin-top: 30px; } } .p-single-events__downloads { margin-top: 30px; } @media screen and (max-width: 768px) { .p-single-events__downloads { margin-top: 20px; } } .p-single-events-info { width: 100%; } .p-single-events-info__title { font-size: 32px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 39px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .p-single-events-info__title { font-size: 28px; line-height: 34px; } } .p-single-events-info__location, .p-single-events-info__date { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 21px; color: #000000; font-family: "Inter", sans-serif; margin-top: 10px; letter-spacing: 0.03em; } @media screen and (max-width: 768px) { .p-single-events-info__location, .p-single-events-info__date { font-size: 13px; line-height: 16px; } } .p-single-events-info__location, .p-single-events-info__author { margin-top: 20px; } .p-single-events-info__introduction { font-size: 15px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 25.5px; color: #000000; margin-top: 80px; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events-info__introduction { margin-top: 60px; } } .p-single-events-author__title { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events-author__title { font-size: 13px; line-height: 28px; } } .p-single-events-author__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; } .p-single-events-author__item { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events-author__item { font-size: 13px; line-height: 22.75px; } } .p-single-events-author__item::after { content: "、"; } .p-single-events-author__item:last-child::after { content: ""; } .p-single-events-author__no-result { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events-author__no-result { font-size: 13px; line-height: 22.75px; } } .p-single-events-view { overflow: hidden; width: 100%; max-width: 900px; margin-inline: auto; } @media screen and (max-width: 768px) { .p-single-events-view { width: 65vw; min-width: 250px; } } .p-single-events-view__inner { width: 100%; } .p-single-events-view__item { aspect-ratio: 9/6; width: 100%; } @media screen and (max-width: 768px) { .p-single-events-view__item { aspect-ratio: 25/16; } } .p-single-events-view__item > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-featured-work-cards { overflow: hidden; width: 100%; margin-inline: auto; } @media screen and (max-width: 768px) { .p-featured-work-cards { width: 65vw; min-width: 250px; } } .p-featured-work-cards__inner { width: 100%; } .p-featured-work-cards__no-result { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-featured-work-cards__no-result { font-size: 13px; line-height: 22.75px; } } .p-featured-work-card { width: 100%; } .p-featured-work-card__inner { width: 100%; } .p-featured-work-card__img { width: 100%; } .p-featured-work-card__img > img { width: 100%; height: auto; vertical-align: bottom; } .p-featured-work-card__disc { margin-top: 20px; } .p-featured-work-card__row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .p-featured-work-card__name, .p-featured-work-card__year, .p-featured-work-card__size { font-size: 12px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 15px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.03em; } .p-featured-work-card_name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all; } .p-featured-work-card__year { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .p-featured-work-card__size, .p-featured-work-card__techniques { margin-top: 10px; } .p-featured-work-card-techniques__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-featured-work-card-techniques__item { font-size: 12px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 15px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.03em; } .p-featured-work-card-techniques__item::after { content: ","; } .p-featured-work-card-techniques__item:last-child::after { content: ""; } .p-single-events-media__row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: end; -ms-flex-align: end; align-items: end; -webkit-column-gap: 5%; -moz-column-gap: 5%; column-gap: 5%; } @media screen and (max-width: 768px) { .p-single-events-media__row { -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; row-gap: 20px; } } .p-single-events-media__column { width: 100%; max-width: 430px; } .p-single-events-media__column--left { max-width: 710px; } .p-single-events-media__media { aspect-ratio: 16/9; width: 100%; } @media screen and (max-width: 768px) { .p-single-events-media__media { width: 80vw; margin-inline: auto; } } .p-single-events-media__media > iframe { width: 100%; height: 100%; } .p-single-events-media__media > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; vertical-align: bottom; } .p-single-events-media__info { width: 100%; } .p-single-events-media__no-result { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events-media__no-result { font-size: 13px; line-height: 22.75px; } } .p-single-events-media-info__title { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 26px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events-media-info__title { font-size: 16px; line-height: 24px; } } .p-single-events-media-info__desc { font-size: 15px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 26.25px; color: #000000; margin-top: 30px; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events-media-info__desc { font-size: 13px; line-height: 26.25px; margin-top: 20px; } } .p-single-events-statement__title, .p-single-events-statement__text { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-events-statement__title, .p-single-events-statement__text { font-size: 13px; line-height: 22.75px; } } .p-single-events-statement__title { font-weight: 500; } .p-single-events-statement__text { margin-top: 20px; } @media screen and (max-width: 768px) { .p-single-events-statement__text { margin-top: 10px; } } .p-single-downloads__item { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 24px; color: #000000; margin-top: 20px; } @media screen and (max-width: 768px) { .p-single-downloads__item { font-size: 14px; line-height: 20px; margin-top: 10px; } } .p-single-downloads__item:first-child { margin-top: 0; } .p-single-downloads__item > a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; width: 100%; height: 100%; } .p-single-downloads__item > a::after { display: block; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 15px; height: 15px; content: ""; background-image: url(../img/svg/download-file.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } .p-single-downloads__no-result { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-single-downloads__no-result { font-size: 13px; line-height: 22.75px; } } .p-company { margin-top: 120px; } .p-company__overview { width: 100%; } .p-company__about { margin-top: 180px; } @media screen and (max-width: 768px) { .p-company__about { margin-top: 60px; } } .p-company__service { margin-top: 60px; } @media screen and (max-width: 768px) { .p-company__service { margin-top: 120px; } } .p-company-overview { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: end; -ms-flex-align: end; align-items: end; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; width: 100%; max-width: 1200px; margin-inline: auto; } @media screen and (max-width: 1200px) { .p-company-overview { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; row-gap: 60px; } } @media screen and (max-width: 768px) { .p-company-overview { -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; } } @media screen and (max-width: 768px) { .p-company-overview__column { width: 100%; } } .p-company-overview__logo { width: 180px; height: 30px; } .p-company-overview__logo > img { -o-object-fit: contain; object-fit: contain; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; } .p-company-overview__info { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; margin-top: 60px; } @media screen and (max-width: 768px) { .p-company-overview__info { margin-top: 20px; } } .p-company-overview__img { aspect-ratio: 60/48; width: 100%; max-width: 600px; } @media screen and (max-width: 1200px) { .p-company-overview__img { max-width: none; } } .p-company-overview__img > img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 100%; height: 100%; } .p-company-overview-info { display: grid; grid-template-columns: repeat(2, auto); row-gap: 60px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; width: 100%; } @media screen and (max-width: 768px) { .p-company-overview-info { grid-template-columns: auto; row-gap: 20px; } } .p-company-overview-info__row { display: contents; } @media screen and (max-width: 768px) { .p-company-overview-info__row { display: block; width: 100%; } } .p-company-overview-info__dt { font-size: 20px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 35px; color: #000000; font-family: "Inter", sans-serif; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-company-overview-info__dt { font-size: 16px; line-height: 20px; } } .p-company-overview-info__dd { font-size: 20px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 35px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-company-overview-info__dd { font-size: 16px; line-height: 28px; margin-top: 10px; } } .p-company-overview-info__dd--address { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: end; -ms-flex-align: end; align-items: end; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } @media screen and (max-width: 768px) { .p-company-overview-info__dd--address .res-pc { display: none; } } @media screen and (max-width: 520px) { .p-company-overview-info__dd--address { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .p-company-overview-info__dd--mail { font-family: "Inter", sans-serif; } .p-company-overview-info__dd--mail > a { position: relative; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 100%; } .p-company-overview-info__dd--mail > a::after { position: absolute; bottom: -1px; left: 0; display: block; width: 100%; content: ""; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; border-bottom: 1px solid #000000; } .p-company-overview-info__dd--mail > a:hover::after { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 1; } .p-map-link { font-size: 18px; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 18px; color: #000000; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 60px; height: 25px; margin-bottom: 5px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; letter-spacing: 0.03em; border: 1px solid #000000; border-radius: 13px; } .p-map-link:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #ffffff; background-color: #000000; } .p-company-about { width: 100%; max-width: 1200px; margin-inline: auto; } .p-company-about__text { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-company-about__text { font-size: 13px; line-height: 22px; } } .p-company-about__founder { font-size: 20px; font-weight: 300; -webkit-font-smoothing: antialiased; line-height: 35px; color: #000000; font-family: "Inter", sans-serif; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 60px; margin-right: 0; margin-left: auto; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-company-about__founder { font-size: 16px; line-height: 20px; } } .p-company-about__founder > span { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .p-company-about__founder > span:first-child { font-weight: 500; letter-spacing: 0.03em; } .p-company-service { width: 100%; max-width: 1200px; margin-inline: auto; } .p-company-service__title { font-size: 20px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; } @media screen and (max-width: 768px) { .p-company-service__title { font-size: 16px; line-height: 20px; } } .p-company-service__list { margin-top: 20px; } .p-company-service-list__item { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 26px; color: #000000; position: relative; margin-top: 20px; padding-left: 10px; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-company-service-list__item { font-size: 16px; line-height: 24px; margin-top: 10px; } .p-company-service-list__item .res-sp { display: block; } } .p-company-service-list__item:first-child { margin-top: 0; } .p-company-service-list__item::before { position: absolute; top: 13px; left: 0; display: block; width: 5px; height: 5px; content: ""; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #000000; } @media screen and (max-width: 768px) { .p-company-service-list__item::before { top: 12px; width: 3px; height: 3px; } } .p-contact-form__label > .label, .p-contact-confirm__label > .label { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; letter-spacing: 0.04em; } .p-contact-form__label > .tag, .p-contact-confirm__label > .tag { font-size: 14px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 14px; color: #ffffff; display: block; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 6px 15px; letter-spacing: 0.04em; background-color: #000000; } .p-contact-form__label > .tag--optional, .p-contact-confirm__label > .tag--optional { background-color: #656565; } .p-contact { width: 100%; max-width: 800px; margin-inline: auto; padding-top: 120px; } .p-contact__head { width: 100%; text-align: center; } .p-contact__head > p { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; letter-spacing: 0.04em; } .p-contact__form, .p-contact__confirm { width: 100%; margin-top: 120px; } .p-contact__complete { width: 100%; margin-top: 0; } .p-contact-form { display: grid; grid-template-columns: 100%; row-gap: 40px; width: 100%; } .p-contact-form__item { width: 100%; } .p-contact-form__item--accept { margin-top: 80px; } .p-contact-form__item--accept > .accept-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .p-contact-form__item--accept > .accept-wrap > input { width: 25px; height: 25px; accent-color: #000000; border: 1px solid #000000; } .p-contact-form__item--accept > .accept-wrap > label { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 35px; color: #000000; letter-spacing: 0.04em; } .p-contact-form__item--accept > .accept-wrap > label > a { position: relative; } .p-contact-form__item--accept > .accept-wrap > label > a::after { position: absolute; bottom: -1px; left: 0; display: block; width: 100%; height: 1px; content: ""; background-color: #000000; } .p-contact-form__submit > input.p-contact-form-submit { display: none; } .p-contact-form__label, .p-contact-confirm__label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; } .p-contact-form__input { margin-top: 10px; } .p-contact-form__input > input, .p-contact-form__input > select, .p-contact-form__input > textarea { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #000000; width: 100%; height: 60px; padding: 15px 3.125%; letter-spacing: 0.04em; border: 1px solid #000000; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .p-contact-form__input > input::-webkit-input-placeholder, .p-contact-form__input > textarea::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.1607843137); } .p-contact-form__input > input::-moz-placeholder, .p-contact-form__input > textarea::-moz-placeholder { color: rgba(0, 0, 0, 0.1607843137); } .p-contact-form__input > input:-ms-input-placeholder, .p-contact-form__input > textarea:-ms-input-placeholder { color: rgba(0, 0, 0, 0.1607843137); } .p-contact-form__input > input::-ms-input-placeholder, .p-contact-form__input > textarea::-ms-input-placeholder { color: rgba(0, 0, 0, 0.1607843137); } .p-contact-form__input > input::placeholder, .p-contact-form__input > textarea::placeholder { color: rgba(0, 0, 0, 0.1607843137); } .p-contact-form__input > input.readonly { border: none; border-bottom: 1px solid #000000; outline: none; } .p-contact-form__input > textarea { height: 240px; } .p-contact-form__error { font-size: 14px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 20px; color: #ff3333; margin-top: 5px; } .p-contact-confirm { display: grid; -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; grid-template-columns: auto 1fr; row-gap: 70px; -webkit-column-gap: 12.5%; -moz-column-gap: 12.5%; column-gap: 12.5%; width: 100%; } .p-contact-confirm__item { display: contents; width: 100%; } .p-contact-confirm__submit { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; grid-template-columns: auto; row-gap: 20px; margin-top: 100px; justify-items: center; } .p-contact-confirm__submit--hide { display: none; } .p-contact-confirm__submit > input.p-contact-form-submit { display: none; } .p-contact-confirm__value { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 25px; color: #000000; width: 100%; letter-spacing: 0.04em; word-break: break-all; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .p-contact-confirm__link { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 32px; color: #000000; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-bottom: 1px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; letter-spacing: 0.04em; border-bottom: 1px solid #000000; } .p-contact-confirm__link::before { margin-right: 5px; content: "←"; } .p-contact-confirm__link:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; } .p-contact-complete > p { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; letter-spacing: 0.04em; } .p-contact-complete__btn { margin-top: 180px; } .p-newsletter { width: 100%; max-width: 800px; margin-inline: auto; padding-top: 120px; } .p-newsletter__head { width: 100%; text-align: center; } .p-newsletter__head > p { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; letter-spacing: 0.04em; } .p-newsletter__confirm { width: 100%; margin-top: 20px; } .p-newsletter__complete { width: 100%; margin-top: 0; } .p-newsletter-confirm { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; row-gap: 70px; -webkit-column-gap: 12.5%; -moz-column-gap: 12.5%; column-gap: 12.5%; width: 100%; } .p-newsletter-confirm__item { display: contents; width: 100%; } .p-newsletter-confirm__submit { display: grid; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; grid-template-columns: auto; row-gap: 20px; margin-top: 60px; justify-items: center; } .p-newsletter-confirm__submit--hide { display: none; } .p-newsletter-confirm__submit > input.p-newsletter-form-submit { display: none; } .p-newsletter-confirm__value { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; padding: 0px 5px; padding-bottom: 2px; text-align: center; letter-spacing: 0.04em; border-bottom: 1px solid #000000; } .p-newsletter-confirm__link { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 32px; color: #000000; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-bottom: 1px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; letter-spacing: 0.04em; border-bottom: 1px solid #000000; } .p-newsletter-confirm__link::before { margin-right: 5px; content: "←"; } .p-newsletter-confirm__link:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0.7; } .p-newsletter-complete > p { font-size: 18px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; letter-spacing: 0.04em; } .p-newsletter-complete__btn { margin-top: 180px; } .p-privacy-policy { margin-top: 120px; width: 100%; max-width: 1200px; margin-inline: auto; } @media screen and (max-width: 768px) { .p-privacy-policy { margin-top: 60px; } } .p-privacy-policy > h2.wp-block-heading { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 22.75px; color: #000000; letter-spacing: 0.04em; margin-top: 60px; } .p-privacy-policy > h2.wp-block-heading:first-child { margin-top: 0; } .p-privacy-policy > h2.wp-block-heading + p { margin-top: 30px; } @media screen and (max-width: 768px) { .p-privacy-policy > h2.wp-block-heading + p { margin-top: 20px; } } .p-privacy-policy > p { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-privacy-policy > p { font-size: 13px; line-height: 22.75px; } } .p-privacy-policy ol li, .p-privacy-policy ul li { font-size: 16px; font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 28px; color: #000000; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-privacy-policy ol li, .p-privacy-policy ul li { font-size: 13px; line-height: 22.75px; } } .p-privacy-policy ol { margin: 5px 0; counter-reset: cnt; position: relative; } .p-privacy-policy ol > li { padding-left: 1.5em; margin-top: 0.5em; counter-increment: cnt; } .p-privacy-policy ol > li::before { position: absolute; left: 0; content: counter(cnt) "."; } .p-privacy-policy ol > li:first-child { margin-top: 0; } .p-privacy-policy > ol > li { padding-left: 1.5em; margin-top: 1em; } .p-privacy-policy > ol > li::before { content: "(" counter(cnt) ")"; } .p-privacy-policy ul { margin: 5px 0; } .p-privacy-policy ul > li { padding-left: 1.5em; margin-top: 0.5em; position: relative; } .p-privacy-policy ul > li::before { position: absolute; left: 0; content: "・"; } .p-privacy-policy ul > li:first-child { margin-top: 0; } .p-no-page { margin-top: 120px; } .p-no-page__text { font-size: 18px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 31.5px; color: #000000; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-inline: auto; text-align: center; letter-spacing: 0.04em; } @media screen and (max-width: 768px) { .p-no-page__text .res-sp { display: block; } } .p-no-page__btn { margin-top: 180px; } .u-padding-none { padding: 0; } .u-padding-top-none { padding-top: 0; } .u-padding-bottom-none { padding-bottom: 0; }/*# sourceMappingURL=style.css.map */