@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } :root { --base-width: 1280; } @media (max-width: 960px) { :root { --base-width: 375; } } :root { --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-in-cubic: cubic-bezier(0.6, 0.1, 0.675, 0.19); } [data-text-animation=fadeIn] { display: inline-block; } [data-text-animation=fadeIn] span { text-shadow: rgba(255, 255, 255, 0.8) 0px 0px 30px, rgba(255, 255, 255, 0.5) 0px 0px 60px; filter: blur(10px); opacity: 0; transition: all 0.8s ease-in; } [data-text-animation=fadeIn] span.is-active { text-shadow: rgba(255, 255, 255, 0) 0px 0px 0px; filter: blur(0px); opacity: 1; } .highlight[data-text-animation=fadeIn] { letter-spacing: -0.02em; } .highlight[data-text-animation=fadeIn] span { text-shadow: rgba(255, 255, 255, 0.8) 0px 0px 30px, rgba(255, 255, 255, 0.5) 0px 0px 60px; filter: blur(10px); opacity: 0; transition: all 0.8s ease-in; } .highlight[data-text-animation=fadeIn] span.is-active { text-shadow: rgba(255, 255, 255, 0) 0px 0px 0px; filter: blur(0px); opacity: 1; } [data-scroll-view=fadeInRandom] span { opacity: 0; } [data-scroll-view=fadeInRandom] span.is-active { opacity: 1; } [data-scroll-view=fadeInUpward] { display: inline-block; } .js-scroll-wrap { overflow: hidden; } .hover-flip { position: relative; transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .hover-flip:hover .hover-flip__front { transform: rotateX(90deg); } .hover-flip:hover .hover-flip__back { transform: rotateX(0deg); } } .hover-flip__front { display: inline-block; transition: all 0.4s var(--ease-out-cubic); transform-style: preserve-3d; transform-origin: 0 50% -0.5em; } .hover-flip__back { position: absolute; bottom: 0; left: 0; display: inline-block; transform: rotateX(-90deg); transition: all 0.4s var(--ease-out-cubic); transform-style: preserve-3d; transform-origin: 0 50% -0.5em; white-space: nowrap; } .body-no-scroll { overflow: hidden; height: 100vh; } html { font-size: 62.5%; scrollbar-gutter: stable; } body { background: #434343; color: #fff; font-family: "Noto Sans JP", sans-serif; font-size: 1.5rem; letter-spacing: 0; line-height: 2; text-align: justify; font-feature-settings: "palt"; min-width: 375px; } @media screen and (min-width: 961px) { body { overflow-y: scroll; min-width: 1140px; } } body.is-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } img, svg { display: block; width: 100%; height: auto; max-width: 100%; } @media screen and (min-width: 961px) { img, svg { width: auto; } } .c-svg-sprite { display: none; } a, button { cursor: pointer; } @media screen and (min-width: 961px) { .l-wrapper { min-width: 1080px; } } .l-inner { padding-inline: calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .l-inner { padding-inline: calc(33 * 100vw / var(--base-width)); } } .c-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: #B3B3B3; -webkit-mask: radial-gradient(circle at center, transparent 0, black 0); mask: radial-gradient(circle at center, transparent 0, black 0); } .c-loading__count { position: absolute; bottom: calc(48 * 100vw / var(--base-width)); right: calc(48 * 100vw / var(--base-width)); color: #fff; font-family: "Funnel Display", sans-serif; font-size: calc(128 * 100vw / var(--base-width)); font-weight: 600; letter-spacing: -0.04em; line-height: 1; transition: all 0.8s var(--ease-in-cubic); } @media screen and (max-width: 960px) { .c-loading__count { bottom: calc(36 * 100vw / var(--base-width)); right: calc(36 * 100vw / var(--base-width)); font-size: calc(80 * 100vw / var(--base-width)); } } .-loaded .c-loading__count { transform: translateX(-600%); } .c-loading__count span.-hide { opacity: 0; } .c-svg-sprite { display: none; width: 0; height: 0; opacity: 0; overflow: hidden; } .c-title { overflow: hidden; } .c-title__en { display: block; font-family: "Funnel Display", sans-serif; font-size: calc(86 * 100vw / var(--base-width)); font-weight: 600; letter-spacing: -0.03em; line-height: 0.7844; } @media screen and (max-width: 960px) { .c-title__en { font-size: calc(50 * 100vw / var(--base-width)); } } .c-title__jp { margin-top: calc(16 * 100vw / var(--base-width)); font-size: calc(20 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1; } @media screen and (max-width: 960px) { .c-title__jp { margin-top: calc(6 * 100vw / var(--base-width)); font-size: calc(13 * 100vw / var(--base-width)); } } @media screen and (max-width: 960px) { .c-gnav { height: auto; } } .c-gnav__item { text-align: right; line-height: 1; } @media screen and (max-width: 960px) { .c-gnav__item { text-align: left; } } .c-gnav__item + .c-gnav__item { margin-top: 6px; } @media screen and (max-width: 960px) { .c-gnav__item + .c-gnav__item { margin-top: 19px; } } .c-gnav__item a { position: relative; display: inline-block; font-family: "Funnel Display", sans-serif; font-size: 1.9rem; font-weight: 500; font-variation-settings: "wght" 300; letter-spacing: -0.04em; line-height: 1.57; transition: all 0.6s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .c-gnav__item a { text-align: left; color: #fff; font-size: 3.3rem; font-variation-settings: "wght" 500; line-height: 1; } } .c-gnav__item a::before { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right; transition: all 0.6s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .c-gnav__item a::before { display: none; } } .c-gnav__item a.is-active { font-variation-settings: "wght" 800; } @media screen and (max-width: 960px) { .c-gnav__item a.is-active { font-variation-settings: "wght" 500; } } .c-gnav__item a.is-active::before { transform: scaleX(1); } .c-gnav__item a .-jp { left: auto; right: 0; font-family: "Noto Sans JP", sans-serif; font-size: 1.6rem; white-space: nowrap; font-weight: 700; letter-spacing: 0; line-height: 1.8; } @media screen and (max-width: 960px) { .c-gnav__item a .-jp { display: block; font-size: 1.2rem; line-height: 1; } } .c-button { position: relative; width: calc(190 * 100vw / var(--base-width)); height: calc(83 * 100vw / var(--base-width)); background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: calc(11 * 100vw / var(--base-width)); overflow: hidden; margin-left: auto; margin-top: calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .c-button { width: 100%; margin-top: calc(50 * 100vw / var(--base-width)); } } .c-button--single { width: 309px; height: 82px; border-radius: 11px; margin: 80px auto 0; } @media screen and (max-width: 960px) { .c-button--single { width: 100%; margin: 50px auto 0; } } .c-button__bg { position: absolute; inset: 0; padding: 1px; /* 枠の太さ */ border-radius: calc(11 * 100vw / var(--base-width)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; transition: all 1s; overflow: hidden; } .c-button__bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(210deg, rgba(255, 255, 255, 0) 30%, #FFFFFF 50%, rgba(255, 255, 255, 0) 70%); } .c-button--single .c-button__bg::before { background: linear-gradient(200deg, rgba(255, 255, 255, 0) 30%, #FFFFFF 50%, rgba(255, 255, 255, 0) 70%); } .c-button a { display: flex; align-items: center; justify-content: center; gap: calc(10 * 100vw / var(--base-width)); width: 100%; height: 100%; } .c-button--single a { justify-content: space-between; padding: 26px; } @media screen and (min-width: 961px) { .c-button:hover .c-button__bg::before { transform: rotate(180deg); transition: all 0.7s cubic-bezier(0.25, 0, 0.2, 1); } } .c-button__text { font-family: "Funnel Display", sans-serif; font-size: calc(18 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .c-button--single .c-button__text { font-size: 1.6rem; } .c-button__ellipsis { display: flex; gap: calc(2 * 100vw / var(--base-width)); } .c-button--single .c-button__ellipsis { gap: 2px; } .c-button__ellipsis span { width: calc(3 * 100vw / var(--base-width)); height: calc(3 * 100vw / var(--base-width)); background: #fff; } .c-button--single .c-button__ellipsis span { width: 3px; height: 3px; } .c-tiltCard { perspective: 500px; touch-action: pinch-zoom; } .c-tiltCard__face { will-change: transform; transition: transform 0.2s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .c-hamburger__button { position: fixed; top: 30px; right: 30px; z-index: 999; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } } @media screen and (max-width: 960px) { .c-hamburger__button.is-show { opacity: 1; pointer-events: visible; } } .c-hamburger__button::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 50%; background: linear-gradient(230deg, rgba(255, 255, 255, 0) 20%, #FFFFFF 50%, rgba(255, 255, 255, 0) 80%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; transition: all 1s; } .c-hamburger__button span { position: absolute; width: 23px; height: 1px; background: #fff; transition: all 0.4s ease; } .c-hamburger__button span:first-of-type { transform: translateY(-5px); } .c-hamburger__button span:last-of-type { transform: translateY(5px); } .c-hamburger__button.is-active span:first-of-type { transform: rotate(30deg); } .c-hamburger__button.is-active span:nth-of-type(2) { opacity: 0; } .c-hamburger__button.is-active span:last-of-type { transform: rotate(-30deg); } @media screen and (max-width: 960px) { .c-hamburger__menu { position: fixed; top: 0; left: 0; z-index: 998; background: #000; width: 100vw; height: 100vh; color: #323232; padding: 100px 33px 80px; overflow: auto; opacity: 0; pointer-events: none; transition: all 0.4s ease; } } @media screen and (max-width: 960px) { .c-hamburger__menu.is-active { opacity: 1; pointer-events: auto; } } .c-bg { position: fixed; top: 0; left: 0; z-index: -1; filter: brightness(100%); will-change: filter; pointer-events: none; } .c-bg:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg01.webp); opacity: var(--after-opacity, 0.7); } .c-modal { position: fixed; top: 0; left: 0; z-index: 9999; width: 100vw; height: 100dvh; display: none; animation: fade-In 0.3s linear; } .c-modal.is-open { display: block; } .c-modal__overlay { display: grid; place-items: center; width: 100%; height: 100%; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(0, 0, 0, 0.4); } .c-modal__close { position: absolute; top: 50px; right: 50px; display: grid; place-items: center; width: 50px; height: 50px; background: rgba(0, 0, 0, 0.8); border-radius: 50%; } @media screen and (max-width: 960px) { .c-modal__close { top: 23px; right: 23px; } } .c-modal__close::before { content: ""; position: absolute; width: 23px; height: 1px; background: #fff; transform: rotate(30deg); } .c-modal__close::after { content: ""; position: absolute; width: 23px; height: 1px; background: #fff; transform: rotate(-30deg); } .c-modal__container { width: 850px; max-height: 90vh; background-color: #fff; border-radius: 100px; padding: 100px 0; display: flex; position: relative; z-index: 0; text-align: left; overflow: hidden; } @media screen and (max-width: 960px) { .c-modal__container { width: 85%; max-width: 540px; padding: 100px 0 66px; border-radius: 46px; } } @keyframes fade-In { from { opacity: 0; } to { opacity: 1; } } .c-modal__main { flex: 1; overflow-y: auto; color: #323232; } .c-modal__content { height: auto; margin-top: 35px; padding: 0 100px; } @media screen and (max-width: 960px) { .c-modal__content { padding: 0 30px; } } .c-modal__title { text-align: center; font-family: "Funnel Display", sans-serif; font-size: 4.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; } @media screen and (max-width: 960px) { .c-modal__title { font-size: 2.4rem; } } .c-modal__title span { display: block; margin-top: 4px; font-family: "Noto Sans JP", sans-serif; font-size: 2rem; font-weight: 500; letter-spacing: 0; line-height: 1; } @media screen and (max-width: 960px) { .c-modal__title span { font-size: 1.6rem; } } .c-modal__text { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: 0; line-height: 1.62; } @media screen and (max-width: 960px) { .c-modal__text { font-size: 1.3rem; } } .c-modal__block { display: flex; justify-content: center; gap: 25px; margin-top: 68px; } @media screen and (max-width: 960px) { .c-modal__block { flex-direction: column; margin-top: 44px; } } .c-modal__links-title { text-align: center; font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 1.62; } @media screen and (max-width: 960px) { .c-modal__links-title { font-size: 1.8rem; } } .c-modal__links-list { margin-top: 18px; } .c-modal__button { position: relative; width: 305px; height: 82px; background: rgba(50, 50, 50, 0.05); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: 11px; overflow: hidden; } @media screen and (max-width: 960px) { .c-modal__button { width: 100%; } } .c-modal__button + .c-modal__button { margin-top: 18px; } .c-modal__button-bg { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 11px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; transition: all 1s; overflow: hidden; } .c-modal__button-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(200deg, rgba(255, 255, 255, 0) 30%, #323232 50%, rgba(255, 255, 255, 0) 70%); } .c-modal__button a { display: flex; align-items: center; justify-content: space-between; padding: 26px; gap: 10px; width: 100%; height: 100%; } @media screen and (min-width: 961px) { .c-modal__button:hover .c-modal__button-bg::before { transform: rotate(180deg); transition: all 0.7s cubic-bezier(0.25, 0, 0.2, 1); } } .c-modal__button-text { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.25; } @media screen and (max-width: 960px) { .c-modal__button-text { font-size: 1.4rem; } } .c-modal__button-ellipsis { display: flex; gap: 2px; } .c-modal__button-ellipsis span { width: 3px; height: 3px; background: #323232; } .c-pagination { position: relative; display: flex; justify-content: flex-end; margin-top: calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .c-pagination { justify-content: center; margin-top: calc(50 * 100vw / var(--base-width)); } } .c-pagination__list { display: flex; gap: calc(10 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .c-pagination__list { gap: calc(8 * 100vw / var(--base-width)); } } .page-numbers { display: flex; align-items: center; justify-content: center; border-radius: calc(8 * 100vw / var(--base-width)); background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); width: calc(72 * 100vw / var(--base-width)); height: calc(72 * 100vw / var(--base-width)); color: #fff; font-family: "Funnel Display", sans-serif; font-size: calc(37 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: -0.04em; line-height: 1; } @media screen and (max-width: 960px) { .page-numbers { width: calc(46 * 100vw / var(--base-width)); height: calc(46 * 100vw / var(--base-width)); font-size: calc(24 * 100vw / var(--base-width)); } } .page-numbers__bg { position: absolute; inset: 0; padding: 1px; /* 枠の太さ */ border-radius: calc(11 * 100vw / var(--base-width)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; transition: all 1s; overflow: hidden; } .page-numbers__bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(240deg, rgba(255, 255, 255, 0) 30%, #FFFFFF 50%, rgba(255, 255, 255, 0) 70%); } @media screen and (min-width: 961px) { a.page-numbers:hover .page-numbers__bg::before { transform: rotate(180deg); transition: all 0.7s cubic-bezier(0.25, 0, 0.2, 1); } } .page-numbers.current { background: rgba(255, 255, 255, 0.3); } .page-numbers.dots { background: transparent; -webkit-backdrop-filter: 0; backdrop-filter: 0; color: #fff; letter-spacing: -0.04em; } @media screen and (max-width: 960px) { .page-numbers.dots { width: calc(20 * 100vw / var(--base-width)); font-size: calc(18 * 100vw / var(--base-width)); } } .c-arrow { display: flex; align-items: center; justify-content: center; width: calc(26 * 100vw / var(--base-width)); height: calc(26 * 100vw / var(--base-width)); background: rgba(255, 255, 255, 0.05); border: 1px solid #FFFFFF; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: 50%; } .c-arrow svg { width: calc(18 * 100vw / var(--base-width)); height: calc(18 * 100vw / var(--base-width)); } .p-top-scroll { position: relative; width: auto; height: auto; overflow: hidden; } .p-top-bg { position: fixed; top: 0; left: 0; filter: brightness(100%); will-change: filter; } .p-top-bg:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg01.webp); opacity: var(--after-opacity, 0.7); } .p-top-nav { position: fixed; top: 0; right: 40px; z-index: 999; margin-top: 40px; mix-blend-mode: exclusion; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .p-top-nav.is-show { opacity: 1; pointer-events: visible; } .p-top-mv { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; min-height: 630px; padding: calc(25 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-mv { padding: calc(10 * 100vw / var(--base-width)); } } .p-top-mv__image { width: 100%; height: 100%; border-radius: calc(11 * 100vw / var(--base-width)); overflow: hidden; } .p-top-mv__image video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-mv__title { position: absolute; text-align: center; } .p-top-mv__logo { width: calc(112 * 100vw / var(--base-width)); height: auto; aspect-ratio: 112/114; margin: 0 auto; } @media screen and (max-width: 960px) { .p-top-mv__logo { width: calc(86 * 100vw / var(--base-width)); } } .p-top-mv__title-en { font-family: "Funnel Display", sans-serif; font-size: calc(96 * 100vw / var(--base-width)); font-weight: 500; letter-spacing: -0.04em; line-height: 0.927; } @media screen and (max-width: 960px) { .p-top-mv__title-en { font-size: calc(40 * 100vw / var(--base-width)); } } .p-top-mv__title-en span span { opacity: 0; display: inline-block; } .p-top-mv__title-en span.is-active { opacity: 1; } .p-top-mv__title-jp { margin-top: calc(32 * 100vw / var(--base-width)); font-size: calc(15 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1; opacity: 0; transition: all 0.8s 5s ease-in; } @media screen and (max-width: 960px) { .p-top-mv__title-jp { font-size: calc(13 * 100vw / var(--base-width)); } } .-loaded .p-top-mv__title-jp { opacity: 1; } .p-top-content { position: relative; } .p-top-pickup { padding-top: calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-pickup { padding-top: calc(60 * 100vw / var(--base-width)); } } .p-top-pickup__list { margin-top: calc(120 * 100vw / var(--base-width)); padding: 0 calc(40 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-pickup__list { margin-top: calc(80 * 100vw / var(--base-width)); padding: 0; } } .p-top-pickup__item { width: calc(511 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-pickup__item { width: 100%; } } .p-top-pickup__item:nth-of-type(even) { margin-left: auto; } .p-top-pickup__item + .p-top-pickup__item { margin-top: calc(115 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-pickup__item + .p-top-pickup__item { margin-top: calc(40 * 100vw / var(--base-width)); } } .p-top-pickup__item a { display: block; } .p-top-pickup__image { width: 100%; height: auto; aspect-ratio: 511/319; background: rgba(0, 0, 0, 0.3); } .p-top-pickup__image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-pickup__date { margin-top: calc(18 * 100vw / var(--base-width)); font-family: "Funnel Display", sans-serif; font-size: calc(20 * 100vw / var(--base-width)); font-weight: 400; letter-spacing: 0; line-height: 1.3; } .p-top-pickup__text { font-size: calc(18 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.3; } .p-top-news { margin-top: calc(200 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-news { margin-top: calc(120 * 100vw / var(--base-width)); } } .p-top-news__wrapper { width: calc(760 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-news__wrapper { width: 100%; } } .p-top-news__list { margin-top: calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-news__list { margin-top: calc(50 * 100vw / var(--base-width)); } } .p-top-news__item a { position: relative; display: flex; align-items: center; gap: 1em; padding: calc(26 * 100vw / var(--base-width)) calc(30 * 100vw / var(--base-width)) calc(26 * 100vw / var(--base-width)) 0; border-bottom: 1px solid #fff; transition: all 0.8s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .p-top-news__item a { flex-direction: column; align-items: flex-start; gap: 0; } } .p-top-news__item:first-of-type a { padding-top: 0; } .p-top-news__item a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: translate(-50%, 50%); opacity: 0; transition: left 1s var(--ease-out-cubic); box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2); } @media screen and (min-width: 961px) { .p-top-news__item a:hover::before { opacity: 1; left: calc(100% - 4px); } } @media screen and (min-width: 961px) { .p-top-news__item a:hover { opacity: 0.4; } } .p-top-news__item a .c-arrow { position: absolute; top: 50%; right: calc(20 * 100vw / var(--base-width)); transform: translateY(-50%); } @media screen and (max-width: 960px) { .p-top-news__item a .c-arrow { right: 0; } } .p-top-news__date { font-family: "Funnel Display", sans-serif; font-size: calc(15 * 100vw / var(--base-width)); font-weight: 400; letter-spacing: 0; line-height: 1.3; } .p-top-news__text { font-size: calc(15 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.3; text-decoration: underline; } .p-top-event { margin-top: calc(200 * 100vw / var(--base-width)); margin-left: auto; } @media screen and (max-width: 960px) { .p-top-event { margin-top: calc(120 * 100vw / var(--base-width)); } } .p-top-event__wrapper { width: calc(628 * 100vw / var(--base-width)); margin-left: auto; } @media screen and (max-width: 960px) { .p-top-event__wrapper { width: 100%; } } .p-top-event__upcoming { margin-top: calc(80 * 100vw / var(--base-width)); padding: calc(26 * 100vw / var(--base-width)); border: 1px solid #fff; border-radius: calc(11 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-event__upcoming { margin-top: calc(50 * 100vw / var(--base-width)); } } .p-top-event__upcoming .p-top-event__heading { margin-bottom: calc(10 * 100vw / var(--base-width)); font-size: calc(20 * 100vw / var(--base-width)); } .p-top-event__upcoming .p-top-event__info { font-size: calc(14 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-event__upcoming .p-top-event__info { display: block; } } @media screen and (max-width: 960px) { .p-top-event__upcoming .p-top-event__info dd { margin: 0; } } .p-top-event__upcoming .p-top-event__item a .c-arrow { right: 0; } .p-top-event__past { padding-top: calc(26 * 100vw / var(--base-width)); } .p-top-event__past .p-top-event__item { padding: calc(26 * 100vw / var(--base-width)) 0; border-top: 1px solid #fff; } .p-top-event__past .p-top-event__item:last-of-type { padding-bottom: 0; } .p-top-event__past .p-top-event__heading { margin-bottom: calc(26 * 100vw / var(--base-width)); font-size: calc(16 * 100vw / var(--base-width)); } .p-top-event__past .p-top-event__info { font-size: calc(12 * 100vw / var(--base-width)); } .p-top-event__item a { position: relative; display: block; width: 100%; height: 100%; transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .p-top-event__item a:hover { opacity: 0.6; } } .p-top-event__item a .c-arrow { position: absolute; right: calc(20 * 100vw / var(--base-width)); bottom: 0; } @media screen and (max-width: 960px) { .p-top-event__item a .c-arrow { right: 0; } } .p-top-event__heading { font-size: calc(16 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.3; } .p-top-event__date { font-family: "Funnel Display", sans-serif; font-size: calc(14 * 100vw / var(--base-width)); font-weight: 500; letter-spacing: 0; line-height: 1; } .p-top-event__title { font-size: calc(15 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.63; } .p-top-event__info { display: grid; grid-template-columns: auto 1fr; margin-top: calc(8 * 100vw / var(--base-width)); font-weight: 500; letter-spacing: 0; line-height: 1.63; font-feature-settings: normal; } .p-top-event__info dd { margin-left: 1em; } .p-top-banner { margin-top: calc(200 * 100vw / var(--base-width)); padding-bottom: calc(200 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-banner { margin-top: calc(120 * 100vw / var(--base-width)); padding-bottom: calc(120 * 100vw / var(--base-width)); } } .p-top-banner__column { display: flex; align-items: center; gap: calc(24 * 100vw / var(--base-width)); padding-bottom: calc(22 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-banner__column { flex-wrap: wrap; gap: calc(7 * 100vw / var(--base-width)); padding-bottom: calc(4 * 100vw / var(--base-width)); } } .p-top-banner__column:nth-of-type(3) { margin-left: calc(90 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-banner__column:nth-of-type(3) { margin-left: calc(28 * 100vw / var(--base-width)); } } .p-top-banner__column:last-of-type { justify-content: flex-end; } .p-top-banner__text { font-family: "Funnel Display", sans-serif; font-size: calc(90 * 100vw / var(--base-width)); font-weight: 600; letter-spacing: -0.03em; line-height: 0.72; } @media screen and (max-width: 960px) { .p-top-banner__text { font-size: calc(42 * 100vw / var(--base-width)); } } .p-top-banner__text span { display: inline-block; opacity: 0; filter: blur(10px); text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 60px rgba(255, 255, 255, 0.5); transition: all 1.2s var(--ease-out-cubic); } .p-top-banner__text.is-active span { opacity: 1; filter: blur(0px); text-shadow: 0 0 0px rgba(255, 255, 255, 0); } .p-top-banner__image { width: auto; height: calc(70 * 100vw / var(--base-width)); transform: translateY(calc(8 * 100vw / var(--base-width))); border-radius: calc(10 * 100vw / var(--base-width)); overflow: hidden; filter: brightness(400%); opacity: 0; transition: all 0.8s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .p-top-banner__image { height: calc(33 * 100vw / var(--base-width)); transform: translateY(calc(4 * 100vw / var(--base-width))); border-radius: calc(4 * 100vw / var(--base-width)); } } .p-top-banner__column:nth-of-type(2) .p-top-banner__image { width: calc(228 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-banner__column:nth-of-type(2) .p-top-banner__image { width: calc(100 * 100vw / var(--base-width)); } } .p-top-banner__column:nth-of-type(3) .p-top-banner__image { width: calc(164 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-banner__column:nth-of-type(3) .p-top-banner__image { width: calc(77 * 100vw / var(--base-width)); } } .p-top-banner__image.is-active { filter: brightness(100%); opacity: 1; } .p-top-banner__image img, .p-top-banner__image video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-about__wrapper { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-about__wrapper { display: block; margin-top: calc(50 * 100vw / var(--base-width)); } } .p-top-about__text { font-size: calc(15 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.72; } @media screen and (max-width: 960px) { .p-top-about__text { font-size: calc(14 * 100vw / var(--base-width)); line-height: 1.65; } } .p-top-about__text span { display: inline-block; line-height: 1.72; } @media screen and (max-width: 960px) { .p-top-about__text span { line-height: 1.65; } } .p-top-about__links { position: sticky; top: calc(120 * 100vw / var(--base-width)); display: grid; grid-template-columns: auto auto; gap: calc(16 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-about__links { position: static; grid-template-columns: auto; margin-top: calc(50 * 100vw / var(--base-width)); padding-bottom: 0; } } .p-top-about__links .c-button { width: calc(264 * 100vw / var(--base-width)); margin: 0; } @media screen and (max-width: 960px) { .p-top-about__links .c-button { width: 100%; } } .p-top-about__links .c-button a { justify-content: space-between; padding: calc(26 * 100vw / var(--base-width)); } .p-top-about__links .c-button__text { font-family: "Noto Sans JP", sans-serif; font-size: calc(16 * 100vw / var(--base-width)); } .p-top-deco { margin-top: calc(200 * 100vw / var(--base-width)); height: 100vh; } .p-top-membership { padding: calc(520 * 100vw / var(--base-width)) 0 calc(320 * 100vw / var(--base-width)); color: #323232; } @media screen and (max-width: 960px) { .p-top-membership { padding: calc(500 * 100vw / var(--base-width)) 0 calc(300 * 100vw / var(--base-width)); } } .p-top-membership__wrapper { position: relative; margin: 0 calc(120 * 100vw / var(--base-width)); padding: 0 calc(100 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-membership__wrapper { margin: 0; padding: 0; } } .p-top-membership__header { position: sticky; top: 0; padding-top: calc(40 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-membership__header { padding-top: calc(20 * 100vw / var(--base-width)); } } .p-top-membership__header.is-active { background: #fff; } .p-top-membership__header::after { content: ""; position: absolute; z-index: -1; bottom: 1px; width: 100%; height: 30%; background: linear-gradient(to bottom, white 0%, white 30%, transparent 100%); transform: translateY(100%); opacity: 0; } .p-top-membership__header.is-active::after { opacity: 1; } .p-top-membership__text { margin-top: calc(74 * 100vw / var(--base-width)); font-size: calc(18 * 100vw / var(--base-width)); font-weight: 400; letter-spacing: 0.04em; line-height: 1.6; } @media screen and (max-width: 960px) { .p-top-membership__text { margin-top: calc(50 * 100vw / var(--base-width)); font-size: calc(13 * 100vw / var(--base-width)); } } .p-top-journal { padding-top: calc(200 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-journal { padding-top: calc(120 * 100vw / var(--base-width)); } } .p-top-journal__list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(80 * 100vw / var(--base-width)); border-top: 1px solid #fff; border-bottom: 1px solid #fff; } @media screen and (max-width: 960px) { .p-top-journal__list { display: block; margin-top: calc(50 * 100vw / var(--base-width)); } } .p-top-journal__item { padding: calc(50 * 100vw / var(--base-width)) calc(54 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-journal__item { padding: calc(50 * 100vw / var(--base-width)) calc(28 * 100vw / var(--base-width)); } } .p-top-journal__item:not(:last-of-type) { border-right: 1px solid #fff; } @media screen and (max-width: 960px) { .p-top-journal__item:not(:last-of-type) { border-right: none; border-bottom: 1px solid #fff; } } .p-top-journal__item:nth-of-type(1) button { background: url(../images/journal_bg01.webp) center center/cover; } .p-top-journal__item:nth-of-type(2) button { background: url(../images/journal_bg02.webp) center center/cover; } .p-top-journal__item:nth-of-type(3) button { background: url(../images/journal_bg03.webp) center center/cover; } .p-top-journal__item button { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; aspect-ratio: 1/1; transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .p-top-journal__item button:hover { filter: saturate(0); } .p-top-journal__item button:hover .p-top-journal__title { transform: rotateX(90deg); } .p-top-journal__item button:hover .p-top-journal__download { transform: rotateX(0deg); } } .p-top-journal__text-area { text-align: center; } .p-top-journal__title-wrap { display: flex; justify-content: center; align-items: center; position: relative; font-family: "Funnel Display", sans-serif; font-size: calc(30 * 100vw / var(--base-width)); font-weight: 600; letter-spacing: 0; line-height: 1.3; } .p-top-journal__title { transition: all 0.4s var(--ease-out-cubic); transform-style: preserve-3d; transform-origin: 0 50% -0.5em; } .p-top-journal__download { position: absolute; display: flex; align-items: center; gap: 4px; justify-content: center; transform: rotateX(-90deg); transition: all 0.4s var(--ease-out-cubic); transform-style: preserve-3d; transform-origin: 0 50% -0.5em; } .p-top-journal__icon { width: calc(24 * 100vw / var(--base-width)); height: auto; aspect-ratio: 1/1; } .p-top-journal__icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-journal__text { font-size: calc(12 * 100vw / var(--base-width)); font-weight: 500; letter-spacing: 0; line-height: 1.63; } .p-top-bss__head { border: 1px solid #C4C4C4; padding: 24px 0; display: flex; flex-direction: column; align-items: center; } .p-top-bss__info { font-family: "Funnel Display", sans-serif; font-size: 1.4rem; font-weight: 400; letter-spacing: 0; line-height: 1.25; } @media screen and (max-width: 960px) { .p-top-bss__info { font-size: 1.3rem; } } .p-top-bss__image { margin-top: 18px; width: 150px; height: auto; aspect-ratio: 150/212; } .p-top-bss__image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-bss__text-area { margin-top: 30px; } .p-top-bss__text { font-family: "Funnel Display", sans-serif; font-size: 1.4rem; font-weight: 400; letter-spacing: 0; line-height: 1.25; word-break: break-all; } @media screen and (max-width: 960px) { .p-top-bss__text { font-size: 1.3rem; } } .p-top-bss__text span { font-weight: 700; color: #000; } .p-top-bss__text + .p-top-bss__text { margin-top: 1em; } .p-top-bss__pdf { margin-top: 55px; font-family: "Funnel Display", sans-serif; font-size: 1.4rem; font-weight: 400; letter-spacing: 0; line-height: 1.25; } @media screen and (max-width: 960px) { .p-top-bss__pdf { margin-top: 36px; font-size: 1.3rem; } } .p-top-bss__link { margin-top: 36px; } .p-top-bss__link a { display: flex; align-items: flex-end; gap: 7px; } .p-top-bss__link-image { width: 95px; height: auto; aspect-ratio: 95/41; } .p-top-bss__link-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-bss__link-text { font-family: "Funnel Display", sans-serif; font-size: 1.4rem; font-weight: 400; letter-spacing: 0; line-height: 2; text-decoration: underline; } @media screen and (max-width: 960px) { .p-top-bss__link-text { font-size: 1.3rem; } } .p-top-bss a { transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .p-top-bss a:hover { opacity: 0.6; } } .p-top-links { padding-top: calc(80 * 100vw / var(--base-width)); overflow: hidden; } .p-top-links__wrapper { display: grid; grid-template-columns: 1fr auto; gap: calc(45 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-links__wrapper { display: block; } } .p-top-links__content { order: 1; } .p-top-links .c-title { order: 2; } .p-top-links__block { display: grid; grid-template-columns: calc(234 * 100vw / var(--base-width)) 1fr; gap: calc(48 * 100vw / var(--base-width)); align-items: flex-start; } @media screen and (max-width: 960px) { .p-top-links__block { display: block; gap: calc(48 * 100vw / var(--base-width)); margin-top: calc(50 * 100vw / var(--base-width)); } } .p-top-links__block + .p-top-links__block { margin-top: calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-links__block + .p-top-links__block { margin-top: calc(60 * 100vw / var(--base-width)); } } .p-top-links__heading { white-space: nowrap; font-size: calc(18 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.8; } @media screen and (max-width: 960px) { .p-top-links__list { margin-top: calc(20 * 100vw / var(--base-width)); } } .p-top-links__item { position: relative; } .p-top-links__item::after { content: ""; position: absolute; top: 0; left: 50%; width: 110vw; height: 100%; background: #FFFFFF; mix-blend-mode: exclusion; transform: translateX(-50%) scaleX(0); } @media screen and (min-width: 961px) { .p-top-links__item:hover::after { transform: translateX(-50%) scaleX(1); } } .p-top-links__item a { position: relative; z-index: 1; display: block; text-decoration: underline; background: transparent; transition: color 0.6s var(--ease-out-cubic); font-size: calc(14 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.8; text-align: left; } @media screen and (max-width: 960px) { .p-top-links__item a { font-size: calc(13 * 100vw / var(--base-width)); } } .p-top-links__item a::before { content: "・"; } @media screen and (min-width: 961px) { .p-top-links__item a:hover { color: #000; } } .p-top-corporate { padding-top: calc(200 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-corporate { padding-top: calc(120 * 100vw / var(--base-width)); } } .p-top-corporate__wrapper { display: flex; gap: calc(90 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-corporate__wrapper { display: block; } } .p-top-corporate__text { margin-top: calc(80 * 100vw / var(--base-width)); font-size: calc(15 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.72; } @media screen and (max-width: 960px) { .p-top-corporate__text { margin-top: calc(50 * 100vw / var(--base-width)); } } .p-top-corporate__text span { display: inline-block; } .p-top-corporate__content { position: relative; width: 100%; height: auto; max-height: 80vh; aspect-ratio: 572/713; margin-right: calc(-80 * 100vw / var(--base-width)); border-top-left-radius: calc(14 * 100vw / var(--base-width)); border-bottom-left-radius: calc(14 * 100vw / var(--base-width)); border-top: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #fff; overflow: hidden; } @media screen and (max-width: 960px) { .p-top-corporate__content { margin-top: calc(50 * 100vw / var(--base-width)); aspect-ratio: 309/713; border-radius: calc(14 * 100vw / var(--base-width)); border: 1px solid #fff; } } .p-top-corporate__control { position: absolute; bottom: calc(8 * 100vw / var(--base-width)); right: calc(8 * 100vw / var(--base-width)); display: flex; flex-direction: column; gap: calc(6 * 100vw / var(--base-width)); } .p-top-corporate__counter { position: relative; display: flex; align-items: center; justify-content: center; border-radius: calc(8 * 100vw / var(--base-width)); background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); width: calc(74 * 100vw / var(--base-width)); height: calc(74 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-corporate__counter { width: calc(56 * 100vw / var(--base-width)); height: calc(56 * 100vw / var(--base-width)); } } .p-top-corporate__counter-num { position: relative; width: calc(32 * 100vw / var(--base-width)); height: calc(28 * 100vw / var(--base-width)); font-family: "Funnel Display", sans-serif; font-size: calc(14 * 100vw / var(--base-width)); font-weight: 500; letter-spacing: -0.03em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-corporate__counter-num { width: calc(24 * 100vw / var(--base-width)); height: calc(22 * 100vw / var(--base-width)); font-size: calc(11 * 100vw / var(--base-width)); } } .p-top-corporate__counter-current { position: absolute; top: -10%; left: 0; } .p-top-corporate__counter-total { position: absolute; bottom: 0; right: 0; } .p-top-corporate__counter-slash { position: absolute; bottom: 2px; left: 0; width: 1px; height: calc(38 * 100vw / var(--base-width)); background: #fff; transform: rotate(45deg); transform-origin: bottom left; } @media screen and (max-width: 960px) { .p-top-corporate__counter-slash { height: calc(28 * 100vw / var(--base-width)); } } .p-top-corporate__counter-bg { position: absolute; inset: 0; padding: 1px; border-radius: calc(11 * 100vw / var(--base-width)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; transition: all 1s; overflow: hidden; } .p-top-corporate__counter-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(240deg, rgba(255, 255, 255, 0) 30%, #FFFFFF 50%, rgba(255, 255, 255, 0) 70%); } .p-top-corporate__button { display: flex; align-items: center; justify-content: center; border-radius: calc(8 * 100vw / var(--base-width)); background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); width: calc(74 * 100vw / var(--base-width)); height: calc(74 * 100vw / var(--base-width)); padding: calc(25 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-corporate__button { width: calc(56 * 100vw / var(--base-width)); height: calc(56 * 100vw / var(--base-width)); padding: calc(19 * 100vw / var(--base-width)); } } .p-top-corporate__button.-next img { transform: rotate(-90deg); } .p-top-corporate__button.-prev img { transform: rotate(90deg); } .p-top-corporate__button-bg { position: absolute; inset: 0; padding: 1px; /* 枠の太さ */ border-radius: calc(11 * 100vw / var(--base-width)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; transition: all 1s; overflow: hidden; } .p-top-corporate__button-bg::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(240deg, rgba(255, 255, 255, 0) 30%, #FFFFFF 50%, rgba(255, 255, 255, 0) 70%); } @media screen and (min-width: 961px) { .p-top-corporate__button:hover .p-top-corporate__button-bg::before { transform: rotate(180deg); transition: all 0.7s cubic-bezier(0.25, 0, 0.2, 1); } } .p-top-corporate__button img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-corporate__list-wrapper { position: absolute; top: 50%; width: calc(1000 * 100vw / var(--base-width)); height: auto; aspect-ratio: 1/1; transform: translateX(-68%) translateY(-50%); } @media screen and (max-width: 960px) { .p-top-corporate__list-wrapper { transform: translateX(-63%) translateY(-50%); } } .p-top-corporate__list { width: 100%; height: 100%; position: relative; } .p-top-corporate__item { position: absolute; display: flex; align-items: center; justify-content: center; height: 2em; top: 50%; left: 50%; margin: -30px 0 0 -30px; transform-origin: left center; color: #fff; font-size: calc(30 * 100vw / var(--base-width)); font-weight: 500; letter-spacing: 0; line-height: 1.2; text-decoration: underline; opacity: 0.3; transition: all 0.4s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .p-top-corporate__item { font-size: calc(18 * 100vw / var(--base-width)); } } .p-top-corporate__item::before { content: ""; position: absolute; left: calc(-20 * 100vw / var(--base-width)); width: calc(12 * 100vw / var(--base-width)); height: calc(12 * 100vw / var(--base-width)); border-radius: 50%; background: #3EB358; transform: scale(0); transition: all 0.4s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .p-top-corporate__item::before { left: calc(-11 * 100vw / var(--base-width)); width: calc(6 * 100vw / var(--base-width)); height: calc(6 * 100vw / var(--base-width)); } } .p-top-corporate__item.is-active { opacity: 1; } .p-top-corporate__item.is-active::before { transform: scale(1); } .p-top-sponsored { padding: calc(200 * 100vw / var(--base-width)) 0 calc(140 * 100vw / var(--base-width)); overflow: hidden; } @media screen and (max-width: 960px) { .p-top-sponsored { padding-top: calc(120 * 100vw / var(--base-width)); } } .p-top-sponsored__wrapper { display: flex; overflow: hidden; width: 100%; } .p-top-sponsored__list { position: relative; display: flex; gap: calc(32 * 100vw / var(--base-width)); width: -moz-max-content; width: max-content; margin-top: calc(80 * 100vw / var(--base-width)); padding-right: calc(32 * 100vw / var(--base-width)); animation: scrollLeftLoop 40s linear infinite; will-change: transform; } @media screen and (max-width: 960px) { .p-top-sponsored__list { gap: calc(16 * 100vw / var(--base-width)); margin-top: calc(50 * 100vw / var(--base-width)); padding-right: calc(16 * 100vw / var(--base-width)); } } @keyframes scrollLeftLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .p-top-sponsored__item { position: relative; width: calc(263 * 100vw / var(--base-width)); height: calc(121 * 100vw / var(--base-width)); background: #fff; border-radius: calc(6 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-top-sponsored__item { width: calc(137 * 100vw / var(--base-width)); height: calc(63 * 100vw / var(--base-width)); border-radius: calc(3 * 100vw / var(--base-width)); } } .p-top-sponsored__item a { position: relative; z-index: 2; display: block; } .p-top-sponsored__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-contact__wrapper { position: relative; background: transparent; } @media screen and (min-width: 961px) { .p-top-contact a:hover .p-top-contact__icon { -webkit-mask-image: url(../images/icon_mail-mask.svg); mask-image: url(../images/icon_mail-mask.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background: #fff; } .p-top-contact a:hover .p-top-contact__icon svg { opacity: 0; } .p-top-contact a:hover .p-top-contact__title { font-variation-settings: "wght" 900; } } .p-top-contact__title { font-family: "Funnel Display", sans-serif; font-size: calc(200 * 100vw / var(--base-width)); font-weight: 600; letter-spacing: -0.03em; line-height: 0.6; font-variation-settings: "wght" 600; transition: all 0.6s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .p-top-contact__title { font-size: calc(58 * 100vw / var(--base-width)); } } .p-top-contact__address { margin-top: calc(20 * 100vw / var(--base-width)); font-family: "Funnel Display", sans-serif; font-size: calc(20 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.8; } @media screen and (max-width: 960px) { .p-top-contact__address { margin-top: calc(12 * 100vw / var(--base-width)); font-size: calc(18 * 100vw / var(--base-width)); } } .p-top-contact__icon { position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: calc(162 * 100vw / var(--base-width)); height: calc(162 * 100vw / var(--base-width)); border-radius: 50%; border: 1px solid #fff; transition: all 0.6s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .p-top-contact__icon { width: calc(42 * 100vw / var(--base-width)); height: calc(42 * 100vw / var(--base-width)); } } .p-top-contact__icon svg { width: calc(66 * 100vw / var(--base-width)); height: calc(53 * 100vw / var(--base-width)); -o-object-fit: contain; object-fit: contain; fill: #fff; transition: all 0.6s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .p-top-contact__icon svg { width: calc(18 * 100vw / var(--base-width)); height: calc(14 * 100vw / var(--base-width)); } } .p-lower { padding: 120px 120px 0; } @media screen and (max-width: 960px) { .p-lower { padding: calc(50 * 100vw / var(--base-width)) calc(33 * 100vw / var(--base-width)) 0; } } .p-lower .c-title__en { font-size: calc(100 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-lower .c-title__en { font-size: calc(50 * 100vw / var(--base-width)); } } .p-lower__content { max-width: 1280px; margin: 0 auto; padding: 80px 90px 0; } @media screen and (max-width: 960px) { .p-lower__content { padding: 50px 0 0; } } .p-news-archive__list { margin-top: calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-news-archive__list { margin-top: calc(50 * 100vw / var(--base-width)); } } .p-news-archive__item a { position: relative; display: flex; align-items: center; gap: 1em; padding: calc(26 * 100vw / var(--base-width)) 0; border-bottom: 1px solid #fff; transition: all 0.8s var(--ease-out-cubic); } @media screen and (max-width: 960px) { .p-news-archive__item a { flex-direction: column; align-items: flex-start; gap: 0; } } .p-news-archive__item:first-of-type a { padding-top: 0; } .p-news-archive__item a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: translate(-50%, 50%); opacity: 0; transition: left 1s var(--ease-out-cubic); box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2); } @media screen and (min-width: 961px) { .p-news-archive__item a:hover::before { opacity: 1; left: calc(100% - 4px); } } @media screen and (min-width: 961px) { .p-news-archive__item a:hover { opacity: 0.4; } } .p-news-archive__date { font-family: "Funnel Display", sans-serif; font-size: calc(15 * 100vw / var(--base-width)); font-weight: 400; letter-spacing: 0; line-height: 1.3; } .p-news-archive__text { font-size: calc(15 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.3; text-decoration: underline; } .p-news-single__title { font-size: 4rem; font-weight: 700; letter-spacing: 0; line-height: 1.45; } @media screen and (max-width: 960px) { .p-news-single__title { font-size: 2.4rem; } } .p-news-single__thumbnail { width: 100%; height: auto; margin-top: 80px; } @media screen and (max-width: 960px) { .p-news-single__thumbnail { margin-top: 50px; } } .p-news-single__editor { padding: 80px 0 0; } @media screen and (max-width: 960px) { .p-news-single__editor { padding: 50px 0 0; } } .p-news-single__editor > *:first-child { margin-top: 0; } .p-news-single__editor > *:first-child * { margin-top: 0; } .p-news-single__editor * + * { margin-top: 1em; } .p-news-single__editor * + h2 { margin-top: 80px; } @media screen and (max-width: 960px) { .p-news-single__editor * + h2 { margin-top: 50px; } } .p-news-single__editor h2 { font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 1.72; } .p-news-single__editor p { text-align: left; font-size: 1.5rem; font-weight: 400; line-height: 1.72; letter-spacing: 0; } .p-news-single__editor p + p { margin-top: 1em; } .p-news-single__editor strong { font-weight: 700; } .p-news-single__editor *:not(img) > a { font-weight: 500; text-decoration: underline; } .p-news-single__editor a { transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .p-news-single__editor a:hover { opacity: 0.6; } } .p-news-single__editor img { width: auto; max-width: 80%; min-width: 50%; height: auto; margin: 80px auto; } @media screen and (max-width: 960px) { .p-news-single__editor img { margin: 30px auto; } } .p-event-archive__upcoming { margin-top: calc(80 * 100vw / var(--base-width)); padding: calc(26 * 100vw / var(--base-width)); border: 1px solid #fff; border-radius: calc(11 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .p-event-archive__upcoming { margin-top: calc(50 * 100vw / var(--base-width)); } } .p-event-archive__upcoming .p-event-archive__heading { padding-bottom: calc(10 * 100vw / var(--base-width)); font-size: calc(20 * 100vw / var(--base-width)); } .p-event-archive__upcoming .p-event-archive__info { font-size: calc(14 * 100vw / var(--base-width)); } .p-event-archive__past { padding-top: calc(35 * 100vw / var(--base-width)); } .p-event-archive__past .p-event-archive__item { padding: calc(26 * 100vw / var(--base-width)) 0; border-top: 1px solid #fff; } .p-event-archive__past .p-event-archive__item:last-of-type { padding-bottom: 0; } .p-event-archive__past .p-event-archive__heading { padding-bottom: calc(26 * 100vw / var(--base-width)); font-size: calc(16 * 100vw / var(--base-width)); } .p-event-archive__past .p-event-archive__info { font-size: calc(12 * 100vw / var(--base-width)); } .p-event-archive__item a { display: block; width: 100%; height: 100%; transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .p-event-archive__item a:hover { opacity: 0.6; } } .p-event-archive__heading { font-size: calc(16 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.3; } .p-event-archive__date { font-family: "Funnel Display", sans-serif; font-size: calc(14 * 100vw / var(--base-width)); font-weight: 500; letter-spacing: 0; line-height: 1; } .p-event-archive__title { font-size: calc(15 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.63; } .p-event-archive__info { display: grid; grid-template-columns: auto 1fr; margin-top: calc(8 * 100vw / var(--base-width)); font-weight: 500; letter-spacing: 0; line-height: 1.63; font-feature-settings: normal; } .p-event-archive__info dd { margin-left: 1em; } .p-event-single__title { text-align: center; font-size: 4rem; font-weight: 700; letter-spacing: 0; line-height: 1; } @media screen and (max-width: 960px) { .p-event-single__title { font-size: 3.4rem; } } .p-event-single__title span { font-size: 2.4rem; } @media screen and (max-width: 960px) { .p-event-single__title span { font-size: 2rem; } } .p-event-single__table { margin-top: 30px; width: 100%; border: 1px solid #fff; } .p-event-single__table th { width: 183px; border: 1px solid #fff; padding: 22px 0; text-align: center; font-size: 1.8rem; font-weight: 700; letter-spacing: 0; line-height: 1; vertical-align: top; } @media screen and (max-width: 960px) { .p-event-single__table th { width: 75px; padding: 16px 0; font-size: 1.4rem; } } .p-event-single__table td { width: auto; border: 1px solid #fff; padding: 20px 38px; font-size: 1.8rem; font-weight: 500; letter-spacing: 0; line-height: 1.66; vertical-align: middle; text-align: left; } @media screen and (max-width: 960px) { .p-event-single__table td { padding: 15px 24px; font-size: 1.4rem; line-height: 1.2142; } } .p-event-single__table a { word-break: break-all; text-decoration: underline; transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .p-event-single__table a:hover { opacity: 0.6; } } @media screen and (max-width: 960px) { .p-event-single__table--detail th { vertical-align: middle; } } .p-event-single__table--access th { padding: 32px 0; } @media screen and (max-width: 960px) { .p-event-single__table--access th { padding: 22px 0; } } .p-event-single__table--access td { padding: 0; } .p-event-single__table--access iframe { width: 100%; height: auto; aspect-ratio: 680/400; vertical-align: bottom; } @media screen and (max-width: 960px) { .p-event-single__table--access iframe { aspect-ratio: 235/223; } } .p-event-single__table--overview th { padding: 32px 0; } @media screen and (max-width: 960px) { .p-event-single__table--overview th { padding: 22px 0; } } .p-event-single__table--overview td { padding: 28px 32px; } @media screen and (max-width: 960px) { .p-event-single__table--overview td { padding: 20px 24px; } } @media screen and (max-width: 960px) { .p-event-single__table--notes th { vertical-align: middle; } } .s-header__logo { position: fixed; top: 30px; left: 30px; z-index: 999; width: 68px; height: auto; aspect-ratio: 1/1; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } @media screen and (max-width: 960px) { .s-header__logo { width: 53px; top: auto; bottom: 20px; left: 20px; } } .s-header__logo.is-show { opacity: 1; pointer-events: visible; } .s-footer { position: relative; z-index: 1; padding: 250px 0 calc(80 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .s-footer { padding: calc(150 * 100vw / var(--base-width)) 0 calc(34 * 100vw / var(--base-width)); } } .s-footer__block { display: flex; gap: calc(22 * 100vw / var(--base-width)); align-items: center; margin-top: calc(100 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .s-footer__block { display: block; } } .s-footer__wrapper { display: flex; gap: calc(80 * 100vw / var(--base-width)); margin-top: calc(70 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .s-footer__wrapper { display: block; } } .s-footer__text { text-align: left; font-family: "Funnel Display", sans-serif; font-size: calc(28 * 100vw / var(--base-width)); font-weight: 600; letter-spacing: -0.04em; line-height: 1; } @media screen and (max-width: 960px) { .s-footer__text { font-size: calc(22 * 100vw / var(--base-width)); } } .s-footer__info { display: flex; align-items: center; gap: calc(14 * 100vw / var(--base-width)); } @media screen and (max-width: 960px) { .s-footer__info { margin-top: calc(18 * 100vw / var(--base-width)); } } .s-footer__logo { width: calc(40 * 100vw / var(--base-width)); height: auto; aspect-ratio: 1/1; } @media screen and (max-width: 960px) { .s-footer__list { margin-top: calc(58 * 100vw / var(--base-width)); } } .s-footer__info-text { font-size: calc(13 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.45; } .s-footer__item + .s-footer__item { margin-top: calc(10 * 100vw / var(--base-width)); } .s-footer__item a { font-family: "Funnel Display", sans-serif; font-size: calc(15 * 100vw / var(--base-width)); font-weight: 800; letter-spacing: 0; line-height: 1; } .s-footer__item li a { display: block; text-decoration: underline; font-size: calc(13 * 100vw / var(--base-width)); font-weight: 700; letter-spacing: 0; line-height: 1.72; transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .s-footer__item li a:hover { opacity: 0.6; } } .s-footer__item li a::before { content: "・"; } .s-footer__item .hover-flip__back { font-size: 0.8em; } .s-footer__links { margin-top: auto; margin-left: auto; } @media screen and (max-width: 960px) { .s-footer__links { margin-top: calc(30 * 100vw / var(--base-width)); } } .s-footer__link { opacity: 0.51; text-align: right; font-size: calc(10 * 100vw / var(--base-width)); font-weight: 400; letter-spacing: 0; line-height: 1.8; } .s-footer__link a { transition: all 0.4s var(--ease-out-cubic); } @media screen and (min-width: 961px) { .s-footer__link a:hover { opacity: 0.6; } } @media screen and (min-width: 961px) { .u-sp { display: none; } } @media screen and (max-width: 960px) { .u-pc { display: none; } } .u-mt05 { margin-top: 0.5em; } .u-mb05 { margin-bottom: 0.5em; } .u-pt05 { padding-top: 0.5em; } .u-pb05 { padding-bottom: 0.5em; } .u-mt1 { margin-top: 1em; } .u-mb1 { margin-bottom: 1em; } .u-pt1 { padding-top: 1em; } .u-pb1 { padding-bottom: 1em; } .u-mt2 { margin-top: 2em; } .u-mb2 { margin-bottom: 2em; } .u-pt2 { padding-top: 2em; } .u-pb2 { padding-bottom: 2em; } .u-mt3 { margin-top: 3em; } .u-mb3 { margin-bottom: 3em; } .u-pt3 { padding-top: 3em; } .u-pb3 { padding-bottom: 3em; } .u-mt4 { margin-top: 4em; } .u-mb4 { margin-bottom: 4em; } .u-pt4 { padding-top: 4em; } .u-pb4 { padding-bottom: 4em; } .u-mt5 { margin-top: 5em; } .u-mb5 { margin-bottom: 5em; } .u-pt5 { padding-top: 5em; } .u-pb5 { padding-bottom: 5em; } .u-white { color: #fff; fill: #fff; } .u-white * { color: #fff; fill: #fff; } .u-center { text-align: center; margin-left: auto; margin-right: auto; } .u-right { text-align: right; margin-left: auto; } .u-left { text-align: left; margin-right: auto; } @media screen and (min-width: 961px) { .u-sp { display: none !important; } } @media screen and (max-width: 960px) { .u-pc { display: none !important; } }