/* v2 override: hero + header のみ v2 の意匠を反映 (参考比較用 · 納品禁止) */

:root {
  --v2-color-primary: #0067CB;
  --v2-color-cta: #FB7A2A;
  --v2-color-success: #00C300;
  --v2-color-border: #E0E8F0;
  --v2-color-text: #333333;
  --v2-header-height: 72px;
  --v2-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- v2 Header (Session 7 Phase 9: 参考 header を非表示にし v2 site-header を有効化 · 参考 img/*.png 3 件排除) --- */
.p_top > #container > header.header { display: none !important; }

.site-header--legacy {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--v2-header-height);
  background: #FFF;
  border-bottom: 1px solid var(--v2-color-border);
  z-index: 100;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  font-family: var(--v2-font);
}
.site-header .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px;
}
/* 参考踏襲: 左右 2 グループ構成 (Session 8 · 第 6 回 FB 追加)
   参考 mizu-trouble-assist.com PC header と同構造 (左=ロゴ+電話 / 右=クレカ+CTA) */
.site-header .header-left,
.site-header .header-right {
  display: flex; align-items: center; gap: 16px;
}
.site-header .logo { display: flex; align-items: center; height: 100%; }
.site-header .logo img { height: 40px; width: auto; display: block; }
.site-header .header-tel {
  display: flex; align-items: center; gap: 8px;
  font-size: 22px; font-weight: 900; color: var(--v2-color-text);
  text-decoration: none;
}
/* 決済ブランドロゴ画像化 (Session 8 · 第 6 回 FB 追加)
   D:\ 素材ライブラリの公式 VISA/Master/JCB/AMEX + GitHub aaronfagan/svg-credit-card-payment-icons の Diners
   PIL + cairosvg で高さ 60px 統一 PNG に normalize · 参考 h_payment.png 相当 (別 img · 5 枚横並び) */
.site-header .header-cards { display: flex; gap: 6px; align-items: center; }
.site-header .header-cards img {
  height: 24px; width: auto; display: block;
}
.site-header .header-actions { display: flex; align-items: center; gap: 6px; }
.site-header .header-tel-btn,
.site-header .header-mail-btn,
.site-header .header-line {
  color: #FFF; width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 8px; font-weight: 700; font-size: 10px; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 6px 4px; text-decoration: none;
}
.site-header .header-tel-btn { background: var(--v2-color-cta); }
/* mail CTA: cobalt primary (brand blue) で orange 電話 CTA と視覚区別 (Session 8 · 第 6 回 FB) */
.site-header .header-mail-btn { background: var(--v2-color-primary); }
.site-header .header-line { background: var(--v2-color-success); }
.site-header .header-tel-btn svg,
.site-header .header-mail-btn svg,
.site-header .header-line svg { width: 24px; height: 24px; fill: currentColor; }

@media (min-width: 769px) {
  .site-header .header-tel-btn,
  .site-header .header-mail-btn { display: none; }
}
@media (max-width: 999px) {
  .site-header .header-tel,
  .site-header .header-cards { display: none; }
}
@media (max-width: 768px) {
  .site-header .logo img { height: 32px; }
}

/* 参考 header の CSS が body padding-top を管理 (v2 では不要) */

/* 九州水道レスキュー logo は横長 (aspect 6.39:1) のため SP で width を調整 */
@media (max-width: 768px) {
  .header h1 a { width: 40vw; }
}

/* --- v2 Hero (参考の .mv を非表示にして v2 .hero を表示) --- */
.mv { display: none !important; }

.hero {
  position: relative; padding: 0; background: transparent;
  overflow: hidden;
}
.hero picture { display: block; }
.hero .hero-img {
  display: block; width: 100%; height: auto;
}
/* header 上下と HERO の間隔対称 12px
   SP: 第 4 回 FB 微調整 2 で導入 (Session 7 Phase 11)
   PC: 第 5 回 FB 追加で SP と同基準に統一 (Session 8) — 参考 body { padding-top: 72px } の遺物余白解消
   第 4 回 FB #6「SP FV 幅を qes カード幅と一致」の左右 14px は訂正⑤で revert 済 */
body.p_top { padding-top: 12px !important; }
.hero { padding-top: 12px; }

/* --- v2 CTA band (参考の .cta > .cta_box を差替) --- */
.cta { display: none !important; } /* 参考の CTA block 非表示 */

/* 参考パターン: 青背景外枠 + 白カードが上端で飛び出す · カード下に青の帯が残る */
.cta-band {
  background: var(--v2-color-primary);
  padding: 20px 0 32px;
  font-family: var(--v2-font);
  position: relative;
}
/* 参考サイトの top:-50px 相当 · 白カードを前セクションに食い込ませて hero/qes と一体感を出す */
.cta-band-inner {
  max-width: 680px; margin: 0 auto;
  padding: 0 14px;
  display: flex; flex-direction: column; gap: 0;
  margin-top: -50px;
}

