@charset "utf-8";
/* CSS Document */
#keyVisual{
	background: url("../img/keyvisual_pc.webp") no-repeat right center / cover;
}

[id^="sec_"] .ttl-sub{
	text-align: left;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 20px;
	background: #fff;
	padding: 11px 12px 16px;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: fit-content;
}
[id^="sec_"] .ttl-sub::before,
[id^="sec_"] .ttl-sub::after{
	display: block;
	content: "";
	width: 20px;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 0;
}
[id^="sec_"] .ttl-sub::before{
	right: calc(100% - 1px);
	clip-path: polygon(95% 0, 100% 0, 100% 100%, 0 100%);
}
[id^="sec_"] .ttl-sub::after{
	left: 100%;
	clip-path: polygon(0 0, 100% 0, 5% 100%, 0 100%);
}

	[id^="sec_"] .ttl-sub .degree1{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-shrink: 0;
	}
		[id^="sec_"] .ttl-sub .degree1::after{
			content: "";
			display: block;
			background: url("../img/icon_line.svg") no-repeat center / contain;
			margin-left: 15px;
			width: 24px;
			height: 37px;
			flex-shrink: 0;
		}
		[id^="sec_"] .ttl-sub .degree1.none::after{
			content: none;
		}

[id^="sec_"] .ttl-sub .degree2{
	margin-left: 7px;
}

#sec_ttl{
	margin-top: 128px;
}

#sec_ttl .flexBox{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
	#sec_ttl .imageBox{
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
		aspect-ratio: 960/530;
		width: calc(51% + (100vw - 1200px) / 2);
		max-width: calc(50% + 360px);
		margin-right: max(calc(50% - 50vw), -360px);
	}
	#sec_ttl .txtBox{
		font-size: 2rem;
		font-weight: 500;
		width: 49%;
		text-align: left;
		padding-top: 30px;
		padding-bottom: clamp(50px,5.5vw,100px);
		position: relative;
		background: url("../img/obje_line.svg") no-repeat calc(100% - 40px) -56%; 
	}

#sec_ttl .txtBox::after,
#sec_ttl .txtBox::before{
	content: "";
	display: block;
	background: var(--color-base);
	height: calc(100% + 48px);
	position: absolute;
	top: -48px;
}
#sec_ttl .txtBox::before{
	max-width: 1200px;
	width: calc(100vw - 10px);
	left: 0;
	z-index: -1;
	clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
}
#sec_ttl .txtBox::after{
	right: 100%;
	width: 100%;
}

#sec_ttl .name{
	font-size: 6rem;
	font-family: "Barlow", sans-serif;
	color: #fff;
}

#sec_ttl .joining{
	color: #fff;
	font-weight: 500;
	font-size: 2rem;
	margin-top: 10px;
}

#contentsBlock .link.box{
	margin-top: 80px;
}

@media screen and (max-width: 1920px){
	#keyVisual{
		background-position: 4vw center;
	}
}
@media screen and (max-width: 1740px){
	#keyVisual{
		background-position: calc(100% /2 - -2vw) center;
	}
}
@media screen and (max-width: 1440px){
	#keyVisual{
		background-position: 20% center;
	}
}
@media screen and (max-width: 1200px){
	#keyVisual{
		background-position: right center;
	}
	.flexBox{
		flex-wrap: wrap;
	}
	#sec_ttl .txtBox,
	#sec_ttl .imageBox{
		width: 100%;
	}
	#sec_ttl .imageBox{
		margin-left: auto;
		max-width: 960px;
		position: relative;
		z-index: 10;
	}
	
	#sec_ttl .txtBox{
		padding-bottom: clamp(60px,22vw,40%);
		margin-bottom: -17vw;
		background-position: calc(100% - 50px) -126%;
	}
	#sec_ttl .txtBox::before{
		clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
	}
	[id^="sec_"] .ttl-sub{
		margin-left: -20px;
	}
	[id^="sec_"] .ttl-sub::before{
		content: none;
	}
}
@media screen and (max-width: 820px){
	#keyVisual{
		background-position: 27% center;
	}
	#sec_ttl{
		margin-top: 75px;
	}
	
	#sec_ttl .txtBox{
		background-position: calc(100% - 40px) 10vw;
		background-size: 95px;
	}
	
	[id^="sec_"] .ttl-sub{
		display: block;
		padding: 15px 12px 16px;
		padding-left: 20px;
		font-size: 2.5rem;
	}
	[id^="sec_"] .ttl-sub .degree1::after{
		margin-left: 9px;
		width: 19px;
		height: 31px;
	}
	[id^="sec_"] .ttl-sub .degree2{
		display: inline-block;
		margin-top: 8px;
		margin-left: 0;
	}
	
	#sec_ttl .name{
		font-size: 4.5rem;
	}
	#sec_ttl .joining{
		margin-top: 0;
		font-size: 1.6rem;
	}
	
	#sec_ttl .txtBox::after,
	#sec_ttl .txtBox::before{
		top: -20px;
	}
	#sec_ttl .txtBox::before{
		clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
	}

	#contentsBlock .link.box{
		margin-top: 60px;
	}
}
@media screen and (max-width: 767px){
	#keyVisual{
		background-image: url("../img/keyvisual_sp.webp");
		background-position: 80% center;
	}
}
@media screen and (max-width: 500px){
	#sec_ttl .txtBox{
		background-position: 91% 39vw;
		padding-bottom: 26vw;
	}
	#sec_ttl .txtBox::before{
		clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
	}
}


