/* db-related : サービスページ相互リンク（2026-08-05 SEO施策）
   目的=サービス4ページが内部リンク5本で孤立し順位10〜32位だったため回遊導線を追加。
   既存セレクタは一切再定義しない。色は newtop.css の CSS変数を参照する。 */
.db-related{max-width:var(--nt-inner,950px);margin:0 auto;padding:56px 20px 64px;}
.db-related h2{font-size:22px;line-height:1.5;color:var(--nt-blue,#004DA0);margin:0 0 8px;}
.db-related-lead{font-size:15px;line-height:1.8;color:var(--nt-text,#333);margin:0 0 24px;}
.db-related-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.db-related-list>li{min-width:0;}
.db-related-list a{display:block;height:100%;padding:20px;border:1px solid var(--nt-border,#d9e3ee);border-radius:8px;background:#fff;text-decoration:none;transition:border-color .2s,box-shadow .2s;}
.db-related-list a:hover,.db-related-list a:focus-visible{border-color:var(--nt-blue,#004DA0);box-shadow:0 2px 10px rgba(0,77,160,.12);}
.db-related-ttl{display:block;font-weight:700;font-size:16px;color:var(--nt-blue,#004DA0);margin-bottom:6px;}
.db-related-desc{display:block;font-size:14px;line-height:1.7;color:var(--nt-text,#333);}
/* 2026-09-03 天野FB：2本のテキストリンクが近接し1つに見え誤タップしやすい。
   区切りの「／」はHTML13ファイルに埋まっているため、親のfont-size:0で不可視化し、
   リンク側でサイズを戻す（HTML無修正で全ページに効かせる）。
   ※初版はボタン化したが、カード群・CTA枠と四角が三段重ねになりバランスが崩れた
   （五月女指摘）ため、枠なしの「テキスト＋矢印」に変更。分離は間隔36pxで担保する */
.db-related-more{margin:28px 0 0;font-size:0;display:flex;gap:36px;flex-wrap:wrap;}
.db-related-more a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--nt-blue,#004DA0);text-decoration:none;padding:4px 0;}
.db-related-more a::after{content:"→";font-size:14px;line-height:1;transition:transform .2s;}
.db-related-more a:hover,.db-related-more a:focus-visible{text-decoration:underline;text-underline-offset:4px;}
.db-related-more a:hover::after{transform:translateX(3px);}
@media (prefers-reduced-motion:reduce){.db-related-more a::after{transition:none;}}
@media (max-width:768px){
  .db-related{padding:40px 16px 48px;}
  .db-related h2{font-size:19px;}
  .db-related-list{grid-template-columns:1fr;}
}

/* =========================================
   サービス下層ページの締めCTA（db-service-cta）
   20260826 追加。
   理由：banner ページは「snsバナー」で平均1.7位・表示824回に対しクリック0。
   実測すると本文3,517pxのうち、記事内のCTAはヘッダー(y=23)だけで、
   読み終えた位置にCTAが無かった（以下は追従バーのみ）。
   下層4ページ（banner/lp/ppt/htmlmail）共通で本文末に設置する。
   色はブランドガイドライン Ver.2.4 準拠：CTAオレンジ #BF5700（白文字4.59でAA合格）。
========================================= */
.db-service-cta {
  max-width: 950px;
  margin: 40px auto 48px;
  padding: 28px 24px 30px;
  background: #FBF7F0;
  border-top: 3px solid #B8A88A;
  text-align: center;
}

.db-service-cta__ttl {
  margin: 0 0 8px;
  color: #16283F;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.db-service-cta__lead {
  margin: 0 auto 20px;
  max-width: 640px;
  color: #333;
  font-size: 14px;
  line-height: 1.9;
}

.db-service-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 20px;
}

/* footer 内に置かれるため footer a{color:#E8EDF3} 等に負ける。
   実測で文字色が #333 になり コントラスト2.75(AA不合格) だったため、
   セレクタを強めて白文字を確定させる（#fff on #BF5700 = 4.59 でAA合格）。 */
.db-service-cta .db-service-cta__btn,
.db-service-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 56px;
  padding: 14px 28px;
  color: #fff;
  background: #BF5700;      /* CTAオレンジ。押せる場所はここだけ */
  border-radius: 5px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(170, 76, 0, .18);
  transition: opacity .2s ease, transform .2s ease;
}

.db-service-cta__btn:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* 副導線はオレンジを使わない（オレンジはCV導線専用） */
.db-service-cta .db-service-cta__sub,
.db-service-cta__sub {
  color: #004DA0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media only screen and (max-width: 768px) {
  .db-service-cta {
    margin: 28px 16px 32px;
    padding: 22px 16px 24px;
  }

  .db-service-cta__ttl { font-size: 18px; }

  .db-service-cta__btn {
    width: 100%;
    min-width: 0;
  }
}