:root {
	--color-primary: #151515;
	--color-blue: #183894;
	--color-yellow: #FCD10F;
	--color-white: #FFFFFF;
	--color-gray: #F2F4F5;
	--color-light-blue: #D7EFFC;
	--color-light-yellow: #FFF9D7;

	--gradient-blue-yoko: linear-gradient(to right, #6bc7f1, #183894);
	--gradient-blue-tate: linear-gradient(to bottom, #183894, #6bc7f1);
	--gradient-light-blue-yoko: linear-gradient(to right, #FFFFFF, #6bc7f1);

	--color-recruit-pink: #FD6395;
	--color-recruit-green: #21CEC8;
	--color-recruit-blue: #60A7FA;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	overflow-x: hidden;
}

body {
	font-family: zen-kaku-gothic-new, sans-serif;
	color: var(--color-primary);
}

a {
	font-family: zen-kaku-gothic-new, sans-serif;
	display: inline-block;
	color: var(--color-primary);
	text-decoration: none;
}

li {
	list-style: none;
}

h1 {
	font-family: zen-kaku-gothic-new, sans-serif;
	font-size: 36px;
	padding-bottom: 45px;
}

h2 {
	font-family: zen-kaku-gothic-new, sans-serif;
	font-size: 33px;
}

h3 {
	font-family: zen-kaku-gothic-new, sans-serif;
	font-size: 24px;
}


h4 {
	font-family: zen-kaku-gothic-new, sans-serif;
	font-size: 20px;
}

p {
	font-family: zen-kaku-gothic-new, sans-serif;
	font-size: 16px;
	line-height: 1.8;
}

@media screen and (max-width: 768px) {

	body {
		letter-spacing: 0.02em;
	}

	h1 {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-size: 26px;
		padding-bottom: 30px;
		line-height: 1.4;
	}

	h2 {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-size: 24px;
		line-height: 1.5;
	}

	h3 {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-size: 20px;
		line-height: 1.6;
	}

	h4 {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-size: 18px;
		line-height: 1.6;
	}

	p {
		font-family: zen-kaku-gothic-new, sans-serif;
		font-size: 14px;
		line-height: 1.8;
	}

}

.en-din {
	font-family: din-2014, sans-serif;
}

.jp-zen {
	font-family: zen-kaku-gothic-new, sans-serif;
}

/*==========================================
    layout（全体レイアウト）
==========================================*/
.container_1366 {
	width: 100%;
	max-width: 1366px;
	margin: 0 auto;
}

.container_1200 {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* 1280px */
@media screen and (max-width: 1280px) {
	.container_1200 {
		width: 90%;
	}
}

/* 1000px */
.sp-only-1000 {
	display: none;
}

@media screen and (max-width: 1000px) {
	.sp-only-1000 {
		display: block;
	}
}

/* 900px */
.sp-only-900 {
	display: none;
}

@media screen and (max-width: 900px) {
	.sp-only-900 {
		display: block;
	}
}

/* 768px */
.sp-only-768 {
	display: none;
}


@media screen and (max-width: 768px) {
	.sp-only-768 {
		display: block;
	}
}

/* 480px */
.sp-only-480 {
	display: none;
}


@media screen and (max-width: 480px) {
	.sp-only-480 {
		display: block;
	}
}

/* 400px */
.sp-only-400 {
	display: none;
}


@media screen and (max-width: 400px) {
	.sp-only-400 {
		display: block;
	}
}

/*==========================================
    template-parts(テンプレートパーツ)
==========================================*/

/*----------------------------------------
	icon-instagram
----------------------------------------*/
.icon-instagram {
	display: inline-block;
	width: 35px;
	height: 35px;
	fill: var(--color-blue);
}

/*----------------------------------------
	service-nav-grid(メニュー用)
----------------------------------------*/
.service-grid {
	display: grid;
	grid-template-columns: repeat(4, 23%);
	gap: 10px;
}

.service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.service-card {
	position: relative;
}

.service-card::before,
.service-card::after,
.service-card span::before,
.service-card span::after {
	content: "";
	position: absolute;
	transition: 0.2s ease;
}

/* 上 */
.service-card::before {
	top: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--gradient-blue-yoko);
}

/* 右 */
.service-card::after {
	top: 0;
	right: 0;
	width: 2px;
	height: 0;
	background: var(--gradient-blue-tate);
}

/* 下 */
.service-card span::before {
	bottom: 0;
	right: 0;
	width: 0;
	height: 2px;
	background: var(--gradient-blue-yoko);
}

/* 左 */
.service-card span::after {
	bottom: 0;
	left: 0;
	width: 2px;
	height: 0;
	background: var(--gradient-blue-tate);
}

/* hover animation */

.service-card:hover::before {
	width: 100%;
}

.service-card:hover::after {
	height: 100%;
	transition-delay: .08s;
}

.service-card:hover span::before {
	width: 100%;
	transition-delay: .16s;
}

.service-card:hover span::after {
	height: 100%;
	transition-delay: .24s;
}

.service-card:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.service-card img {
	width: 100%;
	object-fit: cover;
}

.service-card span {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 13px;
	line-height: 1;
	font-weight: 500;
	color: var(--color-blue);
	background-color: var(--color-white);
	padding: 6px 0 11px 0;
}

/*----------------------------------------
	service-section-grid(事業紹介セクション用)
----------------------------------------*/

/* グリッド */
.service-section-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* カード */
.service-section-card {
	display: block;
	background: #fff;
	text-decoration: none;
	color: #333;
	overflow: hidden;
	transition: 0.3s;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
}

.service-section-card img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.service-section-card span {
	display: block;
	text-align: center;
	padding: 10px;
	font-size: 24px;
	color: var(--color-blue);
	font-weight: 600;
}

/* hover */
.service-section-card:hover {
	transform: translateY(-5px);
	background: var(--gradient-blue-yoko);
	color: var(--color-white);

	span {
		color: var(--color-white);
	}
}

/* テキストブロック */
.service-section-text {
	grid-column: span 2;
	background: #fff;
	padding: 8px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.service-section-text p {
	color: var(--color-blue);
	padding-bottom: 8px;
}

.service-section-btn {
	margin-left: auto;
}

/* タブレット */
@media (max-width: 1000px) {
	.service-section-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-section-text {
		grid-column: span 2;
	}
}

/* SP */
@media (max-width: 600px) {
	.service-section-grid {
		grid-template-columns: 1fr;
	}

	.service-section-text {
		grid-column: auto;
	}
}

/*----------------------------------------
	recruit-section-type-big(採用情報-大-)
----------------------------------------*/
.recruit-section-type-big {
	padding: 100px 0 120px 0;
	background-color: var(--color-light-blue);
}

.recruit-section-type-big-inner {
	position: relative;
}

.recruit-section-type-big-title-en {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: 100%;
	max-width: 703px;
}

.recruit-section-type-big-title {
	position: relative;
	z-index: 1000;
	color: var(--color-blue);
	font-weight: 500;
	text-align: center;
	padding-top: 80px;
}

.recruit-section-type-big-content {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 65px;
	padding-top: 40px;
}

.recruit-section-type-big-content-left {
	width: 64%;
}

.recruit-section-type-big-content-left img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.recruit-section-type-big-content-right {
	width: calc(36% - 65px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.recruit-section-type-big-content-right-text {
	color: var(--color-blue);
}

@media screen and (max-width: 1100px) {
	.recruit-section-type-big-content {
		flex-direction: column;
		gap: 40px;
	}

	.recruit-section-type-big-content-left {
		width: 100%;
	}

	.recruit-section-type-big-content-right {
		width: 100%;
	}

	.recruit-section-type-big-content-right-btn {
		margin-top: 40px;
		margin-left: auto;
	}
}

@media screen and (max-width: 768px) {
	.recruit-section-type-big-title {
		padding-top: 60px;
	}
}

@media screen and (max-width: 600px) {
	.recruit-section-type-big-title {
		padding-top: 40px;
	}
}

/*----------------------------------------
	recruit-3-btn(採用情報 3ボタン)
----------------------------------------*/

.recruit-3-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 50px;
}

.recruit-3-btn-link-green {
	width: 100%;
	max-width: 377px;
	background-color: var(--color-white);
	border: 5px solid var(--color-recruit-green);
}

.recruit-3-btn-link-green:hover {
	background-color: var(--color-recruit-green);
	border: none;
}

.recruit-3-btn-link-pink {
	width: 100%;
	max-width: 377px;
	background-color: var(--color-white);
	border: 5px solid var(--color-recruit-pink);
}

.recruit-3-btn-link-pink:hover {
	background-color: var(--color-recruit-pink);
	border: none;
}

.recruit-3-btn-link-blue {
	width: 100%;
	max-width: 377px;
	background-color: var(--color-white);
	border: 5px solid var(--color-recruit-blue);
}

.recruit-3-btn-link-blue:hover {
	background-color: var(--color-recruit-blue);
	border: none;
}

.recruit-3-btn a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
}

.recruit-3-btn-link-green p,
.recruit-3-btn-link-green i {
	color: var(--color-recruit-green);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.recruit-3-btn-link-green:hover p,
.recruit-3-btn-link-green:hover i {
	color: var(--color-white);
}

.recruit-3-btn-link-pink p,
.recruit-3-btn-link-pink i {
	color: var(--color-recruit-pink);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.recruit-3-btn-link-pink:hover p,
.recruit-3-btn-link-pink:hover i {
	color: var(--color-white);
}

.recruit-3-btn-link-blue p,
.recruit-3-btn-link-blue i {
	color: var(--color-recruit-blue);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.recruit-3-btn-link-blue:hover p,
.recruit-3-btn-link-blue:hover i {
	color: var(--color-white);
}

@media screen and (max-width: 1200px) {

	.recruit-3-btn-link-green,
	.recruit-3-btn-link-pink,
	.recruit-3-btn-link-blue {
		max-width: 290px;
	}
}

@media screen and (max-width: 1000px) {
	.recruit-3-btn {
		flex-direction: column;
		gap: 20px;
	}

	.recruit-3-btn-link-green,
	.recruit-3-btn-link-pink,
	.recruit-3-btn-link-blue {
		max-width: 100%;
	}
}

/*----------------------------------------
	リクルート3ボタン(採用情報ページのみ)
----------------------------------------*/

.recruit-recruit-3-btn-section {
	padding-bottom: 50px;
}

/*----------------------------------------
	recruit-section-type-small(採用情報-小)
----------------------------------------*/
.recruit-section-type-small {
	padding: 100px 0 120px 0;
	background-color: var(--color-light-blue);
}

.recruit-section-type-small-inner {
	position: relative;
}

.recruit-section-type-small-title-en {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: 100%;
	max-width: 703px;
}

.recruit-section-type-small-title {
	position: relative;
	z-index: 1000;
	color: var(--color-blue);
	font-weight: 500;
	text-align: center;
	padding-top: 80px;
}

.recruit-section-type-small-content {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 65px;
	padding-top: 40px;
}

.recruit-section-type-small-content-text {
	color: var(--color-blue);
	width: 50%;
}

.recruit-section-type-small-content-btn {
	width: 50%;
}

@media screen and (max-width: 1000px) {
	.recruit-section-type-small-content {
		flex-direction: column;
		gap: 40px;
		padding-top: 20px;
	}

	.recruit-section-type-small-content-text {
		width: 100%;
	}

	.recruit-section-type-small-content-btn {
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.recruit-section-type-small-title {
		padding-top: 60px;
	}
}

@media screen and (max-width: 600px) {
	.recruit-section-type-small-title {
		padding-top: 40px;
	}
}

/*----------------------------------------
	recruit-interview-slider(インタビュー)
----------------------------------------*/

.recruit-interview-section {
	padding: 100px 0 120px 0;
}

.recruit-interview-section-inner {
	position: relative;
}

.recruit-interview-title-en {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	width: 100%;
	max-width: 703px;
}

.recruit-interview-title {
	position: relative;
	z-index: 1000;
	color: var(--color-blue);
	font-weight: 500;
	text-align: center;
	padding-top: 80px;
}

.interview-swiper {
	width: 100%;
}

.swiper-wrapper {
	padding-top: 70px;
}

.swiper-slide {
	width: 330px;
}

.interview-item {
	width: 100%;
	max-width: 330px;
	margin: 0 auto;
}

.interview-item a {
	display: block;
	width: 100%;
}

.interview-item img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.interview-item p {
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	font-weight: 300;
	padding-top: 10px;
}

.interview-item h3 {
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-primary);
	font-weight: 400;
}

.recruit-interview-section-inner-button {
	margin: 40px 0 0 auto;
}

@media screen and (max-width: 768px) {
	.recruit-interview-title {
		padding-top: 60px;
	}
}

@media screen and (max-width: 400px) {
	.recruit-interview-title {
		padding-top: 40px;
	}
}



/*==========================================
	共通スタイル
==========================================*/
/*----------------------------------------
	page-nav-grid
----------------------------------------*/
.page-nav-grid {
	display: grid;
	grid-template-columns: repeat(4, 23%);
	gap: 20px 10px;
}

.page-nav-grid a {
	display: block;
	width: 100%;
	text-align: left;
	font-size: 13px;
	line-height: 1;
	font-weight: 500;
	color: var(--color-blue);
	background-color: var(--color-white);
	padding: 12px 10px;
	position: relative;
}

.page-nav-grid a::before,
.page-nav-grid a::after,
.page-nav-grid a span::before,
.page-nav-grid a span::after {
	content: "";
	position: absolute;
	transition: 0.2s ease;
}

/* 上 */
.page-nav-grid a::before {
	top: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--gradient-blue-yoko);
}

/* 右 */
.page-nav-grid a::after {
	top: 0;
	right: 0;
	width: 2px;
	height: 0;
	background: var(--gradient-blue-tate);
}

/* 下 */
.page-nav-grid a span::before {
	bottom: 0;
	right: 0;
	width: 0;
	height: 2px;
	background: var(--gradient-blue-yoko);
}

/* 左 */
.page-nav-grid a span::after {
	bottom: 0;
	left: 0;
	width: 2px;
	height: 0;
	background: var(--gradient-blue-tate);
}

/* hover animation */

.page-nav-grid a:hover::before {
	width: 100%;
}

.page-nav-grid a:hover::after {
	height: 100%;
	transition-delay: .08s;
}

.page-nav-grid a:hover span::before {
	width: 100%;
	transition-delay: .16s;
}

.page-nav-grid a:hover span::after {
	height: 100%;
	transition-delay: .24s;
}

.page-nav-grid a:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

/*----------------------------------------
	グラデーションボタン(1段)
----------------------------------------*/
.gradient-button {
	width: 100%;
	max-width: 334px;
	background: var(--gradient-blue-yoko);
}

.gradient-button a {
	position: relative;
	overflow: hidden;
	z-index: 0;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--color-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	padding: 30px 15px 30px 40px;
}

/* ★ 横に広がる背景 */
.gradient-button a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	/* ← 最初は0 */
	height: 100%;
	background: var(--color-white);
	transition: width 0.3s ease;
	z-index: -1;
}

.gradient-button a:hover {
	color: var(--color-blue);
	font-weight: 500;
}

/* hoverで横に広がる */
.gradient-button a:hover::after {
	width: calc(100% - 6px);
}


/*----------------------------------------
	グラデーションボタン(2段用追加コード)
----------------------------------------*/
.gradient-button .gradient-button-text {
	color: var(--color-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
}

.gradient-button .gradient-button-en {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	padding-bottom: 5px;
}

.gradient-button .gradient-button-text {
	padding-bottom: 0;
}

.gradient-button a:hover .gradient-button-text {
	color: var(--color-blue);
	font-weight: 500;

}

/*----------------------------------------
	ブルーボタン(blue-button)
----------------------------------------*/
.blue-button {
	width: 100%;
	max-width: 334px;
	background: var(--color-blue);
}

.blue-button a {
	position: relative;
	overflow: hidden;
	z-index: 0;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--color-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding: 30px 15px 30px 40px;
}

.blue-button a i {
	font-size: 30px;
}

.blue-button a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background: var(--color-white);
	transition: width 0.3s ease;
	z-index: -1;
}

.blue-button a:hover::after {
	width: calc(100% - 6px);
	background: var(--color-white);
}


.blue-button .blue-button-text {
	color: var(--color-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 0;
}

.blue-button .blue-button-en {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	padding-bottom: 5px;
}


.blue-button a:hover .blue-button-text {
	color: var(--color-blue);
	font-weight: 500;
}

.blue-button a:hover i {
	color: var(--color-blue);
}


/*----------------------------------------
	各ページヒーロー部分(page-header-wrapper)
----------------------------------------*/
.page-header-wrapper {
	width: 100%;
	position: relative;
	height: fit-content;
}

.page-header-wrapper .page-header-wrapper-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	min-height: 200px;
	max-height: 300px;
	object-fit: cover;
}

.page-header-wrapper-inner {
	position: relative;
	z-index: 1000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-height: 400px;
}

.page-header-wrapper-inner-left {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-left: 12%;
	width: 100%;
	max-width: 600px;
	margin-left: auto;
}

.page-header-wrapper-inner-left p {
	position: relative;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.page-header-wrapper-inner-left p::before {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 173px;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.page-header-wrapper-inner-left h1 {
	color: var(--color-blue);
	font-weight: 500;
	padding-top: 18px;
}


.page-header-wrapper-inner-right {
	grid-column: 2;
	overflow: hidden;
	min-height: 110px;
}

.page-header-wrapper-inner-right img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin-left: auto;
}

.contact-page .page-header-wrapper-inner-right img {
	object-position: 60% center;
}

.company-hero-img img {
	object-position: 65% center;
}

@media screen and (max-width: 768px) {
	.page-header-wrapper-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		max-height: fit-content;
	}

	.page-header-wrapper-inner-left {
		width: 100%;
		position: relative;
		top: 0;
		padding-top: 20px;
		padding-left: 10px;
		margin-left: 0;
	}

	.page-header-wrapper-inner-right {
		width: 100%;
		min-height: fit-content;
	}

	.page-header-wrapper-inner-right img {
		object-fit: contain;
	}

}

/*@media screen and (max-width: 600px) {
	.page-header-wrapper-inner {
		height: 80vh;
	}

	.page-header-wrapper .page-header-wrapper-bg {
		height: 80vh;
	}

	.page-header-wrapper-inner-left {
		position: absolute;
		top: 50px;
		left: 0;
		padding-left: 20px;
	}

	.project-hero-img img {
		object-position: 40% 0;
		object-fit: cover;
	}

	.recruit-hero-img img {
		object-position: 25% 0;
		object-fit: cover;
	}

}*/

/*----------------------------------------
 企業情報・実績紹介
 ページメニュー(parent-page-nav-grid)
----------------------------------------*/

.parent-page-nav-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.parent-page-nav-grid a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	color: var(--color-blue);
	font-weight: 500;
	overflow: hidden;
	z-index: 0;
	transition: all 0.3s ease;
}

.parent-page-nav-grid a i {
	display: inline-block;
	background: var(--gradient-blue-yoko);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.parent-page-nav-grid a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
	transition: height 0.3s ease;
	z-index: -1;
}

.parent-page-nav-grid a:hover::after {
	height: 100%;
}

.parent-page-nav-grid a:hover {
	color: var(--color-white);
}

.parent-page-nav-grid a:hover i {
	background: none;
	-webkit-text-fill-color: var(--color-white);
}

@media screen and (max-width: 1000px) {
	.parent-page-nav-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.parent-page-nav-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

/*----------------------------------------
	企業情報 事業紹介 (メニュー実績紹介)
	WordPressメニュー(company-childpage-flex)
----------------------------------------*/
/*-------------- 構成 --------------*/
.company-childpage-flex,
.service-section {
	padding: 100px 0 120px 0;
}

.company-childpage-flex .company-childpage-flex-inner,
.service-section .service-childpage-flex-inner {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 80px;
}

.company-childpage-flex .company-childpage-flex-left,
.service-section .service-childpage-flex-left {
	width: 216px;
}

.company-childpage-flex .company-childpage-flex-right,
.service-section .service-childpage-flex-right {
	width: calc(100% - 216px - 80px);
}

@media screen and (max-width: 1000px) {

	.company-childpage-flex .company-childpage-flex-right,
	.service-section .service-childpage-flex-right {
		width: 100%;
	}
}

/*-------------- メニュー --------------*/
.company-nav-title,
.service-nav-title,
.project-nav-title {
	font-weight: 500;
	font-size: 16px;
	padding-bottom: 15px;
	color: var(--color-blue);
}

.company-nav,
.service-nav {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 216px;
}

.company-nav a,
.service-nav a {
	position: relative;
	display: block;
	padding: 10px;
	color: var(--color-blue);
	font-weight: 500;
	overflow: hidden;
	z-index: 0;
	transition: all 0.3s ease;
}

.company-nav li a::before,
.service-nav li a::before {
	content: "›";
	/* ←これが ＞ */
	position: absolute;
	right: 10px;
	top: 50%;
	font-size: 20px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.company-nav a::after,
.service-nav a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
	transition: height 0.3s ease;
	z-index: -1;
}

.company-nav a:hover::after,
.company-nav li.current-menu-item a::after,
.service-nav a:hover::after,
.service-nav li.current-menu-item a::after {
	height: 100%;
}

.company-nav a:hover,
.company-nav li.current-menu-item a,
.service-nav a:hover,
.service-nav li.current-menu-item a {
	color: var(--color-white);
}

.company-nav a:hover i,
.service-nav a:hover i {
	background: none;
	-webkit-text-fill-color: var(--color-white);
}

@media screen and (max-width: 1000px) {

	.company-nav-wrapper,
	.company-nav,
	.company-nav-title,
	.service-nav-wrapper,
	.service-nav,
	.service-nav-title {
		display: none;
	}
}

/*----------------------------------------
	縦グラデーション付き h3タイトル
----------------------------------------*/

.h3-title-tate-gradient {
	position: relative;
	line-height: 1;
	padding: 8px 0 8px 16px;
}

.h3-title-tate-gradient::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--gradient-blue-tate);
}

/*------ 企業情報と事業紹介の個別ページ h3タイトルの下の余白 --------*/
.company-childpage-flex-inner .h3-title-tate-gradient,
.service-section .h3-title-tate-gradient {
	margin-bottom: 60px;
}

/*----------------------------------------
	TOPページのふわっとセクションが出てくる演出
----------------------------------------*/
.fade-up {
	opacity: 0;
	transform: translateY(30px);
	transition: all 1s cubic-bezier(.25, .1, .25, 1);
}

.fade-up.show {
	opacity: 1;
	transform: translateY(0);
}

.fade-up:nth-child(2) {
	transition-delay: .2s;
}

/*==========================================
	header
==========================================*/

.site-header {
	width: 100%;
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	background-color: var(--color-white);
}

.header-left {
	flex: 0 0 auto;
	height: 100%;
	margin-left: 3%;
}

.header-left a {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.header-left a img:first-child {
	display: block;
	width: 100%;
	max-width: 250px;
}

.header-left a img:last-child {
	display: block;
	width: 100%;
	max-width: 70px;
}

.header-right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	height: 100%;
}

.header-right .global-nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}


.header-right ul {
	display: flex;
	height: 100%;
	justify-content: space-between;
	align-items: stretch;
}


.header-right ul li {
	height: 100%;
}


.header-right ul li a.mega-menu-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 18px;
	padding: 0 clamp(16px, 1.8vw, 25px);
	white-space: nowrap;
}

.header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 10px;
}


