@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; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes scroll-down { 0% { transform: scale(1, 0); transform-origin: 0 0; } 50% { transform: scale(1, 1); transform-origin: 0 0; } 51% { transform: scale(1, 1); transform-origin: 0 100%; } 70% { opacity: 1; } 100% { transform: scale(1, 0); transform-origin: 0 100%; opacity: 0; } } @keyframes mask-animation { 0% { -webkit-mask-position: center bottom; mask-position: center bottom; opacity: 0; } 20% { opacity: 1; } 100% { -webkit-mask-position: center 0; mask-position: center 0; -webkit-mask-size: auto 500%; mask-size: auto 500%; opacity: 1; } } .js-scroll-view[data-scroll-view=fadeMask] img { -webkit-mask-image: url(../images/common/mask.webp); mask-image: url(../images/common/mask.webp); mask-mode: alpha; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: auto 300%; mask-size: auto 300%; opacity: 0; } .js-scroll-view.-animated[data-scroll-view=fadeMask] img { animation: mask-animation 3.5s cubic-bezier(0.1, 0.4, 0.25, 1) 0s forwards; } html { font-size: 62.5%; } body { background: #FFF; color: #1F2A39; font-family: "Zen Old Mincho", serif; font-size: 1.5rem; letter-spacing: 0; line-height: 2; text-align: justify; 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; } body.is-loaded .l-page { opacity: 1; transition: opacity 2s ease; } 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; } .l-page { opacity: 0; } .l-wrapper { position: relative; } @media screen and (min-width: 961px) { .l-wrapper { max-width: 1600px; width: 100%; margin: 0 auto; padding-inline: 250px; } } @media screen and (max-width: 1600px) { .l-wrapper { padding-inline: clamp(200px, 15.625vw, 250px); } } @media screen and (max-width: 960px) { .l-wrapper { padding-inline: 30px; } } @media screen and (min-width: 961px) { .l-inner { max-width: 1600px; padding-inline: 200px; margin-inline: auto; } } @media screen and (max-width: 1600px) { .l-inner { padding-inline: 12.5vw; } } @media screen and (max-width: 960px) { .l-inner { padding-inline: 30px; } } .l-inner--narrow { padding-inline: 100px; } @media screen and (max-width: 960px) { .l-inner--narrow { padding-inline: 30px; } } .l-main { width: 100%; overflow: hidden; } .c-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .c-loading__logo { position: absolute; width: 268px; height: auto; aspect-ratio: 268/164; -webkit-mask-image: url(../images/top/mv_title.svg); mask-image: url(../images/top/mv_title.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-color: #D9D9D9; opacity: 0; } @media screen and (max-width: 960px) { .c-loading__logo { width: 200px; } } .is-loaded .c-loading { opacity: 0; pointer-events: none; transition: opacity 2s ease; } .is-loaded.is-first-load .c-loading__logo { opacity: 1; background-color: #C29080; transition: opacity 0.8s ease 0.3s, background-color 1.5s ease 0.8s; } .is-loaded.is-first-load .c-loading { transition: opacity 2s ease 2s; } .c-svg-sprite { display: none; width: 0; height: 0; opacity: 0; overflow: hidden; } .c-title { position: absolute; z-index: 999; left: 60px; display: flex; flex-direction: column; align-items: center; gap: 27px; } @media screen and (max-width: 960px) { .c-title { position: static; gap: 12px; } } .c-title::before { content: ""; width: 70px; height: 70px; background: url(../images/common/title_deco.png) center center/contain; } @media screen and (max-width: 960px) { .c-title::before { width: 56px; height: 56px; } } .c-title__text { writing-mode: vertical-rl; color: #C29080; } @media screen and (max-width: 960px) { .c-title__text { writing-mode: horizontal-tb; text-align: center; } } .c-title__en { display: block; margin-left: 16px; font-family: "Barlow", sans-serif; font-size: 4.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; } @media screen and (max-width: 960px) { .c-title__en { display: flex; flex-direction: column; align-items: center; margin: 0; font-size: 3.4rem; line-height: 1.17; } } .c-title__en-num { display: inline-block; font-size: 2.6rem; margin-top: 16px; padding-left: 7px; border-left: 1px solid #C29080; } @media screen and (max-width: 960px) { .c-title__en-num { margin-top: 9px; padding: 0 0 7px; border-left: none; border-bottom: 1px solid #C29080; } } .c-title__jp { display: flex; align-items: center; gap: 10px; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .c-title__jp { display: block; margin-top: 12px; font-size: 1.6rem; line-height: 1.125; } } .c-title__jp::before { content: ""; width: 1px; height: 20px; background: #C29080; } @media screen and (max-width: 960px) { .c-title__jp::before { display: none; } } .c-title.c-title--horizontal { position: static; flex-direction: row; justify-content: center; } .c-title.c-title--horizontal .c-title__text { writing-mode: horizontal-tb; } .c-title.c-title--horizontal .c-title__en { margin: 0; } .c-title.c-title--horizontal .c-title__jp { gap: 10px; margin-top: 14px; } @media screen and (max-width: 960px) { .c-title.c-title--horizontal .c-title__jp { display: flex; } } .c-title.c-title--horizontal .c-title__jp::before { width: 20px; height: 1px; } @media screen and (max-width: 960px) { .c-title.c-title--horizontal .c-title__jp::before { display: block; } } .c-title-sub--horizontal { text-align: center; } .c-title-sub__en { font-family: "Barlow", sans-serif; font-size: 3.6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; } @media screen and (max-width: 960px) { .c-title-sub__en { display: block; font-size: 2.8rem; } } .c-title-sub__jp { margin-top: 18px; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .c-title-sub__jp { font-size: 1.6rem; } } .c-button { text-align: center; } .c-button--left { margin-top: 100px; text-align: left; } @media screen and (max-width: 960px) { .c-button--left { margin-top: 50px; text-align: center; } } .c-button--left + .c-button--left { margin-top: 30px; } @media screen and (max-width: 960px) { .c-button--left + .c-button--left { margin-top: 24px; } } .c-button--sm { text-align: right; } .c-button a { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 70px; min-width: 300px; width: auto; padding-bottom: 15px; } @media screen and (max-width: 960px) { .c-button a { gap: 16px; min-width: 220px; padding-bottom: 13px; } } .c-button--sm a { width: auto; min-width: auto; gap: 9px; padding: 0; transition: all 0.4s ease; } @media screen and (min-width: 961px) { .c-button--sm a:focus { opacity: 0.6; } .c-button--sm a:hover { opacity: 0.6; } } .c-button a:before, .c-button a:after { display: block; content: ""; position: absolute; left: 0; bottom: 0; border-bottom: 1px solid #C29080; width: 100%; } .c-button a:before { transition: transform 0.5s ease 0.5s; transform: scaleX(1); transform-origin: 100% 100%; } .c-button a:hover:before { transition: transform 0.5s ease; transform: scaleX(0); } .c-button a:after { transition: transform 0.5s ease; transform: scaleX(0); transform-origin: 0 0; } .c-button a:hover:after { transition: transform 0.5s ease 0.5s; transform: scaleX(1); } .c-button--sm a:before, .c-button--sm a:after { display: none; } .c-button__text { color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; } @media screen and (max-width: 960px) { .c-button__text { font-size: 1.6rem; } } .c-button.-insta .c-button__text { display: flex; align-items: center; gap: 15px; } .c-button.-insta .c-button__text:before { content: ""; width: 20px; height: 20px; background: url(../images/common/icon_insta.svg) center center/contain; } .c-button__icon { width: 13px; height: 13px; stroke: #C29080; } .p-bg-change-box { background-color: #FFFFFF; transition: background-color 0.8s ease-out; transition-property: background-color, color; } .p-bg-change-box.-color01 { background-color: #FFFFFF; } .p-bg-change-box.-color02 { background-color: #F0F0F0; } .p-bg-change-box.-color03 { background-color: rgba(178, 153, 125, 0.2); } .c-cursor-icon { position: fixed; z-index: 9999; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); width: 90px; height: 90px; border-radius: 50%; background: #1F2A39; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } @media screen and (max-width: 960px) { .c-cursor-icon { display: none; } } .c-cursor-icon.is-active { opacity: 1; } .c-cursor-icon svg { width: 27px; height: 27px; stroke: #fff; transform: rotate(135deg); } .c-modal { position: fixed; top: 0; left: 0; z-index: 999; width: 100vw; height: 100dvh; overflow: auto; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.8s ease-in-out; } .c-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; } .c-modal.is-open .c-modal__bg { padding: 0; } .c-modal.is-open .c-modal__main { opacity: 1; } .c-modal__container { width: 100%; height: 100%; } .c-modal__close { position: fixed; top: 10px; right: 10px; z-index: 999; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #C29080; } @media screen and (max-width: 960px) { .c-modal__close { width: 40px; height: 40px; } } .c-modal__close::before { content: ""; position: absolute; width: 30px; height: 1px; background: #fff; transform: rotate(45deg); } @media screen and (max-width: 960px) { .c-modal__close::before { width: 24px; } } .c-modal__close::after { content: ""; position: absolute; width: 30px; height: 1px; background: #fff; transform: rotate(-45deg); } @media screen and (max-width: 960px) { .c-modal__close::after { width: 24px; } } .c-modal__bg { width: 100%; height: 100%; padding: 20px; transition: padding 0.8s 1s ease-in-out; } .c-modal__main { position: relative; z-index: 998; opacity: 0; transition: opacity 1.2s 0.6s ease-in-out; } .c-swiper-button-wrap { display: flex; align-items: center; gap: 30px; } .c-swiper-button.-next { transform: scaleX(-1); } .c-swiper-button svg { width: 22px; height: 42px; stroke: #1F2A39; } .c-swiper-pagination { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; width: 20px; height: -moz-fit-content; height: fit-content; } .c-swiper-pagination__num { font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0; line-height: 1.11; } @media screen and (max-width: 960px) { .c-swiper-pagination__num { font-size: 1.4rem; } } .c-swiper-pagination__separator { width: 100%; height: 1px; background: #1F2A39; } .c-swiper-scrollbar { width: 100%; height: 2px; background: #F0F0F0; } .c-swiper-scrollbar .swiper-scrollbar-drag { background: #C29080; } .c-breadcrumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 20px 100px; background: #fff; font-size: 1.2rem; font-weight: 400; letter-spacing: 0; line-height: 1; color: rgba(31, 42, 57, 0.5); } @media screen and (max-width: 960px) { .c-breadcrumb { padding: 13px 30px; } } .c-breadcrumb a { color: #C29080; transition: all 0.6s ease; color: #1F2A39; } .c-breadcrumb a:hover { opacity: 0.5; } .c-breadcrumb__arrow { width: 5px; height: 8px; background: url(../images/common/breadcrumb_arrow.svg) center center/cover; } .c-scroll-indicator { position: absolute; display: none; background: rgba(0, 0, 0, 0.75); width: 100%; height: 100%; opacity: 1; pointer-events: none; transition: all 0.6s; } .c-scroll-indicator.is-active { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; } .c-scroll-indicator.is-fadeOut { opacity: 0; } .c-scroll-indicator__icon { width: 77px; height: 90px; } .c-scroll-indicator__icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-scroll-indicator__text { text-align: center; color: #fff; font-size: 1.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1; } .c-faq-item { background: #fff; color: #1F2A39; position: relative; padding: 0 50px; } @media screen and (max-width: 960px) { .c-faq-item { padding: 0 20px; } } .c-faq-item + .c-faq-item { margin-top: 20px; } .c-faq-item__question { position: relative; display: flex; align-items: center; cursor: pointer; padding: 25px 35px 25px 0; } @media screen and (max-width: 960px) { .c-faq-item__question { padding: 20px 34px 20px 0; } } .c-faq-item__question-text { display: flex; align-items: center; gap: 20px; position: relative; font-weight: 400; font-size: 2rem; line-height: 1.5; letter-spacing: 0.06em; pointer-events: none; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .c-faq-item__question-text { gap: 11px; font-size: 1.4rem; letter-spacing: 0.02em; } } .c-faq-item__question-text::before { content: ""; flex-shrink: 0; width: 10px; height: 2px; background: #C29080; } @media screen and (max-width: 960px) { .c-faq-item__question-text::before { height: 1px; } } .c-faq-item__answer { height: 0; overflow: hidden; } .c-faq-item__content { padding: 22px 0 38px; border-top: 1px solid #F0F0F0; } @media screen and (max-width: 960px) { .c-faq-item__content { padding-inline: 10px; } } .c-faq-item__answer-text { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.14; } @media screen and (max-width: 960px) { .c-faq-item__answer-text { font-size: 1.2rem; } } .c-faq-item__toggle { position: absolute; right: 0; display: block; width: 20px; height: 20px; pointer-events: none; } @media screen and (max-width: 960px) { .c-faq-item__toggle { width: 16px; height: 16px; } } .c-faq-item__toggle::before, .c-faq-item__toggle::after { content: ""; display: inline-block; width: 100%; height: 2px; background: #C29080; position: absolute; top: 50%; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .c-faq-item__toggle::before, .c-faq-item__toggle::after { height: 1px; } } .c-faq-item__toggle::after { transform: rotate(90deg); } .c-faq-item__question.is-active .c-faq-item__question-text { color: #C29080; } .c-faq-item__question.is-active .c-faq-item__toggle::after { transform: rotate(180deg); } .c-faq-item__button-wrapper { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 20px; } @media screen and (max-width: 960px) { .c-faq-item__button-wrapper { gap: 24px; margin-top: 30px; } } @media screen and (max-width: 960px) { .c-faq-item__button-wrapper .c-button { width: 100%; } .c-faq-item__button-wrapper .c-button a { width: 100%; } } .c-item-information { position: relative; background: #fff; box-shadow: 2.7px 2.7px 5.4px 0px rgba(0, 0, 0, 0.15); } .c-item-information__flag { position: absolute; top: 0; left: 10px; display: grid; place-items: center; width: 50px; height: 70px; background: #C29080; } @media screen and (max-width: 960px) { .c-item-information__flag { left: 4px; width: 30px; height: 40px; } } .c-item-information__flag p { color: #fff; font-family: "Barlow", sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: 0; line-height: 1.125; text-align: center; } @media screen and (max-width: 960px) { .c-item-information__flag p { font-size: 1rem; line-height: 1.1; } } .c-item-information a { display: block; width: 100%; height: 100%; padding: 13px; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .c-item-information a { padding: 5px; } } .c-item-information a:hover { opacity: 0.6; } .c-item-information__image { width: 100%; height: auto; aspect-ratio: 1/1; } .c-item-information__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-item-information__text-area { margin-top: 19px; text-align: left; } @media screen and (max-width: 960px) { .c-item-information__text-area { margin-top: 8px; } } .c-item-information__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #9C9292; padding-bottom: 14px; } @media screen and (max-width: 960px) { .c-item-information__head { padding-bottom: 6px; } } .c-item-information__date { font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 400; letter-spacing: 0; line-height: 1; } @media screen and (max-width: 960px) { .c-item-information__date { font-size: 1rem; } } .c-item-information__date .-day { font-weight: 500; } .c-item-information__tag { padding: 4px 16px; border: 1px solid #9C9292; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0; line-height: 1; } @media screen and (max-width: 960px) { .c-item-information__tag { font-size: 1rem; padding: 5px 7px; } } .c-item-information__title { margin-top: 15px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.13em; line-height: 1.575; text-align: left; } @media screen and (max-width: 960px) { .c-item-information__title { margin-top: 9px; font-size: 1.2rem; line-height: 1.3; } } .c-item-information__text { margin-top: 15px; font-size: 1.2rem; font-weight: 400; letter-spacing: 0; line-height: 1.8333; } @media screen and (max-width: 960px) { .c-item-information__text { font-size: 1rem; line-height: 1.6; } } .c-pagination { margin-top: 75px; } @media screen and (max-width: 960px) { .c-pagination { margin-top: 30px; } } .c-pagination ul { display: flex; gap: 20px; justify-content: center; align-items: center; } @media screen and (max-width: 960px) { .c-pagination ul { gap: 10px; } } .c-pagination .page-numbers:not(.next):not(.prev) { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(194, 144, 128, 0.6); margin: 0 !important; color: #fff; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .c-pagination .page-numbers:not(.next):not(.prev) { width: 24px; height: 24px; font-size: 1.2rem; } } .c-pagination .page-numbers.current:not(.next):not(.prev) { background: #C29080; } .c-pagination .page-numbers.next span, .c-pagination .page-numbers.prev span { position: relative; display: flex; justify-content: center; align-items: center; width: 14px; height: 14px; } .c-pagination .page-numbers.next span::before, .c-pagination .page-numbers.prev span::before { content: ""; position: absolute; width: 10px; height: 10px; border-top: solid 1px #1F2A39; border-right: solid 1px #1F2A39; } .c-pagination .page-numbers.prev span::before { transform: rotate(-135deg); } .c-pagination .page-numbers.next span::before { transform: rotate(45deg); } .c-pagination a { transition: all 0.4s ease; } .c-pagination a:hover { opacity: 0.6; } .c-pagination-single { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 180px; } @media screen and (max-width: 960px) { .c-pagination-single { gap: 20px; margin-top: 120px; } } .c-pagination-single__arrow a { display: flex; align-items: center; gap: 20px; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .c-pagination-single__arrow a { gap: 14px; } } .c-pagination-single__arrow a:hover { opacity: 0.6; } .c-pagination-single__arrow svg { width: 13px; height: 13px; stroke: #C29080; transform: rotate(45deg); } .c-pagination-single__arrow.-prev svg { transform: rotate(-45deg) scale(-1, 1); } .c-pagination-single__arrow p { color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; } @media screen and (max-width: 960px) { .c-pagination-single__arrow p { font-size: 1.6rem; } } .c-pagination-single__return { padding: 0 30px; border-left: 1px solid #1F2A39; border-right: 1px solid #1F2A39; } @media screen and (max-width: 960px) { .c-pagination-single__return { padding: 0 20px; } } .c-pagination-single__return a { transition: all 0.4s ease; } .c-pagination-single__return a:hover { opacity: 0.6; } .c-pagination-single__return p { font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .c-pagination-single__return p { font-size: 1.6rem; } } .c-post { padding-top: 50px; } .c-post__editor h2 { font-size: 2.8rem; font-weight: 400; letter-spacing: 0; line-height: 2.5; } @media screen and (max-width: 960px) { .c-post__editor h2 { font-size: 1.5rem; line-height: 1.8; } } .c-post__editor h3 { font-size: 2rem; font-weight: 700; letter-spacing: 0; line-height: 2.5; } @media screen and (max-width: 960px) { .c-post__editor h3 { font-size: 1.4rem; line-height: 1.8; } } .c-post__editor * + h2, .c-post__editor * + h3 { margin-top: 2em; } .c-post__editor p { font-size: 1.6rem; font-weight: 400; letter-spacing: 0; line-height: 2.5; } @media screen and (max-width: 960px) { .c-post__editor p { font-size: 1.5rem; } } .c-post__editor * + p { margin-top: 1em; } .c-post__editor strong { font-weight: 700; } .c-post__editor a { text-decoration: underline; transition: all 0.3s ease; } .c-post__editor a:hover { opacity: 0.6; } .c-post__editor ul, .c-post__editor ol { margin: 30px 0 20px; padding: 22px 54px; background: #F0F0F0; } @media screen and (max-width: 960px) { .c-post__editor ul, .c-post__editor ol { margin: 20px 0 10px; padding: 20px; } } .c-post__editor ul li { position: relative; padding-left: 30px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; line-height: 2.5; } @media screen and (max-width: 960px) { .c-post__editor ul li { padding-left: 20px; font-size: 1.5rem; } } .c-post__editor ul li::before { content: ""; position: absolute; left: 0; top: 1.25em; left: 0; width: 10px; height: 2px; background: #C29080; transform: translateY(-50%); } .c-post__editor ol li { list-style-type: decimal; list-style-position: inside; padding-left: 1.25em; text-indent: -1.25em; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; line-height: 2.5; } @media screen and (max-width: 960px) { .c-post__editor ol li { font-size: 1.5rem; } } .c-post__list { display: flex; flex-wrap: wrap; margin: 30px 0 20px; } @media screen and (max-width: 960px) { .c-post__list { display: block; margin: 20px 0 10px; } } .c-post__list p { font-size: 1.6rem; font-weight: 400; letter-spacing: 0; line-height: 2.5; } @media screen and (max-width: 960px) { .c-post__list p { font-size: 1.5rem; } } .c-post__list p + p { margin-top: 1em; } .c-post__list dt:not(:first-of-type) { margin-top: 40px; } @media screen and (max-width: 960px) { .c-post__list dt:not(:first-of-type) { margin-top: 14px; } } .c-post__list dd:not(:first-of-type) { margin-top: 40px; } @media screen and (max-width: 960px) { .c-post__list dd:not(:first-of-type) { margin-top: 0; } } .c-post__list dt { width: 230px; } @media screen and (max-width: 960px) { .c-post__list dt { width: 100%; } } .c-post__list dd { width: calc(100% - 230px); } @media screen and (max-width: 960px) { .c-post__list dd { width: 100%; } } .c-post__button { display: flex; align-items: center; justify-content: center; margin-top: 50px; } @media screen and (max-width: 960px) { .c-post__button { margin-top: 30px; } } .c-post__button a { padding: 30px 60px; background: #C29080; transition: all 0.8s ease; } @media screen and (max-width: 960px) { .c-post__button a { padding: 20px; } } .c-post__button p { color: #fff; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; text-align: center; } @media screen and (max-width: 960px) { .c-post__button p { font-size: 1.6rem; letter-spacing: 0.05em; } } .c-post__button span { display: block; margin-top: 15px; font-size: 1.2rem; } @media screen and (max-width: 960px) { .c-post__button span { margin-top: 10px; } } .c-post__button a:hover { opacity: 0.6; } .p-top-mv.-pc { position: relative; width: 100%; height: 100svh; overflow: hidden; } @media screen and (max-width: 960px) { .p-top-mv.-pc { display: none; } } .p-top-mv.-sp { display: none; } @media screen and (max-width: 960px) { .p-top-mv.-sp { position: relative; display: block; } } .p-top-mv__wrapper { position: absolute; display: flex; } .p-top-mv__main { height: 100%; } @media screen and (max-width: 960px) { .p-top-mv__main { position: relative; } } .p-top-mv__main-image { width: auto; height: 100svh; aspect-ratio: 76/90; } .p-top-mv__scroll { position: relative; display: flex; padding-right: 6.6vh; } @media screen and (max-width: 960px) { .p-top-mv__scroll { display: block; overflow: hidden; padding: 0; } } .p-top-mv__scroll .swiper-wrapper { transition-timing-function: linear; } .p-top-mv__scroll-image { position: relative; z-index: 2; width: auto; } .p-top-mv__scroll-image:nth-of-type(1) { height: 47.77vh; aspect-ratio: 42/43; margin-left: 8.88vh; } .p-top-mv__scroll-image:nth-of-type(2) { height: 35.55vh; aspect-ratio: 22/32; position: absolute; bottom: 7.77vh; left: 13.33vh; } .p-top-mv__scroll-image:nth-of-type(3) { height: 35.55vh; aspect-ratio: 25/32; margin-top: 16.66vh; margin-left: 10vh; } .p-top-mv__scroll-image:nth-of-type(4) { height: 24.44vh; aspect-ratio: 16/22; position: absolute; bottom: 0; left: 75.55vh; } .p-top-mv__scroll-image:nth-of-type(5) { height: 46.66vh; aspect-ratio: 66/42; margin-top: 40vh; margin-left: 20vh; } .p-top-mv__scroll-image:nth-of-type(6) { height: 31.11vh; aspect-ratio: 20/28; position: absolute; top: 0; left: 144.44vh; } .p-top-mv__scroll-image:nth-of-type(7) { height: 35.55vh; aspect-ratio: 34/32; margin-top: 15.55vh; margin-left: 11.11vh; } .p-top-mv__scroll-image:nth-of-type(8) { height: 30vh; aspect-ratio: 20/27; margin-top: 44.44vh; margin-left: -4.44vh; } .p-top-mv__scroll-image:nth-of-type(9) { height: 28.88vh; aspect-ratio: 46/26; } .p-top-mv__scroll-image:nth-of-type(10) { height: 57.77vh; aspect-ratio: 72/52; margin-top: auto; margin-left: -35.55vh; } .p-top-mv__scroll-image:nth-of-type(11) { height: 22.22vh; aspect-ratio: 28/20; margin-top: 13.33vh; margin-left: -4.44vh; } .p-top-mv__scroll-image:nth-of-type(12) { height: 26.66vh; aspect-ratio: 36/24; margin-top: 53.33vh; margin-left: -11.11vh; } .p-top-mv__scroll-image:nth-of-type(13) { height: 35.55vh; aspect-ratio: 24/32; margin-top: 22.22vh; margin-left: -4.44vh; } .p-top-mv__scroll-image:nth-of-type(14) { height: 26.66vh; aspect-ratio: 16/24; margin-top: auto; margin-left: -2.22vh; } .p-top-mv__scroll-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-mv__scroll-obj01 { position: absolute; bottom: 0; left: 57vh; width: 80vh; height: auto; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, #2E3180 0%, rgba(73, 155, 164, 0) 100%); opacity: 0.2; } @media screen and (max-width: 960px) { .p-top-mv__scroll-obj01 { left: 0; width: 80vw; } } .p-top-mv__scroll-obj02 { position: absolute; top: 49vh; left: 45.66vh; width: 131.11vh; height: auto; aspect-ratio: 1181/755; background: radial-gradient(50% 50% at 50% 50%, #C29080 0%, rgba(233, 211, 204, 0) 100%); opacity: 0.3; } @media screen and (max-width: 960px) { .p-top-mv__scroll-obj02 { left: auto; right: 10vw; bottom: 40vh; width: 60vw; } } .p-top-mv__scroll-obj03 { position: absolute; bottom: 3.33vh; left: 129.88vh; width: 176.66vh; height: auto; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, #2E3180 0%, rgba(73, 155, 164, 0) 100%); opacity: 0.2; } @media screen and (max-width: 960px) { .p-top-mv__scroll-obj03 { bottom: auto; top: 0; left: auto; right: 0; width: 90vw; } } .p-top-mv__scroll-obj04 { position: absolute; bottom: 18.11vh; right: 80vh; width: 131.22vh; height: auto; aspect-ratio: 1181/755; background: radial-gradient(50% 50% at 50% 50%, #2E3180 0%, rgba(73, 155, 164, 0) 100%); opacity: 0.2; } .p-top-mv__img.-sp { display: none; } @media screen and (max-width: 960px) { .p-top-mv__img.-sp { display: flex; width: -moz-max-content; width: max-content; padding-right: 10%; } } @media screen and (max-width: 960px) { .p-top-mv__img img { flex-shrink: 0; width: 2335px; height: 450px; } } .p-top-mv__catch { position: absolute; z-index: 1; bottom: 6.66vh; left: 6.66vh; } @media screen and (max-width: 960px) { .p-top-mv__catch { pointer-events: none; bottom: 30px; left: 30px; } } .p-top-mv__catch span { display: inline-block; padding: 9px 14px; background: rgba(194, 144, 128, 0.8); color: #fff; font-size: 2.6rem; font-weight: 400; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-mv__catch span { font-size: 1.8rem; padding: 6px 10px; } } .p-top-mv__catch span:not(:first-of-type) { margin-top: 6px; } @media screen and (max-width: 960px) { .p-top-mv__catch span:not(:first-of-type) { margin-top: 6px; } } .p-top-mv__deco { position: absolute; bottom: 38.88vh; right: -8.885vh; z-index: 2; width: 17.77vh; height: auto; aspect-ratio: 1/1; animation: rotate 80s linear infinite; } @media screen and (max-width: 960px) { .p-top-mv__deco { bottom: -50px; left: calc(100vw - 80px); width: 100px; pointer-events: none; } } .p-top-mv__deco img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-mv__swipe { position: relative; width: 2px; height: 40px; margin-top: 10px; transform: rotate(-90deg); transform-origin: left top; } .p-top-mv__swipe::after { content: ""; display: block; width: 2px; height: 40px; background: #D9D9D9; } .p-top-mv__swipe::before { content: ""; position: absolute; bottom: 0; width: 2px; height: 40px; background: #C29080; animation: scroll-down 2.5s cubic-bezier(0.15, 0.41, 0.69, 0.94) infinite; } .p-top-mv__text-area { position: absolute; bottom: 7.11vh; right: 13.1875vw; } @media screen and (max-width: 960px) { .p-top-mv__text-area { position: static; margin-top: 30px; padding: 0 20px; } } .p-top-mv__title { width: 262px; } .p-top-mv__text { margin-top: 16px; padding: 0 10px; color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.7142; } .p-top-mv__button { margin: 30px auto 0; width: 160px; height: 40px; } .p-top-mv__button a { display: flex; align-items: center; justify-content: center; background: #C29080; width: 100%; height: 100%; border-radius: 30px; color: #fff; font-family: "Barlow", sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: 0, 6em; line-height: 1; } .p-top-concept { position: relative; margin-top: 100px; padding-bottom: 36px; } @media screen and (max-width: 960px) { .p-top-concept { margin-top: 100px; padding-bottom: 50px; } } .p-top-concept__wrapper { display: flex; align-items: center; padding: 84px 0 100px; } @media screen and (max-width: 960px) { .p-top-concept__wrapper { display: block; padding: 47px 0 0; } } .p-top-concept__text-area { position: relative; z-index: 1; } .p-top-concept__read { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-top-concept__read { margin-top: 47px; font-size: 2.2rem; line-height: 2; } } .p-top-concept__text { margin-top: 46px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.1em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-top-concept__text { margin-top: 27px; font-size: 1.4rem; letter-spacing: 0.02em; line-height: 2.4285; } } .p-top-concept__main-image { position: absolute; right: 0; width: 47.5%; height: auto; aspect-ratio: 76/70; } @media screen and (max-width: 960px) { .p-top-concept__main-image { position: static; width: auto; margin-right: calc(50% - 50vw); aspect-ratio: 345/276; } } .p-top-concept__main-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-concept__sub-image { position: absolute; left: 0; bottom: -210px; width: 200px; height: auto; aspect-ratio: 20/28; } @media screen and (max-width: 960px) { .p-top-concept__sub-image { display: none; } } .p-top-concept__scroll-container { display: flex; gap: 73px; width: 100%; overflow: hidden; margin-top: 150px; } @media screen and (max-width: 960px) { .p-top-concept__scroll-container { margin-top: 78px; gap: 30px; } } .p-top-concept__scroll-track { display: flex; gap: 73px; animation: scroll 40s linear infinite; } @media screen and (max-width: 960px) { .p-top-concept__scroll-track { gap: 30px; } } .p-top-concept__scroll-image { width: 1263px; } @media screen and (max-width: 960px) { .p-top-concept__scroll-image { width: 543px; } } .p-top-photo { margin-top: 100px; padding-bottom: 100px; overflow: hidden; } .p-top-photo__wrapper { padding-top: 74px; } @media screen and (max-width: 960px) { .p-top-photo__container { display: flex; flex-direction: column; } } .p-top-photo__container + .p-top-photo__container { margin-top: 190px; } @media screen and (max-width: 960px) { .p-top-photo__container + .p-top-photo__container { margin-top: 100px; } } .p-top-photo__head { display: flex; align-items: flex-end; justify-content: space-between; margin-right: -100px; } @media screen and (max-width: 960px) { .p-top-photo__head { display: contents; margin: 0; } } .p-top-photo__slider { position: relative; margin-top: 60px; margin-right: calc(50% - 50vw); } @media screen and (max-width: 960px) { .p-top-photo__slider { margin-top: 28px; } } .p-top-photo__slider-button-wrap { position: absolute; top: 320px; left: -30px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; transform: translateX(-100%); } @media screen and (max-width: 960px) { .p-top-photo__slider-button-wrap { display: none; } } .p-top-photo__slider.-movie .p-top-photo__slider-button-wrap { top: 150px; } .p-top-photo__slider-pagination { position: absolute; top: 740px; left: -30px; transform: translate(-100%, -100%); } @media screen and (max-width: 960px) { .p-top-photo__slider-pagination { top: -26px; left: auto; right: 30px; transform: translate(0, -100%); } } .p-top-photo__slider.-movie .p-top-photo__slider-pagination { top: 400px; } @media screen and (max-width: 960px) { .p-top-photo__slider.-movie .p-top-photo__slider-pagination { top: -26px; } } .p-top-photo__item { width: 700px !important; } @media screen and (max-width: 960px) { .p-top-photo__item { width: 315px !important; } } .p-top-photo__image { width: 100%; height: auto; aspect-ratio: 70/74; } .p-top-photo__slider.-movie .p-top-photo__image { aspect-ratio: 70/40; } .p-top-photo__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-photo__info-area { display: flex; align-items: center; gap: 30px; margin-top: 36px; } @media screen and (max-width: 960px) { .p-top-photo__info-area { position: relative; gap: 0; justify-content: space-between; min-height: 80px; margin-top: 20px; } } .p-top-photo__slider.-movie .p-top-photo__text { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.5; } @media screen and (max-width: 960px) { .p-top-photo__slider.-movie .p-top-photo__text { font-size: 1.4rem; } } .p-top-photo__area { font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } .p-top-photo__name-en { margin-top: 14px; text-align: left; font-family: "Barlow", sans-serif; font-size: 3.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-photo__name-en { font-size: 2.4rem; } } .p-top-photo__name-jp { margin-top: 24px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-photo__name-jp { margin-top: 18px; font-size: 1.4rem; } } .p-top-photo__map { width: 126px; height: 100px; } @media screen and (max-width: 960px) { .p-top-photo__map { position: absolute; top: -5px; right: 20px; width: 101px; height: 80px; } } @media screen and (max-width: 960px) { .p-top-photo .c-button { order: 3; margin-top: 50px; } } .p-top-area { position: relative; margin-top: 100px; color: #fff; overflow: hidden; } @media screen and (max-width: 960px) { .p-top-area { margin-top: 0; padding: 100px 0; background: #fff; } } .p-top-area > .c-title { top: 120px; } .p-top-area > .c-title::before { display: none; } @media screen and (max-width: 960px) { .p-top-area > .c-title::before { display: block; } } .p-top-area__wrapper { display: flex; } @media screen and (max-width: 960px) { .p-top-area__wrapper { flex-direction: column; gap: 20px; margin-top: 58px; padding: 0 20px; } } .p-top-area__intro { position: relative; display: flex; flex-direction: column; justify-content: center; width: 50%; height: 900px; max-height: 100svh; min-height: 700px; transition: all 0.8s ease; cursor: pointer; } .p-top-area__intro--area01 { background: url(../images/top/area01_bg.webp) center center/cover; } @media screen and (max-width: 960px) { .p-top-area__intro--area01 { background: url(../images/top/area01_bg-sp.webp) center center/cover; } } .p-top-area__intro--area02 { background: url(../images/top/area02_bg.webp) center center/cover; } @media screen and (max-width: 960px) { .p-top-area__intro--area02 { background: url(../images/top/area02_bg-sp.webp) center center/cover; } } @media screen and (max-width: 960px) { .p-top-area__intro { justify-content: flex-start; width: 100%; height: 520px; min-height: auto; padding: 50px 30px 0; } } .p-top-area__intro::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.3; pointer-events: none; transition: all 0.8s ease; } @media screen and (min-width: 961px) { .p-top-area__intro:hover { flex-shrink: 0; width: 56.25%; } .p-top-area__intro:hover .p-top-area__read { max-height: 200px; opacity: 1; padding-top: 42px; } } @media screen and (min-width: 961px) { .p-top-area__intro:hover::after { background: #FFFFFF; opacity: 0.8; } } .p-top-area__heading { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .p-top-area__map { width: 100px; height: 79px; } @media screen and (max-width: 960px) { .p-top-area__map { width: 71px; height: 56px; } } .p-top-area__map img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-area__title { margin-top: 24px; color: #C29080; text-align: center; } @media screen and (max-width: 960px) { .p-top-area__title { margin-top: 12px; } } .p-top-area__title-en { font-family: "Barlow", sans-serif; font-size: 4.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-area__title-en { font-size: 3rem; } } .p-top-area__title-en span { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-size: 2.4rem; letter-spacing: 0.1em; } @media screen and (max-width: 960px) { .p-top-area__title-en span { font-size: 1.8rem; } } .p-top-area__title-en span::before, .p-top-area__title-en span::after { content: ""; width: 30px; height: 1px; background: #C29080; } @media screen and (max-width: 960px) { .p-top-area__title-en span::before, .p-top-area__title-en span::after { width: 20px; } } .p-top-area__title-jp { margin-top: 22px; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-area__title-jp { margin-top: 14px; font-size: 1.4rem; } } .p-top-area__read { position: relative; z-index: 1; margin-top: 82px; color: #1F2A39; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.1em; line-height: 3.125; text-align: center; } @media screen and (max-width: 960px) { .p-top-area__read { margin-top: 50px; font-size: 1.4rem; line-height: 2.42; } } .p-top-area__intro .p-top-area__read { max-height: 0; opacity: 0; margin-top: 0; transition: all 0.8s ease; } @media screen and (max-width: 960px) { .p-top-area__intro .p-top-area__read { max-height: none; opacity: 1; margin-top: 30px; color: #fff; } } .p-top-area__more { position: absolute; bottom: 0; left: 50%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 13px; color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; transform: translateX(-50%); transition: all 0.8s ease; } @media screen and (max-width: 960px) { .p-top-area__more { font-size: 1.6rem; } } .p-top-area__more::after { content: ""; width: 2px; height: 100px; background: #fff; } @media screen and (max-width: 960px) { .p-top-area__more::after { width: 1px; height: 50px; } } .p-top-area__more::before { content: ""; position: absolute; bottom: 0; width: 2px; height: 100px; background: #C29080; animation: scroll-down 2.5s cubic-bezier(0.15, 0.41, 0.69, 0.94) infinite; } @media screen and (max-width: 960px) { .p-top-area__more::before { width: 1px; height: 50px; } } .p-top-area__content { padding: 188px 0; color: #1F2A39; } @media screen and (max-width: 960px) { .p-top-area__content { padding: 40px 0; } } @media screen and (max-width: 960px) { .p-top-area__content .c-title { display: none; } } .p-top-area__content .c-button { margin-top: 160px; } @media screen and (max-width: 960px) { .p-top-area__content .c-button { margin-top: 63px; } } .p-top-area__content .c-button a { white-space: nowrap; } .p-top-area__content .c-button--sm { margin-top: 10px; } .p-top-area__bg { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100svh; pointer-events: none; } .p-top-area__bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFFFFF; opacity: var(--bg-opacity, 0.8); pointer-events: none; transition: opacity 0.8s ease; } .p-top-area__bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-area__features { margin-top: 160px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 100px; } @media screen and (max-width: 960px) { .p-top-area__features { display: flex; flex-direction: column; margin-top: 80px; } } .p-top-area__feature:nth-of-type(2) { margin-top: 170px; } @media screen and (max-width: 960px) { .p-top-area__feature:nth-of-type(2) { margin: 0; } } .p-top-area__feature-image { width: 100%; height: auto; aspect-ratio: 50/34; } .p-top-area__feature-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-area__feature .c-title-sub { margin-top: 33px; } @media screen and (max-width: 960px) { .p-top-area__feature .c-title-sub { margin-top: 26px; } } @media screen and (max-width: 960px) { .p-top-area__feature .c-title-sub__en { font-size: 2.6rem; } } .p-top-area__feature-text { margin-top: 30px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-top-area__feature-text { font-size: 1.2rem; } } .p-top-area__facility { padding-top: 170px; } @media screen and (max-width: 960px) { .p-top-area__facility { padding-top: 90px; } } .p-top-area__facility-title { display: flex; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid #C29080; color: #C29080; font-family: "Barlow", sans-serif; font-size: 3.6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-area__facility-title { flex-direction: column; align-items: center; gap: 16px; padding-bottom: 0; border-bottom: none; font-size: 2.8rem; } } .p-top-area__facility-title span { margin-top: 5px; font-size: 1.4rem; letter-spacing: 0.02em; } @media screen and (max-width: 960px) { .p-top-area__facility-title span { font-size: 1.2rem; } } .p-top-area__facility-item { display: flex; align-items: stretch; gap: 80px; margin-top: 100px; } @media screen and (max-width: 960px) { .p-top-area__facility-item { flex-direction: column-reverse; gap: 40px; margin-top: 58px; } } .p-top-area__facility-item + .p-top-area__facility-item { margin-top: 160px; } @media screen and (max-width: 960px) { .p-top-area__facility-item + .p-top-area__facility-item { margin-top: 100px; } } .p-top-area__facility-text-area { flex-shrink: 0; width: 420px; } @media screen and (max-width: 960px) { .p-top-area__facility-text-area { width: 100%; } } .p-top-area__facility-logo { margin: 0 auto; width: -moz-fit-content; width: fit-content; height: 56px; } @media screen and (max-width: 960px) { .p-top-area__facility-logo { height: 45px; } } .p-top-area__facility-logo img { width: auto; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-area__facility-name { margin-top: 60px; text-align: center; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-area__facility-name { margin-top: 34px; font-size: 1.2rem; } } .p-top-area__facility-text { margin-top: 50px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-top-area__facility-text { margin-top: 34px; font-size: 1.2rem; } } .p-top-area__facility-sub-image { display: grid; grid-template-columns: 65.71% 33.33%; justify-content: space-between; margin-top: 50px; width: 100%; height: auto; aspect-ratio: 42/17; } @media screen and (max-width: 960px) { .p-top-area__facility-sub-image { display: none; } } .p-top-area__facility-sub-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-area__facility-main-image { width: 100%; } @media screen and (max-width: 960px) { .p-top-area__facility-main-image { width: auto; margin: 0 calc(50% - 50vw); } } .p-top-area__facility-main-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-costume { margin-top: 100px; padding-bottom: 200px; overflow: hidden; } @media screen and (max-width: 960px) { .p-top-costume { margin: 0; padding: 100px 0; } } .p-top-costume__mv { position: relative; margin-right: calc(50% - 50vw); padding-top: 100px; } @media screen and (max-width: 960px) { .p-top-costume__mv { margin-top: 58px; padding: 0; } } .p-top-costume__mv-image { width: 100%; height: auto; aspect-ratio: 1350/740; } @media screen and (max-width: 960px) { .p-top-costume__mv-image { aspect-ratio: 345/260; } } .p-top-costume__mv-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-costume__mv-text { position: absolute; bottom: 0; left: 0; width: 460px; padding: 60px 60px 0 0; background: #fff; color: #1F2A39; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-top-costume__mv-text { position: relative; z-index: 0; width: 315px; margin-top: -45px; padding: 33px 40px 0 0; font-size: 1.2rem; } } .p-top-costume__list { position: relative; display: flex; justify-content: space-between; gap: 20px; margin-top: 120px; } @media screen and (max-width: 960px) { .p-top-costume__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 27px; margin-top: 90px; } } .p-top-costume__list::before { content: ""; position: absolute; top: -347px; right: -415px; width: 500px; height: auto; aspect-ratio: 1/1; background: url(../images/common/deco_circle.svg) center/contain no-repeat; animation: rotate 80s linear infinite; } @media screen and (max-width: 960px) { .p-top-costume__list::before { top: -110px; right: -138px; width: 240px; height: 240px; } } .p-top-costume__item { position: relative; z-index: 1; width: 240px; } @media screen and (max-width: 960px) { .p-top-costume__item { width: 100%; } } .p-top-costume__item:nth-of-type(even) { margin-top: 80px; } @media screen and (max-width: 960px) { .p-top-costume__item:nth-of-type(even) { margin-top: 40px; } } .p-top-costume__text { position: absolute; z-index: 1; top: 12px; left: 8px; transform: translateY(-100%); } @media screen and (max-width: 960px) { .p-top-costume__text { height: 30px; } } .p-top-costume__text img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-top-costume .c-button { margin-top: 90px; } @media screen and (max-width: 960px) { .p-top-costume .c-button { margin-top: 62px; } } .p-top-faq { margin-top: 100px; } .p-top-faq__list { position: relative; padding-top: 100px; } @media screen and (max-width: 960px) { .p-top-faq__list { margin-top: 50px; padding: 0; } } .p-top-faq__list::before { content: ""; position: absolute; bottom: -350px; right: -450px; width: 500px; height: auto; aspect-ratio: 1/1; background: url(../images/common/deco_circle.svg) center/contain no-repeat; animation: rotate 80s linear infinite; } @media screen and (max-width: 960px) { .p-top-faq__list::before { bottom: -330px; right: -150px; width: 240px; height: 240px; } } .p-top-faq__item { background: #fff; color: #1F2A39; position: relative; padding: 0 50px; } @media screen and (max-width: 960px) { .p-top-faq__item { padding: 0 20px; } } .p-top-faq__item + .p-top-faq__item { margin-top: 20px; } .p-top-faq__question { position: relative; display: flex; align-items: center; cursor: pointer; padding: 25px 0; } @media screen and (max-width: 960px) { .p-top-faq__question { padding: 20px 34px 20px 0; } } .p-top-faq__question-text { display: flex; align-items: center; gap: 20px; position: relative; font-weight: 400; font-size: 2rem; line-height: 1.5; letter-spacing: 0.06em; pointer-events: none; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .p-top-faq__question-text { gap: 11px; font-size: 1.4rem; } } .p-top-faq__question-text::before { content: ""; width: 10px; height: 2px; background: #C29080; } @media screen and (max-width: 960px) { .p-top-faq__question-text::before { height: 1px; } } .p-top-faq__answer { height: 0; overflow: hidden; } .p-top-faq__answer-text { border-top: 1px solid #F0F0F0; padding: 22px 0 38px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.14; } @media screen and (max-width: 960px) { .p-top-faq__answer-text { padding: 20px 10px 40px; } } .p-top-faq__toggle { position: absolute; right: 0; display: block; width: 20px; height: 20px; pointer-events: none; } @media screen and (max-width: 960px) { .p-top-faq__toggle { width: 16px; height: 16px; } } .p-top-faq__toggle::before, .p-top-faq__toggle::after { content: ""; display: inline-block; width: 100%; height: 2px; background: #C29080; position: absolute; top: 50%; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .p-top-faq__toggle::before, .p-top-faq__toggle::after { height: 1px; } } .p-top-faq__toggle::after { transform: rotate(90deg); } .p-top-faq__question.is-active .p-top-faq__question-text { color: #C29080; } .p-top-faq__question.is-active .p-top-faq__toggle::after { transform: rotate(180deg); } .p-top-faq .c-button { margin-top: 90px; } @media screen and (max-width: 960px) { .p-top-faq .c-button { margin-top: 60px; } } .p-top-infomation { margin-top: 100px; padding-bottom: 200px; } @media screen and (max-width: 960px) { .p-top-infomation { margin: 0; padding: 100px 0; } } .p-top-infomation__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 47px; padding-top: 100px; } @media screen and (max-width: 960px) { .p-top-infomation__list { display: flex; flex-direction: column; gap: 60px; margin-top: 58px; padding: 0; } } .p-top-infomation__list::before { content: ""; position: absolute; bottom: -626px; left: -92px; width: 500px; height: auto; aspect-ratio: 1/1; background: url(../images/common/deco_circle.svg) center/contain no-repeat; animation: rotate 80s linear infinite; } @media screen and (max-width: 960px) { .p-top-infomation__list::before { bottom: -316px; left: -158px; width: 240px; height: 240px; } } .p-top-infomation__item { width: 100%; } @media screen and (max-width: 960px) { .p-top-infomation__item a { display: flex; align-items: flex-start; gap: 20px; } } .p-top-infomation__image { width: 100%; height: auto; aspect-ratio: 1/1; } @media screen and (max-width: 960px) { .p-top-infomation__image { flex-shrink: 0; width: 130px; } } .p-top-infomation__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-top-infomation__date { display: flex; align-items: baseline; gap: 10px; margin-top: 27px; color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-top-infomation__date { margin: 0; } } .p-top-infomation__date span { font-size: 1.6rem; } .p-top-infomation__title { margin-top: 10px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.14; } @media screen and (max-width: 960px) { .p-top-infomation__title { margin-top: 17px; font-size: 1.2rem; } } .p-top-infomation .c-button { margin-top: 54px; } @media screen and (max-width: 960px) { .p-top-infomation .c-button { margin-top: 60px; } } .p-lower-mv { position: relative; width: 100%; height: 100svh; } @media screen and (max-width: 960px) { .p-lower-mv { aspect-ratio: auto; } } .p-lower-mv::before { content: ""; position: absolute; bottom: -250px; right: -250px; width: 500px; height: auto; aspect-ratio: 1/1; background: url(../images/common/deco_circle.svg) center/contain no-repeat; animation: rotate 80s linear infinite; } @media screen and (max-width: 960px) { .p-lower-mv::before { bottom: -120px; right: -120px; width: 240px; } } .p-lower-mv__image { width: 100%; height: 100%; } .p-lower-mv__image::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 320px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); } @media screen and (max-width: 960px) { .p-lower-mv__image::after { height: 360px; } } .p-lower-mv__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-lower-mv__text-area { position: absolute; bottom: 80px; left: 100px; color: #C29080; } @media screen and (max-width: 960px) { .p-lower-mv__text-area { bottom: 40px; left: 0; padding: 0 30px; } } .p-lower-mv__logo { width: 280px; height: auto; aspect-ratio: 280/47; } @media screen and (max-width: 960px) { .p-lower-mv__logo { width: 200px; } } .p-lower-mv__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-lower-mv__title { margin-top: 24px; font-family: "Barlow", sans-serif; font-size: 7rem; font-weight: 500; letter-spacing: 0.02em; line-height: 0.6; text-transform: uppercase; text-align: left; } @media screen and (max-width: 960px) { .p-lower-mv__title { margin-top: 7px; font-size: 4rem; line-height: 1; } } .p-lower-mv__title-sub { display: flex; align-items: center; gap: 10px; margin-top: 37px; font-size: 2rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; } @media screen and (max-width: 960px) { .p-lower-mv__title-sub { margin-top: 13px; font-size: 1.8rem; } } .p-lower-mv__title-sub::before { content: ""; width: 20px; height: 1px; background: #C29080; } .p-lower-mv__catch { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; color: #C29080; } .p-lower-mv__catch-en { font-family: "Barlow", sans-serif; font-size: 5rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-lower-mv__catch-en { font-size: 3.6rem; } } .p-lower-mv__catch-jp { margin-top: 30px; font-size: 2.4rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1; } @media screen and (max-width: 960px) { .p-lower-mv__catch-jp { margin-top: 20px; font-size: 1.8rem; } } .p-lower-intro { position: relative; padding: 160px 0 200px; text-align: center; } @media screen and (max-width: 960px) { .p-lower-intro { padding: 100px 0; } } .p-lower-intro__title { display: flex; flex-direction: column; align-items: center; gap: 42px; font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2; } @media screen and (max-width: 960px) { .p-lower-intro__title { gap: 22px; font-size: 2.1rem; } } .p-lower-intro__title::before { content: ""; width: 70px; height: 70px; background: url(../images/common/title_deco.png) center center/contain; } @media screen and (max-width: 960px) { .p-lower-intro__title::before { width: 56px; height: 56px; } } .p-lower-intro__text { margin-top: 27px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-lower-intro__text { text-align: left; margin-top: 20px; font-size: 1.4rem; line-height: 2.2857; } } .p-lower-intro__obj01 { position: absolute; top: -110px; left: -350px; width: 770px; height: auto; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, #C29080 0%, rgba(233, 211, 204, 0) 100%); pointer-events: none; } @media screen and (max-width: 960px) { .p-lower-intro__obj01 { top: -30px; left: -190px; width: 360px; } } .p-lower-intro__obj02 { position: absolute; bottom: -185px; right: 0; width: 435px; height: auto; aspect-ratio: 1/1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, #2E3180 0%, rgba(73, 155, 164, 0) 100%); } @media screen and (max-width: 960px) { .p-lower-intro__obj02 { bottom: -80px; right: -230px; width: 400px; } } .p-lower-hero { position: relative; padding: 260px 0 180px; text-align: center; } @media screen and (max-width: 960px) { .p-lower-hero { padding: 200px 0 130px; } } .p-lower-hero__title { display: flex; flex-direction: column; align-items: center; gap: 42px; font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2; } @media screen and (max-width: 960px) { .p-lower-hero__title { gap: 32px; font-size: 2.6rem; line-height: 1.3; } } .p-lower-hero__title::before { content: ""; width: 70px; height: 70px; background: url(../images/common/title_deco.png) center center/contain; } .p-lower-hero__text { margin-top: 27px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-lower-hero__text { text-align: left; margin-top: 20px; font-size: 1.4rem; line-height: 2.2857; } } .p-lower-hero__obj01 { position: absolute; top: -110px; left: -350px; width: 770px; height: auto; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, #C29080 0%, rgba(233, 211, 204, 0) 100%); pointer-events: none; } @media screen and (max-width: 960px) { .p-lower-hero__obj01 { top: -30px; left: -190px; width: 360px; } } .p-lower-hero__obj02 { position: absolute; bottom: -185px; right: 0; width: 435px; height: auto; aspect-ratio: 1/1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, #2E3180 0%, rgba(73, 155, 164, 0) 100%); } @media screen and (max-width: 960px) { .p-lower-hero__obj02 { bottom: -80px; right: -230px; width: 400px; } } .p-facility-list { padding: 200px 0; background: #fff; } @media screen and (max-width: 960px) { .p-facility-list { padding: 90px 0; } } .p-facility-list__title { text-align: center; font-family: "Barlow", sans-serif; font-size: 3.6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-facility-list__title { font-size: 2.8rem; } } .p-facility-list__text { margin-top: 26px; text-align: center; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } @media screen and (max-width: 960px) { .p-facility-list__text { margin-top: 17px; } } .p-facility-list__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 100px 200px; margin-top: 60px; } @media screen and (max-width: 960px) { .p-facility-list__list { grid-template-columns: 1fr; gap: 90px; margin-top: 80px; } } .p-facility-list__item { position: relative; } .p-facility-list__item:nth-child(odd)::after { content: ""; position: absolute; top: 0; right: -100px; width: 1px; height: 100%; background: #C3C3C3; transform: translateX(50%); } .p-facility-list__image { width: 100%; height: auto; aspect-ratio: 50/30; } .p-facility-list__logo { width: -moz-fit-content; width: fit-content; height: 47px; margin: 30px auto 0; } @media screen and (max-width: 960px) { .p-facility-list__logo { margin-top: 23px; } } .p-facility-list__logo img { width: auto; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-facility-list__name { text-align: center; margin-top: 27px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.125; } @media screen and (max-width: 960px) { .p-facility-list__name { margin-top: 24px; font-size: 1.2rem; } } .p-facility-list__info { display: flex; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #C3C3C3; } .p-facility-list__tel { flex-shrink: 0; font-family: "Barlow", sans-serif; font-size: 2.6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.3846; } @media screen and (max-width: 960px) { .p-facility-list__tel { font-size: 1.8rem; } } .p-facility-list__sns { margin-left: auto; } .p-facility-list__sns-icon { width: 31px; height: 29px; fill: #C29080; } .p-facility-list__contact a { display: flex; align-items: center; gap: 10px; margin-left: 40px; color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-facility-list__contact a { gap: 5px; margin-left: 18px; font-size: 1.6rem; letter-spacing: 0.02em; } } .p-facility-list__contact-icon { width: 13px; height: 13px; stroke: #C29080; } @media screen and (max-width: 960px) { .p-facility-list__contact-icon { width: 12px; height: 12px; } } .p-plan-list { overflow: hidden; } @media screen and (max-width: 960px) { .p-plan-list { padding: 100px 0; } } .p-plan-list--lower { background: rgba(178, 153, 125, 0.2); } .p-plan-list__slider { margin-top: 100px; padding: 100px 0 200px; } @media screen and (max-width: 960px) { .p-plan-list__slider { position: relative; margin: 56px 0 0; padding: 0; } } .p-plan-list__slider .swiper { width: 100vw; } @media screen and (max-width: 960px) { .p-plan-list__slider .swiper { width: 100%; } } .p-plan-list__item { position: relative; max-width: 100%; width: 1000px !important; height: auto; padding-top: 40px; } @media screen and (max-width: 960px) { .p-plan-list__item { padding-top: 27px; } } .p-plan-list__item a { display: flex; height: 100%; transition: all 0.4s ease; } .p-plan-list__item a:hover { opacity: 0.6; } @media screen and (max-width: 960px) { .p-plan-list__item a { display: block; } } .p-plan-list__image { flex-shrink: 0; width: 500px; height: auto; aspect-ratio: 50/39; } @media screen and (max-width: 960px) { .p-plan-list__image { width: 100%; } } .p-plan-list__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-plan-list__info-area { width: 100%; background: #fff; color: #1F2A39; padding: 40px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); } @media screen and (max-width: 960px) { .p-plan-list__info-area { height: 100%; padding: 25px; } } .p-plan-list__area { position: absolute; top: 0; left: 0; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan-list__area { font-size: 1.2rem; } } .p-plan-list__facility { display: flex; align-items: center; gap: 4px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan-list__facility { gap: 7px; font-size: 1.2rem; } } .p-plan-list__facility::before { content: ""; width: 10px; height: 2px; background: #C29080; } .p-plan-list__title { margin-top: 12px; font-size: 2.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.5; } @media screen and (max-width: 960px) { .p-plan-list__title { font-size: 2rem; } } .p-plan-list__tag-wrap { display: flex; align-items: flex-end; gap: 10px; } @media screen and (max-width: 960px) { .p-plan-list__tag-wrap { gap: 4px; } } .p-plan-list__tag-list { display: flex; gap: 40px; margin-top: 12px; } @media screen and (max-width: 960px) { .p-plan-list__tag-list { gap: 24px; } } .p-plan-list__tag-item { position: relative; display: flex; align-items: center; justify-content: center; min-width: 80px; height: 30px; background: #1F2A39; padding: 0 17px; color: #fff; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan-list__tag-item { min-width: 54px; height: 24px; padding: 0 6px; font-size: 1.3rem; } } .p-plan-list__tag-item:not(:last-of-type)::before { content: ""; position: absolute; right: -10px; width: 20px; height: 2px; background: #C29080; transform: translateX(100%); } @media screen and (max-width: 960px) { .p-plan-list__tag-item:not(:last-of-type)::before { right: -5px; width: 14px; } } .p-plan-list__tag-item:not(:last-of-type)::after { content: ""; position: absolute; right: -10px; width: 20px; height: 2px; background: #C29080; transform: translateX(100%) rotate(90deg); } @media screen and (max-width: 960px) { .p-plan-list__tag-item:not(:last-of-type)::after { right: -5px; width: 14px; } } .p-plan-list__tag-text { color: #C29080; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5; } @media screen and (max-width: 960px) { .p-plan-list__tag-text { font-size: 1.1rem; } } .p-plan-list__price { margin-top: 12px; padding-bottom: 6px; color: #C29080; border-bottom: 1px solid #C29080; } .p-plan-list__label { margin-right: 12px; font-size: 2rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan-list__label { font-size: 1.5rem; letter-spacing: 0; } } .p-plan-list__currency { font-size: 3rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan-list__currency { font-size: 2.6rem; letter-spacing: 0; } } .p-plan-list__amount { font-family: "Barlow", sans-serif; font-size: 4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan-list__amount { font-size: 3.2rem; letter-spacing: 0; } } .p-plan-list__tax { font-size: 1.4rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan-list__tax { font-size: 1.2rem; letter-spacing: 0; } } .p-plan-list__text { margin-top: 12px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.14; } @media screen and (max-width: 960px) { .p-plan-list__text { font-size: 1.2rem; } } .p-plan-list__bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 60px; } @media screen and (max-width: 960px) { .p-plan-list__bottom { justify-content: center; margin: 60px 0 0; } } @media screen and (max-width: 960px) { .p-plan-list__slider-button { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1; top: 264px; width: 40px; height: 40px; border-radius: 50%; background: #1F2A39; } } @media screen and (max-width: 960px) { .p-plan-list__slider-button svg { width: 8px; height: 16px; stroke: #fff; } } @media screen and (max-width: 960px) { .p-plan-list__slider-button.-prev { left: 0; transform: translateX(-50%); } } @media screen and (max-width: 960px) { .p-plan-list__slider-button.-next { right: 0; transform: translateX(50%) scaleX(-1); } } @media screen and (max-width: 960px) { .p-plan-list__slider-pagination { position: absolute; top: -26px; left: auto; right: 0; } } .p-photo-list { padding: 200px 0; background: #F0F0F0; } @media screen and (max-width: 960px) { .p-photo-list { padding: 100px 0; } } .p-photo-list__desc { margin-top: 60px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-photo-list__desc { margin-top: 30px; font-size: 1.4rem; } } .p-photo-list__slider { position: relative; margin-top: 63px; } @media screen and (max-width: 960px) { .p-photo-list__slider { margin-top: 50px; } } .p-photo-list__slider .swiper { width: 100vw; } .p-photo-list__item { width: 700px; } @media screen and (max-width: 960px) { .p-photo-list__item { width: 315px; } } .p-photo-list__image { width: 100%; height: auto; aspect-ratio: 70/40; } .p-photo-list__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-photo-list__info-area { display: flex; align-items: center; gap: 30px; margin-top: 36px; } @media screen and (max-width: 960px) { .p-photo-list__info-area { position: relative; gap: 0; justify-content: space-between; min-height: 80px; margin-top: 20px; } } .p-photo-list__area { font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } .p-photo-list__title { margin-top: 14px; text-align: left; font-family: "Barlow", sans-serif; font-size: 3.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-photo-list__title { font-size: 2.4rem; } } .p-photo-list__text { margin-top: 24px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-photo-list__text { margin-top: 18px; font-size: 1.4rem; } } .p-photo-list__map { width: 126px; height: 100px; } @media screen and (max-width: 960px) { .p-photo-list__map { position: absolute; top: -5px; right: 20px; width: 101px; height: 80px; } } .p-photo-list__bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 84px; } @media screen and (max-width: 960px) { .p-photo-list__bottom { justify-content: center; margin: 60px 0 0; } } @media screen and (max-width: 960px) { .p-photo-list__slider-button { display: none; } } @media screen and (max-width: 960px) { .p-photo-list__slider-pagination { position: absolute; top: -10px; left: auto; right: 0; transform: translateY(-100%); } } .p-contact-footer { padding: 200px 0; background: url(../images/top/contact_bg.webp) center center/cover; text-align: center; color: #fff; } @media screen and (max-width: 960px) { .p-contact-footer { padding: 100px 0; } } .p-contact-footer__title { text-align: center; color: #C29080; } .p-contact-footer__title-en { font-family: "Barlow", sans-serif; font-size: 4.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-contact-footer__title-en { font-size: 3.4rem; } } .p-contact-footer__title-jp { margin-top: 10px; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-contact-footer__title-jp { font-size: 1.6rem; } } .p-contact-footer__text { margin-top: 55px; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-contact-footer__text { margin-top: 38px; font-size: 1.2rem; line-height: 2.16; } } .p-contact-footer__list { display: flex; justify-content: center; gap: 20px; margin-top: 60px; color: #fff; } @media screen and (max-width: 960px) { .p-contact-footer__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 32px; padding-inline: 30px; } } .p-contact-footer__item a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 220px; height: 130px; background: #C29080; padding-bottom: 10px; transition: all 0.4s ease; } @media screen and (min-width: 961px) { .p-contact-footer__item a:focus { opacity: 0.6; } .p-contact-footer__item a:hover { opacity: 0.6; } } @media screen and (max-width: 960px) { .p-contact-footer__item a { width: 100%; height: 125px; } } .p-contact-footer__item-title { text-align: center; } .p-contact-footer__item-title-en { display: block; margin-top: 10px; font-family: "Barlow", sans-serif; font-size: 2.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-contact-footer__item-title-en { font-size: 1.8rem; } } .p-contact-footer__item-title-jp { margin-top: 12px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-contact-footer__item-title-jp { font-size: 1.2rem; } } .p-contact-footer__item-arrow { position: absolute; right: 10px; bottom: 10px; width: 13px; height: 13px; stroke: #fff; } @media screen and (max-width: 960px) { .p-contact-footer__item-arrow { width: 11px; height: 11px; } } .p-contact-footer__tel { display: inline-block; margin-top: 55px; padding-bottom: 16px; border-bottom: 1px solid #C29080; color: #C29080; font-family: "Barlow", sans-serif; font-size: 5rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-contact-footer__tel { padding-bottom: 12px; font-size: 3.2rem; } } .p-contact-footer__time { margin-top: 24px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; } @media screen and (max-width: 960px) { .p-contact-footer__time { margin-top: 20px; font-size: 1.2rem; } } .p-instagram { position: relative; padding: 200px 0; } @media screen and (max-width: 960px) { .p-instagram { padding: 100px 0; } } .p-instagram__scroll { display: flex; } .p-instagram__list { display: flex; gap: 10px; padding-right: 10px; animation: scroll 40s linear infinite; } @media screen and (max-width: 960px) { .p-instagram__list { gap: 5px; padding-right: 5px; animation: scroll 40s linear infinite; } } .p-instagram__item { width: 200px; height: auto; aspect-ratio: 1/1; flex-shrink: 0; } @media screen and (max-width: 960px) { .p-instagram__item { width: 100px; } } .p-instagram__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-instagram .c-title { margin-top: 60px; } @media screen and (max-width: 960px) { .p-instagram .c-title { margin-top: 52px; } } .p-instagram .c-button { margin-top: 40px; } @media screen and (max-width: 960px) { .p-instagram .c-button { margin-top: 37px; } } .p-photography-archive__intro { position: relative; display: flex; justify-content: space-between; gap: 200px; max-width: 1600px; margin: 180px auto 0; padding-inline: 100px; } @media screen and (max-width: 960px) { .p-photography-archive__intro { display: block; margin-top: 94px; padding-inline: 30px; } } .p-photography-archive__intro-title { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.14; } @media screen and (max-width: 960px) { .p-photography-archive__intro-title { font-size: 2.2rem; } } .p-photography-archive__intro-text { width: 600px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-photography-archive__intro-text { width: 100%; margin-top: 30px; font-size: 1.4rem; line-height: 2.42; } } .p-photography-archive__obj01 { position: absolute; top: -20px; left: -290px; width: 600px; height: auto; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, #2E3180 0%, rgba(73, 155, 164, 0) 100%); opacity: 0.2; } @media screen and (max-width: 960px) { .p-photography-archive__obj01 { top: -123px; left: -250px; width: 400px; } } .p-photography-archive__obj02 { position: absolute; top: -90px; left: 140px; width: 567px; height: auto; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, #C29080 0%, rgba(233, 211, 204, 0) 100%); opacity: 0.3; } @media screen and (max-width: 960px) { .p-photography-archive__obj02 { top: 0; left: 0; width: 200px; } } .p-photography-archive__article { margin-top: 180px; } @media screen and (max-width: 960px) { .p-photography-archive__article { margin-top: 86px; } } .p-photography-archive__head { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding-bottom: 40px; border-bottom: 3px solid #F0F0F0; } @media screen and (max-width: 960px) { .p-photography-archive__head { display: block; border: none; padding: 0 30px; } } .p-photography-archive__tag-list { display: flex; align-items: center; justify-content: center; gap: 10px 56px; flex-wrap: wrap; } @media screen and (max-width: 960px) { .p-photography-archive__tag-list { gap: 17px 43px; justify-content: flex-start; } } .p-photography-archive__tag-item { position: relative; display: flex; align-items: center; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.6; cursor: pointer; } @media screen and (max-width: 960px) { .p-photography-archive__tag-item { font-size: 1.4rem; } } .p-photography-archive__tag-item:not(:last-of-type)::after { content: ""; position: absolute; right: -28px; width: 1px; height: 18px; background: #C3C3C3; transform: translateX(-50%); } @media screen and (max-width: 960px) { .p-photography-archive__tag-item:not(:last-of-type)::after { height: 14px; } } .p-photography-archive__tag-item.is-active { color: #C29080; } .p-photography-archive__tag-item.is-active::before { content: ""; position: absolute; bottom: -40px; left: 50%; width: calc(100% - 56px); min-width: 60px; height: 3px; background: #C29080; transform: translate(-50%, 100%); } @media screen and (max-width: 960px) { .p-photography-archive__tag-item.is-active::before { display: none; } } .p-photography-archive__filter { position: absolute; right: 0; bottom: 30px; } @media screen and (max-width: 960px) { .p-photography-archive__filter { position: relative; bottom: auto; } } .p-photography-archive__filter-button { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: 50px; padding: 13px 32px; background: #1F2A39; border-top-left-radius: 50px; border-bottom-left-radius: 50px; } @media screen and (max-width: 960px) { .p-photography-archive__filter-button { height: 46px; margin: 40px auto 0; border-radius: 50px; } } .p-photography-archive__filter-button.is-active { padding-right: 50px; } .p-photography-archive__filter-icon { width: 24px; height: 24px; } @media screen and (max-width: 960px) { .p-photography-archive__filter-icon { width: 20px; height: 20px; } } .p-photography-archive__filter-text { color: #fff; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-photography-archive__filter-text { font-size: 1.6rem; } } .p-photography-archive__filter-close { position: absolute; right: 16px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; transition: all 0.4s ease; opacity: 0; } .p-photography-archive__filter-button.is-active .p-photography-archive__filter-close { opacity: 1; } .p-photography-archive__filter-close::before, .p-photography-archive__filter-close::after { content: ""; position: absolute; width: 100%; height: 2px; border-radius: 2px; background: #C29080; } .p-photography-archive__filter-close::before { transform: rotate(-135deg); } .p-photography-archive__filter-close::after { transform: rotate(135deg); } .p-photography-archive__filter-menu { position: absolute; top: -40px; right: 0; z-index: 2; width: 700px; background: rgba(240, 240, 240, 0.95); padding: 110px 0 80px 80px; opacity: 0; pointer-events: none; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .p-photography-archive__filter-menu { position: absolute; top: -40px; width: 100%; padding: 110px 30px 30px; } } .p-photography-archive__filter-menu.is-active { opacity: 1; pointer-events: visible; } .p-photography-archive__filter-group + .p-photography-archive__filter-group { margin-top: 50px; } @media screen and (max-width: 960px) { .p-photography-archive__filter-group + .p-photography-archive__filter-group { margin-top: 33px; } } .p-photography-archive__filter-title { display: flex; align-items: center; gap: 30px; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-photography-archive__filter-title { padding-right: 34px; } } .p-photography-archive__filter-title::after { content: ""; width: 100%; height: 1px; background: #1F2A39; } .p-photography-archive__filter-toggle { display: none; } @media screen and (max-width: 960px) { .p-photography-archive__filter-toggle { display: block; position: absolute; right: 30px; display: block; width: 14px; height: 14px; } } .p-photography-archive__filter-toggle::before, .p-photography-archive__filter-toggle::after { content: ""; display: inline-block; width: 100%; height: 2px; background: #1F2A39; position: absolute; top: 50%; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .p-photography-archive__filter-toggle::before, .p-photography-archive__filter-toggle::after { height: 1px; } } .p-photography-archive__filter-toggle::after { transform: rotate(90deg); } .p-photography-archive__filter-toggle.is-active::after { transform: rotate(180deg); } .p-photography-archive__filter-list { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; } @media screen and (max-width: 960px) { .p-photography-archive__filter-list { height: 0; overflow: hidden; } } .p-photography-archive__filter-item { display: flex; align-items: center; justify-content: center; min-width: 100px; height: 40px; background: #fff; border-radius: 30px; padding: 0 20px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1; cursor: pointer; } .p-photography-archive__filter-item.is-active { background: #C29080; color: #fff; } .p-photography-archive__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 90px; } @media screen and (max-width: 960px) { .p-photography-archive__list { grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 80px; margin-inline: -10px; } } .p-photography-archive__item { position: relative; width: 100%; height: auto; aspect-ratio: 1/1; } @media screen and (min-width: 961px) { .p-photography-archive__item a:hover img { filter: brightness(0.6); } .p-photography-archive__item a:hover .p-photography-archive__text-area { opacity: 1; } } .p-photography-archive__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: 0.6s ease-out; } .p-photography-archive__text-area { position: absolute; bottom: 24px; left: 0; padding: 0 30px; color: #fff; opacity: 0; transition: 0.6s ease-out; } .p-photography-archive__title { font-size: 2rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1.4; } .p-photography-archive__location { margin-top: 16px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.8; } .p-photography-movie { margin-top: 116px; padding-bottom: 200px; } @media screen and (max-width: 960px) { .p-photography-movie { margin-top: 100px; padding-bottom: 0; } } .p-photography-movie__container { margin-right: calc(50% - 50vw); padding: 140px 0 200px 150px; background: #F0F0F0; } @media screen and (max-width: 960px) { .p-photography-movie__container { margin: 0 -30px; padding: 100px 30px; } } .p-photography-single__mv { position: relative; width: 100%; height: 100vh; padding-top: 90px; } @media screen and (max-width: 960px) { .p-photography-single__mv { padding-top: 100px; } } .p-photography-single__mv-image { position: relative; width: 100%; height: 100%; } @media screen and (max-width: 960px) { .p-photography-single__mv-image { height: auto; aspect-ratio: 375/469; } } .p-photography-single__mv-image::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 320px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); } @media screen and (max-width: 960px) { .p-photography-single__mv-image::after { display: none; } } .p-photography-single__mv-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-photography-single__more-button { position: absolute; z-index: 1; bottom: 50px; right: 50px; display: flex; align-items: center; background: #C29080; height: 50px; border-radius: 50px; padding-inline: 30px 48px; color: #fff; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.04em; line-height: 1; transition: all 0.4s ease; cursor: pointer; } @media screen and (min-width: 961px) { .p-photography-single__more-button:focus { opacity: 0.8; } .p-photography-single__more-button:hover { opacity: 0.8; } } @media screen and (max-width: 960px) { .p-photography-single__more-button { bottom: 20px; right: 20px; height: 34px; padding-inline: 17px 34px; font-size: 1.2rem; } } .p-photography-single__more-button::before, .p-photography-single__more-button::after { content: ""; position: absolute; right: 16px; width: 16px; height: 2px; background: #fff; } @media screen and (max-width: 960px) { .p-photography-single__more-button::before, .p-photography-single__more-button::after { right: 9px; } } .p-photography-single__more-button::after { transform: rotate(90deg); } .p-photography-single__mv-text-area { position: absolute; bottom: 58px; left: 100px; } @media screen and (max-width: 960px) { .p-photography-single__mv-text-area { position: static; padding: 30px; } } .p-photography-single__mv-logo { width: 151px; height: auto; aspect-ratio: 151/25; } .p-photography-single__mv-logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-photography-single__mv-text { margin-top: 13px; font-family: "Barlow", sans-serif; font-size: 3.4rem; font-weight: 500; letter-spacing: 0.02em; line-height: 0.6; color: #fff; } @media screen and (max-width: 960px) { .p-photography-single__mv-text { margin-top: 7px; color: #C29080; font-size: 2.6rem; } } .p-photography-single__mv-row { display: flex; gap: 65px; align-items: center; margin-top: 48px; color: #fff; } @media screen and (max-width: 960px) { .p-photography-single__mv-row { display: block; margin-top: 30px; color: #1F2A39; } } .p-photography-single__mv-title { position: relative; display: flex; align-items: center; font-size: 3.6rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1.2; } @media screen and (max-width: 960px) { .p-photography-single__mv-title { font-size: 3rem; } } .p-photography-single__mv-title::after { content: ""; position: absolute; right: -38px; width: 1px; height: 80%; background: #fff; } @media screen and (max-width: 960px) { .p-photography-single__mv-title::after { display: none; } } .p-photography-single__mv-location { font-size: 1.8rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } @media screen and (max-width: 960px) { .p-photography-single__mv-location { margin-top: 13px; font-size: 1.4rem; line-height: 1.82; } } .p-photography-single__back-button { position: absolute; right: 0; top: 140px; } @media screen and (max-width: 960px) { .p-photography-single__back-button { top: 120px; } } .p-photography-single__back-button a { display: flex; align-items: center; gap: 15px; height: 50px; padding: 0 20px; background: #1F2A39; border-top-left-radius: 50px; border-bottom-left-radius: 50px; transition: all 0.4s ease; } @media screen and (min-width: 961px) { .p-photography-single__back-button a:focus { opacity: 0.8; } .p-photography-single__back-button a:hover { opacity: 0.8; } } @media screen and (max-width: 960px) { .p-photography-single__back-button a { gap: 12px; height: 40px; padding: 0 17px; } } .p-photography-single__back-button-icon { width: 13px; height: 13px; stroke: #fff; transform: rotate(-135deg); } .p-photography-single__back-button-text { color: #fff; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-photography-single__back-button-text { font-size: 1.2rem; letter-spacing: 0.04em; } } .p-photography-single__more { position: fixed; z-index: 1; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: 100dvh; background: #EDE8E6; padding: 150px 0 90px; opacity: 0; pointer-events: none; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .p-photography-single__more { padding: 90px 0; } } .p-photography-single__more.is-active { opacity: 1; pointer-events: visible; } .p-photography-single__more-image { width: 100%; height: 100%; } .p-photography-single__more-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-photography-single__more-text-area { position: absolute; bottom: 30px; left: 40px; display: flex; align-items: baseline; gap: 10px; } @media screen and (max-width: 960px) { .p-photography-single__more-text-area { display: block; bottom: 32px; left: 32px; } } .p-photography-single__more-title { font-family: "Barlow", sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.1875; } .p-photography-single__more-location { margin-top: 5px; font-family: "Barlow", sans-serif; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1.5833; } .p-photography-single__more-close { position: absolute; bottom: 35px; right: 35px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; transition: all 0.4s ease; cursor: pointer; } @media screen and (min-width: 961px) { .p-photography-single__more-close:focus { opacity: 0.6; } .p-photography-single__more-close:hover { opacity: 0.6; } } @media screen and (max-width: 960px) { .p-photography-single__more-close { bottom: 30px; right: 30px; width: 20px; height: 20px; } } .p-photography-single__more-close::before, .p-photography-single__more-close::after { content: ""; position: absolute; width: 100%; height: 2px; background: #1F2A39; } .p-photography-single__more-close::before { transform: rotate(-135deg); } .p-photography-single__more-close::after { transform: rotate(135deg); } .p-photography-single__intro { position: relative; display: flex; justify-content: space-between; gap: 200px; max-width: 1600px; margin: 180px auto 0; padding-inline: 200px; } @media screen and (max-width: 960px) { .p-photography-single__intro { display: block; margin-top: 94px; padding-inline: 30px; } } .p-photography-single__intro-title { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.14; } @media screen and (max-width: 960px) { .p-photography-single__intro-title { font-size: 2.2rem; } } .p-photography-single__intro-text { width: 600px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-photography-single__intro-text { width: 100%; margin-top: 30px; font-size: 1.4rem; line-height: 2.42; } } .p-photography-single__obj01 { position: absolute; top: -140px; left: -320px; width: 600px; height: auto; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, #2E3180 0%, rgba(73, 155, 164, 0) 100%); opacity: 0.2; } @media screen and (max-width: 960px) { .p-photography-single__obj01 { top: -56px; left: -200px; width: 400px; } } .p-photography-single__obj02 { position: absolute; bottom: -330px; right: -173px; width: 396px; height: auto; aspect-ratio: 1/1; background: radial-gradient(50% 50% at 50% 50%, #C29080 0%, rgba(233, 211, 204, 0) 100%); opacity: 0.3; } @media screen and (max-width: 960px) { .p-photography-single__obj02 { bottom: -114px; right: -125px; width: 247px; } } .p-photography-recommend { padding: 200px 0 160px; } @media screen and (max-width: 960px) { .p-photography-recommend { padding: 100px 0; } } .p-photography-recommend__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; } @media screen and (max-width: 960px) { .p-photography-recommend__button { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 2; bottom: -96px; width: 40px; height: 40px; border-radius: 50%; background: #1F2A39; } } @media screen and (max-width: 960px) { .p-photography-recommend__button svg { width: 8px; height: 16px; stroke: #fff; } } @media screen and (max-width: 960px) { .p-photography-recommend__button.-prev { left: 0; transform: translate(-50%, 100%); } } @media screen and (max-width: 960px) { .p-photography-recommend__button.-next { right: 0; transform: translate(50%, 100%) scaleX(-1); } } @media screen and (max-width: 960px) { .p-photography-recommend__pagination { position: absolute; top: 50px; left: auto; right: 0; } } .p-photography-recommend__slider { margin: 60px calc(50% - 50vw) 0 0; } @media screen and (max-width: 960px) { .p-photography-recommend__slider { margin-top: 40px; } } .p-photography-recommend__item { width: 340px; height: auto; aspect-ratio: 1/1; } @media screen and (max-width: 960px) { .p-photography-recommend__item { width: 152px; } } .p-photography-recommend__image { width: 100%; height: 100%; } .p-photography-recommend__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-costume-visuals { position: relative; overflow: hidden; } .p-costume-visuals__wrapper { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; aspect-ratio: 1600/900; position: relative; } @media screen and (max-width: 960px) { .p-costume-visuals__wrapper { grid-template-columns: repeat(3, 1fr); aspect-ratio: 375/812; row-gap: 292px; } } .p-costume-visuals__image { transform: translate(0, 0); will-change: transform, filter; } .p-costume-visuals__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 960px) { .p-costume-visuals__image:nth-child(7), .p-costume-visuals__image:nth-child(8) { display: none; } } .p-costume-visuals__text-area { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; z-index: 2; color: #C29080; } .p-costume-visuals__text { font-family: "Barlow", sans-serif; font-size: 2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 2.5; } @media screen and (max-width: 960px) { .p-costume-visuals__text { font-size: 1.4rem; } } .p-costume-visuals__title { margin-top: 36px; white-space: nowrap; font-family: "Barlow", sans-serif; font-size: 7rem; font-weight: 500; letter-spacing: 0.02em; line-height: 0.6; } @media screen and (max-width: 960px) { .p-costume-visuals__title { margin-top: 10px; font-size: 4rem; line-height: 1.06; } } .p-costume-visuals__logo { width: 280px; height: auto; aspect-ratio: 280/47; margin: 47px auto 0; } @media screen and (max-width: 960px) { .p-costume-visuals__logo { margin-top: 18px; width: 200px; } } .p-costume-visuals__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-costume-lineup { display: flex; align-items: flex-start; width: 100%; height: auto; max-height: 100vh; overflow: hidden; } @media screen and (max-width: 960px) { .p-costume-lineup { display: block; max-height: none; padding: 100px 0; } } .p-costume-lineup__main { width: 50%; height: 100%; padding: 9vh 0; } @media screen and (max-width: 960px) { .p-costume-lineup__main { width: auto; height: 65vh; aspect-ratio: 375/540; padding: 0; margin: 0 auto; } } .p-costume-lineup__main-list { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .p-costume-lineup__main-item { position: absolute; width: auto; height: 100%; opacity: 0; pointer-events: none; overflow: hidden; transition: all 0.4s ease; } .p-costume-lineup__main-item.is-active { opacity: 1; pointer-events: visible; z-index: 1; } .p-costume-lineup__main-image { width: auto; height: 100%; max-height: 82vh; aspect-ratio: 375/540; } @media screen and (max-width: 960px) { .p-costume-lineup__main-image { width: 100%; max-height: none; } } .p-costume-lineup__main-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-costume-lineup__main-title { position: absolute; top: 60px; left: 56px; writing-mode: vertical-rl; color: #C29080; font-family: "Barlow", sans-serif; font-size: 4.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-costume-lineup__main-title { top: 30px; left: 28px; font-size: 3.4rem; } } .p-costume-lineup__main-comment { position: absolute; bottom: 38px; left: 0; display: flex; flex-direction: column; justify-content: center; width: 500px; min-height: 250px; max-width: 90%; padding: 40px 60px 40px 50px; background: rgba(255, 255, 255, 0.7); transform: translateX(calc(-100% + 50px)); transition: all 0.4s ease; } @media screen and (max-width: 960px) { .p-costume-lineup__main-comment { bottom: 20px; padding: 25px 50px 25px 30px; min-height: 166px; transform: translateX(calc(-100% + 40px)); } } .p-costume-lineup__main-comment.is-active { transform: translate(0); } .p-costume-lineup__main-comment-head { position: absolute; top: 0; right: 0; display: flex; align-items: center; width: 50px; height: 100%; padding-top: 40px; border-top: 2px solid #C29080; writing-mode: vertical-rl; color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-costume-lineup__main-comment-head { width: 40px; padding-top: 20px; font-size: 1.2rem; } } .p-costume-lineup__main-comment-head:before { content: ""; position: absolute; bottom: 42px; width: 10px; height: 10px; border: 0; border-top: solid 1px #C29080; border-left: solid 1px #C29080; transform: rotate(135deg); } @media screen and (max-width: 960px) { .p-costume-lineup__main-comment-head:before { bottom: 22px; } } .p-costume-lineup__main-comment.is-active .p-costume-lineup__main-comment-head:before { transform: rotate(-45deg); } .p-costume-lineup__main-comment-title { color: #C29080; font-family: "Barlow", "Zen Old Mincho", serif; font-size: 2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.1; } @media screen and (max-width: 960px) { .p-costume-lineup__main-comment-title { font-size: 1.6rem; } } .p-costume-lineup__main-comment-text { margin-top: 20px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2; } @media screen and (max-width: 960px) { .p-costume-lineup__main-comment-text { margin-top: 14px; font-size: 1.1rem; } } .p-costume-lineup__thumbnail { position: relative; height: 100vh; width: 50%; overflow: hidden; } @media screen and (max-width: 960px) { .p-costume-lineup__thumbnail { width: 100%; height: auto; padding: 30px 0; } } .p-costume-lineup__thumbnail-list { display: flex; flex-direction: column; gap: 8px; width: 200px; margin: 0 auto; } @media screen and (max-width: 960px) { .p-costume-lineup__thumbnail-list { flex-direction: row; align-items: flex-start; justify-content: flex-start; width: 100%; gap: 0; margin: 0; padding: 0 30px; } } .p-costume-lineup__thumbnail-item { width: auto; height: 270px; aspect-ratio: 375/540; } @media screen and (max-width: 960px) { .p-costume-lineup__thumbnail-item { height: 150px; } } .p-costume-lineup__thumbnail-item.is-active { opacity: 0.6; } .p-costume-lineup__thumbnail-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-costume-lineup__scrollbar { position: absolute; top: 50%; right: 31px; height: 63.63%; width: 2px; background: #F0F0F0; transform: translateY(-50%); } @media screen and (max-width: 960px) { .p-costume-lineup__scrollbar { top: auto; bottom: 0; left: 30px; width: calc(100% - 60px); height: 2px; } } .p-costume-lineup__scrollbar-drag { position: absolute; top: 0; left: 0; width: 100%; height: 14%; background: #C29080; } @media screen and (max-width: 960px) { .p-costume-lineup__scrollbar-drag { width: 30%; height: 100%; } } @media screen and (max-width: 960px) { .p-plan { padding-bottom: 50px; } } .p-plan__block { padding: 200px 0; border-top: 1px solid #C3C3C3; } @media screen and (max-width: 960px) { .p-plan__block { padding: 50px 0; border: none; } } .p-plan__block:first-of-type { padding-top: 0; border-top: none; } .p-plan__block .l-wrapper { padding-right: 150px; } @media screen and (max-width: 960px) { .p-plan__block .l-wrapper { padding-right: 30px; } } .p-plan__title { position: absolute; z-index: 999; left: 60px; writing-mode: vertical-rl; color: #C29080; text-transform: uppercase; } @media screen and (max-width: 960px) { .p-plan__title { position: static; writing-mode: horizontal-tb; text-align: center; } } .p-plan__title-main { display: block; margin-left: 9px; font-family: "Barlow", sans-serif; font-size: 4.6rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan__title-main { display: flex; flex-direction: column; align-items: center; margin: 0; font-size: 3.4rem; line-height: 1.17; } } .p-plan__title-sub { display: flex; align-items: center; gap: 10px; font-family: "Barlow", sans-serif, "Zen Old Mincho", serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan__title-sub { display: block; margin-top: 12px; font-size: 1.6rem; line-height: 1.125; } } .p-plan__title-sub::before { content: ""; width: 1px; height: 20px; background: #C29080; } @media screen and (max-width: 960px) { .p-plan__title-sub::before { display: none; } } .p-plan__catch { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.12em; line-height: 1.7857; } @media screen and (max-width: 960px) { .p-plan__catch { margin-top: 50px; font-size: 1.5rem; letter-spacing: 0.02em; } } .p-plan__image-main { width: 100%; height: auto; aspect-ratio: 12/6; margin-top: 50px; } @media screen and (max-width: 960px) { .p-plan__image-main { display: none; } } .p-plan__image-main img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-plan__slider { display: none; } @media screen and (max-width: 960px) { .p-plan__slider { display: block; margin-top: 50px; } } @media screen and (max-width: 960px) { .p-plan__slider .swiper { margin-right: calc(50% - 50vw); } } .p-plan__slider-item { width: 315px; height: auto; aspect-ratio: 315/280; } .p-plan__slider-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-plan__slider-bottom { margin-top: 20px; display: flex; align-items: center; gap: 34px; } .p-plan__content { display: grid; grid-template-columns: 1fr round(up, 41.66%, 1px); align-items: flex-start; gap: round(up, 9.16%, 1px); margin-top: 70px; } @media screen and (max-width: 960px) { .p-plan__content { display: block; margin-top: 50px; } } .p-plan__gallery { display: grid; grid-template-columns: 40% 58%; gap: 10px; } @media screen and (max-width: 960px) { .p-plan__gallery { display: none; } } .p-plan__image:nth-child(1) { grid-column: 1/3; aspect-ratio: 50/48; } .p-plan__image:nth-child(2) { aspect-ratio: 20/27; } .p-plan__image:nth-child(3) { aspect-ratio: 29/27; } .p-plan__image:nth-child(4) { grid-column: 1/3; aspect-ratio: 50/28; } .p-plan__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-plan__facility-logo { width: -moz-fit-content; width: fit-content; height: 56px; margin: 0 auto; } @media screen and (max-width: 960px) { .p-plan__facility-logo { height: 45px; } } .p-plan__facility-logo img { width: auto; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-plan__facility-name { text-align: center; margin-top: 30px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } @media screen and (max-width: 960px) { .p-plan__facility-name { margin-top: 26px; font-size: 1.2rem; letter-spacing: 0.02em; } } .p-plan__facility-text { margin-top: 50px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-plan__facility-text { margin-top: 34px; font-size: 1.2rem; } } .p-plan__facility-image { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 50px; } @media screen and (max-width: 960px) { .p-plan__facility-image { gap: 5px; margin-top: 40px; } } @media screen and (max-width: 960px) { .p-plan__details { padding: 0 12px; } } .p-plan__details-head { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 50px; padding-bottom: 13px; border-bottom: 2px solid #C29080; } @media screen and (max-width: 960px) { .p-plan__details-head { display: block; margin-top: 50px; padding-bottom: 10px; border-bottom: 1px solid #C29080; } } .p-plan__details-title { font-size: 2rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.5; } .p-plan__details-title span { display: block; color: #C29080; font-size: 1.6rem; } .p-plan__price { display: flex; color: #C29080; font-family: "Barlow", sans-serif; font-weight: 500; } @media screen and (max-width: 960px) { .p-plan__price { margin-top: 20px; } } .p-plan__price span { display: inline-block; } .p-plan__price-unit { font-size: 4rem; letter-spacing: 0.02em; line-height: 1.25; } @media screen and (max-width: 960px) { .p-plan__price-unit { font-size: 3.9rem; } } .p-plan__price-value { font-size: 6rem; letter-spacing: 0; line-height: 0.7; padding: 0 6px; } @media screen and (max-width: 960px) { .p-plan__price-value { font-size: 5.8rem; } } .p-plan__price-range { transform: translateY(-4px); font-size: 4rem; letter-spacing: 0.02em; line-height: 1.25; } @media screen and (max-width: 960px) { .p-plan__price-range { font-size: 3.9rem; } } .p-plan__details-contents { display: flex; gap: 10px; margin-top: 22px; } @media screen and (max-width: 960px) { .p-plan__details-contents { display: block; margin-top: 32px; } } .p-plan__details-label { flex-shrink: 0; font-size: 1.4rem; font-weight: 400; letter-spacing: 0; line-height: 2; } .p-plan__details-list { display: flex; flex-wrap: wrap; -moz-column-gap: 14px; column-gap: 14px; } @media screen and (max-width: 960px) { .p-plan__details-list { gap: 4px 7px; margin-top: 14px; } } .p-plan__details-item { font-size: 1.4rem; font-weight: 400; letter-spacing: 0; line-height: 2; } @media screen and (max-width: 960px) { .p-plan__details-item { font-size: 1.2rem; } } .p-plan__details-item::before { content: "・"; } .p-plan__details-note { margin-top: 9px; width: 100%; font-size: 1.2rem; font-weight: 400; letter-spacing: 0; line-height: 1.66; } @media screen and (max-width: 960px) { .p-plan__details-note { margin-top: 18px; } } .p-plan__note { margin-top: 36px; background: rgba(194, 144, 128, 0.2); padding: 10px 20px; text-align: center; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.3; } @media screen and (max-width: 960px) { .p-plan__note { margin-top: 40px; } } .p-plan__contact { display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center; gap: 10px; margin-top: 20px; color: #fff; } @media screen and (max-width: 960px) { .p-plan__contact { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 40px; } } .p-plan__contact-item a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px; background: #C29080; } .p-plan__contact-title { text-align: center; margin-top: 8px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } .p-plan__tel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 26px; margin-top: 22px; font-family: "Barlow", sans-serif; font-size: 2.6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.38; } @media screen and (max-width: 960px) { .p-plan__tel { flex-direction: column; align-items: center; gap: 0; margin-top: 40px; } } .p-plan__tel span { font-family: "Zen Old Mincho", serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0; line-height: 1.66; } @media screen and (max-width: 960px) { .p-area .c-title__en { flex-direction: column-reverse; } } @media screen and (max-width: 960px) { .p-area .c-title__en span { margin-top: 4px; font-size: 1.6rem; } } .p-area-charm { margin-top: 120px; } @media screen and (max-width: 960px) { .p-area-charm { margin-top: 100px; } } .p-area-charm__wrapper { position: relative; display: flex; justify-content: space-between; } @media screen and (max-width: 960px) { .p-area-charm__wrapper { flex-direction: column-reverse; } } .p-area-charm__text-area { flex-shrink: 0; max-width: 510px; margin-top: 66px; padding-bottom: 30%; } @media screen and (max-width: 960px) { .p-area-charm__text-area { max-width: 100%; margin-top: 40px; padding-bottom: 0; } } .p-area-charm__read { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-area-charm__read { font-size: 2.2rem; line-height: 2; } } .p-area-charm__text { margin-top: 46px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-area-charm__text { margin-top: 26px; font-size: 1.4rem; line-height: 2.42; } } .p-area-charm__image-area { width: 50%; padding-right: 30px; } @media screen and (max-width: 960px) { .p-area-charm__image-area { width: 100%; margin-top: 50px; padding: 0; } } .p-area-charm__image:nth-child(1) { width: 100%; height: auto; aspect-ratio: 52/68; } @media screen and (max-width: 960px) { .p-area-charm__image:nth-child(1) { width: 57.14%; aspect-ratio: 180/236; margin-left: 23%; } } .p-area-charm__image:nth-child(2) { width: 57.69%; height: auto; aspect-ratio: 30/36; margin-left: auto; margin-right: -180px; margin-top: -60px; } @media screen and (max-width: 960px) { .p-area-charm__image:nth-child(2) { width: 33%; aspect-ratio: 104/125; margin: -7% 0 0 auto; } } .p-area-charm__image:nth-child(3) { position: absolute; bottom: 0; left: 0; width: 38.18%; height: auto; aspect-ratio: 42/30; } @media screen and (max-width: 960px) { .p-area-charm__image:nth-child(3) { position: static; width: 46.34%; aspect-ratio: 146/104; margin-top: -23%; } } .p-area-chapel { margin-top: 120px; padding-bottom: 200px; } @media screen and (max-width: 960px) { .p-area-chapel { margin: 0; padding: 100px 0; } } .p-area-chapel__block:first-of-type { padding-top: 80px; } @media screen and (max-width: 960px) { .p-area-chapel__block:first-of-type { padding-top: 40px; } } .p-area-chapel__block + .p-area-chapel__block { margin-top: 200px; } @media screen and (max-width: 960px) { .p-area-chapel__block + .p-area-chapel__block { margin-top: 80px; } } .p-area-chapel__read { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.12em; line-height: 1.625; } @media screen and (max-width: 960px) { .p-area-chapel__read { font-size: 1.6rem; letter-spacing: 0.02em; } } .p-area-chapel__slider { margin-top: 80px; } @media screen and (max-width: 960px) { .p-area-chapel__slider { margin-top: 40px; } } .p-area-chapel__slider .swiper { margin-right: calc(50% - 50vw); } .p-area-chapel__slider-item { width: 1200px; max-width: 90%; height: auto; aspect-ratio: 1200/800; } @media screen and (max-width: 960px) { .p-area-chapel__slider-item { width: 315px; max-width: 100%; } } .p-area-chapel__slider-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-area-chapel__slider-bottom { display: flex; align-items: center; gap: 80px; margin-top: 36px; } @media screen and (max-width: 960px) { .p-area-chapel__slider-bottom { gap: 34px; margin-top: 20px; } } @media screen and (max-width: 960px) { .p-area-chapel__slider-button { display: none; } } .p-area-chapel__content-wrapper { display: flex; justify-content: space-between; margin-top: 60px; } @media screen and (max-width: 960px) { .p-area-chapel__content-wrapper { display: block; margin-top: 40px; } } .p-area-chapel__content { width: 41.81%; } @media screen and (max-width: 960px) { .p-area-chapel__content { width: 100%; } } .p-area-chapel__logo { width: -moz-fit-content; width: fit-content; height: 56px; margin: 0 auto; } @media screen and (max-width: 960px) { .p-area-chapel__logo { height: 45px; } } .p-area-chapel__logo img { width: auto; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-area-chapel__name { text-align: center; margin-top: 30px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } @media screen and (max-width: 960px) { .p-area-chapel__name { margin-top: 26px; font-size: 1.2rem; letter-spacing: 0.02em; } } .p-area-chapel__text { margin-top: 50px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-area-chapel__text { margin-top: 34px; font-size: 1.2rem; line-height: 2.5; } } .p-area-chapel__image { width: 57.27%; height: auto; aspect-ratio: 63/49; margin-right: -100px; } @media screen and (max-width: 960px) { .p-area-chapel__image { display: none; } } .p-area-guide { padding: 120px 0 200px; background: #F0F0F0; } @media screen and (max-width: 960px) { .p-area-guide { padding: 100px 0; } } .p-area-guide__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 47px; padding-top: 80px; } @media screen and (max-width: 960px) { .p-area-guide__list { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; padding: 0; } } .p-area-guide__item a { display: grid; transition: all 0.4s ease; } .p-area-guide__item a:hover { opacity: 0.6; } @media screen and (max-width: 960px) { .p-area-guide__item a { display: flex; gap: 20px; } } .p-area-guide__image { width: 100%; height: auto; aspect-ratio: 1/1; } @media screen and (max-width: 960px) { .p-area-guide__image { flex-shrink: 0; width: 140px; } } .p-area-guide__content { display: grid; grid-template-rows: subgrid; grid-row: span 3; margin-top: 30px; } @media screen and (max-width: 960px) { .p-area-guide__content { display: block; margin-top: 0; } } .p-area-guide__title { text-align: center; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } @media screen and (max-width: 960px) { .p-area-guide__title { text-align: left; line-height: 1.33; } } .p-area-guide__text { margin-top: 20px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-area-guide__text { font-size: 1.2rem; line-height: 2; } } .p-area-guide__link { display: flex; width: -moz-fit-content; width: fit-content; align-items: center; gap: 9px; margin-top: 30px; margin-left: auto; } @media screen and (max-width: 960px) { .p-area-guide__link { margin-top: 14px; } } .p-area-guide__link-text { color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.05em; line-height: 1; } .p-area-guide__link-icon { stroke: #C29080; width: 13px; height: 13px; } .p-area-guide__link-icon svg { width: 100%; height: 100%; } .p-area-sightseeing { padding: 120px 0 180px; } @media screen and (max-width: 960px) { .p-area-sightseeing { padding: 100px 0; } } .p-area-sightseeing__wrapper { display: flex; justify-content: space-between; margin-right: -100px; padding-top: 80px; } @media screen and (max-width: 960px) { .p-area-sightseeing__wrapper { flex-direction: column-reverse; margin-top: 50px; margin-right: 0; padding: 0; } } .p-area-sightseeing__text-area { width: 38.33%; } @media screen and (max-width: 960px) { .p-area-sightseeing__text-area { width: 100%; } } .p-area-sightseeing__read { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-area-sightseeing__read { margin-top: 40px; font-size: 2.2rem; line-height: 2; } } .p-area-sightseeing__text { margin-top: 30px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-area-sightseeing__text { margin-top: 26px; font-size: 1.4rem; line-height: 2.42; } } .p-area-sightseeing__image-area { width: 52.5%; } @media screen and (max-width: 960px) { .p-area-sightseeing__image-area { width: 100%; padding-right: 0; } } .p-area-sightseeing__image:nth-child(1) { width: 100%; height: auto; aspect-ratio: 63/49; } @media screen and (max-width: 960px) { .p-area-sightseeing__image:nth-child(1) { width: 88.88%; margin-left: auto; } } .p-area-sightseeing__image:nth-child(2) { width: 57.14%; height: auto; aspect-ratio: 36/24; margin-top: -60px; margin-left: -80px; } @media screen and (max-width: 960px) { .p-area-sightseeing__image:nth-child(2) { width: 50.79%; margin-top: -9%; margin-left: 0; } } .p-area-photo { background: #F0F0F0; padding: 120px 0 200px; } @media screen and (max-width: 960px) { .p-area-photo { padding: 100px 0; } } .p-area-photo__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; padding-top: 80px; } @media screen and (max-width: 960px) { .p-area-photo__list { grid-template-columns: repeat(2, 1fr); gap: 11px; padding-top: 40px; } } .p-area-photo__item { position: relative; width: 100%; height: auto; aspect-ratio: 1/1; } @media screen and (min-width: 961px) { .p-area-photo__item a:hover img { filter: brightness(0.6); } .p-area-photo__item a:hover .p-area-photo__text-area { opacity: 1; } } .p-area-photo__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: 0.6s ease-out; } .p-area-photo__text-area { position: absolute; bottom: 24px; left: 0; padding: 0 30px; color: #fff; opacity: 0; transition: 0.6s ease-out; } .p-area-photo__title { font-size: 2rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1.4; } .p-area-photo__location { margin-top: 16px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.8; } .p-area-photo .c-button { margin-top: 100px; } @media screen and (max-width: 960px) { .p-area-photo .c-button { margin-top: 50px; } } .p-access-mv .p-lower-mv__image { background: #F0F0F0; } .p-access-mv .p-lower-mv__image::after { display: none; } .p-access-mv .p-lower-mv__image img { -o-object-fit: contain; object-fit: contain; -o-object-position: top right; object-position: top right; } .p-access-mv__scroll-container { display: flex; width: 100%; height: 100%; overflow: hidden; transition: all 0.5s; } .p-access-mv__scroll-container.is-hidden { opacity: 0; visibility: hidden; } @media screen and (min-width: 961px) { .p-access-mv__scroll-container { display: none; } } .p-access-mv__scroll-track { display: flex; } .p-access-mv__scroll-track.is-paused { animation: none; } .p-access-mv__scroll-image { flex-shrink: 0; width: auto; min-width: 100%; height: 100%; aspect-ratio: 760/812; } .p-access-mv__scroll-image img { width: 100%; height: 100%; } .p-access-mv__whole-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 0.5s; background: #F0F0F0; } .p-access-mv__whole-image.is-active { opacity: 1; visibility: visible; } .p-access-mv__whole-image img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: top right; object-position: top right; } @keyframes scroll-pendulum { 0% { transform: translateX(0); } 50% { transform: translateX(calc(-100% + 100vw)); } 100% { transform: translateX(0); } } .p-access-mv { position: relative; } .p-access-mv__more-button { display: none; } @media screen and (max-width: 960px) { .p-access-mv__more-button { position: absolute; bottom: 35px; right: 0; display: flex; align-items: center; justify-content: center; background: #C29080; width: 180px; height: 40px; border-top-left-radius: 40px; border-bottom-left-radius: 40px; color: #fff; font-family: "Barlow", sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } } .p-access-traffic { margin-top: 200px; } @media screen and (max-width: 960px) { .p-access-traffic { margin-top: 100px; } } .p-access-traffic__title { text-align: center; background: #1F2A39; padding: 22px 0; color: #fff; font-size: 2.6rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1; } @media screen and (max-width: 960px) { .p-access-traffic__title { padding: 20px 0; font-size: 2rem; letter-spacing: 0.04em; } } .p-access-traffic__content + .p-access-traffic__content { margin-top: 200px; } @media screen and (max-width: 960px) { .p-access-traffic__content + .p-access-traffic__content { margin-top: 100px; } } .p-access-traffic__content-item { margin-top: 80px; } @media screen and (max-width: 960px) { .p-access-traffic__content-item { margin-top: 20px; } } @media screen and (max-width: 960px) { .p-access-traffic__content-item:first-of-type { margin-top: 48px; } } .p-access-traffic__content-title { display: flex; align-items: center; gap: 18px; font-size: 2.6rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1; } @media screen and (max-width: 960px) { .p-access-traffic__content-title { gap: 8px; font-size: 1.6rem; } } .p-access-traffic__content-title::before { content: ""; display: block; width: 20px; height: 2px; background: #C29080; } @media screen and (max-width: 960px) { .p-access-traffic__content-title::before { width: 12px; } } .p-access-traffic__content-icon { width: 44px; height: auto; aspect-ratio: 44/36; } @media screen and (max-width: 960px) { .p-access-traffic__content-icon { width: 33px; } } .p-access-traffic__content-icon img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-access-traffic__content-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 6px 0 30px 34px; border-bottom: 1px solid #C29080; padding-left: 34px; } @media screen and (max-width: 960px) { .p-access-traffic__content-info { display: block; padding: 12px 0 20px 20px; } } .p-access-traffic__content-info + .p-access-traffic__content-info { margin-top: 24px; } @media screen and (max-width: 960px) { .p-access-traffic__content-info + .p-access-traffic__content-info { margin-top: 12px; } } .p-access-traffic__content-station { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 17px; padding-top: 24px; font-size: 2rem; font-weight: 400; letter-spacing: 0.05em; line-height: 2; } @media screen and (max-width: 960px) { .p-access-traffic__content-station { gap: 12px; padding-top: 0; font-size: 1.3rem; } } .p-access-traffic__content-arrow { color: #C29080; } .p-access-traffic__content-time { flex-shrink: 0; font-family: "Barlow", sans-serif; color: #C29080; font-size: 3rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.33; } @media screen and (max-width: 960px) { .p-access-traffic__content-time { text-align: right; margin-top: 30px; font-size: 1.9rem; } } .p-access-traffic__content-time span { display: inline-block; padding: 0 10px; font-size: 6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-access-traffic__content-time span { padding: 0 4px; font-size: 3.7rem; } } .p-access-map { padding: 230px 0 600px; margin-top: -50px; background: linear-gradient(0deg, #F0F0F0 0%, rgba(240, 240, 240, 0) 100%); } @media screen and (max-width: 960px) { .p-access-map { padding: 0; margin-top: 120px; } } .p-access-map__wrapper { position: relative; } .p-access-map__text-area { position: relative; z-index: 2; } .p-access-map__title { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-access-map__title { line-height: 1.6428; } } .p-access-map__desc { margin-top: 34px; padding-bottom: 70px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-access-map__desc { margin-top: 40px; padding: 0; } } .p-access-map__image { position: absolute; z-index: 0; top: -230px; right: -740px; width: 241.41%; min-width: 2700px; height: auto; aspect-ratio: 2897/2500; pointer-events: none; } @media screen and (max-width: 960px) { .p-access-map__image { position: relative; top: 0; left: 16%; margin: -50% 0; transform: translateX(-50%); width: 285.71%; min-width: auto; } } .p-access-map__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-access-map__text { margin-top: 26px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.12em; line-height: 2.8; } @media screen and (max-width: 960px) { .p-access-map__text { margin-top: 20px; line-height: 2.6; } } .p-weather-intro { padding: 180px 0 200px; } @media screen and (max-width: 960px) { .p-weather-intro { padding: 90px 0 100px; } } .p-weather-intro__text-area { position: relative; } .p-weather-intro__map { position: absolute; z-index: -1; top: -420px; right: -550px; width: 1950px; height: auto; aspect-ratio: 1950/1900; } @media screen and (max-width: 960px) { .p-weather-intro__map { top: 70px; left: calc(50% - 103px); width: 1118px; transform: translateX(-50%); aspect-ratio: 1118/1328; } } .p-weather-intro__title { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-weather-intro__title { font-size: 2.2rem; line-height: 2; } } .p-weather-intro__text { margin-top: 46px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-weather-intro__text { margin-top: 26px; font-size: 1.4rem; line-height: 2.42; } } .p-weather-intro__image-area { margin-top: 180px; } @media screen and (max-width: 960px) { .p-weather-intro__image-area { margin-top: 240px; } } .p-weather-intro__scroll-container { display: flex; width: 100%; overflow: hidden; } @media screen and (min-width: 961px) { .p-weather-intro__scroll-container { display: grid; grid-template-columns: repeat(4, 1fr); } } .p-weather-intro__scroll-track { display: flex; animation: scroll 60s linear infinite; } @media screen and (min-width: 961px) { .p-weather-intro__scroll-track { display: contents; animation: none; } } .p-weather-intro__scroll-image { flex-shrink: 0; width: 270px; height: auto; aspect-ratio: 40/45; } @media screen and (min-width: 961px) { .p-weather-intro__scroll-image { width: 100%; } } .p-weather-intro__scroll-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-weather-info { padding-bottom: 200px; } @media screen and (max-width: 960px) { .p-weather-info { padding-bottom: 100px; } } .p-weather-info__title { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-weather-info__title { font-size: 2.2rem; line-height: 2; } } .p-weather-info__text { margin-top: 34px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } .p-weather-info__table { margin-top: 88px; } @media screen and (max-width: 960px) { .p-weather-info__table { margin-top: 100px; } } .p-weather-info__table-caption { font-size: 2rem; font-weight: 400; letter-spacing: 0.12em; line-height: 2.5; } @media screen and (max-width: 960px) { .p-weather-info__table-caption { font-size: 1.6rem; white-space: nowrap; } } .p-weather-info__table-wrap { position: relative; overflow: auto; margin-top: 20px; margin-right: -200px; padding-right: 200px; } @media screen and (max-width: 960px) { .p-weather-info__table-wrap { margin-right: -30px; padding-right: 30px; } } .p-weather-info__table-inner { max-width: 1200px; min-width: 1000px; width: 100%; } @media screen and (max-width: 960px) { .p-weather-info__table-inner { min-width: 1100px; } } .p-weather-info__table thead { background-color: #C29080; color: #fff; text-align: center; } .p-weather-info__table thead th:not(:last-of-type) { border-right: 1px solid #fff; } .p-weather-info__table thead th:nth-of-type(1) { width: 7%; min-width: 70px; } .p-weather-info__table thead th:nth-of-type(2) { width: 5%; } .p-weather-info__table thead th:nth-of-type(3) { width: 16.66%; min-width: 175px; } .p-weather-info__table thead th:nth-of-type(4), .p-weather-info__table thead th:nth-of-type(5), .p-weather-info__table thead th:nth-of-type(6), .p-weather-info__table thead th:nth-of-type(7) { width: 11%; min-width: 130px; } .p-weather-info__table tbody th { background-color: #EBE1DE; text-align: center; } .p-weather-info__table tbody td:first-of-type { text-align: center; } .p-weather-info__table th, .p-weather-info__table td { border: 1px solid #C29080; padding: 13px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.12em; line-height: 2; } .p-weather-info__note { margin-top: 22px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.12em; line-height: 1.5; } @media screen and (max-width: 960px) { .p-weather-info__note { font-size: 1.2rem; } } .p-sightseeing__block { padding: 160px 0; border-top: 1px solid #C3C3C3; } @media screen and (max-width: 960px) { .p-sightseeing__block { padding: 80px 0; } } .p-sightseeing__block:first-of-type { border-top: none; } @media screen and (max-width: 960px) { .p-sightseeing__block:first-of-type { margin-top: 40px; } } .p-sightseeing__title { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.12em; line-height: 1.18; } @media screen and (max-width: 960px) { .p-sightseeing__title { font-size: 2.2rem; } } .p-sightseeing__tag { display: flex; gap: 10px; margin-top: 60px; } @media screen and (max-width: 960px) { .p-sightseeing__tag { gap: 6px; margin-top: 28px; } } .p-sightseeing__tag-item { display: flex; align-items: center; justify-content: center; color: #fff; min-width: 100px; height: 40px; background: #C29080; border-radius: 30px; padding: 0 20px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.1em; line-height: 1; } @media screen and (max-width: 960px) { .p-sightseeing__tag-item { font-size: 1.2rem; min-width: auto; height: 26px; padding: 0 12px; } } .p-sightseeing__wrapper { display: flex; align-items: flex-end; gap: 100px; margin-top: 60px; } @media screen and (max-width: 960px) { .p-sightseeing__wrapper { display: block; margin-top: 28px; } } .p-sightseeing__image { flex-shrink: 0; width: 50%; height: auto; aspect-ratio: 1/1; } @media screen and (max-width: 960px) { .p-sightseeing__image { width: 100%; } } .p-sightseeing__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-sightseeing__text { font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-sightseeing__text { margin-top: 30px; font-size: 1.2rem; line-height: 2.16; } } .p-sightseeing__other { padding: 160px 0; background: #F0F0F0; } @media screen and (max-width: 960px) { .p-sightseeing__other { padding: 100px 0; } } .p-sightseeing__other-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); gap: 45px 140px; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 960px) { .p-sightseeing__other-list { display: flex; flex-direction: column; gap: 24px; } } .p-sightseeing__other-item a { display: flex; align-items: center; gap: 15px; transition: all 0.3s ease; } @media screen and (max-width: 960px) { .p-sightseeing__other-item a { gap: 8px; } } .p-sightseeing__other-item a:hover { opacity: 0.7; } .p-sightseeing__other-text { font-size: 1.8rem; font-weight: 400; letter-spacing: 0.06em; line-height: 1; } @media screen and (max-width: 960px) { .p-sightseeing__other-text { font-size: 1rem; } } .p-sightseeing__other-icon { width: 13px; height: 13px; stroke: #1F2A39; } @media screen and (max-width: 960px) { .p-sightseeing__other-icon { width: 7px; height: 7px; } } .p-sightseeing .p-photo-list { background: #fff; } .p-faq-pickup { padding: 200px 0; background: #E8E3DD; } @media screen and (max-width: 960px) { .p-faq-pickup { padding: 100px 0; } } @media screen and (max-width: 960px) { .p-faq-pickup__list { margin-top: 40px; } } .p-faq-pickup__list .c-faq-item + .c-faq-item { margin-top: 60px; } @media screen and (max-width: 960px) { .p-faq-pickup__list .c-faq-item + .c-faq-item { margin-top: 20px; } } .p-faq-content { position: relative; padding: 200px 0 40px; } @media screen and (max-width: 960px) { .p-faq-content { padding: 120px 0; } } .p-faq-content::before { content: ""; position: absolute; top: 160px; right: -140px; width: 500px; height: auto; aspect-ratio: 1/1; background: url(../images/common/deco_circle.svg) center/contain no-repeat; animation: rotate 80s linear infinite; } @media screen and (max-width: 960px) { .p-faq-content::before { top: 40px; right: -100px; width: 274px; } } .p-faq-content__category-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; } @media screen and (max-width: 960px) { .p-faq-content__category-list { grid-template-columns: repeat(1, 1fr); gap: 10px; margin-top: 40px; } } .p-faq-content__category-item { background: #C29080; } .p-faq-content__category-item a { display: flex; justify-content: space-between; align-items: center; padding: 20px; transition: all 0.3s ease; } .p-faq-content__category-item a:hover { opacity: 0.7; } .p-faq-content__category-text { color: #fff; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; } .p-faq-content__category-icon { width: 10px; height: 10px; stroke: #fff; transform: rotate(135deg); } .p-faq-content__block { padding: 160px 0; border-bottom: 1px solid #C3C3C3; } @media screen and (max-width: 960px) { .p-faq-content__block { padding: 60px 0 0; border-bottom: none; } } .p-faq-content__block:last-of-type { border-bottom: none; } @media screen and (max-width: 960px) { .p-faq-content__list { margin-top: 40px; } } .p-faq-content__list .c-faq-item { border: 1px solid #F0F0F0; } .p-contact__button { margin-top: 50px; } @media screen and (max-width: 960px) { .p-contact__button { margin-top: 40px; } } .p-contact__button a { position: relative; display: flex; align-items: center; justify-content: center; height: 53px; width: -moz-fit-content; width: fit-content; min-width: 288px; background: #C29080; padding-inline: 31px 54px; color: #fff; transition: all 0.4s ease; } @media screen and (min-width: 961px) { .p-contact__button a:focus { opacity: 0.6; } .p-contact__button a:hover { opacity: 0.6; } } @media screen and (max-width: 960px) { .p-contact__button a { min-height: 41px; min-width: 252px; padding-inline: 23px 46px; } } .p-contact__button-text { display: flex; align-items: center; gap: 10px; } @media screen and (max-width: 960px) { .p-contact__button-text { flex-wrap: wrap; justify-content: center; gap: 8px; } } .p-contact__button-text-main { font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; } .p-contact__button-text-sub { font-size: 1.2rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1; } .p-contact__button-icon { position: absolute; right: 31px; width: 13px; height: 13px; stroke: #fff; } @media screen and (max-width: 960px) { .p-contact__button-icon { right: 23px; } } .p-contact-intro__wrapper { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding-right: 0; } @media screen and (max-width: 960px) { .p-contact-intro__wrapper { flex-direction: column-reverse; align-items: flex-start; gap: 47px; } } .p-contact-intro__text { width: 38%; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-contact-intro__text { width: 100%; font-size: 1.4rem; line-height: 2.4285; letter-spacing: 0; padding-right: 30px; } } .p-contact-intro__image { width: 56.2962%; height: auto; aspect-ratio: 760/483; } @media screen and (max-width: 960px) { .p-contact-intro__image { width: 100%; aspect-ratio: 345/360; } } .p-contact-intro__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-contact-howto { padding: 200px 0; } @media screen and (max-width: 960px) { .p-contact-howto { padding: 120px 0; } } .p-contact-howto__list { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 200px; margin-top: 60px; } @media screen and (max-width: 960px) { .p-contact-howto__list { display: flex; flex-direction: column; gap: 60px; } } .p-contact-howto__list::after { content: ""; position: absolute; left: 50%; width: 1px; height: 100%; background: #C3C3C3; transform: translateX(-50%); } @media screen and (max-width: 960px) { .p-contact-howto__list::after { display: none; } } .p-contact-howto__image { width: 100%; height: auto; aspect-ratio: 50/30; } .p-contact-howto__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-contact-howto__title { margin-top: 36px; font-size: 2.8rem; font-weight: 400; letter-spacing: 0.12em; line-height: 1.4615; } @media screen and (max-width: 960px) { .p-contact-howto__title { margin-top: 28px; font-size: 2.6rem; } } .p-contact-howto__text { margin-top: 24px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-contact-howto__text { margin-top: 22px; font-size: 1.2rem; line-height: 2.1666; } } .p-contact-online { padding: 120px 0 200px; background: #E8E3DD; } @media screen and (max-width: 960px) { .p-contact-online { padding: 100px 0; } } .p-contact-online__text { padding-top: 80px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-contact-online__text { padding-top: 60px; font-size: 1.2rem; line-height: 1.8333; } } .p-contact-online__wrapper { display: flex; gap: 50px; background: #fff; margin-top: 60px; padding: 50px; } @media screen and (max-width: 960px) { .p-contact-online__wrapper { flex-direction: column; gap: 40px; margin-top: 40px; padding: 40px 25px; } } .p-contact-online__image { width: 44%; height: auto; aspect-ratio: 418/390; } @media screen and (max-width: 960px) { .p-contact-online__image { width: 100%; aspect-ratio: 264/320; } } .p-contact-online__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-contact-online__content { width: 56%; } @media screen and (max-width: 960px) { .p-contact-online__content { width: 100%; } } .p-contact-online__list { display: flex; flex-direction: column; gap: 16px; } @media screen and (max-width: 960px) { .p-contact-online__list { gap: 24px; } } .p-contact-online__item-title { font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.6666; } @media screen and (max-width: 960px) { .p-contact-online__item-title { font-size: 1.6rem; } } .p-contact-online__item-text { margin-top: 4px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-contact-online__item-text { margin-top: 8px; font-size: 1.2rem; line-height: 1.5; } } @media screen and (max-width: 960px) { .p-contact-online .p-contact__button a { width: 100%; } } .p-contact-faq { padding: 120px 0 200px; background: #F0F0F0; } @media screen and (max-width: 960px) { .p-contact-faq { padding: 100px 0; } } .p-contact-faq__list { padding-top: 80px; display: flex; flex-direction: column; } @media screen and (max-width: 960px) { .p-contact-faq__list { padding: 0; margin-top: 40px; } } .p-contact-faq .c-button { margin-top: 90px; } @media screen and (max-width: 960px) { .p-contact-faq .c-button { margin-top: 60px; } } .p-about-concept { padding: 120px 0 160px; } @media screen and (max-width: 960px) { .p-about-concept { padding: 100px 0; } } .p-about-concept__wrapper { display: flex; justify-content: space-between; gap: 40px; margin-right: -250px; } @media screen and (max-width: 960px) { .p-about-concept__wrapper { flex-direction: column-reverse; gap: 47px; margin: 47px 0 0; } } .p-about-concept__text-area { flex-shrink: 0; margin-top: 66px; } @media screen and (max-width: 960px) { .p-about-concept__text-area { margin-top: 0; } } .p-about-concept__read { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-about-concept__read { font-size: 2.2rem; } } .p-about-concept__text { margin-top: 46px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-about-concept__text { margin-top: 26px; font-size: 1.4rem; line-height: 2.42; } } .p-about-concept__image { width: 56.29%; height: auto; aspect-ratio: 76/66; } @media screen and (max-width: 960px) { .p-about-concept__image { width: auto; aspect-ratio: 345/276; margin-right: calc(50% - 50vw); } } .p-about-concept__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-about-support { position: relative; padding: 120px 0; background: #F0F0F0; } @media screen and (max-width: 960px) { .p-about-support { padding: 100px 0; } } .p-about-support::before { content: ""; position: absolute; bottom: -200px; right: -88px; width: 500px; height: auto; aspect-ratio: 1/1; background: url(../images/common/deco_circle.svg) center/contain no-repeat; animation: rotate 80s linear infinite; } @media screen and (max-width: 960px) { .p-about-support::before { display: none; } } .p-about-support__wrapper { position: relative; } .p-about-support__content { position: relative; width: 723px; margin: 0 auto; padding: 148px 0 180px; } @media screen and (max-width: 960px) { .p-about-support__content { width: 100%; margin-top: 50px; padding: 0; } } .p-about-support__image { position: absolute; height: auto; } @media screen and (max-width: 960px) { .p-about-support__image { position: static; } } .p-about-support__image:nth-child(1) { top: -154px; left: -176px; width: 296px; aspect-ratio: 296/382; } @media screen and (max-width: 960px) { .p-about-support__image:nth-child(1) { width: 29vw; aspect-ratio: 109/157; margin-left: 12vw; transform: translateX(-30px); } } .p-about-support__image:nth-child(2) { top: 82px; right: -439px; width: 520px; aspect-ratio: 520/385; } @media screen and (max-width: 960px) { .p-about-support__image:nth-child(2) { width: 56vw; aspect-ratio: 211/155; margin: -26.66vw -30px 0 auto; } } .p-about-support__image:nth-child(3) { bottom: -18px; left: -360px; width: 425px; aspect-ratio: 425/355; } @media screen and (max-width: 960px) { .p-about-support__image:nth-child(3) { width: 68vw; aspect-ratio: 254/132; margin: 3.2vw 0 0 -30px; } } .p-about-support__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-about-support__text-area { filter: drop-shadow(0px 0px 22px #FFFFFF) drop-shadow(0px 0px 22px rgba(255, 255, 255, 0.7)) drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6)); } @media screen and (max-width: 960px) { .p-about-support__text-area { margin-top: 50px; } } .p-about-support__read { font-size: 2.8rem; font-weight: 400; letter-spacing: 0.12em; line-height: 2.3; } @media screen and (max-width: 960px) { .p-about-support__read { font-size: 2.2rem; line-height: 2; } } .p-about-support__text { margin-top: 30px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.12em; line-height: 2; } @media screen and (max-width: 960px) { .p-about-support__text { margin-top: 26px; font-size: 1.4rem; line-height: 2.43; } } .p-about-support__contact { position: relative; z-index: 1; margin-top: 70px; filter: drop-shadow(0px 0px 22px #FFFFFF) drop-shadow(0px 0px 22px rgba(255, 255, 255, 0.7)) drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6)); } @media screen and (max-width: 960px) { .p-about-support__contact { margin-top: 50px; } } .p-about-support__contact-text { background: rgba(194, 144, 128, 0.2); padding: 10px 20px; text-align: center; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.3; } .p-about-support__contact-list { display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center; gap: 10px; margin-top: 20px; color: #fff; } @media screen and (max-width: 960px) { .p-about-support__contact-list { display: grid; grid-template-columns: repeat(2, 1fr); } } .p-about-support__contact-item a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px; background: #C29080; } .p-about-support__contact-title { text-align: center; margin-top: 8px; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } .p-about-faq { padding: 120px 0; } @media screen and (max-width: 960px) { .p-about-faq { padding: 100px 0; } } .p-about-faq .c-title { text-align: center; } @media screen and (max-width: 960px) { .p-about-faq .c-title { display: flex; flex-direction: column; } } .p-about-faq .c-title::before { display: none; } @media screen and (max-width: 960px) { .p-about-faq .c-title::before { display: block; } } .p-about-faq .c-title--horizontal .c-title__jp::before { display: none; } .p-about-faq__text { margin-top: 50px; text-align: center; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.6666; } @media screen and (max-width: 960px) { .p-about-faq__text { margin-top: 40px; font-size: 1.6rem; } } .p-about-faq__button { margin: 86px auto 0; width: 260px; height: 80px; } @media screen and (max-width: 960px) { .p-about-faq__button { margin-top: 40px; } } .p-about-faq__button a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #C29080; color: #fff; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } .p-about .p-facility-list { background: rgba(178, 153, 125, 0.2); } .p-about .p-photo { background: #fff; } .p-facility__title { color: #C29080; } .p-facility__title-en { font-family: "Barlow", sans-serif; font-size: 4.6rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; } @media screen and (max-width: 960px) { .p-facility__title-en { font-size: 3.4rem; line-height: 1.05; } } .p-facility__title-jp { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-facility__title-jp { margin-top: 11px; font-size: 1.6rem; line-height: 1.25; } } .p-facility__title-jp::before { content: ""; width: 20px; height: 1px; background: #C29080; } @media screen and (max-width: 960px) { .p-facility__title-jp::before { width: 18px; } } .p-facility-intro { padding: 140px 0 160px; background: #F0EBE5; text-align: center; } @media screen and (max-width: 960px) { .p-facility-intro { padding: 120px 0; } } .p-facility-intro__logo { width: -moz-fit-content; width: fit-content; height: 56px; margin: 0 auto; } @media screen and (max-width: 960px) { .p-facility-intro__logo { max-width: 310px; } } .p-facility-intro__logo img { width: auto; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-facility-intro__title { margin-top: 60px; font-size: 2.8rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2.1428; } @media screen and (max-width: 960px) { .p-facility-intro__title { font-size: 2.1rem; line-height: 1.9; } } .p-facility-intro__text { margin-top: 20px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 3.125; } @media screen and (max-width: 960px) { .p-facility-intro__text { margin-top: 60px; font-size: 1.4rem; line-height: 2.2857; } } .p-facility-detail { position: relative; background: #F7F5F2; } .p-facility-detail::before { content: ""; position: absolute; top: -66px; left: 50px; width: 200px; height: auto; aspect-ratio: 1/1; background: url(../images/common/deco_circle.svg) center/contain no-repeat; animation: rotate 80s linear infinite; } @media screen and (max-width: 960px) { .p-facility-detail::before { display: none; } } .p-facility-detail__block { display: flex; align-items: center; } @media screen and (max-width: 960px) { .p-facility-detail__block { flex-direction: column-reverse; } } @media screen and (max-width: 960px) { .p-facility-detail__block + .p-facility-detail__block { margin-top: 20px; } } .p-facility-detail__text-area { width: 37.5%; padding-inline: 9.375% 6.25%; } @media screen and (max-width: 960px) { .p-facility-detail__text-area { width: 100%; padding: 60px 30px; } } .p-facility-detail__read { margin-top: 63px; font-size: 2.4rem; font-weight: 400; letter-spacing: 0.1em; line-height: 2; white-space: nowrap; } @media screen and (max-width: 960px) { .p-facility-detail__read { margin-top: 27px; font-size: 2.2rem; line-height: 1.7272; white-space: normal; } } .p-facility-detail__text { margin-top: 38px; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 2.4; } @media screen and (max-width: 960px) { .p-facility-detail__text { margin-top: 27px; font-size: 1.4rem; line-height: 2.2857; } } .p-facility-detail__slider { position: relative; width: 62.5%; height: auto; aspect-ratio: 100/90; } @media screen and (max-width: 960px) { .p-facility-detail__slider { width: 100%; } } .p-facility-detail__slider-button-wrap { position: absolute; align-items: flex-end; height: 50%; bottom: 50px; left: -50px; transform: translateX(-100%); } @media screen and (max-width: 960px) { .p-facility-detail__slider-button-wrap { bottom: -10px; left: auto; right: 30px; height: auto; transform: translateY(100%); } } @media screen and (max-width: 960px) { .p-facility-detail__slider-button { display: none; } } .p-facility-detail__image { width: 100%; height: 100%; } .p-facility-detail__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* info */ .p-facility-info { background: #F0EBE5; } .p-facility-info__wrapper { max-width: 1600px; margin: 0 auto; padding: 200px 150px 100px; } @media screen and (max-width: 960px) { .p-facility-info__wrapper { padding: 100px 30px 60px; } } .p-facility-info__image { width: 100%; height: auto; aspect-ratio: 13/8; } @media screen and (max-width: 960px) { .p-facility-info__image { aspect-ratio: 315/380; } } .p-facility-info__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-facility-info__content { display: flex; align-items: center; gap: 110px; margin-top: 40px; } @media screen and (max-width: 960px) { .p-facility-info__content { display: block; margin-top: 60px; } } .p-facility-info__head { position: relative; } @media screen and (max-width: 960px) { .p-facility-info__head { width: 100%; padding-bottom: 50px; } } .p-facility-info__head::after { content: ""; position: absolute; top: 0; right: -60px; width: 1px; height: 100%; background: #1F2A39; } @media screen and (max-width: 960px) { .p-facility-info__head::after { top: auto; bottom: 0; right: 0; width: 100%; height: 1px; background: #C3C3C3; } } .p-facility-info__logo { width: -moz-fit-content; width: fit-content; margin: 0 auto; height: 56px; } .p-facility-info__logo img { width: auto; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-facility-info__name { text-align: center; margin-top: 27px; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.05em; line-height: 1.125; } @media screen and (max-width: 960px) { .p-facility-info__name { font-size: 1.5rem; } } @media screen and (max-width: 960px) { .p-facility-info__data { padding: 40px 30px 0; } } .p-facility-info__address { font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .p-facility-info__address { font-size: 1.8rem; line-height: 2.37; } } .p-facility-info__contact { display: flex; align-items: flex-end; gap: 20px; margin-top: 10px; } @media screen and (max-width: 960px) { .p-facility-info__contact { display: block; margin-top: 12px; } } .p-facility-info__tel { font-family: "Barlow", sans-serif; font-size: 2.6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.3846; white-space: nowrap; } @media screen and (max-width: 960px) { .p-facility-info__tel { font-size: 3.1rem; line-height: 1.46; } } .p-facility-info__time { text-align: left; font-size: 1.2rem; font-weight: 400; letter-spacing: 0; line-height: 2.1666; } @media screen and (max-width: 960px) { .p-facility-info__time { font-size: 1.3rem; line-height: 1.5; } } @media screen and (max-width: 960px) { .p-facility-info__time span { font-size: 1.3rem; } } .p-facility-info__url { margin-top: 9px; font-size: 1.2rem; font-weight: 400; letter-spacing: 0; line-height: 1.6666; } @media screen and (max-width: 960px) { .p-facility-info__url { margin-top: 24px; font-size: 1.6rem; } } .p-facility-info__url a { transition: all 0.4s ease; } @media screen and (min-width: 961px) { .p-facility-info__url a:focus { opacity: 0.6; } .p-facility-info__url a:hover { opacity: 0.6; } } .p-facility-plan { background: #F0EBE5; padding: 40px 0 200px; } .p-facility-plan__wrapper { max-width: 1600px; margin: 0 auto; padding: 0 150px; } .p-information-recommend { padding-bottom: 180px; } @media screen and (max-width: 960px) { .p-information-recommend { padding-bottom: 120px; } } .p-information-recommend__slider-bottom { display: flex; align-items: center; gap: 80px; margin-top: 80px; } @media screen and (max-width: 960px) { .p-information-recommend__slider-bottom { gap: 34px; margin-top: 40px; } } @media screen and (max-width: 960px) { .p-information-recommend__slider-button { display: none; } } .p-information-recommend__list { overflow: visible; } @media screen and (max-width: 960px) { .p-information-recommend__list { margin-right: 0; } } .p-information-recommend__item { width: 470px; } @media screen and (max-width: 960px) { .p-information-recommend__item { width: 100%; } } .p-information-recommend__item a { transition: all 0.4s ease; } .p-information-recommend__item a:hover { opacity: 0.6; } .p-information-recommend__item .c-item-information__date { font-size: 2rem; } @media screen and (max-width: 960px) { .p-information-recommend__item .c-item-information__date { font-size: 1.6rem; } } .p-information-recommend__item .c-item-information__tag { font-size: 2rem; padding: 6px 23px; } @media screen and (max-width: 960px) { .p-information-recommend__item .c-item-information__tag { font-size: 1.4rem; padding: 4px 16px; } } .p-information-recommend__item .c-item-information__title { font-size: 2rem; } @media screen and (max-width: 960px) { .p-information-recommend__item .c-item-information__title { margin-top: 13px; font-size: 1.8rem; } } .p-information-recommend__item .c-item-information__text { font-size: 1.4rem; } .p-information-archive { padding: 100px 0; background: #E8E3DD; } @media screen and (max-width: 960px) { .p-information-archive { padding: 80px 0; } } .p-information-archive__head { display: flex; justify-content: center; align-items: center; gap: 120px; } @media screen and (max-width: 960px) { .p-information-archive__head { flex-direction: column; gap: 20px; } } .p-information-sort { display: flex; gap: 40px; align-items: center; } @media screen and (max-width: 960px) { .p-information-sort { gap: 20px; } } .p-information-sort__title { font-family: "Barlow", sans-serif; font-size: 2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.9; } @media screen and (max-width: 960px) { .p-information-sort__title { font-size: 1.4rem; line-height: 1.35; } } .p-information-sort__category { display: flex; gap: 60px; } @media screen and (max-width: 960px) { .p-information-sort__category { gap: 20px; } } .p-information-sort__text { position: relative; font-family: "Barlow", sans-serif; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.2em; line-height: 1.6666; } @media screen and (max-width: 960px) { .p-information-sort__text { font-size: 1.4rem; letter-spacing: 0; } } .p-information-sort__text:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -30px; width: 1px; height: 15px; background: #C3C3C3; transform: translateY(-50%); } @media screen and (max-width: 960px) { .p-information-sort__text:not(:last-child)::after { right: -10px; } } .p-information-sort__category a { transition: all 0.4s ease; } .p-information-sort__category a:hover { opacity: 0.6; } .post-type-archive-information:not(.date) .p-information-sort__category .p-information-sort__text.-all, .term-info .p-information-sort__category .p-information-sort__text.-info, .term-blog .p-information-sort__category .p-information-sort__text.-blog { color: #C29080; pointer-events: none; } .p-information-sort__year { position: relative; } .p-information-sort__button { position: relative; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #9C9292; font-family: "Barlow", sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.6666; transition: all 0.4s ease; } @media screen and (max-width: 960px) { .p-information-sort__button { gap: 8px; font-size: 1.4rem; } } .p-information-sort__button::after { content: ""; display: block; width: 14px; height: 11px; background: #9C9292; clip-path: polygon(100% 0, 0 0, 50% 100%); } @media screen and (max-width: 960px) { .p-information-sort__button::after { width: 10px; height: 6px; } } .p-information-sort__button:hover { opacity: 0.6; } .p-information-sort__list { width: 100%; position: absolute; z-index: 1; height: 0; overflow: hidden; text-align: center; } .p-information-sort__item { background: #9C9292; color: #fff; font-size: 1.5rem; font-weight: 400; letter-spacing: 0; line-height: 2.2; } @media screen and (max-width: 960px) { .p-information-sort__item { font-size: 1.4rem; } } .p-information-sort__item:not(:first-child) { border-top: 1px solid #fff; } .p-information-sort__item a { display: block; width: 100%; height: 100%; transition: all 0.4s ease; } .p-information-sort__item a:hover { opacity: 0.6; } .p-information-archive__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; max-width: 1475px; width: 100%; margin: 100px auto 0; padding: 0 100px; } @media screen and (max-width: 960px) { .p-information-archive__list { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 40px; padding: 0 12px; } } .p-information-single__wrapper { padding-bottom: 180px; } @media screen and (max-width: 960px) { .p-information-single__wrapper { padding-bottom: 120px; } } .p-information-single__content { max-width: 900px; margin: 0 auto; } @media screen and (max-width: 960px) { .p-information-single__content { max-width: 100%; margin: 0; } } .p-information-single__head { display: flex; align-items: center; gap: 27px; } @media screen and (max-width: 960px) { .p-information-single__head { gap: 11px; } } .p-information-single .c-item-information__date { font-size: 2.8rem; } @media screen and (max-width: 960px) { .p-information-single .c-item-information__date { font-size: 1.2rem; } } .p-information-single .c-item-information__date .-day { padding-left: 10px; } .p-information-single .c-item-information__tag { padding-inline: 20px; font-size: 1.3rem; } @media screen and (max-width: 960px) { .p-information-single .c-item-information__tag { padding-inline: 14px; font-size: 1.1rem; } } .p-information-single__title { margin-top: 15px; font-size: 2.8rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; } @media screen and (max-width: 960px) { .p-information-single__title { margin-top: 10px; padding-bottom: 15px; font-size: 1.6rem; } } .p-information-single__figure { width: 100%; height: auto; aspect-ratio: 86/56; margin-top: 50px; } @media screen and (max-width: 960px) { .p-information-single__figure { margin-top: 30px; } } .p-information-single__figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-information-contact { max-width: 1400px; margin: 180px auto 0; padding: 0 100px; } @media screen and (max-width: 960px) { .p-information-contact { margin-top: 120px; padding: 0; } } .p-information-contact__wrapper { width: 100%; padding: 80px; background: #E8E3DD; text-align: center; } @media screen and (max-width: 960px) { .p-information-contact__wrapper { padding: 80px 12px; } } .p-information-contact__text { font-size: 2rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1.5; } @media screen and (max-width: 960px) { .p-information-contact__text { font-size: 1.6rem; } } .p-information-contact__info { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 30px; margin-top: 30px; } @media screen and (max-width: 960px) { .p-information-contact__info { display: block; margin-top: 20px; } } .p-information-contact__tel { font-family: "Barlow", sans-serif; font-size: 2.6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.46; } .p-information-contact__time { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } .p-information-contact__button { width: 276px; height: 76px; margin: 60px auto 0; } @media screen and (max-width: 960px) { .p-information-contact__button { margin: 40px auto 0; } } .p-information-contact__button a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #1F2A39; color: #fff; font-size: 1.6rem; font-weight: 400; letter-spacing: 0; line-height: 1; transition: all 0.4s ease; } .p-information-contact__button a:hover { opacity: 0.6; } .s-header { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; padding: 15px 30px; background: rgba(255, 255, 255, 0.9); } @media screen and (max-width: 960px) { .s-header { padding: 40px 20px; background: transparent; } } .s-header__wrapper { display: flex; align-items: center; justify-content: space-between; } .s-header__logo { position: relative; z-index: 999; width: 60px; height: 60px; } @media screen and (max-width: 960px) { .s-header__logo { width: 56px; height: 56px; } } @media screen and (max-width: 960px) { .s-header__menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: #1F2A39; color: #C29080; padding: 115px 30px 30px; overflow: auto; opacity: 0; pointer-events: none; transition: all 0.4s ease; } } @media screen and (max-width: 960px) { .s-header__menu.is-active { opacity: 1; pointer-events: visible; } } .s-header__nav { margin-left: auto; } @media screen and (max-width: 960px) { .s-header__nav { height: auto; } } .s-header__nav-list { display: flex; gap: 33px; } .s-header__nav-list--head { justify-content: flex-end; gap: 50px; } @media screen and (max-width: 960px) { .s-header__nav-list { display: block; padding: 40px 0; border-bottom: 1px solid #C29080; } } @media screen and (max-width: 960px) { .s-header__nav-list:last-of-type { display: flex; flex-wrap: wrap; border-bottom: none; } } @media screen and (max-width: 960px) { .s-header__nav-list:last-of-type .s-header__nav-item { width: calc(50% - 15px); margin-top: 0; } } @media screen and (max-width: 960px) { .s-header__nav-list:last-of-type .s-header__nav-item:last-child { width: 100%; border-top: 1px solid #C29080; margin-top: 10px; padding-top: 37px; } } .s-header__nav-list + .s-header__nav-list { margin-top: 13px; } @media screen and (max-width: 960px) { .s-header__nav-list + .s-header__nav-list { margin-top: 0; } } .s-header__nav-item { position: relative; display: flex; align-items: center; color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } .s-header__nav-item--small { font-size: 1.2rem; } @media screen and (max-width: 960px) { .s-header__nav-item { display: block; } } .s-header__nav-item:not(:last-child)::after { content: ""; position: absolute; right: -16px; width: 1px; height: 100%; background: #C29080; } @media screen and (max-width: 960px) { .s-header__nav-item:not(:last-child)::after { display: none; } } .s-header__nav-item a { display: flex; align-items: center; gap: 6px; transition: all 0.4s ease; } @media screen and (min-width: 961px) { .s-header__nav-item a:focus { opacity: 0.6; } .s-header__nav-item a:hover { opacity: 0.6; } } .s-header__nav-item a:has(.s-header__nav-child) { pointer-events: none; } .s-header__nav-item:has(.s-header__nav-child)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-bottom: 50px; } @media screen and (max-width: 960px) { .s-header__nav-item:has(.s-header__nav-child)::before { display: none; } } .s-header__nav-item svg { width: 5px; height: 9px; stroke: #C29080; stroke-width: 2px; transform: rotate(90deg); } @media screen and (max-width: 960px) { .s-header__nav-item + .s-header__nav-item { margin-top: 30px; } } @media screen and (max-width: 960px) { .s-header__nav-text { font-family: "Barlow", sans-serif; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } } @media screen and (max-width: 960px) { .s-header__nav-text span { display: block; margin-top: 8px; font-family: "Zen Old Mincho", serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } } @media screen and (min-width: 961px) { .s-header__nav-child { position: absolute; bottom: -24px; left: -18px; width: -moz-fit-content; width: fit-content; min-width: 260px; padding: 0 30px; background: rgba(217, 220, 228, 0.9); transform: translateY(100%); opacity: 0; pointer-events: none; transition: all 0.4s ease; } } @media screen and (max-width: 960px) { .s-header__nav-child { margin-top: 30px; } } .s-header__nav-child.is-active { opacity: 1; pointer-events: visible; } .s-header__nav-child .s-header__nav-item { padding: 17px 0; } @media screen and (max-width: 960px) { .s-header__nav-child .s-header__nav-item { padding: 0; } } .s-header__nav-child .s-header__nav-item:not(:last-child) { border-bottom: 1px solid rgba(107, 107, 107, 0.2); } @media screen and (max-width: 960px) { .s-header__nav-child .s-header__nav-item:not(:last-child) { border-bottom: none; } } .s-header__nav-child .s-header__nav-item::after { display: none; } @media screen and (max-width: 960px) { .s-header__nav-child .s-header__nav-item a { position: relative; padding-left: 20px; } } @media screen and (max-width: 960px) { .s-header__nav-child .s-header__nav-item a::before { content: ""; position: absolute; top: 8px; left: 0; width: 10px; height: 1px; background: #C29080; } } @media screen and (max-width: 960px) { .s-header__language { position: relative; z-index: 999; margin-left: auto; } } .s-header__language a { display: none; } @media screen and (max-width: 960px) { .s-header__language a { display: flex; align-items: center; gap: 10px; color: #C29080; font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; } } @media screen and (max-width: 960px) { .s-header__language svg { width: 5px; height: 9px; stroke: #C29080; stroke-width: 2px; transform: rotate(90deg); } } .s-header__button { margin-left: 40px; } @media screen and (max-width: 960px) { .s-header__button { display: none; } } .s-header__button a { display: flex; align-items: center; justify-content: center; width: 140px; height: 40px; border-radius: 30px; background: #C29080; color: #fff; font-family: "Barlow", sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.05em; line-height: 1; } .s-header__hamburger { display: none; } @media screen and (max-width: 960px) { .s-header__hamburger { position: relative; z-index: 999; display: flex; justify-content: center; align-items: center; width: 30px; height: 21px; margin-left: 30px; cursor: pointer; } } @media screen and (max-width: 960px) { .s-header__hamburger span { position: absolute; width: 100%; height: 3px; background: #C29080; transition: all 0.4s ease; } } @media screen and (max-width: 960px) { .s-header__hamburger span:first-of-type { transform: translateY(-9px); } } @media screen and (max-width: 960px) { .s-header__hamburger span:last-of-type { transform: translateY(9px); } } .s-header__hamburger.is-active span:first-of-type, .s-header__hamburger.is-active span:last-of-type { transform: translateY(0); } .s-header__sns { display: none; } @media screen and (max-width: 960px) { .s-header__sns { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; } } @media screen and (max-width: 960px) { .s-header__sns-item { width: 95px; } } @media screen and (max-width: 960px) { .s-header__sns-item a { display: flex; flex-direction: column; align-items: center; gap: 10px; } } @media screen and (max-width: 960px) { .s-header__sns-icon { max-width: 22px; min-height: 20px; } } @media screen and (max-width: 960px) { .s-header__sns-label { font-family: "Barlow", sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } } .s-footer { padding: 100px 100px 40px; background: #F0F0F0; color: #C29080; } @media screen and (max-width: 960px) { .s-footer { padding: 80px 30px 20px; } } .s-footer__main { display: flex; justify-content: space-between; } @media screen and (max-width: 960px) { .s-footer__main { display: block; } } .s-footer__title { width: 310px; height: auto; aspect-ratio: 310/144; } @media screen and (max-width: 960px) { .s-footer__title { width: 248px; } } .s-footer__title img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .s-footer__sns { display: flex; align-items: center; gap: 45px; margin-top: 80px; } @media screen and (max-width: 960px) { .s-footer__sns { justify-content: center; gap: 20px; margin-top: 60px; } } .s-footer__sns-item { width: 95px; } .s-footer__sns-item a { display: flex; align-items: center; gap: 10px; transition: all 0.4s ease; } @media screen and (min-width: 961px) { .s-footer__sns-item a:focus { opacity: 0.6; } .s-footer__sns-item a:hover { opacity: 0.6; } } @media screen and (max-width: 960px) { .s-footer__sns-item a { flex-direction: column; } } .s-footer__sns-icon { display: flex; align-items: center; max-width: 22px; min-height: 20px; } .s-footer__sns-label { font-family: "Barlow", sans-serif; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .s-footer__sns-label { font-size: 1.4rem; } } .s-footer__nav { display: flex; gap: 70px; } @media screen and (max-width: 960px) { .s-footer__nav { display: block; margin-top: 20px; } } @media screen and (max-width: 960px) { .s-footer__nav-list { padding: 40px 0; border-bottom: 1px solid #C29080; } } @media screen and (max-width: 960px) { .s-footer__nav-list:last-of-type { display: flex; flex-wrap: wrap; border-bottom: none; row-gap: 30px; justify-content: space-between; } } @media screen and (max-width: 960px) { .s-footer__nav-list:last-of-type .s-footer__nav-item { width: calc(50% - 15px); margin-top: 0; } } @media screen and (max-width: 960px) { .s-footer__nav-list:last-of-type .s-footer__nav-item:last-child { width: 100%; border-top: 1px solid #C29080; margin-top: 10px; padding-top: 37px; } } .s-footer__nav-item + .s-footer__nav-item { margin-top: 30px; } .s-footer__nav-item a { display: block; transition: all 0.4s ease; } @media screen and (min-width: 961px) { .s-footer__nav-item a:focus { opacity: 0.6; } .s-footer__nav-item a:hover { opacity: 0.6; } } .s-footer__nav-text { font-family: "Barlow", sans-serif; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .s-footer__nav-text { font-size: 1.5rem; } } .s-footer__nav-text span { display: block; margin-top: 8px; font-family: "Zen Old Mincho", serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } .s-footer__nav-child { margin-top: 30px; } .s-footer__nav-child .s-footer__nav-item a { position: relative; padding-left: 20px; } .s-footer__nav-child .s-footer__nav-item a::before { content: ""; position: absolute; top: 8px; left: 0; width: 10px; height: 1px; background: #C29080; } .s-footer__sub { display: flex; flex-direction: column; align-items: center; margin-top: 100px; } @media screen and (max-width: 960px) { .s-footer__sub { margin-top: 22px; } } .s-footer__logo { width: 222px; height: auto; aspect-ratio: 222/52; mix-blend-mode: multiply; } @media screen and (max-width: 960px) { .s-footer__logo { width: 160px; } } .s-footer__links { display: flex; margin-top: 28px; gap: 36px; } @media screen and (max-width: 960px) { .s-footer__links { flex-wrap: wrap; gap: 18px 19px; margin-top: 20px; } } .s-footer__links-item { position: relative; display: flex; align-items: center; } .s-footer__links-item:not(:last-of-type)::after { content: ""; position: absolute; right: -19px; width: 1px; height: 100%; background: #1F2A39; } @media screen and (max-width: 960px) { .s-footer__links-item:not(:last-of-type)::after { right: -10px; } } .s-footer__links-item a { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1; color: #1F2A39; } @media screen and (max-width: 960px) { .s-footer__links-item a { gap: 5px; font-size: 1rem; letter-spacing: -0.04em; } } .s-footer__links-item a::after { content: ""; width: 11px; height: 10px; background: url(../images/common/icon_tab.svg) center center/contain no-repeat; } @media screen and (max-width: 960px) { .s-footer__links-item a::after { width: 10px; height: 9px; } } .s-footer__copy { margin-top: 40px; font-family: "Barlow", sans-serif; color: #1F2A39; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } @media screen and (max-width: 960px) { .s-footer__copy { margin-top: 30px; font-size: 1rem; } } .s-sub-nav { display: none; position: fixed; z-index: 997; bottom: 0; right: 0; width: 100%; transition: all 0.4s ease; opacity: 0; pointer-events: none; } @media screen and (max-width: 960px) { .s-sub-nav { display: block; } } .s-sub-nav.is-show { opacity: 1; pointer-events: visible; } .s-sub-nav__list { display: grid; grid-template-columns: repeat(4, 1fr); } .s-sub-nav__item { position: relative; display: flex; align-items: center; z-index: 0; height: 75px; } .s-sub-nav__item:not(:first-of-type):not(:last-of-type)::after { content: ""; position: absolute; right: 0; width: 1px; height: 40px; background: #fff; } .s-sub-nav__item a { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background: #1F2A39; transition: all 0.4s ease; } .s-sub-nav__item:first-of-type { position: relative; } .s-sub-nav__item:first-of-type a { background: #ECEBEB; } .s-sub-nav__item:first-of-type::before { content: ""; position: absolute; top: -7px; left: 0; width: 100%; height: 8px; background: #ECEBEB; border-top-right-radius: 8px; border-top-left-radius: 8px; } .s-sub-nav__item:first-of-type .s-sub-nav__text { color: #1F2A39; } .s-sub-nav__item:last-of-type { border-top-right-radius: 8px; overflow: hidden; } .s-sub-nav__icon { width: 20px; height: 20px; transition: all 0.4s ease; } .s-sub-nav__icon.-tel { width: 22px; height: 22px; } .s-sub-nav__icon.-line { fill: #fff; } .s-sub-nav__text { margin-top: 9px; color: #fff; font-size: 1.1rem; font-weight: 400; letter-spacing: 0; line-height: 1.09; text-align: center; transition: all 0.4s ease; } @media screen and (min-width: 961px) { .u-sp { display: none; } } @media screen and (max-width: 960px) { .u-pc { display: none; } } .u-mt0 { margin-top: 0; } .u-mt05 { margin-top: 0.5em; } .u-mb0 { margin-bottom: 0; } .u-mb05 { margin-bottom: 0.5em; } .u-pt0 { padding-top: 0; } .u-pt05 { padding-top: 0.5em; } .u-pb0 { padding-bottom: 0; } .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; } }