@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
/*------------------------------------------------------------
	WACA トップページ リニューアル (2026)
	Figma: WACA_top_renewal / ver2_freeze (node 2297-2)
	※ 本ファイルは style.css / common.css の後に読み込むこと
------------------------------------------------------------*/
:root {
	--waca-text: #414141;
	--waca-yellow: #FFD710;
	--waca-orange: #FF840A;
	--waca-green: #408E37;
	--waca-gray: #F4F4F4;
	--waca-line: #DBDBDB;
	--waca-footer: #6A6A6A;
	--waca-inner: 1280px;
	--waca-gutter: 80px;
	/* コンテンツ左右端から、さらに内側へ入れ込む量。
	   キャッチコピーの左と重要なお知らせの右で共通（Figma：1440pxで121px＝80+41） */
	--waca-mv-inset: 41px;
}

/*------------------------------------------------------------
	ヘッダー上部バー（PC）
	897〜906px でキャッチと右上リンクが2行になり、ヘッダーが107px→125pxに
	伸びていた。折り返さずに文字だけ縮めて高さを一定に保つ。
------------------------------------------------------------*/
@media all and (min-width: 897px) {
	#gHeader .topBox h1,
	#gHeader .hList li a {
		white-space: nowrap;
	}
	#gHeader .topBox h1 {
		font-size: min(1.2rem, 1.35vw);
	}
}

/*------------------------------------------------------------
	ヘッダーのサブメニュー（ドロップダウン）
	既定ではヘッダー下端より10px上から開くため、白いヘッダーの
	途中から浮いて出ているように見える。ヘッダー下端にそろえる。
	・li の下に透明な余白を足し、ナビ項目とサブメニューの間を切れ目なくつなぐ
	  （マウスが通過しても閉じない）
	・足した分は margin-bottom で打ち消すのでナビ文字の位置は変わらない
------------------------------------------------------------*/
#gNavi .listBox > ul > li {
	padding-bottom: 30px;
	margin-bottom: -30px;
}
#gNavi .listBox .dropMenu {
	/* li の高さは項目名の文字で1.5pxほど差が出る。そのままだと
	   「WACAについて／お知らせ／会員向け」だけヘッダーの下境界線との間に
	   白い隙間が見えるため、2px 食い込ませて境界線を重ねる。
	   ※ jQuery の slideToggle() は height だけでなく margin/padding も
	     0 からアニメーションさせるため、margin-top で寄せると
	     展開の開始時に隙間が出て、完了までに2px動いてしまう。
	     アニメーション対象外の top 側で位置を決めること。 */
	top: calc(100% - 2px);
	margin-top: 0;
}
/* グローバルナビは .listBox が2つに分かれており、2つ目には検索アイコンの li
   （24px）が入るため、そちらの ul だけ 1.5px 背が高くなる。
   #gNavi は flex なので両方の .listBox は同じ高さ（24px）に伸びるが、
   1つ目の ul（22.5px）はその上端に置かれるため、項目の下端が 1.5px 上にずれ、
   サブメニューの出現位置も 1.5px ずれていた。
   .listBox 自体を flex にして ul を下端に揃え、全項目の下端を一致させる。 */
#gNavi .listBox {
	display: flex;
	align-items: flex-end;
}

/* 項目名を折り返さない。897〜906px と 977〜991px で2行になり、
   ヘッダーが高くなってナビと main-slide の間に隙間ができていた
   （iPadのデスクトップ表示≒980px が該当）。文字サイズは
   min(1.2vw,1.4rem) で幅に応じて縮むので、折り返さなくても収まる */
#gNavi .listBox > ul > li > a {
	white-space: nowrap;
}

/*------------------------------------------------------------
	ページ外側（キャンバス）の色
	iOS Safari のステータスバー／下部ツールバーと、
	ゴムバンドスクロールではみ出した領域はここの色になる。
	白のままだとフッターとの境目が目立つためフッター色に揃える。
	body 自体は style.css の #FFF のままなので本文の見た目は変わらない。
------------------------------------------------------------*/
html {
	background: var(--waca-footer);
}

/*------------------------------------------------------------
	フォント：欧文 Inter 優先 → 和文 Noto Sans JP
------------------------------------------------------------*/
body,
table, input, textarea, select, option, button {
	font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/*------------------------------------------------------------
	共通パーツ
------------------------------------------------------------*/
.p-inner {
	width: min(var(--waca-inner), 100% - var(--waca-gutter) * 2);
	margin-inline: auto;
}
.p-front {
	position: relative;
	color: var(--waca-text);
	/* clip は hidden と違いスクロールコンテナを作らないので、
	   yellow_back の position:sticky を壊さずに横はみ出しだけ抑えられる */
	overflow-x: clip;
}
/* 黄色背景（yellow_back）：固定ヘッダーの下端で停止して追従。以降のセクションの背景に隠れる。
   ★ top の値は「スクロール中の固定ヘッダーの高さ」に合わせること。
     .hInner は scrollTop > 上部バー高さ で position:fixed になり、PCは81px／SPは46px。
     以前は非スクロール時の全高（26+81=107）を基準に110pxとしていたため、
     スクロールするとヘッダー下端(81px)との間に29pxの白い隙間が出ていた。
   縦方向の指定はすべて「幅に対する％」。margin/padding の％は包含ブロックの“幅”基準なので、
   ウィンドウ幅が変わっても main-slide との位置関係と斜めの角度が保たれる。
     margin-top    37.500% = スライダー高さ（1440→540）
     aspect-ratio  1440/489 → 高さ 33.958%（1440→489）
     margin-bottom -71.458% = 上記2つの打ち消し */
.p-front__deco {
	position: -webkit-sticky;
	position: sticky;
	top: 81px;
	/* 高さも「幅に対する％」で出す（aspect-ratio ではなく padding-bottom）。
	   margin-top ＋ padding-bottom ＋ margin-bottom を同じ基準の％にすることで、
	   3つの合計が必ず 0 になり、レイアウトに一切影響しない。
	   aspect-ratio との併用では Safari で数px の誤差が出て、
	   ヘッダーと main-slide の間に隙間ができていた。 */
	margin-top: 37.5%;
	padding-bottom: 33.9583333%;
	margin-bottom: -71.4583333%;
	height: 0;
	background: var(--waca-yellow);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 29.04%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 29.04%, 0 100%);
	pointer-events: none;
	z-index: 0;
}
/* wihte_brahe：グレー帯の手前で黄色背景を白へ溶かすグラデーション
   Figma：y=1364〜2365（高さ1001px／グレー帯上端の306px手前から始まる） */
