/* ============================================================
   Theme: できるくん風（オレンジ+黄色+クリーム）
   ホームページできるくんの配色を参考にした親しみやすい明るいLPテイスト
   ============================================================ */

:root {
  --dk-orange: #FF7500;
  --dk-orange-deep: #E85A00;
  --dk-yellow: #F7D72F;
  --dk-yellow-soft: #FFF7CC;
  --dk-cream: #FFFCED;
  --dk-ink: #3C3C3C;
  --dk-ink-sub: #9A9A9A;
  --dk-border: #F6F5F5;
}

/* ---------- ベース背景・テキスト ---------- */
html, body {
  background: var(--dk-cream);
  color: var(--dk-ink);
}

/* ---------- 赤マーカー（下線ハイライト） ---------- */
/* できるくん風の手書きマーカーを赤バージョンで */
.lenses__qa-a em,
.lenses__qa-ans-desc strong,
.lenses__qa-ans-line3 span,
.lenses__qa-mark,
.hero-a__title-strong,
.hero-a__sub strong,
.problems__card strong {
  background: linear-gradient(transparent 55%, rgba(235, 21, 21, 0.4) 55%, rgba(235, 21, 21, 0.4) 92%, transparent 92%) !important;
  color: var(--dk-ink) !important;
  -webkit-text-fill-color: var(--dk-ink) !important;
  padding: 0 2px !important;
  font-weight: 900 !important;
}

/* ---------- Q&A セクション見出し ---------- */
.lenses__qa-heading {
  text-align: center;
  margin: 0 auto 36px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(255, 117, 0, 0.25);
}
.lenses__qa-heading-eyebrow {
  display: inline-block;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.24em;
  color: #8B5A1A;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.lenses__qa-heading-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0;
  color: #3C3C3C;
}

/* ---------- Q / A 横並びレイアウト ---------- */
.lenses__qa-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 16px;
  text-align: left;
}
.lenses__qa-row .lenses__qa-q,
.lenses__qa-row .lenses__qa-a {
  flex: 1;
  margin: 0;
  padding-top: 8px;
  text-align: left;
  min-width: 0;
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
  hanging-punctuation: allow-end;
}
/* SPでは日本語を普通に折り返す */
@media (max-width: 520px) {
  .lenses__qa-row .lenses__qa-q,
  .lenses__qa-row .lenses__qa-a {
    word-break: normal;
    line-break: auto;
    overflow-wrap: anywhere;
  }
}

/* chip色: 緑→赤に統一 (マーカーと揃える) */
.lenses__qa-r-pos {
  color: #EB1515 !important;
  font-weight: 800;
}
.lenses__qa-r-neg {
  color: #9A9A9A !important;
  text-decoration: line-through;
}

/* chip 選択肢カード内も同じ */
.lenses__qa-choice-chip--pos {
  background: rgba(235, 21, 21, 0.08) !important;
  color: #EB1515 !important;
  border-color: rgba(235, 21, 21, 0.2) !important;
}

