@charset "utf-8";
/*
 * アップルフィット倉敷 テーマ側のCSS
 *
 * 現行サイトのCSS（/assets/css/ にあるもの）を**書き換えずに**、
 * WordPress化で必要になった分だけをここで足す。いちばん最後に読まれる。
 *
 * ・現行サイトのCSSは触らない。触ると現行との見比べができなくなる
 * ・ここに書くものは「WordPressだから要るもの」に限る
 */

/* WordPress が本文に入れる配置クラス（現行サイトには無い。共通の教訓21）
   WordPress標準CSSを読み込まないので自前で持つ必要がある */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft   { float: left; margin: 0 1em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1em; }
.alignnone   { display: block; }
.wp-caption  { max-width: 100%; }
.wp-caption img { display: block; margin: 0 auto; }
.wp-caption-text { font-size: 0.85em; text-align: center; margin: 0.4em 0 0; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* PCメニューで「いま見ているページ」を分かるようにする（現行サイトには無かった。
   利用者が現在位置を見失わないため。色は現行のサイトカラー #E83828） */
#nav-pc .menu-pc-items.is-current > a > p { color: #E83828; }

/* 画像がはみ出さないようにする（本文にHTMLを貼るので保険） */
main img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------
 * 読み込み中の目隠し（#loading）の保険
 *
 * ★この目隠しは本文の前に全画面で立つので、**外し損なうとサイトが読めなくなる**。
 *   2026-09-10、実機で「予約・お問い合わせ」のページが真っ白になった
 *   （軽いページでは JS が動く前に load が終わっていて、消す処理が呼ばれなかった）。
 *   JS側は直したが、**JSが1行でも失敗したら同じことが起きる**ので、
 *   CSSだけで「4秒たったら必ず消える」保険を入れる。
 *   ふだんは JS が 0.x 秒で消すので、この保険が見えることはない。
 * ------------------------------------------------------------------ */
@keyframes af-loading-failsafe {
	to { opacity: 0; visibility: hidden; }
}
/* ★★`:not(.loaded)` を必ず付ける。
   CSSアニメーションが指定されている要素は、そのアニメーションが扱うプロパティ
   （ここでは opacity と visibility）について**通常の宣言より強い**扱いになる。
   `#loading { animation: … }` と素で書くと、JSが `.loaded` を付けても
   `.loaded{opacity:0;visibility:hidden}` が負けて**消えなくなる恐れがある**。
   `:not(.loaded)` にしておけば、`.loaded` が付いた瞬間にアニメーションが外れ、
   本来の消える宣言が効く（＝保険が本番の動作を邪魔しない）。
   2026-09-10、実機では消えていたが、理屈の上で危ないので限定した。 */
#loading:not(.loaded) {
	animation: af-loading-failsafe 0.3s ease 4s forwards;
}


/* ------------------------------------------------------------------
 * フッターの電話・営業時間・住所を <p> にしたぶんの手当て
 *   （2026-09-10。footer.php の頭のコメントも読む）
 * 現行は h2 / h3 で書いてあり、太字（ブラウザ既定の font-weight:700）と
 * 行間 1.8 が付いていた。<p> にすると
 *   ・太字が消える
 *   ・990px 以下で common-all.css の
 *     `#footer-menu .footer-contents p{line-height:30px}` に当たって行間が変わる
 * ので、ここで元の見え方に戻している。**見た目は変えずタグだけ正す**のが目的。
 * ------------------------------------------------------------------ */
#footer-menu .footer-contents p.footer-txt {
	font-weight: 700;
	line-height: 1.8;
}

/* ------------------------------------------------------------------
 * service ページ：1ページの <h1> は1つ（2026-09-10・門田さんの指示）
 * 「初回体験パーソナルトレーニングの流れ」と
 * 「体成分の測定とカウンセリングのみの…」を <h2> に下げた。
 * 現行CSSは h1 を名指ししている箇所があるので、ここで同じ見え方を作る。
 *   ・common-all.css `body h1{34px}` / `body h2{28px}` … 大きさが変わってしまう
 *   ・common-all.css `.under-green-title :is(h1,h2)` … これは h2 も入っているので無事
 *   ・service.css `#contents-inbody .under-green-title h1{…}` … h1 名指し
 * ------------------------------------------------------------------ */
