@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 記事・固定ページ上部のアイキャッチ画像は本文内の画像と重複するため、単一ページのみ非表示にする
   （ホームの記事一覧・カテゴリー/タグ一覧・検索結果のサムネイル表示には影響しない） */
.single .eye-catch-wrap,
.page .eye-catch-wrap {
  display: none;
}

/* カテゴリラベルをサムネイル左上→左下へ移動する。
   アイキャッチ画像側にタイトル文字を上部に配置するデザインが多く、実機Safariではラベルの文字が
   CSS定義（10px）より大きくレンダリングされ、画像内テキストと重なって読めなくなる現象を確認したため。
   （相場・価格データ系の画像は左下に出典表記があるため対象外。別途画像側で個別対応する） */
.cat-label {
  top: auto;
  bottom: 0.24em;
}

/* 「(名前)をフォローする」ボタン群を非表示にする（投稿者情報ボックス内・シェアボタン下部の両方に
   別々に表示される仕組みのため、.author-follows だけでなく .sns-follow 全体を対象にする）
   SNSアカウント未設定のため、機能しないボタンだけが並んで見えてしまう */
.sns-follow {
  display: none;
}

/* ヘッダーのサイト名の左にサイトアイコン（WordPress設定のファビコンと同じ画像）を表示する。
   Cocoonのヘッダーロゴ機能はサイト名テキストごと画像に置き換える仕様のため使わず、h1のテキストを
   残したまま疑似要素で並べている（装飾画像なのでスクリーンリーダーの読み上げ対象にもならない）。
   幅・高さはemで指定し、PC・モバイルでサイト名の文字サイズが変わってもアイコンが追従する。 */
