/* ==========================================================================
   /request-info/ の登録不要ツール3本（チェックリスト・3つの要素・乗り換えガイド）の改善（2026-11）
   - 「あわせて使えるページ」を3本に（人件費シミュレーターを追加）
   - 3つの要素：改善事例は要素ごとに1件だけ見せて残りは開閉式
     （入力中に結果が見える追従バーは doc-roi 側に元からあるので、帯は足さない）
   doc-open.css / doc-roi.css の上に重ねる。診断スクリプト（doc-roi.js）には触れない。
   ========================================================================== */

/* ---------- あわせて使えるページ：3本 ---------- */
@media screen and (min-width: 768px) {
  .p-docOpen-related__list.-three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 改善事例：残りは開閉式（中身はHTMLに残す） ---------- */
.p-rqMore {
  margin-top: 16px;
  border: 1px solid var(--docOpen-line, #dce7ea);
  border-radius: 12px;
  background: #fff;
}
.p-rqMore > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 700;
  color: #17806f;
  list-style: none;
}
.p-rqMore > summary::-webkit-details-marker { display: none; }
.p-rqMore > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s;
}
.p-rqMore[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.p-rqMore[open] > summary .p-rqMore__open { display: none; }
.p-rqMore:not([open]) > summary .p-rqMore__close { display: none; }
.p-rqMore > .p-roiCases {
  margin: 0;
  padding: 0 16px 16px;
}

/* 長いツール名が「シミュレータ／ー」のように語の途中で折り返さないように（<wbr> の位置でだけ折る） */
.p-docOpen-related__list.-three .p-docOpen-relatedItem__title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}