@charset "UTF-8";

/*
  ============================================================
  ベビー＆キッズ（BK）プラン紹介ページ リニューアル版
  OISIX_TASK_REQUEST-4763 / 9-10UP

  対象      : kounyuu/include/inc_oic_intro_shinki_service_babyandkids_renewal.jsp
  読み込み  : kounyuu/oic_intro_shinki_service_babyandkids_a.html
              ?dev=true のときだけ head で読み込む。
  ============================================================

  【クラス設計】
  - このファイル専用のプレフィックス .bk-lp__* を使う。
  - 既存の .shinki-service-course__* は shinki.css にあり、兄弟5ページ
    （service / kit / chanto / babyandkids / healthcare）と共有しているため触らない。
  - デリの .service-lp__*（shinki_service_lp_renewal.css）とも分ける。
    デリは 2026/08/27 UP 済みなので、そちらに手を入れると本番に影響する。
    共通化したいパーツが固まった段階で、あらためて切り出す。

  【common.css の落とし穴】
  - common.css は p / span / strong / mark / a に font-size:1rem(=12px) 等を
    「要素セレクタで」直接あてている。親に指定しても子には効かないので、
    サイズや色は対象の要素そのものに書く。
  - mark は italic + bold が付く。マーカー表現に使うときは打ち消す。
  - a は color:#a00 が付く。リンクの色は必ず明示する。

  【レスポンシブ】
  - SPメイン。コンテンツ幅の上限 750px は visitor_shinki.css の
    .visitor { width: 750px !important } で既に効いている。
  - ブレークポイントではなく clamp() の無段階補間で組む。下限 375px / 上限 750px。
  - 「全てを2倍」ではなく、Figma の SP375 / PC750 実測値を項目ごとに拾う。
      clamp(SP値, calc(Xvw + Ypx), PC値)
      X =（PC−SP）/ 3.75 、 Y = SP×2−PC
  - サイズはセクション単位の変数（--fv-* など）に持たせ、調整は変数の上書きだけで済ませる。

  【画像】
  - 遅延読み込みは native の loading="lazy" decoding="async" を使う。
    jquery.lazyload（src がダミー）は JS を実行しない AI クローラーから
    画像URLが見えず、横スクロールコンテナ内でも読み込まれないため使わない。
  - CLS対策の width/height 属性は「CSS が width と height の両方を確定させているか」を
    確認してから付ける。片側しか確定していない画像に付けると崩れる。
  ============================================================
*/

/* ---------------------------------------------------------------
   ルート
   --------------------------------------------------------------- */
.bk-lp {
  --lp-side: clamp(24px, 6.4vw, 48px);
  --lp-text: #1A1A1A;
  --bk-red: #EA5532;
  --bk-yellow: #FFE200;
  --bk-green: #5CB531;
  --bk-red-pale: #FBDAD1;
  --bk-yellow-pale: #FFF799;
  --bk-green-pale: #D6E9C4;
  --lp-accent: var(--bk-red);
  --lp-marker: #F6DA7B;
  --lp-marker-pale: var(--bk-green-pale);

  --lp-hige-length: clamp(66px, calc(21.6vw - 15px), 147px);
  --lp-hige-ratio: 0.6096;

  --heading-label-size: clamp(12px, 3.2vw, 24px);
  --heading-text-size: clamp(32px, calc(5.3333vw + 12px), 52px);
  --heading-amp-size: clamp(24px, calc(4.2667vw + 8px), 40px);
  --section-title-size: clamp(20px, calc(4.2667vw + 4px), 36px);
  --lead-size: clamp(20px, calc(2.6667vw + 10px), 30px);
  --body-size: clamp(14px, calc(1.6vw + 8px), 20px);

  color: var(--lp-text);
}

.bk-lp img {
  max-width: 100%;
}

/* ---------------------------------------------------------------
   共通パーツ
   --------------------------------------------------------------- */

/* セクション見出し。ラベルは見出し要素の中に入っている（JSP側のコメント参照） */
.bk-lp__heading {
  margin: 0;
  padding: 0 var(--lp-side);
  text-align: center;
}

.bk-lp__heading-label {
  position: relative;
  display: inline-block;
  padding: clamp(3px, 0.5333vw + 1px, 7px) clamp(14px, 3.7333vw, 28px);
  border-radius: var(--radius-full);
  background: #E35531;
  color: #FFF;
  font-size: var(--heading-label-size);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.48px;
  font-feature-settings: 'halt' 1;
}

.bk-lp__heading-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: clamp(9.5px, 2.5333vw, 19px) clamp(5.5px, 1.4667vw, 11px) 0;
  border-color: #E35531 transparent transparent;
  transform: translate(-50%, -4px);
}

/* ヒゲ ＋ 見出しテキストの行 */
.bk-lp__heading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: clamp(6px, 1.6vw, 12px);
  padding-bottom: clamp(8px, 2.2667vw, 17px);
  color: var(--lp-text);
}

.bk-lp__heading-main {
  color: var(--lp-text);
  font-size: var(--heading-text-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-feature-settings: 'halt' 1;
}

/* 「＆」だけ一回り小さい */
.bk-lp__heading-amp {
  color: inherit;
  font-size: var(--heading-amp-size);
  font-weight: inherit;
}

/* ---- ヒゲ ----
   画像（146x89）を90度回転して縦向きに使う。
   height:0 にして見出しの行の高さを膨らませず、画像は絶対配置で中央に置く。 */
.bk-lp__hige {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: calc(var(--lp-hige-length) * var(--lp-hige-ratio));
  height: 0;
  line-height: 0;
}

.bk-lp__hige img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--lp-hige-length);
  /* .bk-lp img の max-width:100% を打ち消す。回転前は親より横長になるため */
  max-width: none;
  height: auto;
}