.header-right .header-contact {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 clamp(40px, 4vw, 66px);
	background: var(--gradient-blue-yoko);
	color: var(--color-white);
	white-space: nowrap;
}

@media screen and (max-width: 500px) {
	.header-left a {
		gap: 0;
	}
	.header-left a img:last-child {
		max-width: 40px;
	}
}



/*==========================================
	mega menu(子メニュー展開)
==========================================*/

.has-mega {
	position: static;
}

.mega-menu-trigger:hover {
	font-weight: 500;
	color: var(--color-blue);
	background: var(--color-light-blue);
}

.mega-menu {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	z-index: 2000;
	background: var(--color-light-blue);
	padding-top: 20px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: .3s;
}

.has-mega:hover .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega-inner {
	width: 87%;
	max-width: 1194px;
	margin: 70px auto 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.mega-title {
	width: 40%;
}

.mega-sub-title {
	font-size: 24px;
	line-height: 1;
}

.mega-main-title {
	font-weight: 400;
	padding-bottom: 29px;
}

.mega-sub-text {
	font-size: 14px;
	line-height: 1.8;
}

.mega-nav {
	width: 60%;
}

/*==========================================
	sp-menu
==========================================*/

/* 初期は閉じる */
.sp-menu {
	position: absolute;
	top: 80px;
	right: -100%;
	width: 100%;
	height: fit-content;
	background: #fff;
	transition: 0.3s ease;
	z-index: 2000;
	overflow-y: auto;
	padding-bottom: 50px;
}


/* 開いた状態 */
.sp-menu.open {
	right: 0;
}

/*ハンバーガーメニュー*/
.site-nav-sp {
	display: none;
	padding: 20px;
}

.hamburger {
	width: 30px;
	height: 24px;
	position: relative;
	border: none;
	background: none;
	cursor: pointer;
}

.hamburger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
	transition: 0.3s;
}

