@charset "UTF-8";
/*====================================
 * Interview
 =====================================*/
.container.ticket {
	background: #FAFDFF;
}

.container.product {
	background: #FFFBFC;
}

& .breadcrumbs {
	& .breadcrumbs__list{
		padding: 16px 0 24px 0;

		@media screen and (min-width: 768px) {
			padding: 16px 0 0 0;
		}

		& .breadcrumbs__item {
			color: #28343B;
		}
	}
}

.page-header-group {
	/* position: sticky;
	top: 60px;
	z-index: -1;

	@media screen and (min-width: 1281px) {
		top: 70px;
	} */

	& .page-header-group__inner {
		padding: 0 16px;
		margin-inline: auto;

		@media screen and (min-width: 1024px) {
			max-width: 1340px;
			padding: 0 30px;
		}

		& .interview-header {
			display: grid;
			gap: 18px;
			padding: 0 0 32px 0;

			@media screen and (min-width: 768px) and (max-width: 1280px) {
				grid-template-columns: 1fr 37.5vw;
				gap: 4.68vw;
				width: fit-content;
				max-width: 1280px;
				margin-inline: auto;
				align-items: center;
				padding: 0 0 24px 0;
			}

			@media screen and (min-width: 1281px) {
				grid-template-columns: 1fr 470px;
				gap: 60px;
				width: fit-content;
				max-width: 1280px;
				margin-inline: auto;
				align-items: center;
				padding: 0 0 24px 0;
			}

			& .interview-header__title {
				font-weight: 500;
				font-size: 5.86vw;
				line-height: 1.55;
				letter-spacing: 0.02em;
				text-align: center;
				opacity: 0;
				animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
				animation-delay: 0.1s;

				@media screen and (min-width: 768px) and (max-width: 1280px) {
					font-size: 3.125vw;
					line-height: 1.8;
					text-align: left;
				}

				@media screen and (min-width: 1281px) {
					font-size: 40px;
					line-height: 1.8;
					text-align: left;
				}

				& strong {
					font-size: 6.4vw;
					font-weight: inherit;

					@media screen and (min-width: 768px) and (max-width: 1280px) {
						font-size: 3.5vw;
					}

					@media screen and (min-width: 1281px) {
						font-size: 45px;
					}
				}

				& .interview__pc {
					display: none;
				}

				@media screen and (min-width: 768px) {
					& .interview__sp {
						display: none;
					}

					& .interview__pc {
						display: inline;
					}
				}
			}

			& .interview-header__image {
				width: 78.4%;
				margin-inline: auto;
				opacity: 0;
				overflow: clip;
				border-radius: 12px;
				animation: imageReveal 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
				animation-delay: 0.3s;

				@media screen and (min-width: 768px) {
					width: 100%;
				}

				& img {
					width: 100%;
					height: auto;
					display: block;
				}
			}

		}
	}
}

.container.ticket .page-header-group {
	background: linear-gradient(0deg, rgba(250, 253, 255, 0.85) 0%, rgba(232, 246, 255, 0.85) 100%);
	border-bottom: 0.5px solid rgba(77, 176, 238, 0.35);

	& .interview-header {
		& .interview-header__title {
			color: #35A7EE;
		}
	}
}

.container.product .page-header-group {
	background: linear-gradient(0deg, rgba(255, 252, 253, 0.85) 15.38%, rgba(255, 240, 245, 0.85) 100%);
	border-bottom: 1px solid rgba(245, 129, 165, 0.35);

	& .interview-header {
		& .interview-header__title {
			color: #F581A5;
		}
	}
}

.interview__wrap {
	padding: 16px 16px 64px 16px;

	@media screen and (min-width: 1024px) {
		padding: 72px 16px 96px 16px;
	}
}

