@charset "utf-8";
@import "cmn_reset.css";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

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

	神鋼ボルト 採用サイト
	Date: 2020.10.02

	01. 基礎設計
	02. ページ構成
	03. ヘッダー
	04. ナビゲーション
	05. フッター
	06. コンテンツ

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

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

	01. 基礎設計

--------------------------------------------------------- */
html {
	color: #222;
	font-size: 2.667vw; /* 10/375px*100 */
	font-family: 'Noto Sans JP', sans-serif;
	height: 100%;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

body {
	background-color: #0148b3;
	font-size: 1.4rem;
	height: 100%;
}

.font_kalam {
	font-family: 'Kalam', cursive;
}

/*===============================================
	基礎設計：768px未満
===============================================*/
@media screen and (max-width:767px) {
	.only_pc {display: none;} /* PC時のみ表示する要素に */
}

/*===============================================
	基礎設計：768px以上
===============================================*/
@media screen and (min-width:768px) {
	html {font-size: 0.71429vw;} /* 10/1400px*100 */
	body {font-size: 1.5rem;}
	.only_sp {display: none;} /* SP時のみ表示する要素に */
}

/*===============================================
	基礎設計：1400px以上
===============================================*/
@media screen and (min-width:1400px) {
	html {font-size: 10px;}
}



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

	02. ページ構成

--------------------------------------------------------- */
.cmn_wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
	padding-top: 7.5rem;
	position: relative;
	width: 100%;
}

.cmn_container {
	margin: 0 auto;
	padding: 0 2rem;
	position: relative;
	width: 100%;
}

main {min-height: 0%;}

/*===============================================
	ページ構成：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.cmn_wrapper {
		min-height: 100%;
		min-width: 100%;
		padding-top: 9.8rem;
	}

	.cmn_container {
		padding: 0 20rem;
	}
}

/*===============================================
	ページ構成：1400px以上
===============================================*/
@media screen and (min-width:1400px) {
	.cmn_container {
		max-width: 1400px;
	}
}



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

	03. ヘッダー