.cta-band-title {
  background: var(--v2-color-primary); color: #FFF;
  padding: 12px 14px; text-align: center;
  border-radius: 8px 8px 0 0;
}
.cta-band-title-main {
  font-size: 26px; font-weight: 900; line-height: 1.15;
  margin: 0; letter-spacing: 0.02em;
}
.cta-band-title-main .accent { color: #FFDD00; font-size: 34px; margin: 0 2px; }
.cta-band-title-sub { font-size: 14px; font-weight: 800; margin: 3px 0 0; letter-spacing: 0.04em; }

.cta-band-panel { display: block; width: 100%; background: #FFF; }
.cta-band-panel img { width: 100%; height: auto; display: block; }

/* 白カード内で buttons エリアを白背景で包む (参考の cta_main 相当)
   第 5 回 FB 追加: LINE 削除後の 3 列 grid 遺物で子 2 個が左寄せに見える違和感
   → auto-fit + minmax + justify-content: center で子要素数に応じた中央寄せに (Session 8)
   元の 3 分割時代の button 幅約 202px を維持 · LINE 復活時は 3 列に自動対応 */
.cta-band-buttons {
  background: #FFF;
  padding: 12px 16px 16px;
  border-radius: 0 0 8px 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 202px));
  justify-content: center;
  gap: 7px;
}
.cta-band-btn {
  display: flex; flex-direction: column;
  border-radius: 8px; overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  color: #FFF;
}
.cta-band-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 13px rgba(0,0,0,0.14); }
/* 第 5 回 FB #2「ボタンのテキスト類を中央に寄せた方が自然」対応 (Session 8)
   リボン (top) / body items / main (svg + text) / note すべて中央揃えに統一 */
.cta-band-btn__top {
  align-self: center;
  position: relative;
  font-size: 10px; font-weight: 700; text-align: center;
  padding: 2px 10px; line-height: 1.2;
  margin: 5px 12px 6px;
  background: #FFF; color: #333;
  border-radius: 999px;
  white-space: nowrap;
}
.cta-band-btn__top::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%); bottom: -4px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #FFF;
}
.cta-band-btn__body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; padding: 1px 14px;
}
.cta-band-btn__main {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 900; font-size: 18px; line-height: 1.1;
  color: #FFF;
}
.cta-band-btn__main svg {
  width: 18px; height: 18px; flex-shrink: 0;
  background: #FFF; padding: 4px;
  border-radius: 5px; box-sizing: content-box;
}
.cta-band-btn__note {
  font-size: 10px; font-weight: 700; opacity: 0.95;
  padding: 0; text-align: center;
  color: #FFF;
}

