.info main
{
    z-index: 0;
}

.genre-buttons {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 50px 0;
}
.page-top
{
    position: relative;
}
.il-kouyouju
{
    position: absolute;
        top: -30%;
        right: -5%;
        width: 25%;
        min-width: 112px;
        max-width: 160px;
}
/*.page-content
{
    position: relative;
    background-color: #f6f4ed;
    padding: 130px 100px 150px;
    margin: 0 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 50px 0;
    z-index: 5;
}*/
.genre-buttons button
{
  min-width: 120px;
  color: var(--control-color);
  border: 1px solid #46966e;
  line-height: 1.4;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: calc(14px * var(--font-scale));
  background: #fff;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  margin: 10px 10px;
}
.genre-buttons button.carent
{
    min-width: 120px;
    color: #fff;
    border: 1px solid #46966e;
    line-height: 1.4;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 999px;
    font-size: calc(14px * var(--font-scale));
    background: #46966e;
    text-decoration: none;
    text-align: center;
    transition: .2s;
    margin: 10px 15px;
}
.genre
{
  min-width: 120px;
  color: #fff;
  border: 1px solid #46966e;
  line-height: 1.4;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: calc(14px * var(--font-scale));
  background: #46966e;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  margin: 10px 15px;
}

.genre-buttons button:hover {
  background: #46966e;
  color: #fff;
}

.genre-buttons button.active {
  background: #46966e;
  color: #fff;
}

/* =========================
   おしらせ一覧
========================= */
.info-link
{
    width: 100%;
    text-decoration: none;
    color: #333;
    font-size: calc(16px * var(--font-scale));
}
.info-list
{
    display: flex;
    padding: 30px 10px;
    box-sizing: border-box;
    gap: 10px;
    border-top: 1px dotted #3b5d13ff;
    color: var(--control-color);
}
.info-wrapper
{
    border-bottom: 1px dotted #3b5d13ff;
}
.info-flex
{
    display: flex;
    gap: 10px;
}
.info-link:hover
{
    color: #3b5d13ff;
    opacity: 0.8;
}
/* =========================
   お知らせ詳細
========================= */

@media screen and (max-width:767px){
    .page-content
    {
        padding: 50px 5%;
    }
    .genre-buttons
    {
        margin: 25px 0;
        width: 100%;
    }
    .info-list
    {
        padding: 15px 0;
        flex-direction: column;
    }
    .info-flex
    {
        line-height: 1;
        align-items: center;
        
    }
    .genre
    {
        margin: 0;
    }
/*    .bg-illust
    {
        background-color: #46966e;
        aspect-ratio: 3/1;
        z-index: 1;
        margin-top: -11%;
    }*/
}