@charset "UTF-8";

#Tech_content{
    margin: 0 auto;
	padding-bottom: clamp(100 * 0.5px, 100 / 960 * 100vw, 100px);
}
#Tech_content h1,
#Tech_content h2{
    letter-spacing: -0.03em;
	line-height: 1.2;
}


/* ---------- TechHero ---------- */
#Tech_content .TechHero{
	margin: 0 auto;
	position: relative;
}
#Tech_content .TechHero__Img{
	position: relative;
	z-index: 1;
}
#Tech_content .TechHero .Heading_wrap{
	margin: 0 auto;
	position: absolute;
	left:44%;
	top:35%;
	z-index: 2;
}
#Tech_content .TechHero .Heading_wrap h1{
	color:#FFF;
	font-size: 6vw;
	z-index: 2;
	font-weight: 900;
}

#Tech_content .Lead__block{
	padding-top:32px;
	margin-bottom:15vw;
	background:#f7f7f9;
	position: relative;
	
}
#Tech_content .Lead__block::after{
	content:"";
	position: absolute;
	left:0;
	bottom:-15vw;
	width:100%;
	height: 15vw;
	background:#f7f7f9;
	clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);
	z-index: 1;
}
#Tech_content .Lead__block p{
	font-weight: 500;
}

/* ---------- StageArea ---------- */
#Tech_content .StageArea{
	margin: 0;
}
#Tech_content .StageArea .Section__heading{
	text-align: center;
}
	@media only screen and (max-width: 559px) {
		#Tech_content .StageArea .Section__heading {
			padding-top:1em;
		}
	}
#Tech_content .StageArea .Section__heading .catch{
	font-size: 2rem;
	font-weight: 700;
	margin-bottom:20px;
	padding-bottom:5px;
	padding-left:30px;
	padding-right:30px;
	border-bottom:1px solid #00a8a9;
	position: relative;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .StageArea .Section__heading .catch {
			font-size: 1.8rem;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .StageArea .Section__heading .catch {
			font-size: 1.6rem;
		}
	}
#Tech_content .StageArea .Section__heading .catch::before{
	content:"";
	position: absolute;
	left:0;
	bottom:0;
	width:1px;
	height:25px;
	background: #00a8a9;
	transform: rotate(45deg);
    transform-origin: 100% 100%;
}
#Tech_content .StageArea .Section__heading .catch::after{
	content:"";
	position: absolute;
	right:0;
	bottom:-25px;
	width:1px;
	height:25px;
	background: #00a8a9;
	transform: rotate(45deg);
    transform-origin: 0% 0%;
}
#Tech_content .StageArea .Section__heading h2{
	font-size: 7rem;
	font-weight: 900;
	margin-top:2rem;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .StageArea .Section__heading h2 {
			font-size: 7.3vw;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .StageArea .Section__heading h2 {
			font-size: 7.3vw;
		}
	}

/* ---------- StageAreaCard ---------- */

#Tech_content .StageAreaCard{
	margin: 3rem 0;
	display: flex;
	justify-content:space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
}
		@media only screen and (min-width: 560px) and (max-width: 959px) {
			#Tech_content .StageAreaCard {
				justify-content: space-between;
				flex-direction: column;
				gap:1em;
			}
		}
		@media only screen and (max-width: 559px) {
			#Tech_content .StageAreaCard {
				justify-content: space-between;
				flex-direction: column;
				gap: 1px;
			}
		}
#Tech_content .StageAreaCard_Item{
	width: calc(100% - 8px)/3;
	margin: 0;
	/* gap:10px; */
	position: relative;
}
	@media only screen and (max-width: 959px) {
		#Tech_content .StageAreaCard_Item {
			width: 100%;
		}
	}
#Tech_content .StageAreaCard_content{
	width:100%;
	height: 100%;

	padding: 0 30px 30px 30px;
	color:#FFF;
	position: absolute;
	left: 0;
	top: 0;

	display: flex;
	flex-direction: column;
	align-items: stretch;
	z-index: 10;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .StageAreaCard_content {
			padding: 0 50px 50px 50px;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .StageAreaCard_content {
			padding: 0 20px 30px 20px;
		}
	}
