@charset "UTF-8";
/* =========================================================
   TAP 2026 — トップページ
   見本：_design/pages/01-top.html
   ========================================================= */

/* =========================================================
   ファーストビュー
   ========================================================= */
.tp-fv {
	background: var(--sage);
	color: var(--navy);
}

.tp-fv-body {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 40px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 24px 32px;
}

.tp-fv-text {
	flex: 1 1 460px;
	min-width: 0;
	padding-bottom: 40px;
	align-self: center;
}

.tp-fv-en {
	margin: 0 0 28px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 20px;
}

.tp-fv-h1 {
	margin: 0;
	font-weight: 500;
	font-size: clamp(46px, 5.6cqi, 84px);
	line-height: 1.32;
	letter-spacing: .06em;
	/* 見本は 693px 固定。1440px 幅（文字 79.8px）で同じ幅になり、文字が大きくなる広い画面でも
	   「伝わるデザイン、」が1行に収まるよう、文字の大きさに合わせる（8文字＋字間 = 約 8.5em） */
	width: 8.7em;
}

.tp-ul-late {
	animation-delay: 1.3s;
}

.tp-fv-lead {
	margin: 32px 0 0;
	font-size: 17px;
	font-weight: 500;
	max-width: 460px;
	letter-spacing: .04em;
	color: #123E57;
}

.tp-fv-cta {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

.tp-fv-now {
	margin: 40px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #123E57;
}

.tp-fv-blink {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--navy);
	animation: dcBlink 1.8s ease-in-out infinite;
}

.tp-fv-clock {
	font-family: var(--font-num);
	font-weight: 700;
	letter-spacing: .14em;
}

/* --tp-fv-shift：アーチ・タビー・Design・AI をまとめて右へずらす量（担当者の指示。スマホは 0） */
.tp-fv-photo {
	--tp-fv-shift: 60px;
	flex: 1 1 520px;
	min-width: 0;
	position: relative;
	height: 100%;
	max-height: 660px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.tp-fv-word {
	position: absolute;
	bottom: 28%;
	font-family: var(--font-serif);
	font-size: clamp(40px, 4.6cqi, 72px);
	line-height: 1;
	letter-spacing: .06em;
}

/* タビーの体にかからないよう、左右に振り分ける（見本は両手の写真用の位置） */
.tp-fv-word--design {
	right: calc(50% + 116px - var(--tp-fv-shift));
	opacity: .9;
}

.tp-fv-word--ai {
	left: calc(50% + 50px + var(--tp-fv-shift));
	z-index: 2;
	color: var(--vermilion);
}

.tp-fv-float {
	position: absolute;
	right: 18%;
	bottom: 22%;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--navy);
	animation: dcFloat 5s ease-in-out 1s infinite;
}

.tp-fv-badge {
	position: absolute;
	right: 0;
	top: 24px;
	width: 104px;
	height: 104px;
	z-index: 3;
	display: block;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(14, 63, 92, .15);
}

.tp-fv-badge-spin {
	display: block;
	width: 100%;
	height: 100%;
	animation: dcSpin 18s linear infinite;
}

.tp-fv-badge-spin svg {
	width: 100%;
	height: 100%;
}

.tp-fv-badge-arr {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
}

.tp-fv-arch {
	position: relative;
	left: var(--tp-fv-shift);
	z-index: 1;
	/* 担当者の指示で小さく（見本は幅 400px・高さ最大 580px） */
	width: 330px;
	max-width: 80%;
	height: calc(100% - 96px);
	max-height: 470px;
	border-radius: 165px 165px 0 0;
	background: rgba(255, 255, 255, .28);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 32px 32px 0;
	box-sizing: border-box;
}

/* アーチの中に立つ八咫烏（足元をアーチの下の端にそろえる） */
.tp-fv-chara {
	display: block;
	width: auto;
	height: 84%;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom;
}

/* スマホ：アーチが小さくなるので、文字をタビーに近づける（右へずらさない）。
   common.css の .fv-arch の余白（16px）のうち、下だけなくす */