.cta-band-btn--tel { background: #DE2A2A; }
.cta-band-btn--tel .cta-band-btn__main { font-size: 22px; letter-spacing: 0.02em; }
.cta-band-btn--tel .cta-band-btn__main svg { color: #DE2A2A; }
.cta-band-btn--tel .cta-band-btn__top { color: #DE2A2A; }

.cta-band-btn--mail { background: var(--v2-color-cta); }
.cta-band-btn--mail .cta-band-btn__main svg { color: var(--v2-color-cta); }
.cta-band-btn--mail .cta-band-btn__top { color: var(--v2-color-cta); }

.cta-band-btn--line { background: var(--v2-color-success); }
.cta-band-btn--line .cta-band-btn__main svg { color: var(--v2-color-success); }
.cta-band-btn--line .cta-band-btn__top { color: var(--v2-color-success); }

@media (max-width: 768px) {
  .cta-band { padding: 16px 0; }
  .cta-band-inner { max-width: 100%; padding: 0 16px; margin-top: -30px; }
  .cta-band-title { padding: 10px 12px; }
  .cta-band-title-main { font-size: 20px; }
  .cta-band-title-main .accent { font-size: 26px; }
  .cta-band-title-sub { font-size: 13px; }
  .cta-band-buttons { grid-template-columns: 1fr; gap: 6px; }
  .cta-band-btn__main { font-size: 17px; }
  .cta-band-btn--tel .cta-band-btn__main { font-size: 24px; }
  .cta-band-btn__note { font-size: 10px; }
}

/* PC 版のみ 0.8 倍サイズ (2026-09-17 · user FB) */
@media (min-width: 769px) {
  .v2-qes-header,
  .v2-qes-cards { zoom: 0.8; }
  /* PC 版 CTA バンド 3 ボタン 1 行維持 · 各ボタンの text 折り返し防止 (2026-09-18 · user FB) */
  .cta-band-btn { min-width: 0; }  /* grid child の min-width:auto デフォルトによる column-overflow 防止 */
  .cta-band-btn__main { font-size: 15px; gap: 6px; }
  .cta-band-btn__main svg { width: 15px; height: 15px; padding: 3px; border-radius: 4px; }
  .cta-band-btn--tel .cta-band-btn__main { font-size: 17px; }
  .cta-band-btn--tel .cta-band-btn__main span { white-space: nowrap; }
  .cta-band-btn__top {
    align-self: center;
    padding: 2px 6px;
    font-size: 9px;
    margin: 5px 4px 6px 4px;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cta-band-btn__top::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .cta-band-btn__note { padding-left: 27px; font-size: 9px; }
  .cta-band-btn__body { padding: 2px 10px; }
}

/* PC 拡大 zoom は狭 viewport の overflow を避けて 900px+ でのみ発火 */
@media (min-width: 900px) {
  .cta-band-inner { zoom: 1.28; }
}

/* --- v2 qes header + cards (ハイブリッド: 写真だけ placeholder · 装飾は CSS) --- */
/* 参考の元 markup を非表示 */
.qes .ref-qes-tt,
.qes .qes_list { display: none !important; }

/* Header */
.v2-qes-header {
  text-align: center;
  font-family: var(--v2-font);
  margin: 0 auto 24px;
  max-width: 620px;
  padding: 0 16px;
}

/* Yellow ribbon */
.v2-qes-ribbon {
  display: inline-flex; align-items: center; gap: 12px;
  background: #FFE86A;
  color: #0067CB;
  padding: 8px 28px;
  border-radius: 8px 8px 0 0;
  font-weight: 900; font-size: 15px; letter-spacing: 0.06em;
  position: relative;
  margin-bottom: -1px;
}
.v2-qes-ribbon .rib-text { z-index: 1; }
.v2-qes-ribbon .rib-slash-l,
.v2-qes-ribbon .rib-slash-r {
  width: 2px; height: 20px;
  background: #0067CB;
  transform: rotate(-18deg);
}
.v2-qes-ribbon .rib-slash-r { transform: rotate(18deg); }

/* Blue main title */
.v2-qes-title-wrap {
  position: relative;
  background: #0067CB;
  color: #FFF;
  border-radius: 6px 6px 6px 6px;
  padding: 18px 28px;
  display: flex; align-items: center; justify-content: center;
}
.v2-qes-title {
  font-size: 28px; font-weight: 900;
  letter-spacing: 0.04em; line-height: 1.2;
}
.v2-qes-sparkle {
  position: absolute;
  top: -14px; right: 22px;
  width: 36px; height: 36px;
  display: block;
  pointer-events: none;
}
.v2-qes-hand {
  position: absolute;
  right: -6px; bottom: -20px;
  width: 52px; height: 52px;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* Q + question text */
.v2-qes-q {
  margin: 22px 0 0;
  font-size: 18px; font-weight: 700;
  color: #333;
  display: inline-flex; align-items: center; gap: 10px;
}
.v2-q-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: #FFE86A;
  color: #0067CB;
  border-radius: 50%;
  font-weight: 900; font-family: Verdana, sans-serif;
  font-size: 16px;
}

/* Cards */
.v2-qes-cards {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.v2-qes-card {
  background: #0067CB;
  border: 4px solid #0067CB;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex; flex-direction: column;
}
.v2-qes-card:hover { opacity: 0.85; transform: translateY(-2px); }

.v2-qes-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F5FAFE;
  border-bottom: 4px solid #0067CB;
}
.v2-qes-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 12px; font-weight: 700; color: #999;
  line-height: 1.6;
  background: repeating-linear-gradient(45deg, #E5EEF7 0 12px, #F5FAFE 12px 24px);
}

.v2-qes-card-label {
  background: #0067CB;
  color: #FFF;
  font-weight: 900;
  font-size: 20px;
  text-align: center;
  padding: 14px 8px 10px;
  letter-spacing: 0.04em;
}
.v2-qes-card-tap {
  background: #FFE86A;
  color: #0067CB;
  font-weight: 900;
  font-size: 20px;
  text-align: center;
  padding: 12px 8px;
  border-radius: 999px;
  margin: 0 12px 14px;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.v2-qes-card-tap .arr { font-size: 22px; }

@media (max-width: 768px) {
  .v2-qes-header { padding: 0 20px; margin-bottom: 20px; }
  .v2-qes-ribbon { font-size: 13px; padding: 6px 20px; }
  .v2-qes-title { font-size: 21px; }
  .v2-qes-title-wrap { padding: 14px 20px; }
  .v2-qes-hand { width: 28px; height: 28px; right: 6px; bottom: -10px; }
  .v2-qes-sparkle { top: -4px; right: 24px; width: 18px; height: 18px; }
  .v2-qes-q { font-size: 15px; margin-top: 16px; }
  .v2-q-icon { width: 24px; height: 24px; font-size: 14px; }
  .v2-qes-cards { max-width: 100%; padding: 0 16px; gap: 10px; }
  .v2-qes-card { border-width: 3px; border-radius: 12px; }
  .v2-qes-card-photo { border-bottom-width: 3px; }
  .v2-qes-card-label { font-size: 14px; padding: 10px 4px 8px; letter-spacing: 0.02em; }
  .v2-qes-card-tap { font-size: 16px; padding: 10px 8px; margin: 0 10px 10px; }
}

/* --- v2 sec-reasons (弊社が選ばれる3つの理由 · 参考 .sec01 差替) --- */
/* 参考の焼込画像セクション (.sec01) を非表示 */
.sec01 { display: none !important; }

.v2-sec-reasons {
  background: transparent;
  padding: 72px 0 88px;
  font-family: var(--v2-font);
}
.v2-sec-reasons .v2-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.v2-section-heading {
  text-align: center;
  margin-bottom: 60px;
}
.v2-section-heading h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  color: var(--v2-color-primary);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.v2-section-heading .v2-en {
  font-size: 14px;
  color: #999;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* SP 用改行制御 (br.sp-only は PC で非表示) */
.sp-only { display: none; }
.v2-reason-cards {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}
.v2-reason-card {
  background: #FFF;
  border: 2px solid var(--v2-color-primary);
  border-radius: 12px;
  padding: 34px 28px 28px;
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: center;
}
.v2-reason-card .v2-badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--v2-color-primary);
  color: #FFF;
  font-weight: 900;
  font-size: 18px;
  padding: 10px 40px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 6px rgba(0,103,203,0.25);
}
.v2-reason-photo {
  width: 100%;
  aspect-ratio: 5/2;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #6AA8E8 0%, #0067CB 100%);
  position: relative;
}
.v2-reason-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-reason-photo .v2-photo-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-align: center;
  z-index: 1;
}
.v2-reason-content .v2-lead {
  color: #4A93E0;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.v2-reason-content h3 {
  color: var(--v2-color-primary);
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.35;
}
.v2-reason-content p {
  color: #333;
  line-height: 1.75;
  font-size: 14px;
  margin: 0;
}
.v2-reason-content p strong {
  color: var(--v2-color-primary);
  font-weight: 900;
}
.v2-reason-content p .v2-highlight {
  color: var(--v2-color-cta);
  font-weight: 900;
}

@media (max-width: 768px) {
  .v2-sec-reasons { padding: 40px 0 56px; }
  .v2-section-heading { margin-bottom: 40px; }
  .v2-section-heading h2 { font-size: 28px; letter-spacing: 0.02em; line-height: 1.35; }
  .sp-only { display: inline; }
  .v2-reason-cards { gap: 50px; max-width: 100%; padding: 0 8px; }
  .v2-reason-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 28px 18px 18px;
  }
  .v2-reason-card .v2-badge { font-size: 16px; padding: 8px 32px; top: -18px; }
  .v2-reason-photo { max-width: 340px; margin: 0 auto; }
  .v2-reason-content h3 { font-size: 18px; }
  .v2-reason-content p { font-size: 13px; }
}

/* PC のみ全体を 0.8 倍に (CTA/qes と統一) */
@media (min-width: 769px) {
  .v2-sec-reasons .v2-container { zoom: 0.8; }
}

/* --- v2 sec-trouble (水廻りのトラブル例 · 参考サイト mizu-trouble-assist のカードデザイン踏襲) --- */
/* 参考の焼込画像セクション (.sec02) を非表示 */
.sec02 { display: none !important; }

.v2-sec-trouble {
  background: #EDF5FD;  /* 参考 .sec02 の背景色踏襲 (淡水色) */
  padding: 72px 0 88px;
  font-family: var(--v2-font);
}
.v2-sec-trouble .v2-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.v2-trouble-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 24px;
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 28px 32px;   /* 参考 ul の 12/28/32 + card 上端 badge overlap 用に top を 32px に */
  background: #FFF;          /* 参考 ul の白角丸ボックス */
  border-radius: 6px;        /* 参考 ul の角丸 */
}
/* 5枚目は grid auto-flow で左列 (3行1列目) に配置 · 参考サイト踏襲 */

/* カード外枠: 白背景 + 上端 badge overlap 余白 + overflow visible · shadow 削除 (白コンテナ内でエッジを消す) */
.v2-trouble-card {
  position: relative;
  background: #FFF;
  border-radius: 8px;
  padding-top: 13px;
  overflow: visible;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}
.v2-trouble-card:hover {
  transform: translateY(-2px);
}

/* 上端の青オーバル pill 見出しバッジ (参考カード踏襲) */
.v2-trouble-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--v2-color-primary);
  color: #FFF;
  font-weight: 900;
  font-size: 20px;
  padding: 10px 32px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 3;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0,103,203,0.25);
}

