@charset "utf-8";

/*====================================================================================

		#recruit layout

====================================================================================*/

#recruit #contents {
	position: relative;
}


/*===============================================================

		#recruit #contents .main_img layout

===============================================================*/

#recruit #contents .main_img {
	width: 100%;
	height: 80vh;
    height: 100vh;
}

#recruit #contents .main_img .wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	left:0;
	top: 0;
}

#recruit #contents .main_img .inner {
	width: 100%;
	max-width: inherit;
	height: 100%;
	padding: 0;
	background: url("../../img/recruit/main_img.png") center top / cover no-repeat;
	display: block;
	position: fixed;
	top: 0;
}

@media (min-width: 738px) {
    #recruit #contents .main_img{}
    #recruit #contents .main_img #video-area {
        position: fixed;
        z-index: -5;
        top: -60px;
        right: 0;
        left: 0;
        bottom: 0;
        overflow: hidden;
    }
    #recruit #contents .main_img #video {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50px);
        width: 177.77777778vh;
        height: 56.25vw;
        height: 83.25vw;
        min-height: 100%;
        min-width: 100%;
    }

}

@media (max-width: 737px) {
  #recruit #contents  #video {
    width: 100%;
  }
}

#recruit #contents .main_img .inner p.catch {
	width: 100%;
	position: absolute;
	left: min(120px, 12vw);
	top: 190px;
	color: var(--base_black);
	font-size: 70px;
	font-weight: 700;
	line-height: 1.5;
}

#recruit #contents .main_img .inner p.catch em {
	color: var(--base_blue);
}

#recruit #contents .main_img .inner iframe {
	width: 100%;
	height: 100%;
}


@media screen and (max-width: 768px){
	#recruit #contents .main_img {
		/*height: 60vh;*/
        height: auto;
	}
	
	#recruit #contents .main_img .inner {
		background: url("../../img/recruit/sp/main_img.png") center top / cover no-repeat #fff;
	}
	
	#recruit #contents .main_img .inner p.catch {
		left: 9vw;
		top: 15%;
		font-size: 10vw;
	}
	
}



/*===============================================================

		#recruit #contents .message layout

===============================================================*/

#recruit #contents .message {
	padding: 0;
	position: relative;
	z-index: 2;
	/*overflow: hidden;*/
    overflow-x: clip;
}

#recruit #contents .message .box {
	width: 540px;
	padding: 110px 0 100px;
	background-color: #fff;
	border-radius: 0 50px 0 0;
	position: relative;
	z-index: 1;
}

#recruit #contents .message .box::before {
	content: "";
	position: absolute;
	top: 0;
	left: -9999px;
	bottom: 0;
	right: 0;
	background-color: #fff;
	border-radius: 0 50px 0 0;
	z-index: -1;
}

#recruit #contents .message .box::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: -9999px;
	bottom: 0;
	background-color: #fff;
	z-index: -1;
}

#recruit #contents .message .box .corner {
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	right: 0px;
	top: calc(50% - 50px);
	z-index: 1;
	transform: translateX(100%);
}

#recruit #contents .message .box .corner::before {
	width: 200%;
	height: 200%;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
	
	content: '';
	background: transparent;
	border-radius: 50%;
	box-shadow: -50px 50px 0 0 white;
	transform: translate(0, -50%);
}


#recruit #contents .message .message__img{
    position: absolute;
    right: 0;
    top: 220px;
    z-index: 2;
}
#recruit #contents .message .inner dl {
	margin: 0 0 30px;
}

#recruit #contents .message .inner dl dt {
	margin: 0 0 20px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.0;
}

#recruit #contents .message .inner .btn_01 {
	margin-inline: 0;
}

@media screen and (max-width: 1100px){
    #recruit #contents .message .message__img{
        right: 0;
        top: 160px;
        width: 405px;
    }
}

@media screen and (max-width: 768px){
    #recruit #contents .message{
        margin: -125px 0 0;
    }
    #recruit #contents .message::after{
        position: absolute;
        left: 0;
        bottom: 80px;
        z-index: -1;
        content: '';
        width: 100%;
        height: 50%;
        background: #fff;
    }
	#recruit #contents .message .inner {
		padding: 0 8vw;
	}
	
	#recruit #contents .message .box {
		width: 75%;
		padding: 5vh 0 6vh;
		background-color: #fff;
		border-radius: 0 50px 0 0;
		position: relative;
		z-index: 1;
	}
	
	#recruit #contents .message .box::before {
		border-radius: 0 30px 0 0;
	}
	
	#recruit #contents .message .box::after {
		top: 25%;
	}
	
	#recruit #contents .message .box .corner {
		width: 30px;
		height: 30px;
		top: calc(25% - 30px);
	}
	
	#recruit #contents .message .box .corner::before {
		box-shadow: -30px 30px 0 0 white;
	}
	
	#recruit #contents .message .inner h3 {
		margin: 0 0 40px;
	}
	
	
	#recruit #contents .message .inner dl {
		margin: 0 -35% 30px 0;
		position: relative;
		z-index: 2;
	}
	
	#recruit #contents .message .inner dl dt {
		margin: 0 0 20px;
		font-size: 6.5vw;
		font-weight: 700;
		line-height: 1.0;
	}
	
	#recruit #contents .message .inner .btn_01 {
		width: 135%;
	}
	/*
	#recruit #contents .message .inner .btn_01 a .circle {
		width: 30px;
		height: 30px;
	}
	*/
    #recruit #contents .message .message__img{
        position: static;
        width: 80%;
        margin: 0 auto -80px;
        /*transform: translateX(8vw);*/
        transform: translateX(0);
    }
}



/*===============================================================

		#recruit #contents .about layout

===============================================================*/

#recruit #contents .about {
	padding: 0 0 120px;
	background: url("../../img/recruit/bg02.png") left top / 100% auto no-repeat #ECF0F3;
	overflow: hidden;
}

#recruit #contents .about .inner {
	position: relative;
}

#recruit #contents .about .inner .img_01 {
	width: 45%;
	max-width: 540px;
	position: absolute;
	right: -120px;
	top: 100px;
	z-index: 1;
}

#recruit #contents .about .inner .img_01 img {
	border-radius: 12px 0 0 12px;
}

#recruit #contents .about .inner .img_02 {
	width: 25%;
	max-width: 300px;
	position: absolute;
	right: min(300px, 20vw);
	top: min(590px, 50vw);
	z-index: 1;
}

#recruit #contents .about .inner .img_02 img {
	border-radius: 12px;
}


#recruit #contents .about .inner .fadein_01 {
	opacity : 0;
	transform: translate(80px, 80px);
	transition: all 1s;
}

