/* ---------------------------------------------------------------- 
 * network.css - 業務ネットワーク
 * 追加日： 2026/07/29
 * ---------------------------------------------------------------- */
@import url("common.css");

/* [layout] */
.detail-common .detail-common__body {
	flex-direction: column;
}

.col2Main {
}
.col2Main_L {
	width: 100%;
	min-width: 350px;
	max-width: calc ( 100% - 670px );
}
.col2Main_R {
	width: 100%;
	/* min-width: 670px; */
	/* max-width: 670px; */
}
.col3Main {}
.col3Main>.ntw_card {
	/* flex: 1; */
	/* flex-basis:; */
	width: calc((100% - (20px * 2)) / 3); 
	box-sizing: border-box;
	margin: 0;
}
 

/* [contents header] */
.network_header {
	position: relative;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
.network_header:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(184deg, #C6AE5C 0%, #A88817 90%);
}


/* [tab] */
.content_area {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 30px 20px;
}
.tab-container {
	display: flex;
	flex-wrap: wrap;
}
.tab-container {
	margin: 0 0 15px;
	gap: 15px;
}
.tab {
	box-sizing: border-box;
	width: calc((100% - (15px * 4)) / 5); 
	padding: 10px 20px;
	color: #AA9859;
	background: #FFFFFF;
	border: 1px solid #AA9859;
	border-radius: 3px;
	text-align:center;
	padding: 10px;
	cursor: pointer;
}
.tab.active {
	color: #FFF;
	background: #AA9859;
}
.content { display: none; }
.content.show { display: block; }

/* [img] */
.thum {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}
.thum img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.eyecatch {
	width: 100%;
	aspect-ratio: 41 / 34;
	overflow: hidden;
}
.eyecatch img {
	width: 100%;
	height: auto;
	display: block;
}

/* [heading] */

/* [contents header] */

/* [link] */

/* [side] */

/* [frame] */

/* [table] */

/* [list] */
.ntwDl {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	padding: 15px 0px;
}	
.ntwDl dt{
	display: block;
	width: 100%;
	max-width: 140px;
	margin-top: 1em;
	padding: .25em 1em;
	text-align: center;
	color: #FFF;
	background: #0E3671;
}
.ntwDl dd{
	display: block;
	max-width: calc(100% - 140px);
	min-width: calc(100% - 140px);
	margin-top: 1em;
	padding: .25em 1em; 
}

/* [card] */
.ntw_card {
	background: #FFF;
	border: 1px solid #AA9859;
	border-radius: 3px;
	padding: 20px 20px 5px;
}
.ntw_card .ntwDl dt{
	max-width: 60px;
	font-size: .875em;
	margin-top: .85em;
	padding: .125em .5em;
}
.ntw_card .ntwDl dd{
	max-width: calc(100% - 60px);
	min-width: calc(100% - 60px);
	margin-top: .85rem;
	padding: .125em .5em;
}

.card_head {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	position: relative;
}
.card_head:before {
	content: '';
	display: block;
	position: absolute;
	width: 1.25em;
	height: 1.25em;
	top: calc( 50% - .6em );
	right: 0;
	border-radius: 50%;
	background: linear-gradient(184deg, #C6AE5C 0%, #A88817 90%);
}
.card_head:after {
	content: '';
	display: block;
	position: absolute;
	width: .8rem;
	height: .8rem;
	top: calc( 50% - .25em );
	right: .5em;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	transform: rotate(45deg);
	transition: .3s all;
}



/* [media screen] */
/* --------------------
 *  450px
 *  769px
 * 1000px
 * 1200px
 * 1200px
 * -------------------- */
@media screen and (min-width: 769px) and (max-width: 1200px) {
	.col3Main>.ntw_card {
		width: calc((100% - (20px * 1)) / 2);
	}
}
@media screen and (max-width: 768px) {
	.col2Main {
		flex-direction: column;
	}
	.col3Main>.ntw_card {
		width: 100%;
	}
	.tab{
		width: calc((100% - (15px * 2)) / 3);
	}
}
@media screen and (max-width: 600px) {
	.ntwDl {
		flex-direction: column;
	}
	.ntwDl dd{
		margin-top: .25em;
		max-width: 100%;
	}
	.ntw_card .ntwDl dd{
		max-width: 100%;
		min-width: 100%;
		margin-top: .125em;
	}
}
@media screen and (max-width: 450px) {
	.col2Main_L {
		min-width: 100%;
	}
	.tab{
		width: calc((100% - (15px * 1)) / 2);
	}
}