/* デザインは rotate → scaleY の順。逆にすると鏡像がずれる */
.bk-lp__hige.-left img {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(-1);
}

.bk-lp__hige.-right img {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 見出しビジュアルに焼き込まれた文言をテキストでも出す用の見出し。
   ヒゲ付きの .bk-lp__heading とは別で、装飾を持たない素の見出し */
.bk-lp__section-title {
  margin: 0;
  padding: 0 var(--lp-side);
  color: var(--lp-text);
  font-size: var(--section-title-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.72px;
  text-align: center;
  font-feature-settings: 'halt' 1;
}

/* 本文 */
.bk-lp__text {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.48px;
  font-feature-settings: 'halt' 1;
}

.bk-lp__text + .bk-lp__text {
  margin-top: 20px;
}

.bk-lp__lead {
  margin: 0 0 clamp(16px, calc(5.3333vw - 4px), 36px);
  color: var(--lp-text);
  font-size: var(--lead-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.64px;
  font-feature-settings: 'halt' 1;
}

h3.bk-lp__lead {
  font-size: clamp(20px, calc(4.2667vw + 4px), 36px);
}

.bk-lp__text + .bk-lp__lead,
.bk-lp__link + .bk-lp__lead {
  margin-top: clamp(40px, calc(2.1333vw + 32px), 48px);
}

.bk-lp__link {
  margin: clamp(16px, calc(2.1333vw + 8px), 24px) 0 28px;
}

.bk-lp__link .shinki-btn.primary-text,
.bk-lp__link .shinki-btn.primary-text .shinki-btn__label {
  font-size: clamp(14px, calc(1.6vw + 8px), 20px);
}

/* ---------------------------------------------------------------
   01. FV
   --------------------------------------------------------------- */
.bk-lp__fv {
  /* PC調整はこの変数の上書きだけで済ませる */
  --fv-title-size: clamp(24px, calc(8.5333vw - 8px), 56px); /* SP24 / PC56 */
  --fv-title-gap: clamp(4px, 1.0667vw, 8px);
  --fv-title-pad: clamp(12px, 3.2vw, 24px);
  --fv-title-radius: clamp(4px, 1.0667vw, 8px);

  /* Figma実測 SP55 / PC80 */
  padding-bottom: clamp(55px, calc(6.6667vw + 30px), 80px);
}

/* h1 が FV画像とコピーの両方を含むため、左右の余白は行側で持たせる */
.bk-lp__fv-title {
  margin: 0;
  padding: 0;
}

.bk-lp__fv-img {
  display: block;
  width: 100%;
  height: auto;
  /* 直下のコピーは、この画像の下端から固定量だけ引き上げて重ねている
     （.bk-lp__fv-img + .bk-lp__fv-title-line）。そのため画像の箱の高さが
     読み込み前後で変わるとコピーの位置も動く。
     width/height 属性から比率を得られない環境（古い Safari 等）だと
     読み込み完了まで高さが 0 になるので、比率をここで明示して固定する。
     値は実ファイル（750x974）と一致しているので見た目は変わらない */
  aspect-ratio: 750 / 974;
}

.bk-lp__fv-title-line {
  /* 画像に重ねるため位置指定要素にする。
     ブロックレベルの置換要素（img）は兄弟ブロックの背景より後に描画されるので、
     position を持たせないとマーカー帯だけが画像の下に隠れる（文字は見える） */
  position: relative;
  display: block;
  width: fit-content;
  margin-top: var(--fv-title-gap);
  /* FV見出しだけ本文の左右余白（--lp-side）より広い SP24 / PC62 */
  margin-left: clamp(24px, calc(10.1333vw - 14px), 62px);
  margin-right: clamp(24px, calc(10.1333vw - 14px), 62px);
  padding: 0 var(--fv-title-pad);
  border-radius: var(--fv-title-radius);
  /* 下地の色 ＋ 口コミ・QA見出しと同じ紙目テクスチャ。
     白いノイズが一様に乗った PNG（750x200）なので、等倍のまま repeat で敷く */
  background-color: var(--lp-marker);
  background-image: url(../../shared/img/2636/oic_intro_shinki_service_bg_pattern.png);
  color: var(--lp-text);
  font-size: var(--fv-title-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.96px;
  /* 「、」「！」の全角アキを詰める。無いと行末に約0.5em の空きが残る */
  font-feature-settings: 'halt' 1;
}

/* 1行目だけ負のマージンで画像に食い込ませる（Figma実測 SP44 / PC90）。
   コピーは画像より後ろのDOMなので、重ねても上に描画される */
.bk-lp__fv-img + .bk-lp__fv-title-line {
  margin-top: clamp(-90px, calc(-12.2667vw + 2px), -44px);
}

/* ---------------------------------------------------------------
   02. ベビー＆キッズとは？
   --------------------------------------------------------------- */
.bk-lp__about {
  padding-bottom: clamp(40px, 10.6667vw, 80px);
}

.bk-lp__about-visual {
  margin: clamp(16px, 4.2667vw, 32px) 0 0;
}

.bk-lp__about-visual-img {
  display: block;
  width: 100%;
  height: auto;
}

.bk-lp__about-body {
  margin-top: clamp(24px, 6.4vw, 48px);
  padding: 0 var(--lp-side);
}

/* 注記の米印。本文と同じ大きさにしない */
.bk-lp__note {
  color: inherit;
  font-size: 0.7em;
  font-weight: inherit;
  vertical-align: super;
}

/* common.css が mark に italic + bold + 黄背景をあてるので打ち消す。
   デザインは文字全体ではなく下半分に帯がかかる線マーカーなので、
   ベタ塗りではなくグラデーションで下 0.5em ぶんだけ塗る */
.bk-lp__marker {
  background: linear-gradient(to top, var(--lp-marker-pale) 0.5em, transparent 0.5em);
  color: inherit;
  /* リセットが mark にも font-size:1rem(12px) を当てるので、地の文に揃え直す */
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
}

/* ---------------------------------------------------------------
   03-05. 商品メニュー
   --------------------------------------------------------------- */
.bk-lp__menu {
  /* PC調整はこの変数の上書きだけで済ませる */
  --category-title-size: clamp(16px, calc(5.3333vw - 4px), 36px);
  --category-title-tracking: clamp(0.64px, calc(0.2133vw - 0.16px), 1.44px);
  --rank-text-size: clamp(20px, calc(4.2667vw + 4px), 36px);
  --rank-name-size: clamp(16px, calc(2.1333vw + 8px), 24px);
  --rank-sub-size: clamp(10px, calc(1.6vw + 4px), 16px);
  --rank-icon-width: clamp(32px, calc(9.0667vw - 2px), 66px);
  --rank-card-pad: clamp(20px, calc(5.3333vw), 40px);
  --rank-card-pad-top: clamp(16px, 4.2667vw, 32px);
  --rank-card-radius: clamp(10px, 2.6667vw, 20px);
  --rank-card-gap: clamp(16px, 4.2667vw, 32px);
  --rank-badge-size: clamp(24px, 5.3333vw, 40px);
  --rank-badge-font: clamp(14px, calc(2.6667vw + 4px), 24px);
  --rank-compact-img: clamp(110px, 29.3333vw, 220px);
  --rank-compact-gap: clamp(14px, 3.7333vw, 28px);

  padding-bottom: clamp(40px, 10.6667vw, 80px);
}

.bk-lp__menu-visual {
  margin: clamp(16px, 4.2667vw, 32px) 0 0;
}

/* カテゴリの見出しビジュアルは全幅ではなく本文と同じ幅（654px @PC） */
.bk-lp__category-visual {
  margin: clamp(16px, 4.2667vw, 32px) 0 0;
  padding: 0 var(--lp-side);
}

.bk-lp__menu-visual-img,
.bk-lp__category-visual-img {
  display: block;
  width: 100%;
  height: auto;
}

.bk-lp__category {
  margin-top: clamp(32px, 8.5333vw, 64px);
}

/* 年齢別コンテンツ同士の間は広めに SP56 / PC100。
   1つ目（おやこごはんKit）はメニュー導入文の直後なので既定の 32/64 のまま */
.bk-lp__category + .bk-lp__category {
  margin-top: clamp(56px, calc(11.7333vw + 12px), 100px);
}

/* 「1歳半～」と商品名を1つの見出しにまとめている（JSP側のコメント参照） */
.bk-lp__category-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0 var(--lp-side);
}

.bk-lp__category-age {
  color: var(--lp-text);
  font-size: var(--category-title-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--category-title-tracking);
}

.bk-lp__category-age::after {
  content: '｜';
  color: inherit;
}

.bk-lp__category-name {
  color: var(--lp-text);
  font-size: var(--category-title-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--category-title-tracking);
}

.bk-lp__category-body {
  margin-top: clamp(16px, 4.2667vw, 32px);
  padding: 0 var(--lp-side);
}

/* ---- ランキング ---- */
/* デザインどおりヒゲ付き。ヒゲは 02 の見出しより短いので length を上書きする */
.bk-lp__rank-heading {
  --lp-hige-length: clamp(66px, calc(8.5333vw + 34px), 98px);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* 下は Figma 実測、上は本文との間を広げたいので別値 SP40 / PC64 */
  margin: clamp(40px, calc(6.4vw + 16px), 64px) 0 0;
  padding: 0 var(--lp-side) clamp(16px, calc(0.2667vw + 15px), 17px);
}

/* 商品説明文の .bk-lp__rank-text と名前が衝突していたため別名にしている */
.bk-lp__rank-heading-text {
  color: var(--lp-text);
  font-size: var(--rank-text-size);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.8px;
  text-align: center;
  /* BEST10 のように長くてもヒゲとの間で折り返さない */
  white-space: nowrap;
  font-feature-settings: 'halt' 1;
}

.bk-lp__rank {
  padding: 0 var(--lp-side);
}

/* 見た目上は隠すがフォーカスは受けられるようにしておく。
   position は absolute ではなく fixed。label を押すとチェックボックスに
   フォーカスが移り、ブラウザがその要素を画面内に入れようと自動スクロールする。
   absolute（かつ top/left 未指定）だと静的位置＝セクション先頭のままなので、
   押すたびにカード3枚ぶん上へ引き戻され、開閉アニメーションが画面外で終わっていた。
   fixed で常に画面内に置けば自動スクロールが起きない。 */
.bk-lp__rank-switch {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.bk-lp__rank-list {
  margin: clamp(16px, 4.2667vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

/* ---- ランキングカード（1〜3位） ---- */
.bk-lp__rank-item {
  box-sizing: border-box;
  margin-top: var(--rank-card-gap);
  padding: var(--rank-card-pad-top) var(--rank-card-pad) var(--rank-card-pad);
  border: 1px solid #DEDEDE; /* デザイン指定値 */
  border-radius: var(--rank-card-radius);
  background: #FFFBF3; /* デザイン指定値 */
}

/* 1〜3位はカードの背景色を変える（いずれもデザイン指定値） */
.bk-lp__rank-item.-rank2 {
  background: #F9FDFE;
}

.bk-lp__rank-item.-rank3 {
  background: #F8F5F2;
}

.bk-lp__rank-list > .bk-lp__rank-item:first-child {
  margin-top: 0;
}

/* 順位アイコン＋商品名の行 */
.bk-lp__rank-head {
  display: flex;
  align-items: center;
  gap: clamp(9px, 2.4vw, 16px);
}

/* 1位だけ縦長（王冠つき）。高さは auto にして縦横比を保つ */
.bk-lp__rank-icon {
  flex-shrink: 0;
  width: var(--rank-icon-width);
  height: auto;
}

.bk-lp__rank-names {
  flex: 1;
  min-width: 0;
}

.bk-lp__rank-name {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--rank-name-size);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.96px;
  font-feature-settings: 'halt' 1;
}

/* パクパクごはんの BEST10 だけキャッチが商品名の上に来る。
   見た目は副菜行と同じ扱いにして、順序だけ入れ替える */
.bk-lp__rank-catch {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--rank-sub-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.64px;
  font-feature-settings: 'palt' 1;
}

.bk-lp__rank-sub {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--rank-sub-size);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.64px;
  font-feature-settings: 'palt' 1;
}

.bk-lp__rank-figure {
  margin: var(--rank-card-gap) 0 0;
}

.bk-lp__rank-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.bk-lp__rank-text {
  margin: var(--rank-card-gap) 0 0;
  color: var(--lp-text);
  /* 商品説明文だけ本文より小さい SP12 / PC20 */
  font-size: clamp(12px, calc(2.1333vw + 4px), 20px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.8px;
  font-feature-settings: 'palt' 1;
}

/* ---- ランキングカード（4位以降・コンパクト表示） ---- */
/* デザイン指定：画像を小さくし、順位は番号バッジで示す */
.bk-lp__rank-item.-compact {
  background: transparent;
}

.bk-lp__rank-item.-compact .bk-lp__rank-head {
  align-items: center;
  gap: var(--rank-compact-gap);
}

.bk-lp__rank-item.-compact .bk-lp__rank-figure {
  flex-shrink: 0;
  width: var(--rank-compact-img);
  margin: 0;
}

.bk-lp__rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--rank-badge-size);
  height: var(--rank-badge-size);
  margin: 0 0 clamp(6px, 1.6vw, 12px);
  border-radius: var(--radius-full);
  background: var(--bk-green);
}

.bk-lp__rank-badge-no {
  color: #FFF;
  font-size: var(--rank-badge-font);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.96px;
}

.bk-lp__rank-item.-compact .bk-lp__rank-name {
  /* 1〜3位より一段小さい SP14。PC は 1〜3位（16→24）と同じ比率で 21 */
  font-size: clamp(14px, calc(1.8667vw + 7px), 21px);
  line-height: 1.6;
  letter-spacing: 0.8px;
}

.bk-lp__rank-item.-compact .bk-lp__rank-sub {
  margin-top: clamp(4px, 1.0667vw, 8px);
  line-height: 1.4;
  letter-spacing: normal;
}

/* 4件目以降。HTML には出力したまま、高さだけ 0 にして隠す。
   display:none を使わないのは AI・検索エンジンに読ませたいため。

   高さ auto へアニメーションさせる方法は2つある。
     grid-template-rows: 0fr→1fr … Chrome 117+ / Safari 17.4+ / Firefox 127+
     interpolate-size + max-content … Chrome 129+ / Safari 26+ / Firefox 非対応
   対応範囲が広い前者を採用する（デリの比較表は後者だが、あちらは
   マスクの opacity フェードが別に掛かるため未対応環境でも動いて見える）。

   グリッド項目には overflow:hidden が要る。これが無いと自動最小サイズが
   コンテンツ高になり、行を 0 にしても縮まない。 */
.bk-lp__rank-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

.bk-lp__rank-more > * {
  min-height: 0;
  overflow: hidden;
}

.bk-lp__rank-switch:checked ~ .bk-lp__rank-more {
  grid-template-rows: 1fr;
}

/* グリッド項目（ol）自身の margin は自分の overflow では切り取られず、
   高さ0のはずの行からはみ出して隙間になる。余白は内側の li に持たせる */
.bk-lp__rank-more .bk-lp__rank-list {
  margin-top: 0;
}

.bk-lp__rank-more .bk-lp__rank-list > .bk-lp__rank-item:first-child {
  margin-top: clamp(16px, 4.2667vw, 32px);
}

/* アニメーションを切っている環境では即座に開閉する */
@media (prefers-reduced-motion: reduce) {
  .bk-lp__rank-more,
  .bk-lp__rank-toggle-icon::after {
    transition: none;
  }
}

.bk-lp__rank-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: clamp(16px, 4.2667vw, 32px) auto 0;
  padding: 8px 28px;
  border: 1px solid var(--lp-text);
  border-radius: var(--radius-full);
  background: #FFF;
  color: var(--lp-text);
  font-size: clamp(14px, 3.7333vw, 28px);
  line-height: 1.8;
  cursor: pointer;
}

.bk-lp__rank-switch:focus-visible ~ .bk-lp__rank-toggle {
  outline: 2px solid var(--bk-green);
  outline-offset: 2px;
}

/* ＋ / − のアイコン */
.bk-lp__rank-toggle-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.bk-lp__rank-toggle-icon::before,
.bk-lp__rank-toggle-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--lp-text);
  transform: translate(-50%, -50%);
}

