/* ==========================================================================
   専門家の解説（一覧・カードの部品） 専用のCSS（pages/expert.css）
   ・2026-10-26 に yrp-global-common.css から分けた。このページを開いたときだけ読み込む
   ・どのページで読み込むかは functions.php の yrp_page_css_manifest() で決めている
   ========================================================================== */


/* =========================================================================
   B-12. 専門家の解説ページ（/expert/）… .yrp-ex-* ／ .expert-insight*
   -------------------------------------------------------------------------
   ・他ページのような文章中心のデザインと変え、「雑誌の目次」のような軽い見た目に
   ・冒頭（.yrp-ex-top）と最後の相談帯（.yrp-ex-cta）はコードモジュールのHTMLとセット
   ・記事一覧（.expert-insights--archive）は自動表示のため、HTMLは変えずにここで見た目を上書き
     （カードをやめ、番号付きの目次の行にする）
   ・Diviのセクションに付いている濃紺の背景も、:has() で白に戻す
   ========================================================================= */

/* --- Diviセクションの背景を白に --- */
#main-content .et_pb_section:has(.yrp-ex-top),
#main-content .et_pb_section:has(.expert-insights--archive),
#main-content .et_pb_section:has(.yrp-ex-cta){ background:#ffffff !important; background-image:none !important; }