.lenses__qa-bubble {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* Q: ダークブラウン+白文字 (質問=相手) */
.lenses__qa-bubble--q {
  background: #3C3C3C;
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(60, 60, 60, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* A: オレンジグラデ+白文字 (回答=MYコンサル) */
.lenses__qa-bubble--a {
  background: linear-gradient(135deg, #FF7500, #FF9340);
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(255, 117, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* お答えします badge は dekirukun 版では非表示 */
.lenses__qa-a-label {
  display: none !important;
}

/* SP: バブル少し小さく */
@media (max-width: 520px) {
  .lenses__qa-row {
    gap: 10px;
  }
  .lenses__qa-bubble {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
  .lenses__qa-row .lenses__qa-q,
  .lenses__qa-row .lenses__qa-a {
    padding-top: 4px;
  }
}

/* ---------- "独自システム" タイトル: オレンジ→山吹（ゴールド）に柔らかく ---------- */
.lenses__qa-ans-line2 {
  background: linear-gradient(90deg, #FF9340, #F5B624) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.lenses__qa-ans-line2 .lenses__qa-ans-small {
  -webkit-text-fill-color: var(--dk-ink-sub) !important;
  background: none !important;
}

/* KPI の数字も柔らかくオレンジ→ゴールドグラデに */
.lenses__qa-kpi-num {
  background: linear-gradient(135deg, #FF8B25, #E89A1A) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.lenses__qa-kpi-num small {
  -webkit-text-fill-color: #C77E0C !important;
  background: none !important;
}

/* ---------- セクション背景: 白→クリーム/薄黄色の交互 ---------- */
section.lenses,
section.reasons {
  background: var(--dk-cream) !important;
}

/* ---------- Q&Aブロック: クリーム背景+黄色アクセント ---------- */
.lenses__qa {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(247, 215, 47, 0.22), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FFF7CC 100%) !important;
  border: 2px solid rgba(247, 215, 47, 0.55) !important;
  box-shadow:
    0 30px 60px -30px rgba(247, 190, 0, 0.25),
    0 8px 24px -16px rgba(15, 23, 42, 0.08) !important;
}

.lenses__qa::before {
  background: linear-gradient(90deg,
    transparent 0%,
    #FFB833 25%,
    #F7D72F 50%,
    #FFB833 75%,
    transparent 100%) !important;
  height: 5px !important;
  opacity: 1 !important;
}

/* ---------- 太陽光放射ライン装飾（できるくん名物）---------- */
.lenses__qa::after {
  content: '' !important;
  position: absolute !important;
  top: -20% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 200% !important;
  height: 60% !important;
  background: repeating-conic-gradient(
    from -20deg at 50% 100%,
    transparent 0deg,
    transparent 8deg,
    rgba(247, 215, 47, 0.1) 8deg,
    rgba(247, 215, 47, 0.1) 10deg
  );
  pointer-events: none !important;
  z-index: 0 !important;
  inset: auto !important;
  border: none !important;
  border-radius: 0 !important;
}

.lenses__qa > * { position: relative; z-index: 1; }

/* ---------- CTAボタン: オレンジベースで黄色のシャイン ---------- */
.lenses__qa-cta,
.hero-a__cta-btn,
.btn--cta {
  background: linear-gradient(135deg, #FF7500 0%, #FF9340 100%) !important;
  box-shadow:
    0 16px 30px -10px rgba(255, 117, 0, 0.55),
    0 4px 10px -2px rgba(247, 215, 47, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ---------- "お答えします" label ---------- */
.lenses__qa-a-label {
  background: linear-gradient(90deg, #FF7500 0%, #FF9340 100%) !important;
  box-shadow: 0 8px 16px -6px rgba(255, 117, 0, 0.45) !important;
}

/* ---------- エンブレム ---------- */
.lenses__qa-emblem {
  background: radial-gradient(circle at 30% 30%, #FFF7CC 0%, #FFFCED 100%) !important;
  border: 2px solid rgba(255, 117, 0, 0.3) !important;
}
.lenses__qa-emblem svg {
  color: #FF7500 !important;
}
.lenses__qa-emblem::before {
  border: 1.5px dashed rgba(255, 117, 0, 0.4) !important;
}

/* ---------- Q/Aタイトル色調整: 柔らか黒ベース ---------- */
.lenses__qa-q,
.lenses__qa-a,
.lenses__qa-ans-title,
.lenses__qa-ans-line3 {
  color: var(--dk-ink) !important;
}

/* kicker「THE MY ANSWER」: 濃いオレンジ→落ち着いたブラウン寄りに */
.lenses__qa-ans-kicker {
  color: #8B5A1A !important;
  letter-spacing: 0.24em !important;
}
.lenses__qa-ans-kicker::before,
.lenses__qa-ans-kicker::after {
  background: #C89A4A !important;
  opacity: 0.6 !important;
}

/* 矢印は明るいオレンジを維持 */
.lenses__qa-arrow {
  background: linear-gradient(180deg, #FF9340, transparent) !important;
  opacity: 0.75 !important;
}
.lenses__qa-arrow::after {
  border-right-color: #FF9340 !important;
  border-bottom-color: #FF9340 !important;
}

/* 「お答えします」 badge: 彩度落としてマット寄りに */
.lenses__qa-a-label {
  background: linear-gradient(90deg, #FF8B25 0%, #FFA84F 100%) !important;
  box-shadow: 0 6px 14px -6px rgba(255, 139, 37, 0.35) !important;
  letter-spacing: 0.18em !important;
}

/* 「一般的な方法 ①/②」タグ: ほんのりオレンジに */
.lenses__qa-choice-mini-tag {
  color: #8B5A1A !important;
}
.lenses__qa-choice-mini-tag::before {
  background: rgba(255, 139, 37, 0.25) !important;
}

/* Q タイトル「なぜ〜」にも黄色マーカーで統一感 */
.lenses__qa-q {
  font-weight: 900 !important;
}

/* PC では Q を 1行に強制 + 中央寄せ（右寄り防止） */
@media (min-width: 768px) {
  .lenses__qa-row--q {
    justify-content: center !important;
  }
  .lenses__qa-row--q .lenses__qa-q {
    flex: none !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    line-break: strict !important;
  }
}

/* .lenses__head（高品質なのに、安い理由。ブロック）と3つの目線セクションの間の余白圧縮 */
.lenses__head {
  margin-bottom: clamp(40px, 5vw, 72px) !important;
}

/* A 回答内の「IT企業」を少し大きめに（強調） */
.lenses__qa-a em {
  font-size: 1.15em !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
}

/* ---------- 選択肢カード ---------- */
.lenses__qa-choice-mini {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1.5px solid rgba(255, 117, 0, 0.15) !important;
}

.lenses__qa-choice-mini-title {
  color: var(--dk-ink) !important;
}

/* r-pos/r-neg は上部で定義済み（赤/グレー）*/

/* ---------- 全体のテキスト柔らか黒化 ---------- */
h1, h2, h3, h4, h5, h6,
p, span, li, div {
  color: inherit;
}

/* ---------- 「プロが作る」できるくん風 巨大アウトライン数字 ---------- */
/* hero-a のメインタイトル周りに少し手を入れる例（控えめに） */
.hero-a__headline-main strong,
.hero-a__headline-price {
  color: #FF7500 !important;
  -webkit-text-stroke: 2px #FF7500 !important;
}

/* ---------- スクロールダウンの矢印などもオレンジに ---------- */
[class*="__arrow"]::after {
  border-color: #FF7500 !important;
}

/* ---------- メディアクエリ: SPでは光装飾を控えめに ---------- */
@media (max-width: 720px) {
  .lenses__qa::after {
    opacity: 0.6;
  }
}

/* ============================================================
   ご利用の流れ: 6ステップレイアウト
   ============================================================ */
.flow-v4__steps {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

/* ステップカード装飾: バッジに番号 + 黄色線のつながり */
.flow-v4__step {
  background: #fff !important;
  border: 1.5px solid rgba(255, 117, 0, 0.15) !important;
  padding: 32px 20px 24px !important;
  box-shadow: 0 10px 28px -18px rgba(255, 117, 0, 0.25) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.flow-v4__step:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(255, 117, 0, 0.4) !important;
}

.flow-v4__step-num {
  background: linear-gradient(135deg, #FF7500, #FF9340) !important;
  box-shadow: 0 8px 18px -6px rgba(255, 117, 0, 0.5) !important;
}

/* meta (0円 / 最短1日 など) */
.flow-v4__step-meta {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FFF7CC;
  color: #8B5A1A;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.flow-v4__step-meta strong {
  color: #3C3C3C;
  font-weight: 900;
  background: none !important;
  padding: 0;
}

/* デモサイト制作ステップ(2)を目立たせる */
.flow-v4__step--highlight {
  background: linear-gradient(180deg, #FFFCED 0%, #FFF7CC 100%) !important;
  border: 2px solid #FF7500 !important;
  box-shadow: 0 16px 36px -16px rgba(255, 117, 0, 0.5) !important;
  position: relative;
}
.flow-v4__step--highlight::before {
  content: '★ 無料';
  position: absolute;
  top: -10px;
  right: 12px;
  background: linear-gradient(135deg, #FF7500, #FF9340);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 14px -4px rgba(255, 117, 0, 0.55);
}

/* SP/タブレット */
@media (max-width: 960px) {
  .flow-v4__steps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .flow-v4__steps { grid-template-columns: 1fr !important; gap: 14px !important; }
  .flow-v4__step { padding: 24px 18px 20px !important; }
}

/* ============================================================
   制作実績: クリック可能カード + 大きめモックアップ (PC + SP重ね)
   ============================================================ */
.works-v4__url { display: none !important; }

/* カードは純粋な表示、クリック対象はサイト名のみ */
.works-v4__card {
  position: relative;
  cursor: default;
}

/* モックアップエリア: 余白を削って画面いっぱい使う */
.works-v4__grid--scroll .works-v4__mockup {
  background: transparent !important;
  padding: 14px 8px 40px !important;
  aspect-ratio: auto !important;
  position: relative;
}

/* ▼ PC ブラウザを大きく: 100%幅 */
.works-v4__browser {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 12px 12px 6px 6px !important;
  overflow: hidden;
  background: #1d1d1f !important;
  padding: 0 !important;
  box-shadow:
    0 22px 50px -16px rgba(15,23,42,0.4),
    0 6px 14px -2px rgba(15,23,42,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}
/* MacBookキーボード台座は不要なので削除 */
.works-v4__browser::after,
.works-v4__browser::before {
  display: none !important;
}

.works-v4__bar {
  background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  height: 32px !important;
  padding: 0 14px !important;
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-start;
  border-radius: 12px 12px 0 0;
}

.works-v4__dot {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50%;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
}
.works-v4__dot--r { background: #FF5F56 !important; }
.works-v4__dot--y { background: #FFBD2E !important; }
.works-v4__dot--g { background: #27C93F !important; }

.works-v4__screen {
  background: #fff;
  aspect-ratio: 16 / 9 !important;
}
.works-v4__screen img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* ▼ スマホ: iPhone実機アスペクト(9:19.5)・実機スクショそのまま */
.works-v4__phone {
  position: absolute !important;
  left: auto !important;
  right: -2% !important;
  bottom: 4% !important;
  top: auto !important;
  width: 22% !important;
  aspect-ratio: 9 / 19.5 !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, #2a2a2d 0%, #0a0a0b 100%) !important;
  padding: 5px !important;
  border: 2px solid #1a1a1d !important;
  box-shadow:
    0 20px 38px -12px rgba(15,23,42,0.5),
    0 6px 12px -2px rgba(15,23,42,0.22),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.4) !important;
  z-index: 3;
  transform: rotate(-2deg);
}
.works-v4__phone::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 24%;
  width: 3px;
  height: 12%;
  background: #1a1a1d;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 18% 0 #1a1a1d, 0 36% 0 #1a1a1d;
}
.works-v4__phone::after {
  display: none !important;
}
.works-v4__phone-island {
  position: absolute !important;
  top: 9px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 32% !important;
  height: 6px !important;
  background: #000 !important;
  border-radius: 999px !important;
  z-index: 2;
}
.works-v4__phone-screen {
  width: 100% !important;
  height: 100% !important;
  border-radius: 17px !important;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
}
.works-v4__phone-screen img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* カード下の情報 */
.works-v4__grid--scroll .works-v4__info {
  padding: 20px 8px 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.works-v4__tag {
  background: linear-gradient(135deg, #FFF7CC, #FFE894) !important;
  color: #8B5A1A !important;
  font-weight: 800 !important;
}

/* サイト名をリンクとして目立たせる */
a.works-v4__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #3C3C3C !important;
  font-weight: 900;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 117, 0, 0.25);
  background: #fff;
  box-shadow: 0 6px 14px -6px rgba(255, 117, 0, 0.2);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
  white-space: nowrap;
}

a.works-v4__name:hover {
  background: linear-gradient(135deg, #FF7500, #FF9340);
  color: #fff !important;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(255, 117, 0, 0.6);
}

.works-v4__name-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF7500, #FF9340);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  transition: background .25s ease, color .25s ease;
}

a.works-v4__name:hover .works-v4__name-arrow {
  background: #fff;
  color: #FF7500;
}

/* SP（~720px）調整: スマホサイズ & 位置 */
@media (max-width: 720px) {
  .works-v4__grid--scroll .works-v4__mockup {
    padding: 10px 4px 34px !important;
  }
  .works-v4__phone {
    width: 26% !important;
    right: -2% !important;
    left: auto !important;
    bottom: 6% !important;
  }
  a.works-v4__name {
    font-size: 13px;
    padding: 5px 14px;
  }
}

/* ============================================================
   最終CTAだけ補色のエメラルドグリーンで視線集中
   - 他のCTA（ヒーロー・demo-free・conclusion・reasons-v5）はオレンジ維持
   ============================================================ */

.cta-final__box .btn--cta {
  background: linear-gradient(135deg, #01C0A7 0%, #00A08B 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow:
    0 16px 30px -10px rgba(1, 192, 167, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.cta-final__box .btn--cta:hover {
  background: linear-gradient(135deg, #00A08B 0%, #008C7A 100%) !important;
  box-shadow:
    0 22px 40px -12px rgba(1, 192, 167, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.cta-final__box .btn--cta .btn__arrow {
  color: #fff !important;
}

/* ============================================================
   結論セクション: 料金ページ風クリーン背景 + オレンジ縦ストライプ
   ============================================================ */
.lenses__conclusion {
  background: linear-gradient(180deg, #FFFCF5 0%, #FFF6E5 100%) !important;
  color: #3C3C3C !important;
  border: 2px solid rgba(255, 117, 0, 0.25) !important;
  box-shadow:
    0 30px 60px -30px rgba(255, 117, 0, 0.2),
    0 10px 30px -20px rgba(15, 23, 42, 0.06) !important;
  position: relative;
  overflow: hidden;
}

/* 左側に縦のオレンジアクセントストライプ */
.lenses__conclusion::before {
  content: '' !important;
  background: linear-gradient(180deg, #FF7500 0%, #FF9340 100%) !important;
  background-image: linear-gradient(180deg, #FF7500 0%, #FF9340 100%) !important;
  mask: none !important;
  -webkit-mask: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  width: 6px !important;
  height: auto !important;
  inset: auto !important;
  pointer-events: none;
  z-index: 2 !important;
}

/* 上部のオレンジアクセントバー */
.lenses__conclusion::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: auto !important;
  height: 4px !important;
  background: linear-gradient(90deg, #FF7500 0%, #FFB366 50%, #FF7500 100%) !important;
  animation: none !important;
  z-index: 2 !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* 中身を前面に */
.lenses__conclusion > * { position: relative; z-index: 1; }

.lenses__conclusion-eyebrow {
  color: #8B5A1A !important;
}
.lenses__conclusion-eyebrow-dash {
  background: rgba(255, 117, 0, 0.5) !important;
}

.lenses__conclusion-title {
  color: #3C3C3C !important;
}

/* 「安い。」だけオレンジで強調 */
.lenses__conclusion-title-big {
  color: #3C3C3C !important;
}
.lenses__conclusion-title-big .lenses__accent-text {
  background: linear-gradient(180deg, #FF9340 0%, #FF7500 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.lenses__conclusion-title-big .lenses__accent-text::after {
  background: linear-gradient(90deg, #FF7500, #FFB366) !important;
  opacity: 0.35 !important;
}

/* メトリクス */
.lenses__conclusion-metric-label {
  color: #8B5A1A !important;
}
.lenses__conclusion-metric-value {
  color: #3C3C3C !important;
}
.lenses__conclusion-metric--main .lenses__conclusion-metric-value {
  color: #FF7500 !important;
}
.lenses__conclusion-metric-sep {
  background: rgba(255, 117, 0, 0.2) !important;
}

.lenses__conclusion-note {
  color: #9A9A9A !important;
}

/* 「完全オリジナル」テキスト版メトリクス（数字値と同じ視覚ウェイト） */
.lenses__conclusion-metric-value--text {
  font-size: clamp(18px, 3.2vw, 26px) !important;
  background: linear-gradient(180deg, #FF9340 0%, #FF7500 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}
.lenses__conclusion-metric--text .lenses__conclusion-metric-label {
  color: #8B5A1A !important;
}

@media (max-width: 640px) {
  .lenses__conclusion-metric-value--text {
    font-size: 16px !important;
  }
}