#recruit #contents .about .inner .fadein_02 {
	opacity : 0;
	transform: translate(-80px, 80px);
	transition: all 1s;
}


#recruit #contents .about .inner .box {
	width: 480px;
	padding: 280px 0 0;
}

#recruit #contents .about .inner .box dl {
	margin: 0 0 30px;
}

#recruit #contents .about .inner .box dl dt {
	margin: 0 0 20px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.0;
}

#recruit #contents .about .inner .box ul {
	position: relative;
	z-index: 2;
}

#recruit #contents .about .inner .box ul li {
	margin: 0 0 12px;
}

#recruit #contents .about .inner .box ul li a {
	height: 80px;
	padding: 0 30px;
	background-color: #fff;
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.0;
}


@media screen and (max-width: 768px){
	#recruit #contents .about {
		padding: 0 0 6vh;
		background: url("../../img/recruit/sp/bg02.png") left top / 100% auto no-repeat #ECF0F3;
	}
	
	#recruit #contents .about .inner {
		padding: 0 8vw;
		position: relative;
	}
	
	#recruit #contents .about .inner .img_01 {
		width: 60%;
		right: 0;
		top: 5%;
	}
	
	#recruit #contents .about .inner .img_02 {
		width: 30%;
		max-width: 300px;
		right: auto;
		left: 25%;
		top: 30%;
	}
	
	#recruit #contents .about .inner .box {
		width: auto;
		padding: 130% 0 0;
	}
	
	#recruit #contents .about .inner .box dl dt {
		font-size: 6.5vw;
	}
	
	#recruit #contents .about .inner .box ul li a {
		height: 60px;
		padding: 0 6vw;
		font-size: 4vw;
	}
	
	#recruit #contents .about .inner .box ul li a .circle {
		width: 30px;
		height: 30px;
	}
}



/*===============================================================

		#recruit #contents .career layout

===============================================================*/

#recruit #contents .career {
	/*background: url("../../img/recruit/bg03.png") left bottom / 100% auto no-repeat;*/
	overflow: hidden;
    padding: 325px 0 155px;
    position: relative;
    z-index: 1;
}
#recruit #contents .career::before{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    content: '';
    width: 100%;
    height: 60%;
    background: url("../../img/recruit/bg02.png") center top / 100% auto no-repeat;
}
#recruit #contents .career::after{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -2;
    content: '';
    width: 100%;
    height: 100%;
    background: #ECF0F3;
}

#recruit #contents .career .inner {
	position: relative;
}

#recruit #contents .career .inner ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 384px));
	grid-template-rows: 1fr;
	justify-content: center;
	gap: 24px;
}

#recruit #contents .career .inner ul li {
	max-width: 384px;
	border-radius: 12px;
}

#recruit #contents .career .inner ul li.caption {
	padding: 0 min(30px, 3vw) 0 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#recruit #contents .career .inner ul li.caption h2 {
	margin: 0 0 20px;
}

#recruit #contents .career .inner ul li.caption h2 span {
	font-size: min(70px, 7vw);
}

#recruit #contents .career .inner ul li.caption dl {
	margin: 0 0 10px;
}

#recruit #contents .career .inner ul li.caption dl dt {
	margin: 0 0 10px;
	font-size: min(32px, 3.2vw);
	font-weight: 700;
	line-height: 1.5;
}

#recruit #contents .career .inner ul li.caption dl dd {
	font-size: min(15px, 1.5vw);
}

#recruit #contents .career .inner ul li.caption .btn a {
    max-width: 270px;
	height: 70px;
	padding: 0 30px;
	background-color: #fff;
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.0;
}

#recruit #contents .career .inner ul li:not(.caption) a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

#recruit #contents .career .inner ul li:not(.caption) a::after {
	content: "";
	width: 100%;
	height: 100%;
	/*background: linear-gradient(to bottom, rgba(0,179,203,0) 47%,rgba(0,108,123,1) 100%);*/
	background: linear-gradient(to bottom, rgba(0,179,203,0) 47%,rgba(0,108,123,1) 100%);
	border-radius: 12px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

#recruit #contents .career .inner ul li:not(.caption) a p.img img {
	border-radius: 12px;
}

#recruit #contents .career .inner ul li:not(.caption) a:hover p.img img {
	transform: scale(1.05);
	filter: brightness(110%);
}


#recruit #contents .career .inner ul li:not(.caption) a .txt {
	width: 100%;
	padding: 0 15px 15px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
}

#recruit #contents .career .inner ul li:not(.caption) a .txt p {
	margin: 0 0 20px;
	/*font-size: min(22px, 2.2vw);*/
    font-size: clamp(20px, 1.05vw, 22px);
}

#recruit #contents .career .inner ul li:not(.caption) a .txt dl {
	font-size: min(15px, 1.5vw);
}

#recruit #contents .career .inner ul li:not(.caption) a .txt dl dt {
	margin: 0 0 10px;
}

#recruit #contents .career .inner ul li:not(.caption) a .circle {
	position: absolute;
	right: 15px;
	bottom: 15px;
	z-index: 2;
}


@media screen and (max-width: 768px){
	#recruit #contents .career {
		background: url("../../img/recruit/sp/bg03.png") left bottom / 100% auto no-repeat #ECF0F3;
        padding: 30vw 0 20vw;
	}
	
	#recruit #contents .career .inner {
		position: relative;
	}
	
	#recruit #contents .career .inner ul {
		display: flex;
		flex-flow: row wrap;
		gap: 5vw 0;
	}
	
	#recruit #contents .career .inner ul li {
		width: 100%;
		max-width: inherit;
	}
	
	#recruit #contents .career .inner ul li.caption {
		margin: 0 0 4vh;
		padding: 0 2vw;
		display: block;
	}
	
	#recruit #contents .career .inner ul li.caption h2 span {
		font-size: 10vw;
	}
	
	#recruit #contents .career .inner ul li.caption dl {
		margin: 0 0 30px;
	}
	
	#recruit #contents .career .inner ul li.caption dl dt {
		margin: 0 0 20px;
		font-size: 6.5vw;
	}
	
	#recruit #contents .career .inner ul li.caption dl dd {
		font-size: 15px;
	}
	
	#recruit #contents .career .inner ul li.caption .btn a {
		height: 60px;
		padding: 0 6vw;
		font-size: 4vw;
	}
	
	#recruit #contents .career .inner ul li:not(.caption) a:hover p.img img {
		transform: scale(1);
		filter: brightness(100%);
	}
	
	
	#recruit #contents .career .inner ul li:not(.caption) a .txt {
		padding: 0 5vw 5vw;
	}
	
	#recruit #contents .career .inner ul li:not(.caption) a .txt p {
		margin: 0 0 20px;
		font-size: 4.5vw;
	}
	
	#recruit #contents .career .inner ul li:not(.caption) a .txt dl {
		font-size: 3.6vw;
	}
	
	#recruit #contents .career .inner ul li:not(.caption) a .txt dl dt {
		margin: 0 0 10px;
	}
	
	#recruit #contents .career .inner ul li a .circle {
		width: 30px;
		height: 30px;
	}
}