/* 実写画像コンテナ (aspect 5:2 · 参考サイトのカード画像比率踏襲 · 上左右角 R) */
.v2-trouble-img {
  width: 100%;
  aspect-ratio: 5/2;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6AA8E8 0%, #0067CB 100%);
  border-radius: 8px 8px 0 0;
}
.v2-trouble-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像右下の白角丸 price badge overlay */
.v2-trouble-price {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: #FFF;
  border-radius: 10px;
  padding: 8px 14px 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  z-index: 2;
}
.v2-trouble-price__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  font-weight: 900;
  color: var(--v2-color-primary);
  line-height: 1.1;
  letter-spacing: 0.02em;
  border-right: 1px solid #E0E8F0;
  padding-right: 8px;
}
.v2-trouble-price__value {
  color: var(--v2-color-cta);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.v2-trouble-price__unit {
  position: relative;
  color: var(--v2-color-cta);
  font-size: 14px;
  font-weight: 900;
  align-self: flex-end;
  margin-bottom: 3px;
}
.v2-trouble-price__tax {
  position: absolute;
  top: -8px;
  right: -2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--v2-color-cta);
  white-space: nowrap;
}

/* 本文 (白背景 · 説明文 + フル幅 CTA) */
.v2-trouble-body {
  padding: 9px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.v2-trouble-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  margin: 0;
}

