/* ==========================================================================
   TEYLL — Project: サービス詳細 /teyll/web/・/teyll/sns/・/teyll/design/（page-teyll-detail.php）
   Figma PC 84:86・84:233・84:389／SP 241:215・241:484・241:739（SP の見出しは c-page-header-teyll-sp 236:1783）
   ヒーロー p-teyll-service-hero・できること p-teyll-service-features・Detail p-teyll-service-detail・ほかのサービス p-teyll-service-others
   ページの色：Web＝紫（面の上は白文字）・SNS＝空色・Design＝黄（面の上は紺の文字）
   - SP は同じファイルの中で @media (max-width: 767px) に書く
   ========================================================================== */

/* ==========================================================================
   ヒーロー（左に文、右に図。SP は図を一番下に）
   ========================================================================== */
.p-teyll-service-hero {
	padding: 72px 0;
}

.p-teyll-service-hero--purple {
	--teyll-page-accent: var(--teyll-accent-purple);
	background: var(--teyll-bg-purple-pale);
}

.p-teyll-service-hero--sky {
	--teyll-page-accent: var(--teyll-accent-sky);
	background: var(--teyll-bg-sky-pale);
}

.p-teyll-service-hero--yellow {
	--teyll-page-accent: var(--teyll-accent-yellow);
	background: var(--teyll-bg-yellow-pale);
}

.p-teyll-service-hero__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4xl);
}

.p-teyll-service-hero__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
}

.p-teyll-service-hero__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-sm);
	color: var(--teyll-text-primary);
}

.p-teyll-service-hero__brand {
	font: var(--text-teyll-en-label);
	letter-spacing: var(--ls-teyll-en-label);
	color: var(--teyll-text-secondary);
}

.p-teyll-service-hero__name {
	font: var(--text-teyll-en-hero);
	letter-spacing: var(--ls-teyll-en-hero);
	white-space: nowrap;
}

.p-teyll-service-hero__shape {
	display: block;
	width: 120px;
	height: 10px;
	background: var(--teyll-page-accent);
	border-radius: 5px;
}

.p-teyll-service-hero__copy {
	font: var(--text-teyll-h2);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-service-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.p-teyll-service-hero__tag {
	padding: 4px var(--space-sm);
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	background: var(--teyll-bg-canvas);
	border-radius: var(--radius-full);
}

/* 図：ロゴの三角（そのサービスの線だけ色）と、影の付いた画面の見本（位置は 520×380 の中の割合） */
.p-teyll-service-hero__visual {
	position: relative;
	flex: 0 0 min(520px, 45%);
	aspect-ratio: 520 / 380;
}

.p-teyll-service-hero__mark {
	position: absolute;
	top: -2.63%;
	left: 11.54%;
	width: 80.53%;
	height: auto;
}

.p-teyll-service-hero__screen {
	position: absolute;
	width: 60.58%;
	height: 53.29%;
	overflow: hidden;
	background: var(--teyll-bg-canvas);
	border-radius: var(--radius-md);
	box-shadow: 0 16px 40px rgba(32, 50, 73, 0.14); /* Figma の影（画面の見本） */
}

.p-teyll-service-hero__visual--web .p-teyll-service-hero__screen {
	top: 44.74%;
	left: 0;
}

.p-teyll-service-hero__visual--sns .p-teyll-service-hero__screen {
	top: 39.47%;
	left: 46.15%;
}

.p-teyll-service-hero__visual--design .p-teyll-service-hero__screen {
	top: 10.53%;
	left: 25%;
}

@media (max-width: 1023px) {
	.p-teyll-service-hero {
		overflow: hidden;
	}

	.p-teyll-service-hero__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.p-teyll-service-hero__visual {
		flex: none;
		align-self: center;
		width: 100%;
		max-width: 520px;
	}
}

@media (max-width: 767px) {
	.p-teyll-service-hero {
		padding: 4px 0 40px; /* Figma c-page-header-teyll-sp の下の余白 */
	}

	.p-teyll-service-hero__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
	}

	.p-teyll-service-hero__body {
		gap: var(--space-md);
	}

	.p-teyll-service-hero__title {
		gap: 0 10px;
	}

	.p-teyll-service-hero__shape {
		width: 80px;
		height: 8px;
		border-radius: 4px;
	}

	.p-teyll-service-hero__button {
		align-self: stretch;
	}

	.p-teyll-service-hero__visual {
		max-width: none;
	}

	.p-teyll-service-hero__screen {
		border-radius: 5px; /* PC の 8px を図と同じ割合で縮めた値 */
		box-shadow: 0 10px 26px rgba(32, 50, 73, 0.14);
	}

	/* SNS の画面の見本は、PC では図の枠から右へ少しはみ出す位置（Figma）。SP では画面の端で切れて角が欠けるので、
	   図の右端（左右の余白 20px の内側）にそろえる（Web の見本が左端にそろうのと対に） */
	.p-teyll-service-hero__visual--sns .p-teyll-service-hero__screen {
		right: 0;
		left: auto;
	}
}

/* ==========================================================================
   できること（4列の格子。最後の行は左に寄せる。SP は2列）
   ========================================================================== */
.p-teyll-service-features {
	padding: var(--space-6xl) 0;
}

.p-teyll-service-features__inner {
	display: flex;
	flex-direction: column;
	gap: var(--teyll-head-gap);
}

.p-teyll-service-features__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
}

