@charset "UTF-8";

.culture-table *{
box-sizing: border-box;
}

.culture-table{
width: 100%
}

.culture-table a{
transition: all 0.3s;
}

.culture-table a:hover{
opacity: 0.8;
}

.culture-table tbody{
width: 100%;
}

.culture-table > tbody >tr > th{
width: 40%;
background: #D1D57B;
}

.culture-table > tbody >tr >td{
width: 60%;
padding: 15px;
}

.culture-table > tbody >tr >td span{
color: #fff;
    border-radius: 5px;
    width: 100px;
    display: inline-block;
    text-align: center;
    line-height: 1.5em;
}


@media (max-width: 768px){
.culture-table > tbody >tr > th{
width: 100%;
display: block;
padding: 15px 10px;
}

.culture-table > tbody >tr >td{
width: 100%;
display: block;
}

.culture-table > tbody >tr >td span{
display: block;
}

.culture-table > tbody >tr >td a{
display: block;
    width: fit-content;
}

}


/*==============
テーブルの中の横並び部分の設定
===============*/

.inner-table{
width: 100%;
margin-top: 10px
}

.inner-table th{
width: 40%;
background: #77695d;
color: #fff;
}

.inner-table td{
width: 60%;
padding: 10px;
}


@media (max-width: 768px){
.inner-table th{
width: 100%;
display: block;
padding: 10px
text-align: left;
}

.inner-table td{
width: 100%;
display: block;
}
}