/*
Theme Name: 士業サイト子テーマ (Twenty Twenty-Five child)
Theme URI: https://example.com/
Description: Twenty Twenty-Five をベースにした、士業・ビザ申請系サイト向けの子テーマ。誠実で落ち着いた印象を出すための配色・タイポグラフィと、業務ページで使い回せるブロックパターン用CSSを収録。
Author: —
Template: twentytwentyfive
Version: 1.0.0
Text Domain: shikaku-child
*/

/* =========================================================
   1. カラー・タイポグラフィのベース設定
   参考3サイトにありがちな「赤・オレンジの警告色」「派手な装飾」を避け、
   紺・グレー・アイボリーを基調にした落ち着いたトーンにしています。
   色を変えたい場合は、この :root の値だけ書き換えれば全体に反映されます。
   ========================================================= */
:root {
  --ct-navy: #1e3a5f;       /* 見出し・強調に使うメインカラー */
  --ct-navy-deep: #142a42;  /* ホバー時などの濃色 */
  --ct-ivory: #f7f5f0;      /* セクション背景（白との差別化用） */
  --ct-paper: #ffffff;      /* 基本の背景 */
  --ct-text: #33383d;       /* 本文テキスト */
  --ct-text-soft: #5c6570;  /* 補足テキスト */
  --ct-accent: #2f6f62;     /* CTAボタンなどの差し色（落ち着いたグリーン系） */
  --ct-accent-deep: #234f45;
  --ct-border: #e1ddd2;
  --ct-radius: 10px;
}

/* 日本語表示に強いフォントスタック。外部フォント読込みをせず表示速度を優先 */
body {
  color: var(--ct-text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
    "游ゴシック Medium", "Yu Gothic", "游ゴシック", "Noto Sans JP", Meiryo, sans-serif;
  line-height: 1.9; /* 日本語は行間を広めに取ると読みやすい */
}

h1, h2, h3, h4,
.wp-block-heading {
  color: var(--ct-navy);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

a {
  color: var(--ct-accent);
}
a:hover {
  color: var(--ct-accent-deep);
}

/* ボタン全般（コア標準のボタンブロック） */
.wp-block-button__link {
  background-color: var(--ct-accent);
  border-radius: 6px;
  padding: 0.9em 1.8em;
  font-weight: 700;
}
.wp-block-button__link:hover {
  background-color: var(--ct-accent-deep);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--ct-navy);
  border: 2px solid var(--ct-navy);
}

/* =========================================================
   2. FAQパターン用（patterns/faq.php）
   ========================================================= */
.ct-faq {
  background: var(--ct-paper);
}
.ct-faq details.wp-block-details {
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  padding: 1em 1.4em;
  margin-bottom: 0.9em;
  background: var(--ct-paper);
}
.ct-faq summary {
  font-weight: 700;
  color: var(--ct-navy);
  cursor: pointer;
}
.ct-faq summary::marker {
  color: var(--ct-accent);
}

/* =========================================================
   3. 手続きの流れ（ステップ）パターン用（patterns/step.php）
   ========================================================= */
.ct-step {
  counter-reset: ct-step-counter;
}
.ct-step-item {
  position: relative;
  padding-left: 3.6em;
  margin-bottom: 1.6em;
}
.ct-step-item::before {
  counter-increment: ct-step-counter;
  content: counter(ct-step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: var(--ct-navy);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
}
.ct-step-item h3 {
  margin-top: 0.1em;
  margin-bottom: 0.3em;
}

/* =========================================================
   4. 料金表パターン用（patterns/pricing-table.php）
   ========================================================= */
.ct-pricing-card {
  background: var(--ct-ivory);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  padding: 1.8em;
}
.ct-pricing-card .ct-price {
  color: var(--ct-navy);
  font-size: 1.8em;
  font-weight: 700;
}
.ct-pricing-note {
  color: var(--ct-text-soft);
  font-size: 0.9em;
}

/* =========================================================
   5. 解決事例カードパターン用（patterns/case-card.php）
   ========================================================= */
.ct-case-card {
  background: var(--ct-paper);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  padding: 1.6em;
  height: 100%;
}
.ct-case-tag {
  display: inline-block;
  background: var(--ct-ivory);
  color: var(--ct-navy);
  border-radius: 999px;
  padding: 0.25em 1em;
  font-size: 0.85em;
  font-weight: 700;
  margin-bottom: 0.6em;
}

/* =========================================================
   6. CTAバナー用（patterns/cta-banner.php）
   ========================================================= */
.ct-cta {
  background: var(--ct-navy);
  border-radius: var(--ct-radius);
  padding: 3em 2em;
}
.ct-cta * {
  color: #fff !important;
}
.ct-cta .wp-block-button__link {
  background-color: var(--ct-accent);
}
.ct-cta .wp-block-button__link:hover {
  background-color: var(--ct-accent-deep);
}

/* =========================================================
   7. 対応業務一覧グリッド用（patterns/service-grid.php）
   ========================================================= */
.ct-service-card {
  background: var(--ct-paper);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius);
  padding: 1.6em;
  height: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ct-service-card:hover {
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.12);
  transform: translateY(-2px);
}
.ct-service-card h3 {
  margin-top: 0;
}

/* =========================================================
   8. ヒーロー（トップページ用・patterns/hero.php）
   ========================================================= */
.ct-hero {
  background: var(--ct-navy);
  padding: 5em 2em;
}
.ct-hero * {
  color: #fff !important;
}
.ct-hero h1 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.ct-hero .wp-block-button__link {
  background-color: var(--ct-accent);
}
.ct-hero .wp-block-button__link:hover {
  background-color: var(--ct-accent-deep);
}
.ct-hero .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: #fff;
  background: transparent;
}

/* =========================================================
   9. 事務所概要ボックス用（patterns/office-info.php）
   ========================================================= */
.ct-office-info {
  background: var(--ct-ivory);
  border-radius: var(--ct-radius);
  padding: 2em;
}
.ct-office-info dt {
  font-weight: 700;
  color: var(--ct-navy);
}
.ct-office-info dd {
  margin: 0 0 1em;
}