@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap"); /*** 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%; vertical-align: bottom; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } :root { --font-main: "Shippori Mincho", serif; --font-heading: "Zen Old Mincho", serif; --font-en: "Cormorant", serif; --color-base: #FFFFFF; --color-main: #85161B; --color-footer: #FAC657; --color-red: #661F27; --transition-duration: 2s; } html { font-size: 0.78125vw; } @media (width < 768px) { html { font-size: 2.4154589372vw; } } body { background: linear-gradient(0deg, #E9E5E8 3.65%, #F3F3F3 24.09%); background-attachment: fixed; color: var(--color-base); font-family: var(--font-main); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; line-height: 2; overflow-x: clip; } body.is-fixed { overflow-y: hidden; } body img { width: 100%; } .l-wrapper__grid { position: relative; display: grid; grid-template-columns: 1fr 32.34375% 1fr; grid-template-columns: 1fr 41.4rem 1fr; background: #85161B; } @media (width < 768px) { .l-wrapper__grid { grid-template-columns: 100%; } } .l-inner { max-width: 34rem; margin-inline: auto; } .l-sideimage img { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; z-index: 10; } @media (width < 768px) { .l-sideimage { display: none; } } .l-sideimage.right { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10; background: url(../images/xmaslp_right_bg.jpg) center top/cover; } .l-inner.right { position: absolute; bottom: 2rem; left: 50%; width: 100%; transform: translateX(-50%); } .l-main { max-width: inherit; } @media (width < 768px) { .l-main { max-width: inherit; min-width: inherit; } } @media (width < 768px) { .l-sidemenu { display: none; } } .l-sidemenu__box { position: sticky; top: 0; left: 0; display: grid; place-content: center; height: 100vh; text-align: left; background: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/mangue_ananas/assets/images/itemlp_bg_obj.png) no-repeat right bottom/35rem auto; } .l-sidemenu__list a { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; align-items: center; gap: 0.5rem; padding-right: 2rem; transition: padding-right 0.3s ease-out; } .l-sidemenu__list a:hover, .l-sidemenu__list a.is-active { padding-right: 0.4rem; } .l-sidemenu__list a:hover .-icon, .l-sidemenu__list a.is-active .-icon { width: 2rem; } .l-sidemenu__list .-icon { display: block; width: 0.4rem; height: 0.4rem; background: var(--color-base); border-radius: 2rem; margin-right: 0.6rem; transition: width 0.3s ease-out; } .l-sidemenu__list .-jp { font-size: 1.2rem; } .l-sidemenu__list .-jp::before, .l-sidemenu__list .-jp::after { content: "-"; } .-en { font-family: var(--font-en); letter-spacing: 0.1rem; } .js-fadeInItem { opacity: 0; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInItem.is-active { opacity: 1; } .js-fadeInUpItem { opacity: 0; translate: 0 4rem; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInUpItem.is-active { opacity: 1; translate: 0 0; } .js-fadeInRightItem { opacity: 0; translate: -4rem 0; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInRightItem.is-active { opacity: 1; translate: 0 0; } .js-fadeInLeftItem { opacity: 0; translate: 4rem 0; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .js-fadeInLeftItem.is-active { opacity: 1; translate: 0 0; } .js-fadeInChild { opacity: 0; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .is-active .js-fadeInChild { opacity: 1; } .js-fadeInUpChild { opacity: 0; translate: 0 4rem; transition: opacity var(--transition-duration) ease-out, translate var(--transition-duration) ease-out; } .is-active .js-fadeInUpChild { opacity: 1; translate: 0 0; } .c-svg-sprite { display: none; } .c-heading { line-height: 1; text-align: center; } .c-heading .-en { margin-bottom: 1rem; font-size: 3.2rem; font-family: var(--font-en); } .c-heading .-jp { font-size: 1.3rem; } .c-button { position: relative; display: block; align-content: center; max-width: 33.9rem; height: 5.5rem; font-size: 1.5rem; letter-spacing: 0.04em; text-align: center; margin-inline: auto; border-radius: 10rem; transition: 1s ease-out; transition-property: color, background-color, translate, box-shadow; } .c-button .c-icon { display: block; position: absolute; right: 2.5rem; top: 50%; translate: 0 -50%; width: 1.82rem; height: 1.8rem; fill: currentColor; transition: 0.5s ease-out; transition-property: fill; } .c-button:hover { color: #fff; background: var(--color-main); } .c-button.-color { position: relative; color: #fff; background: linear-gradient(115deg, rgb(183, 167, 125) 0%, rgb(154, 138, 95) 48%, rgb(149, 126, 66) 100%); border: none; transition: 1s; } .c-button.-color:hover { filter: brightness(1.2); } .c-button.-color::after { content: ""; position: absolute; right: 5rem; top: 50%; translate: 0 -50%; width: 1rem; height: 1.6rem; background: #fff; clip-path: polygon(0 0, 0 100%, 100% 50%); } .c-button.-footer { color: #51230E; background: #fff; box-shadow: 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.2); border-radius: 0.6rem; border: 0.2rem solid transparent; transition: 0.5s ease-out; transition-property: color background-color translate box-shadow; font-family: Zen Kaku Gothic serif; } .c-button.-footer:hover { color: #fff; background: var(--color-main); } .c-button.-footer:hover::before { background-image: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/pomer/assets/images/itemlp_btn_icon_white.svg); } .c-button.-right { border-radius: 0.6rem; color: #fff; background: linear-gradient(115deg, rgb(183, 167, 125) 0%, rgb(154, 138, 95) 48%, rgb(149, 126, 66) 100%); transition: 1s; } .c-button.-right:hover { filter: brightness(1.2); } .p-mainvisual { position: relative; background: #661014; background: linear-gradient(180deg, rgb(102, 16, 20) 0%, rgb(133, 22, 27) 100%); text-align: center; z-index: 2; } .p-mainvisual__logo { width: 21.5rem; margin: 0 auto 3.4rem; padding-top: 4rem; } .p-mainvisual-copy { width: 10rem; margin: 0 auto 9rem; } .p-mainvisual-copy img { width: 100%; } .p-mainvisual-text { font-size: 1.5rem; line-height: 3.5rem; font-weight: 500; } .p-mainvisual-text__sub { max-width: 32rem; margin-inline: auto; margin-top: 2rem; font-size: 1.5rem; letter-spacing: .08em; color: #fff; text-align: center; padding: .4rem 2rem; border: 1px solid #fff; } .p-item-area { position: relative; background: var(--color-main); z-index: 2; } .p-item-area::before { content: ""; position: absolute; left: -11rem; top: 0; background: url(../images/circle.png) center center/cover; width: 30rem; height: 30rem; z-index: -2; } .p-item { padding-top: 7.5rem; } .p-item:first-child, .p-item:nth-child(2) { position: relative; z-index: 2; } .p-item:first-child::before, .p-item:nth-child(2)::before { content: ""; position: absolute; background: url(../images/circle02.png) center center/cover; width: 30rem; height: 30rem; z-index: -2; } .p-item:first-child::before { left: -15rem; bottom: -10rem; } .p-item:nth-child(2)::before { left: -10rem; bottom: 0; } .p-item__box { margin-bottom: 2rem; text-align: center; } .p-item__box .-en { position: relative; font-size: 2rem; } .p-item__box .-en::before { content: ""; position: absolute; left: 0; top: 50%; width: 25%; height: 1px; background: #fff; } .p-item__box .-en::after { content: ""; position: absolute; right: 0; top: 50%; width: 25%; height: 1px; background: #fff; } .p-item__copy { margin-top: 4.3rem; font-size: 1.7rem; font-weight: 600; } .p-item__img { position: relative; margin-bottom: 2rem; } .p-item__img img { width: 100%; } .p-item__img .-hover { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .p-item__img:hover .-hover { opacity: 1; } .p-item__text { letter-spacing: 0.15rem; } .p-item-detail__img { padding: 2.5rem 0 0; } .p-lineup { position: relative; z-index: 1; padding-block: 10rem 6rem; margin-block: -2rem; background: var(--color-lineup); border-radius: 2rem; } .p-lineup .c-heading { margin-bottom: 5rem; } .p-item__name { margin-top: 2.5rem; margin-bottom: 1.7rem; line-height: 1.5; text-align: center; } .p-item__name .-main { font-size: 2.1rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .p-item__name .-main .-white { display: inline-block; margin-left: 0.5rem; padding: 0.2rem 0.5rem; font-size: .9rem; border: 1px solid currentColor; border-radius: 0.3rem; } .p-item__name .-copy { margin-top: 0.3rem; font-size: 1.22rem; } .p-item__set { margin-bottom: 1.5rem; font-size: 1.2rem; line-height: 1.5; padding-left: 8rem; } .p-item__set.-size { padding-left: 0; text-align: center; } .p-item__price { margin-right: 1rem; font-size: 2.1rem; font-weight: 500; line-height: 1; letter-spacing: 0.1rem; } .p-item__price .-tax { display: inline-block; font-size: 1rem; margin-left: 0.3rem; } .p-item__icon { display: flex; align-items: center; justify-content: center; margin-bottom: 3rem; max-width: 27rem; margin-left: auto; margin-right: auto; } .p-item__icon li { padding-right: 0.9rem; } .p-early-order-area { padding: 7.4rem 0; background: var(--color-main); text-align: center; font-size: 1.2rem; } .p-present-area { padding: 0.9rem; margin-bottom: 4rem; background: linear-gradient(125deg, rgb(135, 39, 60) 0%, rgb(68, 27, 29) 100%); } .p-early-order__box { padding: 5rem 1.4rem 4rem; background: url(../images/xmaslp_early-order_top.png), url(../images/xmaslp_early-order_bottom.png), url(../images/xmaslp_early-order_middle.png); background-repeat: no-repeat, no-repeat, repeat-y; background-position: top center, bottom center, top center; background-size: 100% auto; } .p-early-order__heading { margin-bottom: 2.4rem; padding: 0.8rem 0; line-height: 1.8rem; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.12rem; color: var(--color-red); background: url(../images/early-order-heading_bg.jpg) center center/100%; } .p-early-order__title { max-width: 25rem; margin-inline: auto; font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5rem; } .p-early-order__subtitle { text-align: center; font-size: 1.4rem; font-weight: 400; letter-spacing: 0.14rem; margin-top: 1.2rem; margin-bottom: 3.2rem; line-height: 1.5; } .p-early-order__text { margin-bottom: 0; font-size: 1.6rem; line-height: 1.3; letter-spacing: 0.12rem; } .p-early-order__text .-day { font-size: 0.75em; letter-spacing: 0.05em; } .p-early-order__text.-text02 { display: inline-flex; align-items: flex-end; justify-content: center; gap: 0.2rem; margin-top: 1.6rem; padding-bottom: 0.4rem; font-weight: 600; background: linear-gradient(transparent 70%, #cd685f 70%); } .p-early-order__text.-text02 .-label { font-size: 2.1rem; letter-spacing: -0.1em; line-height: 1; } .p-early-order__text.-text02 .-num { font-size: 5.1rem; font-weight: 700; letter-spacing: -0.1em; line-height: 0.85; padding: 0; } .p-early-order__text.-text02 .-unit { font-size: 2.1rem; letter-spacing: 0.06em; line-height: 1; padding-bottom: 0.3rem; } .p-early-order__text.-gift { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 2.1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.17rem; } .p-early-order__text.-gift .-line { display: inline-block; padding: 0 0.2rem; background-image: linear-gradient(#cd685f, #cd685f); background-repeat: no-repeat; background-size: 100% 0.7rem; background-position: center calc(100% - 0.25rem); } .p-early-order__text.-gift .-day { font-size: 1.2rem; letter-spacing: 0.1rem; } .p-early-order__text.-points { padding-top: 2.4rem; margin-top: 2.4rem; font-size: 1.5rem; line-height: 1.3; } .p-early-order__text.-points .-line { display: inline-block; padding: 0 0.2rem; background-image: linear-gradient(#cd685f, #cd685f); background-repeat: no-repeat; background-size: 100% 0.7rem; background-position: center calc(100% - 0.25rem); } .p-early-order__text.-points .-num { font-size: 2.8rem; font-weight: 700; padding: 0; } .p-early-order__text.-points .-unit { font-size: 1.6rem; font-weight: 700; } .p-early-order__text.-points .-asterisk { font-size: 0.7rem; vertical-align: super; } .p-early-order__img { margin-bottom: 1rem; } .p-campaign-block { margin-bottom: 3.2rem; } .p-campaign-order__lead { position: relative; text-align: left; padding-right: 10rem; } .p-campaign-order__cakes { position: absolute; right: -0.5rem; top: -1.5rem; width: 12rem; height: 8rem; pointer-events: none; } .p-campaign-order__cakes img { position: absolute; width: 6.4rem; height: auto; } .p-campaign-order__cakes img:first-child { right: 0; top: 0; } .p-campaign-order__cakes img:last-child { left: 1.4rem; bottom: 0; } .p-campaign-notes { display: flex; gap: 1.6rem; align-items: flex-start; margin-top: 1.6rem; text-align: left; } .p-campaign-badge { flex-shrink: 0; width: 12rem; } .p-campaign-badge.-post { width: 7rem; } .p-campaign-notes__list { flex: 1; font-size: 1rem; line-height: 1.3; } .p-campaign-deli { margin-top: 2.4rem; } .p-campaign-deli__label { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 0.8rem; font-size: 1.4rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.06rem; } .p-campaign-deli__label img { width: 5.2rem; flex-shrink: 0; } .p-campaign-deli__label img.left { rotate: 180deg; } .p-campaign-deli__label .-sm { font-size: 1.2rem; } .p-campaign-deli__label .-lg { font-size: 1.8rem; } .p-campaign-deli__img { width: 21rem; margin: 0 auto; border-radius: 1rem; overflow: hidden; } .p-campaign-deli__caption { margin-top: 0.8rem; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 1.4rem; line-height: 1.5; } .p-campaign-points-note { margin-top: 0.6rem; font-size: 0.8rem; letter-spacing: 0.05em; text-align: center; } .p-campaign-example { position: relative; margin-top: 3.2rem; padding: 2.4rem 1.6rem 1.6rem; border: 1px solid rgba(255, 255, 255, 0.4); text-align: left; } .p-campaign-example__title { position: absolute; left: 50%; top: 0; translate: -50% -50%; padding: 0 2rem; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.8rem; white-space: nowrap; background: linear-gradient(90deg, #6b222f, #5f1f29); } .p-campaign-example__item + .p-campaign-example__item { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed rgba(255, 255, 255, 0.35); } .p-campaign-example__row { display: flex; align-items: center; gap: 1rem; font-size: 1.1rem; line-height: 1.3; } .p-campaign-example__row .-tag { flex-shrink: 0; padding: 0 0.5rem; color: #732333; background: #fff; line-height: 1.3; } .p-campaign-example__row u { text-decoration: underline; } .p-campaign-example__arrow { display: block; width: 0; height: 0; margin: 0.8rem auto; border-left: 0.7rem solid transparent; border-right: 0.7rem solid transparent; border-top: 0.5rem solid #fff; } .p-campaign-example__result { font-size: 1.1rem; line-height: 1.3; } .p-card-service { margin-top: 3.2rem; padding: 1rem; background: #e0d8ca; color: var(--color-red); } .p-card-service__box { border: 1px solid #6a222e; padding: 2rem 1.5rem; } .p-card-service__box .p-early-order__img { width: 20rem; margin: 1.6rem auto 0; } .p-card-service__box .p-early-order__img img { width: 100%; } .card-service__title { margin-bottom: 1.6rem; font-size: 1.7rem; font-weight: 600; line-height: 1.5; } .card-service__note { text-align: left; font-size: 1rem; line-height: calc(20 / 14); } .p-campaign-period { margin-top: 3.2rem; display: flex; flex-direction: column; gap: 1.6rem; } .p-campaign-period__item { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } .p-campaign-period__label { width: 100%; padding: 0.6rem 0.5rem 0.5rem; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 1.2rem; line-height: 1.2; color: #fff; background: #9a8a5f; } .p-campaign-period__date { font-size: 2.1rem; letter-spacing: 0.06em; line-height: 1.3; } .p-campaign-period__date .-day { font-size: 1.6rem; } .p-campaign-period__date .-until { font-size: 1.7rem; } .p-campaign-period__note { margin-top: 0.8rem; text-align: left; font-size: 1rem; line-height: 1.3; letter-spacing: 0.13em; } .l-footer { position: relative; z-index: 0; padding-block: 11.6rem 9.7rem; background: #731320; } .l-footer-logo { width: 17.4rem; margin-inline: auto; } .l-footer-btn { display: grid; grid-template-columns: 100%; gap: 3rem; margin-top: 6rem; } .p-video { position: relative; aspect-ratio: 1080 / 1920; overflow: hidden; } .p-video video { width: 100%; height: 100%; object-fit: cover; } .p-video__sound { position: absolute; right: 2rem; bottom: 2rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; transition: background-color 0.3s ease-out; } .p-video__sound:hover { background: rgba(0, 0, 0, 0.6); } .p-video__sound .c-icon { width: 2rem; height: 2rem; fill: currentColor; } .p-video__sound .-off { display: none; } .p-video__sound:not(.is-muted) .-on { display: none; } .p-video__sound:not(.is-muted) .-off { display: block; }