/*
 * 2026-10-22 パソコン幅の見直し（鈴木さんと合意した1〜3）
 *
 * theme.css（app/globals.css から生成）は同じ節を何度も上書きしているので、
 * 直しはこのファイル1つに集めて theme.css の後に読む。戻すときはこのファイルを外す。
 *
 *   1. 左端と横幅を1240pxの1列にそろえ、背景を 白・クリーム・紺 の3つに絞る
 *   2. 12〜13pxの本文だけを大きく・濃くする（見出しや全体の文字は変えない）
 *   3. 中身のない空白をなくす
 *
 * ⚠️ スマホの見た目はそのままにするため、すべて 1100px 以上だけに効かせる。
 * ⚠️ theme.css 側より強くするため、頭に .site-shell を付けている。
 */

@media (min-width: 1100px) {
	:root {
		--refine-wrap: min(100% - 64px, 1240px);
		--refine-gutter: max(32px, calc((100% - 1240px) / 2));
		--refine-cream: #fff8f2;
		--refine-navy: #0d1b31;
		--refine-body: #4b5361;
	}

	/* ── 1. 横幅と左端 ───────────────────────────── */

	.site-shell .proof-grid,
	.site-shell .course-shelf-heading,
	.site-shell .course-all,
	.site-shell .reports-heading,
	.site-shell .report-viewport,
	.site-shell .story-collage-heading,
	.site-shell .story-stream-heading,
	.site-shell .founders-heading,
	.site-shell .founders-grid,
	.site-shell .philosophy-section {
		width: var(--refine-wrap);
		max-width: none;
		margin-inline: auto;
	}

	.site-shell .course-viewport {
		padding-inline: var(--refine-gutter);
	}

	.site-shell .about-company {
		width: var(--refine-wrap);
		grid-template-columns: 340px 1fr;
	}

	/* 箱の中に箱があった3つ（選ばれる理由・お知らせ・よくある質問）は、箱を外して全幅の帯にする */
	.site-shell .reasons,
	.site-shell .news-motion,
	.site-shell .faq-section {
		width: auto;
		max-width: none;
		margin: 0;
		border: 0;
		border-radius: 0;
		padding-inline: var(--refine-gutter);
		background: var(--refine-cream);
		box-shadow: none;
	}

	.site-shell .reasons::before,
	.site-shell .reasons::after,
	.site-shell .news-motion::before,
	.site-shell .news-motion::after,
	.site-shell .story-collage::after,
	.site-shell .reports-strip::before,
	.site-shell .bottom-cta::before {
		display: none;
	}

	/* ── 1. 背景を 白・クリーム・紺 に ──────────────── */

	.site-shell .story-collage {
		background:
			radial-gradient(circle at 88% 12%, rgb(255 128 85 / 14%) 0 150px, transparent 360px),
			var(--refine-navy);
	}

	.site-shell .faq-section {
		background: var(--refine-cream);
	}

	.site-shell .faq-section .faq-heading,
	.site-shell .faq-section .faq-heading h2 {
		color: #101b30;
	}

	.site-shell .faq-section .section-kicker {
		color: #ff5c32 !important; /* theme.css 側が !important で白にしている */
	}

	.site-shell .faq-section .faq-lead {
		color: var(--refine-body);
	}

	.site-shell .faq-section .faq-heading::after {
		background: rgb(255 92 50 / 35%);
	}

	.site-shell .bottom-cta {
		background: var(--refine-cream);
	}

	/* ── 2. 小さすぎる本文 ─────────────────────── */

	.site-shell .hero li { font-size: 14px; }

	.site-shell .proof-grid p { font-size: 14px; color: rgb(255 255 255 / 90%); }

	.site-shell .offers p,
	.site-shell .offers li,
	.site-shell .offers-bridge { font-size: 14.5px; color: var(--refine-body); }
	.site-shell .offers small { font-size: 12.5px; }
	.site-shell .offers-card-link { font-size: 14px; }

	.site-shell .course-card p { font-size: 13.5px; color: var(--refine-body); }
	.site-shell .course-upcoming li { font-size: 13.5px; }
	.site-shell .course-upcoming p { font-size: 12.5px; }

	.site-shell .reasons .reason-intro { font-size: 14.5px; color: var(--refine-body); }
	.site-shell .reasons .reason-grid article > p { font-size: 13.5px; color: var(--refine-body); }

	.site-shell .story-collage-heading p { font-size: 14px; color: rgb(255 255 255 / 80%); }
	.site-shell .story-feature p { font-size: 14.5px; }
	.site-shell .story-stream-heading p,
	.site-shell .voice-disclaimer { font-size: 12.5px; color: rgb(255 255 255 / 72%); }

	.site-shell .reports-heading p { font-size: 14px; color: var(--refine-body); }

	.site-shell .founders-grid p { font-size: 14.5px; color: var(--refine-body); }

	.site-shell .shared-footer dd { font-size: 12.5px; }

	/* ── 3. 空白 ───────────────────────────────── */

	/* 実績の帯の直後に 96px＋96px の空きがあった */
	.site-shell .stats-band + .offers { margin-top: 0; padding-top: 88px; }

	/* 会社概要（下に155pxの余白）のあとに、フッターの上の110pxが重なっていた */
	.site-shell .shared-footer { margin-top: 0; }
	.site-shell .about-company { padding-bottom: 120px; }

	/* 紺の声の帯のあと、白い96pxと細線をはさんでからレポートが始まっていた */
	.site-shell .reports-strip { margin-top: 0; border-top: 0; }

	/* 選ばれる理由の下に約230px、よくある質問とボタンの帯の間に白い108pxが残っていた */
	.site-shell .reasons { padding-bottom: 104px; }
	.site-shell .bottom-cta { margin-top: 0; }
}