/*====================================================================================

		#message layout

====================================================================================*/

/*===============================================================

		#message #contents .main_img layout

===============================================================*/

#message #contents .main_img {
	width: 100%;
	height: calc(60vh - 90px);
}

#message #contents .main_img .wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	left:0;
	top: 0;
}

#message #contents .main_img .inner {
	width: 100%;
	max-width: inherit;
	height: 100%;
	padding: 0;
	background: url("../../img/recruit/message/main_bg.png") center top / 100% auto no-repeat;
	display: block;
	position: fixed;
	top: 0;
}


@media screen and (max-width: 768px){
	#message #contents .main_img {
		height: 25vh;
	}
	
	#message #contents .main_img .inner {
		background: url("../../img/recruit/message/sp/main_bg.png") center top 20px / 100% auto no-repeat #fff;
	}
}



/*===============================================================

		#message #contents .detail layout

===============================================================*/

#message #contents .detail {
	background: url("../../img/recruit/message/bg01.svg") center top 5%/ 100% auto no-repeat;
	position: relative;
	z-index: 1;
    padding: 420px 40px 80px;
}

#message #contents .detail::after {
	content: "";
	background-color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	top: 30%;
	bottom: 0;
	z-index: -1;
}


#message #contents .detail .caption {
	width: min(866px, 70%);
	padding: min(260px, 26vw) 0 0 min(220px, 17vw);
	background: url("../../img/recruit/message/bg02.png") left top / 100% auto no-repeat;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	gap: 30px 0;
	position: absolute;
	left: -70px;
	top: -171px;
}

#message #contents .detail .caption h3 {
	margin: 0;
	text-align: left;
}

#message #contents .detail .caption h3 span {
	font-size: min(80px, 7.5vw);
}

#message #contents .detail .caption p {
	position: relative;
	z-index: 1;
	text-align: left;
	font-size: min(32px, 3.0vw);
	font-weight: 700;
}

#message #contents .detail .caption p::after {
	content: "";
	width: 203px;
	height: 189px;
	background: url("../../img/recruit/message/bg03.png") left top / 100% auto no-repeat;
	position: absolute;
	right: 150px;
	bottom: -151px;
	z-index: -1;
}


#message #contents .detail .inner {
	max-width: 1120px;
	padding: 420px 40px 200px;
}

#message #contents .detail .inner p {
	width: 55%;
	max-width: 450px;
	margin: 0 0 0 auto;
	font-size: min(18px, 1.8vw);
	line-height: 2.4;
}

#message #contents .detail .inner p em {
	font-weight: 700;
}


@media screen and (min-width: 1500px){
	#message #contents .detail .caption {
		left: 3%;
	}
}


@media screen and (max-width: 768px){
	#message #contents .detail {
		background: none;
		overflow-x: hidden;
        padding: 0;
	}
	
	#message #contents .detail::after {
		top: 50%;
	}
	
	
	#message #contents .detail .caption {
		width: 100%;
		padding: 23vw 8vw 0;
        padding: 23vw 8vw 10vh;
		background: url("../../img/recruit/message/sp/bg02.png") left top / 100% auto no-repeat;
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		gap: 30px 0;
		position: relative;
		left: 0;
		top: 0;
		z-index: 2;
	}
	
	#message #contents .detail .caption h3 {
		margin: 0;
		text-align: left;
	}
	
	#message #contents .detail .caption h3 span {
		font-size: 10vw;
	}
	
	#message #contents .detail .caption p {
		font-size: 5vw;
	}
	
	#message #contents .detail .caption p::after {
		width: 25vw;
		height: 24vw;
		right: -15%;
		bottom: -80%;
		z-index: 1;
	}
	
	
	#message #contents .detail .inner {
		max-width: inherit;
		padding: 6vh 8vw 10vh;
		z-index: 1;
	}
	
	#message #contents .detail .inner p {
		width: auto;
		max-width: inherit;
		margin: 0;
		font-size: 4vw;
		line-height: 1.6;
	}
}



/*===============================================================

		#message #contents .top_message layout

===============================================================*/

#message #contents .top_message {
	padding: 0 0 20px;
	background-color: #fff;
}

#message #contents .top_message .wrapper {
	max-width: 1252px;
	margin-inline: auto;
}

#message #contents .top_message .inner {
	margin: -5% 0 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#message #contents .top_message .inner .caption {
	width: 40%;
	max-width: 480px;
}

#message #contents .top_message .inner .caption h3 span {
	font-size: min(80px, 7.0vw);
	white-space: pre;
}

#message #contents .top_message .inner .caption p {
	font-size: min(32px, 2.8vw);
	font-weight: 700;
}

#message #contents .top_message .inner .txt {
	width: 56.25%;
	max-width: 675px;
	padding: 13% 0 0;
}

#message #contents .top_message .inner .txt p {
	font-size: min(18px, 1.8vw);
	line-height: 2.0;
}

#message #contents .top_message .inner .txt p.name {
	font-size: min(16px, 1.6vw);
}

#message #contents .top_message .inner .txt p.name span {
	margin: 2em 0 0;
	display: inline-block;
	font-size: min(28px, 2.8vw);
	font-weight: 700;
}


@media screen and (max-width: 768px){
	#message #contents .top_message {
		padding: 0 0 1px;
	}
	
	#message #contents .top_message .wrapper {
		max-width: inherit;
		margin-inline: 0;
	}
	
	#message #contents .top_message .inner {
		margin: -8% 0 0;
		padding: 0 8vw;
	}
	
	#message #contents .top_message .inner .caption {
		width: 100%;
		max-width: inherit;
	}
	
	#message #contents .top_message .inner .caption h3 span {
		font-size: 10vw;
	}
	
	#message #contents .top_message .inner .caption p {
		font-size: 5.3vw;
		line-height: 1.5;
	}
	
	#message #contents .top_message .inner .txt {
		width: 100%;
		max-width: inherit;
		padding: 4vh 0 0;
	}
	
	#message #contents .top_message .inner .txt p {
		font-size: 4vw;
		line-height: 1.6;
	}
	
	#message #contents .top_message .inner .txt p.name {
		font-size: 3.8vw;
	}
	
	#message #contents .top_message .inner .txt p.name span {
		font-size: 6vw;
	}
}





