/* =========================================================
   下層ページ専用CSS（Codex担当）
   - 新規下層ページのスタイルはすべてこのファイルに書く
   - main.css は編集しない（SEO運用側と衝突するため）
   - デザイントークン（色・フォント・レイアウト変数）は main.css の :root を参照
   - ページごとにコメントブロックで区切ること
========================================================= */

/* =========================================================
   選ばれる理由（about）
========================================================= */
.page-about {
	color: var(--c-heading);
	font-weight: 700;
	letter-spacing: .14em;
}
.page-about .container { max-width: 1440px; padding-inline: clamp(24px, 6.95vw, 100px); }
.page-about mark { color: inherit; background: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg)); }
.about-intro { max-width: 1440px; margin: 141px auto 0; padding-top: 130px; background: linear-gradient(var(--c-cream) 0 65%, var(--c-bg) 100%); border-radius: 160px 160px 0 0; }
.about-intro__heading { position: relative; height: 163px; text-align: center; }
.about-intro h1 { display: flex; align-items: end; justify-content: center; gap: 10px; font-size: 22px; letter-spacing: .18em; line-height: 1.5; }
.about-intro__brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.about-intro__brand small { font-size: 15px; }
.about-intro__brand img { width: 180px; height: auto; }
.about-intro__arrow { position: absolute; top: 31px; left: calc(50% + 162px); }
.about-intro__body { position: relative; min-height: 758px; padding-top: 43px; }
.about-intro__lead { position: relative; z-index: 1; text-align: center; color: var(--c-text); font-size: 22px; letter-spacing: .18em; }
.about-intro__lead span { display: block; }
.about-intro__lead span + span { margin-top: 26px; font-size: 21px; }
.page-about .about-intro__lead mark { white-space: nowrap; padding: 2px 8px; background: var(--c-bg); }
.about-intro__text { position: relative; z-index: 1; margin: 100px auto 0; max-width: 610px; text-align: center; color: var(--c-text); font-size: 16px; letter-spacing: .16em; line-height: 2.85; }
.about-intro__art { position: absolute; inset: 0; pointer-events: none; }
.about-intro__image { position: absolute; filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--c-heading) 12%, transparent)); }
.about-intro__image:nth-child(-n+5) { border-radius: 10px; }
.about-intro__image--0 { left: 20.07%; top: 573px; width: 13.26%; }
.about-intro__image--1 { left: 82.22%; top: 527px; width: 10.83%; }
.about-intro__image--2 { left: 3.47%; top: 405px; width: 8.4%; }
.about-intro__image--3 { left: 13.89%; top: 183px; width: 10.69%; }
.about-intro__image--4 { left: 78.75%; top: 190px; width: 14.31%; }
.about-intro__image--5 { left: 72.71%; top: 277px; width: 9.03%; transform: scaleX(-1); }
.about-intro__image--6 { left: 21.88%; top: 303px; width: 6.53%; }
.about-intro__image--7 { left: 78.89%; top: 486.8px; width: 6.32%; }
.about-intro__image--8 { left: 30.76%; top: 639px; width: 5.35%; }
.about-intro__image--9 { left: 77.99%; top: 484px; width: 2.28%; transform: rotate(-9deg); }
.about-intro__image--10 { left: 26.88%; top: 285px; width: 3.06%; }
.about-heading { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; text-align: center; font-size: 27px; line-height: 1.6; letter-spacing: .18em; }
.about-heading > img { width: 19px; height: 30px; object-fit: contain; }
.about-reasons { padding-top: 77px; }
.about-reasons__list { max-width: 910px; margin: 44px auto 0; }
.about-reason { display: grid; grid-template-columns: 374px 1fr; align-items: center; gap: 50px; min-height: 374px; }
.about-reason + .about-reason { margin-top: 50px; }
.about-reason:nth-child(even) { grid-template-columns: 1fr 374px; }
.about-reason:nth-child(even) .about-reason__art { order: 2; }
.about-reason__art { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--c-text) 4%, var(--c-bg)); }
.about-reason__art img { width: 78%; }
.about-reason:nth-child(2) .about-reason__art img { width: 59.1%; }
.about-reason:nth-child(3) .about-reason__art img { width: 63.1%; }
.about-reason__body { position: relative; align-self: start; margin-top: 52px; }
.about-reason__number { position: absolute; top: -49px; right: 0; z-index: 0; font: 500 72px/1 var(--font-en); letter-spacing: .08em; color: color-mix(in srgb, var(--c-text) 5%, var(--c-bg)); }
.about-reason h3 { position: relative; font-size: 20px; letter-spacing: .18em; margin-bottom: 40px; }
.about-reason__body p { font-size: 16px; letter-spacing: .16em; line-height: 1.75; }
.about-comparison { padding-top: 110px; padding-bottom: 200px; }
.about-comparison__list { max-width: 1040px; margin: 62px auto 0; }
.about-comparison__row { display: grid; grid-template-columns: 291px 1fr; align-items: start; gap: 25px; }
.about-comparison__row + .about-comparison__row { margin-top: 60px; }
.about-comparison dt { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 9px 8px; border-right: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); font-size: 20px; white-space: nowrap; letter-spacing: .18em; }
.about-comparison dt img { flex-shrink: 0; object-fit: contain; }
.about-comparison dd { margin: -6px 0 0; font-size: 16px; line-height: 2.25; letter-spacing: .14em; }
.about-comparison strong { color: var(--c-accent); }
.about-audience { position: relative; z-index: 1; padding-top: 77px; }
.about-audience__bubbles { position: relative; max-width: 910px; margin: 38px auto 0; height: 330px; }
.about-audience__bubbles li { position: absolute; display: flex; align-items: center; gap: 10px; padding: 17px 26px; border-radius: 60px; background: color-mix(in srgb, var(--c-text) 8%, var(--c-bg)); font-size: 16px; letter-spacing: .08em; }
.about-audience__bubbles li::after { content: ''; position: absolute; bottom: -17px; right: 31%; width: 30px; height: 24px; background: inherit; clip-path: polygon(0 0,100% 0,0 100%,20% 50%); }
.about-audience__bubbles li:nth-child(1) { top: 0; left: 33.4%; }
.about-audience__bubbles li:nth-child(2) { top: 98px; left: 0; }
.about-audience__bubbles li:nth-child(3) { top: 124px; right: -7%; }
.about-audience__bubbles li:nth-child(4) { top: 222px; left: 14.7%; }
.about-audience__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 46px; height: 46px; border-radius: 50%; background: var(--c-bg); }
.about-audience__icon img { width: 32px; height: 34px; object-fit: contain; }
.about-audience__parade { position: relative; max-width: 734px; margin: 10px auto 0; }
.about-audience__parade > img { display: block; width: 100%; }
.about-audience__parade p { position: absolute; left: 86%; top: 25%; width: 205px; padding: 20px 10px; background: url('../images/pages/about/parade-bubble.svg') center / 100% 100% no-repeat; min-height: 113px; text-align: center; font-size: 12px; line-height: 1.8; }
.about-works { position: relative; margin-top: -90px; padding: 150px 0 80px; background: url('../images/works/bg.svg') center top / cover no-repeat; }
.about-works__heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.about-works__heading p { color: var(--c-bg); font: 400 60px/1.2 var(--font-en); letter-spacing: .08em; }
.about-works h2 { font-size: 27px; margin-top: 12px; }
.about-works__heading .btn { font-size: 18px; }
.about-works__heading .btn span { color: var(--c-accent); }
.about-works__lead { margin-top: 28px; font-size: 14px; letter-spacing: .08em; }
.about-works__cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 70px; margin-top: 45px; }
.about-work > img { width: 100%; aspect-ratio: 366 / 248; object-fit: cover; border-radius: 15px; outline: 5px solid var(--c-bg); }
.about-work h3 { font-size: 16px; margin-top: 22px; letter-spacing: .08em; }
.about-work p { font-size: 12px; margin-top: 4px; letter-spacing: .08em; }
.about-work p::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 9px; background: var(--c-accent); border-radius: 50%; }
.about-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 27px 20px; padding-top: 35px; padding-bottom: 70px; }
.about-link { position: relative; min-height: 252px; padding: 46px 60px; border-radius: 8px; box-shadow: 0 3px 12px color-mix(in srgb,var(--c-heading) 12%,transparent); letter-spacing: .08em; }
.about-link h2 { font-size: 24px; letter-spacing: .12em; }
.about-link p { font-size: 14px; margin-top: 20px; }
.about-link__arrow { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; margin-top: 16px; transition: transform .2s; }
.about-link:hover .about-link__arrow { transform: translateX(5px); }
.about-link--contact { color: var(--c-bg); background: linear-gradient(color-mix(in srgb,var(--c-heading) 70%,transparent),color-mix(in srgb,var(--c-heading) 70%,transparent)),url('../images/pages/about/contact-bg.png') center / cover; }
.about-link--bear { padding: 18px 45px; }
.about-link--bear > img { width: 100%; height: 120px; object-fit: contain; }
.about-link--bear p { margin-top: 8px; padding-left: 130px; }
.about-link--info { grid-column: 1 / -1; background: var(--c-cream) url('../images/pages/about/info-bg.png') center / cover; }
.page-about a:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 5px; }
@media (min-width: 821px) and (max-width: 1200px) {
	.about-intro__text { max-width: 48%; font-size: 14px; }
	.about-intro__text br { display: none; }
	.about-reason, .about-reason:nth-child(even) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px; }
	.about-reason__body { margin-top: 35px; }
	.about-reason h3 { font-size: 18px; margin-bottom: 25px; }
	.about-comparison__row { grid-template-columns: 240px 1fr; }
	.about-comparison dt { font-size: 16px; }
	.about-audience__bubbles li { font-size: 13px; }
	.about-audience__bubbles li:nth-child(3) { right: 0; }
	.about-audience__parade { max-width: 70%; }
	.about-audience__parade p { left: 80%; width: 180px; }
	.about-link { padding: 30px; }
	.about-link--bear p { padding-left: 0; }
	.about-works__cards { gap: 30px; }
}
@media (max-width: 820px) {
	.page-about { letter-spacing: .08em; }
	.about-intro { margin-top: calc(var(--header-h) + 20px); padding-top: 58px; border-radius: 40px 40px 0 0; }
	.about-intro__heading { height: 150px; }
	.about-intro h1 { font-size: clamp(15px,3.8vw,20px); gap: 6px; }
	.about-intro__brand small { font-size: 11px; }
	.about-intro__brand img { width: 142px; }
	.about-intro__arrow { width: 50px; height: 70px; top: 65px; left: calc(50% + 96px); }
	.about-intro__body { min-height: 0; padding: 0 24px 30px; }
	.about-intro__lead { font-size: 17px; line-height: 2.1; letter-spacing: .06em; }
	.about-intro__lead span + span { font-size: 16px; margin-top: 18px; }
	.about-intro__text { max-width: 550px; margin-top: 35px; font-size: 14px; line-height: 2.2; letter-spacing: .06em; }
	.about-intro__text br { display: none; }
	.about-intro__art { position: relative; height: 210px; max-width: 550px; margin: 30px auto 0; }
	.about-intro__image--0 { left: 31%; top: 120px; width: 28%; }
	.about-intro__image--1 { left: 76%; top: 100px; width: 23%; }
	.about-intro__image--2 { left: 0; top: 107px; width: 18%; }
	.about-intro__image--3 { left: 8%; top: 0; width: 22%; }
	.about-intro__image--4 { left: 67%; top: 0; width: 30%; }
	.about-intro__image--5 { left: 57%; top: 36px; width: 17%; }
	.about-intro__image--6 { left: 26%; top: 40px; width: 14%; }
	.about-intro__image--7 { left: 69%; top: 95px; width: 15%; }
	.about-intro__image--8 { left: 55%; top: 160px; width: 12%; }
	.about-intro__image--9 { left: 66%; top: 87px; width: 6%; }
	.about-intro__image--10 { left: 35%; top: 34px; width: 7%; }
	.about-heading { font-size: clamp(19px,4.8vw,25px); gap: 16px; letter-spacing: .1em; }
	.about-reasons { padding-top: 65px; }
	.about-reasons__list { margin-top: 35px; }
	.about-reason, .about-reason:nth-child(even) { display: flex; flex-direction: column; gap: 28px; }
	.about-reason:nth-child(even) .about-reason__art { order: 0; }
	.about-reason + .about-reason { margin-top: 65px; }
	.about-reason__art { width: min(72vw,300px); }
	.about-reason__body { width: 100%; margin-top: 15px; }
	.about-reason__number { font-size: 58px; top: -30px; }
	.about-reason h3 { font-size: 18px; margin-bottom: 22px; letter-spacing: .08em; }
	.about-reason__body p { font-size: 14px; line-height: 2; letter-spacing: .08em; }
	.about-comparison { padding-top: 90px; padding-bottom: 50px; }
	.about-comparison__list { margin-top: 40px; }
	.about-comparison__row { display: block; }
	.about-comparison__row + .about-comparison__row { margin-top: 35px; }
	.about-comparison dt { justify-content: start; font-size: 17px; padding: 10px; letter-spacing: .08em; }
	.about-comparison dd { margin-top: 16px; font-size: 14px; line-height: 2; letter-spacing: .06em; }
	.about-comparison dd p + p { margin-top: 10px; }
	.about-audience { padding-top: 45px; }
	.about-audience__bubbles { height: auto; display: grid; gap: 24px; margin-top: 35px; }
	.about-audience__bubbles li:nth-child(n) { position: relative; inset: auto; padding: 14px 18px; font-size: 13px; letter-spacing: .04em; border-radius: 36px; }
	.about-audience__icon { flex-basis: 36px; height: 36px; }
	.about-audience__icon img { width: 26px; height: 28px; }
	/* 吹き出しの高さをレイアウトに確保し、人物画像への重なりを防ぐ。 */
	.about-audience__parade { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
	.about-audience__parade p { position: relative; inset: auto; order: -1; align-self: flex-end; width: 165px; min-height: 96px; padding: 18px 10px; font-size: 10px; }
	.about-works { margin-top: -25px; padding: 80px 0 45px; }
	.about-works__heading { flex-wrap: wrap; align-items: start; gap: 18px; }
	.about-works__heading p { font-size: 42px; }
	.about-works h2 { font-size: 22px; }
	.about-works__heading .btn { font-size: 14px; padding: 12px 22px; }
	.about-works__lead { font-size: 13px; margin-top: 22px; }
	.about-works__lead br { display: none; }
	.about-works__cards { grid-template-columns: 1fr; gap: 35px; margin-top: 30px; }
	.about-work h3 { font-size: 15px; margin-top: 16px; }
	.about-links { grid-template-columns: 1fr; gap: 20px; padding-top: 25px; padding-bottom: 45px; }
	.about-link { padding: 28px 24px; min-height: 230px; }
	.about-link h2 { font-size: 20px; }
	.about-link p { font-size: 13px; }
	.about-link--bear p { padding-left: 0; text-align: center; }
	/* スマホは文章とサムネイルを縦に分け、背景の拡大による見切れを防ぐ。 */
	.about-link--info { background-image: none; background-color: color-mix(in srgb, var(--c-text) 7%, var(--c-bg)); }
	.about-link--info p { max-width: none; }
	.about-link--info::after {
		content: '';
		display: block;
		width: 100%;
		aspect-ratio: 1117 / 504;
		margin-top: 20px;
		background: url('../images/pages/about/info-bg.png') right bottom / 222.2% 100% no-repeat;
	}
}

/* お問い合わせ：LINEアイコンを画像の白縁が出ないベクター描画にする。 */
.contact-page .cinfo__line-icon {
	display: block;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--c-bg);
}