/* tantei.css — 探偵ポータル専用スタイル
   style.css の変数・リセットを継承し、追加スタイルのみ定義する
   ---------------------------------------------------------------- */

/* ============================================================
   カラートークン
   ============================================================ */
:root {
  --tn-primary:      #D96C2C;
  --tn-primary-deep: #B8541D;
  --tn-primary-pale: #FBEEE3;
  --tn-hero-from:    #FFB05E;
  --tn-hero-mid:     #F2953F;
  --tn-hero-to:      #D96C2C;
  --tn-bg-soft:      #FAF6F1;
  --tn-border:       #EDE4DA;
  --tn-bar-track:    #F0E6DC;
  --tn-bar-fill:     #D96C2C;
  --tn-gold:         #C9A24B;
  --tn-gold-light:   #DBBC72;
  --tn-gold-deep:    #A9852F;
}

/* ============================================================
   フォント上書き — /tantei 全体を角ゴシックに統一
   style.css の h1〜h6・body に Zen Maru Gothic が当たっているため
   このブロックで確実に上書きする
   ============================================================ */
.tantei-header,
.tantei-header *,
.tantei-hero,
.tantei-hero *,
.tantei-strip,
.tantei-strip *,
.tantei-section,
.tantei-section *,
.tantei-wrap,
.tantei-wrap *,
.tantei-tile__label,
.tantei-article-card,
.tantei-article-card__title,
.detective-card,
.detective-card * {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif !important;
}

/* ============================================================
   /tantei 専用ヘッダー
   ============================================================ */
