@charset "utf-8";

.p-diagnosis-page {
	padding-top: 9rem;
	@media screen and (max-width: 743px) {
		padding-top: 7rem;
	}
}
.p-diagnosis-notes {
	margin-block: 4rem 8rem;
	text-align: center;
	font-size: 1.4rem;
	color: #2A2216;
	font-weight: var(--font-weight-medium);
	@media screen and (max-width: 743px) {
		margin-top: 3rem;
		font-size: 1.3rem;
	}
}
.p-diagnosis-box {
	max-width: 130rem;
	margin-inline: auto;
	border: .4rem solid #fff;
	border-radius: 2rem;
	background: #FFF;
	box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.20);
	@media screen and (max-width: 743px) {
		margin-inline: var(--sp-base-padding);
	}
	.p-diagnosis-heading {
		position: relative;
		padding-block: 12.5rem 7rem;
		background-color: var(--color-orange);
		border-radius: 2rem 2rem 0 0;
		text-align: center;
		z-index: 2;
		&::before {
			content: "";
			position: absolute;
			right: 0;
			left: 0;
			top: 7.5rem;
			width: 8rem;
			height: 3.8rem;
			margin-inline: auto;
			background: url(../img/point-title.svg) no-repeat 50%;
			background-size: 100%;
		}
		&::after {
			content: "";
			position: absolute;
			right: 0;
			left: 0;
			top: 100%;
			width: 1.8rem;
			height: 1.4rem;
			margin-inline: auto;
			background-color: #fbdd99;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
		}

		.ico-check {
			position: absolute;
			right: calc(50% + 15.6rem);
			top: 8rem;
			width: 5rem;
		}
		.title {
			--ls: .15em;
			position: relative;
			width: fit-content;
			margin-inline: auto;
			margin-bottom: 3rem;
			font-size: 6rem;
			line-height: 1.4;
			img {
				width: 21.8rem;
				vertical-align: -0.1em;
				margin-right: 0.2em;
			}
			&::before,
			&::after {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				margin-block: auto;
				width: 4.4rem;
				height: 5.4rem;
				background: no-repeat 50%;
				background-size: 100%;
			}
			&::before {
				background-image: url(../img/diagnosis/ico-head3.svg);
				left: -8rem;
				top: 1rem;
			}
			&::after {
				background-image: url(../img/diagnosis/ico-head4.svg);
				right: -8rem;
			}
		}
		.lead {
			font-size: 2.6rem;
			line-height: 1.4;
		}

		.p-ico {
			&.-ico-head1 {
				width: 11.9rem;
				top: 10.8rem;
				left: 17rem;
			}
			&.-ico-head2 {
				width: 18.8rem;
				top: 13.2rem;
				right: 11.5rem;
			}
		}
		&.-result {
			.title {
				span span {
					display: none;
				}
				& > span::before {
					content: "診断結果";
				}
			}
			.lead {
				display: none;
			}
		}
		@media screen and (max-width: 743px) {
			padding-block: 7rem 4rem;
			&::before {
				top: 4rem;
				width: 4rem;
				height: 1.9rem;
			}

			.ico-check {
				right: calc(50% + 7rem);
				top: 3rem;
				width: 4rem;
			}
			.title {
				font-size: 3rem;
				margin-bottom: 1rem;
				img {
					width: 10.9rem;
				}
				&::before,
				&::after {
					width: 2.8rem;
				}
				&::before {
					left: -5rem;
					top: 0;
				}
				&::after {
					right: -5rem;
				}
			}
			.lead {
				font-size: 2rem;
			}
			.p-ico {
				&.-ico-head1 {
					top: auto;
					bottom: -5rem;
					left: -2rem;
				}
				&.-ico-head2 {
					top: -1.8rem;
					right: -3.5rem;
				}
			}
		}
	}

	.quiz-slide{animation-duration:.32s; animation-timing-function:cubic-bezier(.4,0,.2,1); animation-fill-mode:both;}
	.slide-in-right{animation-name:slideInRight;}
	.slide-in-left{animation-name:slideInLeft;}

	.quiz-block {
		overflow:hidden;
		position:relative;
		margin-inline: auto;
		padding: 8rem 9.6rem;
		.q{
			h3{
				font-size: 2.8rem;
				line-height: 1.6;
				span {
					font-weight: var(--font-weight-medium);
					font-size: 3rem;
				}
			}
			.note {
				margin-top: 2rem;
				margin-bottom: -2rem;
				padding: 1.2rem 3rem;
				font-size: 2rem;
				line-height: 1.4;
				background-color: #ECEDED;
				border-radius: 1rem;
			}
		}
		.choices{
			display: flex;
			justify-content: space-between;
			gap: 2.5rem;
			margin-top: 5rem;
			.choice{
				flex-grow: 1;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 8rem;
				border: .2rem solid var(--border2);
				border-radius: 1rem;
				cursor: pointer;
				text-align: center;
				user-select:none;
				background: #fff;
				font-size: 1.8rem;
				line-height:1.5;
				transition: border-color var(--transition), background-color var(--transition), color var(--transition);
				&::after {
					content: "";
					position: absolute;
					inset: -.2rem;
					border-radius: 1rem;
					border: .3rem solid var(--color-orange);
					opacity: 0;
					transition: opacity var(--transition);
				}
				@media (hover) {
					&:hover {
						color: var(--color-orange);
						background: #fef8eb;
						&::after {
							opacity: 1;
						}
					}
				}
			}
			input[type="radio"] {
				display: none;
				&:checked + .choice {
					color: var(--color-orange);
					background: #fef8eb;
					&::after {
						opacity: 1;
					}
				}
			}
		}
		.quiz-header {
			margin-top: 4rem;
			display: flex;
			align-items: center;
			.quiz-count {
				flex-shrink: 0;
				width: 14rem;
				font-weight: var(--font-weight-medium);
				font-size: 2rem;
				line-height: 1;
			}
			.quiz-progress {
				position: relative;
				flex-grow: 1;
				height: 0.8rem;
				border-radius: 0.4rem;
				background-color: #ECEDED;
				.js-quiz-progress {
					position: absolute;
					inset: 0;
					width: 0;
					background-color: var(--color-orange);
					border-radius: 0.4rem;
					transition: width var(--transition);
				}
			}
		}
		.quiz-back,
		.actions {
			position: relative;
			margin-top: 7rem;
			.btn {
				position: relative;
				border-bottom: 1px solid;
				padding: 1rem 0 1rem 3rem;
				font-size: 1.8rem;
				.arrow {
					position: absolute;
					left: 0;
					top: .2rem;
					bottom: 0;
					width: 1.6rem;
					height: 1.6rem;
					margin-block: auto;
					border-radius: 100%;
					background-color: var(--color-base);
					transition: background-color var(--transition);
					z-index: 2;
					&::before {
						content: "";
						position: absolute;
						inset: 0;
						width: .5rem;
						height: .7rem;
						margin: auto;
						background-color: #fff;
						clip-path: polygon(0 50%, 100% 0, 100% 100%);
					}
				}
				@media (hover) {
					&:hover {
						color: var(--color-orange);
						.arrow {
							background-color: var(--color-orange);
						}
					}
				}
				&:disabled{
					opacity: .3;
					cursor: not-allowed;
					pointer-events: none;
				}
			}
		}
		.quiz-back:has(.c-btn),
		.actions {
			.btn {
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 3;
			}
		}
		.quiz-back .actions {
			margin-top: 0;
		}
		@media screen and (max-width: 743px) {
			padding: 4rem 2rem;
			.q{
				h3{
					font-size: 2rem;
					span {
						font-size: 2.2rem;
					}
				}
				.note {
					margin-top: 1rem;
					margin-bottom: 0rem;
					padding: 1rem 1.5rem;
					font-size: 1.5rem;
				}
			}
			.choices {
				flex-wrap: wrap;
				gap: 1rem;
				margin-top: 2rem;
				.choice{
					flex-grow: 0;
					width: calc((100% - 1rem * 1) / 2);
					height: 5rem;
					font-size: 1.4rem;
				}
			}
			.quiz-header {
				margin-top: 3rem;
				.quiz-count {
					width: 8rem;
					font-size: 1.5rem;
				}
			}
			.quiz-back,
			.actions {
				margin-top: 3rem;
				.btn {
					font-size: 1.5rem;
				}
			}
			.quiz-back:has(.c-btn),
			.actions {
				padding-bottom: 6rem;
			}
			.quiz-back .actions {
				padding-bottom: 0;
			}
		}
	}
	#loadingSection{
		display: none;
		padding: 10rem 0;
		text-align: center;
		.loading-label{
			font-size: 2rem;
			margin-bottom: 2.2rem;
		}
		.loading-bar-wrap{
			width: 100%;
			max-width: 32rem;
			margin: 0 auto;
			height: .6rem;
			background: #e8e8e8;
			border-radius: 999px;
			overflow: hidden;
		}
		.loading-bar-inner{
			height: 100%;
			width: 0%;
			background: var(--color-orange);
			border-radius: 999px;
			transition: width .08s linear;
		}
		.loading-dots {
			display:flex;
			justify-content:center;
			gap: .8rem;
			margin-top: 2.2rem;
			span{
				width: .9rem;
				height: .9rem;
				border-radius: 50%;
				background: var(--color-orange);
				opacity: .3;
				animation: dotPulse 1.2s ease-in-out infinite;
				&:nth-child(2){ animation-delay:.2s;}
				&:nth-child(3){ animation-delay:.4s;}
			}
		}
		@media screen and (max-width: 743px) {
			.loading-label{
				font-size: 1.6rem;
			}
		}
	}

	#resultSection {
		padding-top: 6rem;
		&.challenger {
			--color: #EB6F65;
			--bg: #FAB4B4;
			--head-bg: #FFF5F5;
		}
		&.collaborator {
			--color: #FFB38A;
			--bg: #FFD9C5;
			--head-bg: #FDF6F2;
		}
		&.supporter {
			--color: #01A9EA;
			--bg: #D3EDFB;
			--head-bg: #F2F8FB;
		}
		&.analyzer {
			--color: #75DB77;
			--bg: #BAEDBB;
			--head-bg: #F6F8F6;
		}
		&.balancer {
			--color: #D6AEEA;
			--bg: #EBD7F5;
			--head-bg: #FAF8FB;
		}
		.result-head {
			max-width: 110rem;
			height: 52.5rem;
			margin-inline: auto;
			padding-top: 6rem;
			background: var(--head-bg) url(../img/diagnosis/result-head-bg.png) 50%;
			background-size: 100%;
			border-radius: 10rem;
			text-align: center;
			color: #2A2216;
			font-size: 1.8rem;
			line-height: 1.8;
			.result-illust {
				width: 20rem;
				margin-inline: auto;
				margin-bottom: 2rem;
			}
			.result-type-name {
				margin-block: 2rem 1.5rem;
				font-size: 6rem;
				line-height: 1;
				color: var(--color);
			}
			.result-type-kana {
				font-size: 2.4rem;
				line-height: 1.2;
				color: #000;
			}
		}
		.type-section {
			max-width: 110rem;
			margin-inline: auto;
			margin-top: 8rem;
			.type-section-label {
				position: relative;
				span {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 32rem;
					height: 6rem;
					margin-inline: auto;
					background-color: var(--bg);
					border-radius: 10rem;
					font-size: 2.4rem;
					line-height: 1.5;
					z-index: 2;
				}
				&::before {
					content: "";
					position: absolute;
					inset: 0;
					height: 0;
					margin-block: auto;
					border-top: 2px solid var(--bg);
				}
			}
			.type-section-catch {
				margin-top: 3rem;
				margin-bottom: 2rem;
				text-align: center;
				font-size: 3.4rem;
				line-height: 1.6;
				--ls: .05em;
			}
			.type-section-body {
				text-align: center;
				font-weight: var(--font-weight-medium);
				font-size: 1.6rem;
				line-height: 2;
			}
		}
		.roles-section {
			position: relative;
			max-width: 110rem;
			margin-inline: auto;
			margin-top: 11rem;
			&::before {
				content: "";
				position: absolute;
				left: 4rem;
				top: -6.8rem;
				width: 14.7rem;
				height: 11.5rem;
				background: url(../img/diagnosis/ico-c3.png) no-repeat 50%;
				background-size: 100%;
			}
			&::after {
				content: "";
				position: absolute;
				right: 7rem;
				top: -5.5rem;
				width: 18.8rem;
				height: 10rem;
				background: url(../img/diagnosis/ico-head2.png) no-repeat 50%;
				background-size: 100%;
			}
			.roles-section-title {
				position: relative;
				width: fit-content;
				margin-inline: auto;
				margin-bottom: 3rem;
				font-size: 2.4rem;
				line-height: 1.5;
				&::before,
				&::after {
					content: "";
					position: absolute;
					bottom: .1em;
					height: 3rem;
					border-left: 2px solid #F6AB00;
				}
				&::before {
					left: -4.5rem;
					transform: rotate(-30deg);
				}
				&::after {
					right: -4.5rem;
					transform: rotate(30deg);
				}
			}
			.roles-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 2.5rem;
				.role-card {
					border-radius: 1rem;
					background: #FFF;
					box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.20);
					&.-tech {
						--role-color: #7ECEF4;
					}
					&.-sales {
						--role-color: #FFA9A9;
					}
					&.-admin {
						--role-color: #75DB77;
					}
					.role-card-head {
						position: relative;
						padding-block: 2rem;
						border-radius: 1rem 1rem 0 0;
						font-size: 2rem;
						line-height: 1.5;
						background-color: var(--role-color);
						text-align: center;
						&::after {
							content: "";
							position: absolute;
							right: 0;
							left: 0;
							top: 100%;
							width: 1.8rem;
							height: 1.4rem;
							margin-inline: auto;
							background-color: var(--role-color);
							clip-path: polygon(0 0, 100% 0, 50% 100%);
						}
					}
					.role-card-body {
						padding: 3rem 3.5rem 4rem;
						font-size: 1.6rem;
						line-height: 2;
						font-weight: var(--font-weight-medium);
					}
				}
			}
		}
		.bottom-section-wrap {
			margin-top: 14rem;
			padding-block: 13rem;
			background-color: #fef8eb;
		}
		.bottom-section {
			position: relative;
			max-width: 110rem;
			margin-inline: auto;
			padding: 7rem 2rem 8rem;
			background-color: #fff;
			border-radius: 2rem;
			text-align: center;
			font-size: 1.6rem;
			line-height: 2;
			font-weight: var(--font-weight-medium);
			&:not(:last-child) {
				margin-bottom: 2rem;
			}
			&:first-child::after {
				content: "";
				position: absolute;
				right: 16rem;
				top: -.5rem;
				width: 11.9rem;
				height: 12.1rem;
				background: url(../img/diagnosis/ico-head1.png) no-repeat 50%;
				background-size: 100%;
			}
			.bottom-section-title {
				margin-bottom: 3rem;
				text-align: center;
				font-size: 2.4rem;
				line-height: 1.4;
				font-weight: var(--font-weight-bold);
				&::after {
					content: "";
					display: block;
					width: 2rem;
					margin-inline: auto;
					margin-top: 1.5rem;
					border-top: 2px solid #F6AB00;
				}
			}
			.cta {
				display: flex;
				justify-content: center;
				margin-top: 6rem;
				gap: 4rem;
				.c-btn {
					margin: 0;
				}
			}
		}
		.retry-box {
			padding-bottom: 13rem;
			background-color: #fef8eb;
			border-radius: 0 0 2rem 2rem;
			text-align: center;
			font-size: 1.6rem;
			line-height: 2;
			font-weight: var(--font-weight-medium);
			h3 {
				margin-bottom: 3rem;
				text-align: center;
				font-size: 2.4rem;
				line-height: 1.4;
				&::after {
					content: "";
					display: block;
					width: 2rem;
					margin-inline: auto;
					margin-top: 1.5rem;
					border-top: 2px solid #F6AB00;
				}
			}
			.cta {
				display: flex;
				justify-content: center;
				gap: 4rem;
				.c-btn {
					margin: 0;
				}
			}
			.note {
				margin-top: 3rem;
			}
		}
		@media screen and (max-width: 743px) {
			padding-top: 4rem;
			.result-head {
				height: auto;
				margin-inline: 1.5rem;
				padding-block: 4rem;
				background-size: 50rem;
				border-radius: 2rem;
				font-size: 1.4rem;
				.result-illust {
					width: 15rem;
					margin-bottom: 2rem;
				}
				.result-type-name {
					margin-block: 1rem 1rem;
					font-size: 4rem;
				}
				.result-type-kana {
					font-size: 1.8rem;
				}
			}
			.type-section {
				margin-inline: 1.5rem;
				margin-top: 4rem;
				.type-section-label {
					span {
						width: 24rem;
						height: 5rem;
						font-size: 1.8rem;
					}
				}
				.type-section-catch {
					margin-top: 2rem;
					margin-bottom: 2rem;
					font-size: 2rem;
				}
				.type-section-body {
					text-align: left;
					font-size: 1.4rem;
				}
			}
			.roles-section {
				margin-inline: 1.5rem;
				margin-top: 11rem;
				&::before {
					left: -4rem;
					top: -7.8rem;
					transform: scale(.5);
				}
				&::after {
					right: -6rem;
					top: -8.5rem;
					transform: scale(.5);
				}
				.roles-section-title {
					margin-bottom: 2rem;
					font-size: 2rem;
					text-align: center;
					&::before {
						left: -3rem;
					}
					&::after {
						right: -3rem;
					}
				}
				.roles-grid {
					display: block;
					.role-card {
						margin-top: 2rem;
						.role-card-head {
							padding-block: 1.5rem;
							font-size: 1.8rem;
							&::after {
								top: calc(100% - 2px);
							}
						}
						.role-card-body {
							padding: 2rem 2rem 3rem;
							font-size: 1.4rem;
						}
					}
				}
			}
			.bottom-section-wrap {
				margin-top: 6rem;
				padding-block: 6rem;
			}
			.bottom-section {
				margin-inline: 1.5rem;
				padding: 3rem 2rem;
				font-size: 1.4rem;
				text-align: left;
				&:first-child::after {
					right: -1rem;
					top: -5.5rem;
					transform: scale(.5);
				}
				.bottom-section-title {
					margin-bottom: 2rem;
					font-size: 2rem;
				}
				.cta {
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 2rem;
					gap: 1.5rem;
					.c-btn {
						width: 24rem;
					}
				}
			}
			.retry-box {
				padding-bottom: 6rem;
				font-size: 1.4rem;
				h3 {
					margin-bottom: 2rem;
					font-size: 2rem;
				}
				.cta {
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 2rem;
					gap: 1.5rem;
					.c-btn {
						width: 24rem;
					}
				}
				.note {
					margin-top: 3rem;
				}
			}
		}
	}
}

@keyframes dotPulse{0%,100%{opacity:.3;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
@keyframes slideInRight{from{transform:translateX(56px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes slideInLeft{from{transform:translateX(-56px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes pulse-btn{
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,140,0,.5); }
  50%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255,140,0,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,140,0,0); }
}
@keyframes copyFlash{
  0%{background:var(--brand);color:#fff;transform:scale(1);}
  40%{background:#2FD5C2;color:#fff;transform:scale(1.05);}
  100%{background:#fff;color:var(--brand);transform:scale(1);}
}

#debugArea {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1000;
}