@charset "UTF-8";

/* ==========================================================================
   チームサポート制（page-team.php  .p-team）

   7ページ共通の余白・メインビジュアル・Q&A・CTA は
   css/page-support-detail.css（と、それが流用している css/page-first.css）にある。
   このファイルは、このページだけにある部分を受け持つ。

     1・2. 悩み／はじめての方でも安心
           ご指示により「初めての方へ」と同じセクションを置いているので、
           見た目は css/page-first.css のものをそのまま使う。ここには何も無い。
     3.    チームがいるから、ここが違う。
           並び方は css/page-support-detail.css の .p-detail__figure-section。
           ここでは絵の縦横比だけを決めている。
     4.    チーム制でも、相談の仕方はあなた次第
     5.    選べるサポート方法

   SP ファーストで記述し、840px 以上を PC レイアウトとしています。
   画像が未配置の箇所は、指定サイズのグレーの図形（.img-slot--empty）で
   場所を確保しています。
   ========================================================================== */

.p-team {
	--tm-tint: #fef7f3;      /* 丸と枠のうすいオレンジ */
	--tm-text: #6c635f;      /* 本文のグレー */
}

/* --------------------------------------------------------------------------
   3. チームがいるから、ここが違う。

   画像が未配置のときに高さが潰れないよう、縦横比だけ指定する。
   -------------------------------------------------------------------------- */
.p-team__difference .p-detail__figure img,
.p-team__difference .p-detail__figure .img-slot--empty {
	aspect-ratio: 1024 / 493;
}

/* --------------------------------------------------------------------------
   4. チーム制でも、相談の仕方はあなた次第
   -------------------------------------------------------------------------- */
.p-team__advice-section {
	padding: 48px 0 56px;
	background-color: var(--tm-tint);
}

.p-team__advice-title {
	font-size: 24px;
}

.p-team__advice-section .c-lead {
	margin-top: 16px;
	text-align: center;
}

.p-team__advices {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

/* SP は写真を上、文章を下に積む */
.p-team__advice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* 丸く切り抜く写真。1px の差で楕円にならないよう幅と高さは同じ値にしている */
.p-team__advice-photo {
	flex: 0 0 auto;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	line-height: 0;
}

.p-team__advice-photo img,
.p-team__advice-photo .img-slot--empty {
	display: block;
	width: 100%;
	height: 100%;
	/* 画像が未配置のときも丸が潰れないように */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-fit: cover;
}

.p-team__advice-body {
	width: 100%;
}

.p-team__advice-name {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 20px;
	/* 明朝体は太字にしない */
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-text);
	text-align: center;
}

.p-team__advice-name em {
	font-style: normal;
	color: var(--color-primary);
}

/* 白い帯の箇条書き */
.p-team__advice-points {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.p-team__advice-points li {
	display: flex;
	align-items: center;
	min-height: 49px;
	padding: 10px 16px 11px;
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 1.7;
	color: var(--tm-text);
}

/* --------------------------------------------------------------------------
   5. 選べるサポート方法
   -------------------------------------------------------------------------- */
.p-team__methods-section {
	padding: 48px 0 0px;
	background-color: #fff;
}

/* うすいオレンジの角丸の箱 */
.p-team__methods-box {
	padding: 28px 16px 32px;
	border-radius: 10px;
	background-color: var(--tm-tint);
	box-sizing: border-box;
}

.p-team__methods-title {
	font-size: 24px;
}

.p-team__methods-note {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.7;
	color: var(--tm-text);
	text-align: center;
}

.p-team__methods-link {
	color: inherit;
	text-decoration: underline;
}

/* SP は2列 */
.p-team__methods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.p-team__method {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* 白い丸。1px の差で楕円にならないよう幅と高さは同じ値にしている */
.p-team__method-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 140px;
	height: 140px;
	padding: 16px;
	border-radius: 50%;
	background-color: #fff;
	box-sizing: border-box;
}

.p-team__method-label {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 18px;
	/* 丸の中で折り返さないように */
	white-space: nowrap;
	/* 明朝体は太字にしない */
	font-weight: 400;
	line-height: 1.3;
	color: var(--color-primary);
	text-align: center;
}

/* 「来所」のうしろに付く「（対面）」だけ小さくする */
.p-team__method-note {
	font-size: .72em;
}

/* 「会員システム」のように字数が多いものは、丸に収まるよう小さくする */
.p-team__method-label--long {
	font-size: 15px;
}

.p-team__method-icon {
	display: block;
	width: 100%;
	line-height: 0;
}

.p-team__method-icon img,
.p-team__method-icon .img-slot--empty {
	display: block;
	width: auto;
	max-width: 100%;
	height: 44px;
	/* 画像が未配置のときも高さが潰れないように */
	aspect-ratio: 91 / 68;
	margin: 0 auto;
	object-fit: contain;
}

.p-team__method-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--tm-text);
	text-align: center;
}

/* 「無制限！」だけオレンジの太字 */
.p-team__method-text strong {
	font-weight: 700;
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Q&A

   ご指示により、このページの Q&A だけ背景を白にする
   （ほかのページは css/page-first.css のうすいオレンジ）。
   -------------------------------------------------------------------------- */
.p-team .p-first__qa {
	background-color: #fff;
}


/* ==========================================================================
   PC
   ========================================================================== */

@media (min-width: 840px) {

	/* --- 4. 相談の仕方はあなた次第 --- */
	.p-team__advice-section {
		padding: 100px 0;
	}

	.p-team__advice-title {
		font-size: 42px;
	}

	.p-team__advice-section .c-lead {
		margin-top: 20px;
		font-size: 17px;
		line-height: 30px;
	}

	.p-team__advices {
		gap: 36px;
		margin-top: 40px;
	}

	/* PC は写真を左、文章を右に並べる */
	.p-team__advice {
		flex-direction: row;
		align-items: center;
		gap: 36px;
	}

	.p-team__advice-photo {
		width: 297px;
		height: 297px;
	}

	.p-team__advice-name {
		font-size: 32px;
		line-height: 1.3;
		text-align: left;
	}

	.p-team__advice-points {
		margin-top: 33px;
	}

	.p-team__advice-points li {
		padding: 10px 34px 11px;
		font-size: 17px;
		line-height: 28px;
	}

	/* --- 5. 選べるサポート方法 --- */
	.p-team__methods-section {
		padding: 80px 0 0px;
	}

	.p-team__methods-box {
		padding: 60px;
	}

	.p-team__methods-title {
		font-size: 42px;
	}

	.p-team__methods-note {
		margin-top: 20px;
		font-size: 14px;
		line-height: 20px;
	}

	/* PC は4つを中央に寄せて横並び（Figma と同じ 171px ＋ 間隔 49px） */
	.p-team__methods {
		display: flex;
		justify-content: center;
		gap: 49px;
		margin-top: 40px;
	}

	.p-team__method {
		flex: 0 0 auto;
		gap: 15px;
		width: 171px;
	}

	.p-team__method-circle {
		gap: 10px;
		width: 171px;
		height: 171px;
		padding: 20px;
	}

	.p-team__method-label {
		font-size: 22px;
	}

	.p-team__method-label--long {
		font-size: 17px;
	}

	.p-team__method-icon img,
	.p-team__method-icon .img-slot--empty {
		height: 68px;
	}

	.p-team__method-text {
		font-size: 16px;
		line-height: 28px;
		/* 丸より少しはみ出す行があるので、間隔（49px）のぶんに逃がす */
		white-space: nowrap;
	}

}