.hamburger span:nth-child(1) {
	top: 0;
}

.hamburger span:nth-child(2) {
	top: 10px;
}

.hamburger span:nth-child(3) {
	top: 20px;
}

/* 開いた時（×） */
.hamburger.active span:nth-child(1) {
	transform: rotate(45deg);
	top: 10px;
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg);
	top: 10px;
}

/*アコーディオン*/
.menu-content {
	max-height: 0;
	overflow: hidden;
	transition: 0.3s ease;
}

.menu-content.open {
	max-height: 1000px;
}

/*メニューデザイン*/

.menu-title {
	padding: 0 20px;
	background-color: var(--color-light-blue);
	border-bottom: 1px solid var(--color-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.menu-title a {
	display: block;
	width: 100%;
	font-size: 20px;
	font-weight: 600;
	color: var(--color-blue);
	padding: 20px;
}

.menu-title .accordion-toggle {
	display: block;
	text-align: right;
	color: var(--color-blue);
	border: none;
	background: none;
	font-size: 20px;
	line-height: 1;
	font-weight: 600;
	width: calc(100% - 170px);
	height: 30px;
	padding-right: 20px;
	cursor: pointer;
}

.menu-content li a {
	display: block;
	padding: 15px 20px 15px 40px;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-primary);
}


@media screen and (max-width: 1025px) {
	.header-right {
		display: none;
	}

	.site-nav-sp {
		display: block;
		position: relative;
		z-index: 1100;
	}
}

/*==========================================
	footer
==========================================*/
.footer-sp-menu {
	display: none;
}

.site-footer {
	position: relative;
	width: 100%;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.footer-inner {
	max-width: 1200px;
	/* 390 + 810 */
	margin: 0 auto;
	display: grid;
	grid-template-columns: 390px 1fr;
}

.footer-left {
	padding-top: 80px;
	background-color: var(--color-white);
	margin-right: 7%;
	margin-left: 7%;
}

.footer-right {
	padding-top: 80px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	background-color: var(--color-gray);
}

/* 右側の余白もグレーにする */
.site-footer::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: calc((100% - 1200px) / 2);
	height: 100%;
	background: var(--color-gray);
	z-index: -1;
}

.to-top {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background: var(--gradient-blue-yoko);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1200;
}

.to-top i {
	font-size: 30px;
	color: var(--color-white);
}

/*----------------------------------------
	フッターデザイン
----------------------------------------*/
/*左側フッター*/
.footer-logo img {
	display: block;
	width: 100%;
	max-width: 334px;
}

.footer-address {
	padding: 46px 0 30px 0;
}

.footer-address p,
.footer-address a {
	color: var(--color-blue);
	font-size: 20px;
	line-height: 1.8;
}

.footer-address .footer-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 16px;
}

.footer-address .footer-link-sitemap {
	margin-top: 30px;
}

.footer-bar-yoko {
	display: inline-block;
	width: 20px;
	height: 5px;
	background: var(--gradient-blue-yoko);
	margin-right: 10px;
}

.footer-copyright {
	padding: 30px 0;
	text-align: right;
}

/*右側フッター*/
.footer-right {
	padding-bottom: 120px;
}

.footer-nav-1 {
	margin-left: 50px;
}

.footer-nav-1 h4 a,
.footer-nav-2 h4 a,
.footer-nav-3 h4 a {
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--color-blue);
	margin-bottom: 16px;
}

.footer-nav-1 ul,
.footer-nav-2 ul,
.footer-nav-3 ul {
	position: relative;
	padding-left: 10px;
}

.footer-nav-1 ul {
	margin-bottom: 75px;
}

.footer-nav-1 ul::after,
.footer-nav-2 ul::after,
.footer-nav-3 ul::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--gradient-blue-tate);
}

.footer-nav-1 ul li a,
.footer-nav-2 ul li a,
.footer-nav-3 ul li a {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	padding: 4px 0;
	color: var(--color-blue);
}

.footer-nav-1-other h4 a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}


@media screen and (max-width: 1025px) {
	.footer-inner {
		grid-template-columns: 1fr;
	}


	.footer-right {
		display: none;
	}

	.site-footer::after {
		display: none;
	}

	.footer-sp-menu {
		display: block;
	}

	.footer-left {
		margin: 0 auto;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
	}

	.footer-logo {
		margin: 0 auto;
		padding: 0 20px;
	}

	.footer-copyright {
		text-align: center;
	}
}

/*==========================================
	front-page
==========================================*/
/*----------------------------------------
	top-mv(メインビジュアル)
----------------------------------------*/
.top-mv-wrapper {
	position: relative;
	z-index: 1000;
}

.top-mv-text h1 {
	position: absolute;
	top: 50%;
	right: 20%;
	z-index: 1100;
	transform: translate(50%, -50%);
	text-align: center;
	color: var(--color-white);
	font-size: clamp(40px, 5vw, 70px);
	text-align: left;
	font-weight: 600;
	line-height: 1.2;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	white-space: nowrap;
}

.top-mv .swiper-wrapper {
	padding-top: 0;
}

.top-mv img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 736px;
	object-fit: cover;
}



@media screen and (max-width: 768px) {
	.top-mv-text h1 {
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
	}

	.top-mv img {
		height: 750px;
		object-fit: cover;
	}
	
	.top-mv-img-1,
	.top-mv-img-2,
	.top-mv-img-5 {
		object-position: 30% 50%;
	}
	.top-mv-img-3 {
		object-position: 15% 50%;
	}
	.top-mv-img-4 {
		object-position: 71% 50%;
	}
}

/*----------------------------------------
	top-news(お知らせ)
----------------------------------------*/
.top-page .top-news {
	padding-top: 60px;
}

.top-page .top-news-inner {
	width: 94%;
	max-width: 1283px;
	margin-left: auto;
	display: flex;
	align-items: stretch;
}

.top-page .news-title {
	font-weight: bold;
	font-size: 32px;
	color: var(--color-blue);
	position: relative;
	padding-left: 30px;
	padding-right: 60px;
}

.top-page .news-title::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--gradient-blue-tate);
}

.top-page .news-item {
	display: flex;
	align-items: center;
	gap: 15px;
	text-decoration: none;
	width: 100%;
	background-color: var(--color-gray);
	padding: 20px;
}

.top-page .news-date {
	font-size: 14px;
	color: var(--color-blue);
	padding-left: 30px;
}

.top-page .news-category {
	min-width: 80px;
	text-align: center;
	background: var(--color-white);
	padding: 3px 8px;
	font-size: 12px;
	color: var(--color-blue);
}

.top-page .news-text {
	font-size: 14px;
	color: var(--color-primary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.top-page .news-link {
	text-align: center;
	font-size: 14px;
	color: var(--color-blue);
	font-weight: 600;
	width: 280px;
	background-color: var(--color-gray);
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 1000px) {
	.top-page .top-news-inner {
		flex-direction: column;
	}

	.top-page .news-title {
		font-size: 24px;
		padding-left: 20px;
		padding-right: 0;
		margin-right: auto;
	}

	.top-page .news-item {
		align-items: flex-start;
		flex-direction: column;
		width: 100%;
		height: fit-content;
		padding: 20px;
		margin-top: 10px;
	}

	.top-page .news-date {
		padding-left: 0;
	}

	.top-page .news-text {
		padding: 0;
	}

	.top-page .news-link {
		margin-left: auto;
		background-color: var(--color-white);
		padding: 10px;
		justify-content: flex-end;
	}
}

/*----------------------------------------
	top-news-instagram-btn(Instagramボタン)
----------------------------------------*/
.top-page .top-news-instagram-btn {
	width: 100%;
	max-width: 334px;
	background: var(--gradient-blue-yoko);
	margin-left: auto;
}

.top-page .top-news-instagram-btn a {
	position: relative;
	overflow: hidden;
	z-index: 0;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--color-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding: 15px 15px 15px 40px;
}

.top-page .top-news-instagram-btn a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	/* ← 最初は0 */
	height: 100%;
	background: var(--color-white);
	transition: width 0.3s ease;
	z-index: -1;
}

.top-page .top-news-instagram-btn a:hover {
	color: var(--color-blue);
	font-weight: 500;
}

/* hoverで横に広がる */
.top-page .top-news-instagram-btn a:hover::after {
	width: calc(100% - 6px);
}

.top-page .top-news-instagram-btn a:hover i {
	color: var(--color-blue);
}

/*----------------------------------------
	top-copy(コピー)
----------------------------------------*/
.top-page .top-copy {
	text-align: center;
	padding: 60px 0 120px 0;
	margin: 0 auto;
}

.top-page .top-copy-inner p {
	color: var(--color-blue);
}

/*----------------------------------------
	top-service(事業紹介)
----------------------------------------*/
.top-page .top-service {
	padding: 100px 0 120px 0;
	background: url(./img/top-service-bg.webp) no-repeat center center;
	background-size: cover;
}

.top-page .top-service-inner {
	position: relative;
	padding-top: 60px;
	padding-bottom: 80px;
	text-align: center;
}

.top-page .top-service-title-en {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	width: 80%;
	max-width: 354px;
}

.top-page .top-service-title {
	position: relative;
	z-index: 1000;
	color: var(--color-yellow);
	font-weight: 300;
}

/*----------------------------------------
	top-company(会社概要)
----------------------------------------*/
.top-page .top-company {
	padding: 100px 0 120px 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.top-page .top-company-left {
	width: 55%;
}

.top-page .top-company-left-1 {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.top-page .top-company-left-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
}

.top-page .top-company-left-bottom img {
	display: block;
	width: 49%;
	height: auto;
	object-fit: cover;
}

.top-page .top-company-right {
	width: 45%;
	position: relative;
	padding-left: 20px;
}

.top-page .top-company-title-en {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 80%;
	max-width: 354px;
}

.top-page .top-company-title {
	position: relative;
	z-index: 1000;
	text-align: right;
	color: var(--color-blue);
	font-weight: 500;
	padding-top: 40px;
	padding-bottom: 45px;
}

.top-page .top-company-text {
	width: 100%;
	max-width: 418px;
	margin-left: auto;
}

.top-page .top-company-btn {
	margin-top: 75px;
	margin-left: auto;
}

@media screen and (max-width: 1050px) {
	.top-page .top-company {
		flex-direction: column;
		align-items: center;
	}

	.top-page .top-company-left {
		width: 100%;
	}

	.top-page .top-company-right {
		width: 100%;
		padding-left: 0;
		padding-top: 40px;
	}

	.top-page .top-company-title-en {
		right: 50%;
		transform: translateX(50%);
		padding-top: 40px;
	}

	.top-page .top-company-title {
		text-align: center;
	}

	.top-page .top-company-text {
		margin-left: auto;
		margin-right: auto;
	}

	.top-page .top-company-btn {
		margin-top: 40px;
	}
}



/*----------------------------------------
	top-sustainability(私たちの取り組み)
----------------------------------------*/
.top-page .top-sustainability {
	padding: 100px 0 120px 0;
	background: url(./img/top-sustainability-bg.webp) no-repeat center center;
	background-size: cover;
}

.top-page .top-sustainability-inner {
	text-align: center;
	color: var(--color-white);
	padding: 0 20px;
}

.top-page .top-sustainability-title {
	font-size: 42px;
	font-weight: 600;
	padding-bottom: 45px;
}

.top-page .top-sustainability-content-text {
	padding-bottom: 20px;
}

.top-page .top-sustainability-content-item-1 {
	width: 100%;
	max-width: 552px;
	margin: 0 auto;
}

.top-page .top-sustainability-content-item-1 img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.top-page .top-sustainability-btn {
	margin: 0 auto;
	margin-top: 95px;
}

/*----------------------------------------
	top-instagram(インスタグラム)
----------------------------------------*/
.top-page .top-instagram {
	padding: 100px 0 120px 0;
}

.top-page .top-instagram-inner {
	text-align: center;
	margin: 0 auto;
}

.top-page .top-instagram-title {
	color: var(--color-blue);
	font-weight: 600;
	padding-bottom: 30px;
}

.top-instagram-content {
	max-width: 724px;
	margin: 0 auto;
}

/*----------------------------------------
	recruit-section-type-big(採用情報-大)
	CSSは冒頭「template-parts(テンプレートパーツ)」へ記載
----------------------------------------*/

/*==========================================
	お知らせ一覧(news-list)
==========================================*/

.news-list {
	padding: 100px 0 120px 0;
}

.news-list .news-items {
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: 80%;
	max-width: 875px;
	margin: 0 auto;
}

.news-list .news-item a {
	display: grid;
	grid-template-columns: 120px 120px 1fr;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: var(--color-gray);
}

.news-list .news-item a .news-date {
	text-align: center;
	color: var(--color-blue);
}

.news-list .news-item a .news-category {
	text-align: center;
	color: var(--color-blue);
	font-weight: 300;
	background-color: var(--color-white);
	padding: 3px 10px;
}

.news-list .news-item a .news-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media screen and (max-width: 768px) {
	.news-list .news-item a {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 10px;
	}

	.news-list .news-item a .news-date {
		grid-column: 1;
		text-align: left;
	}

	.news-list .news-item a .news-category {
		grid-column: 2;
		margin-left: auto;
	}

	.news-list .news-item a .news-title {
		grid-column: 1/-1;
	}
}

/*----------------------------------------
	ページネーション
----------------------------------------*/
.pagination {
	text-align: center;
	padding-bottom: 100px;
}

.pagination .page-numbers {
	display: inline-block;
	color: var(--color-blue);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	padding: 20px;
	background: var(--color-white);
}

.pagination .page-numbers.current {
	background: var(--color-gray);
}

@media screen and (max-width: 450px) {
	.pagination .page-numbers {
		padding: 15px;
	}
}

/*==========================================
	お知らせ詳細 single-news
==========================================*/


.single-news-page .single-news-hero {
	width: 100%;
	height: 296px;
}

.single-news-page .single-news-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right;
}

.single-news-page .single-news-content {
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
	padding: 100px 20px 120px 20px;
}

.single-news-page .single-news-title {
	position: relative;
	padding-bottom: 20px;
	font-size: 32px;
	line-height: 1.4;
	margin: 0 0 24px;
}

.single-news-page .single-news-title::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}



