/*
 * 2026-10-22 仕上げ：古く見える飾りを外す／背景に控えめな動きを足す（全ページ）
 * 鈴木さん「ダサいところや、後ろで動かした方がいいデザインがあれば調整して」
 *
 * 外したもの
 *   ・実績の帯を横切る光の筋 ・キラキラが弾ける動き
 *   ・選ばれる理由：カードの互い違い、見出しに重なる大きな番号
 *   ・お知らせ：斜めに重なって回るカード → 日付・種類・題名の1行ずつの一覧に
 *     （回す仕組み home-news.js はトップで読み込まないようにした。src/pages/index.astro）
 *   ・ボタンの帯：右端で切れたマグカップの写真と左下の四分円
 *   ・フッター：大きな赤い輪と「CREATE YOUR NEXT」の丸い飾り
 * 足した動き（動きを減らす設定の人には止める）
 *   ・一番上の写真がゆっくり寄っていく ・クリームの帯の淡いグラデーションがゆっくり流れる
 */

/* ── 外す ── */
.site-shell .stats-band::after { display: none; }
.site-shell .sparkle-copy::before,
.site-shell .sparkle-copy::after { display: none; animation: none; }
.site-shell .shared-footer::before,
.site-shell .shared-footer::after,
.site-shell .shared-footer-orbit { display: none; }
/* ボタンの帯の写真は、パソコンでは右端で切れていたので外す。スマホでは帯の上に置かれていて必要なので残す */
@media (min-width: 1100px) {
	.site-shell .bottom-cta > picture { display: none; }
}
.site-shell .bottom-cta::after { display: none; }

/* 選ばれる理由：4枚の高さと角をそろえ、番号は小さく見出しの上に */
.site-shell .reasons .reason-grid article,
.site-shell .reasons .reason-grid article:nth-child(even) {
	translate: none;
	border-radius: 16px;
}
.site-shell .reasons .reason-number {
	position: static;
	display: block;
	margin-bottom: 6px;
	color: var(--orange);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	opacity: 1;
}

/* お知らせ：1行ずつの一覧 */
.site-shell .news-flight-stage {
	position: static;
	display: block;
	height: auto;
	min-height: 0;
	border-top: 1px solid rgb(42 39 48 / 12%);
}
.site-shell .news-flight-guide,
.site-shell .news-card-number,
.site-shell .news-flight-card::before,
.site-shell .news-flight-card::after { display: none; }
.site-shell .news-flight-stage .news-flight-card {
	position: static;
	display: grid;
	grid-template-columns: 210px 1fr auto;
	align-items: center;
	gap: 20px;
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 22px 4px;
	border: 0;
	border-bottom: 1px solid rgb(42 39 48 / 12%);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	filter: none;
	transform: none;
	translate: none;
	rotate: none;
	scale: none;
	visibility: visible;
	pointer-events: auto;
	transition: background .2s ease;
}
.site-shell .news-flight-stage .news-flight-card:hover { background: rgb(255 255 255 / 70%); }
.site-shell .news-flight-card .news-card-meta { display: flex; gap: 14px; align-items: center; margin: 0; }
.site-shell .news-flight-card strong { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.6; }
.site-shell .news-flight-card .news-card-link { margin: 0; font-size: 0; }
.site-shell .news-flight-card .news-card-link b { font-size: 16px; }
.site-shell .news-motion { min-height: 0; }

@media (max-width: 760px) {
	.site-shell .news-flight-stage .news-flight-card { grid-template-columns: 1fr auto; gap: 6px 12px; }
	.site-shell .news-flight-card .news-card-meta { grid-column: 1 / -1; }
}

/* ── 動き ── */
@keyframes polish-slow-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.02); } /* 6%だと人物が大きく見えた（鈴木さん「写真がデカすぎる」）*/
}
@keyframes polish-cream-drift {
	from { background-position: 0% 0%, 0 0; }
	to { background-position: 100% 100%, 0 0; }
}

.site-shell .hero-main-slider,
.site-shell main > :is(.ccx-hero, .cnx3-hero, .biz-hero, .contact-hero):first-child :is(.fv-figure, figure) img {
	animation: polish-slow-zoom 24s ease-in-out infinite alternate;
	transform-origin: 60% 40%;
}

.site-shell :is(.reasons, .news-motion, .faq-section, .bottom-cta, .offers) {
	background-size: 180% 180%, auto;
	animation: polish-cream-drift 30s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.site-shell .hero-main-slider,
	.site-shell main > :first-child :is(.fv-figure, figure) img,
	.site-shell :is(.reasons, .news-motion, .faq-section, .bottom-cta, .offers) { animation: none; }
}

/* お知らせの一覧：回していたときの「奥のカード」の小さい文字が残っていたので、全行同じ大きさに */
.site-shell .news-flight-card .news-card-meta time { font-size: 13px; }
.site-shell .news-flight-card .news-card-meta i { font-size: 11.5px; }

/*
 * ボタンの文字（鈴木さん「ボタンの文字小さくない？」10/22）。全ページで測って3段階にそろえた（パソコン幅）
 *   主なボタン 13〜15px → 16px ／ 「すべての〜」などの小さなボタン 10〜13px → 14px ／ ヘッダー 12px → 13.5px
 *   ボタンの中の「（無料で体験する）」12px → 13px
 */