@container (max-width: 760px) {
	.tp-fv-photo {
		--tp-fv-shift: 0px;
	}

	.tp-fv-word--design {
		right: calc(50% + 45px);
	}

	.tp-fv-word--ai {
		left: calc(50% + 57px);
	}

	.fv-arch.tp-fv-arch {
		padding-bottom: 0 !important;
	}

	/* 「Scroll」が中央の八咫烏に重なるので、トップのスマホだけ右の端へ（担当者の指示） */
	.tp-fv-scroll {
		left: calc(100% - 32px);
	}
}

/* =========================================================
   流れる文字
   ========================================================= */
.tp-marq {
	background: var(--navy);
	color: #FFFFFF;
	overflow: hidden;
	white-space: nowrap;
	padding: 18px 0;
}

.tp-marq-track {
	display: inline-flex;
	gap: 48px;
	animation: dcMarquee 28s linear infinite;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 30px;
}

.tp-marq-ja {
	font-style: normal;
	font-family: var(--font-ja);
	font-weight: 900;
	font-size: 26px;
}

/* =========================================================
   Voices
   ========================================================= */
.tp-voices {
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

.tp-voices-wm {
	left: -24px;
	bottom: 40px;
	font-size: 300px;
}

.tp-voices-ring1 {
	right: -180px;
	top: -160px;
	width: 560px;
	height: 560px;
}

.tp-voices-ring2 {
	right: -100px;
	top: -80px;
	width: 400px;
	height: 400px;
}

.tp-voices-in {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

.tp-voices-text {
	flex: 1 1 380px;
	min-width: 0;
}

.tp-voices-h2 {
	margin-bottom: 40px;
}

.tp-voices-lead {
	margin-bottom: 24px;
}

.tp-voices-point {
	margin: 48px 0 0;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.8;
	letter-spacing: .04em;
	color: var(--navy);
}

.tp-voices-list {
	flex: 1 1 540px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tp-bubble {
	max-width: 86%;
	background: #FFFFFF;
	padding: 32px 36px;
	box-shadow: 0 10px 28px rgba(14, 63, 92, .08);
	position: relative;
}

.tp-bubble--l {
	align-self: flex-start;
	border-radius: 28px 28px 28px 6px;
	transform: rotate(-1deg);
}

.tp-bubble--r {
	align-self: flex-end;
	border-radius: 28px 28px 6px 28px;
	transform: rotate(1deg);
}

.tp-bubble-q {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.6;
	color: var(--navy);
}

.tp-bubble-who {
	margin: 0;
	font-size: 13px;
	color: var(--text-light);
}

/* =========================================================
   写真の帯
   ========================================================= */
.tp-strip {
	background: #FFFFFF;
	padding: 96px 0 0;
	overflow: hidden;
}

.tp-strip-head {
	max-width: 1280px;
	margin: 0 auto 32px;
	padding: 0 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.tp-strip-en {
	margin: 0;
}

.tp-strip-note {
	margin: 0;
	font-size: 14px;
	color: var(--text);
}

.tp-strip-marq {
	overflow: hidden;
}

.tp-strip-track {
	display: inline-flex;
	align-items: flex-end;
	gap: 24px;
	padding-right: 24px;
	animation: dcMarquee 70s linear infinite;
}

.tp-strip-item {
	display: flex;
	overflow: hidden;
	flex: 0 0 auto;
}

.tp-strip-item--arch {
	width: 300px;
	height: 380px;
	border-radius: 150px 150px 24px 24px;
}

.tp-strip-item--wide {
	width: 400px;
	height: 280px;
	border-radius: 24px;
}

.tp-strip-item--circle {
	width: 280px;
	height: 280px;
	border-radius: 50%;
}

.tp-strip-item--bowl {
	width: 360px;
	height: 340px;
	border-radius: 24px 24px 180px 180px;
}

.tp-strip-item--rect {
	width: 320px;
	height: 260px;
	border-radius: 24px;
}

/* =========================================================
   Our approach
   ========================================================= */
.tp-approach {
	background: #FFFFFF;
	position: relative;
	overflow: hidden;
}

.tp-approach-wm {
	right: 40px;
	bottom: -40px;
	font-size: 380px;
}

.tp-approach-blob {
	left: -120px;
	top: -120px;
	width: 360px;
	height: 360px;
}

.tp-approach-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 64px;
}

.tp-approach-fig {
	flex: 1 1 440px;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.tp-circles {
	position: relative;
	width: 500px;
	max-width: 100%;
	aspect-ratio: 500 / 420;
	animation: dcFloat 8s ease-in-out infinite;
}

.tp-circles-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tp-circles-label {
	position: absolute;
	top: 39%;
	display: flex;
	flex-direction: column;
	color: var(--navy);
}

.tp-circles-label--out {
	left: 11%;
}

.tp-circles-label--in {
	right: 9%;
	align-items: flex-end;
}

.tp-circles-en {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
}

.tp-circles-ja {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.3;
}

.tp-circles-sub {
	font-size: 12px;
}

.tp-circles-label--out .tp-circles-sub {
	color: var(--text);
}

.tp-approach-text {
	flex: 1 1 480px;
	min-width: 0;
}

.tp-approach-h2 {
	margin-bottom: 32px;
	font-size: 46px;
	line-height: 1.55;
}

.tp-approach-small {
	font-size: .55em;
	color: var(--text-light);
}

.tp-approach-p {
	margin-bottom: 20px;
}

.tp-approach-photos {
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.tp-approach-photo {
	flex: 1 1 200px;
	min-width: 0;
}

.tp-approach-img {
	display: flex;
	overflow: hidden;
	height: 200px;
	border-radius: 24px;
}

.tp-approach-cap {
	margin: 10px 0 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	color: var(--blue);
}

/* =========================================================
   Case 00 — 数字
   ========================================================= */
.tp-numbers {
	position: relative;
	overflow: hidden;
	background: var(--sage-pale);
}

.tp-numbers-wm {
	right: -40px;
	top: 24px;
	font-size: 360px;
}

.tp-numbers-h2 {
	font-size: 54px;
}

.tp-numbers-lead {
	flex: 0 1 440px;
}

/* 4つの作業を横一列のカードで（担当者の指示で、見本の横棒グラフから変更）。
   スマホは2列×2段 */
.tp-numbers-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.tp-num {
	display: flex;
	flex-direction: column;
	padding: 32px 28px 36px;
	background: #FFFFFF;
	border-radius: 28px;
	color: var(--navy);
}

.tp-num-title {
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}

.tp-num-no {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	color: var(--blue);
}

.tp-num-name-w {
	display: inline-block;
}

.tp-num-label {
	display: inline-block;
	padding: 5px 16px;
	border-radius: 999px;
	background: var(--sage-pale2);
	color: #2E4652;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.tp-num-label--now {
	background: var(--sage-dark);
	color: #FFFFFF;
}

.tp-num-before {
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	color: #2E4652;
}

.tp-num-before-val {
	font-size: 22px;
	font-weight: 500;
}

.tp-num-arrow {
	margin: 12px 0 10px 22px;
	color: var(--sage-dark);
	font-size: 20px;
	line-height: 1;
}

.tp-num-after {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/* 「いま」の数字に、FV の見出しと同じ手描きの朱色の下線（.ul）。
   下線の太さは .ul の文字の大きさで決まるので、ここで大きさを決めておく */
.tp-num-val {
	margin: 0 0 8px;
	white-space: nowrap;
	font-size: 44px;
}

/* 下線は、カードが画面に入ってきたときに引かれる（対応していないブラウザは、読み込みのときに引かれる） */
@supports (animation-timeline: view()) {
	.tp-num-val .ul-s {
		animation: ulIn linear both;
		animation-timeline: view();
		animation-range: entry 60% cover 45%;
	}
}

.tp-num-big {
	font-family: var(--font-num);
	font-weight: 500;
	font-size: 56px;
	line-height: 1;
}

.tp-num-unit {
	font-size: 20px;
	font-weight: 500;
	margin-left: 4px;
}

.tp-num-word {
	font-size: 44px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .04em;
}

@container (max-width: 1080px) {
	.tp-numbers-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 760px) {
	.tp-numbers-list {
		gap: 12px;
	}

	.tp-num {
		padding: 24px 18px 26px;
		border-radius: 22px;
	}

	.tp-num-title {
		margin-bottom: 18px;
		font-size: 18px;
	}

	.tp-num-no {
		font-size: 16px;
	}

	.tp-num-label {
		padding: 4px 12px;
		font-size: 13px;
	}

	.tp-num-val {
		font-size: 34px;
	}

	/* 作業名が1行・2行でも、下の段の高さがそろうように */
	.tp-num-name {
		min-height: 3em;
	}

	.tp-num-before {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.tp-num-before-val {
		font-size: 18px;
	}

	.tp-num-big {
		font-size: 44px;
	}

	.tp-num-unit {
		font-size: 17px;
	}

	.tp-num-word {
		font-size: 34px;
	}
}

.tp-numbers-note {
	margin: 20px 0 0;
	font-size: 12px;
	color: var(--text-light);
}

/* =========================================================
   サービス
   ========================================================= */
.tp-service {
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

.tp-service-ring1 {
	left: -220px;
	bottom: -260px;
	width: 640px;
	height: 640px;
}

.tp-service-ring2 {
	left: -140px;
	bottom: -180px;
	width: 480px;
	height: 480px;
}

.tp-service-dot {
	right: 8%;
	top: 96px;
	width: 18px;
	height: 18px;
	background: var(--mint);
}

.tp-service-wm {
	right: -20px;
	top: 40px;
	font-size: 200px;
}

.tp-head-main {
	flex: 1 1 560px;
	min-width: 0;
}

.tp-h2-gap {
	margin-bottom: 20px;
}

/* 左右のカードは subgrid で行をそろえる（事業名が1行・2行でも、4つのサービスの縦位置がそろう）。
   カードの中の行：事業名 / 見出し / サービス1〜4 / 詳しく見る の7行 */
.tp-doors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
	gap: 24px;
}

.tp-door,
.tp-door:hover {
	min-width: 0;
	text-decoration: none;
	color: var(--navy);
	border-radius: 32px;
	padding: 40px 44px;
	display: grid;
	grid-row: span 7;
	grid-template-rows: subgrid;
	align-content: start;
	row-gap: 10px;
}

.tp-door-title {
	margin: 14px 0;
}

.tp-door--in {
	background: var(--mint);
	box-shadow: 0 16px 36px rgba(14, 63, 92, .10);
}

.tp-door--out {
	background: #FFFFFF;
	border: 1.5px solid var(--navy);
	box-shadow: 0 16px 36px rgba(14, 63, 92, .06);
}

.tp-door-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

/* 事業名（カードでいちばん大きい見出し） */
.tp-door-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.tp-door-biz {
	font-size: 34px;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: .04em;
}

.tp-door-biz-w {
	display: inline-block;
}

.tp-door-label {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.tp-door-en {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 17px;
}

.tp-door-kind {
	font-size: 13px;
	font-weight: 700;
}

.tp-door-arr {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.tp-door--in .tp-door-arr {
	background: var(--navy);
	color: #FFFFFF;
}

.tp-door--out .tp-door-arr {
	border: 1.5px solid var(--navy);
}

.tp-door-title {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tp-door-worry {
	font-size: 15px;
}

.tp-door--out .tp-door-worry {
	color: var(--text);
}

.tp-door-name {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
}

/* 4つのサービスは共通部品（common.css の .svc-*）。カードの中では行を subgrid にそろえるため、入れ物をなくす */
.tp-door .svc-list {
	display: contents;
}

.tp-door-more {
	align-self: end;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 700;
}

.tp-single {
	margin-top: 48px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.tp-single-label {
	margin: 0 16px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
}

.tp-chip {
	text-decoration: none;
	color: var(--navy);
	background: #FFFFFF;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
}

/* =========================================================
   進め方
   ========================================================= */
.tp-steps {
	background: #FFFFFF;
	position: relative;
	overflow: hidden;
}

.tp-steps-wm {
	left: -20px;
	bottom: 30px;
	font-size: 220px;
}

.tp-steps-ring {
	right: -240px;
	top: -240px;
	width: 600px;
	height: 600px;
}

.tp-steps-h2 {
	margin-bottom: 16px;
}

.tp-steps-lead {
	margin-bottom: 56px;
}

.tp-steps-rail {
	position: relative;
	height: 2px;
	margin: 0 0 24px 116px;
	background: rgba(14, 63, 92, .14);
	border-radius: 2px;
}

.tp-steps-ball {
	position: absolute;
	top: -5px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--navy);
	animation: dcTravel 7s ease-in-out infinite alternate;
}

.tp-flow {
	display: grid;
	grid-template-columns: 96px repeat(4, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 16px;
	align-items: stretch;
}

.tp-flow-head {
	border-top: 1.5px solid var(--navy);
	padding: 16px 4px 8px;
}

.tp-flow-no {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 15px;
	color: var(--blue);
}

.tp-flow-title {
	margin: 2px 0 6px;
	font-size: 24px;
	font-weight: 900;
	color: var(--navy);
}

.tp-flow-text {
	margin: 0;
	font-size: 14px;
	color: var(--text);
}

.tp-flow-rl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--navy);
}

.tp-flow-rl-ja {
	font-size: 48px;
	font-weight: 900;
	line-height: 1.1;
}

.tp-flow-rl-ja--in {
	color: #3F9E8B;
}

.tp-flow-rl-sub {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--text-light);
}

.tp-flow-sep {
	grid-column: 1 / -1;
	height: 1px;
	margin: 6px 0;
	background: rgba(14, 63, 92, .35);
}

/* 囲みの幅に合わせて文字を少し小さくし、各行を途中で折り返さない（.tp-pill-line） */
.tp-pill {
	container-type: inline-size;
	border-radius: 999px;
	padding: 22px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	color: var(--navy);
}

.tp-pill--out {
	border: 1.5px solid var(--navy);
}

.tp-pill--in {
	background: var(--mint);
}

.tp-pill-line {
	display: block;
	white-space: nowrap;
	font-size: min(14px, 6.6cqi);
}

.tp-pill-tag {
	font-size: 11px;
	font-weight: 700;
}

.dc-flow .tag {
	display: none;
}

/* 進め方：4列だと囲みが狭すぎる幅（1140px 以下）では、スマホと同じ縦並びに */
@media (max-width: 1140px) {
	.dc-flow { grid-template-columns: minmax(0, 1fr) !important; }
	.dc-flow .rl { display: none !important; }
	.dc-flow .tag { display: block; }
	.dc-flow .h1 { order: 1; } .dc-flow .o1 { order: 2; } .dc-flow .i1 { order: 3; }
	.dc-flow .h2 { order: 4; } .dc-flow .o2 { order: 5; } .dc-flow .i2 { order: 6; }
	.dc-flow .h3 { order: 7; } .dc-flow .o3 { order: 8; } .dc-flow .i3 { order: 9; }
	.dc-flow .h4 { order: 10; } .dc-flow .o4 { order: 11; } .dc-flow .i4 { order: 12; }
}

@media (max-width: 760px) {
	.tp-door,
	.tp-door:hover {
		padding: 32px 20px;
	}

	.tp-door-biz {
		font-size: 26px;
	}

	/* スマホでは事業名を1行目に収めるため、矢印の丸は隠す（カード全体がリンク） */
	.tp-door-arr {
		display: none;
	}

	.tp-door-name {
		font-size: 21px;
	}


}

/* =========================================================
   実績
   ========================================================= */
.tp-works {
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

.tp-works-wm {
	right: -30px;
	bottom: 30px;
	font-size: 320px;
}

.tp-works-blob {
	left: -160px;
	top: 60px;
	width: 420px;
	height: 420px;
}

.tp-works-head {
	margin-bottom: 48px;
}

.tp-works-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
}

.tp-works-tab,
.tp-works-tab:hover {
	text-decoration: none;
	background: #FFFFFF;
	color: var(--navy);
	border-radius: 999px;
	padding: 10px 20px;
}

.tp-works-tab.is-current {
	background: var(--navy);
	color: #FFFFFF;
}

.tp-works-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.tp-work,
.tp-work:hover {
	flex: 1 1 340px;
	min-width: 0;
	text-decoration: none;
	color: var(--navy);
	background: #FFFFFF;
	border-radius: 28px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.tp-work-img {
	height: 240px;
	background: #DCE6E1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--text);
	overflow: hidden;
}

.tp-work-body {
	padding: 24px 28px 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tp-work-tag {
	align-self: flex-start;
	border-radius: 999px;
	padding: 2px 12px;
	font-size: 12px;
	font-weight: 700;
}

.tp-work-tag--out {
	border: 1px solid var(--navy);
}

.tp-work-tag--in {
	background: var(--mint);
}

.tp-work-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
}

.tp-work-result {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
	color: var(--text);
}

.tp-work-num {
	font-family: var(--font-num);
	font-size: 36px;
	font-weight: 700;
	color: var(--navy);
}

.tp-work-sub {
	font-size: 14px;
	color: var(--text-light);
}

.tp-works-more {
	margin-top: 40px;
	text-align: center;
}

/* =========================================================
   作ったあとの支援
   ========================================================= */
.tp-support {
	background: #FFFFFF;
	position: relative;
	overflow: hidden;
}

.tp-support-ring {
	left: -260px;
	top: -200px;
	width: 620px;
	height: 620px;
}

.tp-support-wm {
	right: -20px;
	bottom: 30px;
	font-size: 260px;
}

.tp-support-dot {
	right: 10%;
	top: 120px;
	width: 14px;
	height: 14px;
	background: var(--navy);
}

.tp-support-photo {
	position: relative;
	margin: -8px 0 56px;
}

.tp-support-img {
	display: flex;
	overflow: hidden;
	height: 340px;
	border-radius: 32px;
}

/* 横長に切り抜くと、前で話している人の顔が切れるので、上寄りで切り抜く */
.tp-support-ph img {
	object-position: center 27%;
}

.tp-support-badge {
	position: absolute;
	left: 32px;
	bottom: 28px;
	background: #FFFFFF;
	border-radius: 999px;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
	box-shadow: 0 8px 20px rgba(14, 63, 92, .12);
}

.tp-support-groups {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.tp-support-group {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* 左の見出しは「デザイン」「AI」（担当者の指示。見本は「外」「中」）。4文字が1行に入る幅に */
.tp-support-side {
	flex: 0 1 148px;
	display: flex;
	flex-direction: column;
	color: var(--navy);
}

.tp-support-ja {
	white-space: nowrap;
	font-size: 34px;
	font-weight: 500;
	line-height: 1.2;
}

.tp-support-ja--in {
	color: #3F9E8B;
}

.tp-support-sub {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-light);
}

.tp-support-cards {
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tp-scard {
	flex: 1 1 300px;
	border-radius: 20px;
	padding: 20px 24px;
	color: var(--navy);
}

.tp-scard--out {
	border: 1.5px solid var(--navy);
}

.tp-scard--in {
	background: var(--mint);
}

.tp-scard-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
}

.tp-scard-text {
	margin: 0;
	font-size: 14px;
}

.tp-scard--out .tp-scard-text {
	color: var(--text);
}