@charset "UTF-8";

:root {
	--cwidth: 1200;
}

@media screen and (max-width: 768px) {
	:root {
		--cwidth: 375;
	}
}


#portrait {
	background: #ebebeb;
	padding-bottom: 20px;
	position: relative;
}

#portrait .hero {
	background: url(../images/portrait/mainbg_pc.webp) no-repeat top center;
	background-size: 100% auto;
	text-align: center;
	padding: 120px 0 160px;
	position: relative;
}
#portrait .hero figure {
	max-width: 786px;
	width: 50vw;
	margin: 0 auto;
}

#portrait .inner {
	max-width: calc(var(--cwidth)*1px - 42px);
	width: 86%;
	padding: 0 20px;
	/* padding-top: 60px; 削除 */
	margin: 0 auto;
	background: #fff;
	border: 1px solid #000;
	border-top: none;
	position: relative;
	background-image:
		repeating-linear-gradient(
			to bottom,
			#000 0px, #000 2px,
			transparent 2px, transparent 6px
		),
		repeating-linear-gradient(
			to bottom,
			#000 0px, #000 2px,
			transparent 2px, transparent 6px
		);
	background-size: 1px 6px;
	background-position: 24px 0, calc(100% - 24px) 0;
	background-repeat: repeat-y;
}

#portrait .catch-wrap {
	background: #fff;
	margin-bottom: -100px;
}
#portrait .catch {
	width: 96%;
	padding: 40px 40px 0 40px;
	margin: 0 auto;
	background: rgba(255,255,255,.8);
	position: relative;
	top: -120px;
	box-sizing: border-box;
	border-radius: 16px;
}

#portrait .catch figure {
	max-width: 535px;
	width: 50%;
}

#portrait .catch p {
	font-size: 3rem;
	line-height: 2;
}




#portrait .portrait-divider {
	display: flex;
	align-items: center;
	width: calc(100% + 40px);
	margin-left: -20px;
	margin-right: -20px;
}

#portrait .line {
	flex: 1;
	border-top: 1px dashed #000;
}

#portrait .trim img {
	display: block;
	width: 50px;
}

/* 右側のtrimは左右反転 */
#portrait .trim.right img {
	transform: scaleX(-1);
}

#portrait .logo img {
	display: block;
	width: 206px;
	margin: 0 15px;
}




#portrait .menu ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 40px;
}
#portrait .menu li {
	flex: 1;
	border-right: 1px dashed #000;
	margin-top: 20px;
}
#portrait .menu li:nth-child(3n) {
	border-right: none;
}
#portrait .menu a {
	display: block;
	padding: 24px 20px;
	text-decoration: none;
	color: inherit;
}
#portrait .menu li.coming a {
	pointer-events: none;
	cursor: default;
}
#portrait .menu figure {
	width: calc((86vw - 120px) / 3);
	height: calc((86vw - 120px) / 3);
	max-width: 300px;
	max-height: 300px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 20px;
	border: 1px solid #000;
}
#portrait .menu figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#portrait .menu .nameflex {
	position: relative;
	background: #fff;
	border: 1px solid #000;
	padding: 8px 10px;
	margin-top: -40px;
	margin-right: 50px;
	margin-bottom: 14px;
	font-size: 2rem;
	line-height: 1.6;
}
#portrait .menu .nameflex img {
	width: 40px;
}
#portrait .menu .nameflex > div:first-child {
	padding: 8px 10px;
	flex: 1;
}
#portrait .menu .nameflex > div:last-child {
	position: absolute;
	right: -50px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1px solid #000;
	background: #fff;
}
#portrait .menu p {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.8;
	border-bottom: 1px solid #000;
	padding-top: 14px;
}





/* イントロブロック */
#portrait .intro {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 0 60px;
}
#portrait .intro-left {
	flex: 1;
	border-right: 1px dashed #000;
	padding-right: 60px;
}
#portrait .spimg {
	display: none;
}
#portrait .intro-right {
	flex: 1;
}
#portrait .intro-left .num {
	font-size: 10rem;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 16px;
}
#portrait .intro-left h2 {
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.8;
	margin-bottom: 20px;
}
#portrait .intro-left .lead {
	font-size: 1.6rem;
	line-height: 1.8;
	margin-bottom: 24px;
}
#portrait .intro-left .prof {
	padding-top: 16px;
}
#portrait  .intro-left .course {
	font-size: 1.7rem;
	padding-bottom: .5em;
}
#portrait .intro-left .name {
	font-size: 3rem;
}
#portrait .intro figure {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #000;
}
#portrait .intro figure img {
	max-width: 500px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*  Q&Aブロック（繰り返し） */