--------------------------------------------------------- */
header {
	background-color: #0148b3;
	height: 7.5rem;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
header .cmn_container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.header_logo {
	color: #e7f2f4;
	font-size: 1.2rem;
	font-weight: 900;
}
.header_logo img {
	margin-right: 0.8em;
	max-width: 11.6rem;
}
.header_logo span {
	display: block;
	font-weight: normal;
	margin-top: 0.5em;
}

.header_nav a {
	background-color: #e7f2f4;
	color: #0148b3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 900;
	height: 4rem;
	text-decoration: none;
	width: 14rem;
}

/* .header_nav {
	background-color: #e7f2f4;
	opacity: 0;
	padding: 7.8rem 4rem 6.2rem;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.2s;
	width: 100%;
	z-index: 0;
}
.header_nav.is-open {
	opacity: 1;
	pointer-events: auto;
}
.header_nav li + li {
	margin-top: 1.5em;
}
.header_nav a {
	color: #0148b3;
	display: flex;
	align-items: center;
	font-size: 1.8rem;
	font-weight: 900;
	text-decoration: none;
}
.header_nav a::before {
	content: '';
	background-color: #0148b3;
	display: block;
	height: 0.3rem;
	margin-right: 0.5em;
	width: 1.2rem;
} */

.header_switch {
	background-color: #e7f2f4;
	height: 4rem;
	position: relative;
	width: 4rem;
	z-index: 10;
}
.header_switch a {
	background-color: #e7f2f4;
	display: block;
	height: 100%;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
.header_switch::before,
.header_switch::after,
.header_switch a::before,
.header_switch a::after {
	content: '';
	background-color: #0148b3;
	border-radius: 0.3rem;
	display: block;
	height: 0.3rem;
	position: absolute;
	left: 20%;
	transition: opacity 0.2s, transform 0.2s;
	width: 60%;
}
.header_switch::before,
.header_switch::after {top: 1.8rem;}
.header_switch a::before {top: 0.9rem;}
.header_switch a::after {top: 2.7rem;}

.header_switch.is-open::before {transform: rotate(-45deg);}
.header_switch.is-open::after {transform: rotate(45deg);}
.header_switch.is-open a::before,
.header_switch.is-open a::after {opacity: 0;}

/*===============================================
	ヘッダー：768px以上
===============================================*/
@media screen and (min-width:768px) {
	header {
		height: 9.8rem;
	}
	header .cmn_container {
		max-width: inherit;
		padding: 0 6rem 0 10rem;
	}

	.header_logo {
		font-size: 1.5rem;
	}
	.header_logo img {
		max-width: 14rem;
	}
	.header_logo span {
		display: inline;
		font-weight: 900;
	}

	.header_nav {
		background-color: transparent;
		display: block;
		opacity: 1;
		padding: 0;
		pointer-events: auto;
		position: static;
		transition: none;
		width: auto;
	}
	.header_nav ul {
		display: flex;
	}
	.header_nav li + li {
		margin-top: 0;
		margin-left: 2rem;
	}
	.header_nav a {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.8rem;
		height: 5.4rem;
		width: 21.8rem;
	}
	.header_nav_app a {
		background-color: #e7f2f4;
		color: #0148b3;
	}
	.header_nav_entry a {
		background-color: #29bbd0;
		color: #fff;
		font-size: 2rem;
	}
	.header_nav a::before {display: none;}

	.device_pc .header_nav a {transition: color 0.2s;}
	.device_pc .header_nav a:hover {color: #d0bf48;}

	.header_switch {display: none;}
}



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

	04. フッター

--------------------------------------------------------- */
footer {
	background-color: #0148b3;
	position: relative;
	z-index: 1;
}
footer .cmn_container {
	color: #fff;
	padding-top: 3rem;
	padding-bottom: 1.5rem;
}

.footer_kobelco a {
	background: url(../img/logo_kobelco.svg) center/contain no-repeat;
	display: block;
	height: 4rem;
	overflow: hidden;
	text-indent: 100%;
	text-decoration: none;
	white-space: nowrap;
	width: 10.9rem;
}

.footer_shinkobolt {
	font-size: 1.2rem;
	line-height: 1.5;
	margin-top: 2.5rem;
}
.footer_shinkobolt a {
	display: block;
	margin-bottom: 0.4em;
}

.footer_copyright {
	border-top: 0.1rem solid #2968c6;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
	margin-top: 2em;
	padding-top: 1em;
	text-align: center;
}

.footer_pagetop {
	height: 6rem;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	transition: opacity 0.2s;
	width: 5.2rem;
	z-index: 100;
}
.footer_pagetop.is-show {
	opacity: 1;
	pointer-events: auto;
}
.footer_pagetop.is-stop {
	position: absolute;
	bottom: 100%;
	transform: translateY(50%);
}
.footer_pagetop a {
	background: url(../img/footer_pagetop_bg.png) center/contain no-repeat;
	color: #0148b3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 1.3rem;
	font-weight: 900;
	position: relative;
	text-decoration: none;
}
.footer_pagetop a::before {
	content: '';
	background: url(../img/footer_pagetop_arrow.svg) center/contain no-repeat;
	display: block;
	height: 1rem;
	margin-bottom: 0.4em;
	width: 2rem;
}
.device_pc .footer_pagetop a {transition: opacity 0.2s;}
.device_pc .footer_pagetop a:hover {opacity: 0.7;}

/*===============================================
	フッター：768px以上
===============================================*/
@media screen and (min-width:768px) {
	footer .cmn_container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 8.5rem 6rem 9.8rem;
	}

	.footer_kobelco {
		order: 1;
	}
	.footer_kobelco a {
		height: 4.5rem;
		width: 12.4rem;
	}

	.footer_shinkobolt {
		font-size: 1.3rem;
		margin-top: 0;
		order: 0;
	}
	.footer_shinkobolt a {
		margin-bottom: 1em;
	}

	.footer_copyright {
		margin-top: 2.5em;
		order: 2;
		padding-top: 2em;
		width: 100%;
	}
}



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

	05. コンテンツ

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

/* スクロールアニメーション
--------------------------------------------------------- */
.js-anime_scroll,
.js-anime_member {
	opacity: 0;
	will-change: transform;
}
.js-anime_scroll.is-ready,
.js-anime_member.is-ready {
	transition: transform 0.5s, opacity 0.5s;
	transition-timing-function: cubic-bezier(0.07, 0.38, 0.24, 1.02);
}
.js-anime_up {transform: matrix(1, 0, 0, 1, 0, 70);}
.js-anime_down {transform: matrix(1, 0, 0, 1, 0, -70);}
.js-anime_right {transform: matrix(1, 0, 0, 1, 70, 0);}
.js-anime_left {transform: matrix(1, 0, 0, 1, -70, 0);}

.js-anime_scroll.is-action,
.js-anime_member.is-action {
	opacity: 1;
	transform: none;
}

.js-anime_group.js-anime_scroll {
	opacity: 1;
	transform: none;
}

.js-anime_up_bounce.is-action {
	animation: up-bounce 1s both;
	opacity: 0;
	transform: none;
}
@keyframes up-bounce {
	0% {
		transform: translateY(45px);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	24% {
		opacity: 1;
	}
	40% {
		transform: translateY(24px);
		animation-timing-function: ease-in;
	}
	65% {
		transform: translateY(12px);
		animation-timing-function: ease-in;
	}
	82% {
		transform: translateY(6px);
		animation-timing-function: ease-in;
	}
	93% {
		transform: translateY(4px);
		animation-timing-function: ease-in;
	}
	25%,
	55%,
	75%,
	87% {
		transform: translateY(0px);
		animation-timing-function: ease-out;
	}
	100% {
		transform: translateY(0px);
		animation-timing-function: ease-out;
		opacity: 1;
	}
}

.js-anime_down_bounce.is-action {
	animation: down-bounce 1s both;
	opacity: 0;
	transform: none;
}
@keyframes down-bounce {
	0% {
		transform: translateY(-45px);
		animation-timing-function: ease-in;
		opacity: 0;
	}
	24% {
		opacity: 1;
	}
	40% {
		transform: translateY(-24px);
		animation-timing-function: ease-in;
	}
	65% {
		transform: translateY(-12px);
		animation-timing-function: ease-in;
	}
	82% {
		transform: translateY(-6px);
		animation-timing-function: ease-in;
	}
	93% {
		transform: translateY(-4px);
		animation-timing-function: ease-in;
	}
	25%,
	55%,
	75%,
	87% {
		transform: translateY(0px);
		animation-timing-function: ease-out;
	}
	100% {
		transform: translateY(0px);
		animation-timing-function: ease-out;
		opacity: 1;
	}
}

/*===============================================
	スクロールアクション：768px未満
===============================================*/
@media screen and (max-width:767px) {
	.js-anime_pc {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	.js-anime_sp_left {transform: matrix(1, 0, 0, 1, -70, 0);}
}

/*===============================================
	スクロールアクション：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.js-anime_sp {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	.js-anime_pc_right {transform: matrix(1, 0, 0, 1, 70, 0);}

	.info_list li:nth-child(2) {animation-delay: 0.5s;}
}

/* メインビジュアル
--------------------------------------------------------- */
.sec_mv {
	background: url(../img/mv_bg_sp.jpg) center/cover no-repeat;
	position: relative;
}
.sec_mv::before {
	content: '';
	background-color: #0148b3;
	display: block;
	height: 100vh;
	position: absolute;
	bottom: 100%;
	left: 0;
	transform: skewY(-4deg);
	transform-origin: right bottom;
	width: 100vw;
}
.sec_mv .cmn_container {
	display: flex;
	flex-direction: column;
	padding-top: 2.5rem;
	padding-bottom: 4.5rem;
}

.mv_title {
	order: 1;
	position: relative;
}
.mv_title_inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}
.mv_title_inner span {
	background-color: #d0bf48;
	color: #0148b3;
	display: inline-block;
	font-size: 2rem;
	font-weight: 900;
	padding: 0.6em 2em;
	transform: skewY(-4deg);
}
.mv_title_inner span:first-child {
	margin: 0 auto 0.5em;
}
.mv_title_challenge {
	position: absolute;
	bottom: -1.5rem;
	right: 0;
}
.mv_title_challenge span {
	border: 0.5rem solid #0147b0;
	color: #0148b3;
	display: inline-block;
	font-size: 4.1rem;
	font-weight: 900;
	padding: 0.1em 0.3em 0.2em;
	transform: skewY(-4deg);
}

.mv_image {
	height: 15rem;
	margin: 0 auto -1rem;
	order: 0;
	overflow: hidden;
	width: 88%;
	z-index: -1;
}

/*===============================================
	メインビジュアル：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.sec_mv {
		background-image: url(../img/mv_bg_pc.jpg);
		position: relative;
	}
	.sec_mv .cmn_container {
		display: block;
		padding: 10rem 6rem 15rem;
	}

	.mv_title {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		width: 100%;
	}
	.mv_title_inner {
		align-items: flex-end;
	}
	.mv_title_inner span {
		font-size: 4.2rem;
		padding: 0.4em 1em 0.5em;
	}
	.mv_title_inner span:first-child {
		margin: 0 2em 0.05em 0;
	}
	.mv_title_challenge {
		position: static;
	}
	.mv_title_challenge span {
		border-width: 1rem;
		font-size: 11rem;
		margin: 0.2em 0.9em 0 0;
		padding: 0.1em 0.4em 0.2em;
	}

	.mv_image {
		height: auto;
		margin: 0;
		position: absolute;
		bottom: 0;
		left: 2.5rem;
		width: 57%;
		z-index: 1;
	}
}

/* メッセージ
--------------------------------------------------------- */
.sec_message {
	color: #e7f2f4;
	padding-top: 7rem;
	position: relative;
	z-index: 1;
}
.sec_message::before {
	content: '';
	background-color: #0148b3;
	height: 50vh;
	position: absolute;
	top: 0;
	left: 0;
	transform: skewY(-4deg);
	transform-origin: left top;
	width: 300vw;
	z-index: -1;
}
.sec_message .cmn_container {
	padding-bottom: 55%;
}
.sec_message .cmn_container::before {
	content: '';
	background: url(../img/message_deco01.png) center/contain no-repeat;
	display: block;
	height: 11.5rem;
	position: absolute;
	bottom: 99%;
	right: 16%;
	width: 11.4rem;
}

.message_title {
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 2em;
	text-transform: uppercase;
}
.message_title > span {
	display: block;
	font-size: 3.5rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	margin-bottom: 0.3em;
}
.message_title span span {
	color: #d0bf48;
}

.message_subtitle {
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.5;
	margin: 2em 0 0.8em;
}
.message_text p {
	line-height: 1.9;
}
.message_text p + p {
	margin-top: 1em;
}

.message_image {
	margin: 2em auto 0;
	position: relative;
	width: 76.4%;
}
.message_image img:last-child {
	position: absolute;
	bottom: -30%;
	right: -10%;
	width: 56.6%;
	z-index: 1;
}

.sec_person {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.message_person {
	width: 74%;
}

/*===============================================
	メッセージ：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.sec_message {
		padding-top: 10rem;
	}
	.sec_message .cmn_container {
		padding-bottom: 34rem;
	}
	.sec_message .cmn_container::before {
		height: 29.8rem;
		bottom: 90%;
		right: 18rem;
		width: 29.6rem;
	}
	.sec_message .cmn_container::after {
		content: '';
		background: url(../img/sec_deco02.svg) center/contain no-repeat;
		height: 21.5rem;
		position: absolute;
		top: 7rem;
		right: 0;
		transform: translateX(-6rem);
		width: 24.8rem;
	}

	.message_title {
		font-size: 1.5rem;
		margin-bottom: 2.6em;
	}
	.message_title > span {
		font-size: 4rem;
	}

	.message_subtitle {
		font-size: 2rem;
		letter-spacing: 0;
		margin: 3.5em 0 0.8em;
	}
	.message_text p {
		line-height: 1.8;
	}
	.message_text p:not(.message_lead) {
		width: 46%;
	}

	.message_image {
		margin: 0;
		position: absolute;
		bottom: 29rem;
		right: 22rem;
		width: 27.86%;
	}

	.message_person {
		width: 41%;
	}
	.message_person::before {
		content: '';
		background: url(../img/sec_deco03.svg) center/contain no-repeat;
		height: 22.4rem;
		position: absolute;
		top: -1.5rem;
		right: 50%;
		transform: translateX(-33rem);
		width: 23.4rem;
	}
}

/* 数字で見る神鋼ボルト
--------------------------------------------------------- */
.sec_info {
	background: url(../img/info_bg_sp.jpg) center/cover no-repeat;
	position: relative;
	z-index: 1;
}
.sec_info .cmn_container {
	padding-top: 9rem;
	padding-bottom: 18rem;
}

.sec_title {
	color: #e7f2f4;
	font-size: 2.8rem;
	font-weight: 900;
	letter-spacing: 0.18em;
	position: relative;
	z-index: 0;
}
.sec_title::before {
	font-family: 'Kalam', cursive;
	font-size: 3.5rem;
	font-weight: 400;
	letter-spacing: 0;
	position: absolute;
	top: -1.1em;
	left: 0;
	transform: rotate(-7deg);
	z-index: -1;
}
.sec_title em {
	font-style: normal;
}
.sec_info .sec_title::before {
	content: 'Infographics';
	color: #6cc6d3;
}
.sec_info .sec_title em {color: #02388b;}

.sec_lead {
	color: #e7f2f4;
	line-height: 1.9;
	margin-top: 2rem;
}

.info_list {
	margin: 3rem auto 0;
	max-width: 27rem;
}
.info_list li {
	background-color: #e7f2f4;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 27rem;
	padding-bottom: 0.5em;
	position: relative;
}
.info_list li + li {
	margin-top: 3rem;
}
.info_list h3 {
	border-bottom: 0.3rem solid #00b1cb;
	color: #00b1cb;
	font-size: 1.7rem;
	font-weight: 900;
	padding-bottom: 0.8em;
	position: absolute;
	top: 4.8rem;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	width: 18rem;
}
.info_list p {
	color: #00b1cb;
	font-size: 2.1rem;
	font-weight: bold;
}
.info_list p strong {
	color: #02388b;
	font-size: 2.5em;
	margin: 0 0.1em;
}
.info_list li::after {
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	height: 5.4rem;
	position: absolute;
	bottom: 3rem;
	left: 0;
	width: 100%;
}
.info_list li:nth-child(1)::after {background-image: url(../img/info_icon01.svg);}
.info_list li:nth-child(2)::after {background-image: url(../img/info_icon02.svg);}
.info_list li:nth-child(3)::after {background-image: url(../img/info_icon03.svg);}

.info_person {
	width: 88%;
}

/*===============================================
	メッセージ：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.sec_info {
		background-image: url(../img/info_bg_pc.jpg);
	}
	.sec_info .cmn_container {
		padding-top: 10rem;
		padding-bottom: 25rem;
	}

	.sec_title {
		font-size: 4rem;
	}
	.sec_title::before {
		font-size: 5rem;
		top: -1em;
		left: -1.2em;
	}

	.sec_lead {
		line-height: 1.8;
		margin-top: 4rem;
	}

	.info_list {
		display: flex;
		justify-content: space-between;
		margin-top: 6rem;
		max-width: inherit;
	}
	.info_list li {
		height: 30rem;
		width: 30rem;
	}
	.info_list li + li {
		margin-top: 0;
	}
	.info_list h3 {
		font-size: 2rem;
		width: 20rem;
	}
	.info_list p {
		font-size: 2.4rem;
	}
	.info_list p strong {
		font-size: 6rem;
	}
	.info_list li::after {
		height: 6rem;
	}

	.info_person {
		width: 38%;
	}
}

/* ボルトの製造工程
--------------------------------------------------------- */
.sec_process {
	background-color: #0148b3;
	position: relative;
	z-index: 1;
}
.sec_process .cmn_container {
	padding-top: 9rem;
	padding-bottom: 16rem;
}

.sec_process .sec_title::before {
	content: 'Process';
	color: #2968c6;
}
.sec_process .sec_title em {color: #d0bf48;}

.process_list {
	margin-top: 4rem;
}
.process_list li + li {
	margin-top: 3rem;
}
.process_num {
	color: #d0bf48;
	font-size: 4rem;
	font-weight: 900;
}
.process_en {
	color: #e7f2f4;
	font-size: 2rem;
	font-weight: 400;
	margin-left: 0.8em;
}
.process_title {
	color: #e7f2f4;
	display: block;
	font-size: 2.8rem;
	font-weight: 900;
	letter-spacing: 0.18em;
	margin: 0.5em 0 0.8em;
}
.process_text p {
	color: #e7f2f4;
	line-height: 1.9;
}
.process_text p::after {
	content: '';
	background: url(../img/process_arrow.svg) center/contain no-repeat;
	display: block;
	height: 1.4rem;
	margin-top: 1em;
	width: 10rem;
}
.process_image {
	position: relative;
}
.process_image::after {
	content: '';
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
}
.process_list li:nth-child(1) .process_image::after {
	background-image: url(../img/process_deco01.png);
	height: 11.5rem;
	bottom: -1.5rem;
	left: -0.5rem;
	width: 15.1rem;
}
.process_list li:nth-child(3) .process_image::after {
	background-image: url(../img/process_deco02.png);
	height: 12.8rem;
	top: 3rem;
	left: -0.5rem;
	width: 11rem;
}

.process_person {
	width: 75%;
}

/*===============================================
	ボルトの製造工程：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.sec_process .cmn_container {
		padding-top: 10rem;
		padding-bottom: 16rem;
	}

	.process_list {
		margin-top: 6rem;
	}
	.process_list li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 0;
	}
	.process_list li:nth-child(even) {
		flex-direction: row-reverse;
	}
	.process_list li:nth-child(1)::before {
		content: '';
		background: url(../img/sec_deco01.svg) center/contain no-repeat;
		height: 12.5rem;
		position: absolute;
		top: -5rem;
		left: 0;
		transform: translateX(-10rem);
		width: 12.3rem;
		z-index: -1;
	}
	.process_list li:nth-child(1)::after {
		content: '';
		background: url(../img/sec_deco02.svg) center/contain no-repeat;
		height: 21.5rem;
		position: absolute;
		top: 14rem;
		right: 0;
		transform: translateX(10rem);
		width: 24.8rem;
		z-index: -1;
	}
	.process_list li:nth-child(2)::before {
		content: '';
		background: url(../img/sec_deco03.svg) center/contain no-repeat;
		height: 22.4rem;
		position: absolute;
		top: 8rem;
		left: 0;
		transform: translateX(-10rem);
		width: 23.4rem;
	}
	.process_list li:nth-child(3)::before {
		content: '';
		background: url(../img/sec_deco03.svg) center/contain no-repeat;
		height: 22.4rem;
		position: absolute;
		top: -3rem;
		right: 0;
		transform: translateX(10rem) rotate(180deg);
		width: 23.4rem;
	}
	.process_list li:nth-child(4)::before {
		content: '';
		background: url(../img/sec_deco02.svg) center/contain no-repeat;
		height: 21.5rem;
		position: absolute;
		top: -10rem;
		left: 0;
		transform: translateX(-10rem) rotate(180deg);
		width: 24.8rem;
		z-index: -1;
	}
	.process_list li:nth-child(4)::after {
		content: '';
		background: url(../img/sec_deco01.svg) center/contain no-repeat;
		height: 12.5rem;
		position: absolute;
		bottom: 8rem;
		right: 0;
		transform: translateX(10rem) rotate(180deg);
		width: 12.3rem;
		z-index: -1;
	}
	.process_list li + li {
		margin-top: 0;
	}
	.process_text {
		padding-bottom: 9rem;
		width: 47%;
	}
	.process_num {
		font-size: 6rem;
	}
	.process_en {
		font-size: 3rem;
		margin-left: 0.6em;
	}
	.process_title {
		font-size: 4rem;
		margin: 0.8em 0;
	}
	.process_text p {
		line-height: 1.8;
	}
	.process_text p::after {
		height: 1.6rem;
		margin-top: 1.2em;
		width: 11rem;
	}
	.process_list li:nth-child(even) .process_text p::after {
		transform: scaleX(-1);
	}
	.process_image {
		width: 47%;
	}
	.process_list li:nth-child(1) .process_image::after {
		height: 21rem;
		bottom: 1.5rem;
		left: -12.5rem;
		width: 27.6rem;
	}
	.process_list li:nth-child(3) .process_image::after {
		height: 20.8rem;
		top: 0;
		left: -12.5rem;
		width: 18rem;
	}

	.process_person {
		transform: translateX(5rem);
		width: 32%;
	}
}

/* 社員インタビュー
--------------------------------------------------------- */
.sec_interview {
	background-color: #e7f2f4;
	position: relative;
	z-index: 1;
}
.sec_interview .cmn_container {
	padding-top: 9rem;
	padding-bottom: 4rem;
}

.sec_interview .sec_title {color: #29bbd0;}
.sec_interview .sec_title::before {
	content: 'Interview';
	color: #c6d9f5;
}
.sec_interview .sec_title em {color: #02388b;}

.interview_inner {
	display: flex;
	flex-direction: column-reverse;
	margin-top: 3rem;
}
.interview_text {
	margin-top: 1.5rem;
}

.interview_title {
	border: 0.8rem solid #02388b;
	color: #02388b;
	font-size: 1.6rem;
	font-weight: 900;
	line-height: 1.5;
	padding: 2.5rem 3rem;
}
.interview_name {
	color: #29bbd0;
	font-size: 2rem;
	font-weight: 900;
	margin-top: 3rem;
}
.interview_name span {
	font-size: 0.7em;
}
.interview_profile {
	color: #29bbd0;
	font-weight: 900;
	line-height: 1.4;
	margin-top: 0.5em;
	position: relative;
}
.interview_profile::before {
	content: '';
	background: url(../img/interview_deco01.png) center/contain no-repeat;
	display: block;
	height: 8rem;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 14rem;
}
.interview_message {
	color: #02388b;
	line-height: 1.9;
	margin-top: 2rem;
}

/*===============================================
	社員インタビュー：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.sec_interview .cmn_container {
		padding-top: 10rem;
		padding-bottom: 9rem;
	}

	.interview_inner {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		margin-top: 9rem;
		position: relative;
		z-index: 0;
	}
	.interview_inner::before {
		content: '';
		background: url(../img/sec_deco03.svg) center/contain no-repeat;
		height: 22.4rem;
		opacity: 0.6;
		position: absolute;
		top: -22.5rem;
		right: 0;
		transform: translateX(10rem);
		width: 23.4rem;
	}
	.interview_inner::after {
		content: '';
		background: url(../img/sec_deco02.svg) center/contain no-repeat;
		height: 21.5rem;
		opacity: 0.6;
		position: absolute;
		bottom: -7rem;
		left: 0;
		transform: translateX(-10rem) scaleX(-1);
		width: 24.8rem;
		z-index: -1;
	}
	.interview_text {
		margin-top: 0;
		width: 47%;
	}
	.interview_image {
		width: 47%;
	}

	.interview_title {
		border-width: 1rem;
		font-size: 1.8rem;
		padding: 2.5rem 3.5rem;
	}
	.interview_name {
		font-size: 2.5rem;
		margin-top: 3.5rem;
	}
	.interview_profile {
		margin-top: 1em;
	}
	.interview_profile::before {
		height: 11rem;
		bottom: -1rem;
		width: 19rem;
	}
}

/* エントリー
--------------------------------------------------------- */
.sec_entry {
	background: url(../img/info_bg_sp.jpg) center/cover no-repeat;
}
.sec_entry .cmn_container {
	padding-top: 4rem;
	padding-bottom: 14rem;
}

.sec_entry .message_title {color: #fff;}

.entry_inner {
	margin-top: 3.5em;
	will-change: auto;
}
.entry_btn {
	margin: 0 auto;
	max-width: 26rem;
	position: relative;
	z-index: 0;
}
.entry_btn::before {
	content: '';
	background-color: #007ba2;
	display: block;
	height: 100%;
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	width: 100%;
	z-index: -2;
}
.entry_btn a {
	background-color: #e7f2f4;
	color: #0148b3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	font-weight: 900;
	height: 5.2rem;
	margin: 0 auto;
	position: relative;
	text-decoration: none;
	z-index: 1;
}

.entry_person:nth-of-type(1) {
	height: 11rem;
	position: absolute;
	bottom: 0;
	right: 50%;
	transform: translateX(-1.5rem);
	width: 12rem;
}
.entry_person:nth-of-type(2) {
	height: 11rem;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(5.5rem);
	width: 9rem;
}

/*===============================================
	エントリー：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.sec_entry {
		background-image: url(../img/info_bg_pc.jpg);
	}
	.sec_entry .cmn_container {
		padding-top: 8rem;
		padding-bottom: 12rem;
	}

	.entry_inner {
		margin-top: 5em;
	}
	.entry_btn {
		max-width: 50rem;
	}
	.entry_btn::before {
		top: 1rem;
		left: 1rem;
	}
	.entry_btn a {
		font-size: 2.8rem;
		height: 10rem;
	}
	.device_pc .entry_btn a {transition: transform 0.2s;}
	.device_pc .entry_btn a:hover {transform: translate(1rem, 1rem);}

	.entry_person:nth-of-type(1) {
		height: 22rem;
		transform: translateX(-25rem);
		width: 23rem;
	}
	.entry_person:nth-of-type(2) {
		height: 22rem;
		transform: translateX(30rem);
		width: 18rem;
	}
}