.p-front__brahe {
	position: relative;
	margin-top: -306px;
	margin-bottom: -695px;
	height: 1001px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 18.75%);
	pointer-events: none;
	z-index: 1;
}
.p-front img {
	max-width: 100%;
	height: auto;
}

/* 見出し */
.p-secTtl {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
}
.p-secTtl--sm {
	font-size: 38px;
}

/* 黄色ボタン */
.p-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 72px;
	padding: 6px 32px;
	border-radius: 70px;
	background: var(--waca-yellow);
	color: var(--waca-text);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	filter: drop-shadow(2px 2px 2.5px rgba(0, 0, 0, .15));
	transition: .3s;
}
.p-btn img {
	flex: none;
}
.p-btn--sm {
	min-height: 52px;
	font-size: 15px;
	border-radius: 50px;
}
.p-btn--gray {
	background: #CDCDCD;
	filter: none;
}
a.p-btn:hover {
	color: var(--waca-text);
	transform: translateY(-2px);
	filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, .2));
}

/* ガラスカード */
.p-glass {
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 8px;
	background: rgba(248, 248, 248, .8);
	box-shadow: 0 0 8px rgba(0, 0, 0, .2);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-sizing: border-box;
}

/*------------------------------------------------------------
	ヘッダー：申込みボタンの体裁のみ変更
------------------------------------------------------------*/
/* ロゴは 110px を下限に。flex アイテムの既定は無制限に縮むため、
   幅が足りなくなるとロゴが 2px まで潰れていた。
   足りない分はナビ側を右端から順に隠して吸収する（下の段階的非表示）。 */
@media all and (min-width: 897px) {
	#gHeader .hInner .logo {
		flex: 0 1 auto;
		min-width: 110px;
		margin-right: 20px;
	}
}

/* 黄色ボタンは現公開サイトに合わせて2つ（講座・試験一覧／WACA会員になる） */
#gHeader .hInner .rBox {
	gap: 6px;
}
#gHeader .hInner .rBox .btn a {
	width: 150px;
	height: 50px;
	padding: 7px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 70px;
	background: var(--waca-yellow);
	color: var(--waca-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	overflow: visible;
	box-sizing: border-box;
	transition: .3s;
}
/*------------------------------------------------------------
	現行 style.css（2026-09 時点）との調整
	トップページ差し替えにあたり style.css を現行の最新版に同期した。
	以下2点が本ページの実装と衝突するので打ち消す。

	① .btn a に margin-left: 6px が入った（現行が2ボタン化した際の対応）。
	   本ページは .rBox の gap で間隔を管理しているため二重になる。
	② 現行は 1220px 以下で #gNavi .listBox li:not(:last-child) を
	   一括で display:none にしている。セレクタがドロップダウン内の li まで
	   拾うため、そのままだとサブメニューの中身まで消える。
	   本ページは右端から段階的に隠す方式（下のブロック）なので無効化する。
	   ※ 段階的非表示のルールは詳細度が上（1,3,2 対 1,2,1）なので
	     この打ち消しより優先される。
------------------------------------------------------------*/
#gHeader .hInner .rBox .btn a {
	margin-left: 0;
}
@media all and (max-width: 1220px) {
	#gNavi .listBox li:not(:last-child) {
		display: list-item;
	}
}

/*------------------------------------------------------------
	897〜1240px：ナビが入りきらなくなる領域
	まず項目間隔とボタン幅を詰め、それでも足りない分は
	ナビ項目を右端から順に非表示にする（ロゴは110px以下にしない）。
	非表示にした項目はハンバーガーのドロワーから辿れる。
------------------------------------------------------------*/
@media all and (min-width: 897px) and (max-width: 1240px) {
	#gNavi .listBox > ul > li {
		margin-right: 12px;
	}
	#gHeader .hInner .rBox .btn a {
		width: 130px;
		padding: 7px 8px;
		font-size: 12px;
	}
}
/* 「会員向け」を非表示 */
@media all and (min-width: 897px) and (max-width: 1130px) {
	#gNavi .listBox + .listBox > ul > li:nth-child(3) {
		display: none;
	}
}
/* さらに「お知らせ」を非表示 */
@media all and (min-width: 897px) and (max-width: 1040px) {
	#gNavi .listBox + .listBox > ul > li:nth-child(2) {
		display: none;
	}
}
/* さらに「WACAについて」を非表示 */
@media all and (min-width: 897px) and (max-width: 960px) {
	#gNavi .listBox + .listBox > ul > li:nth-child(1) {
		display: none;
	}
}

#gHeader .hInner .rBox .btn a:before,
#gHeader .hInner .rBox .btn a:after {
	content: none;
	display: none;
}
@media all and (min-width: 897px) {
	#gHeader .hInner .rBox .btn a:hover {
		color: var(--waca-text);
		background: #F3C900;
		opacity: 1;
	}
}
@media all and (max-width: 975px) {
	#gHeader .hInner .rBox .btn a {
		width: 118px;
		font-size: 11px;
	}
}

/*------------------------------------------------------------
	メインビジュアル
------------------------------------------------------------*/
.p-mv {
	position: relative;
	z-index: 1;
}
/* スライダーの直後に置き、キャッチコピーと重要なお知らせの基準にする。
   高さ271px＝スライド下端から講座セクションまでの距離（Figma準拠） */
.p-mv__lower {
	position: relative;
	/* SPでは重要なお知らせが通常フローで入るため、その上マージンが
	   このラッパーの外へ相殺されないよう flow-root にする */
	display: flow-root;
	height: 271px;
}
.p-mv__slider {
	position: relative;
	line-height: 0;
}
.p-mv__slider .slick-list,
.p-mv__slider .slick-track {
	line-height: 0;
	/* Safari 対策：slick 標準の .slick-track:before（display:table の clearfix）が
	   フォント由来の高さを持ち、フロートしているスライドを約5px 押し下げていた。
	   font-size:0 で行の高さの元を断つ。 */
	font-size: 0;
}
/* clearfix 疑似要素そのものを消し、代わりに flow-root でフロートを内包する。
   これでトラックの高さ＝スライドの高さになり、上に余分な行ができない。 */