#portrait .qa {
	display: flex;
	gap: 70px;
	padding: 20px 60px;
}
#portrait .qa-left {
	flex-shrink: 0;
	width: 45%;
}
#portrait .qa-right {
	flex: 1;
}
#portrait .qa h3 {
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.8;
	margin-bottom: 24px;
}
#portrait .qa-left figure {
	width: 100%;
}
#portrait .qa-left figure img {
	width: 100%;
	height: auto;
}
#portrait .q {
	font-size: 2rem;
	margin-bottom: 20px;
}
#portrait .qa-right p {
	font-size: 2rem;
	line-height: 2;
	text-indent: 1em;
}
#portrait .qa-right p.q {
	text-indent: 0;
}






#portrait .message {
	display: flex;
	align-items: center;
	gap: 40px;
	border: 1px solid #000;
	padding: 30px;
	margin: 20px 60px 60px;
}
#portrait .message .msg-title-sp {
	display: none;
}
#portrait .message figure {
	flex-shrink: 0;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #000;
}
#portrait .message figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#portrait .message .msg-title-pc {
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 16px;
}
#portrait .message p {
	font-size: 1.6rem;
	line-height: 1.8;
}
/* Other Interview */
#portrait .other-title {
	font-size: 6.2rem;
	font-weight: bold;
	text-align: center;
	padding: 40px 0 20px;
	border-top: 1px solid #000;
	margin-inline: 30px;
}






/*/////////////////// SP ///////////////////*/
/*/////////////////// SP ///////////////////*/
/*/////////////////// SP ///////////////////*/
/*/////////////////// SP ///////////////////*/
/*/////////////////// SP ///////////////////*/
@media screen and (max-width: 768px) {

	#portrait .hero {
		background: url(../images/portrait/mainbg_sp.webp) no-repeat top center;
		background-size: 100% auto;
		padding: 40% 0;
	}

	#portrait .hero figure {
		max-width: none;
		width: 80vw;
	}

	#portrait .inner {
		max-width: none;
	}

	#portrait .catch {
		position: relative;
		display: flex;
		justify-content: space-between;
		gap: 10px;
	}
	#portrait .catch figure {
		max-width: none;
		width: 45%;
		order: 2;
	}
	#portrait .catch p {
		font-size: clamp(1.2rem, 3.5vw, 3rem);
		line-height: clamp(1.4, 2vw, 2);
		order: 1;
		writing-mode: vertical-rl;
		align-self: stretch;
		padding-bottom: 0
	}

	#portrait .menu ul {
		grid-template-columns: 1fr;
	}
	#portrait .menu li {
		border-right: none;
		border-bottom: 1px dashed #000;
		width: 94%;
		margin: 0 auto;
	}
	#portrait .menu li:last-child {
		border-bottom: none;
	}
	#portrait .menu figure {
		width: 60vw;
		height: 60vw;
		max-width: 300px;
		max-height: 300px;
	}
	#portrait .menu a {
		padding: 24px 40px;
	}





		#portrait .intro {
			flex-direction: column;
			padding: 20px;
		}
		#portrait .intro-left {
			border-right: none;
			padding-right: 0;
			text-align: center;
			display: flex;
			flex-direction: column;
			width: 80%;
		}
		#portrait .intro-left .num {
			font-size: 4.5rem;
			margin-bottom: 0;
			order: 1;
		}
		#portrait .intro-left h2 {
			font-size: 1.8rem;
			order: 2;
		}
		#portrait .spimg {
			display: block;
			order: 3;
		}
		#portrait .intro-left .lead {
			font-size: 1.6rem;
			margin-bottom: 0;
			text-align: left;
			order: 5;
		}
		#portrait .intro-left .prof {
			padding-top: 16px;
			order: 4;
		}
		#portrait  .intro-left .course {
			font-size: 1.7rem;
		}
		#portrait .intro-left .name {
			font-size: 2.8rem;
			padding-bottom: .5em;
		}

		#portrait .intro-right {
			display: none;
		}
		
		#portrait .qa {
			flex-direction: column;
			padding: 20px 40px;
			gap: 0;
		}
		
		#portrait .qa-left {
			width: 100%;
		}
		
		#portrait .qa h3 {
			font-size: 2rem;
		}
		#portrait .qa-right p {
			font-size: 1.6rem;
		}


	#portrait .message {
		flex-direction: column;
		padding: 20px;
		margin: 20px 0;
		gap: 0;
		border: none;
	}
	#portrait .message .msg-title-sp {
		display: block;
		font-size: 2rem;
		font-weight: bold;
		margin-bottom: 16px;
	}
	#portrait .message .msg-title-pc {
		display: none;
	}
	#portrait .message figure {
		height: auto;
		margin: 16px auto 30px;
	}
	#portrait .message p {
		width: 86%;
		margin-inline: auto;
		font-size: 1.7rem;
		line-height: 1.8;
	}

	#portrait .other-title {
		font-size: 3rem;
		padding: 20px 0;
		margin-inline: 30px;
	}



}