.tantei-header {
  background: #fff;
  border-bottom: 1px solid var(--tn-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.tantei-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tantei-header__logo {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.tantei-header__logo:hover {
  text-decoration: none;
}

.tantei-header__logo-main {
  font-size: 20px;
  font-weight: 700;
  color: var(--tn-primary-deep);
  letter-spacing: -0.01em;
}

.tantei-header__logo-sub {
  font-size: 12px;
  font-weight: 500;
  color: #6E6E76;
  letter-spacing: 0.02em;
}

.tantei-header__nav {
  display: flex;
  gap: 1.5rem;
}

.tantei-header__nav a {
  font-size: 14px;
  color: #2B2B30;
  text-decoration: none;
  font-weight: 500;
}

.tantei-header__nav a:hover {
  color: var(--tn-primary-deep);
  text-decoration: none;
}


/* ヘッダーロゴ画像 */
.tantei-header__logo-img {
  display: block;
  height: 40px;
  width: auto;
}

/* ============================================================
   ヒーロー
   ============================================================ */
.tantei-hero {
  background: linear-gradient(150deg, var(--tn-hero-from) 0%, var(--tn-hero-mid) 45%, var(--tn-hero-to) 100%);
  color: #fff;
  padding: 2.5rem 1rem 2rem;
}

.tantei-hero__inner {
  max-width: 640px;
  margin: 0 auto;
}

.tantei-hero__title {
  /* 行単位のspanで2行固定。行内では折り返さず、幅連動のフォントで収める */
  font-size: clamp(19px, 6vw, 28px);
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  margin-bottom: 0.6rem;
}

.tantei-hero__title-line {
  display: block;
  white-space: nowrap;
}

.tantei-hero__sub {
  font-size: 14px;
  opacity: 0.88;
  margin-bottom: 1.6rem;
  line-height: 1.7;
}

/* ヒーロー: コピー+マスコット横並び */
.tantei-hero__copy-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 1.6rem;
}

.tantei-hero__copy-text {
  flex: 1;
  min-width: 0;
}

.tantei-hero__copy-text .tantei-hero__title {
  margin-bottom: 0.6rem;
}

.tantei-hero__copy-text .tantei-hero__sub {
  margin-bottom: 0;
}

.tantei-hero__mascot {
  flex-shrink: 0;
  width: clamp(84px, 26vw, 120px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.tantei-hero__mascot-wrap {
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.tantei-hero__mascot-caption {
  font-size: 8px;
  color: #FCEFE2;
  opacity: 0.9;
  line-height: 1.35;
  text-align: center;
  max-width: 120px;
}

/* 悩みタイル 2×2 */
.tantei-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tantei-tile {
  background: #fff;
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  text-decoration: none;
  position: relative;
}

.tantei-tile--active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.tantei-tile--active:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  text-decoration: none;
}

.tantei-tile--disabled {
  opacity: 0.62;
  cursor: default;
}

/* タイル画像 */
.tantei-tile__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}

.tantei-tile__img--muted {
  opacity: 0.45;
}

.tantei-tile__label {
  font-size: 13px;
  font-weight: 600;
  color: #2B2B30;
  line-height: 1.4;
  padding: 0.55rem 0.75rem;
}

.tantei-tile--active .tantei-tile__label {
  color: var(--tn-primary-deep);
}

.tantei-tile__chip {
  font-size: 11px;
  background: #f0f0f0;
  color: #888;
  border-radius: 4px;
  padding: 1px 6px;
  position: absolute;
  top: 8px;
  right: 8px;
}

/* ============================================================
   信頼バンド（旧ストリップを置換）
   ============================================================ */
.tantei-trust-band {
  background: var(--tn-bg-soft);
  border-bottom: 1px solid var(--tn-border);
  padding: 1.5rem 1rem;
}

.tantei-trust-band__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

/* 月桂冠バッジ */
.tantei-laurel-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tantei-laurel-badge__svg {
  width: clamp(110px, 32vw, 170px);
  height: auto;
  display: block;
}

/* 右テキスト */
.tantei-trust-band__text {
  font-size: 13px;
  color: #2B2B30;
  line-height: 1.75;
  text-align: left;
  margin: 0;
  flex: 1;
  min-width: 0;
  font-feature-settings: 'palt';
  letter-spacing: 0.02em;
}

/* 文単位のブロック */
.tantei-trust-band__line {
  display: block;
}

/* 文節単位でのみ折り返す */
.tantei-trust-band__ph {
  display: inline-block;
}

.tantei-trust-band__em {
  color: var(--tn-primary-deep);
  font-weight: 700;
}

/* 圏点（傍点）強調 */
.tantei-trust-band__dot {
  text-emphasis: filled circle var(--tn-primary);
  -webkit-text-emphasis: filled circle var(--tn-primary);
  text-emphasis-position: under right;
  -webkit-text-emphasis-position: under right;
  font-weight: 600;
}

@media (min-width: 640px) {
  .tantei-trust-band__inner {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    max-width: 860px;
  }

  .tantei-trust-band__text {
    text-align: left;
    font-size: 15px;
  }
}

/* ============================================================
   汎用セクション
   ============================================================ */
.tantei-section {
  padding: 2rem 1rem;
}

.tantei-section--gray {
  background: var(--tn-bg-soft);
}

.tantei-section__inner {
  max-width: 700px;
  margin: 0 auto;
}

.tantei-section__title {
  font-size: 18px;
  font-weight: 500;
  padding-left: 10px;
  border-left: 3px solid var(--tn-primary);
  margin-bottom: 1rem;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

/* ============================================================
   地域ピックアップ行
   ============================================================ */
.tantei-area-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tantei-area-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 0.8rem;
  background: #fff;
  border: 1px solid var(--tn-border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.tantei-area-row:hover {
  background: var(--tn-primary-pale);
  text-decoration: none;
}

.tantei-area-row--all {
  margin-top: 6px;
  border-color: var(--tn-primary);
  color: var(--tn-primary);
}

.tantei-area-row__name {
  font-size: 14px;
  font-weight: 500;
  min-width: 120px;
  white-space: nowrap;
}

.tantei-area-row__count {
  font-size: 13px;
  color: var(--tn-primary);
  font-weight: 700;
  min-width: 36px;
  text-align: right;
}

.tantei-area-row__bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--tn-bar-track);
  border-radius: 4px;
  overflow: hidden;
}

.tantei-area-row__bar {
  display: block;
  height: 100%;
  background: var(--tn-bar-fill);
  border-radius: 4px;
  min-width: 2px;
}

.tantei-area-row__pct {
  font-size: 11px;
  color: #6E6E76;
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}

.tantei-area-row__chevron {
  font-size: 16px;
  color: var(--tn-primary);
  margin-left: 2px;
}

.tantei-note {
  font-size: 11px;
  color: #6E6E76;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* 掲載データについて（トップ・小さめの事実文ブロック） */
.tantei-data-note__title {
  font-size: 14px;
  font-weight: 700;
  color: #2B2B30;
  margin-bottom: 0.4rem;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

.tantei-data-note__text {
  font-size: 12px;
  color: #6E6E76;
  line-height: 1.8;
}

/* ============================================================
   条件チップ
   ============================================================ */
.tantei-cond-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tantei-cond-chips--toggle {
  flex-wrap: wrap;
}

.tantei-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1.5px solid var(--tn-primary);
  border-radius: 999px;
  font-size: 13px;
  color: var(--tn-primary);
  white-space: nowrap;
  text-decoration: none;
  background: #fff;
  transition: background 0.1s, color 0.1s;
}

.tantei-chip:hover {
  background: var(--tn-primary-pale);
  text-decoration: none;
}

.tantei-chip--active {
  background: var(--tn-primary);
  color: #fff;
}

.tantei-chip--active:hover {
  background: var(--tn-primary-deep);
}

.tantei-chip__count {
  font-size: 11px;
  opacity: 0.8;
}

/* ============================================================
   診断バナー
   ============================================================ */
.tantei-diag-banner {
  border: 2px solid var(--tn-primary);
  border-radius: 10px;
  padding: 1.2rem 1.2rem;
  background: var(--tn-primary-pale);
}

.tantei-diag-banner__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--tn-primary-deep);
  margin-bottom: 0.4rem;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

.tantei-diag-banner__body {
  font-size: 13px;
  color: #2B2B30;
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.tantei-diag-banner__btn {
  display: inline-block;
  background: var(--tn-primary-deep);
  color: #fff;
  border-radius: 6px;
  padding: 0.55rem 1.2rem;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.1s;
}

.tantei-diag-banner__btn:hover {
  opacity: 0.88;
  text-decoration: none;
}

/* 診断バナー内マスコット */
.tantei-diag-banner {
  position: relative;
  overflow: hidden;
}

.tantei-diag-banner__mascot {
  position: absolute;
  right: -4px;
  bottom: 0;
  width: 80px;
  height: auto;
  display: block;
  pointer-events: none;
}

/* ============================================================
   読み物セクション見出し行（タイトル+マスコット）
   ============================================================ */
.tantei-section__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.tantei-section__title--inline {
  margin-bottom: 0;
}

.tantei-section__title-mascot {
  flex-shrink: 0;
  width: 56px;
  height: auto;
  display: block;
}

/* ============================================================
   読み物カード
   ============================================================ */
.tantei-articles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tantei-article-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #fff;
  border: 1px solid var(--tn-border);
  border-radius: 8px;
  text-decoration: none;
  color: #2B2B30;
  transition: background 0.12s;
  overflow: hidden;
}

.tantei-article-card:hover {
  background: var(--tn-primary-pale);
  text-decoration: none;
}

.tantei-article-card__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tantei-article-card__title {
  font-size: 14px;
  color: var(--tn-primary-deep);
  line-height: 1.5;
  padding: 0.75rem 0.9rem;
}

/* ============================================================
   一覧ページ共通ラッパー
   ============================================================ */
.tantei-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

/* ============================================================
   パンくず
   ============================================================ */
.tantei-breadcrumb {
  font-size: 12px;
  color: #6E6E76;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.tantei-breadcrumb__item {
  color: #6E6E76;
}

.tantei-breadcrumb__sep {
  margin: 0 3px;
  color: #b0b0b8;
}

/* ============================================================
   一覧h1・説明文
   ============================================================ */
.tantei-list-title {
  font-size: 22px;
  font-weight: 700;
  color: #2B2B30;
  margin-bottom: 0.5rem;
  line-height: 1.45;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

.tantei-list-desc {
  font-size: 13px;
  color: #6E6E76;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

/* ============================================================
   条件チップ（一覧ページ上部）
   ============================================================ */
.tantei-cond-chips {
  margin-bottom: 1.2rem;
}

/* ============================================================
   事務所カード
   ============================================================ */
.tantei-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detective-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--tn-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  padding: 1.1rem 1.1rem 0.9rem;
}

/* PRチップ（提携事務所のみ・右上） */
.detective-card__pr {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 500;
  color: #8a8a92;
  background: #f2f2f5;
  border: 1px solid #e3e3e8;
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
}

.detective-card__name {
  font-size: 16px;
  font-weight: 500;
  color: #2B2B30;
  margin-bottom: 0.5rem;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  line-height: 1.4;
}

/* バッジ行 */
.detective-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 0.6rem;
}

.badge {
  font-size: 11px;
  border: 1px solid var(--tn-primary);
  border-radius: 4px;
  padding: 1px 7px;
  color: var(--tn-primary);
  background: var(--tn-primary-pale);
  white-space: nowrap;
}

/* 届出番号 */
.detective-card__reg {
  font-size: 12px;
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.detective-card__reg-num {
  color: #2B2B30;
}

.detective-card__reg-none {
  color: #9E9EA8;
  font-style: italic;
}

/* 協会加盟 */
.detective-card__assoc {
  font-size: 12px;
  color: #6E6E76;
  margin-bottom: 0.3rem;
}

/* 住所・エリア */
.detective-card__address {
  font-size: 12px;
  color: #6E6E76;
  margin-bottom: 0.2rem;
}

.detective-card__area {
  font-size: 11px;
  color: #9E9EA8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.3rem;
}

/* 料金 */
.detective-card__price {
  font-size: 12px;
  color: #2B2B30;
  margin-bottom: 0.6rem;
}

/* フッター行 */
.detective-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 0.6rem;
  border-top: 1px solid #f0f0f4;
  padding-top: 0.5rem;
}

.detective-card__official {
  font-size: 13px;
  color: var(--tn-primary-deep);
  text-decoration: none;
  font-weight: 500;
}

.detective-card__official::after {
  content: ' →';
  font-size: 12px;
}

.detective-card__official:hover {
  text-decoration: underline;
}

.detective-card__verified {
  font-size: 11px;
  color: #b0b0b8;
}

/* 提携事務所のCTAボタン（公式サイトリンクの代替） */
.detective-card__cta {
  display: inline-block;
  background: var(--tn-primary);
  color: #fff;
  border-radius: 6px;
  padding: 0.45rem 1.1rem;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.1s;
}

.detective-card__cta:hover {
  opacity: 0.88;
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   CTAブロック（一覧中間）
   ============================================================ */
.tantei-cta-block {
  background: var(--tn-primary-pale);
  border: 1.5px solid var(--tn-primary);
  border-radius: 10px;
  padding: 1.2rem 1.1rem;
}

.tantei-cta-block__heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--tn-primary-deep);
  margin-bottom: 0.4rem;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

.tantei-cta-block__body {
  font-size: 13px;
  color: #2B2B30;
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.tantei-cta-block__btn {
  display: inline-block;
  background: var(--tn-primary-deep);
  color: #fff;
  border-radius: 6px;
  padding: 0.55rem 1.2rem;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.1s;
}

.tantei-cta-block__btn:hover {
  opacity: 0.88;
  text-decoration: none;
}

/* CTAブロック内マスコット */
.tantei-cta-block {
  position: relative;
  overflow: hidden;
}

.tantei-cta-block__mascot {
  position: absolute;
  right: -4px;
  bottom: 0;
  width: 80px;
  height: auto;
  display: block;
  pointer-events: none;
}

/* ============================================================
   0件メッセージ
   ============================================================ */
.tantei-empty-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0;
  gap: 0.8rem;
}

.tantei-empty-block__mascot {
  width: 120px;
  height: auto;
  display: block;
}

.tantei-empty {
  color: #6E6E76;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  margin: 0;
}

/* ============================================================
   PC: 中央寄せ + 一部2カラム
   ============================================================ */
@media (min-width: 640px) {
  .tantei-hero__inner {
    max-width: 860px;
  }

  .tantei-tiles {
    grid-template-columns: repeat(4, 1fr);
  }

  .tantei-strip__inner {
    flex-wrap: nowrap;
  }

  .tantei-section__inner {
    max-width: 860px;
  }

  .tantei-wrap {
    max-width: 860px;
  }

  .tantei-articles {
    flex-direction: row;
  }

  .tantei-article-card {
    flex: 1;
  }
}

/* 独自レポート欄 */
.tantei-report-lead {
  font-size: 12px;
  color: #6E6E76;
  margin: -0.4rem 0 0.9rem;
}

.tantei-article-card--report {
  border: 1px solid var(--tn-primary);
}

.tantei-article-card__badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0.5rem 0.75rem 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--tn-primary-deep);
  background: var(--tn-primary-pale);
  border-radius: 4px;
  padding: 2px 6px;
}

/* ============================================================
   都道府県ページ: 全国対応チップ・都道府県絞り込みチップ
   ============================================================ */

/* 全国対応ラベル（カード上部の小チップ） */
.detective-card__nationwide-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  color: #6E6E76;
  background: #F3F3F5;
  border: 1px solid #D8D8DE;
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

/* カードラッパー（全国対応チップ + カードを縦積み） */
.tantei-card-wrapper {
  display: flex;
  flex-direction: column;
}

/* 都道府県で絞り込むセクション */
.tantei-pref-chips {
  margin: 0.75rem 0 1rem;
}

.tantei-pref-chips__label {
  font-size: 12px;
  color: #6E6E76;
  font-weight: 500;
  margin: 0 0 0.4rem;
}

/* 都道府県チップ（条件チップの派生・色違い） */
.tantei-chip--pref {
  background: #F8F8FB;
  color: #3B3B45;
  border-color: #CACACE;
}

/* ============================================================
   一覧FV圧縮（SP: 最初のPRカードのCTAをファーストビューに収める）
   ============================================================ */
@media (max-width: 640px) {
  .tantei-breadcrumb {
    font-size: 11px;
    margin-bottom: 0.5rem;
  }

  .tantei-list-title {
    font-size: 18px;
    margin-bottom: 0.35rem;
    line-height: 1.4;
  }

  .tantei-list-desc {
    font-size: 11px;
    line-height: 1.55;
    margin-bottom: 0.7rem;
  }

  .tantei-cond-chips {
    margin-bottom: 0.7rem;
    gap: 6px;
  }

  .tantei-cond-chips .tantei-chip,
  .tantei-pref-chips .tantei-chip {
    font-size: 11px;
    padding: 3px 9px;
    gap: 3px;
  }

  .tantei-pref-chips {
    margin-bottom: 0.7rem;
  }

  .tantei-pref-chips__label {
    font-size: 11px;
    margin: 0 0 0.3rem;
  }

  .tantei-wrap {
    padding-top: 0.75rem;
  }
}