@media screen and (min-width: 992px) {
  .contents-row {
    flex-wrap: wrap;
  }

  .contents-column-left {
    width: 500px;
    margin-right: .5rem;
  }

  .contents-column-right {
    width: calc(100% - 500px - 1rem);
    min-width: 250px;
    margin-left: .5rem;
  }
}

.contents-block {
  width: 100%;
  background-color: var(--background-color);
  box-shadow: 0px 4px 4px var(--color-box-shadow);
  border-radius: 10px;
}

.contents-row + .contents-row {
  margin-top: 1rem;
}

@media screen and (max-width: 991.98px) {
  .contents-column-left + .contents-column-right {
    margin-top: 1rem;
  }
}

.contents-block + .contents-block {
  margin-top: 1rem;
}

.area_title {
  padding: 0.25rem .5rem;
  margin-bottom: 0;
  border-left: none;
  height: 42px;
  background: var(--area_title-background);
  border-radius: 10px 10px 0px 0px;
  color: #fff;
}

.areaTitleFont {
  font-size: 18px;
  letter-spacing: .08em;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

#noticeArea {
  max-height: 152px;
}

.inquiryAreaInner {
  text-align:  center;
  background-color: var(--background-color-area);
  border-radius: 10px;
  width: 31%;
  height: auto;
}

.inquiryAreaInner:hover {
  cursor: pointer;
  background-color: var(--background-color-area-hover);
}

.inquiryAreaInner:hover .inquiryNoticeCount {
  color: var(--color-kotami-hover);
}

.inquiryAreaInner a {
  text-decoration: none;
}

.inquiryNoticeCount {
  font-size: 4.3rem;
  color: var(--color-kotami);
  line-height: 1.2;
  text-decoration: none;
}

.inquiryCircle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.inquiryAreaInner.tome .inquiryCircle {
  background: #85f2e9;
}

.inquiryAreaInner.tm .inquiryCircle {
  background: #f9f871;
}

.inquiryAreaInner.bm .inquiryCircle {
  background: #f96b62;
}

.inquiryText {
  font-size: .8rem;
  color: var(--color);
}

@media screen and (min-width: 992px) {
  .inquiryAreaInner.tome .inquiryText::after {
    content: "あなた宛の質問"
  }
  
  .inquiryAreaInner.tm .inquiryText::after {
    content: "チーム宛の質問"
  }
  
  .inquiryAreaInner.bm .inquiryText::after {
    content: "回答あり"
  }

  .inquirySpacer {
    width: 10px;
  }
}

@media screen and (max-width: 991.98px) {
  .inquiryAreaInner.tome .inquiryText::after {
    content: "あなた宛"
  }
  
  .inquiryAreaInner.tm .inquiryText::after {
    content: "チーム宛"
  }
  
  .inquiryAreaInner.bm .inquiryText::after {
    content: "回答あり"
  }

  .inquirySpacer {
    width: 1px;
  }
}

#categoryArea {
  padding-right: 7px!important;
  padding-left: 17px!important;
}

#categoryArea li {
  display: inline-block;
  vertical-align: top;
  background-color: var(--background-color-area);
  margin-right: 9px;
  margin-bottom: 9px!important;
}

#categoryArea li:hover {
  cursor: pointer;
  background-color: var(--background-color-area-hover);
}

@media screen and (min-width: 992px) {
  #categoryArea li {
    width: 110px;
    height: 110px;
  }
}

@media screen and (max-width: 991.98px) {
  #categoryArea li {
    width: calc((100% / 3) - 9px);
  }
}

#categoryArea li a {
  text-decoration: none;
}

#categoryArea li i {
  color: var(--color-kotami);
}

#categoryArea li:hover i {
  color: var(--color-kotami-hover);
}

#categoryArea li div.icon {
  font-size: 2rem;
}

.categoryName {
  font-size: .7rem;
  color: var(--color);
  min-height: 33.6px;
}