.interview__contents {
	max-width: 850px;
	margin-inline: auto;

	@media screen and (min-width: 1024px) {
		display: grid;
		grid-template-columns: 350px 1fr;
		max-width: 1280px;
		margin-inline: auto;
	}

	& .interview-info {
		padding: 0 8px 24px 8px;

		@media screen and (min-width: 1024px) {
			padding: 16px 20px 18px 20px;
		}

		& .interview-info__inner {
			position: sticky;
			top: 100px;
		}

		& .interview-info__group {
			position: relative;
			font-size: 18px;
			font-weight: 700;
			letter-spacing: 0.05em;
			line-height: 1.9;
			background-size: 14px 14px;
			background-repeat: no-repeat;
			background-position: left center;
			padding-left: 20px;

			@media screen and (min-width: 1024px) {
				font-size: 20px;
				line-height: 1.7;
				background-size: 17px 17px;
				padding-left: 25px;
			}
		}

		& .interview-info__role {
			font-size: 18px;
			font-weight: 500;
			line-height: 1.2;
			margin-top: 6px;

			@media screen and (min-width: 1024px) {
				font-size: 21px;
				margin-top: 12px;
			}
		}

		& .interview-info__name {
			font-size: 24px;
			line-height: 1.2;
			margin-top: 16px;

			@media screen and (min-width: 1024px) {
				font-size: 28px;
			}

			&::after {
				content: "さん";
				font-size: 16px;
			}
		}

		& .interview-info__year {
			font-size: 15px;
			margin-top: 6px;

			@media screen and (min-width: 1024px) {
				font-size: 16px;
				margin-top: 8px;
			}
		}
	}

	& .interview-article {

		@media screen and (min-width: 1024px) {
			padding: 0 40px;
		}

		& .interview-article__heading {
			font-size: 22px;
			font-weight: 500;
			margin-top: 24px;
			padding: 0 8px;
			line-height: 1.6;

			@media screen and (min-width: 1024px) {
				/* font-size: 28px; */
				font-size: 1.75rem;
				margin-top: 0;
				line-height: 1.7;
			}

			& strong {
				font-size: 24px;
				font-weight: inherit;

				@media screen and (min-width: 1024px) {
					/* font-size: 32px; */
					font-size: 2rem;
				}

			}
		}

		& .interview-talk + .interview-article__heading {
			margin-top: 32px;

			@media screen and (min-width: 1024px) {
				margin-top: 48px;
			}
		}

		& .interview-article__image {
			margin-top: 16px;
			box-shadow: 4px 4px 10px rgba(194, 202, 208, 0.7);
			border-radius: 12px;
			overflow: clip;

			@media screen and (min-width: 1024px) {
				margin-top: 32px;
			}

		}

		& .interview-talk {
			margin-top: 28px;
			border-width: 0.5px 0px;
			border-style: solid;
			padding: 24px 8px;
			background-color: #FFF;

			@media screen and (min-width: 1024px) {
				padding: 24px 28px;
			}

			& + .interview-talk {
				margin-top: 24px;
			}

			& .interview-talk__question {
				position: relative;
				font-size: 20px;
				font-weight: 500;
				/* padding-left: 32px; */
				padding-left: 2rem;
				margin-bottom: 16px;

				@media screen and (min-width: 768px) {
					margin-bottom: 24px;
					/* font-size: 22px; */
					font-size: 1.375rem;
				}

				&::before {
					position: absolute;
					content: "Q.";
					font-family: "Reddit Sans", sans-serif;
					font-optical-sizing: auto;
					font-weight: 400;
					font-style: normal;
					font-size: 24px;
					letter-spacing: 0.1em;
					line-height: 1.25;
					top: 0;
					left: 0;

					@media screen and (min-width: 1024px) {
						/* font-size: 26px; */
						font-size: 1.625rem;
					}
				}
			}

			& .interview-talk__answer {
				p {
					font-size: 16px;
					line-height: 1.6;
					letter-spacing: 0.007em;

					@media screen and (min-width: 1024px) {
						/* font-size: 18px; */
						font-size: 1.125rem;
					}

					& strong {
						font-size: 18px;
						font-weight: 500;

						@media screen and (min-width: 1024px) {
							/* font-size: 20px; */
							font-size: 1.25rem;
						}
					}

					& + p {
						margin-top: 10px;

						@media screen and (min-width: 1024px) {
							margin-top: 16px;
						}
					}
				}
			}
		}

	}

}

