/* ==========================================================================
   TEYLL — Project: トップ /teyll/（page-teyll.php。Figma 06 PC TEYLL 57:1287・06 SP TEYLL 238:2728）
   ヒーロー p-teyll-hero・Purpose p-teyll-purpose・Service p-teyll-service・Reason p-teyll-reason・
   Service Details p-teyll-detail・Q&A p-teyll-faq（流れ p-teyll-flow とお問い合わせの帯 l-cta-teyll は別のファイル）
   - SP は同じファイルの中で @media (max-width: 767px) に書く
   ========================================================================== */

/* ==========================================================================
   ヒーロー（左にキャッチ・リード・ボタン、右にロゴの三角と各サービスの札）
   ========================================================================== */
.p-teyll-hero {
	position: relative;
	overflow: hidden;
	background: var(--teyll-bg-canvas);
}

.p-teyll-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 760px;
	padding-top: 168px;
	padding-bottom: 81px;
}

.p-teyll-hero__catch,
.p-teyll-hero__lead,
.p-teyll-hero__buttons {
	position: relative;
	z-index: 1;
}

.p-teyll-hero__catch {
	font: 700 var(--fs-teyll-hero)/1.4 var(--font-teyll-ja);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
}

.p-teyll-hero__lead {
	max-width: 580px;
	margin-top: var(--space-lg);
	color: var(--teyll-text-secondary);
}

.p-teyll-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: 36px;
}

/* ロゴの三角（右は画面の外で切れる）と札。札の位置は三角の左上からの距離 */
.p-teyll-hero__visual {
	position: absolute;
	top: 17px;
	left: calc(50% + 10px);
	width: 760px;
	height: 726px;
}

.p-teyll-hero__mark {
	width: 100%;
	height: 100%;
}

.p-teyll-hero__chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: var(--space-sm) 22px var(--space-sm) 18px;
	font: var(--text-teyll-en-label);
	letter-spacing: var(--ls-teyll-en-label);
	color: var(--teyll-text-primary);
	white-space: nowrap;
	background: var(--teyll-bg-canvas);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-teyll-float);
}

.p-teyll-hero__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.p-teyll-hero__chip--web {
	top: 274px;
	left: 432px;
}

.p-teyll-hero__chip--sns {
	top: 371px;
	left: 125px;
}

.p-teyll-hero__chip--design {
	top: 625px;
	left: 349px;
}

.p-teyll-hero__chip--web .p-teyll-hero__dot {
	background: var(--teyll-accent-purple);
}

.p-teyll-hero__chip--sns .p-teyll-hero__dot {
	background: var(--teyll-accent-sky);
}

.p-teyll-hero__chip--design .p-teyll-hero__dot {
	background: var(--teyll-accent-yellow);
}

/* 1024〜1199px は三角を小さくして文と重ならないようにする */
@media (min-width: 1024px) and (max-width: 1199px) {
	.p-teyll-hero__inner {
		min-height: 640px;
		padding-top: 120px;
	}

	.p-teyll-hero__visual {
		top: 40px;
		left: calc(50% + 40px);
		transform: scale(0.72);
		transform-origin: top left;
	}

	.p-teyll-hero__catch {
		font-size: 44px;
	}

	.p-teyll-hero__lead {
		max-width: calc(50% + 20px);
		text-wrap: pretty;
	}

	/* 文の幅が狭いので、PC の行に合わせた改行は入れない（「ホームページ制作・」だけの行ができないように） */
	.p-teyll-hero__lead br:not(.u-sp-br) {
		display: none;
	}
}

