@charset "utf-8";
/*
Theme Name: Chill Style (Twenty Twenty-One Child)
Theme URI:
Description: mpg-field.jp（旧テーマ Chill TCD016）のデザインを Twenty Twenty-One 子テーマとして再現したテーマです。デザインCSSと画像は assets/chill/ に旧テーマの原本をそのまま使用しています。PHP 8.3 / 最新 WordPress 対応。
Author:
Template: twentytwentyone
Version: 1.1.2
Text Domain: twentytwentyone-child
*/

/* ==========================================================================
   このファイルは「差分」だけを書く。
   デザイン本体は assets/chill/ の旧テーマCSSが担当する。
   読み込み順: chill-common → chill-pc / chill-sp → chill-japanese → 本ファイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 旧サイトの実測値に合わせる
   旧テーマCSSにbodyのfont-size指定が無く、本番環境では15pxで描画されていたため
   （ブラウザ既定の16pxだと全体が少し大きくなる）明示的に揃える。
   -------------------------------------------------------------------------- */
body {
	font-size: 15px;

	/* 旧テーマCSSが img/common/background2.gif を指定しているが、
	   この画像は旧テーマにも本番サーバーにも存在せず404になる。
	   見た目に影響はないが、無駄なリクエストを止める。 */
	background-image: none;
}

/* 旧テーマはロゴの位置をテーマオプションでインラインstyleとして出力していた
   （本番の実ソース: <h2 id="logo_image" style="top:30px; left:0px;">）。
   CSS側に top/left が無いため、同じ値をここで指定する。 */
@media screen and (min-width: 1001px) {
	#logo_image {
		top: 30px;
		left: 0;
	}
}

/* --------------------------------------------------------------------------
   2. 旧テーマに無い、現行WordPressが出力するマークアップへの対応
   -------------------------------------------------------------------------- */

/* アクセシビリティ用の非表示テキスト */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 9999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 10px 20px;
	background: #fff;
	color: #c46780;
}

/* ブロックエディタの配置クラス */
.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-block-image img {
	height: auto;
	max-width: 100%;
}

.wp-block-embed iframe {
	max-width: 100%;
}

/* 管理バー表示時、追従ヘッダーが隠れないようにする */
body.admin-bar #header_top_wrap.fixed {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #header_top_wrap.fixed {
		top: 46px;
	}
}

/* --------------------------------------------------------------------------
   3. グローバルメニュー
   旧テーマは jQuery でサブメニューを slideDown していた。
   ここではCSSのhoverで表示し、同等の見え方にしている。
   （項目の等幅化は assets/js/theme.js が担当）
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1001px) {

	#global_menu li:hover > ul {
		display: block;
		animation: ttc-submenu-in 180ms ease-out;
	}

	/* サブメニューにマウスがある間、親項目を点灯させたままにする */
	#global_menu li:hover > a {
		background: #e48898;
	}

	@keyframes ttc-submenu-in {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}

@media screen and (max-width: 1000px) {

	.menu_button {
		display: block;
	}

	/* ドロワーの開閉 */
	#global_menu.is-open {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   4. ページトップへ戻るボタン
   旧サイトのプラグイン scrollup-master と同じ見た目・位置。
   （span 48×48 = SVG 32×32 + padding 8px、右下20px、z-index 1000）
   -------------------------------------------------------------------------- */
#scrollup-master {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 32px;
	height: 32px;
	padding: 8px;
	z-index: 1000;
	display: none;
	cursor: pointer;
	background: transparent;
}

#scrollup-master.is-visible {
	display: block;
}

#scrollup-master .scrollup-svg-icon {
	display: block;
	fill: #000;
}

/* --------------------------------------------------------------------------
   5. 数字ページャー（旧テーマは無限スクロールだったため未定義）
   記事一覧では #load_post を使うので通常は出番がないが、
   プラグイン等が paginate_links() を出力した場合の保険。
   -------------------------------------------------------------------------- */
.pagination {
	text-align: center;
	padding: 10px 0 30px;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 32px;
	height: 32px;
	line-height: 32px;
	margin: 0 3px;
	padding: 0 8px;
	background: #eee;
	color: #333;
	text-decoration: none;
	font-size: 12px;
	border-radius: 3px;
}

.pagination .page-numbers.current {
	background: #999;
	color: #fff;
}

.pagination a.page-numbers:hover {
	background: #e48898;
	color: #fff;
}