/* --- 冒頭 --- */
.yrp-ex-top{ padding:72px 0 40px; background:#ffffff; }
.yrp-ex-top__inner{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:40px; width:92%; max-width:1000px; margin:0 auto; padding-bottom:36px; border-bottom:1px solid #1a2c42; }
#main-content .yrp-ex-top__en{ margin:0 0 6px !important; color:#b8860b !important; font-size:12px !important; font-weight:700; letter-spacing:.3em; text-transform:uppercase; }
#main-content .yrp-ex-top__title{ margin:0 !important; padding:0 !important; color:#1a2c42 !important; font-size:clamp(36px,4.6vw,60px) !important; line-height:1.2 !important; letter-spacing:.08em; }
#main-content .yrp-ex-top__lead{ margin:14px 0 0 !important; color:#4a5868 !important; font-size:15px !important; line-height:1.8 !important; word-break:keep-all; overflow-wrap:anywhere; }
#main-content .yrp-ex-top__views{ display:flex; gap:12px; margin:0 !important; padding:0 !important; list-style:none !important; }
#main-content .yrp-ex-top__views li{ display:flex; flex-direction:column; align-items:center; gap:4px; width:136px; list-style:none !important; text-align:center; }
.yrp-ex-top__icon{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:4px; border-radius:50%; background:#fbf8f1; color:#b8860b; font-size:22px; }
.yrp-ex-top__views b{ color:#1a2c42; font-size:14px; }
.yrp-ex-top__views small{ color:#7a8592; font-size:11px; line-height:1.5; }

/* --- 記事一覧の見出し --- */
.yrp-ex-index-head{ width:92%; max-width:1000px; margin:0 auto; }
#main-content .yrp-ex-index-head__title{ display:flex; align-items:baseline; gap:14px; margin:0 !important; padding:0 !important; color:#1a2c42 !important; font-size:20px !important; line-height:1.4 !important; }
.yrp-ex-index-head__title span{ color:#b8860b; font-family:"Noto Serif JP",serif; font-size:14px; font-style:italic; letter-spacing:.2em; }

/* --- 記事一覧：番号付きの目次 --- */
#main-content .et_pb_row:has(.expert-insights--archive){ width:100% !important; max-width:none !important; padding-left:0 !important; padding-right:0 !important; }
#main-content .expert-insights--archive{ max-width:1000px !important; width:92% !important; margin-left:auto !important; margin-right:auto !important; padding:12px 0 88px !important; }
#main-content .expert-insights--archive .expert-insights-count{ justify-content:flex-end; margin:0 0 8px; padding:0; border:0; }
#main-content .expert-insights--archive .expert-insights-count__label{ display:none; }
#main-content .expert-insights--archive .expert-insights-count__number{ padding:3px 12px; border-radius:999px; background:#fbf8f1; color:#8c6812; font-family:inherit; font-size:12px; font-weight:700; }
#main-content .expert-insights--archive .expert-insight-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:0 48px !important; counter-reset:yrp-ex; }
#main-content .expert-insights--archive .expert-insight-card{ flex-direction:row !important; align-items:flex-start; gap:18px; max-width:none !important; height:auto !important; padding:22px 4px !important; border:0; border-bottom:1px solid #ece4d3; background:transparent; box-shadow:none; transform:none !important; counter-increment:yrp-ex; transition:background .2s; }
#main-content .expert-insights--archive .expert-insight-card::before{ content:counter(yrp-ex,decimal-leading-zero); flex:0 0 auto;  color:#d6aa35; font-family:"Noto Serif JP",serif; font-size:28px; font-weight:700; line-height:1.1; }
#main-content .expert-insights--archive .expert-insight-card:hover{ background:#fbf8f1; box-shadow:none; }
#main-content .expert-insights--archive .expert-insight-image{ display:none; }
#main-content .expert-insights--archive .expert-insight-body{ padding:0; }
#main-content .expert-insights--archive .expert-insight-date{ margin:0 0 4px; color:#8a94a0; font-family:inherit; font-size:11.5px; }
#main-content .expert-insights--archive .expert-insight-title{ color:#1a2c42; font-family:inherit; font-size:17px; font-weight:700; line-height:1.6; text-align:left; letter-spacing:.02em; }
#main-content .expert-insights--archive .expert-insight-title a::after{ content:"→"; margin-left:8px; color:#d6aa35; font-weight:400; transition:margin .2s; }
#main-content .expert-insights--archive .expert-insight-card:hover .expert-insight-title a::after{ margin-left:12px; }
#main-content .expert-insights--archive .expert-insight-excerpt{ margin:6px 0 0; color:#6a7684; font-size:13px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
#main-content .expert-insights--archive .expert-insight-more{ display:none; }
#main-content .expert-insights-pagination a.page-numbers,
#main-content .expert-insights-pagination span.page-numbers{ border-radius:999px; border-color:#e6dcc6; color:#1a2c42; }
#main-content .expert-insights-pagination a.page-numbers:hover,
#main-content .expert-insights-pagination span.page-numbers.current{ background:#1a2c42; border-color:#1a2c42; color:#ffffff; }

/* --- 最後の相談帯 --- */
.yrp-ex-cta{ padding:0 0 80px; background:#ffffff; }
.yrp-ex-cta__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; width:92%; max-width:1000px; margin:0 auto; padding:26px 30px; border-radius:20px; background:#fbf8f1; }
#main-content .yrp-ex-cta__title{ display:flex; align-items:center; gap:10px; margin:0 !important; color:#1a2c42 !important; font-size:16px !important; font-weight:700; line-height:1.6 !important; word-break:keep-all; overflow-wrap:anywhere; }
.yrp-ex-cta__title i{ color:#b8860b; font-size:22px; }
.yrp-ex-cta__btns{ display:flex; flex-wrap:wrap; gap:10px; }
.yrp-ex-cta__btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; background:#ffffff; border:1px solid #e6dcc6; color:#1a2c42 !important; font-size:14px; font-weight:700; text-decoration:none !important; transition:transform .2s; }
.yrp-ex-cta__btn:hover{ transform:translateY(-2px); }
.yrp-ex-cta__btn i{ color:#b8860b; }
.yrp-ex-cta__btn--tel{ background:#1a2c42; border-color:#1a2c42; color:#ffffff !important; font-size:15px; letter-spacing:.03em; }
.yrp-ex-cta__btn--tel i{ color:#d6aa35; }
.yrp-ex-cta__btn--line{ background:#06c755; border-color:#06c755; color:#ffffff !important; }
.yrp-ex-cta__btn--line i{ color:#ffffff; }
#main-content .yrp-ex-cta__note{ flex:0 0 100%; margin:0 !important; color:#7a8592 !important; font-size:12px !important; }

/* --- タブレット --- */
@media screen and (max-width:980px){
  .yrp-ex-top__inner{ grid-template-columns:1fr; align-items:start; gap:28px; }
}

/* --- スマホ --- */
@media screen and (max-width:767px){
  .yrp-ex-top{ padding:44px 0 28px; }
  .yrp-ex-top__inner{ gap:24px; padding-bottom:26px; text-align:center; }
  #main-content .yrp-ex-top__lead{ font-size:14px !important; }
  #main-content .yrp-ex-top__views{ justify-content:center; gap:6px; }
  #main-content .yrp-ex-top__views li{ width:33%; }
  .yrp-ex-top__icon{ width:50px; height:50px; font-size:19px; }
  .yrp-ex-top__views small{ font-size:10.5px; }
  #main-content .yrp-ex-index-head__title{ justify-content:center; font-size:18px !important; }
  #main-content .expert-insights--archive{ padding-bottom:56px !important; }
  #main-content .expert-insights--archive .expert-insights-count{ justify-content:center; }
  #main-content .expert-insights--archive .expert-insight-grid{ grid-template-columns:1fr !important; }
  #main-content .expert-insights--archive .expert-insight-card{ gap:14px; padding:18px 2px !important; }
  #main-content .expert-insights--archive .expert-insight-card::before{ width:36px; font-size:22px; }
  #main-content .expert-insights--archive .expert-insight-title{ font-size:15.5px; }
  #main-content .expert-insights--archive .expert-insight-excerpt{ display:none; }
  .yrp-ex-cta{ padding-bottom:56px; }
  .yrp-ex-cta__inner{ flex-direction:column; padding:24px 18px; text-align:center; }
  #main-content .yrp-ex-cta__title{ flex-direction:column; gap:6px; font-size:15px !important; }
  .yrp-ex-cta__btns{ flex-direction:column; width:100%; }
  .yrp-ex-cta__btn{ justify-content:center; }
}

/* --- カテゴリーで絞り込むボタン（記事一覧の見出しの下。カテゴリーに記事があるときだけ自動で表示） --- */
.yrp-ex-index-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; }
.yrp-ex-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.yrp-ex-filter[hidden]{ display:none; }
.yrp-ex-filter__btn{ padding:7px 16px; border:1px solid #e6dcc6; border-radius:999px; background:#ffffff; color:#1a2c42; font-family:inherit; font-size:13px; font-weight:700; line-height:1.4; cursor:pointer; transition:background .2s, border-color .2s; }
.yrp-ex-filter__btn:hover{ border-color:#d6aa35; }
.yrp-ex-filter__btn[aria-pressed="true"]{ background:#1a2c42; border-color:#1a2c42; color:#ffffff; }
#main-content .expert-insights--archive .expert-insight-grid{ transition:opacity .2s; }
@media screen and (max-width:767px){
  .yrp-ex-index-head{ flex-direction:column; }
  .yrp-ex-filter{ justify-content:center; }
  .yrp-ex-filter__btn{ padding:6px 13px; font-size:12.5px; }
}

/* --- 記事のカテゴリー：番号（01）の下に、カテゴリーごとの色で表示 --- */
#main-content .expert-insights--archive .expert-insight-card{ display:grid !important; grid-template-columns:86px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:14px; row-gap:8px; }
#main-content .expert-insights--archive .expert-insight-card::before{ grid-column:1; grid-row:1; width:auto; }
#main-content .expert-insights--archive .expert-insight-body{ grid-column:2; grid-row:1 / span 2; }
#main-content .expert-insights--archive .expert-insight-label{ position:static; grid-column:1; grid-row:2; align-self:start; justify-self:start; min-width:0; max-width:100%; padding:3px 8px; border-radius:6px; background:#fbf1df; color:#8c6812; font-size:10.5px; font-weight:700; line-height:1.45; text-align:left; transform:none; word-break:keep-all; overflow-wrap:anywhere; }
/* カテゴリーごとの色（スラッグで指定。ここに無い新しいカテゴリーは金色のまま） */
.yrp-cat--loan{ --cat:#2f5d8a; --cat-bg:#e8f0f8; }
.yrp-cat--keibai{ --cat:#a0442c; --cat-bg:#fbece7; }
.yrp-cat--divorce{ --cat:#6b4f8a; --cat-bg:#f1ecf7; }
.yrp-cat--souzoku{ --cat:#2f6b4f; --cat-bg:#e7f3ec; }
.yrp-cat--akiya{ --cat:#9a6a1d; --cat-bg:#fbf1df; }
.yrp-cat--kihon{ --cat:#3d6b73; --cat-bg:#e6f1f2; }
#main-content .expert-insights--archive .expert-insight-label[class*="yrp-cat--"]{ background:var(--cat-bg); color:var(--cat); }
.yrp-ex-filter__btn[class*="yrp-cat--"]{ color:var(--cat); }
.yrp-ex-filter__btn[class*="yrp-cat--"]::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:var(--cat); vertical-align:1px; }
.yrp-ex-filter__btn[class*="yrp-cat--"][aria-pressed="true"]{ background:var(--cat); border-color:var(--cat); color:#ffffff; }
.yrp-ex-filter__btn[class*="yrp-cat--"][aria-pressed="true"]::before{ background:#ffffff; }
@media screen and (max-width:767px){
  #main-content .expert-insights--archive .expert-insight-card{ grid-template-columns:80px minmax(0,1fr); column-gap:10px; }
  #main-content .expert-insights--archive .expert-insight-label{ font-size:10px; padding:2px 5px; }
}

/* --- 並び替え（新しい順／カテゴリー順）。絞り込みボタンと同じ行の下に表示 --- */
.yrp-ex-tools{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.yrp-ex-sort{ display:flex; align-items:center; gap:6px; }
.yrp-ex-sort[hidden]{ display:none; }
.yrp-ex-sort__label{ display:inline-flex; align-items:center; gap:6px; margin-right:4px; color:#7a8592; font-size:12px; font-weight:700; }
.yrp-ex-sort__label i{ color:#b8860b; }
.yrp-ex-sort__btn{ padding:4px 12px; border:0; border-radius:999px; background:transparent; color:#7a8592; font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.yrp-ex-sort__btn:hover{ color:#1a2c42; }
.yrp-ex-sort__btn[aria-pressed="true"]{ background:#fbf8f1; color:#1a2c42; box-shadow:inset 0 0 0 1px #e6dcc6; }
@media screen and (max-width:767px){
  .yrp-ex-tools{ align-items:center; }
}

/* --- 最後の相談帯：注記を2つに分け、途中で折り返さないようにする --- */
#main-content .yrp-ex-cta__note{ display:flex; flex-wrap:wrap; gap:2px 14px; }
.yrp-ex-cta__note span{ white-space:nowrap; }
@media screen and (max-width:767px){
  #main-content .yrp-ex-cta__note{ flex-direction:column; align-items:center; }
}