@charset "UTF-8";
/*
 * 悩める学生に愛の喝！（slug: ainokatsu / ID:155）専用スタイル
 * Figma: PC node 45:14（1440基準・カード1128px=1:1）/ SP node 98:2621（828基準・実機375）。
 * rem = 10px（html font-size 62.5%）。命名: FLOCSS（p-ainokatsu*）。SP は @media (max-width:768px)。
 * 背景の薄緑（#c8e6cd）はタイトル〜目次〜Q&Aスライダーを覆う。
 *
 * 角丸カード設計メモ:
 *   Figma の WBG（カード地）／目次バッジ／Q番号バッジは
 *   いずれも「白＋細い#808080罫」の角丸/もこもこ形状で、爆発型ではない。
 *   - WBG       … 角丸長方形（PC radius50 / SP radius80 / border #808080）→ CSSで再現
 *   - 目次・Q番号 … もこもこ吹き出し（index_balloon.svg）→ アスペクト比維持で背景配置
 */

/* ============================================================
 * 0. tokens / base
 *    ページ全体で意味を持つ色・書体のみトークン化する。
 *    Figma座標由来の単発寸法は、表示差分を避けるため各コンポーネント内に残す。
 * ============================================================ */
.p-ainokatsu {
	--ainokatsu-color-bg: #c8e6cd;
	--ainokatsu-color-text: #000000;
	--ainokatsu-color-surface: #ffffff;
	--ainokatsu-color-border: #808080;
	--ainokatsu-color-border-sp: #818181;
	--ainokatsu-color-accent: #e65a00;
	--ainokatsu-color-katsu: #e70000;
	--ainokatsu-color-muted: #828282;
	--ainokatsu-color-credit: #555555;
	--ainokatsu-font-base: "Zen Kaku Gothic New", sans-serif;
	--ainokatsu-font-display: area-extended, sans-serif;
	--ainokatsu-font-serif: "Shippori Mincho B1", "Zen Kaku Gothic New", serif;

	background-color: var(--ainokatsu-color-bg);
	overflow: hidden;
	padding-bottom: 22rem;
	position: relative;
}

body.page-id-155 .l-section {
	margin-top: 0;
}

/* ============================================================
 * 1. layout / hero
 *    装飾タイトル（もこもこ白地に「悩めるOCT生に」＋「愛の喝！」）
 *    Figma: タイトル枠 1420.34×628.695（比 2.259）。lead 442×181 / katsu 460×425(rotate -3.78°)
 * ============================================================ */
.p-ainokatsuMv__inner {
	/* タイトル背景(154rem)を画面中央に置くため幅制約・左右paddingを解除 */
	max-width: none;
	padding: 0;
}

.p-ainokatsuMv__title {
	align-items: center;
	/* 背景もこもこは比率維持（contain）。枠自体を 2.259:1 に固定して非等比伸びを排除 */
	aspect-ratio: 1420.34 / 628.695;
	background: url(images/title_burst.svg) center center / contain no-repeat;
	display: flex;
	gap: 4rem;
	justify-content: center;
	/* margin:0 auto で左右中央。親が全幅になったため 154rem を中央配置できる */
	margin: 0 auto;
	width: 154rem;
	/* 狭幅では画面幅にフィットさせ横スクロールを防止（SPもこれで全幅化） */
	max-width: 100%;
	padding: 0;
}

.p-ainokatsuMv__lead {
	display: block;
	flex: 0 0 auto;
	/* lead SVG 442×181（比 2.442）。height auto で比率保持 */
	width: 46rem;
}

.p-ainokatsuMv__lead img {
	/* 比率保険：内在比のフォールバック歪み（300×150=2.0）を防ぐ */
	aspect-ratio: 442.012 / 181.001;
	display: block;
	height: auto;
	object-fit: contain;
	width: 100%;
}

.p-ainokatsuMv__katsu {
	display: block;
	flex: 0 0 auto;
	transform: rotate(-3.78deg);
	/* katsu PNG 448×414。Figma外接 約460×425 */
	width: 48rem;
}

.p-ainokatsuMv__katsu img {
	animation: ainokatsuTitleKatsuBoom 0.95s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.15s both;
	display: block;
	height: auto;
	transform-origin: 50% 58%;
	will-change: transform, filter;
	width: 100%;
}

