/* ==========================================================================
   TEYLL — 業種別のページ（page-teyll-industry.php。Figma 06 TEYLL の 1345:93895・1345:94022・1345:94149／SP 1398:10009・1399:10263・1400:10509）
   - WORRY：お悩みのカード3枚（白・角 32・中の余白 32。アイコンの丸 56 → 題 → 線 → 「TEYLL なら」）。横に並べて高さをそろえる
   - CASE（制作事例。塗装・建設・リフォームとスクールだけ。class は p-teyll-industry-sample__*）：見出しは Size=L・見出しから中身まで 96。
     左に制作事例の画面（画像 720＋影）、右に題・作ったもの・ボタン（424）。SP は画像の代わりに淡い紫の面（角 32）にスマホの画面だけ・左上に札
   - PLAN：料金のカード（スタンダード）とページ構成の白い箱（角 32）。高さをそろえる。SP は縦に・ページは 2×2
   - OPTION：サービスのカード3枚（PC は横に3つ。SP は横に送る列＝c-teyll-carousel）
   - 運営の白い面（塗装・建設・リフォームだけ）：左右 60 あけて角 48。写真の丸 160 → 題・文 → ボタン
   ========================================================================== */

/* ---------- WORRY ---------- */
.p-teyll-industry-worry__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-teyll-industry-worry__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-industry-worry__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--teyll-bg-purple-pale);
	color: var(--teyll-text-primary);
}

.p-teyll-industry-worry__icon--sky {
	background: var(--teyll-bg-sky-pale);
}

.p-teyll-industry-worry__icon--yellow {
	background: var(--teyll-bg-yellow-pale);
}

.p-teyll-industry-worry__title {
	font: var(--text-teyll-h4);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-industry-worry__answer {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--teyll-border-default);
}

.p-teyll-industry-worry__answer-label {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
}

