/* ============================================================
   tokuyaku.css – 特約セクション一式
   Last Update: 2025-08-16
   ============================================================ */

/* ========== 0) Tokens ========== */
:root {
  /* Layout & Rhythm */
  --gap: 1.6rem;
  --radius: 0.5rem;

  /* Typography (fluid) */
  --fs-base:  clamp(1.6rem, 1.5rem + 0.3vw, 1.8rem);
  --fs-title: clamp(2rem,  1.6rem + 1.2vw, 2.6rem);

  /* Colors */
  --clr-bg-section:   #f8fff8;
  --clr-border-card:  #0a220a;
  --clr-border-jidan: #117713;
  --clr-badge:        #720505;  /* A-番号バッジ */
  --clr-rental:        #1d0572;  /* A-番号バッジ */
  --clr-chip-auto:    #0057a4;  /* 自動セット */
  --clr-chip-jidan:   #ea6d87;  /* 示談 */
  --clr-danger:       var(--danger, #c50f0f);

  /* Focus */
  --focus-ring: var(--focus-ring, 3px solid rgba(0,117,201,.6));

  /* Tag (badge/chip) spacing */
  --tag-ml:   0.6rem;
  --tag-pad-y:0.3em;
  --tag-pad-x:0.9em;

  /* Eligibility panels */
  --eligibility-covered-bg: #fff4ee;
  --eligibility-covered-bd: #f2b59d;
  --eligibility-not-bg:     #f0f0f0;
  --eligibility-not-bd:     #bdbdbd;
}

/* ========== 1) Section / List / Card ========== */
.tokuyaku-section {
  padding: 2rem 0;
  margin-block-start: 0;
  background: var(--clr-bg-section, var(--flow-bg));
}
.tokuyaku-section .container {
  margin-inline: auto;
  margin-block-end: 1rem;
}
.tokuyaku-section .section-title { margin-top: 0; }

.tokuyaku-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2.4rem;
}

.tokuyaku-card {
  background: #fff;
  border: 2px solid var(--clr-border-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tokuyaku-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-2px); }
.tokuyaku-card:focus-within { outline: var(--focus-ring); outline-offset: 2px; }

/* Figure（左にアイコン） */
.tokuyaku-card figure {
  margin: 0;
  padding: 3rem;
  overflow: hidden;
}
.tokuyaku-card figure::after { content: ""; display: block; clear: both; }
.tokuyaku-card figure > img {
  float: left;
  width: 90px;
  height: auto;
  margin: 0 1.6rem 2rem 0;
}

/* Type */
.tokuyaku-card h3 {
  font: 700 var(--fs-title)/1.3 "Noto Sans JP","Roboto","Meiryo",sans-serif;
  color: #000;
  margin: 0 0 .6rem;
  white-space: normal;
}
.tokuyaku-card p {
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: .4rem 0;
  text-align: left;
}
.tokuyaku-card ul {
  margin: .4rem 0 0 1.6rem;
  padding: 0;
  list-style: disc outside;
  font-size: var(--fs-base);
  line-height: 1.7;
}
.tokuyaku-card li { margin-bottom: .4rem; text-align: left; }

/* ========== 2) Badge / Chip（背景色のみ差異） ========== */
.rental,
.badge,
.chip {
  display: inline-block;
  margin-left: var(--tag-ml);
  padding: var(--tag-pad-y) var(--tag-pad-x);
  font-size: var(--fs-base);
  line-height: 1.3;
  color: #fff;
  background: transparent;   /* 背景は下の個別色で付与 */
  border-radius: var(--radius);
  white-space: nowrap;
  text-decoration: none;
  vertical-align: baseline;
}
.badge      { background: var(--clr-badge); }
.rental     { background: var(--clr-rental); }
.chip.auto  { background: var(--clr-chip-auto); }
.chip.jidan { background: var(--clr-chip-jidan); }

.badge:focus-visible,
.rental:focus-visible,
.chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* 見出し内の挙動を統一 */
.tokuyaku-card h3 .badge,
.tokuyaku-card h3 .rental,
.tokuyaku-card h3 .chip {
  display: inline-block;
  margin-top: 0;
}