/* ------------------------------------------------------------------------ */

/* Question

/* ------------------------------------------------------------------------ */

#sec_question{
	margin-top: 115px;
}

#sec_question .q-ttl{
	font-size: 2.8rem;
	font-weight: 500;
	text-align: left;
	padding: 19px 32px 20px;
	background: #f0f0f0;
	position: relative;
}
	#sec_question .q-ttl .label{
		background: var(--color-base);
		color: #fff;
		font-size: 2rem;
		font-family: "Barlow", sans-serif;
		font-weight: 500;
		line-height: 30px;
		padding: 0 10px;
		position: absolute;
		top: -15px;
		left: 0;
		z-index: 1;
	}
		#sec_question .q-ttl .label::after{
			display: block;
			content: "";
			width: 10px;
			height: 100%;
			background: var(--color-base);
			position: absolute;
			top: 0;
			left: calc(100% - 1px);
			clip-path: polygon(0 0, 100% 0, 5% 100%, 0 100%);
		}
		#sec_question .q-ttl .label .num{
			margin-left: 9px;
			font-size: 1.2em;
			font-weight: 700;
		}

#sec_question .container + .container{
	margin-top: 95px;
}

#sec_question .container .txtBox{
	text-align: left;
	line-height: 2;
	margin-top: 40px;
}
#sec_question .container .flex .txtBox{
	width: 50%;
}
#sec_question .container .flex figure{
	max-width: 590px;
	width: 50%;
	padding: 0 30px;
	margin-top: -40px;
	position: relative;
	z-index: 10;
}

@media screen and (max-width: 1200px){
	#sec_question .container .flex figure{
		margin: 40px 0 0;
	}
}
@media screen and (max-width: 820px){
	#sec_question .q-ttl{
		font-size: 2rem;
		padding: 16px 15px 12px;
	}
	#sec_question .q-ttl .label{
		font-size: 1.4rem;
		line-height: 20px;
		padding: 0 5px;
		top: -11px;
	}
	#sec_question .q-ttl .label .num{
		margin-left: 3px;
	}
	#sec_question .container .txtBox{
		margin-top: 20px;
	}
	#sec_question .container .flex{
		flex-direction: column;
	}
	#sec_question .container .flex .txtBox{
		width: 100%;
	}
	#sec_question .container .flex figure{
		padding: 0;
		width: 100%;
		margin-top: 20px;
		margin-left: -20px;
	}
	#sec_question .container + .container{
		margin-top: 70px;
	}
}



/* ------------------------------------------------------------------------ */