.logo-header .site-name-text::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.35em;
  vertical-align: -0.22em;
  background-image: url(https://baikyaku-lab.com/wp-content/uploads/2026/08/site-icon-150x150.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* モバイル下部固定メニューの「ホーム」アイコンを、FontAwesomeの汎用的な家アイコンから
   サイトアイコンの画像に差し替える。元の家アイコンとシルエットが近く、他4項目（メニュー・検索・
   トップ・サイドバー）は白黒の線画のままなので、ここだけブランドカラーの差し色として機能する。
   font-size:0で元のFontAwesome文字を潰し、::beforeにサイズ指定した背景画像を代わりに描画する。 */
.home-menu-icon .fa-home {
  font-size: 0;
}
.home-menu-icon .fa-home::before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  background-image: url(https://baikyaku-lab.com/wp-content/uploads/2026/08/site-icon-150x150.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* Contact Form 7のお問い合わせフォームを、CTAボタンと同系色のデザインに統一する
   （CF7はデフォルトで無装飾のため、input/textarea/送信ボタンにスタイルを当てる） */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.wpcf7-form input[type="submit"] {
  display: inline-block;
  background: #e8734a;
  color: #ffffff;
  font-weight: bold;
  font-size: 17px;
  padding: 14px 36px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.wpcf7-form input[type="submit"]:hover {
  opacity: 0.85;
}

/* 売却手取り額シミュレーター（2026-08-08、[baikyaku_tedori_simulator]ショートコード用）
   CTAボタンと同系色（#e8734a）・同じborder-radius/paddingの雰囲気に揃えている */
.tedori-simulator {
  border: 1px solid #eee;
  border-radius: 8px;
  /* 2026-08-10、実機のiPhone幅(390px)で比較テーブルの見える範囲を広げるため、
     1.5em→0.8emに縮小（.ts-resultのpaddingとあわせて計41.6px分、テーブルの表示幅を広げる） */
  padding: 0.8em;
  margin: 1.5em 0;
  background: #fafafa;
}

.tedori-simulator .ts-field {
  margin-bottom: 1.2em;
}

.tedori-simulator .ts-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.tedori-simulator .ts-field-row .ts-field {
  flex: 1 1 200px;
}

.tedori-simulator label,
.tedori-simulator .ts-field-label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.4em;
}

.tedori-simulator .ts-radio-group label {
  display: block;
  font-weight: normal;
  margin-bottom: 0.4em;
}

.tedori-simulator input[type="number"],
.tedori-simulator input[type="month"],
.tedori-simulator select {
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 16px;
  background: #fff;
}

.tedori-simulator input[type="number"]:disabled,
.tedori-simulator select:disabled {
  background: #eee;
  color: #999;
}

/* 実額取得費モードでのみ表示する「うち建物価格・構造」欄（2026-08-08追加） */
.tedori-simulator .ts-building-fields {
  margin-top: 0.8em;
  padding-top: 0.8em;
  border-top: 1px dashed #ddd;
}

.tedori-simulator .ts-building-fields select {
  margin-bottom: 0.8em;
}

.tedori-simulator .ts-hint {
  font-size: 12px;
  color: #888;
  margin: 0;
}

.tedori-simulator .ts-note {
  font-size: 13px;
  color: #888;
  margin: 0.5em 0 1.5em;
}

.tedori-simulator .ts-result {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  /* 2026-08-10、.tedori-simulatorのpadding縮小とあわせて1.2em→0.6emに縮小
     （iPhone幅390pxで比較テーブルの表示幅を広げるため） */
  padding: 1em 0.6em;
  margin-bottom: 1em;
}

.tedori-simulator .ts-placeholder {
  color: #999;
  margin: 0;
}

.tedori-simulator .ts-status {
  font-size: 14px;
  color: #555;
  margin: 0 0 1em;
}

/* 手取り額の見出し（2026-08-13追加）。「シミュレーターが複雑で素人にわかりにくい」という
   フィードバックを受けて、内訳を開かなくても結論の数字だけが即座に目に入るようにした */
.tedori-simulator .ts-headline {
  text-align: center;
  padding: 0.8em 0.4em 1em;
  margin: 0 0 1em;
  border-bottom: 1px solid #eee;
}
.tedori-simulator .ts-headline-label {
  font-size: 14px;
  color: #555;
  margin: 0 0 0.2em;
}
.tedori-simulator .ts-headline-amount {
  font-size: 34px;
  font-weight: bold;
  color: #e8734a;
  margin: 0;
  line-height: 1.2;
}
.tedori-simulator .ts-headline-sub {
  font-size: 13px;
  color: #1c7a5e;
  margin: 0.5em 0 0;
}

/* 詳しい内訳（諸費用・税額の内訳、特例の比較）の折りたたみ（2026-08-13追加）。
   デフォルトで閉じており、結論の数字だけをまず見せる段階的な表示にするための要素 */
.tedori-simulator .ts-details {
  margin: 0 0 1em;
}
.tedori-simulator .ts-summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  color: #333;
  padding: 0.6em 0;
  list-style: none;
}
.tedori-simulator .ts-summary::-webkit-details-marker {
  display: none;
}
.tedori-simulator .ts-summary::before {
  content: '▶ ';
  color: #e8734a;
}
.tedori-simulator .ts-details[open] .ts-summary::before {
  content: '▼ ';
}
.tedori-simulator .ts-details > .ts-table-wrap:first-of-type,
.tedori-simulator .ts-details .ts-scroll-hint {
  margin-top: 0.4em;
}

.tedori-simulator .ts-table-wrap {
  overflow-x: auto;
}

.tedori-simulator table.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

/* 特例による差異のみを比較する表（3列）は、スマホでも極力横スクロールなしで収まるよう
   min-widthを控えめにしている（2026-08-08、表を2分割する前は1つの9行×3列の表で
   モバイルからのはみ出しが指摘されていた） */
.tedori-simulator table.ts-table-compare {
  min-width: 360px;
}

/* 仲介手数料の速算式など、金額行に添える補足説明用の行（2026-08-08追加） */
.tedori-simulator table.ts-table tr.ts-subrow td {
  text-align: left;
  font-size: 12.5px;
  color: #999;
  padding: 0 0.4em 0.6em;
  border-bottom: 1px solid #eee;
}

/* 適用税率セル内の説明文（39.63%等の数字の下に添える1行、数字の0.7倍サイズ・2026-08-08追加） */
.tedori-simulator table.ts-table .ts-rate-note {
  font-size: 0.7em;
  color: #999;
  font-weight: normal;
}

/* 減価償却が未反映の場合の警告行（2026-08-08追加、通常のts-subrowより目立たせる） */
.tedori-simulator table.ts-table tr.ts-subrow-warning td {
  color: #b3541e;
  background: #fdf1ea;
}

/* 減価償却ON/OFFのチェックボックス行（2026-08-08追加） */
.tedori-simulator table.ts-table tr.ts-toggle-row td {
  padding-top: 0.8em;
}
.tedori-simulator .ts-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: normal;
  cursor: pointer;
  /* 2026-08-10、実機iPhoneで「反映する」が「反映す」「る」に分割されて折り返っていたため追加 */
  white-space: nowrap;
}

