@charset "utf-8";

/* For PC
---------------------------------------------------------------------------- */
#container {
	position: relative;
  display: grid;
  grid-template-columns: 1fr 430px 1fr;
  min-height: 100vh;
  /*background: linear-gradient(180deg, #DCD6CC 0%, #FFFFFF 100%);*/
}
#container::before {
	position: fixed;
	inset: 0 0 0 0;
	content: "";
	display: block;
	width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #DCD6CC 0%, #FFFFFF 100%);
}
:root{
	--widthWrap: 430px;/* min(100%, 430px)*/
}


@media screen and (max-width: 899px) {
#sideHeader #sideHeaderInner,
#sideNav{
	display: none;
}

#interview main{

}
}/* //end for 900< */
@media screen and (min-width: 900px) {
/*-----------------------------
	side
-----------------------------*/
/*		sideHeader
-----------------------------*/
#sideHeader{
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	
	display: grid;
	place-content: center;
	padding: 0 10%;
}
#sideHeaderInner{
	text-align: center;
}
#sideHeaderInner figure img{
	width: 278px;
	height: auto;
}
#sideHeaderInner figure figcaption{
	margin-top: 8px;
	font-size: 18px;
}
#sideHeaderInner p{
	font-size: 16px;
}
#sideHeaderInner .number{
	margin-top: 8px;
	display: inline-flex;
}
#sideHeaderInner a:has(figure) + .number{
	margin-top: 24px;
}
#sideHeaderInner .number span{
	border: solid var(--black);
	border-width: 1px 0;
	padding: 4px 0;
	font-size: 16px;
	font-weight: 700;
}
#sideHeaderInner .btnWrap{
	margin: 32px auto 0;
	width: min(100%, 290px);
	text-align: left;
}
#sideHeaderInner .btnWrap .btn{
	position: relative;
	padding: 16px min(2.6vw,31px) 16px 24px;
	font-size: 18px;
}
#sideHeaderInner .btnWrap .btn:not(.window):after{
	position: absolute;
	top: 50%;
	right: 24px;
	transform: rotate(45deg) translate(0, -50%);
}

/*		sideNav
-----------------------------*/
#sideNav{
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 16% 0 14%;
}
#sideNav h2.mincho{
	margin-bottom: 16px;
	font-size: 28px;
	text-align: center;
}
#sideNav ul{
	width: min(100%,288px);
}
#sideNav li{
	border-bottom: 1px solid var(--black);
}
#sideNav li:first-of-type{
	border-top: 1px solid var(--black);
}
#sideNav li  a{
	position: relative;
	display: block;
	padding: 12px 28px 12px 8px;
}
#sideNav li  a span{
	font-size: 18px;
	font-weight: 700;
	color: var(--black);
}
#sideNav li  a p{
	font-size: 16px;
	color: var(--black);
}
#sideNav li a::after{
	position: absolute;
	top: 50%;
	right: 15px;
	content: "";
	display: inline-block;
  width: 8px; 
  height: 8px;
  border-top: 2px solid var(--black);
  border-right: 2px solid var(--black);
  transform: rotate(45deg) translateY(-50%);
  vertical-align: middle;
}

}/* //end for <900 */

/************************/
.interviewMain h1 + figure{
	margin-right:max(-7.44vw,calc(430px*-0.075)) ;
	margin-left:max(-7.44vw,calc(430px*-0.0744));
 max-width: 430px;
}


#fixedBtn{
	position: fixed;
	right: calc(50% - 200px);
	bottom: 20px;
	z-index: 100;
}
#fixedBtn a{
 position: relative;
	 right:initial;
}