/* ==========================================================================
   カテゴリLP共通CSS (lpcat)
   複数カテゴリ（心理／美容／占い等）で使い回す共通土台。
   カテゴリ別の色テーマは .lpcat--{category} の CSS変数で切り替える。
   フォント: "roboto", "Zen Maru Gothic", sans-serif（数字英字=Roboto／日本語=Zen Maru Gothicフォールバック。
   lp_sumashika.css の .sumashika と統一。読み込みは各.aspx head側）
   ブレークポイントは lp_sumashika.css に合わせて 767px

   [SPファースト方針]
   本ファイルはSPファースト（min-width:768pxで上書き）で記述している。
   既存 reference/lp_sumashika.css はPCファースト（max-width:767pxで上書き）であり
   方針が異なるが、本カテゴリLPがSP専用デザイン由来であるための意図的な選択。
   lp_sumashika.css を編集する際は上記の前提を崩さないよう注意する。

   [.sumashika との詳細度衝突回避]
   既存 .sumashika 側のセレクタと同じ詳細度で上書きするルールは、
   読み込み順に依存しないよう `.sumashika.lpcat` の結合セレクタで
   詳細度を上げて記述する（.lpcat 単独セレクタは避ける）。

   [縮尺システム（cqw）]
   キャッチ画像（.lpcat-catch）より下の全セクションは `.lpcat-body`
   （container-type: inline-size）を基準コンテナとし、デザイン実測値
   （アートボード幅1001px基準の design px = dpx）を cqw 単位に変換して組む。
   変換式: N dpx ÷ 10 = N cqw（実用上の近似値。基準1cqw ≒ 10.01dpx）。
   講座ブロック（.course-block）はグリッド2列時に幅が変わるため、
   それ自体を独立したコンテナ（container-type: inline-size）とし、
   ブロック内部の要素は「ブロック自身の幅」を基準にした cqw で組む
   （ブロックはデザイン上ほぼページ全幅のため、同じ N/10 近似が成立する）。
   ========================================================================== */

.sumashika.lpcat {
  --lpcat-main: #3ca391;
  --lpcat-main-dark: #2d8a79;
  --lpcat-main-light: #e4f9f4;
  --lpcat-accent: #e0392e;
  --lpcat-text: #343536;
  max-width: 600px;
  margin: 0 auto;
  font-family: "roboto", "Zen Maru Gothic", sans-serif;
  /* font-weight は個々のlpcat要素側で明示指定済み（コンテナで一括指定すると
     .subsc以降のトップ流用セクションに継承されてしまうため設定しない） */
  color: var(--lpcat-text);
  letter-spacing: 0.05em;
  overflow: hidden;
}
/* PC幅（min-width:768px）: KVエリア（.sumashika__header / .kv）は
   reference/lp_sumashika.css のPCスタイル（コンテナ幅1200px前提の絶対配置）を
   そのまま使うため、コンテナ幅を本番トップ（sumashika2.aspx）と同じ1200pxに戻す。
   lpcat固有セクションはSPデザイン由来のため、各セクション側で600px中央寄せに戻す。 */
@media screen and (min-width: 768px) {
  .sumashika.lpcat {
    max-width: 1200px;
  }
}

/* ---- カテゴリテーマ: メンタル心理 ----
   webp実素材（catch.webp/close.webpのティール #2bb7aa）を正としてアンカー補正済み
   （HSVで dH+7deg, S×1.681, V×1.028）。 */
.sumashika.lpcat.lpcat--mental {
  /* 基底 .sumashika.lpcat（詳細度0,2,0）の仮既定値に勝つため 0,3,0 でスコープ（全カテゴリ共通パターン） */
  --lpcat-main: #2bb7aa;
  --lpcat-main-dark: #00a89e;
}

/* 末尾「お申込み」見出し（.sumashika .heading__title は min-width:800px のPC固定幅）
   が .lpcat（max-width:600px + overflow:hidden）内でクリップされるためスコープ解除する。
   カテゴリ追加時、この見出しは .lpcat 共通なのでコピー不要。 */
.sumashika.lpcat .heading__title {
  min-width: auto;
}

.lpcat img {
  max-width: 100%;
  vertical-align: bottom;
}

/* ==========================================================================
   最初のキャッチ（1枚画像）
   ========================================================================== */
.lpcat-catch {
  width: 100%;
}
.lpcat-catch img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .lpcat-catch {
    max-width: 1000px;
    margin: 0 auto;
  }
}
/* KV直下（.kv__text3のV字下端）→キャッチ画像上端の余白（SPのみ）。
   .kv__text3のmargin-bottom:40px（reference/lp_sumashika.css、本番トップと共通）は
   PC向けの固定pxのままSPにも適用され続けており、375px幅では相対的に余白過多になる
   （main_text3_sp.svgはviewBox下端がV字先端と一致しており画像自体の余白はゼロ実測済み、
   spec_plant.md p1・mental_hi.png実測ともV字下端→キャッチ上端は約34.5px(design)。
   design 500pt幅=SP実測375pxのスケール0.75で換算し2.9vwに縮小。
   本番トップ（.kv__text3、PC含む）に影響しないよう.lpcat側のみSP限定で上書き）。 */
@media screen and (max-width: 767px) {
  .sumashika.lpcat .kv__text3 {
    margin-bottom: 2.9vw;
  }
}

/* ==========================================================================
   縮尺コンテナ（キャッチ画像より下の全セクション）
   ========================================================================== */
.lpcat-body {
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
}
.sumashika.lpcat *,
.sumashika.lpcat *::before,
.sumashika.lpcat *::after {
  box-sizing: border-box; /* 本番環境のグローバルborder-boxと同等（トップ流用セクション含む全体に適用） */
}
/* ブラウザ既定マージンの一括排除（デザインの余白はすべて明示値で管理）。
   :where() で詳細度を0にし、後続のコンポーネント側 margin（auto中央寄せ等）が必ず勝つようにする */
.lpcat-body :where(h2, h3, p, ul, hr) {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .lpcat-body {
    /* PC: 本番トップ幅1200px(.sumashika.lpcat)に対し、カテゴリLP固有部は1000px中央寄せ。
       cqwは.lpcat-body（各インスタンス。.lpcat-campaign--repeatのラッパーも含む）基準の
       比例縮尺のため、幅変更だけで内部要素は自動でスケールする。 */
    max-width: 1000px;
    margin: 0 auto;
  }
}

/* ==========================================================================
   申込セクション（campaign）
   コーディネーターによる確定採寸表（1001dpx基準 / cqw = dpx÷10.01）を
   機械的に適用。各コメントの dpx 実測値は数値表の転記であり、目測調整は行わない。
   ========================================================================== */
