/* =========================================================
   WA Gym Design Pattern: active ポーティ / 力強い
   ---------------------------------------------------------
   都市型パーソナルジム。「身体を変える / 結果を出す」印象。
   太く締まったタイポ、直線的な構成、ややコンデンスな英数字、
   引き締まった余白、数字と成果の強調。
   ・色は必ず var(--*) 経由（ACF テーマカラーが後から流れる）
   ・point_color は CTA / 行動導線のみ。装飾は main / main-readable
   ・固定 hex はこの :root のデフォルトプリセット内だけで使用
   ・ブレークポイントは 960px / 632px のみ
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&family=Oswald:wght@500;600&display=swap");

/* ---------------------------------------------------------
   1. デフォルトカラープリセット & フォント
   ユーザーが ACF テーマカラーを設定すると、ここで定義した
   ユーザー設定対象の変数はパターン CSS より後の :root で
   上書きされる。したがってユーザー設定対象の変数は :root に
   のみ置き、body 以下では再定義しない。
--------------------------------------------------------- */
:root {
	/* main : ブランド / サイト全体の中心色 */
	--main-color: #181A19;
	--main-color-rgb: 24, 26, 25;
	--on-main-color: #FFFFFF;
	--main-readable-color: #C2C6C2;
	--main-readable-color-rgb: 194, 198, 194;

	/* sub : 補助色 */
	--sub-color: #80847F;
	--sub-color-rgb: 128, 132, 127;
	--on-sub-color: #FFFFFF;

	/* point : CTA / 行動導線のみ */
	--point-color: #D4F53A;
	--point-color-rgb: 212, 245, 58;
	--on-point-color: #14180A;
	--point-readable-color: #C2E32A;
	--point-readable-color-rgb: 194, 227, 42;

	/* base : 背景・無彩色（最も多い） */
	--bg-color: #0C0D0C;
	--bg-color-rgb: 12, 13, 12;
	--bg-sub-color: #151715;
	--bg-sub-color-rgb: 21, 23, 21;
	--surface-color: #121412;
	--surface-color-rgb: 18, 20, 18;
	--border-color: #2A2D2A;
	--border-color-rgb: 42, 45, 42;
	--text-color: #F1F4F0;
	--text-color-rgb: 241, 244, 240;

	/* タイポ : 力強い角ゴシック + コンデンスな英数字 */
	--font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "BIZ UDPGothic", Meiryo, sans-serif;
	--eng-font: "Oswald", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------
   2. パターン専用・ユーザー設定対象外の変数
   （角丸 / 罫線 / 影 / 余白）は body にまとめる
--------------------------------------------------------- */
body.design-pattern-active {
	--ac-r: .25rem;             /* シャープ寄りの小さな角丸 */
	--ac-r-pill: 100vmax;
	--ac-line: rgba(var(--main-readable-color-rgb), .16);
	--ac-line-strong: rgba(var(--main-readable-color-rgb), .34);
	--ac-card-top: rgba(var(--text-color-rgb), .03);
	--ac-fill-soft: rgba(var(--main-readable-color-rgb), .08);
	--ac-shadow: 0 1.1rem 2.4rem rgba(var(--bg-color-rgb), .55);
	--ac-pad-card: 1.6rem;

	background:
		radial-gradient(130% 90% at 100% -10%, rgba(var(--main-readable-color-rgb), .05), transparent 46%),
		var(--bg-color);
}

/* 英字・数値はコンデンス書体で引き締める */
.design-pattern-active .sectionTitleEn,
.design-pattern-active .contentTitleEn,
.design-pattern-active .serviceListSlug,
.design-pattern-active .topMvTaglineEn,
.design-pattern-active .topAdvantageNum,
.design-pattern-active .priceItemMetaLabel,
.design-pattern-active .worksBeforeAfterLabel,
.design-pattern-active .ctaSectionTel,
.design-pattern-active .headerTel,
.design-pattern-active .newsList time,
.design-pattern-active .postDate,
.design-pattern-active .flow dt::before,
.design-pattern-active .faq dt span,
.design-pattern-active .bulletPoints li::before,
.design-pattern-active .pager .page-numbers {
	font-family: var(--eng-font);
	letter-spacing: .04em;
}

.design-pattern-active a:hover { opacity: 1; }

/* ---------------------------------------------------------
   3. セクション / 区切り / 背景リズム
--------------------------------------------------------- */
.design-pattern-active section { position: relative; }

.design-pattern-active section + section {
	border-top-color: var(--ac-line);
}

.design-pattern-active .colorSection {
	background:
		linear-gradient(180deg, rgba(var(--text-color-rgb), .04), transparent 60%),
		var(--bg-sub-color);
}

/* ---------------------------------------------------------
   4. セクション見出し
   EN キッカー（main-readable）+ 太い JA + main の短い罫
--------------------------------------------------------- */
.design-pattern-active .sectionTitle {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: .65rem;
	margin-bottom: 2.6rem;
}

.design-pattern-active .sectionTitle.center {
	align-items: center;
	text-align: center;
}

.design-pattern-active .sectionTitleJa,
.design-pattern-active .contentTitleJa,
.design-pattern-active .headline,
.design-pattern-active .titleL,
.design-pattern-active .titleM,
.design-pattern-active .titleS,
.design-pattern-active .serviceTypeTitle,
.design-pattern-active .priceGroupName,
.design-pattern-active .topAdvantageTitle,
.design-pattern-active .serviceListTitle,
.design-pattern-active .worksListTitle,
.design-pattern-active .staffListName,
.design-pattern-active .staffName,
.design-pattern-active .priceItemTitle,
.design-pattern-active .postTitle,
.design-pattern-active .filledDivTitle,
.design-pattern-active .bulletPointsTitle,
.design-pattern-active .singleNotesTitle,
.design-pattern-active .writerHeadline,
.design-pattern-active .footerBannerMsg {
	font-weight: 800;
	letter-spacing: .01em;
}

.design-pattern-active .sectionTitleJa {
	position: relative;
	padding-bottom: .85rem;
	font-size: 2rem;
	line-height: 1.28;
}

.design-pattern-active .sectionTitleJa::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.6rem;
	height: .1875rem;
	background: var(--main-readable-color);
	box-shadow: 2.9rem 0 0 rgba(var(--main-readable-color-rgb), .28);
}

