@charset "UTF-8";
/*
Theme Name: Arkhe Child
Theme URI: https://arkhe-theme.com/
Template: arkhe
Description: Arkhe の子テーマです。カスタマイズはこのテーマ内で行ってください。
Author: westyno
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arkhe-child
*/

/* ==========================================================================
   1. カラー変数
   色を変えたくなったら、まずここだけ書き換えてください。
   ========================================================================== */
:root {
	--wt-main: #1b3a5c;        /* 濃紺：見出し・リンク・ヘッダー */
	--wt-main-dark: #142c46;   /* 濃紺のホバー用 */
	--wt-accent: #e07b39;      /* オレンジ：CTAボタン専用 */
	--wt-accent-dark: #c96a2c; /* オレンジのホバー用 */
	--wt-text: #333333;        /* 本文 */
	--wt-text-sub: #6b7683;    /* 補足テキスト */
	--wt-bg-soft: #f5f7fa;     /* セクション背景 */
	--wt-border: #dfe4ea;      /* 罫線 */
}

/* ==========================================================================
   2. 基本のテキスト・リンク
   ========================================================================== */
body {
	color: var(--wt-text);
}

a {
	color: var(--wt-main);
}

a:hover {
	color: var(--wt-main-dark);
}

/* ==========================================================================
   3. 本文の見出し
   左に濃紺のラインを引くシンプルな形。装飾は最小限にしています。
   ========================================================================== */
.post_content h2,
.entry-content h2 {
	padding: 0.4em 0 0.4em 0.8em;
	border-left: 5px solid var(--wt-main);
	font-size: 1.5em;
	line-height: 1.5;
}

.post_content h3,
.entry-content h3 {
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--wt-border);
	font-size: 1.25em;
	line-height: 1.5;
}

/* ==========================================================================
   4. ボタン（コアブロックの「ボタン」に適用されます）
   塗り = オレンジ（CTA用） / 枠線 = 濃紺（サブ導線用）
   ========================================================================== */
.wp-block-button__link {
	padding: 0.9em 2.2em;
	border-radius: 4px;
	background-color: var(--wt-accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.wp-block-button__link:hover {
	background-color: var(--wt-accent-dark);
	color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wt-main);
	color: var(--wt-main);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wt-main);
	color: #fff;
}

/* ==========================================================================
   5. テーブル（料金表・比較表で使います）
   ========================================================================== */
.post_content table th,
.entry-content table th {
	background-color: var(--wt-bg-soft);
	color: var(--wt-main);
}

.post_content table th,
.post_content table td,
.entry-content table th,
.entry-content table td {
	border: 1px solid var(--wt-border);
	padding: 0.7em 1em;
}

/* ==========================================================================
   6. ユーティリティ
   ブロックの「高度な設定 → 追加CSSクラス」に入力して使います。
   ========================================================================== */

/* セクションの背景を薄いグレーにする → wt-section-soft */
.wt-section-soft {
	background-color: var(--wt-bg-soft);
	padding: 4em 1.5em;
}

/* 補足・注釈テキスト → wt-note */
.wt-note {
	color: var(--wt-text-sub);
	font-size: 0.875em;
	line-height: 1.7;
}

/* 濃紺の囲みボックス → wt-box */
.wt-box {
	border: 1px solid var(--wt-border);
	border-top: 3px solid var(--wt-main);
	border-radius: 4px;
	padding: 1.5em;
	background: #fff;
}