.p-mv__slider .slick-track {
	display: flow-root;
}
.p-mv__slider .slick-track:before,
.p-mv__slider .slick-track:after {
	display: none;
	content: none;
}
.p-mv__slide {
	position: relative;
	/* Figma 1440×540。ウィンドウ幅が変わっても縦横比を維持する */
	aspect-ratio: 8 / 3;
}
.p-mv__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}
.p-mv__slide:after {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .1);
	content: "";
	/* スライドの上に重なる暗幕。これがないと $mv_slides の 'url' に付けた
	   リンクをクリックできない（疑似要素がクリックを受け止めてしまうため） */
	pointer-events: none;
}
/* ドット */
.p-mv__slider .slick-dots {
	position: absolute;
	right: 30px;
	bottom: 22px;
	display: flex !important;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	z-index: 2;
}
.p-mv__slider .slick-dots li {
	width: 32px;
	height: 4px;
	line-height: 0;
}
.p-mv__slider .slick-dots li button {
	display: block;
	width: 32px;
	height: 4px;
	padding: 0;
	border: none;
	background: rgba(255, 255, 255, .6);
	text-indent: -9999px;
	cursor: pointer;
	transition: .3s;
}
.p-mv__slider .slick-dots li.slick-active button {
	background: #fff;
}

/* キャッチコピー：スライド下端に42px重ねる（Figma準拠） */
.p-mv__copy {
	position: absolute;
	/* .p-inner の左端からさらに --waca-mv-inset だけ内側へ。
	   重要なお知らせの右と同じ式なので左右の入れ込み量が常に一致する */
	left: calc(max(var(--waca-gutter), calc(50% - 640px)) + var(--waca-mv-inset));
	top: -42px;
	z-index: 3;
}
.p-mv__copy h2,
.p-mv__copy p {
	/* インライン要素だとフォントのコンテンツ領域分だけ緑が余るため、
	   span を inline-block にして line-height ＝ 緑帯の高さに一致させる */
	line-height: 0;
}
.p-mv__copy h2 span,
.p-mv__copy p span {
	display: inline-block;
	vertical-align: top;
	background: var(--waca-green);
	color: #fff;
}
.p-mv__copy h2 span {
	/* palt で約物のアキを詰め、letter-spacing で本来の字幅に戻す */
	padding: 0 4px 0 10px;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: .09em;
	font-feature-settings: "palt" 1;
}
.p-mv__copy p {
	margin-top: 12px;
}
.p-mv__copy p span {
	padding: 0 17px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.64;
}

/*------------------------------------------------------------
	重要なお知らせ
------------------------------------------------------------*/
.p-important {
	position: absolute;
	/* キャッチコピーの左と同じ式：.p-inner の右端から --waca-mv-inset だけ内側へ */
	left: auto;
	right: calc(max(var(--waca-gutter), calc(50% - 640px)) + var(--waca-mv-inset));
	top: 46px;
	width: min(424px, calc(100% - 80px));
	z-index: 3;
}
.p-important__head {
	display: flex;
	align-items: flex-end;
	gap: 26px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--waca-text);
}
.p-important__ttl {
	flex: 1;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
}
.p-important__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
.p-important__list {
	padding-top: 17px;
}
.p-important__list li + li {
	margin-top: 16px;
}
.p-important__list a {
	display: flex;
	align-items: center;
	gap: 31px;
}
.p-important__list a:hover {
	opacity: .7;
}
.p-important__body {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	min-width: 0;
	font-size: 14px;
	line-height: 1.5;
}
.p-important__date {
	flex: none;
	width: 86px;
}
.p-important__text {
	display: block;
	flex: 1;
	min-width: 0;
}
.p-important__list a > img {
	flex: none;
}

/*------------------------------------------------------------
	講座（ウェブ解析士 / 4講座）
------------------------------------------------------------*/
.p-course {
	position: relative;
	padding: 0 0 118px;
	z-index: 2;
}
.p-course__lead {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 幅が足りなくなったら折り返してカードからはみ出さないようにする */
	flex-wrap: wrap;
	row-gap: 28px;
	column-gap: clamp(24px, 4vw, 59px);
	min-height: 192px;
	padding: 46px 40px 39px 31px;
	box-sizing: border-box;
}
.p-course__leadTtl {
	display: flex;
	align-items: center;
	gap: 32px;
}
.p-course__leadIcon {
	flex: none;
	width: 120px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.p-course__leadTxt {
	width: 315px;
}
.p-course__leadTxt p {
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: .03em;
}
.p-course__leadTxt .name {
	margin-top: 6px;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .03em;
}
.p-course__leadBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 17px;
	flex-wrap: wrap;
}

.p-course__head {
	margin-top: 61px;
	text-align: center;
	font-weight: 700;
}
.p-course__head .sub {
	font-size: 21px;
	line-height: 1.4;
}
.p-course__head .main {
	margin-top: 9px;
	font-size: 30px;
	line-height: 1.4;
}
.p-course__cards {
	margin-top: 34px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.p-course__cards > li > a {
	display: flex;
	/* 4枚のボディテキスト上端をそろえるため上寄せ */
	align-items: flex-start;
	justify-content: center;
	height: 100%;
	min-height: 326px;
	padding: 20px;
	box-sizing: border-box;
	transition: .3s;
}
.p-course__cards > li > a:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.p-course__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 21px;
	width: 100%;
}
.p-course__cardIcon {
	flex: none;
	height: 107px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.p-course__cardBody {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}
.p-course__cardName {
	/* 4枚のボディテキスト上端を揃えるため2行分の高さで固定 */
	min-height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .03em;
	text-align: center;
}
.p-course__cardTexts {
	display: block;
	width: 100%;
}
.p-course__cardTxt {
	display: block;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: .03em;
}
.p-course__cardMore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--waca-orange);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
.p-course__btn {
	margin-top: 64px;
	text-align: center;
}

/*------------------------------------------------------------
	グレー帯（活動報告 + セミナー・イベント）
------------------------------------------------------------*/
.p-grayBand {
	position: relative;
	/* Figma：グレー上端(左)1670px → 見出し1793px = 123px */
	padding: 123px 0 200px;
	background: #fff;
	overflow: hidden;
	z-index: 3;
}
.p-grayBand:before {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--waca-gray);
	-webkit-clip-path: polygon(0 0, 100% 170px, 100% 100%, 0 calc(100% - 170px));
	clip-path: polygon(0 0, 100% 170px, 100% 100%, 0 calc(100% - 170px));
	content: "";
	z-index: -1;
}