.design-pattern-active .sectionTitle.center .sectionTitleJa::after {
	left: 50%;
	transform: translateX(-50%);
	box-shadow: none;
}

.design-pattern-active .sectionTitleEn,
.design-pattern-active .contentTitleEn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--main-readable-color);
	font-weight: 600;
	font-size: .72rem;
	letter-spacing: .24em;
}

.design-pattern-active .sectionTitleEn::before,
.design-pattern-active .contentTitleEn::before {
	content: "";
	width: 1.3rem;
	height: .125rem;
	background: var(--main-readable-color);
	transform: skewX(-24deg);
}

.design-pattern-active .sectionTitle.center .sectionTitleEn::before { display: none; }

/* ---------------------------------------------------------
   5. コンテンツタイトル（下層ページ見出し帯）
--------------------------------------------------------- */
.design-pattern-active .contentTitleDiv {
	position: relative;
	background:
		linear-gradient(180deg, rgba(var(--text-color-rgb), .03), transparent),
		var(--bg-sub-color);
	border-bottom: .0625rem solid var(--ac-line);
}

.design-pattern-active .contentTitleJa { font-size: 2.25rem; }

.design-pattern-active .contentTitleEn { color: var(--main-readable-color); }

/* ---------------------------------------------------------
   6. ボタン
   通常ボタン = main 系アウトライン / CTA = point（line）, main 反転（form）
   point は「次に押す場所」として最も強く見せる
--------------------------------------------------------- */
.design-pattern-active .btn,
.design-pattern-active .ctaBtn,
.design-pattern-active .inPageNav a {
	position: relative;
	overflow: hidden;
	border-radius: var(--ac-r);
	border-width: .09375rem;
	font-weight: 700;
	letter-spacing: .03em;
	transition: transform var(--duration), background-color var(--duration), border-color var(--duration), color var(--duration);
}

/* スパーク（控えめな斜めハイライト） */
.design-pattern-active .btn::after,
.design-pattern-active .ctaBtn::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: -45%;
	width: 35%;
	background: linear-gradient(100deg, transparent, rgba(var(--text-color-rgb), .14), transparent);
	transform: skewX(-20deg);
	transition: left .45s ease;
}