.single-news-page .single-news-content-date {
	font-size: 14px;
	color: var(--color-blue);
	padding: 10px 0;
}

.single-news-page .single-news-content-category {
	width: fit-content;
	padding: 5px;
	border: 1px solid var(--color-blue);
}

.single-news-page .single-news-content-category a {
	color: var(--color-blue);
	font-size: 14px;
}

.single-news-page .single-news-content-text {
	white-space: normal;
	overflow-wrap: break-word;
	/* ←これ重要 */
	word-break: break-word;
	padding-top: 30px;
}

.single-news-page .single-news-content-text h1 {
	padding-bottom: 0;
}

.single-news-page .single-news-content-text li {
	list-style: disc;
	margin-left: 20px;
}

.single-news-page .single-news-content-btn {
	margin-top: 30px;
	margin-left: auto;
}

.single-news-page .single-news-content-text h1 {
	font-size: 32px;
	line-height: 1.4;
	margin: 0 0 24px;
}

.single-news-page .single-news-content-text h2 {
	font-size: 26px;
	line-height: 1.5;
	margin: 48px 0 16px;
}


.single-news-page .single-news-content-text h3 {
	font-size: 22px;
	line-height: 1.5;
	margin: 40px 0 14px;
}

.single-news-page .single-news-content-text h4 {
	font-size: 18px;
	line-height: 1.6;
	margin: 32px 0 12px;
}

.single-news-page .single-news-content-text h5 {
	font-size: 16px;
	line-height: 1.6;
	margin: 24px 0 10px;
}

.single-news-page .single-news-content-text h6 {
	font-size: 14px;
	line-height: 1.6;
	margin: 20px 0 8px;
}

@media (max-width: 768px) {
	.single-news-page .single-news-content-text h1 {
		font-size: 26px;
	}

	.single-news-page .single-news-content-text h2 {
		font-size: 22px;
		margin-top: 36px;
	}

	.single-news-page .single-news-content-text h3 {
		font-size: 20px;
		margin-top: 32px;
	}

	.single-news-page .single-news-content-text h4 {
		font-size: 17px;
	}
}

/*----------------------------------------
	recruit-section-type-small(採用情報-小)
	CSSは冒頭「template-parts(テンプレートパーツ)」へ記載
----------------------------------------*/


/*==========================================
	企業情報
==========================================*/

.company-section {
	padding: 100px 0 120px 0;
}

/*----------------------------------------
親ページメニューは
共通項目　「各 親ページメニュー(parent-page-nav-grid)」に記載
----------------------------------------*/


/*==========================================
	代表あいさつ
==========================================*/

.greeting-copy {
	position: relative;
	padding-bottom: 30px;
	margin-bottom: 36px;
	font-size: 20px;
	font-weight: 500;
}

.greeting-copy::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.greeting-section-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 50px;
}

.greeting-section-inner-left {
	width: 100%;
}

.greeting-section-inner-left img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}


.greeting-section-inner-right {
	width: 100%;
}

.greeting-section-inner-right p {
	font-size: 16px;
	line-height: 2;
}

.greeting-section-inner-right img {
	display: block;
	margin-top: 20px;
	margin-left: auto;
}

.greeting-philosophy-btn {
	margin-top: 70px;
	margin-left: auto;
}

@media screen and (max-width: 768px) {

	.greeting-section-inner-left {
		width: 80%;
		margin: 0 auto;
	}

	.greeting-section-inner-right {
		width: 100%;
		padding: 0 20px;
	}
	
	.greeting-section-inner-right img {
		margin-top: 30px;
		width: 60%;
	}
}

@media screen and (max-width: 450px) {
	.greeting-section-inner-right img {
		width: 80%;
	}
}

/*==========================================
	経営理念
==========================================*/

.philosophy-section {
	padding: 100px 0 120px 0;
}

.company-childpage-flex-right-content-1 img,
.company-childpage-flex-right-content-3 img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	padding-bottom: 150px;
}

.company-childpage-flex-right-content-2 p {
	font-size: 16px;
	line-height: 2;
	padding-bottom: 150px;
}

.company-childpage-flex-right-content-2 p span {
	font-weight: 500;
	padding-bottom: 20px;
}

.company-childpage-flex-right-content-3 img {
	padding-top: 60px;
}

.philosophy-btn {
	margin-top: 70px;
	margin-left: auto;
}

@media screen and (max-width: 768px) {

	.company-childpage-flex-right-content-1 img,
	.company-childpage-flex-right-content-3 img {
		padding-bottom: 100px;
	}

	.company-childpage-flex-right-content-3 img {
		padding-top: 30px;
	}

	.philosophy-btn {
		margin-top: 30px;
	}
}

/*==========================================
	沿革
==========================================*/

.history-section {
	padding: 100px 0 120px 0;
}

.history-wrap {
	width: 100%;
	margin: 0 auto;
}

.history-table {
	width: 100%;
}

.history-table th {
	position: relative;
	width: 21%;
	max-width: 173px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-blue);
	padding: 10px 20px;
}

.history-table th::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.history-table tr:last-child th::after {
	display: none;
}

.history-table td {
	position: relative;
	border-bottom: 1px solid var(--color-blue);
	padding: 10px 20px;
}

.history-table tr:last-child td {
	border-bottom: none;
}

.history-btn {
	margin-top: 70px;
	margin-left: auto;
}


@media screen and (max-width: 768px) {
	.history-table tr {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.history-table th {
		width: 50%;
		white-space: nowrap;
		text-align: left;
	}

	.history-table td {
		width: 100%;
		padding: 20px 0 30px 0;
	}
}

/*==========================================
	会社概要
==========================================*/

.about-section {
	padding: 100px 0 120px 0;
}

.about-wrap {
	width: 100%;
	margin: 0 auto;
}

.about-table {
	width: 100%;
}

.about-table th {
	position: relative;
	width: 21%;
	max-width: 173px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-blue);
	padding: 15px 20px;
}

.about-table th::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.about-table tr:first-child th::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.about-table td {
	position: relative;
	border-bottom: 1px solid var(--color-blue);
	padding: 15px 20px;
}

.about-table tr:first-child td {
	border-top: 1px solid var(--color-blue);
}

.about-table-high-text {
	line-height: 1.8;
}


.about-table-big-text {
	font-weight: 500;
}

.about-btn {
	margin-top: 70px;
	margin-left: auto;
}

@media screen and (max-width: 768px) {
	.about-table tr {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.about-table th {
		width: 50%;
		white-space: nowrap;
		text-align: left;
	}

	.about-table tr:first-child th::before {
		display: none;
	}

	.about-table td {
		width: 100%;
		padding: 20px 0 30px 0;
	}

	.about-table tr:first-child td {
		border-top: none;
	}
}

/*==========================================
	事業所一覧
==========================================*/

.offices-section {
	padding: 100px 0 120px 0;
}

.offices-wrap {
	width: 100%;
	margin: 0 auto;
}

.offices-table {
	width: 100%;
}

.offices-table th {
	position: relative;
	width: 173px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-blue);
	padding: 15px 20px;
}

.offices-table th::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.offices-table tr:first-child th::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.offices-table td {
	position: relative;
	border-bottom: 1px solid var(--color-blue);
	padding: 15px 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.offices-table tr:first-child td {
	border-top: 1px solid var(--color-blue);
}


/*---アクセスマップボタン---*/
.offices-table-map-btn {
	width: 187px;
	background: var(--gradient-blue-yoko);
}

.offices-table-map-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	padding: 15px;
}

/*---アクセスマップボタン ここまで---*/


.offices-btn {
	margin-top: 70px;
	margin-left: auto;
}

@media screen and (max-width: 768px) {
	.offices-table tr {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.offices-table th {
		width: 50%;
		text-align: left;
		white-space: nowrap;
	}

	.offices-table tr:first-child th::before {
		display: none;
	}

	.offices-table td {
		width: 100%;
		padding: 20px 0 30px 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 30px;
	}

	.offices-table tr:first-child td {
		border-top: none;
	}
}

/*==========================================
	技術者一覧
==========================================*/

.engineers-section {
	padding: 100px 0 120px 0;
}

.engineers-list-wrap {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	margin: 0 auto;
}

.engineers-list-left-wrap {
	width: 50%;
}

.engineers-list-right-wrap {
	width: 50%;
}

.engineers-list-title {
	font-size: 20px;
	padding-bottom: 15px;
	padding-top: 40px;
}

.engineers-list-first-title {
	padding-top: 0;
}

.engineers-table {
	width: 100%;
	border-collapse: collapse;
}


.qualification-th {
	width: 76%;
	text-align: left;
	font-size: 16px;
	padding: 15px 20px;
	color: var(--color-blue);
	background-color: var(--color-gray);
}

.engineers-people-count-th {
	width: 24%;
	font-size: 16px;
	padding: 15px 20px;
	color: var(--color-blue);
	background-color: var(--color-gray);
}

.engineers-table {
	position: relative;
}

.engineers-table::before {
	content: "";
	position: absolute;
	left: 0;
	top: 53px;
	/* ← thの高さに合わせて調整 */
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
	pointer-events: none;
}

.engineers-table td {
	font-size: 16px;
	padding: 15px 20px;
	vertical-align: middle;
	border: 1px solid var(--color-gray);
}

.engineers-table td.qualification {
	width: 76%;
	text-align: left;
}

.engineers-table td.engineers-table-num {
	width: 24%;
	text-align: center;
}

.engineers-table tr:first-child td {
	border-top: none;
}

.engineers-table td.big-qualification {
	font-weight: 500;
}

.engineers-table td.small-qualification {
	padding-left: 35px;
}

.engineers-list-btn {
	margin-top: 70px;
	margin-left: auto;
}

@media screen and (max-width: 800px) {
	.engineers-list-wrap {
		flex-direction: column;
		gap: 40px;
	}

	.engineers-list-left-wrap {
		width: 100%;
	}

	.engineers-list-right-wrap {
		width: 100%;
	}

}

/*==========================================
	事業紹介 親ページ
	
	メインはテンプレートパーツで記載
	テンプレートパーツ：template-parts/service-section.php
	
	paddingなどは「企業情報 WordPressメニュー(company-childpage-flex)」
	と同じところに記載
==========================================*/
.service-section-text .service-section-text-p {
	text-align: center;
	color: var(--color-primary);
	padding-bottom: 0;
	padding-top: 120px;
}




/*==========================================
	事業紹介 子ページ 共通
==========================================*/

.service-copy {
	position: relative;
	padding-bottom: 30px;
	margin-bottom: 36px;
	font-size: 20px;
	font-weight: 500;
}

.service-copy::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
}