/* 1023px 以下は SP と同じ並び（キャッチ → 三角と札 → リード → ボタン） */
@media (max-width: 1023px) {
	.p-teyll-hero__inner {
		gap: var(--space-xl);
		min-height: 0;
		padding-top: var(--space-4xl);
		padding-bottom: var(--space-5xl);
	}

	.p-teyll-hero__lead,
	.p-teyll-hero__buttons {
		margin-top: 0;
	}

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

	.p-teyll-hero__visual {
		position: relative;
		top: auto;
		left: auto;
		align-self: center;
		width: 100%;
		max-width: 480px;
		height: auto;
		aspect-ratio: 335 / 270;
	}

	.p-teyll-hero__mark {
		position: absolute;
		top: 1.48%;
		left: 13.13%;
		width: 81.67%;
		height: auto;
	}

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

	.p-teyll-hero__dot {
		width: 10px;
		height: 10px;
	}

	.p-teyll-hero__chip--web {
		top: 31.85%;
		left: 53.73%;
	}

	.p-teyll-hero__chip--sns {
		top: 47.41%;
		left: 11.94%;
	}

	.p-teyll-hero__chip--design {
		top: 79.26%;
		left: 47.76%;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.p-teyll-hero__catch {
		font-size: 44px;
	}
}

@media (max-width: 767px) {
	.p-teyll-hero__inner {
		padding-top: 32px;
	}

	.p-teyll-hero__visual {
		max-width: 375px;
	}

	.p-teyll-hero__buttons {
		flex-direction: column;
		align-self: stretch;
		gap: var(--space-sm);
	}
}

/* ==========================================================================
   Purpose（紺の面）
   ========================================================================== */
.p-teyll-purpose {
	padding: var(--teyll-section-py) 0;
	color: var(--teyll-text-on-dark);
	background: var(--teyll-bg-navy);
}

.p-teyll-purpose__inner {
	display: flex;
	align-items: flex-start;
	gap: 96px;
}

.p-teyll-purpose__head {
	display: flex;
	flex: 0 0 420px;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3xl);
}

.p-teyll-purpose__mark {
	width: 176px;
	height: auto;
}

.p-teyll-purpose__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 28px;
}

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

.p-teyll-purpose__text {
	opacity: 0.85;
}

@media (max-width: 1199px) {
	.p-teyll-purpose__inner {
		gap: var(--space-4xl);
	}

	.p-teyll-purpose__head {
		flex-basis: 280px;
	}
}

@media (max-width: 767px) {
	.p-teyll-purpose__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.p-teyll-purpose__head {
		flex: none;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.p-teyll-purpose__mark {
		width: 88px;
	}

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

/* ==========================================================================
   Service（3つのサービスのカード・相談の箱）
   ========================================================================== */
.p-teyll-service {
	padding: var(--teyll-section-py) 0;
	background: var(--teyll-bg-subtle);
}

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

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

.p-teyll-service__item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--teyll-bg-canvas);
	border-radius: var(--radius-lg);
}

.p-teyll-service__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xs);
	padding: 28px var(--space-xl);
	color: var(--teyll-text-primary);
}

.p-teyll-service__item--purple .p-teyll-service__head {
	color: var(--teyll-text-on-dark);
	background: var(--teyll-accent-purple);
}

.p-teyll-service__item--sky .p-teyll-service__head {
	background: var(--teyll-accent-sky);
}

.p-teyll-service__item--yellow .p-teyll-service__head {
	background: var(--teyll-accent-yellow);
}

.p-teyll-service__name {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	font: 700 var(--fs-teyll-service-name)/1.1 var(--font-teyll-en);
	letter-spacing: var(--ls-teyll-en-h1);
	white-space: nowrap;
}

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

.p-teyll-service__mark {
	flex-shrink: 0;
	width: 60px;
	height: auto;
}

.p-teyll-service__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: var(--space-xl) var(--space-xl) 36px;
}

.p-teyll-service__tags,
.p-teyll-service__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.p-teyll-service__tag {
	padding: 3px 10px;
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	border-radius: var(--radius-full);
}

.p-teyll-service__item--purple .p-teyll-service__tag {
	background: var(--teyll-bg-purple-pale);
}

.p-teyll-service__item--sky .p-teyll-service__tag {
	background: var(--teyll-bg-sky-pale);
}

.p-teyll-service__item--yellow .p-teyll-service__tag {
	background: var(--teyll-bg-yellow-pale);
}

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

.p-teyll-service__label {
	padding: 4px 10px;
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
	border: 1px solid var(--teyll-border-default);
	border-radius: var(--radius-sm);
}

.p-teyll-service__labels {
	margin-bottom: 21px; /* Figma の伸びる余白（いちばん長いカードで約 3px）＋間 18px */
}

.p-teyll-service__button {
	margin-top: auto; /* カードの高さをそろえ、ボタンを下にそろえる */
}

/*
 * 「詳細はこちら」はほかのボタンと同じ高さ（PC 57・SP 56）。Figma はこのボタンだけ線の太さを高さに含めていて 60／59 だったが、
 * Figma の作りの誤りなので、Figma の方をそろえる（TODO「Figma に反映すること」・2026-10-02 監視役）
 */

