@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Cinzel:wght@400..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&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 */ /* 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; } html { --vw: 1vw; font-size: calc(var(--vw) * 100 / 37.5); } @media screen and (min-width: 961px) { html { font-size: calc(var(--vw) * 100 / 128); } } body { background: #fff; color: #2A2925; font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size: 1.6rem; font-weight: 400; letter-spacing: 8%; line-height: 2; min-width: 375px; } @media screen and (min-width: 961px) { body { overflow-y: scroll; } } @media screen and (max-width: 960px) { body { font-size: 1.2rem; min-width: 100%; } } body a:link, body a:visited { color: #2A2925; text-decoration: none; } body.is-fixed { overflow: hidden; } .c-svg-sprite { display: none; } a, button { cursor: pointer; } @media screen and (max-width: 960px) { html { --sp-delivery-bar-height: 2rem; --sp-header-container-h: 6rem; } } #wrapper{ margin-top: 100px; } .l-wrapper img { display: block; width: 100%; height: auto; max-width: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (min-width: 961px) { .l-wrapper { min-width: 108rem; } } .l-inner { max-width: 160rem; margin-inline: auto; } @media screen and (max-width: 960px) { .l-inner { max-width: 100%; padding-inline: 2rem; margin-inline: 0; } } @media screen and (max-width: 960px) { .l-main { margin-top: var(--sp-header-stack-offset); } } .c-svg-sprite { display: none; width: 0; height: 0; opacity: 0; overflow: hidden; } .c-title { text-align: center; } .c-title__jp { font-size: 2.6rem; font-family: "hiragino-mincho-pron", sans-serif; font-weight: 300; letter-spacing: 0.08em; line-height: 1.5; } @media screen and (max-width: 960px) { .c-title__jp { font-size: 2rem; line-height: 2; } } .c-title__en { font-family: "roma", sans-serif; font-weight: 400; letter-spacing: 0.02em; font-size: 1.6rem; } @media screen and (max-width: 960px) { .c-title__en { font-size: 1.4rem; } } .c-read-more__link { display: flex; justify-content: flex-end; } .c-read-more__link a { display: flex; justify-content: flex-end; align-items: center; gap: 1.6rem; margin-left: auto; font-size: 1.2rem; font-family: "roma", sans-serif; position: relative; padding-bottom: 0.2rem; text-decoration: none; } .c-read-more__link a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.1rem; background: #939089; transform: scaleX(1); transform-origin: left; transition: transform 0.35s ease; } @media screen and (min-width: 961px) { .c-read-more__link a:focus::after { transform: scaleX(0); transform-origin: right; } .c-read-more__link a:hover::after { transform: scaleX(0); transform-origin: right; } } .c-icon { width: 0.6rem; height: 0.8rem; } .c-item__name { margin: 2rem 0 0; font-size: 1.4rem; font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; line-height: 1.4; font-weight: 400; } .c-item__price { font-size: 1.6rem; font-family: "roma", sans-serif; margin-bottom: 1rem; } .c-item__price span { font-size: 1.2rem; } @media screen and (max-width: 960px) { .c-item__price { margin-top: 1rem; margin-bottom: 1.6rem; } } .c-item__price .c-price__tax { font-size: 1rem; font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; } .c-cart_button { margin-bottom: 0.4rem; } .c-property_txt { margin-top: 1rem; line-height: 1.1; font-size: 1.2rem; color: rgba(42, 41, 37, 0.6588235294); padding: 0.5rem 2rem; } .c-cart_button a, .c-egift_button a { display: flex; justify-content: center; align-items: center; min-height: 4rem; background: #F6F2EA; transition: 0.5s; font-size: 1.4rem; } .c-cart_button a:hover, .c-egift_button a:hover { background: #EBE0C9; } .c-cart_button a { gap: 0.6rem; } .c-cart_button a::before { content: ""; display: block; width: 1.5rem; height: 1.5rem; background: url(https://www.letao.jp/client_info/LETAO/view/userweb/images/new_top/icon-cart.svg) no-repeat center center/contain; } .c-egift_button a { line-height: 1; padding: 0.6rem 0; gap: 0.4rem; } @media screen and (max-width: 960px) { .c-egift_button a { text-align: center; display: block; } } .c-egift_button a::before { content: ""; display: block; width: 9.3rem; height: 2.2rem; background: url(https://www.letao.jp/client_info/LETAO/view/userweb/images/new_top/icon-home.svg) no-repeat center center/contain; } @media screen and (max-width: 960px) { .c-egift_button a::before { margin-inline: auto; margin-bottom: 4px; height: 2.8rem; background: url(https://www.letao.jp/client_info/LETAO/view/userweb/images/new_top/icon-home_sp.svg) no-repeat center center/contain; } } .p-info { background: #FDF8EE; padding: 4rem 0; } @media screen and (max-width: 960px) { .p-info { padding: 4rem 2rem; } } .p-info .l-inner { max-width: 820px; margin: 0 auto; } .p-info a { transition: 0.5s; } .p-info a:hover { opacity: 0.5; } .p-info__title { margin-bottom: 3rem; letter-spacing: 5%; text-align: center; font-weight: 500; } .p-info__text { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 0.1rem solid #908D87; line-height: 150%; font-size: 1.4rem; } .p-info__text span { margin-right: 2.5rem; } @media screen and (max-width: 960px) { .p-info__text { font-size: 1.2rem; } .p-info__text span { margin-right: 1.5rem; } } .p-info__text:last-of-type { padding-bottom: 0; border-bottom: none; } .p-new-item { padding: 12rem 0 16rem; } @media screen and (max-width: 960px) { .p-new-item { padding: 6rem 0 8rem; max-width: 100%; } } .p-pickup-item__container { display: grid; grid-template-columns: 1fr 1fr; gap: 6.8rem; max-width: 108rem; margin: 10rem auto; align-items: start; } @media screen and (max-width: 960px) { .p-pickup-item__container { grid-template-columns: 1fr; gap: 3rem; margin: 6rem auto 8rem; } } @media screen and (max-width: 960px) { .p-pickup-item__container .p-new-item__img { order: -1; } } @media screen and (max-width: 960px) { .p-pickup-item__container .p-new-item__text-area { order: 1; padding-inline: 2rem; } } .p-pickup-item__container .c-read-more__link { display: none; } @media screen and (max-width: 960px) { .p-pickup-item__container .c-read-more__link { display: flex; } } .p-pickup-item__title { margin-bottom: 2.4rem; font-family: "hiragino-mincho-pron", sans-serif; font-size: 1.8rem; line-height: 1; } @media screen and (max-width: 960px) { .p-pickup-item__title { font-size: 1.6rem; margin-bottom: 2rem; } } .p-new-item__name { margin-bottom: 3.2rem; font-family: "Zen Old Mincho", serif; font-size: 4.6rem; line-height: 1; letter-spacing: -4%; } @media screen and (max-width: 960px) { .p-new-item__name { margin-bottom: 2.6rem; font-size: 2.8rem; } } .p-new-item__text { line-height: 1.6; letter-spacing: 10%; font-size: 1.4rem; } @media screen and (max-width: 960px) { .p-new-item__text { margin-bottom: 4.2rem; } } .p-price { margin-top: 6rem; font-family: "roma", sans-serif; } @media screen and (max-width: 960px) { .p-price { display: none; } } .p-price__yen { font-size: 2.3rem; } .p-price__value { font-size: 2.6rem; } .p-price__tax { font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size: 1.8rem; } .p-new-item__img { position: relative; min-width: 64.2rem; overflow: hidden; } .p-new-item__img img { transition: 0.5s; } @media screen and (max-width: 960px) { .p-new-item__img { max-width: 100%; min-width: 0; width: 100%; } } .p-new-item__img a { display: block; position: relative; } .p-new-item__img a:hover img { opacity: 1; transform: scale(1.1); } .p-new-item__view-btn { position: absolute; right: 2.5rem; bottom: 2rem; padding: 0.6rem 4rem; background: #fff; color: #2A2925; border-radius: 5rem; font-size: 1.2rem; font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; transition: opacity 0.3s; box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1); opacity: 0; } .p-new-item__img:hover .p-new-item__view-btn { opacity: 1; } .p-item_slider__area { padding: 0 10rem; overflow: hidden; } @media screen and (max-width: 960px) { .p-item_slider__area { padding: 0 2rem; } } .p-item_slider__area .swiper { overflow: visible; } .p-single-item__title { margin: 0 0 6rem; border-bottom: 0.1rem solid #949492; font-family: "hiragino-mincho-pron", sans-serif; font-size: 2.8rem; line-height: 105%; } .p-single-item__title span { margin-left: 1.6rem; font-size: 1.6rem; font-family: "roma", sans-serif; } @media screen and (max-width: 960px) { .p-single-item__title { margin: 0 0 4rem 0; font-size: 2rem; } .p-single-item__title span { margin-left: 1rem; font-size: 1rem; } } .p-new-item__link-area { max-width: 108rem; margin-inline: auto; padding: 5.2rem 0 3.4rem; margin-top: 12rem; border-top: 0.1rem solid #949492; border-bottom: 0.1rem solid #949492; font-family: "hiragino-mincho-pron", sans-serif; text-align: center; } @media screen and (max-width: 960px) { .p-new-item__link-area { padding: 4rem 0 3rem; margin-top: 4rem; margin-inline: 2rem; } } .p-new-item__link-area span { font-size: 2.2rem; } .p-new-item__link-area .c-icon { width: 1rem; height: 2rem; } .p-new-item__link-text { font-size: 2.6rem; padding: 3.4rem 0; line-height: 1.3; letter-spacing: 18%; } @media screen and (max-width: 960px) { .p-new-item__link-text { padding: 1.8rem 0; font-size: 1.6rem; } } .p-new-item__link { width: 11.6rem; margin: 0 auto; background: transparent; } .p-new-item__link a { padding: 1.2rem 0; border-radius: 3rem; border: 0.1rem solid #2A2925; display: block; color: #2A2925; transition: 0.5s; } .p-new-item__link a svg { display: block; margin: 0 auto; transition: 0.5s; } .p-new-item__link a:hover { color: #ffffff; background-color: #2A2925; cursor: pointer; } .p-video { width: 100%; height: 52rem; overflow: hidden; margin-bottom: 12rem; } @media screen and (max-width: 960px) { .p-video { height: 28rem; margin-bottom: 6rem; } } .p-video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-popularity { max-width: 108rem; margin-inline: auto; } .p-popularity .c-title { margin-bottom: 10rem; } @media screen and (max-width: 960px) { .p-popularity .c-title { margin-bottom: 6rem; } } .p-popularity .c-read-more__link { display: none; } @media screen and (max-width: 960px) { .p-popularity .c-read-more__link { display: flex; margin-bottom: 7rem; } } .p-popularity__bnr { position: relative; } @media screen and (max-width: 960px) { .p-popularity__bnr { display: flex; flex-direction: column; } } @media screen and (max-width: 960px) { .p-popularity__bnr::before { content: ""; position: absolute; width: 100%; height: 10rem; display: block; background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 100%); bottom: -1px; left: 0; } } .p-popularity__bnr-title { font-family: "roma", sans-serif; position: absolute; top: 50%; right: 10.8rem; transform: translateY(-50%); text-align: left; font-size: 4.8rem; line-height: 0.5; letter-spacing: 2%; } .p-popularity__bnr-title span { font-size: 1.4rem; font-family: "hiragino-mincho-pron", sans-serif; line-height: 0; letter-spacing: 8%; } @media screen and (max-width: 960px) { .p-popularity__bnr-title { top: auto; right: auto; transform: none; font-size: 3.8rem; margin-top: -2.5rem; margin-left: 2rem; z-index: 2; } .p-popularity__bnr-title span { font-size: 1.2rem; } } .p-popularity__bnr-title.p-text__white { color: #fff; } @media screen and (max-width: 960px) { .p-popularity__bnr-title.p-text__white { color: #2A2925; } } .p-popularity__item-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 5rem auto 10rem; max-width: 80.6rem; align-items: baseline; } @media screen and (max-width: 960px) { .p-popularity__item-box { grid-template-columns: repeat(2, 1fr); gap: 2rem; margin: 5rem auto 6.2rem; } .p-popularity__item-box .c-popularity__item:nth-child(n+3) { display: none; } } .c-popularity__item { width: 26rem; min-height: 25.5rem; margin-inline: auto; text-align: center; } @media screen and (max-width: 960px) { .c-popularity__item { min-height: auto; width: 14.8rem; padding: 0; } } .c-popularity__item a { transition: 0.5s; display: block; padding: 3rem; } @media screen and (max-width: 960px) { .c-popularity__item a { padding: 0; } } .c-popularity__item a:hover { background: #F6F2EA; } .c-popularity__item a:hover img { opacity: 1; } .c-popularity__item-name { font-size: 1.4rem; } @media screen and (max-width: 960px) { .c-popularity__item-name { font-size: 1rem; } } .p-ranking { overflow: hidden; background: #FDF8EE; padding: 10rem 10rem; margin-bottom: 10rem; } @media screen and (max-width: 960px) { .p-ranking { padding: 6rem 2rem; margin-bottom: 10rem; } } .p-ranking .c-title { margin-bottom: 10rem; } @media screen and (max-width: 960px) { .p-ranking .c-title { margin-bottom: 8rem; } } .p-ranking .c-item-card { position: relative; } .p-ranking .swiper { overflow: visible; } .p-ranking .rec_box_list .swiper-slide:empty { display: none; } .p-ranking .rec_box_list .swiper-slide:blank { display: none; } .p-ranking .swiper-slide:nth-child(1)::before, .p-ranking .swiper-slide:nth-child(2)::before, .p-ranking .swiper-slide:nth-child(3)::before { position: absolute; top: -4rem; left: 0; z-index: 2; font-size: 7rem; line-height: 1; pointer-events: none; font-family: "Cinzel", serif; letter-spacing: 0; } @media screen and (max-width: 960px) { .p-ranking .swiper-slide:nth-child(1)::before, .p-ranking .swiper-slide:nth-child(2)::before, .p-ranking .swiper-slide:nth-child(3)::before { top: -3rem; font-size: 6rem; } } .p-ranking .swiper-slide:nth-child(1)::before { content: "01"; color: #907018; } .p-ranking .swiper-slide:nth-child(2)::before { content: "02"; color: #8D9197; } .p-ranking .swiper-slide:nth-child(3)::before { content: "03"; color: #8A582B; } .p-category__box { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 4rem auto 10rem; max-width: 100rem; line-height: 1.3; } @media screen and (max-width: 960px) { .p-category__box { grid-template-columns: repeat(2, 1fr); gap: 0; margin: 4rem auto 11rem; } } .c-category__item a { display: block; width: 18rem; height: 21rem; padding: 1.5rem; text-align: center; transition: 0.5s; font-size: 1.4rem; } .c-category__item a:hover { background: #F6F2EA; } .c-category__item a:hover img { opacity: 1; } @media screen and (max-width: 960px) { .c-category__item a { width: 11rem; height: 11rem; margin: 1.8rem 2.9rem; padding: 0; font-size: 1rem; } } .p-usage-scene { padding: 10rem 0 10rem; background: #FDF8EE; } @media screen and (max-width: 960px) { .p-usage-scene { padding: 8rem 0 6rem; } } .p-usage-scene__box { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 108rem; margin-inline: auto; margin-top: 8rem; } @media screen and (max-width: 960px) { .p-usage-scene__box { grid-template-columns: 1fr; gap: 3rem; margin-top: 6rem; } } .p-usage-scene__box .c-read-more__link { display: none; } @media screen and (max-width: 960px) { .p-usage-scene__box .c-read-more__link { display: flex; margin-top: 3.2rem; } } .c-usage-scene__item { width: 26.4rem; } @media screen and (max-width: 960px) { .c-usage-scene__item { width: 100%; } } .c-usage-scene__item a { display: block; overflow: hidden; } .c-usage-scene__item a:hover img { opacity: 1; transform: scale(1.1); } .c-usage-scene__item img { transition: 0.5s; } @media screen and (max-width: 960px) { .c-usage-scene__item img { -o-object-fit: cover; object-fit: cover; max-height: 14.2rem; } } .c-usage-scene__title { margin: 3.3rem 0 1.5rem; text-align: center; font-family: "hiragino-mincho-pron", sans-serif; font-size: 1.8rem; line-height: 1; } @media screen and (max-width: 960px) { .c-usage-scene__title { margin: 1.6rem 0; font-size: 1.6rem; -moz-text-align-last: left; text-align-last: left; } } .c-usage-scene__text { max-width: 22.5rem; font-size: 1.2rem; line-height: 1.35; margin-inline: auto; } @media screen and (max-width: 960px) { .c-usage-scene__text { font-size: 1.2rem; max-width: 100%; } } .p-event { padding: 8rem 0; } @media screen and (max-width: 960px) { .p-event { padding: 8rem 0; } } .p-event .swiper-container { margin-top: 5rem; } @media screen and (max-width: 960px) { .p-event .swiper-container { margin-top: 3rem; } } .p-event .swiper-slide { max-width: 79rem; } .p-event .swiper-container.is-single .swiper-box .swiper-button-prev, .p-event .swiper-container.is-single .swiper-box .swiper-button-next { position: relative; top: auto; left: auto; right: auto; transform: none; width: 0.7rem; height: 1.4rem; color: #333; } .p-event .swiper-container.is-single .swiper-box .swiper-button-prev { transform: rotate(180deg); } .p-event .swiper-container.is-single .swiper-box .swiper-button-prev .c-icon, .p-event .swiper-container.is-single .swiper-box .swiper-button-next .c-icon { width: 0.7rem; height: 1.4rem; } .p-topics { background: #FDF8EE; padding: 10rem 0; } @media screen and (max-width: 960px) { .p-topics { padding: 8rem 0 6rem; } } .p-topics_tab_box { max-width: 82rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 7rem auto 5rem; } @media screen and (max-width: 960px) { .p-topics_tab_box { gap: 0.6rem; margin: 3.8rem auto 2.8rem; } } .c-topics-tab__item a { display: block; padding: 1.2rem 0; background: #F6F2EA; text-align: center; line-height: 1; transition: 0.5s; } @media screen and (min-width: 961px) { .c-topics-tab__item a:focus { background: #EDE6D7; } .c-topics-tab__item a:hover { background: #EDE6D7; } } @media screen and (max-width: 960px) { .c-topics-tab__item a { font-size: 1.2rem; align-content: center; min-height: 48px; padding: 0.6rem 0; } } .c-topics-tab__item br { display: none; } @media screen and (max-width: 960px) { .c-topics-tab__item br { display: block; } } .p-topics__container { max-width: 82rem; margin-inline: auto; } .p-topics__box { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 6rem; } @media screen and (max-width: 960px) { .p-topics__box { margin-bottom: 4rem; } .p-topics__box .topics__item a, .p-topics__box .topics__item img { display: block; width: 100%; } } .topics__item img { height: auto; -o-object-fit: cover; object-fit: cover; transition: 0.5s; } .p-topics__box:not(.is-active) { display: none; } .p-topics__box.is-active { animation: topicsFadeIn 0.5s ease-in-out; } @keyframes topicsFadeIn { from { opacity: 0; } to { opacity: 1; } } .c-topics-tab__item a.is-active { background: #EDE6D7; } @media screen and (max-width: 960px) { .c-topics-tab__item a[data-topics-target=support] { display: flex; justify-content: center; text-align: left; align-items: center; } } .p-history { padding: 8rem 0; overflow: hidden; } @media screen and (max-width: 960px) { .p-history { padding: 10rem 0 0; } } .p-history .swiper-container { overflow: hidden; padding: 8rem 10rem 0; } @media screen and (max-width: 960px) { .p-history .swiper-container { padding: 5rem 2rem 8rem; } } .p-history .swiper { overflow: visible; } .p-history .c-item__name { height: 4rem; } /* レビュー */ .p-review { background: #FDF8EE; margin-bottom: 10rem; } @media screen and (max-width: 960px) { .p-review { padding: 0 2rem; } } .p-review .c-title { margin-bottom: 5rem; } @media screen and (max-width: 960px) { .p-review .c-title { margin-bottom: 4rem; } } #top_parts_review img { display: inline-block; width: auto; } #top_parts_history { margin: 0 auto 0; } #top_parts_review { max-width: 1200px; margin: 0 auto 0; padding: 10rem 0; } @media screen and (max-width: 960px) { #top_parts_review { padding: 8rem 0; } } #naviplus-review-list-8 { font-size: 62.5%; } #naviplus-review-list-8 table { width: 100%; border: 0; box-sizing: border-box; font-size: 1em; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; line-height: initial; } #naviplus-review-list-8 .navi-review-new-rate-title-comment table { margin-bottom: 10px; } #naviplus-review-list-8 .navi-review-new-img-title table td { vertical-align: middle; } #naviplus-review-list-8 th { background: none; text-align: initial; border: 0; box-sizing: border-box; font-size: 1em; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; } #naviplus-review-list-8 td { border: 0; box-sizing: border-box; font-size: 1.3em; font-weight: normal; margin: 0; padding: 0; vertical-align: baseline; max-width: 20em; } .navi-review-new-list-ul.navi-review-new-list-ul-wide { margin-bottom: 5rem; flex-wrap: nowrap; gap: 10px; } #naviplus-review-list-8 .navi-review-new-list-ul-wide li { max-width: 40rem; width: 39rem; border-left: none; border-right: none; background: #fff; margin-inline: auto; padding: 1.5rem; border-radius: 10px; } #naviplus-review-list-8 .navi-review-wrapper .navi-review-pagination-ul li .navi-review-no-link-paginate-arrow, #naviplus-review-list-8 .navi-review-wrapper .navi-review-pagination-ul li a { color: #2A2925; } @media screen and (max-width: 960px) { .navi-review-new-list-ul-wide .navi-review-new-comment { font-size: 1.2em; } #naviplus-review-list-8 .navi-review-new-list-ul-wide li { max-width: 100%; margin-bottom: 1rem; border-bottom: none; } #naviplus-review-list-8 .navi-review-new-list-ul-wide li:last-child { margin-bottom: 0; } } .p-info-area { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 110rem; margin-inline: auto; margin-bottom: 10rem; } @media screen and (max-width: 960px) { .p-info-area { display: block; margin-bottom: 8rem; } } .p-info-area .c-title { padding-top: 0; margin: 7rem 0 5.5rem; -moz-text-align-last: left; text-align-last: left; } @media screen and (max-width: 960px) { .p-info-area .c-title { margin-bottom: 4rem; } } .p-guide__area { border-right: 0.1rem solid #2A2925; } @media screen and (max-width: 960px) { .p-guide__area { margin: 0 2rem; padding: 0 3rem; border-right: none; border-bottom: 0.1rem solid #2A2925; } } @media screen and (max-width: 960px) { .p-guide__box { max-width: 28rem; margin-inline: auto; text-align: left; } } .c-guide__icon { width: 6.5rem; height: 4.3rem; fill: transparent; } .p-news_area { grid-column: span 2/span 2; } @media screen and (max-width: 960px) { .p-news_area { padding: 0 5rem; } } @media screen and (max-width: 960px) { .p-news_area .c-title { margin-top: 6rem; } } .p-news__box .c-read-more__link { margin-top: 6rem; } .p-guide__item { display: grid; grid-template-columns: 6.5rem 14rem auto; align-items: center; gap: 2rem; margin-bottom: 5rem; transition: 0.5s; } .p-guide__item:hover { opacity: 0.5; } @media screen and (max-width: 960px) { .p-guide__item { justify-content: space-between; gap: 0; } } .p-guide__item .c-icon { width: 0.7rem; height: 1.4rem; } .p-guide__title { line-height: 1; margin-bottom: 1rem; font-size: 1.4rem; } .p-guide__text { font-size: 1.2rem; line-height: 1.35; } .p-news__box { max-width: 624px; margin-bottom: 6rem; margin-left: 9.8rem; } @media screen and (max-width: 960px) { .p-news__box { width: 100%; max-width: 28rem; margin-inline: auto; padding: 0; } } .p-news__box .c-title { margin-bottom: 4.3rem; } @media screen and (max-width: 960px) { .p-news__box .c-title { margin-bottom: 2.3rem; } } .p-news__item { border-bottom: 0.1rem solid #949492; } @media screen and (max-width: 960px) { .p-news__item { padding: 2rem 0; } } .p-news__item a { display: block; padding: 1.4rem 3rem; transition: 0.5s; } .p-news__item a:hover { opacity: 0.5; } @media screen and (max-width: 960px) { .p-news__item a { padding: 0; } } .p-news__date { margin-bottom: 0.7rem; display: grid; grid-template-columns: auto 1fr; align-items: center; } @media screen and (max-width: 960px) { .p-news__date { margin-bottom: 2.4rem; } } .p-news__date { gap: 1rem; font-size: 1rem; } .p-news__icon { display: block; text-align: center; border: 0.1rem solid #2A2925; padding: 0 0.4rem; } @media screen and (max-width: 960px) { .p-news__icon { min-width: 100px; } } .p-news__title { font-size: 1.2rem; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .p-column { padding: 10rem 0; background: #FDF8EE; } @media screen and (max-width: 960px) { .p-column { padding: 8rem 0 6rem; } } .p-column__read { font-family: "hiragino-mincho-pron", sans-serif; text-align: center; margin: 4rem auto 6rem; } @media screen and (max-width: 960px) { .p-column__read { font-size: 1.4rem; margin: 3rem auto 4rem; } } .p-column__container { max-width: 108rem; margin-inline: auto; } @media screen and (max-width: 960px) { .p-column__container { padding: 0 6.3rem; } } .p-column__box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-bottom: 6rem; } @media screen and (max-width: 960px) { .p-column__box { grid-template-columns: repeat(1, 1fr); } } .p-column__sp-slider { display: none; } @media screen and (max-width: 960px) { .p-column__box { display: none; } .p-column__sp-slider { display: block; margin-bottom: 6rem; } } .p-column__item { max-width: 34.3rem; } @media screen and (max-width: 960px) { .p-column__item { max-width: 100%; } } .p-column__item a { display: block; overflow: hidden; } .p-column__item a img { transition: 0.5s; } .p-column__item a:hover img { opacity: 1; transform: scale(1.1); } .p-column__date { margin: 2rem 0; } @media screen and (max-width: 960px) { .p-column__date { margin: 1.2rem 0; font-size: 1.2rem; } } .p-column__title { font-size: 1.2rem; line-height: 1.5; } @media screen and (max-width: 960px) { .p-column__title { font-size: 1.2rem; line-height: 1.5; } } .swiper-container { position: relative; padding-bottom: 2rem; } @media screen and (max-width: 960px) { .swiper-container { padding-bottom: 6rem; } } .swiper-container.is-single { padding-bottom: 0; } .swiper-container.is-single .swiper { max-width: 79rem; margin-inline: auto; overflow: hidden; } @media screen and (max-width: 960px) { .swiper-container.is-single .swiper { max-width: 33.5rem; } } .swiper-slide img { transition: 0.5s; } .swiper-container.is-single .swiper-slide { width: 100%; } @media screen and (max-width: 960px) { .swiper-container.is-single .swiper-slide { max-width: 33.5rem; margin-inline: auto; padding: 0 0.2rem; } } .swiper-container.is-single .swiper-box { gap: 1.8rem; } .swiper-container.is-single .swiper-box .swiper-button-prev, .swiper-container.is-single .swiper-box .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 4.4rem; color: #2A2925; } @media screen and (max-width: 960px) { .swiper-container.is-single .swiper-box .swiper-button-prev, .swiper-container.is-single .swiper-box .swiper-button-next { top: 30%; } } .p-column__sp-slider .swiper-container.is-single .swiper-box .swiper-button-prev, .p-column__sp-slider .swiper-container.is-single .swiper-box .swiper-button-next { position: relative; top: auto; left: auto; right: auto; transform: none; } @media screen and (max-width: 960px) { .p-column__sp-slider .swiper-container.is-single .swiper-box .swiper-button-prev, .p-column__sp-slider .swiper-container.is-single .swiper-box .swiper-button-next { top: auto; } } .p-column__sp-slider .swiper-container.is-single .swiper-box .swiper-button-prev { transform: rotate(180deg); } .p-event .swiper-container.is-single .swiper-box .swiper-button-prev, .p-event .swiper-container.is-single .swiper-box .swiper-button-next { top: calc(50% - 5.4rem); } .swiper-container.is-single .swiper-box .swiper-button-prev { left: 14.3rem; transform: translateY(-50%) rotate(180deg); } @media screen and (max-width: 960px) { .swiper-container.is-single .swiper-box .swiper-button-prev { left: 1.2rem; } } .swiper-container.is-single .swiper-box .swiper-button-next { right: 14.3rem; } @media screen and (max-width: 960px) { .swiper-container.is-single .swiper-box .swiper-button-next { right: 1.2rem; } } .swiper-container.is-single .swiper-box .swiper-button-prev .c-icon, .swiper-container.is-single .swiper-box .swiper-button-next .c-icon { width: 1rem; height: 1rem; } .p-event .swiper-container.is-single .swiper-box .swiper-button-prev .c-icon, .p-event .swiper-container.is-single .swiper-box .swiper-button-next .c-icon { width: 2.2rem; height: 4.4rem; } .swiper-container.is-single .swiper-counter { margin-top: 1.4rem; } .p-column .swiper-container.is-single .swiper-counter { margin-top: 0; } /* ナビゲーションを包むボックス */ .swiper-box { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 2rem; overflow: hidden; } .is-card .swiper-box, .is-single .swiper-box { margin-top: 4rem; } .p-column .swiper-box { margin-top: 2rem; } /* ページネーション（横棒）のコンテナ */ .swiper-pagination { position: static !important; width: auto !important; display: flex; gap: 0.8rem; } @media screen and (max-width: 960px) { .swiper-pagination { gap: 0.2rem; } } .swiper-pagination-lock { display: none; } .swiper-box .swiper-pagination-bullet { position: relative; background-color: #2A2925; height: 0.1rem; width: 3.6rem; border-radius: 0; } .swiper-box .swiper-pagination-bullet::after { content: ""; position: absolute; inset: -0.5rem; } @media screen and (max-width: 960px) { .swiper-box .swiper-pagination-bullet { width: 2rem; } } .swiper-box .swiper-button-prev, .swiper-box .swiper-button-next { position: relative; width: 2.4rem; height: 1.4rem; margin: 0; color: #333; } .swiper-box .swiper-button-prev::after, .swiper-box .swiper-button-next::after { content: ""; position: absolute; inset: -0.5rem; } .swiper-button-prev::after, .swiper-button-next::after { content: none; } .swiper-button-prev { transform: rotate(180deg); } .swiper-container.is-top .swiper-box { flex-wrap: wrap; } .swiper-container.is-top .swiper-box .swiper-button-prev { order: 1; } .swiper-container.is-top .swiper-box .swiper-pagination { order: 2; } .swiper-container.is-top .swiper-box .swiper-button-next { order: 3; } .swiper-container.is-top .swiper-box .swiper-counter { order: 4; flex-basis: 100%; } @media screen and (max-width: 960px) { .swiper-container.is-top .swiper-box { flex-wrap: nowrap; } .swiper-container.is-top .swiper-box .swiper-pagination { display: none; } .swiper-container.is-top .swiper-box .swiper-counter { order: 2; flex-basis: auto; margin-top: 0; text-align: center; } .swiper-container.is-top .swiper-box .swiper-button-next { order: 3; } } .swiper-counter { text-align: center; font-size: 1.4rem; margin-top: 1.5rem; font-family: "roma", sans-serif; } .is-card .swiper-slide { width: 23rem; max-width: none; margin-right: 2rem; flex-shrink: 0; } @media screen and (max-width: 960px) { .is-card .swiper-slide { width: 22.1rem; } } #head__bottom.s-header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-weight: 400; } @media screen and (max-width: 960px) { #head__bottom.s-header { top: 2.5em; z-index: 130; } } .s-header { font-size: calc(var(--vw, 1vw) * 100 / 37.5); } @media screen and (min-width: 961px) { .s-header { font-size: calc(var(--vw, 1vw) * 100 / 128); } } .s-header__container { height: 8.6rem; padding: 0 4rem; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 3rem; background: linear-gradient(90.42deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.4) 100%); backdrop-filter: blur(61.541px); } @media screen and (max-width: 960px) { .s-header__container { height: 7rem; grid-template-columns: 1fr auto; gap: 1.6rem; padding: 0.5rem 2rem; box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06); } } .p-delivery-date__box { display: none; } @media screen and (max-width: 960px) { .p-delivery-date__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 0.6rem; position: fixed; top: 0; left: 0; z-index: 101; width: 100%; min-height: var(--sp-delivery-bar-height); padding: 0.6rem 2rem; box-sizing: border-box; background: #fff; border-bottom: 0.1rem solid #e8e8e8; font-size: 1.1rem; line-height: 1.4; } } @media screen and (max-width: 960px) { .p-delivery-date__box .p-delivery-date__text { max-width: none; margin-inline: 0; border-bottom: 0; } .p-delivery-date__box .p-delivery-date__text::after { content: "｜"; margin-left: 0.6rem; } } @media screen and (max-width: 960px) { .p-delivery-date__box .p-delivery-date__value { line-height: 1.4; } } .s-header__logo { max-width: 10rem; height: auto; } @media screen and (max-width: 960px) { .s-header__logo { width: 7.4rem; } } .s-header__megamenu-trigger { background: none; border: none; cursor: pointer; padding: 0; font-size: 1.3rem; } button.s-header__megamenu-trigger { font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important; font-weight: 400; color: #2a2925; line-height: 2; } .s-header__megamenu-panel { position: fixed; top: 8.6rem; left: 0; width: 100vw; padding-bottom: 4rem; z-index: 100; max-height: calc(100vh - 8rem); overflow-y: auto; background: linear-gradient(90.42deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.4) 100%); backdrop-filter: blur(61.541px); overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .s-header__megamenu-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; } @media screen and (max-width: 960px) { .s-header__megamenu-panel { top: 0; width: 100%; height: 100dvh; max-height: none; padding-bottom: 0; z-index: 120; background: #f4f4f4; } } #header.cart_header { background: linear-gradient(90.42deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 255, 255, 0.4) 100%); backdrop-filter: blur(61.541px); } .s-header__megamenu-inner { max-width: 120rem; margin: 0 auto; padding: 3.2rem 4rem 4rem; } @media screen and (max-width: 960px) { .s-header__megamenu-inner { min-height: 100%; padding: 6.4rem 2rem 2.8rem; } } .s-header__logo_sp { display: none; } @media screen and (max-width: 960px) { .s-header__logo_sp { display: block; width: 105px; height: auto; margin-bottom: 3.2rem; } } .s-header__megamenu-inner .head__search { display: none; } @media screen and (max-width: 960px) { .s-header__megamenu-inner .head__search { display: block; margin-bottom: 6.2rem; border-bottom: none; } } @media screen and (max-width: 960px) { .s-header__megamenu-inner .head__search form { padding: 1rem; border: 1px solid #949492; border-radius: 0.3rem; justify-content: space-between; } } .s-header__megamenu-col { margin-top: 6rem; } .s-header__megamenu-col:first-child { margin-top: 4rem; } @media screen and (max-width: 960px) { .s-header__megamenu-col { margin-top: 6.2rem; } .s-header__megamenu-col:first-child { margin-top: 0; } } .p-letao-life__button { display: none; } @media screen and (max-width: 960px) { .p-letao-life__button { display: block; margin-bottom: 6.2rem; } } .p-letao-life__button a { display: flex; align-items: center; gap: 2.2rem; padding: 2.3rem; background: #174E5D; border-radius: 0.5rem; font-size: 1.6rem; line-height: 1; letter-spacing: 4%; } .p-letao-life__button a:link, .p-letao-life__button a:visited { color: #fff; } .p-letao-life__button img { max-width: 4rem; } .p-letao-life__button a > span > span { font-weight: 700; } .s-header__bnr_sp { display: none; } @media screen and (max-width: 960px) { .s-header__bnr_sp { display: block; margin-bottom: 3rem; } } .s-header__bnr_sp img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; } .s-header__bnr_sp-title { font-size: 16px; font-weight: 500; margin-bottom: 2.5rem; line-height: 1; } .s-header__title_box { display: grid; grid-template-columns: max-content 1fr; gap: 2.6rem; border-bottom: 0.1rem solid #2A2925; padding-bottom: 2.6rem; margin-bottom: 2.6rem; } @media screen and (max-width: 960px) { .s-header__title_box { padding-bottom: 0; margin-bottom: 2.5rem; border-bottom: none; } } .s-header__title_image { max-width: 19rem; } @media screen and (max-width: 960px) { .s-header__title_image { display: none; max-width: 16rem; } } .s-header__megamenu-ttl { font-size: 3rem; line-height: 1; color: #2A2925; font-family: "roma", sans-serif; letter-spacing: 0; } .s-header__megamenu-ttl span { font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size: 1.8rem; } @media screen and (max-width: 960px) { .s-header__megamenu-ttl { font-size: 0; line-height: 1.3; } .s-header__megamenu-ttl span { display: inline-block; font-size: 1.6rem; font-weight: 600; letter-spacing: 8%; } } @media screen and (max-width: 960px) { .s-header__megamenu-ttl br { display: none; } } .p-megamenu__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6rem; text-align: left; } @media screen and (max-width: 960px) { .p-megamenu__list { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.2rem; } } .p-megamenu__link { display: grid; grid-template-columns: max-content 1fr; gap: 2rem; padding: 0.6rem; align-items: center; font-family: "hiragino-mincho-pron", sans-serif; transition: 0.5s; } @media screen and (min-width: 961px) { .p-megamenu__link:focus { background: rgba(255, 255, 255, 0.5); } .p-megamenu__link:hover { background: rgba(255, 255, 255, 0.5); } } @media screen and (max-width: 960px) { .p-megamenu__link { gap: 1.2rem; padding: 0.2rem 0 1.4rem; border-bottom: 0.1rem dotted #8c8c8c; align-items: center; } } .p-megamenu__link br { display: none; } @media screen and (max-width: 960px) { .p-megamenu__link br { display: block; } } @media screen and (max-width: 960px) { .p-megamenu__link-text { line-height: 1.5; letter-spacing: 1%; } } .s-header__gnav { display: block; } @media screen and (max-width: 960px) { .s-header__gnav { display: none; } } .s-header__nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; } .s-header__list--megamenu { position: relative; } .s-header__link { text-decoration: none; font-size: 1.3rem; transition: 0.5s; font-weight: 400; } @media screen and (min-width: 961px) { .s-header__link:focus { color: #929190; } .s-header__link:hover { color: #929190; } } .head__search form { display: flex; align-items: center; width: 100%; } .head__search { color: #8C9091; border-bottom: 0.1rem solid #8C9091; } input.search_icon { padding: 0; background: none; max-width: 2rem; height: auto; } input#form.new_form[type=text] { -webkit-box-shadow: none; border: none; font-size: 1.5rem; font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important; background: transparent; color: #8C9092; } .s-header__btn-area { display: flex; align-items: center; justify-content: center; gap: 1.5rem; max-width: 31rem; } @media screen and (max-width: 960px) { .s-header__btn-area { max-width: none; } } .p-login-btn__box { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: stretch; } @media screen and (max-width: 960px) { .p-login-btn__box { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 0; } } .p-btn--pc { display: block; } @media screen and (max-width: 960px) { .p-btn--pc { display: none; } } .s-header__icon-link { display: none; } @media screen and (max-width: 960px) { .s-header__icon-link { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; color: #2A2925; } .s-header__icon-link .c-icon { fill: transparent; width: 28px; height: 28px; } } .s-header__hamburger { display: none; } .p-btn a, .p-btn--pc a { display: block; padding: 0.8rem 1rem; min-height: 3.5rem; height: 100%; align-content: center; background: linear-gradient(90deg, #00A0DE 0%, #00A1DF 21.5%, #0276BA 100%); box-shadow: 1.09593px 1.09593px 4.3837px rgba(0, 0, 0, 0.25); border-radius: 0.7rem; font-size: 1rem; line-height: 110%; text-decoration: none; text-align: center; transition: 0.5s; } .p-btn a:link, .p-btn a:visited, .p-btn--pc a:link, .p-btn--pc a:visited { color: #fff; } @media screen and (min-width: 961px) { .p-btn a:focus, .p-btn--pc a:focus { opacity: 0.8; } .p-btn a:hover, .p-btn--pc a:hover { opacity: 0.8; } } .p-delivery-date { max-width: 12rem; width: 100%; border: 0.1rem solid #2A2925; padding: 0.7rem 0; text-align: center; font-size: 1.2rem; line-height: 2; } @media screen and (max-width: 960px) { .p-delivery-date { display: none; } } .p-delivery-date__text { max-width: 8.3rem; margin-inline: auto; font-size: 1rem; line-height: 1.5; border-bottom: 0.1rem solid #2A2925; } .p-delivery-date__value { line-height: 1; } .p-delivery-date__value span { letter-spacing: 6%; font-size: 1rem; } @media screen and (max-width: 960px) { .p-btn.s-header__icon-link { background: none; box-shadow: none; border-radius: 0; padding: 0; min-height: 0; } .s-header__hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 0.6rem; width: 4rem; height: 3.2rem; padding: 0; border: 0; background: transparent; color: #2A2925; cursor: pointer; position: relative; z-index: 1; } .s-header__hamburger-line { display: block; width: 100%; height: 0.1rem; background: currentColor; border-radius: 0.2rem; transition: transform 0.25s ease, opacity 0.25s ease; } .s-header__hamburger[aria-expanded=true] .s-header__hamburger-line:nth-child(1) { transform: translateY(0.7rem) rotate(45deg); } .s-header__hamburger[aria-expanded=true] .s-header__hamburger-line:nth-child(2) { opacity: 0; } .s-header__hamburger[aria-expanded=true] .s-header__hamburger-line:nth-child(3) { transform: translateY(-0.8rem) rotate(-45deg); } .p-megamenu__link > .p-megamenu__link-img { width: 5.4rem; -o-object-fit: cover; object-fit: cover; } body.is-fixed .s-header__container { background: transparent; backdrop-filter: none; box-shadow: none; } body.is-fixed .s-header__container .s-header__logo, body.is-fixed .s-header__container .s-header__icon-link, body.is-fixed .s-header__container .s-header__gnav, body.is-fixed .s-header__container .p-delivery-date { opacity: 0; pointer-events: none; } body.is-fixed .s-header__hamburger { pointer-events: auto; position: relative; z-index: 300; } } .s-footer { padding: 10rem 10rem 6rem; background: #0A1A28; color: #fff; font-size: calc((var(--vw, 1vw) * 100) / 128); } @media screen and (max-width: 960px) { .s-footer { padding: 8rem 2rem 6rem; } } .p-footer__logo.p-sp-only { display: none; } @media screen and (max-width: 960px) { .p-footer__logo.p-sp-only { display: block; margin-bottom: 0; } } .p-footer__top-area { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; align-items: center; padding-bottom: 4rem; margin-bottom: 4rem; border-bottom: 0.1rem solid #fff; } @media screen and (max-width: 960px) { .p-footer__top-area { grid-template-columns: repeat(1, 1fr); } } .p-footer__logo { margin-bottom: 4rem; max-width: 11rem; height: auto; } @media screen and (max-width: 960px) { .p-footer__logo { display: none; } } .p-footer__promotion-area { display: flex; flex-direction: column; width: 43.6rem; height: 41.5rem; padding: 1rem; background: url(https://www.letao.jp/client_info/LETAO/view/userweb/images/new_top/footer_promotion_bg.jpg) no-repeat center center/cover; border-radius: 1rem; order: 2; } @media screen and (max-width: 960px) { .p-footer__promotion-area { width: 100%; height: auto; padding: 0; background: none; order: 1; } } .p-promotion__link-area { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.3rem; margin-top: auto; min-height: 18.7rem; padding: 1.3rem; background: rgba(255, 255, 255, 0.4); border-radius: 1rem; color: #000; font-size: 1.1rem; } @media screen and (max-width: 960px) { .p-promotion__link-area { height: auto; padding: 0; background: none; } } .p-promotion__app-area img { transition: 0.5s; } @media screen and (max-width: 960px) { .p-promotion__app-area { display: flex; flex-direction: column; } } .p-promotion__app-button-area { display: grid; grid-template-columns: auto auto; gap: 1.1rem; align-items: center; max-width: 20rem; } @media screen and (max-width: 960px) { .p-promotion__app-button-area { max-width: 20.6rem; order: 2; } } .p-promotion__app-link { display: block; height: 3.1rem; width: auto; } .p-promotion__app-link img { display: block; width: auto; height: 100%; } .p-promotion__sns-area { margin-top: 1.1rem; max-width: 13.1rem; } @media screen and (max-width: 960px) { .p-promotion__sns-area { order: 1; } } .p-promotion__title { margin-bottom: 1.1rem; letter-spacing: 0; } @media screen and (max-width: 960px) { .p-promotion__title { display: none; } } .p-promotion__sns-button { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } @media screen and (max-width: 960px) { .p-promotion__sns-button { margin-bottom: 2.8rem; } } .p-promotion__sns-link { display: block; width: 3.1rem; height: auto; } @media screen and (max-width: 960px) { .p-promotion__qr-area { display: none; } } .p-footer__text-area { order: 1; } @media screen and (max-width: 960px) { .p-footer__text-area { order: 2; } } .footer__guide-area { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4.5rem; margin-bottom: 4.1rem; } @media screen and (max-width: 960px) { .footer__guide-area { grid-template-columns: repeat(1, 1fr); gap: 4.3rem; margin-bottom: 7rem; } } .c-footer__guide__text-box { max-width: 15rem; text-align: left; } @media screen and (max-width: 960px) { .c-footer__guide__text-box { max-width: 100%; } } .c-footer__title { margin-bottom: 2rem; font-family: "roma", sans-serif; font-weight: 800; line-height: 150%; letter-spacing: 5%; font-size: 1.8rem; } @media screen and (max-width: 960px) { .c-footer__guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); -moz-column-gap: 2rem; column-gap: 2rem; row-gap: 0.3rem; } } .c-footer__guide-item { font-size: 1.2rem; font-weight: 500; font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; line-height: 2; } .c-footer__guide-item a { transition: 1s; } .c-footer__guide-item a:link, .c-footer__guide-item a:visited { color: #fff; } .c-footer__guide-item a:hover { opacity: 0.5; } @media screen and (max-width: 960px) { .c-footer__guide-item a { font-size: 1.3rem; } } .p-footer__support-area { max-width: 50.5rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem; } @media screen and (max-width: 960px) { .p-footer__support-area { max-width: 26rem; margin-inline: auto; grid-template-columns: repeat(1, 1fr); gap: 2rem; } } @media screen and (max-width: 960px) { .p-support__button { background: #fff; border-radius: 1rem; padding: 2rem; } } .p-support__button a { display: block; padding: 0.9em 1em; background: #fff; border-radius: 0.5em; font-size: 2em; color: #0A1A28; font-weight: 600; letter-spacing: 3%; line-height: 1.1; transition: 0.5s; box-shadow: inset 0px -2.05877px 4.11754px rgba(115, 115, 115, 0.65), inset 0px 2.05877px 4.11754px #E3E3E3; } .p-support__button a:hover { opacity: 0.7; } @media screen and (max-width: 960px) { .p-support__button a { padding: 1.6rem; border-radius: 1rem; background: #0A1A28; color: #fff; font-size: 1.4rem; box-shadow: none; text-align: center; } .p-support__button a br { display: none; } .p-support__button a:link, .p-support__button a:visited { color: #fff; } } .p-support__link-area { letter-spacing: 4%; } .p-support__link { line-height: 2; margin-bottom: 1.2rem; } .p-support__link a { display: flex; align-items: center; justify-content: space-between; font-weight: 500; border-bottom: 0.1rem solid #fff; transition: 0.5s; font-size: 1.6rem; } @media screen and (max-width: 960px) { .p-support__link a { max-width: 24.7rem; margin-inline: auto; } } .p-support__link a:link, .p-support__link a:visited { color: #fff; } .p-support__link a:hover { opacity: 0.7; } .p-support__link .c-icon { width: 1em; height: 1em; } .p-support__text { font-size: 1.4rem; line-height: 1.3; } @media screen and (max-width: 960px) { .p-support__text { display: none; margin-top: 1.4rem; color: #0A1A28; text-align: center; font-family: "hiragino-mincho-pron", sans-serif; font-size: 1.2rem; line-height: 1.25; } } .p-footer__bottom-box { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; } @media screen and (max-width: 960px) { .p-footer__bottom-box { grid-template-columns: repeat(1, 1fr); gap: 4.3rem; } } .p-footer__bottom-tell { display: grid; grid-template-columns: auto 1fr; align-items: center; } @media screen and (max-width: 960px) { .p-footer__bottom-tell { grid-template-columns: repeat(1, 1fr); } } .p-footer__tell-icon { width: 2.4rem; } .p-footer__bottom-tell-number { display: flex; align-items: center; gap: 0.7rem; font-size: 1.9rem; font-weight: 600; letter-spacing: 10%; line-height: 1.7; } .p-footer__bottom-tell-number::before { content: ""; display: block; width: 2.4rem; height: 1.4rem; background: url(https://www.letao.jp/client_info/LETAO/view/userweb/images/new_top/free_call_icon.png) no-repeat center center/cover; } .p-footer__bottom-tell-text { font-size: 1.2rem; } .p-footer__ssl-icon { max-width: 21rem; margin-left: auto; } @media screen and (max-width: 960px) { .p-footer__ssl-icon { margin-left: 0; margin-right: auto; } } .p-footer__bottom-copyright { display: block; text-align: right; font-size: 1rem; font-family: "hiragino-mincho-pron", sans-serif; } @media screen and (max-width: 960px) { .p-footer__bottom-copyright { text-align: left; } } .p-sp-only { display: none; } @media screen and (max-width: 960px) { .p-sp-only { display: block; } } #form_pc { display: none; } @media screen and (max-width: 960px) { #form_pc { display: block; } }