/* ↓ top ↓ ************************************************/
#contentsBody .top div.img p.cap span {
  display: inline-block;
}
#contentsBody .top {
  width: 100%;
  height: 64.2857vw;
  margin: 0;
  position: relative;
}
#contentsBody .top .img {
  width: 100%;
  padding-top: 64.285714vw;
  background: url(/content/dam/31sumai/mfr/X1901/asset/images/ownersvoice/img01.jpg) no-repeat;
  background-size: cover;
  transition: all 1s ease-out;
}
#contentsBody .top .img.bgImg.is-target {
  opacity: 0;
  transform: translateY(60px);
}
#contentsBody .top h2 {
  position: absolute;
  left: 5vw;
  bottom: 5vw;
  display: block;
  width: 30vw;
  margin: 0;
  padding: 21.403vw 9vw 2.5vw 2.5vw;
  background-color: #64b3de;
  transition: all 1s ease-out;
}
#contentsBody .top h2.is-target {
  opacity: 0;
  transform: translateY(-20px);
}
@media (max-width: 600px) {
  #contentsBody .top {
    height: 150vw;
  }
  #contentsBody .top .img {
    padding-top: 150vw;
    background-position: right top;
  }
  #contentsBody .top h2 {
    left: 8vw;
    bottom: 8vw;
    width: 50vw;
    padding: 32.855vw 10vw 5vw 5vw;
  }
}
/* ↑ top ↑ ************************************************/


.onrei {
  width: 100%;
  background-color: #449ed3;
  padding: 25px 0;
  margin-bottom: 120px;
  transition: all 1s ease-out;
}
.onrei.is-target {
  opacity: 0;
  transform: translateY(60px);
}
.onrei img {
  display: block;
  width: 80%;
  max-width: 828px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .onrei {
    margin-bottom: 100px;
  }
  .onrei img {
    width: 90%;
  }
}
@media (max-width: 480px) {
  .onrei {
    padding: 20px 0;
    margin-bottom: 80px;
  }
  .onrei img {
    width: 95%;
  }
}


#contentsBody > div.copy {
  text-align: center;
  margin: 0 auto 80px;
  transition: all 1s ease-out;
}
#contentsBody > div.copy h3 {
  position: relative;
  font-family: "A1明朝", 'A1 Mincho', serif;
  margin: 0;
}
#contentsBody > div.copy h3 span {
  display: block;
}
#contentsBody > div.copy h3 em {
  display: inline-block;
  font-size: 125%;
}
#contentsBody > div.copy h3 em br {
  display: none;
}
#contentsBody > div.copy h3 em::after {
  content: "";
  display: block;
  width: 102%;
  height: 0.4em;
  background-color: rgba(100, 179, 222, 0.3);
  z-index: -1;
  margin: -0.4em 0 0 -1%;
}
@media (max-width: 768px) {
  #contentsBody > div.copy {
    margin: 0 auto 70px;
  }
}
@media (max-width: 600px) {
  #contentsBody > div.copy h3 em br {
    display: inline-block;
  }
}
@media (max-width: 480px) {
  #contentsBody > div.copy {
    margin: 0 auto 60px;
  }
  #contentsBody > div.copy h3 em::after {
    width: 104%;
    height: 0.45em;
    margin: -0.4em 0 0 -2%;
  }
}