/* 1日の流れ

/* ------------------------------------------------------------------------ */
#sec_flow{
	margin-top: 120px;
	padding: 120px 0;
	background: url("../img/bg_square.png");
}
#sec_flow .flow-ttl{
	background: var(--color-black);
	color: #fff;
	font-size: 2.8rem;
	padding: 7px 10px;
	position: relative;
	z-index: 1;
}
#sec_flow .flow-ttl::before,
#sec_flow .flow-ttl::after{
	content: "";
	display: inline-block;
	width: 10px;
	height: 100%;
	background: var(--color-black);
	position: absolute;
	top: 0;
	transform: skewX(-10deg);
}
#sec_flow .flow-ttl::before{
	right: calc(100% - 5px);
}
#sec_flow .flow-ttl::after{
	left: calc(100% - 5px);
}

#sec_flow .container{
	background: #fff;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	margin-top: 40px;
	padding: 40px 0;
}

#sec_flow .container + .container{
	margin-top: 64px;
}

#sec_flow .container dt{
	font-family: "Barlow", sans-serif;
	font-size: 2.4rem;
	font-weight: 600;
	color: var(--color-base);
	flex-shrink: 0;
	text-align: left;
	padding-left: 50px;
	width: 143px;
	position: relative;
	z-index: 1;
}
#sec_flow .container dt::before{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: #fff;
	border: solid 6px var(--color-base);
	border-radius: 50%;
	position: absolute;
	top: 8px;
	right: 0;
	z-index: 2;
}
#sec_flow .container dt::after{
	content: "";
	display: block;
	width: 2px;
	height: calc(100% + 145px);
	background: var(--color-base);
	position: absolute;
	top: 10px;
	right: 9px;
}

#sec_flow .container:last-child dt::after{
	content: none;
}

#sec_flow .container dd{
	padding-right: 30px;
	padding-left: 30px;
	width: 100%;
}

#sec_flow dd .txtBox{
	text-align: left;
	line-height: 1.875;
}

#sec_flow .flow-sub-ttl{
	font-size: 2.4rem;
	font-weight: 700;
	color:  var(--color-base);
	margin-bottom: 20px;
	line-height: 1.2;
}

#sec_flow dd .flex {
	align-items: center;
}

#sec_flow dd .flex figure{
    aspect-ratio: 520 / 246;
	padding: 0 20px;
	max-width: 520px;
	width: 55%;
	position: relative;
}

#sec_flow dd .flex .txtBox{
	width: 38%;
}
#sec_flow dd .flex.reverse .txtBox{
	margin-right: 40px;
}

@media screen and (max-width: 1200px){
	#sec_flow .container + .container{
		margin-top: 155px;
	}
	
	#sec_flow .container dt::after{
		height: calc(100% + 245px);
	}
	
	#sec_flow .container dd{
		width: 100%;
	}
	#sec_flow dd .flex{
		flex-direction: column;
	}
		#sec_flow dd .flex .txtBox,
		#sec_flow dd .flex figure{
			width: 100%;
		}
		#sec_flow dd .flex figure{
			margin: 20px -70px -150px auto;
			padding: 0;
		}
	
	#sec_flow dd .flex.reverse{
		flex-direction: column-reverse;
	}
		#sec_flow dd .flex.reverse .txtBox{
			margin-right: 0;
		}
}
@media screen and (max-width: 820px){
	#sec_flow{
		margin-top: 80px;
		padding: 80px 0;
	}
	#sec_flow .flow-ttl{
		font-size: 2rem;
	}
	
	#sec_flow .container{
		padding: 15px 0;
	}
	
	#sec_flow .container + .container{
		margin-top: 30%;
	}
	
	#sec_flow .container dt{
		font-size: 1.8rem;
		padding-left: 20px;
		width: 85px;
	}
	#sec_flow .container dt::before{
		width: 10px;
		height: 10px;
		border-width: 3px;
	}
	#sec_flow .container dt::after{
		right: 4px;
		height: calc(100% + 33vw);
	}
	#sec_flow .container dd{
		padding: 0 15px;
	}
	#sec_flow .flow-sub-ttl{
		font-size: 1.8rem;
		margin-top: 3px;
		margin-bottom: 10px;
	}
	
	#sec_flow dd .flex figure{
		margin-right: -40px;
		margin-bottom: -30%;
		aspect-ratio: 528/294;
	}
}
@media screen and (max-width: 500px){
	#sec_flow .container dt::after{
		height: calc(100% + 35.2vw);
	}
}