.lpcat-campaign {
  background: var(--lpcat-main-light);
  /* 上マージン12cqw = キャッチ画像下端(三角先端)〜ミント上端の白余白（実測60.1pt） */
  margin-top: 12cqw;
  /* 下7.2cqw = 白パネル下端〜リボン上端のミント帯（36pt、デザインはミント連続） */
  padding: 5.5cqw 4.5cqw 7.2cqw;
}
/* ページ後半の再掲ボックス: デザインp2/p3実測で背景はクリーム #fffce0（ミントではない）。
   直前ボックス（黄箱等）下端→本ボックス上端の余白は mental_p2.png 実測262px
   （px÷2.3624=pt÷5=cqw で換算、約22.2cqw） */
.lpcat-campaign--repeat {
  background: #fffce0;
  margin-top: 14cqw; /* ユーザー指示で縮小 */
}

.lpcat-campaign__box {
  width: 92cqw;
  max-width: 92cqw;
  margin: 0 auto;
  background: #fff;
  border-radius: 0;
  padding-bottom: 6.4cqw; /* 注記下端→パネル下端 実測32pt */
  overflow: hidden;
}
/* 赤帯（badge）: 総高33.5cqw = 上端余白4cqw + 白箱14.2cqw + 「お試しキャンペーン中！」領域15.3cqw */
.lpcat-campaign__badge {
  position: relative;
  background: var(--lpcat-accent);
  text-align: center;
  padding-top: 4cqw;
}
/* 白い折返し三角（w63.5pt→12.7cqw角、帯上端・左右端から各10pt→2cqw）。
   帯（badge）は .lpcat-campaign__box 全幅に対して margin無しで隙間なく配置。 */
