@charset "utf-8";

/* ------------------------------------------------------------------------ */
/*  about
 
/* ------------------------------------------------------------------------ */
#about {
	margin-top: 100px;
}
#about .tabs {
	margin: 0 auto;
}
#about .tab-list {
	display: flex;
	gap:10px;
	border-bottom: 2px solid #005fad;
	align-items: flex-end;
}
#about .tab-item a{
	border-radius: 8px 8px 0 0;
	background-color: #005fad;
	color: #fff;
	border:none;
	padding: 15px;
	cursor: pointer;
	max-width: 200px;
	width: 100%;
	font-size: 1.6rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}
#about .tab-item.active a {
	background-color: #fff;
	border: solid 2px #005fad;
	color: #005fad;
	border-bottom: none;
}
#about .tab-panel {
	display: none;
}
#about .tab-panel.active {
	display: block;
}
/* tabcontents　共通
--------------------------------------------------------------------------- */
#about .tab_contents{
	margin: 50px 0;
	text-align: left;
}
#about .tab_contents h3 {
	font-size: 3.0rem;
	font-weight: bold;
    line-height: 1.8;
    border-bottom: 4px solid #00a0e9;
}
#about .tab_contents h3 + .tab_flex{
	padding-top: 40px;
}
#about .tab_contents .tab_flex{
	display: flex;
	align-items: flex-start;
	gap:0 40px;
	
}
#about .tab_contents .tab_flex p{
	line-height: 2;
}
#about .tab_contents .tab_flex p + p{
	padding-top: 18px;
}
#about .tab_contents table{
	margin-top: 40px;
	border:1px solid #9fb5c7;
	border-collapse:collapse;
	width: 100%;
}
#about .tab_contents table th{
	background-color: #dcedf5;
	font-weight: bold;
/*	width: 280px;*/
	padding: 15px 25px;
}
#about .tab_contents table td{
	padding: 15px 25px;
	color: #000000;
}
#about .tab_contents table td p{
	color: #005fad;
}
#about .tab_contents table td p::after{
	content: "\f1c1";
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	color: #bd2626;
}
#about .tab_contents table td p span{
	color: #000000;
}
/* tabcontents01 近畿生乳販連とは
--------------------------------------------------------------------------- */

#about .tab-panel.one .tab_contents .tab_flex img{
	max-width: 420px;
	width: 100%;
}
#about .tab_contents.two{
	margin: 85px 0;
}
/* tabcontents02 機構図
--------------------------------------------------------------------------- */
#about .tab-panel.two .tab_contents img{
	max-width: 800px;
	width: 100%;
	margin:40px auto 0;
	display: block;
}
/* tabcontents03　会員一覧
--------------------------------------------------------------------------- */
#about .tab_contents .list{
	margin-top: 30px;
	margin-left: 40px;
}
#about .tab_contents .list h4{
	font-size: 2.6rem;
	font-weight: bold;
	color: #005fad;
}
#about .tab_contents .list li + li{
	margin-top: 60px;
}
#about .tab_contents .list .listflex{
	display: flex;
	align-items: center;
	gap: 15px;
    margin-top: 20px;
}
#about .tab_contents .list a{
	color: #005fad;
	font-weight: bold;
	display: flex;
    align-items: center;
    gap: 10px;
	margin-top: 10px;
	line-height: 1;
}
#about .tab_contents .list a::before{
	content: "\f35a";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
	font-size: 2.0rem;
	margin-top: 3px;
}
#about .tab_contents .list a::after{
    content: "";
    background-image: url(/common/img/icon/icon_link_01.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: inline-block;
    width: 17px;
    height: 13px;
    margin-top: 5px;
}
@media screen and (max-width: 1024px) {
	#about .tab_contents .tab_flex{
		display: block;
	}
	#about .tab_contents .tab_flex .tab_textarea{
		margin-top: 30px;
	}
	#about .tab_contents .list{
		margin:40px 0 0 ;
	}
	#about .tab_contents .list li + li{
		margin-top: 40px;
	}
	#about .tab_contents .list a::after{
		margin-top: 3px;
	}
}
@media screen and (max-width: 768px) {
	#about {
		margin-top: 60px;
	}
	#about .tab_contents{
		margin: 50px 0 0;
	}
	#about .tab_contents h3 {
		font-size: 2.0rem;
	}
	#about .tab-list{
		overflow: auto;
        max-width: 830px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
	}
	#about .slidetext{
		font-size: 1.2rem;
		text-align: left;
		padding-top: 10px;
	}
	#about .tab_contents .list a::before,#about .tab_contents .list a::after{
		font-size:1.8rem;
	}
/*	#about .tab_contents table th{
		width: 28%;
	}*/
	#about .tab_contents .list h4{
		font-size: 1.8rem;
	}
	#about .tab-item a{
		font-size: 1.4rem;
	}
	#about .tab_contents.two{
		margin: 60px 0 0;
	}
}
@media screen and (max-width: 600px) {

	#about .tab_contents table tr{
		display: grid;
	}
	#about .tab_contents table th{
		width: 100%;
	}
	#about .tab_contents table td,#about .tab_contents table th{
		padding: 10px 15px;
		border: 1px solid #dcedf5;
	}
	#about .tab_contents .list .listflex{
		display: block;
		margin-top: 10px;
	}
}