@charset "UTF-8";

/* フェードインアニメーションの定義 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* CSS Document */
@media print, screen and (min-width: 768px) {
.tabs {
width:100%;
margin:40px auto 0;
}

.tab-list {
display: flex;
justify-content: center;
}

.tab-item {
border-radius: 5px 5px 0 0;
background-color: #0B318F;
padding: 0.5em 1.2em;
cursor: pointer;
margin: 0 .5%;
font-size: 2rem;
font-weight: bold;
color: #FFF;
}

.tab-content {
padidng:15px 0;
box-sizing: border-box;
}

.tab-panel {
display: none;
}

.tab-item.active {
background-color: #d00d21;
color: #fff;
font-size: 2rem;
font-weight: bold;
}

.tab-panel.active {
display: block;
animation: fadeIn 1s ease-in-out forwards;
}


}
/*sp*/
@media only screen and (max-width: 767px) {
.tabs {
width:100%;
margin:40px auto 0;
}

.tab-list {
display: flex;
justify-content: center;
}

.tab-item {
border-radius: 5px 5px 0 0;
background-color: #0B318F;
padding: 0.5em 1em;
cursor: pointer;
margin: 0 .5%;
font-size: .9rem;
color: #FFF;
font-weight: bold;
}

.tab-content {
padidng:15px 0;
box-sizing: border-box;
}

.tab-panel {
display: none;
}

.tab-item.active {
background-color: #d00d21;
color: #fff;
font-weight: bold;
}

.tab-panel.active {
display: block;
animation: fadeIn 1s ease-in-out forwards;
}


}