/*** 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; } *:where(h1, h2, h3, h4, h5, h6) { font-weight: inherit; } :root { --transition-duration: 1.5s; --transition-duration-before-load: 2s; } .js-fadeInItem { opacity: 0; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInItem.is-active { opacity: 1; } body:not(.is-loaded) .js-fadeInItem { transition-delay: var(--transition-duration-before-load); } .js-fadeInDownItem { opacity: 0; translate: 0 -3rem; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInDownItem.is-active { opacity: 1; translate: 0 0; } body:not(.is-loaded) .js-fadeInDownItem { transition-delay: var(--transition-duration-before-load); } .js-fadeInUpItem { opacity: 0; translate: 0 3rem; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInUpItem.is-active { opacity: 1; translate: 0 0; } body:not(.is-loaded) .js-fadeInUpItem { transition-delay: var(--transition-duration-before-load); } .js-fadeInRightItem { opacity: 0; translate: -3rem 0; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInRightItem.is-active { opacity: 1; translate: 0 0; } body:not(.is-loaded) .js-fadeInRightItem { transition-delay: var(--transition-duration-before-load); } .js-fadeInLeftItem { opacity: 0; translate: 3rem 0; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInLeftItem.is-active { opacity: 1; translate: 0 0; } body:not(.is-loaded) .js-fadeInLeftItem { transition-delay: var(--transition-duration-before-load); } .js-fadeInChild { opacity: 0; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .is-active .js-fadeInChild { opacity: 1; } body:not(.is-loaded) .js-fadeInChild { transition-delay: var(--transition-duration-before-load); } .js-fadeInUpChild { opacity: 0; translate: 0 3rem; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .is-active .js-fadeInUpChild { opacity: 1; translate: 0 0; } body:not(.is-loaded) .js-fadeInUpChild { transition-delay: var(--transition-duration-before-load); } .js-fadeInDownChild { opacity: 0; translate: 0 -3rem; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .is-active .js-fadeInDownChild { opacity: 1; translate: 0 0; } body:not(.is-loaded) .js-fadeInDownChild { transition-delay: var(--transition-duration-before-load); } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(1), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(1) { transition-delay: 0.3s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(2), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(2) { transition-delay: 0.6s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(3), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(3) { transition-delay: 0.9s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(4), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(4) { transition-delay: 1.2s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(5), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(5) { transition-delay: 1.5s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(6), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(6) { transition-delay: 1.8s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(7), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(7) { transition-delay: 2.1s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(8), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(8) { transition-delay: 2.4s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(9), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(9) { transition-delay: 2.7s; } .js-fadeInBox.-numbering [class*=js-fadeInChild]:nth-child(10), .js-fadeInBox.-numbering [class*=js-fadeInUpChild]:nth-child(10) { transition-delay: 3s; } html { font-size: 0.78125vw; } @media (width < 768px) { html { font-size: 2.6666666667vw; } } body { color: #165A53; font-family: "Shippori Mincho", serif; font-size: 1.5rem; letter-spacing: 0; line-height: 2; background: linear-gradient(180deg, #143935 0%, #466864 100%); background-attachment: fixed; } body.is-fixed { overflow-y: hidden; } img, svg { display: block; width: 100%; height: auto; } .c-svg-sprite { display: none; } a, button { cursor: pointer; } .l-content { position: relative; } .l-snow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .l-wrapper__grid { position: relative; display: grid; grid-template-columns: 1fr 29.296875% 1fr; grid-template-columns: 1fr 37.5rem 1fr; } @media (width < 768px) { .l-wrapper__grid { grid-template-columns: 100%; } } .l-inner { max-width: 32.5rem; margin-inline: auto; } @media screen and (max-width: 600px) { .l-side-left { display: none; } } .l-side-left__inner { position: sticky; top: 0; height: 100vh; display: grid; place-content: center; gap: 3rem; } .l-main { position: relative; color: #010201; background-color: #ECE3D8; } .l-side-menu { font-size: min(0.78125vw, 1.25vh); } @media screen and (max-width: 600px) { .l-side-menu { display: none; } } .c-loading { position: fixed; top: 0; width: 37.5rem; height: 100vh; z-index: 1000; background: linear-gradient(180deg, #466864 -18.06%, #F6F9F8 100%); z-index: 1000; } .c-loading-snow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-loading-horse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -70%) scale(0.7); width: 13.8rem; height: 9.2rem; opacity: 0.8; overflow: hidden; } .c-loading-blur { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: -webkit-backdrop-filter 2.5s ease; transition: backdrop-filter 2.5s ease; transition: backdrop-filter 2.5s ease, -webkit-backdrop-filter 2.5s ease; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); } .is-loaded .c-loading-blur { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .c-loading-horse img { width: 82.8rem; max-width: none; animation: sprite 0.8s steps(6) 0s infinite forwards; } @keyframes sprite { 0% { transform: translate(0%, 0); } to { transform: translate(-100%, 0); } } .c-item-card { display: block; } .c-item-card:has(.c-item-status) { pointer-events: none; } .c-item-card:hover .c-item-card__image::before { opacity: 1; } .c-item-card__image { position: relative; margin-bottom: 1.2rem; } .c-item-card__image::before { content: "VIEW MORE"; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-size: 1.2rem; line-height: 1; opacity: 0; transition: 0.3s ease-out opacity; } .c-item-more, .c-item-status { font-family: "Noto Sans JP", sans-serif; font-size: 1rem; width: -moz-max-content; width: max-content; line-height: 1; margin: 1.2rem 0 1.2rem; } .c-item-more { display: flex; align-items: flex-end; gap: 0.4rem; } .c-item-more .c-icon { width: 0.8rem; height: 1rem; } .c-item-info { font-family: "Noto Sans JP", sans-serif; } .c-item-series { font-size: 1rem; line-height: 1; margin-bottom: 0.5rem; opacity: 0.6; } .c-item-name { font-size: 1.07rem; white-space: nowrap; letter-spacing: 0.1rem; line-height: 1; } .c-item-color { display: flex; gap: 0.4rem; margin-top: 1.2rem; padding-left: 0.2rem; } .c-item-color__item { position: relative; width: 1.2rem; height: 1.2rem; border-radius: 50%; overflow: hidden; } .c-item-color__item span { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; } .c-item-price { font-family: trajan-pro-3, serif; margin-top: 1.6rem; font-size: 1.2rem; line-height: 1; } .c-item-price span { font-size: 1.6rem; } .c-item-info-flex { display: flex; align-items: flex-end; justify-content: center; gap: 1.6rem; } .c-item-info-flex .c-item-info { padding-bottom: 0.2rem; text-align: left; } .c-item-info-flex .c-item-price { margin-top: 0; text-align: right; } .p-side-title { display: flex; justify-content: center; width: 30.5rem; } .p-info-list { display: flex; flex-direction: column; gap: 0.4rem; } .p-info-list__item { border-bottom: 1px dashed #ECE3D8; } .p-info-list__item a { position: relative; display: block; color: #ECE3D8; padding: 1rem 0.5rem; transition: 0.3s ease-out opacity; } .p-info-list__item a:hover { opacity: 0.5; } .p-info-list__date { font-size: 1.324rem; line-height: 1; opacity: 0.5; } .p-info-list__title { position: relative; margin-top: 0.8rem; font-size: 1.63rem; line-height: 1; } .p-info-list__title::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 0.96rem; height: 1.2rem; background: url(../images/holiday2025_ico_info.svg) no-repeat center center/contain; } .p-meinvisual { position: relative; padding-top: 8rem; } .p-meinvisual__title { text-align: center; margin-bottom: 5rem; } .p-meinvisual__logo img { width: 7rem; margin-inline: auto; } .p-meinvisual__text { margin-top: 1.7rem; font-family: trajan-pro-3, serif; font-size: 2.4rem; line-height: 1; width: 100%; color: #131413; } .p-introduction { position: relative; overflow-x: clip; padding: 8rem 0; } .p-introduction-bg { display: block; position: absolute; top: 0; left: 0; width: 100%; } .p-introduction__en-text { position: relative; z-index: 1; width: 33.4rem; margin-inline: auto; margin-bottom: 0.5rem; font-family: trajan-pro-3, serif; font-size: 3rem; line-height: 1.26; color: #165A53; } .p-introduction__image { margin-bottom: 3rem; } .p-introduction__title { width: 31.5rem; margin-inline: auto; font-size: 2.4rem; margin-top: -6rem; margin-bottom: 2rem; line-height: 1.5; letter-spacing: 0.18rem; } .p-introduction__text { width: 31.5rem; margin-inline: auto; font-size: 1.4rem; line-height: 1.7; margin-bottom: 8rem; letter-spacing: 0.12rem; } .p-introduction__slider { position: relative; width: 21.3rem; margin-inline: auto; margin-bottom: 4rem; } .p-introduction__slider .swiper { overflow: visible; } .p-introduction__slider .swiper-wrapper { align-items: center; } .p-introduction__slider .swiper-slide { width: auto; height: auto; } .p-introduction-link__item { display: block; position: relative; width: 21.3rem; aspect-ratio: 1/1; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .p-introduction-link__item:hover::before { opacity: 1; } .p-introduction-link__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-introduction-link__item p { position: absolute; left: 0; right: 0; color: #fff; text-align: center; z-index: 2; } .p-introduction-link__item .p-introduction-link__num { top: 7rem; font-size: 1rem; line-height: 1; } .p-introduction-link__item .p-introduction-link__text { top: 50%; transform: translateY(-50%); font-family: trajan-pro-3, serif; font-size: 2rem; font-weight: 400; line-height: 1; } .p-introduction-link__item .p-introduction-link__more { font-size: 1rem; bottom: 5rem; line-height: 1; } .p-introduction-link__item .p-introduction-link__more .c-icon { width: 1rem; height: 0.48rem; margin-inline: auto; margin-top: 0.5rem; fill: #fff; } .p-introduction-link__item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; transition: 0.4s ease-out opacity; } .p-introduction-link__item.-green::before { background: rgba(70, 104, 100, 0.6); } .p-introduction-link__item.-mocha::before { background: rgba(168, 116, 67, 0.6); } .p-introduction-link__item.-pink::before { background: rgba(195, 121, 130, 0.6); } .p-introduction-link__item.-blue::before { background: rgba(65, 92, 114, 0.6); } .p-introduction-link__item.-gray::before { background: rgba(112, 112, 112, 0.6); } .swiper-pagination { display: flex; justify-content: center; align-items: center; gap: 0.8rem; position: relative; margin-top: 6rem; } .swiper-pagination.swiper-pagination-lock { margin-top: 0; } .swiper-pagination .swiper-pagination-bullet { position: relative; display: block; width: 2rem; height: 2rem; opacity: 1; margin: 0 !important; border-radius: 0; background: transparent; transition: all 0.3s ease; } .swiper-pagination .swiper-pagination-bullet::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: rgba(19, 20, 19, 0.4); } .swiper-pagination .swiper-pagination-bullet::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: #BA9308; opacity: 0; -webkit-clip-path: path("M10,0l1.079,7.395,5.992-4.466-4.466,5.992,7.395,1.079-7.395,1.079,4.466,5.992-5.992-4.466-1.079,7.395-1.079-7.395-5.992,4.466,4.466-5.992-7.395-1.079,7.395-1.079L2.929,2.929l5.992,4.466,1.079-7.395Z"); clip-path: path("M10,0l1.079,7.395,5.992-4.466-4.466,5.992,7.395,1.079-7.395,1.079,4.466,5.992-5.992-4.466-1.079,7.395-1.079-7.395-5.992,4.466,4.466-5.992-7.395-1.079,7.395-1.079L2.929,2.929l5.992,4.466,1.079-7.395Z"); transition: 0s ease opacity; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 0; } .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { opacity: 1; } .p-category-section { position: relative; padding: 7rem 0 0; overflow-x: clip; } .p-category-section-snow { display: block; position: absolute; top: 0; left: 0; width: 100%; z-index: 0; aspect-ratio: 1/1.5; } .p-category-section__bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-1px); width: 102%; aspect-ratio: 375/61; z-index: 0; } .p-category-section__bg path { fill: #ECE3D8; } .p-category-section__title { font-weight: 300; line-height: 1; text-align: center; color: #fff; } .p-category-section__title .-num { font-family: trajan-pro-3, serif; font-size: 2.8rem; margin-bottom: 2.3rem; } .p-category-section__title .-en { font-family: trajan-pro-3, serif; font-size: 3.2rem; margin-bottom: 1.2rem; } .p-category-section__title .-jp { position: relative; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-items: center; gap: 0.8rem; font-size: 2rem; } .p-category-section__title .-jp::before, .p-category-section__title .-jp::after { content: ""; display: block; width: 5.1rem; height: 1.1rem; background: url(../images/holiday2025_ico_title_deco.svg) no-repeat center center/contain; } .p-category-section__title .-jp::after { transform: rotateY(180deg); } .p-category-section__text { color: #fff; border: 1px solid #fff; margin-top: 4rem; padding: 2rem 0; font-size: 1.4rem; line-height: 1.57; letter-spacing: 0.18rem; text-align: center; } .p-category-section.-green { background: linear-gradient(180deg, #143935 14.92%, #CFCBC0 100%); } .p-category-section.-green .p-category-section__bg path { fill: #ECE3D8; } .p-category-section.-green .c-item-card__image::before { background: rgba(52, 82, 84, 0.3); } .p-category-section.-green .swiper-pagination .swiper-pagination-bullet::before { background: rgba(20, 57, 53, 0.5); } .p-category-section.-green .swiper-pagination .swiper-pagination-bullet::after { background: #143935; } .p-category-section.-mocha { background: linear-gradient(180deg, #A87443 14.92%, #DAC7BE 100%); } .p-category-section.-mocha .p-category-section__bg path { fill: #CFCBC0; } .p-category-section.-mocha .c-item-card__image::before { background: rgba(168, 116, 67, 0.3); } .p-category-section.-mocha .swiper-pagination .swiper-pagination-bullet::before { background: rgba(168, 116, 67, 0.5); } .p-category-section.-mocha .swiper-pagination .swiper-pagination-bullet::after { background: #A87443; } .p-category-section.-pink { background: linear-gradient(180deg, #C37982 14.92%, #D6C3C6 100%); } .p-category-section.-pink .p-category-section__bg path { fill: #DAC7BE; } .p-category-section.-pink .c-item-card__image::before { background: rgba(195, 121, 130, 0.3); } .p-category-section.-pink .swiper-pagination .swiper-pagination-bullet::before { background: rgba(195, 121, 130, 0.5); } .p-category-section.-pink .swiper-pagination .swiper-pagination-bullet::after { background: #C37982; background: url(../images/holiday2025_ico_pagenation_active_pink.svg) no-repeat center center/contain; } .p-category-section.-blue { background: linear-gradient(180deg, #415C72 15%, #84929D 65%); } .p-category-section.-blue .p-category-section__bg path { fill: #D6C3C6; } .p-category-section.-blue .c-item-card__image::before { background: rgba(65, 92, 114, 0.3); } .p-category-section.-blue .swiper-pagination .swiper-pagination-bullet::before { background: rgba(65, 92, 114, 0.5); } .p-category-section.-blue .swiper-pagination .swiper-pagination-bullet::after { background: #415C72; } .p-category-section.-gray { background: linear-gradient(180deg, #707070 0%, #C1BDBD 100%); padding-bottom: 0; } .p-category-section.-gray .p-category-section__bg path { fill: #84929D; } .p-category-section.-gray .c-item-card__image::before { background: rgba(112, 112, 112, 0.3); } .p-category-section.-gray .swiper-pagination .swiper-pagination-bullet::before { background: rgba(112, 112, 112, 0.5); } .p-category-section.-gray .swiper-pagination .swiper-pagination-bullet::after { background: #707070; } .p-category-lineup { padding: 6rem 0 5rem; } .p-category-lineup__title { position: relative; font-family: trajan-pro-3, serif; font-size: 2.4rem; margin-bottom: 5rem; line-height: 1; text-align: center; } .p-category-lineup__title::after { content: ""; display: block; margin: 1.2rem auto 0; width: 5.1rem; height: 1px; background: currentColor; } .p-category-lineup__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } .p-category-lineup__link { display: block; } .p-category-lineup__image { overflow: hidden; } .p-category-lineup__image img { transition: transform 0.3s ease-out; } .p-limited { padding: 6rem 0; background: linear-gradient(180deg, #BEAE95 0%, #ECE3D8 100%); } .p-limited__title { margin-bottom: 3rem; text-align: center; } .p-limited__title .-en { font-family: trajan-pro-3, serif; font-size: 2.8rem; line-height: 1; } .p-limited__title .-jp { font-size: 1.4rem; line-height: 1; margin-top: 1rem; } .p-limited__text { text-align: center; font-size: 1.2rem; line-height: 1.8; margin-bottom: 4rem; } .p-present { padding: 2rem 0; text-align: center; background-color: #143935; } .p-present .l-inner { padding: 2.4rem; background-color: #ECE3D8; } .p-present-title { font-family: trajan-pro-3, serif; font-size: 2.4rem; margin-bottom: 2.4rem; line-height: 1; } .p-present-text { font-size: 1.4rem; line-height: 1.57; margin-bottom: 1rem; white-space: nowrap; } .p-present-text strong { font-size: 1.8rem; color: #165A53; } .p-present-note { font-size: 1rem; line-height: 1; letter-spacing: 0.12rem; } .p-present-image { margin-top: 1.8rem; } .p-present-image a:hover img { transform: scale(1.05); } .p-present-image__item { overflow: hidden; } .p-present-image__item img { transition: transform 0.5s ease-out; } .p-present-more { display: grid; grid-template-columns: 1fr 0.8rem; align-items: center; justify-content: center; width: 10.3rem; margin-inline: auto; margin-top: 1.4rem; font-size: 0.92rem; line-height: 1; background-color: #143935; color: #ECE3D8; padding: 0.37rem 0.92rem 0.37rem; border-radius: 2rem; } .p-present-more .c-icon { width: 0.8rem; height: 1rem; fill: #ECE3D8; } .p-gift { padding: 8rem 0; text-align: center; } .p-gift-title { font-family: trajan-pro-3, serif; font-size: 2.6rem; line-height: 1; margin-bottom: 3rem; } .p-gift-text { font-size: 1.2rem; line-height: 1.8; margin-bottom: 4rem; } .p-gift-image { display: grid; grid-template-columns: repeat(2, 1fr); } .p-link-section { background: url(../images/holiday2025_link_section_bg.webp) no-repeat center center/cover; padding: 0 0 6rem; color: #ECE3D8; } .p-link-section__item { padding-top: 6rem; } .p-link-section__item a { display: block; } .p-link-section__item a:hover img { transform: scale(1.05); } .p-link-section__title { font-weight: 300; margin-bottom: 3rem; line-height: 1; } .p-link-section__title .-en { font-family: trajan-pro-3, serif; font-size: 2.4rem; } .p-link-section__title .-jp { font-size: 1.2rem; margin-top: 1rem; } .p-link-section__image { overflow: hidden; width: 18rem; margin-inline: auto; margin-bottom: 2rem; } .p-link-section__image img { transition: transform 0.5s ease-out; } .p-link-section__more { display: grid; grid-template-columns: 1fr 0.8rem; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 1.4rem; margin-inline: auto; font-family: trajan-pro-3, serif; font-size: 1rem; line-height: 1; text-align: right; } .p-link-section__more .c-icon { width: 0.8rem; height: 1rem; fill: #ECE3D8; } .s-header { position: fixed; top: 0; width: 37.5rem; z-index: 100; visibility: hidden; } @media screen and (max-width: 600px) { .s-header { visibility: visible; width: 100%; } } .s-header .s-menu { font-size: 0.703125vw; } @media (width < 768px) { .s-header .s-menu { font-size: 2.4vw; } } .s-header-button { position: absolute; top: 2.5rem; right: 2rem; } .s-header-menu-button { cursor: pointer; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.4rem; width: 3.5rem; height: 3.5rem; } .s-header-menu-button::before, .s-header-menu-button::after, .s-header-menu-button span { content: ""; display: block; width: 2.5rem; height: 1px; background-color: currentColor; } .s-header-menu { position: absolute; top: 0; left: 0; width: 100%; max-height: 100dvh; overflow-y: auto; background-color: #ECE3D8; visibility: hidden; } .s-header-menu-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .s-header-menu-inner { position: relative; padding: 7rem 0 13rem 5rem; } .s-header-menu-close { cursor: pointer; position: absolute; top: 6rem; right: 4rem; gap: 0.4rem; width: 3.5rem; height: 3.5rem; } .s-header-menu-close::before, .s-header-menu-close::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 2.2rem; height: 1px; background-color: currentColor; transform-origin: center; } .s-header-menu-close::after { transform: translate(-50%, -50%) rotate(45deg); } .s-header-menu-close::before { transform: translate(-50%, -50%) rotate(-45deg); } .s-header-menu-logo { width: 6.6rem; } .s-header-menu-title { margin-block: 8rem; font-size: 3.8rem; line-height: 1; font-family: trajan-pro-3, serif; font-weight: 300; color: #165A53; } .s-header-menu-title span { font-size: 4.4rem; display: block; } .s-footer { padding: 6rem 0; color: #ECE3D8; background-color: #010201; } .s-footer a { transition: 0.3s ease-out opacity; } .s-footer a:hover { opacity: 0.5; } .s-footer__title { width: 9.24rem; margin-inline: auto; margin-bottom: 2.3rem; } .s-footer__sns { display: flex; justify-content: center; gap: 1.8rem; } .s-footer__sns .c-icon { width: 2.8rem; height: 2.8rem; fill: #ECE3D8; } .s-footer__copyright { font-size: 0.96rem; line-height: 1; text-align: center; margin-top: 3rem; } .s-menu { font-family: trajan-pro-3, serif; font-weight: 300; } .l-side-menu .s-menu { position: sticky; top: 0; right: 0; display: grid; align-items: center; height: 100vh; padding-left: 7em; color: #ECE3D8; } .s-menu__list { display: flex; flex-direction: column; gap: 5em; width: -moz-max-content; width: max-content; } .s-header .s-menu__list { width: 27.7rem; } .s-menu__link { display: grid; grid-template-columns: 2.6em 1fr; align-items: top; gap: 1.5em; } .s-header .s-menu__link { align-items: center; grid-template-columns: 1fr 2.6em; } .s-menu__title { position: relative; font-size: 3.2em; line-height: 1; transition: 0.3s ease-out opacity; } a.s-menu__link:hover .s-menu__title { opacity: 0.5; } .s-menu__title-icon { position: relative; display: block; width: 2.6em; height: 2.6em; } .s-header .s-menu__title-icon { order: 2; } .s-menu__title-icon::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.6em; height: 0.6em; border-radius: 50%; background-color: currentColor; } .s-header .s-menu__title-icon::before { opacity: 0.4; } .s-menu__title-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.3); width: 20px; height: 20px; opacity: 0; background: linear-gradient(0deg, #D4A267 3.83%, #E9BF8E 98.88%); -webkit-clip-path: path("M10,0l1.079,7.395,5.992-4.466-4.466,5.992,7.395,1.079-7.395,1.079,4.466,5.992-5.992-4.466-1.079,7.395-1.079-7.395-5.992,4.466,4.466-5.992-7.395-1.079,7.395-1.079L2.929,2.929l5.992,4.466,1.079-7.395Z"); clip-path: path("M10,0l1.079,7.395,5.992-4.466-4.466,5.992,7.395,1.079-7.395,1.079,4.466,5.992-5.992-4.466-1.079,7.395-1.079-7.395-5.992,4.466,4.466-5.992-7.395-1.079,7.395-1.079L2.929,2.929l5.992,4.466,1.079-7.395Z"); transition: 0s ease opacity; } body:not(.is-scrolling) .is-section-active .s-menu__title-icon::before, body:not(.is-scrolling) .s-menu__item:has(.is-section-active) .s-menu__title-icon::before { opacity: 0; } body:not(.is-scrolling) .is-section-active .s-menu__title-icon::after, body:not(.is-scrolling) .s-menu__item:has(.is-section-active) .s-menu__title-icon::after { opacity: 1; transition: 0.15s ease opacity; } .s-menu__sub-list { display: flex; flex-direction: column; gap: 2em; max-width: 20em; margin-top: 2.8em; } .l-side-menu .s-menu__sub-list { padding-left: 4.8em; } .s-menu__sub-item a { display: grid; position: relative; grid-template-columns: 1fr 0.9em; align-items: center; gap: 0.6em; } .s-menu__sub-title { font-size: 1.2em; line-height: 1; transition: 0.3s ease-out opacity; } a:hover .s-menu__sub-title { opacity: 0.5; } .s-menu__sub-color { position: relative; display: block; margin-left: 0.6em; width: min(0.9em, 9px); height: min(0.9em, 9px); border-radius: 50%; background-color: #ECE3D8; transition: 0s ease background-color; } .s-menu__sub-color::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 20px; height: 20px; opacity: 0; background-color: #fff; -webkit-clip-path: path("M10,0l1.079,7.395,5.992-4.466-4.466,5.992,7.395,1.079-7.395,1.079,4.466,5.992-5.992-4.466-1.079,7.395-1.079-7.395-5.992,4.466,4.466-5.992-7.395-1.079,7.395-1.079L2.929,2.929l5.992,4.466,1.079-7.395Z"); clip-path: path("M10,0l1.079,7.395,5.992-4.466-4.466,5.992,7.395,1.079-7.395,1.079,4.466,5.992-5.992-4.466-1.079,7.395-1.079-7.395-5.992,4.466,4.466-5.992-7.395-1.079,7.395-1.079L2.929,2.929l5.992,4.466,1.079-7.395Z"); transition: 0s ease opacity; } body:not(.is-scrolling) .is-section-active .s-menu__sub-color { background-color: transparent !important; } body:not(.is-scrolling) .is-section-active .s-menu__sub-color::after { opacity: 1; transition: 0.25s ease opacity; } .s-menu__sub-color.-green { background-color: #466864; } .s-menu__sub-color.-green::after { background-color: #466864; } .s-menu__sub-color.-mocha { background-color: #A87443; } .s-menu__sub-color.-mocha::after { background-color: #A87443; } .s-menu__sub-color.-pink { background-color: #C37982; } .s-menu__sub-color.-pink::after { background-color: #C37982; } .s-menu__sub-color.-blue { background-color: #415C72; } .s-menu__sub-color.-blue::after { background-color: #415C72; } .s-menu__sub-color.-gray { background-color: #707070; } .s-menu__sub-color.-gray::after { background-color: #707070; } @media screen and (min-width: 601px) { .u-sp { display: none; } } @media screen and (max-width: 600px) { .u-pc { display: none; } }