/* フル幅オレンジ大 CTA ボタン */
.v2-trouble-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--v2-color-cta);
  color: #FFF;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.04em;
  margin-top: auto;
  transition: filter 0.15s ease;
}
.v2-trouble-card:hover .v2-trouble-cta {
  filter: brightness(1.06);
}
.v2-trouble-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #FFF;
  font-size: 9px;
  line-height: 1;
}

/* SP: 縦積み 1col */
@media (max-width: 768px) {
  .v2-sec-trouble { padding: 40px 0 56px; }
  .v2-trouble-grid {
    grid-template-columns: 1fr;
    padding: 20px 16px 0;
    max-width: 400px;
    gap: 44px;
  }
  .v2-trouble-badge { font-size: 18px; padding: 8px 26px; }
  .v2-trouble-price { right: 10px; bottom: 10px; padding: 6px 12px; }
  .v2-trouble-price__value { font-size: 26px; }
  .v2-trouble-desc { font-size: 13px; line-height: 1.65; }
  .v2-trouble-cta { font-size: 14px; padding: 12px; }
}

/* PC のみ全体を 0.8 倍に (CTA/qes/sec-reasons と統一) */
@media (min-width: 769px) {
  .v2-sec-trouble .v2-container { zoom: 0.8; }
}

/* --- v2 sec-service (サービス一覧表 · 参考サイト .sec03 デザイン踏襲) --- */
/* 参考の焼込画像セクション (.sec03) を非表示 */
.sec03 { display: none !important; }

.v2-sec-service {
  background: transparent;
  padding: 72px 0 88px;
  font-family: var(--v2-font);
}
.v2-sec-service .v2-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.v2-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}
.v2-service-block {
  background: #FFF;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.v2-service-block .v2-service-hd {
  background: var(--v2-color-primary);
  color: #FFF;
  padding: 16px 20px;
  font-weight: 900;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.v2-service-block table {
  width: 100%;
  border-collapse: collapse;
}
.v2-service-block td {
  padding: 14px 20px;
  border-bottom: 1px solid #E0E8F0;
  font-size: 15px;
  color: #333;
  font-weight: 700;
  vertical-align: middle;
}
/* zebra: 奇数行 (1,3,5) が淡水色 · 偶数行 (2,4) が白 · 参考踏襲 */
.v2-service-block tr:nth-child(odd) td {
  background: #EDF5FD;
}
.v2-service-block tr:nth-child(even) td {
  background: #FFF;
}
.v2-service-block td:last-child {
  text-align: right;
  color: var(--v2-color-cta);
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.v2-service-block tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .v2-sec-service { padding: 40px 0 56px; }
  .v2-sec-service .v2-container { padding: 0; }
  .v2-service-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: none;
    padding: 0 8px;
  }
  .v2-service-block .v2-service-hd { font-size: 17px; padding: 14px 16px; }
  .v2-service-block td { padding: 12px 16px; font-size: 14px; }
  .v2-service-block td:last-child { font-size: 15px; }
}

