@charset "UTF-8";
/*
Theme Name: SWELL CHILD（リベ大アニマルレスキュー 活動レポート）
Template: swell
Description: 本体サイト（www.libe-animal-rescue.com）の色・フォント・形に合わせる子テーマ。値の出典は ../design_tokens.md
Version: 0.1.0
*/

/* =========================================================
   0. 本体サイトの決まりごと（CSS 変数）
   色・形を変えたい時はここだけ直す
   ========================================================= */
:root {
	/* 色（本体 common.css :root と同じ値） */
	--ar-orange: #fb9235;      /* メイン */
	--ar-orange-deep: #ea7611; /* 文字として使うオレンジ（白地で読みやすい濃さ） */
	--ar-accent: #fa6400;
	--ar-text: #1e0909;        /* 本文（赤みのある焦げ茶） */
	--ar-gray: #a6a6a6;        /* 日付・補助 */
	--ar-line: #e3e3e3;        /* 枠線・区切り線 */
	--ar-cream: #fff1da;       /* 帯・タグ背景 */
	--ar-beige: #fff7eb;       /* さらに薄いクリーム */
	--ar-cream-deep: #ffe9c5;
	--ar-pink: #fff4eb;        /* カテゴリラベル背景 */
	--ar-cv: #58b71a;          /* 申し込み・寄付・応募のボタン */
	--ar-cv-hover: #0e8a00;
	--ar-cv-light: #eeffe3;
	--ar-footer: #6e2617;      /* フッター背景 */
	--ar-base: #f4f4f4;

	/* フォント */
	--ar-font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--ar-font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Zen Kaku Gothic New", sans-serif;
	--ar-font-en: "Quicksand", "Zen Maru Gothic", sans-serif;

	/* 形 */
	--ar-radius-s: 4px;    /* タグ */
	--ar-radius-m: 8px;    /* 小ボタン */
	--ar-radius-card: 12px;/* 記事カード */
	--ar-radius-l: 16px;   /* 囲み・カード */
	--ar-radius-xl: 24px;  /* 大きな箱 */
	--ar-radius-pill: 999px;

	/* SWELL 側の変数を本体の値で上書き（カスタマイザーの設定と同じ値にしておく） */
	--color_main: var(--ar-orange);
	--color_text: var(--ar-text);
	--color_link: var(--ar-orange-deep);
	--color_htag: var(--ar-orange);
	--color_bg: #fff;
	--swl-font_family: var(--ar-font-body);
	--swl-font_weight: 500;
	--swl-radius--2: var(--ar-radius-m);
	--swl-radius--4: var(--ar-radius-card);
	--swl-radius--8: var(--ar-radius-l);
	--swl-box_shadow: none;
	--swl-btn_shadow: none;
}

/* =========================================================
   1. 文字（本文 Zen Kaku Gothic New 500・16px・行間1.7・字間0.02em）
   ========================================================= */
body {
	font-family: var(--ar-font-body);
	font-weight: 500;
	color: var(--ar-text);
	letter-spacing: 0.02em;
}
.post_content {
	font-size: 16px;
	line-height: 1.7;
}
.post_content p {
	margin-bottom: 1.7em;
}

/* 見出し・タイトル類は丸ゴシック */
h1, h2, h3, h4,
.c-pageTitle, .c-postTitle__ttl, .p-postList__title,
.c-widget__title, .c-secTitle, .p-toc__ttl {
	font-family: var(--ar-font-head);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* 英字の小見出し（本体の「Reports」ラベル）: 一覧ページのタイトル上などに使う */
.ar-label,
.c-pageTitle__subTitle {
	font-family: var(--ar-font-en);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ar-orange);
}

/* =========================================================
   2. 記事の見出し
   h2: 下に1pxのオレンジ線（本体の読み物ページの見出し）
   h3: 頭にオレンジの肉球＋下に2pxのオレンジ線（本体サイドバーの見出し）
   SWELL のカスタマイザーで見出しのデザインを「下線」系にしてから、細部をここで合わせる
   ========================================================= */
.post_content h2 {
	background: none;
	color: var(--ar-text);
	font-size: 22px;
	line-height: 1.5;
	padding: 0 0 16px;
	margin: 3.5em 0 1.5em;
	border: none;
	border-bottom: 1px solid var(--ar-orange);
	border-radius: 0;
}
.post_content h2::before,
.post_content h2::after {
	content: none;
}
.post_content h3 {
	font-size: 18px;
	line-height: 1.5;
	padding: 0 0 8px 22px;
	margin: 2.5em 0 1.2em;
	border: none;
	border-bottom: 2px solid var(--ar-orange);
	background: url("assets/icon_footstep.svg") no-repeat left 0.45em / 15px 11px;
}
.post_content h3::before,
.post_content h3::after {
	content: none;
}
@media (max-width: 768px) {
	.post_content h2 { font-size: 19px; }
	.post_content h3 { font-size: 17px; }
}

