/* =========================================================
LP パック — 広告流入専用ページの土台
・テンプレート page-lp.html（ヘッダー/フッター無し・簡易フッターのみ）のページだけに読まれる
・スマホ向けの画像を PC でも使い回すため、本体は max-width を固定して中央に置く
・モバイルファースト記述（base = スマホ、min-width で PC を上書き）
・使い方と寸法の測り方は wp-starter/docs/LP-PATTERNS.md
案件ごとに変えるのは次の2か所だけ：
1. 下の「1. 案件ごとの設定」の変数
2. いちばん下の「10. 案件ごとのボタン位置」
========================================================= */
/* =========================================================
1. 案件ごとの設定（ここだけ書き換える）
========================================================= */
:root {
/* 本体の横幅。スマホ用画像の実寸に合わせる（例: 画像が 750px なら 750px、1290px なら 645px） */
--lp-width: 750px;
/* 色 */
--lp-bg: #fefefe; /* 本体の背景 */
--lp-outer-bg: #f5f5f5; /* PC で本体の外側に出る余白の色 */
--lp-text: #474747; /* 本文の文字色 */
--lp-heading: #2a2a2a; /* 見出しの文字色 */
--lp-accent: #006837; /* ボタン・強調の色 */
--lp-muted: #737373; /* 補足の文字色 */
--lp-border: #e3e8e4; /* 罫線の色 */
/* よくあるご質問・簡易フッターの背景 */
--lp-soft-bg: #f7f7f7;
--lp-soft-line: #ececec;
/* 本文のフォント */
--lp-font: "YakuHanJP", "Hiragino Sans", "Noto Sans JP", sans-serif;
--lp-font-serif: "YakuHanMP", "Noto Serif JP", serif;
}
/* =========================================================
2. リセット（最小限）
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
height: auto;
}
body {
font-family: var(--lp-font);
color: var(--lp-text);
background: var(--lp-bg);
}
/* =========================================================
3. 本体カラム
========================================================= */
.lp-main {
width: 100%;
background: var(--lp-bg);
}
.lp-container {
width: 100%;
margin: 0 auto;
background: var(--lp-bg);
overflow: hidden;
}
/* PC: 横幅を固定して中央寄せ。外側は少し暗くして本体の枠を見せる */
@media (min-width: 751px) {
body,
.lp-main {
background: var(--lp-outer-bg);
}
.lp-container {
max-width: var(--lp-width);
}
}
/* =========================================================
4. 画像セクション（.lp-sec）
---------------------------------------------------------
LP の本体。画像を縦に隙間なく積み、その上にボタンを重ねる。
ボタンの位置は --cta-x / --cta-y / --cta-w（ボタンの中心座標と幅。親画像に対する %）。
値は「10. 案件ごとのボタン位置」にまとめて書く。
font-size:0 は、画像の下に行ボックスのすき間が出ないようにするため。
========================================================= */
.lp-sec {
position: relative;
font-size: 0;
line-height: 0;
}
.lp-sec__img {
display: block;
width: 100%;
}
.lp-sec__cta,
.lp-sec__tel {
position: absolute;
left: var(--cta-x, 50%);
top: var(--cta-y, 50%);
width: var(--cta-w, 80%);
transform: translate(-50%, -50%);
}
.lp-sec__cta-img,
.lp-sec__tel-img {
display: block;
width: 100%;
}
.lp-sec__cta {
transition: transform 0.15s ease, filter 0.15s ease;
}
.lp-sec__cta:hover {
transform: translate(-50%, -50%) scale(1.03);
filter: brightness(1.05);
}
.lp-sec__cta:active {
transform: translate(-50%, -50%) scale(0.99);
}
/* 画像に焼き込まれた電話番号の上に、透明のタップ領域を重ねる場合は
--cta-h で高さも指定する（番号の枠より上下左右 8px ほど広めに取る） */
.lp-sec__tel {
height: var(--cta-h, auto);
cursor: pointer;
}
/* 画像の下端にある無地の余白を切り落としてボタン下の空きを詰めたいとき、
セクションに --lp-crop（画像の 横 / 切り落とし後の高さ）を指定する
例: 750×995 の画像の下 15px を切る → --lp-crop: 750 / 980; */
.lp-sec--crop {
aspect-ratio: var(--lp-crop);
overflow: hidden;
}
/* =========================================================
5. 画像に重ねない CTA 帯（.lp-cta-band）
---------------------------------------------------------
完成見本に無い CTA を途中に差し込みたいときに使う。
========================================================= */
.lp-cta-band {
background: var(--lp-soft-bg);
padding: 1.75rem 0;
text-align: center;
}
.lp-cta-band__btn {
display: inline-block;
width: var(--band-w, 80%);
transition: transform 0.15s ease, filter 0.15s ease;
}
.lp-cta-band__btn-img {
width: 100%;
}
.lp-cta-band__btn:hover {
transform: scale(1.03);
filter: brightness(1.05);
}
.lp-cta-band__btn:active {
transform: scale(0.99);
}
/* =========================================================
6. CTA のモーション（押せることを伝える）
---------------------------------------------------------
2.8 秒に一度だけ拍動する。 の hover / active の transform と
競合しないよう、内側の ![]()
に掛ける。
========================================================= */
@keyframes lp-cta-pulse {
0%, 84%, 100% { transform: scale(1); }
89% { transform: scale(1.03); }
94% { transform: scale(0.995); }
}
.lp-sec__cta-img,
.lp-cta-band__btn-img,
.lp-qa__btn-img {
animation: lp-cta-pulse 2.8s ease-in-out infinite;
}
/* =========================================================
7. CTA の光沢（左から右へ光が流れる）
---------------------------------------------------------
ボタン画像のうち「色が付いた部分」と同じ位置・形で光を切り抜き、
その中を光の帯が左から右へ抜ける。
位置は --cta-shine（上 右 下 左。ボタン画像に対する %）で指定する。
※ ボタン画像そのものを mask-image で型抜きする方式は使わない。
ブラウザや画像の配信元によって読み込みが止められ、光が丸ごと消える。
（ライザで実際に発生。linear-gradient と inset だけで描くこと）
4 秒に1回、最初の約 1.1 秒（周期の 0〜28%）で流す。
拍動（2.8 秒周期）とは周期が違うのでときどき同時に起きるが、
拍動は 3% の拡大なので光がボタンからはみ出すことはない。
========================================================= */
@keyframes lp-cta-shine {
0% { background-position: 100% 0; }
28%, 100% { background-position: 0% 0; }
}
.lp-sec__cta::after,
.lp-cta-band__btn::after,
.lp-qa__btn::after {
content: "";
position: absolute;
inset: var(--cta-shine, 0);
pointer-events: none;
border-radius: var(--cta-shine-radius, 999px);
background-image: linear-gradient(110deg,
rgba(254, 254, 254, 0) 38%,
rgba(254, 254, 254, 0.45) 46%,
rgba(254, 254, 254, 0.95) 50%,
rgba(254, 254, 254, 0.45) 54%,
rgba(254, 254, 254, 0) 62%);
background-position: 100% 0;
background-repeat: no-repeat;
background-size: 250% 100%;
animation: lp-cta-shine 4s linear infinite;
}
/* 光沢は position: relative な親が要る（.lp-sec__cta は absolute なので不要） */
.lp-cta-band__btn,
.lp-qa__btn {
position: relative;
}
/* 端末側で「動きを減らす」が有効なときは止める */
@media (prefers-reduced-motion: reduce) {
.lp-sec__cta-img,
.lp-cta-band__btn-img,
.lp-qa__btn-img {
animation: none;
}
.lp-sec__cta::after,
.lp-cta-band__btn::after,
.lp-qa__btn::after {
display: none;
}
}
/* =========================================================
8. よくあるご質問（.lp-qa）
---------------------------------------------------------
画像ではなく文字で組む。読み上げと検索に拾わせるため。
親が font-size:0 のことがあるので、ここで文字サイズを戻す。
寸法は「PC（--lp-width）で完成見本どおり・スマホでは読みやすさ優先」になるよう
min() と clamp() で上限と下限を付けている。
========================================================= */
.lp-qa {
background: var(--lp-soft-bg);
padding: min(5.867vw, 44px) 0 min(4vw, 30px);
font-family: var(--lp-font);
font-size: 1rem;
line-height: 1.64;
color: var(--lp-heading);
}
.lp-qa__title {
margin: 0 0 min(6.4vw, 48px);
font-size: clamp(1.75rem, 8.8vw, 4.125rem);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.08em;
text-align: center;
color: var(--lp-accent);
}
.lp-qa__list {
padding: 0 min(3.333vw, 25px);
}
.lp-qa__item {
padding: min(3.867vw, 29px) min(3.6vw, 27px) min(5.067vw, 38px);
background: var(--lp-bg);
border-radius: min(1.6vw, 12px);
}
.lp-qa__item + .lp-qa__item {
margin-top: min(4.267vw, 32px);
}
.lp-qa__q {
display: flex;
align-items: center;
gap: min(1.467vw, 11px);
margin: 0;
padding-bottom: min(1.333vw, 10px);
border-bottom: 2px solid var(--lp-accent);
font-size: clamp(1.125rem, 4.8vw, 2.25rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: 0.05em;
color: var(--lp-heading);
}
/* 質問文のラッパー。
.lp-qa__q は flex なので、これが無いと中の .lp-qa__phrase が
1つずつ別の flex 項目になって横に散らばる。必ず入れる。 */
.lp-qa__q-text {
display: inline;
}
/* 改行位置を自分で決めたいときに で囲む。
inline-block なので、この単位より内側では改行されない。 */
.lp-qa__phrase {
display: inline-block;
}
.lp-qa__mark {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: min(8.267vw, 62px);
height: min(8.267vw, 62px);
border-radius: 50%;
background: var(--lp-accent);
color: var(--lp-bg);
font-family: var(--lp-font-serif);
font-size: min(5.6vw, 42px);
font-weight: 500;
line-height: 1;
}
.lp-qa__a {
padding: min(1.867vw, 14px) min(1.067vw, 8px) 0;
font-size: clamp(1rem, 3.867vw, 1.8125rem);
font-weight: 400;
line-height: 1.64;
letter-spacing: 0.08em;
}
.lp-qa__text {
margin: 0;
}
/* 電話番号（大きく出してタップで発信） */
.lp-qa__tel {
color: var(--lp-heading);
font-size: clamp(1.625rem, 6.4vw, 3rem);
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.05em;
text-decoration: none;
}
/* よくあるご質問の最後に置く CTA */
.lp-qa__btn {
display: block;
width: var(--qa-btn-w, 90%);
margin: min(4.267vw, 32px) auto 0;
transition: transform 0.15s ease, filter 0.15s ease;
}
.lp-qa__btn-img {
width: 100%;
}
.lp-qa__btn:hover {
transform: scale(1.03);
filter: brightness(1.05);
}
.lp-qa__btn:active {
transform: scale(0.99);
}
/* =========================================================
9. 法定ページ（.lp-legal）
---------------------------------------------------------
特商法（law）・プライバシー（privacy-policy）を読みやすく組む。
ネイティブブロック（wp:heading / wp:paragraph / wp:group）で組むため、
WordPress が当てる既定の余白と文字サイズを打ち消すよう
margin と font-size を明示している。
========================================================= */
.lp-legal {
max-width: 720px;
margin: 0 auto;
padding: 3rem 1.25rem 4rem;
font-size: 1rem;
line-height: 1.9;
color: var(--lp-text);
}
.lp-legal__title {
font-family: var(--lp-font-serif);
font-size: 1.6rem;
font-weight: 600;
text-align: center;
color: var(--lp-heading);
margin: 0 0 2rem;
}
.lp-legal__lead {
margin: 0 0 1.5rem;
}
/* 特商法：定義リスト風の行 */
.lp-legal__dl {
margin: 0;
}
/* ブロックで組むと WordPress が行の間に余白を入れるため、margin は 0 に固定する */
.lp-legal__row {
margin: 0;
padding: 1rem 0;
border-bottom: 1px solid var(--lp-border);
}
.lp-legal__row:first-child {
border-top: 1px solid var(--lp-border);
}
/* 見出しブロック（h3）で組んでも大きくならないよう、文字の大きさと行間を明示する */
.lp-legal__dt {
font-size: 1rem;
line-height: 1.9;
font-weight: 700;
color: var(--lp-heading);
margin: 0 0 0.35rem;
}
.lp-legal__dd,
.lp-legal__text {
margin: 0;
}
.lp-legal__text + .lp-legal__text {
margin-top: 0.4rem;
}
/* プライバシー：見出し＋段落 */
.lp-legal__h2 {
font-size: 1.1rem;
font-weight: 700;
color: var(--lp-heading);
margin: 2rem 0 0.6rem;
}
.lp-legal__p {
margin: 0 0 0.8rem;
}
.lp-legal__p:last-child {
margin-bottom: 0;
}
.lp-legal__date {
margin-top: 2.5rem;
font-size: 0.9rem;
color: var(--lp-muted);
}
/* 法定ページから LP に戻るボタン */
.lp-legal__back-wrap {
margin-top: 3rem;
text-align: center;
}
.lp-legal__back {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.9rem 2rem;
background: var(--lp-accent);
color: var(--lp-bg);
font-size: 1rem;
font-weight: 700;
text-decoration: none;
border-radius: 999px;
transition: filter 0.15s ease, transform 0.15s ease;
}
.lp-legal__back:hover {
filter: brightness(1.08);
transform: translateY(-1px);
}
/* =========================================================
10. 簡易フッター（.lp-footer）
---------------------------------------------------------
page-lp.html が出力する。LP 本体と明るさが近いときは
上の細い線で境目を付ける。
========================================================= */
.lp-footer {
background: var(--lp-soft-bg);
color: var(--lp-text);
border-top: 1px solid var(--lp-soft-line);
padding: 2rem 1.5rem;
text-align: center;
}
.lp-footer__inner {
max-width: var(--lp-width);
margin: 0 auto;
}
.lp-footer__copy {
font-size: 0.85rem;
margin: 0 0 0.75rem;
}
.lp-footer__links {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
/* 下線はマウスを乗せたときだけ出す（スマホではタップしても出さない） */
.lp-footer__link {
color: var(--lp-heading);
font-size: 0.8rem;
text-decoration: none;
}
@media (hover: hover) {
.lp-footer__link:hover {
text-decoration: underline;
text-decoration-color: var(--lp-accent);
}
}
/* =========================================================
11. ユーティリティ
---------------------------------------------------------
LP は PC とスマホで見せる画像を変えることがよくある
（例：PC はロゴだけ、スマホは専用のヘッダー画像）。
区切りの余白も画像ではなく CSS で入れる。
境目は 767px（スマホ）／768px 以上（PC・タブレット）。
========================================================= */
/* PC・タブレットだけに見せる */
@media (max-width: 767px) {
.lp-only-pc { display: none; }
}
/* スマホだけに見せる */
.lp-only-sp { display: none; }
@media (max-width: 767px) {
.lp-only-sp { display: block; }
}
/* 何も置かない余白。高さは --sp-h で指定する */
.lp-spacer {
height: var(--sp-h, 60px);
background: var(--lp-bg);
}
/* =========================================================
12. 案件ごとのボタン位置（ここから下を案件で書く）
---------------------------------------------------------
測り方は docs/LP-PATTERNS.md の「ボタンの位置を測る」。
--cta-x / --cta-y はボタンの中心、--cta-w は幅。いずれも親画像に対する %。
--cta-shine はボタン画像のうち色が付いた部分（上 右 下 左）。
書き方の例：
.lp-sec__cta--s01 { --cta-x: 51%; --cta-y: 47.486%; --cta-w: 90.267%;
--cta-shine: 11.41% 3.55% 15.76% 1.77%; }
.lp-sec__tel--s03 { --cta-x: 66%; --cta-y: 76.448%; --cta-w: 66.667%; --cta-h: 13.661%; }
.lp-sec--s05 { --lp-crop: 750 / 980; }
========================================================= */
/* #########################################################
ここから下がブレイスレボ案件ぶん
（上は wp-starter の LP パック。触らない）
数値はすべて現行 LP（bracerevo-jp.com/lp/）の実測値
######################################################### */
:root {
/* 現行 LP の本体幅は 1000px・外側は #f9f9f9（実測） */
--lp-width: 1000px;
--lp-bg: #fefefe;
--lp-outer-bg: #f9f9f9;
--lp-text: #5d6167;
--lp-heading: #2b2f38;
--lp-accent: #002c64;
/* ブレイスレボの紺 */
--br-navy: #002c64;
}
/* 欧文は現行どおり Poppins。日本語は端末ごとに名前で指定して、見え方の差をなくす。
Web フォントは読み込まない（LP はほぼ画像なので、数行の文字のために重くしない）。
Mac=ヒラギノ角ゴ ／ Windows=游ゴシック ／ Android=Noto Sans JP ／ 古い Windows=メイリオ */
body {
font-family: "Poppins", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
"Noto Sans JP", "Meiryo", sans-serif;
}
/* スマホでも外側の色を出さない（現行どおり本体が全幅） */
.lp-container {
max-width: var(--lp-width);
}
/* ---------- ヘッダー帯（紺地にロゴ） ---------- */
.lp-header {
background: var(--br-navy);
padding: 20px 0;
text-align: center;
font-size: 0;
line-height: 0;
}
.lp-header__logo {
display: inline-block;
width: 500px;
max-width: 100%;
}
/* スマホは商品ページのヘッダー（.site-header）とまったく同じ大きさにそろえる。
そのままだと max-width: 100% でロゴが画面幅いっぱいに広がり、帯も高くなって
ファーストビューが見えなくなる（2026-11-01 ユーザー指示）。
パソコンの見た目（padding 20px・ロゴ 500px）は変えていない。 */
@media (max-width: 767px) {
.lp-header { padding: 14px 0; }
.lp-header__logo { width: 220px; }
}
/* ---------- CTA 帯（文字＋ボタン） ---------- */
/* 現行は Elementor で1つずつ作られていて 1番目・2番目だけ余白が違ったが、
8個すべて同じにした（2026-10-31 ユーザー指示）。値は多数派に合わせている。 */
.lp-cta-band {
--band-w: 60%;
background: var(--lp-bg);
padding: 40px 0;
/* ボタンは inline-block なので、行ボックスのすき間（約6px）が下に出ないよう消す */
font-size: 0;
line-height: 0;
}
.lp-cta-band__lead {
margin: 0 0 10px;
font-size: 24px;
line-height: 1.857142857;
font-weight: 600;
text-align: center;
color: var(--lp-text);
}
.lp-cta-band__btn {
margin-bottom: 50px;
/* 光沢を「青いボタンの形」に合わせる。
btn-cta.png（1062×255）を解析した実測値：
本体 = 左6px / 右6px / 上0px / 下15px（下は影のぶん）、角丸は 34px
角丸は % で書くと横は幅・縦は高さに対する割合になるので、
3.24%（1050px の 34px）/ 14.17%（240px の 34px）で、どの大きさでも真円の角になる */
--cta-shine: 0 0.56% 5.88% 0.56%;
--cta-shine-radius: 3.24% / 14.17%;
}
@media (max-width: 1024px) {
.lp-cta-band { --band-w: 70%; }
}
@media (max-width: 767px) {
.lp-cta-band {
--band-w: 90%;
padding: 0;
}
.lp-cta-band__lead { font-size: 16px; }
}
/* ---------- 動画 ---------- */
/* 現行は左右と下に余白を取って、本体幅より内側に置いている（実測） */
.lp-movie {
background: var(--lp-bg);
padding: 0 60px 50px;
font-size: 0;
line-height: 0;
}
.lp-movie__video {
display: block;
width: 100%;
height: auto;
background: #000;
}
@media (max-width: 767px) {
.lp-movie { padding: 0 20px 40px; }
}
/* ---------- フッター（A案・2026-10-31 ユーザー選択） ---------- */
/* 幅は LP の画像と同じ 1000px・中央寄せ。紺地にロゴ＋3列の情報＋リンク。 */
.lp-footer {
max-width: var(--lp-width);
margin: 0 auto;
background: var(--br-navy);
border-top: 0;
padding: 0;
color: #fefefe;
text-align: center;
}
/* LP 以外のページ（商品・カート・購入手続き・マイアカウント）のフッター。
ヘッダー（.site-header）が全幅の紺帯なので、フッターも帯だけ全幅にしてそろえる。
.lp-footer__inner は max-width: none なので、ここで 1000px に絞って中央に置く。
これでヘッダーとまったく同じ作り（帯は全幅・中身は1000px）になる。
LP のフッターは承認どおり 1000px のまま（--wide を付けない）。
2026-11-01 ユーザー指示 */
.lp-footer--wide {
max-width: none;
}
.lp-footer--wide .lp-footer__inner {
max-width: var(--lp-width);
margin: 0 auto;
}
.lp-footer__inner {
max-width: none;
padding: 40px 48px 32px;
}
.lp-footer__logo {
display: block;
width: 250px;
max-width: 100%;
height: auto;
margin: 0 auto 28px;
}
.lp-footer__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(254, 254, 254, 0.25);
}
.lp-footer__item {
margin: 0;
text-align: center;
}
.lp-footer__dt {
margin: 0 0 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
color: #9dc0e3;
}
.lp-footer__dd {
margin: 0;
font-size: 15px;
line-height: 1.7;
}
.lp-footer__tel {
color: #fefefe;
text-decoration: none;
}
.lp-footer__links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 28px;
padding-top: 24px;
}
.lp-footer__link {
font-size: 14px;
color: #fefefe;
text-decoration: none;
}
.lp-footer__copy {
margin: 0;
padding: 14px 16px;
background: #001c42;
font-size: 12px;
text-align: center;
color: #9dc0e3;
}
@media (hover: hover) {
.lp-footer__link:hover,
.lp-footer__tel:hover { text-decoration: underline; }
}
@media (max-width: 767px) {
.lp-footer__inner { padding: 32px 20px 24px; }
.lp-footer__logo { width: 190px; margin-bottom: 22px; }
.lp-footer__grid { grid-template-columns: 1fr; gap: 16px; padding-bottom: 22px; }
.lp-footer__links { gap: 10px 20px; padding-top: 20px; }
}
/* ---------- 現行のばらつきをそのまま再現している箇所 ---------- */
/* 「まとめ買いもおすすめ」の下だけ、スマホで 40px の余白が入っている */
@media (max-width: 767px) {
.lp-sec--mb40-sp { margin-bottom: 40px; }
}
/* ---------- 一時的に隠しておくもの ---------- */
/* お詫びのお知らせ。現行 LP も全端末で非表示にしてある（欠品が出たら外して使う） */
.is-hidden {
display: none;
}
/* =========================================================
PC 表示の左右パネル（現行には無い追加分・2026-10-31 ユーザー要望）
---------------------------------------------------------
スマホ・タブレットでは出さない。
本体は 1000px 固定なので、左右に出る幅は（画面幅 − 1000px）÷ 2。
1200px 以上 … 背景の装飾だけ出す（片側 100px）
1500px 以上 … 商品紹介と購入導線も出す（片側 250px）
背景は画像を使わず CSS で描いている（差し替えたくなったら
.lp-pc__side の background-image に写真の URL を入れる）
========================================================= */
.lp-pc {
display: none;
}
@media (min-width: 1200px) {
.lp-pc {
display: contents;
}
.lp-pc__side {
position: fixed;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: calc(50% - 500px);
/* 背景は昼の野球場の写真（2026-10-31 ユーザー選択＝E案）。
1枚の写真を画面いっぱいに敷き、その左端・右端だけが左右のパネルに見える。
写真の上に白い幕を重ねて明るさをそろえ、文字（紺）が読める状態にしている。
別の写真に替えるときは url() のファイル名だけ差し替える。
※ CSS の中の相対パスは「CSS ファイルの位置」が基準。
この CSS は mockup/css/ にあるので ../../ から書く（HTML と同じ ../ では出ない）。 */
background-color: #dfeaf6;
background-image:
linear-gradient(180deg, rgba(254, 254, 254, .46) 0%, rgba(254, 254, 254, .64) 100%),
url("../img/lp/pc-bg-e.jpg");
background-repeat: no-repeat, no-repeat;
background-size: cover, max(100vw, 177.8vh) auto;
font-family: "Poppins", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic",
"Noto Sans JP", "Meiryo", sans-serif;
/* 背景が明るいので文字は紺。背景を暗い写真に替えるときは #fefefe に戻す */
color: var(--br-navy);
line-height: 1.6;
}
/* 本体の列が浮いて見える程度の薄い影を、境目の内側に落とす */
.lp-pc__side--left {
left: 0;
background-position: center, left center;
box-shadow: inset -18px 0 20px -18px rgba(0, 44, 100, 0.22);
}
.lp-pc__side--right {
right: 0;
background-position: center, right center;
box-shadow: inset 18px 0 20px -18px rgba(0, 44, 100, 0.22);
}
.lp-pc__inner {
display: none;
}
}
@media (min-width: 1500px) {
.lp-pc__inner {
display: block;
width: min(300px, calc(100% - 40px));
text-align: center;
}
/* 文節の途中で折り返さない */
.lp-pc__phrase {
display: inline-block;
}
/* 左：商品紹介 */
.lp-pc__name {
margin: 0;
font-size: clamp(1.25rem, 1.5vw, 1.625rem);
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.04em;
}
.lp-pc__catch {
margin: 0.6em 0 0;
font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
font-weight: 600;
letter-spacing: 0.03em;
color: #174172;
}
/* 背景を抜いた透過 PNG。角丸と四角い影は付けない
（付けると「箱の上に乗っている」ように見えるため）。
影はパッケージの形に沿わせたいので filter: drop-shadow を使う */
.lp-pc__photo {
width: min(210px, 100%);
height: auto;
margin: 1.2rem auto 0;
filter: drop-shadow(0 12px 22px rgba(0, 44, 100, 0.28));
}
.lp-pc__habit {
margin: 1.1rem 0 0;
font-size: clamp(0.75rem, 0.9vw, 0.875rem);
color: #174172;
}
/* 右：ご注文 */
.lp-pc__badge {
display: inline-block;
margin: 0;
padding: 0.35em 0.9em;
border: 1px solid rgba(0, 44, 100, 0.45);
border-radius: 999px;
font-size: clamp(0.6875rem, 0.8vw, 0.8125rem);
font-weight: 600;
letter-spacing: 0.02em;
}
.lp-pc__cta {
display: block;
position: relative;
width: 100%;
margin: 1.1rem 0 0;
transition: transform 0.15s ease, filter 0.15s ease;
/* 光沢は CTA 帯と同じ値 */
--cta-shine: 0 0.56% 5.88% 0.56%;
--cta-shine-radius: 3.24% / 14.17%;
}
.lp-pc__cta-img {
display: block;
width: 100%;
animation: lp-cta-pulse 2.8s ease-in-out infinite;
}
.lp-pc__cta:hover {
transform: scale(1.03);
filter: brightness(1.05);
}
.lp-pc__cta:active {
transform: scale(0.99);
}
.lp-pc__size {
margin: 1rem 0 0;
font-size: clamp(0.8125rem, 0.95vw, 0.9375rem);
font-weight: 600;
letter-spacing: 0.02em;
}
.lp-pc__note {
margin: 0.4rem 0 0;
font-size: clamp(0.6875rem, 0.8vw, 0.8125rem);
color: #174172;
}
@media (prefers-reduced-motion: reduce) {
.lp-pc__cta-img { animation: none; }
}
}
/* 光沢（CTA 帯と同じ描き方） */
@media (min-width: 1500px) {
.lp-pc__cta::after {
content: "";
position: absolute;
inset: var(--cta-shine, 0);
pointer-events: none;
border-radius: var(--cta-shine-radius, 999px);
background-image: linear-gradient(110deg,
rgba(254, 254, 254, 0) 38%,
rgba(254, 254, 254, 0.45) 46%,
rgba(254, 254, 254, 0.95) 50%,
rgba(254, 254, 254, 0.45) 54%,
rgba(254, 254, 254, 0) 62%);
background-position: 100% 0;
background-repeat: no-repeat;
background-size: 250% 100%;
animation: lp-cta-shine 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.lp-pc__cta::after { display: none; }
}
}
/* =========================================================
お知らせ欄（.lp-notice）— B案・2026-10-31 ユーザー選択
---------------------------------------------------------
現行は画像1枚だったが、欠品サイズや発送予定がよく変わるので文字で組む。
WordPress ではこのかたまりを1つのブロックにして、
「出す／引っ込める」も「文字を直す」もクライアントができるようにする。
見出しの紺はヘッダー・フッターと同じ色。
書き換わるところ（欠品サイズ・日付）は で囲む。
※ 現行の「黄色地に赤文字」はコントラスト比 3.94:1 で本文の基準（4.5:1）に届かないため、
赤を濃く（#c01438＝5.65:1）して黄色はマーカーだけに使う。
========================================================= */
.lp-notice {
margin: 0 20px;
border: 1px solid #c8d6e6;
background: var(--lp-bg);
}
.lp-notice__title {
margin: 0;
padding: 14px 20px;
background: var(--br-navy);
font-size: 20px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
color: #fefefe;
text-align: center;
}
.lp-notice__body {
padding: 20px 28px 24px;
font-size: 16px;
line-height: 1.9;
color: #2b3b52;
}
.lp-notice__text {
margin: 0 0 12px;
}
.lp-notice__text:last-of-type {
margin-bottom: 0;
}
/* 欠品サイズ・日付など、毎回書き換わるところ。
ブロックで組むので、クラス付きの ではなく を使う
（Gutenberg は編集時に見知らぬクラスの span を落とすため）。
クライアントは編集画面で太字にするだけでこの見た目になる。 */
.lp-notice__text strong {
padding: 0 0.1em;
font-weight: 700;
color: #c01438;
background: linear-gradient(transparent 62%, #ffe9a8 62%);
}
.lp-notice__note {
margin: 14px 0 0;
font-size: 13px;
color: #6b7b91;
}
@media (max-width: 767px) {
.lp-notice { margin: 0 12px; }
.lp-notice__title { padding: 12px 14px; font-size: 16px; }
.lp-notice__body { padding: 16px 16px 18px; font-size: 14px; }
.lp-notice__note { font-size: 12px; }
}
/* =========================================================
LP 以外のページのヘッダー（カート・購入手続き・マイアカウント・商品ページ）
---------------------------------------------------------
parts/header.html が出す。LP のヘッダーと同じ紺地にロゴだけ。
========================================================= */
.site-header {
background: var(--br-navy);
padding: 20px 0;
text-align: center;
font-size: 0;
line-height: 0;
}
.site-header__inner {
max-width: var(--lp-width);
margin: 0 auto;
}
.site-header__home {
display: inline-block;
}
.site-header__logo {
width: 320px;
max-width: 100%;
height: auto;
}
@media (max-width: 767px) {
.site-header { padding: 14px 0; }
.site-header__logo { width: 220px; }
}