@charset "UTF-8"; /* ------------------------------ */ /* Fonts */ /* ------------------------------ */ /* Zen Maru Gothic は index.html の で Google Fonts を読み込み */ /* font-family: 'Zen Maru Gothic'（$font-base） */ :root { --color-white: #FFFFFF; --color-txt: #666464; --color-bg: #EEE9E3; --color-pink: #F0908A; --color-red: #E65550; --color-onlineshop: #E65550; --font-size-default: 16px; --font-size-xxsmall: 10px; --font-size-xsmall: 12px; --font-size-msmall: 13px; --font-size-small: 14px; --font-size-medium: 18px; --font-size-large: 20px; --font-size-xlarge: 24px; --font-size-xxlarge: 28px; } /* ------------------------------ */ /* Animation */ /* ------------------------------ */ .a-blur { -webkit-filter: blur(10px); filter: blur(10px); opacity: 0; } .a-blur.is-active { -webkit-animation: blur 0.8s ease forwards; animation: blur 0.8s ease forwards; } .a-fade-up { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } .a-fade-up.is-active { -webkit-animation: fade-up 0.8s ease forwards; animation: fade-up 0.8s ease forwards; } @-webkit-keyframes blur { 0% { opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } 100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); } } @keyframes blur { 0% { opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } 100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); } } @-webkit-keyframes fade-up { 0% { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes fade-up { 0% { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes shake { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 1% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 2% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 3% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 4% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 5% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 6% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 7% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes shake { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 1% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 2% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 3% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 4% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 5% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 6% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 7% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 8% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* ------------------------------ */ /* 3Col */ /* ------------------------------ */ .l-3col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; /* SP（768px未満）は単一カラム。フレックスの max-content 膨張を防ぐ */ } .l-3col .l-3col__main { -ms-flex-negative: 0; flex-shrink: 0; } .l-3col .l-3col__sidebar { position: relative; -ms-flex-negative: 0; flex-shrink: 0; width: 250px; padding-top: 80px; padding-bottom: 40px; /* 最下部スクロール時に追従要素がpgn-footerへ密着しないよう隙間を確保 */ } @media screen and ( min-width: 768px ) { .l-3col .l-3col__main { width: 375px; } } @media screen and (max-width: 955px) { .l-3col .l-3col__sidebar { display: none; } } @media screen and ( max-width: 767px ) { .l-3col { display: block; } .l-3col .l-3col__main { width: 100%; max-width: 100%; min-width: 0; } } /* ------------------------------ */ /* Outer (3カラム背景) */ /* ------------------------------ */ .b-outer { background-color: var(--color-bg); padding: 0; } /* ------------------------------ */ /* Main (中央375pxカラム) */ /* ------------------------------ */ .b-main { width: 100%; font-family: "Zen Maru Gothic", sans-serif; color: var(--color-txt); font-size: 4.2666666667vw; line-height: 1.6; /* 旧 &__inner（ラッパーdiv）を統合。PC幅375pxは .l-3col__main が担う */ background-color: var(--color-white); overflow: hidden; /* p の既定マージンをリセット。.b-note は自前の margin-top を活かすため除外 */ } .b-main a { -webkit-transition: all 0.3s; transition: all 0.3s; color: inherit; } .b-main img { max-width: 100%; height: auto; vertical-align: bottom; } .b-main p:not(.b-note) { margin: 0; } @media screen and ( min-width: 768px ) { .b-main { font-size: 16px; -webkit-box-shadow: 0 0 3px 0 #B6AB9D; box-shadow: 0 0 3px 0 #B6AB9D; } } /* セクション共通の本文テキスト */ .b-lead { font-size: 3.7333333333vw; line-height: 1.9; } @media screen and ( min-width: 768px ) { .b-lead { font-size: 14px; } } /* 注記（※）共通 */ .b-note { display: block; margin-top: 1.3333333333vw; font-family: "Noto Sans JP", sans-serif; font-size: 2.9333333333vw; line-height: 1.6; color: var(--color-txt); } @media screen and ( min-width: 768px ) { .b-note { margin-top: 5px; font-size: 11px; } } /* ------------------------------ */ /* Side Nav (PC左追従ナビ) */ /* ------------------------------ */ .b-side-nav { position: sticky; top: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; list-style: none; margin: 0; padding: 0; } .b-side-nav__item { /* サブ文言（「3ステップ！…」）。Figma=10px */ } .b-side-nav__item__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 8px; padding: 15px 20px 15px 19px; border-radius: 10px; background-color: var(--color-pink); color: var(--color-white); font-family: "Zen Maru Gothic", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; /* 矢印アイコン（白丸＋赤シェブロン）。下向き */ } .b-side-nav__item__link::after { content: ""; -ms-flex-negative: 0; flex-shrink: 0; width: 20px; height: 20px; background: url("../image/icon-arrow-right-white.svg") no-repeat center/contain; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .b-side-nav__item__link:hover { background-color: var(--color-red); } .b-side-nav__item__txt { white-space: nowrap; } .b-side-nav__item__sub { display: block; font-size: 10px; } /* ------------------------------ */ /* Side Decoration (PC右追従) */ /* ロゴ / 製品画像 / QRコード */ /* ※右asideは955px未満で非表示 */ /* ------------------------------ */ .b-side-deco { position: sticky; top: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: "Zen Maru Gothic", sans-serif; color: var(--color-txt); } .b-side-deco img { display: block; } .b-side-deco__logo { width: 100%; height: auto; } .b-side-deco__product { width: 100%; height: auto; margin-top: 4px; } .b-side-deco__qr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; width: 100%; margin-top: 8px; padding: 20px 19px; border-radius: 10px; background-color: #FCFBFB; } .b-side-deco__qr-img { -ms-flex-negative: 0; flex-shrink: 0; width: 90px; height: 90px; } .b-side-deco__qr-en { margin: 0; color: var(--color-pink); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; } .b-side-deco__qr-jp { margin: 1px 0 0; color: var(--color-txt); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; } /* ------------------------------ */ /* ページトップへ戻る（右下固定） */ /* ------------------------------ */ .b-pagetop { position: fixed; right: 16px; bottom: 90px; /* 追従オンラインショップボタン(cb-fixed-onlineshop-banner)との被り回避 */ z-index: 90; display: block; width: 56px; height: 56px; background: url("../image/pagetop.svg") no-repeat center/contain; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; /* ラベル「TOP」はSVGに含まれるため視覚的に隠す */ overflow: hidden; text-indent: 100%; white-space: nowrap; } .b-pagetop:hover { opacity: 0.85; } @media screen and ( min-width: 768px ) { .b-pagetop { right: 20px; bottom: 90px; width: 59px; height: 59px; } } /* ------------------------------ */ /* Wave 区切り */ /* ------------------------------ */ .b-wave { display: block; width: 100%; line-height: 0; } .b-wave img, .b-wave svg { display: block; width: 100%; height: auto; } /* ------------------------------ */ /* CTA ボタン (共通) */ /* ------------------------------ */ .b-cta { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 36px; border-radius: 50px; background-color: var(--color-red); color: var(--color-white); font-family: "Zen Maru Gothic", sans-serif; font-size: 4.2666666667vw; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; white-space: nowrap; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; /* .b-main a { color: inherit } を上書きして文字色を確実に白へ */ /* 矢印アイコン（白丸＋赤シェブロン）。テキストと中央でまとめて配置（gap:10px） */ /* 淡色（ピンク）バリエーション（詳細はこちら 等） */ } .b-main .b-cta { color: var(--color-white); } .b-cta::after { content: ""; -ms-flex-negative: 0; flex-shrink: 0; width: 20px; height: 20px; background: url("../image/icon-arrow-right-white.svg") no-repeat center/contain; } .b-cta:hover { opacity: 0.85; } .b-cta--ghost { background-color: var(--color-pink); } @media screen and ( min-width: 768px ) { .b-cta { font-size: 16px; } } /* ------------------------------ */ /* KV */ /* ------------------------------ */ .b-kv { /* 発売日告知バッジ（2026/7/27発売開始後に削除）。 margin が .b-main p:not(.b-note) のリセット(0,2,1)に負けないよう(0,3,0)で指定 */ } .b-kv__heading { margin: 0; } .b-kv__heading img { display: block; width: 100%; } .b-main .b-kv .b-kv__release { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 4.2666666667vw auto 0; padding: 2.1333333333vw 7.4666666667vw; border: 1.5px solid var(--color-pink); border-radius: 50px; background-color: var(--color-white); color: var(--color-pink); font-size: 4.2666666667vw; font-weight: 700; letter-spacing: 0.05em; line-height: 1.2; } @media screen and ( min-width: 768px ) { .b-main .b-kv .b-kv__release { margin: 16px auto 0; padding: 8px 28px; font-size: 16px; } } .b-kv__note { padding: 3.4666666667vw 5.3333333333vw; font-family: "Noto Sans JP", sans-serif; font-size: 2.9333333333vw; line-height: 1.6; color: var(--color-txt); } @media screen and ( min-width: 768px ) { .b-kv__note { padding: 13px 20px; font-size: 11px; } } /* ------------------------------ */ /* 調乳のお困りごと */ /* ------------------------------ */ /* 蛍光マーカー（共通） */ .b-mark { background: -webkit-gradient(linear, left top, left bottom, color-stop(55%, transparent), color-stop(55%, #F9D3D0)); background: linear-gradient(transparent 55%, #F9D3D0 55%); font-weight: 700; } .b-trouble { padding: 5.3333333333vw; /* 「調乳のお困りごと」の各文字の上に直径5pxの「・」を1個ずつ乗せる */ } .b-trouble__heading { /* 圏点（・）が文字の上に乗るぶん、上方向の余白を確保 */ margin: 2.1333333333vw 0 2.6666666667vw; text-align: center; color: var(--color-pink); font-size: 6.4vw; font-weight: 700; letter-spacing: 0.07em; line-height: 1.2; } .b-trouble__dots { position: relative; /* 1文字の送り幅 = 1em + letter-spacing(0.07em) */ --b-char: 1.07em; } .b-trouble__dots::before { content: ""; position: absolute; left: 0; top: -0.2em; width: 100%; height: 5px; background-image: radial-gradient(circle at center, var(--color-pink) 2.5px, transparent 2.7px); background-size: var(--b-char) 5px; background-position: 0 0; background-repeat: repeat-x; } .b-trouble__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.6666666667vw; margin: 0; padding: 0; list-style: none; } .b-trouble__item { position: relative; background-color: var(--color-white); border: 1px solid #CABFB1; border-radius: 5px; padding: 2.1333333333vw 2.6666666667vw 2.1333333333vw 9.6vw; font-size: 3.7333333333vw; font-weight: 500; line-height: 1.5; } .b-trouble__item::before { content: ""; position: absolute; left: 2.6666666667vw; top: 2.4vw; width: 4.8vw; height: 4.8vw; background: url("../image/icon-check.svg") no-repeat center/contain; } @media screen and ( min-width: 768px ) { .b-trouble { padding: 20px; } .b-trouble__heading { margin: 8px 0 10px; font-size: 24px; } .b-trouble__list { gap: 10px; } .b-trouble__item { padding: 8px 10px 8px 36px; font-size: 14px; } .b-trouble__item::before { left: 10px; top: 9px; width: 18px; height: 18px; } } /* ------------------------------ */ /* Before / After */ /* ------------------------------ */ .b-beforeafter { background-color: var(--color-white); /* 「そんなあなたに」吹き出し */ } .b-beforeafter__block { position: relative; font-size: 0; } .b-beforeafter__block img { display: block; width: 100%; } .b-beforeafter__label { position: absolute; top: 5.3333333333vw; left: 0; padding: 2.1333333333vw 3.2vw; border-radius: 0 20px 20px 0; color: var(--color-white); font-size: 3.7333333333vw; font-weight: 700; line-height: 1; } .b-beforeafter__label--before { background-color: #998C7E; } .b-beforeafter__label--after { background-color: var(--color-pink); } .b-beforeafter__wave { display: block; width: 100%; margin: 0; } .b-beforeafter__wave--top { margin-bottom: -1px; } .b-beforeafter__wave--bottom { margin-top: -1px; } .b-beforeafter__reveal { background-color: var(--color-bg); padding: 0 0 10.6666666667vw; text-align: center; } .b-beforeafter__badge { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 32.8vw; height: 9.6vw; margin: 0 0 0.5333333333vw; padding-bottom: 1.3333333333vw; /* 吹き出しの尾の分だけ文字を上へ */ background: url("../image/balloon-sonna.svg") no-repeat center/contain; color: var(--color-white); font-size: 3.2vw; font-weight: 700; line-height: 1; } .b-beforeafter__heading { margin: 0 0 2.6666666667vw; color: var(--color-txt); font-size: 5.3333333333vw; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; } @media screen and ( min-width: 768px ) { .b-beforeafter__label { top: 20px; padding: 8px 12px; font-size: 14px; } .b-beforeafter__reveal { padding-bottom: 40px; } .b-beforeafter__badge { width: 123px; height: 36px; margin-bottom: 2px; padding-bottom: 5px; font-size: 12px; } .b-beforeafter__heading { margin-bottom: 10px; font-size: 20px; } } /* ------------------------------ */ /* INDEX (目次) */ /* ------------------------------ */ .b-index { /* 旧 __card ラッパーを統合: 外周40px/20pxはmargin化（周囲は .b-main の白背景） */ margin: 10.6666666667vw 5.3333333333vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3.7333333333vw; background-color: var(--color-white); border: 1px solid #CABFB1; border-radius: 10px; padding: 4.2666666667vw 5.3333333333vw; } .b-index__title { margin: 0; color: #CABFB1; font-size: 5.3333333333vw; font-weight: 900; letter-spacing: 0.09em; } .b-index__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 2.6666666667vw; width: 100%; padding-bottom: 1.3333333333vw; border-bottom: 1px dashed #C9BFB1; text-decoration: none; color: var(--color-txt); /* 矢印アイコン（ピンク丸＋白シェブロン）。下向き＝rotate 90° */ } .b-index__item__txt { font-size: 4.2666666667vw; font-weight: 700; line-height: 1.4; } .b-index__item__sub { display: block; font-size: 3.2vw; } .b-index__item::after { content: ""; -ms-flex-negative: 0; flex-shrink: 0; width: 5.3333333333vw; height: 5.3333333333vw; background: url("../image/icon-arrow-right-pink.svg") no-repeat center/contain; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .b-index__item:hover { opacity: 0.7; } @media screen and ( min-width: 768px ) { .b-index { margin: 40px 20px; gap: 14px; padding: 16px 20px; } .b-index__title { font-size: 20px; } .b-index__item { gap: 10px; padding-bottom: 5px; } .b-index__item__txt { font-size: 16px; } .b-index__item__sub { font-size: 12px; } .b-index__item::after { width: 20px; height: 20px; } } /* ------------------------------ */ /* 6つのポイント intro */ /* ------------------------------ */ .b-point-intro { background-color: var(--color-bg); padding-bottom: 5.3333333333vw; /* img直付け（旧: ラッパーdiv内のimg） */ /* 旧 __body ラッパーの幅制約・上余白は __logo / __card へ移譲 */ /* 旧 __body(幅335px)による制限を max-width で維持（横幅の広いSP表示時）。 .b-main img { max-width: 100% } (0,1,1) に勝つため詳細度(0,2,0)で指定 */ } .b-point-intro__kv { display: block; width: 100%; } .b-point-intro .b-point-intro__logo { display: block; width: 58.9333333333vw; max-width: 335px; height: auto; margin: 2.6666666667vw auto 2.6666666667vw; } .b-point-intro__card { width: 335px; max-width: calc(100% - 10.6666666667vw); margin: 0 auto; background-color: var(--color-white); border-radius: 10px; padding: 5.3333333333vw; text-align: left; } .b-point-intro__heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 0 4.2666666667vw; padding-bottom: 4.2666666667vw; border-bottom: 1px dashed #FACD3C; color: var(--color-txt); font-size: 4.8vw; font-weight: 700; line-height: 1.6; white-space: nowrap; } .b-point-intro__num { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; width: 8.8vw; height: 8.8vw; /* 「6」を有機ブロブ(背景)の上下中央へ。padding-bottomで文字だけ上に寄せる */ padding-bottom: 1.0666666667vw; margin: 0 0.5333333333vw; background: url("../image/point-num-bg.svg") no-repeat center/contain; color: var(--color-white); font-size: 6.5vw; font-weight: 900; line-height: 1; } .b-point-intro__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.6666666667vw; margin: 0; padding: 0; list-style: none; } .b-point-intro__list li { position: relative; padding-left: 4.8vw; font-size: 3.7333333333vw; font-weight: 500; line-height: 1.5; } .b-point-intro__list li::before { content: ""; position: absolute; left: 0; top: 2.6666666667vw; width: 2.1333333333vw; height: 2.1333333333vw; border-radius: 50%; background-color: var(--color-pink); } .b-point-intro__list .em { color: var(--color-pink); font-size: 4.8vw; font-weight: 700; } .b-point-intro__list .sm { font-size: 3.2vw; } @media screen and ( min-width: 768px ) { .b-point-intro { padding-bottom: 20px; /* ベースルールと同じ詳細度(0,2,0)で上書き */ } .b-point-intro .b-point-intro__logo { width: 221px; margin: 10px auto 10px; } .b-point-intro__card { max-width: calc(100% - 40px); padding: 20px; } .b-point-intro__heading { margin-bottom: 16px; padding-bottom: 16px; font-size: 18px; } .b-point-intro__num { width: 33px; height: 33px; padding-bottom: 4px; margin: 0 2px; font-size: 28px; } .b-point-intro__list { gap: 10px; } .b-point-intro__list li { padding-left: 18px; font-size: 14px; } .b-point-intro__list li::before { top: 10px; width: 8px; height: 8px; } .b-point-intro__list .em { font-size: 18px; } .b-point-intro__list .sm { font-size: 12px; } } /* ------------------------------ */ /* POINT 01-06 */ /* ------------------------------ */ .b-point { padding: 5.3333333333vw; /* 旧 .b-point-wrap の下余白20pxを最終POINTへ統合（白背景は .b-main と重複のため廃止） */ /* 見出し（バッジ + タイトル）。バッジが上に重なり、タイトルはベージュのピル */ /* 本文 */ /* 画像（Figma同様 角丸10px） */ /* 画像直後の注記は間隔を広めに（POINT03: point03-b2 → ※寝室に置く際は…） */ } .b-point + .b-point { padding-top: 5.3333333333vw; } .b-point--last { padding-bottom: 10.6666666667vw; } .b-point__head { position: relative; margin-bottom: 5.3333333333vw; padding-top: 6.4vw; text-align: center; } .b-point__badge { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 12.8vw; height: 12.8vw; z-index: 1; } .b-point__badge img { display: block; width: 100%; height: 100%; } .b-point__badge__txt { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8vw; color: var(--color-white); line-height: 1; } .b-point__badge__label { font-size: 2.6666666667vw; font-weight: 900; letter-spacing: 0.09em; } .b-point__badge__num { font-size: 4.8vw; font-weight: 900; letter-spacing: 0.09em; } .b-point__title { margin: 0; background-color: var(--color-bg); border-radius: 70px; padding: 7.4666666667vw 5.3333333333vw 3.7333333333vw; color: var(--color-txt); font-size: 4.8vw; font-weight: 700; line-height: 1.5; text-align: center; } .b-point__title .em { color: var(--color-pink); } .b-point__title .sm { font-size: 3.2vw; } .b-point__title .sub { font-size: 3.7333333333vw; } .b-point__body { margin: 0 0 4.2666666667vw; font-family: "Noto Sans JP", sans-serif; font-size: 4.2666666667vw; line-height: 1.9; } .b-point__body b { font-weight: 700; } .b-point__body .em { color: var(--color-pink); font-weight: 700; } .b-point__body .em--red { color: var(--color-red); } .b-point__fig { margin: 4.2666666667vw 0 0; } .b-point__fig img { display: block; width: 100%; border-radius: 10px; } .b-point .b-note { margin-bottom: 2.1333333333vw; } .b-point__fig + .b-note { margin-top: 5.3333333333vw; } @media screen and ( min-width: 768px ) { .b-point { padding: 20px; } .b-point + .b-point { padding-top: 20px; } .b-point--last { padding-bottom: 40px; } .b-point__head { margin-bottom: 20px; padding-top: 24px; } .b-point__badge { width: 48px; height: 48px; } .b-point__badge__txt { gap: 3px; } .b-point__badge__label { font-size: 10px; } .b-point__badge__num { font-size: 18px; } .b-point__title { margin: 0; padding: 28px 20px 14px; font-size: 18px; } .b-point__title .sm { font-size: 12px; } .b-point__title .sub { font-size: 14px; } .b-point__body { margin-bottom: 16px; font-size: 16px; } .b-point__fig { margin-top: 16px; } .b-point .b-note { margin-bottom: 8px; } .b-point__fig + .b-note { margin-top: 20px; } } /* ------------------------------ */ /* 使い方 3ステップ */ /* ------------------------------ */ .b-howto { background-color: var(--color-white); /* 旧 __head ラッパー廃止: fit-content + margin auto で中央寄せ。 margin が .b-main p:not(.b-note) のリセット(詳細度0,2,1)に負けないよう(0,3,0)で指定 */ /* カード共通 */ /* 事前準備（旧 __row ラッパーを grid 化で吸収: ラベル行 + 画像/テキスト行） */ /* STEP カード */ /* 矢印（上のSTEPカードに少し重ね、先端は結果バナーに接する） */ /* 結果バナー */ /* トレイ使い分け */ } .b-howto__inner { background-color: #FDF1F1; padding: 5.3333333333vw 5.3333333333vw 10.6666666667vw; margin-top: -1px; } .b-main .b-howto .b-howto__badge { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; padding: 2.1333333333vw 5.3333333333vw; border-radius: 50px; background-color: var(--color-pink); color: var(--color-white); font-size: 3.7333333333vw; font-weight: 700; line-height: 1.2; } .b-howto__title { margin: 0 0 5.3333333333vw; text-align: center; color: var(--color-txt); font-size: 5.3333333333vw; font-weight: 700; } .b-howto__prep, .b-howto__tray { background-color: #FEF9F9; border-radius: 10px; padding: 5.3333333333vw; margin-bottom: 5.3333333333vw; } .b-howto__prep { display: grid; grid-template-columns: auto 1fr; -webkit-column-gap: 2.6666666667vw; -moz-column-gap: 2.6666666667vw; column-gap: 2.6666666667vw; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .b-howto__prep__label { grid-column: 1/-1; justify-self: start; margin-bottom: 1.3333333333vw; padding: 2.1333333333vw 5.3333333333vw; border-radius: 50px; background-color: var(--color-white); border: 1px solid #C9BFB1; color: #A9A197; font-size: 3.2vw; font-weight: 700; line-height: 1.2; } .b-howto__prep__img { width: 34.4vw; height: auto; border-radius: 10px; } .b-howto__prep__txt { font-family: "Noto Sans JP", sans-serif; font-size: 3.2vw; line-height: 1.8; } .b-howto__steps { background-color: var(--color-white); border: 2px solid var(--color-pink); border-radius: 10px; padding: 5.3333333333vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.3333333333vw; } .b-howto__step { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.3333333333vw; } .b-howto__step + .b-howto__step { margin-top: 1.3333333333vw; } .b-howto__step__badge { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: start; align-self: flex-start; gap: 1.0666666667vw; padding: 1.6vw 4.2666666667vw; border-radius: 50px; background-color: var(--color-pink); color: var(--color-white); font-size: 3.7333333333vw; font-weight: 700; line-height: 1; } .b-howto__step__badge b { font-size: 5.0666666667vw; font-weight: 700; } .b-howto__step__txt { width: 100%; font-family: "Noto Sans JP", sans-serif; font-size: 3.7333333333vw; line-height: 1.8; } .b-howto__step__img { width: 50.1333333333vw; height: auto; border-radius: 10px; } .b-howto__arrow { position: relative; display: block; width: 12.8vw; height: auto; margin: -4vw auto 0; } .b-howto__result { background-color: #F4ADA9; border-radius: 10px; padding: 5.3333333333vw; margin-bottom: 2.6666666667vw; /* 白い帯（267px・中央寄せ・固定高でテキスト上下中央） */ /* テキスト帯と画像の間 10px（figureに付与：.b-main p リセットの影響を受けない） */ } .b-howto__result__copy { margin: 0; color: var(--color-txt); font-weight: 700; text-align: center; } .b-howto__result__line { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 71.2vw; max-width: 100%; height: 7.7333333333vw; margin: 0 auto; background-color: var(--color-white); border-radius: 3px; font-size: 3.2vw; line-height: 1; white-space: nowrap; } .b-howto__result__line + .b-howto__result__line { margin-top: 0.8vw; } .b-howto__result__line sup { font-size: 2.6666666667vw; } .b-howto__result__frac { position: relative; top: -1.5px; font-size: 6.9333333333vw; margin: 0 0.5333333333vw; } .b-howto__result__big { font-size: 4.5333333333vw; } .b-howto__result__fig { margin: 2.6666666667vw 0 0; } .b-howto__result__fig img { display: block; width: 78.6666666667vw; max-width: 100%; margin: 0 auto; border-radius: 10px; } .b-howto__result__note { margin: 1.0666666667vw 0 0; font-family: "Noto Sans JP", sans-serif; font-size: 2.6666666667vw; text-align: right; } .b-howto .b-cta { margin-bottom: 5.3333333333vw; } .b-howto__tray { text-align: center; margin-bottom: 0; } .b-howto__tray__title { margin: 0 0 1.3333333333vw; color: var(--color-txt); font-size: 3.7333333333vw; font-weight: 700; line-height: 1.5; } .b-howto__tray__txt { font-family: "Noto Sans JP", sans-serif; font-size: 3.2vw; line-height: 1.8; margin-bottom: 2.6666666667vw; text-align: left; } .b-howto__tray__fig { margin: 0; } .b-howto__tray__fig img { display: block; width: 100%; border-radius: 10px; } @media screen and ( min-width: 768px ) { .b-howto { /* ベースルールと同じ詳細度(0,3,0)で上書き */ } .b-howto__inner { padding: 20px 20px 40px; } .b-main .b-howto .b-howto__badge { padding: 8px 20px; font-size: 14px; } .b-howto__title { font-size: 20px; margin-bottom: 20px; } .b-howto__prep, .b-howto__tray { padding: 20px; margin-bottom: 20px; } .b-howto__prep { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } .b-howto__prep__label { margin-bottom: 5px; padding: 8px 20px; font-size: 12px; } .b-howto__prep__img { width: 129px; } .b-howto__prep__txt { font-size: 12px; } .b-howto__steps { padding: 20px; gap: 5px; } .b-howto__step { gap: 5px; } .b-howto__step + .b-howto__step { margin-top: 5px; } .b-howto__step__badge { gap: 4px; padding: 6px 16px; font-size: 14px; } .b-howto__step__badge b { font-size: 19px; } .b-howto__step__txt { font-size: 14px; } .b-howto__step__img { width: 188px; } .b-howto__arrow { width: 48px; margin: -15px auto 0; } .b-howto__result { padding: 20px; margin-bottom: 10px; } .b-howto__result__copy { margin: 0; } .b-howto__result__line { width: 267px; height: 29px; font-size: 12px; } .b-howto__result__line sup { font-size: 10px; } .b-howto__result__line + .b-howto__result__line { margin-top: 3px; } .b-howto__result__frac { top: -1.5px; margin: 0 2px; font-size: 26px; } .b-howto__result__big { font-size: 17px; } .b-howto__result__fig { margin-top: 10px; } .b-howto__result__fig img { width: 295px; } .b-howto__result__note { margin: 4px 0 0; font-size: 10px; } .b-howto .b-cta { margin-bottom: 20px; } .b-howto__tray__title { margin: 0 0 5px; font-size: 14px; } .b-howto__tray__txt { font-size: 12px; margin-bottom: 10px; } } /* ------------------------------ */ /* 粉ミルクの調乳方法 */ /* ------------------------------ */ .b-milk { background-color: var(--color-white); padding: 5.3333333333vw; /* 旧 __head ラッパー廃止: ラベルは自身のflexで中央寄せ済み、下余白はタイトルへ */ /* 旧 __body ラッパーの本文スタイルを li へ統合（番号は absolute + 独自font-sizeで影響なし） */ } .b-milk__label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 2.6666666667vw; margin: 0 0 1.3333333333vw; color: var(--color-pink); font-size: 3.7333333333vw; font-weight: 700; } .b-milk__bracket { display: inline-block; width: 1.5px; height: 3.2vw; background-color: var(--color-pink); } .b-milk__bracket--l { -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .b-milk__bracket--r { -webkit-transform: rotate(20deg); transform: rotate(20deg); } .b-milk__title { margin: 0 0 2.6666666667vw; text-align: center; color: var(--color-txt); font-size: 5.3333333333vw; font-weight: 700; } .b-milk__list { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2.6666666667vw; } .b-milk__item { position: relative; padding-left: 5.3333333333vw; font-family: "Noto Sans JP", sans-serif; font-size: 3.2vw; line-height: 1.7; color: var(--color-txt); } .b-milk__item p { margin: 0; } .b-milk__item .b-note { margin-top: 1.3333333333vw; } .b-milk__num { position: absolute; left: 0; top: 0.5333333333vw; color: var(--color-txt); font-family: "Zen Maru Gothic", sans-serif; /* li に $font-body を統合したため明示（旧: .b-main から継承） */ font-size: 4.2666666667vw; font-weight: 700; line-height: 1; } .b-milk__fig { margin: 2.1333333333vw 0 0; } .b-milk__fig img { display: block; width: 70.6666666667vw; max-width: 100%; } @media screen and ( min-width: 768px ) { .b-milk { padding: 20px; } .b-milk__label { gap: 10px; margin: 0 0 5px; font-size: 14px; } .b-milk__bracket { height: 12px; } .b-milk__title { font-size: 20px; margin-bottom: 10px; } .b-milk__list { gap: 10px; } .b-milk__item { padding-left: 20px; font-size: 12px; } .b-milk__item .b-note { margin-top: 5px; } .b-milk__num { top: 2px; font-size: 16px; } .b-milk__fig { margin-top: 8px; } .b-milk__fig img { width: 265px; } } /* ------------------------------ */ /* 出産お祝いギフト */ /* ------------------------------ */ .b-gift { position: relative; background-color: var(--color-white); /* lead下の余白はfigureに付与（.b-main p リセットの影響を受けないため） */ } .b-gift__inner { background-color: var(--color-bg); padding: 2.6666666667vw 5.3333333333vw 5.3333333333vw; margin: -1px 0; text-align: center; } .b-gift__title { margin: 0 0 2.6666666667vw; color: var(--color-txt); font-size: 5.3333333333vw; font-weight: 700; } .b-gift__lead { margin: 0; font-family: "Noto Sans JP", sans-serif; font-size: 4.2666666667vw; line-height: 1.9; text-align: left; } .b-gift__fig { margin: 2.6666666667vw 0; } .b-gift__fig img { display: block; width: 100%; border-radius: 10px; } @media screen and ( min-width: 768px ) { .b-gift__inner { padding: 10px 20px 20px; } .b-gift__title { font-size: 20px; margin-bottom: 10px; } .b-gift__lead { font-size: 16px; } .b-gift__fig { margin: 10px 0; } } /* ------------------------------ */ /* メッセージ */ /* ------------------------------ */ .b-message { background-color: var(--color-white); padding-top: 5.3333333333vw; /* 旧 __txt ラッパー(div)を p 直付けに統合。 margin: 0 auto が .b-main p:not(.b-note) のリセット(詳細度0,2,1)に負けないよう 詳細度(0,3,0)のセレクタで指定 */ } .b-main .b-message .b-message__txt { width: 335px; max-width: calc(100% - 10.6666666667vw); margin: 0 auto; text-align: center; color: var(--color-txt); font-size: 3.7333333333vw; font-weight: 700; line-height: 2; /* 罫線（ノート風）: 1行 = 2em ごとに下線 */ background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2em - 1px), #C9BFB1 calc(2em - 1px), #C9BFB1 2em); } .b-message__illust { margin: 2.6666666667vw 0 0; } .b-message__illust img { display: block; width: 100%; } @media screen and ( min-width: 768px ) { .b-message { padding-top: 20px; } .b-main .b-message .b-message__txt { max-width: calc(100% - 40px); font-size: 14px; } .b-message__illust { margin-top: 10px; } } /* ------------------------------ */ /* 商品スペック */ /* ------------------------------ */ .b-spec { background-color: var(--color-white); padding: 10.6666666667vw 5.3333333333vw; } .b-spec__head { margin: 0 0 4.2666666667vw; color: var(--color-txt); font-size: 5.3333333333vw; font-weight: 700; } .b-spec__table { margin: 0 0 5.3333333333vw; font-family: "Noto Sans JP", sans-serif; } .b-spec__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 2.6666666667vw 0; border-bottom: 1px solid #E3DDD4; font-size: 3.7333333333vw; line-height: 1.5; } .b-spec__row:first-child { border-top: 1px solid #E3DDD4; } .b-spec__row dt { -ms-flex-negative: 0; flex-shrink: 0; width: 25.6vw; font-weight: 700; color: var(--color-txt); } .b-spec__row dd { margin: 0; color: var(--color-txt); } .b-spec .b-cta { margin-bottom: 2.6666666667vw; } .b-spec .b-cta:last-child { margin-bottom: 0; } @media screen and ( min-width: 768px ) { .b-spec { padding: 40px 20px; } .b-spec__head { margin-bottom: 16px; font-size: 20px; } .b-spec__table { margin-bottom: 20px; } .b-spec__row { padding: 10px 0; font-size: 14px; } .b-spec__row dt { width: 96px; } .b-spec .b-cta { margin-bottom: 10px; } } /* ------------------------------ */ /* 調乳に関するQ&A */ /* ------------------------------ */ .b-qa { background-color: var(--color-white); padding: 10.6666666667vw 5.3333333333vw; /* Q と A の間の区切り線 */ } .b-qa__head { margin: 0 0 2.6666666667vw; color: var(--color-txt); font-size: 5.3333333333vw; font-weight: 700; } .b-qa__item { background-color: var(--color-white); border: 1px solid #CABFB1; border-radius: 10px; padding: 5.3333333333vw; margin-bottom: 2.6666666667vw; } .b-qa__item:last-child { margin-bottom: 0; } .b-qa__q, .b-qa__a { position: relative; padding-left: 8.2666666667vw; } .b-qa__q p, .b-qa__a p { margin: 0; font-size: 3.7333333333vw; line-height: 1.6; color: var(--color-txt); } .b-qa__q p { font-weight: 700; } .b-qa__a { margin-top: 3.2vw; padding-top: 3.2vw; border-top: 1px dashed #C9BFB1; } .b-qa__a p { font-weight: 400; } .b-qa__mark { position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 5.8666666667vw; height: 5.8666666667vw; border-radius: 50%; background-color: var(--color-pink); color: var(--color-white); font-size: 3.2vw; font-weight: 700; line-height: 1; } .b-qa__a .b-qa__mark { top: 3.2vw; } .b-qa__fig { margin: 2.6666666667vw 0 0; text-align: center; } .b-qa__fig img { display: inline-block; width: 50.6666666667vw; max-width: 100%; } .b-qa .b-cta { margin-top: 2.6666666667vw; font-size: 3.7333333333vw; } @media screen and ( min-width: 768px ) { .b-qa { padding: 40px 20px; } .b-qa__head { margin-bottom: 10px; font-size: 20px; } .b-qa__item { padding: 20px; margin-bottom: 10px; } .b-qa__q, .b-qa__a { padding-left: 31px; } .b-qa__q p, .b-qa__a p { font-size: 14px; } .b-qa__a { margin-top: 12px; padding-top: 12px; } .b-qa__mark { width: 22px; height: 22px; font-size: 12px; } .b-qa__a .b-qa__mark { top: 12px; } .b-qa__fig { margin-top: 10px; } .b-qa__fig img { width: 190px; } .b-qa .b-cta { margin-top: 10px; font-size: 14px; } } /* ------------------------------ */ /* バナー設置エリア（pgadm連携） */ /* ------------------------------ */ .b-banners { /* 他セクションと同じ左右余白（バナーがコンテンツ幅いっぱいに広がるのを防ぐ）+ 下余白 */ padding: 0 5.3333333333vw 5.3333333333vw; } @media screen and ( min-width: 768px ) { .b-banners { padding: 0 20px 20px; } } /* ------------------------------ */ /* Online Shop Banner */ /* ------------------------------ */ .cb-fixed-onlineshop-banner { position: fixed; bottom: 20px; right: 20px; display: block; color: #fff !important; text-align: center; font-weight: bold; background: #f66152; padding: 16px 14px; font-size: 16px; z-index: 20; } .cb-fixed-onlineshop-banner__left { right: initial; left: 20px; } html { scroll-behavior: smooth; scroll-padding-top: 30px; }