/* CSS Document */

:root {
	--black: #333333;
	--light-black: #595959;
	--blue: #3666A7;
	--light-blue: #3F86E3;
	--hover-blue: #EBF3FF;
	--list__border: 1px solid #D1D1D1;
	--Small__bottom: 24px;
	--semi-Small__bottom: 28px;
	--Medium__bottom: 50px;
	--Large__bottom: 80px;
}

.contens_title {
	font-size: min(4.88vw, 24px);
	margin-top: 35px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
}
.contens_title span {
	display: inline-block;
	width: 23px;
	height: 26px;
	background-image: url("../img/company__icon.png");
	background-size: contain;
	background-repeat: no-repeat;
}
.contents__message {
	font-size: min(3.6vw, 16px);
	letter-spacing: .5px;
	margin-bottom: var(--Medium__bottom);
}
.tab{
  margin-bottom: var(--Large__bottom);
}

.tab-list{
	display: flex;
	justify-content: center;
	gap: 1vw;
	border-bottom: 1px solid #858585;
	margin-bottom: var(--Small__bottom);
}

.tab-list-item{
  text-align: center;
  cursor: pointer;
  border: none;
  background: #fff;
  font-size: min(3.85vw, 17px);
  color: var(--light-black);
  font-weight: 900;
  padding: 10px 0;
  letter-spacing: 1.05px;
  transition: .3s;
	width: 100%;
}

.tab-contents{
  display: none;
  padding: 5px;
}

.is-btn-active,
.tab-list-item:hover {
	color: var(--light-blue);
	position: relative;
}
.is-btn-active::before,
.tab-list-item:hover::before {
	content: "";
	width: 50px;
	height: 3px;
	background: var(--light-blue);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.is-contents-active{
  display: block;
}



.search__list {
	 display: flex;
	 gap: 12px;
	 flex-wrap: wrap;
	 margin-bottom: var(--Large__bottom);
}

.search__list li a {
	font-size: min(3.85vw, 16px);
	color: var(--black);
	padding: 11px 21px;
	border: 1px solid var(--black);
	border-radius: 20px;
	transition: .3s;
	cursor: pointer;
}

.search__list li a:hover {
	background: var(--hover-blue);
	opacity: 1;
}

.company__list li:not(.company__list li:last-child) {
	margin-bottom: var(--Large__bottom);
}

.company__list li h2 {
	font-size: min(4.5vw, 20px);
	font-weight: 600;
	padding: 10px 5px;
	margin-bottom: var(--Small__bottom);
	position: relative;
}
.company__list li h2 span {
	display: block;
	line-height: 1.3;
	margin-top: 10px;
	font-size: min(3.5vw, 16px);
	letter-spacing: .5px;
}
.company__list li h2::before {
	content: "";
	width: 3px;
	height: 1em;
	background: var(--light-blue);
	position: absolute;
	top: 9px;
	left: -3px;
	/* transform: translateY(-50%); */
}
.company__list li dl div a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 5px;
	border-bottom: var(--list__border);
	transition: .3s;
}
.company__list li dl div a:hover {
	background: var(--hover-blue);
	opacity: 1;
}
.company__list li dl div:first-child {
	border-top: var(--list__border);
}
.company__list li dl div dt {
	font-weight: 600;
	color: var(--black);
	font-size: min(4.2vw, 16px);
	letter-spacing: .5px;
}
.company__list li dl div dd {
	display: flex;
	gap: 5px;
	color: var(--blue);
	font-size: min(3.6vw, 16px);
}
.company__list li dl div dd p {
	letter-spacing: .5px;
}
.page__top {
	display: flex;
	justify-content: flex-end;
}
.page__top a {
	color: var(--light-blue);
	font-size: 14px;
	padding: 10px;
	display: flex;
	gap: 5px;
	align-items: center;
}

.page__top a span {
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url("../img/top__icon.png");
	background-size: contain;
	background-repeat: no-repeat;
}
@media (min-width: 834px) {
	.contents__area {
		padding: 0 2.1vw;
	}
	.contens_title {
		margin-top: 60px;
		margin-bottom: var(--Small__bottom);
		gap: 10px;
	}
	.contens_message {
		margin-bottom: var(--semi-Small__bottom);
	}
	
	.tab-list {
		margin-bottom: var(--semi-Small__bottom);
	}
	.tab-list-item {
		padding: 15px 0;
	}
	
	.is-btn-active::before,
	.tab-list-item:hover::before {
		width: 70px;
	}
	.search__list {
		gap: 17px;
	}

	.search__list li a {
		padding: 12px 22px
	}
	.company__list li dl div a {
		flex-direction: row;
		gap: 5vw;
		padding: 20px 10px;
	}
	.company__list li dl div a dt {
		width: 40%;
	}
	.company__list li dl div a dd {
		width: 60%;
		gap: 10px;
	}
}