.service-text {
	width: 100%;
	padding-bottom: 30px;
}

.services-list {
	width: 100%;
	background-color: var(--color-gray);
	padding: 20px 17px;
}

.services-list-title {
	font-weight: 300;
	padding-bottom: 20px;
}

.services-list-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.services-list-inner p {
	background-color: var(--color-white);
	padding: 10px 15px;
	border: 1px solid var(--color-primary);
}

@media screen and (max-width: 768px) {
	.services-list-inner {
		grid-template-columns: 1fr;
	}
}

.service-imgs-section {
	width: 100%;
	padding-top: 30px;
}

.service-imgs-section-inner {
	width: 100%;
	display: grid;
	align-items: center;
	justify-content: center;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

.service-imgs-section-inner-div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.service-imgs-section-inner-div-text {
	font-size: 12px;
	padding-top: 5px;
}

.service-imgs-section-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-project-btn {
	max-width: 400px;
	margin-top: 70px;
	margin-left: auto;
}

@media screen and (max-width: 768px) {
	.service-imgs-section-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 480px) {
	.service-imgs-section-inner {
		grid-template-columns: 1fr;
	}
}

/*==========================================
	実績紹介
==========================================*/
.project-section {
	padding: 100px 0 120px 0;
}

.project-copy-section-text {
	text-align: center;
}

.project-section-table-header {
	height: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-top: 100px;
	padding-bottom: 20px;
}


.project-section-table-title {
	width: 40%;
	color: var(--color-blue);
	line-height: 1.2;
	white-space: nowrap;
}

.project-section-table-title .h3-title-tate-gradient-en {
	font-size: 16px;
}

.project-section-img {
	width: 60%;
	height: 200px;
}

.project-section-img img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

@media screen and (max-width: 768px) {
	.project-section-table-header {
		flex-direction: column;
	}

	.project-section-img {
		width: 100%;
	}
}

.project-section-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.project-table {
	width: 100%;
	table-layout: fixed;
	min-width: 900px;
	border-collapse: collapse;
}


.project-table th {
	font-size: 16px;
	padding: 15px 20px;
	line-height: 1.6;
	vertical-align: middle;
	color: var(--color-blue);
	background-color: var(--color-gray);
}

.project-table {
	position: relative; 
}
.project-table::before {
	content: "";
	position: absolute;
	left: 0;
	top: 53px;
	width: 100%;
	height: 3px;
	background: var(--gradient-blue-yoko);
	pointer-events: none;
}

.project-table tbody td {
	font-size: 16px;
	padding: 15px 20px;
	line-height: 1.6;
	vertical-align: middle;
	border: 1px solid var(--color-gray);
}

.project-table tbody td:first-child {
	text-align: center;
}

.project-table tbody tr:first-child td {
	border-top: none;
}

.project-table th.project-table-year-th {
	width: 20%;
}

.project-table th.project-table-client-th {
	width: 22%;
}

.project-table th.project-table-project-th {
	width: 33%;
}

.project-table th.project-table-intro-th {
	width: 25%;
}


/*==========================================
	採用情報
==========================================*/

.recruit-page {
	overflow-x: hidden;
}

.recruit-copy-section {
	padding-top: 120px;
	width: 100%;
}


.recruit-copy-bg {
	position: absolute;
	z-index: 1000;
	display: block;
	top: -280%;
	right: -150px;
	width: 30%;
	min-width: 200px;
	max-width: 376.25px;
	height: auto;
}

.recruit-copy {
	position: relative;
	z-index: 1100;
	font-weight: 500;
	color: var(--color-blue);
}

@media screen and (max-width: 1200px) {
	.recruit-copy-bg {
		top: -200px;
		right: -50px;
	}
}

@media screen and (max-width: 768px) {
	.recruit-copy {
		font-size: 24px;
		letter-spacing: normal;
		white-space: nowrap;
	}

	.recruit-copy-bg {
		top: -140px;
		right: -20px;
	}
}

@media screen and (max-width: 420px) {
	.recruit-copy-bg {
		top: -140px;
		right: -100px;
	}
}

/*----------------------------------------
	代表メッセージ
----------------------------------------*/

.recruit-message-link-section {
	padding: 100px 0 120px 0;
}

.recruit-message-link-section-inner {
	width: 70%;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.recruit-message-link-section-inner-left {
	width: calc(100% - 250px);
	padding-right: 50px;
}

.recruit-message-link-section-inner-left-text {
	text-align: justify;
	line-height: 2;
	padding-bottom: 50px;
}

.recruit-message-link-section-inner-right {
	width: 250px;
}

.recruit-message-link-section-inner-right img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media screen and (max-width: 1000px) {
	.recruit-message-link-section-inner {
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.recruit-message-link-section-inner {
		flex-direction: column-reverse;
		gap: 50px;
	}

	.recruit-message-link-section-inner-left {
		width: 100%;
		padding-right: 0;
	}

	.recruit-message-link-section-inner-right {
		margin: 0 auto;
	}

	.recruit-message-link-btn {
		margin-left: auto;
	}

}

/*----------------------------------------
	スローガン
----------------------------------------*/

.recruit-slogan-section {
	padding-top: 100px;
}

.recruit-slogan-section-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.recruit-slogan-section-inner-bg-1 {
	position: absolute;
	top: 50px;
	left: -88px;
	width: 300px;
	height: auto;
	object-fit: contain;
}

.recruit-slogan-section-inner-left {
	width: 22%;
	align-self: flex-end;
}

.recruit-slogan-left-img-pc {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.recruit-slogan-left-img-sp {
	display: none;
}


.recruit-slogan-section-inner-center {
	width: 50%;
	padding: 115px 0;
}

.recruit-slogan-section-inner-center img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.recruit-slogan-section-inner-center-text {
	line-height: 2;
	padding: 50px 20px 0 20px;
}

.recruit-slogan-section-inner-right {
	width: 22%;
	align-self: flex-start;
}

.recruit-slogan-right-img-pc {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.recruit-slogan-right-img-sp {
	display: none;
}


.recruit-slogan-section-inner-bg-2 {
	position: absolute;
	bottom: 50px;
	right: -88px;
	width: 300px;
	height: auto;
	object-fit: contain;
}

@media screen and (max-width: 1200px) {

	.recruit-slogan-section-inner-left img,
	.recruit-slogan-section-inner-right img {
		padding: 100px 0;
	}
}

@media screen and (max-width: 768px) {
	.recruit-slogan-section-inner {
		flex-direction: column;
	}

	.recruit-slogan-section-inner-left,
	.recruit-slogan-section-inner-right {
		width: 100%;
	}

	.recruit-slogan-left-img-pc,
	.recruit-slogan-right-img-pc {
		display: none;
	}

	.recruit-slogan-section-inner-right,
	.recruit-slogan-section-inner-left {
		width: 100%;
	}

	.recruit-slogan-section-inner-center-text {
		padding: 50px 0 0 0;
	}

	.recruit-slogan-left-img-sp,
	.recruit-slogan-right-img-sp {
		display: block;
		width: 100%;
		height: auto;
		object-position: right center;
	}

	.recruit-slogan-section-inner-center {
		width: 100%;
		padding: 0 20px;
	}

	.recruit-slogan-section-inner-bg-1 {
		top: 200px;
		left: -40px;
		width: 250px;
	}

	.recruit-slogan-section-inner-bg-2 {
		bottom: 30px;
		left: -40px;
		width: 250px;
	}
}

@media screen and (max-width: 520px) {
	.recruit-slogan-section-inner-bg-1 {
		top: 100px;
		left: -40px;
		width: 200px;
	}

	.recruit-slogan-section-inner-right img,
	.recruit-slogan-section-inner-left img {
		padding-top: 50px;
	}

	.recruit-slogan-section-inner-bg-2 {
		bottom: 30px;
		left: -40px;
		width: 200px;
	}
}

/*----------------------------------------
	数字でみる
----------------------------------------*/

.recruit-know-section {
	padding: 100px 0 120px 0;
	position: relative;
}

.recruit-know-section-bg {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 80%;
	max-height: 415px;
	background-color: var(--color-light-blue);
}

.recruit-know-section-inner {
	position: relative;
	z-index: 1000;
}

.recruit-know-section-inner-bg-1 {
	position: absolute;
	z-index: 1;
	bottom: 80px;
	left: -112px;
	width: 22%;
}

.recruit-know-section-inner-bg-2 {
	position: absolute;
	z-index: 1;
	top: 100px;
	right: -80px;
	width: 24%;
}

.recruit-know-section-title {
	position: absolute;
	z-index: 1100;
	top: 130px;
	left: 0;
	font-size: 60px;
	font-weight: 500;
	line-height: 1;
	color: var(--color-blue);
}

.recruit-know-section-number-img {
	position: relative;
	z-index: 1000;
	width: 100%;
}

.recruit-know-section-number-img img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.recruit-know-section-btn {
	position: relative;
	z-index: 1100;
	display: block;
	margin-left: auto;
}


@media screen and (max-width: 1100px) {
	.recruit-know-section-title {
		top: -50px;
	}
}

@media screen and (max-width: 1000px) {
	.recruit-know-section-btn {
		margin-top: 30px;
	}
}

@media screen and (max-width: 900px) {
	.recruit-know-section-title {
		top: -50px;
	}
}

@media screen and (max-width: 600px) {
	.recruit-know-section-title {
		font-size: 40px;
		top: -50px;
	}

	.recruit-know-section-inner-bg-1 {
		bottom: 40px;
		left: -11px;
	}

	.recruit-know-section-inner-bg-2 {
		top: 100px;
		right: -40px;
	}
}

@media screen and (max-width: 400px) {
	.recruit-know-section-title {
		font-size: 30px;
		top: -50px;
	}

	.recruit-know-section-inner-bg-1 {
		bottom: 80px;
		left: -40px;
	}

	.recruit-know-section-inner-bg-2 {
		top: 50px;
		right: -40px;
	}
}



/*==========================================
	数字で見るエンタ
==========================================*/

.page-header-wrapper-bottom {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 400px;
	margin: 0 auto;
	margin-top: -100px;
}

.page-header-wrapper .know-hero-bg {
	min-height: 160px;
}

@media screen and (max-width: 1450px) {
	.page-header-wrapper-bottom {
		margin-top: -50px;
		height: 300px;
	}
}

@media screen and (max-width: 1000px) {
	.page-header-wrapper-bottom {
		margin-top: -50px;
		height: 200px;
	}
}

@media screen and (max-width: 600px) {
	.page-header-wrapper-bottom {
		margin-top: -100px;
		height: 300px;
	}
}

.page-header-wrapper-bottom-img-1 {
	width: 100%;
	height: 100%;
}

.page-header-wrapper-bottom-img-1 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 20% center;
}

.page-header-wrapper-bottom-img-2 {
	width: 100%;
	height: 100%;
}

.page-header-wrapper-bottom-img-2 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.know-page {
	overflow-x: hidden;
}

.know-page-header-img {
	position: absolute;
	z-index: 1000;
	bottom: -200px;
	right: 0;
	width: 350px;
	height: auto;
	object-fit: contain;
}

.know-page-header-img img {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1200px) {
	.know-page-header-img {
		width: 200px;
		bottom: -100px;
	}
}

@media screen and (max-width: 600px) {
	.know-page-header-img {
		width: 150px;
		bottom: -100px;
	}
}

/*----------------------------------------
	数字で見るエンタ コピー文
----------------------------------------*/

.know-page-inner {
	padding: 100px 0 120px 0;
}

.know-page-inner-title {
	text-align: center;
	font-size: 60px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-blue);
}

.know-page-inner-title-year {
	text-align: center;
	font-size: 32px;
	font-weight: 600;
	color: var(--color-primary);
}

@media screen and (max-width: 600px) {
	.know-page-inner-title {
		font-size: 40px;
	}

	.know-page-inner-title-year {
		font-size: 24px;
	}
}

/*----------------------------------------
	数字で見るエンタ カウント数字
----------------------------------------*/

.know-page-inner-content {
	padding: 20px 0 120px 0;
}

.know-page-inner-content-text {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 auto;
	width: fit-content;
}

/*横並び　2コンテンツ はじめ*/
.know-page-inner-content-item-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.know-page-inner-content-item-top-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 50px 0;
}

.know-count-label {
	position: relative;
	padding-right: 80px;
	/* 線の長さ分 */

	font-size: 33px;
	font-weight: 500;
	color: var(--color-primary);
	line-height: 1;
}

.know-count-unit {
	align-self: flex-end;
	font-size: 33px;
	font-weight: 500;
	color: var(--color-primary);
	line-height: 1;
	padding-bottom: 10px;
}

.know-count-man,
.know-count-woman {
	position: relative;
}

.know-count-man::before {
	content: "男性";
	position: absolute;
	top: -15px;
	left: 0;
	width: 100%;
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 300;
}

.know-count-woman::before {
	content: "女性";
	position: absolute;
	top: -15px;
	left: 0;
	width: 100%;
	color: var(--color-primary);
	font-size: 20px;
	font-weight: 300;
}

.know-count-label::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	/* 線の長さ */
	height: 2px;
	animation: lineGrow 1s ease-out forwards;
	background: var(--gradient-blue-yoko);
	transform: translateY(-50%);
}

@keyframes lineGrow {
	to {
		width: 70px;
	}
}

.know-page-inner .number {
	font-size: 80px;
	font-weight: 600;
	color: var(--color-blue);
	padding-left: 10px;
	line-height: 1;
}

@media screen and (max-width: 1120px) {
	.know-page-inner-content-item-top {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 560px) {
	.know-page-inner-content-item-top-item {
		position: relative;
		flex-direction: column;
		width: fit-content;
		margin: 0 auto;
		padding: 20px 0;
	}

	.know-count-man-wrapper,
	.know-count-woman-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.know-count-man-wrapper {
		padding-bottom: 20px;
	}

	.know-count-woman-wrapper {
		justify-content: flex-start;
	}

	.know-count-label {
		padding-bottom: 20px;
	}


	.know-count-unit {
		position: absolute;
		bottom: 0;
		right: -30px;
	}

	.know-count-unit-woman,
	.know-count-unit-man {
		right: -40px;
	}
}

/*横並び　2コンテンツ おわり*/

/*横並び　3コンテンツ はじめ(カウントの青数字 ↑ と共通クラス名)*/
.know-page-inner-content-item-bottom {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 35px 20px;
	padding-top: 100px;
}

.know-page-inner-content-item-bottom-item {
	text-align: center;
	width: 100%;
}

.know-count-bottom-label {
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 33px;
	font-weight: 500;
	color: var(--color-blue);
	line-height: 1;
	padding-bottom: 20px;
}

.know-count-bottom-label::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	animation: lineBottomGrow 1s ease-out forwards;
	background: var(--gradient-blue-yoko);
}

@keyframes lineBottomGrow {
	to {
		width: 100%;
	}
}

.know-count-bottom-unit {
	font-size: 33px;
	font-weight: 500;
	color: var(--color-primary);
	line-height: 1;
	padding-bottom: 10px;
}

.know-count-bottom-unit-small {
	font-size: 20px;
	font-weight: 300;
	color: var(--color-primary);
	line-height: 1;
	padding-left: 10px;
}

.know-count-bottom-unit-square {
	display: inline-block;
	font-size: 20px;
	font-weight: 400;
	color: var(--color-blue);
	line-height: 1;
	margin-left: 10px;
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px solid var(--color-blue);
}

@media screen and (max-width: 1199px) {
	.know-page-inner-content-item-bottom {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 768px) {
	.know-page-inner-content-item-bottom {
		grid-template-columns: 1fr;
		width: 90%;
		gap: 80px;
		margin: 0 auto;
	}
}

/*横並び　3コンテンツ おわり*/

/*----------------------------------------
	2025新設本社 セクション
----------------------------------------*/

.know-page-renew {
	position: relative;
	padding-top: 100px;
}

.know-page-renew-bg-1 {
	position: absolute;
	z-index: 1000;
	top: -40px;
	left: -129px;
	width: 252px;
	object-fit: contain;
}

.know-page-renew-yellow-line {
	background-color: var(--color-yellow);
	text-align: center;
}

.know-page-renew-yellow-line p {
	font-size: 33px;
	font-weight: 500;
	color: var(--color-blue);
	line-height: 1.2;
	padding: 30px 20px;
}

@media screen and (max-width: 768px) {
	.know-page-renew {
		padding-top: 0;
	}

	.know-page-renew-yellow-line p {
		font-size: 30px;
	}
}

.know-page-renew-content {
	position: relative;
	z-index: 500;
	width: 100%;
	height: 100%;
}

.know-page-renew-content img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.renew-track {
	position: absolute;
	z-index: 1000;
	bottom: 2.5%;
	width: 100%;
	overflow: hidden;
	display: flex;
}

.renew-track p {
	white-space: nowrap;
	font-size: 240px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
	animation: scrollText 20s linear infinite;
}

@keyframes scrollText {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@media screen and (min-width: 2000px) {
	.know-page-renew-bg-1 {
		width: 350px;
		left: -129px;
		top: -80px;
	}
}

@media screen and (max-width: 1100px) {
	.renew-track p {
		font-size: 200px;
	}
}

@media screen and (max-width: 900px) {
	.renew-track p {
		font-size: 160px;
	}
}

@media screen and (max-width: 768px) {
	.know-page-renew-bg-1 {
		width: 200px;
		left: -80px;
		top: -100px;
	}

	.know-page-renew-content {
		height: 600px;
	}

	.know-page-renew-content img {
		height: 100%;
		object-fit: cover;
		object-position: 70% center;
	}
}

@media screen and (max-width: 600px) {
	.know-page-renew-bg-1 {
		width: 150px;
		left: -60px;
		top: -120px;
	}

	.renew-track p {
		font-size: 120px;
	}
}

/*----------------------------------------
	資格者数
----------------------------------------*/

.know-page-qualification {
	padding: 100px 0 120px 0;
	background-color: var(--color-light-blue);
}

.know-page-qualification-h3-small {
	font-size: 16px;
	font-weight: 300;
	color: var(--color-primary);
	line-height: 1;
	padding-left: 10px;
}

.know-page-qualification-content {
	display: grid;
	align-items: stretch;
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
	gap: 35px 20px;
	padding-top: 100px;
}

.know-page-qualification-content-item {
	width: 185px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background-color: var(--color-white);
	text-align: center;
	padding: 8px 10px 14px 10px;
}

.know-page-qualification-content-item-img {
	width: 120px;
	height: 120px;
	object-fit: contain;
	margin: 0 auto;
	transition: transform 1s ease;
}

.know-page-qualification-content-item-img.is-active {
	transform: rotate(360deg);
	transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.know-page-qualification-content-item-title {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-blue);
	line-height: 1;
	padding: 20px 0;
}

.know-page-qualification-content-item-text {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
}

.know-page-qualification .number {
	font-size: 60px;
	font-weight: 600;
	color: var(--color-blue);
	line-height: 1;
	padding-left: 10px;
}

.know-page-qualification-item-unit {
	font-size: 24px;
	font-weight: 600;
	color: var(--color-blue);
	line-height: 1;
	padding-left: 10px;
}

/*----------------------------------------
	働きやすい環境への取り組み
----------------------------------------*/

.know-page-environment {
	padding: 100px 0 120px 0;
}

.know-page-environment-content-item-top {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-right: auto;
	padding-top: 100px;
	padding-bottom: 40px;
}

.know-page-environment-content-item-top img {
	display: block;
	width: 50%;
	height: auto;
	object-fit: contain;
}

.know-page-environment-content-item-top p {
	width: 50%;
	padding: 20px
}

.know-page-environment-content-item-bottom {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.know-page-environment-content-item-bottom img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media screen and (max-width: 768px) {
	.know-page-environment-content-item-top {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 50px;
		padding-bottom: 20px;
	}

	.know-page-environment-content-item-top img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.know-page-environment-content-item-top p {
		width: 100%;
		padding: 20px;
	}

	.know-page-environment-content-item-bottom {
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
	}

	.know-page-environment-content-item-bottom img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

}

@media screen and (max-width: 400px) {
	.know-page-environment-content-item-top p {
		padding: 10px;
	}
}


/*==========================================
	インタビュー固定ページ
==========================================*/

.interview-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16/6;
	min-height: 400px;
	max-height: 500px;
}

.interview-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-interview-01-hero img {
	object-position: 70% center;
}

.page-interview-02-hero img {
	object-position: 67% center;
}

.page-interview-03-hero img {
	object-position: 60% center;
}

.page-interview-04-hero img {
	object-position: 55% center;
}

.page-interview-05-hero img {
	object-position: 40% center;
}

.interview-hero-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: fit-content;
	height: fit-content;
	padding: 20px;
	background-color: rgba(255, 255, 255, 0.5);
	color: var(--color-blue);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.page-interview-05-hero-content {
	position: absolute;
	bottom: 0;
	right: 0;
	left: auto;
}


.interview-hero-content h1 {
	padding-bottom: 10px;
}

@media screen and (max-width: 768px) {
	.interview-hero-content h1 {
		font-size: 24px;
	}

	.interview-hero-content h3 {
		font-size: 16px;
	}

	.interview-hero-content h2 {
		font-size: 16px;
	}

}

@media screen and (max-width: 400px) {
	.interview-hero-content {
		padding: 10px;
	}
}

.page-interview-h3-title {
	color: var(--color-blue);
	margin-bottom: 35px;
}

.page-interview-h4-title {
	padding-bottom: 18px;
}

.page-interview-contents-1 {
	padding: 145px 0 80px 0;
}

.page-interview-contents-1-p-1 {
	padding-bottom: 35px;
}

.page-interview-contents-1-img {
	width: 100%;
	height: auto;
	background-color: var(--color-light-blue);
}

.page-interview-contents-1-img img {
	display: block;
	width: 100%;
	height: 323px;
	margin: 0 auto;
	object-fit: contain;
}

.page-interview-contents-2,
.page-interview-contents-3 {
	padding: 35px 0 80px 0;
}

.page-interview-contents-2-img {
	width: 100%;
	aspect-ratio: 16 / 6;
	min-height: 200px;
	max-height: 323px;
}

.page-interview-contents-2-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-interview-01-contents-2-img img {
	object-position: 70% center;
}

.page-interview-02-contents-2-img img {
	object-position: right;
}

.page-interview-05-contents-2-img img {
	object-position: 80% center;
}

.page-interview-contents-schedule {
	background-color: var(--color-light-blue);
	padding: 125px 0 170px 0;
	margin-top: 40px;
}

.page-interview-contents-schedule-wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
}

.page-interview-contents-schedule-left {
	width: 40%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background-color: var(--color-white);
	padding: 50px 45px;
}

.page-interview-contents-schedule-title {
	font-size: 24px;
	font-weight: 600;
	color: var(--color-blue);
	line-height: 1;
	padding-bottom: 25px;
}

.page-interview-contents-schedule-left p {
	padding-bottom: 35px;
}

.page-interview-contents-schedule-left ul {
	position: relative;
	padding-left: 21px;
}

.page-interview-contents-schedule-left ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background: var(--gradient-blue-tate);
}

.page-interview-contents-schedule-left ul li {
	padding-bottom: 10px;
	font-weight: 500;
}

.page-interview-contents-schedule-right {
	width: 40%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	background-color: var(--color-white);
	padding: 50px 45px;
}

.page-interview-contents-schedule-right img {
	width: 100%;
	height: auto;
	object-fit: contain;
	padding-bottom: 25px;
}

@media screen and (max-width: 1000px) {
	.page-interview-contents-schedule-wrapper {
		flex-direction: column;
		gap: 40px;
	}

	.page-interview-contents-schedule-left,
	.page-interview-contents-schedule-right {
		width: 100%;
	}

	.page-interview-contents-schedule-left {
		padding: 30px 20px;
	}

	.page-interview-contents-schedule-right {
		padding: 30px 20px;
	}
}

/*==========================================
	募集要項　3種共通(新卒採用、中途採用、インターンシップ)
==========================================*/

.page-recruit-newgraduate-hero {
	position: relative;
	width: 100%;
	height: 300px;
	background-color: var(--color-recruit-green);
}

.page-recruit-career-hero {
	position: relative;
	width: 100%;
	height: 300px;
	background-color: var(--color-recruit-pink);
}

.page-recruit-internship-hero {
	position: relative;
	width: 100%;
	height: 300px;
	background-color: var(--color-recruit-blue);
}


.page-recruit-detail-hero-wrapper {
	position: relative;
	height: 100%;
}

.page-recruit-detail-hero-inner {
	position: absolute;
	top: 70px;
	left: 0;
	color: var(--color-white);
	width: fit-content;
}

.page-recruit-detail-hero-inner p {
	font-size: 24px;
	font-weight: 500;
	padding-bottom: 10px;
}

.page-recruit-detail-hero-inner h1 {
	font-size: 36px;
	font-weight: 500;
	padding-top: 20px;
	border-top: 3px solid var(--color-white);
}

/*----------------------------------------
	募集要項 ナビゲーション
----------------------------------------*/

.page-recruit-detail-nav {
	padding: 40px 0 25px 0;
}

.page-recruit-detail-nav-title {
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 10px;
}

.page-recruit-detail-nav-newgraduate-title {
	color: var(--color-recruit-green);
}

.page-recruit-detail-nav-carrier-title {
	color: var(--color-recruit-pink);
}

.page-recruit-detail-nav ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.page-recruit-detail-nav ul li a {
	max-width: 280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
}

.page-recruit-detail-nav-newgraduate ul li a {
	background-color: var(--color-recruit-green);
}

.page-recruit-detail-nav-carrier ul li a {
	background-color: var(--color-recruit-pink);
}

.page-recruit-detail-nav ul li a p {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-white);
}

