@charset "UTF-8";

.mv .img .notes{
  right: inherit;
  left: 0;
  bottom: 0;
  color: #fff;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.4+0,0+100 */
  background: linear-gradient(to right,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  padding: 10px;
  width: 80%;
  display: block;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .mv .img .notes{
    background: none;
    padding: 10px;
    color: #000;
  }
}

.conts{
}

.conts .head{
  background-color: #6192B6;
  padding: 50px 0;
}
.conts .head .txt{
  text-align: center;
  font-size: clamp(14px, 1.8vw, 20px);
  color: #fff;
  line-break: 1.8;
}
.intro{
  padding: 130px 0;
}
.intro img{
  display: block;
  max-width: 390px;
  width: 90%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .conts .head{
    padding: 30px 0;
  }
  .intro{
    padding: 40px 0;
  }
  .intro img{
    display: block;
    max-width: 220px;
    width: 80%;
  }
}

.conts01 {
  overflow-x: hidden;
}
.conts01 li{
  position: relative;
  margin: 0 0 150px;
}
.conts01 li .in{
  max-width: 1165px;
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.conts01 li .in:before{
  content: '';
  position: absolute;
  top: 50%;
  height: 90%;
}
.conts01 li:nth-child(odd) .in:before{
  background: #EBF1F7;
  width: 200%;
  left: -130%;
  transform: translateY(-50%) skewX(25deg);
}
.conts01 li:nth-child(even) .in:before{
  background: #EBF1F7;
  width: 200%;
  right: -130%;
  transform: translateY(-50%) skewX(-25deg);
}
.conts01 li .in .flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 1050px;
  position: relative;
  z-index: 1;
}
.conts01 li:nth-child(even) .in .flex{
  flex-flow: row-reverse;
  margin-left: auto;
}
.conts01 li .in .img{
  width: 50%;
}
.conts01 li .in .txt{
  width: 45%;
}
@media screen and (max-width: 767px) {
  .conts01 li{
    margin: 0 0 70px;
  }
  .conts01 li .in:before{
    top: -5%;
    transform: none;
    height: 85%;
  }
  .conts01 li:nth-child(odd) .in:before{
    transform: skewX(15deg);
  }
  .conts01 li:nth-child(even) .in:before{
    transform: skewX(-15deg);
  }
  .conts01 li .in .flex{
    display: block;
  }
  .conts01 li .in .img{
    width: 100%;
    margin-bottom: 20px;
  }
  .conts01 li .in .txt{
    width: 100%;
  }
}

.conts02{
  padding-block: 100px;
  overflow-x: hidden;
}
.conts02 .head{
  padding: 0;
  background: none;
}
.conts02 .txt{
  padding: 130px 0;
}
.conts02 .txt img{
  display: block;
  max-width: 298px;
  width: 90%;
  margin: 0 auto;
}
.conts02 .inner{
  position: relative;
}
.conts02 .inner:before{
  content: '';
  position: absolute;
  top: 50%;
  height: 90%;
}
.conts02 .inner:before{
  background: #EBF1F7;
  width: 200%;
  right: -130%;
  transform: translateY(-50%) skewX(-25deg);
}
.conts02 .inner .flex{
  max-width: 1165px;
  width: 90%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
}
.conts02 .inner .flex .support{
  padding-left: 10%;
  width: 55%;
}
.conts02 .inner .flex .img{
  width: 40%;
}
@media screen and (max-width: 767px) {
  .conts02{
    padding-block: 50px;
  }
  .conts02 .txt{
    padding: 80px 0;
  }
  .conts02 .txt img{
    max-width: 200px;
    width: 80%;
  }
  .conts02 .inner:before{
    top: -5%;
    height: 70%;
  }
  .conts02 .inner:before{
    right: -125%;
   transform: skewX(-15deg);
  }
  .conts02 .inner .flex{
    display: block;
  }
  .conts02 .inner .flex .support{
    padding: 0;
    margin: 0 0 30px;
    width: 100%;
  }
  .conts02 .inner .flex .img{
    width: 80%;
    margin: 0 auto;
  }
}