#contents-course .course-flow .under-green-title h2 { font-size: 34px; }
@media (width <= 767px) {
	#contents-course .course-flow .under-green-title h2 { font-size: 24px; }
}
#contents-inbody .under-green-title h2 {
	max-width: 800px;
	margin-left: 50%;
	margin-right: auto;
	margin-bottom: 60px;
	padding-bottom: 30px;
	font-size: 24px;
	text-align: center;
	line-height: 1.3333;
	position: relative;
}
@media (width <= 990px) {
	#contents-inbody .under-green-title h2 { margin-left: 0%; }
}

/* ------------------------------------------------------------------
 * 横に17pxはみ出す（＝横スクロールバーが出る）のを止める
 *   2026-09-10、門田さんの指摘。**現行サイトも同じ**。
 *
 * 原因（実測）: トレーナー紹介の右側の写真が
 *   `margin-left:50%` ＋ `width:60%` ＝ 親の 110% になっていて、
 *   1350px 幅で親（1166px）の右端 1250px を越えて 1367px まで伸びていた。
 *   画面の内側は 1335px なので 32px はみ出し、横スクロールバーが出ていた。
 *   → 門田さんが「トレーナー紹介はこれで大丈夫」と言われた**並びは変えたくない**ので、
 *     写真の位置はそのままにして、画面の外に出たぶんだけ切る。
 *
 * ★`overflow-x: hidden` ではなく `clip` を使う。
 *   `hidden` はスクロールできる箱を作ってしまうので、`overflow-y` が auto に変わり、
 *   position:sticky や中の絶対配置が思わぬところで切られる。
 *   `clip` は箱を作らず切るだけなので副作用がない。
 *   古い環境のために `hidden` を先に書いて上書きしている。
 *
 * 実測（1350px幅・/staff/）: scrollWidth 1367 → 1335（＝はみ出し0）。
 *   写真の見え方は変わらない（切ったのは画面の外に出ていた32pxだけ）。
 *   375px でははみ出しは元々0で、変化なし。縦スクロールも従来どおり動く。
 * ------------------------------------------------------------------ */
html, body {
	overflow-x: hidden;
	overflow-x: clip;
}

/* トップの「価格帯・お支払い方法」（[af_price]・2026-09-25 v0.12.2）
   特長の一覧のすぐ下に置く。見出しの色は下のボタンと同じ緑 #86bc42（2026-09-26 門田さん依頼・v0.12.4。以前は赤 #E83828） */
.af-price-box { max-width: 640px; margin: 40px auto 0; padding: 0 16px; }
.af-price-box__list { margin: 0; border-top: 1px solid #ddd; }
.af-price-box__row { display: flex; gap: 16px; padding: 14px 4px; border-bottom: 1px solid #ddd; }
.af-price-box__row dt { flex: 0 0 8em; font-weight: 700; color: #86bc42; }
.af-price-box__row dd { margin: 0; flex: 1 1 auto; }
.af-price-box .news-btn { margin-top: 24px; text-align: center; }
/* ボタンは現行の「お知らせ一覧ボタン」（common-all.css の #top-event .news-button）と同じ見た目にする。
   現行CSSでは余白と文字色が #top-event の中にしか効かないので、ここで同じ値を当てる */
.af-price-box a.news-button { display: inline-block; width: auto; padding: 10px 20px; font-weight: bold; text-decoration: none; text-align: center; }
.af-price-box a.news-button span { color: #fff; }
.af-price-box a.news-button:hover span { color: #86bc42; }
@media screen and (max-width: 599px) {
	.af-price-box__row { flex-direction: column; gap: 4px; }
	.af-price-box__row dt { flex-basis: auto; }
}