/* 比較テーブルの横スクロール案内（2026-08-10追加）。テーブル自体はoverflow-x:autoで
   スクロールできるが、視覚的な手がかりが無いと3列目が見切れているだけに見えてしまうため。
   min-width:360pxの表がスクロールなしで収まる幅（コンテナの余白込みで概ね480px以上）では
   案内文自体が不要なので非表示にする */
.tedori-simulator .ts-scroll-hint {
  font-size: 12px;
  color: #999;
  margin: 0 0 0.4em;
}
@media (min-width: 480px) {
  .tedori-simulator .ts-scroll-hint {
    display: none;
  }
}
.tedori-simulator .ts-checkbox-label input[type="checkbox"] {
  width: auto;
  accent-color: #e8734a;
}

.tedori-simulator table.ts-table th,
.tedori-simulator table.ts-table td {
  border-bottom: 1px solid #eee;
  padding: 0.5em 0.4em;
  text-align: right;
}

.tedori-simulator table.ts-table th:first-child,
.tedori-simulator table.ts-table td:first-child {
  text-align: left;
}

.tedori-simulator table.ts-table thead th {
  border-bottom: 2px solid #ccc;
}

.tedori-simulator table.ts-table tr.ts-row-highlight td {
  font-weight: bold;
  font-size: 17px;
  color: #e8734a;
  border-top: 2px solid #e8734a;
  border-bottom: none;
}

/* 「特例が使えれば+◯◯◯万円」の差額行（2026-08-08追加、手取り額の直下に表示） */
.tedori-simulator table.ts-table tr.ts-row-delta td {
  font-size: 13px;
  color: #1c7a5e;
  border-bottom: none;
  padding-top: 0.2em;
}

/* オーバーローン（住宅ローン残債が手取り額を上回る）の警告ボックス（2026-08-08追加） */
.tedori-simulator .ts-warning-box {
  font-size: 13px;
  color: #b3541e;
  background: #fdf1ea;
  border: 1px solid #f0c9ac;
  border-radius: 6px;
  padding: 0.8em 1em;
  margin: 0 0 1em;
}
.tedori-simulator .ts-warning-box a {
  color: #b3541e;
  font-weight: bold;
}

.tedori-simulator .ts-disclaimer {
  font-size: 12px;
  color: #999;
  margin: 0;
}


/* 武蔵小杉タワマン管理費・修繕積立金比較ツール（2026-08-15、keywords.csv No.33）
   No.32の.ts-系スタイルと同様、390px幅の実機表示崩れ対策（固定列＋横スクロール案内）を
   最初から織り込んでいる（記事⑬で判明した反省を踏まえ、custom-tool-implementationスキル参照）。 */
.kh-tool {
  margin: 2em 0;
  padding: 1.2em;
  background: #f8f8f8;
  border-radius: 8px;
}
.kh-updated {
  font-size: 13px;
  color: #888;
  margin: 0 0 1em;
}
.kh-part-title {
  margin-top: 1.6em;
}
.kh-scroll-hint {
  font-size: 13px;
  color: #888;
  margin: 0 0 0.4em;
}
.kh-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}
.kh-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 14px;
}
.kh-table th,
.kh-table td {
  padding: 0.5em 0.7em;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid #eee;
}
.kh-table th {
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.kh-table .kh-col-name {
  text-align: left;
  white-space: normal;
  min-width: 180px;
  max-width: 180px; /*2026-08-28、実機確認でmax-width未指定だと自動テーブルレイアウトが
    長い棟名（「パークシティ武蔵小杉 ステーションフォレストタワー」等）を折り返さずに収まる
    幅まで列を広げてしまい、右側の数値列が画面外に押し出される不具合が判明したため追加*/
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}
.kh-sort-arrow {
  font-size: 10px;
  margin-left: 0.2em;
}
.kh-sub {
  font-size: 11px;
  color: #999;
}
.kh-ref-tag,
.kh-range-tag {
  display: inline-block;
  font-size: 10px;
  color: #b06a00;
  background: #fff3e0;
  border-radius: 3px;
  padding: 0.1em 0.4em;
  margin-left: 0.4em;
}
.kh-table-note {
  font-size: 12px;
  color: #888;
  margin-top: 0.6em;
}
.kh-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.kh-field {
  flex: 1 1 160px;
  margin-bottom: 0.8em;
}
.kh-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 0.3em;
}
.kh-field input,
.kh-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.kh-result {
  background: #fff;
  border-radius: 6px;
  padding: 1em 1.2em;
  margin: 0.8em 0 1.4em;
}
.kh-placeholder {
  color: #999;
  margin: 0;
}
.kh-highlight {
  font-size: 15px;
}
.kh-highlight strong {
  color: #e8734a;
}
.kh-note {
  font-size: 12px;
  color: #888;
}
.kh-bar-chart {
  margin-top: 0.8em;
}
.kh-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 12px;
  margin-bottom: 0.35em;
}
.kh-bar-label {
  flex: 0 0 calc(40% + 3em); /*2026-08-28、PC版で棒の表示範囲が狭いとの指摘を受け、
    ラベル幅を3文字分（3em）広げてその分バーを縮小。600px以下はメディアクエリ側で
    flex:1 1 autoに上書きされるためこの変更の対象外*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kh-bar-track {
  flex: 1 1 auto;
  background: #eee;
  border-radius: 3px;
  height: 10px;
  overflow: hidden;
}
.kh-bar-fill {
  display: block;
  height: 100%;
  background: #bbb;
  border-radius: 3px;
}
.kh-bar-value {
  flex: 0 0 auto;
  min-width: 5.6em; /*2026-08-28、円/㎡/月の単価表記から実額（円）表示に変更したのにあわせて
    幅を確保。当初4.4emで固定していたところ「155,930円」等6桁の値で「円」だけ折り返される
    不具合が出たため、min-width+white-space:nowrapに変更し折り返し自体を禁止した*/
  white-space: nowrap;
  text-align: right;
  font-size: 12px;
  color: #666;
}
.kh-bar-row-user .kh-bar-label {
  font-weight: bold;
}
.kh-bar-row-user .kh-bar-fill {
  background: #e8734a;
}
.kh-cta {
  background: #fff3ec;
  border: 1px solid #f3c8b3;
  border-radius: 6px;
  padding: 0.9em 1em;
  margin-top: 0.8em;
}
.kh-cta p {
  margin: 0;
  font-size: 14px;
}
.kh-cta a {
  color: #e8734a;
  font-weight: bold;
}
.kh-disclaimer,
.kh-scenario-note {
  font-size: 12px;
  color: #888;
}