.page-recruit-detail-nav ul li a i {
	font-size: 16px;
	color: var(--color-white);
}

/*----------------------------------------
	募集要項 内容(table)
----------------------------------------*/

.recruit-detail-contents-inner-text {
	text-align: center;
	padding-bottom: 30px;
}

.recruit-detail-contents-inner-text-internship {
	padding-top: 40px;
}

.recruit-detail-contents-item-h3 {
	padding-left: 16px;
	line-height: 1.2;
	padding-bottom: 3px;
}

.recruit-detail-contents-item-h3-newgraduate {
	color: var(--color-recruit-green);
	border-left: 3px solid var(--color-recruit-green);
}

.recruit-detail-contents-item-h3-carrier {
	color: var(--color-recruit-pink);
	border-left: 3px solid var(--color-recruit-pink);
}

.recruit-detail-contents-item-h3-internship {
	color: var(--color-recruit-blue);
	border-left: 3px solid var(--color-recruit-blue);
}

.recruit-detail-contents-item-table-wrapper {
	padding: 60px 0px;
}

.recruit-detail-contents-item-table {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	border-collapse: collapse;
}

.recruit-detail-contents-item-table th {
	width: 155px;
	padding: 20px 0;
	text-align: left;
	border-bottom: 1px solid var(--color-recruit-green);
}