/*
 * 2026-10-22（2回目）飾りと写真の見せ方をそろえる。スマホにも効かせる
 *
 *   4. 細いオレンジの線（見出しの下線・帯のふち・ヘッダーの下線）を外す
 *   5. 英語の小見出し（WHAT WE OFFER など）と、飾りの大きな英字を出さない。
 *      見出しの字体はゴシック1つにそろえる（一番上だけ明朝だった）
 *   6. 写真は「角丸14px・ぼかしなし・同じ色味」に統一する。影は白いカードの側だけ
 *
 * 写真の差し替え（同じ人の重なりを減らす）は src/data/content.json の reasons で行った。
 * ⚠️ content.json はテーマから書き出したものだが、この差し替えは新サイトだけの変更。
 */

/* ── 4. オレンジの線 ── */
.site-shell .site-header { border-bottom-color: rgb(16 27 48 / 8%); }
.site-shell .site-header::after,
.site-shell .desktop-nav a::after,
.site-shell .fv-title::after,
.site-shell .section-title::after,
.site-shell .faq-heading::after { display: none; }
.site-shell .stats-band,
.site-shell .hero,
.site-shell .bottom-cta { border-top: 0; border-bottom: 0; }

/* ── 5. 文字 ── */
.site-shell .section-kicker,
.site-shell .story-display,
.site-shell .news-flight-guide,
.site-shell .founders-heading > small,
.site-shell .about-company-heading > small,
.site-shell .offers-card-en,
.site-shell .story-feature figure > span { display: none; }

.site-shell .fv-title {
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	font-weight: 700;
	letter-spacing: .02em;
}

/* ── 6. 写真 ── */
.site-shell {
	--photo-radius: 14px;
	--photo-tone: saturate(.9) contrast(1.03);
}

.site-shell .hero-art,
.site-shell .hero-art img,
.site-shell .reasons .reason-grid img,
.site-shell .philosophy-photo,
.site-shell .philosophy-photo img,
.site-shell .story-feature figure,
.site-shell .offers-card img,
.site-shell .report-card img,
.site-shell .bottom-cta > picture img {
	border-radius: var(--photo-radius);
}

/* 一番上の写真は、左側を白くぼかして文字に溶かしていた。ぼかしをやめて、角丸の写真として置く */
.site-shell .hero-art::before,
.site-shell .hero-art::after { display: none; }
.site-shell .hero-art { overflow: hidden; box-shadow: none; }

.site-shell main img:not([src$=".svg"]):not([src*="emblem"]):not([src*="logo"]):not([src*="kyuerun"]) {
	filter: var(--photo-tone);
}

/* 2回目の手直し：残っていた英字の小見出し・飾りの図形・白い帯 */
.site-shell .reasons .section-title .section-kicker { display: none; }
.site-shell .course-shelf::before,
.site-shell .course-shelf::after { display: none; }
.site-shell .story-collage { margin-top: 0; }

