@charset "utf-8";


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For SmartPhone
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (max-width:767px){
	.interviewList .filterMenu{
		display:flex;
		align-items:center;
		justify-content:center;
		width:95%;
		padding:0 3% 0 3%;
		margin:10% auto 0;
	}
	.interviewList .filterMenu li{
		display:flex;
		align-items:center;
		justify-content:center;
		width:calc(100% / 3);
		padding:2% 0;
		text-align:center;
		border-right:1px solid #333;
	}
	.interviewList .filterMenu li:nth-child(1){
		width:30%;
		border-left:1px solid #333;
	}
	.interviewList .filterMenu li:nth-child(2),
	.interviewList .filterMenu li:nth-child(3){
		width:35%;
	}
	.interviewList .filterMenu li p{
		display:flex;
		align-items:center;
		font-size:3.5vw;
		cursor:pointer;
	}
	.interviewList .filterMenu li.act p{
		color:var(--clr-blue);
		font-size:3.8vw;
		cursor:auto;
	}
	.interviewList .filterMenu li.act p::after{
		content:"\ef4f";
		font-family:"Material Symbols Outlined";
	  font-variation-settings:'FILL' 1;
	}

/* ============================================ */
	/* ============================================ */
	.interviewDtls .block.first > .inner .detailsHeadBox{
		display:flex;
		flex-direction:column-reverse;
		padding:0 3% 4% 3%;
		border-bottom:1px solid #333;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox{
		margin-top:3%;
		/*display:flex;
		justify-content:center;
		flex-direction:column;
		width:45%;
		padding-right:5%;*/
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3{
		font-size:5.5vw;
		font-weight:400;
		line-height:1.2;
	}
	/*.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3::before,
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3::after{
		font-size:clamp(4rem, 5vw, 5rem);
		line-height:1.0;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3::before{
		content:"“";
		top:-0.3em;
		left:-0.45em;
		position:absolute;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3::after{
		content:"”";
		position:relative;
		top:0.2em;
		right:-0.05em;
	}*/
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox .assignmentTxt{
		font-size:4vw;
		font-weight:400;
		margin-top:3%;
		line-height:1.2;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox .schoolTxt{
		font-size:3.5vw;
		margin-top:0;
		line-height:1.2;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .imgBox{
		/*display:flex;
		justify-content:center;
		align-items:start;
		overflow:hidden;
		width:100%;
		height:60vw;
		position:relative;*/
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .imgBox .imgInnerBox{
		/*position:absolute;
		left:50%;
		transform:translateX(-50%);
		width:120%;*/
	}

/* ============================================ */
	.interviewDtls .block.second{
		padding-top:0;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items{
		margin-top:10%;
		padding:0 3%;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .ttlBox{}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .bdyBox{}

	.interviewDtls .block.second > .inner .detailsBodyBox > .items .ttlBox h4{
		padding-left:0.7em;
		font-size:4.5vw;
		font-weight:400;
		line-height:1.2;
		position:relative;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .ttlBox h4::before{
		display:block;
		content:"";
		width:2.5vw;
		height:3.1vw;
		background-image:url(../images/common/blockTtlHead-min.png);
		background-repeat:no-repeat;
		background-size:100% auto;
		position:absolute;
		left:0;
		top:1.3vw;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .bdyBox p{
		font-size:clamp(0.2rem, 3.5vw, 1.3rem);
		font-weight:400;
		line-height:1.5;
		padding-left:1em;
		margin-top:3%;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .bdyBox p:first-child{
		
	}
	.interviewDtls .block.second > .inner .imgBox{
		margin-top:8%;
	}

	.interviewDtls .block.second > .inner .notes{
		margin-top:13%;
		text-align:center;
		font-size:3vw;
	}
	.interviewDtls .block.second > .inner .cmnBtnBox{
		margin-top:8%;
	}
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For Desktop & Tablet
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (min-width:768px){
	.interviewList .filterMenu{
		display:flex;
		align-items:center;
		justify-content:center;
		width:80%;
		margin:80px auto 0;
	}
	.interviewList .filterMenu li{
		display:flex;
		align-items:center;
		justify-content:center;
		width:calc(100% / 3);
		padding:10px 0;
		text-align:center;
		border-right:1px solid #333;
	}
	.interviewList .filterMenu li:first-child{
		border-left:1px solid #333;
	}
	.interviewList .filterMenu li p{
		display:flex;
		align-items:center;
		font-size:clamp(1rem, 1.4vw, 1.4rem);
		cursor:pointer;
	}
	.interviewList .filterMenu li.act p{
		color:var(--clr-blue);
		font-size:clamp(1.1rem, 1.5vw, 1.5rem);
		cursor:auto;
	}
	.interviewList .filterMenu li.act p::after{
		content:"\ef4f";
		font-family:"Material Symbols Outlined";
	  font-variation-settings:'FILL' 1;
	}

	/* ============================================ */
	/* ============================================ */
	.interviewDtls .block.first > .inner .detailsHeadBox{
		display:flex;
		padding:0 15px 20px 15px;
		border-bottom:1px solid #333;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox{
		display:flex;
		justify-content:center;
		flex-direction:column;
		width:45%;
		padding-right:5%;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3{
		font-size:clamp(2.0rem, 3.3vw, 3.3rem);
		font-weight:400;
		line-height:1.2;
		position:relative;
	}
	/*.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3::before,
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3::after{
		font-size:clamp(4rem, 5vw, 5rem);
		line-height:1.0;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3::before{
		content:"“";
		top:-0.3em;
		left:-0.45em;
		position:absolute;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox h3::after{
		content:"”";
		position:relative;
		top:0.2em;
		right:-0.05em;
	}*/
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox .assignmentTxt{
		font-size:clamp(1.4rem, 2vw, 2rem);
		margin-top:80px;
		line-height:1.2;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .txtBox .schoolTxt{
		font-size:clamp(1.0rem, 1.6vw, 1.6rem);
		margin-top:20px;
		line-height:1.2;
	}
	.interviewDtls .block.first > .inner .detailsHeadBox .imgBox{
		width:55%;
	}
	/* ============================================ */
	.interviewDtls .block.second{
		padding-top:0;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items{
		display:flex;
		margin-top:80px;
		padding:0 5%;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .ttlBox{
		width:35%;
		margin-right:10%;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .bdyBox{
		width:55%;
	}

	.interviewDtls .block.second > .inner .detailsBodyBox > .items .ttlBox h4{
		padding-left:0.7em;
		font-size:clamp(1.5rem, 2.1vw, 2.1rem);
		font-weight:400;
		line-height:1.2;
		position:relative;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .ttlBox h4::before{
		display:block;
		content:"";
		width:1.25vw;
		height:1.48vw;
		max-width:18px;
		max-height:21px;
		min-width:13px;
		min-height:15px;
		background-image:url(../images/common/blockTtlHead-min.png);
		background-repeat:no-repeat;
		background-size:100% auto;
		position:absolute;
		left:0;
		top:0.7vw;
		top:clamp(7px, 0.6vw, 9px);
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .bdyBox p{
		font-size:clamp(1.1rem, 1.4vw, 1.4rem);
		line-height:1.5;
		padding-top:1px;
		margin-top:20px;
	}
	.interviewDtls .block.second > .inner .detailsBodyBox > .items .bdyBox p:first-child{
		margin-top:0;
	}
	.interviewDtls .block.second > .inner .imgBox{
		margin-top:80px;
	}

	.interviewDtls .block.second > .inner .notes{
		margin-top:100px;
		text-align:center;
		font-size:clamp(0.8rem, 1.0vw, 1.0rem);
	}
	.interviewDtls .block.second > .inner .cmnBtnBox{
		margin-top:50px;
	}
}