.lpcat-campaign__badge::before,
.lpcat-campaign__badge::after {
  content: "";
  position: absolute;
  top: 2cqw;
  width: 0;
  height: 0;
  border-style: solid;
}
.lpcat-campaign__badge::before {
  left: 2cqw;
  border-width: 12.7cqw 12.7cqw 0 0;
  border-color: #fff transparent transparent transparent;
}
.lpcat-campaign__badge::after {
  right: 2cqw;
  border-width: 0 12.7cqw 12.7cqw 0;
  border-color: transparent #fff transparent transparent;
}
.lpcat-campaign__badge-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46.8cqw;
  height: 14.2cqw;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  color: var(--lpcat-accent);
  border: 0.3cqw solid var(--lpcat-accent);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 8.96cqw;
  letter-spacing: 0.4em;
  padding-left: 0.4em; /* letter-spacingが末尾にも付く分を相殺し文字を左右中央に */
}
.lpcat-campaign__badge-text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15.3cqw;
  margin: 0;
  color: #fff;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 7.55cqw;
  text-align: center;
}
.lpcat-campaign__lead {
  margin: 0;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0;
  padding: 8.6cqw 2cqw 0; /* 帯下端→リード1 実測43pt */
}
.lpcat-campaign__lead-line1,
.lpcat-campaign__lead-line2 {
  display: block;
  line-height: 1;
}
.lpcat-campaign__lead-line1 {
  font-size: 4.36cqw;
}
.lpcat-campaign__lead-line2 {
  font-size: 4.41cqw;
  margin-top: 4.5cqw; /* 行送り実測44.3pt */
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.lpcat-campaign__lead .is-strong {
  color: var(--lpcat-accent);
  font-weight: 700;
}
.lpcat-campaign__lead-line1 .is-strong {
  font-size: 6.72cqw;
  font-family: "roboto", "Zen Maru Gothic", sans-serif;
}
.lpcat-campaign__lead-line2 .is-strong {
  font-size: 5.54cqw;
  color: var(--lpcat-text); /* ベクタ実測: お得な は黒（赤ではない） */
}
.lpcat-body .lpcat-campaign__divider {
  width: 81.9cqw;
  height: 0.38cqw;
  margin: 4.1cqw auto 0; /* 可視コピー実測: リード2上端→罫線42.5pt−行box4.41 */
  border: none;
  background: #999; /* 共通CSSのhrルールに依存しない実装 */
}
.lpcat-campaign__price {
  text-align: center;
  padding: 6.7cqw 3cqw 2cqw; /* 罫線→ラベル33.4pt / 980→ボタン23pt(box余白差し引き) */
}
.lpcat-campaign__price-label {
  display: block;
  text-align: center; /* サイト共通CSSの p{text-align:justify} 対策 */
  margin: 0 0 5.5cqw; /* ラベル上端→980上端 実測74.6pt（ラベルbox9.39cqw+5.5cqw） */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}
.lpcat-campaign__price-label .price-label-s1 {
  font-size: 7.82cqw;
}
.lpcat-campaign__price-label .price-label-s2 {
  font-size: 9.39cqw;
}
.lpcat-campaign__price-num {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  max-width: 69.7cqw;
  margin: 0 auto;
  gap: 0.3cqw;
  line-height: 1;
}
.lpcat-campaign__price-num .num {
  font-family: "roboto", "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: var(--lpcat-accent);
  font-size: 29.37cqw;
  line-height: 1;
}
.lpcat-campaign__price-num .price-suffix {
  display: flex;
  align-items: baseline;
  line-height: 1;
}
/* 「（税込）」はSPでは「円」の真上にX中心を揃えて配置（ユーザー指示・mental_hi.png実測でも
   税込と円はほぼ同じ中心線上）。.tax は .lpcat-campaign__price-num（position:relative）基準の
   絶対配置のため、.unit の中心Xに一致させる right 値を実測から逆算（375px実機: unit中心
   285.80px・box右端320.06px・tax幅96.89px → right ≒ -3.78cqw）。
   旧値(-5cqw/-4.9cqw)は実測の約6倍で「税込」が円から大きく右上に離れる不具合の原因だった。
   PC(768px〜)は本番トップ準拠の「円の右上」配置のため別途上書き（変更なし）。 */
.lpcat-campaign__price-num .tax {
  position: absolute;
  top: -0.68cqw;
  right: -3.78cqw;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 6.46cqw;
  font-weight: 700;
  color: var(--lpcat-accent);
  white-space: nowrap;
  letter-spacing: 0;
}
.lpcat-campaign__price-num .unit {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: var(--lpcat-accent);
  font-size: 17.71cqw;
  line-height: 1;
}
.lpcat-campaign__btn {
  padding: 0;
  text-align: center;
}
.lpcat-campaign__btn a {
  display: block;
}
.lpcat-campaign__btn img {
  width: 76.5cqw;
  margin: 0 auto;
}
/* PC(768px〜)でPC用横並びラッパー(.lpcat-campaign__detail)導入に合わせ、
   注記(caption)を.lpcat-campaign__btnの子要素に移動（HTML変更）。
   ボタン下端→注記の間隔(実測29pt=5.8cqw)は、旧btn側のpadding-bottomから
   caption側のmargin-topへ移設して同じ見た目を維持（SP表示は変更なし）。 */
.lpcat-campaign__caption {
  margin: 5.8cqw 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 2.8cqw;
  line-height: 2; /* ベクタ実測: 行送り28pt÷14pt */
  letter-spacing: 0;
  text-align: left;
  width: fit-content;
  margin-inline: auto;
  padding: 0 3cqw;
  color: var(--lpcat-text);
}

/* ==========================================================================
   申込セクション（campaign）PC表示
   本番トップ（sumashika2.aspx .campaign）を1440px幅でpuppeteer実測した値
   （エリア幅1200px／白箱幅770px／.campaign__detail: flex, gap 40px,
   padding 40px, 子要素 flex:1 で価格列・ボタン列とも325px均等）に合わせる。
   帯・ラベル・リード・区切り線はLPデザイン準拠のcqwシステムのまま、
   .lpcat-campaign__box を独立コンテナ（container-type: inline-size）にして
   幅770px基準へ縮尺させることで再利用する（値の再定義不要）。
   価格＋ボタンのみ .lpcat-campaign__detail（横並び用ラッパー、HTML追加）で
   flex化し、トップページ実測のpx値を明示指定する。 */
@media screen and (min-width: 768px) {
  .lpcat-campaign__box {
    width: 770px;
    max-width: 770px;
    container-type: inline-size;
    padding-bottom: 0; /* 下端余白は .lpcat-campaign__detail の padding-bottom で担保 */
  }
  .lpcat-campaign__detail {
    display: flex;
    /* align-items:center だと注記(caption)込みでボタン列の方が高くなり、
       価格ラベル上端がボタン画像上端より約20px下にずれる（本番トップも同じ
       centerでも高さ差が小さく数px程度のズレに収まっているだけ）。
       価格ラベルとボタン画像の上端を確実に揃えるため flex-start にする。 */
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    padding: 40px;
  }
  .lpcat-campaign__detail > div {
    flex: 1;
    min-width: 0;
  }
  .lpcat-campaign__price {
    padding: 0;
  }
  .lpcat-campaign__price-label {
    margin: 0 0 14px;
  }
  .lpcat-campaign__price-label .price-label-s1 {
    font-size: 18px;
  }
  .lpcat-campaign__price-label .price-label-s2 {
    font-size: 22px;
  }
  .lpcat-campaign__price-num {
    /* max-width解除だけだと親.lpcat-campaign__price（325px列幅）いっぱいに
       ボックスが伸び、.tax の right(親右端基準)が「円」から大きく離れてしまう
       （本番トップは列幅=テキスト幅がほぼ一致する特殊ケースで偶然揃って見えるだけ）。
       fit-content化してコンテンツ幅にボックスを合わせ、.tax の絶対配置基準が
       「円」の右端に一致するようにする（列内の中央寄せは margin:auto で維持）。 */
    max-width: none;
    width: fit-content;
    margin: 0 auto;
    gap: 2px;
  }
  .lpcat-campaign__price-num .num {
    /* 本番トップ（sumashika2.aspx .campaign__price）1440px実測 font-size:100px に合わせる */
    font-size: 100px;
  }
  .lpcat-campaign__price-num .tax {
    /* 本番トップ .campaign__price sub 1440px実測（top:8px / right:-12px / font-size:22px）
       をそのまま採用。上記のfit-content化で「円」右端＝ボックス右端になるため、
       トップページと同じ「（税込）が円の右上に近接」する見た目になる。 */
    top: 8px;
    right: -12px;
    font-size: 22px;
  }
  .lpcat-campaign__price-num .unit {
    /* 本番トップ .campaign__price span 1440px実測 font-size:60px に合わせる */
    font-size: 60px;
  }
  .lpcat-campaign__btn {
    padding: 0;
  }
  .lpcat-campaign__btn img {
    width: 100%;
    max-width: 325px;
  }
  .lpcat-campaign__caption {
    margin: 14px 0 0;
    font-size: 12px;
    padding: 0;
  }
}
@media screen and (min-width: 1240px) {
  /* .lpcat-course-list と同じ理由（コメント参照）で1240pxから、
     .lpcat-campaign を .lpcat-body(1000px) の制約から抜いて
     .sumashika.lpcat の1200pxいっぱいまで拡張（背景色エリア=1200px）。
     768〜1239pxはエリア幅1000pxのまま（箱770pxは中央寄せで崩れない）。 */
  .lpcat-campaign {
    width: 1200px;
    margin-left: -100px;
    margin-right: 0;
  }
}

/* いつでもどこでも 帯（ペナント形リボン）
   ベクタ実測値（カラム500pt=100cqw基準、cqw = pt÷5）を転記。
   全幅100cqw × 高さ458.8pt→91.76cqw（aspect-ratioで自身の幅に対する比率として厳密に再現。
   height を自身のcqwで指定すると祖先コンテナ基準になり比率がズレるため使わない）。
   V字下端は全高の75.02%(=344.2pt)位置。
   リボン自身を独立コンテナ化し、内部要素（::before/::afterや子要素）は自身の幅を基準にしたcqwで組む
   （※自身の padding/height に cqw を使うと祖先コンテナ基準になり縮尺がズレるため、
   自身のボックスに関わる値は cqw を使わず aspect-ratio と子要素側の margin-top で表現する）。 */
.lpcat-campaign__ribbon {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 500 / 458.8;
  margin: 0 auto;
  background: var(--lpcat-main-light);
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 75.02%, 50% 100%, 0 75.02%);
  overflow: hidden;
}
/* ティール三角: 一辺67.7pt→13.5cqw、帯上端から12.2pt→2.44cqw、左右端から17.9pt→3.58cqw */
.lpcat-campaign__ribbon::before,
.lpcat-campaign__ribbon::after {
  content: "";
  position: absolute;
  top: 2.44cqw;
  width: 0;
  height: 0;
  border-style: solid;
}
.lpcat-campaign__ribbon::before {
  left: 3.58cqw;
  border-width: 13.5cqw 13.5cqw 0 0;
  border-color: var(--lpcat-main) transparent transparent transparent;
}
.lpcat-campaign__ribbon::after {
  right: 3.58cqw;
  border-width: 0 13.5cqw 13.5cqw 0;
  border-color: transparent var(--lpcat-main) transparent transparent;
}
/* コンテンツ上端 = リボン上端から38.7pt→7.74cqw（子要素側のmarginで、リボン自身の幅基準のcqwにする） */
.lpcat-campaign__ribbon-logo {
  width: 58cqw; /* デザイン実測: ロゴ幅296pt */
  margin: 6cqw auto 4.5cqw; /* デザイン実測: ロゴ下端→1行目上端 6.59cqw相当（行送り拡大分を差し引き4.5cqw） */
}
.lpcat-campaign__ribbon-text {
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.85cqw;
  line-height: 1.8; /* デザイン実測: 行送り(top-to-top) 7.36/9.80/9.98cqw ≒ フォントサイズ×1.8 */
  color: #333;
}
.lpcat-campaign__ribbon-text .is-strong {
  color: var(--lpcat-main-dark);
}
.lpcat-campaign__ribbon-text .ribbon-course {
  font-size: 5.38cqw;
}
.lpcat-campaign__ribbon-text .ribbon-count {
  font-size: 5.49cqw;
  color: #333;
}
.lpcat-campaign__ribbon-text .ribbon-unlimited {
  font-size: 5.47cqw;
}
/* PC 1240px〜: 直上の .lpcat-campaign と同じ理由で .lpcat-body(1000px) の制約から抜き、
   同じ1200px幅・同じ負マージン方式に揃える（幅不一致の指摘対応）。
   後方の基底ルール（width:100%、無条件）に上書きされないよう、この位置
   （基底 .lpcat-campaign__ribbon ブロックより後）に置く。
   リボンは自身がコンテナ（container-type: inline-size）のため、幅拡張だけで
   内部cqwは自動スケールする。 */
