@charset "UTF-8"; /*** The new CSS reset - version 1.7.2 (last updated 23.6.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):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; text-decoration: none; } /* 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 { 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 { 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; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /*--------------------------------------------------------------------- media queries ---------------------------------------------------------------------*/ /** * スモール（1140px未満） */ /** * タブレット表示（840px未満） */ /** * スマートフォン表示（540px未満） */ /*--------------------------------------------------------------------- font size ---------------------------------------------------------------------*/ /** * xxlarge font size（セクションタイトルなど） */ /** * xlarge font size */ /** * large font size（カードタイトルなど） */ /** * medium font size（カードタイトルなど） */ /** * subtitle font size（中見出し） */ /** * heading font size（小見出し） */ /** * button font size（ボタンテキスト） */ /** * small font size（本文・説明文） */ /** * xsmall font size（キャプション・注釈） */ /** * xxsmall font size（細かい注釈・ラベル） */ /** * body font size（基本の本文） */ /** * caption font size（注意書き・キャプション） */ /*--------------------------------------------------------------------- button base ---------------------------------------------------------------------*/ /*--------------------------------------------------------------------- Fonts ---------------------------------------------------------------------*/ @font-face { font-family: "BIZ UDPGothic"; src: url("../font-data/BIZUDPGothic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "BIZ UDPGothic"; src: url("../font-data/BIZUDPGothic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /*--------------------------------------------------------------------- global ---------------------------------------------------------------------*/ html { touch-action: manipulation; font-size: 62.5%; } body { font-family: "BIZ UDPGothic", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif; font-size: 1.6rem; line-height: 1.8; font-weight: 400; -webkit-text-size-adjust: none; scrollbar-width: none; background-color: #fff; color: #212121; } body::-webkit-scrollbar { display: none; } body.is-fixed { overflow: hidden; } main { padding-top: 7.8rem; } @media (max-width: 840px) { main { padding-top: 6.4rem; } } img { width: 100%; vertical-align: middle; object-fit: cover; } a { transition: all 0.3s ease; } a:hover { filter: brightness(1.2); } .pc-dn { display: none !important; } .tablet-db { display: none !important; } @media (max-width: 840px) { .tablet-db { display: block !important; } } @media (max-width: 540px) { .pc-dn { display: block !important; } .tablet-db { display: none !important; } .sp-dn { display: none !important; } } /*--------------------------------------------------------------------- italic font style ---------------------------------------------------------------------*/ .italic { font-style: italic !important; } /*--------------------------------------------------------------------- セクションエリア ---------------------------------------------------------------------*/ .section-wrapper { padding: 11.2rem 8rem; } @media (max-width: 1140px) { .section-wrapper { padding: 9.6rem 6.4rem; } } @media (max-width: 840px) { .section-wrapper { padding: 8rem 4.8rem; } } @media (max-width: 540px) { .section-wrapper { padding: 4.8rem 1.6rem; } } .content-inner { max-width: 102.4rem; margin: 0 auto; } .top-note-inner, .katakorinote-inner, .katakorinote-detail-recommend-inner, .lower-header-inner { max-width: 128rem; margin: 0 auto; } .section-title { text-align: center; font-size: 6.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .section-title { font-size: 5.4rem; } } @media (max-width: 840px) { .section-title { font-size: 4.6rem; } } @media (max-width: 540px) { .section-title { font-size: 3.6rem; } } /*--------------------------------------------------------------------- 下層ページFVエリア ---------------------------------------------------------------------*/ .lower-header { padding: 9.2rem 8rem; background-image: url(../img/lower/lower-header-bg.webp); background-repeat: no-repeat; background-position: right bottom; background-size: contain; } @media (max-width: 1140px) { .lower-header { padding: 9.6rem 6.4rem; background-size: cover; } } @media (max-width: 840px) { .lower-header { padding: 6.4rem 4.8rem; } } @media (max-width: 540px) { .lower-header { padding: 4rem 1.6rem; } } .lower-header-title { font-size: 6.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .lower-header-title { font-size: 5.4rem; } } @media (max-width: 840px) { .lower-header-title { font-size: 4.6rem; } } @media (max-width: 540px) { .lower-header-title { font-size: 3.6rem; } } .lower-header-subtitle { margin-top: 2.8rem; font-size: 2.4rem; line-height: 1; } @media (max-width: 840px) { .lower-header-subtitle { font-size: 2rem; } } @media (max-width: 540px) { .lower-header-subtitle { font-size: 1.6rem; } } @media (max-width: 840px) { .lower-header-subtitle { margin-top: 2rem; } } @media (max-width: 540px) { .lower-header-subtitle { margin-top: 1.6rem; } } /*--------------------------------------------------------------------- PC版固定購入ボタン ---------------------------------------------------------------------*/ .fixed-purchase-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; position: fixed; right: 0; bottom: 10%; z-index: 1000; padding: 2.4rem 1.6rem; background-color: #E30000; border-radius: 0.8rem 0 0 0.8rem; box-shadow: 0 0.5rem 1rem 0 rgba(60, 77, 169, 0.25); border: 0.2rem solid #FFF; } @media (max-width: 540px) { .fixed-purchase-btn { display: none; } } .fixed-purchase-btn svg { width: 3.2rem; height: 3.2rem; } .fixed-purchase-btn-text { font-size: 2.4rem; line-height: 1; } @media (max-width: 840px) { .fixed-purchase-btn-text { font-size: 2rem; } } @media (max-width: 540px) { .fixed-purchase-btn-text { font-size: 1.6rem; } } .fixed-purchase-btn-text { font-weight: bold; line-height: 1; text-align: center; color: #fff; } /*--------------------------------------------------------------------- SP版固定バナー（下部） ---------------------------------------------------------------------*/ .fixed-banner-sp { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; background-color: #ffffff; box-shadow: 0 -0.2rem 0.8rem 0 rgba(0, 0, 0, 0.1); transform: translateY(100%); transition: transform 0.3s ease; } @media (max-width: 540px) { .fixed-banner-sp { display: block; } } .fixed-banner-sp.is-visible { transform: translateY(0); } .fixed-banner-sp.is-hidden { transform: translateY(100%); } .fixed-banner-sp-inner { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.6rem; gap: 1.2rem; } .fixed-banner-sp-text { flex: 1; font-size: 1.4rem; font-weight: bold; line-height: 1.4; } .fixed-banner-sp-btn { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .fixed-banner-sp-btn { font-size: 2rem; } } @media (max-width: 840px) { .fixed-banner-sp-btn { font-size: 1.8rem; } } @media (max-width: 540px) { .fixed-banner-sp-btn { font-size: 2rem; } } .fixed-banner-sp-btn { display: inline-block; position: relative; width: auto; padding: 1.2rem 3.2rem; background-color: #E30000; color: #fff; border-radius: 10rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.15); transition: all 0.3s ease; } .fixed-banner-sp-btn:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .fixed-banner-sp-btn > svg { position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); width: 1.4rem; } @media (max-width: 840px) { .fixed-banner-sp-btn > svg { width: 2rem; } } @media (max-width: 540px) { .fixed-banner-sp-btn { width: 100%; padding: 1.2rem 3.2rem; border-radius: 10rem; } .fixed-banner-sp-btn > svg { right: 2rem; } } .fixed-banner-sp-btn { flex-shrink: 0; font-size: 1.4rem; white-space: nowrap; width: 50%; } /*--------------------------------------------------------------------- 購入モーダル ---------------------------------------------------------------------*/ .purchase-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; align-items: center; justify-content: center; } @media (max-width: 540px) { .purchase-modal { padding: 1.6rem; } } .purchase-modal.is-active { display: flex; } .purchase-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); cursor: pointer; } .purchase-modal-content { position: relative; max-width: 102.4rem; width: 100%; padding: 6.4rem; background-color: #FFDC7C; border-radius: 1.6rem; border: 0.6rem solid #fff; box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.2); z-index: 1; } @media (max-width: 840px) { .purchase-modal-content { padding: 4.8rem 3.2rem; border-radius: 2rem; } } @media (max-width: 540px) { .purchase-modal-content { padding: 4rem 1.6rem; border-radius: 1.6rem; } } .purchase-modal-close { display: flex; align-items: center; justify-content: center; background-color: transparent; position: absolute; top: -5rem; right: 0; width: 4rem; height: 4rem; color: #fff; transition: all 0.3s ease; } @media (max-width: 840px) { .purchase-modal-close { top: -4.6rem; width: 3.6rem; height: 3.6rem; } } @media (max-width: 540px) { .purchase-modal-close { top: -4.2rem; width: 3.2rem; height: 3.2rem; } } .purchase-modal-close:hover { opacity: 0.7; transform: scale(1.1); } .purchase-modal-close:active { transform: scale(0.95); } .purchase-modal-close svg { width: 100%; height: 100%; } .purchase-modal-title { font-size: 4.8rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .purchase-modal-title { font-size: 3.6rem; } } @media (max-width: 840px) { .purchase-modal-title { font-size: 3rem; } } @media (max-width: 540px) { .purchase-modal-title { font-size: 3.6rem; } } .purchase-modal-title { font-weight: bold; color: #0021F4; text-align: center; line-height: 1; } @media (max-width: 840px) { .purchase-modal-title { font-size: 3.6rem; } } @media (max-width: 540px) { .purchase-modal-title { font-size: 2.8rem; } } .purchase-modal-desc { margin-top: 4.8rem; font-size: 2rem; } @media (max-width: 840px) { .purchase-modal-desc { font-size: 1.8rem; } } @media (max-width: 540px) { .purchase-modal-desc { font-size: 1.6rem; } } .purchase-modal-desc { text-align: center; } @media (max-width: 540px) { .purchase-modal-desc { margin-top: 1.6rem; } } .purchase-modal-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; margin-top: 6.4rem; } @media (max-width: 840px) { .purchase-modal-list { gap: 2rem; margin-top: 4rem; } } @media (max-width: 540px) { .purchase-modal-list { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 2.4rem; } } .purchase-modal-list > li > a { display: block; position: relative; padding: 2.4rem; border-radius: 0.8rem; background-color: #fff; box-shadow: 0 1rem 1rem 0 rgba(9, 9, 10, 0.2); } @media (max-width: 540px) { .purchase-modal-list > li > a { padding: 1.6rem; } } .purchase-modal-list > li > a:hover { transform: translateY(-0.5rem); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); } .purchase-modal-list > li > a > img { object-fit: contain; } @media (max-width: 540px) { .purchase-modal-list > li > a > img { max-height: 4.2rem; } } .purchase-modal-list > li > a > svg { position: absolute; right: 1rem; bottom: 1rem; width: 2rem; height: 2rem; } /* -------------------------------------------------- 大鵬薬品共通フッタースタイルブランド用スタイルが共通フッタースタイルを上書きしている為、共通フッターを公式デザインで表示するためのスタイル -------------------------------------------------- */ .l-footer { overflow-y: scroll; font-family: "Roboto", "Zen Kaku Gothic Antique", "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", YuGothic, "ＭＳＰゴシック", Helvetica, Arial, sans-serif; font-size: 62.5%; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; color: #000; font-size: 1.4rem; font-weight: normal; line-height: 1.785; letter-spacing: 0.05em; } @media print, screen and (min-width: 768px) { .l-footer { font-size: 1.6rem; line-height: 2.125; } } .l-footer__nav-sns-item-img > img { width: auto; vertical-align: bottom; object-fit: none; } .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background-color: #fff; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1); } .h-inner { display: flex; justify-content: space-between; align-items: center; max-width: 132rem; margin: 0 auto; padding: 0 2rem; } @media (max-width: 840px) { .h-inner { height: 6.4rem; padding: 0 4.8rem; } } @media (max-width: 540px) { .h-inner { padding: 0 1.6rem; } } .h-logo { width: 12rem; max-width: 100%; } .h-logo > a { display: block; } @media (max-width: 840px) { .h-logo { width: 10rem; height: 3.7rem; } } .h-hamburger { display: none; flex-direction: column; justify-content: space-between; width: 2.4rem; height: 2.4rem; padding: 0; background: none; border: none; cursor: pointer; z-index: 101; position: relative; } .h-hamburger > span { display: block; width: 100%; height: 0.2rem; background-color: #212121; transition: all 0.3s ease; border-radius: 0.1rem; } .h-hamburger.is-active > span:nth-child(1) { transform: translateY(1.1rem) rotate(45deg); } .h-hamburger.is-active > span:nth-child(2) { opacity: 0; } .h-hamburger.is-active > span:nth-child(3) { transform: translateY(-1.1rem) rotate(-45deg); } @media (max-width: 840px) { .h-hamburger { display: flex !important; } } .h-nav-area { display: flex; justify-content: flex-end; align-items: center; gap: 3.2rem; } @media (max-width: 840px) { .h-nav-area { position: fixed; top: 6.4rem; left: 0; width: 100%; max-height: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background-color: #fff; box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1); transition: max-height 0.3s ease, padding 0.3s ease; overflow: hidden; z-index: 99; } .h-nav-area.is-active { max-height: calc(100vh - 6.4rem); padding: 2.4rem 4.8rem; overflow-y: auto; } } @media (max-width: 540px) { .h-nav-area.is-active { padding: 2.4rem 1.6rem; } } .h-gnav { display: flex; justify-content: space-between; align-items: center; } .h-gnav > li > a { display: block; padding: 3rem 1.6rem; font-size: 1.8rem; } @media (max-width: 840px) { .h-gnav > li > a { font-size: 1.6rem; } } @media (max-width: 540px) { .h-gnav > li > a { font-size: 1.4rem; } } .h-gnav > li > a { font-weight: bold; line-height: 1; background: #fff; } .h-gnav > li > a:hover { color: #fff; background: var(--gradation_, linear-gradient(0deg, #98D4FF 0%, #0095FF 100%)); } @media (max-width: 840px) { .h-gnav > li > a { font-size: 1.6rem; } } @media (max-width: 840px) { .h-gnav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin-bottom: 2.4rem; } .h-gnav > li { width: 100%; border-bottom: 0.1rem solid #E0E0E0; } .h-gnav > li > a { padding: 3.2rem 1.6rem; font-size: 2.4rem; text-align: center; } .h-gnav > li > a:hover { background: none; } } .h-sns { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; } .h-sns > li > a { display: block; width: 2.4rem; } @media (max-width: 840px) { .h-sns { justify-content: center; gap: 4.8rem; } .h-sns > li > a { width: 3.2rem; } } .h-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 98; opacity: 0; transition: opacity 0.3s ease; } .h-menu-overlay.is-active { display: block; opacity: 1; } @media (max-width: 840px) { .h-menu-overlay { display: none; } .h-menu-overlay.is-active { display: block; } } /*------------------------------------- TOP, 下層ページ共通の商品リストスタイル -------------------------------------*/ .series-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.8rem; } @media (max-width: 840px) { .series-list { gap: 2.4rem; } } @media (max-width: 540px) { .series-list { grid-template-columns: 1fr; gap: 1.6rem; } } .series-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.6rem; box-shadow: 0 1rem 1rem 0 rgba(28, 45, 139, 0.2); background-color: #fff; } .series-card-header { padding: 3.2rem 1.6rem; text-align: center; } @media (max-width: 540px) { .series-card-header { padding: 2.4rem 0.8rem; } } .series-card-header > h3 { font-size: 3.6rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .series-card-header > h3 { font-size: 2.7rem; } } @media (max-width: 840px) { .series-card-header > h3 { font-size: 3.2rem; } } @media (max-width: 540px) { .series-card-header > h3 { font-size: 2.4rem; } } .series-card-header > h3 { font-weight: bold; line-height: 1; color: #fff; } @media (max-width: 840px) { .series-card-header > h3 { font-size: 2.4rem; } } .series-card-body { padding: 4.8rem; } @media (max-width: 1140px) { .series-card-body { padding: 2.4rem; } } @media (max-width: 540px) { .series-card-body { padding: 2.4rem 1.6rem; } } .series-card-desc { font-size: 2.7rem; text-align: center; line-height: 1.45; } @media (max-width: 840px) { .series-card-desc { font-size: 2rem; } } @media (max-width: 840px) and (max-width: 840px) { .series-card-desc { font-size: 1.8rem; } } @media (max-width: 840px) and (max-width: 540px) { .series-card-desc { font-size: 1.6rem; } } .series-card-desc > span { color: #E30000; } .series-card-img-area { flex: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 3.2rem; margin-top: 4.8rem; } @media (max-width: 840px) { .series-card-img-area { margin-top: 2.4rem; } } @media (max-width: 540px) { .series-card-img-area { align-items: center; } } .series-card-left { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .series-card-logo { padding: 0.7rem 1rem; } @media (max-width: 540px) { .series-card-logo { padding: 0; } } .series-card-badges { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; align-items: center; width: 56%; } @media (max-width: 840px) { .series-card-badges { width: 73%; } } .series-card-badges > .badge-self { width: 68%; } .series-card-product { flex: 1; } .series-card-btns { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 4.8rem; } @media (max-width: 840px) { .series-card-btns { margin-top: 2.4rem; } } @media (max-width: 540px) { .series-card-btns { gap: 0.8rem; } } .series-card-btns > a.btn-purchase { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .series-card-btns > a.btn-purchase { font-size: 2rem; } } @media (max-width: 840px) { .series-card-btns > a.btn-purchase { font-size: 1.8rem; } } @media (max-width: 540px) { .series-card-btns > a.btn-purchase { font-size: 2rem; } } .series-card-btns > a.btn-purchase { display: inline-block; position: relative; width: auto; padding: 2.4rem; background-color: #0021F4; color: #fff; border-radius: 12.8rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .series-card-btns > a.btn-purchase:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .series-card-btns > a.btn-purchase > svg { position: absolute; top: 50%; right: 3.2rem; transform: translateY(-50%); width: 3.2rem; } @media (max-width: 840px) { .series-card-btns > a.btn-purchase > svg { width: 2.4rem; } } @media (max-width: 540px) { .series-card-btns > a.btn-purchase { width: 100%; padding: 1.8rem; border-radius: 12.8rem; } .series-card-btns > a.btn-purchase > svg { right: 3.2rem; } } .series-card-btns > a.btn-info { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .series-card-btns > a.btn-info { font-size: 2rem; } } @media (max-width: 840px) { .series-card-btns > a.btn-info { font-size: 1.8rem; } } @media (max-width: 540px) { .series-card-btns > a.btn-info { font-size: 2rem; } } .series-card-btns > a.btn-info { display: inline-block; position: relative; width: auto; padding: 2.4rem; background-color: #333; color: #fff; border-radius: 12.8rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .series-card-btns > a.btn-info:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .series-card-btns > a.btn-info > svg { position: absolute; top: 50%; right: 3.2rem; transform: translateY(-50%); width: 2.6rem; } @media (max-width: 840px) { .series-card-btns > a.btn-info > svg { width: 2rem; } } @media (max-width: 540px) { .series-card-btns > a.btn-info { width: 100%; padding: 1.8rem; border-radius: 12.8rem; } .series-card-btns > a.btn-info > svg { right: 3.2rem; } } .series-card-diclodirect .series-card-body { background-image: url(../img/product/product-diclodirect-list-bg.webp); background-repeat: no-repeat; background-position: bottom; background-size: contain; } .series-card-diclodirect .series-card-header, .series-card-diclodirect .btn-purchase { background: linear-gradient(68deg, #E4BA11 0%, #9D870F 100.06%); } .series-card-zensx .series-card-body { background-image: url(../img/product/product-zensx-list-bg.webp); background-repeat: no-repeat; background-position: bottom; background-size: contain; } .series-card-zensx .series-card-header, .series-card-zensx .btn-purchase { background: linear-gradient(75deg, #5292FF 0%, #132496 100%); } .series-card-zenfx .series-card-body { background-image: url(../img/product/product-zenfx-list-bg.webp); background-repeat: no-repeat; background-position: bottom; background-size: contain; } .series-card-zenfx .series-card-header, .series-card-zenfx .btn-purchase { background: linear-gradient(75deg, #FF34C4 0%, #FF0138 95.13%); } .series-card-zene .series-card-body { background-image: url(../img/product/product-zene-list-bg.webp); background-repeat: no-repeat; background-position: bottom; background-size: contain; } .series-card-zene .series-card-header, .series-card-zene .btn-purchase { background: linear-gradient(75deg, #9800C9 -0.25%, #52015E 99.75%); } /*------------------------------------- よくあるご質問_TOP, 下層ページ共通リストスタイル -------------------------------------*/ .faq-list { margin-top: 4.8rem; } @media (max-width: 840px) { .faq-list { margin-top: 4rem; } } @media (max-width: 540px) { .faq-list { margin-top: 3.2rem; } } .faq-list > li { border-radius: 1.6rem; background-color: #fff; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); } @media (max-width: 540px) { .faq-list > li { border-radius: 1.2rem; } } .faq-list > li.is-open .faq-q .faq-toggle { transform: rotate(-45deg); } .faq-list > li.is-open .faq-a { max-height: 50rem; padding: 3.2rem; } @media (max-width: 840px) { .faq-list > li.is-open .faq-a { padding: 2.4rem; } } @media (max-width: 540px) { .faq-list > li.is-open .faq-a { padding: 1.4rem; } } .faq-list > li + li { margin-top: 2.4rem; } @media (max-width: 840px) { .faq-list > li + li { margin-top: 2rem; } } @media (max-width: 540px) { .faq-list > li + li { margin-top: 1.6rem; } } .faq-q { display: flex; align-items: center; padding: 3.2rem; cursor: pointer; } @media (max-width: 840px) { .faq-q { padding: 2.4rem; } } @media (max-width: 540px) { .faq-q { padding: 1.4rem; } } .faq-q .faq-icon { background-color: #0021F4; } @media (max-width: 840px) { .faq-q .faq-icon { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; margin-right: 1.4rem; } } @media (max-width: 540px) { .faq-q .faq-icon { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; margin-right: 1.2rem; } } .faq-q .faq-question { flex: 1; font-size: 2rem; font-weight: bold; color: #0021F4; } @media (max-width: 840px) { .faq-q .faq-question { font-size: 1.8rem; } } @media (max-width: 540px) { .faq-q .faq-question { font-size: 1.4rem; } } .faq-q .faq-toggle { width: 1rem; height: 1rem; margin-right: 0.8rem; border-top: 0.2rem solid #0021F4; border-right: 0.2rem solid #0021F4; transform: rotate(135deg); transition: transform 0.3s ease; } @media (max-width: 840px) { .faq-q .faq-toggle { width: 0.9rem; height: 0.9rem; } } @media (max-width: 540px) { .faq-q .faq-toggle { width: 0.8rem; height: 0.8rem; margin-right: 0.6rem; } } .faq-a { display: flex; align-items: flex-start; max-height: 0; overflow: hidden; position: relative; padding: 0 3.2rem; transition: all 0.3s ease; } @media (max-width: 840px) { .faq-a { padding: 0 2.4rem; } } @media (max-width: 540px) { .faq-a { padding: 0 1.4rem; } } .faq-a:before { content: ""; display: block; position: absolute; top: 0; left: 2.4rem; width: calc(100% - 4.8rem); height: 0.1rem; background-image: linear-gradient(to right, #BDBDBD, #BDBDBD 0.6rem, transparent 0.6rem, transparent 1.2rem); background-size: 1.4rem 0.1rem; background-position: left 2.4rem top; background-repeat: repeat-x; } @media (max-width: 840px) { .faq-a:before { left: 2rem; width: calc(100% - 4rem); } } @media (max-width: 540px) { .faq-a:before { left: 1.6rem; width: calc(100% - 3.2rem); } } .faq-a .faq-icon { background-color: #E30000; } @media (max-width: 840px) { .faq-a .faq-icon { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; margin-right: 1.4rem; } } @media (max-width: 540px) { .faq-a .faq-icon { width: 2.4rem; height: 2.4rem; font-size: 1.2rem; margin-right: 1.2rem; } } .faq-a .faq-answer { flex: 1; font-size: 2.4rem; color: #E30000; } .faq-a .faq-answer > a { word-break: break-all; text-decoration: underline; } .faq-a .faq-answer > img { display: block; width: 21rem; margin-top: 1.6rem; height: auto; } @media (max-width: 840px) { .faq-a .faq-answer { font-size: 2rem; } } @media (max-width: 540px) { .faq-a .faq-answer { font-size: 1.6rem; } } .faq-icon { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; margin-right: 1.6rem; font-size: 1.6rem; font-weight: bold; color: #fff; border-radius: 50%; background-color: #0021F4; } /*------------------------------------- KV -------------------------------------*/ .kv { position: relative; width: 100%; margin: 0; overflow: hidden; background: linear-gradient(180deg, #0047FF 0%, #0038CC 100%); padding: 6rem 0 3.6rem; } @media (max-width: 540px) { .kv { padding: 2.4rem 0; } } .kv-wrapper { position: relative; width: 100%; max-width: 100vw; overflow: visible; } .kv-list { display: flex; list-style: none; margin: 0; padding: 0; transition: transform 0.5s ease; will-change: transform; align-items: center; transform-origin: left center; } .kv-list > li { flex: 0 0 96rem; width: 96rem; padding: 0 2rem; transition: all 0.3s ease; box-sizing: border-box; } @media (max-width: 840px) { .kv-list > li { flex: 0 0 70rem; width: 70rem; padding: 0 1.5rem; } } @media (max-width: 540px) { .kv-list > li { flex: 0 0 85%; width: 85%; padding: 0 1rem; } } .kv-list > li > a { display: block; width: 100%; border-radius: 1.6rem; overflow: hidden; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); } @media (max-width: 540px) { .kv-list > li > a { border-radius: 1.2rem; } } .kv-list > li > a > img { width: 100%; height: auto; display: block; } .kv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 6.4rem; height: 6.4rem; background-color: rgba(255, 255, 255, 0.98); border: none; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.2); } @media (max-width: 540px) { .kv-arrow { width: 3.2rem; height: 3.2rem; } } .kv-arrow:before { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 1.6rem; height: 1.6rem; border-top: 0.4rem solid #212121; border-right: 0.4rem solid #212121; } @media (max-width: 540px) { .kv-arrow:before { width: 0.8rem; height: 0.8rem; border-top: 0.2rem solid #212121; border-right: 0.2rem solid #212121; } } .kv-arrow:hover { background-color: rgb(255, 255, 255); box-shadow: 0 0.8rem 2.8rem rgba(0, 0, 0, 0.3); transform: translateY(-50%) scale(1.08); } .kv-arrow:active { transform: translateY(-50%) scale(0.95); } .kv-arrow-left { left: 8rem; } @media (max-width: 1140px) { .kv-arrow-left { left: 6.4rem; } } @media (max-width: 840px) { .kv-arrow-left { left: 4.8rem; } } @media (max-width: 540px) { .kv-arrow-left { left: 1.6rem; } } .kv-arrow-left:before { transform: translate(-40%, -50%) rotate(-135deg); } .kv-arrow-right { right: 8rem; } @media (max-width: 1140px) { .kv-arrow-right { right: 6.4rem; } } @media (max-width: 840px) { .kv-arrow-right { right: 4.8rem; } } @media (max-width: 540px) { .kv-arrow-right { right: 1.6rem; } } .kv-arrow-right:before { transform: translate(-60%, -50%) rotate(45deg); } .kv-indicator { display: flex; justify-content: center; align-items: center; margin-top: 2.2rem; gap: 1.6rem; } @media (max-width: 540px) { .kv-indicator { margin-top: 1.6rem; gap: 1.2rem; } } .kv-indicator > li { width: 4rem; height: 0.6rem; background-color: #fff; cursor: pointer; transition: all 0.3s ease; border-radius: 0.3rem; } @media (max-width: 540px) { .kv-indicator > li { width: 2.4rem; height: 0.4rem; } } .kv-indicator > li > span { display: block; width: 100%; height: 100%; } .kv-indicator > li.active { background-color: #0095FF; } .kv-indicator > li:hover { filter: brightness(1.2); } /*------------------------------------- 見出し商品一覧セクション -------------------------------------*/ .heading-product { padding-top: 6.4rem; padding-bottom: 6.4rem; } @media (max-width: 840px) { .heading-product { padding-top: 4.8rem; padding-bottom: 4.8rem; } } @media (max-width: 540px) { .heading-product { padding-top: 2.4rem; padding-bottom: 2.4rem; } } .heading-product-list { display: flex; justify-content: space-between; } .heading-product-list > li { width: 15%; } @media (max-width: 840px) { .heading-product-list > li { width: 20%; } } .heading-product-list > li > a { display: flex; flex-direction: column; align-items: center; } .heading-product-list > li > a > img:last-child { width: 60%; } @media (max-width: 540px) { .heading-product-list > li > a > img:last-child { width: 100%; } } /*------------------------------------- こんなときにゼノールセクション -------------------------------------*/ .top-note { background-color: #0021F4; } .top-note-title { color: #ffffff; } @media (max-width: 540px) { .top-note-title { font-size: 3rem; } } .top-note-list { display: flex; gap: 2.4rem; margin-top: 8rem; } @media (max-width: 1140px) { .top-note-list { gap: 1rem; } } @media (max-width: 540px) { .top-note-list { flex-direction: column; gap: 1.6rem; margin-top: 3.2rem; } } .top-note-list > li { flex: 1; display: flex; flex-direction: column; background-color: #fff; border-radius: 1.6rem; overflow: hidden; box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1); } @media (max-width: 540px) { .top-note-list > li { flex: none; } } .note-card-header { padding: 1.6rem; text-align: center; background-color: #0095FF; } @media (max-width: 1140px) { .note-card-header { padding: 1.6rem 1rem; } } .note-card-header > h3 { font-size: 3.2rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .note-card-header > h3 { font-size: 2.3rem; } } @media (max-width: 840px) { .note-card-header > h3 { font-size: 2.3rem; line-height: 1.45; } } @media (max-width: 540px) { .note-card-header > h3 { font-size: 2.4rem; } } .note-card-header > h3 { color: #fff; } .note-card-illust { display: flex; gap: 0; flex: 1; } /*------------------------------------- ゼノールの特徴セクション -------------------------------------*/ .top-feature { background-color: #0095FF; background-image: url(../img/top/feature-bg.webp); background-repeat: no-repeat; background-position: right -5%; background-size: cover; } .top-feature.section-wrapper { padding-bottom: 6.4rem; } @media (max-width: 1140px) { .top-feature.section-wrapper { padding-bottom: 3.2rem; } } @media (max-width: 540px) { .top-feature.section-wrapper { padding-bottom: 4.8rem; } } .top-feature-title { color: #fff; } .top-feature-content { margin-top: 6rem; } @media (max-width: 540px) { .top-feature-content { margin-top: 3.2rem; } } /*------------------------------------- 「痛み」に効く有効成分配合セクション -------------------------------------*/ .top-point { background-color: #fff; } .top-point-title { width: 70rem; max-width: 100%; margin: 0 auto; } @media (max-width: 540px) { .top-point-title { width: 19.4rem; } } .point-carousel { position: relative; max-width: 120rem; margin: 8rem auto 0; background-color: #F5F5F5; border-radius: 0.8rem; border: 0.8rem solid #fff; padding: 4% 6%; box-shadow: 0 1rem 1rem 0 rgba(28, 45, 139, 0.2); } .point-carousel-wrapper { position: relative; width: 100%; overflow: hidden; } .point-carousel-list { display: flex; list-style: none; margin: 0; padding: 0; transition: transform 0.5s ease; } .point-carousel-list > li { flex: 0 0 100%; width: 100%; } .point-carousel-list > li > img { display: block; } .point-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 6.4rem; height: 6.4rem; background-color: #0021F4; border: 0.3rem solid #fff; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); } .point-arrow:before { content: ""; position: absolute; top: 50%; left: 50%; display: block; width: 1.6rem; height: 1.6rem; border-top: 0.3rem solid #fff; border-right: 0.3rem solid #fff; } .point-arrow:hover { background-color: #001ACC; box-shadow: 0 1rem 2rem rgba(0, 33, 244, 0.6); transform: translateY(-50%) scale(1.05); } .point-arrow:active { transform: translateY(-50%) scale(0.95); } .point-arrow-left { left: -4rem; } .point-arrow-left:before { transform: translate(-40%, -50%) rotate(-135deg); } .point-arrow-right { right: -4rem; } .point-arrow-right:before { transform: translate(-60%, -50%) rotate(45deg); } .point-indicator { display: flex; justify-content: center; align-items: center; list-style: none; margin-top: 4.8rem; padding: 0; gap: 1.6rem; } .point-indicator > li { width: 4rem; height: 0.6rem; background-color: #BDBDBD; cursor: pointer; transition: all 0.3s ease; border-radius: 0.4rem; } .point-indicator > li > span { display: block; width: 100%; height: 100%; } .point-indicator > li.active { background-color: #0095FF; } .point-indicator > li:hover { filter: brightness(1.2); } .point-list-sp { display: none; } @media (max-width: 540px) { .point-list-sp { display: flex !important; flex-direction: column; gap: 1.6rem; margin-top: 3.2rem; } } .point-list-sp > li { position: relative; display: flex; flex-direction: column; gap: 1.6rem; padding: 2.4rem 1.6rem; background-color: #F5F5F5; border-radius: 0.8rem; } .point-list-sp-title { font-size: 1.8rem; font-weight: bold; line-height: 1.45; text-align: center; color: #0021F4; } .point-list-sp-image { display: flex; flex-direction: column; gap: 1.6rem; width: 100%; } .point-list-sp-image-title { font-size: 1.8rem; font-weight: bold; line-height: 1.45; text-align: center; color: #0021F4; } .point-list-sp-image + .point-list-sp-image { margin-top: 1.6rem; } .point-list-sp-steps { display: flex; flex-direction: column; gap: 0; width: 100%; } .point-list-sp-step { position: relative; background-color: #0021F4; border: 0.2rem solid #ffffff; border-radius: 0 0 0.8rem 0.8rem; border-top: none; padding: 1.6rem 6.2rem 1.6rem 1.6rem; min-height: 7rem; display: flex; align-items: center; } .point-list-sp-step:first-child { border-top: 0.2rem solid #ffffff; border-radius: 0.8rem 0.8rem 0 0; } .point-list-sp-step:last-child { border-radius: 0 0 0.8rem 0.8rem; } .point-list-sp-step:not(:first-child)::before { content: ""; position: absolute; top: -0.4rem; right: 1rem; width: 4rem; height: 4rem; background-image: url(../img/top/point-list-step-arrow-sp.svg); background-repeat: no-repeat; background-position: center; background-size: contain; } .point-list-sp-step-text { color: #ffffff; font-weight: bold; line-height: 1.45; } /*------------------------------------- ゼノールシリーズセクション -------------------------------------*/ .top-series { background: linear-gradient(180deg, #0021F4 0%, #0095FF 100%); } .top-series-title { color: #fff; } .top-series-title > span { display: block; } .top-series-title > span:last-child { margin-top: 4.8rem; font-size: 3.2rem; } .top-series-title > span > .strong { font-size: 5.4rem; color: #FFDC7C; } .top-series-title > span:last-child { display: inline-block; position: relative; } .top-series-title > span:last-child::before, .top-series-title > span:last-child::after { content: ""; position: absolute; top: 56%; transform: translateY(-50%); width: 2.4rem; height: 0.2rem; background-color: #fff; } .top-series-title > span:last-child::before { left: -3.2rem; } .top-series-title > span:last-child::after { right: -3.2rem; } .top-series .series-list { margin-top: 7rem; } @media (max-width: 840px) { .top-series .series-list { margin-top: 4.8rem; } } @media (max-width: 540px) { .top-series .series-list { margin-top: 3.2rem; } } @media (max-width: 840px) { .top-series-title > span:last-child { font-size: 3.2rem; } .top-series-title > span > .strong { font-size: 4rem; } } @media (max-width: 540px) { .top-series-title > span:last-child { margin-top: 3.2rem; font-size: 2.4rem; line-height: 1.2; } .top-series-title > span > .strong { font-size: 3rem; } } /*------------------------------------- あなたに最適なゼノールはどれ？セクション -------------------------------------*/ .top-recommend, .product-recommend { background-color: #212121; } .recommend-title { color: #fff; } @media (max-width: 840px) { .recommend-title.section-title { font-size: 4.4rem; } } .recommend-subtitle { margin-top: 8rem; font-size: 3.6rem; line-height: 1; text-align: center; color: #fff; } .recommend-subtitle > span { font-size: 4.8rem; font-weight: bold; color: #FFDC7C; } .recommend-desc { margin-top: 4.8rem; font-size: 2.4rem; text-align: center; color: #fff; } .recommend-content { margin-top: 4.8rem; } @media (max-width: 840px) { .recommend-desc { text-align: left; } } @media (max-width: 540px) { .recommend-title { line-height: 1.4; } .recommend-subtitle { margin-top: 3.2rem; font-size: 2.4rem; line-height: 1.4; } .recommend-subtitle > span { font-size: 3rem; } .recommend-desc { margin-top: 2.4rem; font-size: 2rem; } .recommend-content { margin-top: 2.4rem; } } .top-recommend-btn { margin-top: 6.4rem; text-align: center; } @media (max-width: 540px) { .top-recommend-btn { margin-top: 3.2rem; } } .top-recommend-btn > a { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .top-recommend-btn > a { font-size: 2rem; } } @media (max-width: 840px) { .top-recommend-btn > a { font-size: 1.8rem; } } @media (max-width: 540px) { .top-recommend-btn > a { font-size: 2rem; } } .top-recommend-btn > a { display: inline-block; position: relative; width: 40rem; padding: 2.4rem; background-color: #0021F4; color: #fff; border-radius: 12.8rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .top-recommend-btn > a:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .top-recommend-btn > a > svg { position: absolute; top: 50%; right: 3.2rem; transform: translateY(-50%); width: 2.6rem; } @media (max-width: 840px) { .top-recommend-btn > a > svg { width: 2rem; } } @media (max-width: 540px) { .top-recommend-btn > a { width: 100%; padding: 1.8rem; border-radius: 12.8rem; } .top-recommend-btn > a > svg { right: 3.2rem; } } /*------------------------------------- よくあるご質問セクション -------------------------------------*/ .top-faq { background-color: #F5F5F5; } .top-faq-title { color: #1C2D8B; } .top-faq-desc { margin-top: 4.8rem; font-size: 2.4rem; text-align: center; } .top-faq-btn { margin-top: 6.4rem; text-align: center; } .top-faq-btn > a { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .top-faq-btn > a { font-size: 2rem; } } @media (max-width: 840px) { .top-faq-btn > a { font-size: 1.8rem; } } @media (max-width: 540px) { .top-faq-btn > a { font-size: 2rem; } } .top-faq-btn > a { display: inline-block; position: relative; width: 40rem; padding: 2.4rem; background-color: #0021F4; color: #fff; border-radius: 12.8rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .top-faq-btn > a:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .top-faq-btn > a > svg { position: absolute; top: 50%; right: 3.2rem; transform: translateY(-50%); width: 2.6rem; } @media (max-width: 840px) { .top-faq-btn > a > svg { width: 2rem; } } @media (max-width: 540px) { .top-faq-btn > a { width: 100%; padding: 1.8rem; border-radius: 12.8rem; } .top-faq-btn > a > svg { right: 3.2rem; } } @media (max-width: 540px) { .top-faq-desc { margin-top: 3.2rem; font-size: 2rem; } .top-faq-btn { margin-top: 3.2rem; } } /*------------------------------------- 関連記事ノートセクション -------------------------------------*/ .top-related-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; } @media (max-width: 840px) { .top-related-inner { grid-template-columns: 1fr; } } .related-card { padding: 8rem 6.4rem; text-align: center; } .related-card-katakorinote { background: linear-gradient(180deg, #0021F4 0%, #0095FF 100%); } .related-card-tvcm { background: linear-gradient(0deg, #98D4FF 0%, #0095FF 100%); } .related-card-title { font-size: 4.8rem; line-height: 1; color: #fff; } .related-card-desc { margin-top: 4.8rem; font-size: 2.4rem; line-height: 1; color: #fff; } .related-card-img { margin-top: 4.8rem; border-radius: 1.6rem; overflow: hidden; } @media (max-width: 540px) { .related-card-img { border-radius: 1.2rem; } } .related-card-btn { margin-top: 4.8rem; } .related-card-btn > a { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .related-card-btn > a { font-size: 2rem; } } @media (max-width: 840px) { .related-card-btn > a { font-size: 1.8rem; } } @media (max-width: 540px) { .related-card-btn > a { font-size: 2rem; } } .related-card-btn > a { display: inline-block; position: relative; width: 40rem; padding: 2.4rem; background-color: #0021F4; color: #fff; border-radius: 12.8rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .related-card-btn > a:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .related-card-btn > a > svg { position: absolute; top: 50%; right: 3.2rem; transform: translateY(-50%); width: 2.6rem; } @media (max-width: 840px) { .related-card-btn > a > svg { width: 2rem; } } @media (max-width: 540px) { .related-card-btn > a { width: 100%; padding: 1.8rem; border-radius: 12.8rem; } .related-card-btn > a > svg { right: 3.2rem; } } @media (max-width: 1140px) { .related-card { padding: 6.4rem 4rem; } .related-card-btn > a { width: 100%; } } @media (max-width: 840px) { .related-card-katakorinote { background: linear-gradient(180deg, #0095FF 0%, #0021F4 100%); } } @media (max-width: 540px) { .related-card { padding: 4.8rem 1.6rem; } .related-card-title { font-size: 3.6rem; } .related-card-desc { margin-top: 3.2rem; font-size: 2rem; } .related-card-img { margin-top: 3.2rem; } .related-card-btn { margin-top: 3.2rem; } } /*------------------------------------- オンラインで購入セクション -------------------------------------*/ .top-purchase { background-color: #FFDC7C; } .top-purchase-title { color: #0021F4; } .top-purchase-desc { margin-top: 6.4rem; text-align: center; font-size: 2.4rem; } .top-purchase-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem; margin-top: 6.4rem; } .top-purchase-list > li > a { display: block; position: relative; padding: 3.3rem; border-radius: 0.8rem; background-color: #fff; box-shadow: 0 1rem 1rem 0 rgba(9, 9, 10, 0.2); } .top-purchase-list > li > a:hover { transform: translateY(-0.5rem); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); } .top-purchase-list > li > a > img { max-height: 5.4rem; object-fit: contain; } .top-purchase-list > li > a > svg { position: absolute; right: 1rem; bottom: 1rem; width: 2rem; height: 2rem; } @media (max-width: 540px) { .top-purchase-desc { margin-top: 3.2rem; font-size: 2rem; } .top-purchase-list { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 3.2rem; } .top-purchase-list > li > a { padding: 3.4rem 8.2rem; } } /*------------------------------------- 商品情報ページ -------------------------------------*/ .product-series { background: linear-gradient(180deg, #0021F4 0%, #0095FF 100%); } /*------------------------------------- 比較表 -------------------------------------*/ .comparison { background-color: #F5F5F5; } .comparison-table { margin-top: 8rem; padding: 4.8rem; border-radius: 3.2rem; background-color: #fff; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); } @media (max-width: 1140px) { .comparison-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 840px) { .comparison-table { margin-top: 6rem; padding: 3.6rem; border-radius: 1.6rem; } } @media (max-width: 540px) { .comparison-table { margin-top: 4.8rem; padding: 2.4rem 0; } } .comparison-row { display: grid; grid-template-columns: 1fr repeat(4, 1.319fr); padding-right: 2.4rem; font-size: 1.6rem; } @media (max-width: 1140px) { .comparison-row { min-width: 100rem; padding: 0 2.4rem; } } @media (max-width: 540px) { .comparison-row { grid-template-columns: 0.6fr repeat(4, 1.319fr); min-width: 80rem; font-size: 1.2rem; } } .comparison-row + .comparison-row { margin-top: 3.2rem; padding-top: 3.2rem; border-top: 0.1rem solid #BDBDBD; } @media (max-width: 540px) { .comparison-row + .comparison-row { margin-top: 2rem; padding-top: 2rem; } } .comparison-row > .comparison-cell:first-child { text-align: center; } .comparison-cell { display: flex; justify-content: center; } .comparison-cell.comparison-header { align-items: center; padding-right: 2.4rem; font-weight: bold; } @media (max-width: 540px) { .comparison-cell.comparison-header { padding-right: 1.6rem; font-size: 1.1rem; } } .comparison-cell.comparison-product { flex-direction: column; align-items: center; gap: 1rem; } .comparison-cell.comparison-product > img { max-width: 10rem; } @media (max-width: 540px) { .comparison-cell.comparison-product > img { max-width: 7rem; } } @media (max-width: 540px) { .comparison-cell.comparison-product { gap: 0.6rem; } } .comparison-cell + .comparison-cell { margin-left: 2.4rem; } @media (max-width: 540px) { .comparison-cell + .comparison-cell { margin-left: 1.6rem; } } .comparison-cell ul { text-align: left; } .comparison-cell ul > li { position: relative; padding-left: 1.6rem; } @media (max-width: 540px) { .comparison-cell ul > li { padding-left: 1.2rem; } } .comparison-cell ul > li::before { content: "・"; position: absolute; left: 0; } @media (max-width: 540px) { .comparison-cell ul > li + li { margin-top: 0.4rem; } } .comparison-button { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .comparison-button { font-size: 2rem; } } @media (max-width: 840px) { .comparison-button { font-size: 1.8rem; } } @media (max-width: 540px) { .comparison-button { font-size: 2rem; } } .comparison-button { display: inline-block; position: relative; width: auto; padding: 1.8rem 3.4rem 1.8rem 2rem; background-color: #212121; color: #fff; border-radius: 12.8rem; border: none; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .comparison-button:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .comparison-button > svg { position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%); width: 1.6rem; } @media (max-width: 840px) { .comparison-button > svg { width: 2rem; } } @media (max-width: 540px) { .comparison-button { width: 100%; padding: 1.6rem 2.2rem 1.6rem 1.6rem; border-radius: 2.4rem; } .comparison-button > svg { right: 0.6rem; } } .comparison-button { font-size: 1.6rem; } @media (max-width: 540px) { .comparison-button { font-size: 1.4rem; } } /*------------------------------------- 製品詳細ページ -------------------------------------*/ .product-kv { position: relative; width: 100%; } .product-kv-image { position: relative; width: 100%; height: 40rem; overflow: hidden; } @media (max-width: 1140px) { .product-kv-image { height: 32rem; } } @media (max-width: 840px) { .product-kv-image { height: 20rem; } } @media (max-width: 540px) { .product-kv-image { height: 14.2rem; } } .product-kv-image > img:first-child { display: block; position: relative; z-index: 1; width: auto; height: 100%; margin: 0 auto; } .product-kv-image > img:last-child { position: absolute; top: 0; right: -26rem; z-index: 0; height: 100%; } @media (max-width: 840px) { .product-kv-image > img:last-child { right: -14rem; } } @media (max-width: 540px) { .product-kv-image > img:last-child { right: -9rem; } } .product-diclodirect .product-kv-image { background: linear-gradient(180deg, #E9D16D 0%, #FFF8DE 100%); } .product-zensx .product-kv-image { background: linear-gradient(180deg, #D7DAF3 0%, #EFF0FA 100%); } .product-zenfx .product-kv-image { background: linear-gradient(180deg, #F9D0E1 0%, #FFF2F9 100%); } .product-zene .product-kv-image { background: linear-gradient(180deg, #E2CCE8 0%, #FFF5FC 100%); } @media (max-width: 840px) { .product-intro { padding: 8rem 2rem; } } @media (max-width: 540px) { .product-intro { padding: 6rem 1.6rem; } } .product-intro-content { display: flex; align-items: center; gap: 5.6rem; } @media (max-width: 840px) { .product-intro-content { flex-direction: column; gap: 2.4rem; } } .product-intro-left { width: 44.5%; } @media (max-width: 840px) { .product-intro-left { width: 100%; max-width: 20rem; } } .product-intro-left > .product-image { padding-left: 12.2%; } @media (max-width: 840px) { .product-intro-left > .product-image { padding-left: 0; } } .product-intro-right { flex: 1; } @media (max-width: 840px) { .product-intro-right { text-align: center; } } .product-intro-header { display: flex; align-items: center; gap: 4.8rem; } @media (max-width: 840px) { .product-intro-header { flex-direction: column; gap: 0; } } .product-intro-title-logo { width: 20rem; } @media (max-width: 840px) { .product-intro-title-logo { width: 16rem; } } .product-intro-desc-title { font-size: 4rem; font-weight: bold; line-height: 1; } @media (max-width: 840px) { .product-intro-desc-title { margin-top: 3.2rem; font-size: 3.2rem; } } @media (max-width: 540px) { .product-intro-desc-title { font-size: 2.4rem; } } .product-diclodirect .product-intro-desc-title { letter-spacing: -0.1rem; color: #9D870F; } .product-zensx .product-intro-desc-title { color: #1C2D8B; } .product-zenfx .product-intro-desc-title { color: #DF1669; } .product-zene .product-intro-desc-title { color: #6F018A; } .product-intro-desc-subtitle { margin-top: 0.6rem; font-size: 2.6rem; font-weight: bold; } @media (max-width: 540px) { .product-intro-desc-subtitle { font-size: 2rem; } } .product-intro-checklist-title { margin-top: 2.4rem; font-size: 2.4rem; font-weight: bold; color: #E30000; } .product-intro-checklist { margin-top: 0.6rem; } @media (max-width: 840px) { .product-intro-checklist { text-align: left; display: inline-block; } } .product-intro-checklist > li { display: flex; gap: 0.8rem; font-size: 2rem; line-height: 1.45; } @media (max-width: 840px) { .product-intro-checklist > li { font-size: 1.8rem; } } @media (max-width: 540px) { .product-intro-checklist > li { font-size: 1.6rem; } } .product-intro-checklist > li + li { margin-top: 0.6rem; } .product-intro-checklist > li > svg { flex-shrink: 0; width: 1.6rem; height: 1.6rem; margin-top: 0.6rem; } @media (max-width: 540px) { .product-intro-checklist > li > svg { width: 1.2rem; height: 1.2rem; } } .product-intro-checklist > li > span { flex: 1; } .product-intro-ingredient { display: inline-block; margin-top: 2.4rem; padding: 1rem 1.6rem; font-size: 2rem; line-height: 1; background: linear-gradient(90deg, #4A4A4A 0%, #212121 100%); color: #fff; } @media (max-width: 840px) { .product-intro-ingredient { font-size: 1.8rem; } } @media (max-width: 540px) { .product-intro-ingredient { margin-top: 2rem; font-size: 1.6rem; } } .product-intro-badges { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; } @media (max-width: 840px) { .product-intro-badges { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 1.2rem; } } .product-intro-badges > img { width: auto; height: 2.8rem; } .product-points { background-color: #EBE7CF; } @media (max-width: 840px) { .product-points { padding: 8rem 2rem; } } @media (max-width: 540px) { .product-points { padding: 6rem 1.6rem; } } .product-zensx .product-points { background-color: #D7DAF3; } .product-zenfx .product-points { background-color: #F9D0E1; } .product-zene .product-points { background-color: #E2CCE8; } .product-points-card { position: relative; padding: 9.6rem 3.2rem 3.2rem 3.2rem; background-color: #FFF; border-radius: 3.2rem; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); } @media (max-width: 840px) { .product-points-card { padding: 8rem 2.8rem 2.8rem 2.8rem; } } @media (max-width: 540px) { .product-points-card { padding: 7.2rem 2rem 2rem 2rem; } } .product-points-card-label { display: inline-block; position: absolute; top: 2.6rem; left: -1.6rem; padding: 1.2rem 1.6rem; font-size: 2.4rem; line-height: 1; border-radius: 0 0.8rem 0.8rem 0; background-color: #E30000; color: #fff; } @media (max-width: 840px) { .product-points-card-label { top: 2.4rem; font-size: 2rem; } } @media (max-width: 540px) { .product-points-card-label { top: 2rem; left: -1.2rem; font-size: 1.6rem; padding: 1rem 1.2rem; } } .product-diclodirect .product-points-card-label { background-color: #9D870F; } .product-zensx .product-points-card-label { background-color: #1C2D8B; } .product-zenfx .product-points-card-label { background-color: #DF1669; } .product-zene .product-points-card-label { background-color: #6F018A; } .product-points-card-label::before { content: ""; position: absolute; bottom: -1.6rem; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 1.6rem 1.6rem 0; } @media (max-width: 540px) { .product-points-card-label::before { border-width: 0 1.2rem 1.2rem 0; bottom: -1.2rem; } } .product-diclodirect .product-points-card-label::before { border-color: transparent #685800 transparent transparent; } .product-zensx .product-points-card-label::before { border-color: transparent #000E59 transparent transparent; } .product-zenfx .product-points-card-label::before { border-color: transparent #8A0037 transparent transparent; } .product-zene .product-points-card-label::before { border-color: transparent #440055 transparent transparent; } .product-points-card-title { margin-bottom: 3.2rem; padding-bottom: 2.4rem; font-size: 3.2rem; font-weight: bold; color: #9D870F; border-bottom: 0.1rem solid #9D870F; } @media (max-width: 840px) { .product-points-card-title { font-size: 2.8rem; margin-bottom: 2.8rem; padding-bottom: 2rem; } } @media (max-width: 540px) { .product-points-card-title { font-size: 2rem; margin-bottom: 2rem; padding-bottom: 1.6rem; } } .product-zensx .product-points-card-title { color: #1C2D8B; border-bottom-color: #1C2D8B; } .product-zenfx .product-points-card-title { color: #DF1669; border-bottom-color: #DF1669; } .product-zene .product-points-card-title { color: #6F018A; border-bottom-color: #6F018A; } .product-points-card-desc { font-size: 2rem; } @media (max-width: 840px) { .product-points-card-desc { font-size: 1.8rem; } } @media (max-width: 540px) { .product-points-card-desc { font-size: 1.4rem; } } .product-points-card-image.zenfx-point1 { width: 49rem; margin: 0 auto; } @media (max-width: 840px) { .product-points-card-image.zenfx-point1 { width: 100%; } } .product-points-card-image.point4 { width: 100%; } .product-points-card-image.diclodirect-point1, .product-points-card-image.zensx-point1 { width: 46.4rem; } @media (max-width: 1140px) { .product-points-card-image.diclodirect-point1, .product-points-card-image.zensx-point1 { width: calc((100% - 3.2rem) / 2); } } @media (max-width: 540px) { .product-points-card-image.diclodirect-point1, .product-points-card-image.zensx-point1 { width: 100%; max-width: 30rem; } } .product-points-card-image.point2 { width: 100%; } .product-points-card-image.zensx-point2, .product-points-card-image.zene-point2 { width: 28rem; margin: 0 auto; } .product-points-card-image.diclodirect-point3 { width: 24.6rem; margin: 0 auto; } @media (max-width: 840px) { .product-points-card-image.diclodirect-point3 { width: 20rem; } } @media (max-width: 540px) { .product-points-card-image.diclodirect-point3 { width: 16rem; } } .product-points-card.full { width: 100%; } .product-points-card.full .product-points-card-content { display: flex; gap: 3.2rem; } @media (max-width: 840px) { .product-points-card.full .product-points-card-content { gap: 2.8rem; } } @media (max-width: 540px) { .product-points-card.full .product-points-card-content { flex-direction: column; gap: 2rem; } } .product-points-card.full .product-points-card-desc { flex: 1; } .product-points-card-row { display: flex; gap: 2.4rem; margin-top: 2.4rem; } @media (max-width: 840px) { .product-points-card-row { gap: 2rem; } } @media (max-width: 540px) { .product-points-card-row { flex-direction: column; gap: 2rem; margin-top: 2rem; } } .product-points-card.half { width: 50%; } @media (max-width: 540px) { .product-points-card.half { width: 100%; } } .product-points-card.half .product-points-card-content { display: flex; flex-direction: column; gap: 3rem; } @media (max-width: 840px) { .product-points-card.half .product-points-card-content { gap: 2.4rem; } } @media (max-width: 540px) { .product-points-card.half .product-points-card-content { gap: 2rem; } } .product-points-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; width: 100%; } @media (max-width: 840px) { .product-points-card-grid { gap: 2rem; } } @media (max-width: 540px) { .product-points-card-grid { grid-template-columns: 1fr; gap: 2rem; } } .product-points-card-grid-item { display: flex; flex-direction: column; gap: 2.4rem; align-items: center; } @media (max-width: 540px) { .product-points-card-grid-item { gap: 1.6rem; } } .product-points-card-grid-text { font-size: 1.8rem; font-weight: bold; line-height: 1.8; } @media (max-width: 540px) { .product-points-card-grid-text { font-size: 1.4rem; } } .product-points-card-image-box { width: 100%; border: 0.1rem solid #BDBDBD; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1.2rem; } .product-points-card-image-box > img { width: 58%; } .product-points-card-images-row { display: flex; gap: 2.4rem; justify-content: center; } .product-points-card-images-row .product-points-card-image-box { flex: 1; aspect-ratio: 206/206; } .product-points-card-split { display: flex; gap: 3.2rem; width: 100%; } @media (max-width: 540px) { .product-points-card-split { flex-direction: column; gap: 2rem; } } .product-points-card-split-left { flex: 1; display: flex; flex-direction: column; gap: 3.2rem; } .product-points-card-split-right { flex: 1; display: flex; align-items: center; justify-content: center; } .product-points-card-photo { width: 100%; border-radius: 0.8rem; overflow: hidden; } .product-points-card-photo img { width: 100%; height: auto; display: block; } .product-points-card.zenfx-point4 .product-points-card-title { margin-bottom: 0; padding-bottom: 2.4rem; border-bottom: 0.1rem solid #DF1669; } .product-points-btn { margin-top: 4.8rem; text-align: center; } @media (max-width: 840px) { .product-points-btn { margin-top: 4rem; } } @media (max-width: 540px) { .product-points-btn { margin-top: 3.2rem; } } .product-points-btn > .btn-purchase { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .product-points-btn > .btn-purchase { font-size: 2rem; } } @media (max-width: 840px) { .product-points-btn > .btn-purchase { font-size: 1.8rem; } } @media (max-width: 540px) { .product-points-btn > .btn-purchase { font-size: 2rem; } } .product-points-btn > .btn-purchase { display: inline-block; position: relative; width: 40rem; padding: 2.4rem; background-color: #E30000; color: #fff; border-radius: 12.8rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .product-points-btn > .btn-purchase:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .product-points-btn > .btn-purchase > svg { position: absolute; top: 50%; right: 3.2rem; transform: translateY(-50%); width: 3.2rem; } @media (max-width: 840px) { .product-points-btn > .btn-purchase > svg { width: 2rem; } } @media (max-width: 540px) { .product-points-btn > .btn-purchase { width: 100%; padding: 1.8rem; border-radius: 12.8rem; } .product-points-btn > .btn-purchase > svg { right: 3.2rem; } } @media (max-width: 840px) { .product-points-btn > .btn-purchase { width: 36rem; font-size: 2.2rem; padding: 1.8rem 3.2rem; } } @media (max-width: 540px) { .product-points-btn > .btn-purchase { width: 100%; max-width: 32rem; font-size: 1.8rem; padding: 1.6rem 2.4rem; } } * + .product-points-card.full { margin-top: 2.4rem; } .product-info { background-color: #F5F5F5; } @media (max-width: 840px) { .product-info { padding: 8rem 2rem; } } @media (max-width: 540px) { .product-info { padding: 6rem 1.6rem; } } .product-info-table-wrapper { padding: 4.8rem; background-color: #fff; border-radius: 3.2rem; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); } @media (max-width: 840px) { .product-info-table-wrapper { padding: 3.6rem; } } @media (max-width: 540px) { .product-info-table-wrapper { padding: 2.4rem 1.6rem; } } @media (max-width: 540px) { .product-info-table { display: block; } } .product-info-table > tbody > tr + tr { border-top: 0.1rem solid #BDBDBD; } @media (max-width: 540px) { .product-info-table > tbody { display: block; } } @media (max-width: 540px) { .product-info-table > tbody > tr { display: block; border-top: none; } .product-info-table > tbody > tr + tr { margin-top: 3.2rem; padding-top: 3.2rem; border-top: 0.1rem solid #BDBDBD; } } .product-info-table > tbody > tr > th { width: 17.6rem; padding: 3.2rem 1.6rem 3.2rem 0; font-size: 1.8rem; font-weight: bold; vertical-align: top; } @media (max-width: 840px) { .product-info-table > tbody > tr > th { width: 15rem; font-size: 1.6rem; padding: 2.8rem 1.4rem 2.8rem 0; } } @media (max-width: 540px) { .product-info-table > tbody > tr > th { display: block; width: 100%; font-size: 1.4rem; padding: 0 0 1.6rem 0; } } .product-info-table > tbody > tr:first-child > th { padding: 0 1.6rem 3.2rem 0; } @media (max-width: 840px) { .product-info-table > tbody > tr:first-child > th { padding: 0 1.4rem 2.8rem 0; } } @media (max-width: 540px) { .product-info-table > tbody > tr:first-child > th { padding: 0 0 1.6rem 0; } } .product-info-table > tbody > tr:last-child > th { padding: 3.2rem 1.6rem 0 0; } @media (max-width: 840px) { .product-info-table > tbody > tr:last-child > th { padding: 2.8rem 1.4rem 0 0; } } @media (max-width: 540px) { .product-info-table > tbody > tr:last-child > th { padding: 0 0 1.6rem 0; } } .product-info-table > tbody > tr > td { padding: 3.2rem 0; font-size: 1.8rem; } @media (max-width: 840px) { .product-info-table > tbody > tr > td { font-size: 1.6rem; padding: 2.8rem 0; } } @media (max-width: 540px) { .product-info-table > tbody > tr > td { display: block; font-size: 1.4rem; padding: 0; } } .product-info-table > tbody > tr > td > * + * { margin-top: 3.2rem; } @media (max-width: 840px) { .product-info-table > tbody > tr > td > * + * { margin-top: 2.8rem; } } @media (max-width: 540px) { .product-info-table > tbody > tr > td > * + * { margin-top: 2.4rem; } } .product-info-table > tbody > tr:first-child > td { padding: 0 0 3.2rem 0; } @media (max-width: 840px) { .product-info-table > tbody > tr:first-child > td { padding: 0 0 2.8rem 0; } } @media (max-width: 540px) { .product-info-table > tbody > tr:first-child > td { padding: 0; } } .product-info-inner-table { border: 0.1rem solid #BDBDBD; } .product-info-inner-table > thead > tr > th { padding: 1.6rem; text-align: center; color: #fff; background-color: #212121; border: 0.1rem solid #BDBDBD; } @media (max-width: 840px) { .product-info-inner-table > thead > tr > th { padding: 1.4rem; font-size: 1.5rem; } } @media (max-width: 540px) { .product-info-inner-table > thead > tr > th { padding: 1rem 0.8rem; font-size: 1.3rem; } } .product-info-inner-table > tbody > tr > th { padding: 1.6rem; border: 0.1rem solid #BDBDBD; } @media (max-width: 840px) { .product-info-inner-table > tbody > tr > th { padding: 1.4rem; font-size: 1.5rem; } } @media (max-width: 540px) { .product-info-inner-table > tbody > tr > th { padding: 1rem 0.8rem; font-size: 1.3rem; } } .product-info-inner-table > tbody > tr > td { padding: 1.6rem; border: 0.1rem solid #BDBDBD; } @media (max-width: 840px) { .product-info-inner-table > tbody > tr > td { padding: 1.4rem; font-size: 1.5rem; } } @media (max-width: 540px) { .product-info-inner-table > tbody > tr > td { padding: 1rem 0.8rem; font-size: 1.3rem; } } .product-info-inner-table.small th, .product-info-inner-table.small td, .product-info-inner-table.large tr > th:first-child, .product-info-inner-table.large tr > td:first-child { width: 22.8rem; } @media (max-width: 840px) { .product-info-inner-table.small th, .product-info-inner-table.small td, .product-info-inner-table.large tr > th:first-child, .product-info-inner-table.large tr > td:first-child { width: 20rem; } } @media (max-width: 540px) { .product-info-inner-table.small th, .product-info-inner-table.small td { width: auto; } } @media (max-width: 540px) { .product-info-inner-table.large tr > th:first-child, .product-info-inner-table.large tr > td:first-child { width: 12rem; } } .product-info-caution-title { font-weight: bold; line-height: 1.45; } @media (max-width: 840px) { .product-info-caution-title { font-size: 1.6rem; } } @media (max-width: 540px) { .product-info-caution-title { font-size: 1.4rem; } } .product-info-caution > * + * { margin-top: 3.2rem; } @media (max-width: 840px) { .product-info-caution > * + * { margin-top: 2.8rem; } } @media (max-width: 540px) { .product-info-caution > * + * { margin-top: 2rem; } } @media (max-width: 840px) { .product-info-caution { font-size: 1.5rem; } } @media (max-width: 540px) { .product-info-caution { font-size: 1.3rem; } } .product-info-caution > ol { padding-left: 2.4rem; list-style: auto !important; list-style-type: decimal; } @media (max-width: 540px) { .product-info-caution > ol { padding-left: 2rem; } } .product-info-caution > ol > li { list-style: auto !important; } .product-info-caution > ol > li > ol { margin-top: 0.8rem; list-style-type: lower-alpha; } .product-info-caution > ol > li > ol > li + li { margin-top: 0.8rem; } .product-info-caution > ol > li + li { margin-top: 0.8rem; } .product-info-usage-diagram { width: 21rem; margin-top: 2.4rem; } .product-info-compare-btn { margin-top: 6.4rem; text-align: center; } @media (max-width: 840px) { .product-info-compare-btn { margin-top: 5.6rem; } } @media (max-width: 540px) { .product-info-compare-btn { margin-top: 4.8rem; } } .product-info-compare-btn > .btn-compare { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .product-info-compare-btn > .btn-compare { font-size: 2rem; } } @media (max-width: 840px) { .product-info-compare-btn > .btn-compare { font-size: 1.8rem; } } @media (max-width: 540px) { .product-info-compare-btn > .btn-compare { font-size: 2rem; } } .product-info-compare-btn > .btn-compare { display: inline-block; position: relative; width: 40rem; padding: 2.4rem; background-color: #0021F4; color: #fff; border-radius: 12.8rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .product-info-compare-btn > .btn-compare:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .product-info-compare-btn > .btn-compare > svg { position: absolute; top: 50%; right: 3.2rem; transform: translateY(-50%); width: 2.6rem; } @media (max-width: 840px) { .product-info-compare-btn > .btn-compare > svg { width: 2rem; } } @media (max-width: 540px) { .product-info-compare-btn > .btn-compare { width: 100%; padding: 1.8rem; border-radius: 12.8rem; } .product-info-compare-btn > .btn-compare > svg { right: 3.2rem; } } @media (max-width: 840px) { .product-info-compare-btn > .btn-compare { width: 36rem; font-size: 2.2rem; padding: 1.8rem 3.2rem; } } @media (max-width: 540px) { .product-info-compare-btn > .btn-compare { width: 100%; max-width: 32rem; font-size: 1.8rem; padding: 1.6rem 2.4rem; } } /*------------------------------------- よくあるご質問ページ -------------------------------------*/ .lower-faq { background-color: #F5F5F5; } .faq-group-btn-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8rem 3.2rem; } @media (max-width: 840px) { .faq-group-btn-list { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 2.8rem; } } @media (max-width: 540px) { .faq-group-btn-list { gap: 1.6rem 1.2rem; } } .faq-group-btn > a { font-size: 2.4rem; font-weight: bold; line-height: 1; } @media (max-width: 1140px) { .faq-group-btn > a { font-size: 2rem; } } @media (max-width: 840px) { .faq-group-btn > a { font-size: 1.8rem; } } @media (max-width: 540px) { .faq-group-btn > a { font-size: 2rem; } } .faq-group-btn > a { display: inline-block; position: relative; width: 100%; padding: 1.8rem; background-color: #0021F4; color: #fff; border-radius: 12.8rem; border: 0.4rem solid #fff; text-align: center; cursor: pointer; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .faq-group-btn > a:hover { transform: translateY(-0.2rem); filter: brightness(1.2); } .faq-group-btn > a > svg { position: absolute; top: 50%; right: 3.2rem; transform: translateY(-50%); width: 2.6rem; } @media (max-width: 840px) { .faq-group-btn > a > svg { width: 2rem; } } @media (max-width: 540px) { .faq-group-btn > a { width: 100%; padding: 1.8rem; border-radius: 12.8rem; } .faq-group-btn > a > svg { right: 1.2rem; } } @media (max-width: 840px) { .faq-group-btn > a { padding: 1.6rem; font-size: 1.8rem; } } @media (max-width: 540px) { .faq-group-btn > a { padding: 1.2rem; font-size: 1.4rem; } } .faq-group-btn > a > svg { transform: translateY(-50%) rotate(90deg); } .faq-group-list { margin-top: 8rem; } @media (max-width: 840px) { .faq-group-list { margin-top: 6.4rem; } } @media (max-width: 540px) { .faq-group-list { margin-top: 4.8rem; } } .faq-group-list > li + li { margin-top: 8rem; } @media (max-width: 840px) { .faq-group-list > li + li { margin-top: 6.4rem; } } @media (max-width: 540px) { .faq-group-list > li + li { margin-top: 4.8rem; } } .faq-group-title { margin-bottom: 4.8rem; padding-bottom: 2.4rem; border-bottom: 0.1rem solid #BDBDBD; font-size: 3.2rem; font-weight: bold; } @media (max-width: 840px) { .faq-group-title { margin-bottom: 4rem; padding-bottom: 2rem; font-size: 2.8rem; } } @media (max-width: 540px) { .faq-group-title { margin-bottom: 3.2rem; padding-bottom: 1.6rem; font-size: 2.4rem; } } /*------------------------------------- TV-CMページ -------------------------------------*/ .tv-cm-section { background: linear-gradient(0deg, #98D4FF 0%, #0095FF 100%); } .tv-cm-desc { font-size: 3.2rem; line-height: 1; text-align: center; color: #fff; } @media (max-width: 840px) { .tv-cm-desc { font-size: 2.8rem; } } @media (max-width: 540px) { .tv-cm-desc { font-size: 2rem; } } .tv-cm-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.8rem; margin-top: 4.8rem; } @media (max-width: 840px) { .tv-cm-list { grid-template-columns: 1fr; gap: 3.2rem; margin-top: 4rem; } } @media (max-width: 540px) { .tv-cm-list { gap: 2.4rem; margin-top: 3.2rem; } } .tv-cm-list > li { padding: 3.2rem; background-color: #ffffff; border-radius: 1.6rem; } @media (max-width: 840px) { .tv-cm-list > li { padding: 2.4rem; } } @media (max-width: 540px) { .tv-cm-list > li { padding: 2rem 1.6rem; border-radius: 1.2rem; } } .tv-cm-item-title { font-size: 2.4rem; line-height: 1.45; font-weight: bold; text-align: center; } @media (max-width: 840px) { .tv-cm-item-title { font-size: 2rem; } } @media (max-width: 540px) { .tv-cm-item-title { font-size: 1.8rem; } } .tv-cm iframe { width: 100%; margin-top: 2.4rem; aspect-ratio: 16/9; } @media (max-width: 840px) { .tv-cm iframe { margin-top: 2rem; } } @media (max-width: 540px) { .tv-cm iframe { margin-top: 1.6rem; } } /*------------------------------------- 肩こり豆知識ノートページ -------------------------------------*/ .katakorinote-header { padding-top: 6.4rem; padding-bottom: 6.4rem; } @media (max-width: 840px) { .katakorinote-header { padding-top: 4.8rem; padding-bottom: 4.8rem; } } @media (max-width: 540px) { .katakorinote-header { padding-top: 3.2rem; padding-bottom: 3.2rem; } } .katakorinote-section { padding-top: 6.4rem; padding-bottom: 11.2rem; background: linear-gradient(180deg, #0021F4 0%, #0095FF 100%); } @media (max-width: 840px) { .katakorinote-section { padding-top: 4.8rem; padding-bottom: 8rem; } } @media (max-width: 540px) { .katakorinote-section { padding-top: 3.2rem; padding-bottom: 6rem; } } .katakorinote-desc { width: 100%; max-width: 102.4rem; margin: 0 auto; font-size: 2.4rem; color: #ffffff; } @media (max-width: 840px) { .katakorinote-desc { font-size: 2rem; } } @media (max-width: 540px) { .katakorinote-desc { font-size: 1.6rem; } } .katakorinote-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem 4rem; margin-top: 8rem; } @media (max-width: 1140px) { .katakorinote-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 840px) { .katakorinote-list { margin-top: 6.4rem; } } @media (max-width: 540px) { .katakorinote-list { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 4rem; } } .katakorinote-list > li { box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.15); border-radius: 1.6rem; background-color: #ffffff; } .katakorinote-list > li > a { display: block; padding: 2.4rem; } @media (max-width: 840px) { .katakorinote-list > li > a { padding: 2rem; } } @media (max-width: 540px) { .katakorinote-list > li > a { padding: 1.6rem; } } .katakorinote-item-img { object-fit: cover; border-radius: 0.8rem; } .katakorinote-item-title { margin-top: 1.6rem; font-size: 2.4rem; } @media (max-width: 840px) { .katakorinote-item-title { font-size: 2rem; } } @media (max-width: 540px) { .katakorinote-item-title { margin-top: 1.2rem; font-size: 1.8rem; } } .katakorinote-item-desc { margin-top: 0.8rem; font-size: 1.8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.6; } @media (max-width: 840px) { .katakorinote-item-desc { font-size: 1.6rem; } } @media (max-width: 540px) { .katakorinote-item-desc { font-size: 1.4rem; } } /*------------------------------------- 肩こり豆知識ノートページ_詳細 -------------------------------------*/ .katakorinote-detail-section { background-color: #F5F5F5; } .katakorinote-detail-inner { padding: 6.4rem 6.4rem 3.2rem 6.4rem; background-color: #fff; border-radius: 3.2rem; } @media (max-width: 840px) { .katakorinote-detail-inner { padding: 4.8rem 4rem 2.4rem 4rem; border-radius: 2.4rem; } } @media (max-width: 540px) { .katakorinote-detail-inner { padding: 3.2rem 2.4rem 2rem 2.4rem; border-radius: 1.6rem; } } .katakorinote-detail-title { font-size: 4.8rem; font-weight: bold; color: #212121; } @media (max-width: 840px) { .katakorinote-detail-title { font-size: 3.6rem; } } @media (max-width: 540px) { .katakorinote-detail-title { font-size: 2.8rem; } } .katakorinote-detail-desc { margin-top: 2.4rem; font-size: 1.8rem; } @media (max-width: 840px) { .katakorinote-detail-desc { margin-top: 2rem; font-size: 1.6rem; } } @media (max-width: 540px) { .katakorinote-detail-desc { margin-top: 1.6rem; font-size: 1.4rem; } } .katakorinote-detail-author { margin-top: 2.4rem; } @media (max-width: 840px) { .katakorinote-detail-author { margin-top: 2rem; } } @media (max-width: 540px) { .katakorinote-detail-author { margin-top: 1.6rem; } } .katakorinote-detail-author .author-info { flex: 1; font-size: 1.4rem; } @media (max-width: 840px) { .katakorinote-detail-author .author-info { font-size: 1.3rem; } } @media (max-width: 540px) { .katakorinote-detail-author .author-info { font-size: 1.2rem; } } .katakorinote-detail-toc { margin-top: 4.8rem; padding: 3.2rem; background-color: #F5F5F5; border-radius: 0.8rem; } @media (max-width: 840px) { .katakorinote-detail-toc { margin-top: 4rem; padding: 2.4rem; } } @media (max-width: 540px) { .katakorinote-detail-toc { margin-top: 3.2rem; padding: 2rem 1.6rem; } } .katakorinote-detail-toc .toc-title { font-size: 2.4rem; line-height: 1; font-weight: bold; } @media (max-width: 840px) { .katakorinote-detail-toc .toc-title { font-size: 2rem; } } @media (max-width: 540px) { .katakorinote-detail-toc .toc-title { font-size: 1.8rem; } } .katakorinote-detail-toc .toc-list { margin-top: 2.4rem; } @media (max-width: 840px) { .katakorinote-detail-toc .toc-list { margin-top: 2rem; } } @media (max-width: 540px) { .katakorinote-detail-toc .toc-list { margin-top: 1.6rem; } } .katakorinote-detail-toc .toc-list > li { position: relative; padding-left: 3.2rem; } @media (max-width: 840px) { .katakorinote-detail-toc .toc-list > li { padding-left: 2.8rem; } } @media (max-width: 540px) { .katakorinote-detail-toc .toc-list > li { padding-left: 2.4rem; } } .katakorinote-detail-toc .toc-list > li::before { content: "●"; position: absolute; left: 0; color: #0021F4; font-size: 1.8rem; } @media (max-width: 840px) { .katakorinote-detail-toc .toc-list > li::before { font-size: 1.6rem; } } @media (max-width: 540px) { .katakorinote-detail-toc .toc-list > li::before { font-size: 1.4rem; } } .katakorinote-detail-toc .toc-list > li + li { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 0.1rem dashed #BDBDBD; } @media (max-width: 840px) { .katakorinote-detail-toc .toc-list > li + li { margin-top: 1.4rem; padding-top: 1.4rem; } } @media (max-width: 540px) { .katakorinote-detail-toc .toc-list > li + li { margin-top: 1.2rem; padding-top: 1.2rem; } } .katakorinote-detail-toc .toc-list > li > a { font-size: 1.8rem; font-weight: bold; color: #0021F4; text-decoration: underline; } @media (max-width: 840px) { .katakorinote-detail-toc .toc-list > li > a { font-size: 1.6rem; } } @media (max-width: 540px) { .katakorinote-detail-toc .toc-list > li > a { font-size: 1.4rem; } } .katakorinote-detail-content-wrapper { margin-top: 6.4rem; } @media (max-width: 840px) { .katakorinote-detail-content-wrapper { margin-top: 4.8rem; } } @media (max-width: 540px) { .katakorinote-detail-content-wrapper { margin-top: 3.2rem; } } .katakorinote-detail-content + .katakorinote-detail-content { margin-top: 8rem; } @media (max-width: 840px) { .katakorinote-detail-content + .katakorinote-detail-content { margin-top: 6.4rem; } } @media (max-width: 540px) { .katakorinote-detail-content + .katakorinote-detail-content { margin-top: 4.8rem; } } .katakorinote-detail-content .content-title { padding-left: 2.2rem; font-size: 3.2rem; font-weight: bold; border-left: 0.6rem solid #0021F4; } @media (max-width: 840px) { .katakorinote-detail-content .content-title { padding-left: 1.8rem; font-size: 2.6rem; border-left-width: 0.5rem; } } @media (max-width: 540px) { .katakorinote-detail-content .content-title { padding-left: 1.4rem; font-size: 2rem; border-left-width: 0.4rem; } } .katakorinote-detail-content .content-body { margin-top: 3.2rem; } @media (max-width: 840px) { .katakorinote-detail-content .content-body { margin-top: 2.4rem; } } @media (max-width: 540px) { .katakorinote-detail-content .content-body { margin-top: 2rem; } } .katakorinote-detail-content .content-body > * + * { margin-top: 3.2rem; } .katakorinote-detail-content .content-text { font-size: 1.8rem; } @media (max-width: 840px) { .katakorinote-detail-content .content-text { font-size: 1.6rem; } } @media (max-width: 540px) { .katakorinote-detail-content .content-text { font-size: 1.4rem; } } .katakorinote-detail-content .content-list { padding-left: 2.4rem; list-style-type: decimal; } .katakorinote-detail-content .content-list > li { font-size: 1.8rem; } .katakorinote-detail-content .content-box { padding: 3.2rem; border: 0.2rem solid #0095FF; border-radius: 0.8rem; } @media (max-width: 840px) { .katakorinote-detail-content .content-box { margin-top: 2.4rem; padding: 2.4rem; } } @media (max-width: 540px) { .katakorinote-detail-content .content-box { margin-top: 2rem; padding: 2rem; } } .katakorinote-detail-content .content-box > p { font-size: 1.8rem; color: #0095FF; } @media (max-width: 840px) { .katakorinote-detail-content .content-box > p { font-size: 1.6rem; } } @media (max-width: 540px) { .katakorinote-detail-content .content-box > p { font-size: 1.4rem; } } .katakorinote-detail-content .content-image { width: 100%; border-radius: 0.8rem; overflow: hidden; } @media (max-width: 840px) { .katakorinote-detail-content .content-image { margin-top: 2.4rem; } } @media (max-width: 540px) { .katakorinote-detail-content .content-image { margin-top: 2rem; border-radius: 0.6rem; } } .katakorinote-detail-recommend { background: linear-gradient(180deg, #0021F4 0%, #0095FF 100%); } .katakorinote-detail-recommend-title { color: #fff; } @media (max-width: 840px) { .katakorinote-detail-recommend-title { font-size: 2.6rem; } } @media (max-width: 540px) { .katakorinote-detail-recommend-title { font-size: 2rem; } } .katakorinote-detail-recommend-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; margin-top: 8rem; } @media (max-width: 1140px) { .katakorinote-detail-recommend-list { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; } } @media (max-width: 840px) { .katakorinote-detail-recommend-list { margin-top: 6.4rem; } } @media (max-width: 540px) { .katakorinote-detail-recommend-list { grid-template-columns: 1fr; gap: 2rem; margin-top: 4.8rem; } } .katakorinote-detail-recommend-list > li { border-radius: 1.6rem; box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.15); background-color: #fff; } .katakorinote-detail-recommend-list > li > a { display: block; padding: 2.4rem; } .katakorinote-detail-recommend-image { border-radius: 0.8rem; } @media (max-width: 840px) { .katakorinote-detail-recommend-image { border-radius: 0.6rem; } } @media (max-width: 540px) { .katakorinote-detail-recommend-image { border-radius: 0.6rem; } } .katakorinote-detail-recommend-content { padding: 2.4rem; } .katakorinote-detail-recommend-item-title { margin-top: 1.6rem; font-size: 2.4rem; font-weight: bold; } @media (max-width: 840px) { .katakorinote-detail-recommend-item-title { margin-top: 1.4rem; font-size: 2rem; } } @media (max-width: 540px) { .katakorinote-detail-recommend-item-title { margin-top: 1.2rem; font-size: 1.8rem; } } .katakorinote-detail-recommend-item-desc { margin-top: 0.8rem; font-size: 1.8rem; } @media (max-width: 840px) { .katakorinote-detail-recommend-item-desc { margin-top: 0.6rem; font-size: 1.6rem; } } @media (max-width: 540px) { .katakorinote-detail-recommend-item-desc { margin-top: 0.6rem; font-size: 1.4rem; } } /*# sourceMappingURL=style.css.map */