/* ==========================================================
   笹のお守り 商品ページ（コンテンツ部分）
   - プレーンCSS / スマホ基準(375px)で作り、画面幅に比例して拡大縮小（--u）
   - PCでは 750px で頭打ち（--u の上限 2px。1040px にするなら max-width:1040px と --u 上限 2.77333px）
   - 数値は「375px幅のときの px」。calc(var(--u)*N) で表記
   ========================================================== */

/* ---------- ベース ---------- */
.bbam {
  --u: min(.26667vw, 2px);            /* 375px 幅で 1px、750px 以上で 2px（1040px にする場合は 2.77333px） */
  --c-green: #145831;
  --c-green-mid: #3e753c;
  --c-yellow: #fff694;
  --c-red: #e5252b;
  --c-text: #333;
  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  overflow: hidden;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.bbam *, .bbam *::before, .bbam *::after { box-sizing: border-box; }
.bbam h1, .bbam h2, .bbam h3, .bbam p, .bbam ul, .bbam li, .bbam figure { margin: 0; padding: 0; font-size: 100%; font-weight: inherit; line-height: inherit; }
.bbam ul { list-style: none; }
.bbam img { display: block; max-width: none; height: auto; border: 0; vertical-align: top; }
.bbam picture { display: block; }
.bbam section { position: relative; width: auto; }

/* 背景画像（セクション幅いっぱい） */
.bbam .bbam-bg { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; }
.bbam .bbam-bg img { width: 100%; }

/* 点線つきテキスト（行ごとに点線） */
.bbam .bbam-dots {
  --lh: calc(var(--u)*26);
  line-height: var(--lh);
  background-image: radial-gradient(circle at calc(var(--u)*1.5) calc(var(--lh) - var(--u)*.7), #555 0, #555 calc(var(--u)*.6), transparent calc(var(--u)*.85));
  background-size: calc(var(--u)*3) var(--lh);
  white-space: nowrap;
}

/* 取り消し線つきピル（無添加） */
.bbam .bbam-pill {
  position: relative;
  text-align: center;
  white-space: nowrap;
  color: #4d3626;
  font-weight: 700;
  background: linear-gradient(#fff 0%, #fbf4e6 100%);
  border: calc(var(--u)*2) solid #dcc49c;
  border-radius: 999px;
  box-shadow: 0 calc(var(--u)*1) calc(var(--u)*2) rgba(120, 90, 40, .25);
}
.bbam .bbam-pill::after {
  content: "";
  position: absolute;
  left: 3%; right: 3%; top: 50%;
  height: calc(var(--u)*2); margin-top: calc(var(--u)*-1);
  background: var(--c-red);
  transform: rotate(-8deg);
}

/* ==========================================================
   reference-01
   ========================================================== */

/* ---------- FV ---------- */
.bbam .bbam-fv { height: calc(var(--u)*550); z-index: 1; }
.bbam .bbam-fv__title { position: absolute; left: calc(var(--u)*7); top: calc(var(--u)*14); width: calc(var(--u)*345); }
.bbam .bbam-fv__title img { width: 100%; }
.bbam .bbam-fv__sub { position: absolute; left: calc(var(--u)*207); top: calc(var(--u)*14); width: calc(var(--u)*168); }
.bbam .bbam-fv__sub img { width: 100%; }
.bbam .bbam-fv__point { position: absolute; width: calc(var(--u)*105); }
.bbam .bbam-fv__point img { width: 100%; }
.bbam .bbam-fv__point--1 { left: calc(var(--u)*218); top: calc(var(--u)*184); }
.bbam .bbam-fv__point--2 { left: calc(var(--u)*150); top: calc(var(--u)*209); }
.bbam .bbam-fv__point--3 { left: calc(var(--u)*275); top: calc(var(--u)*229); }
.bbam .bbam-fv__free-ttl { position: absolute; left: calc(var(--u)*12); top: calc(var(--u)*442); display: flex; align-items: center; height: calc(var(--u)*26); }
.bbam .bbam-fv__free-ttl picture { width: calc(var(--u)*24); }
.bbam .bbam-fv__free-ttl img { width: 100%; }
.bbam .bbam-fv__free-ttl span { margin-left: calc(var(--u)*-4); font-size: calc(var(--u)*15); line-height: calc(var(--u)*26); font-weight: 700; color: #3a3a3a; white-space: nowrap; }
.bbam .bbam-pills--fv li { position: absolute; top: calc(var(--u)*470); height: calc(var(--u)*25); font-size: calc(var(--u)*14); line-height: calc(var(--u)*21); }
.bbam .bbam-pills--fv li:nth-child(1) { left: calc(var(--u)*32);  width: calc(var(--u)*79); }
.bbam .bbam-pills--fv li:nth-child(2) { left: calc(var(--u)*114); width: calc(var(--u)*72); }
.bbam .bbam-pills--fv li:nth-child(3) { left: calc(var(--u)*190); width: calc(var(--u)*90); }
.bbam .bbam-pills--fv li:nth-child(4) { left: calc(var(--u)*284); width: calc(var(--u)*68); }

/* ---------- リード ---------- */
.bbam .bbam-lead { height: calc(var(--u)*385); z-index: 2; }
.bbam .bbam-lead__rakushu { position: absolute; left: calc(var(--u)*60); top: calc(var(--u)*-24); width: calc(var(--u)*28); }
.bbam .bbam-lead__rakushu img { width: 100%; }
.bbam .bbam-lead__sub { position: absolute; left: 0; right: 0; top: calc(var(--u)*-24); text-align: center; color: #fff; font-size: calc(var(--u)*14); line-height: calc(var(--u)*21); font-weight: 500; white-space: nowrap; }
.bbam .bbam-lead__sub .k { font-size: calc(var(--u)*16); }
.bbam .bbam-lead__sub .s { font-size: calc(var(--u)*14); }
.bbam .bbam-lead__ttl { position: absolute; left: 0; right: 0; top: calc(var(--u)*21); text-align: center; color: #fff; font-size: calc(var(--u)*24); line-height: calc(var(--u)*30); font-weight: 500; white-space: nowrap; }
.bbam .bbam-lead__line { position: absolute; left: calc(var(--u)*86); top: calc(var(--u)*60); width: calc(var(--u)*202); }
.bbam .bbam-lead__line img { width: 100%; height: calc(var(--u)*4); }
.bbam .bbam-lead__logo { position: absolute; left: calc(var(--u)*163); top: calc(var(--u)*120); width: calc(var(--u)*205.5); }
.bbam .bbam-lead__logo img { width: 100%; }
.bbam .bbam-lead__txt { position: absolute; left: calc(var(--u)*37); top: calc(var(--u)*288); font-size: calc(var(--u)*12.6); font-weight: 500; color: #333; }

/* ---------- 保湿 + 体臭ケア ---------- */
.bbam .bbam-care { height: calc(var(--u)*320); z-index: 1; }
.bbam .bbam-care__tag { position: absolute; left: calc(var(--u)*222); top: calc(var(--u)*12); width: calc(var(--u)*123); height: calc(var(--u)*65); }
.bbam .bbam-care__tag picture { position: absolute; left: 0; top: 0; width: calc(var(--u)*54); }
.bbam .bbam-care__tag img { width: 100%; }
.bbam .bbam-care__tag span { position: absolute; left: calc(var(--u)*50); top: calc(var(--u)*21); width: calc(var(--u)*73); height: calc(var(--u)*22); border: calc(var(--u)*1) solid #9a9a9a; background: #fff; color: #555; font-size: calc(var(--u)*12); line-height: calc(var(--u)*20); text-align: center; font-weight: 500; }
.bbam .bbam-care__circle { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 calc(var(--u)*10) rgba(60,60,60,.14); text-align: center; }
.bbam .bbam-care__circle--moist { left: calc(var(--u)*26); top: calc(var(--u)*16); width: calc(var(--u)*160); height: calc(var(--u)*160); }
.bbam .bbam-care__circle--care { left: calc(var(--u)*133); top: calc(var(--u)*86); width: calc(var(--u)*216); height: calc(var(--u)*216); }
.bbam .bbam-care__ttl { position: absolute; left: 0; right: 0; color: #2f7d32; font-family: var(--font-serif); font-weight: 900; white-space: nowrap; }
.bbam .bbam-care__circle--moist .bbam-care__ttl { top: calc(var(--u)*20); font-size: calc(var(--u)*34); line-height: calc(var(--u)*34); }
.bbam .bbam-care__circle--care .bbam-care__ttl { top: calc(var(--u)*33); left: calc(var(--u)*9); font-size: calc(var(--u)*34); line-height: calc(var(--u)*40); }
.bbam .bbam-care__circle--care .bbam-care__ttl .b { font-size: calc(var(--u)*28); font-style: italic; }
.bbam .bbam-care__txt { position: absolute; left: 0; right: 0; font-size: calc(var(--u)*13); line-height: calc(var(--u)*26); color: #444; font-weight: 500; white-space: nowrap; }
.bbam .bbam-care__circle--moist .bbam-care__txt { top: calc(var(--u)*56); }
.bbam .bbam-care__circle--care .bbam-care__txt { top: calc(var(--u)*79); }
.bbam .bbam-care__plus { position: absolute; left: calc(var(--u)*152); top: calc(var(--u)*121); width: calc(var(--u)*20); text-align: center; color: #2f7d32; font-size: calc(var(--u)*26); line-height: calc(var(--u)*30); font-weight: 700; }
.bbam .bbam-care__wtr { position: absolute; left: calc(var(--u)*28); top: calc(var(--u)*5); width: calc(var(--u)*151); }
.bbam .bbam-care__wtr img { width: 100%; }

/* ---------- 見出しバナー（1・2・3 共通） ---------- */
.bbam .bbam-ttl { position: absolute; left: calc(var(--u)*25); width: calc(var(--u)*327); height: calc(var(--u)*42); border-radius: calc(var(--u)*21); background: var(--c-green); z-index: 1; }
.bbam .bbam-ttl__num { position: absolute; left: calc(var(--u)*20); top: calc(var(--u)*8); width: calc(var(--u)*26); height: calc(var(--u)*26); border-radius: 50%; background: #ffe600; color: #111; font-size: calc(var(--u)*17); line-height: calc(var(--u)*26); text-align: center; font-weight: 700; }
.bbam .bbam-ttl__text { position: absolute; left: calc(var(--u)*51); top: 0; color: #fff200; font-size: calc(var(--u)*20); line-height: calc(var(--u)*42); font-weight: 700; white-space: nowrap; }
.bbam .bbam-ttl--2 .bbam-ttl__num { left: calc(var(--u)*30); }
.bbam .bbam-ttl--2 .bbam-ttl__text { left: calc(var(--u)*61); font-size: calc(var(--u)*22); }
.bbam .bbam-ttl--3 .bbam-ttl__num { left: calc(var(--u)*30); }
.bbam .bbam-ttl--3 .bbam-ttl__text { left: calc(var(--u)*61); font-size: calc(var(--u)*22); }
.bbam .bbam-ttl__leaf1 { position: absolute; left: calc(var(--u)*-9); top: calc(var(--u)*9); width: calc(var(--u)*62); }
.bbam .bbam-ttl__leaf2 { position: absolute; left: calc(var(--u)*281); top: calc(var(--u)*-4); width: calc(var(--u)*48); }
.bbam .bbam-ttl__leaf1 img, .bbam .bbam-ttl__leaf2 img { width: 100%; }

/* ---------- 1 Wの薬用処方（reference-03） ---------- */
.bbam .bbam-w { height: calc(var(--u)*540); z-index: 1; }
.bbam .bbam-w__ttl { position: absolute; left: 0; right: 0; top: calc(var(--u)*62); text-align: center; height: calc(var(--u)*58); line-height: calc(var(--u)*58); color: #333; font-family: var(--font-serif); font-weight: 700; font-size: calc(var(--u)*37.5); white-space: nowrap; }
.bbam .bbam-w__ttl .w { position: relative; top: calc(var(--u)*2); font-size: calc(var(--u)*53); font-weight: 900; color: #d8201f; text-shadow: calc(var(--u)*1) calc(var(--u)*1) 0 #f6b04a; }
.bbam .bbam-w__ttl::before, .bbam .bbam-w__ttl::after { content: ""; position: absolute; top: calc(var(--u)*35); width: 0; height: calc(var(--u)*26); border-left: calc(var(--u)*2) solid #aaa; box-shadow: calc(var(--u)*7) 0 0 #aaa; }
.bbam .bbam-w__ttl::before { left: calc(var(--u)*50); transform: rotate(-35deg); }
.bbam .bbam-w__ttl::after { left: calc(var(--u)*315); transform: rotate(35deg); }
.bbam .bbam-w__lead { position: absolute; left: 0; right: 0; top: calc(var(--u)*129); text-align: center; font-size: calc(var(--u)*14); line-height: calc(var(--u)*20); font-weight: 500; color: #444; white-space: nowrap; }
.bbam .bbam-w__card { position: absolute; top: calc(var(--u)*159); width: calc(var(--u)*160); height: calc(var(--u)*351); background: #fff; }
.bbam .bbam-w__card--l { left: calc(var(--u)*25); }
.bbam .bbam-w__card--r { left: calc(var(--u)*190); }
.bbam .bbam-w__label { position: absolute; left: calc(var(--u)*10); top: calc(var(--u)*11); width: calc(var(--u)*140); height: calc(var(--u)*30); text-align: center; color: #fff; font-size: calc(var(--u)*13.5); line-height: calc(var(--u)*30); font-weight: 500; white-space: nowrap; }
.bbam .bbam-w__card--l .bbam-w__label { background: #ab6eb4; }
.bbam .bbam-w__card--r .bbam-w__label { background: #6678b4; }
.bbam .bbam-w__name { position: absolute; left: 0; right: 0; top: calc(var(--u)*49); text-align: center; font-family: var(--font-serif); font-size: calc(var(--u)*14); line-height: calc(var(--u)*23.5); font-weight: 900; color: #2f2a2a; white-space: nowrap; }
.bbam .bbam-w__sphere { position: absolute; left: calc(var(--u)*10); top: calc(var(--u)*107); width: calc(var(--u)*140.5); }
.bbam .bbam-w__sphere picture, .bbam .bbam-w__sphere img { width: 100%; }
.bbam .bbam-w__sphtxt { position: absolute; left: 0; right: 0; width: calc(var(--u)*138); text-align: center; color: #fff; font-family: var(--font-serif); font-weight: 900; white-space: nowrap; text-shadow: 0 0 calc(var(--u)*3) rgba(70, 30, 85, .9), 0 0 calc(var(--u)*6) rgba(70, 30, 85, .6), calc(var(--u)*1) calc(var(--u)*1) 0 rgba(70, 30, 85, .6); }
.bbam .bbam-w__card--l .bbam-w__sphtxt { top: calc(var(--u)*34); font-size: calc(var(--u)*34); line-height: calc(var(--u)*34); }
.bbam .bbam-w__card--r .bbam-w__sphtxt { top: calc(var(--u)*24); font-size: calc(var(--u)*25); line-height: calc(var(--u)*32); text-shadow: 0 0 calc(var(--u)*3) rgba(40, 55, 120, .9), 0 0 calc(var(--u)*6) rgba(40, 55, 120, .6), calc(var(--u)*1) calc(var(--u)*1) 0 rgba(40, 55, 120, .6); }
.bbam .bbam-w__desc { position: absolute; left: calc(var(--u)*12.5); top: calc(var(--u)*260); font-size: calc(var(--u)*14); line-height: calc(var(--u)*26); letter-spacing: .09em; font-feature-settings: "palt"; font-weight: 500; color: #444; white-space: nowrap; }
/* ×（装飾。CSSで描画） */
.bbam .bbam-w__x { position: absolute; left: calc(var(--u)*170); top: calc(var(--u)*316); width: calc(var(--u)*36); height: calc(var(--u)*36); border-radius: 50%; background: #3a3a3a; z-index: 2; }
.bbam .bbam-w__x::before, .bbam .bbam-w__x::after { content: ""; position: absolute; left: calc(var(--u)*8); top: calc(var(--u)*16); width: calc(var(--u)*20); height: calc(var(--u)*4); border-radius: calc(var(--u)*2); background: #fff; transform: rotate(45deg); }
.bbam .bbam-w__x::after { transform: rotate(-45deg); }

/* ---------- 2 クマザサエキス高配合（reference-05） ---------- */
.bbam .bbam-kuma { height: calc(var(--u)*425); z-index: 1; }
.bbam .bbam-kuma__photo { position: absolute; left: 0; top: calc(var(--u)*145); width: calc(var(--u)*127.5); }
.bbam .bbam-kuma__leaf { position: absolute; left: calc(var(--u)*-48.5); top: calc(var(--u)*78); width: calc(var(--u)*156); }
.bbam .bbam-kuma__photo img, .bbam .bbam-kuma__leaf img, .bbam .bbam-kuma__pack img, .bbam .bbam-kuma__panelleaf img { width: 100%; }
.bbam .bbam-kuma__ttl { position: absolute; left: calc(var(--u)*144); top: calc(var(--u)*68.5); height: calc(var(--u)*34); font-family: var(--font-serif); font-size: calc(var(--u)*26); line-height: calc(var(--u)*34); font-weight: 700; color: #231917; font-feature-settings: "palt"; white-space: nowrap; }
.bbam .bbam-kuma__ttl::after { content: ""; position: absolute; left: calc(var(--u)*1); top: calc(var(--u)*34.5); width: calc(var(--u)*179); height: calc(var(--u)*2); background: linear-gradient(90deg, #579736, #8fbe24); }
.bbam .bbam-kuma__sub { position: absolute; left: calc(var(--u)*144); top: calc(var(--u)*109); font-size: calc(var(--u)*14); line-height: calc(var(--u)*19); font-weight: 500; color: #333; letter-spacing: .02em; white-space: nowrap; }
.bbam .bbam-kuma__lead, .bbam .bbam-kuma__txt { position: absolute; left: calc(var(--u)*144); font-family: var(--font-serif); font-size: calc(var(--u)*10.6); line-height: calc(var(--u)*20); font-weight: 500; color: #333; font-feature-settings: "palt"; white-space: nowrap; }
.bbam .bbam-kuma__lead { top: calc(var(--u)*137.5); }
.bbam .bbam-kuma__txt { top: calc(var(--u)*155); }
.bbam .bbam-kuma__pack { position: absolute; left: calc(var(--u)*52); top: calc(var(--u)*248); width: calc(var(--u)*40); }
.bbam .bbam-kuma__kodawari { position: absolute; left: calc(var(--u)*96); top: calc(var(--u)*255.5); font-family: var(--font-serif); font-size: calc(var(--u)*20); line-height: calc(var(--u)*30); font-weight: 900; color: #231917; font-feature-settings: "palt"; white-space: nowrap; }
.bbam .bbam-kuma__tri { position: absolute; left: calc(var(--u)*166.5); top: calc(var(--u)*289); width: 0; height: 0; border-left: calc(var(--u)*20.5) solid transparent; border-right: calc(var(--u)*20.5) solid transparent; border-top: calc(var(--u)*14.5) solid #c8142d; z-index: 2; }
.bbam .bbam-kuma__panel { position: absolute; left: calc(var(--u)*37.5); top: calc(var(--u)*300); width: calc(var(--u)*300); height: calc(var(--u)*90); border-radius: calc(var(--u)*8); background: #ffffc9; overflow: hidden; }
.bbam .bbam-kuma__panelleaf { position: absolute; left: calc(var(--u)*50); top: calc(var(--u)*-34); width: calc(var(--u)*224); mix-blend-mode: multiply; filter: brightness(.82) saturate(1.8) contrast(1.35); }
.bbam .bbam-kuma__plead { position: absolute; left: calc(var(--u)*20); top: calc(var(--u)*21); font-family: var(--font-serif); font-size: calc(var(--u)*13.6); line-height: calc(var(--u)*18); font-weight: 500; color: #222; font-feature-settings: "palt"; white-space: nowrap; }
.bbam .bbam-kuma__plead::after { content: ""; position: absolute; left: calc(var(--u)*1.5); right: calc(var(--u)*-2); top: calc(var(--u)*18); height: calc(var(--u)*1.5); background: linear-gradient(90deg, #5ea025, #91c120); }
.bbam .bbam-kuma__pmain { position: absolute; left: calc(var(--u)*14.5); top: calc(var(--u)*41); font-family: var(--font-serif); line-height: calc(var(--u)*40); font-weight: 900; color: #1a542e; white-space: nowrap; }
.bbam .bbam-kuma__pmain .s { font-size: calc(var(--u)*24); }
.bbam .bbam-kuma__pmain .b { font-size: calc(var(--u)*29); }
.bbam .bbam-kuma__pmain sup { position: relative; top: calc(var(--u)*-10); vertical-align: baseline; font-size: calc(var(--u)*13); font-weight: 700; }
.bbam .bbam-kuma__note { position: absolute; right: calc(var(--u)*37.5); top: calc(var(--u)*396); font-size: calc(var(--u)*11); line-height: calc(var(--u)*16); font-weight: 500; color: #333; white-space: nowrap; }

/* ---------- 3 家族で使える4つの安心 ---------- */
.bbam .bbam-family { height: calc(var(--u)*335); z-index: 1; }
.bbam .bbam-pills--family li { position: absolute; left: calc(var(--u)*225); height: calc(var(--u)*35); padding: 0 calc(var(--u)*12); font-size: calc(var(--u)*17); line-height: calc(var(--u)*31); }
.bbam .bbam-pills--family li:nth-child(1) { top: calc(var(--u)*84); }
.bbam .bbam-pills--family li:nth-child(2) { top: calc(var(--u)*124); }
.bbam .bbam-pills--family li:nth-child(3) { top: calc(var(--u)*164); }
.bbam .bbam-pills--family li:nth-child(4) { top: calc(var(--u)*204); }

/* ---------- 使用方法（reference-04） ---------- */
.bbam .bbam-howto { --lift: calc(var(--u)*30); /* タイトル周りを上のセクションの白余白に被せる量 */
  --head-x: calc(var(--u)*12); /* 「薬用石鹸〜」と「使い方」のセットを左へずらす量 */
  --head-y: calc(var(--u)*8);  /* 同セットを上へ上げる量 */ height: calc(var(--u)*1555); z-index: 2; }
.bbam .bbam-howto .bbam-bg { z-index: 0; }
.bbam .bbam-howto__awa { position: absolute; left: calc(var(--u)*102); top: calc(calc(var(--u)*70) - var(--lift)); width: calc(var(--u)*102); }
.bbam .bbam-howto__title { position: absolute; right: calc(calc(var(--u)*198) + var(--head-x)); top: calc(calc(var(--u)*105) - var(--lift) - var(--head-y)); margin-right: -.06em; font-family: var(--font-sans); font-size: calc(var(--u)*27); line-height: calc(var(--u)*32); font-weight: 900; letter-spacing: .06em; color: #00858a; white-space: nowrap; text-shadow: calc(var(--u)*2.2) 0 0 #fff, calc(var(--u)*1.9) calc(var(--u)*1.1) 0 #fff, calc(var(--u)*1.1) calc(var(--u)*1.9) 0 #fff, 0 calc(var(--u)*2.2) 0 #fff, calc(var(--u)*-1.1) calc(var(--u)*1.9) 0 #fff, calc(var(--u)*-1.9) calc(var(--u)*1.1) 0 #fff, calc(var(--u)*-2.2) 0 0 #fff, calc(var(--u)*-1.9) calc(var(--u)*-1.1) 0 #fff, calc(var(--u)*-1.1) calc(var(--u)*-1.9) 0 #fff, 0 calc(var(--u)*-2.2) 0 #fff, calc(var(--u)*1.1) calc(var(--u)*-1.9) 0 #fff, calc(var(--u)*1.9) calc(var(--u)*-1.1) 0 #fff; }
.bbam .bbam-howto__product { position: absolute; left: calc(var(--u)*222.5); top: calc(calc(var(--u)*40) - var(--lift)); width: calc(var(--u)*118.5); }
.bbam .bbam-howto__awa img, .bbam .bbam-howto__product img { width: 100%; }
.bbam .bbam-howto__lead { position: absolute; right: calc(calc(var(--u)*216) + var(--head-x)); top: calc(calc(var(--u)*65) - var(--lift) - var(--head-y)); text-align: left; font-size: calc(var(--u)*13); line-height: calc(var(--u)*17.5); font-weight: 700; color: #222; white-space: nowrap; text-shadow: 0 0 calc(var(--u)*3) #fff, 0 0 calc(var(--u)*3) #fff; }
/* STEP（各ステップは「バーの上端」を基準にした塊） */
.bbam .bbam-howto__step { position: absolute; left: 0; width: calc(var(--u)*375); height: calc(var(--u)*200); }
.bbam .bbam-howto__step--1 { top: calc(var(--u)*160); }
.bbam .bbam-howto__step--2 { top: calc(var(--u)*435); }
.bbam .bbam-howto__step--3 { top: calc(var(--u)*710); }
.bbam .bbam-howto__step--4 { top: calc(var(--u)*985); }
.bbam .bbam-howto__bar { position: absolute; left: calc(var(--u)*39); top: 0; width: calc(var(--u)*294.5); height: calc(var(--u)*40); background: #00858a; text-align: right; }
.bbam .bbam-howto__bar span { display: block; padding-right: calc(var(--u)*13.5); color: #fff; font-size: calc(var(--u)*20.5); line-height: calc(var(--u)*40); font-weight: 500; white-space: nowrap; }
.bbam .bbam-howto__bar .lbl { position: absolute; left: calc(var(--u)*13.5); }
.bbam .bbam-howto__bar .lbl img { width: 100%; }
.bbam .bbam-howto__step--1 .lbl { top: calc(var(--u)*-2);   width: calc(var(--u)*75.5); }
.bbam .bbam-howto__step--2 .lbl { top: calc(var(--u)*-1.5); width: calc(var(--u)*92); }
.bbam .bbam-howto__step--3 .lbl { top: calc(var(--u)*-2);   width: calc(var(--u)*83.5); }
.bbam .bbam-howto__step--4 .lbl { top: calc(var(--u)*-8.5); width: calc(var(--u)*89.5); }
.bbam .bbam-howto__photo { position: absolute; top: calc(var(--u)*50); width: calc(var(--u)*150); height: calc(var(--u)*150); overflow: hidden; }
.bbam .bbam-howto__photo img { width: 100%; height: 100%; object-fit: cover; }
.bbam .bbam-howto__photo--l { left: calc(var(--u)*40); }
.bbam .bbam-howto__photo--r { left: calc(var(--u)*183.5); }
.bbam .bbam-howto__txt, .bbam .bbam-howto__note { position: absolute; color: #222; white-space: nowrap; font-weight: 500; }
.bbam .bbam-howto__txt { font-size: calc(var(--u)*13.8); line-height: calc(var(--u)*24.8); }
.bbam .bbam-howto__txt--l { left: calc(var(--u)*40); }
.bbam .bbam-howto__txt--r { left: calc(var(--u)*207.5); }
.bbam .bbam-howto__step--1 .bbam-howto__txt { top: calc(var(--u)*107); }
.bbam .bbam-howto__step--2 .bbam-howto__txt { top: calc(var(--u)*90); }
.bbam .bbam-howto__step--3 .bbam-howto__txt { top: calc(var(--u)*90); }
.bbam .bbam-howto__step--4 .bbam-howto__txt { top: calc(var(--u)*70); }
.bbam .bbam-howto__note { left: calc(var(--u)*40); top: calc(var(--u)*120); font-size: calc(var(--u)*12.4); line-height: calc(var(--u)*20); }
/* 矢印（CSSで描画） */
.bbam .bbam-howto__arrow { position: absolute; left: calc(var(--u)*167.5); width: calc(var(--u)*40); height: calc(var(--u)*43); }
.bbam .bbam-howto__arrow--1 { top: calc(var(--u)*377.5); }
.bbam .bbam-howto__arrow--2 { top: calc(var(--u)*651); }
.bbam .bbam-howto__arrow--3 { top: calc(var(--u)*926.5); }
.bbam .bbam-howto__arrow::before { content: ""; position: absolute; left: calc(var(--u)*16.5); top: 0; width: calc(var(--u)*7); height: calc(var(--u)*36); border-radius: calc(var(--u)*3.5); background: linear-gradient(#86e73f, #4fbd4a); }
.bbam .bbam-howto__arrow::after { content: ""; position: absolute; left: calc(var(--u)*6); top: calc(var(--u)*9); width: calc(var(--u)*28); height: calc(var(--u)*28); border-right: calc(var(--u)*7) solid #4fbd4a; border-bottom: calc(var(--u)*7) solid #4fbd4a; border-radius: 0 0 calc(var(--u)*3.5) 0; transform: rotate(45deg); }
.bbam .bbam-howto__arrow--3::before { width: calc(var(--u)*5); left: calc(var(--u)*17.5); }
.bbam .bbam-howto__arrow--3::after { border-width: calc(var(--u)*5); }
/* POINT */
.bbam .bbam-howto__point { position: absolute; left: 0; top: calc(var(--u)*1235); width: calc(var(--u)*375); height: calc(var(--u)*320); background: linear-gradient(180deg, #01a095 0%, #00909a 22%, #00858e 45%, #00858e 100%); }
.bbam .bbam-howto__ptlabel { position: absolute; left: calc(var(--u)*34); top: calc(var(--u)*14); width: calc(var(--u)*71); }
.bbam .bbam-howto__ptlabel img, .bbam .bbam-howto__ptphoto img, .bbam .bbam-howto__warn img { width: 100%; }
.bbam .bbam-howto__ptag { position: absolute; left: calc(var(--u)*203); top: calc(var(--u)*-20); font-size: calc(var(--u)*11); line-height: calc(var(--u)*14); font-style: italic; font-weight: 500; color: #0a9d97; white-space: nowrap; transform: rotate(-17deg); }
.bbam .bbam-howto__ptag::before { content: "\\\00a0"; }
.bbam .bbam-howto__ptag::after { content: "\00a0/"; }
.bbam .bbam-howto__ptphoto { position: absolute; left: calc(var(--u)*40); top: calc(var(--u)*70); width: calc(var(--u)*292.5); }
.bbam .bbam-howto__bubble { position: absolute; left: calc(var(--u)*204); top: calc(var(--u)*-13); width: calc(var(--u)*152); height: calc(var(--u)*130); border-radius: 50%; background: #fffeb1; border: calc(var(--u)*3) solid #d6f6df; box-shadow: 0 0 0 calc(var(--u)*4) #0a9f98; z-index: 2; }
.bbam .bbam-howto__bubble .t1, .bbam .bbam-howto__bubble .t2 { position: absolute; left: calc(var(--u)*8); top: calc(var(--u)*106); width: calc(var(--u)*46); height: calc(var(--u)*34); background: #0a9f98; clip-path: polygon(0 100%, 45% 0, 100% 35%); }
.bbam .bbam-howto__bubble .t2 { left: calc(var(--u)*12.5); top: calc(var(--u)*104); width: calc(var(--u)*38); height: calc(var(--u)*28); background: #fffeb1; clip-path: polygon(5% 100%, 50% 0, 100% 45%); }
.bbam .bbam-howto__bubtxt { position: absolute; left: calc(var(--u)*-3); right: calc(var(--u)*-3); top: calc(var(--u)*13.5); text-align: center; color: #222; white-space: nowrap; }
.bbam .bbam-howto__bubtxt span { display: block; }
.bbam .bbam-howto__bubtxt .l1 { font-size: calc(var(--u)*17); line-height: calc(var(--u)*23.5); font-weight: 900; }
.bbam .bbam-howto__bubtxt .l2 { font-size: calc(var(--u)*16.5); line-height: calc(var(--u)*23.5); font-weight: 900; }
.bbam .bbam-howto__bubtxt .l3 { font-size: calc(var(--u)*13); line-height: calc(var(--u)*19.5); font-weight: 700; }
.bbam .bbam-howto__bubtxt .l4 { font-size: calc(var(--u)*13); line-height: calc(var(--u)*25.5); font-weight: 700; }
.bbam .bbam-howto__warn { position: absolute; left: 0; top: calc(var(--u)*255); width: calc(var(--u)*375); height: calc(var(--u)*40); color: #fff; }
.bbam .bbam-howto__warn picture { position: absolute; left: calc(var(--u)*50); top: 0; width: calc(var(--u)*37); }
.bbam .bbam-howto__warn p { position: absolute; white-space: nowrap; }
.bbam .bbam-howto__warn .w1 { left: calc(var(--u)*85); top: calc(var(--u)*.5); font-size: calc(var(--u)*10.5); line-height: calc(var(--u)*14); font-weight: 500; }
.bbam .bbam-howto__warn .w2 { left: calc(var(--u)*92.5); top: calc(var(--u)*16.5); font-size: calc(var(--u)*17); line-height: calc(var(--u)*22); font-weight: 900; }

/* ==========================================================
   reference-02
   ========================================================== */

/* ---------- スタッフの声 ---------- */
/* voice と faq は同じ背景色を共有する1つの塊にする。
   faq__leaf の mix-blend-mode: multiply は「同じ重なりコンテキスト内の背面」としか合成されないため、
   背景色を持つ親(.bbam-bottom)に isolation を付け、voice/faq 側には背景・z-index を持たせない。 */
.bbam .bbam-bottom { position: relative; background: #e0ecbe; isolation: isolate; z-index: 1; }
.bbam .bbam-voice { height: calc(var(--u)*680); }
.bbam .bbam-voice__sheet { position: absolute; left: calc(var(--u)*20); top: calc(var(--u)*40); width: calc(var(--u)*335); height: calc(var(--u)*600); }
.bbam .bbam-voice__sheet::before { content: ""; position: absolute; left: calc(var(--u)*20); right: calc(var(--u)*-13); top: calc(var(--u)*-8); bottom: calc(var(--u)*-9); background: #b9cd92; transform: rotate(.8deg); }
.bbam .bbam-voice__card { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #fafafc; box-shadow: 0 calc(var(--u)*5) calc(var(--u)*7) rgba(60, 80, 30, .25); }
.bbam .bbam-voice__ttl { position: absolute; left: calc(var(--u)*4); top: calc(var(--u)*20); width: calc(var(--u)*330); }
.bbam .bbam-voice__ttl img { width: 100%; }
.bbam .bbam-voice__pencil { position: absolute; left: calc(var(--u)*-36); top: calc(var(--u)*-28); width: calc(var(--u)*87); z-index: 3; }
.bbam .bbam-voice__pencil img { width: 100%; }
.bbam .bbam-voice__pack { position: absolute; left: calc(var(--u)*329); top: calc(var(--u)*33); width: calc(var(--u)*45); z-index: 3; }
.bbam .bbam-voice__pack img { width: 100%; }
.bbam .bbam-voice__mail { position: absolute; width: calc(var(--u)*37); }
.bbam .bbam-voice__mail img { width: 100%; }
.bbam .bbam-voice__mail--1 { left: calc(var(--u)*15); top: calc(var(--u)*96); }
.bbam .bbam-voice__mail--2 { left: calc(var(--u)*286); top: calc(var(--u)*347); }
.bbam .bbam-voice__photo { position: absolute; width: calc(var(--u)*113); }
.bbam .bbam-voice__photo img { width: 100%; }
.bbam .bbam-voice__photo--1 { left: calc(var(--u)*205); top: calc(var(--u)*97); }
.bbam .bbam-voice__photo--2 { left: calc(var(--u)*17); top: calc(var(--u)*338); }
.bbam .bbam-voice__catch { position: absolute; }
.bbam .bbam-voice__catch--1 { left: calc(var(--u)*30); top: calc(var(--u)*118); }
.bbam .bbam-voice__catch--2 { left: calc(var(--u)*144); top: calc(var(--u)*368); }
.bbam .bbam-voice__catch span { display: table; padding: 0 calc(var(--u)*8); font-size: calc(var(--u)*18.5); line-height: calc(var(--u)*31); font-weight: 500; white-space: nowrap; }
.bbam .bbam-voice__catch .a { background: var(--c-green-mid); color: #fff; }
.bbam .bbam-voice__catch .b { margin-top: calc(var(--u)*1); padding: 0 calc(var(--u)*8); line-height: calc(var(--u)*27); border: calc(var(--u)*2) solid var(--c-green-mid); background: var(--c-yellow); color: var(--c-green-mid); font-feature-settings: "palt"; }
.bbam .bbam-voice__name { position: absolute; font-size: calc(var(--u)*11); line-height: calc(var(--u)*16); font-weight: 700; color: #333; white-space: nowrap; }
.bbam .bbam-voice__name--1 { left: calc(var(--u)*116); top: calc(var(--u)*186); }
.bbam .bbam-voice__name--2 { left: calc(var(--u)*145); top: calc(var(--u)*442); }
.bbam .bbam-voice__txt { position: absolute; font-size: calc(var(--u)*14.4); font-weight: 700; color: #1f1e1c; letter-spacing: .02em; font-feature-settings: "palt"; }
.bbam .bbam-voice__txt--1 { left: calc(var(--u)*30); top: calc(var(--u)*212); }
.bbam .bbam-voice__txt--2 { left: calc(var(--u)*30); top: calc(var(--u)*464); }
.bbam .bbam-voice__txt mark { background: #fbd6e2; color: inherit; }

/* ---------- Q&A ---------- */
/* Q&A はアコーディオンで高さが変わるため、高さ固定にせず中身に合わせて伸ばす（list は通常フロー） */
.bbam .bbam-faq { padding: calc(var(--u)*90) 0 calc(var(--u)*60); }
.bbam .bbam-faq__leaf { position: absolute; left: 0; top: calc(var(--u)*-35); width: calc(var(--u)*224); opacity: .9; mix-blend-mode: multiply; }
.bbam .bbam-faq__leaf img { width: 100%; }
.bbam .bbam-faq__pack { position: absolute; left: calc(var(--u)*46); top: calc(var(--u)*22); width: calc(var(--u)*39); }
.bbam .bbam-faq__pack img { width: 100%; }
.bbam .bbam-faq__ttl { position: absolute; left: calc(var(--u)*88); top: calc(var(--u)*33); font-family: var(--font-serif); font-size: calc(var(--u)*26); line-height: calc(var(--u)*30); font-weight: 700; color: #22664d; white-space: nowrap; }
.bbam .bbam-faq__list { position: relative; margin-left: calc(var(--u)*26); width: calc(var(--u)*324); }
.bbam .bbam-faq__list li + li { margin-top: calc(var(--u)*20); }
.bbam .bbam-faq__item { background: #fff; border-radius: calc(var(--u)*14); box-shadow: calc(var(--u)*5) calc(var(--u)*5) 0 #b5c98c; }
.bbam .bbam-faq__item summary { position: relative; display: flex; align-items: flex-start; padding: calc(var(--u)*13) calc(var(--u)*40) calc(var(--u)*15) calc(var(--u)*13); list-style: none; cursor: pointer; }
.bbam .bbam-faq__item summary::-webkit-details-marker { display: none; }
.bbam .bbam-faq__item summary::marker { content: ""; }
.bbam .bbam-faq__item summary::after { content: ""; position: absolute; right: calc(var(--u)*19); top: calc(var(--u)*16); width: calc(var(--u)*11); height: calc(var(--u)*11); border-right: calc(var(--u)*3.5) solid #22664d; border-bottom: calc(var(--u)*3.5) solid #22664d; transform: rotate(45deg); }
.bbam .bbam-faq__q, .bbam .bbam-faq__ab { flex: none; display: block; width: calc(var(--u)*30); height: calc(var(--u)*30); border-radius: calc(var(--u)*6); color: #fff; font-family: var(--font-serif); font-size: calc(var(--u)*22); line-height: calc(var(--u)*30); text-align: center; font-weight: 700; }
.bbam .bbam-faq__q { background: #22664d; }
.bbam .bbam-faq__ab { background: #c8142d; }
.bbam .bbam-faq__qt { display: block; margin-left: calc(var(--u)*12); font-size: calc(var(--u)*16.6); line-height: calc(var(--u)*27); font-weight: 700; color: #1b1b1b; white-space: nowrap; }
.bbam .bbam-faq__a { position: relative; display: flex; align-items: flex-start; padding: calc(var(--u)*12) calc(var(--u)*13) calc(var(--u)*19); }
.bbam .bbam-faq__a::before { content: ""; position: absolute; left: calc(var(--u)*24); right: calc(var(--u)*24); top: 0; border-top: calc(var(--u)*1) dotted #555; }
.bbam .bbam-faq__at { margin-left: calc(var(--u)*12); margin-right: 0; min-width: 0; font-size: calc(var(--u)*14.4); line-height: calc(var(--u)*26.5); font-weight: 700; color: #222; letter-spacing: .02em; font-feature-settings: "palt"; }
.bbam .bbam-faq__item:not([open]) summary + .bbam-faq__a { display: none; }

/* ==========================================================
   既存サイトCSS対策（site-css-conflict-guard）
   既存CSSの読み込み順の最後に置くこと
   ========================================================== */
.bbam, .bbam section, .bbam article, .bbam header, .bbam nav, .bbam footer { width: auto; }  /* #1 index.css: section{width:1080px} */
.bbam { width: 100%; color: #333; }                                                          /* #4 body#toppage の文字色継承対策 */
.bbam img { max-width: none; display: block; }                                               /* #11 img{max-width:100%} */
.bbam picture { display: block; }
.bbam h1, .bbam h2, .bbam h3 { font-size: 100%; line-height: inherit; margin: 0; }            /* #9 見出しはクラスで指定 */
.bbam summary { display: flex; }                                                             /* #10 summary{display:block} */
.bbam ol, .bbam ul, .bbam li { list-style: none; }
.bbam a:hover img { opacity: 1; }                                                            /* #7 */