/*!********************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/pages/css/common.scss ***! \********************************************************************************************************************************************************************************************************/ @import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Public+Sans:ital,wght@0,200;0,500;0,600;1,500&family=Inter:wght@400;500;600;700&display=swap); /*!************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/pages/css/common.scss (1) ***! \************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /*** The new CSS reset - version 1.8.3 (last updated 21.1.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio, sup, sub):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* ==========================================================================// // // [デフォルトスタイル] // // ========================================================================== */ html { scroll-behavior: smooth; } html.is-open { scroll-behavior: unset; } body { display: flex; flex-direction: column; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; /* Safari */ line-height: 1; font-size: 0.875rem; font-family: "Noto Sans JP", sans-serif; background: #fff; color: #000; } [lang=en] body { font-family: "Inter", sans-serif; } @media all and (min-width: 768px) { body { font-size: 1rem; } } body > * { flex-shrink: 0; } body.is-fixed { position: fixed; width: 100%; height: 100%; } li { list-style-type: none; } a, button { transition: opacity 0.2s; outline: none; cursor: pointer; } a { color: #333; text-decoration: none; } @media all and (min-width: 768px) { a[href^=tel] { pointer-events: none; cursor: default; } } img { vertical-align: top; } svg { display: inline-block; } table { width: 100%; border-spacing: 0; } [role=button], [type=button], [type=reset], [type=submit], button { cursor: pointer; } [disabled] { cursor: default; pointer-events: none; } [type=number] { width: auto; } [type=search] { appearance: textfield; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { appearance: none; } textarea { vertical-align: top; overflow: auto; resize: vertical; border-radius: 0; } optgroup { font-weight: 700; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: 0; padding: 0; } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring { outline: 1px dotted ButtonText; } button, input, select, textarea { background-color: transparent; border-style: none; color: inherit; } legend { border: none; color: inherit; display: table; max-width: 100%; white-space: normal; } ::-webkit-file-upload-button { appearance: button; font: inherit; } input, textarea, select { display: inline-block; width: 100%; padding: 0; border: none; background: #fff; } :placeholder-shown { color: #999; } ::placeholder { color: #999; } @media print { .lazyload { display: none !important; } } .l-wrapper { width: 100%; background-color: #f0f0f0; } @media all and (min-width: 768px) { .l-wrapper { min-width: 1366px; } } .TOP .l-wrapper, .TOP_en .l-wrapper { background-color: #fafafa; } @media all and (min-width: 768px) { .l-main { width: 100%; min-width: 1366px; overflow: hidden; } } .l-header__logo { position: fixed; top: 5.3333333333vw; left: 5.6vw; width: 10.6666666667vw; z-index: 10; } @media all and (min-width: 768px) { .l-header__logo { top: 20px; left: 29px; width: 43px; } .l-header__logo a { display: block; background: url("/assets/images/logo/logo_hover.svg") no-repeat center/contain; } .l-header__logo a:hover::after { opacity: 1; } .l-header__logo a:hover img { opacity: 0; } } .is-in .l-header__logo { filter: invert(1); } .l-header__logo img { width: 100%; height: auto; opacity: 1; transition: opacity 0.3s; } .l-header__button { position: fixed; top: 5.3333333333vw; right: 5.3333333333vw; width: 9.6vw; height: 9.3333333333vw; z-index: 10; } @media all and (min-width: 768px) { .l-header__button { top: 14px; right: 15px; width: 44px; height: 43px; overflow: hidden; } } @media all and (min-width: 768px) { .l-header__button::after { position: absolute; content: ""; top: 100%; left: 0; width: 100%; height: 100%; background: url("/assets/images/btn/btn_menu_l_hover.svg") no-repeat center/contain; } } @media all and (min-width: 768px) { .l-header__button:hover::after { top: 0; } .l-header__button:hover picture { display: none; } } .is-in .l-header__button { filter: invert(1); } .l-header__button img { width: 100%; height: auto; } .l-header__reserve { position: fixed; bottom: 0.8vw; right: 1.7333333333vw; width: 32.8vw; height: 32.8vw; z-index: 11; transition: 0.3s; } @media all and (min-width: 768px) { .l-header__reserve { bottom: 66px; right: 17.5px; width: 156px; height: 156px; background: url("/assets/images/btn/btn_reserve_hover.svg") no-repeat center/contain; } [lang=en] .l-header__reserve { background: url("/assets/images/btn/btn_reserve_en_hover.svg") no-repeat center/contain; } } @media all and (min-width: 768px) { .l-header__reserve:hover img { opacity: 0; } } .l-header__reserve img { width: 100%; height: auto; transition: opacity 0.3s; } .l-header__reserve.is-hidden { opacity: 0; pointer-events: none; } .l-header__visitor { position: fixed; bottom: 0; left: 5.3333333333vw; width: 26.6666666667vw; height: 10.2213333333vw; z-index: 11; transition: 0.3s; } @media all and (min-width: 768px) { .l-header__visitor { left: auto; right: 35px; width: 120px; height: 46px; background: url("/assets/images/btn/btn_visitor_hover.svg") no-repeat center/contain; } [lang=en] .l-header__visitor { background: url("/assets/images/btn/btn_visitor_en_hover.svg") no-repeat center/contain; } } @media all and (min-width: 768px) { .l-header__visitor:hover img { opacity: 0; } } .l-header__visitor img { width: 100%; height: auto; transition: opacity 0.3s; } .l-header__visitor.is-hidden { opacity: 0; pointer-events: none; } .l-header__language { position: fixed; top: 90px; right: 23px; display: block; width: 30px; height: 68px; z-index: 10; background: url("/assets/images/btn/btn_lang_ja_hover.svg") no-repeat top left; background-size: 100% auto; } [lang=en] .l-header__language { background: url("/assets/images/btn/btn_lang_en_hover.svg") no-repeat top left; } @media all and (max-width: 767px) { .l-header__language { display: none; } } .l-header__language img { width: 100%; height: auto; } .l-header__language:hover img { opacity: 0; } .l-header__nav { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #555; z-index: 101; opacity: 0; transition: opacity 0.3s; } .l-header__nav.is-active { opacity: 1; } .p-header-nav { padding: 5.3333333333vw; height: 100%; } @media all and (max-width: 767px) { .p-header-nav { display: flex; flex-direction: column; overflow-y: scroll; height: calc(var(--vh, 1vh) * 100); height: 100dvh; } } @media all and (min-width: 768px) { .p-header-nav { display: grid; place-items: center; color: #fff; } } @media all and (max-width: 767px) { .p-header-nav__header { position: relative; margin-bottom: 13.6533333333vw; } } @media all and (min-width: 768px) { .p-header-nav__header { position: fixed; } } @media all and (max-width: 767px) { .p-header-nav__logo { width: 11.5013333333vw; margin-left: 0.2666666667vw; } } @media all and (min-width: 768px) { .p-header-nav__logo { position: fixed; top: 20px; left: 29px; width: 43.13px; } } .p-header-nav__logo img { width: 100%; height: auto; } .p-header-nav__language { position: absolute; top: 0; right: 13.3333333333vw; display: block; width: 18.1333333333vw; height: 8vw; } @media all and (min-width: 768px) { .p-header-nav__language { position: fixed; top: 90px; right: 23px; width: 30px; height: 68px; background: url("/assets/images/btn/btn_lang_ja_hover.svg") no-repeat top left; background-size: 100% auto; } [lang=en] .p-header-nav__language { background: url("/assets/images/btn/btn_lang_en_hover.svg") no-repeat top left; } } .p-header-nav__language img { width: 100%; height: auto; } @media all and (min-width: 768px) { .p-header-nav__language:hover img { opacity: 0; } } .p-header-nav__close { position: absolute; top: 0; right: 0; width: 8vw; height: 8vw; background: url("/assets/images/btn/btn_close_w.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-header-nav__close { position: fixed; top: 20px; right: 22px; width: 30px; height: 30px; } } .p-header-nav__inner { display: grid; } @media all and (max-width: 767px) { .p-header-nav__inner { flex-grow: 1; grid-template-columns: 1fr 40vw; grid-template-rows: auto auto auto 1fr; grid-template-areas: "top facilities" "access facilities" "links contact" "links copyright"; } [lang=en] .p-header-nav__inner { grid-template-areas: "top facilities" "access facilities" "access contact" "links copyright"; } } @media all and (min-width: 768px) { .p-header-nav__inner { width: 966px; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "top facilities contact" "top facilities access" "top facilities links"; } } .p-header-nav__top { grid-area: top; } @media all and (min-width: 768px) { .p-header-nav__top { margin-right: 67px; } } .p-header-nav__top li:not(:first-child) { margin-top: 4vw; } @media all and (min-width: 768px) { .p-header-nav__top li:not(:first-child) { margin-top: 19px; } } .p-header-nav__top a { display: block; height: 9.0666666667vw; overflow: hidden; text-indent: -100%; background-color: #fff; } @media all and (min-width: 768px) { .p-header-nav__top a { height: 56px; } } @media all and (min-width: 768px) { .p-header-nav__top a:hover { background-color: #ffbf86; } } .p-header-nav__top a.item00 { width: 17.0666666667vw; mask: url("/assets/images/menu/txt_top.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_top.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__top a.item00 { width: 105px; } } .p-header-nav__top a.item01 { width: 25.6vw; mask: url("/assets/images/menu/txt_news.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_news.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__top a.item01 { width: 159px; } } .p-header-nav__top a.item02 { width: 40.8vw; mask: url("/assets/images/menu/txt_concept.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_concept.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__top a.item02 { width: 252px; } } .p-header-nav__top a.item03 { width: 19.4666666667vw; mask: url("/assets/images/menu/txt_map.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_map.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__top a.item03 { width: 121px; } } .p-header-nav__top a.item04 { width: 44.5333333333vw; mask: url("/assets/images/menu/txt_activities.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_activities.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__top a.item04 { width: 276px; } } .p-header-nav__top a.item05 { width: 40.5333333333vw; mask: url("/assets/images/menu/txt_message.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_message.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__top a.item05 { width: 250px; } } .p-header-nav__top a.item06 { width: 38.9333333333vw; mask: url("/assets/images/menu/txt_project.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_project.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__top a.item06 { width: 240px; } } .p-header-nav__facilities { grid-area: facilities; } @media all and (max-width: 767px) { .p-header-nav__facilities { margin-top: 39.4666666667vw; } } @media all and (min-width: 768px) { .p-header-nav__facilities { width: 288px; margin-right: 80px; } } .p-header-nav__facilities p { height: 5.048vw; border-bottom: 0.4vw solid #fff; } @media all and (min-width: 768px) { .p-header-nav__facilities p { height: 30px; border-width: 2px; } } .p-header-nav__facilities p img { width: 17.4026666667vw; height: auto; } @media all and (min-width: 768px) { .p-header-nav__facilities p img { width: 98px; } } .p-header-nav__facilities ul { margin-top: 2.6666666667vw; } @media all and (min-width: 768px) { .p-header-nav__facilities ul { margin-top: 19px; } } @media all and (max-width: 767px) { .p-header-nav__facilities li { margin-right: -2.6666666667vw; } } .p-header-nav__facilities li:not(:first-child) { margin-top: 2.3466666667vw; } @media all and (min-width: 768px) { .p-header-nav__facilities li:not(:first-child) { margin-top: 9px; } } .p-header-nav__facilities li.item01 em, .p-header-nav__facilities li.item02 em, .p-header-nav__facilities li.item03 em, .p-header-nav__facilities li.item04 em { width: 7.4666666667vw; } @media all and (min-width: 768px) { .p-header-nav__facilities li.item01 em, .p-header-nav__facilities li.item02 em, .p-header-nav__facilities li.item03 em, .p-header-nav__facilities li.item04 em { width: 56px; } } .p-header-nav__facilities li.item01 em { mask: url("/assets/images/menu/txt_beta1.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_beta1.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-header-nav__facilities li.item02 em { mask: url("/assets/images/menu/txt_beta2.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_beta2.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-header-nav__facilities li.item03 em { mask: url("/assets/images/menu/txt_beta3.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_beta3.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-header-nav__facilities li.item04 em { mask: url("/assets/images/menu/txt_beta4.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_beta4.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-header-nav__facilities li.item05 em { width: 19.6533333333vw; mask: url("/assets/images/menu/txt_dome.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_dome.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__facilities li.item05 em { width: 150px; } } .p-header-nav__facilities li.item06 em { width: 20.4533333333vw; mask: url("/assets/images/menu/txt_studio.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_studio.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__facilities li.item06 em { width: 156px; } } .p-header-nav__facilities li.item07 em { width: 23.92vw; mask: url("/assets/images/menu/txt_pavilion.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_pavilion.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__facilities li.item07 em { width: 184px; } } .p-header-nav__facilities li.item07 span { letter-spacing: 0.05em; } .p-header-nav__facilities a { display: flex; align-items: flex-end; } .p-header-nav__facilities a em { display: block; height: 6.9333333333vw; margin-right: 1.52vw; overflow: hidden; text-indent: -100%; background-color: #fff; } @media all and (min-width: 768px) { .p-header-nav__facilities a em { height: 56px; margin-right: 15px; } } .p-header-nav__facilities a span { display: inline-block; padding-bottom: 0.8vw; color: #fff; font-size: 2.6666666667vw; font-weight: 500; line-height: 1.5; letter-spacing: 0.1em; } [lang=en] .p-header-nav__facilities a span { padding-bottom: 0.5333333333vw; letter-spacing: 0; } @media all and (min-width: 768px) { .p-header-nav__facilities a span { padding-bottom: 11px; font-size: 0.875rem; line-height: 1.4285714286; } [lang=en] .p-header-nav__facilities a span { padding-bottom: 12px; line-height: 1; } } @media all and (min-width: 768px) { .p-header-nav__facilities a:hover em { background-color: #88e8f0; } .p-header-nav__facilities a:hover span { color: #88e8f0; } } .p-header-nav__access { grid-area: access; } @media all and (max-width: 767px) { .p-header-nav__access { margin-top: 10.7466666667vw; } } @media all and (min-width: 768px) { .p-header-nav__access { margin-top: 59px; } [lang=en] .p-header-nav__access { margin-top: 41px; } } .p-header-nav__access > p img { width: 19vw; height: auto; } @media all and (min-width: 768px) { .p-header-nav__access > p img { width: 93.75px; } } .p-header-nav__access a { display: inline-block; margin-top: 2.08vw; color: #fff; font-size: 3.2vw; line-height: 1.5; } [lang=en] .p-header-nav__access a { letter-spacing: 0.01em; } @media all and (min-width: 768px) { .p-header-nav__access a { margin-top: 8.8px; font-size: 0.875rem; line-height: 1.4285714286; } } .p-header-nav__access a[target=_blank]::after { display: inline-block; content: ""; width: 2.6666666667vw; height: 2.6666666667vw; margin-left: 1.3333333333vw; background-color: #fff; mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; -webkit-mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__access a[target=_blank]::after { width: 11px; height: 11px; margin-left: 10px; } } @media all and (min-width: 768px) { .p-header-nav__access a:hover { color: #d1a8ff; } .p-header-nav__access a:hover::after { background-color: #d1a8ff; } } .p-header-nav__contact { grid-area: contact; } @media all and (max-width: 767px) { .p-header-nav__contact { margin: 13.0933333333vw 0; } [lang=en] .p-header-nav__contact { margin-bottom: 9.76vw; } } .p-header-nav__contact > p { height: 4.6346666667vw; border-bottom: 0.4vw solid #fff; } @media all and (min-width: 768px) { .p-header-nav__contact > p { height: 30px; border-width: 2px; } } .p-header-nav__contact > p img { width: 16.4186666667vw; height: auto; } @media all and (min-width: 768px) { .p-header-nav__contact > p img { width: 92.35px; } } .p-header-nav__contact .-sp { margin-top: 4.1066666667vw; } @media all and (min-width: 768px) { .p-header-nav__contact .-sp { display: none; } } .p-header-nav__contact .-sp li { font-size: 2.9333333333vw; line-height: 1.5454545455; } .p-header-nav__contact .-sp li a { display: flex; align-items: center; color: #ffabf9; } [lang=en] .p-header-nav__contact .-sp li a { display: inline; } .p-header-nav__contact .-sp li a[target=_blank]::after { display: inline-block; content: ""; width: 2.5333333333vw; height: 2.5333333333vw; margin-left: 1.3333333333vw; background-color: #ffabf9; mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; -webkit-mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-header-nav__contact .-sp li + li { margin-top: 2.08vw; } .p-header-nav__contact .-sp li + li a { color: #beff8a; } .p-header-nav__contact .-pc { margin-top: 24px; } [lang=en] .p-header-nav__contact .-pc { margin-top: 28px; } @media all and (max-width: 767px) { .p-header-nav__contact .-pc { display: none; } } .p-header-nav__contact .-pc > p { display: flex; flex-direction: column; } .p-header-nav__contact .-pc > p em { margin-bottom: 8px; display: block; color: #ffabf9; font-size: 0.75rem; font-weight: bold; line-height: 1.5; } [lang=en] .p-header-nav__contact .-pc > p em { margin-bottom: 11px; line-height: 1; } .p-header-nav__contact .-pc > p a { color: #f0f0f0; font-size: 0.875rem; font-weight: 500; line-height: 1.5; } [lang=en] .p-header-nav__contact .-pc > p a { line-height: 1.1428571429; } .p-header-nav__contact .-pc > p a[target=_blank]::after { display: inline-block; content: ""; width: 11px; height: 11px; margin-left: 10px; background-color: #f0f0f0; mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; -webkit-mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__contact .-pc > p a:hover { color: #ffabf9; } .p-header-nav__contact .-pc > p a:hover::after { background-color: #ffabf9; } } .p-header-nav__contact .-pc > p + p { margin-top: 24px; } [lang=en] .p-header-nav__contact .-pc > p + p { margin-top: 29px; } .p-header-nav__contact .-pc > p + p em { color: #beff8a; } [lang=en] .p-header-nav__contact .-pc > p + p em { margin-bottom: 13.5px; } .p-header-nav__contact .-pc > p + p span { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.5; } [lang=en] .p-header-nav__contact .-pc > p + p span { font-size: 0.75rem; } .p-header-nav__contact .-pc > p + p a { margin-top: 6px; font-size: 0.875rem; font-weight: 500; line-height: 1.4285714286; pointer-events: none; } [lang=en] .p-header-nav__contact .-pc > p + p a { margin-top: 4px; font-size: 1rem; line-height: 1.5; } [lang=en] .p-header-nav__contact .-pc > p + p a + a { margin-top: 0; } .p-header-nav__links { grid-area: links; align-self: end; } @media all and (max-width: 767px) { .p-header-nav__links { margin-top: 7.6533333333vw; } [lang=en] .p-header-nav__links { margin-top: 0; } } @media all and (min-width: 768px) { .p-header-nav__links { padding-bottom: 18px; } } [lang=en] .p-header-nav__text-link li { margin-right: -26.6666666667vw; } @media all and (min-width: 768px) { .p-header-nav__text-link li + li { margin-top: 11px; } } .p-header-nav__text-link a { display: inline-block; color: #fff; font-size: 2.6666666667vw; line-height: 1.5; } [lang=en] .p-header-nav__text-link a { letter-spacing: 0.01em; } @media all and (min-width: 768px) { .p-header-nav__text-link a { font-size: 0.875rem; line-height: 1.4285714286; } } .p-header-nav__text-link a[target=_blank]::after { display: inline-block; content: ""; width: 2.1333333333vw; height: 2.1333333333vw; margin-left: 1.3333333333vw; background-color: #fff; mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; -webkit-mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-header-nav__text-link a[target=_blank]::after { width: 11px; height: 11px; margin-left: 10px; } } @media all and (min-width: 768px) { .p-header-nav__text-link a:hover { color: #d1a8ff; } .p-header-nav__text-link a:hover::after { background-color: #d1a8ff; } } .p-header-nav__sns { display: flex; align-items: center; margin-top: 2.6666666667vw; } @media all and (min-width: 768px) { .p-header-nav__sns { margin-top: 23px; } } .p-header-nav__sns li:not(:first-child) { margin-left: 5.0666666667vw; } @media all and (min-width: 768px) { .p-header-nav__sns li:not(:first-child) { margin-left: 21.5px; } } .p-header-nav__sns li:first-child span { width: 5.8666666667vw; height: 5.8666666667vw; mask: url("/assets/images/btn/btn_facebook.svg") no-repeat center/contain; -webkit-mask: url("/assets/images/btn/btn_facebook.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-header-nav__sns li:first-child span { width: 28px; height: 28px; } } @media all and (min-width: 768px) { .p-header-nav__sns li:first-child a:hover span { background-color: #1877f2; } } .p-header-nav__sns li:nth-child(2) span { width: 5.7626666667vw; height: 4.8vw; mask: url("/assets/images/btn/btn_x.svg") no-repeat center/contain; -webkit-mask: url("/assets/images/btn/btn_x.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-header-nav__sns li:nth-child(2) span { width: 28px; height: 23px; } } @media all and (min-width: 768px) { .p-header-nav__sns li:nth-child(2) a:hover span { background-color: #000; } } .p-header-nav__sns li:last-child span { position: relative; width: 7.6186666667vw; background: url("/assets/images/btn/btn_youtube.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-header-nav__sns li:last-child span { width: 36px; } } .p-header-nav__sns li:last-child span::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: url("/assets/images/btn/btn_youtube_on.svg") no-repeat center/contain; opacity: 0; } @media all and (min-width: 768px) { .p-header-nav__sns li:last-child a:hover span { background: none; } .p-header-nav__sns li:last-child a:hover span::after { opacity: 1; } } .p-header-nav__sns span { display: block; height: 5.3333333333vw; background-color: #fff; text-indent: 100%; overflow: hidden; } @media all and (min-width: 768px) { .p-header-nav__sns span { height: 25px; } } .p-header-nav__copyright { color: #f0f0f0; font-size: 3.2vw; letter-spacing: 0.1em; text-align: right; } @media all and (max-width: 767px) { .p-header-nav__copyright { align-self: end; } } @media all and (min-width: 768px) { .p-header-nav__copyright { display: none; } } .l-footer { padding: 13.0666666667vw 5.3333333333vw 5.3333333333vw; background-color: #555555; color: #f0f0f0; } @media all and (min-width: 768px) { .l-footer { min-width: 1366px; padding: 48px 0 10px; } } @media all and (min-width: 768px) { .l-footer__inner { width: 1166px; margin-inline: auto; } } .l-footer__copyright { display: block; margin-top: 5.6vw; font-size: 3.2vw; font-weight: 500; line-height: 1.9166666667; letter-spacing: 0.1em; text-align: center; } @media all and (min-width: 768px) { .l-footer__copyright { margin-top: 44px; font-size: 0.75rem; } } .p-footer-nav { display: grid; } @media all and (max-width: 767px) { .p-footer-nav { grid-template-columns: 1fr 41.0666666667vw; grid-template-rows: auto auto auto auto; grid-template-areas: "top facilities" "top access" "contact contact" "links links"; } } @media all and (min-width: 768px) { .p-footer-nav { grid-template-columns: auto auto auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "top facilities contact access" "top facilities contact links"; } } .p-footer-nav__top { grid-area: top; } @media all and (min-width: 768px) { .p-footer-nav__top { display: flex; margin-right: 30px; } [lang=en] .p-footer-nav__top { margin-right: 70px; } } @media all and (max-width: 767px) { .p-footer-nav__top ul + ul { margin-top: 4.5333333333vw; } } @media all and (min-width: 768px) { .p-footer-nav__top ul + ul { margin-left: 30px; } } .p-footer-nav__top li:not(:first-child) { margin-top: 5.0666666667vw; } @media all and (min-width: 768px) { .p-footer-nav__top li:not(:first-child) { margin-top: 15px; } } .p-footer-nav__top a { display: block; height: 8vw; overflow: hidden; text-indent: -100%; background-color: #fff; } @media all and (min-width: 768px) { .p-footer-nav__top a { height: 27px; } } @media all and (min-width: 768px) { .p-footer-nav__top a:hover { background-color: #ffbf86; } } .p-footer-nav__top a.item00 { width: 14.9333333333vw; mask: url("/assets/images/menu/txt_top.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_top.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__top a.item00 { width: 50px; } } .p-footer-nav__top a.item01 { width: 22.6666666667vw; mask: url("/assets/images/menu/txt_news.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_news.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__top a.item01 { width: 76px; } } .p-footer-nav__top a.item02 { width: 36vw; mask: url("/assets/images/menu/txt_concept.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_concept.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__top a.item02 { width: 121px; } } .p-footer-nav__top a.item03 { width: 17.3333333333vw; mask: url("/assets/images/menu/txt_map.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_map.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__top a.item03 { width: 58px; } } .p-footer-nav__top a.item04 { width: 39.4666666667vw; mask: url("/assets/images/menu/txt_activities.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_activities.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__top a.item04 { width: 133px; } } .p-footer-nav__top a.item05 { width: 35.7333333333vw; mask: url("/assets/images/menu/txt_message.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_message.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__top a.item05 { width: 120px; } } .p-footer-nav__top a.item06 { width: 34.4vw; mask: url("/assets/images/menu/txt_project.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_project.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__top a.item06 { width: 116px; } } .p-footer-nav__facilities { grid-area: facilities; width: 41.0666666667vw; } @media all and (min-width: 768px) { .p-footer-nav__facilities { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "heading heading" "list01 list02"; width: 344px; margin-right: 36px; } [lang=en] .p-footer-nav__facilities { width: 280px; margin-right: 50px; } } .p-footer-nav__facilities p { height: 5.048vw; border-bottom: 0.4vw solid #fff; } @media all and (min-width: 768px) { .p-footer-nav__facilities p { grid-area: heading; height: 26px; border-width: 2px; } } .p-footer-nav__facilities p img { width: 17.4026666667vw; height: auto; } @media all and (min-width: 768px) { .p-footer-nav__facilities p img { width: 73.42px; } } @media all and (max-width: 767px) { .p-footer-nav__facilities p + ul { margin-top: 2.6666666667vw; } } @media all and (min-width: 768px) { .p-footer-nav__facilities ul { grid-area: list01; margin-top: 20px; } } @media all and (max-width: 767px) { .p-footer-nav__facilities ul + ul { margin-top: 2.3466666667vw; } } @media all and (min-width: 768px) { .p-footer-nav__facilities ul + ul { grid-area: list02; margin-left: 26px; } [lang=en] .p-footer-nav__facilities ul + ul { margin-left: 35px; } } @media all and (max-width: 767px) { .p-footer-nav__facilities li { margin-right: -2.6666666667vw; } } .p-footer-nav__facilities li:not(:first-child) { margin-top: 2.3466666667vw; } @media all and (min-width: 768px) { .p-footer-nav__facilities li:not(:first-child) { margin-top: 6px; } } .p-footer-nav__facilities li.item01 em, .p-footer-nav__facilities li.item02 em, .p-footer-nav__facilities li.item03 em, .p-footer-nav__facilities li.item04 em { width: 7.4666666667vw; } @media all and (min-width: 768px) { .p-footer-nav__facilities li.item01 em, .p-footer-nav__facilities li.item02 em, .p-footer-nav__facilities li.item03 em, .p-footer-nav__facilities li.item04 em { width: 29px; } } .p-footer-nav__facilities li.item01 em { mask: url("/assets/images/menu/txt_beta1.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_beta1.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-footer-nav__facilities li.item02 em { mask: url("/assets/images/menu/txt_beta2.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_beta2.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-footer-nav__facilities li.item03 em { mask: url("/assets/images/menu/txt_beta3.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_beta3.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-footer-nav__facilities li.item04 em { mask: url("/assets/images/menu/txt_beta4.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_beta4.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-footer-nav__facilities li.item05 em { width: 19.6533333333vw; mask: url("/assets/images/menu/txt_dome.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_dome.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__facilities li.item05 em { width: 76px; } } .p-footer-nav__facilities li.item06 em { width: 20.4533333333vw; mask: url("/assets/images/menu/txt_studio.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_studio.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__facilities li.item06 em { width: 79px; } } .p-footer-nav__facilities li.item07 em { width: 23.92vw; mask: url("/assets/images/menu/txt_pavilion.svg") no-repeat left top; -webkit-mask: url("/assets/images/menu/txt_pavilion.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { .p-footer-nav__facilities li.item07 em { width: 93px; } } .p-footer-nav__facilities a { display: flex; align-items: flex-end; } .p-footer-nav__facilities a em { display: block; height: 6.9333333333vw; margin-right: 1.52vw; overflow: hidden; text-indent: -100%; background-color: #fff; } @media all and (min-width: 768px) { .p-footer-nav__facilities a em { height: 27px; margin-right: 5px; } } .p-footer-nav__facilities a span { display: inline-block; padding-bottom: 0.8vw; color: #fff; font-size: 2.6666666667vw; font-weight: 500; line-height: 1.5; letter-spacing: 0.1em; } [lang=en] .p-footer-nav__facilities a span { padding-bottom: 1.3333333333vw; line-height: 1; letter-spacing: 0; } @media all and (min-width: 768px) { .p-footer-nav__facilities a span { padding-bottom: 3px; font-size: 0.6875rem; line-height: 1.5454545455; } [lang=en] .p-footer-nav__facilities a span { padding-bottom: 5px; line-height: 1; } } @media all and (min-width: 768px) { .p-footer-nav__facilities a:hover em { background-color: #88e8f0; } .p-footer-nav__facilities a:hover span { color: #88e8f0; } } .p-footer-nav__access { grid-area: access; } @media all and (max-width: 767px) { .p-footer-nav__access { margin: 12.48vw -5.3333333333vw 0 0; } [lang=en] .p-footer-nav__access { margin-top: 12vw; } } @media all and (min-width: 768px) { .p-footer-nav__access { width: 208px; } } .p-footer-nav__access > p { font-size: 1px; } .p-footer-nav__access > p img { width: 19vw; height: auto; } @media all and (min-width: 768px) { .p-footer-nav__access > p img { width: 71.25px; } } .p-footer-nav__access a { display: inline-block; margin-top: 2.08vw; color: #fff; font-size: 3.2vw; line-height: 1.5; } [lang=en] .p-footer-nav__access a { margin-top: 1.4666666667vw; letter-spacing: -0.03em; } @media all and (min-width: 768px) { .p-footer-nav__access a { margin-top: 7.8px; font-size: 0.75rem; } [lang=en] .p-footer-nav__access a { margin-top: 9.8px; letter-spacing: 0.01em; } } .p-footer-nav__access a[target=_blank]::after { display: inline-block; content: ""; width: 2.6666666667vw; height: 2.6666666667vw; margin-left: 1.3333333333vw; background-color: #fff; mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; -webkit-mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } [lang=en] .p-footer-nav__access a[target=_blank]::after { margin-left: 2.6666666667vw; } @media all and (min-width: 768px) { .p-footer-nav__access a[target=_blank]::after { width: 10px; height: 10px; margin-left: 5px; } [lang=en] .p-footer-nav__access a[target=_blank]::after { margin-left: 10px; } } @media all and (min-width: 768px) { .p-footer-nav__access a:hover { color: #d1a8ff; } .p-footer-nav__access a:hover::after { background-color: #d1a8ff; } } .p-footer-nav__contact { grid-area: contact; } @media all and (max-width: 767px) { .p-footer-nav__contact { margin-top: 3.3333333333vw; } [lang=en] .p-footer-nav__contact { margin-top: 4.6666666667vw; } } @media all and (min-width: 768px) { .p-footer-nav__contact { width: 225px; margin-right: 50px; } } .p-footer-nav__contact > p { height: 4.6346666667vw; border-bottom: 0.4vw solid #fff; } @media all and (max-width: 767px) { .p-footer-nav__contact > p { width: 42.6666666667vw; } [lang=en] .p-footer-nav__contact > p { width: auto; } } @media all and (min-width: 768px) { .p-footer-nav__contact > p { height: 26px; border-width: 2px; } } .p-footer-nav__contact > p img { width: 16.4186666667vw; height: auto; } @media all and (min-width: 768px) { .p-footer-nav__contact > p img { width: 69.26px; } } .p-footer-nav__contact .-sp { margin-top: 3.84vw; } @media all and (min-width: 768px) { .p-footer-nav__contact .-sp { display: none; } } .p-footer-nav__contact .-sp li { font-size: 3.2vw; line-height: 1.5; } [lang=en] .p-footer-nav__contact .-sp li { font-size: 3.7333333333vw; line-height: 1.1428571429; letter-spacing: -0.03em; } .p-footer-nav__contact .-sp li a { display: inline-flex; align-items: center; color: #ffabf9; } .p-footer-nav__contact .-sp li a[target=_blank]::after { display: inline-block; content: ""; width: 3.2vw; height: 3.2vw; margin-left: 1.3333333333vw; background-color: #ffabf9; mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; -webkit-mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } [lang=en] .p-footer-nav__contact .-sp li a[target=_blank]::after { margin-left: 5.7066666667vw; } .p-footer-nav__contact .-sp li + li { margin-top: 1.92vw; } [lang=en] .p-footer-nav__contact .-sp li + li { margin-top: 2.6666666667vw; } .p-footer-nav__contact .-sp li + li a { color: #beff8a; } .p-footer-nav__contact .-pc { margin-top: 24px; } [lang=en] .p-footer-nav__contact .-pc { margin-top: 29px; } @media all and (max-width: 767px) { .p-footer-nav__contact .-pc { display: none; } } .p-footer-nav__contact .-pc > p { display: flex; flex-direction: column; } .p-footer-nav__contact .-pc > p em { margin-bottom: 6px; display: block; color: #ffabf9; font-size: 0.75rem; font-weight: 300; line-height: 1.5; } [lang=en] .p-footer-nav__contact .-pc > p em { margin-bottom: 9px; line-height: 1; } .p-footer-nav__contact .-pc > p a { color: #f0f0f0; font-size: 0.75rem; font-weight: 500; line-height: 1.5; } .p-footer-nav__contact .-pc > p a[target=_blank]::after { display: inline-block; content: ""; width: 11px; height: 11px; margin-left: 5px; background-color: #f0f0f0; mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; -webkit-mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } @media all and (min-width: 768px) { [lang=en] .p-footer-nav__contact .-pc > p a[target=_blank]::after { margin-left: 10px; } } @media all and (min-width: 768px) { .p-footer-nav__contact .-pc > p a:hover { color: #ffabf9; } .p-footer-nav__contact .-pc > p a:hover::after { background-color: #ffabf9; } } .p-footer-nav__contact .-pc > p + p { margin-top: 21px; } [lang=en] .p-footer-nav__contact .-pc > p + p { margin-top: 26px; } .p-footer-nav__contact .-pc > p + p em { color: #beff8a; } .p-footer-nav__contact .-pc > p + p span { display: block; font-weight: 500; font-size: 0.75rem; font-weight: 500; line-height: 1.5; } [lang=en] .p-footer-nav__contact .-pc > p + p span { font-size: 0.625rem; line-height: 1.6; letter-spacing: 0.01em; } .p-footer-nav__contact .-pc > p + p a { margin-top: 4px; font-size: 0.9375rem; font-weight: 500; line-height: 1.6; pointer-events: none; } [lang=en] .p-footer-nav__contact .-pc > p + p a { line-height: 1.4; letter-spacing: -0.02em; } .p-footer-nav__links { grid-area: links; margin-top: 7.6533333333vw; } [lang=en] .p-footer-nav__links { margin-top: 8.64vw; } @media all and (min-width: 768px) { .p-footer-nav__links { margin-top: 65px; } [lang=en] .p-footer-nav__links { margin-top: 50px; } } [lang=en] .p-footer-nav__text-link li + li { margin-top: 0.8vw; } @media all and (min-width: 768px) { .p-footer-nav__text-link li + li { margin-top: 10px; } } .p-footer-nav__text-link a { display: inline-block; color: #fff; font-size: 2.6666666667vw; line-height: 1.5; } [lang=en] .p-footer-nav__text-link a { line-height: 1.2; letter-spacing: -0.03em; } @media all and (min-width: 768px) { .p-footer-nav__text-link a { font-size: 0.75rem; } [lang=en] .p-footer-nav__text-link a { line-height: 1.5; } } .p-footer-nav__text-link a[target=_blank]::after { display: inline-block; content: ""; width: 2.1333333333vw; height: 2.1333333333vw; margin-left: 1.3333333333vw; background-color: #fff; mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; -webkit-mask: url("/assets/images/ico/ico_blank.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } [lang=en] .p-footer-nav__text-link a[target=_blank]::after { margin-left: 2.6666666667vw; } @media all and (min-width: 768px) { .p-footer-nav__text-link a[target=_blank]::after { width: 10px; height: 10px; margin-left: 5px; } [lang=en] .p-footer-nav__text-link a[target=_blank]::after { margin-left: 10px; } } @media all and (min-width: 768px) { .p-footer-nav__text-link a:hover { color: #d1a8ff; } .p-footer-nav__text-link a:hover::after { background-color: #d1a8ff; } } .p-footer-nav__sns { display: flex; align-items: center; margin-top: 2.6666666667vw; } @media all and (min-width: 768px) { .p-footer-nav__sns { margin-top: 23px; } } .p-footer-nav__sns li:not(:first-child) { margin-left: 5.0666666667vw; } @media all and (min-width: 768px) { .p-footer-nav__sns li:not(:first-child) { margin-left: 19px; } } .p-footer-nav__sns li:first-child span { width: 5.8666666667vw; height: 5.8666666667vw; mask: url("/assets/images/btn/btn_facebook.svg") no-repeat center/contain; -webkit-mask: url("/assets/images/btn/btn_facebook.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-footer-nav__sns li:first-child span { width: 28px; height: 28px; } } @media all and (min-width: 768px) { .p-footer-nav__sns li:first-child a:hover span { background-color: #1877f2; } } .p-footer-nav__sns li:nth-child(2) span { width: 5.7626666667vw; height: 4.8vw; mask: url("/assets/images/btn/btn_x.svg") no-repeat center/contain; -webkit-mask: url("/assets/images/btn/btn_x.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-footer-nav__sns li:nth-child(2) span { width: 28px; height: 23px; } } @media all and (min-width: 768px) { .p-footer-nav__sns li:nth-child(2) a:hover span { background-color: #000; } } .p-footer-nav__sns li:last-child span { position: relative; width: 7.6186666667vw; background: url("/assets/images/btn/btn_youtube.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-footer-nav__sns li:last-child span { width: 36px; } } .p-footer-nav__sns li:last-child span::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: url("/assets/images/btn/btn_youtube_on.svg") no-repeat center/contain; opacity: 0; } @media all and (min-width: 768px) { .p-footer-nav__sns li:last-child a:hover span { background: none; } .p-footer-nav__sns li:last-child a:hover span::after { opacity: 1; } } .p-footer-nav__sns span { display: block; height: 5.3333333333vw; background-color: #fff; text-indent: 100%; overflow: hidden; } @media all and (min-width: 768px) { .p-footer-nav__sns span { height: 25px; } } .lazyload { opacity: 0; } .lazyloaded, .lazyloading { opacity: 1; transition: opacity 0.2s ease-out; } /** * Swiper 9.1.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: March 16, 2023 */ @font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } .swiper, swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide, swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev * * Copyright (c) 2022 Animate.css */ :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; } .animate__animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; } @media print, (prefers-reduced-motion: reduce) { .animate__animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } .animate__animated[class*=Out] { opacity: 0; } } /* Attention seekers */ @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 50px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate__fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @media all and (max-width: 767px) { .u-dn-md--down { display: none !important; } } @media all and (max-width: 767px) { .u-db-md--down { display: block !important; } } @media all and (max-width: 767px) { .u-di-md--down { display: inline !important; } } @media all and (max-width: 767px) { .u-dib-md--down { display: inline-block !important; } } .u-dn { display: none !important; } @media all and (min-width: 768px) { .u-dn-md { display: none !important; } } .u-db { display: block !important; } @media all and (min-width: 768px) { .u-db-md { display: block !important; } } .u-di { display: inline !important; } @media all and (min-width: 768px) { .u-di-md { display: inline !important; } } .u-dib { display: inline-block !important; } @media all and (min-width: 768px) { .u-dib-md { display: inline-block !important; } } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } .p-modal { display: none; } .p-modal.is-open { display: block; } .p-modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 200; will-change: transform; } @media all and (min-width: 768px) { .p-modal__overlay { display: grid; place-items: center; } } #modalContact .p-modal__overlay { display: grid; place-items: center; } [aria-hidden=false] .p-modal__overlay { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); } [aria-hidden=true] .p-modal__overlay { animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .p-modal__content { position: relative; border: 5px solid #1a1a1a; background-color: #c8c8c8; } #modalContact .p-modal__content { border: 4px solid #000; background-color: #beff8a; } @media all and (max-width: 767px) { .p-modal__content { width: 89.3333333333vw; height: calc(100vh - 25.6vw); height: calc(var(--vh, 1vh) * 100 - 25.6vw); height: calc(100dvh - 25.6vw); margin: 13.3333333333vw 0 0 5.3333333333vw; padding: 12vw 3.7333333333vw 13.0666666667vw 9.3333333333vw; border-radius: 2.6666666667vw; } #modalContact .p-modal__content { height: 72vw; margin: 0; padding: 7.92vw 0 0; } [lang=en] #modalContact .p-modal__content { height: 88vw; padding-top: 20.9866666667vw; } } @media all and (min-width: 768px) { .p-modal__content { width: 745px; height: 490px; padding: 73px 53px 66px 85px; border-color: #000; border-radius: 10px; } [lang=en] .p-modal__content { padding-top: 53px; padding-bottom: 46px; } #modalContact .p-modal__content { width: 500px; height: 280px; border-radius: 16px; padding: 53px 0 0; } [lang=en] #modalContact .p-modal__content { padding: 48px 15px 0; } } .p-modal__content::before { position: absolute; left: -1.3333333333vw; top: -1.3333333333vw; content: ""; width: 90.6666666667vw; height: calc(100vh - 24.2666666667vw); height: calc(var(--vh, 1vh) * 100 - 24.2666666667vw); height: calc(100dvh - 24.2666666667vw); border-radius: 4vw; background-color: #000; z-index: -1; } @media all and (min-width: 768px) { .p-modal__content::before { top: -2px; left: -2px; width: 752px; height: 496px; border-radius: 10px; } } #modalContact .p-modal__content::before { display: none; } .p-modal__content-inner { height: 100%; overflow: hidden; } @media all and (max-width: 767px) { .p-modal__content-inner { display: grid; grid-template-columns: auto; grid-template-rows: auto 1fr; } } @media all and (min-width: 768px) { .p-modal__content-inner { display: grid; grid-template-columns: auto; grid-template-rows: auto 1fr; } .p-modal__content-inner.is-flex { display: flex; } } #modalContact .p-modal__content-inner { display: flex; align-items: center; flex-direction: column; font-weight: 500; } #modalContact .p-modal__content-inner h2 { font-size: 3.7333333333vw; line-height: 1.4285714286; } [lang=en] #modalContact .p-modal__content-inner h2 { font-size: 4vw; font-weight: bold; line-height: 1; letter-spacing: 0.01em; } @media all and (min-width: 768px) { #modalContact .p-modal__content-inner h2 { font-size: 1rem; line-height: 1.5; } [lang=en] #modalContact .p-modal__content-inner h2 { font-size: 1rem; line-height: 1; } } #modalContact .p-modal__content-inner p { margin: 9.1466666667vw 0 2.6666666667vw; font-size: 5.3333333333vw; line-height: 1.5; text-align: center; } [lang=en] #modalContact .p-modal__content-inner p { margin-top: 6.7466666667vw; font-family: "Public Sans"; line-height: 1.3; letter-spacing: -0.02em; } @media all and (min-width: 768px) { #modalContact .p-modal__content-inner p { margin: 19px 0 11px; font-size: 1.25rem; } [lang=en] #modalContact .p-modal__content-inner p { margin: 27px 0 15px; font-size: 1.3125rem; line-height: 1.4285714286; } #modalContact .p-modal__content-inner p br { display: none; } } #modalContact .p-modal__content-inner > div { display: flex; flex-direction: column; } [lang=en] #modalContact .p-modal__content-inner > div { font-family: "Inter"; font-weight: 600; } @media all and (max-width: 767px) { #modalContact .p-modal__content-inner > div { align-items: center; } } #modalContact .p-modal__content-inner a { color: #000; font-size: 6.4vw; line-height: 1.5; } [lang=en] #modalContact .p-modal__content-inner a { letter-spacing: 0.01em; } @media all and (min-width: 768px) { #modalContact .p-modal__content-inner a { font-size: 1.5rem; line-height: 1.6666666667; pointer-events: none; } [lang=en] #modalContact .p-modal__content-inner a { line-height: 1.5; } } #modalContact .p-modal__content-inner a span { display: inline-block; width: 68px; } @media all and (max-width: 767px) { #modalContact .p-modal__content-inner a span { display: none; } } .p-modal__close { position: absolute; top: 5.3333333333vw; right: 4.8vw; width: 8vw; height: 8vw; background: url("/assets/images/btn/btn_close.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-modal__close { top: 21px; right: 17px; width: 30px; height: 30px; } } #modalContact .p-modal__close { top: 6.1333333333vw; right: 5.0666666667vw; } @media all and (min-width: 768px) { #modalContact .p-modal__close { top: 22px; right: 18px; } } .p-modal__header { flex-shrink: 0; } @media all and (max-width: 767px) { .p-modal__header { display: flex; align-items: flex-end; } [lang=en] .p-modal__header { align-items: flex-start; } } @media all and (max-width: 767px) { [lang=en] .p-modal__header:has(picture) span { width: 28.8vw; } } .p-modal__picture { flex-shrink: 0; margin-right: 4vw; } @media all and (min-width: 768px) { .p-modal__picture { margin-right: 50px; } } .p-modal__picture img { width: 32vw; height: auto; } @media all and (min-width: 768px) { .p-modal__picture img { width: 180px; } } @media all and (min-width: 768px) { .p-modal__title { display: flex; align-items: baseline; margin-bottom: 32px; } picture + .p-modal__title { display: block; margin-bottom: 0; } [lang=en] picture + .p-modal__title { width: 180px; } picture + .p-modal__title em { margin-top: 20px; line-height: 1.4814814815; } picture + .p-modal__title span { display: block; margin: 2px 0 0; line-height: 1.3571428571; } } .p-modal__title em { display: block; font-size: 6.4vw; font-weight: 500; line-height: 1.5; letter-spacing: 0.15em; } @media all and (min-width: 768px) { .p-modal__title em { font-size: 1.6875rem; line-height: 1; } } [lang=en] .p-modal__title em { font-size: 5.3333333333vw; font-weight: bold; line-height: 1.2; letter-spacing: 0; } @media all and (min-width: 768px) { [lang=en] .p-modal__title em { font-size: 1.6875rem; line-height: 1.1851851852; } } .p-modal__title span { font-size: 3.4666666667vw; line-height: 1.4615384615; } @media all and (min-width: 768px) { .p-modal__title span { margin-left: 18px; font-size: 0.875rem; line-height: 1; } } [lang=en] .p-modal__title span { display: block; margin-top: 2.1333333333vw; font-size: 2.6666666667vw; line-height: 1.6; letter-spacing: 0.01em; } @media all and (min-width: 768px) { [lang=en] .p-modal__title span { margin-top: 12px; font-size: 0.875rem; line-height: 1.2857142857; } } @media all and (max-width: 767px) { picture + .p-modal__title { width: 36.8vw; } } .p-modal__body { overflow-y: scroll; } @media all and (max-width: 767px) { .p-modal__body { margin-top: 6.6666666667vw; padding-right: 6.6666666667vw; } } @media all and (min-width: 768px) { .p-modal__body { padding-right: 41px; } } .p-modal__body p { font-size: 3.7333333333vw; line-height: 2; letter-spacing: 0.05em; } [lang=en] .p-modal__body p { line-height: 1.7142857143; letter-spacing: 0.03em; } @media all and (min-width: 768px) { .p-modal__body p { font-size: 1rem; } } .p-modal__body::-webkit-scrollbar { width: 2.6666666667vw; } @media all and (min-width: 768px) { .p-modal__body::-webkit-scrollbar { width: 10px; } } .p-modal__body::-webkit-scrollbar-thumb { border-radius: 1.3333333333vw; background-color: #000000; } @media all and (min-width: 768px) { .p-modal__body::-webkit-scrollbar-thumb { border-radius: 5px; } } .p-hero { border-bottom: 1px solid #1a1a1a; } @media all and (min-width: 768px) { .p-hero__inner { width: 1100px; margin-inline: auto; border-inline: 1px solid #1a1a1a; } } @media all and (max-width: 767px) { .p-nav { display: none; } } .p-nav ul { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto; gap: 0 1px; } .p-nav a { display: flex; align-items: flex-end; justify-content: center; height: 46px; padding-bottom: 13px; background-color: #2b2b2b; } @media all and (min-width: 768px) { .p-nav a:hover { background-color: #88e8f0; } .p-nav a:hover span { background-color: #2b2b2b; } } .p-nav span { background-color: #f0f0f0; text-indent: 100%; } .p-nav span.-txt01 { width: 101px; height: 18px; mask: url("/assets/images/txt_nav_b1.svg") no-repeat left top; -webkit-mask: url("/assets/images/txt_nav_b1.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-nav span.-txt02 { width: 125px; height: 19px; mask: url("/assets/images/txt_nav_b2.svg") no-repeat left top; -webkit-mask: url("/assets/images/txt_nav_b2.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-nav span.-txt03 { width: 23px; height: 18px; mask: url("/assets/images/txt_nav_b3.svg") no-repeat left top; -webkit-mask: url("/assets/images/txt_nav_b3.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-nav span.-txt04 { width: 24px; height: 17px; mask: url("/assets/images/txt_nav_b4.svg") no-repeat left top; -webkit-mask: url("/assets/images/txt_nav_b4.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-nav span.-txt05 { width: 65px; height: 18px; mask: url("/assets/images/txt_nav_dome.svg") no-repeat left top; -webkit-mask: url("/assets/images/txt_nav_dome.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-nav span.-txt06 { width: 68px; height: 19px; mask: url("/assets/images/txt_nav_studio.svg") no-repeat left top; -webkit-mask: url("/assets/images/txt_nav_studio.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-nav span.-txt07 { width: 80px; height: 19px; mask: url("/assets/images/txt_nav_pavilion.svg") no-repeat left top; -webkit-mask: url("/assets/images/txt_nav_pavilion.svg") no-repeat left top; mask-size: auto 100%; -webkit-mask-size: auto 100%; } .p-information { border-bottom: 1px solid #1a1a1a; } @media all and (max-width: 767px) { .p-information { padding-inline: 2.6666666667vw; } } .p-information__inner { padding: 4vw 5.0666666667vw 13.3333333333vw; border-inline: 1px solid #1a1a1a; } .b4 .p-information__inner, .b4_en .p-information__inner { padding: 4vw 5.0666666667vw 10.6666666667vw; } @media all and (min-width: 768px) { .p-information__inner { display: flex; align-items: flex-end; justify-content: space-between; width: 1100px; margin-inline: auto; padding: 23px 60px 80px; position: relative; } .b4 .p-information__inner, .dome .p-information__inner, .studio .p-information__inner, .pavilion .p-information__inner, .b4_en .p-information__inner, .dome_en .p-information__inner, .studio_en .p-information__inner, .pavilion_en .p-information__inner { padding-top: 33px; } .dome_en .p-information__inner { align-items: flex-start; } .b4 .p-information__inner, .b4_en .p-information__inner { padding: 23px 60px 160px; } } .p-information__heading img { height: 18.4vw; width: auto; } @media all and (min-width: 768px) { .p-information__heading img { width: auto; height: 74px; } } .p-information__subheading { font-size: 4.2666666667vw; font-weight: 500; line-height: 1.375; letter-spacing: 0.05em; } @media all and (min-width: 768px) { .p-information__subheading { font-size: 1.125rem; line-height: 1.5555555556; } } [lang=en] .p-information__subheading { font-size: 4.8vw; line-height: 1.2222222222; letter-spacing: 0; } @media all and (min-width: 768px) { [lang=en] .p-information__subheading { font-size: 1.125rem; } } .p-information__text { margin-top: 4.2666666667vw; font-size: 3.7333333333vw; letter-spacing: 0.1em; line-height: 1.7142857143; } @media all and (min-width: 768px) { .p-information__text { margin-top: 30px; font-size: 0.875rem; } .b4 .p-information__text, .dome .p-information__text, .b4_en .p-information__text, .dome_en .p-information__text { margin-top: 14px; } .studio .p-information__text, .pavilion .p-information__text, .studio_en .p-information__text, .pavilion_en .p-information__text { margin-top: 17px; } } [lang=en] .p-information__text { margin-top: 3.7333333333vw; line-height: 1.5; letter-spacing: -0.02em; } @media all and (min-width: 768px) { [lang=en] .p-information__text { margin-top: 36px; font-size: 0.9375rem; line-height: 1.6; } } .p-information__body { display: grid; } @media all and (max-width: 767px) { .p-information__body { grid-template-columns: 1fr 35.2vw; grid-template-rows: 19.2vw 1fr; grid-template-areas: "data use" "data tags"; gap: 8.2666666667vw 0; margin-top: 5.8666666667vw; } [lang=en] .p-information__body { gap: 6.6666666667vw 0; margin-inline: -0.5333333333vw; } .dome .p-information__body, .studio .p-information__body, .dome_en .p-information__body, .studio_en .p-information__body { grid-template-rows: auto 1fr; grid-template-areas: "data use" "tags tags"; gap: 5.3333333333vw 0; } [lang=en] .p-information__body { margin-top: 4.8vw; } } @media all and (min-width: 768px) { .p-information__body { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; grid-template-areas: "use data" "use tags"; width: 625px; } .dome .p-information__body, .studio .p-information__body, .pavilion .p-information__body, .dome_en .p-information__body, .studio_en .p-information__body, .pavilion_en .p-information__body { display: flex; width: auto; } .pavilion .p-information__body, .pavilion_en .p-information__body { width: 602px; } .dome_en .p-information__body { padding-top: 14px; align-items: flex-start; } } .p-information__use { grid-area: use; display: flex; align-items: center; justify-content: space-between; } @media all and (max-width: 767px) { .p-information__use { align-self: start; padding-top: 2.4vw; } } @media all and (min-width: 768px) { .p-information__use { align-self: end; flex-direction: column; height: 151px; } .b1 .p-information__use, .b1_en .p-information__use { margin-right: 42px; } .b3 .p-information__use, .b4 .p-information__use, .b3_en .p-information__use, .b4_en .p-information__use { align-self: start; height: auto; gap: 10px; } .dome .p-information__use, .studio .p-information__use, .pavilion .p-information__use, .dome_en .p-information__use, .studio_en .p-information__use, .pavilion_en .p-information__use { height: auto; } .dome_en .p-information__use, .studio_en .p-information__use, .pavilion_en .p-information__use { align-self: start; } } .p-information__use .-day, .p-information__use .-stay { display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #1a1a1a; } .p-information__use .-day span:first-of-type, .p-information__use .-stay span:first-of-type { font-size: 4.8vw; font-weight: 300; line-height: 1.5; letter-spacing: 0.05em; } @media all and (min-width: 768px) { .p-information__use .-day span:first-of-type, .p-information__use .-stay span:first-of-type { font-size: 1.375rem; } } [lang=en] .p-information__use .-day span:first-of-type, [lang=en] .p-information__use .-stay span:first-of-type { font-size: 6.9333333333vw; font-weight: 400; line-height: 1; text-align: center; } @media all and (min-width: 768px) { [lang=en] .p-information__use .-day span:first-of-type, [lang=en] .p-information__use .-stay span:first-of-type { font-size: 1.875rem; } } .p-information__use .-day span:last-of-type, .p-information__use .-stay span:last-of-type { display: inline-block; margin-top: -0.5333333333vw; font-size: 2.6666666667vw; line-height: 1.5; letter-spacing: 0.15em; } @media all and (min-width: 768px) { .p-information__use .-day span:last-of-type, .p-information__use .-stay span:last-of-type { margin-top: -3px; font-size: 0.6875rem; line-height: 1.6363636364; } } [lang=en] .p-information__use .-day span:last-of-type, [lang=en] .p-information__use .-stay span:last-of-type { margin-top: 2px; font-weight: 500; letter-spacing: -0.03em; line-height: 0.9; text-align: center; } @media all and (min-width: 768px) { [lang=en] .p-information__use .-day span:last-of-type, [lang=en] .p-information__use .-stay span:last-of-type { font-size: 0.75rem; } } .p-information__use .-day { width: 16.8vw; height: 16.8vw; border-radius: 50%; background-color: rgba(190, 255, 138, 0.5); } @media all and (min-width: 768px) { .p-information__use .-day { width: 74px; height: 74px; } } .p-information__use .-stay { width: 16vw; height: 16vw; border-radius: 4vw; background-color: rgba(209, 168, 255, 0.5); } @media all and (min-width: 768px) { .p-information__use .-stay { width: 68px; height: 68px; border-radius: 15px; } } .p-information__data { grid-area: data; } @media all and (max-width: 767px) { .p-information__data { width: 45.3333333333vw; } [lang=en] .p-information__data { width: 49.0666666667vw; } } @media all and (min-width: 768px) { .p-information__data { width: 502px; align-self: end; justify-self: end; display: flex; justify-content: flex-end; } .dome .p-information__data, .studio .p-information__data, .pavilion .p-information__data, .dome_en .p-information__data, .studio_en .p-information__data, .pavilion_en .p-information__data { width: auto; margin-left: 54px; } .dome_en .p-information__data, .studio_en .p-information__data, .pavilion_en .p-information__data { align-self: start; } } .p-information__data li { display: flex; } @media all and (max-width: 767px) { .p-information__data li { align-items: center; height: 12.2666666667vw; padding-left: 0.8vw; border-bottom: 1px solid #1a1a1a; } [lang=en] .p-information__data li { height: auto; min-height: 10.6666666667vw; padding-left: 1.0666666667vw; } } @media all and (min-width: 768px) { .p-information__data li { align-items: center; flex-direction: column; width: 101px; border-right: 1px solid #1a1a1a; text-align: center; } } @media all and (max-width: 767px) { .p-information__data li.-capacity { align-items: baseline; height: auto; margin-bottom: 0.5333333333vw; padding: 0 0 0.8vw 6.4vw; } [lang=en] .p-information__data li.-capacity { padding-left: 1.0666666667vw; } } @media all and (min-width: 768px) { .p-information__data li.-capacity { width: auto; padding-right: 20px; margin-right: 3px; } } @media all and (max-width: 767px) { .p-information__data li.-capacity + li { border-top: 1px solid #1a1a1a; } .b2_en .p-information__data li.-capacity + li .-title, .b4_en .p-information__data li.-capacity + li .-title { width: 12.5333333333vw; } .b3_en .p-information__data li.-capacity + li .-title { width: 10.6666666667vw; } [lang=en] .p-information__data li.-capacity + li .-none { margin-left: 0; } } @media all and (min-width: 768px) { .p-information__data li.-capacity + li { border-left: 1px solid #1a1a1a; } } @media all and (min-width: 768px) and (min-width: 768px) { [lang=en] .p-information__data li.-capacity + li { min-height: 101px; } [lang=en] .p-information__data li.-capacity + li .-title { margin-bottom: 0; } } @media all and (min-width: 768px) and (min-width: 768px) { .b1_en .p-information__data li.-capacity + li { width: 120px; } } @media all and (min-width: 768px) and (min-width: 768px) { .b2_en .p-information__data li.-capacity + li, .b3_en .p-information__data li.-capacity + li { width: 148px; } } @media all and (max-width: 767px) { .p-information__data li.-capacity .-title { font-size: 3.4666666667vw; width: 9.8666666667vw; } [lang=en] .p-information__data li.-capacity .-title { width: 12.8vw; margin-right: 2.1333333333vw; font-size: 3.2vw; } } @media all and (min-width: 768px) { [lang=en] .p-information__data li.-capacity .-title { margin-bottom: 0; } } .p-information__data li.-capacity .-count { font-size: 11.2vw; line-height: 1.1666666667; letter-spacing: 0; } @media all and (min-width: 768px) { .p-information__data li.-capacity .-count { font-size: 2.625rem; } [lang=en] .p-information__data li.-capacity .-count { font-size: 3rem; } .b2 .p-information__data li.-capacity .-count, .b3 .p-information__data li.-capacity .-count { padding-top: 7px; } } .p-information__data li.-capacity .-count::after { content: "名"; margin-left: 1px; font-size: 5.3333333333vw; } [lang=en] .p-information__data li.-capacity .-count::after { display: none; } @media all and (min-width: 768px) { .p-information__data li.-capacity .-count::after { font-size: 1.25rem; } } .p-information__data li.-capacity .-note { font-size: 3.7333333333vw; letter-spacing: -0.03em; } @media all and (min-width: 768px) { .p-information__data li.-capacity .-note { font-size: 0.625rem; } } @media all and (max-width: 767px) { .p-information__data li.-capacity + li { height: 13.3333333333vw; } [lang=en] .p-information__data li.-capacity + li { height: auto; min-height: 13.3333333333vw; } } @media all and (min-width: 768px) { [lang=en] .p-information__data li.-laundry .-title { margin-bottom: 0; padding-top: 0; line-height: 1; } [lang=en] .p-information__data li.-laundry .-title br { display: inline; } } .p-information__data li.-laundry .-count::after { content: "台"; } [lang=en] .p-information__data li.-laundry .-count::after { display: none; } @media all and (max-width: 767px) { .b2 .p-information__data li:not(.-capacity) .-count, .b3 .p-information__data li:not(.-capacity) .-count, .b4 .p-information__data li:not(.-capacity) .-count { justify-content: flex-end; width: 11.7333333333vw; } } @media all and (min-width: 768px) { .dome .p-information__data li:not(.-capacity) .-count, .dome_en .p-information__data li:not(.-capacity) .-count { margin-top: 11px; } } .p-information__data .-title { font-size: 3.2vw; font-weight: 300; letter-spacing: 0.05em; } @media all and (max-width: 767px) { .p-information__data .-title { width: 18.9333333333vw; } [lang=en] .p-information__data .-title { flex-shrink: 0; display: block; width: 15.7333333333vw; margin-right: 2.1333333333vw; font-size: 3.2vw; font-weight: 500; line-height: 1; letter-spacing: -0.03em; } } @media all and (min-width: 768px) { .p-information__data .-title { font-size: 0.8125rem; line-height: 1.5384615385; } [lang=en] .p-information__data .-title { margin-bottom: 7px; padding-top: 3px; font-size: 0.75rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; } [lang=en] .p-information__data .-title br { display: none; } .b2_en .p-information__data .-title { margin-bottom: 13px; } } .p-information__data .-count { display: flex; align-items: baseline; font-size: 7.4666666667vw; font-family: "Public Sans"; font-weight: 200; line-height: 1.2142857143; letter-spacing: 0.05em; } @media all and (min-width: 768px) { .p-information__data .-count { font-size: 2rem; line-height: 1.125; } [lang=en] .p-information__data .-count { font-size: 2.625rem; line-height: 1.1666666667; } } .p-information__data .-count::after { position: relative; top: -0.5333333333vw; margin-left: 0.5333333333vw; content: "室"; font-size: 3.7333333333vw; font-weight: 300; letter-spacing: 0.15em; } [lang=en] .p-information__data .-count::after { display: none; } @media all and (min-width: 768px) { .p-information__data .-count::after { top: -2px; margin-left: 6px; font-size: 1rem; } } .p-information__data .-count.-none { height: 1px; background-color: #1a1a1a; } @media all and (max-width: 767px) { .p-information__data .-count.-none { width: 6.4vw !important; margin-left: 9.3333333333vw; } [lang=en] .p-information__data .-count.-none { margin-left: -1.0666666667vw; } } @media all and (min-width: 768px) { .p-information__data .-count.-none { width: 24px !important; margin-top: 25px; } [lang=en] .p-information__data .-count.-none { margin-top: 28px; } } .p-information__data .-count.-none::after { display: none; } .p-information__data .-note { font-size: 2.6666666667vw; font-weight: 300; line-height: 1.4; } @media all and (max-width: 767px) { .p-information__data .-note { margin-left: 2.1333333333vw; } [lang=en] .p-information__data .-note { display: block; padding-block: 1.6vw; line-height: 1.1; letter-spacing: -0.03em; } } @media all and (min-width: 768px) { .p-information__data .-note { margin-top: 2px; font-size: 0.625rem; line-height: 1.2; } [lang=en] .p-information__data .-note { margin-top: 0; font-size: 0.625rem; line-height: 1; letter-spacing: -0.03em; } } @media all and (min-width: 768px) { .p-information__data .-sp { display: none !important; } } @media all and (max-width: 767px) { .p-information__data .-pc { display: none !important; } } .p-information__tags { grid-area: tags; justify-self: flex-end; } @media all and (max-width: 767px) { .dome .p-information__tags, .studio .p-information__tags, .dome_en .p-information__tags, .studio_en .p-information__tags { justify-self: flex-start; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 1.3333333333vw; } } @media all and (min-width: 768px) { .p-information__tags { align-self: flex-end; display: flex; margin-top: 33px; } .b3 .p-information__tags { margin-top: 25px; } .b4 .p-information__tags, .b4_en .p-information__tags { margin-top: 22px; } .b1_en .p-information__tags, .b2_en .p-information__tags, .b3_en .p-information__tags, .b4_en .p-information__tags { margin-top: 20px; } .dome .p-information__tags, .studio .p-information__tags, .pavilion .p-information__tags, .dome_en .p-information__tags, .studio_en .p-information__tags, .pavilion_en .p-information__tags { display: grid; grid-template-columns: 120px 120px; grid-template-rows: 30px 30px; gap: 10px; margin-left: 30px; } .dome_en .p-information__tags, .studio_en .p-information__tags, .pavilion_en .p-information__tags { grid-template-columns: 126px 126px; gap: 5px; margin-left: 25px; } .dome_en .p-information__tags, .studio_en .p-information__tags { align-self: start; margin-top: 0; } } .p-information__tag { display: flex; align-items: center; justify-content: center; width: 33.8666666667vw; height: 8vw; border: 1px solid #1a1a1a; border-radius: 1.3333333333vw; font-size: 3.2vw; font-weight: 300; letter-spacing: 0.03em; } @media all and (max-width: 767px) { .p-information__tag:not(:first-child) { margin-top: 1.3333333333vw; } [lang=en] .p-information__tag:not(:first-child) { margin-top: 1.8666666667vw; } .dome .p-information__tag, .studio .p-information__tag, .dome_en .p-information__tag, .studio_en .p-information__tag { margin-top: 0 !important; } [lang=en] .p-information__tag { width: 33.6vw; font-weight: 500; letter-spacing: -0.03em; } } @media all and (min-width: 768px) { .p-information__tag { width: 120px; height: 30px; border-radius: 5px; font-size: 0.75rem; } [lang=en] .p-information__tag { width: 126px; font-weight: 500; } .p-information__tag:not(:first-of-type) { margin-left: 10px; letter-spacing: -0.03em; } [lang=en] .p-information__tag:not(:first-of-type) { margin-left: 6px; } .dome .p-information__tag, .studio .p-information__tag, .dome_en .p-information__tag, .studio_en .p-information__tag { margin-left: 0 !important; } } .p-information__button { margin-top: 8.8vw; } @media all and (min-width: 768px) { .p-information__button { position: absolute; bottom: 62px; left: 20px; z-index: 3; width: 540px; margin-top: 60px; margin-left: 40px; } } @media all and (min-width: 768px) { [lang=en] .p-information__button { width: 640px; } } .p-information__link { position: relative; padding: 4vw; display: flex; align-items: center; flex-direction: column; gap: 1.6vw; margin: 0 12px 0 3px; } @media all and (min-width: 768px) { .p-information__link { width: 100%; padding: 15px 15px 15px 22px; flex-direction: row; gap: 0; margin: 0; } } .p-information__link::before { content: ""; position: absolute; z-index: 2; border: 1px solid #1a1a1a; background-color: #f0f0f0; border-radius: 2.6666666667vw; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } @media all and (min-width: 768px) { .p-information__link::before { border-radius: 10px; } } .p-information__link::after { content: ""; position: absolute; z-index: 1; background-color: #bebebe; border: 1px solid #1a1a1a; border-radius: 2.6666666667vw; left: 2.1333333333vw; top: 2.1333333333vw; width: 100%; height: 100%; } @media all and (min-width: 768px) { .p-information__link::after { border-radius: 10px; left: 5px; top: 5px; z-index: -1; } } .p-information__link:hover::before { background-color: #d1a8ff; } .p-information__link-icon { position: relative; z-index: 2; width: 41.0666666667vw; flex: 0 0 auto; margin-left: 2.6666666667vw; } @media all and (min-width: 768px) { .p-information__link-icon { width: 160px; margin-left: 0; } } .p-information__link-text { position: relative; z-index: 2; font-size: 0.75rem; line-height: 1.6666666667; text-align: center; letter-spacing: 0.1em; } [lang=en] .p-information__link-text { letter-spacing: normal; } @media all and (min-width: 768px) { .p-information__link-text { margin-left: 10px; text-align: left; } [lang=en] .p-information__link-text { font-weight: 500; font-size: 0.9375rem; line-height: 1.3333333333; margin-left: 20px; } } @media all and (max-width: 767px) { .p-description { padding-inline: 2.6666666667vw; } } @media all and (min-width: 768px) { .p-description { border-bottom: 1px solid #1a1a1a; } } .p-description__inner { padding: 13.3333333333vw 5.0666666667vw 0; border-inline: 1px solid #1a1a1a; } @media all and (min-width: 768px) { .p-description__inner { width: 1100px; margin-inline: auto; padding: 67px 100px 0; } } .p-description__text { font-size: 4.2666666667vw; line-height: 2; letter-spacing: 0.1em; text-align: justify; } @media all and (min-width: 768px) { .p-description__text { font-size: 1.125rem; } } [lang=en] .p-description__text { font-size: 4.2666666667vw; line-height: 1.75; letter-spacing: 0.03em; } @media all and (min-width: 768px) { [lang=en] .p-description__text { font-size: 1.125rem; line-height: 1.6666666667; } } .p-description__text + .p-description__text { margin-top: 8.5333333333vw; } @media all and (min-width: 768px) { .p-description__text + .p-description__text { margin-top: 36px; } } .p-description__photos { position: relative; display: block; } @media all and (max-width: 767px) { .p-description__photos { margin-inline: -8vw; } } @media all and (min-width: 768px) { .p-description__photos { margin-inline: -234px; } } .p-description__photos img { width: 100%; height: auto; } .b1 .p-description__photos { margin-top: 17.0666666667vw; } @media all and (min-width: 768px) { .b1 .p-description__photos { margin-top: 99px; padding-bottom: 115px; } } .b2 .p-description__photos { margin-top: 18.1333333333vw; } @media all and (min-width: 768px) { .b2 .p-description__photos { margin-top: 49px; padding-bottom: 59px; } } .b3 .p-description__photos { margin-top: 19.2vw; } @media all and (min-width: 768px) { .b3 .p-description__photos { margin-top: 65px; padding-bottom: 46px; } } .b4 .p-description__photos { margin-top: 23.4666666667vw; } @media all and (min-width: 768px) { .b4 .p-description__photos { margin-top: 49px; padding-bottom: 60px; } } .dome .p-description__photos { margin-top: 12vw; } @media all and (min-width: 768px) { .dome .p-description__photos { margin-top: 108px; padding-bottom: 73px; } } .studio .p-description__photos, .studio_en .p-description__photos { margin-top: 15.7333333333vw; } @media all and (min-width: 768px) { .studio .p-description__photos, .studio_en .p-description__photos { margin-top: 72px; padding: 0 0 66px 70px; } } .pavilion .p-description__photos, .pavilion_en .p-description__photos { margin-top: 16vw; } @media all and (min-width: 768px) { .pavilion .p-description__photos, .pavilion_en .p-description__photos { margin-top: 44px; padding: 0 0 77px 194px; } } [lang=en] .p-description__photos { margin-top: 18.6666666667vw; } @media all and (min-width: 768px) { [lang=en] .p-description__photos { margin-top: 92px; padding-bottom: 100px; } } @media all and (max-width: 767px) { .p-story { padding-inline: 2.6666666667vw; } } @media all and (min-width: 768px) { .p-story { border-bottom: 1px solid #1a1a1a; } } .p-story__inner { padding: 17.3333333333vw 5.0666666667vw 0; border-inline: 1px solid #1a1a1a; } @media all and (min-width: 768px) { .p-story__inner { width: 1100px; margin-inline: auto; padding: 100px 100px 82px; } } .p-story__heading { text-align: center; margin-bottom: 8.5333333333vw; } @media all and (min-width: 768px) { .p-story__heading { margin-bottom: 60px; } } .p-story__heading img { width: auto; height: 10.6666666667vw; } @media all and (min-width: 768px) { .p-story__heading img { height: 74px; } } .p-story__title { font-size: 5.3333333333vw; font-weight: bold; line-height: 1.8; letter-spacing: 0.1em; } @media all and (max-width: 767px) { .p-story__title { margin: 9.8666666667vw 0 6.6666666667vw; text-align: center; } } @media all and (min-width: 768px) { .p-story__title { grid-area: title; margin-bottom: 34px; font-size: 1.5rem; letter-spacing: 0.15em; } } [lang=en] .p-story__title { font-size: 4.8vw; font-weight: bold; line-height: 1.5555555556; letter-spacing: 0.02em; } @media all and (min-width: 768px) { [lang=en] .p-story__title { font-size: 1.5rem; line-height: 1.6666666667; } } .p-story__text { font-size: 4.2666666667vw; line-height: 2; text-align: justify; letter-spacing: 0.1em; } @media all and (min-width: 768px) { .p-story__text { font-size: 1.125rem; letter-spacing: 0.05em; } } [lang=en] .p-story__text { line-height: 1.75; letter-spacing: 0.03em; } @media all and (min-width: 768px) { [lang=en] .p-story__text { font-size: 1.125rem; line-height: 1.7777777778; } } @media all and (max-width: 767px) { .dome .p-story__text, .studio .p-story__text, .dome_en .p-story__text, .studio_en .p-story__text { margin-top: 8vw; } } .p-story__picture { display: block; } @media all and (max-width: 767px) { .p-story__picture { margin-top: 8vw; } } @media all and (max-width: 767px) { .p-story__picture + p { margin-top: 8vw; } } .p-story__picture img { width: 100%; height: auto; } .p-story__link { display: inline-flex; align-items: center; height: 5.8666666667vw; margin-top: 6.6666666667vw; padding-inline: 1.3333333333vw; background-color: #fff; font-size: 3.7333333333vw; font-weight: 300; letter-spacing: 0.05em; } @media all and (min-width: 768px) { .p-story__link { height: 22px; margin-top: 18px; padding-inline: 5px; font-size: 0.875rem; } } [lang=en] .p-story__link { height: 6.4vw; padding-inline: 2.4vw; font-size: 3.2vw; letter-spacing: 0; } @media all and (min-width: 768px) { [lang=en] .p-story__link { margin-top: 40px; height: 22px; padding-inline: 5px; font-size: 0.875rem; } } .p-story__link span { letter-spacing: 0; } @media all and (min-width: 768px) { .p-story__link span { display: none; } } @media all and (min-width: 768px) { .p-story__link:hover { background-color: #2b2b2b; color: #d1a8ff; } } @media all and (min-width: 768px) { .p-story__content { display: grid; grid-template-columns: 1fr 301px; grid-template-rows: auto 1fr; gap: 0 49px; } } @media all and (min-width: 768px) { .b1 .p-story__content > picture, .b2 .p-story__content > picture, .b3 .p-story__content > picture, .b4 .p-story__content > picture, .studio .p-story__content > picture, .pavilion .p-story__content > picture, .b1_en .p-story__content > picture, .b2_en .p-story__content > picture, .b3_en .p-story__content > picture, .b4_en .p-story__content > picture, .studio_en .p-story__content > picture, .pavilion_en .p-story__content > picture { display: none; } } @media all and (min-width: 768px) { .b1 .p-story__content, .b3 .p-story__content, .pavilion .p-story__content, .b1_en .p-story__content, .b3_en .p-story__content, .pavilion_en .p-story__content { grid-template-areas: "title title" "main figure"; } } @media all and (min-width: 768px) { .b2 .p-story__content, .b4 .p-story__content, .b2_en .p-story__content, .b4_en .p-story__content { grid-template-areas: "title figure" "main figure"; } } @media all and (min-width: 768px) { .dome .p-story__content, .dome_en .p-story__content { grid-template-columns: 1fr 1fr; grid-template-areas: "main main" "picture01 picture02"; gap: 45px 20px; } } @media all and (min-width: 768px) { .studio .p-story__content, .studio_en .p-story__content { display: block; } } @media all and (min-width: 768px) { .dome .p-story__content picture:first-of-type, .dome_en .p-story__content picture:first-of-type { grid-area: picture02; } } @media all and (min-width: 768px) { .dome .p-story__content picture:last-of-type, .dome_en .p-story__content picture:last-of-type { grid-area: picture01; } } .p-story__figure { grid-area: figure; } .p-story__figure > picture:not(:first-child) { margin-top: 20px; } @media all and (max-width: 767px) { .p-story__figure { display: none; } } .studio .p-story__figure, .studio_en .p-story__figure { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 29px 24px; margin-top: 73px; } @media all and (max-width: 767px) { .studio .p-story__figure, .studio_en .p-story__figure { display: none; } } .studio .p-story__figure > picture:not(:first-child), .studio_en .p-story__figure > picture:not(:first-child) { margin-top: 0; } @media all and (min-width: 768px) { .p-story__main { grid-area: main; } .p-story__main picture { display: none; } } @media all and (max-width: 767px) { .p-facilities { padding-inline: 2.6666666667vw; } } .p-facilities__inner { padding: 26.6666666667vw 5.0666666667vw 16vw; border-inline: 1px solid #1a1a1a; } @media all and (min-width: 768px) { .p-facilities__inner { width: 1100px; margin-inline: auto; padding: 106px 100px 117px; } } .p-facilities__heading { text-align: center; } .p-facilities__heading img { width: 39.6693333333vw; height: auto; } @media all and (min-width: 768px) { .p-facilities__heading img { width: 275px; } } .p-facilities__plan { display: block; margin-top: 10.6666666667vw; text-align: center; } @media all and (min-width: 768px) { .p-facilities__plan { margin-top: 70px; } } @media all and (max-width: 767px) { .b1 .p-facilities__plan img { width: 80vw; } } @media all and (max-width: 767px) { .b2 .p-facilities__plan img { width: 56vw; } } @media all and (max-width: 767px) { .dome .p-facilities__plan img { width: 74.4vw; } } @media all and (max-width: 767px) { .studio .p-facilities__plan img { width: 56vw; } } @media all and (max-width: 767px) { .pavilion .p-facilities__plan img { width: 41.0666666667vw; } } .p-facilities__button-wrap { position: relative; margin-top: 16vw; } @media all and (min-width: 768px) { .p-facilities__button-wrap { width: 350px; margin: 56px auto 0; } } .p-facilities__button-wrap::before { position: absolute; top: 0.8vw; left: 1.0666666667vw; content: ""; width: 100%; height: 100%; border-radius: 2.6666666667vw; border: 1px solid #1a1a1a; background-color: #bebebe; } @media all and (min-width: 768px) { .p-facilities__button-wrap::before { top: 3px; left: 4px; width: 350px; height: 63px; border-radius: 10px; } } .p-facilities__button { position: relative; display: grid; place-items: center; width: 100%; height: 16.8vw; border-radius: 2.6666666667vw; border: 1px solid #1a1a1a; background-color: #f0f0f0; font-size: 5.3333333333vw; letter-spacing: 0.05em; z-index: 1; } @media all and (min-width: 768px) { .p-facilities__button { width: 350px; height: 63px; border-radius: 10px; font-size: 1.4375rem; } .p-facilities__button:hover { background-color: #d1a8ff; } } [lang=en] .p-facilities__button { font-size: 5.6vw; letter-spacing: 0; } @media all and (min-width: 768px) { [lang=en] .p-facilities__button { font-size: 1.375rem; } } .p-facilities__button span { display: flex; align-items: center; } .p-facilities__button span::after { content: ""; width: 4.8vw; height: 4.8vw; margin-left: 2.1333333333vw; background: url("/assets/images/ico/ico_blank_outline.svg") no-repeat center/contain; } @media all and (min-width: 768px) { .p-facilities__button span::after { width: 19px; height: 19px; margin-left: 6px; } } [lang=en] .p-facilities__button span::after { margin-left: 1.0666666667vw; } @media all and (min-width: 768px) { [lang=en] .p-facilities__button span::after { margin-left: 6px; } } .p-facilities-table { margin-top: 22.9333333333vw; } @media all and (min-width: 768px) { .p-facilities-table { margin-top: 92px; } } .p-facilities-table__heading { margin-bottom: 4.5333333333vw; font-size: 6.4vw; font-weight: 500; line-height: 1.5; text-align: center; letter-spacing: 0.05em; } [lang=en] .p-facilities-table__heading { letter-spacing: 0; } @media all and (min-width: 768px) { .p-facilities-table__heading { margin-bottom: 30px; font-size: 1.75rem; } } .p-facilities-table__caption { letter-spacing: 0.05em; } @media all and (max-width: 767px) { .p-facilities-table__caption { margin: 7.7333333333vw 0 2.9333333333vw; font-size: 5.3333333333vw; line-height: 1.45; text-align: center; } } @media all and (min-width: 768px) { .p-facilities-table__caption { display: grid; place-items: center; height: 48px; border-top: 1px solid #1a1a1a; font-size: 1.375rem; } } @media all and (max-width: 767px) { .p-facilities-table > section + section { margin-top: 16vw; } } @media all and (min-width: 768px) { .p-facilities-table > section + section { margin-top: 80px; } } @media all and (max-width: 767px) { .p-facilities-table .-row { padding-bottom: 6.1333333333vw; } .p-facilities-table .-row:last-of-type { border-bottom: 1px solid #1a1a1a; } } @media all and (min-width: 768px) { .p-facilities-table .-row { display: flex; align-items: center; width: 100%; padding-block: 4px; border-bottom: 1px solid #1a1a1a; } .p-facilities-table .-row:first-of-type { border-top: 1px solid #1a1a1a; } } @media all and (max-width: 767px) { .p-facilities-table > section:first-of-type .-row:last-of-type { border-bottom: none; } } .p-facilities-table .-head { display: grid; place-items: center; font-size: 4.8vw; line-height: 1.5; letter-spacing: 0.05em; } @media all and (max-width: 767px) { .p-facilities-table .-head { height: 13.3333333333vw; border-block: 1px solid #1a1a1a; } [lang=en] .p-facilities-table .-head { height: auto; min-height: 13.3333333333vw; padding-block: 2.9333333333vw; font-size: 5.3333333333vw; line-height: 1.25; letter-spacing: 0; text-align: center; } } @media all and (min-width: 768px) { .p-facilities-table .-head { flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; width: 253px; font-size: 1.125rem; } [lang=en] .p-facilities-table .-head { font-size: 1.0625rem; line-height: 1.5882352941; letter-spacing: 0; } } @media all and (max-width: 767px) { .p-facilities-table .-head br { display: none; } [lang=en] .p-facilities-table .-head br { display: inline; } } @media all and (max-width: 767px) { .p-facilities-table .-detail { margin-top: 4.5333333333vw; } } @media all and (min-width: 768px) { .p-facilities-table .-detail { padding: 17px 0 17px 46px; border-left: 1px solid #1a1a1a; } } .p-facilities-table li { font-size: 4.8vw; line-height: 1.5; letter-spacing: 0.05em; } @media all and (max-width: 767px) { .p-facilities-table li { display: inline; } [lang=en] .p-facilities-table li { font-size: 4.5333333333vw; line-height: 1.5882352941; letter-spacing: 0; } } @media all and (min-width: 768px) { .p-facilities-table li { font-size: 1.125rem; } [lang=en] .p-facilities-table li { font-size: 1.0625rem; line-height: 1.5882352941; letter-spacing: 0; } } @media all and (max-width: 767px) { .p-facilities-table li:not(:last-child)::after { content: "、"; margin-right: -0.2em; } [lang=en] .p-facilities-table li:not(:last-child)::after { content: ", "; margin-right: 0; } } .p-facilities-table__note { margin-top: 4vw; font-size: 3.2vw; line-height: 1.6666666667; letter-spacing: 0.05em; } @media all and (min-width: 768px) { .p-facilities-table__note { margin-top: 23px; font-size: 0.75rem; line-height: 1.5; } } [lang=en] .p-facilities-table__note { margin-top: 0; padding-top: 4vw; border-top: 1px solid #1a1a1a; letter-spacing: 0; } @media all and (min-width: 768px) { [lang=en] .p-facilities-table__note { margin-top: 25px; padding-top: 0; border: none; } } @media all and (min-width: 768px) { .p-facilities-table__note a:hover { color: #ffabf9; } } /*# sourceMappingURL=common.css.map*/