.recruit-detail-contents-item-table-carrier th {
	border-bottom: 1px solid var(--color-recruit-pink);
}

.recruit-detail-contents-item-table-internship th {
	border-bottom: 1px solid var(--color-recruit-blue);
}

.recruit-detail-contents-item-table td {
	padding-left: 25px;
	padding: 20px 0;
	text-align: left;
	border-bottom: 1px solid var(--color-recruit-green);
}

.recruit-detail-contents-item-table-carrier td {
	border-bottom: 1px solid var(--color-recruit-pink);
}

.recruit-detail-contents-item-table-internship td {
	border-bottom: 1px solid var(--color-recruit-blue);
}

@media screen and (max-width: 768px) {

	.recruit-detail-contents-item-table tr {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.recruit-detail-contents-item-table th {
		width: 100%;
		border-bottom: none;
		padding-top: 40px;
		padding-bottom: 0;
	}

	.recruit-detail-contents-item-table td {
		width: 100%;
	}
}

/*----------------------------------------
	募集要項 新卒採用 採用フロー
----------------------------------------*/

.recruit-newgraduate-recruit-flow-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding-bottom: 100px;
}

.recruit-newgraduate-recruit-flow-wrapper img {
	width: 89px;
	height: 89px;
	object-fit: contain;
}

.recruit-newgraduate-recruit-flow-wrapper i {
	font-size: 20px;
	color: var(--color-recruit-green);
}

@media screen and (max-width: 768px) {
	.recruit-newgraduate-recruit-flow-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	.recruit-newgraduate-recruit-flow-wrapper i {
		transform: rotate(90deg);
	}
}

/*----------------------------------------
	募集要項 中途採用 採用フロー
----------------------------------------*/
.recruit-carrier-recruit-flow-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding-bottom: 100px;
}

.recruit-carrier-recruit-flow-wrapper img {
	width: 89px;
	height: 89px;
	object-fit: contain;
}

.recruit-carrier-recruit-flow-wrapper i {
	font-size: 20px;
	color: var(--color-recruit-pink);
}

@media screen and (max-width: 768px) {
	.recruit-carrier-recruit-flow-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	.recruit-carrier-recruit-flow-wrapper i {
		transform: rotate(90deg);
	}
}

.recruit-detail-contents-item-internship-text {
	text-align: center;
	padding-bottom: 30px;
}

/*----------------------------------------
	募集要項 インターンシップ 採用フロー
----------------------------------------*/
.recruit-internship-recruit-flow-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding-bottom: 100px;
}

.recruit-internship-recruit-flow-wrapper img {
	width: 89px;
	height: 89px;
	object-fit: contain;
}

.recruit-internship-recruit-flow-wrapper i {
	font-size: 20px;
	color: var(--color-recruit-blue);
}

@media screen and (max-width: 768px) {
	.recruit-internship-recruit-flow-wrapper {
		flex-direction: column;
		gap: 10px;
	}

	.recruit-internship-recruit-flow-wrapper i {
		transform: rotate(90deg);
	}
}

/*----------------------------------------
	募集要項 3種共通 エントリーボタン
----------------------------------------*/

.page-recruit-detail-contact {
	padding: 100px 0 120px 0;
	background-color: var(--color-gray);
}

.page-recruit-detail-contact-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-recruit-detail-contact-inner-left {
	width: 50%;
}

.page-recruit-detail-contact-inner-right {
	width: 50%;
}

/*フォームリンクボタン*/
.recruit-detail-button-newgraduate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 334px;
	margin: 0 auto;
	color: var(--color-white);
	background-color: var(--color-recruit-green);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding: 30px 40px;
}

.recruit-detail-button-carrier {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 334px;
	margin: 0 auto;
	color: var(--color-white);
	background-color: var(--color-recruit-pink);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding: 30px 40px;
}

.recruit-detail-button-internship {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 334px;
	margin: 0 auto;
	color: var(--color-white);
	background-color: var(--color-recruit-blue);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding: 30px 40px;
}

.recruit-detail-button i {
	display: block;
	font-size: 30px;
	color: var(--color-white);
}

.recruit-detail-button .recruit-detail-button-text {
	color: var(--color-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 0;
}

.recruit-detail-button .recruit-detail-button-small {
	display: inline-block;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	padding-bottom: 5px;
}

/*電話で応募ボタン*/
.recruit-detail-tel-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 334px;
	margin: 0 auto;
	color: var(--color-white);
	background: var(--color-blue);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding: 30px 40px;
}

.recruit-detail-tel-button .recruit-detail-tel-button-text {
	color: var(--color-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 0;
}

.recruit-detail-tel-button i {
	display: block;
	font-size: 30px;
	color: var(--color-white);
}

@media screen and (max-width: 768px) {
	.page-recruit-detail-contact-inner {
		flex-direction: column;
		gap: 40px;
	}

	.page-recruit-detail-contact-inner-left {
		width: 100%;
	}

	.page-recruit-detail-contact-inner-right {
		width: 100%;
	}
}

/*==========================================
	代表メッセージ
==========================================*/

.page-message-section-copy {
	padding: 100px 0;
}

.page-message-copy {
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-blue);
}

@media screen and (max-width: 768px) {
	.page-message-section-copy {
		padding: 50px 0;
	}

	.page-message-copy {
		font-size: 25px;
	}

}

/*----------------------------------------
	代表メッセージ アイテム-1
----------------------------------------*/

.message {
	background-color: var(--color-light-blue);
	padding: 100px 0;
}

.message-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	padding-bottom: 90px;
}

.message-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* テキストボックス */
.message-content {
	align-self: flex-end;
	background: #fff;
	padding: 30px;
	margin-left: -80px;
	/* ←これで重なり */
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.message-content-3 {
	align-self: center;
}


/* 役職＋名前 */
.message-ceo {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding-bottom: 10px;
}

.message-ceo span {
	font-weight: 500;
}

/* 逆方向き 2項目目 */
.message-item.reverse {
	direction: rtl;
}

.message-item.reverse * {
	direction: ltr;
}

.message-item.reverse .message-content {
	margin-left: 0;
	margin-right: -80px;
	align-self: center;
}

.message-text-Q {
	font-weight: 500;
	line-height: 1.5;
	font-size: 18px;
	padding-top: 18px;
	color: var(--color-blue);
}

.message-text-A {
	line-height: 1.5;
	padding-top: 16px;
}

@media screen and (max-width: 1000px) {
	.message {
		padding: 50px 0;
	}

	.message-item {
		grid-template-columns: 1fr;
	}

	.message-img {
		order: 1;
	}

	.message-content {
		order: 2;
		margin-left: 0;
	}

	.message-item.reverse .message-content {
		margin-right: 0;
	}
}

/*----------------------------------------
	橋の写真
----------------------------------------*/

.message-item-bridge img {
	width: 100%;
	height: auto;
	object-fit: contain;
	padding-bottom: 100px;
}

/*==========================================
	お問合せフォーム
　3種類の採用エントリーフォーム　共通
==========================================*/

.newgraduate-form-copy,
.career-form-copy,
.internship-form-copy,
.contact-form-copy {
	padding: 100px 0 50px 0;
}

.newgraduate-form-copy p,
.career-form-copy p,
.internship-form-copy p {
	text-align: center;
}

.contact-form-copy p {
	width: 100%;
	max-width: 829px;
	margin: 0 auto;
	text-align: left;
}

/*----------------------------------------
	3種類の採用エントリーフォーム お問い合せ窓口　共通
----------------------------------------*/

.form-tel-mail {
	padding: 50px 0 80px 0;
}

.form-tel-mail h2 {
	text-align: center;
	color: var(--color-blue);
	font-weight: 300;
	line-height: 1;
	padding-bottom: 35px;
}

.form-tel-mail p {
	width: 46%;
	margin: 0 auto;
	text-align: left;
	font-weight: 300;
	line-height: 1.2;
}

.form-tel-mail-tel {
	display: inline-block;
	padding-bottom: 10px;
}

.form-tel-mail-mail {
	display: inline-block;
}

@media screen and (max-width: 1000px) {
	.form-tel-mail p {
		width: 100%;
	}
}

/*----------------------------------------
	3種類の採用エントリーフォーム お問い合せフォーム　共通
----------------------------------------*/

.form-newgraduate,
.form-career,
.form-internship,
.form-contact {
	padding: 80px 0;
}

.form-newgraduate-title {
	text-align: center;
	color: var(--color-recruit-green);
	font-weight: 500;
	line-height: 1;
	padding-bottom: 80px;
}

.form-career-title {
	text-align: center;
	color: var(--color-recruit-pink);
	font-weight: 500;
	line-height: 1;
	padding-bottom: 80px;
}

.form-internship-title {
	text-align: center;
	color: var(--color-recruit-blue);
	font-weight: 500;
	line-height: 1;
	padding-bottom: 80px;
}

.form-contact-title {
	text-align: center;
	color: var(--color-blue);
	font-weight: 500;
	line-height: 1;
	padding-bottom: 80px;
}

.form-contact-title {
	text-align: center;
	color: var(--color-blue);
	font-weight: 500;
	line-height: 1;
	padding-bottom: 80px;
}

.recruit-form-inner,
.contact-form-inner {
	width: 100%;
	margin: 0 auto;
}

.recruit-form-inner .wpcf7-form,
.contact-form-inner .wpcf7-form {
	width: 63%;
	margin: 0 auto;
}

.recruit-form-inner .wpcf7-form table,
.contact-form-inner .wpcf7-form table {
	width: 100%;
	border-collapse: collapse;
}

.recruit-form-inner .wpcf7-form th,
.contact-form-inner .wpcf7-form th {
	width: 200px;
	text-align: left;
	padding-bottom: 40px;
}

.recruit-form-inner .wpcf7-form td input,
.recruit-form-inner .wpcf7-form td textarea,
.contact-form-inner .wpcf7-form td input,
.contact-form-inner .wpcf7-form td textarea {
	width: 100%;
	padding: 10px;
	background-color: var(--color-gray);
	border: none;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--color-primary);
	margin-bottom: 40px;
}