.design-pattern-active .btn > *,
.design-pattern-active .ctaBtn > * { position: relative; z-index: 1; }

.design-pattern-active .btn:hover,
.design-pattern-active .ctaBtn:hover,
.design-pattern-active .inPageNav a:hover { transform: translateY(-.125rem); }

.design-pattern-active .btn:hover::after,
.design-pattern-active .ctaBtn:hover::after { left: 120%; }

/* 通常ボタン（一覧へ等） */
.design-pattern-active .btn {
	border-color: var(--ac-line-strong);
	background: var(--ac-fill-soft);
	color: var(--text-color);
}

.design-pattern-active .btn:hover {
	border-color: var(--main-readable-color);
	background: rgba(var(--main-readable-color-rgb), .14);
}

.design-pattern-active .btn .ph { color: var(--main-readable-color); }

/* CTA : line = point（最重要）/ form = main 反転 */
.design-pattern-active .ctaBtn.line {
	border-color: var(--point-color);
	background: var(--point-color);
	color: var(--on-point-color);
}

.design-pattern-active .ctaBtn.form {
	border-color: var(--main-color);
	background: var(--main-color);
	color: var(--on-main-color);
}

/* ---------------------------------------------------------
   7. ヘッダー
   デスクトップ 1 行維持（最大: ロゴ+TEL+ナビ+CTA2+SNS7）
--------------------------------------------------------- */
.design-pattern-active .header {
	border-bottom: .0625rem solid var(--ac-line);
	background: rgba(var(--bg-color-rgb), .92);
	backdrop-filter: blur(.75rem);
}

.design-pattern-active .siteName {
	font-weight: 800;
	letter-spacing: .01em;
}

.design-pattern-active .headerGnav { gap: .85rem; }

.design-pattern-active .headerTel span {
	color: var(--main-readable-color);
	font-weight: 600;
}

.design-pattern-active .headerNav ul { gap: .85rem; }

.design-pattern-active .headerNav a {
	position: relative;
	font-weight: 700;
	letter-spacing: .01em;
}

.design-pattern-active .headerNav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.15rem;
	height: .125rem;
	background: var(--main-readable-color);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--duration);
}

.design-pattern-active .headerNav a:hover { color: var(--text-color); }

.design-pattern-active .headerNav a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* SNS は最大 7 件でも折り返さないよう少しコンパクトに */
.design-pattern-active .headerSns { gap: .4rem; }

.design-pattern-active .headerSns a {
	width: 1.85rem;
	height: 1.85rem;
	border-color: var(--ac-line-strong);
	border-radius: var(--ac-r);
	color: var(--main-readable-color);
}

.design-pattern-active .snsIcons a {
	border-color: var(--ac-line-strong);
	border-radius: var(--ac-r);
	color: var(--main-readable-color);
}

.design-pattern-active .snsIcons a:hover {
	border-color: var(--main-readable-color);
	background: rgba(var(--main-readable-color-rgb), .12);
	color: var(--text-color);
}

/* ---------------------------------------------------------
   8. ファーストビュー（Hero）
   キャッチ + CTA を強く。写真は適度なコントラスト強調
--------------------------------------------------------- */
.design-pattern-active .topMv {
	min-height: 41rem;
}

.design-pattern-active .topMvBgImage::after {
	background:
		linear-gradient(100deg, rgba(var(--bg-color-rgb), .94) 0%, rgba(var(--bg-color-rgb), .72) 48%, rgba(var(--bg-color-rgb), .36) 100%),
		linear-gradient(0deg, rgba(var(--bg-color-rgb), .65), transparent 48%);
}

.design-pattern-active .topMvBgImage img {
	filter: saturate(1.06) contrast(1.05);
}

.design-pattern-active .topMvContent {
	position: relative;
	width: min(100%, 47rem);
}

.design-pattern-active .topMvTagline {
	font-size: 3.6rem;
	font-weight: 900;
	letter-spacing: -.015em;
	line-height: 1.1;
	text-shadow: 0 .15rem .85rem rgba(var(--bg-color-rgb), .6);
}

