/* ========================================
   home-services.css — サービスページ強化
======================================== */

/* スクロールアニメーション */
.service-detail-layout,
.service-lead-layout,
.service-detail-photo,
.service-detail-text {
  animation: none;
}

/* セクション毎のエントランス */
.section-service-detail { overflow: hidden; }

/* 写真ホバーズーム */
.service-detail-img {
  transition: transform .5s ease;
}
.service-detail-photo:hover .service-detail-img {
  transform: scale(1.03);
}

/* モバイル強化 */
@media (max-width: 768px) {
  .service-lead-layout { grid-template-columns: 1fr; gap: 24px; } .service-detail-layout,
  .service-detail-layout--rev { grid-template-columns: 1fr; direction: ltr; gap: 24px; }
  .service-detail-layout--rev > * { direction: ltr; }
  .service-detail-img { height: 200px; }
  .service-detail-text { order: 2; }
  .service-detail-photo { order: 1; }

  .subnav-inner { padding: 0 8px; }
  .subnav-link { padding: 12px 12px; font-size: .75rem; }

  .section-service-lead { padding: 40px 0; }
  .section-service-detail { padding: 48px 0; }
}

@media (max-width: 480px) {  .service-detail-price { flex-direction: column; align-items: flex-start; gap: 6px; }
  .subnav-inner { gap: 0; }
  .subnav-link { padding: 12px 8px; font-size: .7rem; white-space: nowrap; }
}

/* ========================================
   料金プラン（ライト / ミドル / ヘビー）
======================================== */
.section-pricing { padding: 100px 0; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 8px;
}
.pricing-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-xl);
  border: 1.5px solid var(--c-border);
  box-shadow: var(--shadow-md);
  padding: 38px 28px 32px;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* おすすめプランは強調 */
.pricing-card--featured {
  border-color: var(--c-primary);
  box-shadow: 0 24px 60px rgba(13,193,204,.22);
  transform: translateY(-8px) scale(1.02);
}
.pricing-card--featured:hover { transform: translateY(-12px) scale(1.02); }
/* 時間プランとオプション・パックの差を明確化：オプションは薄い青の地で区別 */
.pricing-card--pack { background: rgba(13, 193, 204, 0.06); border-color: rgba(13, 193, 204, 0.22); }
.pricing-ribbon {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-primary);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(13,193,204,.4);
}
.pricing-card-head { text-align: center; }
.pricing-plan-name { font-size: 1.5rem; font-weight: 900; color: var(--c-dark); }
.pricing-plan-catch { font-size: .82rem; color: var(--c-gray); margin-top: 6px; font-weight: 500; }
.pricing-price {
  text-align: center;
  margin: 22px 0;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--c-border);
}
.pricing-price-unit { font-size: .8rem; color: var(--c-gray); font-weight: 700; }
.pricing-price-num {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-primary);
  font-family: var(--font-en);
  line-height: 1.25;
}
.pricing-price-num em { font-style: normal; }
.pricing-price-note { font-size: .78rem; color: var(--c-gray-3); font-weight: 600; }
.pricing-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  flex: 1;
}
.pricing-feature-list li {
  position: relative;
  padding-left: 26px;
  font-size: .86rem;
  color: var(--c-dark);
  font-weight: 500;
  line-height: 1.6;
}
.pricing-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--c-primary);
  font-weight: 900;
}
.pricing-note {
  margin-top: 26px;
  font-size: .8rem;
  color: var(--c-gray-3);
  text-align: center;
  line-height: 1.7;
}
/* 内容駆動BP：料金カード3枚は769〜860pxで窮屈になるため768より早く1カラム化（意図的・標準768とは別） */
@media (max-width: 860px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .pricing-card--featured { transform: none; }
  .pricing-card--featured:hover { transform: translateY(-6px); }
}