@keyframes ainokatsuTitleKatsuBoom {
	0% {
		filter: drop-shadow(0 0 0 rgba(231, 0, 0, 0));
		transform: scale(0.58) rotate(-4deg);
	}
	36% {
		filter: drop-shadow(0 1.2rem 0 rgba(231, 0, 0, 0.16));
		transform: scale(1.18) rotate(2deg);
	}
	54% {
		filter: drop-shadow(0 0.45rem 0 rgba(231, 0, 0, 0.1));
		transform: scale(0.96) rotate(-1deg);
	}
	72% {
		filter: drop-shadow(0 0.7rem 0 rgba(231, 0, 0, 0.12));
		transform: scale(1.05) rotate(0deg);
	}
	100% {
		filter: drop-shadow(0 0 0 rgba(231, 0, 0, 0));
		transform: scale(1) rotate(0deg);
	}
}

/* ============================================================
 * 2. 導入リード文（Figma 47:125: 18px / lh40px / ls1px / 中央 / #000）
 * ============================================================ */
.l-ainokatsuLead {
	padding-top: 2rem;
}

.p-ainokatsuLead__text {
	color: var(--ainokatsu-color-text);
	font-family: var(--ainokatsu-font-base);
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: 0.1rem;
	line-height: 4rem;
	text-align: center;
}

/* ============================================================
 * 3. 目次（10項目・もこもこ吹き出しカード）
 *    Figma 48:142: 各カード 476.295×150.966（比 3.155）。
 *    設問 24px / 番号 24px #e65a00。互い違い配置。
 * ============================================================ */
.l-ainokatsuIndex {
	padding-top: 6rem;
}

.p-ainokatsuIndex__inner {
	max-width: 124rem;
}

.p-ainokatsuIndex__list {
	display: grid;
	/* Figma: 行内の左右ギャップ ≒ 11rem / 行間 ≒ 5.7rem */
	gap: 5.7rem 11rem;
	/* Figma カード実寸 476.3px に固定（1fr の引き伸ばしで吹き出しが大きくなるのを是正） */
	grid-template-columns: repeat(2, 47.63rem);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Figma: 行ごとに左右へテレコ配置（奇数行=左／偶数行=右へインデント・段差約11.8rem）
 * 1行2枚なので 4n+1,4n+2 が奇数行（1,2／5,6／9,10）、4n+3,4n+4 が偶数行（3,4／7,8）。
 * 左右対称に ±5.9rem ずらして全体を中央保持しつつ段差を作る。 */
.p-ainokatsuIndex__item:nth-child(4n+1),
.p-ainokatsuIndex__item:nth-child(4n+2) {
	transform: translateX(-5.9rem);
}

.p-ainokatsuIndex__item:nth-child(4n+3),
.p-ainokatsuIndex__item:nth-child(4n+4) {
	transform: translateX(5.9rem);
}

.p-ainokatsuIndex__link {
	align-items: center;
	/* もこもこ背景は比率維持（100% 100% で縦潰れしていたのを是正） */
	aspect-ratio: 476.295 / 150.966;
	background: url(images/index_balloon.svg) center center / 100% 100% no-repeat;
	color: var(--ainokatsu-color-text);
	display: flex;
	/* テキストを吹き出し中央に。番号は左上へ絶対配置（下記） */
	justify-content: center;
	position: relative;
	padding: 0;
	text-decoration: none;
	transition: filter 0.3s ease;
	/* ふわふわ浮遊（個体差は下の nth-child で付与） */
	animation: ainokatsuFloat 3.2s ease-in-out infinite;
	will-change: transform;
}

.p-ainokatsuIndex__link:hover {
	filter: drop-shadow(0 0.6rem 1.2rem rgba(0, 0, 0, 0.12));
}

/* もこもこ吹き出しのふわふわ浮遊 */
@keyframes ainokatsuFloat {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-0.9rem);
	}
	100% {
		transform: translateY(0);
	}
}