.design-pattern-active .topMvTaglineEn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.1rem;
	padding: .38rem .8rem;
	border: .0625rem solid var(--ac-line-strong);
	border-radius: var(--ac-r);
	background: rgba(var(--text-color-rgb), .04);
	color: var(--main-readable-color);
	font-size: .74rem;
	letter-spacing: .18em;
}

.design-pattern-active .topMvTaglineTopic {
	max-width: 35rem;
	margin-top: 1.7rem;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.5;
}

.design-pattern-active .topMvTaglineText {
	max-width: 34rem;
	color: rgba(var(--text-color-rgb), .82);
}

.design-pattern-active .topMvTaglineBtn { max-width: 34rem; margin-top: 2.1rem; }
.design-pattern-active .topMvTaglineBtn .ctaBtns { justify-content: flex-start; }

/* ---------------------------------------------------------
   9. お知らせ / ブログ（newsList）
--------------------------------------------------------- */
.design-pattern-active .newsList li,
.design-pattern-active .newsList li:first-child {
	border-color: var(--ac-line);
}

.design-pattern-active .newsList time {
	color: var(--main-readable-color);
	font-weight: 600;
}

.design-pattern-active .newsList a:hover { color: var(--text-color); }
.design-pattern-active .newsList a .ph {
	color: var(--main-readable-color);
	transition: transform var(--duration);
}
.design-pattern-active .newsList a:hover .ph { transform: translateX(.28rem); }

/* ---------------------------------------------------------
   10. カード共通（advantage / service / works / staff / blog /
        price / flow / faq / detail boxes）
--------------------------------------------------------- */
.design-pattern-active .topAdvantageItem,
.design-pattern-active .serviceList > li,
.design-pattern-active .worksList > li,
.design-pattern-active .staffList > li,
.design-pattern-active .priceItem,
.design-pattern-active .worksBeforeAfterItem,
.design-pattern-active .flow dl,
.design-pattern-active .faq dl,
.design-pattern-active .singleNotes,
.design-pattern-active .filledDiv,
.design-pattern-active .bulletPointsDiv,
.design-pattern-active .writer,
.design-pattern-active .sitemap a,
.design-pattern-active .inPageNav {
	border-color: var(--ac-line);
	border-radius: var(--ac-r);
	background: linear-gradient(180deg, var(--ac-card-top), transparent 60%), var(--surface-color);
	transition: transform var(--duration), border-color var(--duration), box-shadow var(--duration);
}

.design-pattern-active .serviceList > li:hover,
.design-pattern-active .worksList > li:hover,
.design-pattern-active .staffList > li:hover,
.design-pattern-active .sitemap a:hover {
	transform: translateY(-.28rem);
	border-color: var(--ac-line-strong);
	box-shadow: var(--ac-shadow);
}

.design-pattern-active .mask,
.design-pattern-active .image > img,
.design-pattern-active .contents img,
.design-pattern-active .iframe {
	border-radius: var(--ac-r);
}

.design-pattern-active .mask { background: rgba(var(--text-color-rgb), .05); }
.design-pattern-active .mask img {
	filter: saturate(1.05) contrast(1.03);
	transition: transform .5s ease;
}
.design-pattern-active .serviceList > li:hover .mask img,
.design-pattern-active .staffList > li:hover .mask img { transform: scale(1.04); }

/* ---------------------------------------------------------
   11. 強み（Advantage）
   大きなコンデンス番号で成果感・優先度を演出（main-readable）
--------------------------------------------------------- */
.design-pattern-active .topAdvantageInfo { gap: .8rem; }

.design-pattern-active .topAdvantageHead {
	position: relative;
	padding-bottom: .6rem;
	border-bottom: .0625rem solid var(--ac-line);
}

.design-pattern-active .topAdvantageNum {
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--main-readable-color);
	font-weight: 600;
	font-size: 2.6rem;
	line-height: 1;
	letter-spacing: .02em;
}

.design-pattern-active .topAdvantageTitle { font-size: 1.35rem; line-height: 1.45; }

.design-pattern-active .topAdvantageText,
.design-pattern-active .serviceListText,
.design-pattern-active .priceItemDetail,
.design-pattern-active .flow dd,
.design-pattern-active .faq dd {
	color: rgba(var(--text-color-rgb), .8);
}