/* カード型レイアウト時のみ表示する並び替えセレクト（2026-08-28追加、下記メディアクエリ内でdisplay:flexにする） */
.kh-sort-mobile {
  display: none;
}

/* 600px以下: テーブルの横スクロールをやめ、1棟＝1カードの縦積みレイアウトに切り替える。
   （2026-08-28、実機確認で「棟名列（.kh-col-name）を140pxに縮めても、残り4列
   （竣工・管理費・修繕積立金・合計）がmin-width:560pxの表に収まらずスクロールが必要」と
   の指摘を受け、横スクロール前提の表組みをやめ、棟名を見出しにした縦積みカードへ全面変更）。
   thead（見出し行）は非表示にし、代わりに各tdのdata-label属性を::beforeでラベル表示する。
   ソートはth見出しクリックができなくなるため、上のkh-sort-mobile（<select>）で代替する */
@media screen and (max-width: 600px) {
  .kh-tool {
    padding: 0.6em; /*2026-08-28、カード化にあわせて外側余白も詰めた（0.8em→0.6em）*/
  }
  .kh-field-row {
    gap: 0.6em;
  }

  .kh-sort-mobile {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 0.8em;
    font-size: 13px;
  }
  .kh-sort-mobile select {
    flex: 1;
    padding: 0.4em 0.5em;
    font-size: 14px;
  }
  .kh-scroll-hint {
    display: none !important; /*カード化により横スクロール自体が発生しないため常時非表示*/
  }

  .kh-table-wrap {
    overflow-x: visible;
    border: none;
    border-radius: 0;
  }
  .kh-table {
    min-width: 0;
    display: block;
  }
  .kh-table thead {
    display: none;
  }
  .kh-table tbody {
    display: block;
  }
  /*tr自体をgridにし、棟名（.kh-col-name）を1行目に全幅、竣工・管理費・修繕積立金・合計の
    4項目を2行目に均等4列で並べる（2026-08-28、当初の縦積み案から「4項目は行ではなく列に
    してほしい」というフィードバックを受けて変更）*/
  .kh-table tr {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 0.8em;
    padding: 0.7em 0.6em;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
  }
  .kh-table th,
  .kh-table td {
    display: block;
    width: auto;
    padding: 0.15em 0.1em;
    border-bottom: none;
    white-space: normal;
    text-align: center;
  }
  .kh-table .kh-col-name {
    grid-column: 1 / -1; /*4列すべてを使って全幅の見出し行にする*/
    position: static;
    background: transparent;
    min-width: 0;
    max-width: none;
    font-weight: bold;
    font-size: 15px;
    text-align: left;
    padding: 0 0 0.4em;
    margin-bottom: 0.3em;
    border-bottom: 1px solid #eee;
  }
  .kh-table td:not(.kh-col-name) {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .kh-table td:not(.kh-col-name)::before {
    content: attr(data-label);
    color: #888;
    font-size: 10px;
    margin-bottom: 0.15em;
  }

  /*分布バー（自分の住戸はどの水準？）: 棟名を40%固定幅に収めるとほぼ全棟「…」で省略されて
    しまうため（2026-08-28、実機確認で判明）、1行の横並び（棟名|バー|数値）をやめ、
    1段目に棟名（全幅）、2段目に「バー＋金額」を置く2段組みに変更。金額はPC版と同じく
    バーのすぐ右に表示する（2026-08-28、当初は1段目に金額を置いていたが「バーの右にしてほしい」
    との指摘を受けて変更）。棟名はorder:1でflex-basis:100%により強制的に単独の1段目になり、
    バー（order:2、flex:1 1 auto）と金額（order:3、基本ルールのmin-width+nowrapを継承）が
    2段目を分け合う */
  .kh-bar-row {
    flex-wrap: wrap;
    row-gap: 0.2em;
  }
  .kh-bar-label {
    flex: 1 1 100%;
    order: 1;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .kh-bar-track {
    order: 2;
  }
  .kh-bar-value {
    order: 3;
  }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* 不動産売却ロードマップ固定ページ（2026-08-17、keywords.csvは消費しない案内ページ。
   MAP-指示書.md参照）。カード一覧はCSS Gridで、幅に応じて自動的に列数が変わる可変グリッドにし、
   ステップ・入口ごとの記事数（1〜2本）による余白の不揃いを個別調整しなくて済むようにしている。 */
.baikyaku-roadmap {
  margin: 1.5em 0;
}
.baikyaku-roadmap h2 {
  margin-top: 2em;
}
.rm-intro p {
  margin: 0 0 0.8em;
}
.rm-hub-lead {
  font-size: 14px;
  color: #888;
  margin-bottom: 0.4em !important;
}
.rm-step,
.rm-case {
  margin: 1.4em 0;
}
.rm-step h3 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 17px;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.4em;
}
.rm-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #e8734a;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.rm-case h3 {
  font-size: 16px;
  margin-bottom: 0.4em;
}
.rm-case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em 1.5em;
}