.p-teyll-service__consult {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	padding: var(--space-xl) var(--space-2xl);
	background: var(--teyll-bg-canvas);
	border-radius: var(--radius-lg);
}

.p-teyll-service__consult-mark {
	flex-shrink: 0;
	width: 72px;
	height: auto;
}

.p-teyll-service__consult-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
}

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

.p-teyll-service__consult-text {
	color: var(--teyll-text-secondary);
}

@media (max-width: 1199px) {
	.p-teyll-service__list {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
	}
}

@media (max-width: 1023px) {
	.p-teyll-service__consult {
		flex-wrap: wrap;
	}

	.p-teyll-service__consult-body {
		flex-basis: calc(100% - 104px);
	}
}

@media (max-width: 767px) {
	.p-teyll-service__list {
		gap: var(--space-md);
	}

	.p-teyll-service__head {
		padding: var(--space-lg) var(--space-xl);
	}

	.p-teyll-service__body {
		gap: var(--space-md);
		padding: var(--space-xl) var(--space-xl) 28px;
	}

	.p-teyll-service__labels {
		margin-bottom: 0;
	}

	.p-teyll-service__button {
		margin-top: 0;
	}

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

	.p-teyll-service__consult-body {
		gap: var(--space-xs);
	}
}

/* ==========================================================================
   Reason（2列×2行。同じ行の箱は高さをそろえる）
   ========================================================================== */
.p-teyll-reason {
	padding: var(--teyll-section-py) 0;
	background: var(--teyll-bg-canvas);
}

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

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

.p-teyll-reason__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	padding: 36px;
	background: var(--teyll-bg-subtle);
	border-radius: var(--radius-lg);
}

.p-teyll-reason__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 64px;
	height: 64px;
	color: var(--teyll-text-primary);
	border-radius: var(--radius-lg);
}

.p-teyll-reason__icon .c-teyll-icon {
	width: 30px;
	height: 30px;
}

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

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

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

.p-teyll-reason__icon--green {
	background: var(--teyll-accent-green);
}

.p-teyll-reason__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

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

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

@media (max-width: 1023px) {
	.p-teyll-reason__list {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
	}
}

@media (max-width: 767px) {
	.p-teyll-reason__list {
		gap: var(--space-sm);
	}

	.p-teyll-reason__item {
		flex-direction: column;
		gap: var(--space-md);
		padding: var(--space-xl);
	}

	.p-teyll-reason__icon {
		width: 48px;
		height: 48px;
	}

	.p-teyll-reason__icon .c-teyll-icon {
		width: 24px;
		height: 24px;
	}
}

/* ==========================================================================
   Service Details（図と文を左右に。2つ目は左右を入れ替える）
   ========================================================================== */
.p-teyll-detail {
	padding: var(--teyll-section-py) 0;
	background: var(--teyll-bg-subtle);
}

.p-teyll-detail__inner,
.p-teyll-detail__list {
	display: flex;
	flex-direction: column;
	gap: var(--teyll-head-gap);
}

.p-teyll-detail__item {
	display: flex;
	align-items: center;
	gap: var(--space-5xl);
}

.p-teyll-detail__item:nth-child(2n) {
	flex-direction: row-reverse;
}

.p-teyll-detail__visual {
	position: relative;
	flex: 0 0 min(520px, 45%);
	overflow: hidden;
	aspect-ratio: 520 / 360;
	border-radius: var(--radius-teyll-visual);
}

.p-teyll-detail__visual--purple {
	background: var(--teyll-bg-purple-pale);
}

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

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

.p-teyll-detail__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.p-teyll-detail__tag {
	position: absolute;
	top: var(--space-md);
	left: var(--space-lg);
	padding: 6px 14px;
	font: var(--text-teyll-en-label);
	letter-spacing: var(--ls-teyll-en-label);
	background: var(--teyll-bg-canvas);
	border-radius: var(--radius-full);
}

.p-teyll-detail__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

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

.p-teyll-detail__body {
	color: var(--teyll-text-secondary);
}

@media (max-width: 1023px) {
	.p-teyll-detail__item,
	.p-teyll-detail__item:nth-child(2n) {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-xl);
	}

	.p-teyll-detail__visual {
		flex: none;
		width: 100%;
		max-width: 520px;
	}
}

