/* ============================================================
   riro — Components
   カード / ブロック / 目次 / フォームなど template-parts 対応の部品
   ============================================================ */

/* --- セクション見出し行（見出し＋右端リンク） --- */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
}
.sec-head--tight { margin-bottom: 48px; }

/* --- 悩みグリッド（トップ 02） --- */
.worry-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.worry-grid > div { padding: 36px 28px; }
.worry-grid .eyebrow__num { display: block; margin-bottom: 18px; }
.worry-grid p {
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
  margin: 0;
}

/* --- サービスカード（トップ 03）---
   1040pxコンテナでは 2×2 が正（4カラムは見出しが語中で折り返すため使わない） */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 600px) {
  .svc-cards { grid-template-columns: 1fr; }
}
.card-service {
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 36px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.card-service:hover { border-color: var(--stone-300); }
.card-service .t-h3 { word-break: keep-all; }
.card-service__en,
.en-label {
  font-family: var(--font-serif-latin);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--stone-400);
  text-transform: uppercase;
}
.card-service__lead {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
  margin: 0;
  flex: 1;
}
.card-service__meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone-500);
  border-top: 1px solid var(--paper-200);
  padding-top: 16px;
}

/* --- サービス横長カード（一覧ページ） --- */
.card-service-row {
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 44px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.card-service-row:hover { border-color: var(--stone-300); }
.card-service-row__main { flex: 1 1 260px; }
.card-service-row__main .en-label { display: block; margin-bottom: 16px; }
.card-service-row__main .t-h3 { margin-bottom: 16px; }
.card-service-row__lead {
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  margin: 0;
}
.card-service-row__side { flex: 1 1 220px; }
.card-service-row__side-label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--stone-500);
  margin-bottom: 16px;
}
.card-service-row__for {
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  margin: 0 0 24px;
}
.card-service-row__meta {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--stone-500);
  border-top: 1px solid var(--paper-200);
  padding-top: 16px;
}
.card-service-row__more {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--akabeni);
  margin-top: 20px;
}

/* --- 記事カード（グリッド型）---
   auto-fit は件数が少ないとカードが伸びるため固定カラムにする */
.post-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  justify-content: start;
}
.post-cards > * { max-width: 360px; }
@media (max-width: 900px) {
  .post-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .post-cards { grid-template-columns: 1fr; }
  .post-cards > * { max-width: none; }
}
.card-post { display: flex; flex-direction: column; gap: 16px; }
.card-post__meta { display: flex; align-items: center; gap: 12px; }
.card-post .t-h3 { line-height: 1.7; transition: opacity var(--motion-fast) var(--ease-out); }
.card-post:hover .t-h3 { opacity: 0.62; }

/* --- 記事行リスト（ブログ一覧） --- */
.post-rows {
  display: grid;
  gap: 1px;
  background: var(--paper-200);
  border-top: 1px solid var(--paper-200);
  border-bottom: 1px solid var(--paper-200);
}
.post-row {
  background: var(--paper-50);
  padding: 26px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: baseline;
}
.post-row__date { flex: 0 0 96px; }
.post-row__body { flex: 1 1 240px; }
.post-row__cat {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stone-500);
  margin-bottom: 8px;
}
.post-row__title {
  font-family: var(--font-mincho-jp);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--sumi-700);
  transition: opacity var(--motion-fast) var(--ease-out);
}
.post-row:hover .post-row__title { opacity: 0.62; }

@media (max-width: 768px) {
  /* 日付を上に積む（横はみ出し防止） */
  .post-row { flex-direction: column; gap: 8px; }
  .post-row__date { flex: none; }
}

/* --- 流れ（block-flow） --- */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 32px;
}
.flow-item { border-top: 1px solid var(--stone-300); padding-top: 24px; }
.flow-item__num {
  font-family: var(--font-serif-latin);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--akabeni);
  margin-bottom: 16px;
}
.flow-item__title {
  font-family: var(--font-mincho-jp);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--sumi-700);
  margin-bottom: 14px;
}
.flow-item__desc,
.small-body {
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
  margin: 0;
}