.rm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.8em;
}
.rm-card {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.9em 1em;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fafafa;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.15s, background 0.15s;
}
.rm-card:hover {
  border-color: #e8734a;
  background: #fff7f2;
}
.rm-card-type {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  align-self: flex-start;
  font-size: 11px;
  font-weight: bold;
  padding: 0.2em 0.7em 0.2em 0.55em;
  border-radius: 5px;
}
.rm-card-type .fa {
  font-size: 12px;
}
/* 4typeとも塗りの強さ（淡色地＋色文字）を統一している（2026-08-17、運営者フィードバックにより
   修正。体験談だけソリッド地にしていたが、他3typeと質感が違いすぎて単独で浮いて見えたため）。
   差別化は色相・アイコンのみで表現する。解説（kaisetsu）は15本中8本を占める最多タイプのため
   無彩色にし、taiken/data/toolの色を相対的に際立たせている */
.rm-type-taiken {
  background: #fbe9e0;
  color: #c85f37;
}
.rm-type-tool {
  background: #e8f0f8;
  color: #3d7ebd;
}
.rm-type-data {
  background: #e5f3f1;
  color: #2f8c82;
}
.rm-type-kaisetsu {
  background: #eee;
  color: #666;
}
.rm-card-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
}
.rm-card-summary {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
}

/* 固定ページ「不動産売却ロードマップ」（投稿ID 305）だけ公開日を非表示にする（2026-08-17、
   Claude.aiレビュー・運営者判断）。この案内ページは記事公開のたびに追記し続けるため、
   公開日が出ていると時間経過とともに「更新されていない古いページ」に見えてしまう。
   Cocoonに固定ページ単位の日付非表示オプションはない（タイトル・読了時間・目次は個別に
   トグルできるが日付だけ無い）ため、投稿ID指定のCSSで個別に対応する。
   このページにタグは付けていないため.date-tags全体を消しても実害はない。 */
body.page-id-305 .date-tags {
  display: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /* 2列固定だと入口名が7〜8文字で折り返り窮屈になるため、1列積みに切り替える */
  .rm-case-grid {
    grid-template-columns: 1fr;
  }
}