/***********************************************************************************************************************

tab.css

***********************************************************************************************************************/



/*** tab **********************************/
.tab {
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.tablist {
  /*flex: 0 0 32%;*/
  width: 16%;
  list-style-type: none;
  /*border: 1px solid #aaa;*/
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 15px;
	background-color: #fff;
}

.tablist:hover,
.tablist.active {
	color: #fff;
}

.tabcontents {
	padding: 20px 0;
}



/*** add **********************************/
.tablist .en{
	display: block;
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1.3rem;
	font-size: 13px;
	margin-bottom: 5px;
}



.tablist.bank {
	color: #954f0e;
	border: 1px solid #954f0e;
}
.tablist.bank:hover,
.tablist.bank.active {
	color: #fff;
	background: #954f0e;
}


.tablist.edu {
color: #004385;
	border: 1px solid #004385;
}
.tablist.edu:hover,
.tablist.edu.active {
	color: #fff;
	background: #004385;
}


.tablist.park {
color: #007f5a;
border: 1px solid #007f5a;
}
.tablist.park:hover,
.tablist.park.active {
color: #fff;
	background: #007f5a;
}


.tablist.calture {
color: #ef8337;
border: 1px solid #ef8337;
}
.tablist.calture:hover,
.tablist.calture.active {
	color: #fff;
	background: #ef8337;
}


.tablist.medi {
color: #595757;
	border: 1px solid #595757;
}
.tablist.medi:hover,
.tablist.medi.active {
	color: #fff;
	background: #595757;
}


.tablist.shopping {
	color: #ec7986;
	border: 1px solid #ec7986;
}
.tablist.shopping:hover,
.tablist.shopping.active {
	color: #fff;
	background: #ec7986;
}







@media screen and (max-width: 1024px) {
.tablist {
	font-size: 12px;
}
.tablist .en{
	font-size: 1.7rem;
	font-size: 17px;
}
}

@media screen and (max-width: 960px) {
.tablist {
	width: 32.333333%;
	margin-bottom: 1%;
}
}

@media screen and (max-width: 640px) {
.tablist {
	width: 49%;
	font-size: 12px;
	padding: 6px 0;
}
.tablist .en{
	font-size: 1.2rem;
	font-size: 12px;
	margin-bottom: 2px;
}
}



/*************************************************************************************
*************************************************************************************

print

*************************************************************************************
**************************************************************************************/

@media print {

}