/* 流れ（縦リスト型・サービス詳細） */
.flow-list { display: grid; gap: 24px; }
.flow-list__item {
  display: flex;
  gap: 20px;
  align-items: baseline;
  border-bottom: 1px solid var(--paper-200);
  padding-bottom: 20px;
}
.flow-list__num {
  font-family: var(--font-serif-latin);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--akabeni);
  flex: none;
}
.flow-list__title {
  font-family: var(--font-mincho-jp);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--sumi-700);
  margin-bottom: 8px;
}

/* --- 姿勢（block-stance）--- 常に 2×2（auto-fit だと全幅では3+1に崩れる） */
.stance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}
@media (max-width: 768px) {
  .stance-grid { grid-template-columns: 1fr; }
}
.stance-item__title {
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--sumi-700);
  margin-bottom: 12px;
}
.stance-item p {
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
  margin: 0;
}

/* --- FAQ 行（block-faq） --- */
.faq-rows > div {
  border-bottom: 1px solid var(--paper-200);
  padding: 26px 0;
}
.faq-rows--top > div { border-bottom: 0; border-top: 1px solid var(--paper-200); padding: 24px 0; }
.faq-rows__q {
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: var(--sumi-700);
  margin-bottom: 14px;
}
.faq-rows__a {
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
  margin: 0;
}
.faq-rows__a p { margin: 0 0 12px; }
.faq-rows__a p:last-child { margin-bottom: 0; }

/* --- 整理の方法（about 右列） --- */
.method-rows > div {
  padding: 24px 26px;
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.method-rows__num {
  font-family: var(--font-serif-latin);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--akabeni);
  flex: none;
}
.method-rows span:last-child {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
}

/* --- 迷ったときの目安（サービス一覧） --- */
.choose-rows > div {
  padding: 28px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: baseline;
}
.choose-rows__if {
  flex: 1 1 300px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
}
.choose-rows__then {
  flex: 0 1 260px;
  font-family: var(--font-mincho-jp);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--sumi-700);
}

/* --- 料金ボックス（サービス詳細） --- */
.price-box {
  flex: 0 1 300px;
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
}
.price-box__label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--stone-500);
  margin-bottom: 20px;
}
.price-box__price {
  font-family: var(--font-mincho-jp);
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--sumi-700);
  margin-bottom: 6px;
}
.price-box__note {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--stone-500);
  margin-bottom: 24px;
}
.price-box__list {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--paper-200);
  padding-top: 20px;
}
.price-box__list > div {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
}

/* --- 事例カード（card-case） --- */
.card-case {
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.card-case__head { flex: 0 1 200px; }
.card-case__who {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--stone-500);
  margin-bottom: 12px;
}
.card-case__svc {
  font-family: var(--font-mincho-jp);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--sumi-700);
  line-height: 1.7;
}
.card-case__body { flex: 1 1 260px; }
.card-case__ba-label {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--stone-500);
  margin-bottom: 10px;
}
.card-case__ba-label--after { color: var(--akabeni); }
.card-case__body p {
  font-size: 13.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
  margin: 0 0 24px;
}
.card-case__body p:last-child { margin-bottom: 0; }

/* --- 記事内 目次（article-toc） --- */
.toc-card {
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  margin-bottom: 48px;
}
.toc-card .label-dash { margin-bottom: 16px; }
.toc-card__list { display: grid; gap: 10px; }
.toc-card__list a {
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--akabeni);
  transition: opacity var(--motion-fast) var(--ease-out);
}
.toc-card__list a:hover { opacity: 0.62; }

.toc-aside__list {
  display: grid;
  gap: 12px;
  border-left: 1px solid var(--paper-200);
  padding-left: 18px;
}
.toc-aside__list a {
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--stone-500);
  transition: color var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}
.toc-aside__list a:hover { opacity: 0.62; }
.toc-aside__list a.is-current { color: var(--akabeni); }