/* PC のみ全体を 0.8 倍に (CTA/qes/sec-reasons/sec-trouble と統一) */
@media (min-width: 769px) {
  .v2-sec-service .v2-container { zoom: 0.8; }
}

/* --- v2 sec-flow (水のトラブル解決の流れ · 参考 .sec04 デザイン踏襲) --- */
/* 参考の焼込画像セクション (.sec04) を非表示 */
.sec04 { display: none !important; }

.v2-sec-flow {
  background: transparent;
  padding: 72px 0 88px;
  font-family: var(--v2-font);
}
.v2-sec-flow .v2-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.v2-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.v2-flow-step {
  background: #EDF5FD;  /* 淡水色 card · 参考踏襲 */
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v2-flow-hd {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--v2-color-primary);
  color: #FFF;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 4px rgba(0,103,203,0.2);
}
.v2-flow-hd h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--v2-color-primary);
  margin: 0;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.v2-flow-desc {
  font-size: 14px;
  line-height: 1.75;
  color: #333;
  margin: 0;
  flex: 1;
}
.v2-flow-photo {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(135deg, #6AA8E8 0%, #0067CB 100%);
  position: relative;
}
.v2-flow-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}
.v2-flow-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 10px, transparent 10px 20px);
}
.v2-flow-photo .v2-photo-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  z-index: 1;
}

@media (max-width: 768px) {
  .v2-sec-flow { padding: 40px 0 56px; }
  .v2-sec-flow .v2-container { padding: 0; }
  .v2-flow-steps {
    grid-template-columns: 1fr;
    max-width: none;
    padding: 0 8px;
    gap: 20px;
  }
  .v2-flow-step { padding: 20px; gap: 12px; }
  .v2-flow-hd h3 { font-size: 18px; }
  .v2-flow-desc { font-size: 13px; }
}

/* PC のみ全体を 0.8 倍に (他セクションと統一) */
@media (min-width: 769px) {
  .v2-sec-flow .v2-container { zoom: 0.8; }
}

/* --- 参考の qa / area / contact セクションを PC のみ縮小 (他セクションと統一) --- */
/* contact のみさらに 0.9 倍を掛けて実質 0.72 (form が大きく感じるため) */
@media (min-width: 769px) {
  .qa .row { zoom: 0.8; }
  .area .row { zoom: 0.8; }
  .contact { zoom: 0.72; }
}

/* --- 固定 CTA バーの上部テキストに吹き出し装飾を追加 (2026-09-18 · user 要望) --- */
.cta_fixed dt div {
  display: inline-block;
  position: relative;
  background: #FFF;
  border: 2px solid #002448;
  border-radius: 999px;
  padding: 3px 14px;
  line-height: 1.3;
}
.cta_fixed dt div::after,
.cta_fixed dt div::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 0; height: 0;
  transform: translateX(-50%);
}
.cta_fixed dt div::before {
  bottom: -8px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #002448;
}
.cta_fixed dt div::after {
  bottom: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #FFF;
}
.cta_fixed dt { text-align: center; }

/* --- 固定 CTA バーの上部テキストに青フレーム吹き出しを追加 (参考サイト踏襲) --- */
.cta_fixed dt { text-align: center; }
.cta_fixed dt div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #FFF;
  border: 2px solid #0067CB;
  border-radius: 8px;
  padding: 6px 18px;
  line-height: 1.2;
}
.cta_fixed dt div::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #0067CB;
}
.cta_fixed dt div::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #FFF;
}

/* --- PC 版 縦方向余白を約半分に (session 5 · user 要望) --- */
@media (min-width: 769px) {
  /* v2 実装セクション (source 72/60/88 → 36/30/44) */
  .v2-sec-reasons,
  .v2-sec-trouble,
  .v2-sec-service,
  .v2-sec-flow { padding: 36px 0 44px; }
  .v2-section-heading { margin-bottom: 30px; }

  /* 参考の qa (specificity .p_top .qa 対策) source 24/24/32 → 12/12/16 */
  .p_top .qa { padding: 12px 0 16px; }
  .p_top .qa h2 { margin-bottom: 12px; }

  /* 参考の area  source 40/40/82 → 20/20/41 */
  .p_top .area { padding: 20px 0 41px; }
  .p_top .area h2 { margin-bottom: 20px; }

  /* 参考の contact  source 50/24/66 → 25/12/33 */
  .p_top .contact { padding: 25px 0 33px; }
  .p_top .contact h2 { margin-bottom: 12px; }
}