/*====================================================================================

		#career layout

====================================================================================*/

/*===============================================================

		#career #contents .detail layout

===============================================================*/

#career #contents .detail .inner dl.caption {
	margin: 0 0 80px;
	padding: 30px 0 0 30px;
}

#career #contents .detail .inner dl.caption dt {
	margin: 0 0 20px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.0;
}
#career #contents .detail .inner p.caption__text{
	margin: 0 0 80px;
	padding: 30px 0 0 30px;
    font-size: 32px;
	font-weight: 700;
	line-height: 1.0;
}

#career #contents .detail .inner ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 24px 0;
}

/* 2カラム時 */
#career #contents .detail .inner ul li {
	width: calc(100% / 2 - 12px);
	/*max-width: 384px;*/
	border-radius: 12px;
}
/* 3カラム時
#career #contents .detail .inner ul li {
	width: calc(100% / 3 - 12px);
	max-width: 384px;
	border-radius: 12px;
}
*/

#career #contents .detail .inner ul li:nth-child(1),
#career #contents .detail .inner ul li:nth-child(2) {
	width: calc(100% / 2 - 12px);
	max-width: 588px;
}

#career #contents .detail .inner ul li a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

#career #contents .detail .inner ul li a::after {
	content: "";
	width: 100%;
	height: 100%;
	/*background: linear-gradient(to bottom, rgba(0,179,203,0) 47%,rgba(0,108,123,1) 100%);*/
	background: linear-gradient(to bottom, rgba(0,179,203,0) 47%,rgba(0,108,123,1) 100%);
	border-radius: 12px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

#career #contents .detail .inner ul li a p.img img {
	border-radius: 12px;
}

#career #contents .detail .inner ul li a:hover p.img img {
	transform: scale(1.05);
	filter: brightness(110%);
}


#career #contents .detail .inner ul li a .txt {
	width: 100%;
	padding: 0 15px 15px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
}

#career #contents .detail .inner ul li a .txt p {
	margin: 0 0 20px;
	font-size: min(22px, 2.2vw);
}

#career #contents .detail .inner ul li a .txt dl {
	font-size: min(15px, 1.5vw);
}

#career #contents .detail .inner ul li a .txt dl dt {
	margin: 0 0 10px;
}

#career #contents .detail .inner ul li a .circle {
	position: absolute;
	right: 15px;
	bottom: 15px;
	z-index: 2;
}


@media screen and (max-width: 1239px){
    #recruit #contents .career .inner ul li.none{
        display: none;
    }
}
@media screen and (max-width: 768px){
	#career #contents .detail .inner dl.caption {
		margin: 0 0 6vh;
		padding: 5vh 0 0;
	}
	
	#career #contents .detail .inner dl.caption dt {
		margin: 0 0 20px;
		font-size: 6.5vw;
	}
    #career #contents .detail .inner p.caption__text{
        margin: 0 0 6vh;
		padding: 5vh 0 0;
		font-size: 6.5vw;
        line-height: 1.4;
	}
	
	
	#career #contents .detail .inner ul {
		display: flex;
		flex-flow: row wrap;
		gap: 5vw 0;
	}
	
	#career #contents .detail .inner ul li {
		width: 100%;
		max-width: inherit;
	}
	
	#career #contents .detail .inner ul li:nth-child(1),
	#career #contents .detail .inner ul li:nth-child(2) {
		width: 100%;
		max-width: inherit;
	}
	
	#career #contents .detail .inner ul li a:hover p.img img {
		transform: scale(1);
		filter: brightness(100%);
	}
	
	
	#career #contents .detail .inner ul li a .txt {
		padding: 0 5vw 5vw;
	}
	
	#career #contents .detail .inner ul li a .txt p {
		margin: 0 0 20px;
		font-size: 4.5vw;
	}
	
	#career #contents .detail .inner ul li a .txt dl {
		font-size: 3.6vw;
	}
	
	#career #contents .detail .inner ul li a .txt dl dt {
		margin: 0 0 10px;
	}
	
	#career #contents .detail .inner ul li a .circle {
		width: 30px;
		height: 30px;
	}
}





/*====================================================================================

		#interview layout

====================================================================================*/

#interview #contents .detail .wrapper {
	background-color: #FAFAF2;
}


/*===============================================================

		#interview #contents .detail .person layout

===============================================================*/

#interview #contents .detail .person {
	padding: 130px 0 60px;
	position: relative;
	z-index: 1;
}

#interview #contents .detail .person::before {
	content: "";
	background-color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 35%;
	z-index: -1;
}

#interview #contents .detail .person .img_box {
	margin: 0 0 75px;
	position: relative;
}

#interview #contents .detail .person .img_box p.txt {
	padding: 0 0 0 min(15px, 1.5vw);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: min(42px, 4.0vw);
	font-weight: 700;
	line-height: 1.6;
}

#interview #contents .detail .person .img_box p.img {
	width: 64.1%;
	max-width: 769px;
	margin: 0 0 0 auto;
}

#interview #contents .detail .person .img_box p.img img {
	border-radius: 12px;
}

#interview #contents .detail .person .data {
	display: flex;
}

#interview #contents .detail .person .data p.name {
	width: 26.6%;
	min-width: 220px;
	max-width: 320px;
	color: var(--base_blue);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.0;
}

#interview #contents .detail .person .data p.name span {
	margin: 15px 0 0;
	display: block;
	font-size: 45px;
}

#interview #contents .detail .person .data dl {
	padding: 0 0 0 min(60px, 5.5vw);
	border-left: solid 2px #000;
	font-size: 18px;
	line-height: 2.0;
}

#interview #contents .detail .person .data dl div {
	display: flex;
}

#interview #contents .detail .person .data dl div dt {
	padding: 0 2rem 0 0;
	flex-shrink: 0;
	color: var(--base_blue);
	font-weight: 700;
}


@media screen and (max-width: 999px){
	#interview #contents .detail .person::before {
		bottom: 42%;
	}
}


@media screen and (max-width: 768px){
	#interview #contents .detail .person {
		padding: 6vh 0 8vh;
	}
	
	#interview #contents .detail .person::before {
		bottom: 57%;
	}
	
	#interview #contents .detail .person .img_box {
		margin: 0 0 3vh;
	}
	
	#interview #contents .detail .person .img_box p.txt {
		padding: 0 0 2vh;
		position: static;
		transform: translateY(0);
		font-size: 6.0vw;
		line-height: 1.5;
	}
	
	#interview #contents .detail .person .img_box p.img {
		width: auto;
		max-width: inherit;
		margin: 0;
	}
	
	#interview #contents .detail .person .data {
		display: block;
	}
	
	#interview #contents .detail .person .data p.name {
		width: auto;
		min-width: inherit;
		max-width: inherit;
		margin: 0 0 3vh;
		font-size: 4vw;
	}
	
	#interview #contents .detail .person .data p.name span {
		margin: 15px 0 0;
		font-size: 8vw;
	}
	
	#interview #contents .detail .person .data dl {
		padding: 0;
		border-left: none;
		font-size: 4vw;
		line-height: 1.5;
	}
	
	#interview #contents .detail .person .data dl div {
		margin: 0 0 1vh;
	}
	
	#interview #contents .detail .person .data dl div dt {
		padding: 0 1.5rem 0 0;
	}
}



