@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald&family=Roboto+Condensed:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap&text=！!");
.dlc h4 {
  font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: normal;
  font-size: 150%;
  text-align: center;
  margin-top: 5%;
}
.dlc .dlc__info {
  padding-bottom: 5%;
}
.dlc .dlc__info .dlc__info__text {
  border: 1px #666 solid;
  padding: 1em;
  font-size: 80%;
}
.dlc .dlc__info .dlc__info__text b {
  font-size: 110%;
}
.dlc .dlc__info .dlc__items__selecter {
  margin-top: 3%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.dlc .dlc__info .dlc__items__selecter a {
  width: 16%;
  margin: 0.25%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.7em 1em;
  text-align: center;
  text-decoration: none;
  color: #EEE;
  border: 1px #999 solid;
  border-radius: 5px;
}
.dlc .dlc__info .dlc__items__selecter a.select {
  background-color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 640px) {
  .dlc .dlc__info .dlc__items__selecter a {
    width: 32%;
    margin: 1% 0.25%;
  }
}
.dlc .dlc__items__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 2%;
  border: 1px #666 dotted;
  border-width: 0 0 1px;
  margin-bottom: 3%;
  padding-bottom: 5%;
}
.dlc .dlc__items__list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 49.6%;
  margin: 0.5% 0;
  padding: 0.7em 1em;
  background-color: rgba(255, 255, 255, 0.4);
  text-align: center;
  border-radius: 5px;
  font-size: 80%;
  text-decoration: none;
  color: #FFF;
}

.dlc__container .dlc__item,
.modaal-content-container .dlc__item {
  max-width: 1000px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #222;
  margin: 2% auto;
  padding: 1em;
  border-radius: 10px;
  font-size: 90%;
}
.dlc__container .dlc__item h5,
.modaal-content-container .dlc__item h5 {
  background-color: rgba(106, 176, 105, 0.6);
  color: #123a16;
  padding: 0.5em;
  font-size: 110%;
  border-radius: 7px 7px 0 0;
}
.dlc__container .dlc__item .dlc__item__info .dlc__price,
.modaal-content-container .dlc__item .dlc__item__info .dlc__price {
  background-color: rgba(247, 255, 164, 0.6);
  padding: 0.2em 0.5em;
  border-radius: 0 0 7px 7px;
}
.dlc__container .dlc__item .dlc__item__info .dlc__price::before,
.modaal-content-container .dlc__item .dlc__item__info .dlc__price::before {
  content: "価格：";
}
.dlc__container .dlc__item .dlc__item__info .dlc__detail,
.modaal-content-container .dlc__item .dlc__item__info .dlc__detail {
  display: flex;
  padding: 2% 1%;
}
.dlc__container .dlc__item .dlc__item__info .dlc__detail .dlc__detail__text,
.modaal-content-container .dlc__item .dlc__item__info .dlc__detail .dlc__detail__text {
  width: 66%;
  margin-right: 2%;
}
.dlc__container .dlc__item .dlc__item__info .dlc__detail .dlc__detail__text aside,
.modaal-content-container .dlc__item .dlc__item__info .dlc__detail .dlc__detail__text aside {
  border: 1px #666 solid;
  margin-top: 2%;
  padding: 1em;
  font-size: 80%;
}
.dlc__container .dlc__item .dlc__item__info .dlc__detail .dlc__detail__text aside b,
.modaal-content-container .dlc__item .dlc__item__info .dlc__detail .dlc__detail__text aside b {
  display: block;
  font-size: 120%;
  text-align: center;
  font-weight: bold;
  padding: 0.3em 1em;
  background-color: #AAA;
  margin-top: -0.8em;
  margin-left: -0.8em;
  width: calc(100% + 1.6em);
}
.dlc__container .dlc__item .dlc__item__info .dlc__detail .dlc__img,
.modaal-content-container .dlc__item .dlc__item__info .dlc__detail .dlc__img {
  width: 30%;
}
.dlc__container .dlc__item .dlc__item__info .dlc__detail .dlc__img img,
.modaal-content-container .dlc__item .dlc__item__info .dlc__detail .dlc__img img {
  display: block;
  width: 100%;
}
.dlc__container .dlc__item a.dlc__notice__open,
.modaal-content-container .dlc__item a.dlc__notice__open {
  display: block;
  background-color: rgba(49, 49, 49, 0.757);
  margin-top: 2%;
  padding: 0.5em;
  padding-left: 50px;
  position: relative;
  text-decoration: none;
  color: #FFF;
}
.dlc__container .dlc__item a.dlc__notice__open::before,
.modaal-content-container .dlc__item a.dlc__notice__open::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 10px);
  left: 20px;
  width: 10px;
  height: 10px;
  border: 2px #111 solid;
  border-color: transparent #FFF #FFF transparent;
  transform: rotate(45deg);
  transition: transform 0.2s 0s ease-in-out, top 0.2s 0s ease-in-out;
}
.dlc__container .dlc__item a.dlc__notice__open.open::before,
.modaal-content-container .dlc__item a.dlc__notice__open.open::before {
  top: calc(50% - 3px);
  transform: rotate(225deg);
}
.dlc__container .dlc__item .dlc__notice,
.modaal-content-container .dlc__item .dlc__notice {
  border: 1px rgba(49, 49, 49, 0.757) solid;
  background-color: rgba(255, 255, 255, 0.4);
  padding: 1em;
  display: none;
}
.dlc__container .dlc__item .dlc__notice h6,
.modaal-content-container .dlc__item .dlc__notice h6 {
  font-size: 100%;
  font-weight: bold;
  padding: 0;
  margin: 3% 0 0;
}
.dlc__container .dlc__item .dlc__notice h6::before,
.modaal-content-container .dlc__item .dlc__notice h6::before {
  content: "■";
}
.dlc__container .dlc__item .dlc__notice h6:nth-of-type(1),
.modaal-content-container .dlc__item .dlc__notice h6:nth-of-type(1) {
  margin-top: 0;
}
.dlc__container .dlc__item .dlc__notice .notice__box,
.modaal-content-container .dlc__item .dlc__notice .notice__box {
  border: 1px #BBB solid;
  padding: 1em;
  font-size: 80%;
}
.dlc__container .dlc__item li,
.modaal-content-container .dlc__item li {
  margin: 0.5em 0;
}