/* ============================================================
   qes-flow-back: 診断フロー内「選び直す」戻るボタン (Session 7)
   ============================================================ */
.qes1_blk .qes-flow-back {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 8px 20px;
  background: transparent;
  border: 1px solid #0067CB;
  color: #0067CB;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.qes1_blk .qes-flow-back:hover {
  background: #0067CB;
  color: #fff;
}
.qes1_blk { text-align: center; }
.qes1_blk .step-form { text-align: left; }
@media (max-width: 768px) {
  .qes1_blk .qes-flow-back {
    font-size: 12px;
    padding: 6px 16px;
    margin-bottom: 14px;
  }
}

/* ============================================================
   自動 popup (task-010 · Session 7 Phase 13 · 2026-09-22)
   第 4 回 FB 対応「安っぽい印象」への装飾強化:
   FV パレット (cobalt #0067CB / orange #FB7A2A / pale water #EDF5FD) +
   Noto Sans JP + FV CTA と統一。画像はプレースホルダー化 (後日 v2 差替)。
   ============================================================ */
.site-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 43, 95, 0.72); /* deep cobalt semi-transparent · FV 水テーマと連続 */
  padding: 20px 12px;
  box-sizing: border-box;
  animation: sitepopupFade 0.3s ease-out;
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}
.site-popup[data-open="true"] {
  display: flex;
}
@keyframes sitepopupFade {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.site-popup__card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 18px;
  border: 3px solid #0067CB;
  box-shadow:
    0 24px 60px rgba(0, 30, 80, 0.45),
    0 0 0 6px rgba(255, 255, 255, 0.12);
  overflow: hidden;
  max-height: 92vh;
  overflow-y: auto;
}
.site-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 2px solid #0067CB;
  background: #fff;
  color: #0067CB;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 30, 80, 0.2);
  transition: background 0.15s ease, color 0.15s ease;
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
}
.site-popup__close:hover {
  background: #0067CB;
  color: #fff;
}
.site-popup__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* pop 画像 (Phase 14 · Codex CLI gpt-image-2 生成 v2a 女性受付) */
.site-popup__img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 3px solid #0067CB;
}
/* 第 5 回 FB #4「POP tel button を LP 内の電話ボタンと同じに変更」対応 (Session 8)
   Phase 13 で追加した独自 orange gradient + stripe + Noto Sans JP 装飾は撤回。
   HTML markup を CTA バンド tel button (cta-band-btn cta-band-btn--tel) に置換し、
   style を丸ごと継承。ここでは pop card 内の位置調整 (margin) のみ規定。 */
.site-popup__telbtn.cta-band-btn {
  margin: 16px 16px 14px;
}
.site-popup__notice {
  background: #FFF8E7;
  color: #17130a;
  font-size: 12.5px;
  font-weight: 500;
  padding: 12px 14px;
  text-align: center;
  line-height: 1.65;
  margin: 0;
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  border-top: 2px dashed #F2C34D;
}
.site-popup__notice em {
  font-style: normal;
  font-weight: 900;
  color: #d32f2f;
  letter-spacing: 0.05em;
}
@media (min-width: 768px) {
  .site-popup__card {
    max-width: 400px;
  }
  .site-popup__img::after {
    font-size: 17px;
  }
  .site-popup__notice {
    font-size: 13.5px;
    padding: 14px 16px;
  }
}

/* ============================================================
   Session 7 Phase 9 · 参考画像排除に伴う CSS 追加 (2026-09-21)
   qa_tt / area_tt / contact_tt → h2 テキスト化 · f_btn → CSS button
   ============================================================ */
.v2-sec-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: var(--v2-color-primary);
  text-align: center;
  margin: 0 0 32px;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
@media (max-width: 768px) {
  .v2-sec-title {
    font-size: 22px;
    margin-bottom: 20px;
  }
}

.v2-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  padding: 18px 32px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #FB7A2A 0%, #E85E10 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(232, 94, 16, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.v2-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(232, 94, 16, 0.35);
}
.v2-submit-btn:active { transform: translateY(0); }
.v2-submit-btn::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zm0 4l8 5 8-5V6l-8 5-8-5v2z'/></svg>") center/contain no-repeat;
}
@media (max-width: 768px) {
  .v2-submit-btn {
    min-width: unset;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
  }
}

/* --- 参考 `.mv` HERO ブロック完全 hide (v2 hero に統一) --- */
.p_top .mv { display: none !important; }

