/*tabの形状*/
.item-2023{
	padding: 10px;
}
.tab{
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
}
.tab li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
    font-size: 1.3rem;
    color: var(--black);
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:var(--yellow);
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}
.area ul li{
    padding: 10px;
    border-top: 1px solid #ccc;
    font-size: 1rem;
}
.area ul li:first-child{
	border-top: none;
}
/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

main #item-2023 .area dl{
    display: flex;
    flex-wrap: wrap;
}
main #item-2023 .area dl dt{
    width: 15%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
main #item-2023 .area dl  dd{
    width: 85%;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
main #item-2023 .area dl dt:last-of-type,
main #item-2023 .area dl dd:last-child{
  border-bottom: none;
}
main #item-2023 .area ul li a:hover,main #item-2023 #meisi-n dl dd a:hover{
	 text-decoration: underline;
	 color: var(--yellow);
}