@charset "utf-8";

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

/*
#0054AA 紺色
*/

html {
	scroll-behavior: smooth;
}
@media (min-width: 50.001rem) {
	html {
		scroll-padding-top: 5rem;
	}
}
:not(span) {
	margin: 0;
	padding: 0;
	font-size: clamp(0.95rem, 3vw, 1.05rem);
	font-weight: 400;
	line-height: 1;
	box-sizing: border-box;
}
* {
	color: #111;
	font-family: "Noto Sans JP", sans-serif;
	font-style: normal;
	font-feature-settings: "palt", "kern";
	font-weight: 400;
	letter-spacing: calc(1em / 12);
	word-spacing: calc(1em / 16);
	max-height: 99999px;
}
a:any-link {
	text-decoration: none;
}
li {
	list-style: none;
}
label,
button,
summary {
	cursor: pointer;
}
table th,
table td {
	font-size: clamp(0.95rem, 3vw, 93%);
}
table th *,
table td * {
	font-size: 100%;
}
@media (min-width: 50.001rem) {
	.for_sp {
		display: none;
	}
}
@media (max-width: 50rem) {
	.for_pc {
		display: none;
	}
}

body {
	-webkit-text-size-adjust: 100%;
	width: 100%;
	overflow-x: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	animation: fadeIn .5s ease 0s 1 normal;
}

@keyframes fadeIn {
	0% { opacity: 0; }
	25% { opacity: 0; }
	100% { opacity: 1; }
}
/* ==================================================
==================================================
ヘッダー部
==================================================
================================================== */

header {
	background: rgba(0,84,170,0.5);
	background: #E6F2FD;
}
header > div {
	display: block;
//	aspect-ratio: 1400/810;
	max-width: 100%;
	max-height: calc(100vh - 5rem);
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
/* メイン画像 */
header > div img#bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 大キャッチコピー */
header > div img#tit {
	display: block;
	position: absolute;
	top: 32%;
	left: 17%;
	width: 64%;
	height: auto;
}
@media (max-width: 50rem) {
	header > div img#tit {
		display: block;
	position: absolute;
	top: 44%;
	left: 5%;
	width: 90%;
	height: auto;
	}
}
/* h1ロゴ */
header > div hgroup {
	display: flex;
	gap: min(2vw, 0.5rem);
	align-items: flex-end;
	position: absolute;
	top: 2.5%;
	left: 5vw;
	aspect-ratio: 4/1;
	width:30%;
	max-width: 24rem;
}
header > div hgroup h1 a {
	width: 66%;
}
header > div hgroup h1 a img {
	display: block;
	width: 100%;
	height: auto;
}
header > div hgroup img#sy {
	width: 33%;
}
@media (max-width: 50rem) {
	header > div hgroup {
		width:50%;
		align-items: flex-start;
	}
	header > div hgroup h1 img {
		width: 60%;
	}
	header > div hgroup img#sy {
		padding-top: 2vw;
		width: 40%;
	}
}
/* ENTRYボタン */
header > div > a:any-link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 5rem;
	position: absolute;
	top: 1.5rem;
	right: 0;
	color: #0054AA;
	background: white;
	font-weight: 500;
}
@media (max-width: 50rem) {
	header > div > a:any-link {
		top: 0;
		right: 4rem;
		width: 4rem;
		height: 4rem;
		color: white;
		background: #333;
	}
}
/* ナビゲーション */
@media (min-width: 50.001rem) {
	nav {
		position: sticky;
		top: 0;
		z-index: 9;
	}
	nav ul {
		display: flex;
		justify-content: center;
		background: #0054AA;
	}
	nav ul li {
		width: 18.75rem;
		height: 5rem;
		border-right: solid thin white;
	}
	nav ul li:first-child {
		border-left: solid thin white;
	}
	nav ul li a:any-link {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		font-size: min(1.8vw, 105%);
		color: white;
		font-weight: 500;
		background: #0054AA;
		transition: .2s;
	}
	nav ul li a:hover {
		filter: brightness(150%);
	}
}
@media (max-width: 50.001rem) {
	nav::before { /* 三本線メニュー */
		content: '';
		display: block;
		width: 2.5rem;
		height: 2.5rem;
		background: url(./img/sp_menu_open.svg) center center no-repeat;
		background-size: contain;
		position: absolute;
		top: 0.75rem;
		right: 0.5rem;
	}
	body:has(input:checked) nav::before {
		content: '';
		display: block;
		width: 2.5rem;
		height: 2.5rem;
		background: url(./img/sp_menu_close.svg) center center no-repeat;
		background-size: contain;
		position: absolute;
		top: 0.75rem;
		right: 0.5rem;
	}
	nav input {
		position: absolute;
		top: 1.75rem;
		right: 1.75rem;
		transform: scale(3);
		opacity: 0;
	}
	nav ul {
		position: absolute;
		top: 6rem;
		left: -110vw;
		width: calc(100% - 10vw);
		z-index: 10;
		transition: .5s;
	}
	nav input:checked + ul {
		left: 5vw;
	}
	nav ul li a:any-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 3.5rem;
		font-weight: 600;
		background: #f39939; /* オレンジ */
		padding: 0 1rem;
		margin-top: 1px;
		transition: .2s;
	}
	nav ul li a::after {
		content: '▶︎';
		transform: scale(50%);
	}
	nav ul li a:hover {
		filter: brightness(125%);
	}
	nav ul li.entry a {
		background: #333;
		color: white;
	}
}