/* --- 記事末サービスCTA（article-service-cta） --- */
.svc-cta {
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px 36px;
  margin-bottom: 56px;
}
.svc-cta .label-dash { margin-bottom: 18px; }
.svc-cta .t-h3 { margin-bottom: 16px; }
.svc-cta__lead {
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
  margin: 0 0 24px;
}
.svc-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- サイドの小さなサービス案内カード（ブログ一覧） --- */
.aside-card {
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
}
.aside-card__title {
  font-family: var(--font-mincho-jp);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--sumi-700);
  margin-bottom: 14px;
}
.aside-card p {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
  margin: 0 0 20px;
}
.aside-card .link-under { font-size: 12.5px; }

/* --- よく読まれている記事（番号リスト） --- */
.popular-list { display: grid; gap: 20px; }
.popular-list a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.popular-list a:hover { opacity: 0.62; }
.popular-list__num {
  font-family: var(--font-serif-latin);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--akabeni);
  flex: none;
}
.popular-list span:last-child {
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
}

/* --- お問い合わせフォーム --- */
.contact-card {
  flex: 1 1 420px;
  background: var(--paper-100);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 44px 40px;
}
.contact-notes {
  display: grid;
  gap: 20px;
  border-top: 1px solid var(--paper-200);
  padding-top: 32px;
}
.contact-notes > div {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--sumi-600);
}

/* フォーム部品（Contact Form 7 の出力にも効くよう要素で指定） */
.contact-card .field-label,
.contact-card label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--stone-500);
  margin-bottom: 10px;
}
.contact-card input[type="text"],
.contact-card input[type="email"],
.contact-card input[type="url"],
.contact-card input[type="tel"] {
  display: block;
  width: 100%;
  font-family: var(--font-sans-jp);
  font-size: 14px;
  color: var(--sumi-700);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--stone-300);
  border-radius: 0;
  padding: 4px 0 10px;
  outline: none;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.contact-card input:focus { border-bottom-color: var(--sumi-700); }
.contact-card textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  font-family: var(--font-sans-jp);
  font-size: 14px;
  line-height: 1.9;
  color: var(--sumi-700);
  background: transparent;
  border: 1px solid var(--stone-300);
  border-radius: var(--radius-sm);
  padding: 14px;
  outline: none;
}
.contact-card textarea:focus { border-color: var(--sumi-700); }
.contact-card ::placeholder { color: var(--stone-400); opacity: 1; }
.contact-card .wpcf7-form > p,
.contact-card .form-field { margin: 0 0 28px; }

/* ご用件ラジオ（ボタン風） */
.contact-card .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-card .wpcf7-radio .wpcf7-list-item { margin: 0; }
.contact-card .wpcf7-radio label {
  margin: 0;
  cursor: pointer;
}
.contact-card .wpcf7-radio input { position: absolute; opacity: 0; }
.contact-card .wpcf7-radio .wpcf7-list-item-label {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--sumi-700);
  border: 1px solid var(--stone-300);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.contact-card .wpcf7-radio input:checked + .wpcf7-list-item-label {
  color: var(--paper-50);
  background: var(--sumi-700);
  border-color: var(--sumi-700);
}
.contact-card .wpcf7-radio input:focus-visible + .wpcf7-list-item-label {
  outline: 1px solid var(--akabeni);
  outline-offset: 3px;
}

/* 同意チェックと送信 */
.contact-card .wpcf7-acceptance label,
.contact-card .accept-label {
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--stone-500);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.contact-card input[type="checkbox"] { accent-color: var(--sumi-700); }
.contact-card input[type="submit"],
.contact-card button[type="submit"] {
  display: block;
  width: 100%;
  font-family: var(--font-sans-jp);
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--paper-50);
  background: var(--sumi-700);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 16px 30px;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.contact-card input[type="submit"]:hover { opacity: 0.85; }
.contact-card input[type="submit"]:active { transform: scale(0.96); }
.contact-card .wpcf7-spinner { display: block; margin: 8px auto 0; }
.contact-card .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--stone-300) !important;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--sumi-600);
}
.contact-card .wpcf7-not-valid-tip {
  font-size: 11.5px;
  color: var(--akabeni);
  margin-top: 6px;
}