/* 10個の duration / delay をバラして非同期に揺らす（ふわふわ感） */
.p-ainokatsuIndex__item:nth-child(1) .p-ainokatsuIndex__link { animation-duration: 3.0s; animation-delay: -0.2s; }
.p-ainokatsuIndex__item:nth-child(2) .p-ainokatsuIndex__link { animation-duration: 3.7s; animation-delay: -1.4s; }
.p-ainokatsuIndex__item:nth-child(3) .p-ainokatsuIndex__link { animation-duration: 2.8s; animation-delay: -0.8s; }
.p-ainokatsuIndex__item:nth-child(4) .p-ainokatsuIndex__link { animation-duration: 3.4s; animation-delay: -2.1s; }
.p-ainokatsuIndex__item:nth-child(5) .p-ainokatsuIndex__link { animation-duration: 3.1s; animation-delay: -1.0s; }
.p-ainokatsuIndex__item:nth-child(6) .p-ainokatsuIndex__link { animation-duration: 3.9s; animation-delay: -0.4s; }
.p-ainokatsuIndex__item:nth-child(7) .p-ainokatsuIndex__link { animation-duration: 2.9s; animation-delay: -1.8s; }
.p-ainokatsuIndex__item:nth-child(8) .p-ainokatsuIndex__link { animation-duration: 3.5s; animation-delay: -0.6s; }
.p-ainokatsuIndex__item:nth-child(9) .p-ainokatsuIndex__link { animation-duration: 3.2s; animation-delay: -2.4s; }
.p-ainokatsuIndex__item:nth-child(10) .p-ainokatsuIndex__link { animation-duration: 3.6s; animation-delay: -1.2s; }

.p-ainokatsuIndex__num {
	/* Figma: カード左上（相対 left59 / top27） */
	position: absolute;
	top: 2.7rem;
	left: 5.9rem;
	color: var(--ainokatsu-color-accent);
	font-family: var(--ainokatsu-font-display);
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	line-height: 1;
}

.p-ainokatsuIndex__text {
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	line-height: 1.5;
}

.p-ainokatsuIndex__credit {
	color: var(--ainokatsu-color-credit);
	font-size: 1.6rem;
	letter-spacing: 0.06em;
	margin-top: 4rem;
	text-align: center;
}

/* ============================================================
 * 4. Q&A スライダー（10枚・js-dot-slider）
 *    Figma: WBG 1128×1181（角丸 radius50 / border #808080）。
 *    Q番号バッジ 650.785×206.268（比 3.155・もこもこ）はカード上辺にまたがる。
 * ============================================================ */
.l-ainokatsuQa {
	padding-top: 7rem;
}

.p-ainokatsuQa__inner {
	max-width: 122rem;
	padding-bottom: 5.3rem;
	position: relative;
}

.p-ainokatsuQa__slider {
	margin: 0 auto;
	max-width: 112.8rem;
	position: relative;
}

/* slick 初期化前のチラつき抑制：2枚目以降を隠す */
.p-ainokatsuQa__slider:not(.slick-initialized) .p-ainokatsuQa__item + .p-ainokatsuQa__item {
	display: none;
}

.p-ainokatsuQa__item {
	padding: 0 1rem;
}

/* 白い角丸カード（背景）— SVG 非等比伸び（縦間延び）をやめ CSS で再現 */
.p-ainokatsuQa__card {
	background: var(--ainokatsu-color-surface);
	border: 1px solid var(--ainokatsu-color-border);
	border-radius: 5rem;
	box-sizing: border-box;
	/* Q番号バッジ（カード上辺にまたがる）ぶんの余白を上に確保 */
	margin-top: 10.3rem;
	padding: 13rem 9.5rem 9rem;
	position: relative;
}

/* 番号＋お悩みタイトル（もこもこバッジ・上辺にまたがる） */
.p-ainokatsuQa__head {
	/* タイトルを吹き出しに対して上下左右中央に。番号は絶対配置で中央計算から除外 */
	align-items: center;
	animation: ainokatsuMoyaMoya 7.2s ease-in-out infinite;
	justify-content: center;
	/* Figma 48:57: 白地＋グレー罫線(#808080)のもこもこ。比率 3.155 を維持 */
	aspect-ratio: 650.785 / 206.268;
	background: url(images/qa_title_bubble.svg) center center / 100% 100% no-repeat;
	box-sizing: border-box;
	display: flex;
	left: 50%;
	padding: 0;
	position: absolute;
	top: -10.3rem;
	transform: translateX(-50%);
	transform-origin: 50% 50%;
	width: 65.1rem;
	will-change: transform;
}

@keyframes ainokatsuMoyaMoya {
	0%,
	100% {
		transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
	}
	25% {
		transform: translateX(-50%) translateY(-0.5rem) rotate(-0.45deg) scale(1.006, 0.995);
	}
	50% {
		transform: translateX(-50%) translateY(0.25rem) rotate(0.35deg) scale(0.996, 1.006);
	}
	75% {
		transform: translateX(-50%) translateY(-0.25rem) rotate(-0.25deg) scale(1.004, 0.998);
	}
}

