.special_contents {
  margin: auto;
}

@media screen and (min-width: 961px) {
  .special_contents {
    width: 79.28%;
    min-width: 900px;
    max-width: 1000px;
  }
}

.arrange_list {
  width: 800px;
  margin: 0 auto 0;
  position: relative;
}

@media screen and (max-width: 960px) {
  .arrange_list {
    width: 90%;
  }
}

.arrange_item {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0.5rem;
  width: calc(100% - 1rem);
  padding-top: 0px;
  pointer-events: none;
  -webkit-transition: opacity 0.8s 0s, -webkit-transform 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  transition: opacity 0.8s 0s, -webkit-transform 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  transition: opacity 0.8s 0s, transform 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  transition: opacity 0.8s 0s, transform 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0s, -webkit-transform 0.8s cubic-bezier(0.33, 1, 0.68, 1) 0s;
}

.arrange_item.active {
  opacity: 1;
  position: relative;
  margin-top: 0px;
  pointer-events: auto;
}

.arrange_item .deco_01 {
  position: absolute;
  width: 250px;
  top: -2%;
  right: -15%;
}

@media screen and (max-width: 960px) {
  .arrange_item .deco_01 {
    width: 30%;
    top: -2%;
    right: -10%;
  }
}

.arrange_item .deco_02 {
  position: absolute;
  width: 250px;
  top: 12%;
  left: -2%;
}

@media screen and (max-width: 960px) {
  .arrange_item .deco_02 {
    width: 30%;
    top: 12%;
    left: -3%;
  }
}

.arrange_item .deco_03 {
  position: absolute;
  width: 250px;
  top: 25%;
  right: -10%;
}

@media screen and (max-width: 960px) {
  .arrange_item .deco_03 {
    width: 30%;
    top: 26%;
    right: -15%;
  }
}

.arrange_item .deco_04 {
  position: absolute;
  width: 250px;
  top: 40%;
  left: -12%;
}

@media screen and (max-width: 960px) {
  .arrange_item .deco_04 {
    width: 30%;
    left: -13%;
  }
}

.arrange_item .deco_05 {
  position: absolute;
  width: 250px;
  bottom: 35%;
  right: -20%;
}

@media screen and (max-width: 960px) {
  .arrange_item .deco_05 {
    width: 30%;
    bottom: 35%;
    right: -15%;
  }
}

.arrange_item .deco_06 {
  position: absolute;
  width: 250px;
  bottom: 14%;
  right: -20%;
}

@media screen and (max-width: 960px) {
  .arrange_item .deco_06 {
    width: 30%;
    right: -12%;
  }
}

.arrange_item .deco_07 {
  position: absolute;
  width: 250px;
  bottom: -2%;
  left: -25%;
}

@media screen and (max-width: 960px) {
  .arrange_item .deco_07 {
    width: 30%;
    bottom: -3%;
    left: -6%;
  }
}

.arrange_cap {
  width: 50%;
  max-width: 800px;
  margin: 0 auto 50px;
}

@media screen and (max-width: 960px) {
  .arrange_cap {
    margin: 50px auto 0;
    width: 70%;
  }
}

.arrange_tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #f4717a;
  margin-bottom: 80px;
}

@media screen and (max-width: 960px) {
  .arrange_tab {
    width: 90%;
    margin: 40px auto 50px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.arrange_tab li {
  position: relative;
  border: solid 2px #f4717a;
  border-radius: 100px;
  padding: 10px 30px;
  margin-left: 5px;
  background: #fff;
  cursor: pointer;
}

.arrange_tab li:first-child {
  margin-left: 0;
}

.arrange_tab li.active {
  background: #f4717a;
  color: #fff;
}

@media screen and (max-width: 960px) {
  .arrange_tab li {
    width: calc(48% - 4px);
    margin: 0 1% 2% 1%;
    text-align: center;
    padding: 10px 0;
  }
}

.scene {
  width: 80%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 960px) {
  .scene {
    width: 100%;
  }
}

.scene dt {
  width: 40%;
  margin: 0 auto;
}

@media screen and (max-width: 960px) {
  .scene dt {
    width: 60%;
  }
}

.movie {
  margin-top: 60px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 960px) {
  .movie {
    margin-top: 40px;
  }
}

.movie dt {
  width: 40%;
  margin: 0 auto 10px;
}

@media screen and (max-width: 960px) {
  .movie dt {
    width: 60%;
  }
}

.movie .movie_item {
  width: 50%;
  margin: 0 auto;
}

@media screen and (max-width: 960px) {
  .movie .movie_item {
    width: 80%;
  }
}

.movie .movie_item video {
  width: 100%;
  -webkit-box-shadow: 8px 8px 20px 0px rgba(170, 120, 180, 0.4);
  box-shadow: 8px 8px 20px 0px rgba(170, 120, 180, 0.4);
}

.arrange_movie .thumbnail {
  position: relative;
  width: 50%;
  margin: 0 auto;
  cursor: pointer;
}

@media screen and (max-width: 960px) {
  .arrange_movie .thumbnail {
    width: 70%;
  }
}

.arrange_movie .thumbnail::before {
  content: "";
  display: block;
  padding-top: 180%;
}

.arrange_movie .thumbnail-img {
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background-position: center;
  background-size: cover;
}

.arrange_movie .thumbnail-img::before {
  content: "";
  display: block;
  padding-top: 180%;
}

.point {
  margin-top: 80px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 960px) {
  .point {
    width: 100%;
    margin-top: 70px;
  }
}

.point dt {
  width: 40%;
  position: absolute;
  top: -35px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

@media screen and (max-width: 960px) {
  .point dt {
    width: 60%;
    top: -20px;
  }
}

.point dd {
  background: #fff;
  border-radius: 15px;
  border: #f4717a dashed 2px;
  padding: 4% 4%;
  line-height: 1.6em;
}

@media screen and (max-width: 960px) {
  .point dd {
    padding: 6% 5%;
  }
}

.photo {
  width: 80%;
  margin: 60px auto 0;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 960px) {
  .photo {
    width: 100%;
  }
}

.artist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 60px;
}

@media screen and (max-width: 960px) {
  .artist {
    width: 90%;
    display: block;
    margin: 8% auto 0;
  }
}

.artist .artist_img {
  width: 35%;
}

@media screen and (max-width: 960px) {
  .artist .artist_img {
    width: 60%;
    margin: 0 auto;
  }
}

.artist .artist_text {
  width: 60%;
  margin-left: 5%;
  margin-top: 8%;
}

@media screen and (max-width: 960px) {
  .artist .artist_text {
    width: 100%;
    margin: 0;
  }
}

.artist .artist_text a {
  color: #f4717a;
  text-decoration: underline;
}

.artist .text_1 {
  font-size: 20px;
}

@media screen and (max-width: 960px) {
  .artist .text_1 {
    line-height: 1.5em;
    font-size: 16px;
    margin-top: 25px;
  }
}

.artist .text_2 {
  line-height: 1.5em;
  margin-top: 30px;
}

@media screen and (max-width: 960px) {
  .artist .text_2 {
    font-size: 13px;
    margin-top: 20px;
  }
}

.artist .text_3 {
  margin-top: 10px;
  line-height: 1.5em;
}

@media screen and (max-width: 960px) {
  .artist .text_3 {
    font-size: 13px;
  }
}
/*# sourceMappingURL=kh.grand.special-hair-arrange.css.map */