/*------------------------------------------------------------
	WACA活動報告
------------------------------------------------------------*/
.p-activity__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.p-activity__nav {
	display: flex;
	align-items: center;
	gap: 36px;
}
.p-activity__num {
	font-family: 'Antonio', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.p-activity__ctrls {
	display: flex;
	align-items: center;
	gap: 15px;
}
.p-activity__ctrl {
	position: relative;
	width: 50px;
	height: 50px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	transition: .3s;
}
.p-activity__ctrl img {
	position: absolute;
	left: -8px;
	top: -8px;
	width: 66px;
	max-width: none;
	height: 66px;
}
.p-activity__ctrl:hover {
	opacity: .7;
}
.p-activity__slider {
	margin-top: 59px;
	width: calc(100vw + 284px);
	margin-left: calc(50% - 50vw - 142px);
}
.p-activity__slider .slick-slide {
	margin: 0 16px;
}
.p-activity__slider .slick-list {
	overflow: hidden;
}
.p-activity__item {
	display: block;
}
.p-activity__item:hover {
	opacity: .75;
}
.p-activity__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 407 / 216;
	overflow: hidden;
	line-height: 0;
}
.p-activity__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-activity__body {
	display: block;
	margin-top: 24px;
}
.p-activity__cat {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.p-activity__cat span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 4px 10px;
	border: 1px solid var(--waca-orange);
	border-radius: 50px;
	background: #fff;
	color: var(--waca-orange);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .03em;
	box-sizing: border-box;
}
/* カテゴリーを塗りつぶし表示にしたい場合は下記を有効化
.p-activity__cat span:first-child {
	background: var(--waca-orange);
	color: #fff;
}
*/
.p-activity__ttl {
	display: block;
	margin-top: 9px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .03em;
}
.p-activity__date {
	display: block;
	margin-top: 13px;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: .03em;
}

/*------------------------------------------------------------
	セミナー・イベント情報
------------------------------------------------------------*/
.p-seminar {
	margin-top: 110px;
}
.p-seminar__list {
	margin-top: 60px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.p-seminar__list li {
	line-height: 0;
}
.p-seminar__list a {
	display: block;
	overflow: hidden;
}
.p-seminar__list img {
	width: 100%;
	aspect-ratio: 128 / 50;
	object-fit: cover;
	transition: .5s;
}
.p-seminar__list a:hover img {
	transform: scale(1.05);
}
.p-seminar__btn {
	margin-top: 40px;
	text-align: center;
}
.p-seminar__tags {
	margin-top: 70px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.p-seminar__tags a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 6px 21px;
	border-radius: 50px;
	background: #fff;
	color: var(--waca-orange);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	box-sizing: border-box;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, .2));
	transition: .3s;
}
.p-seminar__tags a:hover {
	color: var(--waca-orange);
	transform: translateY(-2px);
}

/*------------------------------------------------------------
	About WACA
------------------------------------------------------------*/
.p-about {
	position: relative;
	padding: 130px 0 84px;
	background: #fff;
	z-index: 3;
}
.p-about__ttl {
	font-family: 'Antonio', sans-serif;
	font-size: 85px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--waca-yellow);
}
.p-about__intro {
	margin-top: 58px;
	display: flex;
	align-items: flex-start;
	gap: 106px;
}
.p-about__introTxt {
	width: 546px;
	flex: none;
}
.p-about__introTxt h3 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.35;
}
.p-about__introTxt p {
	margin-top: 26px;
	font-size: 17px;
	line-height: 1.7;
	letter-spacing: .03em;
}
.p-about__introTxt .p-btn {
	margin-top: 44px;
}
.p-about__stats {
	flex: 1;
	min-width: 0;
}
.p-about__stats ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
}
.p-about__stats li {
	/* 右余白はラベルの折り返し余地。「講座・セミナー年間実施数」が
	   1行に収まるよう Figma の41pxから詰めている（左位置は変えない） */
	padding: 41px 20px 27px 26px;
	background: var(--waca-gray);
	box-sizing: border-box;
}
.p-about__statsTtl {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}
.p-about__statsNum {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	margin-top: 4px;
}
.p-about__statsNum b {
	font-family: 'Antonio', sans-serif;
	font-size: 66px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--waca-green);
}
.p-about__statsNum span {
	padding-bottom: 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.p-about__statsNum .pre {
	padding-bottom: 12px;
	margin-right: -2px;
}
.p-about__note {
	margin-top: 9px;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: .03em;
	text-align: right;
}

/* WACAで、できること */
.p-guide {
	margin-top: 105px;
}
.p-guide__grid {
	margin-top: 55px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 56px;
	row-gap: 56px;
}
.p-guide__head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.p-guide__head img {
	flex: none;
}
.p-guide__head h4 {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.2;
}
.p-guide__card {
	margin-top: 26px;
	padding: 17px 24px;
	border: 1px solid var(--waca-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(120, 89, 41, .05);
	box-sizing: border-box;
}
.p-guide__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 2px;
}
.p-guide__row + .p-guide__row {
	border-top: 1px solid #EFEFEF;
}
a.p-guide__row:hover {
	color: var(--waca-text);
	opacity: .7;
}
.p-guide__row > img {
	flex: none;
}
.p-guide__rowBody {
	flex: 1;
	min-width: 0;
}
.p-guide__rowBody b {
	display: block;
	color: var(--waca-orange);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}
.p-guide__rowBody span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.65;
}
.p-guide__more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px 0 14px;
	border-top: 1px solid #EFEFEF;
	color: var(--waca-orange);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
}
.p-guide__more:hover {
	color: var(--waca-orange);
	opacity: .7;
}