@media (min-width: 1100px) {
	/* 一番上の写真：右端まではみ出していたのを、ほかの節と同じ1240pxの列の右端で止める。
	   左は文章（〜716px）にかからない位置から */
	.site-shell .hero-art {
		inset: 24px var(--refine-gutter) 24px 740px;
		border-radius: var(--photo-radius);
	}

	/* 「Cuel STORIES」の大きな英字を外したので、日本語の見出しを左の列に寄せる */
	.site-shell .story-heading-copy h2 { justify-self: start; margin-left: 0; }
}

@media (min-width: 1100px) {
	.site-shell .hero-art { width: auto; height: auto; }
}

/* 一番上の写真：ChatGPT で作った3枚は暗く構図も同じだったので、元の3枚に戻した（2026-10-22）。
   中の重ね板（.hero-main-slider）に左下90pxの丸みが残っていたので、外枠と同じ角丸にする */
.site-shell .hero-main-slider { border-radius: var(--photo-radius); overflow: hidden; }

@media (min-width: 1100px) {
	.site-shell .hero-main-slider { height: 100%; }
}


/*
 * 2026-10-22（3回目）一番上をパソコン向けに組み直す
 *   ・見出しを2行に（「経理の学びとキャリアを、／あなたらしく。」）
 *   ・写真の枠を縦長から横長（3:2）に。元の写真が3:2なので、上下が切れなくなる
 *   ・一番上の写真だけは、色味をそろえる設定（彩度を落とす）をかけない
 */
.site-shell .hero-main-slide { filter: none; }

@media (min-width: 1100px) {
	.site-shell .fv-br-narrow { display: none; }

	/* 2026-10-22（4回目）鈴木さん「写真が途切れて見える。後ろ一帯が写真のほうがいい」
	   → 写真を一番上の場所全体（画面の左端から右端まで）に敷き、左側だけ白を重ねて見出しを読ませる */
	.site-shell .hero-art {
		inset: 0 calc((100vw - 100%) / -2);
		width: auto;
		height: auto;
		border-radius: 0;
		translate: none;
		z-index: 0;
	}
	.site-shell .hero-main-slider { border-radius: 0; }
	.site-shell .hero-main-slide { object-position: 70% 40%; }
	.site-shell .hero-main-slider::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 82%) 32%, rgb(255 255 255 / 0%) 58%);
		content: "";
	}
	.site-shell .hero-copy { z-index: 2; }

	/* 参考：fwh.co.jp。写真をヘッダーの裏まで広げ、高さを画面いっぱい近くに。
	   ヘッダーはトップだけ半透明にして、写真が透けて見えるようにする */
	.site-shell .hero-art { top: -72px; }
	.site-shell .hero-art .hero-main-slide { border-radius: 0; } /* 写真の角丸ルール（.hero-art img）より強く */
	.site-shell .hero-copy::before { display: none; } /* 文章の後ろの白い板。写真側の白いぼかしと二重になり、四角い枠が見えていた */
	.site-shell .hero { min-height: min(calc(100vh - 72px), 760px); }
	.site-shell:has(> main > .hero#top) .site-header {
		background: rgb(255 255 255 / 62%);
		backdrop-filter: blur(10px);
		box-shadow: none;
		border-bottom-color: rgb(255 255 255 / 40%);
	}
	.site-shell .hero + .stats-band { margin-top: 0; }

	/* 写真が横長で低くなったぶん、上下の空きを詰める。特長の3つは文章の幅で折り返す */
	.site-shell .hero-points { flex-wrap: wrap; max-width: 560px; row-gap: 10px; }
}

/*
 * 2026-10-22（5回目）スマホの一番上もパソコンと同じ「後ろ一帯が写真」に
 *   ・写真はヘッダーの裏から、ボタン・特長の3つの下まで、一番上の場所全体に敷く
 *   ・角丸なし。文字の左側と、ボタンのある下側にだけ白を重ねて読ませる
 *   ・ヘッダーはトップだけ半透明（パソコンと同じ）
 */
.site-shell:has(> main > .hero#top) .site-header {
	background: rgb(255 255 255 / 62%);
	backdrop-filter: blur(10px);
	box-shadow: none;
}