/* ---------------------------------------------------------
   12. サービス（service cards）
--------------------------------------------------------- */
.design-pattern-active .serviceTypeHeader {
	padding: 1.1rem 1.35rem;
	border-left: .25rem solid var(--main-readable-color);
	border-radius: 0 var(--ac-r) var(--ac-r) 0;
	background: var(--ac-fill-soft);
}

.design-pattern-active .serviceListSlug {
	width: fit-content;
	color: var(--main-readable-color);
	border-radius: var(--ac-r);
	letter-spacing: .2em;
}

.design-pattern-active .serviceListLink {
	color: var(--main-readable-color);
	font-weight: 700;
}

.design-pattern-active .serviceListLink .ph { transition: transform var(--duration); }
.design-pattern-active .serviceList > li:hover .serviceListLink .ph { transform: translateX(.3rem); }

/* 詳細ページ内の横並びサービス */
.design-pattern-active .serviceListInWorks .serviceListImage { min-height: 15rem; }

/* ---------------------------------------------------------
   13. 実績（works : テキストカード + 図形アクセント）
--------------------------------------------------------- */
.design-pattern-active .worksList > li > a {
	position: relative;
	padding: 1.5rem;
}

.design-pattern-active .worksList > li > a::before {
	content: "";
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	width: .8rem;
	height: .8rem;
	border-top: .125rem solid var(--main-readable-color);
	border-right: .125rem solid var(--main-readable-color);
	opacity: .5;
	transition: opacity var(--duration), transform var(--duration);
}

.design-pattern-active .worksList > li:hover > a::before {
	opacity: 1;
	transform: translate(.15rem, -.15rem);
}

.design-pattern-active .worksListTitle { line-height: 1.5; }

/* ラベル / カテゴリ（main 系で統一） */
.design-pattern-active .postCategoryName,
.design-pattern-active .worksType span {
	border-color: var(--ac-line-strong);
	border-radius: var(--ac-r);
	background: var(--ac-fill-soft);
	color: var(--main-readable-color);
	font-weight: 700;
	letter-spacing: .02em;
}

/* ---------------------------------------------------------
   14. ご利用の流れ（flow）
--------------------------------------------------------- */
.design-pattern-active .flow dl { padding: 1.6rem; }

.design-pattern-active .flow dt::before {
	border: .0625rem solid var(--ac-line-strong);
	border-radius: var(--ac-r);
	background: var(--main-color);
	color: var(--on-main-color);
	font-weight: 600;
}

.design-pattern-active .flow dl::after {
	border-top-color: var(--main-readable-color);
	border-right-color: var(--main-readable-color);
}

/* ---------------------------------------------------------
   15. FAQ
--------------------------------------------------------- */
.design-pattern-active .faq dl { overflow: hidden; }
.design-pattern-active .faq dt { padding: 1.3rem 1.5rem; }

.design-pattern-active .faq dt span {
	border: .0625rem solid var(--ac-line-strong);
	border-radius: var(--ac-r);
	background: var(--main-color);
	color: var(--on-main-color);
	font-weight: 600;
}

.design-pattern-active .faq dt .ph { color: var(--main-readable-color); }
.design-pattern-active .faq dd { background: rgba(var(--bg-color-rgb), .4); }