/* WACAの取り組み */
.p-effort {
	margin-top: 100px;
}
.p-effort__list {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.p-effort__list > li + li {
	border-left: 1px solid var(--waca-line);
	padding-left: 22px;
}
.p-effort__item {
	display: block;
	padding-right: 22px;
}
.p-effort__item:hover {
	color: var(--waca-text);
	opacity: .7;
}
.p-effort__icon {
	height: 37px;
	display: flex;
	align-items: center;
}
.p-effort__body {
	margin-top: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.p-effort__body > span,
.p-effort__body > div {
	flex: 1;
	min-width: 0;
}
.p-effort__body b {
	display: block;
	color: var(--waca-orange);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}
.p-effort__body span {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: .03em;
}
.p-effort__body > img {
	flex: none;
}

/*------------------------------------------------------------
	お知らせ
------------------------------------------------------------*/
.p-news {
	position: relative;
	padding: 75px 0 63px;
	background: #F3F3F3;
	z-index: 3;
}
.p-news__inner {
	display: flex;
	align-items: flex-start;
	gap: 111px;
}
.p-news__side {
	flex: none;
	width: 166px;
}
.p-news__ttl {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
}
.p-news__cat {
	margin-top: 62px;
}
.p-news__cat li + li {
	margin-top: 14px;
}
.p-news__cat a {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	line-height: 1.5;
}
.p-news__cat a:hover {
	opacity: .7;
}
.p-news__cat img {
	flex: none;
}
.p-news__side .p-btn {
	margin-top: 52px;
	width: 100%;
}
.p-news__list {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 20px;
}
.p-news__item {
	display: block;
}
.p-news__item:hover {
	opacity: .75;
}
.p-news__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 320 / 168;
	overflow: hidden;
	line-height: 0;
}
.p-news__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-news__date {
	display: block;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}
.p-news__name {
	display: block;
	margin-top: 6px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
}

/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter.p-footer {
	padding: 54px 0 64px;
	background: var(--waca-footer);
	color: #fff;
	text-align: left;
}
#gFooter.p-footer address,
#gFooter.p-footer address p {
	margin: 0;
	font-size: 12px;
	font-style: normal;
	text-align: left;
}
.p-footer a,
.p-footer a:link,
.p-footer a:visited {
	color: #fff;
}
.p-footer a:hover {
	color: #fff;
	opacity: .7;
}
.p-footer__logo {
	display: inline-block;
	line-height: 0;
}
.p-footer__nav {
	margin-top: 102px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 80px;
}
.p-footer__col + .p-footer__col {
	margin-top: 0;
}
.p-footer__group + .p-footer__group {
	margin-top: 48px;
}
.p-footer__ttl {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}
.p-footer__sub {
	margin-top: 30px;
	font-size: 15px;
	line-height: 1.5;
}
.p-footer__links {
	margin-top: 12px;
}
.p-footer__links li {
	margin-top: 5px;
	padding-left: 18px;
	position: relative;
	font-size: 0.8em;
	line-height: 1.6;
}
.p-footer__links li:before {
	position: absolute;
	left: 0;
	top: .75em;
	width: 9px;
	height: 1px;
	background: rgba(255, 255, 255, .8);
	content: "";
}
.p-footer__sns {
	margin-top: 68px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}
.p-footer__sns a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 22px;
	line-height: 0;
}
.p-footer__btm {
	margin-top: 99px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}
.p-footer__address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
}
#gFooter.p-footer .p-footer__address .name {
	margin-bottom: 8px;
	/* 住所（12px）に対してジャンプ率をつける */
	font-size: 15px;
	font-weight: 700;
}
.p-footer__policy {
	margin-top: 20px;
	/* 住所と同じサイズ（PC・SP共通） */
	font-size: 12px;
	line-height: 1.8;
}
/* 他のリンク項目と同じ「−」を先頭に付ける（PC・SP共通）*/
.p-footer__policy li {
	position: relative;
	padding-left: 18px;
}
.p-footer__policy li:before {
	position: absolute;
	left: 0;
	top: .8em;
	width: 9px;
	height: 1px;
	background: rgba(255, 255, 255, .8);
	content: "";
}
.p-footer__copy {
	margin-top: 37px;
	font-size: 10px;
	line-height: 1.6;
	clear: both;
}
.p-footer__marks {
	flex: none;
	display: flex;
	align-items: center;
	gap: 26px;
}
.p-footer__marks img {
	width: auto;
	height: 106px;
}

/*------------------------------------------------------------
	レスポンシブ：1281〜1418px
	ウェブ解析士リード枠を1行のまま維持するための詰め。
	1440pxのFigma実寸から、アイコン枠の余白・要素間の間隔・
	ボタンの左右padding だけを詰めている（文字サイズは変更なし）。
	1281px で内容幅 1063px／確保幅 1081px。
------------------------------------------------------------*/
@media all and (min-width: 1281px) and (max-width: 1418px) {
	.p-course__lead {
		column-gap: 24px;
		padding: 46px 20px 39px;
	}
	.p-course__leadTtl {
		gap: 20px;
	}
	/* アイコン画像は 68×60 のまま。枠の余白だけを詰める */
	.p-course__leadIcon {
		width: 80px;
	}
	.p-course__leadBtn {
		gap: 12px;
	}
	.p-course__leadBtn .p-btn {
		padding: 6px 24px;
	}
}

/*------------------------------------------------------------
	レスポンシブ：〜1280px
------------------------------------------------------------*/
@media all and (max-width: 1280px) {
	:root {
		--waca-gutter: 40px;
	}
	:root {
		--waca-mv-inset: 24px;
	}
	.p-mv__copy h2 span {
		font-size: 48px;
	}
	.p-mv__copy p span {
		font-size: 19px;
	}
	.p-important {
		width: min(424px, 42vw);
	}
	.p-course__lead {
		flex-direction: column;
		gap: 32px;
		padding: 36px 32px;
	}
	.p-about__intro {
		gap: 48px;
	}
	.p-about__introTxt {
		width: 46%;
	}
	.p-about__introTxt h3 {
		font-size: 32px;
	}
	.p-about__stats li {
		padding: 28px 24px;
	}
	.p-about__statsNum b {
		font-size: 52px;
	}
	.p-news__inner {
		gap: 56px;
	}
	.p-footer__nav {
		gap: 40px;
	}
	.p-footer__marks img {
		height: 84px;
	}
}

