@charset "UTF-8"; /*! Theme Name: 寺町藝術センター Theme URI: https://teragei.com/ Author: Tetsuya Kogure Teta's LLC Description: 寺町藝術センターのテーマ Version: 1.0.0 Requires at least: 6.0 Requires PHP: 8.0 License: GPL-2.0-or-later Text Domain: */ @layer reset, tokens, base, layout, components, utilities; @layer tokens { :root { --c-text: #000000; --c-bg: #fbfaf3; --c-bg-light: #f2f2f2; --c-gray: #777777; --c-accent-red: #9B2020; --c-accent-blue: #20334A; --c-border: #a5a5a5; --c-placeholder: #d9d9d9; --c-white: #ffffff; --c-white-baige: #FFFFFe; --c-black: #000000; --c-overlay: rgba(0, 0, 0, 0.6); --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 1.75rem; --space-10: 2rem; --space-12: 2.25rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-xxl: 1.25rem; --radius-pill: 62.4375rem; } } @layer reset { /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, table, thead, tbody, tfoot, tr, th, td):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } } @layer base { html { scroll-behavior: smooth; scroll-padding-top: 150px; font-size: min(1.0810810811vw, 16px); } @media (max-width: 991.98px) { html { font-size: min(1.6129032258vw, 16px); } } @media (max-width: 767.98px) { html { font-size: min(4.1025641026vw, 16px); } } html.is-scrollLocked, body.is-scrollLocked, body.is-menuOpen, body.is-modal-active { overflow: hidden; overscroll-behavior: none; } body { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 400; font-style: normal; display: flex; flex-direction: column; min-height: 100dvh; font-size: 100%; line-height: 1.5; letter-spacing: 0; font-weight: 400; color: var(--c-text); text-justify: inter-character; font-kerning: normal; } a { color: inherit; text-decoration: none; transition: opacity 0.2s; } a:hover, a:focus { opacity: 0.75; } a[href="#"] { cursor: default; opacity: 0.3; pointer-events: none; } img { width: 100%; max-width: 100%; height: auto; vertical-align: bottom; } figure { display: inline-block; margin: 0; padding: 0; } figure figcaption { text-align: right; font-size: 0.875rem; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { figure figcaption { font-size: 0.75rem; } } button { background-color: transparent; cursor: pointer; } .wpcf7-spinner { display: none; } .grecaptcha-badge { visibility: hidden; } } @layer layout { .site-header { position: fixed; inset: 0 auto 0 0; z-index: 100; width: min(21.6216216216vw, 320px); height: 100dvh; background-color: var(--c-bg-light); container: site-header/size; overflow: scroll; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } @media (max-width: 767.98px) { .site-header { inset-block-start: 4rem; width: min(80vw, 20rem); height: auto; min-height: 0; max-height: 100dvh; overflow-y: scroll; opacity: 0; transform: translateX(-100%); transition: transform 0.3s ease, opacity 0.3s ease; } .is-menuOpen .site-header { opacity: 1; transform: translateX(0); } } .site-header__inner { display: flex; flex-direction: column; height: 100%; min-height: 62.5rem; padding-block: 1.5rem 0; padding-inline: 19.375cqi 15.625cqi; } @media (max-width: 767.98px) { .site-header__inner { min-height: auto; } } .site-header__logo { display: block; } @media (max-width: 767.98px) { .site-header__logo { display: none; } } .site-header__logoImg { width: 30cqi; height: auto; margin-inline-start: 14.375cqi; } .site-header__sns { display: flex; align-items: center; gap: 10.3125cqi; width: calc(100% + 19.375cqi + 15.625cqi); min-height: 3rem; margin-block-start: auto; margin-inline: -19.375cqi -15.625cqi; padding-inline: 19.375cqi 15.625cqi; background-color: var(--c-text); } @media (max-width: 767.98px) { .site-header__sns { min-height: 2.5rem; } } .site-header__snsIcon { display: block; width: 7.5cqi; height: 7.5cqi; color: var(--c-white-baige); } .site-header__snsIcon--x { width: 4.375cqi; height: 4.375cqi; } .site-header__divider { width: 60.78125cqi; height: 1px; margin: 0; margin-block-start: 1.125rem; margin-inline-start: 1.25cqi; border: 0; background-image: repeating-linear-gradient(to right, var(--c-border) 0, var(--c-border) 2px, transparent 2px, transparent 4px); } .site-header__nav { margin-block-start: 1.25rem; } .site-header__navItem { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 700; font-style: normal; font-size: 5cqi; line-height: 2.5; letter-spacing: 0.1cqi; color: var(--c-text); } .site-header__navList--lg .site-header__navItem { font-size: 5.625cqi; line-height: 2.8333333333; } .site-header__navLink::before { content: "──"; position: relative; inset-inline-start: 0.625cqi; margin-inline-end: 2.03125cqi; } .site-header__navLink--en { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 500; font-style: normal; font-size: 3.75cqi; line-height: 2.8333333333; letter-spacing: 0.234375cqi; } .site-header__logo--sub { width: 100%; margin-block-start: 2rem; } .site-header__logo--sub .site-header__logoImg { width: 39.375cqi; height: auto; margin-inline-start: 9.6875cqi; } @media (max-width: 767.98px) { .site-header__logo--sub .site-header__logoImg { display: none; } } .site-header__logo--sub + .site-header__nav { margin-block-start: 1.5rem; } .site-header__cta { position: relative; display: flex; align-items: center; justify-content: center; width: 65.3125cqi; height: 28.75cqi; margin-block-start: 10.75rem; background-color: var(--c-gray); } .site-header__cta + .site-header__nav { margin-block-start: 0; } .site-header__ctaLogo { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 700; font-style: normal; position: absolute; inset-block-start: 1.0625rem; inset-inline-start: 25cqi; display: block; color: var(--c-white); font-size: 5.625cqi; line-height: 2.8333333333; } .site-menubar { display: none; } @media (max-width: 767.98px) { .site-menubar { position: sticky; inset-block-start: 0; z-index: 110; display: flex; align-items: center; justify-content: space-between; height: 4rem; padding-inline: 1.25rem; background-color: var(--c-bg-light); } } .site-menubar__scrim { display: none; } @media (max-width: 767.98px) { .site-menubar__scrim { position: fixed; inset: 0; z-index: 90; display: block; background-color: color-mix(in srgb, var(--c-gray) 55%, transparent); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .is-menuOpen .site-menubar__scrim { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } } @media (max-width: 767.98px) { .site-menubar__logo { display: block; } } @media (max-width: 767.98px) { .site-menubar__logoImg { width: auto; height: 2.25rem; } } @media (max-width: 767.98px) { .site-menubar__toggle { position: relative; width: 2rem; height: 1.375rem; padding: 0; border: 0; background: none; cursor: pointer; } } @media (max-width: 767.98px) { .site-menubar__toggleBar { position: absolute; inset-inline: 0; height: 2px; background-color: var(--c-text); transition: transform 0.3s ease, opacity 0.3s ease; } .site-menubar__toggleBar:nth-child(1) { inset-block-start: 0; } .site-menubar__toggleBar:nth-child(2) { inset-block-start: 50%; transform: translateY(-50%); } .site-menubar__toggleBar:nth-child(3) { inset-block-end: 0; } .is-menuOpen .site-menubar__toggleBar:nth-child(1) { inset-block-start: 50%; transform: translateY(-50%) rotate(45deg); } .is-menuOpen .site-menubar__toggleBar:nth-child(2) { opacity: 0; } .is-menuOpen .site-menubar__toggleBar:nth-child(3) { inset-block-start: 50%; inset-block-end: auto; transform: translateY(-50%) rotate(-45deg); } } } @layer layout { .main { flex: 1; background-color: var(--c-bg); } } @layer layout { .main, .site-footer { margin-inline-start: min(21.6216216216vw, 320px); } @media (max-width: 767.98px) { .main, .site-footer { margin-inline-start: 0; } } } @layer layout { .site-footer { padding-block: 5.875rem 1.875rem; background-color: var(--c-white); } @media (max-width: 767.98px) { .site-footer { padding-block: 3.125rem 1.25rem; } } .site-footer__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4.53125rem; align-items: end; } @media (max-width: 767.98px) { .site-footer__grid { grid-template-columns: 1fr; row-gap: 3rem; } } .site-footer__logo { display: block; width: 14.1875rem; height: auto; margin-bottom: 2.1875rem; } @media (max-width: 767.98px) { .site-footer__logo { margin: 0 auto 1.25rem; } } .site-footer__noieImage { width: 100%; max-width: 22.375rem; } @media (max-width: 767.98px) { .site-footer__noieImage { max-width: 100%; margin-block-end: 1.25rem; text-align: center; } } .site-footer__noieImage--img { width: 100%; max-width: 5.875rem; height: auto; } .site-footer__name { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; color: var(--c-text); font-size: 1rem; line-height: 1.5; } @media (max-width: 767.98px) { .site-footer__name { text-align: center; } } .site-footer__address { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-top: 3rem; color: var(--c-text); font-size: 1rem; line-height: 1.5; } .site-footer__link { color: var(--c-text); text-decoration: none; } .site-footer__column--noie .site-footer__link { position: relative; } .site-footer__map { width: 100%; aspect-ratio: 363/358; margin-bottom: 1.9375rem; overflow: hidden; background-color: var(--c-placeholder); } .site-footer__map iframe { display: block; width: 100%; height: 100%; border: 0; } .site-footer__mapTitle { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 500; font-style: normal; } .site-footer__mapText { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-top: 1.25rem; color: var(--c-text); font-size: 0.8125rem; line-height: 1.4285714286; } .site-footer__mapButton { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.625rem; margin-top: 1.25rem; width: fit-content; height: auto; background-color: var(--c-text); padding: 0.3125rem 0.625rem; text-decoration: none; color: var(--c-white); font-size: 0.875rem; line-height: 1.4285714286; font-weight: 500; text-align: center; letter-spacing: 0.05em; } .site-footer__sns { position: absolute; right: 0; bottom: 0; transform: translateY(calc(100% + 1.25rem)); display: flex; align-items: center; gap: 2.0625rem; width: fit-content; margin-inline: auto 0.3125rem; list-style: none; } @media (max-width: 767.98px) { .site-footer__sns { position: static; transform: none; margin: 1.5rem 0 0; justify-content: flex-start; } } .site-footer__snsLink { display: grid; place-items: center; } .site-footer__snsLink img { display: block; max-width: 100%; height: auto; } .site-footer__sponsor { padding-block: 5.625rem 0; } @media (max-width: 767.98px) { .site-footer__sponsor { padding-block: 3.125rem 0; } } .site-footer__sponsorText { font-size: 0.75rem; line-height: 1.6666666667; letter-spacing: 0.075em; text-align: center; } .site-footer__copyright { padding-block: 3.75rem 0; } .site-footer__copyrightText { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; text-align: center; font-size: 0.75rem; line-height: 1; letter-spacing: 0.05em; } } @layer layout {} @layer layout { .container { width: 1300px; max-width: 100%; margin-inline: auto; padding-inline: 1.875rem; } @media (max-width: 767.98px) { .container { padding-inline: 1.25rem; } } .container--narrow { width: 1052px; max-width: 100%; padding-inline: 1.875rem; } @media (max-width: 767.98px) { .container--narrow { padding-inline: 1.25rem; } } .container--wide { width: 1460px; max-width: 100%; padding-inline: 1.875rem; } @media (max-width: 767.98px) { .container--wide { padding-inline: 1.25rem; } } .container--xwide { width: 1700px; max-width: 100%; padding-inline: 1.875rem; } @media (max-width: 767.98px) { .container--xwide { padding-inline: 1.25rem; } } .container--full { width: 100%; max-width: 100%; padding-inline: 1.875rem; } @media (max-width: 767.98px) { .container--full { padding-inline: 1.25rem; } } } @layer layout { .l-breadcrumb { margin-block: 1.25rem 5.8125rem; } @media (max-width: 767.98px) { .l-breadcrumb { margin-block: 1.25rem 3.125rem; } } .l-breadcrumb__list { display: flex; gap: 0.5em; font-size: 1.125rem; line-height: 3.3333333333; letter-spacing: 0.05em; font-weight: 500; } @media (max-width: 767.98px) { .l-breadcrumb__list { font-size: 0.875rem; line-height: 2.8571428571; } } .l-breadcrumb__item { display: inline-flex; align-items: center; gap: 0.5em; } .l-breadcrumb__item:not(:last-child)::after { content: "/"; display: inline; } } @layer layout {} @layer components { .button { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); color: var(--c-white); background-color: var(--c-text); font-size: 1rem; border-radius: var(--radius-sm); cursor: pointer; transition: opacity 0.2s ease; } .button:hover { opacity: 0.85; } .button[data-variant=outline] { color: var(--c-text); background-color: transparent; border: 1px solid var(--c-text); } } @layer components { .modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.25rem; background-color: var(--c-overlay); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .modal.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } .modal__dialog { position: relative; width: min(90dvw, 75rem); max-height: 90dvh; overflow-y: auto; padding: 2rem; background-color: var(--c-white-baige); border-radius: var(--radius-md); transform: translateY(1rem); transition: transform 0.3s ease; } .modal.is-active .modal__dialog { transform: none; } .modal__dialog--video { width: min(90dvw, 60rem); max-height: none; padding: 0; overflow: visible; background: none; border-radius: 0; } .modal__dialog--video .modal__close { inset-block-start: -2.75rem; inset-inline-end: 0; color: var(--c-white); } .modal__close { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--c-text); font-size: 1.5rem; line-height: 1; cursor: pointer; } .modal__title { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 700; font-style: normal; margin-bottom: 1rem; padding-inline-end: 2rem; color: var(--c-text); font-size: 1.5rem; line-height: 1.4; } .modal__image { margin-bottom: 2.5rem; text-align: center; } .modal__imageImg { width: 100%; max-width: 37.5rem; height: auto; } .modal__text { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; font-size: 1rem; line-height: 2; letter-spacing: cqi(0.04); } @media (prefers-reduced-motion: reduce) { .modal, .modal__dialog { transition-duration: 0s; } } } @layer components { .home-section { padding-block: 10rem 5rem; } @media (max-width: 767.98px) { .home-section { padding-block: 3.75rem 2.5rem; } } .home-section__inner { position: relative; padding-top: 6.25rem; } @media (max-width: 767.98px) { .home-section__inner { padding-top: 4.1875rem; } } .home-section__inner::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; border-top: 1px solid var(--c-border); } .home-ima .home-section__inner::before { inset-block-start: -0.655rem; } @media (max-width: 767.98px) { .home-ima .home-section__inner::before { inset-block-start: 0; } } .home-omoi .home-section__inner::before { inset-block-start: 0.00125rem; } @media (max-width: 767.98px) { .home-omoi .home-section__inner::before { inset-block-start: 0; } } .home-basho .home-section__inner::before { inset-block-start: 3.9075rem; } @media (max-width: 767.98px) { .home-basho .home-section__inner::before { inset-block-start: 0; } } .home-tsukuru .home-section__inner::before { inset-block-start: -2.53rem; } @media (max-width: 767.98px) { .home-tsukuru .home-section__inner::before { inset-block-start: 0; } } .home-miru .home-section__inner::before { inset-block-start: -6.62375rem; } @media (max-width: 767.98px) { .home-miru .home-section__inner::before { inset-block-start: 0; } } .home-kakawaru .home-section__inner::before { inset-block-start: -6.916875rem; } @media (max-width: 767.98px) { .home-kakawaru .home-section__inner::before { inset-block-start: 0; } } .home-tomaru .home-section__inner::before { inset-block-start: -2.373125rem; } @media (max-width: 767.98px) { .home-tomaru .home-section__inner::before { inset-block-start: 0; } } } @layer components { .section-head { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; display: flex; align-items: flex-end; gap: 2.5rem; margin-bottom: 4.5rem; color: var(--c-text); line-height: 1; } @media (max-width: 767.98px) { .section-head { flex-direction: column; align-items: flex-start; gap: 0.625rem; margin-bottom: 2.5rem; } } .section-head__title { font-size: 3.75rem; letter-spacing: 1.5rem; } @media (max-width: 767.98px) { .section-head__title { font-size: 1.875rem; } } .section-head__lead { font-size: 1.25rem; } @media (max-width: 767.98px) { .section-head__lead { font-size: 0.875rem; } } } @layer components { .home-fv { padding-block: 0; } .home-fv__slider { width: 100%; max-height: 56.25rem; height: auto; aspect-ratio: 1600/900; } .home-fv .splide__track, .home-fv .splide__slide { width: 100%; height: 100%; object-fit: cover; } .home-fv picture, .home-fv img { display: block; width: 100%; height: 100%; object-fit: cover; } } @layer components { .home-about { padding-block: 0; } .home-about.home-section .home-section__inner { padding-top: 7.9375rem; padding-bottom: 8.375rem; } @media (max-width: 767.98px) { .home-about.home-section .home-section__inner { padding-block: 3.75rem 2.5rem; } } .home-about.home-section .home-section__inner::before { content: none; } .home-about__wordmark { display: block; width: 57.6875rem; max-width: 100%; height: auto; margin-inline: auto; margin-bottom: 7.375rem; } @media (max-width: 767.98px) { .home-about__wordmark { margin-bottom: 5rem; } } .home-about__row { display: flex; align-items: flex-start; justify-content: center; gap: min(13.1756756757vw, 12.1875rem); max-width: 66.875rem; margin-inline: auto; transform: translateX(0.71875rem); } @media (max-width: 767.98px) { .home-about__row { flex-direction: column; align-items: center; gap: 2.5rem; transform: none; } } .home-about__keywords { display: block; width: min(25.4205607477%, 17rem); height: auto; } @media (max-width: 767.98px) { .home-about__keywords { width: 100%; max-width: 15rem; } } .home-about__body { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; flex: 0 0 min(56.0747663551%, 37.5rem); width: 100%; max-width: 37.5rem; margin-top: -0.75rem; font-size: 1.125rem; line-height: 2; word-break: break-word; } @media (max-width: 767.98px) { .home-about__body { flex: none; width: 100%; max-width: 100%; margin-top: 0; font-size: 1rem; } } .home-about__banners { display: flex; justify-content: center; gap: 1.875rem; max-width: 58.875rem; margin-top: 8.5rem; margin-inline: auto; transform: translateX(0.125rem); } @media (max-width: 767.98px) { .home-about__banners { flex-direction: column; gap: 1.25rem; margin-top: 3.75rem; transform: none; } } .home-about__banner { display: flex; flex: 0 0 1; flex-direction: column; width: 100%; min-height: 13.9375rem; padding: 2.3125rem 2.0625rem 2rem 2.1875rem; color: var(--c-white); text-decoration: none; } @media (max-width: 767.98px) { .home-about__banner { min-height: inherit; padding: 1.25rem; } } .home-about__banner--program { background-color: var(--c-accent-red); } .home-about__banner--program .home-about__bannerCta { background-color: var(--c-accent-blue); } .home-about__banner--cf { background-color: var(--c-accent-blue); } .home-about__banner--cf .home-about__bannerCta { background-color: var(--c-accent-red); } .home-about__bannerTitle { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 700; font-style: normal; display: block; font-size: 1.625rem; line-height: 1.3076923077; letter-spacing: 0.06rem; } @media (max-width: 767.98px) { .home-about__bannerTitle { font-size: 1.25rem; } } .home-about__bannerSub { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 500; font-style: normal; display: block; margin-top: 0.4375rem; font-size: 1rem; line-height: 2.125; letter-spacing: 0.035rem; } @media (max-width: 767.98px) { .home-about__bannerSub { font-size: 0.875rem; } } .home-about__bannerCta { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 700; font-style: normal; display: flex; align-items: center; align-self: flex-end; width: max-content; margin-top: auto; margin-bottom: 0; font-size: 0.875rem; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; } @media (max-width: 767.98px) { .home-about__bannerCta { font-size: 0.75rem; } } .home-about__banner--cf .home-about__bannerCta { transform: translate(0.125rem, 0.15625rem); } .home-about__banner--cf .home-about__bannerTitle, .home-about__banner--cf .home-about__bannerSub { text-align: right; } .home-about__bannerArrow { font-size: 0.625rem; line-height: 1; } } @layer components { .home-news { padding-top: 0; padding-bottom: 1.875rem; } .home-news + .home-ima .home-ima__titleChar { position: relative; left: 1.078125rem; } .home-news .home-section__inner { padding-top: 6.375rem; } @media (max-width: 767.98px) { .home-news .home-section__inner { padding-top: 4.25rem; } } .home-news__head { position: relative; margin-bottom: 6.3125rem; } @media (max-width: 767.98px) { .home-news__head { margin-bottom: 4.1875rem; } } .home-news__arrows { position: absolute; top: 6.0625rem; right: 0.3125rem; display: flex; gap: 1.375rem; } @media (max-width: 767.98px) { .home-news__arrows { top: 4.1875rem; right: 0.3125rem; } } .home-news__arrow { display: block; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; background: none; cursor: pointer; } .home-news__arrow img { display: block; width: 100%; height: 100%; } .home-news__arrow:disabled { cursor: default; opacity: 0.3; } .home-news .splide__arrow--next img { transform: scaleX(-1); } .home-news__card { display: block; text-decoration: none; } .home-news__thumb { display: block; margin-bottom: 0; overflow: hidden; background-color: var(--c-placeholder); aspect-ratio: 380/255; } .home-news__thumbImg, .home-news__thumb--placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } .home-news__thumb--placeholder { background-color: var(--c-placeholder); } .home-news__slider .splide__slide:nth-child(n+2) .home-news__thumb--placeholder img { display: none; } .home-news__date { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; display: inline-block; margin-bottom: 0; font-size: 0.875rem; line-height: 1; } @media (max-width: 767.98px) { .home-news__date { font-size: 0.75rem; } } .home-news__cardTitle { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-top: 0.625rem; display: grid; align-content: center; font-size: 1.25rem; line-height: 1.7; } @media (max-width: 767.98px) { .home-news__cardTitle { margin-top: 0; font-size: 1rem; } } } @layer components { .home-ima__list { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0 1.875rem; } @media (max-width: 767.98px) { .home-ima__list { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 0.625rem 1.25rem; } } .home-ima__item--gallery { grid-column: span 2; grid-row: span 2; } .home-ima__item--gallery .home-ima__thumb { aspect-ratio: 830/582; } @media (max-width: 767.98px) { .home-ima__item--gallery { grid-column: span 2; grid-row: auto; } } .home-ima__thumb { position: relative; display: block; width: 100%; margin-bottom: 0.625rem; padding: 0; border: 0; background-color: var(--c-placeholder); overflow: hidden; aspect-ratio: 615/413; } .home-ima__thumb--video { cursor: pointer; } .home-ima__thumbLink { text-decoration: none; } .home-ima__thumbImg, .home-ima__thumb--placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } .home-ima__thumb--placeholder { background-color: var(--c-placeholder); } .home-ima__play { position: absolute; inset: 0; width: 4.5rem; height: 4.5rem; margin: auto; border-radius: 50%; background-color: var(--c-overlay); } .home-ima__play::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 0.8125rem 0 0.8125rem 1.375rem; border-color: transparent transparent transparent var(--c-white); transform: translateX(15%); } .home-ima__player { overflow: hidden; aspect-ratio: 16/9; } .home-ima__iframe { display: block; width: 100%; height: 100%; border: 0; } .home-ima__caption { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; display: grid; align-content: center; font-size: 1.25rem; line-height: 1.7; } @media (max-width: 767.98px) { .home-ima__caption { font-size: 0.875rem; } } .home-ima__caption--gallery { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; } .home-ima__captionText--name { font-size: 1rem; } @media (max-width: 767.98px) { .home-ima__captionText--name { font-size: 0.625rem; } } .home-ima__viewall { position: relative; margin-top: 5.875rem; text-align: center; } @media (max-width: 767.98px) { .home-ima__viewall { margin-top: 3.75rem; } } .home-ima__viewallLink { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; display: inline-block; color: var(--c-text); font-size: 1.25rem; line-height: 1.7; text-decoration: underline; } @media (max-width: 767.98px) { .home-ima__viewallLink { font-size: 1.125rem; } } } @layer components { .home-omoi__image, .home-omoi__blocks { padding-inline: 2.1875rem 3.4375rem; } @media (max-width: 767.98px) { .home-omoi__image, .home-omoi__blocks { padding-inline: 0; } } .home-omoi__image { text-align: center; } .home-omoi__imageImg { width: 100%; max-width: 50rem; height: auto; aspect-ratio: 1400/1000; } .home-omoi__imageCaption { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-top: 1rem; font-size: 0.875rem; line-height: 1.4285714286; letter-spacing: 0.05em; } .home-omoi__block { position: relative; padding-block: 3.75rem 2.6875rem; padding-inline: 0 3.4375rem; border-block-end: 1px solid var(--c-border); } @media (max-width: 767.98px) { .home-omoi__block { padding-block: 2.5rem 1.25rem; } } .home-omoi__head { display: grid; grid-template-columns: 14rem 1fr; align-items: start; gap: 0.75rem; margin-bottom: 2.1875rem; } @media (max-width: 767.98px) { .home-omoi__head { grid-template-columns: 1fr; gap: 0.25rem; margin-bottom: 1.25rem; } } .home-omoi__title { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 900; font-style: normal; font-size: 2rem; line-height: 1.0625; letter-spacing: 0.075em; width: max-content; } @media (max-width: 767.98px) { .home-omoi__title { font-size: 1.5rem; } } .home-omoi__sub { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; margin-top: 0.5rem; font-size: 1rem; line-height: 2.125; width: max-content; } @media (max-width: 767.98px) { .home-omoi__sub { font-size: 0.875rem; } } .home-omoi__body { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; width: 79.25rem; max-width: 100%; min-height: 2.4375rem; font-size: 1.25rem; line-height: 1.7; } @media (max-width: 767.98px) { .home-omoi__body { width: 100%; font-size: 1rem; } } .home-omoi__plus { position: absolute; inset-block-end: 1.875rem; inset-inline-end: 0; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; } @media (max-width: 767.98px) { .home-omoi__plus { width: 1rem; height: 1rem; } } .home-omoi__plus::before, .home-omoi__plus::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; background-color: var(--c-text); translate: -50% -50%; } .home-omoi__plus::before { width: 1.5rem; height: 2px; } @media (max-width: 767.98px) { .home-omoi__plus::before { width: 1rem; } } .home-omoi__plus::after { width: 2px; height: 1.5rem; } @media (max-width: 767.98px) { .home-omoi__plus::after { height: 1rem; } } .home-omoi__closing { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased; width: 56.8125rem; max-width: 100%; margin: 7.8125rem auto 0; margin-inline-start: calc((100% - 56.8125rem) / 2 - 0.03125rem); margin-inline-end: auto; font-size: 1.25rem; line-height: 1.7; text-align: center; } @media (max-width: 767.98px) { .home-omoi__closing { width: 100%; margin-top: 5rem; margin-inline: auto; font-size: 1rem; } } } @layer components { .home-kakawaru__content { display: grid; grid-template-columns: 1fr minmax(0, 33.5625rem); gap: 1.5rem; } @media (max-width: 767.98px) { .home-kakawaru__content { grid-template-columns: 1fr; gap: 1.5rem; } } .home-kakawaru__images { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .home-kakawaru__imagesLink { display: block; width: 100%; background-color: var(--c-gray); } } @layer components { .home-tsukuru__top, .home-tsukuru__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1.875rem; } @media (max-width: 767.98px) { .home-tsukuru__top, .home-tsukuru__bottom { grid-template-columns: 1fr; } } .home-tsukuru__mainImg, .home-tsukuru__photoImg { display: block; width: 100%; height: 100%; object-fit: cover; } .home-tsukuru__photoImg { background-color: var(--c-placeholder); } .home-tsukuru__mainImg { aspect-ratio: 615/425; } .home-tsukuru__intro { position: relative; display: flex; flex-direction: column; align-items: flex-start; } @media (max-width: 767.98px) { .home-tsukuru__intro { align-items: center; text-align: center; } } .home-tsukuru__introTitle { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; margin-top: -0.25rem; margin-bottom: 2.5rem; font-size: 2.5rem; line-height: 0.85; letter-spacing: 0.1rem; } @media (max-width: 767.98px) { .home-tsukuru__introTitle { margin-top: 0; margin-bottom: 1.25rem; font-size: 1.5rem; } } .home-tsukuru__introText { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; font-size: 1.25rem; line-height: 1.7; } @media (max-width: 767.98px) { .home-tsukuru__introText { font-size: 1rem; } } .home-tsukuru__plus { position: absolute; width: 0.875rem; height: 0.875rem; inset-block-end: 2.1875rem; inset-inline-end: 4.0625rem; padding: 0; border: 0; background: none; cursor: pointer; } .home-tsukuru__plus::before, .home-tsukuru__plus::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; background-color: var(--c-text); translate: -50% -50%; } .home-tsukuru__plus::before { width: 0.875rem; height: 2px; } .home-tsukuru__plus::after { width: 2px; height: 0.875rem; } @media (max-width: 767.98px) { .home-tsukuru__plus--intro { position: relative; margin-block-start: 1.25rem; inset-block-end: 0; inset-inline-end: auto; } } .home-tsukuru__bottom { margin-top: 7.75rem; } @media (max-width: 767.98px) { .home-tsukuru__bottom { margin-top: 5.1875rem; } } .home-tsukuru__content { margin-top: -0.4375rem; } @media (max-width: 767.98px) { .home-tsukuru__content { margin-top: 0; } } .home-tsukuru__label { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; margin-bottom: 3.5625rem; color: var(--c-text); font-size: 2rem; line-height: 1.0625; } @media (max-width: 767.98px) { .home-tsukuru__label { font-size: 1.5rem; } } .home-tsukuru__statement { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; margin-inline-start: 2.625rem; margin-bottom: 3.75rem; color: var(--c-text); font-size: 2.5rem; line-height: 1.475; letter-spacing: 0.1rem; } @media (max-width: 767.98px) { .home-tsukuru__statement { margin-inline-start: 0; margin-bottom: 2.5rem; font-size: 2.25rem; } } .home-tsukuru__principles { margin-inline-start: 2.1875rem; } @media (max-width: 767.98px) { .home-tsukuru__principles { margin-inline-start: 0; } } .home-tsukuru__principle { position: relative; padding-block: 2.5rem 1.8125rem; border-block-end: 1px solid var(--c-border); } @media (max-width: 767.98px) { .home-tsukuru__principle { padding-block: 1.875rem 1.25rem; } } .home-tsukuru__principle:first-child { padding-block-start: 0; } .home-tsukuru__principleHead { display: grid; grid-template-columns: 8.5625rem 1fr; align-items: start; gap: 1.875rem; margin-bottom: 1.3125rem; color: var(--c-text); } @media (max-width: 767.98px) { .home-tsukuru__principleHead { grid-template-columns: 1fr; gap: 0; margin-bottom: 1.25rem; } } .home-tsukuru__principleTitle { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; font-size: 2rem; line-height: 1.0625; } @media (max-width: 767.98px) { .home-tsukuru__principleTitle { font-size: 1.5rem; } } .home-tsukuru__principleSub { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; margin-top: 0.4375rem; font-size: 1rem; line-height: 2.125; } @media (max-width: 767.98px) { .home-tsukuru__principleSub { font-size: 0.875rem; } } .home-tsukuru__principleBody { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; color: var(--c-text); font-size: 1.25rem; line-height: 1.7; } @media (max-width: 767.98px) { .home-tsukuru__principleBody { font-size: 1rem; } } .home-tsukuru__principle .home-tsukuru__plus { inset-inline-end: 0.25rem; } .home-tsukuru__photos { display: grid; align-content: start; gap: 1.25rem; list-style: none; } @media (max-width: 767.98px) { .home-tsukuru__photos { margin-top: 2.5rem; grid-template-columns: 1fr; gap: 0.625rem; } } .home-tsukuru__photo { overflow: hidden; aspect-ratio: 615/350; background-color: var(--c-bg-light); } } @layer components { @media (max-width: 767.98px) { .home-miru .home-miru__sectionHead { flex-direction: row; align-items: center; } } .home-miru__titleSub { font-size: 2.5rem; line-height: 0.85; } @media (max-width: 767.98px) { .home-miru__titleSub { font-size: 1.5rem; letter-spacing: 0.4em; } .home-miru__titleSub--small { font-size: 1rem; } } .home-miru__logo { position: relative; inset-inline-start: 0.5rem; display: block; width: 14.875rem; max-width: 100%; height: auto; margin-inline: auto; } @media (max-width: 767.98px) { .home-miru__logo { width: 10rem; margin-top: 3.75rem; inset-inline-start: 0; } } .home-miru__tagline { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; margin-top: 5.125rem; color: var(--c-text); font-size: 3.125rem; line-height: 1.18; letter-spacing: 0.125rem; text-align: center; } @media (max-width: 767.98px) { .home-miru__tagline { margin-top: 3.75rem; font-size: 1.375rem; } } .home-miru__body { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-top: 2rem; color: var(--c-text); font-size: 1.25rem; line-height: 2.25; text-align: center; } @media (max-width: 767.98px) { .home-miru__body { margin-top: 1.875rem; font-size: 1rem; } } .home-miru__modalLinks { position: relative; inset-inline-start: -0.28125rem; display: flex; justify-content: center; align-items: center; gap: 3.6875rem; margin-top: 4.4375rem; } @media (max-width: 767.98px) { .home-miru__modalLinks { margin-top: 3.125rem; } } .home-miru__modalLink { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0; border: 0; background: none; color: var(--c-text); cursor: pointer; } .home-miru__plus { position: relative; width: 1.125rem; height: 1.125rem; flex: 0 0 auto; } @media (max-width: 767.98px) { .home-miru__plus { width: 0.875rem; height: 0.875rem; } } .home-miru__plus::before, .home-miru__plus::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; background-color: var(--c-text); translate: -50% -50%; } .home-miru__plus::before { width: 1.125rem; height: 2px; } @media (max-width: 767.98px) { .home-miru__plus::before { width: 0.875rem; height: 2px; } } .home-miru__plus::after { width: 2px; height: 1.125rem; } @media (max-width: 767.98px) { .home-miru__plus::after { width: 2px; height: 0.875rem; } } .home-miru__modalLabel { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; font-size: 1rem; line-height: 1; } .home-miru__program { position: relative; inset-inline-start: -0.1875rem; inset-block-start: 0.125rem; display: flex; flex-direction: column; gap: 0.4375rem; max-width: 43.75rem; margin: 4.625rem auto 0; padding: 1.125rem 1.9375rem; border: 4px solid var(--c-text); background-color: var(--c-white); text-decoration: none; } @media (max-width: 767.98px) { .home-miru__program { margin-top: 3.125rem; padding: 1.25rem 1.25rem 0.9375rem; } } .home-miru__programTitle { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 700; font-style: normal; font-size: 1.5rem; line-height: 1; letter-spacing: 0.06rem; } @media (max-width: 767.98px) { .home-miru__programTitle { font-size: 1.125rem; } } .home-miru__programBottom { display: flex; flex-direction: column; align-items: flex-start; } .home-miru__programSub { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 500; font-style: normal; font-size: 0.875rem; line-height: 2.4285714286; letter-spacing: 0.035rem; } @media (max-width: 767.98px) { .home-miru__programSub { font-size: 0.75rem; } } .home-miru__programLine { display: block; height: 2px; background-color: var(--c-text); } @media (max-width: 767.98px) { .home-miru__programLine { display: none; } } .home-miru__programCta { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 700; font-style: normal; position: relative; inset-inline-start: 0.2rem; align-self: flex-end; font-size: 0.875rem; line-height: 2.4285714286; letter-spacing: 0.035rem; } @media (max-width: 767.98px) { .home-miru__programCta { font-size: 0.75rem; } } .home-miru__programArrow { font-size: 0.625rem; } @media (max-width: 767.98px) { .home-miru__programArrow { font-size: 0.5rem; } } .home-miru__ticket { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 500; font-style: normal; position: relative; inset-block-start: 0.0625rem; display: flex; align-items: center; max-width: 28.4375rem; min-height: 3.5625rem; margin: 3.125rem auto 0; padding-inline: 1.9375rem; background-color: var(--c-text); color: var(--c-white); font-size: 1rem; line-height: 1; text-decoration: none; } @media (max-width: 767.98px) { .home-miru__ticket { min-height: 2.5rem; margin-top: 2.5rem; padding-inline: 1.25rem; font-size: 0.875rem; } } .home-miru__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; margin-top: 4.5625rem; list-style: none; } @media (max-width: 767.98px) { .home-miru__photos { grid-template-columns: 1fr; } } .home-miru__photo { overflow: hidden; aspect-ratio: 534/240; background-color: var(--c-bg); } .home-miru__photoImg { display: block; width: 100%; height: 100%; object-fit: cover; } } @layer components { .home-tomaru { padding-block-end: 6.25rem; } @media (max-width: 767.98px) { .home-tomaru { padding-block-end: 5rem; } } .home-tomaru__grid { display: grid; grid-template-columns: 1fr minmax(0, 33.5625rem); gap: 1.875rem; align-items: start; margin-inline-end: 0.4375rem; } @media (max-width: 767.98px) { .home-tomaru__grid { grid-template-columns: 1fr; gap: 1.25rem; margin-inline-end: 0; } } .home-tomaru__text { font-size: 1.25rem; line-height: 2.25; } @media (max-width: 767.98px) { .home-tomaru__text { font-size: 1rem; } } .home-tomaru__ticket { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; width: min(100%, 28.4375rem); min-height: 3.625rem; margin-top: 2.5625rem; padding-inline: 1.5625rem 0.875rem; background-color: var(--c-text); color: var(--c-white); font-size: 1rem; line-height: 1; text-decoration: none; } @media (max-width: 767.98px) { .home-tomaru__ticket { min-height: 2.5rem; margin-top: 1.25rem; padding-inline: 0.625rem 1.25rem; font-size: 0.875rem; } } .home-tomaru__plus { position: relative; display: block; width: 1.5rem; height: 1.5rem; } @media (max-width: 767.98px) { .home-tomaru__plus { width: 0.875rem; height: 0.875rem; } } .home-tomaru__plus::before, .home-tomaru__plus::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; background-color: var(--c-white); translate: -50% -50%; } .home-tomaru__plus::before { width: 0.875rem; height: 1px; } @media (max-width: 767.98px) { .home-tomaru__plus::before { width: 0.625rem; height: 1px; } } .home-tomaru__plus::after { width: 1px; height: 0.875rem; } @media (max-width: 767.98px) { .home-tomaru__plus::after { width: 1px; height: 0.625rem; } } .home-tomaru__images { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .home-tomaru__image { display: block; width: 100%; aspect-ratio: 1/1; } } @layer components { .home-basho { padding-block: 7.1875rem 7.5rem; } @media (max-width: 767.98px) { .home-basho { padding-block: 4.375rem 5rem; } } .home-basho__bldg, .home-basho__house { display: grid; align-items: start; } .home-basho__bldg { grid-template-columns: 30.5295950156% 69.4704049844%; column-gap: 0.9375rem; width: 100%; max-width: 61.125rem; margin-top: 5.9375rem; margin-inline: auto; } @media (max-width: 767.98px) { .home-basho__bldg { grid-template-columns: 1fr; row-gap: 1.875rem; margin-top: 3.75rem; } } .home-basho__house { grid-template-columns: 38.5826771654% 1fr; gap: 3.125rem 2.5rem; width: 100%; max-width: 56.3125rem; margin-top: 8.5rem; margin-inline: auto; } @media (max-width: 767.98px) { .home-basho__house { grid-template-columns: 1fr; row-gap: 1.875rem; margin-top: 3.9375rem; } } .home-basho__info { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; } .home-basho__info--bldg { padding-top: 5.25rem; } @media (max-width: 767.98px) { .home-basho__info--bldg { padding-top: 0; } } .home-basho__logo { display: block; width: 14rem; height: auto; margin-left: -0.1875rem; margin-bottom: 2.75rem; } @media (max-width: 767.98px) { .home-basho__logo { margin: 0 auto 2.5rem; } } .home-basho__summary { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; font-size: 1rem; line-height: 2.125; } @media (max-width: 767.98px) { .home-basho__summary { font-size: 0.875rem; text-align: center; } } .home-basho__floors { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-top: 2.4375rem; font-size: 1.25rem; line-height: 2; } @media (max-width: 767.98px) { .home-basho__floors { font-size: 1rem; text-align: center; } } .home-basho__address { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; margin-top: 2.625rem; font-size: 1rem; line-height: 2.125; } @media (max-width: 767.98px) { .home-basho__address { font-size: 0.875rem; text-align: center; } } .home-basho__link { color: var(--c-text); text-decoration: underline; text-underline-offset: 0.1875rem; } .home-basho__buildingImg { display: block; width: 100%; aspect-ratio: 669/892; object-fit: cover; mix-blend-mode: multiply; } .home-basho__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.125rem 3.75rem; margin-top: -1.3125rem; } @media (max-width: 767.98px) { .home-basho__gallery { grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 0; } } .home-basho__gallery--noie { max-width: 56.25rem; margin-block-start: 3.125rem; margin-inline: auto; } @media (max-width: 767.98px) { .home-basho__gallery--noie { margin-top: 1.875rem; } } .home-basho__photo { aspect-ratio: 380/255; overflow: hidden; background-color: var(--c-bg-light); } .home-basho__photoImg { display: block; width: 100%; height: 100%; background-color: var(--c-placeholder); object-fit: cover; } .home-basho__info--house { padding-top: 0.6875rem; } .home-basho__info--house .home-basho__summary { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; } .home-basho__info--house .home-basho__summary + .home-basho__summary { margin-top: 1.875rem; } @media (max-width: 767.98px) { .home-basho__info--house .home-basho__summary + .home-basho__summary { margin-top: 1.25rem; } } .home-basho__info--house .home-basho__floors { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; margin-top: 2.5rem; } @media (max-width: 767.98px) { .home-basho__info--house .home-basho__floors { margin-top: 1.25rem; } } .home-basho__info--house .home-basho__address { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; position: relative; inset-block-start: 0.125rem; margin-top: 2.4375rem; } @media (max-width: 767.98px) { .home-basho__info--house .home-basho__address { margin-top: 1.25rem; } } .home-basho__closing { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-top: 4.5625rem; font-size: 1.25rem; line-height: 1.7; text-align: center; } @media (max-width: 767.98px) { .home-basho__closing { margin-top: 2.5rem; font-size: 1rem; } } .home-basho__houseImg--illust { mix-blend-mode: multiply; } } @layer components {} @layer components { .program { padding-block-end: 6.25rem; } @media (max-width: 767.98px) { .program { padding-block-end: 3.125rem; } } .program-mv { width: 100%; height: 25rem; background-color: var(--c-gray); } @media (max-width: 767.98px) { .program-mv { height: 12.5rem; } } .program-mv__image { width: 100%; height: 100%; } .program-mv__imageImg { width: 100%; height: 100%; object-fit: cover; } .program-hero__title { font-size: 2rem; line-height: 1.5; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-hero__title { font-size: 1.25rem; } } .program-hero__subtitle { margin-block-start: 3.4375rem; font-size: 1.5rem; line-height: 2; letter-spacing: 0.05em; font-weight: 500; } @media (max-width: 767.98px) { .program-hero__subtitle { margin-block-start: 1.875rem; font-size: 1rem; } } .program-hero__tagline { margin-block-start: 2.5rem; font-size: 1.5rem; line-height: 1.5; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-hero__tagline { font-size: 0.875rem; } } .program-hero__category { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 2.5rem; font-size: 1.125rem; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-hero__category { font-size: 0.875rem; } } .program-hero__text { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 2.5rem; font-size: 1.125rem; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-hero__text { font-size: 0.875rem; } } .program-section__inner { padding-block: 3.75rem 6.25rem; border-bottom: 1px solid var(--c-text); } @media (max-width: 767.98px) { .program-section__inner { padding-block: 1.875rem 3.125rem; } } .program-section__inner--hero { padding-block-start: 0; } .program-section__heading { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 500; font-style: normal; margin-block-end: 5rem; font-size: 1.5rem; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-section__heading { margin-block-end: 2.5rem; font-size: 1.125rem; } } .program-section__title { margin-block-start: 3.75rem; font-size: 2.5rem; line-height: 1.5; letter-spacing: 0.05em; font-weight: 500; } @media (max-width: 767.98px) { .program-section__title { margin-block-start: 1.875rem; font-size: 1.25rem; } } .program-section__subtitle { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 700; font-style: normal; margin-block-start: 3.125rem; font-size: 2rem; line-height: 1.5; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-section__subtitle { margin-block-start: 1.875rem; font-size: 1.125rem; } } .program-section__note { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 3.125rem; margin-block-end: -1.25rem; font-size: 1.125rem; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-section__note { margin-block-start: 1.875rem; font-size: 1rem; } } .program-section__description { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 3.75rem; font-size: 1.5rem; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-section__description { margin-block-start: 1.875rem; font-size: 1.125rem; } } .program-section__detail { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 2.5rem; font-size: 1.125rem; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-section__detail { margin-block-start: 1.875rem; font-size: 0.875rem; } } .program-section__image { width: 100%; max-width: 37.5rem; height: auto; margin-block: 1.25rem; } @media (max-width: 767.98px) { .program-section__image { max-width: 18.75rem; } } .program-section__image--medium { max-width: 25rem; } @media (max-width: 767.98px) { .program-section__image--medium { max-width: 9.375rem; } } .program-section__image--small { max-width: 18.75rem; } @media (max-width: 767.98px) { .program-section__image--small { max-width: 7.5rem; } } .program-section__figure .program-section__image { margin-block-end: 0; } .program-section__figure--2col { display: grid; grid-template-columns: repeat(2, 1fr); align-items: end; gap: 0.625rem; } .program-section__figure--2col .program-section__figureCaption { grid-column: span 2; } .program-section__caption { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; display: block; margin-block: -0.625rem 1.25rem; font-size: 0.875rem; line-height: 2; letter-spacing: 0.05em; } .program-list { padding-block: 5rem 7.5rem; } @media (max-width: 767.98px) { .program-list { padding-block: 3.125rem 5rem; } } .program-list__heading { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; margin-block-end: 3rem; font-size: 1.25rem; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-list__heading { font-size: 1rem; } } .program-list__groupTitle { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; font-size: 1.5rem; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-list__groupTitle { font-size: 1.125rem; } } .program-list__groupSub { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 0.75rem; font-size: 1rem; line-height: 1.75; letter-spacing: 0.05em; } .program-list__groupMeta { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 0.5rem; font-size: 0.875rem; line-height: 1.8571428571; letter-spacing: 0.05em; } .program-list__concept { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block: 1.25rem 2.5rem; font-size: 1.125rem; line-height: 1.7777777778; letter-spacing: 0.075em; } @media (max-width: 767.98px) { .program-list__concept { margin-block: 1rem 1.75rem; font-size: 0.875rem; } } .program-list__item { margin-block-start: 3.75rem; } @media (max-width: 767.98px) { .program-list__item { margin-block-start: 1.875rem; } } .program-list__head { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.25rem; } @media (max-width: 767.98px) { .program-list__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; margin-block-end: 1.25rem; } } .program-list__no { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; font-size: 1.5rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-list__no { font-size: 1.125rem; } } .program-list__detail--button { display: inline-block; font-size: 0.875rem; line-height: 1.5714285714; letter-spacing: 0.05em; border-bottom: 1px solid var(--c-text); cursor: pointer; } @media (max-width: 767.98px) { .program-list__detail--button { font-size: 0.75rem; } } .program-list__detail--button-tri { font-size: 0.75rem; line-height: 1.8333333333; } @media (max-width: 767.98px) { .program-list__detail--button-tri { font-size: 0.625rem; } } .program-list__meta { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 1.25rem; font-size: 1.125rem; line-height: 1.7777777778; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .program-list__meta { margin-block-start: 0.625rem; font-size: 1rem; } } .program-list__divider { margin-block: 3rem; border: 0; border-top: 1px solid var(--c-border); } .program-modal__imageContainer { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 0.3125rem; margin-block: 1.25rem; } @media (max-width: 767.98px) { .program-modal__imageContainer { grid-template-columns: repeat(2, 1fr); margin-block: 0.625rem; } } .program-modal__imageContainer:has(.program-section__figure--2col) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 767.98px) { .program-modal__imageContainer:has(.program-section__figure--2col) { grid-template-columns: 1fr; } } } @layer components { .gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.125rem; } @media (max-width: 767.98px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 0.0625rem; } } @media (max-width: 575.98px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } .gallery-grid__item { display: block; aspect-ratio: 1/1; overflow: hidden; background-color: var(--c-bg-light); cursor: pointer; } .gallery-grid__img { width: 100%; height: 100%; object-fit: cover; } .gallery-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.25rem; background-color: var(--c-overlay); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .gallery-modal.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } .gallery-modal__stage { display: flex; align-items: center; justify-content: center; max-width: min(90dvw, 87.5rem); max-height: 90dvh; } .gallery-modal__img { max-width: 100%; max-height: 90dvh; object-fit: contain; transition: opacity 0.25s ease; } .gallery-modal__img.is-switching { opacity: 0; } .gallery-modal__nav { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background-color: var(--c-white); color: var(--c-text); cursor: pointer; } @media (max-width: 575.98px) { .gallery-modal__nav { width: 2.5rem; height: 2.5rem; } } .gallery-modal__nav::before { content: ""; box-sizing: border-box; width: 0.75rem; height: 0.75rem; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; } .gallery-modal__nav--prev::before { transform: translateX(2px) rotate(-135deg); } .gallery-modal__nav--next::before { transform: translateX(-2px) rotate(45deg); } .gallery-modal__close { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--c-white); font-size: 2rem; line-height: 1; cursor: pointer; } } @layer components { .single-mv { display: none; width: 100%; aspect-ratio: 1490/400; background-color: var(--c-gray); } .single-mv__image { width: 100%; height: 100%; } .single-mv__imageImg { width: 100%; height: 100%; object-fit: cover; } .single-article { padding-block: 7.5rem 10rem; } @media (max-width: 767.98px) { .single-article { padding-block: 3.75rem 5rem; } } .single-article__date { font-family: Helvetica, "Noto Sans CJK JP", "Noto Sans JP", Arial, sans-serif; font-weight: 400; font-style: normal; display: block; color: var(--c-black); font-size: 0.875rem; line-height: 2.4285714286; } .single-article__title { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; margin-block-start: 2.1875rem; color: var(--c-black); font-size: 2.5rem; line-height: 1.4; letter-spacing: 0.1rem; } @media (max-width: 767.98px) { .single-article__title { margin-block-start: 1.25rem; font-size: 1.5rem; } } .single-article__eyecatch { margin-block-start: 6.9375rem; } @media (max-width: 767.98px) { .single-article__eyecatch { margin-block-start: 3.125rem; } } .single-article__eyecatchImg { display: block; width: 100%; height: auto; margin-block-start: 6.9375rem; } @media (max-width: 767.98px) { .single-article__eyecatchImg { margin-block-start: 3.125rem; } } .single-article__body { font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif; font-weight: 400; font-style: normal; margin-block-start: 4.4375rem; font-size: 1.125rem; line-height: 2; } @media (max-width: 767.98px) { .single-article__body { margin-block-start: 2.5rem; font-size: 1rem; } } .single-article__body :where(p) { margin-block: 0; } .single-article__body :where(p) + :where(p) { margin-block-start: 1em; } } @layer utilities { .u-hidden { display: none; } .u-visuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .u-fullBleed { width: 100vw; margin-inline: calc(50% - 50vw); } .u-noWrap { white-space: nowrap; } .fw-bold { font-weight: 700; } .u-d-none { display: none; } .u-d-xs-none { display: none; } @media (min-width: 576px) { .u-d-sm-none { display: none; } } @media (min-width: 768px) { .u-d-md-none { display: none; } } @media (min-width: 992px) { .u-d-lg-none { display: none; } } @media (min-width: 1200px) { .u-d-xl-none { display: none; } } @media (min-width: 1400px) { .u-d-xxl-none { display: none; } } .u-d-block { display: block; } .u-d-xs-block { display: block; } @media (min-width: 576px) { .u-d-sm-block { display: block; } } @media (min-width: 768px) { .u-d-md-block { display: block; } } @media (min-width: 992px) { .u-d-lg-block { display: block; } } @media (min-width: 1200px) { .u-d-xl-block { display: block; } } @media (min-width: 1400px) { .u-d-xxl-block { display: block; } } .u-d-inline { display: inline; } .u-d-xs-inline { display: inline; } @media (min-width: 576px) { .u-d-sm-inline { display: inline; } } @media (min-width: 768px) { .u-d-md-inline { display: inline; } } @media (min-width: 992px) { .u-d-lg-inline { display: inline; } } @media (min-width: 1200px) { .u-d-xl-inline { display: inline; } } @media (min-width: 1400px) { .u-d-xxl-inline { display: inline; } } .u-d-inline-block { display: inline-block; } .u-d-xs-inline-block { display: inline-block; } @media (min-width: 576px) { .u-d-sm-inline-block { display: inline-block; } } @media (min-width: 768px) { .u-d-md-inline-block { display: inline-block; } } @media (min-width: 992px) { .u-d-lg-inline-block { display: inline-block; } } @media (min-width: 1200px) { .u-d-xl-inline-block { display: inline-block; } } @media (min-width: 1400px) { .u-d-xxl-inline-block { display: inline-block; } } @media (prefers-reduced-motion: no-preference) { .js .anime { opacity: 0; transform: translateY(2rem); transition: opacity 0.6s ease, transform 0.6s ease; } .js .anime.animated { opacity: 1; transform: none; } .js .anime--fade { transform: none; } .js .anime[data-delay="1"] { transition-delay: 0.1s; } .js .anime[data-delay="2"] { transition-delay: 0.2s; } .js .anime[data-delay="3"] { transition-delay: 0.3s; } } } /*# sourceMappingURL=style.css.map */