/*===============================================================

		#interview #contents .detail .comment layout

===============================================================*/

#interview #contents .detail .comment {
	position: relative;
	z-index: 1;
}

#interview #contents .detail .comment::before {
	content: "";
	width: 91.6%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

#interview #contents .detail .comment .inner {
	max-width: 1360px;
	padding: 120px 20px;
}

#interview #contents .detail .comment .inner .box {
	max-width: 1160px;
	margin-inline: 0 auto;
	margin-bottom: min(140px, 9vw);
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}
#interview #contents .detail .comment .inner .box01 {
	align-items: flex-start;
}

#interview #contents .detail .comment .inner .box:last-of-type {
	margin-bottom: 0;
}

#interview #contents .detail .comment .inner .box.reverse {
	margin-inline: auto 0;
	flex-flow: row-reverse wrap;
}

#interview #contents .detail .comment .inner .box p.img {
	width: 52.327%;
	max-width: 607px;
}

#interview #contents .detail .comment .inner .box p.img img {
	border-radius: 12px;
}

#interview #contents .detail .comment .inner .box dl {
	width: 40.517%;
	max-width: 470px;
}

#interview #contents .detail .comment .inner .box dl dt {
	margin: 0 0 30px;
	font-size: min(32px, 3.2vw);
	font-weight: 700;
	line-height: 1.5;
}
#interview #contents .detail .comment .inner .box dl dd .txt-s{
    font-size: 13px;
    display: block;
    margin: 15px 0 0;
}

@media screen and (max-width: 768px){
	#interview #contents .detail .comment::before {
		width: 95%;
	}
	
	#interview #contents .detail .comment .inner {
		max-width: inherit;
		padding: 5vh 8vw;
	}
	
	#interview #contents .detail .comment .inner .box {
		max-width: inherit;
		margin-inline: 0;
		margin-bottom: 8vh;
		padding: 0;
		display: block;
	}
	
	#interview #contents .detail .comment .inner .box:last-of-type {
		margin-bottom: 0;
	}
	
	#interview #contents .detail .comment .inner .box.reverse {
		margin-inline: auto 0;
		flex-flow: row-reverse wrap;
	}
	
	#interview #contents .detail .comment .inner .box p.img {
		width: 100%;
		max-width: inherit;
		margin-bottom: 3vh;
	}
	
	#interview #contents .detail .comment .inner .box dl {
		width: 100%;
		max-width: inherit;
	}
	
	#interview #contents .detail .comment .inner .box dl dt {
		margin: 0 0 2vh;
		font-size: 6vw;
	}
}



/*===============================================================

		#interview #contents .other layout

===============================================================*/

#interview #contents .other {
	padding: 110px 0 160px;
	background-color: #FAFAF2;
}

#interview #contents .detail .other .inner h3 {
	margin: 0 0 75px;
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.0;
}

#interview #contents .detail .other .inner ul {
	display: flex;
	justify-content: center;
	gap: 15px;
}

#interview #contents .detail .other .inner ul li {
	width: calc(100% / 4 - 15px);
	max-width: 233px;
	border-radius: 15px;
}

#interview #contents .detail .other .inner ul li a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

#interview #contents .detail .other .inner ul li a::after {
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,179,203,0) 47%,rgba(0,108,123,1) 100%);
	border-radius: 12px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

#interview #contents .detail .other .inner ul li a p.img img {
	border-radius: 12px;
}

#interview #contents .detail .other .inner ul li a:hover p.img img {
	transform: scale(1.05);
	filter: brightness(110%);
}


#interview #contents .detail .other .inner ul li a .txt {
	width: 100%;
	padding: 0 10px 10px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	color: #fff;
	font-weight: 700;
	line-height: 1.35;
}

#interview #contents .detail .other .inner ul li a .txt p {
	margin: 0 0 20px;
	/*font-size: 13px;*/
	font-size: clamp(12px, 0.64vw, 13px);
}

#interview #contents .detail .other .inner ul li a .txt dl {
	font-size: 10px;
}

#interview #contents .detail .other .inner ul li a .txt dl dt {
	margin: 0 0 10px;
}

#interview #contents .detail .other .inner ul li a .circle {
	width: 23px;
	height: 23px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
}

#interview #contents .detail .other .inner ul li a .circle .arrow {
	width: 9px;
	height: 6px;
}


@media screen and (max-width: 768px){
	#interview #contents .other {
		padding: 10vh 0 8vh;
	}
	/*
	#interview #contents .other .inner {
		padding: 0 5vw;
	}
	*/
	#interview #contents .detail .other .inner h3 {
		margin: 0 0 3vh;
		font-size: 6vw;
	}
	
	
	#interview #contents .detail .other .inner ul {
		display: flex;
		flex-flow: row wrap;
		gap: 5vw 0;
	}
	
	#interview #contents .detail .other .inner ul li {
		width: 100%;
		max-width: inherit;
	}
	
	#interview #contents .detail .other .inner ul li a:hover p.img img {
		transform: scale(1);
		filter: brightness(100%);
	}
	
	
	#interview #contents .detail .other .inner ul li a .txt {
		padding: 0 5vw 5vw;
	}
	
	#interview #contents .detail .other .inner ul li a .txt p {
		margin: 0 0 20px;
		font-size: 4.5vw;
	}
	
	#interview #contents .detail .other .inner ul li a .txt dl {
		font-size: 3.6vw;
	}
	
	#interview #contents .detail .other .inner ul li a .txt dl dt {
		margin: 0 0 10px;
	}
	
	#interview #contents .detail .other .inner ul li a .circle {
		width: 30px;
		height: 30px;
	}
}





/*====================================================================================

		#qa layout

====================================================================================*/

/*===============================================================

		#qa #contents .detail layout

===============================================================*/

#qa #contents .detail .wrapper {
	/*padding: 100px 0 140px;*/
    padding: 68px 0;
}

#qa #contents .detail .inner .btn {
	width: 660px;
	margin: 0 auto;
	margin-inline: auto;
	border-radius: 30px;
	box-shadow: 0 4px 18px rgba(0,0,0,0.25);
	overflow: hidden;
}