/* ---------------------------------------------------------
   16. 料金（price）
   価格は数字を強く。point は使わず main-readable で成果感
--------------------------------------------------------- */
.design-pattern-active .priceGroupName {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.design-pattern-active .priceGroupName::before {
	content: "";
	flex: 0 0 auto;
	width: .85rem;
	height: .85rem;
	background: var(--main-readable-color);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.design-pattern-active .priceItemContent { padding: 1.7rem; }
.design-pattern-active .priceItemTitle { font-size: 1.2rem; }

.design-pattern-active .priceItemPrice {
	color: var(--text-color);
	font-family: var(--font);
	font-weight: 700;
	font-size: 2.3rem;
	line-height: 1.1;
	letter-spacing: .01em;
}

.design-pattern-active .priceItemMeta {
	border-color: var(--ac-line);
	background: rgba(var(--bg-color-rgb), .4);
}

.design-pattern-active .priceItemMetaLabel {
	color: var(--main-readable-color);
	opacity: 1;
	letter-spacing: .08em;
}

.design-pattern-active .priceNoteWrap {
	border-left: .25rem solid var(--main-readable-color);
	background: var(--ac-fill-soft);
}

/* ---------------------------------------------------------
   17. ビフォーアフター / 実績テーブル
--------------------------------------------------------- */
.design-pattern-active .worksBeforeAfterLabel {
	background: var(--ac-fill-soft);
	color: var(--main-readable-color);
	font-weight: 600;
	letter-spacing: .08em;
}

.design-pattern-active .worksBeforeAfterItem.after .worksBeforeAfterLabel {
	background: var(--main-color);
	color: var(--on-main-color);
}

.design-pattern-active .worksResultBlock .worksResultOther {
	border-left: .1875rem solid var(--main-readable-color);
	background: var(--ac-fill-soft);
}

.design-pattern-active .worksTable th,
.design-pattern-active th {
	background: var(--ac-fill-soft);
	color: var(--text-color);
}

/* ---------------------------------------------------------
   18. スタッフ
--------------------------------------------------------- */
.design-pattern-active .staffListTitle,
.design-pattern-active .staffTitle { opacity: .72; }

.design-pattern-active .companyGreetingCeoName { font-weight: 800; }

/* ---------------------------------------------------------
   19. 詳細ページの装飾ボックス
--------------------------------------------------------- */
.design-pattern-active .filledDiv {
	background: linear-gradient(180deg, var(--ac-card-top), transparent 60%), var(--bg-sub-color);
}

.design-pattern-active .bulletPointsDiv {
	background: transparent;
}

.design-pattern-active .bulletPoints li {
	border-color: var(--ac-line);
	border-radius: var(--ac-r);
	background: var(--ac-fill-soft);
}

.design-pattern-active .bulletPoints li::before {
	border: .0625rem solid var(--ac-line-strong);
	border-radius: var(--ac-r);
	background: var(--main-color);
	color: var(--on-main-color);
	font-weight: 600;
}

.design-pattern-active .writerName { font-weight: 800; }

/* ---------------------------------------------------------
   20. リッチテキスト（contents 内）見出し / 引用 / リスト / 表
--------------------------------------------------------- */
.design-pattern-active .contents h2 {
	position: relative;
	padding-left: .9rem;
	font-weight: 800;
}

.design-pattern-active .contents h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: .25rem;
	background: var(--main-readable-color);
}

.design-pattern-active .contents h3,
.design-pattern-active .contents h4 { font-weight: 800; }

.design-pattern-active .contents a { color: var(--main-readable-color); }

.design-pattern-active .contents blockquote {
	border-left-color: var(--main-readable-color);
	background: var(--ac-fill-soft);
}

.design-pattern-active .contents .lwptoc .lwptoc_i {
	border-color: var(--ac-line);
	background: var(--bg-sub-color);
}

.design-pattern-active .contents .lwptoc_item > a::before { color: var(--main-readable-color); }

/* ---------------------------------------------------------
   21. パンくず / ページ内ナビ / ページャ / サイトマップ
--------------------------------------------------------- */
.design-pattern-active .breadcrumbs {
	border-bottom-color: var(--ac-line);
}

.design-pattern-active .breadcrumbs a { color: var(--main-readable-color); }

.design-pattern-active .inPageNav a {
	border-color: var(--ac-line-strong);
	border-radius: var(--ac-r);
	background: var(--ac-fill-soft);
	color: var(--text-color);
	font-weight: 700;
}

.design-pattern-active .inPageNav a:hover {
	border-color: var(--main-readable-color);
	background: rgba(var(--main-readable-color-rgb), .14);
}

.design-pattern-active .pager .page-numbers {
	border-color: var(--ac-line-strong);
	border-radius: var(--ac-r);
	font-weight: 600;
}

.design-pattern-active .pager a.page-numbers:hover {
	border-color: var(--main-readable-color);
	background: var(--ac-fill-soft);
}

.design-pattern-active .pager .current {
	border-color: var(--main-color);
	background: var(--main-color);
	color: var(--on-main-color);
}

.design-pattern-active .sitemap a .ph { color: var(--main-readable-color); }

/* ---------------------------------------------------------
   22. 共通 CTA セクション（point を主役に）
--------------------------------------------------------- */
.design-pattern-active .ctaSection::before {
	background:
		linear-gradient(100deg, rgba(var(--bg-color-rgb), .92), rgba(var(--bg-color-rgb), .64)),
		radial-gradient(80% 80% at 74% 16%, rgba(var(--point-color-rgb), .2), transparent 60%);
}

.design-pattern-active .ctaSectionContent {
	padding: 3rem;
	border: .0625rem solid rgba(var(--point-color-rgb), .3);
	border-radius: var(--ac-r);
	background: rgba(var(--bg-color-rgb), .42);
	box-shadow: var(--ac-shadow);
	backdrop-filter: blur(.35rem);
}

.design-pattern-active .ctaSection .sectionTitle {
	align-items: center;
	text-align: center;
}

.design-pattern-active .ctaSection .sectionTitleJa::after {
	left: 50%;
	transform: translateX(-50%);
	box-shadow: none;
}

.design-pattern-active .ctaSection .sectionTitleEn {
	color: var(--point-readable-color);
}

.design-pattern-active .ctaSection .sectionTitleEn::before {
	background: var(--point-readable-color);
}

.design-pattern-active .ctaSectionTel {
	color: var(--point-readable-color);
	font-weight: 600;
	font-size: 2.2rem;
	letter-spacing: .01em;
}

/* ---------------------------------------------------------
   23. 固定フッターバナー（point の行動導線）
--------------------------------------------------------- */
.design-pattern-active .footerBanner {
	border-color: var(--point-color);
	border-radius: var(--ac-r);
	background:
		linear-gradient(135deg, rgba(var(--point-color-rgb), .1), transparent 52%),
		var(--bg-sub-color);
	box-shadow: var(--ac-shadow);
}

.design-pattern-active .footerBannerLead {
	color: var(--point-readable-color);
	font-weight: 700;
	letter-spacing: .04em;
}

/* ---------------------------------------------------------
   24. フッター
--------------------------------------------------------- */
.design-pattern-active .footer {
	border-top-color: var(--ac-line);
	background: linear-gradient(180deg, transparent, rgba(var(--text-color-rgb), .015)), var(--bg-color);
}

.design-pattern-active .footerTopNav a:hover,
.design-pattern-active .footerBottomNav a:hover { color: var(--main-readable-color); }

.design-pattern-active .footerCopyrightKop a { color: var(--main-readable-color); }

/* ---------------------------------------------------------
   25. レスポンシブ（960px / 632px のみ）
--------------------------------------------------------- */
@media screen and (max-width: 960px) {
	.design-pattern-active .topMv { min-height: 35rem; }
	.design-pattern-active .topMvTagline { font-size: 3rem; }
	.design-pattern-active .topAdvantageItem { grid-template-columns: 18rem minmax(0, 1fr); }
	.design-pattern-active .topAdvantageHead { padding-bottom: .4rem; }
	.design-pattern-active .topAdvantageNum { font-size: 2.2rem; }
	.design-pattern-active .ctaSectionContent { padding: 2.2rem; }
}

@media screen and (max-width: 632px) {
	.design-pattern-active .topMv { min-height: 30rem; padding-block: 4rem; }
	.design-pattern-active .topMvTagline { font-size: 2.3rem; }
	.design-pattern-active .topMvTaglineTopic { font-size: 1.2rem; }
	.design-pattern-active .sectionTitle { margin-bottom: 2.1rem; }
	.design-pattern-active .sectionTitleJa { font-size: 1.6rem; }
	.design-pattern-active .topAdvantageItem { grid-template-columns: 1fr; }
	.design-pattern-active .topAdvantageNum { font-size: 2.4rem; }
	.design-pattern-active .priceItemPrice { font-size: 2rem; }
	.design-pattern-active .ctaSectionContent { padding: 1.6rem; }
	.design-pattern-active .ctaSectionTel { font-size: 1.7rem; }
	.design-pattern-active .contentTitleJa {
		font-size: 1.5rem;
	}
}

/* ---------------------------------------------------------
   26. モーション配慮
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.design-pattern-active *,
	.design-pattern-active *::before,
	.design-pattern-active *::after {
		transition-duration: .01ms;
		animation-duration: .01ms;
	}
}