article .date { font-size: 114%; font-weight: 600;margin-top: 80px;}
article h2 { font-size: 28px; font-weight: bold;line-height: 1.3; margin-top: 1.2rem;}
article .cat { font-size: 128%; line-height: 1.5; margin-top: 2.8rem;}
article .desc {margin-top: 4rem;}
.the-contents { margin-top: 4rem;}
@media only screen and (max-width: 782px) {
  article .date { margin-top: 7.5vw;}
  article h2 { font-size: 20px;}
}

.prev_next {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prev_next > div { width: 440px;}
.prev_next > p { width: calc(100% - 880px);}
.prev_next figure { text-align: center;}
.prev_next figure img { border-radius: 10px; max-width: 400px; height: auto;}
.prev_next h3 { font-size: 86%; position: relative; margin-bottom: 20px; font-weight: bold;}
.prev_next .prev h3 { padding-left: 100px;}
.prev_next .next h3 { padding-right: 100px; text-align: right}
.prev_next .prev h3 .arrow { right: auto; left: 35px; transform: rotate(180deg);}
.prev_next .next h3 .arrow { right: 35px; }
.prev_next .date { font-size: 75%; text-align: center;}
.prev_next h4 { font-size: 114%; text-align: center; font-weight: bold; line-height: 1.4;}
.prev_next .prev h3 { }
.go2index a { max-width: 85%;}

@media only screen and (max-width: 782px) {
  .prev_next {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: -2.5vw;
    width: calc(100% + 5vw);
  
  }
  .prev_next > div { width: calc(50% - 2.5vw);}
  .prev_next figure img { border-radius: 5px; width:100%;}
  .prev_next h3 { margin-bottom: 10px; letter-spacing: 0;}
  .prev_next .prev h3 { padding-left: 50px; }
  .prev_next .next h3 { padding-right: 50px;}
  .prev_next .prev h3 .arrow { left: 10px; transform: scale(0.8) rotate(180deg);}
  .prev_next .next h3 .arrow { right: 10px; transform: scale(0.8);}
  .prev_next .date { transform: scale(0.8);}
  .prev_next h4 { font-size: 12px;}

}

.beforeAfter {
  margin-top: 8rem;
  background: rgba(72, 190, 208, 0.15);
  border-radius: 15px;
  padding: 0px 80px 90px;
  text-align: center;
}
.beforeAfter h3 { padding-top: 70px; line-height: 1.2;}
.beforeAfter h3 .en { font-size: 50px; display: block; letter-spacing: 0.4rem; font-weight: 700;}
.beforeAfter h3 .jp { font-size: 18px; display: block; font-weight: bold;}
.beforeAfter ul {
  display: flex;
  width: calc(100% + 50px);
  flex-wrap: wrap;
}
.beforeAfter li {
  width: calc(33.333% - 50px);
  margin: 50px 50px 0 0;
}
.beforeAfter li img { width:100%; height: auto;}

@media only screen and (max-width: 782px) {
  .beforeAfter {
    margin-top: 5rem;
    border-radius: 10px;
    padding: 0px 5vw 5vw;
  }
  .beforeAfter h3 { padding-top: 35px;}
  .beforeAfter h3 .en { font-size: 25px;}
  .beforeAfter h3 .jp { font-size: 12px;}
  .beforeAfter ul {
    width: calc(100% + 5vw);
    margin-left: -2.5vw;
  }
  .beforeAfter li {
    width: calc(50% - 5vw);
    margin: 25px 2.5vw 0;
  }
}