#qa #contents .detail .inner .btn a {
	height: 160px;
	padding: 0 min(50px, 5vw) 0 min(80px, 7.5vw);
	background: linear-gradient(to bottom, #0094A8 22%,#006C7B 100%);;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	font-size: 16px;
}

#qa #contents .detail .inner .btn a:hover {
	opacity: 0.8;
}

#qa #contents .detail .inner .btn a .txt span {
	display: block;
	font-size: 30px;
	font-weight: 700;
}

#qa #contents .detail .inner .btn a .icon {
	position: relative;
	z-index: 3;
}

#qa #contents .detail .inner .btn a .icon svg path {
	stroke: #fff;
}


@media screen and (max-width: 768px){
	#qa #contents .detail .wrapper {
		/*padding: 8vh 0 10vh;*/
        padding: 4.5vh 0;
	}
	
	#qa #contents .detail .inner .btn {
		width: auto;
		margin-inline: 0;
		border-radius: 14px;
	}
	
	#qa #contents .detail .inner .btn a {
		height: auto;
		padding: 3vh 6vw 3vh 8vw;
		font-size: 3.4vw;
		line-height: 1.5;
	}
	
	#qa #contents .detail .inner .btn a:hover {
		opacity: 1;
	}
	
	#qa #contents .detail .inner .btn a .txt span {
		margin: 0 0 1vh;
		font-size: 6vw;
	}
}



/*===============================================================

		#qa #contents .flow layout

===============================================================*/

#qa #contents .flow {
	padding: 80px 0 70px;
	background-color: #FAFAF2;
}

#qa #contents .flow .inner h2 {
	margin: -90px 0 40px;
	padding: 90px 0 0;
}

#qa #contents .flow .inner ol {
	max-width: 1040px;
	margin: 70px auto 0;
}

#qa #contents .flow .inner ol > li {
	padding: 0 0 70px 55px;
	display: flex;
	gap: 70px 40px;
	position: relative;
}

#qa #contents .flow .inner ol > li::before {
	content: "";
	width: 15px;
	height: 15px;
	background: url("../../img/recruit/qa/icon_ellipse.svg") left top / 100% auto no-repeat;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 15%;
	z-index: 2;
}

#qa #contents .flow .inner ol > li:nth-child(4)::before {
	top: 10%;
}

#qa #contents .flow .inner ol > li::after {
	content: "";
	width: 2px;
	height: 100%;
	background-color: #48BAC9;
	position: absolute;
	left: 7px;
	bottom: 0;
	z-index: 1;
}

#qa #contents .flow .inner ol > li:nth-child(1)::after {
	height: 85%;
}

#qa #contents .flow .inner ol > li:nth-child(4)::after {
	height: 11%;
	bottom: auto;
	top: 0;
}

#qa #contents .flow .inner ol li div {
	color: var(--base_blue);
	font-size: min(50px, 5vw);
	font-weight: 700;
	line-height: 1.0;
}

#qa #contents .flow .inner ol li p {
	font-size: min(24px, 2.4vw);
	line-height: 2.0;
}

#qa #contents .flow .inner ol li p .middle {
	font-size: min(18px, 1.8vw);
}

#qa #contents .flow .inner ol li p .txt {
	display: block;
	font-size: min(15px, 1.5vw);
}

#qa #contents .flow .inner ol li:nth-child(4) p .txt {
	padding-left: 1em;
	text-indent: -1em;
}


@media screen and (max-width: 768px){
	#qa #contents .flow {
		padding: 6vh 0 6vh;
	}
	
	#qa #contents .flow .inner {
		padding: 0 8vw;
	}
	
	#qa #contents .flow .inner h2 {
		margin: -75px 0 4vh;
		padding: 75px 0 0;
	}
	
	#qa #contents .flow .inner ol {
		max-width: inherit;
		margin: 5vh auto 0;
	}
	
	#qa #contents .flow .inner ol li {
		padding: 0 0 3vh 8vw;
		gap: 0 5vw;
	}
	
	#qa #contents .flow .inner ol li::before {
		width: 12px;
		height: 12px;
		top: 2vw;
	}
	
	#qa #contents .flow .inner ol > li:nth-child(4)::before {
		top: 2vw;
	}
	
	#qa #contents .flow .inner ol > li::after {
		left: 5px;
	}
	
	#qa #contents .flow .inner ol li:nth-child(1)::after {
		height: calc(100% - 2vw);
	}
	
	#qa #contents .flow .inner ol li:nth-child(4)::after {
		height: 2vw;
	}
	
	#qa #contents .flow .inner ol li div {
		font-size: 7vw;
	}
	
	#qa #contents .flow .inner ol li p {
		font-size: 4.2vw;
		line-height: 1.8;
	}
	
	#qa #contents .flow .inner ol li p .middle {
		font-size: 3.8vw;
	}
	
	#qa #contents .flow .inner ol li p .txt {
		font-size: 3.2vw;
	}
}



/*===============================================================

		#qa #contents .qanda layout

===============================================================*/

#qa #contents .qanda {
	padding: 130px 0 70px;
	background-color: #fff;
}

#qa #contents .qanda .inner h2 {
	margin: -90px 0 40px;
	padding: 90px 0 0;
}

#qa #contents .qanda .inner dl {
	max-width: 980px;
	margin-inline: auto;
}

#qa #contents .qanda .inner dl div {
	padding: 20px 0;
	border-bottom: solid 1px #48BAC9;
	position: relative;
}

#qa #contents .qanda .inner dl div dt {
	padding: 0 45px 0 18px;
	display: flex;
	gap: 0 40px;
	position: relative;
	font-size: 18px;
	font-weight: 700;
	transition: color 0.3s;
}

#qa #contents .qanda .inner dl div dt:hover {
	color: var(--base_blue);
}

#qa #contents .qanda .inner dl div dt span {
	color: var(--base_blue);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.0;
	transform: translateY(-2px);
}

#qa #contents .qanda .inner dl div dd {
	padding: 15px 45px 0 18px;
	display: flex;
	gap: 0 40px;
}

#qa #contents .qanda .inner dl div dd span {
	color: #C4C4A4;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.0;
	transform: translateY(-2px);
}


