@charset "UTF-8";
main{
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 9.6rem;
}
.info-itemContainer{
  width: min(112rem,100%);
  margin-inline: auto;
  margin-bottom: 5.6rem;

  border-top: solid 3px var(--theme-color-brown);
}

.info-item{
  width: 100%;
  padding: 2.4rem 1.6rem;

  border-bottom: solid 3px var(--theme-color-brown);
}

.info-item a {
  position: relative;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 7.2rem;
  width: 100%;
  padding-right: 4rem;

  color: var(--theme-color-brown);
  line-height: 1.4;
}

.info-item > a::before {
  content: url(../img/index/info-arrow.svg);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.info-item a .tag{
  display: inline-block;
  padding: 4px 8px;

  color: #fff;
  background: var(--theme-color-brown);
  border-radius: 4px;
}
.info-item a .new{
  position: absolute;
  top: 50%;
  left: 10.4rem;
  transform: translateY(-50%);

  padding: 4px 8px;

  display: inline-block;
  color: var(--theme-color-brown);
  background: var(--theme-color);
  border-radius: 4px;
}
.info-item time {
  display: inline-block;
  width: 9.6rem;

  font-family: europa, sans-serif;
  font-weight: 700;
  font-style: normal;
}
@media (max-width : 1200px){
}
@media (max-width : 599px){
  .info-item a {
    position: relative;
  
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    row-gap: 1.6rem;

    width: 100%;
  }
  .info-item a .new{
    position: absolute;
    top: 11px;
  
    padding: 4px 8px;
  }
}