@charset 'utf-8';

/* メインビジュアル */
.mv_inner {
  position: relative;
  padding-top: 50%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.washi .mv_inner {
  background-image: url("../img/washi-mv.jpg");
}
.washi .mv_catch {
  position: absolute;
  width: 35%;
  left: 6%;
  bottom: 11.2%;
}
@media screen and (max-width:767px) {
  .mv_inner {
    height: auto;
    padding-top: 134%;
  }
  .washi .mv_inner {
    background-image: url("../img/washi-mv-sp.jpg");
  }
  .washi .mv_catch {
    width: 69.33%;
    left: 5.3%;
    bottom: 5%;
  }
}

/* コピー */
.copy .inner {
  padding-top: 75px;
  padding-bottom: 75px;
}
.copy_ttl {
  text-align: center;
  font-size: 9rem;
  font-weight: bold;
  line-height: 1;
  margin: 0;
  margin-bottom: 50px;
  color: #4D4C4C;
}
.copy_ttl_eng {
  display: block;
  font-size: 3rem;
  letter-spacing: 1px;
  line-height: 1;
}
.copy_lead {
  font-size: 2.5rem;
  font-size: 25px;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 4px;
  text-align: center;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .copy .inner {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .copy_ttl_eng {
    font-size: 1.8rem;
  }
  .copy_ttl {
    font-size: 4.2rem;
    margin-bottom: 29px;
  }
  .copy_lead {
    font-size: 1.6rem;
    font-weight: 400;
  }
}


/* sec01 */
.img-wrap {
  position: relative;
}
.washi .img-wrap, .drynamic-through .img-wrap {
  margin-bottom: 50px;
}
.washi .txt {
  font-size: 1.5rem;
  letter-spacing: 3.5px;
  line-height: 1.66;
}
.washi .over-txt-wrap,
.drynamic-through .over-txt-wrap {
  position: absolute;
  top: 50%;
  left: 4.5%;
  transform: translateY(-50%);
  max-width: 400px;
  color: #fff;
}
.washi .sub-ttl, .drynamic-through .sub-ttl {
  font-weight: bold;
  text-align: left;
  line-height: 1.66;
  margin-bottom: 10px;
}

.washi ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
}
.washi li {
  width: 50%;
}
.washi .img-txt-wrap, .drynamic-through .img-txt-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-left: 9%;
  padding-right: 9%;
}
.washi .mb110 {
margin-bottom: 110px!important;
}
@media screen and (max-width: 767px) {
  .washi .over-txt-wrap, .drynamic-through .over-txt-wrap {
    position: initial;
    top: initial;
    left: initial;
    transform: initial;
    max-width: initial;
    color: #000;
    padding-left: 15px;
    padding-right: 15px;
  }
  .washi .sub-ttl, .drynamic-through .sub-ttl {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 10px;
    padding-top: 20px;
  }
  .washi .img-wrap .list, .drynamic-through .img-wrap .list {
    flex-direction: column;
  }
  .washi .img-wrap .item, .drynamic-through .img-wrap .item {
    width: 100%;
  }
  .washi .img-txt-wrap, .drynamic-through .img-txt-wrap {
    display: initial;
    padding-left: 0;
    padding-right: 0;
  }
  .order_reverse .item:nth-of-type(2) {
    order: 1;
  }
  .order_reverse .item:nth-of-type(1) {
    order: 2;
  }
  .washi .mb110 {
    margin-bottom: 40px !important;
  }
}



/*sec03*/
.sec03 .inner {
  margin: 40px auto;
}
.washi .list-area .ttl, .drynamic-through .list-area .ttl {
  font-size: 4rem;
  font-weight: bold;
  color: #4D4C4C;
  margin: 0;
  margin-bottom: 12px;
  text-align: center;
}
.list-area .list-head {
  background-color: #DDDDDD;
  color: #4D4C4C;
  text-align: center;
  padding: 5px 0;
  font-size: 2.5rem!important;
}
.washi .list-area .list, .drynamic-through .list-area .list {
  border: 2px solid #DBDBDB;
}
.washi .list-area .item, .drynamic-through .list-area .item {
  border-right: 2px solid #DBDBDB;
  text-align: center;
  padding: 0 0 31px;
}
.washi .list-area .br-none, .drynamic-through .list-area .br-none {
  border-right: none;
}
.washi .list-area figure, .drynamic-through .list-area figure {
  margin-bottom: 10px;
}
.washi .list-area p, .drynamic-through .list-area p {
  font-size: 1.6rem;
  letter-spacing: 1px;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .washi .list-area .ttl {
    font-size: 2.6rem;
    margin-bottom: 25px;
    color: #4D4C4C;
}
.washi .list-area .item,
.drynamic-through .list-area .item {
    border-bottom: 2px solid #DBDBDB;
    padding: 0 0 20px;
}
.washi .list-area .sp-br-none, .drynamic-through .list-area .sp-br-none {
    border-right: none;
}
.washi .list-area .item:nth-of-type(3),
.washi .list-area .item:nth-of-type(4) {
  border-bottom: none;
}

.washi .list-area p, .drynamic-through .list-area p {
  font-size: 1.4rem;
}
}