/* ==================================================
==================================================
セクション共通
==================================================
================================================== */
section {
	padding: min(10vw, 5rem) 0;
}
section hgroup {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-bottom: 3rem;
	position: relative;
}
section hgroup p em {
	display: flex;
	justify-content: center;
	text-align: center;
	font-size: clamp(1.25rem, 4.5vw, 2rem);
	font-weight: 600;
	line-height: 1.666;
	margin-bottom: 0.75em;
}
section hgroup h3 {
	color: #0054AA;
	font-size: clamp(1.125rem, 4vw, 1.5rem);
	font-weight: 600;
	margin-bottom: 1em;
}
section hgroup h3 small {
	color: #0054AA;
	font-weight: 600;
}
@media (min-width: 50.001rem) {
	section hgroup img {
		transform: scale(80%);
	}
}
@media (max-width: 50rem) {
	section hgroup {
		margin-bottom: -0.001rem;
	}
	section hgroup img {
		transform: scale(90%);
	}
}
/* 要素の基本的な幅の長さ */
section > * {
	width: 62.5rem;
	max-width: calc(100% - 10vw);
	margin: 0 auto;
}
/* 要素間の距離 */
section > * + * {
	margin-top: 1.5rem;
}
/* ==================================================
==================================================
デンセツってどんな仕事？
==================================================
================================================== */
#field {
	background: url(./img/field_bg.jpg) center bottom no-repeat;
	background-size: contain;
	width: 100%;
	overflow: hidden;
}
#field hgroup::after {
	content: '';
	width: 20rem;
	height: 13rem;
	background: url(./img/field_img.svg) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: -3rem;
	left: calc(50% + 10rem);
}
@media (max-width: 50rem) {
	#field {
		background: url(./img/field_bg.jpg) center center no-repeat;
		background-size: contain;
	}
	#field hgroup::after {
		height: 8rem;
		top: -1rem;
		left: calc(50% + min(15vw, 7.5rem));
	}
}
/* 冒頭テキスト */
#field > p {
	line-height: 1.75;
}
/* 写真付きの説明 */
#field > dl {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	margin-top: 3rem;
}
#field > dl div {
	width: calc((100% - 3rem) / 2);
	flex: none;
	background: rgba(238,238,238,0.667);
}
@media (max-width: 50rem) {
	#field > dl {
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}
	#field > dl div {
		width: 30rem;
		max-width: 100%;
		background: rgba(238,238,238,0.667);
		padding: 2.5vw;
	}
}
#field > dl div dt {
	text-align: center;
	font-size: 120%;
	font-weight: 600;
	margin-bottom: 1em;
}
#field > dl div dt img {
	display: block;
	aspect-ratio: 920/480;
	width: 100%;
	object-fit: cover;
	margin-bottom: 1.5em;
}
#field > dl div dd {
	line-height: 1.75;
	padding: 0 min(2.5vw, 2rem) min(2.5vw, 2rem);
}