/*------------------------------------------------------------
	レスポンシブ：〜1080px
------------------------------------------------------------*/
@media all and (max-width: 1080px) {
	/* 実績カードが狭くなりラベルが3行に折り返すため一段落とす */
	.p-about__statsTtl {
		font-size: 16px;
	}
	/* この幅からキャッチコピーと重要なお知らせが接近するため一段落とす */
	.p-mv__copy h2 span {
		font-size: 40px;
	}
	.p-mv__copy p span {
		font-size: 17px;
	}
	.p-course__cards {
		grid-template-columns: repeat(2, 1fr);
	}
	.p-guide__grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.p-effort__list {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 32px;
	}
	.p-effort__list > li:nth-child(odd) {
		border-left: none;
		padding-left: 0;
	}
	.p-news__inner {
		display: block;
	}
	.p-news__side {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 24px 32px;
	}
	.p-news__cat {
		margin-top: 0;
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: 8px 20px;
	}
	.p-news__cat li + li {
		margin-top: 0;
	}
	.p-news__side .p-btn {
		margin-top: 0;
		width: auto;
		min-width: 166px;
	}
	.p-news__list {
		margin-top: 40px;
	}
	.p-footer__nav {
		grid-template-columns: repeat(2, 1fr);
		gap: 48px 40px;
	}
}