@media screen and (min-width: 1240px) {
  .lpcat-campaign__ribbon {
    width: 1200px;
    margin-left: -100px;
    margin-right: 0;
  }
}

/* ==========================================================================
   講座一覧セクション
   実測: ピル見出し954×315dpx / タイトル帯988×113dpx・フォント60dpx /
   サブタイトル帯h75dpx・フォント34dpx / 写真円525dpx / Point箱512dpx。
   ========================================================================== */
.lpcat-courses {
  padding: 11.5cqw 0 0; /* V字下端→ピル上端 実測57.3pt */
}
.lpcat-courses__heading {
  max-width: 96.6cqw;
  min-height: 31.7cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.41;
  margin: 0 auto 14cqw; /* ピル下端→帯上端137.8pt（ユーザー指示で約半分に縮小） */
  background: var(--lpcat-main);
  color: #fff;
  text-align: center;
  border-radius: 9.5cqw; /* 可視実測 */
  padding: 3.8cqw 2cqw;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 7.4cqw; /* SPで最長カテゴリ名（食・パティシエ・スイーツ）が途中改行しないよう縮小（ユーザー指示・全カテゴリ共通） */
  line-height: 1.5;
}

.lpcat-course-list {
  display: flex;
  flex-direction: column;
  gap: 10.4cqw; /* ピッチ431.5pt−ブロック高379.3pt */
  max-width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  /* 768px〜: .lpcat-body(1000px)内に収めた2列グリッド。
     .sumashika.lpcat が1200pxになる保証がないビューポート（768〜1239px、
     スクロールバー分の誤差込み）では1200px拡張を行わずクリップを防ぐ。 */
  .lpcat-course-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
    width: 100%;
    column-gap: 4cqw;
    row-gap: 8cqw;
  }
  /* 講座数が奇数のカテゴリ量産用: 最終ブロックが単独で行に残る場合は
     2列分を占有させた上で1列幅に縮め中央寄せし、崩れを防ぐ */
  .lpcat-course-list > .course-block:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 4cqw) / 2);
    justify-self: center;
  }
}
@media screen and (min-width: 1240px) {
  /* 1240px〜: .sumashika.lpcat は本ファイル冒頭のコメント通りPCはコンテナ幅1200px
     前提の絶対配置設計のため、講座一覧のみ .lpcat-body(1000px)の制約から抜け、
     .sumashika.lpcat の1200pxいっぱいまで拡張する。
     .lpcat-body は .sumashika.lpcat 内で中央寄せなので、左右差(1200-1000)/2=100pxを
     margin-leftで打ち消す（-100px、margin-rightは幅確定のため不要）。
     1240px = 1200px + スクロールバー幅等を考慮した余裕分。.sumashika.lpcat の
     max-width:1200pxは min-width:768px から有効だが、clientWidth（overflow:hidden
     のクリップ判定基準）はビューポート幅からスクロールバー分を差し引くため、
     ジャストの1200pxブレークポイントでは.sumashika.lpcatが1200px未満になり
     数pxクリップされる。1240px以上であれば.sumashika.lpcatが確実に1200pxとなり、
     本ルールの絶対値幅（width:1200px）が親幅に収まることを保証できる。
     各 .course-block は自身が container のため、列幅（約580px）基準で内部cqwが自動縮尺される。 */
  .lpcat-course-list {
    width: 1200px;
    margin-left: -100px;
  }
}

.course-block {
  --course-color: var(--lpcat-main);
  --course-tint: var(--lpcat-main-light);
  --course-tint2: var(--lpcat-main-light);
  container-type: inline-size;
}

/* 講座別テーマ色（イラレデータ抽出CMYK値をICC変換した確定値。tintはメイン色の白約35%ミックス相当）。
   メンタル心理カテゴリ専用の実測値のため .lpcat--mental でスコープする。カテゴリ追加時はこのブロックをコピーし、
   .lpcat--{category} スコープで新カテゴリの実測色定義を追加すること（クラス名の衝突回避）。
   --course-tint2 は Point箱本体用（メイン色の白約20%ミックス相当。--course-tint より薄い）。 */