/* ↓ cont ↓ */
#contentsBody .cont {
  position: relative;
  width: 100%;
  margin: 0 auto calc(80px + 5vw);
}
#contentsBody .cont .copy {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 85vw;
  height: 30vw;
  margin: 0;
  padding: 3.571428vw 0 3.571428vw 5vw;
  background-color: #64b3de;
  transition: all 1s ease-out;
}
#contentsBody .cont .copy.is-target {
  opacity: 0;
}
#contentsBody .cont .copy h4 {
  margin: 0;
  color: #fff;
  font-size: 1.42857vw;
  font-weight: 400;
  font-family: "A1明朝", 'A1 Mincho', serif;
}
#contentsBody .cont .copy h4 > span {
  display: block;
}
#contentsBody .cont .copy img {
  width: 7.142857vw;
}
#contentsBody .cont .copy em {
  display: inline-block;
  color: #ff0;
  font-weight: 400;
  font-size: 180%;
  line-height: 1.3;
}
#contentsBody .cont .copy em sup {
  font-size: 33.3333%;
  top: -1.8em;
}
#contentsBody .cont .copy big {
  font-size: 130%;
}
#contentsBody .cont .copy small {
  display: block;
  color: #fff;
  font-weight: 400;
  font-size: 60%;
  line-height: 1.6;
}
#contentsBody .cont .copy a {
  position: relative;
  width: 21.42857vw;
  display: inline-block;
  color: #fff;
  font-weight: 400;
  font-size: 1.42857vw;
  letter-spacing: 0.05em;
  line-height: 1.4;
  border-bottom: 1px solid #fff;
}
#contentsBody .cont .copy a::after {
  content: "learn more >";
  font-family: "Times New Roman", serif;
  font-size: 70%;
  position: absolute;
  right: 0;
  bottom: 0;
}
#contentsBody .cont .copy div a:first-child {
  margin-bottom: 0.5em;
}
#contentsBody .cont .img {
  position: absolute;
  right: 0;
  bottom: -5vw;
  width: 40vw;
  margin: 0;
  padding: 0;
  transition: all 1s ease-out;
}
#contentsBody .cont .img.is-target {
  opacity: 0;
  transform: translate(60px, 0px);
}
#contentsBody .cont .img ul {
  width: 40vw;
  position: relative;
}
#contentsBody .cont .img ul li {
  display: block;
  width: 20vw;
  position: absolute;
}
#contentsBody .cont .img ul li:nth-child(1) {
  position: relative;
}
#contentsBody .cont .img ul li:nth-child(2) {
  right: 0;
  top: 0;
}
#contentsBody .cont .img ul li:nth-child(3) {
  right: 0;
  bottom: 0;
}
#contentsBody .cont.p07 {
  margin: 0 auto;
}
#contentsBody .cont.p02 .copy,
#contentsBody .cont.p04 .copy,
#contentsBody .cont.p06 .copy {
  padding-left: 30vw;
  margin-left: auto;
}
#contentsBody .cont.p07 .copy a {
  width: 31.42857vw;
}
#contentsBody .cont.p02 .img,
#contentsBody .cont.p04 .img,
#contentsBody .cont.p06 .img {
  right: auto;
  left: 0;
}
#contentsBody .cont.p02 .img.is-target,
#contentsBody .cont.p04 .img.is-target,
#contentsBody .cont.p06 .img.is-target {
  transform: translate(-60px, 0px);
}
@media (max-width: 1000px) {
  #contentsBody {
    padding-bottom: 24vw;
  }
  #contentsBody .cont {
    margin: 0 auto calc(80px + 28vw);
  }
  #contentsBody .cont .copy {
    width: 92%;
    height: auto;
    padding: 4vw 0 14vw 5vw;
  }
  #contentsBody .cont.p02 .copy,
  #contentsBody .cont.p04 .copy,
  #contentsBody .cont.p06 .copy {
    padding-left: 5vw;
  }
  #contentsBody .cont .copy h4 {
    font-size: 2.3vw;
    margin: 1em 0;
  }
  #contentsBody .cont .copy a {
    width: 35vw;
    font-size: 2.3vw;
  }
  #contentsBody .cont.p07 .copy a {
    width: 51vw;
  }
  #contentsBody .cont .copy img {
    width: 12vw;
  }
  #contentsBody .cont .img {
    bottom: -28vw;
    width: 60vw;
  }
  #contentsBody .cont .img ul {
    width: 60vw;
  }
  #contentsBody .cont .img ul li {
    width: 30vw;
  }
}
@media (max-width: 768px) {
  #contentsBody .cont {
    margin: 0 auto calc(70px + 28vw);
  }
}
@media (max-width: 600px) {
  #contentsBody {
    padding-bottom: 32vw;
  }
  #contentsBody .cont {
    margin: 0 auto calc(70px + 34vw);
  }
  #contentsBody .cont .copy {
    width: 95%;
    padding: 5vw 5vw 15vw;
  }
  #contentsBody .cont .copy h4 {
    font-size: 2.9vw;
    margin: 1.5em 0;
  }
  #contentsBody .cont .copy a {
    width: 44vw;
    font-size: 2.9vw;
  }
  #contentsBody .cont.p07 .copy a {
    width: 64vw;
  }
  #contentsBody .cont .copy img {
    width: 16vw;
  }
  #contentsBody .cont .img {
    bottom: -34vw;
    width: 72vw;
  }
  #contentsBody .cont .img ul {
    width: 72vw;
  }
  #contentsBody .cont .img ul li {
    width: 36vw;
  }
}
@media (max-width: 480px) {
  #contentsBody .cont {
    margin: 0 auto calc(60px + 40vw);
  }
  #contentsBody .cont .copy {
    padding: 5vw 5vw 18vw;
  }
  #contentsBody .cont .copy h4 {
    font-size: 3.8vw;
  }
  #contentsBody .cont .copy em {
    font-size: 170%;
  }
  #contentsBody .cont .copy small {
    font-size: 70%;
  }
  #contentsBody .cont .copy a {
    width: 56vw;
    font-size: 3.8vw;
  }
  #contentsBody .cont.p07 .copy a {
    width: 83vw;
  }
  #contentsBody .cont .copy img {
    width: 20vw;
  }
  #contentsBody .cont .img {
    bottom: -40vw;
    width: 80vw;
  }
  #contentsBody .cont .img ul {
    width: 80vw;
  }
  #contentsBody .cont .img ul li {
    width: 40vw;
  }
}
/* ↑ cont ↑ */