@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"); /*** 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; --color-base: #484C50; --color-main: #81ADE0; --color-red: #E5004C; --media-query: 768px; --transition-duration: 2s; } html { font-size: 62.5%; } @media (width < 768px) { html { font-size: 2.4154589372vw; } } body { background: linear-gradient(0deg, #E7F1FF 3.65%, #D4E3F5 24.09%); color: var(--color-base); font-family: var(--font-main); font-size: 1.5rem; letter-spacing: 0; line-height: 2; overflow-x: clip; } body.is-fixed { overflow-y: hidden; } .l-wrapper__grid { position: relative; display: grid; grid-template-columns: 1fr 414px max(25.39%, 300px); } @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; } @media (width < 768px) { .l-sideimage { display: none; } } .l-main { max-width: 414px; } @media (width < 768px) { .l-main { max-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; } .l-sidemenu__list a { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; align-items: center; gap: 5px; padding-right: 20px; transition: padding-right 0.3s ease-out; } .l-sidemenu__list a:hover, .l-sidemenu__list a.is-active { padding-right: 4px; } .l-sidemenu__list a:hover .-icon, .l-sidemenu__list a.is-active .-icon { width: 20px; } .l-sidemenu__list .-icon { display: block; width: 4px; height: 4px; background: var(--color-base); border-radius: 20px; margin-right: 6px; transition: width 0.3s ease-out; } .l-sidemenu__list .-en { font-family: var(--font-en); font-size: 1.8rem; } .l-sidemenu__list .-jp { font-size: 1.2rem; } .l-sidemenu__list .-jp::before, .l-sidemenu__list .-jp::after { content: "-"; } .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; 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.8rem; height: 1.8rem; fill: currentColor; transition: 0.5s ease-out; } .c-button:hover { color: #fff; background: var(--color-main); } .c-button:hover::before { background-image: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/peche_claire/assets/images/itemlp_btn_icon_white.svg); } .c-button.-color { color: #fff; background: var(--color-main); } .c-button.-color:hover { color: var(--color-main); background: #fff; border-color: currentColor; } .p-mainvisual { position: relative; } .p-mainvisual-logo { position: absolute; top: 4rem; left: 3rem; width: 6.3rem; z-index: 1; } .p-mainvisual-bg { position: relative; z-index: 0; } .p-mainvisual-copy { position: absolute; top: 12rem; right: 7.7rem; width: 7rem; } .p-mainvisual-copy img { width: 100%; } .p-mainvisual-name { position: absolute; bottom: 10rem; left: 50%; translate: -50% 0; width: 88.1%; } .p-intro { position: relative; padding-block: 10rem 11rem; margin-top: -5rem; z-index: 1; background: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/peche_claire/assets/images/itemlp_intro_bg.png) no-repeat top center/cover; } .p-intro-copy { margin-bottom: 4.5rem; font-family: var(--font-heading); font-size: 1.5rem; line-height: 2.2; letter-spacing: 0.2em; text-align: center; } .p-intro-img { margin-bottom: 3rem; } .p-feature { position: relative; padding-block: 8rem; margin-top: -2rem; z-index: 1; background: url(https://www.letao.jp/client_info/LETAO/view/userweb/ext/peche_claire/assets/images/itemlp_feature_bg.png) no-repeat top center/cover; } .p-feature-section { position: relative; font-family: var(--font-heading); } .p-feature-section.-section01 { margin-top: 6rem; text-align: center; } .p-feature-section.-section02 { margin-top: 7rem; } .p-feature-img { overflow: hidden; border-radius: 0.6rem; box-shadow: 1px 1px 11rem #FFFFFF; } .p-feature-img.-img02 { width: 66.7%; } .p-feature-img.-img03 { width: 66.7%; margin-top: -4rem; margin-left: auto; } .p-feature-text { font-size: 1.5rem; line-height: 2; letter-spacing: 0.08em; } .p-feature-text.-text01 { margin-top: 5rem; } .p-feature-text.-text02 { margin-top: 5rem; width: max-content; margin-inline: auto; } .p-detail { padding-block: 10rem; background: #fff; } .p-detail-img { max-width: 30rem; margin-inline: auto; } .p-lineup { position: relative; z-index: 1; padding-block: 10rem 6rem; margin-block: -2rem; background: #E5F3FF; border-radius: 2rem; } .p-lineup .c-heading { margin-bottom: 5rem; } .p-lineup-item { padding: 2rem; background: #fff; border-radius: 0.6rem; } .p-lineup-item + .p-lineup-item { margin-top: 3rem; } .p-lineup-item .c-button { margin-top: 2rem; height: 4.8rem; } .p-lineup-item__name { margin-top: 2.5rem; margin-bottom: 1.7rem; padding-bottom: 1.7rem; font-family: var(--font-heading); border-bottom: 1px solid var(--color-base); line-height: 1.5; } .p-lineup-item__name .-main { font-size: 2rem; } .p-lineup-item__name .-copy { margin-top: 0.3rem; font-size: 1.22rem; } .p-lineup-item__set { margin-bottom: 1.5rem; font-size: 1.3rem; line-height: 1.5; } .p-lineup-item__detail { display: flex; align-items: baseline; } .p-lineup-item__price { margin-right: 1rem; font-size: 1.3rem; font-weight: 500; line-height: 1; } .p-lineup-item__price .-num { font-family: var(--font-en); font-size: 1.7rem; } .p-lineup-item__price .-tax { display: inline-block; font-size: 1rem; margin-left: 0.3rem; } .p-lineup-item__icon { display: flex; line-height: 1; font-family: var(--font-heading); } .p-lineup-item__icon li { padding: 0.2rem 0.3rem; font-size: 1rem; border: 1px solid currentColor; border-radius: 0.3rem; } .p-lineup-item__icon li.-red { color: var(--color-red); } .l-footer { position: relative; z-index: 0; padding-block: 11.6rem 9.7rem; background: #B6D2EF; } .l-footer-logo { width: 17.4rem; margin-inline: auto; } .l-footer-btn { display: grid; grid-template-columns: 100%; gap: 3rem; margin-top: 6rem; }