.container.ticket .interview__wrap {
	background: #FAFDFF;
}

.container.ticket .interview__contents {
	& .interview-info {
		border-bottom: 0.5px solid rgba(77, 176, 238, 0.35);

		@media screen and (min-width: 1024px) {
			border-right: 1px solid rgba(77, 176, 238, 0.35);
			border-bottom: none;
		}

		& .interview-info__group {
			color: #4DB0EE;
			background-image: url(../images/interview/icon_group_blue.svg);
		}
	}

	& .interview-article {
		& .interview-article__heading {
			color: #35A7EE;
		}

		& .interview-talk {
			border-color: rgba(77, 176, 238, 0.45);

			& .interview-talk__question {
				color: #35A7EE;
			}
		}
	}
}

.container.product .interview__wrap {
	background: #FFFBFC;
}

.container.product .interview__contents {
	& .interview-info {
		border-bottom: 0.5px solid rgba(245, 129, 165, 0.35);

		@media screen and (min-width: 1024px) {
			border-right: 1px solid rgba(245, 129, 165, 0.35);
			border-bottom: none;
		}

		& .interview-info__group {
			color: #F581A5;
			background-image: url(../images/interview/icon_group_pink.svg);
		}
	}

	& .interview-article {
		& .interview-article__heading {
			color: #F581A5;
		}

		& .interview-talk {
			border-color: rgba(245, 129, 165, 0.45);

			& .interview-talk__question {
				color: #F581A5;
			}
		}
	}
}


& .pageback-btn{
	margin-top: 32px;

	@media screen and (min-width: 1024px) {
		margin-top: 80px;
	}

	& .pageback-btn__link {
		display: block;
		width: 280px;
		height: 54px;
		line-height: 54px;
		background: #FFFFFF;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		margin-inline: auto;
	}
}

.container.ticket .pageback-btn {
	& .pageback-btn__link {
		border: 0.7px solid rgba(77, 176, 238, 0.45);
		color: #35A7EE;
	}
}

.container.product .pageback-btn {
	& .pageback-btn__link {
		border: 1px solid rgba(245, 129, 165, 0.45);
		color: #F581A5;
	}
}


/*====================================
 * Pagetop Button
 =====================================*/
.pagetop {
	position: fixed;
	bottom: 40px;
	right: 20px;
	display: flex;
	justify-content: right;
	z-index: 2;

	& a {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 4px;
		width: 100px;
		height: 72px;
		color: #FFF;
		font-family: "Ubuntu Sans", sans-serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		font-variation-settings: "wdth" 100;
		font-size: 14px;
		letter-spacing: 0.1em;
		line-height: 1.2;
		transition: transform 0.3s ease, box-shadow 0.3s ease;

		@media screen and (min-width: 1024px) {
			width: 128px;
			height: 87px;
			font-size: 16px;
		}

		&::before {
			content: "";
			display: block;
			width: 23px;
			height: 25px;
			background-image: url(../images/interview/pagetop_arrow.svg);
			background-repeat: no-repeat;
			background-position: top center;
			background-size: 100%;

			@media screen and (min-width: 1024px) {
				width: 26px;
				height: 28px;
			}

		}

		&:hover {
			transform: translateY(-4px);
			opacity: 1;
		}
	}
}

.container.ticket .pagetop {
	& a {
		background: #4DB0EE;
		border: 1px solid #FAFDFF;
		box-shadow: 2px 2px 10px rgba(97, 164, 209, 0.45);

		&:hover {
			box-shadow: 2px 6px 15px rgba(97, 164, 209, 0.6);
		}
	}
}

.container.product .pagetop {
	& a {
		background: #F581A5;
		border: 1px solid #FFFBFC;
		box-shadow: 2px 2px 10px rgba(237, 181, 199, 0.45);

		&:hover {
			box-shadow: 2px 6px 15px rgba(237, 181, 199, 0.6);
		}
	}
}

/*====================================
 * Page Load Animations
 =====================================*/
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes imageReveal {
	from {
		opacity: 0;
		transform: scale(1.06) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInSimple {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}