/*=======================================================
common
=======================================================*/
.cat {
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  padding: 2px 13px 0;
  width: fit-content;
  min-width: 108px;
  text-align: center;
  background: #737373;
  display: grid;
  place-content: center;
}
.cat.--is-active {
  background: #003300;
}
.cat.--category {
  background: #559355;
}
.cat.--kind {
  background: #dbc14c;
  color: #222222;
}
@media (hover: hover) {
  .cat.--kind:hover {
    color: #222;
  }
}
.cat.--region {
  border: 1px solid #737373;
  background: #fff;
  color: #737373;
}
@media (hover: hover) {
  .cat.--region:hover {
    color: #737373;
  }
}
@media (hover: hover) {
  .cat:hover {
    color: #fff;
  }
}

@media screen and (max-width: 768px) {
  .cat {
    padding: 2px 8px 0;
    min-width: 80px;
  }
}
/*=======================================================
event-single
=======================================================*/
#event-single {
  letter-spacing: 0.07em;
  line-height: 1.5;
}
#event-single .intro {
  margin-bottom: 60px;
}
#event-single .intro-ttl {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  padding: 11px 30px 10px;
  background: #003300;
  margin-bottom: 20px;
}
#event-single .intro-box {
  margin-top: 21px;
  display: grid;
  grid-template: "imgwrapper overview";
  grid-template-columns: 352px 1fr;
  grid-template-rows: auto 1fr;
  gap: 22px 30px;
}
#event-single .intro-cat-wrapper {
  grid-area: cat-wrapper;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-self: start;
}
#event-single .intro-cat-wrapper + .intro-cat-wrapper {
  margin-top: 12px;
}
#event-single .intro-imgwrapper {
  grid-area: imgwrapper;
  align-self: start;
}
#event-single .intro-overview {
  grid-area: overview;
}
#event-single .intro-overview-ttl {
  padding: 9px 16px 8px;
  background: #737373;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}
#event-single .intro-overview-dttl {
  margin-bottom: 10px;
  padding: 3px 16px 8px;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  border-bottom: 1px solid #d3d3d3;
}
#event-single .intro-overview-dttl::before {
  position: absolute;
  content: "";
  width: 5px;
  height: calc(100% - 6px);
  background: #003300;
  top: 0;
  left: 0;
}
#event-single .intro-overview-ditem {
  margin-bottom: 20px;
}
#event-single .intro-overview-ditem a {
  color: #0000ff;
}
#event-single .contents.--not-img-outer .contents-box {
  grid-template-columns: auto;
}
#event-single .contents-ttl {
  padding: 9px 30px 8px;
  background: #737373;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}
#event-single .contents-box {
  display: flex;
  justify-content: space-between;
  gap: 28px;
}
#event-single .contents-box + .contents-box {
  margin-top: 20px;
}
#event-single .contents-conts {
  flex: 1;
}
#event-single .contents-conts h4 {
  font-size: 18px;
  font-weight: 700;
}
#event-single .contents-conts h4 + * {
  margin-top: 10px;
}
#event-single .contents-conts p + * {
  margin-top: 20px;
}
#event-single .contents-img-wrapper {
  width: 496px;
}
#event-single .contents-img-wrapper + .contents-img-wrapper {
  margin-top: 20px;
}
#event-single .return {
  background: #d98523;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  width: fit-content;
  text-decoration: none;
  gap: 10px;
  align-items: center;
  margin: 60px auto 0;
}
#event-single .return::before, #event-single .return::after {
  content: "";
}
#event-single .return::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  transform: translateY(-2px);
}

@media screen and (max-width: 768px) {
  #event-single .intro-ttl {
    font-size: 20px;
    padding: 5.5px 15px 5px;
    margin-bottom: 20px;
  }
  #event-single .intro-box {
    grid-template: "imgwrapper" "overview";
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 30px;
  }
  #event-single .intro-imgwrapper > img {
    width: 100%;
  }
  #event-single .intro-overview-ttl {
    padding: 9px 16px 8px;
    font-size: 18px;
  }
  #event-single .intro-overview-dttl {
    font-size: 16px;
  }
  #event-single .contents-ttl {
    padding: 9px 15px 8px;
    font-size: 18px;
  }
  #event-single .contents-box {
    flex-wrap: wrap;
    gap: 14px;
  }
  #event-single .return {
    margin: 40px auto 0;
  }
}