/* --- QA Q/A アイコン (ic_q.png / ic_a.png) を CSS 円形 badge + テキストに置換 --- */
.qa dt.js_accordion::before {
  content: "Q" !important;
  background-image: none !important;
  background-color: #0067CB !important;
  color: #fff !important;
  font-weight: 900;
  font-size: 15px;
  border-radius: 50%;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12px;
  vertical-align: middle;
}
.qa dd::before {
  content: "A" !important;
  background-image: none !important;
  background-color: #FB7A2A !important;
  color: #fff !important;
  font-weight: 900;
  font-size: 15px;
  border-radius: 50%;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12px;
  vertical-align: middle;
}

/* --- fixed_tel.png を CSS + SVG に置換 (SP 固定 CTA バー) --- */
.cta_fixed .fixed_tel img { display: none !important; }
.cta_fixed .fixed_tel {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cta_fixed .fixed_tel::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d32f2f'><path d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.15 15.15 0 0 1-6.59-6.59l2.2-2.2c.28-.28.36-.67.24-1.02A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
}
.cta_fixed .fixed_tel span {
  color: #d32f2f;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* --- STEP3 結果ブロックを CSS + テキスト化 (参考 step3_*.png / step32_*.png 排除) --- */
.step3-blk {
  padding: 24px 20px;
  background: #fff;
  border: 2px solid #0067CB;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 103, 203, 0.08);
}
.step3-blk .step3-result-heading {
  font-size: 20px;
  font-weight: 900;
  color: #0067CB;
  margin: 0 0 14px;
  text-align: center;
  line-height: 1.4;
}
.step3-blk .step3-result-body {
  font-size: 14px;
  color: #17130a;
  line-height: 1.9;
  margin: 0 0 20px;
}
.step3-blk .step3-result-body strong {
  color: #0067CB;
  font-weight: 900;
}
.step3-blk .step3-result-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: #FFF8E7;
  border-radius: 8px;
  margin: 0 0 18px;
}
.step3-blk .step3-result-price-label {
  font-size: 13px;
  font-weight: 700;
  color: #17130a;
}
.step3-blk .step3-result-price-value {
  font-size: 36px;
  font-weight: 900;
  color: #d32f2f;
  line-height: 1;
}
.step3-blk .step3-result-price-unit {
  font-size: 14px;
  font-weight: 700;
  color: #d32f2f;
}
.step3-blk .step3-result-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: linear-gradient(180deg, #FB7A2A 0%, #E85E10 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  border-radius: 999px;
  transition: transform 0.15s ease;
}
.step3-blk .step3-result-cta:hover { transform: translateY(-1px); }
.step3-blk .step3-result-cta-main {
  font-size: 20px;
  letter-spacing: 0.03em;
}
.step3-blk .step3-result-cta-sub {
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
  opacity: 0.95;
}

/* --- 参考の step_ar 矢印 (step_ar.png / step_ar_sp.png) hide (参考画像排除) --- */
.step_ar { display: none !important; }
@media (max-width: 768px) {
  .step3-blk { padding: 20px 14px; }
  .step3-blk .step3-result-heading { font-size: 17px; }
  .step3-blk .step3-result-body { font-size: 13px; }
  .step3-blk .step3-result-price-value { font-size: 30px; }
  .step3-blk .step3-result-cta-main { font-size: 17px; }
}

/* Session 9 - Photo upload UI (蜂 LP task-007 パターン移植) */
.contact .photo-upload {
  border: 2px dashed var(--v2-color-border);
  border-radius: 8px;
  padding: 20px;
  background: #FFF;
  text-align: center;
}
.contact .photo-upload__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--v2-color-primary);
  color: #FFF;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s, transform 0.1s;
  border: none;
}
.contact .photo-upload__label:hover {
  background: #0055A8;
  transform: translateY(-1px);
}
.contact .photo-upload__label:active {
  transform: translateY(0);
}
.contact .photo-upload__label input[type="file"] {
  display: none;
}
.contact .photo-upload__total {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}
.contact .photo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.contact .photo-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--v2-color-border);
  background: #FFF;
}
.contact .photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact .photo-item__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #FFF;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.contact .photo-item__remove:hover {
  background: rgba(0, 0, 0, 0.85);
}
.contact .photo-item__size {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #FFF;
  font-size: 10px;
  padding: 2px 4px;
  text-align: center;
}
.contact .error-msg {
  margin-top: 10px;
  padding: 10px;
  background: #FEE;
  border: 1px solid #FCC;
  border-radius: 4px;
  color: #C00;
  font-size: 13px;
  text-align: left;
}
.contact .photo-help {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  text-align: left;
}
.contact dl dt .optional {
  background: #E0E8F0;
  color: #666;
}