/* =========================================================
   3. 本文の部品
   ========================================================= */
/* 文中リンク: 太字＋下線。マウスを乗せると薄く */
.post_content a {
	color: var(--ar-orange-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.post_content a:hover {
	opacity: 0.7;
}
/* STUDIO 時代のリンクは <u> で下線を付けているので二重にしない */
.post_content a u {
	text-decoration: none;
}

/* 箇条書き: 頭を10pxのオレンジの丸に */
.post_content ul:not([class*="is-style-"]) > li {
	list-style: none;
	position: relative;
	padding-left: 1.2em;
}
.post_content ul:not([class*="is-style-"]) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ar-orange);
}

/* 画像: 角を少し丸く・影なし */
.post_content .wp-block-image img {
	border-radius: var(--ar-radius-l);
	box-shadow: none;
}

/* 目次（SWELL の自動目次）: 白地・オレンジ枠・角丸24px */
.p-toc {
	border: 1px solid var(--ar-orange);
	border-radius: var(--ar-radius-xl);
	background: #fff;
	box-shadow: none;
}
.p-toc__ttl {
	color: var(--ar-text);
}

/* =========================================================
   4. ボタン（寄付・里親への誘導は緑。本体の主ボタンと同じ）
   SWELL のボタンブロックで「緑」を選ぶとこの形になる
   ========================================================= */
.swell-block-button.green_ .swell-block-button__link,
.ar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	min-width: 256px;
	padding: 0 12px 0 32px;
	border-radius: var(--ar-radius-pill);
	background: var(--ar-cv);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	box-shadow: none;
}
.swell-block-button.green_ .swell-block-button__link::after,
.ar-btn::after {
	content: "";
	width: 40px;
	height: 40px;
	background: url("assets/icon_arrow_w.svg") no-repeat center / contain;
}
.swell-block-button.green_ .swell-block-button__link:hover,
.ar-btn:hover {
	background: var(--ar-cv-hover);
	opacity: 1;
}

/* =========================================================
   5. 記事一覧（トップ・カテゴリ・関連記事）
   白地・1pxの灰色枠・角丸12px・影なし。マウスを乗せると薄く
   ========================================================= */
.p-postList__link,
.ar-card {
	background: #fff;
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius-card);
	box-shadow: none;
	overflow: hidden;
	transition: opacity 0.2s;
}
.p-postList__link:hover,
.ar-card:hover {
	opacity: 0.7;
	box-shadow: none;
}
.p-postList__body {
	padding: 14px;
}
.p-postList__title {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ar-text);
}
/* 日付（2026.5.25 形式は WordPress の日付形式 Y.n.j で）: 小さく灰色 */
.p-postList__meta,
.c-postTimes {
	color: var(--ar-gray);
	font-family: var(--ar-font-en);
	font-size: 12px;
}
/* カテゴリラベル: オレンジ文字・薄いオレンジ背景・角丸 */
.c-postThumb__cat,
.c-categoryList__link,
.ar-cat {
	display: inline-block;
	background: var(--ar-pink);
	color: var(--ar-orange);
	border: none;
	border-radius: 10px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
}

/* =========================================================
   6. サイドバー・ウィジェットの見出し（肉球＋2pxオレンジ線）
   ========================================================= */
.c-widget__title,
.ar-widget-title {
	background: none;
	color: var(--ar-text);
	font-size: 14px;
	padding: 0 0 8px 22px;
	border-bottom: 2px solid var(--ar-orange);
	background: url("assets/icon_footstep.svg") no-repeat left 0.35em / 15px 11px;
}
.c-widget__title::before,
.c-widget__title::after {
	content: none;
}

/* =========================================================
   7. ヘッダー・フッター
   ========================================================= */
.l-header {
	background: #fff;
	box-shadow: none;
	border-bottom: 1px solid var(--ar-line);
}
.l-footer,
.l-footer__widgetArea,
.l-footer__foot {
	background: var(--ar-footer);
	color: #fff;
}
.l-footer a {
	color: rgba(255, 255, 255, 0.7);
}
.l-footer a:hover {
	color: #fff;
}
.copyright {
	font-family: var(--ar-font-head);
	font-size: 14px;
	color: #fff;
}

/* ページトップボタン: 白丸・2pxオレンジ枠 */
.p-fixBtnWrap .c-fixBtn,
#pagetop {
	background: #fff;
	color: var(--ar-orange);
	border: 2px solid var(--ar-orange);
	box-shadow: none;
}
.p-fixBtnWrap .c-fixBtn:hover,
#pagetop:hover {
	background: var(--ar-orange);
	color: #fff;
}

/* 影をまとめて消す（本体は線と背景色で区切る） */
.c-shareBtns__btn,
.p-blogCard__inner,
.p-pnLinks__link {
	box-shadow: none;
}