@media (max-width: 1099px) {
	.site-shell .hero-art {
		inset: 0;
		height: auto;
		border-radius: 0;
	}
	.site-shell .hero-main-slider,
	.site-shell .hero-art .hero-main-slide { border-radius: 0; }
	/* 横長の写真は、スマホでは幅の1/3ほどしか映らない。写真ごとに人の顔が画面の中央に来る位置へ */
	.site-shell .hero-main-slide.slide-one { object-position: 72% 0; }
	.site-shell .hero-main-slide.slide-two { object-position: 50% 0; } /* スマホは縦長の career-woman.webp（Hero.astro の PHONE_SLIDES） */
	.site-shell .hero-main-slide.slide-three { object-position: 50% 0; }
	/* 顔は写真の上半分にあるので、見出しは下へずらし、下半分にだけ白を重ねて読ませる */
	.site-shell .hero-copy { top: 344px; }
	.site-shell .hero-main-slider::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgb(255 255 255 / 0%) 34%, rgb(255 255 255 / 72%) 46%, rgb(255 255 255 / 88%) 62%, rgb(255 255 255 / 94%) 100%);
		content: "";
	}
	.site-shell .hero-copy::before { display: none; }
}

/*
 * 2026-10-22（6回目）CuelCollege・CuelNext の一番上も、トップと同じ「後ろ一帯が写真」に
 * どちらも section.fv > .fv-copy + figure.fv-figure の作りで、右半分だけ写真・左端を地の色でぼかしていた。
 * ⚠️ 法人（.biz-hero）は同じ作りだが、もともと全体に写真を敷いて暗くし白い文字を載せているので対象外
 *    （白を重ねると白い見出しが消えた）
 */
.site-shell:has(> main > section.fv:is(.ccx-hero, .cnx3-hero):first-child) .site-header {
	background: rgb(255 255 255 / 62%);
	backdrop-filter: blur(10px);
	box-shadow: none;
}

@media (min-width: 1100px) {
	/* overflow:hidden だと、ヘッダーの裏へ広げた写真の上72pxが切れる */
	.site-shell main > section.fv:is(.ccx-hero, .cnx3-hero):first-child { position: relative; overflow: visible; }
	.site-shell main > section.fv:is(.ccx-hero, .cnx3-hero):first-child > .fv-figure {
		position: absolute;
		inset: -72px 0 0;
		z-index: 0;
		width: auto;
		height: auto;
		margin: 0;
	}
	.site-shell main > section.fv:is(.ccx-hero, .cnx3-hero):first-child > .fv-figure img {
		width: 100%;
		height: 100%;
		border-radius: 0;
		object-fit: cover;
		object-position: 70% 40%;
	}
	.site-shell main > section.fv:is(.ccx-hero, .cnx3-hero):first-child > .fv-figure::after {
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 82%) 32%, rgb(255 255 255 / 0%) 58%);
		content: "";
	}
	.site-shell main > section.fv:is(.ccx-hero, .cnx3-hero):first-child > .fv-copy { position: relative; z-index: 2; }
}

@media (min-width: 1100px) {
	/* CuelNext の写真は16:9で、横幅いっぱいに敷くと左右にずらせない。見出しが長く（〜1000px）
	   手前の女性の顔にかかるので、写真の左端を画面の24%の位置から始めて、人物を右へ寄せる */
	/* （10/22 引きの写真に替えたので、写真を右へずらす指定は外した） */
}