@media screen and (max-width: 768px){
	#qa #contents .qanda {
		padding: 10vh 0 8vh;
	}
	
	#qa #contents .qanda .inner {
		padding: 0 8vw;
	}
	
	#qa #contents .qanda .inner h2 {
		margin: -75px 0 4vh;
		padding: 75px 0 0;
	}
	
	#qa #contents .qanda .inner dl {
		max-width: inherit;
		margin-inline: 0;
	}
	
	#qa #contents .qanda .inner dl div {
		padding: 2vh 0;
	}
	
	#qa #contents .qanda .inner dl div dt {
		padding: 0 35px 0 0;
		gap: 0 5vw;
		font-size: 4vw;
		line-height: 1.5;
	}
	
	#qa #contents .qanda .inner dl div dt:hover {
		color: var(--base_black);
	}
	
	#qa #contents .qanda .inner dl div dt span {
		font-size: 7vw;
	}
	
	#qa #contents .qanda .inner dl div dd {
		padding: 2vh 0 0;
		gap: 0 5vw;
	}
	
	#qa #contents .qanda .inner dl div dd span {
		font-size: 7vw;
	}
}





/*====================================================================================

		#about layout

====================================================================================*/

/*===============================================================

		#about #contents .detail layout

===============================================================*/

#about #contents .detail .wrapper {
	padding: 60px 0 100px;
}

#about #contents .detail .inner ul {
	display: flex;
	justify-content: center;
	align-items: center;
}

#about #contents .detail .inner ul li {
	width: 225px;
	border-left: solid 1px #a9a9a9;
}

#about #contents .detail .inner ul li:last-child {
	border-right: solid 1px #a9a9a9;
}

#about #contents .detail .inner ul li a {
	padding: 15px 15px 15px 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.0;
}

#about #contents .detail .inner ul li a:hover .circle {
	transform: translate(0, 5px);
}


@media screen and (max-width: 768px){
	#about #contents .detail .wrapper {
		padding: 4vh 0 8vh;
	}
	
	#about #contents .detail .inner ul {
		display: block;
	}
	
	#about #contents .detail .inner ul li {
		width: auto;
		border-left: solid 1px #a9a9a9;
		border-right: solid 1px #a9a9a9;
	}
	
	#about #contents .detail .inner ul li a {
		padding: 15px 4vw 15px 5vw;
		font-size: 4vw;
	}
	
	#about #contents .detail .inner ul li a:hover .circle {
		transform: translate(0);
	}
	
	#about #contents .detail .inner ul li a .circle {
		width: 30px;
		height: 30px;
	}
}



/*===============================================================

		#about #contents .strengths layout

===============================================================*/

#about #contents .strengths {
	padding: 0 0 100px;
	background-color: #fff;
}

#about #contents .strengths .wrapper {
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#about #contents .strengths .strengths_01 {
	padding: 160px 0 350px;
}

#about #contents .strengths .strengths_02 {
	padding: 200px 0 80px;
}

#about #contents .strengths .strengths_03 {
	padding: 270px 0 30px;
}

#about #contents .strengths .wrapper .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	pointer-events: none;
}

#about #contents .strengths .strengths_01 .bg {
	background: url("../../img/recruit/about/bg01.svg") left calc(50% - 450px) top / auto 100% no-repeat;
	z-index: -1;
}

#about #contents .strengths .strengths_02 .bg {
	background: url("../../img/recruit/about/bg02.svg") right calc(50% - 350px) top / auto 100% no-repeat;
}

#about #contents .strengths .strengths_03 .bg {
	background: url("../../img/recruit/about/bg03.svg") left calc(50% - 400px) top / auto 100% no-repeat;
}


#about #contents .strengths .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 30px;
	position: relative;
}

#about #contents .strengths .inner.reverse {
	flex-direction: row-reverse;
}

#about #contents .strengths .inner p.img {
	width: 68.333%;
	max-width: 820px;
	margin: 0 0 0 min(-60px, -6vw);
	position: relative;
	z-index: 1;
}

#about #contents .strengths .inner.reverse p.img {
	margin: 0 min(-70px, -7vw) 0 0;
}

#about #contents .strengths .strengths_02 p.img {
	margin: 0 0 0 min(-80px, -8vw);
}

#about #contents .strengths .inner .txt {
	width: 38.333%;
	max-width: 460px;
	position: relative;
	z-index: 2;
}

#about #contents .strengths .strengths_03 .txt {
	margin: -250px 0 0;
}

#about #contents .strengths .inner .txt dl dt {
	margin: 0 0 20px;
	font-size: min(32px, 2.8vw);
	font-weight: 700;
	line-height: 1.5;
}

#about #contents .strengths .inner .txt h2 {
	margin: -90px 0 40px;
	padding: 90px 0 0;
}

#about #contents .strengths .strengths_03 .txt dl dt img {
	width: 80%;
	max-width: 297px;
	margin: 0 0 20px;
	display: block;
}

#about #contents .strengths .inner .txt dl dd {
	font-size: min(16px, 1.6vw);
	line-height: 2.0;
}


@media screen and (max-width: 768px){
	#about #contents .strengths {
		padding: 0 0 10vh;
	}
	
	#about #contents .strengths .strengths_01 {
		padding: 8vh 0 3vh;
	}
	
	#about #contents .strengths .strengths_02 {
		padding: 5vh 0 3vh;
	}
	
	#about #contents .strengths .strengths_03 {
		padding: 5vh 0 0;
	}
	
	#about #contents .strengths .strengths_01 .bg {
		background: url("../../img/recruit/about/bg01.svg") left -10vw top / 100% auto no-repeat;
	}
	
	#about #contents .strengths .strengths_02 .bg {
		background: url("../../img/recruit/about/bg02.svg") right -10vw top / 80% auto no-repeat;
	}
	
	#about #contents .strengths .strengths_03 .bg {
		background: url("../../img/recruit/about/bg03.svg") left -10vw top / 80% auto no-repeat;
	}
	
	
	#about #contents .strengths .inner {
		max-width: inherit;
		display: block;
	}
	
	#about #contents .strengths .inner p.img {
		width: auto;
		max-width: inherit;
		margin: 0 0 4vh -5vw;
	}
	
	#about #contents .strengths .inner.reverse p.img {
		margin: 0 -5vw 4vh 0;
	}
	
	#about #contents .strengths .inner .txt {
		width: auto;
		max-width: inherit;
		padding: 0 3vw;
	}
	
	#about #contents .strengths .strengths_03 .txt {
		margin: 0;
	}
	
	#about #contents .strengths .inner .txt h2 {
		margin: -75px 0 4vh;
		padding: 75px 0 0;
	}
	
	#about #contents .strengths .inner .txt dl dt {
		margin: 0 0 20px;
		font-size: 6vw;
	}
	
	#about #contents .strengths .inner .txt dl dd {
		font-size: 3.8vw;
		line-height: 1.8;
	}
}



/*===============================================================

		#about #contents .challenge layout

===============================================================*/

#about #contents .challenge {
	padding: calc( calc(100%*826/2880) - 20px) 0 110px;
	background: url("../../img/recruit/about/img05.jpg") center top / 100% auto no-repeat #fff;
}