.p-ainokatsuQa__num {
	/* 番号は左上寄りに絶対配置（タイトルの中央配置に影響させない） */
	color: var(--ainokatsu-color-accent);
	font-family: var(--ainokatsu-font-display);
	font-size: 3.4rem;
	font-weight: 700;
	left: 6.4rem;
	letter-spacing: 0.05em;
	line-height: 1;
	position: absolute;
	top: 17%;
}

.p-ainokatsuQa__title {
	box-sizing: border-box;
	color: var(--ainokatsu-color-text);
	font-size: 3.4rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.47;
	/* ブロックは flex 親で上下左右中央。行内は左揃えのまま */
	padding-left: 6rem;
	text-align: left;
}

/* 学生の相談文（Figma 48:74: 20px / lh40 / 888px幅 / 両端揃え） */
.p-ainokatsuQa__question {
	color: var(--ainokatsu-color-text);
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: normal;
	line-break: strict;
	line-height: 2;
	margin: 25px auto 90px;
	overflow-wrap: normal;
	text-align: justify;
	word-break: normal;
}

/* 喝（吹き出し）＋ 先生イラストの2カラム
 * 【CRITICAL】align-items: flex-start で左右の高さ連動を断ち切り、
 * 吹き出し（top基準の絶対配置テキスト）が崩壊しないようにする。 */
.p-ainokatsuQa__main {
	align-items: flex-start;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	margin-top: 4rem;
	position: relative;
}

/* 左カラム（吹き出し＋本文）。Figma: 本文は吹き出しの直下に続く（幅542px） */
.p-ainokatsuQa__body {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 54.2rem;
}

/* 吹き出し（先生の喝・左）
 * Figma 48:112: 枠 531×332.3。内訳:
 *   icon_katsu  329-561 / 上端 y0 基準（吹き出し本体より約96px上）232×215.6
 *   balloon本体 276-807 / y96 基準 531×236
 *   赤コピー    396基準 / y183基準（balloon内側） */
.p-ainokatsuQa__balloon {
	aspect-ratio: 531.424 / 240.193;
	background: url(images/balloon.svg) center bottom / 100% auto no-repeat;
	flex: 0 0 auto;
	position: relative;
	width: 53.1rem;
}

/* balloon.svg 本体（吹き出し下側・531×236） */
.p-ainokatsuQa__balloon::before {
	content: none;
}

/* 「愛の喝！」アイコン（吹き出し上に重ねる・232×215.6 / left 5.3rem / top 0） */
.p-ainokatsuQa__balloonIcon {
	left: 5.3rem;
	position: absolute;
	top: -88px;
	width: 23.2rem;
	z-index: 2;
}

.p-ainokatsuQa__balloonIcon::before {
	background: var(--ainokatsu-color-surface);
	border-radius: 30% 34% 38% 32%;
	content: "";
	height: 74%;
	left: -1%;
	position: absolute;
	right: -5%;
	top: 0;
	transform: rotate(-4deg);
	z-index: 0;
}

.p-ainokatsuQa__balloonIcon img {
	display: block;
	height: auto;
	position: relative;
	width: 100%;
	z-index: 1;
}

/* 赤コピー（balloon内側・Figma 48:84: 396/2801 → left12rem / top18.4rem） */
.p-ainokatsuQa__katsu {
	color: var(--ainokatsu-color-katsu);
	font-feature-settings: "hwid" 1;
	font-size: 2.6rem;
	font-weight: 500;
	left: 49%;
	letter-spacing: 0.04em;
	line-height: 1.38;
	margin: 0;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 2;
}

/* 先生イラスト＋氏名（右・Figma illust 348×420 / 氏名23px / 肩書16px） */
.p-ainokatsuQa__sensei {
	flex: 0 0 auto;
	margin: 0;
	text-align: center;
	width: 34.8rem;
}

.p-ainokatsuQa__illust {
	animation: ainokatsuKatsuShake 2.8s ease-in-out infinite;
	display: block;
	height: auto;
	margin: 0 auto;
	transform-origin: 50% 75%;
	width: 100%;
	will-change: transform;
}

