@charset "UTF-8";
/* ==================================================================
   Site Theme（全ページ読み込み）
   ドメインTOP（kaitoriyamato.com）の配色・書体に合わせるSWELL用レイヤー

   ■ SWELLとぶつからないためのルール
   1. 色・書体はまずSWELLのCSS変数を body で上書きする
      （:root より body の方が内側なので、読み込み順に関係なく効く。!important 不使用）
   2. 変数で変えられない部分だけ、SWELLのセレクタに body を足して
      詳細度を1段だけ上げる（SWELLブロックは :where で除外）
   3. このファイル独自の変数は --yt- で始める
   4. 無効にしたいときは functions.php 等で
      add_filter( 'gcs_components', function( $c ){ unset( $c['site-theme'] ); return $c; } );
   ================================================================== */

/* ------------------------------------------------------------------
   0. デザイントークン（TOPのCSSから抽出）
   ------------------------------------------------------------------ */
body {
	--yt-crimson: #880809;      /* メイン深紅：帯・見出し */
	--yt-red: #c30d23;          /* 強調の赤：注意・金額 */
	--yt-btn-from: #fe2f32;     /* ボタン赤グラデ */
	--yt-btn-to: #b81921;
	--yt-gold: #dab127;         /* ゴールド：線・アクセント */
	--yt-gold-dark: #a07b33;    /* 濃いゴールド：枠 */
	--yt-brown: #55401a;        /* 茶：文字 */
	--yt-cream: #fffbda;        /* クリーム */
	--yt-ink: #002111;          /* 本文色 */
	--yt-line: #00b900;         /* LINE緑 */
	--yt-foot-bg: #303030;
	--yt-foot-text: #e0e0e0;
	--yt-radius: 8px;
	--yt-metal: linear-gradient(90deg, #a5911d 0, #fff9c1 15%, #cbac2f 50%, #655e36 100%);
	--yt-metal-frame: linear-gradient(90deg, #564903 0, #fff9c1 25%, #968006 50%, #564903 100%);
	--yt-font: Arial, "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", sans-serif;

	/* ---- SWELLの変数を上書き ---- */
	--swl-font_family: var(--yt-font);
	--color_text: var(--yt-ink);
	--color_main: var(--yt-crimson);
	--color_htag: var(--yt-crimson);
	--color_header_bg: #fff;
	--color_header_text: var(--yt-ink);
	--color_footer_bg: var(--yt-foot-bg);
	--color_footer_text: var(--yt-foot-text);
	--color_btn_red: var(--yt-red);
	--color_btn_green: var(--yt-line);

	/* ---- ag- パーツ（apple-gift.css）の強調色をTOPの赤に揃える（v2.4.0） ---- */
	--ag-accent: var(--yt-red);
	--ag-accent-bg: #fdf1f2;
}

/* ------------------------------------------------------------------
   1. ヘッダー
   ------------------------------------------------------------------ */
/* ヘッダーバー（最上部の細い帯）→ TOPと同じ深紅 */
body .l-header__bar {
	background: var(--yt-crimson);
	color: #fff;
}

/* グローバルナビはSWELLの設定（ヘッダー文字色）に任せる
   ※v2.2.0〜2.3.1 で入れていた黒背景は、ロゴ横にメニューが並ぶ
     レイアウトだとメニュー部分だけが黒い箱になるため削除（v2.3.2） */

/* ------------------------------------------------------------------
   2. ページタイトル
   ------------------------------------------------------------------ */
/* 「タイトルをコンテンツ上に表示」の帯 → 金属ゴールド */
body .l-topTitleArea {
	background: var(--yt-metal);
	color: #000;
}
body .l-topTitleArea__img,
body .l-topTitleArea::before {
	display: none;
}

/* ------------------------------------------------------------------
   3. 本文の見出し
   SWELL本体と同じ除外条件（SWELLブロック・FAQ・投稿リスト）に
   yt- パーツを加えて対象外にする
   ------------------------------------------------------------------ */

/* h2：深紅の帯＋ゴールドの下線 */
body .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"])) {
	position: relative;
	background: var(--yt-crimson);
	color: #fff;
	border: none;
	border-bottom: 3px solid var(--yt-gold);
	border-radius: var(--yt-radius) var(--yt-radius) 0 0;
	padding: .8em 1em;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
}
body .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"]))::before,
body .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"]))::after {
	content: none;
	display: none;
}

/* h3：ゴールドの下線＋左に深紅の縦棒 */
body .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"])) {
	position: relative;
	background: none;
	color: var(--yt-ink);
	border: none;
	border-bottom: 2px solid var(--yt-gold);
	border-radius: 0;
	padding: .5em .5em .5em 1em;
	font-weight: 700;
	line-height: 1.5;
}
body .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"]))::before {
	content: "";
	display: block;
	position: absolute;
	top: .45em;
	bottom: .45em;
	left: 0;
	width: 5px;
	height: auto;
	background: var(--yt-crimson);
	border: none;
	border-radius: 2px;
	transform: none;
	opacity: 1;
}
body .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"]))::after {
	content: none;
	display: none;
}

/* h4：深紅の左線のみ */
body .post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"])) {
	background: none;
	border: none;
	border-left: 3px solid var(--yt-crimson);
	padding: .2em 0 .2em .75em;
	font-weight: 700;
}
body .post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"]))::before,
body .post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not([class*="yt-"]))::after {
	content: none;
	display: none;
}

/* ------------------------------------------------------------------
   4. サイドバーのウィジェットタイトル → TOP下層のゴールド帯
   ------------------------------------------------------------------ */
body .l-sidebar .c-widget__title {
	background: #cd9d0d;
	color: #fff;
	border: none;
	border-radius: var(--yt-radius);
	padding: .6em 1em;
	text-align: center;
	font-weight: 700;
}
body .l-sidebar .c-widget__title::before,
body .l-sidebar .c-widget__title::after {
	content: none;
	display: none;
}

/* ------------------------------------------------------------------
   5. フッター
   ------------------------------------------------------------------ */
body .l-footer__nav a {
	position: relative;
	padding-left: 12px;
	border: none;
	color: var(--yt-foot-text);
	font-size: 14px;
}
body .l-footer__nav a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3px 0 3px 6px;
	border-color: transparent transparent transparent var(--yt-foot-text);
}

@media (max-width: 599px) {
	body .l-footer__nav a {
		font-size: 12px;
	}
}