@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&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: "Zen Kaku Gothic New", sans-serif; --font-heading: "Zen Old Mincho", serif; --font-en: "roma", sans-serif; --font-noto: "Noto Serif JP", serif; --font-zenoldmincho: "Zen Old Mincho", serif; --color-base: #1F0803; --color-main: #E45A6B; --color-lineup: #D1AA86; --color-footer: #E45A6B; --color-red: #E5004C; --transition-duration: 2s; } html { font-size: 62.5%; } @media (width < 850px) { html { font-size: 1.6666666667vw; } } 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: 2.2rem; 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: max(22.39%, 200px) 60rem 1fr; } @media (width < 768px) { .l-wrapper__grid { grid-template-columns: 100%; } } .l-inner { max-width: 34rem; margin-inline: auto; } .l-sideimage { position: relative; background-color: #B08451; } .l-sideimage > img { position: sticky; top: 0; left: 0; display: block; width: 100%; height: 100vh; object-fit: cover; object-position: left; } @media (width < 768px) { .l-sideimage { display: none; } } .l-sideimage__logo { position: fixed; top: 50vh; left: calc(max(22.39%, 200px) * 0.5); z-index: 2; width: 74px; height: auto; margin: 0; display: flex; align-items: center; transform: translate(-50%, -50%); } .l-sideimage__logo img { width: 100%; position: unset; height: auto; object-fit: unset; } .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; justify-items: center; align-content: start; box-sizing: border-box; min-height: 100vh; padding: 13rem 2rem 4rem; text-align: left; color: white; background: #B08451; background-image: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/seasonal_fruit_tart/assets/images/itemlp_sidemenu_bg.png); background-size: cover; background-position: center; background-repeat: no-repeat; } .l-sidemenu__list { position: relative; width: max-content; max-width: 100%; margin: 0; } .l-sidemenu__list a { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; align-items: center; gap: 0.5rem; transition: padding-right 0.3s ease-out; color: white; } .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.6rem; height: 0.6rem; background: white; border-radius: 2rem; margin-right: 0.6rem; transition: width 0.3s ease-out; filter: drop-shadow(0px 0px 4px #7F2C00); } .l-sidemenu__list .-en { font-family: var(--font-en); font-size: 2.3rem; filter: drop-shadow(0px 0px 4px #7F2C00); } .l-sidemenu__list .-jp { font-family: var(--font-zenoldmincho); position: relative; font-size: 1.2rem; filter: drop-shadow(0px 0px 4px #7F2C00); margin-left: 3.2rem; } .l-sidemenu__list .-jp::before { position: absolute; content: ""; width: 20px; height: 1px; background: white; top: 0; bottom: 0; left: -30px; margin: auto; } .l-sidemenu__purchase { position: relative; width: max-content; max-width: 100%; margin: 9rem 0 0; display: flex; flex-direction: column; gap: 3rem; filter: drop-shadow(0 0 4px #7f2c00); } .l-sidemenu__purchase-link { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 0.5rem; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #fff; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 400; line-height: normal; color: #fff; text-align: center; text-decoration: none; transition: opacity 0.3s ease; } .l-sidemenu__purchase-link:hover { opacity: 0.85; } .l-sidemenu__purchase-icon { display: block; flex-shrink: 0; width: 2.4rem; height: 2.4rem; color: #fff; } .l-sidemenu__purchase-cart { display: block; width: 100%; height: 100%; } .l-sidemenu__purchase-text { display: block; flex-shrink: 0; width: 15.4rem; max-width: calc(100% - 8rem); text-align: center; } .l-sidemenu__purchase-link:last-child .l-sidemenu__purchase-text { width: auto; max-width: none; white-space: nowrap; } .l-sidemenu__purchase-arrow { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; color: #fff; } .l-sidemenu__purchase-chevron { display: block; width: 100%; height: 100%; } .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: 2.2rem; letter-spacing: 0.04em; text-align: center; margin-inline: auto; 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; } .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 { color: #fff; background: var(--color-main); } .c-button.-color:hover { color: var(--color-main); background: #fff; border-color: currentColor; } .p-cherry-hero { position: relative; padding: 6.5rem 1rem 8rem; background-color: #f8f4e5; background-image: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/seasonal_fruit_tart/assets/images/itemlp_hero_bg.jpg); background-position: top left; background-size: 41rem auto; background-repeat: repeat; } .p-cherry-hero__head { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: auto; padding: 3.2rem 3.2rem 0; z-index: 2; } .p-cherry-hero__logo { display: block; width: 6.4rem; } .p-cherry-hero__logo img { width: 100%; height: auto; } .p-cherry-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 54rem; margin-inline: auto; } .p-cherry-hero__title-block { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-bottom: 3rem; width: 31rem; max-width: 100%; } .p-cherry-hero__title-en { margin: 0; font-family: var(--font-en); font-size: 5.6rem; font-weight: 400; line-height: 1.1; letter-spacing: 0.04em; text-align: center; color: #7f2c00; } .p-cherry-hero__title-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; } .p-cherry-hero__title-line { display: block; width: 2rem; height: 1px; background-color: #7f2c00; } .p-cherry-hero__title-jp { margin: 0; font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1.38; white-space: nowrap; color: #7f2c00; } .p-cherry-hero__visual { position: relative; width: 100%; margin-bottom: 4rem; } .p-cherry-hero__arch { position: relative; width: 100%; height: auto; aspect-ratio: 545/751; margin-inline: auto; overflow: hidden; border-radius: 27.5rem 27.5rem 0 0; } .p-cherry-hero__arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .p-cherry-hero__badge { position: absolute; top: 0; left: 0rem; width: 16.5rem; height: 16.5rem; border-radius: 50%; background-color: #7F2C00; z-index: 1; } .p-cherry-hero__badge:before { position: absolute; content: ""; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; border: 1px solid white; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 0.3; pointer-events: none; } .p-cherry-hero__badge-ring, .p-cherry-hero__badge-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .p-cherry-hero__badge-fill { left: 0.3rem; top: 0.3rem; width: 12rem; height: 12rem; } .p-cherry-hero__badge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; margin: 0; font-family: var(--font-heading); font-size: 3.7rem; font-weight: 700; line-height: 1; letter-spacing: 0.05em; text-align: center; color: #f8f4e5; pointer-events: none; } .p-cherry-hero__body { width: 100%; padding: 0 1rem; margin-bottom: 53px; } .p-cherry-hero__lead { margin: 0; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.8; letter-spacing: 0.08em; text-align: center; color: #7f2c00; font-feature-settings: "palt" 1; } .p-cherry-hero__cta { display: flex; justify-content: flex-end; width: 100%; padding-right: 4rem; } .p-cherry-text-link { display: inline-flex; align-items: center; gap: 4rem; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 500; line-height: 2.2; letter-spacing: 0.04em; text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; transition: opacity 0.3s ease; } .p-cherry-text-link .c-icon { display: block; flex-shrink: 0; width: 2rem; height: 2rem; fill: currentColor; stroke: currentColor; } .p-cherry-text-link:hover { opacity: 0.75; } .p-cherry-text-link--brown { color: #7f2c00; border-bottom-color: #7f2c00; } .p-cherry-text-link--white { color: #fff; border-bottom-color: #fff; } .p-cherry-fromage { background-image: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/seasonal_fruit_tart/assets/images/itemlp_fromage_bg.jpg); background-size: cover; background-position: top; } .p-cherry-fromage__photo--top { position: relative; width: 100%; height: 42.6rem; overflow: hidden; } .p-cherry-fromage__photo--top img { position: absolute; width: calc(100% + 1px); height: 100%; max-width: none; object-fit: cover; } .p-cherry-fromage__content { padding: 3rem 3rem 16.5rem; color: #fff; } .p-cherry-fromage__heading { margin: 0 0 6rem; text-align: center; } .p-cherry-fromage__heading-en { display: block; font-family: var(--font-en); font-size: 3.6rem; font-weight: 700; line-height: 1.38; letter-spacing: 0.02em; } .p-cherry-fromage__heading-jp { display: block; margin-top: 0; font-family: var(--font-heading); font-size: 3.6rem; font-weight: 700; line-height: 1.38; } .p-cherry-fromage__text { text-align: center; font-feature-settings: "palt" 1; } .p-cherry-fromage__catch { margin: 0 0 2.5rem; font-family: var(--font-heading); font-size: 2.7rem; line-height: 1.35; letter-spacing: 0.08em; } .p-cherry-fromage__desc { margin: 0; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.8; letter-spacing: 0.08em; } .p-cherry-fromage__collage { position: relative; width: 100%; min-height: 66rem; margin: 2.5rem auto 0; } .p-cherry-fromage__collage-item { position: absolute; overflow: hidden; border-radius: 0.6rem; } .p-cherry-fromage__collage-item img { width: 100%; height: 100%; object-fit: cover; } .p-cherry-fromage__collage-item--01 { top: 0; left: 0.1rem; width: 34.5rem; height: 30rem; } .p-cherry-fromage__collage-item--02 { top: 16.8rem; right: 0; width: 29.2rem; height: 25.3rem; z-index: 1; } .p-cherry-fromage__collage-item--03 { top: 39.3rem; left: 0; right: 0; margin: auto; width: 43.6rem; height: 25.3rem; z-index: 1; } .p-cherry-fromage__text--bottom { margin-top: 5.5rem; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.8; letter-spacing: 0.08em; text-align: center; } .p-cherry-fromage__text--bottom p { margin: 0; } .p-cherry-product { position: relative; padding: 3.5rem 0 7.5rem; background-image: linear-gradient(180deg, #f1c899 47.86%, #be803a 100%); } .p-cherry-product__inner { position: relative; margin-inline: auto; } .p-cherry-product__photo { position: relative; width: 100%; height: 40.6rem; overflow: hidden; padding: 18px 0; background-color: rgba(255, 255, 255, 0.2); } .p-cherry-product__photo img { position: absolute; width: 100%; height: calc(100% - 40px); max-width: none; object-fit: cover; top: 0; bottom: 0; margin: auto; } .p-cherry-product__info { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 6.2rem; text-align: center; color: #7f2c00; } .p-cherry-product__name { margin: 0; font-family: var(--font-heading); font-size: 4.8rem; font-weight: 900; line-height: 1.05; } .p-cherry-product__size { display: flex; align-items: center; justify-content: center; gap: 2.16rem; margin: 0; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.1em; } .p-cherry-product__size-line { display: block; width: 3.6rem; height: 1px; background-color: #7f2c00; } .p-cherry-product__size-text { font-size: 2.6rem; } .p-cherry-product__price { display: flex; align-items: flex-end; justify-content: center; gap: 0; margin: 0; font-family: var(--font-noto); font-weight: 700; line-height: 1.3; color: #7f2c00; } .p-cherry-product__yen { margin-bottom: 0.6rem; font-size: 2.2rem; letter-spacing: 0.05em; } .p-cherry-product__num { font-size: 4.1rem; font-weight: bold; } .p-cherry-product__tax { margin: 0 0 0.4rem 0.8rem; font-size: 2rem; font-weight: bold; letter-spacing: 0.05em; } .p-cherry-product__links { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; margin-top: 5.6rem; padding-right: 4rem; } .p-cherry-brand { position: relative; background-color: #7f2c00; } .p-cherry-brand__inner { position: relative; padding: 8rem 3.6rem 6rem; background-color: #f8f4e5; background-image: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/seasonal_fruit_tart/assets/images/itemlp_brand_bg.jpg); background-position: top left; background-size: cover; overflow: hidden; } .p-cherry-brand__deco { position: absolute; pointer-events: none; z-index: 0; } .p-cherry-brand__deco img { width: 100%; height: auto; } .p-cherry-brand__deco--01 { top: -16rem; right: -8rem; width: 28rem; opacity: 0.9; } .p-cherry-brand__deco--02 { top: 27rem; left: -12rem; width: 29rem; opacity: 0.9; } .p-cherry-brand__deco--03 { top: 95rem; left: 13rem; width: 28rem; opacity: 0.85; } .p-cherry-brand__deco--04 { top: 143rem; left: 3rem; width: 27rem; opacity: 0.85; } .p-cherry-brand__heading-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; margin-bottom: 6.6rem; text-align: center; } .p-cherry-brand__season { margin: 0; font-family: var(--font-en); font-size: 3.6rem; line-height: 1.38; color: #7f2c00; } .p-cherry-brand__title-en { margin: 0; font-family: var(--font-en); font-size: 3.6rem; line-height: 1; letter-spacing: 0.04em; color: #7f2c00; } .p-cherry-brand__title-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .p-cherry-brand__title-line { display: block; width: 2rem; height: 1px; background-color: #7f2c00; } .p-cherry-brand__title-jp { margin: 0; font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1.38; color: #7f2c00; } .p-cherry-brand__intro { position: relative; z-index: 1; margin: 0 0 6.6rem; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.8; letter-spacing: 0.08em; text-align: center; color: #7f2c00; font-feature-settings: "palt" 1; } .p-cherry-brand__figures { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3rem; margin-bottom: 6.6rem; } .p-cherry-brand__figure--01 { width: 48.5rem; max-width: 100%; height: 29rem; overflow: hidden; border-radius: 15rem 0 0 15rem; margin-right: -11.4rem; } .p-cherry-brand__figure--01 img { width: 100%; height: 100%; object-fit: cover; } .p-cherry-brand__figure--02 { width: 48.5rem; max-width: 100%; height: 29rem; overflow: hidden; border-radius: 0 15rem 15rem 0; margin-left: -11.4rem; } .p-cherry-brand__figure--02 img { width: 100%; height: 100%; object-fit: cover; } .p-cherry-brand__note { position: relative; z-index: 1; margin: 0 0 5rem; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.8; letter-spacing: 0.08em; text-align: center; color: #7f2c00; font-feature-settings: "palt" 1; } .p-cherry-brand__hero-img { position: relative; z-index: 1; max-width: 100%; margin: 0 auto 5rem; overflow: hidden; border-radius: 0.63rem; box-shadow: 0 0 1.16rem #fff; } .p-cherry-brand__hero-img img { width: 100%; height: auto; vertical-align: top; } .p-cherry-brand__closing { position: relative; z-index: 1; margin: 0; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1.8; letter-spacing: 0.08em; text-align: center; color: #7f2c00; font-feature-settings: "palt" 1; } .p-cherry-brand__shop { padding: 7rem 2rem; background-color: #7f2c00; text-align: center; } .p-cherry-brand__shop-btn { display: inline-block; padding: 1rem 5.3rem; background-color: #d1a26d; text-decoration: none; color: #7f2c00; } .p-cherry-brand__shop-en { display: block; font-family: var(--font-heading); font-size: 1.6rem; line-height: 1; letter-spacing: 0.05em; } .p-cherry-brand__shop-jp { display: block; margin-top: 1rem; font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 500; letter-spacing: 0.05em; } .p-cherry-brand__foot { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 3rem 2rem 4rem; background-color: #7f2c00; } .p-cherry-brand__foot-logo { width: 7rem; height: auto; } .p-cherry-brand__copyright { margin: 0; font-family: "Adobe Caslon Pro", "Times New Roman", serif; font-size: 1rem; line-height: 1.4; color: #fff; }