@charset "UTF-8";
/*----------------------------------------

	- mv
		+ content
			+ sec01
			- sec01_sp
			- lead
			+sec02

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

/*----------------------------------------
	mv
-----------------------------------------*/
#mv {
	background: #62b1d9 url("../../img/c_mv_bg01.jpg") no-repeat right top;
	background-size: 1320px auto;
}

@media screen and (max-width: 767px) {
	#mv {
		background-size: auto 100%;
	}
}

/*----------------------------------------
	content
-----------------------------------------*/
#content {
	padding: 60px 0 93px;
}

@media screen and (max-width: 767px) {
	#content {
		padding: 40px 0 68px;
	}
}

/*----------------------------------------
	sec01_sp
-----------------------------------------*/
#sec01_sp {
	display: none;
}

@media screen and (max-width: 767px) {
	#sec01_sp {
		display: block;
	}
}

	#sec01_sp > div {
		display: flex;
		align-items: center;
		height: 39.89vw;
		width: 100%;
		background: url(../img/diversity_bg01_sp.png) no-repeat right bottom;
		background-size: 52%;
	}

	#sec01_sp > div > h2 {
		padding-left: 20px;
		height: auto;
		width: 180px;
	}
@media screen and (max-width: 767px) {
	#sec01 {
		display: none;
	}
}

/*----------------------------------------
	#lead
-----------------------------------------*/

#lead {
	max-width: 1120px;
	width: calc(100% - 100px);
	margin: 54px auto 0;
	text-align: center;
}

@media screen and (max-width: 767px) {
	#lead {
		width: calc(100% - 40px);
		margin: -7px auto 0;
		text-align: left;
	}
}

/*----------------------------------------
	#sec02
-----------------------------------------*/

#sec02 ul.pageLink {
	display: flex;
	gap: 16px;
	width: 100%;
	margin: 60px auto;
	padding: 0;
	list-style: none;
}

#sec02 ul.pageLink li {
	flex: 1;
	background: #114fa6;
	border-radius: 30px;
	position: relative;
}

#sec02 ul.pageLink li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	background: #114fa6;
	padding: 20px 56px 20px 24px;
	color: #fff;
	white-space: nowrap;
	position: relative;
	text-align: center;
}

#sec02 ul.pageLink li > a::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	width: 8px;
	height: 8px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	box-sizing: border-box;
}

@media screen and (max-width: 1100px) {
	#sec02 ul.pageLink {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	#sec02 ul.pageLink li {
		flex: 1 1 100%;
		max-width: calc(50% - 8px);
	}
}

@media screen and (max-width: 767px) {
	#sec02 ul.pageLink {
		justify-content: center;
    text-align: center;
		margin: 0 auto 30px;
	}
	#sec02 ul.pageLink li {
		max-width: 100%;
	}
}

#sec02 .title {
	margin: 0 0 34px;
	padding: 5px 0 5px 15px;
	border-left: 5px solid #00a0e9;
	color: #000;
}

#sec02 > div .mb_28 {
	margin-bottom: 28px;
}
#sec02 > div .mb_32 {
	margin-bottom: 32px;
}
#sec02 > div .mb_48 {
	margin-bottom: 48px;
}
#sec02 > div .mb_54 {
	margin-bottom: 54px;
}

#sec02 > div .grid_wrap01_inner {
	display: flex;
	gap: 20px 40px;
}
@media screen and (max-width: 767px) {
	#sec02 > div .grid_wrap01_inner {
		flex-wrap: wrap;
	}
}

#sec02 > div .grid_wrap01 h4 {
	margin-bottom: 15px;
	line-height: 1;
}

#sec02 > div .grid_wrap01_about {
	padding: 35px 40px;
	background: #e5f2ff;
}

#sec02 > div .grid_wrap01_title {
	margin-bottom: 28px;
}

#sec02 > div .grid_wrap01_list dd:not(:last-of-type) {
	margin-bottom: 28px;
}

#sec02 > div .grid_wrap01_list ul > li::before {
	content: "・";
}

#sec02 > div .grid_wrap01_list ul > li {
	text-indent: -1em;
	padding-left: 1em;
}

#sec02 > div .grid_wrap01 figure {
	max-width: 386px;
}
#sec02 > div .grid_wrap01 figure img {
	margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
	#sec02 > div .grid_wrap01 figure {
		max-width: 100%;
	}
}

#sec02 > div .grid_wrap02 {
	display: flex;
	gap: 20px 40px;
}

#sec02 > div .grid_wrap02 figure {
	width: 386px;
}

#sec02 > div .grid_wrap02 figure img {
	margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
	#sec02 > div .grid_wrap02 {
		display: block;
	}
	#sec02 > div .grid_wrap02 figure {
		width: 100%;
	}
}

#sec02 > div .table_scroll {
	overflow-x: auto;
	margin-bottom: 60px;
}

#sec02 > div table {
	min-width: 600px;
  width: 100%;
  border-collapse: collapse;
}

#sec02 > div table thead th {
	background: #62b1d9;
	color: #fff;
	text-align: center;
	padding: 8px;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

#sec02 > div table tbody th {
	background: #fafafa;
	color: #222;
	text-align: center;
	padding: 8px 20px;
	border: 1px solid #ddd;
	text-align: left;
}

#sec02 > div table tbody td {
	text-align: center;
	padding: 8px 20px;
	border: 1px solid #ddd;
	text-align: right;
}
#sec02 > div table tbody td:last-of-type {
	text-align: center;
}

#sec02 > div table thead th:first-of-type {
	border-left: 0;
}
#sec02 > div table thead th:last-of-type {
	border-right: 0;
}
#sec02 > div table tbody th:last-of-type {
	border-left: 0;
}
#sec02 > div table tbody td:last-of-type {
	border-right: 0;
}
#sec02 > div .diversity_list li::before {
	content: "・";
}

#sec02 > div .diversity_list li {
	text-indent: -1em;
	padding-left: 1em;
}

#sec02 > div .link {
  display: inline-flex;
  align-items: center;
	gap: 6px;
	margin-top: 8px;
}

#sec02 > div .link a {
	border-bottom: 1px solid #222;
	text-decoration: none;
}
#sec02 > div .link::before {
	content: "";
	display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #666;
}

@media screen and (max-width: 767px) {
	#sec02 > div {
		margin-top: 35px;
	}

	#sec02 > div > ul > li.tab::before,
	#sec02 > div > ul > li.tab:not(.is-active) ::after,
	#sec02 > div > ul > li.tab:not(.is-active) :hover::after {
		content: none;
	}

	#sec02 > div > ul > li.tab:hover,
	#sec02 > div > ul > li.tab.is-active {
		color: #fff;
		background-color: #62b1d9;
	}
}
#sec02 > div h3 {
	margin-bottom: 9px;
	color: #000;
}
html {
  scroll-behavior: smooth;
}