.recruit-form-inner .wpcf7-form td input.graduation-year,
.contact-form-inner .wpcf7-form td input.graduation-year {
	margin-bottom: 10px;
}

.recruit-form-inner .wpcf7-form td p.graduation-year-text,
.contact-form-inner .wpcf7-form td p.graduation-year-text {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 40px;
}

.recruit-form-inner .wpcf7-form td input.p-postal-code,
.recruit-form-inner .wpcf7-form td input.graduation-year,
.recruit-form-inner .wpcf7-form td input.date-birthday,
.contact-form-inner .wpcf7-form td input.date-birthday {
	width: 200px;
}

.form-newgraduate .recruit-form-inner .wpcf7-form .table-content-2 p,
.form-contact .contact-form-inner .wpcf7-form .table-content-2 p {
	text-align: center;
	font-size: 33px;
	color: var(--color-recruit-green);
	font-weight: 500;
	line-height: 1;
	padding: 160px 0 80px 0;
}

.form-career .recruit-form-inner .wpcf7-form .table-content-2 p,
.form-contact .contact-form-inner .wpcf7-form .table-content-2 p {
	text-align: center;
	font-size: 33px;
	color: var(--color-recruit-pink);
	font-weight: 500;
	line-height: 1;
	padding: 160px 0 80px 0;
}

.form-internship .recruit-form-inner .wpcf7-form .table-content-2 p,
.form-contact .contact-form-inner .wpcf7-form .table-content-2 p {
	text-align: center;
	font-size: 33px;
	color: var(--color-recruit-blue);
	font-weight: 500;
	line-height: 1;
	padding: 160px 0 80px 0;
}

.recruit-form-inner .wpcf7-form tr.textarea-tr th,
.contact-form-inner .wpcf7-form tr.textarea-tr th {
	display: flex;
	align-items: flex-start;
}

.recruit-form-inner .wpcf7-form th .any,
.contact-form-inner .wpcf7-form th .any {
	display: none;
}

.recruit-form-inner .wpcf7-form th .haveto,
.contact-form-inner .wpcf7-form th .haveto {
	font-size: 14px;
	padding: 5px 8px;
	background-color: var(--color-gray);
	margin-right: 15px;
}

.recruit-form-inner .check-submit,
.contact-form-inner .check-submit {
	text-align: center;
	margin: 0 auto;
}

.recruit-form-inner .check-submit input[type="submit"],
.contact-form-inner .check-submit input[type="submit"] {
	display: block;
	width: 334px;
	margin: 40px auto 0 auto;
	padding: 30px 40px;
	background-color: var(--color-blue);
	color: var(--color-white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	border: none;
	border-radius: 5px;
}

.radio-experience {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-bottom: 40px;
}

.radio-experience span {
	width: 50%;
}

.contact-form-inner .wpcf7-form .checkbox-contact {
	display: block;
	margin-bottom: 40px;
}

.recruit-form-inner .wpcf7-form .radio-experience span label,
.contact-form-inner .wpcf7-form .checkbox-contact span label {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-bottom: 0;
}

.recruit-form-inner .wpcf7-form td .radio-experience input,
.contact-form-inner .wpcf7-form td .checkbox-contact input {
	width: fit-content;

	margin-bottom: 0;
	font-size: 16px;
}

.contact-privacy-link {
	font-weight: 500;
	color: var(--color-blue);
	padding: 0 5px;
}

.newgraduate-privacy-link {
	font-weight: 500;
	color: var(--color-recruit-green);
	padding: 0 5px;
}

.career-privacy-link {
	font-weight: 500;
	color: var(--color-recruit-pink);
	padding: 0 5px;
}

.internship-privacy-link {
	font-weight: 500;
	color: var(--color-recruit-blue);
	padding: 0 5px;
}

@media screen and (max-width: 1000px) {

	.recruit-form-inner .wpcf7-form,
	.contact-form-inner .wpcf7-form {
		width: 100%;
	}

	.recruit-form-inner .wpcf7-form tr,
	.contact-form-inner .wpcf7-form tr {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}

	.recruit-form-inner .wpcf7-form th,
	.contact-form-inner .wpcf7-form th {
		width: 100%;
		padding-bottom: 0;
	}

	.recruit-form-inner .wpcf7-form td,
	.contact-form-inner .wpcf7-form td {
		width: 100%;
	}

	.recruit-form-inner .wpcf7-form td input,
	.contact-form-inner .wpcf7-form td input,
	.recruit-form-inner .wpcf7-form td textarea,
	.contact-form-inner .wpcf7-form td textarea {
		width: 100%;
	}
}

/*==========================================
	サステナビリティ
==========================================*/

.sustainability-section-1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 50px 0;
}

.sustainability-section-1-left {
	width: 50%;
	max-width: 500px;
	margin-left: auto;
}

.sustainability-section-1-left h2 {
	color: var(--color-blue);
	font-weight: 500;
	line-height: 1;
	padding-bottom: 20px;
}

.sustainability-section-1-right {
	width: 50%;
}

.sustainability-section-1-right img {
	display: block;
	width: 100%;
	max-width: 500px;
	height: 100%;
	object-fit: contain;
	margin-left: auto;
}

@media screen and (max-width: 768px) {
	.sustainability-section-1 {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
		padding: 40px 0;
	}

	.sustainability-section-1-left {
		width: 100%;
		margin: 0 auto;
	}

	.sustainability-section-1-right {
		width: 100%;
	}

	.sustainability-section-1-right img {
		max-width: 300px;
		margin: 0 auto;
	}
}

.sustainability-section-2 {
	padding: 100px 0 120px 0;
	background-color: var(--color-light-blue);
}

.sustainability-section-2-inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.sustainability-section-2-inner-box {
	width: 100%;
	background-color: var(--color-white);
	padding: 40px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.sustainability-section-2-inner-box h2 {
	color: var(--color-blue);
	font-weight: 500;
	line-height: 1;
	padding-bottom: 20px;
}

.sustainability-section-2-inner-box p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	padding-bottom: 20px;
}

.sustainability-section-2-box-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: auto 0;
}

.sustainability-section-2-box-icons-2 {
	padding-top: 20px;
}


.sustainability-section-2-box-icons img {
	width: 122px;
	height: auto;
	object-fit: contain;
}


@media screen and (max-width: 809px) {
	.sustainability-section-2-inner {
		grid-template-columns: 1fr;
	}

	.sustainability-section-2-inner-box {
		padding: 20px;
	}

	.sustainability-section-2-inner-box p {
		padding-bottom: 10px;
	}
}

.sustainability-section-3 .recruit-section-type-small {
	background-color: var(--color-light-yellow);
}

/*==========================================
	インタビュー一覧
==========================================*/
/*.page-header-wrapper .interview-archive-header-wrapper-bg {
	min-height: 200px;
}

@media screen and (max-width: 768px) {
	.interview-archive-page-header-wrapper-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		max-height: fit-content;
	}

	.interview-archive-page-header-left {
		width: 100%;
		position: relative;
		top: 0;
		padding-top: 20px;
		padding-left: 10px;
		margin-left: 0;
	}

	.interview-archive-page-header-right {
		width: 100%;
		min-height: fit-content;
	}

	.interview-archive-page-header-right img {
		object-fit: contain;
	}
}*/

.interview-archive-p {
	text-align: center;
	padding: 100px 0;
}

/* ！！！！！！！！！！！！！！！！！！！！！！！！！！
【注意】
このセクションはテンプレートパーツ「recruit-interview-slider」と一部同じクラス名を使用しています。

そのため、ここだけCSSを変更する場合は必ず
.interview-archive-main-section を先頭に付けてスコープを限定してください。
例：
.interview-archive-main-section .interview-item {
	width: 100%;
	margin: 0 auto;
}
！！！！！！！！！！！！！！！！！！！！！！！！！！ */


.interview-archive-main-section {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 40px;
	padding: 50px 0;
}

.interview-archive-main-section .interview-item {
	width: 100%;
	margin: 0 auto;
}

.interview-archive-main-section .interview-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*==========================================
	サイトマップ
==========================================*/

.page-sitemap-hero {
	position: relative;
	width: 100%;
	height: 300px;
	background: var(--gradient-blue-yoko);
}


.page-sitemap-hero-wrapper {
	position: relative;
	height: 100%;
}


.page-sitemap-hero-inner {
	position: absolute;
	top: 70px;
	left: 0;
	color: var(--color-white);
	width: fit-content;
}

.page-sitemap-hero-inner p {
	font-size: 24px;
	font-weight: 500;
	padding-bottom: 10px;
}

.page-sitemap-hero-inner h1 {
	font-size: 36px;
	font-weight: 500;
	padding-top: 20px;
	border-top: 3px solid var(--color-white);
}

.page-sitemap-wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 100px 0;
}

.page-sitemap-content-left {
	width: 50%;
}

.page-sitemap-content-right {
	width: 50%;
}

@media screen and (max-width: 768px) {
	.page-sitemap-wrapper {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 40px;
	}

	.page-sitemap-content-left {
		width: 100%;
	}

	.page-sitemap-content-right {
		width: 100%;
	}

}


.page-sitemap-content {
	padding-bottom: 40px;
}

.page-sitemap-link-parent {
	display: inline-block;
	position: relative;
	line-height: 1;
	padding: 8px 0 8px 16px;
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 20px;
	color: var(--color-blue);
}

.page-sitemap-link-parent::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--gradient-blue-tate);
}

.page-sitemap-link-parent i {
	font-size: 20px;
	color: var(--color-blue);
	padding-left: 10px;
}

.page-sitemap-list {
	padding-left: 20px;
}

.page-sitemap-item {
	padding: 5px 0;
}

/*==========================================
	プライバシーポリシー
==========================================*/
.page-privacy-policy-hero {
	position: relative;
	width: 100%;
	height: 300px;
	background: var(--gradient-blue-yoko);
}


.page-privacy-policy-hero-wrapper {
	position: relative;
	height: 100%;
}


.page-privacy-policy-hero-inner {
	position: absolute;
	top: 70px;
	left: 0;
	color: var(--color-white);
	width: fit-content;
}

.page-privacy-policy-hero-inner p {
	font-size: 24px;
	font-weight: 500;
	padding-bottom: 10px;
}

.page-privacy-policy-hero-inner h1 {
	font-size: 36px;
	font-weight: 500;
	padding-top: 20px;
	border-top: 3px solid var(--color-white);
}

.page-privacy-policy-content h2 {
	color: var(--color-blue);
	padding: 40px 0;
}

.page-privacy-policy-content h3 {
	display: inline-block;
	position: relative;
	line-height: 1;
	padding: 8px 0 8px 16px;
	font-size: 20px;
	font-weight: 500;
	margin-top: 40px;
	margin-bottom: 20px;
	color: var(--color-blue);
}

.page-privacy-policy-content h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--gradient-blue-tate);
}

.page-privacy-policy-content {
	padding: 100px 0;
}

.page-privacy-policy-content ul {
	padding-left: 20px;
	padding-top: 20px;
}

.page-privacy-policy-content ul li {
	padding: 5px 0;
	list-style: disc;
	list-style-position: inside;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	padding-bottom: 10px;
}

.page-privacy-policy-content ul .page-privacy-policy-no-dot-list {
	list-style: none;
	padding-left: 0;
}