/* ==================================================
==================================================
リンク
==================================================
================================================== */
#other_layer ul {
	display: flex;
	justify-content: center;
	gap: 1rem 3rem;
}
@media (max-width: 50rem) {
	#other_layer ul {
		flex-direction: column;
		align-items: center;
		margin-top: -5vw;
	}
}
#other_layer ul li a:any-link {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	color: white;
	background: #0054AA;
	width: 19rem;
	height: 4.5rem;
	transition: .2s;
	position: relative;
}
#other_layer ul li a:after {
	content: '';
	width: 1rem;
	height: 1rem;
	background: url(./img/icon_link.svg) center center no-repeat;
	background-size: contain;
	margin-left: 1rem;
}
#other_layer ul li a:before {
	content: '─';
	display: block;
	letter-spacing: 0;
	position: absolute;
	top: calc(50% - 0.5rem);
	right: 0.25rem;
	z-index: 2;
	transform: scale(2,1)
}
#other_layer ul li a:hover {
	filter: brightness(150%);
}


/* ==================================================
==================================================
どんな人が働いている? 〜先輩インタビュー〜
==================================================
================================================== */
#people {
	background: #E6F2FD;
}
@media (min-width: 50.001rem) {
	#people hgroup::after {
		content: '';
		width: 20rem;
		height: 13rem;
		background: url(./img/people_img.png) center center no-repeat;
		background-size: contain;
		position: absolute;
		top: 5rem;
		left: calc(50% - 30rem);
	}
}
@media (max-width: 50rem) {
	#people hgroup p:nth-of-type(1) {
		order: 1;
	}
	#people hgroup::before {
		content: '';
		width: 10rem;
		height: 9rem;
		background: url(./img/people_img.png) center center no-repeat;
		background-size: contain;
		order: 2;
	}
	#people hgroup h3 {
		order: 3;
	}
	#people hgroup picture {
		order: 4;
	}
}
/* 冒頭テキスト */
#people > p {
	line-height: 1.75;
	width: 58rem;
}
#people > p b {
	font-weight: 600;
	color: #0054AA;
}
/* 人物紹介 大枠 */
#people > div {
	background: white;
	width: 70rem;
	max-width: calc(100% - 5vw);
	padding: min(5vw, 2.5rem) min(5vw, 2.5rem) min(8vw, 4rem);
	margin-top: 2.5rem;
}
#people > div > * + * {
	margin-top: 2rem;
}
/* 人物紹介 見出し */
#people > div h4 {
	font-size: clamp(1.125rem, 4vw, 150%);
	font-weight: 600;
	border-left: solid 0.333em #0054AA;
	padding-left: 0.5em;
	margin-left: 0.5em;
	line-height: 1.5;
	color: #0054AA;
}
@media (max-width: 50rem) {
	#people > div h4 {
		margin-left: 0;
	}
}
/* 人物紹介 見出し下のテキスト */
#people > div > p {
	line-height: 1.75;
	width: 58rem;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	font-weight: 600;
}
/* 人物紹介 イラスト */
@media (min-width: 50.001rem) {
	#people > div figure#IM {
		float: left;
		width: 40%;
		margin-right: 1rem;
	}
	#people > div figure#YS {
		float: right;
		width: 40%;
		margin-left: 1rem;
	}
}
#people > div figure img {
	display: block;
	width: 100%;
	max-width: 20rem;
	height: auto;
	margin: 0 auto;
}
/* 人物紹介 Q&A */
#people > div dl {
	overflow: hidden; 
}
#people > div dl dt {
	line-height: 1.5;
	font-size: 120%;
	font-weight: 600;
	color: #0054AA;
	margin-bottom: 0.5rem;
}
#people > div dl dd {
	line-height: 1.75;
}
#people > div dl dd + dt {
	margin-top: 1.5rem;
}
/* 人物紹介 区切り破線 */
#people > div > hr {
	margin: min(10vw, 5rem) 0;
	height: 0;
	border: none;
	border-top: dashed 2px #0054AA;
	box-shadow: none;
}