@media (min-width: 1100px) {
	.site-shell main :is(.button, .cta, .ccx-button, .cnx-button) { font-size: 16px; }
	.site-shell main :is(.button, .cta, .ccx-button, .cnx-button) :is(small, span:not(:last-child)) { font-size: 13px; }
	.site-shell main :is(.news-motion-intro > a, .ccx-reports-shell a, .faq-contact a, .biz-public-expansion a,
		.ccx-plan-panel a, .cnx3-final a, .course-all, .faq-section a) { font-size: 14px; }
	.site-shell .site-header .desktop-nav :is(a.nav-cta, a.nav-diagnosis) { font-size: 13.5px; }
	.site-shell .story-stream-heading button { font-size: 12.5px; }
}

/* お知らせ：スマホにも残っていた大きな英字（Cuel NEWS）と円を外す。
   「奥のカード」だった行は矢印が隠れていたので、全行に出す */
.site-shell .news-motion::before,
.site-shell .news-motion::after { display: none; }
.site-shell .news-flight-card .news-card-link { display: block; opacity: 1; visibility: visible; transform: none; }


/*
 * 2026-10-22 スマホで見つかったところ（鈴木さん）
 *   ・よくあるご質問の見出しが白い字のまま（パソコンだけ背景を変えていた）→ 全幅で濃い字に
 *   ・トップのよくある質問は8問並ぶだけで重い → 4問にして、残りは「すべてのFAQを見る」から
 *   ・「すべてのゼミを見る」が画面の左端にくっついていた
 *   ・ストーリーの写真が画面の半分近く（高さ340px）→ 220pxに
 *   ・「なりたい働き方」の枠：ボタンが横に並んで窮屈 → 縦に並べ、余白をとる
 */
.site-shell .faq-section,
.site-shell .faq-section .faq-heading,
.site-shell .faq-section .faq-heading h2 { color: #2a2730; }
.site-shell .faq-section .faq-lead { color: #5f5856; }
.site-shell .faq-section .faq-heading::after { display: none; }
.site-shell .faq-section .faq-list > details:nth-child(n+5) { display: none; }

@media (max-width: 1099px) {
	.site-shell .course-all { padding-inline: 24px; }

	.site-shell .story-feature { grid-template-rows: 220px auto; }
	.site-shell .story-feature figure,
	.site-shell .story-feature figure img { height: 220px; min-height: 0; aspect-ratio: auto; }
	.site-shell .story-feature figure::after { display: none; } /* 写真の下の灰色のぼかし */
	.site-shell .story-feature figure img { object-fit: cover; object-position: 50% 30%; }

	.site-shell .mobile-bridge-cta { height: auto; padding: 26px 20px 24px; text-align: center; }
	.site-shell .mobile-bridge-cta .sparkle-copy { display: block; margin-bottom: 16px; font-size: 14.5px; line-height: 1.7; white-space: normal; }
	.site-shell .mobile-bridge-cta :is(div, nav):has(> a) { display: grid; grid-template-columns: 1fr; gap: 10px; }
	.site-shell .mobile-bridge-cta a { justify-content: center; min-height: 48px; font-size: 14.5px; white-space: nowrap; }
}

/* 2026-10-22 法人・お問い合わせは Studio.Stock の写真（10・15）に替えた。
   スマホで縦長に切り抜くとき、人物（法人は話している講師、お問い合わせは女性の顔）が入る位置にする */
@media (max-width: 1099px) {
	.site-shell main > .biz-hero:first-child img { object-position: 60% 50%; }
	.site-shell main > .contact-hero:first-child img { object-position: 52% 30%; }
}

/*
 * 2026-10-22 法人・お問い合わせの一番上も、ほかのページと同じ明るい見た目に（鈴木さん）
 *   紺のグラデーションの重ね（::after）と白い文字 → 白い重ねと濃い文字。2つめのボタンは白地に濃い枠
 */
.site-shell main > :is(.biz-hero, .contact-hero):first-child { background-color: #fff; }
.site-shell main > :is(.biz-hero, .contact-hero):first-child::after {
	background: linear-gradient(90deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 82%) 32%, rgb(255 255 255 / 0%) 58%);
}
.site-shell main > :is(.biz-hero, .contact-hero):first-child :is(h1, .fv-sub) { color: #2a2730; }
.site-shell main > :is(.biz-hero, .contact-hero):first-child :is(.fv-desc, .fv-desc .mk, h1 + p) { color: #5f5856; }
.site-shell main > .biz-hero:first-child .cta:not(.is-primary) {
	border-color: rgb(42 39 48 / 28%);
	background: rgb(255 255 255 / 80%);
	color: #2a2730;
}
.site-shell main > .biz-hero:first-child .cta:not(.is-primary) b { color: #2a2730; }

@media (max-width: 1099px) {
	/* スマホは文字が写真の上全体にかかるので、上は薄く、文字のある下ほど白く */
	.site-shell main > :is(.biz-hero, .contact-hero):first-child::after {
		background: linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, rgb(255 255 255 / 30%) 30%, rgb(255 255 255 / 86%) 58%, rgb(255 255 255 / 95%) 100%);
	}
}