@charset "UTF-8";

body.interview {
	#mainv {
		width: 100%;
		height: 300px;
		background: url(../images/interview/mainv.jpg) no-repeat center center/cover;
		padding-top: 120px;
	}
	#lead {
		padding: 60px 0;
		.leadtext {
			text-align: center;
			margin: 0 0 100px;
		}
		.daihyo {
			& h2 {
				font-size: 1.375rem;
				font-weight: 700;
				margin-bottom: 10px;
			}
			p.sign {
				font-weight: 700;
				text-align: right;
				.kanji {
					font-size: 1.25rem;
					margin: 0 .5em 0 1em;
				}
			}
		}
	}
	#interviews {
		background: linear-gradient(to bottom,  #fff 0%, var(--color-lgreen) 20%, var(--color-lgreen) 80%, #fff 100%);
		padding: 60px 0 60px;
		.interviews {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			& li {
				width: 325px;
				margin-bottom: 30px;
				& figure {
					margin-bottom: 5px;
					& img {
						width: 100%;
						height: auto;
						aspect-ratio: 65 / 34;
						object-fit: cover;
						border-radius: 10px;
					}
				}
				.katagaki {
					color: #737c87;
					font-size: .75rem;
				}
				.name {
					font-size: .75rem;
					& span {
						font-size: 1.5rem;
						font-weight: 700;
					}
				}

			}
		}
	}
}


@media screen and (max-width:756px) {
	body.interview {
		#mainv {
			width: 100vw;
			height: 32vw;
			background: url(../images/interview/mainv_sp.jpg) no-repeat center top/100% auto;
			padding-top: 10vw;
			& h1 {
				& img {
					width: auto;
					height: 6.4vw;
				}
			}
		}
		#lead {
			padding: 6vw 0;
			.leadtext {
				text-align: center;
				margin: 0 0 5vw;
			}
			.daihyo {
				display: block;
				& figure {
					width: 100%;
					margin-bottom: 3vw;
					& img {
						width: 100%;
					}
				}
				.text {
					width: 100%;
				}
			}
		}
		#interviews {
			padding: 6vw 0 6vw;
			.interviews {
				display: block;
				& li {
					width: 100%;
					margin-bottom: 6vw;
					& figure {
						margin-bottom: 3vw;
					}
				}
			}
		}
	}
}

/* ------------------------- スタッフ個別ページ ---*/

body.interview-single {
	#mainv {
		width: 100%;
		height: 300px;
		background: url(../images/interview/mainv-single.jpg) no-repeat center center/cover;
		padding-top: 120px;
	}
	#mv {
		padding: 60px 0;
		.subContents2 {
			display: flex;
			justify-content: space-between;
			.text {
				width: 400px;
				& h2 {
					font-size: 1.25rem;
					font-weight: 700;
					line-height: 1.6;
				}
				.katagaki {
					color: #737c87;
					font-size: .75rem;
				}
				.name {
					font-size: .75rem;
					& span {
						font-size: 1.5rem;
						font-weight: 700;
					}
				}
			}
			.mv {
				width: 325px;
				position: relative;
			}
			.mv::after {
				content: "";
				display: inline-block;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 20px 0 20px 36px;
				border-color: transparent transparent transparent rgba(255,255,255,.6);
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	#schedule {
		padding: 60px 0 60px;
		.subContents2 {
			background: var(--color-lgreen);
			padding: 50px 50px 10px;
			position: relative;
			& figure {
				width: 325px;
				position: absolute;
				top: -10px;
				right: -10px;
				& img {
					width: 100%;
					height: auto;
					aspect-ratio: 65 / 40;
					object-fit: cover;
					border-radius: 10px;
				}
			}
			& h2 {
			}
			.schedule {
				& li {
					background: #fff;
					border-radius: 10px;
					margin: 0 0 40px;
					padding: 20px 30px;
					&:first-child {
						padding-right: 280px;
					}
					& h3 {
						font-size: 1.125rem;
						font-weight: 700;
					}
				}
			}
		}
	}
	#qa {
		padding: 0 0 60px;
		.subContents2 {
			& h2 {
				margin-right: 50px;
				margin-left: 50px;
			}
			.honbun {
				margin: 0 50px;
				& h3 {
					font-size: 1.125rem;
					font-weight: bold;
					margin-top: 2em;
				}
				& p {
					margin-top: 1.5em;
				}
				& figure {
					margin-top: 1.5em;
				}
			}
			.bottom {
				text-align: center;
				border-top: dotted 2px #b3b3b3;
				margin: 4em 0 0;
				padding: 30px 0 0 0;
				.btn-back {
					width: 20em;
				}
			}
		}
	}
}


@media screen and (max-width:756px) {
	body.interview-single {
		#mainv {
			width: 100vw;
			height: 32vw;
			background: url(../images/interview/mainv_sp-single.jpg) no-repeat center top/100% auto;
			padding-top: 10vw;
			& h1 {
				& img {
					width: auto;
					height: 6.4vw;
				}
			}
		}
		#mv {
			padding: 6vw 0;
			.subContents2 {
				display: block;
				.text {
					width: 100%;
					margin-bottom: 5vw;
					& h2 {
						margin-bottom: 3vw;
					}
				}
				.mv {
					width: 100%;
				}
			}
		}
		#schedule {
			padding: 40vw 0 6vw;
			.subContents2 {
				background: var(--color-lgreen);
				padding: 28vw 5vw 8vw;
				position: relative;
				& figure {
					width: 90vw;
					position: absolute;
					top: -30vw;
					left: 5vw;
				}
				& h2 {
					margin-top: 5vw;
				}
				.schedule {
					& li {
						margin: 0 0 5vw;
						padding: 4vw 5vw;
						&:first-child {
							padding-right: 5vw;
						}
					}
				}
			}
		}
		#qa {
			padding: 0 0 10vw;
			.subContents2 {
				& h2 {
				}
				.honbun {
					margin: 0;
				}
				.bottom {
					.btn-back {
						width: 20em;
					}
				}
			}
		}
	}
}