.communication {
  overflow: hidden;
  margin: 0 auto;
  padding-bottom: 30px;
  max-width: 680px;
}
.communication * {
  box-sizing: content-box;
}
.communication img {
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  .communication img {
    width: auto;
  }
}
.communication ul {
  list-style: none;
  list-style-position: outside;
}
@media screen and (max-width: 767px) {
  .communication .pc {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .communication .sp {
    display: none;
  }
}
.communication__head {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .communication__head {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 768px) {
  .communication-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 30px;
  }
}
.communication-item__block {
  margin-bottom: 64px;
}
@media screen and (min-width: 768px) {
  .communication-item__block {
    margin-bottom: 96px;
  }
}
.communication-item__block:last-of-type {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .communication-item__thumb {
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .communication-item__thumb {
    -ms-flex-order: 2;
    order: 2;
    width: calc(100% - 22px - 370px);
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .communication-item__contents {
    -ms-flex-order: 1;
    order: 1;
    width: 370px;
  }
}
.communication-item__ttl {
  border-bottom: 2px solid #009fe8;
  margin: 0 0 20px;
  padding: 0 0 15px;
  text-align: center;
}
.communication-item__ttl img {
  margin: 0 auto;
}
.communication-item__subttl {
  margin: 0 0 10px;
  padding: 0;
}
.communication-item__subttl img {
  width: auto;
}
.communication-item__feature {
  margin: 0 0 20px;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .communication-item__feature {
    margin-bottom: 40px;
  }
}
.communication-item__feature > li {
  border-radius: 10px;
  margin-bottom: 10px;
  padding: .25em .5em;
  font-size: 20.8px;
  font-size: 1.3rem;
  text-align: center;
}
.communication-item__feature > li:last-child {
  margin-bottom: 0;
}
.communication-item__feature.blue > li {
  background-color: #d5f0fb;
}
.communication-item__feature.pink > li {
  background-color: #fadeeb;
}
.communication-item__feature.green > li {
  background-color: #d9f1da;
}
.communication-item__feature.orange > li {
  background-color: #fce6cc;
}
.communication-item__feature.mintgreen > li {
  background-color: #caeaea;
}
.communication-item__feature.lightred > li {
  background-color: #fceaea;
}
.communication-item__feature.yellowgreen > li {
  background-color: #f2f8e5;
}
.communication-item__feature.darkpink > li {
  background-color: #f1dddd;
}
.communication-item__feature.lightbrown > li {
  background-color: #efe3d8;
}
.communication-item__feature.purple > li {
  background-color: #e2daea;
}
.communication-item__txt {
  margin: 0 0 20px;
  font-size: 20.8px;
  font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
  .communication-item__txt {
    margin-bottom: 40px;
  }
}
.communication-item__link {
  text-align: center;
}
.communication-item__link a {
  display: inline;
}