/* ==========================================================================
   TEYLL（assets/css/teyll/）— Project（p-: 複数のページで使う形）
   ボタン p-teyll-button・見出し p-teyll-title・パンくず p-teyll-breadcrumb・流れ p-teyll-flow・相談の帯 p-teyll-cta
   ページだけの形は project-top.css（トップ）・project-detail.css（サービス詳細）・project-contact.css（お問い合わせ）
   - SP は同じファイルの中で @media (max-width: 767px) に書く
   ========================================================================== */

/* ---------- ボタン（primary: インディゴの塗り／secondary: 白地・紺の枠線。赤は使わない） ----------
   枠線は box-shadow の内側の線で描く（Chrome は 1.5px の border を 1px で描き、高さも Figma より低くなるため。
   Figma と同じく、枠線は余白の内側に重なり高さに含めない）。線の色は --teyll-button-line で変える */
.p-teyll-button {
	--teyll-button-line: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	min-height: 44px;
	padding: 18px 24px 18px 28px; /* Figma の余白（高さ PC 57） */
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: 0;
	border-radius: var(--radius-md);
	box-shadow: inset 0 0 0 1.5px var(--teyll-button-line);
	transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.p-teyll-button--primary {
	--teyll-button-line: var(--teyll-action-cta);
	color: var(--teyll-text-on-dark);
	background: var(--teyll-action-cta);
}

.p-teyll-button--primary:hover {
	--teyll-button-line: var(--teyll-action-cta-hover);
	background: var(--teyll-action-cta-hover);
}

.p-teyll-button--secondary {
	--teyll-button-line: var(--teyll-text-primary);
	color: var(--teyll-text-primary);
	background: var(--teyll-bg-canvas);
}

.p-teyll-button--secondary:hover {
	background: var(--teyll-bg-subtle);
}

.p-teyll-button__icon {
	width: 18px;
	height: 18px;
}

/* 強制カラー（Windows のハイコントラスト）では影が消えるので、枠線で形を見せる */
@media (forced-colors: active) {
	.p-teyll-button {
		border: 1px solid ButtonText;
	}
}

@media (max-width: 767px) {
	.p-teyll-button {
		display: flex;
		width: 100%;
		min-height: 56px; /* Figma SP の高さ（文字 13px の行 19.5px＋余白 18×2 を 56 にそろえる） */
	}
}

/* ---------- 見出し（大きい英字＋小さい和文） ---------- */
.p-teyll-title {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--teyll-text-primary);
}

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

.p-teyll-title__ja {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-link);
}

.p-teyll-title--inverse,
.p-teyll-title--inverse .p-teyll-title__ja {
	color: var(--teyll-text-on-dark);
}

/* ---------- パンくず（下層ページの見出しの上） ---------- */
.p-teyll-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--teyll-text-primary);
}

.p-teyll-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 44px;
	color: var(--teyll-text-secondary);
	text-decoration: none;
}

.p-teyll-breadcrumb__link:hover {
	text-decoration: underline;
}

/* PC は行の高さ（約 25px）で並べ、押せる範囲だけ 44px に広げる（SP は Figma も 44px の行） */
@media (min-width: 768px) {
	.p-teyll-breadcrumb__link {
		margin-block: -9.5px;
	}
}

.p-teyll-breadcrumb__home {
	width: 14px;
	height: 14px;
}

.p-teyll-breadcrumb__sep {
	width: 12px;
	height: 12px;
	color: var(--teyll-text-secondary);
}

/* ---------- ご利用までの流れ（トップ・サービス詳細） ---------- */
.p-teyll-flow {
	padding: var(--teyll-section-py) 0;
	background: var(--teyll-bg-canvas);
}

.p-teyll-flow--service {
	padding: var(--space-6xl) 0;
}

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

.p-teyll-flow__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 56px; /* 箱の間 16＋矢印 24＋16 */
}

.p-teyll-flow__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 271px; /* Figma の箱の高さ */
	padding: var(--space-xl) 28px;
	background: var(--teyll-bg-subtle);
	border-radius: var(--radius-lg);
}

/* 手順の間の「＞」（SP は下向き） */
.p-teyll-flow__item:not(:last-child)::after {
	position: absolute;
	top: 50%;
	right: -40px;
	width: 24px;
	height: 24px;
	content: "";
	background: var(--teyll-text-primary);
	-webkit-mask: url("../../img/teyll/icons/chevron-right.svg") center / contain no-repeat;
	mask: url("../../img/teyll/icons/chevron-right.svg") center / contain no-repeat;
	transform: translateY(-50%);
}

.p-teyll-flow__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.p-teyll-flow__num {
	font: 700 var(--fs-teyll-number)/1.1 var(--font-teyll-en);
	letter-spacing: var(--ls-teyll-en-h1);
	color: var(--teyll-text-link);
}

.p-teyll-flow__icon {
	width: 28px;
	height: 28px;
	color: var(--teyll-text-primary);
}

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

.p-teyll-flow__text {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
	word-break: keep-all; /* 決めた改行の位置で折り返す（単語の途中で折り返さない） */
	overflow-wrap: anywhere;
}

/* 4列は手順の文が決めた位置で折り返せる 1280px から（1200〜1279px は箱が狭く、「スタッ｜フが」のように単語の途中で切れる） */
@media (max-width: 1279px) {
	.p-teyll-flow__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--space-lg);
	}

	.p-teyll-flow__item:nth-child(2n)::after {
		display: none;
	}
}

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

	.p-teyll-flow__list {
		grid-template-columns: minmax(0, 1fr); /* 中身より細い幅に縮められるように（1fr だと Safari で広い幅から縮めると横にはみ出す。2026-10-06） */
		gap: 40px; /* 箱の間 8＋矢印 24＋8 */
	}

	.p-teyll-flow__item {
		min-height: 0;
		gap: 10px;
		padding: var(--space-xl);
	}

	.p-teyll-flow__item:not(:last-child)::after,
	.p-teyll-flow__item:nth-child(2n):not(:last-child)::after {
		display: block;
		top: auto;
		right: auto;
		bottom: -32px;
		left: 50%;
		-webkit-mask-image: url("../../img/teyll/icons/chevron-down.svg");
		mask-image: url("../../img/teyll/icons/chevron-down.svg");
		transform: translateX(-50%);
	}
}

/* 374px 以下は決めた位置（読点）までが1行に入らず、keep-all だと「。」だけ・「す。」だけの行ができるので、ふつうの折り返しにする */
@media (max-width: 374px) {
	.p-teyll-flow__text {
		word-break: normal;
	}
}

/* ---------- 相談の帯（サービス詳細の下。Figma p-teyll-cta 84:208・SP 241:430） ---------- */
.p-teyll-cta {
	position: relative;
	overflow: hidden;
	padding: 72px 0;
	background: var(--teyll-bg-subtle);
}

.p-teyll-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-3xl);
}

.p-teyll-cta__text {
	max-width: 720px;
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-cta__mark {
	position: absolute;
	top: -44px; /* 帯の上から 28px（中身の上の余白 72px の分を引く） */
	left: calc(50% + 420px);
	width: 340px;
	height: auto;
}

@media (max-width: 1199px) {
	.p-teyll-cta__inner {
		flex-wrap: wrap;
		gap: var(--space-lg);
	}

	.p-teyll-cta__mark {
		left: auto;
		right: -80px;
		opacity: 0.35;
	}
}

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

	.p-teyll-cta__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-lg);
	}

	.p-teyll-cta__mark {
		position: static;
		order: -1;
		width: 102px;
		opacity: 1;
	}
}