/* ========== 3) Details / Summary ========== */
.tokuyaku-card details {
  width: 100%;
  margin-top: .8rem;
  background: #fff;
  border: 2px solid #c2e2c7;
  border-radius: var(--radius);
  overflow: hidden;
}
.tokuyaku-card summary {
  padding: 2rem;
  font: 600 var(--fs-base)/1 "Noto Sans JP","Roboto","Meiryo",sans-serif;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.tokuyaku-card summary::-webkit-details-marker { display: none; }
.tokuyaku-card summary::after {
  content: "＋";
  float: right;
  font-size: var(--fs-base);
  font-weight: 700;
  margin-left: .8rem;
  transition: transform .25s ease;
}
.tokuyaku-card details[open] summary::after { content: "－"; }
.tokuyaku-card summary .summary-label {
  font-size: clamp(1.8rem, 1.65rem + 0.4vw, 2.1rem);
  font-weight: 700;
}
.tokuyaku-card details > *:not(summary) { padding: .8rem 1.6rem 1.2rem; }
.tokuyaku-card summary:focus-visible { outline: var(--focus-ring); }

/* 2つ目の details（“支払わない事例”）を赤系に */
.tokuyaku-card details:nth-of-type(2) ul li,
.tokuyaku-card details:nth-of-type(2) p { color: var(--clr-danger); }

/* ========== 4) Example (icon) ========== */
sup { color: #a50000; }
.tokuyaku-card .with-icon { display: block; list-style: none; padding-left: 0; }
.example-icon { width: 100px; height: auto; flex-shrink: 0; margin: 2rem; }

/* ========== 5) Pattern Table（地震火災費用） ========== */
.pattern-table {
  width: 70%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  line-height: 1.5;
  margin-top: .8rem;
  background: #fff;
}
.pattern-table caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: .6rem;
  font-size: clamp(1.6rem, 1.5rem + 0.3vw, 1.8rem);
}
.pattern-table th,
.pattern-table td {
  border: 1px solid #999;
  padding: .6rem .8rem;
  text-align: center;
}
.pattern-table thead th { background: #f7ab73; }
.pattern-table td:first-child,
.pattern-table th:first-child { width: 10rem; }

/* ========== 6) One‑Point Box ========== */
.onepoint-box {
  background: #fffde8;
  padding: 1.6rem 1.6rem 1.4rem;
  margin-top: 1.2rem;
  border-left: 4px solid #c56e00;
  font-size: var(--fs-base);
  line-height: 1.7;
}
.onepoint-head { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; gap: .8rem; }
.onepoint-label {
  background: #c56e00; color: #fff; font-weight: 700;
  padding: .4rem 1.4rem; font-size: var(--fs-title); line-height: 1.3;
  white-space: nowrap; border-radius: .4rem;
}
.onepoint-title { color: #a35b00; font-weight: 700; font-size: var(--fs-title); line-height: 1.4; white-space: normal; }
.only-sp { display: none; }

/* ========== 7) Jidan（示談交渉サービス） ========== */
.jidan-info { margin: 0 0 2rem; }
.jidan-box  { background: #e9f6f5; border: 2px solid var(--clr-border-jidan); border-radius: var(--radius); padding: 2rem; }
.jidan-inner { display: block; }

.jidan-head { display: flex; align-items: flex-start; gap: 1.2rem; margin: .4rem 0 .8rem; }
.jidan-head .jidan-icon { flex: 0 0 auto; width: clamp(72px, 10vw, 100px); margin: 0; }
.jidan-head .jidan-img   { display: block; width: 100%; height: auto; }
.jidan-head .jidan-head-text { flex: 1 1 0%; min-width: 0; }

.jidan-text h2 {
  margin: 0; padding: 0;
  font-size: var(--fs-title); font-weight: 700; line-height: 1.3;
  white-space: normal; line-break: strict; word-break: normal;
}
.jidan-text .caption { margin: 0 0 0; font-size: clamp(1.6rem,1.55rem + 0.2vw,1.8rem); color: #555; }

.jidan-inner > .jidan-icon { float: left; width: 100px; margin: 0 2rem 1rem 0; } /* 互換 */
.jidan-img { width: 100%; max-width: 100px; height: auto; display: block; }

.jidan-text { font-size: var(--fs-base); line-height: 1.6; }
.jidan-text .label {
  display: inline-block; width: 100%; background: var(--clr-chip-jidan); color: #fff;
  font: 700 var(--fs-base)/1.6 "Noto Sans JP","Roboto","Meiryo",sans-serif;
  padding: .5rem 5rem; text-align: center; border-radius: var(--radius); margin-bottom: 1rem;
}
.jidan-text li { font-size: clamp(1.6rem,1.55rem + 0.2vw,1.8rem); padding-top: 1rem; }
.jidan-text details { margin-top: 1.2rem; background: #fff; border: 1px solid #cfead3; border-radius: var(--radius); padding: 1rem 1.4rem; }
.jidan-text summary { cursor: pointer; font-weight: 700; }
.jidan-text summary:focus-visible { outline: var(--focus-ring); }
.jidan-text .warn { color: var(--clr-danger); margin-right: .4rem; }

/* ========== 8) Eligibility Icons Grid（A‑3） ========== */
.eligibility-grid {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: 1fr; /* SP: 1 col */
  gap: 1.2rem;
  align-items: start;
}
.eligibility-grid .eligibility-panel + .eligibility-panel { margin-top: 0; }

.eligibility-panel {
  border: 2px solid var(--clr-border-card);
  border-radius: var(--radius);
  padding: 1.2rem;
  background: #fff;
}
.eligibility-panel.is-covered     { background: var(--eligibility-covered-bg); border-color: var(--eligibility-covered-bd); }
.eligibility-panel.is-not-covered { background: var(--eligibility-not-bg);     border-color: var(--eligibility-not-bd); }

.eligibility-title { margin: 0 0 .8rem; font-weight: 700; font-size: clamp(1.7rem, 1.6rem + 0.3vw, 2rem); }

.eligibility-list {
  --min: 120px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
  gap: 1.2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Safari ::marker 対策（特異性強化） */
.tokuyaku-card ul.eligibility-list { list-style: none; margin: 0; padding-left: 0; }
.tokuyaku-card ul.eligibility-list > li { list-style: none; }
.tokuyaku-card ul.eligibility-list > li::marker { content: ""; }

.tokuyaku-card .eligibility-item figure {
  margin: 0; padding: .8rem .4rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tokuyaku-card .eligibility-item img {
  display: block; width: 108px; height: 108px; margin: 0 auto .4rem; float: none;
}
.tokuyaku-card .eligibility-item figcaption {
  text-align: center; margin: 0;
  font-size: clamp(1.5rem, 1.45rem + 0.2vw, 1.7rem); line-height: 1.3;
}

/* ========== 9) Utilities ========== */
.tokuyaku-card a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: .2rem; }
.tokuyaku-card summary::after { margin-left: .8rem; } /* 揺れ防止 */


/* ========== 10) Responsive ========== */
@media (min-width: 601px) {
  .eligibility-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .jidan-box { padding: 1.6rem; }
  .jidan-head { gap: 1rem; }
  .jidan-head .jidan-icon { width: 64px; }
  .jidan-inner > .jidan-icon { width: 80px; margin: 0 1.6rem 1rem 0; }
  .jidan-text .label { padding: .5rem 2rem; }
  .pattern-table { width: 100%; }
}
@media (max-width: 600px) {
  .tokuyaku-section { padding: 3rem 0; }
  .tokuyaku-list { gap: 1.6rem; }

  .tokuyaku-card figure { padding: 2rem 1.6rem; }
  .tokuyaku-card figure > img { float: none; display: block; margin: 0 auto 1.6rem; width: 100px; }

  .badge, .chip, .rental {
    font-size: clamp(1.6rem, 1.55rem + 0.2vw, 1.8rem);
    margin-left: var(--tag-ml);
    padding: calc(var(--tag-pad-y) + 0.05em) var(--tag-pad-x);
  }
  .tokuyaku-card h3 { font-size: clamp(2rem, 1.8rem + 0.6vw, 2.4rem); margin: 1.2rem 0; padding: .8rem .4rem; line-height: 1.4; }
  .tokuyaku-card h3 .badge,
  .tokuyaku-card h3 .chip,
  .tokuyaku-card h3 .rental { display: inline-block; margin-top: .4rem; }

  .tokuyaku-card p,
  .tokuyaku-card ul,
  .tokuyaku-card summary { font-size: clamp(1.6rem, 1.55rem + 0.2vw, 1.8rem); }
  .tokuyaku-card summary .summary-label { font-size: clamp(1.7rem, 1.6rem + 0.3vw, 2rem); }

  /* details/summary の余白圧縮（SP） */
  .tokuyaku-card summary { padding: 1.2rem 1.4rem; }
  .tokuyaku-card summary::after { margin-left: .4rem; }
  .tokuyaku-card details > *:not(summary) { padding: .6rem 1.2rem 1rem; }

  .eligibility-list { --min: 0px; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .tokuyaku-card .eligibility-item img { width: 64px; height: 64px; }

  .onepoint-title { font-size: clamp(1.6rem, 1.55rem + 0.2vw, 1.8rem); }
  .only-sp { display: inline; }
}

/* ========== 11) Motion & Print ========== */
@media (prefers-reduced-motion: reduce) {
  .tokuyaku-card, .tokuyaku-card summary::after { transition: none; }
}
@media print {
  .tokuyaku-section { background: #fff; }
  .tokuyaku-card { break-inside: avoid; box-shadow: none !important; transform: none !important; }
  .tokuyaku-card figure { padding: 1.6rem; }
  .pattern-table { width: 100%; }
  .onepoint-box { border-left-width: 2px; }
  .jidan-icon { float: none; margin: 0 0 1rem; }
}
/* Asia/Tokyo, 2025-09-20 11:41(UTC+09:00) — append to: tokuyaku.css */
/* ─────────────────────────────────────────────────────────────
   SPレイアウト統一：
   画像を左／右にタイトル→（改行）チップ＋バッジ／本文は全幅
   対象：.tokuyaku-card（全特約）
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* 1) 画像は左に寄せて回り込み。既存の「中央表示」を上書き */
  .tokuyaku-card figure > img {
    float: left;
    display: block;
    width: 100px;                 /* 既存SPと同寸 */
    height: auto;
    margin: 0 1.2rem 0.8rem 0;    /* 右と下に余白（本文と干渉しないように） */
  }

  /* 2) タイトル行：チップとバッジはタイトルの下の新しい行に出す */
  /*   最初のチップの直前に“擬似改行”を差し込む */
  .tokuyaku-card h3 .chip::before { 
    content: ""; 
    display: block; 
  }
  /*   チップが無い見出し（=バッジだけのh3）では、バッジを改行して下段に */
  .tokuyaku-card h3 .badge::before { 
    content: ""; 
    display: block; 
  }
  /*   ただしチップがあるときは、バッジをチップの横に並べる（改行を無効化） */
  .tokuyaku-card h3:has(.chip) .badge::before {
    content: none;
    display: inline;
  }

  /*   チップ／バッジ／（A‑2の）rentalも“下段の行頭”から開始 */
  .tokuyaku-card h3 .chip,
  .tokuyaku-card h3 .rental,
  .tokuyaku-card h3 .badge {
    margin-top: .4rem;   /* タイトルとの間隔 */
    margin-left: 0;      /* 行頭から */
    display: inline-block;
    vertical-align: middle;
  }
  /*   下段内での並び間隔（チップ⇔バッジ／rental 同士） */
  .tokuyaku-card h3 .chip + .badge,
  .tokuyaku-card h3 .rental + .badge,
  .tokuyaku-card h3 .chip + .rental,
  .tokuyaku-card h3 .rental + .chip,
  .tokuyaku-card h3 .badge + .chip,
  .tokuyaku-card h3 .badge + .rental {
    margin-left: var(--tag-ml);
  }

  /* 3) 「最初のp」と「details」は画像回り込みを解除して“全幅”で開始 */
  .tokuyaku-card figcaption > p:first-of-type {
    clear: both;          /* 画像の回り込みをクリア */
    margin-top: 1rem;
    text-align: left;
  }
  .tokuyaku-card figcaption > details {
    clear: both;          /* 全折りたたみも全幅で */
  }
}
/* 2025-09-20 12:56(UTC+09:00) / tokuyaku.css — SP：画像左＋見出し右2段、本文は全幅 */

@media (max-width: 600px) {
  /* 画像：SPでも左配置（既存の中央寄せを上書き） */
  .tokuyaku-card figure > img {
    float: left;
    display: block;
    width: 100px;         /* 既存SPと同値を維持 */
    height: auto;
    margin: 0 1.2rem 0 0; /* 画像右に余白、下は詰める */
  }

  /* 見出し行：右側2段（1段目=タイトル、2段目=チップ/バッジ） */
  .tokuyaku-card figcaption h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .6rem;     /* チップ/バッジ間の隙間 */
    margin: 0 0 .2rem 0;
    line-height: 1.3;
  }
  /* タイトル行の“直後”に改行を挿入（疑似要素を改行用flexアイテムに） */
  .tokuyaku-card figcaption h3::after {
    content: "";
    order: 1;
    flex-basis: 100%;
  }
  /* チップ／バッジ／賃貸向けラベルを“2段目”に強制し横並び */
  .tokuyaku-card h3 .chip,
  .tokuyaku-card h3 .badge,
  .tokuyaku-card h3 .rental {
    order: 2;
    display: inline-block;
    margin-left: 0;   /* 既存の見出し内マージンをリセット */
    margin-top: 0rem;
  }

  /* 本文以下は画像の回り込みを解除して全幅で開始 */
  .tokuyaku-card figcaption > p,
  .tokuyaku-card figcaption > details,
  .tokuyaku-card figcaption > .onepoint-box,
  .tokuyaku-card figcaption > table,
  .tokuyaku-card .pattern-table {
    clear: left;
  }
}