#about #contents .challenge .inner h2 {
	margin: 0 0 60px;
	text-align: center;
}

#about #contents .challenge .inner h2 span {
	margin: 0;
	padding: 0 0 10px;
	background: linear-gradient(to bottom,  #00ddfc 40%,#0098ad 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#about #contents .challenge .inner h2 + dl {
	max-width: 764px;
	margin: 0 auto 90px;
}

#about #contents .challenge .inner h2 + dl dt {
	margin: 0 0 12px;
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
}


#about #contents .challenge .inner section {
	max-width: 1140px;
	margin-inline: auto;
	padding: 60px min(75px, 7vw) 100px;
	background-color: #FAFAF2;
	border-radius: 45px;
}

#about #contents .challenge .inner section .box {
	margin: 0 auto 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 min(60px, 5vw);
}

#about #contents .challenge .inner section .box p.img {
	width: 46.566%;
	max-width: 461px;
}

#about #contents .challenge .inner section .box .txt {
	width: 45.455%;
	max-width: 450px;
}

#about #contents .challenge .inner section .box .txt h3 {
	margin: 0 0 45px;
	font-size: min(32px, 3.2vw);
	font-weight: 700;
	line-height: 1.5;
}

#about #contents .challenge .inner section dl {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 75px 0;
}

#about #contents .challenge .inner section dl div {
	width: 47.273%;
	max-width: 468px;
}

#about #contents .challenge .inner section dl div dt {
	margin: 0 0 25px;
	position: relative;
	background: linear-gradient(to bottom, #008294 60%,#006C7B 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: min(24px, 2.4vw);
	font-weight: 700;
	line-height: 1.5;
}

#about #contents .challenge .inner section dl div dt::after {
	content: "";
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, #34A3B2 0%,#9AE2EC 70%);
	position: absolute;
	left: 0;
	bottom: -12px;
}

#about #contents .challenge .inner section dl div dd {
	font-size: min(15px, 1.5vw);
	font-weight: 400;
}


@media screen and (max-width: 768px){
	#about #contents .challenge {
		padding: calc( calc(100%*826/2880) - 12px) 0 110px;
		background: url("../../img/recruit/about/img05.jpg") center top / 100% auto no-repeat #fff;
	}
	
	#about #contents .challenge .inner h2 {
		margin: 0 0 4vh;
	}
	
	#about #contents .challenge .inner h2 span {
		font-size: 11vw;
	}
	
	#about #contents .challenge .inner h2 + dl {
		max-width: inherit;
		margin: 0 auto 6vh;
	}
	
	#about #contents .challenge .inner h2 + dl dt {
		margin: 0 0 2vh;
		font-size: 7vw;
	}
	
	
	#about #contents .challenge .inner section {
		max-width: inherit;
		margin-inline: 0;
		padding: 4vh 5vw;
		border-radius: 25px;
	}
	
	#about #contents .challenge .inner section .box {
		margin: 0 auto 5vh;
		display: block;
	}
	
	#about #contents .challenge .inner section .box p.img {
		width: auto;
		max-width: inherit;
		margin: 0 0 3vh;
	}
	
	#about #contents .challenge .inner section .box .txt {
		width: auto;
		max-width: inherit;
	}
	
	#about #contents .challenge .inner section .box .txt h3 {
		margin: 0 0 3vh;
		font-size: 5.5vw;
	}
	
	#about #contents .challenge .inner section dl {
		gap: 4vh 0;
	}
	
	#about #contents .challenge .inner section dl div {
		width: 100%;
		max-width: inherit;
	}
	
	#about #contents .challenge .inner section dl div dt {
		margin: 0 0 25px;
		font-size: 4.2vw;
	}
	
	#about #contents .challenge .inner section dl div dd {
		font-size: 15px;
	}
}



/*===============================================================

		#about #contents .working layout

===============================================================*/

#about #contents .working {
	background-color: #fff;
}

#about #contents .working .roop {
	overflow: hidden;
}

#about #contents .working .roop .swiper-wrapper {
	align-items: center;
	transition-timing-function: linear;
}

#about #contents .working .roop .slide_item {
	width: 476px;
}

#about #contents .working .roop .slide_item img {
	border-radius: 20px;
}


#about #contents .working .wrapper {
	margin: -190px 0 0;
	padding: 280px 0 100px;
	background-color: #FAFAF2;
	border-radius: 45px;
}

#about #contents .working .wrapper .inner {
	max-width: 1140px;
}

#about #contents .working .wrapper .inner h2 + dl {
	margin: 0 0 60px;
}

#about #contents .working .wrapper .inner h2 + dl dt {
	margin: 0 0 12px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
}

#about #contents .working .wrapper .inner dl.feature {
	display: flex;
	justify-content: space-between;
}

#about #contents .working .wrapper .inner dl.feature div {
	width: 30%;
	max-width: 330px;
}

#about #contents .working .wrapper .inner dl.feature div dt {
	margin: 0 0 25px;
	position: relative;
	background: linear-gradient(to bottom, #008294 60%,#006C7B 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: min(24px, 2.4vw);
	font-weight: 700;
	line-height: 1.5;
}

#about #contents .working .wrapper .inner dl.feature div dt::after {
	content: "";
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, #68bfc9 0%,#9AE2EC 70%);
	position: absolute;
	left: 0;
	bottom: -12px;
}

#about #contents .working .wrapper .inner dl.feature div dd {
	font-size: min(15px, 1.5vw);
	font-weight: 400;
}


@media screen and (max-width: 768px){
	#about #contents .working .roop .slide_item {
		width: auto;
	}
	
	
	#about #contents .working .wrapper {
		margin: -15vh 0 0;
		padding: 20vh 0 8vh;
		background-color: #FAFAF2;
		border-radius: 25px;
	}
	
	#about #contents .working .wrapper .inner {
		max-width: inherit;
		padding: 0 8vw;
	}
	
	#about #contents .working .wrapper .inner h2 + dl {
		margin: 0 0 6vh;
	}
	
	#about #contents .working .wrapper .inner h2 + dl dt {
		font-size: 6vw;
	}
	
	#about #contents .working .wrapper .inner dl.feature {
		flex-flow: row wrap;
		gap: 4vh 0;
	}
	
	#about #contents .working .wrapper .inner dl.feature div {
		width: 100%;
		max-width: inherit;
	}
	
	#about #contents .working .wrapper .inner dl.feature div dt {
		margin: 0 0 25px;
		font-size: 4.2vw;
	}
	
	#about #contents .working .wrapper .inner dl.feature div dd {
		font-size: 15px;
	}
}