@keyframes ainokatsuKatsuShake {
	0%,
	74%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	76% {
		transform: translate3d(-0.5rem, 0, 0) rotate(-1.2deg);
	}
	78% {
		transform: translate3d(0.5rem, 0, 0) rotate(1.2deg);
	}
	80% {
		transform: translate3d(-0.4rem, 0, 0) rotate(-0.9deg);
	}
	82% {
		transform: translate3d(0.4rem, 0, 0) rotate(0.9deg);
	}
	84% {
		transform: translate3d(-0.25rem, 0, 0) rotate(-0.5deg);
	}
	86% {
		transform: translate3d(0.25rem, 0, 0) rotate(0.5deg);
	}
	88% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-ainokatsuMv__katsu img,
	.p-ainokatsuIndex__link,
	.p-ainokatsuQa__head,
	.p-ainokatsuQa__illust {
		animation: none;
	}
}

.p-ainokatsuQa__caption {
	display: block;
	margin-top: 1rem;
}

.p-ainokatsuQa__dep {
	color: var(--ainokatsu-color-text);
	display: block;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

.p-ainokatsuQa__name {
	color: var(--ainokatsu-color-text);
	display: block;
	font-size: 2.3rem;
	letter-spacing: 0.06em;
	line-height: 1.7;
}

/* 解説本文（Figma 48:122: 20px / lh38 / ls1.8px / #828282 / 明朝 palt / 538px幅 / 両端揃え） */
.p-ainokatsuQa__answer {
	box-sizing: border-box;
	color: var(--ainokatsu-color-muted);
	font-family: var(--ainokatsu-font-serif);
	font-feature-settings: "palt" 1;
	font-size: 2rem;
	font-weight: 400;
	letter-spacing: 0.18rem;
	line-break: strict;
	line-height: 1.9;
	overflow-wrap: normal;
	/* Figma 48:122: 吹き出しの直下（左カラム幅 542px）・両端揃え */
	margin: 4.8rem 0 0;
	width: 100%;
	text-align: justify;
	word-break: normal;
}

/* 該当学科／支援室ボタン（Figma 312×53 / radius100px / border1px#000 / 16px ls1.6px） */
.p-ainokatsuQa__btn {
	margin-top: 5rem;
	text-align: center;
}

.p-ainokatsuQa__btn .c-btn {
	background-color: var(--ainokatsu-color-surface);
	border: 1px solid var(--ainokatsu-color-text);
	border-radius: 100px;
	box-sizing: border-box;
	font-size: 1.6rem;
	font-weight: 500;
	justify-content: center;
	letter-spacing: 0.16rem;
	padding: 1.9rem 13rem;
	text-align: center;
}

/* スライダー下：OCT先生コレクションボタン（264×53） */
.p-ainokatsuQa__more {
	left: 0;
	margin-top: 70px;
	position: absolute;
	right: 0;
	text-align: center;
	top: calc(100% - 5.3rem);
	z-index: 3;
}

.p-ainokatsuQa__more .c-btn {
	align-items: center;
	background-color: var(--ainokatsu-color-surface);
	border: 1px solid var(--ainokatsu-color-text);
	border-radius: 100px;
	box-sizing: border-box;
	display: inline-flex;
	font-size: 1.6rem;
	font-weight: 500;
	justify-content: center;
	letter-spacing: 0.16rem;
	min-height: 5.3rem;
	min-width: 26.4rem;
	padding: 0 6rem 0 3rem;
}

/* ボタンの矢印：Figma Group15（黒丸29×29＋白→）。
 * グローバル .u-arrow::before（26px・右端密着・arrow.png）を上書きし、
 * 円を 29px・右 12px インセットにして Figma に合わせる。 */
.p-ainokatsuQa__btn .c-btn.u-arrow::before,
.p-ainokatsuQa__more .c-btn.u-arrow::before {
	background: url(images/btn_arrow.svg) center center / contain no-repeat;
	height: 2.9rem;
	right: 1.2rem;
	width: 2.9rem;
}

/* カルーセルのドットナビは不要（Figma に無し）。slick の動的指定より優先させる */
.p-ainokatsuQa__slider .slider-dots,
.p-ainokatsuQa__slider.js-dot-slider .slider-dots {
	display: none !important;
}

.p-ainokatsu .slick-dotted.slick-slider {
	margin-bottom: 0;
}

/* スライダー左右矢印：Figma 48:138/48:139（細線シェブロン・27×51）に差し替え。
 * グローバル(.js-dot-slider .slide-arrow=slide-arrow.webp)を上書き。
 * 画像は ← を指すため、prev はそのまま／next は180°回転で → にする。 */
.p-ainokatsuQa__slider .slide-arrow {
	background-image: url(images/slider_arrow.png);
}

.p-ainokatsuQa__slider .prev-arrow {
	transform: translateY(-50%);
}

.p-ainokatsuQa__slider .next-arrow {
	transform: translateY(-50%) rotate(180deg);
}

/* ============================================================
 * 5. レスポンシブ（SP: 768px 以下）
 *    Figma SP 828基準。WBG 766×2576 / radius80 / border2px#808080。
 *    Q番号バッジ 867×276 / illust 495×598 / 吹き出し本体 715×318 / icon 354×327。
 *    ボタン 646×90 / radius100px / border2px#818181 / 26px。
 * ============================================================ */
@media (max-width: 768px) {
	.p-ainokatsu {
		padding-bottom: 22rem;
	}

	/* タイトル：縦積み（Figma SP は lead と katsu を縦に） */
	.l-ainokatsuMv {
		padding-top: 0;
	}

	.p-ainokatsuMv__title {
		aspect-ratio: 929 / 804;
		background-image: url(images/title_burst_sp.svg);
		background-size: 100% 100%;
		box-sizing: border-box;
		margin-left: 50%;
		max-width: none;
		position: relative;
		transform: translateX(-50%);
		width: 112.2vw;
		padding: 0;
	}

	.p-ainokatsuMv__lead {
		left: 50%;
		position: absolute;
		top: 19.8%;
		transform: translateX(-50%);
		width: 51.6vw;
	}

	.p-ainokatsuMv__katsu {
		left: 52%;
		position: absolute;
		top: 24.3%;
		transform: translateX(-50%) rotate(-3.78deg);
		width: 76vw;
	}

	/* リード（Figma 98:3134: 34px / lh70 / ls1px / 両端揃え / #000） */
	.l-ainokatsuLead {
		padding-top: 3.1rem;
	}

	.p-ainokatsuLead__text {
		font-size: 1.7rem;
		letter-spacing: 0.05rem;
		line-height: 3.5rem;
		margin: 0 auto;
		width: min(35.35rem, calc(100vw - 6.1rem));
		text-align: justify;
	}

	/* 目次：1カラム・互い違いのインデント（Figma 707幅 / 設問34px / 番号40px） */
	.l-ainokatsuIndex {
		padding-top: 4.7rem;
	}

	.p-ainokatsuIndex__inner {
		max-width: none;
		padding: 0 1.55rem;
	}

	.p-ainokatsuIndex__list {
		gap: 3.25rem;
		grid-template-columns: 1fr;
	}

	.p-ainokatsuIndex__item:nth-child(4n+1),
	.p-ainokatsuIndex__item:nth-child(4n+2),
	.p-ainokatsuIndex__item:nth-child(4n+3),
	.p-ainokatsuIndex__item:nth-child(4n+4) {
		transform: none;
	}

	.p-ainokatsuIndex__item:nth-child(even) {
		margin-top: 0;
		padding-left: 2.85rem;
		padding-right: 0;
	}

	.p-ainokatsuIndex__item:nth-child(odd) {
		padding-left: 0;
		padding-right: 2.85rem;
	}

	.p-ainokatsuIndex__link {
		aspect-ratio: 707 / 225;
		padding: 0;
	}

	.p-ainokatsuIndex__num {
		/* SP も番号は左上（Figma 707幅基準を実機にスケール） */
		top: 2.55rem;
		left: 3.85rem;
		font-size: 2rem;
		letter-spacing: 0.05rem;
	}

	.p-ainokatsuIndex__text {
		font-size: 1.7rem;
		letter-spacing: 0.05rem;
		line-height: 2.3rem;
	}

	.p-ainokatsuIndex__credit {
		color: var(--ainokatsu-color-text);
		font-size: 1.2rem;
		letter-spacing: 0.1rem;
		margin-top: 5.2rem;
	}

	/* Q&A スライダー */
	.l-ainokatsuQa {
		padding-top: 5.8rem;
	}

	.p-ainokatsuQa__inner {
		max-width: none;
		padding: 0 1.5rem 4.5rem;
	}

	.p-ainokatsuQa__item {
		padding: 0;
	}

	.p-ainokatsuQa__slider .slick-list {
		overflow: visible;
	}

	.p-ainokatsuQa__slider .slick-slide {
		position: relative;
		visibility: hidden;
		z-index: 1;
	}

	.p-ainokatsuQa__slider .slick-current {
		visibility: visible;
		z-index: 2;
	}

	/* SP カード：角丸 radius80→8rem 相当 / border1px#808080。Q番号バッジ余白を上に確保 */
	.p-ainokatsuQa__card {
		border: 1px solid var(--ainokatsu-color-border);
		border-radius: 4rem;
		margin-top: 7rem;
		min-height: 128.8rem;
		padding: 9rem 3.1rem 5.4rem;
	}

	/* Q番号バッジ：SP も上辺にまたがるもこもこ（比率 867/276） */
	.p-ainokatsuQa__head {
		aspect-ratio: 867 / 276;
		left: 50%;
		/* タイトル中央配置のため左右対称に */
		padding: 0;
		position: absolute;
		top: -7rem;
		transform: translateX(-50%);
		width: calc(100vw + 2.4rem);
	}

	.p-ainokatsuQa__num {
		font-size: 1.8rem;
		left: 4.2rem;
		letter-spacing: 0.05rem;
		top: 17%;
	}

	.p-ainokatsuQa__title {
		font-size: 1.9rem;
		letter-spacing: 0.05rem;
		line-height: 2.3rem;
		padding-left: 3rem;
		text-align: left;
	}

	.p-ainokatsuQa__question {
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 2.8rem;
		margin: 0 auto 60px;
		text-align: justify;
	}

	/* 喝＋先生：縦積み（吹き出し→イラスト）。中央寄せ */
	.p-ainokatsuQa__main {
		align-items: center;
		flex-direction: column;
		gap: 0;
		margin-top: 0;
	}

	/* SP は単一カラム：左カラム(__body)を解除し、吹き出し→イラスト→本文 の順に積む */
	.p-ainokatsuQa__body {
		display: contents;
	}

	/* SP 吹き出し：本体 715×318（比 2.249）/ icon 354×327 / 比率維持 */
	.p-ainokatsuQa__balloon {
		margin: 0 -2rem;
		max-width: none;
		width: calc(100% + 4rem);
	}

	.p-ainokatsuQa__balloonIcon {
		left: 2.7rem;
		top: -8.9rem;
		width: 17.7rem;
	}

	.p-ainokatsuQa__katsu {
		font-size: 1.8rem;
		left: 50%;
		letter-spacing: 0.05rem;
		line-height: 2.5rem;
	}

	.p-ainokatsuQa__sensei {
		margin: 1rem auto 0;
		width: 24.75rem;
	}

	.p-ainokatsuQa__dep {
		font-size: 1.3rem;
		line-height: 2rem;
	}

	.p-ainokatsuQa__name {
		font-size: 1.65rem;
		line-height: 2rem;
	}

	.p-ainokatsuQa__answer {
		font-size: 1.5rem;
		letter-spacing: 0.09rem;
		line-height: 2.9rem;
		margin-top: 2.3rem;
		/* SP は単一カラム・全幅。イラストの後（最後）に積む */
		max-width: none;
		order: 1;
		width: 100%;
	}

	/* SP ボタン：646×90 / border2px#818181 / 26px相当 */
	.p-ainokatsuQa__btn {
		margin-top: 5rem;
	}

	.p-ainokatsuQa__btn .c-btn,
	.p-ainokatsuQa__more .c-btn {
		border: 1px solid var(--ainokatsu-color-border-sp);
		display: inline-block;
		font-size: 1.3rem;
		letter-spacing: 0.08rem;
		min-height: 4.5rem;
		min-width: 0;
		padding: 1.5rem 0;
		width: 100%;
	}

	.p-ainokatsuQa__more {
		top: calc(100% - 4.5rem);
	}

	.p-ainokatsuQa__more .c-btn {
		width: calc(100% - 6.38rem);
	}

	.p-ainokatsuQa__btn .c-btn.u-arrow::before,
	.p-ainokatsuQa__more .c-btn.u-arrow::before {
		height: 2.5rem;
		right: 1.5rem;
		width: 2.5rem;
	}

	.p-ainokatsuQa__slider.js-dot-slider .prev-arrow {
		left: -0.8rem;
	}

	.p-ainokatsuQa__slider.js-dot-slider .next-arrow {
		right: -0.8rem;
	}

}