#Tech_content .StageAreaCard_heading{
	padding-top:10vw;
	text-align: center;
	flex-grow: 1;
}
		@media only screen and (min-width: 560px) and (max-width: 959px) {
			#Tech_content .StageAreaCard_heading {
				padding-top: 8vw;
			}
		}
		@media only screen and (max-width: 559px) {
			#Tech_content .StageAreaCard_heading {
				padding-top: 14vw;
			}
		}
#Tech_content .StageAreaCard_heading .-number{
	font-size: 7vw;
	line-height: 1;
	font-family: "Zen Kaku Gothic New", serif;
	font-weight: 300;
	font-style: normal;
	color:#00a8a9;
	margin:0;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .StageAreaCard_heading .-number {
			font-size: 15vw;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .StageAreaCard_heading .-number {
			font-size: 18vw;
		}
	}
#Tech_content .StageAreaCard_heading h3{
	font-size: 2.5vw;
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 900;
	color:#FFF;
	margin-top: 0.5em;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .StageAreaCard_heading h3 {
			font-size: 5vw;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .StageAreaCard_heading h3 {
			font-size: 6vw;
		}
	}
#Tech_content .StageAreaCard_inner{
	flex-grow: 0;
}
#Tech_content .StageAreaCard_inner p{
	font-size: 1.5rem;
	margin-bottom:1em;
}
		@media only screen and (max-width: 559px) {
			#Tech_content .StageAreaCard_inner p {
				font-size: 1.4rem;
			}
		}

#Tech_content .StageAreaCard_image{
	width:100%;
	position: relative;
	z-index: 1;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .StageAreaCard_image img {
			width: 100%;
			height: 60vw;
			object-fit: cover;
			object-position:0 20%;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .StageAreaCard_image img{
			width: 100%;
			height:100vw;
			object-fit: cover;
		}
	}
#Tech_content .StageAreaCard_Item .Button_wrap{
width:100%;
padding:1.5rem 0;
display: flex;
justify-content: center;
align-items: center;
background-color:rgba(0,168,169,0.6);
}
#Tech_content .Button {
	padding: 0;
}
#Tech_content a.Button_inner {
	padding: 0rem 3rem 0rem 2rem;
}
	@media only screen and (max-width: 559px) {
		a.Button_inner {
			padding: 0rem 2rem 0rem 1rem;
		}
	}
#Tech_content .StageAreaCard_Item .Button{
	background-color:transparent;
	
}
#Tech_content .StageAreaCard_Item .Button:not(:first-child){
	border-left:1px solid #f7f7f9;
	margin-left:2rem;
}
#Tech_content .StageAreaCard_Item .Button_text {
	position: relative;
	display: block;
	font-size: 1vw;
	line-height: 1;
	font-weight: 400;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .StageAreaCard_Item .Button_text {
			font-size: 1.6rem;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .StageAreaCard_Item .Button_text {
			font-size: 1.4rem;
		}
	}

#Tech_content .Button_wrap.-right{
	margin-top: 1em;
	width: 100%;
	text-align: right;
	justify-content: flex-end;
	gap: 10px;
}
#Tech_content .Button_wrap.-right a{
	padding: 1rem 2rem 1rem 2rem;
}

/* ---------- OccupationArea ---------- */
.OccupationArea{
	width:100%;
	margin-top: 10rem;
	display: flex;
	flex-direction: column;
	gap: 6rem;
}
		@media only screen and (min-width: 560px) and (max-width: 959px) {
			.OccupationArea {
				margin-top: 8rem;
				gap: 4rem;
			}
		}
		@media only screen and (max-width: 559px) {
			.OccupationArea {
				margin-top: 8rem;
				gap: 2rem;
			}
		}
#Tech_content .OccupationCard{
	width: 100%;
	position: relative;
	background:#78878b;

	display: flex;
	justify-content: space-between;
}
	@media only screen and (max-width: 559px) {
		#Tech_content .OccupationCard {
			flex-direction: column;
		}
	}
#Tech_content .OccupationCard__content{
	width:50%;
}
	@media only screen and (max-width: 559px) {
		#Tech_content .OccupationCard__content {
			width: 100%;
		}
	}