/*------------------------------------------------------------
	レスポンシブ：〜896px（SP）
------------------------------------------------------------*/
@media all and (max-width: 896px) {
	:root {
		--waca-gutter: 20px;
	}
	/* ヘッダー（Figma sp_top 準拠：バー22px＋ヘッダー46px）*/
	/* 上部バーも22px固定。狭い端末（〜372px）でキャッチが2行になると
	   バーが33pxに伸び、ヘッダー帯ごと下がってハンバーガーだけ取り残される。
	   折り返さずに文字だけ縮めて、常に1行22pxを保つ。
	   10px時のテキスト実幅331.8px（左右padding 40px）＝ 372px 未満で折り返す */
	#gHeader .topBox {
		height: 22px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	#gHeader .topBox h1,
	#gHeader .topBox p {
		font-family: 'Inter', 'Noto Sans JP', sans-serif;
		font-size: min(10px, calc(2.9vw - 1.2px));
		line-height: 1.1;
		text-align: center;
		white-space: nowrap;
	}
	/* ヘッダー帯は 46px 固定。パディングで高さを作ると、ロゴ画像の
	   レンダリング高さ（端末差あり）で帯の高さが変わり、28pxのボタンとの
	   中心がズレるため。高さを決め打ちして中身は flex で上下中央に置く。 */
	#gHeader .hInner {
		display: flex;
		height: 46px;
		min-height: 46px;
		max-height: 46px;
		padding: 0 62px 0 19px;
		align-items: center;
		box-sizing: border-box;
		background: rgba(255, 255, 255, .95);
		border-bottom: none;
	}
	/* 親の align-items が何らかの理由で効かない環境でも上下中央を保つため、
	   子側にも align-self: center を明示する（iOS Safari 対策） */
	#gHeader .hInner > *,
	#gHeader .hInner .logo,
	#gHeader .hInner .rBox {
		align-self: center;
		margin-top: 0;
		margin-bottom: 0;
	}
	/* ロゴ画像を block に。inline のままだと行内の下に余白が付き、
	   帯の中心が下へずれる端末がある */
	#gHeader .hInner .logo img {
		display: block;
		width: 87px;
		height: auto;
	}
	/* rBox 内も中央で固定 */
	#gHeader .hInner .rBox {
		align-items: center;
	}
	#gHeader .hInner .rBox .btn,
	#gHeader .hInner .rBox .btn a,
	.l-header__customBtn.sp {
		align-self: center;
	}
	#gHeader .hideBox {
		height: 46px;
	}
	/* ロゴはSPでも縮めない（2つのボタンに押されて18pxまで潰れていた） */
	#gHeader .hInner .logo {
		margin-top: 0;
		width: 87px;
		flex: none;
	}
	#gHeader .hInner {
		padding-right: 58px;
	}
	#gHeader .hInner .rBox {
		gap: 8px;
	}
	/* ボタンは文字幅ぴったりに（最大91px）。固定幅だと狭い端末で溢れる */
	#gHeader .hInner .rBox .btn {
		flex: 0 1 auto;
		min-width: 0;
	}
	#gHeader .hInner .rBox .btn a {
		width: auto;
		max-width: 91px;
		height: 28px;
		padding: 4px 6px;
		font-size: 9px;
		line-height: 1.1;
		white-space: nowrap;
	}
	/* 検索アイコン：search-modal.css の margin-right:14px / margin-top:4px を打ち消し、
	   19px四方の箱に収めて申込みボタンと上下中央を揃える */
	.l-header__customBtn.sp {
		display: flex;
		align-items: center;
	}
	.l-header__customBtn.sp .c-plainBtn {
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 19px;
		height: 19px;
		line-height: 1;
	}
	.l-header__customBtn.sp .c-iconBtn__icon,
	.l-header__customBtn.sp .icon-search {
		margin-top: 0;
		display: block;
		font-size: 19px;
		line-height: 1;
	}
	/* ハンバーガー：23×15。ヘッダー帯（46px）の上下中央に置く。
	   .menu は #gHeader の外にある絶対配置要素なので、ページ上端からの
	   実測値で指定する：上部バー22px ＋ (46 − 15) ÷ 2 = 37.5px。
	   上部バーの22pxは padding 5.5×2 ＋ 行高11px（10px×1.1）で確定値。 */
	.menu {
		width: 23px;
		height: 15px;
		right: 19px;
		top: 37.5px;
		bottom: auto;
		margin: 0;
	}
	.menu.fix {
		top: 15.5px;
		bottom: auto;
	}
	.menu span {
		width: 23px;
		height: 2px;
	}
	.menu span:nth-of-type(2) {
		top: 6.5px;
	}
	.menu span:nth-of-type(3) {
		top: 13px;
	}
	.menu.active span:nth-of-type(1) {
		-webkit-transform: translateY(6.5px) translateX(0) rotate(45deg);
		transform: translateY(6.5px) translateX(0) rotate(45deg);
	}
	.menu.active span:nth-of-type(3) {
		-webkit-transform: translateY(-6.5px) translateX(0) rotate(-45deg);
		transform: translateY(-6.5px) translateX(0) rotate(-45deg);
	}
	.p-secTtl {
		font-size: 28px;
	}
	.p-secTtl--sm {
		font-size: 26px;
	}
	.p-btn {
		min-height: 56px;
		padding: 6px 16px;
		font-size: 16px;
	}
	.p-btn--sm {
		min-height: 46px;
		font-size: 14px;
	}

	/* MV（Figma sp_top 準拠：スライド172px 固定）*/
	.p-mv {
		min-height: 0;
	}
	.p-mv__lower {
		height: auto;
	}
	/* 停止位置だけSPヘッダー高さに。位置・高さ・形は基準（幅に対する％）のまま */
	.p-front__deco {
		top: 46px;
	}
	.p-front__brahe {
		margin-top: -120px;
		margin-bottom: -280px;
		height: 400px;
	}
	/* スライドの縦横比は基準（8:3）のまま。固定高さにすると
	   880px前後で極端に横長に潰れるため */
	.p-mv__slide img {
		height: 100%;
	}
	.p-mv__slider .slick-dots {
		right: 10px;
		bottom: 15px;
		gap: 5px;
	}
	.p-mv__slider .slick-dots li,
	.p-mv__slider .slick-dots li button {
		width: 19px;
		height: 2px;
		border-radius: 1px;
	}
	.p-mv__copy {
		position: absolute;
		left: 12px;
		/* スライド下端に8px重ねる（Figma sp_top 準拠） */
		top: -8px;
		padding: 0;
	}
	/* キャッチコピーは幅に追従（480px=32px → 896px=48px）。
	   固定32pxだとタブレット幅で画面に対して小さく見えるため。
	   〜480px は下のブロックで 32px / 12px に固定される。 */
	.p-mv__copy h2 span {
		padding: 0 4px;
		font-size: calc(3.846vw + 13.54px);
		line-height: 1.22;
	}
	.p-mv__copy p {
		margin-top: 9px;
	}
	.p-mv__copy p span {
		padding: 0 4px;
		font-size: calc(1.442vw + 5.08px);
		line-height: 1.5;
	}

	/* 重要なお知らせ（Figma sp_top 準拠）
	   コピーが幅に追従して背が高くなるので、開始位置も同じ式で追従させる
	   （480px=177px → 896px=246px。コピー実高 480px:126px → 896px:189px） */
	.p-important {
		position: static;
		width: auto;
		margin: calc(16.587vw + 97.38px) 20px 0;
	}
	.p-important__head {
		gap: 26px;
	}
	.p-important__ttl {
		font-size: 18px;
	}
	.p-important__more {
		font-size: 11px;
	}
	.p-important__list a {
		align-items: center;
		gap: 31px;
	}
	.p-important__body {
		flex-direction: column;
		gap: 3px;
		font-size: 13px;
	}
	.p-important__date {
		width: auto;
		min-height: 22px;
	}

	/* 講座（Figma sp_top 準拠）*/
	.p-course {
		padding: 55px 0 0;
	}
	.p-course__lead {
		min-height: 0;
		padding: 19px 20px 32px;
		gap: 33px;
		flex-direction: column;
	}
	.p-course__leadTtl {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
	.p-course__leadTxt {
		width: 100%;
		text-align: center;
	}
	.p-course__leadTxt p {
		font-size: 14px;
		line-height: 1.4;
	}
	.p-course__leadTxt .name {
		margin-top: 10px;
		font-size: 32px;
	}
	.p-course__leadBtn {
		width: 100%;
		flex-direction: column;
		gap: 17px;
	}
	.p-course__leadBtn .p-btn {
		width: 100%;
		box-sizing: border-box;
	}
	.p-course__head {
		margin-top: 64px;
	}
	.p-course__head .sub {
		font-size: 19px;
		line-height: 1.2;
	}
	.p-course__head .main {
		margin-top: 9px;
		font-size: 28px;
		line-height: 1.2;
	}
	.p-course__cards {
		margin-top: 34px;
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.p-course__cards > li > a {
		min-height: 0;
		padding: 12px 20px 29px;
	}
	.p-course__card {
		gap: 7px;
	}
	.p-course__cardName {
		min-height: 0;
		font-size: 24px;
	}
	.p-course__cardTxt {
		font-size: 14px;
	}
	.p-course__cardBody {
		gap: 14px;
	}
	.p-course__btn {
		margin-top: 44px;
		padding-bottom: 60px;
	}
	.p-course__btn .p-btn {
		width: 100%;
		box-sizing: border-box;
	}

	/* グレー帯 */
	.p-grayBand {
		padding: 70px 0 80px;
	}
	.p-grayBand:before {
		-webkit-clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 calc(100% - 60px));
		clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 calc(100% - 60px));
	}

	/* 活動報告 */
	.p-activity__head {
		flex-wrap: wrap;
		gap: 14px;
	}
	/* ページャー一式をさらに80%に（円の実寸 32px → 26px）
	   SVGは66px四方の中に50pxの円が描かれているので img = 円の直径 × 66/50 */
	.p-activity__nav {
		gap: 10px;
	}
	.p-activity__num {
		font-size: 13px;
	}
	.p-activity__ctrls {
		gap: 10px;
	}
	.p-activity__ctrl {
		width: 26px;
		height: 26px;
	}
	.p-activity__ctrl img {
		left: -4.2px;
		top: -4.2px;
		width: 34.3px;
		height: 34.3px;
	}
	/* 見た目は26pxのまま、タップ領域だけ36×44pxに拡張 */
	.p-activity__ctrl:before {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 36px;
		height: 44px;
		transform: translate(-50%, -50%);
		content: "";
	}
	.p-activity__slider {
		margin-top: 28px;
		/* 1枚表示。スライド左右マージン7px分を相殺してコンテナ幅にそろえる */
		margin-left: calc(var(--waca-gutter) - 7px);
		width: calc(100% - var(--waca-gutter) * 2 + 14px);
	}
	.p-activity__slider .slick-slide {
		margin: 0 7px;
	}
	.p-activity__body {
		margin-top: 14px;
	}
	.p-activity__ttl {
		font-size: 16px;
	}
	.p-activity__date {
		margin-top: 8px;
		font-size: 13px;
	}

	/* セミナー */
	.p-seminar {
		margin-top: 64px;
	}
	.p-seminar__list {
		margin-top: 32px;
		grid-template-columns: repeat(2, 1fr);
	}
	/* 2カラムでは9件だと最終行が1件だけ残るため、9件目を落として2×4＝8件で揃える */
	.p-seminar__list li:nth-child(9) {
		display: none;
	}
	.p-seminar__btn {
		margin-top: 28px;
	}
	.p-seminar__tags {
		margin-top: 40px;
		gap: 10px;
	}
	.p-seminar__tags a {
		min-height: 34px;
		padding: 5px 16px;
		font-size: 14px;
	}

	/* About */
	.p-about {
		padding: 56px 0 48px;
	}
	.p-about__ttl {
		font-size: 52px;
	}
	.p-about__intro {
		margin-top: 28px;
		display: block;
	}
	.p-about__introTxt {
		width: auto;
	}
	.p-about__introTxt h3 {
		font-size: 26px;
	}
	.p-about__introTxt p {
		margin-top: 16px;
		font-size: 15px;
	}
	.p-about__introTxt .p-btn {
		margin-top: 24px;
	}
	.p-about__stats {
		margin-top: 32px;
	}
	.p-about__stats li {
		padding: 20px 16px;
	}
	.p-about__statsTtl {
		font-size: 16px;
	}
	.p-about__statsNum b {
		font-size: 42px;
	}
	.p-about__statsNum span {
		padding-bottom: 6px;
		font-size: 15px;
	}
	.p-guide {
		margin-top: 56px;
	}
	.p-guide__grid {
		margin-top: 28px;
		gap: 36px;
	}
	.p-guide__head h4 {
		font-size: 20px;
	}
	.p-guide__card {
		margin-top: 16px;
		padding: 8px 16px;
	}
	.p-guide__row {
		gap: 12px;
		padding: 14px 0;
	}
	.p-guide__rowBody b {
		font-size: 17px;
	}
	.p-guide__rowBody span {
		font-size: 13px;
	}
	.p-guide__more {
		padding: 18px 0 10px;
		font-size: 15px;
	}
	.p-effort {
		margin-top: 56px;
	}
	.p-effort__list {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.p-effort__list > li {
		padding: 20px 0;
	}
	.p-effort__list > li + li {
		border-left: none;
		border-top: 1px solid var(--waca-line);
		padding-left: 0;
	}
	.p-effort__item {
		padding-right: 0;
	}
	.p-effort__body {
		margin-top: 12px;
	}
	.p-effort__body b {
		font-size: 18px;
	}
	.p-effort__body span {
		margin-top: 6px;
		font-size: 14px;
	}

	/* お知らせ */
	.p-news {
		padding: 48px 0 56px;
	}
	.p-news__ttl {
		font-size: 26px;
	}
	.p-news__side {
		display: block;
	}
	.p-news__cat {
		margin-top: 20px;
		gap: 8px 16px;
	}
	.p-news__side .p-btn {
		margin-top: 24px;
		width: auto;
		min-width: 166px;
	}
	.p-news__list {
		margin-top: 32px;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 14px;
	}
	.p-news__date {
		margin-top: 10px;
		font-size: 13px;
	}
	.p-news__name {
		font-size: 15px;
	}

	/* フッター */
	#gFooter.p-footer {
		padding: 40px 0 48px;
	}
	#gFooter.p-footer .p-footer__address .name {
		font-size: 14px;
	}

	.p-footer__logo img {
		width: 110px;
		height: auto;
	}
	.p-footer__nav {
		margin-top: 40px;
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.p-footer__group + .p-footer__group {
		margin-top: 28px;
	}
	.p-footer__ttl {
		font-size: 16px;
	}
	.p-footer__sns {
		margin-top: 36px;
		gap: 22px;
	}
	.p-footer__btm {
		margin-top: 44px;
		display: block;
	}
	.p-footer__marks {
		margin-top: 32px;
		gap: 16px;
	}
	.p-footer__marks img {
		height: 64px;
	}
	.p-footer__copy {
		margin-top: 24px;
	}
}