/* ========================================
   サービス：タブ切り替え（選択したパネルのみ表示）
======================================== */
.service-panel { display: none; }
.service-panel.active { display: block; animation: servicePanelIn .35s ease both; }
@keyframes servicePanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 料金プラン：スペック/内容例/パック ---- */
.pricing-spec { list-style: none; padding: 0; margin: 4px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.pricing-spec li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .82rem; padding: 8px 12px; background: var(--c-bg-alt); border-radius: var(--r-md); }
.pricing-spec li span { color: var(--c-gray); font-weight: 600; }
.pricing-spec li strong { color: var(--c-dark); font-weight: 800; text-align: right; }
.pricing-desc { font-size: .82rem; color: var(--c-gray); line-height: 1.8; font-weight: 500; margin-bottom: 16px; }
.pricing-eg-head { font-size: .74rem; font-weight: 800; color: var(--c-primary); letter-spacing: .04em; margin-bottom: 10px; }
.pricing-subhead { text-align: center; font-size: 1.25rem; font-weight: 800; color: var(--c-dark); margin: 56px 0 24px; }
.pricing-grid--packs { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.pricing-card--pack { border-style: dashed; }
.pricing-card--pack .pricing-plan-name { font-size: 1.15rem; line-height: 1.4; }
.pricing-pack-tag { display: inline-block; font-size: .7rem; font-weight: 800; color: var(--c-pink); background: rgba(240,77,152,.1); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
/* 内容駆動BP：パックも料金グリッドと足並みを揃えて860pxで1カラム化 */
@media (max-width: 860px) {
  .pricing-grid--packs { grid-template-columns: 1fr; max-width: 420px; }
}

/* ---- 料金：定額制の説明＆注意事項 ---- */
.pricing-why {
  max-width: 820px; margin: 8px auto 0;
  background: linear-gradient(135deg, rgba(13,193,204,.08), rgba(240,77,152,.06));
  border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: 28px 32px;
}
.pricing-why-title { font-size: 1.15rem; font-weight: 800; color: var(--c-dark); margin-bottom: 14px; }
.pricing-why p { font-size: .9rem; color: var(--c-gray); line-height: 1.9; font-weight: 500; }
.pricing-why p + p { margin-top: 12px; }
.pricing-terms { max-width: 820px; margin: 48px auto 0; background: var(--c-bg-alt); border-radius: var(--r-xl); padding: 32px; }
.pricing-terms-title { font-size: 1.05rem; font-weight: 800; color: var(--c-dark); margin-bottom: 20px; text-align: center; }
.pricing-term { margin-bottom: 20px; }
.pricing-term:last-child { margin-bottom: 0; }
.pricing-term h4 { font-size: .9rem; font-weight: 800; color: var(--c-primary); margin-bottom: 6px; }
.pricing-term p { font-size: .84rem; color: var(--c-gray); line-height: 1.85; font-weight: 500; }
.pricing-pay-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pricing-pay-list li { font-size: .84rem; color: var(--c-gray); line-height: 1.8; background: #fff; border-radius: var(--r-md); padding: 12px 16px; border-left: 3px solid var(--c-primary); }
.pricing-pay-list strong { color: var(--c-dark); }

/* ---- 補助金特化型DXプラン（顧客向け） ---- */
.grant-plan { max-width: 860px; margin: 0 auto; }
.grant-flow { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.grant-flow li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 14px 16px; }
.grant-flow li span { flex-shrink: 0; font-family: var(--font-en); font-weight: 900; color: var(--c-primary); font-size: 1rem; width: 28px; line-height: 1.5; }
.grant-flow li div { font-size: .86rem; color: var(--c-gray); line-height: 1.7; font-weight: 500; }
.grant-flow li strong { display: block; color: var(--c-dark); font-weight: 800; font-size: .92rem; margin-bottom: 2px; }

/* 料金プランを kintone 詳細の直下に表示（余白にゆとりを） */
.kintone-pricing { margin-top: 96px; padding-top: 80px; border-top: 1px solid var(--c-border, rgba(10,14,20,.1)); }
.kintone-pricing .section-header { margin-bottom: 56px; }
.kintone-pricing .pricing-why { margin-bottom: 64px; }
.kintone-pricing .pricing-grid { margin-bottom: 16px; }
.kintone-pricing .pricing-subhead { margin-top: 72px; }
.kintone-pricing .pricing-terms { margin-top: 72px; }
.kintone-pricing .pricing-note { margin-top: 20px; }

/* ※旧アコーディオンCSS(.is-accordion / .pricing-grid--packs.is-acc / @keyframes pricingReveal)はモーダル化でJS撤去のため削除(2026-06-22) */

/* 他サービスの料金プラン保留枠 */
.pricing-placeholder {
  margin-top: 56px; padding: 56px 24px; text-align: center;
  border: 1px dashed rgba(10,14,20,.18); border-radius: 16px;
  background: rgba(13,193,204,.03);
}
.pricing-placeholder .label { display: inline-block; margin-bottom: 10px; }
.pricing-placeholder p { font-size: .92rem; color: var(--c-gray-3, #8a98a0); font-weight: 600; letter-spacing: .08em; }
.pricing-placeholder .pricing-prep-title { font-size: 1.1rem; font-weight: 800; color: var(--c-dark); letter-spacing: normal; margin-bottom: 10px; }
.pricing-placeholder .pricing-prep-note { font-size: .9rem; color: var(--c-gray); font-weight: 500; line-height: 1.9; letter-spacing: normal; max-width: 540px; margin: 0 auto 22px; }

/* ========================================
   集約CTA（サービスページ末・全タブ共通の主導線）
   詳細はテキストリンクに格下げ→ここに塗りボタン1つ
======================================== */
.service-final-cta {
  position: relative;
  padding: 96px 0;
  background: var(--c-bg-alt);
  overflow: hidden;
}
.service-final-cta::before,
.service-final-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  pointer-events: none;
}
.service-final-cta::before {
  width: 340px; height: 340px;
  top: -120px; left: -80px;
  background: var(--c-primary-light);
}
.service-final-cta::after {
  width: 300px; height: 300px;
  bottom: -130px; right: -70px;
  background: rgba(240,77,152,.10);
}
.service-final-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}
.service-final-cta-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-dark);
  line-height: 1.45;
  margin: 14px 0 18px;
}
.service-final-cta-desc {
  font-size: .95rem;
  color: var(--c-gray);
  line-height: 2;
  font-weight: 500;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .service-final-cta { padding: 64px 0; }
  .service-final-cta-title { font-size: 1.5rem; }
  .service-final-cta-desc { font-size: .9rem; }
}


/* kintone「こんな悩み、ありませんか？」（#service-kintone 専用） */
.service-worry {
  margin: 24px 0 28px;
  background: linear-gradient(135deg, rgba(13,193,204,.08), rgba(240,77,152,.06));
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 22px 26px;
}
.service-worry-title { font-size: 1rem; font-weight: 800; color: var(--c-dark); margin-bottom: 14px; }
.service-worry-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.service-worry-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--c-gray); line-height: 1.7; font-weight: 500; }
.service-worry-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--c-primary); margin-top: 1px; }
@media (max-width: 768px) {
  .service-worry { padding: 18px 18px; }
  .service-worry-list li { font-size: .86rem; }
}