.bk-lp__rank-toggle-icon::before {
  width: 12px;
  height: 1.5px;
}

.bk-lp__rank-toggle-icon::after {
  width: 1.5px;
  height: 12px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ランキングのトグルの下だけ、補足ボックスとの間を SP32 / PC48 空ける。
   隣接マージンは大きい方に相殺されるので、次要素の margin-top より大きい値にしておく */
.bk-lp__rank > .bk-lp__rank-toggle {
  margin-bottom: clamp(32px, calc(4.2667vw + 16px), 48px);
}

.bk-lp__rank-switch:checked ~ .bk-lp__rank-toggle .bk-lp__rank-toggle-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いているあいだはラベルを「閉じる」に差し替える。
   :checked で表示を入れ替えるだけなので JS は不要 */
.bk-lp__rank-toggle-close {
  display: none;
}

.bk-lp__rank-switch:checked ~ .bk-lp__rank-toggle .bk-lp__rank-toggle-open {
  display: none;
}

.bk-lp__rank-switch:checked ~ .bk-lp__rank-toggle .bk-lp__rank-toggle-close {
  display: inline;
}

/* ---- 箇条書き ---- */
.bk-lp__list {
  margin: clamp(16px, calc(1.0667vw + 12px), 20px) 0 0;
  padding: 0;
  list-style: none;
}

.bk-lp__list-item {
  position: relative;
  padding-left: 1.2em;
  color: var(--lp-text);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.48px;
}

.bk-lp__list-item + .bk-lp__list-item {
  margin-top: 4px;
}

.bk-lp__list-item::before {
  content: '・';
  position: absolute;
  left: 0;
  color: inherit;
}

/* ---- チェックリスト ---- */
/* 緑丸のチェックアイコンは画像を使わず、下地の丸＋白いチェックのSVGで描く。
   アイコンは1行目の行送りの中央に合わせる（縦位置を em で出しているので
   文字サイズが変わっても中央に乗る） */
.bk-lp__checklist {
  --check-size: clamp(22px, calc(2.6667vw + 12px), 32px);
  --check-gap: clamp(10px, calc(0.5333vw + 8px), 12px); /* SP10 / PC12 */

  margin: clamp(16px, 4.2667vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.bk-lp__checklist-item {
  position: relative;
  padding-left: calc(var(--check-size) + var(--check-gap));
  color: var(--lp-text);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.48px;
  font-feature-settings: 'halt' 1;
}

.bk-lp__checklist-item + .bk-lp__checklist-item {
  margin-top: clamp(12px, 3.2vw, 24px);
}

.bk-lp__checklist-item::before {
  content: '';
  position: absolute;
  top: calc((1.8em - var(--check-size)) / 2);
  left: 0;
  width: var(--check-size);
  height: var(--check-size);
  border-radius: var(--radius-full);
  background: var(--bk-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-10' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* チェックリスト項目の中に置くテキストリンク。
   .bk-lp__link の余白はブロック単体用なので、ここでは詰める */
.bk-lp__checklist-link {
  display: block;
  margin-top: clamp(4px, 1.0667vw, 8px);
}

.bk-lp__checklist-link .shinki-btn.primary-text,
.bk-lp__checklist-link .shinki-btn.primary-text .shinki-btn__label {
  font-size: clamp(14px, calc(1.6vw + 8px), 20px);
}

/* 強調。common.css が strong に font-size:1rem(12px) を当てるので打ち消す */
.bk-lp__strong {
  color: inherit;
  font-size: inherit;
  font-weight: 700;
}

/* ---- 注釈（※で始まる出典表記） ---- */
.bk-lp__annotation {
  margin: clamp(12px, 3.2vw, 24px) 0 0;
  color: var(--lp-text);
  font-size: clamp(10px, calc(1.6vw + 4px), 16px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.4px;
}

/* 注釈のあとに本文が続くケース（※2 のように文中の注釈を挟むとき） */
.bk-lp__annotation + .bk-lp__text {
  margin-top: clamp(16px, 4.2667vw, 32px);
}

/* ---- 段落頭の小見出し（カテゴリ内） ---- */
.bk-lp__subheading {
  /* 上 SP24 / PC64、下 SP16 / PC24 */
  margin: clamp(24px, calc(10.6667vw - 16px), 64px) 0 clamp(16px, calc(1.0667vw + 12px), 24px);
  color: var(--lp-text);
  font-size: clamp(20px, calc(2.6667vw + 10px), 30px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.6px;
  font-feature-settings: 'halt' 1;
}

.bk-lp__checklist + .bk-lp__text {
  margin-top: clamp(16px, calc(1.0667vw + 12px), 20px);
}

/* チェックリストの直後に小見出しが来るときは、既定より広く取る。
   リストの下端に余白が無く窮屈に見えるため（デザイナー指摘） */
.bk-lp__checklist + .bk-lp__subheading {
  margin-top: clamp(32px, 8.5333vw, 64px);
}

.bk-lp__list + .bk-lp__text {
  margin-top: clamp(16px, calc(1.0667vw + 12px), 20px);
}

/* ---- 補足ボックス（Figma: Callout_Banner） ---- */
/* 塗りのカードではなく、白地に上下ボーダーだけを引く帯 */
.bk-lp__note-box {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4.2667vw, 32px);
  box-sizing: border-box;
  margin: clamp(16px, 4.2667vw, 32px) var(--lp-side) 0;
  padding: clamp(20px, 5.3333vw, 40px) clamp(16px, 4.2667vw, 32px);
  border-top: 1px solid #DEDEDE; /* デザイン指定値 */
  border-bottom: 1px solid #DEDEDE; /* デザイン指定値 */
  background: #FFF;
  text-align: left;
}

/* 電球アイコンは縮ませない。属性の width/height は height:auto で無効化する */
.bk-lp__note-box-icon {
  flex: 0 0 auto;
  margin: 0;
  width: clamp(36px, 9.6vw, 72px);
}

.bk-lp__note-box-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.bk-lp__note-box-body {
  flex: 1 1 auto;
  min-width: 0;
}

.bk-lp__note-box-title {
  margin: 0;
  color: #5CB531; /* デザイン指定値 */
  font-size: clamp(12px, calc(1.0667vw + 8px), 16px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-feature-settings: 'halt' 1;
}

.bk-lp__note-box-title + .bk-lp__note-box-text {
  margin-top: clamp(4px, 1.0667vw, 8px);
}

.bk-lp__note-box-text {
  margin: 0;
  color: var(--lp-text);
  font-size: clamp(12px, calc(1.0667vw + 8px), 16px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ---- CTA ---- */
/* デリ（.service-lp__cta-link）と同じ見た目に揃えている */
.bk-lp__cta {
  /* PC調整はこの変数の上書きだけで済ませる */
  --cta-label-size: clamp(18px, calc(3.4667vw + 5px), 31px);
  --cta-thumb-width: clamp(63px, calc(12vw + 18px), 115px); /* SP63 / PC115 */
  --cta-arrow-length: clamp(10px, calc(1.6vw + 4px), 16px); /* ▶ の横方向の長さ SP10 / PC16 */
  --cta-arrow-half: clamp(8px, calc(1.8667vw + 1px), 15px);  /* ▶ の縦half SP8 / PC15。length より大きいほど尖って見える */
  --cta-pad-y: clamp(20px, calc(3.2vw + 8px), 32px); /* ボタン本体の上下 padding。ボタン高さが SP90 / PC150 になる値 */
  --cta-ring: clamp(3px, calc(0.5333vw + 1px), 5px); /* 白ボーダー SP3 / PC5 */

  /* 箱画像がボタン左端からはみ出すので、その分より広い左右 padding を確保する */
  /* 上 SP40 / PC48、下 SP56 / PC100。
     下は次の .bk-lp__category（margin-top SP32 / PC64）と相殺されるので、
     それより大きい値を指定して見た目の余白をこちらで決める */
  margin: clamp(40px, calc(2.1333vw + 32px), 48px) 0 clamp(56px, calc(11.7333vw + 12px), 100px);
  padding: 0 clamp(28px, 7.4667vw, 56px);
  text-align: center;
}

/* common.css が a に color/font-size を直接あてるため、ここで明示的に上書きする */
.bk-lp__cta-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* max-width を付けるので中央寄せは margin auto で行う */
  max-width: 560px;
  min-height: 78px;
  margin: 0 auto;
  padding: var(--cta-pad-y) 44px var(--cta-pad-y) 40px;
  border-radius: var(--radius-medium); /* 16px */
  background: #D33A20; /* デザイン指定値 */
  color: #FFF;
  font-size: var(--cta-label-size);
  text-decoration: none;
  box-shadow: 0 0 0 var(--cta-ring) #FFF, 0 0 8px 2px rgba(0, 0, 0, 0.22);
}

/* 箱はボタンの左端からはみ出す（デザイン実測） */
.bk-lp__cta-thumb {
  position: absolute;
  top: 50%;
  left: clamp(-50px, calc(-6.9333vw + 2px), -24px); /* SP-24 / PC-50 */
  width: var(--cta-thumb-width);
  height: auto;
  transform: translateY(-50%);
}

.bk-lp__cta-label {
  color: #FFF;
  font-size: var(--cta-label-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.72px;
  text-align: center;
}

/* 右端の ▶。縦に長い二等辺三角形にする（正三角形に見えないよう縦を長く） */
.bk-lp__cta-link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 0;
  height: 0;
  border-width: var(--cta-arrow-half) 0 var(--cta-arrow-half) var(--cta-arrow-length);
  border-style: solid;
  border-color: transparent transparent transparent #FFF;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------
   06. お客さまの声
   --------------------------------------------------------------- */
.bk-lp__voice {
  /* PC調整はこの変数の上書きだけで済ませる。デリ（.service-lp__voice）と同じ組み方 */
  --voice-title-size: clamp(14px, calc(3.2vw + 2px), 26px);
  --voice-text-size: clamp(12px, calc(1.6vw + 6px), 18px);
  --voice-avatar-size: clamp(75px, 20vw, 150px);
  --voice-avatar-offset: clamp(65px, 17.3333vw, 130px); /* アイコンがカードより上に出る量 */
  --voice-avatar-gap: clamp(10px, 2.6667vw, 20px);      /* アイコン下端からタイトルまで */
  --voice-arc-size: clamp(138px, 36.8vw, 276px);        /* アイコン背後の円の直径 */
  /* 円がカードより上に出る量＝半月の高さ。
     アイコンのはみ出し量より小さくすることで、頭が半月から出る */
  --voice-arc-offset: clamp(49px, 13.0667vw, 98px);
  --voice-card-pad-x: clamp(16px, 4.2667vw, 32px);
  --voice-card-pad-bottom: clamp(20px, 5.3333vw, 40px);
  /* アイコンがカードに重なっている分を足して、上の間隔を一定に保つ */
  --voice-card-pad-top: calc(var(--voice-avatar-size) - var(--voice-avatar-offset) + var(--voice-avatar-gap));
  --voice-card-radius: clamp(8px, 2.1333vw, 16px);
  --voice-card-gap: clamp(8px, 2.1333vw, 16px);

  padding-bottom: clamp(40px, 10.6667vw, 80px);
}

.bk-lp__voice-visual {
  margin: clamp(16px, 4.2667vw, 32px) 0 0;
}

.bk-lp__voice-visual-img {
  display: block;
  width: 100%;
  height: auto;
}

.bk-lp__voice-body {
  margin-top: clamp(24px, 6.4vw, 48px);
  padding: 0 var(--lp-side);
}

.bk-lp__voice-wrap {
  margin-top: clamp(24px, 6.4vw, 48px);
}

.bk-lp__voice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 背景は淡緑→淡黄→淡赤の3色を順に繰り返す。半月も同じ色を使うので変数で持つ。
   「もっと見る」の中は別リストだが、4件目が淡緑から始まるので通し番号と一致する */
.bk-lp__voice-item {
  --voice-bg: var(--bk-green-pale);

  position: relative;
  margin-top: var(--voice-avatar-offset);
  padding: var(--voice-card-pad-top) var(--voice-card-pad-x) var(--voice-card-pad-bottom);
  border-radius: var(--voice-card-radius);
  /* 下地の色 ＋ FV見出しと同じ紙目テクスチャ */
  background-color: var(--voice-bg);
  background-image: url(../../shared/img/2636/oic_intro_shinki_service_bg_pattern.png);
}

.bk-lp__voice-item:nth-child(3n + 2) {
  --voice-bg: var(--bk-yellow-pale);
}

.bk-lp__voice-item:nth-child(3n) {
  --voice-bg: var(--bk-red-pale);
}

/* アイコンの背後に敷く円。z-index:-1 でカードの背景より後ろに置き、
   カードからはみ出した上部だけが半月として見える。
   角丸の矩形ではなく真円なので、Figma と同じ弧になる */
.bk-lp__voice-item::before {
  content: '';
  position: absolute;
  top: calc(var(--voice-arc-offset) * -1);
  left: 50%;
  z-index: -1;
  width: var(--voice-arc-size);
  height: var(--voice-arc-size);
  border-radius: var(--radius-full);
  background-color: var(--voice-bg);
  background-image: url(../../shared/img/2636/oic_intro_shinki_service_bg_pattern.png);
  transform: translateX(-50%);
}

.bk-lp__voice-item + .bk-lp__voice-item {
  margin-top: calc(var(--voice-avatar-offset) + var(--voice-card-gap));
}

/* カード上端から上にはみ出す */
.bk-lp__voice-avatar {
  position: absolute;
  top: calc(var(--voice-avatar-offset) * -1);
  left: 50%;
  width: var(--voice-avatar-size);
  margin: 0;
  transform: translateX(-50%);
}

.bk-lp__voice-avatar img {
  display: block;
  width: 100%;
  height: auto;
}

.bk-lp__voice-title {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--voice-title-size);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: center;
  font-feature-settings: 'halt' 1;
}

/* common.css の blockquote リセットに任せず、余白と字送りを明示する */
.bk-lp__voice-text {
  margin: clamp(10px, 2.6667vw, 20px) 0 0;
  padding: 0;
  color: var(--lp-text);
  font-size: var(--voice-text-size);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
  text-align: justify;
  font-feature-settings: 'halt' 1;
}

/* もっと見るの中は 1件目にも前のカードとの間隔を戻す */
.bk-lp__rank-more .bk-lp__voice-list > .bk-lp__voice-item:first-child {
  margin-top: calc(var(--voice-avatar-offset) + var(--voice-card-gap));
}

/* ---------------------------------------------------------------
   07. よくある質問
   --------------------------------------------------------------- */
.bk-lp__faq {
  /* PC調整はこの変数の上書きだけで済ませる */
  --faq-mark-size: clamp(24px, calc(3.2vw + 12px), 36px);
  --faq-mark-font: clamp(12px, calc(1.6vw + 6px), 18px);
  --faq-text-size: clamp(12px, calc(1.6vw + 6px), 18px);
  --faq-gap: clamp(12px, 3.2vw, 24px);

  padding-bottom: clamp(40px, 10.6667vw, 80px);
}

.bk-lp__faq-visual {
  margin: clamp(16px, 4.2667vw, 32px) 0 0;
}

.bk-lp__faq-visual-img {
  display: block;
  width: 100%;
  height: auto;
}

.bk-lp__faq-body {
  margin-top: clamp(24px, 6.4vw, 48px);
  padding: 0 var(--lp-side);
}

.bk-lp__faq-list {
  margin: clamp(24px, 6.4vw, 48px) 0 0;
}

/* グループ見出し。上 SP40 / PC56、下 SP16 / PC32 */
.bk-lp__faq-group-title {
  margin: clamp(40px, calc(4.2667vw + 24px), 56px) 0 clamp(16px, 4.2667vw, 32px);
  color: var(--lp-text);
  font-size: clamp(16px, calc(2.1333vw + 8px), 24px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.64px;
  font-feature-settings: 'halt' 1;
}

.bk-lp__faq-group {
  margin: 0;
}

.bk-lp__faq-q,
.bk-lp__faq-a {
  display: flex;
  align-items: flex-start;
  gap: var(--faq-gap);
  margin: 0;
}

.bk-lp__faq-q {
  padding-top: clamp(16px, 4.2667vw, 32px);
}

/* 区切り線は Q&A の1組を下端で締める形にする。
   これで各グループの最後の設問にも線が入る（デザイン指定）。
   グループ先頭だけは上にも線を引いて、組の上端を閉じる */
.bk-lp__faq-a {
  padding: clamp(8px, 2.1333vw, 16px) 0 clamp(16px, 4.2667vw, 32px);
  border-bottom: 1px dashed var(--bk-green);
}

.bk-lp__faq-group > .bk-lp__faq-q:first-child {
  border-top: 1px dashed var(--bk-green);
}

/* Q / A の丸アイコン。Q は緑、A は赤 */
.bk-lp__faq-mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--faq-mark-size);
  height: var(--faq-mark-size);
  border-radius: var(--radius-full);
  background: var(--bk-green);
  color: #FFF;
  font-size: var(--faq-mark-font);
  font-weight: 700;
  line-height: 1;
}

.bk-lp__faq-mark.-a {
  background: var(--bk-red);
}

.bk-lp__faq-q-text {
  color: var(--bk-green);
  font-size: var(--faq-text-size);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.48px;
}

.bk-lp__faq-a-text {
  color: var(--lp-text);
  font-size: var(--faq-text-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.48px;
}

/* ---------------------------------------------------------------
   08. 実績バナー
   --------------------------------------------------------------- */
.bk-lp__authority {
  padding-bottom: clamp(24px, 6.4vw, 48px);
}

.bk-lp__authority-figure {
  margin: 0;
}

.bk-lp__authority-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
   追従CTA
   デリと同じ形式。キャッチの吹き出しは無く、ボタン1本のみ。
   --------------------------------------------------------------- */
.bk-lp__fixed-cta {
  /* PC調整はこの変数の上書きだけで済ませる */
  --fixed-cta-height: 66px; /* SP / PC 共通 */
  --fixed-cta-thumb: 56px;  /* SP / PC 共通 */
  --fixed-cta-label-size: clamp(14px, calc(0.5333vw + 12px), 16px);
  --fixed-cta-color: #D2371D; /* デザイン指定値 */

  position: fixed;
  bottom: 16px;
  left: 50%;
  z-index: 900;
  box-sizing: border-box;
  width: calc(100% - 16px * 2);
  max-width: 480px;
  transform: translateX(-50%);
  text-align: center;
}

/* common.css が a に color/font-size を直接あてるため、ここで明示的に上書きする */
.bk-lp__fixed-cta-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--fixed-cta-height);
  padding: 0 24px;
  border-radius: var(--radius-full);
  background: var(--fixed-cta-color);
  color: #FFF;
  font-size: var(--fixed-cta-label-size);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* 箱はボタンの左端から少しはみ出す */
.bk-lp__fixed-cta-thumb {
  position: absolute;
  top: 50%;
  left: 8px;
  width: var(--fixed-cta-thumb);
  height: auto;
  transform: translateY(-50%);
}

.bk-lp__fixed-cta-label {
  color: #FFF;
  font-size: var(--fixed-cta-label-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.56px;
  font-feature-settings: 'halt' 1;
}

.bk-lp__fixed-cta-link::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 0;
  height: 0;
  border-width: 6px 0 6px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #FFF;
  transform: translateY(-50%);
}

/* 幅に余裕が出たら1行に戻す。デリと同じ 480px で切り替える */
@media screen and (min-width: 480px) {
  .bk-lp__fixed-cta-br {
    display: none;
  }
}

/* LP最下部の余白。下に続く .footer__support が
     margin-top 40px（shinki.css）＋ padding 10px（common.css）
   を持っており、それだけで LP末尾からボタンまで 50px 空く。
   ここで足すと二重になるので 0 にしている。
   追従CTA（高さ66px＋下16px）は重なるが、この下にバナーとフッターが続くので
   最後のコンテンツが隠れたままになることはない */
.bk-lp {
  padding-bottom: 0;
}

/* ---------------------------------------------------------------
   フードロススライダー（共通パーツ）のバレット位置
   --------------------------------------------------------------- */
/* 共通CSS（visitor_shinki.css）が .slick-dots に bottom:20px !important を
   当てている。スライド画像は width:100% / height:auto なので高さは幅に比例し、
   固定 px だと絵柄に対するバレットの位置が幅によってずれる。
   画像は 750x790 なので、375幅のときの高さは 395px。20px はその約5%にあたる。
   割合で指定すればどの幅でも絵柄に対して同じ位置に来る。
   共通CSSは他ページでも使うため、上書きはこのページ配下だけに限定する */
.bk-lp .oic_intro_shinki__sustainable .slick-dots {
  bottom: 5.06% !important;
}