#Tech_content .OccupationCard__heading{
	padding:3vw 0 0 5vw;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .OccupationCard__heading {
			padding: 4vw 0 0 5vw;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .OccupationCard__heading {
			padding: 6vw 0 0 5vw;
		}
	}
#Tech_content .OccupationCard__heading h2{
	display: inline-block;
	font-size: 7vw;
	font-weight: 500;
	color:#FFF;
	border-bottom: 1px solid #ff9900;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .OccupationCard__heading h2 {
			font-size: 6.4rem;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .OccupationCard__heading h2 {
			font-size: 10vw;
		}
	}
#Tech_content .OccupationCard__desc{
	padding:2.5vw 0 0 8vw;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .OccupationCard__desc {
			padding: 2.5rem 0 15vw 8vw;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .OccupationCard__desc {
			padding: 5vw 0 0 8vw;
		}
	}
#Tech_content .OccupationCard__desc h3{
	font-size: 2.8vw;
	line-height: 1.5;
	font-weight: 900;
	color:#FFF;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .OccupationCard__desc h3 {
			font-size: 2.8vw;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .OccupationCard__desc h3 {
			font-size: 5vw;
		}
	}
#Tech_content .OccupationCard__desc p{
	width:85%;
	margin-top:1.5em;
	font-size: 1.2vw;
	line-height: 2;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .OccupationCard__desc p {
			font-size: 1.4rem;
			line-height: 1.8;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .OccupationCard__desc p {
			width: 95%;
			font-size: 1.4rem;
			line-height: 1.8;
		}
	}
#Tech_content .OccupationCard__interview{
	width:48%;
	position: relative;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .OccupationCard__interview {
			width: 50%;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .OccupationCard__interview {
			width: 100%;
			margin-top:2em;
		}
	}
#Tech_content .OccupationCard__interview.TriangleButton_wrap a::before {
	background: #ff9900;
}
@media only screen and (min-width: 960px) {
	#Tech_content .OccupationCard__interview.TriangleButton_wrap .TriangleButton_text {
		font-size: 1.6vw;
	}
}
#Tech_content .Interview_text{
	width:100%;
	position: absolute;
	right:0;
	bottom:10%;
	z-index: 10;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .Interview_text {
			bottom: 7rem;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .Interview_text {
			width: 95%;
			bottom: 17vw;
		}
	}
#Tech_content .Interview_text .title span{
	display: inline-block;
	font-size: 1.2vw;
	line-height: 1;
	color:#00a8a9;
	padding: 0.5em;
	background-color:rgba(255,255,255,0.8);
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .Interview_text .title span {
			font-size: 1.3rem;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .Interview_text .title span {
			font-size: 3vw;
		}
	}
#Tech_content .Interview_text span{
	display: inline-block;
	margin-top:0.5rem;
	font-size: 1.8vw;
	line-height: 1;
	font-weight: 700;
	color:#FFF;
	padding: 0.5em;
	background-color:rgba(51,51,51,0.8);
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .Interview_text span {
			font-size: 1.6rem;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .Interview_text span {
			font-size: 3.5vw;
		}
	}
#Tech_content .Interview_img{
	width:90%;
	/* min-height: 52rem; */
	position: relative;
	margin-left:auto;
	margin-right: 0;
	clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 47% 100%, 0 56%);
	z-index: 1;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Tech_content .Interview_img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: relative;
			margin-left: auto;
			margin-right: 0;
			clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 50% 100%, 0 45%);
			z-index: 1;
		}
		#Tech_content .Interview_img img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	@media only screen and (max-width: 559px) {
		#Tech_content .Interview_img {
			width: 100%;
			position: relative;
			margin-left: auto;
			margin-right: 0;
			clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 50% 100%, 0 45%);
			z-index: 1;
		}
	}

#Tech_content .GridBox__Text{
	width:35%;
}
	@media only screen and (max-width: 959px) {
		#Tech_content .GridBox__Text {
			width: 100%;
		}
	}
#Tech_content .GridBox__Image{
	width:60%;
}
	@media only screen and (max-width: 959px) {
		#Tech_content .GridBox__Image {
			width: 100%;
		}
	}