/* kintone: 課題(悩み)｜解決(対応できること) を全幅2カラムで対比（縦長解消） */
.kin-detail { margin-top: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.kin-detail .service-worry { margin: 0; }
.kin-caps { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 22px 26px; }
.kin-caps-title { font-size: 1rem; font-weight: 800; color: var(--c-dark); margin-bottom: 14px; }
.kin-caps .service-detail-list { margin-bottom: 0; }
@media (max-width: 768px) {
  .kin-detail { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
}

/* ===== HP制作 セクション ===== */
.section-hp .hp-block-title { font-size: 1.4rem; font-weight: 900; color: var(--c-dark); text-align: center; margin: 64px 0 6px; }
.section-hp .hp-block-lead { text-align: center; color: var(--c-gray); font-size: .9rem; max-width: 640px; margin: 0 auto 28px; line-height: 1.7; }

/* なぜTineeds */
.hp-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.hp-why-item { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 26px 22px; text-align: center; }
.hp-why-ic { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(13,193,204,.1); color: var(--c-primary); margin-bottom: 14px; }
.hp-why-ic svg { width: 26px; height: 26px; }
.hp-why-item h3 { font-size: 1rem; font-weight: 800; color: var(--c-dark); margin-bottom: 8px; }
.hp-why-item p { font-size: .84rem; color: var(--c-gray); line-height: 1.7; }

/* プラン内の追記 */
.hp-plan-rec { display: flex; flex-direction: column; gap: 2px; background: var(--c-bg-alt); border-radius: 12px; padding: 10px 14px; margin: 4px 0 14px; }
.hp-plan-rec span { font-size: .7rem; font-weight: 700; color: var(--c-primary); letter-spacing: .04em; }
.hp-plan-rec strong { font-size: .9rem; color: var(--c-dark); font-weight: 800; }
.hp-plan-note { font-size: .76rem; color: var(--c-gray-3); line-height: 1.6; margin-top: 12px; }

/* 保守 */
.hp-maint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin: 0 auto; }
.hp-maint-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 26px; }
.hp-maint-card--rec { border-color: var(--c-primary); box-shadow: 0 8px 30px rgba(13,193,204,.12); }
.hp-maint-name { display: block; font-size: 1.05rem; font-weight: 800; color: var(--c-dark); }
.hp-maint-price { display: block; font-size: 1.6rem; font-weight: 900; color: var(--c-primary); margin: 6px 0 16px; }
.hp-maint-price small { font-size: .72rem; color: var(--c-gray); font-weight: 700; margin-left: 4px; }
.hp-maint-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.hp-maint-card li { position: relative; padding-left: 22px; font-size: .85rem; color: var(--c-dark); line-height: 1.6; }
.hp-maint-card li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }

/* 共通注記 */
.hp-notes { max-width: 820px; margin: 22px auto 0; padding: 18px 22px; background: var(--c-bg-alt); border-radius: 14px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hp-notes li { font-size: .78rem; color: var(--c-gray); line-height: 1.6; padding-left: 18px; position: relative; }
.hp-notes li::before { content: "※"; position: absolute; left: 0; color: var(--c-gray-3); }

/* 導入の流れ */
.hp-flow { list-style: none; padding: 0; max-width: 760px; margin: 0 auto; }
.hp-flow li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--c-border); font-size: .92rem; color: var(--c-dark); font-weight: 600; }
.hp-flow li:last-child { border-bottom: none; }
.hp-flow-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 800; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; }

/* かんたん概算見積もり */
.hp-estimate { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: 28px; align-items: start; box-shadow: var(--shadow-md); }
.hp-est-fields { display: flex; flex-direction: column; gap: 18px; }
.hp-est-row { display: flex; flex-direction: column; gap: 8px; }
.hp-est-q { font-size: .82rem; font-weight: 800; color: var(--c-dark); }
.hp-est-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-est-opt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--c-border); border-radius: 999px; font-size: .8rem; color: var(--c-gray); cursor: pointer; transition: border-color .2s, background .2s, color .2s; background: #fff; position: relative; }
.hp-est-opt input { accent-color: var(--c-primary); margin: 0; cursor: pointer; }
/* ラジオは中心の黒丸を消し、選択はチップ外枠(:has(input:checked))で表現する */
.hp-est-opt input[type="radio"] { -webkit-appearance: none; appearance: none; width: 0; height: 0; margin: 0; opacity: 0; position: absolute; pointer-events: none; }
/* チェックボックスは箱(teal)はそのまま・チェックのVを白で明示描画 */
.hp-est-opt input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; flex: none; border: 2px solid var(--c-border); border-radius: 5px; background: #fff; position: relative; transition: background .15s, border-color .15s; }
.hp-est-opt input[type="checkbox"]:checked { background: var(--c-primary); border-color: var(--c-primary); }
.hp-est-opt input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hp-est-opt:has(input:checked) { border-color: var(--c-primary); color: var(--c-dark); background: rgba(13,193,204,.08); font-weight: 700; }
.hp-est-opts--check .hp-est-opt { width: 100%; }
.hp-est-result { position: sticky; top: 90px; background: var(--c-bg-alt); border-radius: 16px; padding: 22px; }
.hp-est-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--c-border); }
.hp-est-total span { font-size: .82rem; color: var(--c-gray); font-weight: 700; }
.hp-est-total strong { font-size: 1.5rem; font-weight: 900; color: var(--c-primary); white-space: nowrap; }
.hp-est-photonote, .hp-est-disclaimer { font-size: .74rem; color: var(--c-gray); line-height: 1.6; margin-top: 12px; }
.hp-est-cta { display: block; text-align: center; margin-top: 16px; }
.hp-est-save { display: block; width: 100%; text-align: center; margin-top: 10px; padding: 12px 18px; background: #fff; color: var(--c-primary); border: 2px solid var(--c-primary); border-radius: 999px; font-size: .9rem; font-weight: 800; cursor: pointer; transition: background .2s, color .2s; }
.hp-est-save:hover { background: rgba(13,193,204,.08); }
.hp-est-saved { display: block; text-align: center; margin-top: 10px; font-size: .82rem; font-weight: 800; color: var(--c-primary); }
.hp-est-saved[hidden] { display: none; }
.hp-est-savenote { font-size: .74rem; color: var(--c-gray); line-height: 1.6; margin-top: 10px; }

/* GCP・補助金 */
.hp-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.hp-extra-card { background: #fff; border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: var(--r-xl); padding: 24px 26px; }
.hp-extra-card h4 { font-size: 1.05rem; font-weight: 800; color: var(--c-dark); margin-bottom: 10px; }
.hp-extra-card p { font-size: .86rem; color: var(--c-gray); line-height: 1.7; margin-bottom: 10px; }
.hp-grant-link { font-size: .84rem; }

/* 本業導線 */
.hp-cross { text-align: center; margin-top: 48px; padding: 28px; background: var(--c-bg-alt); border-radius: var(--r-xl); }
.hp-cross p { font-size: .92rem; color: var(--c-dark); font-weight: 600; margin-bottom: 16px; }
.hp-cross-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hp-cross-links a { font-size: .84rem; font-weight: 700; color: var(--c-primary); padding: 8px 18px; border: 1px solid var(--c-primary); border-radius: 999px; transition: background .2s, color .2s; }
.hp-cross-links a:hover { background: var(--c-primary); color: #fff; }

@media (max-width: 768px) {
  .hp-why { grid-template-columns: 1fr; gap: 14px; }
  .hp-maint-grid { grid-template-columns: 1fr; }
  .hp-estimate { grid-template-columns: 1fr; padding: 20px; }
  .hp-est-result { position: static; }
  .hp-extra { grid-template-columns: 1fr; }
  .section-hp .hp-block-title { margin-top: 48px; }
}

/* ===== HP制作: aiteamデザインレビュー反映（地と図／CTA／階層／a11y／引き算） ===== */

/* 地と図：補足ブロックは薄帯で沈め、主役(料金・見積もり)は白カードで浮かせる */
.section-hp .hp-band {
  margin-inline: calc(50% - 50vw);
  padding: 56px calc(50vw - 50%);
  background: var(--c-bg-alt);
  margin-block: 64px;
}
.section-hp .hp-band > .hp-block-title:first-child { margin-top: 0; }
.section-hp .hp-band .hp-extra { margin-top: 0; }
.section-hp .hp-band .hp-cross { margin-top: 32px; }

/* ブロック見出しの階層化：teal下線1本＋サイズ序列 */
.section-hp .hp-block-title { position: relative; padding-bottom: 14px; }
.section-hp .hp-block-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 32px; height: 3px; border-radius: 2px; background: var(--c-primary);
}
.section-hp .hp-block-title[data-i18n="hp-plan-title"],
.section-hp .hp-block-title[data-i18n="hp-est-title"] { font-size: 1.55rem; }
.section-hp .hp-block-title[data-i18n="hp-maint-title"],
.section-hp .hp-block-title[data-i18n="hp-flow-title"] { font-size: 1.25rem; }

/* 主役を浮かせる：料金カード・見積もりにシャドウ＋等高 */
.hp-plan-grid .pricing-card {
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-md); border-color: rgba(10, 14, 20, 0.06);
}
.hp-plan-grid .pricing-feature-list { flex: 1 1 auto; }
.hp-plan-grid .pricing-card--featured { transform: translateY(-8px); } /* 常時scale撤去＝滲み解消 */
.hp-estimate { box-shadow: var(--shadow-lg); } /* 注記コントラスト是正（gray-3→gray, AA確保） */
.hp-plan-note,
.hp-plan-grid .pricing-price-note { color: var(--c-gray); }

/* pink を「ここ一番」に1点：おすすめリボン＋概算CTAのグロー */
.hp-plan-grid .pricing-ribbon { background: var(--c-pink); }
.hp-est-cta { box-shadow: 0 0 0 4px rgba(240, 77, 152, 0.12); }

/* 角丸の正規化（外カードは r-lg）＋ホバーで手触り統一 */
.hp-why-item, .hp-maint-card, .hp-extra-card {
  border-radius: var(--r-lg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hp-why-item:hover, .hp-maint-card:hover, .hp-extra-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(13, 193, 204, 0.35);
}

/* 見積もり：選択チップのタップ領域44px＋stickyの見切れ対策 */
.hp-est-opt { min-height: 44px; padding: 10px 16px; }
.hp-est-opts { gap: 10px; }
.hp-est-result { max-height: calc(100vh - 110px); overflow: auto; }

/* 本業導線リンクのタップ領域 */
.hp-cross-links a { padding: 10px 20px; min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 768px) {
  .section-hp .hp-band { margin-block: 40px; padding-block: 40px; }
  .hp-est-result { max-height: none; overflow: visible; }
}

/* ========================================
   LP制作セクション（サイト統一の primary=teal 基調／kintone節と配色を揃える）
======================================== */
.section-lp .hp-block-title { font-size: 1.4rem; font-weight: 900; color: var(--c-dark); text-align: center; margin: 64px 0 6px; position: relative; padding-bottom: 14px; }
.section-lp .hp-block-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 40px; height: 3px; border-radius: 2px; background: var(--c-primary); }
.section-lp .hp-block-lead { text-align: center; color: var(--c-gray); font-size: .9rem; max-width: 640px; margin: 0 auto 28px; line-height: 1.7; }
/* おすすめ強調＝tealに統一（既定hp-plan-gridのpinkリボン/グレー境界を上書きしkintoneと揃える） */
.section-lp .pricing-card--featured { border-color: var(--c-primary); box-shadow: 0 24px 60px rgba(13, 193, 204, .22); }
.section-lp .pricing-ribbon { background: var(--c-primary); box-shadow: 0 8px 20px rgba(13, 193, 204, .4); }
.section-lp .lp-cta { display: block; width: fit-content; margin: 44px auto 0; }

/* ========================================
   オプション料金テーブル（PC=表／≤860pxで行カード化・CSSのみ・JS不使用）
======================================== */
.pricing-table-wrap { max-width: 880px; margin: 0 auto; }
.pricing-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.pricing-table th, .pricing-table td { text-align: left; padding: 14px 18px; font-size: .86rem; border-bottom: 1px solid var(--c-border); vertical-align: top; line-height: 1.6; }
.pricing-table thead th { background: var(--c-bg-alt); font-weight: 800; color: var(--c-dark); font-size: .8rem; letter-spacing: .02em; }
.pricing-table td:first-child { font-weight: 700; color: var(--c-dark); }
.pricing-table td:nth-child(2) { color: var(--c-gray); }
.pricing-table thead th:last-child, .pricing-table tbody td:last-child { text-align: right; font-weight: 800; color: var(--c-dark); }
.pricing-table .pt-soft { color: var(--c-gray); font-weight: 600; }
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table .pricing-table-group td { background: rgba(13, 193, 204, .07); font-weight: 800; color: var(--c-dark); font-size: .8rem; letter-spacing: .03em; text-align: left; }

@media (max-width: 860px) {
  .pricing-table-wrap { max-width: 480px; }
  .pricing-table thead { display: none; }
  .pricing-table, .pricing-table tbody, .pricing-table tr, .pricing-table td { display: block; width: 100%; }
  .pricing-table tr { border-bottom: 1px solid var(--c-border); padding: 8px 0; }
  .pricing-table tbody tr:last-child { border-bottom: none; }
  .pricing-table td { border-bottom: none; padding: 4px 18px; text-align: left; }
  .pricing-table tbody td:last-child { text-align: left; font-size: .92rem; margin-top: 2px; }
  .pricing-table td[data-label]::before { content: attr(data-label) "："; display: block; font-size: .68rem; font-weight: 800; color: var(--c-primary); letter-spacing: .02em; margin-bottom: 1px; }
  .pricing-table .pricing-table-group td { padding: 12px 18px; margin-top: 4px; }
}

/* ===== サービス別FAQ（teal）＋共通Q&A（ピンク）＝各サービスパネル末尾にJS注入 ===== */
.service-faq-block { max-width: 800px; margin: 64px auto 0; }
.service-faq-block--common { margin-top: 40px; }
.service-faq-head {
  font-size: 1.35rem; font-weight: 900; color: var(--c-dark);
  text-align: center; margin-bottom: 22px;
  position: relative; padding-bottom: 14px;
}
.service-faq-head::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 32px; height: 3px; border-radius: 2px; background: var(--c-primary);
}
/* 共通Q&A＝ピンクアクセント（FAQのUIはそのまま、色だけpinkへ） */
.service-faq-block--common .service-faq-head::after { background: var(--c-pink); }
.faq-list--common .faq-question:hover { color: var(--c-pink); }
.faq-list--common .faq-icon { background: rgba(240, 77, 152, 0.1); color: var(--c-pink); }
.faq-list--common .faq-item.open .faq-icon { background: var(--c-pink); color: #fff; }

@media (max-width: 768px) {
  .service-faq-block { margin-top: 48px; }
  .service-faq-head { font-size: 1.2rem; }
}