@media (min-width: 1100px) {
	/* CuelNext：写真を右へ寄せたぶん、左に地の青い色が出て、写真との境目が縦の線に見えた */
	.site-shell main > section.fv.cnx3-hero:first-child { background: #fff; }

	/* 法人・お問い合わせの一番上も、トップと同じく角丸なしで画面の端まで */
	.site-shell main > section.biz-hero:first-child,
	.site-shell main > section.biz-hero:first-child > .fv-figure,
	.site-shell main > section.biz-hero:first-child img,
	.site-shell main > section.contact-hero:first-child,
	.site-shell main > section.contact-hero:first-child > figure,
	.site-shell main > section.contact-hero:first-child img { border-radius: 0; }
}

/* 2026-10-22（7回目）ほかのページの英語の小見出しも、トップと同じく出さない。
   見出し（h1・h2）の直前にある英字だけの見出し飾りに限る。「募集中」「FREE」「TYPE 01」など
   情報を持つラベルは残す */
.site-shell .fv-copy > .fv-eyebrow,
.site-shell .ccx-title > span:has(+ :is(h1, h2)),
.site-shell .ccx-final > div > span:has(+ :is(h1, h2)),
.site-shell .cnx3-about-def > header > small:has(+ :is(h1, h2)),
.site-shell .cnx3-heading > small:has(+ :is(h1, h2)),
.site-shell .contact-hero > div > small:has(+ :is(h1, h2)),
.site-shell .contact-intro > header > small:has(+ :is(h1, h2)),
.site-shell .contact-form-heading > small:has(+ :is(h1, h2)),
.site-shell .legal-hero > div > small:has(+ :is(h1, h2)),
.site-shell .faq-page-hero > div > small:has(+ :is(h1, h2)),
.site-shell .faq-contact > div > small:has(+ :is(h1, h2)),
.site-shell .biz-heading > div > small /* 法人：番号（01〜03）は残し、横の英字だけ */ { display: none; }

/*
 * 2026-10-22（8回目）各ページの一番上（ファーストビュー）をそろえる
 *   ・サービスのページ（CuelCollege・CuelNext・法人）とお問い合わせ：高さ640px、見出しは高さの真ん中、左端100px
 *     トップだけは入口なので画面いっぱい（〜760px）のまま
 *   ・写真のないページ（よくある質問・規約4つ）：「ページ名の帯」＝高さ360px・左寄せ・淡いクリーム
 *   ・ヘッダー：写真の上に載るページは半透明、写真のないページは不透明
 *   ・一番上の細かい文字：説明文16px／補足15px／ボタン15px／日付などの注記13px
 */
.site-shell:has(> main > :is(section.biz-hero, section.contact-hero):first-child) .site-header {
	background: rgb(255 255 255 / 62%);
	backdrop-filter: blur(10px);
	box-shadow: none;
}

@media (min-width: 1100px) {
	/* ── サービスのページとお問い合わせ ── */
	.site-shell main > :is(.ccx-hero, .cnx3-hero, .biz-hero, .contact-hero):first-child {
		min-height: 640px;
		align-items: center;
		overflow: visible;
	}
	.site-shell main > .biz-hero:first-child > .fv-copy { padding-block: 0; }
	.site-shell main > :is(.biz-hero, .contact-hero):first-child > :is(.fv-figure, figure) { inset: -72px 0 0; height: auto; }
	.site-shell main > .contact-hero:first-child > div {
		width: var(--refine-wrap);
		margin-inline: auto;
		padding: 0;
		align-self: center;
	}

	/* ── 写真のないページ：ページ名の帯 ── */
	.site-shell main > :is(.faq-page-hero, .legal-hero):first-child {
		display: grid;
		min-height: 360px;
		align-content: center;
		padding: 0;
		background: #fff8f2;
	}
	.site-shell main > :is(.faq-page-hero, .legal-hero):first-child::before,
	.site-shell main > :is(.faq-page-hero, .legal-hero):first-child::after { display: none; }
	.site-shell main > :is(.faq-page-hero, .legal-hero):first-child > div {
		width: var(--refine-wrap);
		margin-inline: auto;
		text-align: left;
	}
	.site-shell main > .legal-hero:first-child > div { max-width: none; justify-self: center; } /* 元は幅880pxで中央に置いていた */
	.site-shell main > .legal-hero:first-child > div > * { margin-inline: 0; }
	.site-shell main > .legal-hero:first-child :is(h1, p, time) { color: var(--ink, #2a2730); }
	.site-shell main > .legal-hero:first-child :is(p, time) { color: #5f5856; }

	/* ── 一番上の細かい文字 ── */
	.site-shell main > :first-child :is(.hero-lead-line, .fv-sub) { font-size: 16px; font-weight: 600; }
	.site-shell main > :first-child :is(.fv-desc, .fv-desc .mk) { font-size: 15px; }
	.site-shell main > :first-child :is(.button, .cta) { font-size: 16px; } /* ボタンは全ページ16px（polish.css）にそろえる */
	.site-shell main > :is(.contact-hero, .faq-page-hero, .legal-hero):first-child > div > p { font-size: 15px; }
	.site-shell main > .legal-hero:first-child :is(time, .legal-hero__note) { font-size: 13px; }
}

/* よくある質問：見出しの下の短いオレンジの線（span）。ほかのページで外したものと同じ飾り */
.site-shell .faq-page-hero > div > span:empty { display: none; }