.lpcat--mental .course-block--01 { --course-color: #5a99ad; --course-tint: #c9dee4; --course-tint2: #deebef; }
.lpcat--mental .course-block--02 { --course-color: #59b69d; --course-tint: #cde9e1; --course-tint2: #def0eb; }
.lpcat--mental .course-block--03 { --course-color: #d76367; --course-tint: #f1c7c8; --course-tint2: #f7e0e1; }
.lpcat--mental .course-block--04 { --course-color: #5788c3; --course-tint: #cad9ec; --course-tint2: #dde7f3; }
.lpcat--mental .course-block--05 { --course-color: #e18c29; --course-tint: #f4d7b4; --course-tint2: #f9e8d4; }
.lpcat--mental .course-block--06 { --course-color: #379f8f; --course-tint: #c1e1dc; --course-tint2: #d7ece9; }
.lpcat--mental .course-block--07 { --course-color: #2c7798; --course-tint: #bbd3de; --course-tint2: #d5e4ea; }
.lpcat--mental .course-block--08 { --course-color: #e76c5d; --course-tint: #f6cbc5; --course-tint2: #fae2df; }
.lpcat--mental .course-block--09 { --course-color: #c85989; --course-tint: #edcad9; --course-tint2: #f4dee7; }
.lpcat--mental .course-block--10 { --course-color: #00707a; --course-tint: #aed1d5; --course-tint2: #cce2e4; }
.lpcat--mental .course-block--11 { --course-color: #5171b3; --course-tint: #c6d0e6; --course-tint2: #dce3f0; }
.lpcat--mental .course-block--12 { --course-color: #c4565a; --course-tint: #ecc8c9; --course-tint2: #f3ddde; }

.course-block__title {
  position: relative;
  background: var(--course-color);
  color: #fff;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 6.4cqw; /* 長い講座名が左右の白三角と重なるため縮小 */
  letter-spacing: 0.06em;
  line-height: 1.35; /* 折返し時の行間 */
  padding: 1.8cqw 8.5cqw; /* 左右は三角幅（1.6cqw+5.7cqw）を避ける余白を確保 */
}
.course-block__title::before,
.course-block__title::after {
  content: "";
  position: absolute;
  top: 1.7cqw;
  width: 0;
  height: 0;
  border-style: solid;
}
.course-block__title::before {
  left: 1.6cqw;
  border-width: 5.7cqw 5.7cqw 0 0;
  border-color: #fff transparent transparent transparent;
}
.course-block__title::after {
  right: 1.6cqw;
  border-width: 0 5.7cqw 5.7cqw 0;
  border-color: transparent #fff transparent transparent;
}
.course-block__subtitle {
  background: var(--course-tint);
  color: var(--lpcat-text);
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  font-size: 3.6cqw;
  font-weight: 700;
  padding: 1.4cqw 1.2cqw;
}
.course-block__media {
  position: relative;
  padding: 0; /* 写真の位置は photo 側の margin で管理（左0・上0.8cqwは実測値） */
  min-height: 56cqw;
}
.course-block__photo {
  /* アセット557px=55.6cqw（円211pt+葉等の装飾込み）。左端0 */
  width: 55.6cqw;
  margin: 3cqw 0 0; /* サブ帯下の余白が狭かったため拡大（ユーザー指示） */
}
.course-block__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.course-block__point {
  position: absolute;
  right: 1.2cqw;
  top: 15.9cqw; /* 写真上端+75.6pt（media上端基準、photoのmargin-top0.8cqw込み） */
  width: 63cqw; /* フォント拡大に合わせ写真側へ拡張（ユーザー指示） */
  min-width: 0;
  background: var(--course-tint2);
  border-radius: 0;
  overflow: hidden;
}
.course-block__point-header {
  position: relative;
  background: var(--course-color);
  color: #fff;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 3.6cqw; /* ユーザー指示で拡大 */
  letter-spacing: 0.05em;
  height: 5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5cqw;
}
.course-block__point-header::before,
.course-block__point-header::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: #fff;
}
.course-block__point-header::before {
  left: 2cqw;
}
.course-block__point-header::after {
  right: 2cqw;
}
.course-block__point-body {
  padding: 0.8cqw 2cqw; /* 実測: 行の左右インセット10pt */
}
.course-block__point-body p {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 3cqw; /* ユーザー指示で拡大 */
  letter-spacing: 0;
  font-weight: 700;
  /* line-height 1→1.25で折返し時の行間を確保。1行行の高さが変わらないよう
     上下paddingを2.2→1.9cqwに縮小して相殺（3cqw基準: 2.2*2+3*1=7.4cqw ≒ 1.9*2+3*1.25=7.4cqw）。
     is-lead/is-smallはフォントサイズが異なるため厳密には相殺しきれないが、
     デザイン比較で許容範囲の差に留まる（ユーザー指示: 全行共通の微増は許容） */
  line-height: 1.25;
  /* 左paddingは◆(1文字目、fontsize基準で概ね1em幅)+::first-letterの隙間0.7cqw分を確保し、
     text-indentで同量を打ち消すことで1行目は従来位置のまま、折返し2行目以降だけが
     ◆の次の文字（文頭）位置にぶら下げインデントされる（標準的なhanging indent手法） */
  padding: 1.9cqw 0 1.9cqw calc(1em + 0.7cqw);
  text-indent: calc(-1em - 0.7cqw);
  color: var(--lpcat-text);
  /* デザインは平体（水平90%圧縮）でPoint行を1行に収めている。
     収まらない行は折り返して全文表示する（white-space:nowrapを外すと自然に折返し。
     widthはtransform前のレイアウト幅なので折返し判定にも正しく効く） */
  width: 111.2%;
  transform: scaleX(0.899);
  transform-origin: left center;
  overflow-wrap: break-word;
}
.course-block__point-body p:not(:last-child) {
  border-bottom: 1px dashed #aaa;
}
/* ◆（行頭1文字）と文頭の間に隙間。text-indentのぶら下げインデントと合わせて
   折返し2行目の行頭が1行目の文頭（◆の次の文字）に揃うよう計算されている */
.course-block__point-body p::first-letter {
  margin-right: 0.7cqw;
}
.course-block__point-body p.is-lead {
  color: var(--lpcat-accent);
  font-weight: 700;
  font-size: 3.5cqw; /* 赤リード行は他行より大きい（ユーザー指示・イラレ準拠） */
  width: 119%; /* scaleX(0.84)後に罫線が100%幅になるよう補正（1/0.84） */
  transform: scaleX(0.84);
}
/* 長文行の例外（マインドフルネス3行目）: 仕様書値11.86pt→2.37cqw。
   デザイン同様このサイズを維持し、平体の圧縮率のみ強めて1行に収める */
.course-block__point-body p.is-small {
  font-size: 2.6cqw;
  transform: scaleX(0.85);
}

/* ==========================================================================
   シメセクション（人気の資格が取り放題）＋ 心理系24資格
   実測: 資格ボックス幅988dpx / 見出し高163dpx / 本文高926dpx・リスト文字32dpx /
   close.webp下から見出しまでの余白220dpx。
   ========================================================================== */
.lpcat-close {
  margin-top: 0; /* ブロック12下端に直結（実測余白2.5pt≒0） */
}
.lpcat-close img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .lpcat-close {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

.lpcat-qualifications {
  max-width: 100cqw;
  margin: 13.7cqw auto 0; /* シメ画像下端→ボックス 実測68.7pt（close.webp高さ513ptから逆算） */
}
.lpcat-qualifications__heading {
  background: var(--lpcat-main);
  color: #fff;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 7.59cqw;
  min-height: 16.5cqw; /* 実測82.6pt */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lpcat-qualifications__body {
  background: var(--lpcat-main-light);
  padding: 7cqw 4.4cqw 8.2cqw; /* 実測34.9/22.2/41pt */
}
.lpcat-qualifications__list {
  display: grid;
  grid-template-columns: 53.8cqw 1fr; /* 右列開始 実測291.1pt */
  gap: 0 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lpcat-qualifications__list li {
  text-align: left;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 3cqw;
  line-height: 2.27; /* 行ピッチ34pt÷15pt */
}
.lpcat-qualifications__list small {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 0.7em;
  vertical-align: super;
}

/* ==========================================================================
   末尾「お申込み」見出し（.sumashika .heading）
   デザイン見本には収録されていない共有コンポーネントのため、
   lp_sumashika.css 側のスタイルを踏襲しつつ幅のみ .lpcat-body に揃える
   （.lpcat-body の PC 幅制御でカバーされるため、追加指定は不要）。
   ========================================================================== */

/* ==========================================================================
   トップ流用セクションのデザイン差分上書き（デザインp2-p4準拠）
   ========================================================================== */
/* 有名大学セクションの帯色: 本番JPGはマゼンタ帯だがデザインはローズ #f8b6bb → 色替え版に差し替え */
.sumashika.lpcat .subsc__point3-content {
  background-image: url(../img/lp_common/pc/subsc_point3_img.jpg);
}
@media screen and (max-width: 767px) {
  .sumashika.lpcat .subsc__point3-content {
    background-image: url(../img/lp_common/sp/subsc_point3_img.jpg);
  }
}
/* flow__arrow: 本番トップは中央固定だが、mental_p4.png実測ではstep1→2/step3→4用の
   矢印（flow_arrow1.svg、.flow内 nth-of-type(2)/(4)）はコンテンツ中央よりも左寄り
   （実測 中心約30%・幅約20-30%）。デザインを正としてカテゴリLPのみ左寄せに上書き
   （step2→3用のflow_arrow2.svgは本番と概ね近い位置のため対象外） */
@media screen and (max-width: 767px) {
  .sumashika.lpcat .flow__arrow:nth-of-type(2),
  .sumashika.lpcat .flow__arrow:nth-of-type(4) {
    text-align: left;
    padding-left: 18vw;
  }
}
/* popular__img2: 直前のpopular__listとの間隔が詰まって見えるため、
   同ファイル内の他セクション間ギャップ（voice/application/flow等の16vw）に合わせて拡大。
   デザインpng側は画像自体の透過余白が大きく正確なpx実測が困難なため、
   サイト既存のセクション間ギャップ規約（16vw）に統一する形で対応 */
@media screen and (max-width: 767px) {
  .sumashika.lpcat .popular__img2 {
    margin-top: 10vw; /* ユーザー指示で縮小 */
  }
}
/* レビュー本文: ユーザー指示でわずかに拡大（本番16px/2.8vw基準） */
.sumashika.lpcat .voice__comment,
.sumashika.lpcat .voice__support-text {
  font-size: 17px;
}
@media screen and (max-width: 767px) {
  .sumashika.lpcat .voice__comment,
  .sumashika.lpcat .voice__support-text {
    font-size: 3.1vw;
  }
}
/* サポート窓口: デザインにロゴ画像なし（テキストのみ） */
.sumashika.lpcat .voice__support-title {
  padding-left: 0;
}
.sumashika.lpcat .voice__support-title::before {
  display: none;
}

/* ---- カテゴリテーマ: 美容・健康・ボディケア ----
   PDFベクタ塗り色実測（get_drawings()のfill値とレンダリングPNG実ピクセルが完全一致確認済み）。
   --lpcat-accent / --lpcat-text は共通デフォルト（#e0392e / #343536）を継承し上書きしない。
   注意: 基底 `.sumashika.lpcat`（詳細度0,2,0）がここで上書きする変数と同じ要素に効くため、
   単一クラス`.lpcat--beauty`（詳細度0,1,0）のままだと基底値に負けて反映されない
   （`.lpcat--mental`も同じ構造上の弱点を抱えているが、基底既定色 #3ca391 が偶然mentalの
   ティール系と近似色のため症状が顕在化していなかった。mentalブロックは変更範囲外のため
   触らないが、新規追加の本ブロックは詳細度を基底と同等以上に上げて確実に上書きする）。 */
.sumashika.lpcat.lpcat--beauty {
  --lpcat-main: #f27175;
  --lpcat-main-dark: #f0493a;
  --lpcat-main-light: #fde9f1;
}

/* 講座別テーマ色（PDFベクタ塗り色実測値。beautyは心理と異なり講座ごとに帯色が個別）。
   tint/tint2はレシピ機械生成式（tint=main×0.35+255×0.65、tint2=main×0.20+255×0.80）で算出。 */
.lpcat--beauty .course-block--01 { --course-color: #249bc8; --course-tint: #b2dcec; --course-tint2: #d3ebf4; }
.lpcat--beauty .course-block--02 { --course-color: #4679b0; --course-tint: #bed0e3; --course-tint2: #dae4ef; }
.lpcat--beauty .course-block--03 { --course-color: #e0736e; --course-tint: #f4cecc; --course-tint2: #f9e3e2; }
.lpcat--beauty .course-block--04 { --course-color: #e17a60; --course-tint: #f4d0c7; --course-tint2: #f9e4df; }
.lpcat--beauty .course-block--05 { --course-color: #71569a; --course-tint: #cdc4dc; --course-tint2: #e3ddeb; }
.lpcat--beauty .course-block--06 { --course-color: #dd6d54; --course-tint: #f3ccc3; --course-tint2: #f8e2dd; }
.lpcat--beauty .course-block--07 { --course-color: #30ac8e; --course-tint: #b7e2d7; --course-tint2: #d6eee8; }
.lpcat--beauty .course-block--08 { --course-color: #399fa3; --course-tint: #badddf; --course-tint2: #d7eced; }
.lpcat--beauty .course-block--09 { --course-color: #8970a7; --course-tint: #d6cde0; --course-tint2: #e7e2ed; }
.lpcat--beauty .course-block--10 { --course-color: #b26181; --course-tint: #e4c8d3; --course-tint2: #f0dfe6; }
.lpcat--beauty .course-block--11 { --course-color: #3aa49d; --course-tint: #badfdd; --course-tint2: #d8edeb; }
.lpcat--beauty .course-block--12 { --course-color: #3780a5; --course-tint: #b9d3e0; --course-tint2: #d7e6ed; }
.lpcat--beauty .course-block--13 { --course-color: #df8855; --course-tint: #f4d5c4; --course-tint2: #f9e7dd; }
.lpcat--beauty .course-block--14 { --course-color: #c04c38; --course-tint: #e9c0b9; --course-tint2: #f2dbd7; }

/* ---- カテゴリテーマ: 占い・スピリチュアル ----
   PDFベクタ塗り色実測（get_drawings()のfill値とレンダリングPNG実ピクセルが完全一致確認済み）。
   --lpcat-accent / --lpcat-text は共通デフォルト（#e0392e / #343536）を継承し上書きしない
   （抽出値#ef423eはデザイナーのカラーピッカー誤差の範囲とみなし共通値のまま採用）。
   main-dark は個別実測値なし（main色そのものを実測したためmainと同値で明示）。
   基底 .sumashika.lpcat（詳細度0,2,0）に勝つため .lpcat--beauty/.lpcat--mental と同じく
   詳細度を上げてスコープする。 */
.sumashika.lpcat.lpcat--fortune {
  --lpcat-main: #6c70b4;
  --lpcat-main-dark: #6c70b4;
  --lpcat-main-light: #e3e1f1;
}

/* 講座別テーマ色（PDFベクタ塗り色実測値。fortuneは講座ごとに帯色が個別）。
   tint/tint2はレシピ機械生成式（tint=main×0.35+255×0.65、tint2=main×0.20+255×0.80）で算出。 */
.lpcat--fortune .course-block--01 { --course-color: #3e6097; --course-tint: #bbc7db; --course-tint2: #d8dfea; }
.lpcat--fortune .course-block--02 { --course-color: #27a1b2; --course-tint: #b3dee4; --course-tint2: #d4ecf0; }
.lpcat--fortune .course-block--03 { --course-color: #966fa4; --course-tint: #dacddf; --course-tint2: #eae2ed; }
.lpcat--fortune .course-block--04 { --course-color: #294d84; --course-tint: #b4c1d4; --course-tint2: #d4dbe6; }
.lpcat--fortune .course-block--05 { --course-color: #9e4c73; --course-tint: #ddc0ce; --course-tint2: #ecdbe3; }
.lpcat--fortune .course-block--06 { --course-color: #dd6c7b; --course-tint: #f3ccd1; --course-tint2: #f8e2e5; }
.lpcat--fortune .course-block--07 { --course-color: #5f7bb1; --course-tint: #c7d1e4; --course-tint2: #dfe5ef; }
.lpcat--fortune .course-block--08 { --course-color: #419e85; --course-tint: #bcddd4; --course-tint2: #d9ece7; }
.lpcat--fortune .course-block--09 { --course-color: #336f92; --course-tint: #b8cdd9; --course-tint2: #d6e2e9; }
.lpcat--fortune .course-block--10 { --course-color: #6c6795; --course-tint: #cccada; --course-tint2: #e2e1ea; }
.lpcat--fortune .course-block--11 { --course-color: #2fa399; --course-tint: #b6dfdb; --course-tint2: #d5edeb; }
.lpcat--fortune .course-block--12 { --course-color: #3887b7; --course-tint: #b9d5e6; --course-tint2: #d7e7f1; }
.lpcat--fortune .course-block--13 { --course-color: #73669d; --course-tint: #cec9dd; --course-tint2: #e3e0eb; }
.lpcat--fortune .course-block--14 { --course-color: #49969f; --course-tint: #bfdadd; --course-tint2: #dbeaec; }
.lpcat--fortune .course-block--15 { --course-color: #4788b5; --course-tint: #bfd5e5; --course-tint2: #dae7f0; }
.lpcat--fortune .course-block--16 { --course-color: #455481; --course-tint: #bec3d3; --course-tint2: #dadde6; }
.lpcat--fortune .course-block--17 { --course-color: #de5c76; --course-tint: #f3c6cf; --course-tint2: #f8dee4; }
.lpcat--fortune .course-block--18 { --course-color: #52a87b; --course-tint: #c2e1d1; --course-tint2: #dceee5; }
.lpcat--fortune .course-block--19 { --course-color: #d29444; --course-tint: #efdabe; --course-tint2: #f6eada; }
.lpcat--fortune .course-block--20 { --course-color: #7d7dad; --course-tint: #d2d2e2; --course-tint2: #e5e5ef; }
.lpcat--fortune .course-block--21 { --course-color: #597eb1; --course-tint: #c5d2e4; --course-tint2: #dee5ef; }
.lpcat--fortune .course-block--22 { --course-color: #3ca28c; --course-tint: #bbded7; --course-tint2: #d8ece8; }

/* ---- カテゴリテーマ: 食・パティシエ・スイーツ ----
   PDF「見本」列の実測色（spec_food.md）。
   --lpcat-accent / --lpcat-text は共通デフォルト（#e0392e / #343536）を継承し上書きしない
   （specの抽出値#ef423eはデザイナーのカラーピッカー誤差の範囲とみなし、
   .lpcat--beauty/.lpcat--fortune と同じ扱いで共通値のまま採用）。
   main-dark は個別実測値なし（main色そのものを実測したためmainと同値で明示）。
   基底 .sumashika.lpcat（詳細度0,2,0）に勝つため他カテゴリと同じく詳細度を上げてスコープする。 */
.sumashika.lpcat.lpcat--food {
  --lpcat-main: #f48068;
  --lpcat-main-dark: #f48068;
  --lpcat-main-light: #fee7dd;
}

/* 講座別テーマ色（spec_food.md 3節のHEX値。foodは講座ごとに帯色が個別）。
   tint/tint2はレシピ機械生成式（tint=main×0.35+255×0.65、tint2=main×0.20+255×0.80）で算出。 */
.lpcat--food .course-block--01 { --course-color: #f48068; --course-tint: #fbd3ca; --course-tint2: #fde6e1; }
.lpcat--food .course-block--02 { --course-color: #d97995; --course-tint: #f2d0da; --course-tint2: #f7e4ea; }
.lpcat--food .course-block--03 { --course-color: #f37b8e; --course-tint: #fbd1d7; --course-tint2: #fde5e8; }
.lpcat--food .course-block--04 { --course-color: #bf6f43; --course-tint: #e9cdbd; --course-tint2: #f2e2d9; }
.lpcat--food .course-block--05 { --course-color: #c37f41; --course-tint: #ead2bc; --course-tint2: #f3e5d9; }
.lpcat--food .course-block--06 { --course-color: #e27a55; --course-tint: #f5d0c4; --course-tint2: #f9e4dd; }
.lpcat--food .course-block--07 { --course-color: #a35c87; --course-tint: #dfc6d5; --course-tint2: #eddee7; }
.lpcat--food .course-block--08 { --course-color: #6cafd3; --course-tint: #cce3f0; --course-tint2: #e2eff6; }
.lpcat--food .course-block--09 { --course-color: #bf6f43; --course-tint: #e9cdbd; --course-tint2: #f2e2d9; }
.lpcat--food .course-block--10 { --course-color: #dd6371; --course-tint: #f3c8cd; --course-tint2: #f8e0e3; }
.lpcat--food .course-block--11 { --course-color: #c1564a; --course-tint: #e9c4c0; --course-tint2: #f3dddb; }
.lpcat--food .course-block--12 { --course-color: #65ad58; --course-tint: #c9e2c5; --course-tint2: #e0efde; }
.lpcat--food .course-block--13 { --course-color: #623c24; --course-tint: #c8bbb2; --course-tint2: #e0d8d3; }
.lpcat--food .course-block--14 { --course-color: #91382d; --course-tint: #d8b9b6; --course-tint2: #e9d7d5; }
.lpcat--food .course-block--15 { --course-color: #a77c53; --course-tint: #e0d1c3; --course-tint2: #ede5dd; }
.lpcat--food .course-block--16 { --course-color: #3786a6; --course-tint: #b9d5e0; --course-tint2: #d7e7ed; }
.lpcat--food .course-block--17 { --course-color: #cb826e; --course-tint: #edd3cc; --course-tint2: #f5e6e2; }
.lpcat--food .course-block--18 { --course-color: #719544; --course-tint: #cddabe; --course-tint2: #e3eada; }
.lpcat--food .course-block--19 { --course-color: #7a7539; --course-tint: #d0cfba; --course-tint2: #e4e3d7; }

/* ---- カテゴリテーマ: 手芸・ハンドメイド ----
   PDF生CMYK直接抽出+ICC変換(intent0)+残差校正(H+3.6°,S×1.111,V×1.017)の確定パイプラインで算出（spec_craft.md 2章）。
   --lpcat-accent / --lpcat-text は共通デフォルト（#e0392e / #343536）を継承し上書きしない。
   --lpcat-main-dark: spec未確定（PDFにメンタルのような濃淡2トーン構成が見当たらない）のためmainと同値。
   --lpcat-main-light: キャンペーン枠背景は独立した中立灰(#d4dedc、CMYK C13/M6/Y8/K3.4から同一パイプラインで確定)を採用。
   他カテゴリのようなmainの白ミックスtintではなく、specが指定するこの中立灰をそのまま採用する
   （資格ボックス外枠も同色のため単一トークンで運用可能）。
   基底 .sumashika.lpcat（詳細度0,2,0）に勝つため他カテゴリと同じく詳細度を上げてスコープする。 */
.sumashika.lpcat.lpcat--craft {
  --lpcat-main: #45656c;
  --lpcat-main-dark: #45656c;
  --lpcat-main-light: #d4dedc;
}

/* 講座別テーマ色（spec_craft.md 2-3章のCMYK直接抽出+ICC変換+残差校正確定値。craftは講座ごとに帯色が個別）。
   tint/tint2はレシピ機械生成式（tint=main×0.35+255×0.65、tint2=main×0.20+255×0.80）で算出。 */
.lpcat--craft .course-block--01 { --course-color: #b26691; --course-tint: #e4c9d8; --course-tint2: #f0e0e9; }
.lpcat--craft .course-block--02 { --course-color: #ae862e; --course-tint: #e3d5b6; --course-tint2: #efe7d5; }
.lpcat--craft .course-block--03 { --course-color: #ae5580; --course-tint: #e3c4d3; --course-tint2: #efdde6; }
.lpcat--craft .course-block--04 { --course-color: #c45770; --course-tint: #eac4cd; --course-tint2: #f3dde2; }
.lpcat--craft .course-block--05 { --course-color: #657287; --course-tint: #c9ced5; --course-tint2: #e0e3e7; }
.lpcat--craft .course-block--06 { --course-color: #3d8ec1; --course-tint: #bbd7e9; --course-tint2: #d8e8f3; }
.lpcat--craft .course-block--07 { --course-color: #45656c; --course-tint: #bec9cc; --course-tint2: #dae0e2; }
.lpcat--craft .course-block--08 { --course-color: #b63836; --course-tint: #e5b9b9; --course-tint2: #f0d7d7; }
.lpcat--craft .course-block--09 { --course-color: #a15387; --course-tint: #dec3d5; --course-tint2: #ecdde7; }
.lpcat--craft .course-block--10 { --course-color: #af634f; --course-tint: #e3c8c1; --course-tint2: #efe0dc; }
.lpcat--craft .course-block--11 { --course-color: #6ba96b; --course-tint: #cbe1cb; --course-tint2: #e1eee1; }

/* ---- カテゴリテーマ: 動物・ペット ----
   PDF「見本」列のCMYK塗り値をICCプロファイル変換＋残差校正した確定値（spec_pet.md 2章）。
   --lpcat-accent / --lpcat-text は共通デフォルト（#e0392e / #343536）を継承し上書きしない
   （実測赤はICC変換後 #e03a2e〜#e0412b で共通accentとほぼ一致するため）。
   --lpcat-main-dark: 通常の「暗いmain」用途ではなく、リボン内is-strong（.ribbon-course/.ribbon-unlimited、
   lp_category.css:468の共通ルールが参照）の実測色がaccent同等の赤であるため、意図的にaccentと同値の
   #e0392eを明示定義する（spec_pet.md 3章。レンダリング画像でも該当テキストが赤系であることを確認済み）。
   基底 .sumashika.lpcat（詳細度0,2,0）に勝つため他カテゴリと同じく詳細度を上げてスコープする。 */
.sumashika.lpcat.lpcat--pet {
  --lpcat-main: #6b6052;
  --lpcat-main-dark: #e0392e;
  --lpcat-main-light: #e3dfd7;
}

/* 講座別テーマ色（spec_pet.md 4章のICC変換確定値。petは講座ごとに帯色が個別）。
   06のみ帯色がテーマmain色と同一（デザイン上の意図的な主色流用。spec_pet.md 4章注記）。
   tint/tint2はレシピ機械生成式（tint=main×0.35+255×0.65、tint2=main×0.20+255×0.80）で算出。 */
.lpcat--pet .course-block--01 { --course-color: #335f97; --course-tint: #b8c7db; --course-tint2: #d6dfea; }
.lpcat--pet .course-block--02 { --course-color: #976a3a; --course-tint: #dbcbba; --course-tint2: #eae1d8; }
.lpcat--pet .course-block--03 { --course-color: #c87229; --course-tint: #ecceb4; --course-tint2: #f4e3d4; }
.lpcat--pet .course-block--04 { --course-color: #d56444; --course-tint: #f0c9be; --course-tint2: #f7e0da; }
.lpcat--pet .course-block--05 { --course-color: #d05358; --course-tint: #efc3c5; --course-tint2: #f6ddde; }
.lpcat--pet .course-block--06 { --course-color: #6b6052; --course-tint: #cbc7c2; --course-tint2: #e1dfdc; }
.lpcat--pet .course-block--07 { --course-color: #a86f52; --course-tint: #e1cdc2; --course-tint2: #eee2dc; }
.lpcat--pet .course-block--08 { --course-color: #2675a9; --course-tint: #b3cfe1; --course-tint2: #d4e3ee; }

/* ---- カテゴリテーマ: 植物・花・園芸 ----
   catch/close画像(植物(1).webp・植物(10).webp)の背景ベタ塗りをPDFラスタライズを介さず直接
   サンプリングした実測値が #2bb7aa でメンタルと完全一致（spec_plant.md 1章）。
   main-dark/main-lightもメンタルの確定値をそのまま流用（同スペック根拠）。 */
.sumashika.lpcat.lpcat--plant {
  --lpcat-main: #2bb7aa;
  --lpcat-main-dark: #00a89e;
  --lpcat-main-light: #e4f9f4;
}

/* 講座別テーマ色（spec_plant.md 2章。CMYK抽出+ICC変換+残差校正パイプラインで確定した8色。
   plantは講座ごとに帯色が個別）。
   tint/tint2はレシピ機械生成式（tint=main×0.35+255×0.65、tint2=main×0.20+255×0.80）で算出。 */
.lpcat--plant .course-block--01 { --course-color: #d05369; --course-tint: #efc3ca; --course-tint2: #f6dde1; }
.lpcat--plant .course-block--02 { --course-color: #40977b; --course-tint: #bcdbd1; --course-tint2: #d9eae5; }
.lpcat--plant .course-block--03 { --course-color: #289493; --course-tint: #b4dad9; --course-tint2: #d4eae9; }
.lpcat--plant .course-block--04 { --course-color: #4c6b36; --course-tint: #c0cbb9; --course-tint2: #dbe1d7; }
.lpcat--plant .course-block--05 { --course-color: #2e83b7; --course-tint: #b6d4e6; --course-tint2: #d5e6f1; }
.lpcat--plant .course-block--06 { --course-color: #bd344f; --course-tint: #e8b8c1; --course-tint2: #f2d6dc; }
.lpcat--plant .course-block--07 { --course-color: #24a69d; --course-tint: #b2e0dd; --course-tint2: #d3edeb; }
.lpcat--plant .course-block--08 { --course-color: #ab606a; --course-tint: #e2c7cb; --course-tint2: #eedfe1; }