.p-teyll-service-features__item {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 20px;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	background: var(--teyll-bg-subtle);
	border-radius: var(--radius-teyll-card);
}

.p-teyll-service-features__dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.p-teyll-service-features__label {
	min-width: 0;
	word-break: keep-all; /* 折り返すのは <wbr> の所だけ（「オリジナル／デザイン」。teyll/helpers.php の {wbr}） */
}

.p-teyll-service-features__list--purple .p-teyll-service-features__dot {
	background: var(--teyll-accent-purple);
}

.p-teyll-service-features__list--sky .p-teyll-service-features__dot {
	background: var(--teyll-accent-sky);
}

.p-teyll-service-features__list--yellow .p-teyll-service-features__dot {
	background: var(--teyll-accent-yellow);
}

@media (max-width: 1023px) {
	.p-teyll-service-features__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.p-teyll-service-features {
		padding: var(--teyll-section-py) 0;
	}

	.p-teyll-service-features__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 11px;
	}

	.p-teyll-service-features__item {
		gap: var(--space-xs);
		padding: 14px var(--space-sm);
	}

	.p-teyll-service-features__dot {
		width: 8px;
		height: 8px;
	}
}

/* 374px 以下（360px の端末など）は「オリジナルデザイン」の「ン」だけが次の行に落ちるので、左右の余白を少し詰める */
@media (max-width: 374px) {
	.p-teyll-service-features__item {
		padding-inline: var(--space-xs);
	}
}

/* ==========================================================================
   Detail（ロゴの色の面。紫の上は白文字、空色・黄の上は紺の文字。本文は薄くしない）
   ========================================================================== */
.p-teyll-service-detail {
	padding: var(--space-6xl) 0;
	color: var(--teyll-text-primary);
}

.p-teyll-service-detail--purple {
	color: var(--teyll-text-on-dark);
	background: var(--teyll-accent-purple);
	--focus-color: var(--teyll-text-on-dark);
}

.p-teyll-service-detail--sky {
	background: var(--teyll-accent-sky);
}

.p-teyll-service-detail--yellow {
	background: var(--teyll-accent-yellow);
}

.p-teyll-service-detail__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5xl);
}

.p-teyll-service-detail__inner > .p-teyll-title {
	flex: 0 0 320px;
	color: inherit;
}

.p-teyll-service-detail .p-teyll-title__ja {
	color: inherit;
}

.p-teyll-service-detail__body {
	display: flex;
	flex: 0 1 680px;
	flex-direction: column;
	gap: 20px;
}

.p-teyll-service-detail__title {
	font: var(--text-teyll-h2);
	letter-spacing: var(--ls-teyll);
}

@media (max-width: 1023px) {
	.p-teyll-service-detail__inner {
		gap: var(--space-3xl);
	}

	.p-teyll-service-detail__inner > .p-teyll-title {
		flex-basis: 200px;
	}

	.p-teyll-service-detail__text .u-pc-br {
		display: none;
	}
}

/* 768〜1099px は本文の幅が PC より狭いので、PC の行に合わせた改行（{br}）も入れずに自然に折り返す（短い行ができないように） */
@media (min-width: 768px) and (max-width: 1099px) {
	.p-teyll-service-detail__text br:not(.u-sp-br) {
		display: none;
	}

	.p-teyll-service-detail__text {
		text-wrap: pretty;
	}
}

@media (max-width: 767px) {
	.p-teyll-service-detail {
		padding: var(--teyll-section-py) 0;
	}

	.p-teyll-service-detail__inner {
		flex-direction: column;
		gap: var(--space-xl);
	}

	.p-teyll-service-detail__inner > .p-teyll-title {
		flex: none;
	}

	.p-teyll-service-detail__body {
		flex: none;
		gap: var(--space-md);
	}
}

/* ==========================================================================
   ほかのサービス（PC は2つ横に、SP は縦に）
   ========================================================================== */
.p-teyll-service-others {
	padding: 0 0 var(--space-5xl); /* Figma の枠の高さ 199px（一覧の下 80px） */
}

.p-teyll-service-others__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

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

.p-teyll-service-others__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-lg);
}

.p-teyll-service-others__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 59px;
	padding: var(--space-sm) var(--space-xl);
	color: var(--teyll-text-primary);
	text-decoration: none;
	border: 1.5px solid var(--teyll-border-default);
	border-radius: var(--radius-lg);
	transition: border-color 0.2s;
}

.p-teyll-service-others__link:hover {
	border-color: var(--teyll-text-primary);
}

.p-teyll-service-others__row {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font: var(--text-teyll-en-label);
	letter-spacing: var(--ls-teyll-en-label);
}

.p-teyll-service-others__dot {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.p-teyll-service-others__link--purple .p-teyll-service-others__dot {
	background: var(--teyll-accent-purple);
}

.p-teyll-service-others__link--sky .p-teyll-service-others__dot {
	background: var(--teyll-accent-sky);
}

.p-teyll-service-others__link--yellow .p-teyll-service-others__dot {
	background: var(--teyll-accent-yellow);
}

.p-teyll-service-others__icon {
	width: 20px;
	height: 20px;
}

@media (max-width: 767px) {
	.p-teyll-service-others {
		padding-bottom: var(--teyll-section-py);
	}

	.p-teyll-service-others__inner {
		gap: var(--space-md);
	}

	.p-teyll-service-others__list {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
		gap: var(--space-sm);
	}

	.p-teyll-service-others__link {
		padding: 20px;
	}
}