/* ==================================================
==================================================
プロジェクト紹介
==================================================
================================================== */
@media (min-width: 50.001rem) {
	#project hgroup::after {
		content: '';
		width: 20rem;
		height: 13rem;
		background: url(./img/project_img.svg) center center no-repeat;
		background-size: contain;
		position: absolute;
		top: 6.5rem;
		left: calc(50% - 34rem);
	}
}
@media (max-width: 50rem) {
	#project hgroup p {
		order: 1;
	}
	#project hgroup::before {
		content: '';
		width: 15rem;
		height: 9rem;
		background: url(./img/project_img.svg) center center no-repeat;
		background-size: contain;
		order: 2;
		margin-bottom: 0.5rem;
	}
	#project hgroup h3 {
		order: 3;
	}
	#project hgroup picture {
		order: 4;
	}
}
/* タイトル下のテキスト */
#project > p {
	line-height: 1.75;
	width: 60rem;
}
#project > p.obj1 img {
	display: block;
	margin: 2rem auto;
	width: min(70vw, 25rem);
	height: auto;
}
/* キャプション付きの写真 4点 */
#project > ul {
	display: flex;
	justify-content: center;
	gap: 1rem;
	padding: 1rem 0;
}
#project > ul li {
	width: calc((100% - 3rem) / 4);
}
@media (max-width: 50rem) {
	#project > ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 2.5vw;
	}
	#project > ul li {
		width: calc((100% - 3vw) / 2);
	}
}
#project > ul li img {
	display: block;
	width: 100%;
	height: auto;
}
#project > ul li figcaption {
	background: #333;
	color: white;
	text-align: center;
	padding: 0.5rem 0;
}
/* ワークフローチャート */
#project > p.obj2 {
	width: 65rem;
}
#project > p.obj2 img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
}
@media (max-width: 50rem) {
	#project > p.obj2 img {
		transform: scale(105%);
	}
}
/* 最後の飾りのイラスト */
@media (min-width: 50.001rem) {
	#project > p.obj3 {
		position: relative;
		left: calc(50% + 15rem);
		top: 1rem;
		margin: 0 0 -3rem;
	}
	#project > p.obj3 img {
		width: 16rem;
		height: auto;
	}
}
@media (max-width: 50rem) {
	#project > p.obj3 {
		width: 13rem;
		height: 8rem;
		position: relative;
		top: -1rem;
	}
	#project > p.obj3 img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}
/* ==================================================
==================================================
募集要項
==================================================
================================================== */
#challenge {
	background: #F3F3F3;
}
@media (min-width: 50.001rem) {
	#challenge hgroup::after {
		content: '';
		width: 18rem;
		height: 12rem;
		background: url(./img/challe_img.svg) center center no-repeat;
		background-size: contain;
		position: absolute;
		top: -1rem;
		left: calc(50% - 34rem);
	}
}
@media (max-width: 50rem) {
	#challenge hgroup::before {
		content: '';
		width: 15rem;
		height: 9rem;
		background: url(./img/challe_img.svg) center center no-repeat;
		background-size: contain;
		order: 1;
		margin-bottom: 1rem;
	}
	#challenge hgroup h3 {
		order: 2;
	}
	#challenge hgroup picture {
		order: 3;
	}
}
#challenge table {
	border-collapse: collapse;
	border-top: solid thin #999;
	max-width: 62.5rem;
	width: calc(100% - 5vw);
	margin: 2rem auto 0;
}
#challenge table th,
#challenge table td {
	border-bottom: solid thin #999;
	padding: 1.25em 0.5rem;
	line-height: 1.75;
	text-align: left;
	vertical-align: top;
}
#challenge table th {
	font-weight: 600;
	color: #0054AA;
	white-space: nowrap;
}
#challenge table td ul.normal li {
	list-style: disc;
	margin-left: 1.5rem;
	line-height: 1.5;
}
#challenge table td b {
	font-weight: 600;
}
#challenge table td ul.normal li + li {
	margin-top: 0.75em;
}