/*------------------------------------------------------------
	レスポンシブ：481〜896px（比率のつなぎ）
	スマホ（〜480px）は 15:7、897px以上は 8:3。そのまま切り替えると
	480/481px の境目で高さが44pxも跳ねるため、この範囲だけ
	480px＝15:7、896px＝8:3 を通る直線で高さを補間する。
	  高さ = 0.26923 × 幅 + 94.769px
	黄色帯も同じ式で追従させ、スライド下端にぴたり接する状態を保つ。
	vw基準で統一しているので、スライドと黄色帯の相対関係は常に一致する。
------------------------------------------------------------*/
@media all and (min-width: 481px) and (max-width: 896px) {
	.p-mv__slide {
		aspect-ratio: auto;
		height: calc(26.923077vw + 94.769px);
	}
	.p-front__deco {
		height: 0;
		padding-bottom: 33.9583vw;
		margin-top: calc(26.923077vw + 94.769px);
		margin-bottom: calc(-60.881377vw - 94.769px);
	}
}

/*------------------------------------------------------------
	レスポンシブ：〜480px
------------------------------------------------------------*/
@media all and (max-width: 480px) {
	/* スマホのスライドは 15:7（幅390pxで182px）。2026-08-26 決定 */
	.p-mv__slide {
		aspect-ratio: 15 / 7;
	}
	/* 359px以下は「講座・試験一覧」を隠して「WACA会員になる」だけにする
	   （ロゴを潰さないため。隠した導線はドロワーから辿れる）
	   ※ .rBox の子には nav / 検索ボタンの div も混ざるので :first-of-type は使えない。
	     2つ目の .btn が最後の子なので :not(:last-child) で1つ目だけを対象にする。 */
	@media all and (max-width: 359px) {
		#gHeader .hInner .rBox .btn:not(:last-child) {
			display: none;
		}
	}
	/* 実機スマホ幅では Figma sp_top どおり 32px / 12px に固定
	   （481〜896px は幅追従。480pxで両者の値が一致するので段差なし） */
	.p-mv__copy h2 span {
		font-size: 32px;
	}
	.p-mv__copy p span {
		font-size: 12px;
	}
	.p-important {
		margin-top: 177px;
	}
	/* 黄色帯は Figma sp_top の形（390×135／頂点22.2%）。
	     margin-top    46.667% = スライダー高さ（15:7）
	     aspect-ratio  390/135 → 高さ 34.615%
	     margin-bottom -81.282% = 上記2つの打ち消し */
	.p-front__deco {
		margin-top: 46.6666667%;
		padding-bottom: 34.6153846%;
		margin-bottom: -81.2820513%;
		height: 0;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 22.2%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 22.2%, 0 100%);
	}
	.p-course__cards {
		grid-template-columns: 1fr;
	}
	.p-seminar__list {
		grid-template-columns: 1fr;
	}
	/* 1カラムでは端数が出ないので9件目を戻す */
	.p-seminar__list li:nth-child(9) {
		display: block;
	}
	.p-news__list {
		grid-template-columns: 1fr;
	}
	.p-about__stats ul {
		grid-template-columns: 1fr;
	}
}