@media (max-width: 767px) {
	.p-teyll-detail__list {
		gap: 48px; /* Figma SP の値 */
	}

	.p-teyll-detail__item,
	.p-teyll-detail__item:nth-child(2n) {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.p-teyll-detail__visual {
		flex: none;
		width: 100%;
	}

	.p-teyll-detail__tag {
		top: var(--space-sm);
		left: var(--space-md);
		padding: 4px 10px;
	}

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

/* ==========================================================================
   Q&A（左に見出し、右に質問。1問目だけ開いた状態）
   ========================================================================== */
.p-teyll-faq {
	padding: var(--teyll-section-py) 0;
	background: var(--teyll-bg-canvas);
}

.p-teyll-faq__inner {
	display: flex;
	align-items: flex-start;
	gap: 96px;
}

.p-teyll-faq__inner > .p-teyll-title {
	flex: 0 0 300px;
}

.p-teyll-faq__list {
	flex: 1;
	min-width: 0;
	border-top: 1px solid var(--teyll-border-default);
}

.p-teyll-faq__item {
	border-bottom: 1px solid var(--teyll-border-default);
}

.p-teyll-faq__button {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 26px 0;
	text-align: left;
	color: var(--teyll-text-primary);
	background: none;
	border: 0;
}

.p-teyll-faq__button:hover .p-teyll-faq__q-text {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.p-teyll-faq__mark {
	flex-shrink: 0;
	font: 700 var(--fs-teyll-faq-mark)/1.1 var(--font-teyll-en);
	letter-spacing: -0.01em;
	color: var(--teyll-text-link);
}

.p-teyll-faq__mark--a {
	color: var(--teyll-text-secondary);
}

.p-teyll-faq__q-text {
	flex: 1;
	font: 700 var(--fs-teyll-faq-q)/1.6 var(--font-teyll-ja);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-faq__toggle {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background: var(--teyll-text-primary);
	-webkit-mask: url("../../img/teyll/icons/plus.svg") center / contain no-repeat;
	mask: url("../../img/teyll/icons/plus.svg") center / contain no-repeat;
}

.p-teyll-faq__button[aria-expanded="true"] .p-teyll-faq__toggle {
	-webkit-mask-image: url("../../img/teyll/icons/minus.svg");
	mask-image: url("../../img/teyll/icons/minus.svg");
}

.p-teyll-faq__answer {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: -12px; /* 問いとの間 14px（問いの下の余白 26px から詰める） */
	padding-bottom: 26px;
	color: var(--teyll-text-secondary);
}

.p-teyll-faq__answer[hidden] {
	display: none;
}

.p-teyll-faq__mark--a {
	width: 21px;
}

.p-teyll-faq__a-text {
	max-width: 680px;
}

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

	.p-teyll-faq__inner > .p-teyll-title {
		flex-basis: 180px;
	}
}

@media (max-width: 767px) {
	.p-teyll-faq__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

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

	.p-teyll-faq__button {
		gap: var(--space-sm);
		padding: 20px 0;
	}

	.p-teyll-faq__answer {
		gap: var(--space-sm);
		margin-top: -8px;
		padding-bottom: 20px;
	}

	.p-teyll-faq__mark--a {
		width: 18px;
	}
}

/* ==========================================================================
   768〜1099px の折り返し（本文の幅が PC より狭いので、PC の行に合わせた改行と自然な折り返しが重ならないように）
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1099px) {
	.p-teyll-purpose__text,
	.p-teyll-reason__text,
	.p-teyll-detail__body {
		text-wrap: pretty;
	}
}

/* Service Details は文の列が Figma（600px）より狭い 1279px まで、PC の行に合わせた改行を入れない
   （見出しは語のまとまりの境目で、本文は自然に折り返す） */
@media (min-width: 768px) and (max-width: 1279px) {
	.p-teyll-detail__title .u-pc-br,
	.p-teyll-detail__body br:not(.u-sp-br) {
		display: none;
	}
}

/* ==========================================================================
   359px 以下（320px の端末など）
   ========================================================================== */
@media (max-width: 359px) {
	/* Purpose：見出しとロゴの三角が横に並びきらず「Purpos／e」と折れるので、間を詰める */
	.p-teyll-purpose__head {
		gap: var(--space-md);
	}

	/* Service：「TEYLL For Design」と三角が1行に入らず、三角が箱の外にはみ出すので、名前を画面の幅に合わせて小さく・三角も小さく */
	.p-teyll-service__name {
		font-size: 7.2vw;
	}

	.p-teyll-service__mark {
		width: 48px;
	}
}