#challenge table td #contact {
	display: flex;
	gap: 1rem 4rem;
	margin-top: 1rem;
	align-items: center;
	flex-wrap: wrap;
}
#challenge table td #contact li:first-child a:any-link {
	font-size: 150%;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: .2s;
}
#challenge table td #contact li:first-child a::before {
	content: '';
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	background: url(./img/icon_tel.svg) center center no-repeat;
	background-size: contain;
	flex: none;
}
#challenge table td #contact li:last-child a:any-link {
	font-size: 110%;
	font-weight: 600;
	display: flex;
	align-items: center;
	text-decoration: underline;
	gap: 0.5rem;
	transition: .2s;
}
#challenge table td #contact li:last-child a::before {
	content: '';
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	background: url(./img/icon_pc.svg) center center no-repeat;
	background-size: contain;
	flex: none;
}
#challenge table td #contact li a:hover {
	filter: brightness(150%);
}


/* ==================================================
==================================================
フッタ
==================================================
================================================== */

/*---------- フッターロゴ ----------*/
#footer_logo {
	background: #0054AA;
	display: flex;
	justify-content: center;
	padding: 3rem 0 2rem;
}
#footer_logo img {
	width: auto;
	height: 5rem;
	display: block;
	position: relative;
	left: -7.5rem;
}
@media (max-width: 64rem) {
	#footer_logo img {
		left: 0;
	}
}
/*---------- フッターナビゲーション ----------*/
@media (min-width: 64.001rem) {
	#footer_logo + dl {
		background: #0054AA;
	}
	#footer_logo + dl > div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 0 2.5rem;
		width: 62.5rem;
		max-width: calc(100% - 10vw);
		margin: 0 auto;
	}
	#footer_logo + dl dt {
		color: #FF0;
	}
	#footer_logo + dl dd ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 3.825em;
	}
	#footer_logo + dl dd ul li {
		color: #FF0;
	}
	#footer_logo + dl dd ul li::before {
		content: '・';
	}
	@media (max-width: 70rem) {
		#footer_logo + dl dd {
			width: 75vw;
		}
		#footer_logo + dl dd ul {
			flex-wrap: wrap;
		}
		#footer_logo + dl dd ul li {
			width: 30vw;
		}
	}
	#footer_logo + dl dd ul li a:any-link {
		color: #FF0;
		font-weight: 500;
		transition: .2s;
	}
	#footer_logo + dl dd ul li a:hover {
		text-decoration: underline;
	}
}
@media (max-width: 64rem) {
	#footer_logo + dl {
		background: #0054AA;
		margin-top: -2rem;
	}
	#footer_logo + dl > div {
		padding: 1rem 0 1.5rem;
		width: 26rem;
		max-width: calc(100% - 5vw);
		margin: 0 auto;
	}
	#footer_logo + dl > div dt {
		color: #FF0;
		margin: 1rem 2.5vw 1.5rem;
		font-size: min(3.75vw, 1rem);
		font-weight: 500;
	}
	#footer_logo + dl > div dd {
		margin: 1rem 2.5vw;
	}
	#footer_logo + dl > div dd ul {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem 2vw;
	}
	#footer_logo + dl > div dd ul li {
		color: #FF0;
	}
	#footer_logo + dl dd ul li::before {
		content: '・';
	}
	#footer_logo + dl > div dd ul li:nth-child(odd) {
		width: calc((100% - 2.1vw) / 2 + 0.4rem);
	}
	#footer_logo + dl > div dd ul li:nth-child(even) {
		width: calc((100% - 2.1vw) / 2 - 0.4rem);
	}
	#footer_logo + dl > div dd ul li a {
		font-size: min(3.7vw, 0.9rem);
		color: #FF0;
	}
	#footer_logo + dl dd ul li a:hover {
		text-decoration: underline;
	}
}