.p-teyll-industry-worry__answer-text {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ---------- SAMPLE・CASE ---------- */
.p-teyll-industry-sample__head {
	margin-bottom: 96px;
}

.p-teyll-industry-sample__body {
	display: flex;
	align-items: center;
	gap: 56px;
}

.p-teyll-industry-sample__visual {
	flex: 0 1 720px;
	min-width: 0;
}

/* 画像は右へ 40（影の分）はみ出す（Figma の画面の幅 720 に、右の影を足した 760 で書き出した） */
.p-teyll-industry-sample__image {
	display: block;
	width: calc(100% * 760 / 720);
	max-width: none;
	height: auto;
}

.p-teyll-industry-sample__panel {
	display: none;
}

.p-teyll-industry-sample__features {
	display: flex;
	flex: 1 1 424px;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.p-teyll-industry-sample__features-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.p-teyll-industry-sample__features-title {
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-industry-sample__meta {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

.p-teyll-industry-sample__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-teyll-industry-sample__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-industry-sample__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--teyll-bg-green-pale);
	color: var(--teyll-green-700);
}

.p-teyll-industry-sample__link {
	align-self: flex-start;
}

.p-teyll-industry-sample__note {
	font: var(--text-teyll-caption);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ---------- PLAN ---------- */
.p-teyll-industry-plan__body {
	display: grid;
	grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
	gap: 24px;
}

.p-teyll-industry-plan__sitemap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-industry-plan__sitemap-title {
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-industry-plan__sitemap-lead {
	margin-top: -8px; /* 題からリードまで 16（Figma） */
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

.p-teyll-industry-plan__tree {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.p-teyll-industry-plan__top {
	padding: 12px 32px;
	border-radius: var(--radius-full);
	background: var(--teyll-bg-purple-pale);
	font: var(--text-teyll-h4);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-industry-plan__line {
	display: block;
	width: 2px;
	height: 24px;
	background: var(--teyll-border-input);
}

.p-teyll-industry-plan__pages {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 16px;
	border-radius: 24px;
	background: var(--teyll-bg-subtle);
	list-style: none;
}

.p-teyll-industry-plan__page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 74px;
	padding: 16px 12px;
	border-radius: 16px;
	background: var(--teyll-bg-canvas);
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	text-align: center;
}

.p-teyll-industry-plan__link {
	align-self: flex-start;
}

/* ---------- OPTION（PC は横に3つ。SP は横に送る列） ---------- */
@media (min-width: 768px) {
	.p-teyll-industry-options__track {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
		cursor: auto;
	}

	.p-teyll-industry-options .c-teyll-carousel-nav {
		display: none;
	}
}

.p-teyll-industry__option {
	display: flex;
	min-width: 0;
}

/* ---------- 運営の白い面（塗装・建設・リフォームだけ） ---------- */
.p-teyll-industry-owner {
	padding-top: 40px;
}

.p-teyll-industry-owner__panel {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-inline: max(20px, calc((100% - 1320px) / 2));
	padding: 56px clamp(24px, 4.2vw, 60px);
	border-radius: var(--radius-teyll-panel);
	background: var(--teyll-bg-canvas);
}

.p-teyll-industry-owner__photo {
	flex: none;
	width: 160px;
	height: 160px;
	overflow: hidden;
	border-radius: 50%;
}

.p-teyll-industry-owner__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-teyll-industry-owner__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.p-teyll-industry-owner__title {
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-industry-owner__text {
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

.p-teyll-industry-owner__link {
	flex: none;
}

/* ---------- 狭い PC（1023px 以下） ---------- */
@media (max-width: 1023px) {
	.p-teyll-industry-worry__list {
		grid-template-columns: minmax(0, 1fr);
		max-width: 640px;
	}

	.p-teyll-industry-sample__body {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
	}

	.p-teyll-industry-sample__visual {
		flex: none;
		width: min(100%, 720px);
	}

	.p-teyll-industry-sample__features {
		flex: none;
	}

	.p-teyll-industry-plan__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-teyll-industry-plan__pages {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-teyll-industry-owner__panel {
		flex-wrap: wrap;
	}
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.p-teyll-industry-worry__list {
		gap: 16px;
		max-width: none;
	}

	.p-teyll-industry-worry__card {
		padding: 24px;
	}

	.p-teyll-industry-sample__head {
		margin-bottom: 32px;
	}

	.p-teyll-industry-sample__body {
		gap: 32px;
	}

	.p-teyll-industry-sample__visual {
		display: none;
	}

	/* 淡い紫の面にスマホの画面（画像は影を含めて 317 幅）・左上に札 */
	.p-teyll-industry-sample__panel {
		position: relative;
		display: flex;
		justify-content: center;
		padding-top: 37px;
		overflow: hidden;
		border-radius: var(--radius-teyll-card);
		background: var(--teyll-bg-purple-pale);
	}

	.p-teyll-industry-sample__panel .c-teyll-tag {
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 1;
	}

	.p-teyll-industry-sample__image-sp {
		display: block;
		width: 317px;
		max-width: none;
		height: auto;
	}

	.p-teyll-industry-sample__features {
		gap: 20px;
	}

	.p-teyll-industry-sample__list {
		gap: 12px;
	}

	.p-teyll-industry-sample__item {
		align-items: flex-start;
	}

	.p-teyll-industry-sample__item-text {
		padding-top: 1px;
	}

	.p-teyll-industry-sample__link,
	.p-teyll-industry-plan__link {
		align-self: stretch;
	}

	.p-teyll-industry-plan__body {
		gap: 16px;
	}

	.p-teyll-industry-plan__sitemap {
		gap: 20px;
		padding: 24px 20px;
	}

	.p-teyll-industry-plan__pages {
		gap: 8px;
		padding: 12px;
	}

	.p-teyll-industry-plan__page {
		min-height: 64px;
		padding: 8px;
	}

	.p-teyll-industry-owner {
		padding-top: 16px;
	}

	.p-teyll-industry-owner__panel {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-inline: 12px;
		padding: 48px 16px 40px;
		border-radius: var(--radius-teyll-card);
	}

	.p-teyll-industry-owner__photo {
		width: 120px;
		height: 120px;
	}

	.p-teyll-industry-owner__title {
		font: var(--text-teyll-h2); /* SP/H2 22 */
	}

	.p-teyll-industry-owner__link {
		align-self: stretch;
	}
}