/*---------- フッターメニュー ----------*/
#footer_menu {
	background: #0054AA;
	background-size: auto 5rem;
}
@media (max-width: 64rem) {
	#footer_menu {
		padding-bottom: 4rem;
	}
}
#footer_menu a:any-link {
	display: block;
	color: white;
	width: fit-content;
	white-space: nowrap;
	font-weight: 500;
	padding: 0.5rem 0;
	margin: 0.333rem 0;
}
#footer_menu > ul > li ul li {
	list-style-type: disc;
	color: white;
	margin-left: 1.25rem;
}
@media (min-width: 64.001rem) {
	#footer_menu > ul {
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-template-columns: auto auto auto auto fit-content(10rem);
		width: 62.5rem;
		max-width: calc(100% - 5vw);
		margin: 0 auto;
		padding: 2rem 0 3rem;
		border-top: solid thin white;
	}
	#footer_menu > ul > li:nth-child(1) {
		grid-area: 1/1/3/2;
	}
	#footer_menu > ul > li:nth-child(3) {
		grid-area: 1/2/3/3;
	}
	#footer_menu > ul > li:nth-child(4) {
		grid-area: 1/3/3/4;
	}
	#footer_menu > ul > li:nth-child(5) {
		grid-area: 1/4/2/5;
	}
	#footer_menu > ul > li:nth-child(6) {
		grid-area: 2/4/3/5;
	}
	#footer_menu > ul > li:nth-child(7) {
		grid-area: 1/5/2/6;
	}
	#footer_menu > ul > li:nth-child(8) {
		grid-area: 2/5/3/6;
	}
}
@media (max-width: 64rem) {
	#footer_menu > ul {
		columns: 2;
		gap: 1rem;
		width: 26rem;
		max-width: calc(100% - 5vw);
		margin: 0 auto;
		padding-top: min(5vw, 2.5rem);
		border-top: solid thin white;
	}
	#footer_menu > ul > li {
		break-inside: avoid;
		margin-bottom: 0.75em;
		position: relative;
		left: 2.5vw;
		border: solid thin #0054AA;
	}
	#footer_menu > ul > li:nth-child(4) {
		margin-bottom: 0;
	}
	#footer_menu > ul > li:nth-child(n+5) {
		padding-bottom: 0.75em;
	}
	#footer_menu > ul > li:nth-child(5) {
		padding-top: 3.5rem;
	}
	#footer_menu > ul > li:nth-child(6) a {
		position: relative;
		top: -0.8em;
	}
	#footer_menu > ul > li:nth-child(7) a {
		position: relative;
		top: -1.6em;
	}
	#footer_menu > ul > li:nth-child(8) a {
		position: relative;
		top: -2.4em;
	}
	#footer_menu > ul > li:last-child {
		padding-bottom: 3rem;
	}
	#footer_menu > ul > li a {
		font-size: min(3.75vw, 1rem);
	}
	.□::before {
		content: '□';
	}
}
/*---------- コピーライト ----------*/
#copyright {
	width: 100%;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: min(2.5vw, 80%);
	background-color: #373737;
}
/*---------- ページトップに戻る ----------*/
#pageTop {
	position: fixed;
	bottom: -5rem;
	right: 0.5rem;
	z-index: 999;
	transition: .5s;
}

#pageTop a {
	display: block;
	opacity: 0.75;
}
#pageTop.is-animation2 {
	bottom: 5rem;
}