@charset "UTF-8";
/* ダスキンミュージアムの楽しみ方 */
.mainttl {
  background: #faaf58 url(../img/about/mv_bg.jpg) no-repeat center center;
  background-size: auto 100%;
}
.mainttl__txt {
  margin-top: -3rem;
  font-size: 3.932rem;
  line-height: 1;
  color: #fff;
}
.mainttl__txt .en {
  font-size: 1.8rem;
  letter-spacing: 0.1em;
}
.mainttl__txt small {
  font-size: 2.1rem;
  line-height: 1.4;
}
.mainttl__txt strong {
  font-size: 4.3rem;
}

.lead {
  padding: 8rem 0 5rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2;
  color: #f99520;
}
.lead small {
  display: inline-block;
  margin-top: 2em;
  font-size: 1.8rem;
  font-weight: 400;
  color: initial;
}

.about {
  padding: 0 0 11.2rem;
  background-color: #fff;
  background-image: radial-gradient(#f2f2f2 20%, transparent 20%);
  background-size: 1.2rem 1.2rem;
}
.about__ttl {
  margin-bottom: 3.8rem;
  box-sizing: border-box;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: #f99520;
}
.about__ttl.model {
  height: 12.4rem;
  margin-bottom: 6.8rem;
  padding-top: 6rem;
  background: url(../img/about/illust01.png) no-repeat center center;
}
.about__ttl .grow {
  display: inline-block;
  position: relative;
}
.about__ttl .grow:before, .about__ttl .grow:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -0.2em;
  width: 1.5rem;
  height: 3.8rem;
  background: url(../img/about/grow_orange.svg) no-repeat center center;
  background-size: contain;
}
.about__ttl .grow:before {
  left: -5rem;
}
.about__ttl .grow:after {
  right: -5rem;
  transform: rotateY(180deg);
}

.schedule {
  display: flex;
  justify-content: space-between;
  width: 98rem;
  margin: 0 auto;
  padding: 0 0 22rem;
}
.schedule.step01 {
  background: url(../img/about/step01.svg) no-repeat center bottom 5rem;
  background-size: 33.8rem auto;
}
.schedule.step02 {
  flex-wrap: wrap;
  background: url(../img/about/step02.svg) no-repeat left 21rem bottom 6rem;
  background-size: 37.1rem auto;
}
.schedule.step03 {
  background: url(../img/about/step03.svg) no-repeat center bottom 6rem;
  background-size: 37.3rem auto;
}
.schedule.step04 {
  flex-direction: row-reverse;
  background: url(../img/about/step04.svg) no-repeat center bottom 6rem;
  background-size: 25.5rem auto;
}
.schedule.step05 {
  background: url(../img/about/step05.svg) no-repeat center bottom 6rem;
  background-size: 29.9rem auto;
}
.schedule.step06 {
  flex-direction: row-reverse;
  background: url(../img/about/step06.svg) no-repeat center bottom 6rem;
  background-size: 46.1rem auto;
}
.schedule.step07 {
  background: url(../img/about/step07.svg) no-repeat center bottom 6rem;
  background-size: 25.5rem auto;
}
.schedule.step08 {
  flex-direction: row-reverse;
  padding: 0 0 12rem;
}
.schedule__detail {
  width: 36.9rem;
  text-align: left;
}
.schedule__detail__time {
  padding: 0 0 1rem;
  font-family: "Righteous", cursive;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
  color: #999;
}
.schedule__detail__time small {
  font-family: inherit;
  font-size: 1.7rem;
}
.schedule__detail__time .clock {
  width: 4rem;
  margin-right: 0.5em;
  vertical-align: middle;
}
.schedule__detail__ttl {
  padding: 0 0 0.2rem;
  background: repeating-linear-gradient(transparent, transparent 5.8rem, #ccc 5.8rem, #ccc 6rem);
  font-size: 3rem;
  font-weight: 700;
  line-height: 2;
}
.schedule__detail__txt {
  padding: 3rem 0 0;
  font-size: 1.8rem;
  line-height: 2;
}
.schedule__detail__txt + .schedule__detail__txt {
  padding: 0.3em 0 0;
}
.schedule__notice {
  padding-top: 0.3em;
  font-size: 1.4rem;
  line-height: 1.57;
}
.schedule__notice__txt {
  margin-left: 1em;
  text-indent: -1em;
}
.schedule__photo {
  position: relative;
  width: 56.5rem;
  box-sizing: border-box;
}
.step04 .schedule__photo, .step06 .schedule__photo, .step08 .schedule__photo {
  padding-left: 8.7rem;
}
.schedule__photo__num {
  position: absolute;
  left: 47rem;
  top: 0;
  font-family: "Righteous", cursive;
  font-size: 12.7rem;
  font-weight: 400;
  line-height: 10rem;
  color: #f99520;
}
.step02 .schedule__photo__num {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  padding: 0 0 2.4rem;
}
.step04 .schedule__photo__num {
  left: -6.8rem;
}
.step06 .schedule__photo__num {
  left: -6.5rem;
}
.step08 .schedule__photo__num {
  left: -6.8rem;
}
.schedule__photo__img {
  width: 47.8rem;
  border: 0.8rem solid #f99520;
  border-radius: 3rem;
  box-sizing: border-box;
  overflow: hidden;
}
.schedule__photo__img.sub {
  position: absolute;
  left: 0;
  top: 20.9rem;
  width: 28.1rem;
  border: 0.6rem solid #f99520;
  border-radius: 2.8rem;
}
.schedule__photo__illust {
  content: "";
  position: absolute;
  display: block;
}
.step01 .schedule__photo__illust {
  left: 41.6rem;
  top: 19.6rem;
  width: 20.9rem;
}
.step03 .schedule__photo__illust {
  left: 45.3rem;
  top: 18.7rem;
  width: 15.8rem;
}
.step05 .schedule__photo__illust {
  left: 47.5rem;
  top: 23.4rem;
  width: 10.9rem;
}
.step08 .schedule__photo__illust {
  right: 40rem;
  top: 29.2rem;
  width: 20.7rem;
}
.schedule__photo__misdo {
  width: 26.9rem;
  margin: 1.6rem auto;
}
.schedule .separate {
  position: relative;
  width: 43.5rem;
}
.schedule .separate .schedule__photo__img {
  width: auto;
}
.schedule .separate .schedule__detail {
  width: auto;
  padding: 3rem 3.3rem 0;
}
.schedule__label {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -1.9rem;
  top: -1.9rem;
  width: 11.4rem;
  height: 11.4rem;
  background: #f99520;
  border: 0.4rem solid #fcca8f;
  border-radius: 50%;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.33;
  color: #fff;
}
.schedule__label.reserve {
  width: 14.5rem;
  height: 12.5rem;
  font-size: 1.8rem;
  padding-bottom: 2rem;
}
@media screen and (max-width: 767px) {
  .schedule__label.reserve {
    width: 25.3333333333vw;
    height: 22.6666666667vw;
    font-size: 3.2vw;
    padding-bottom: 2.6666666667vw;
  }
}
.step08 .schedule__label {
  left: 42.3rem;
  top: 1.8rem;
}
.schedule__apply {
  padding: 2.5rem 0 0;
}
.schedule__apply__btn {
  display: inline-block;
  width: 23.9rem;
  padding-right: 1em;
  background: #f99520 url(../img/common/arrow_white.svg) no-repeat right 1.9rem center;
  background-size: 1.6rem 1.6rem;
  border: 0.1rem solid #f99520;
  border-radius: 2.9rem;
  box-sizing: border-box;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 5.6rem;
  color: #fff;
  text-align: center;
}
.schedule__apply__btn:hover {
  background: #fff url(../img/common/arrow_orange.svg) no-repeat right 1.9rem center;
  background-size: 1.6rem 1.6rem;
  color: #f99520;
}

.panorama {
  display: flex;
  justify-content: space-between;
  width: 79.7rem;
  margin: 0 auto;
  padding: 6rem;
  background: #fff7f0;
  border-radius: 2rem;
  box-sizing: border-box;
}
.panorama__detail {
  width: 23.9rem;
}
.panorama__detail__ttl {
  padding: 0 0 0.5em;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2;
}
.panorama__detail__ttl .logo {
  width: 12.3rem;
}
.panorama__detail__txt {
  font-size: 1.6rem;
  line-height: 1.875;
  text-align: left;
}
.panorama__photo {
  width: 38.5rem;
  border-radius: 2rem;
  overflow: hidden;
}

/* ------------------ */
/* スマートフォン */
/* ------------------ */
@media screen and (max-width: 767px) {
  .mainttl {
    background: #faaf58 url(../img/about/mv_bg_sp.jpg) no-repeat center center;
    background-size: cover;
  }
  .mainttl__txt {
    margin-top: -4vw;
    font-size: 6.6666666667vw;
  }
  .mainttl__txt .en {
    font-size: 2.9333333333vw;
  }
  .mainttl__txt small {
    font-size: 3.2vw;
  }
  .mainttl__txt strong {
    font-size: 6.6666666667vw;
  }
  .lead {
    padding: 10.6666666667vw 0 13.3333333333vw;
    font-size: 5.0666666667vw;
  }
  .lead small {
    margin-top: 1.5em;
    font-size: 4.2666666667vw;
    line-height: 2.1875;
  }
  .about {
    padding: 0 0 21.2vw;
    background-size: 2.1333333333vw 2.1333333333vw;
  }
  .about__ttl {
    margin-bottom: 5.8666666667vw;
    font-size: 5.8666666667vw;
    line-height: 1.3636;
  }
  .about__ttl.model {
    height: 16.5333333333vw;
    margin-bottom: 9.2vw;
    padding-top: 0;
    background: url(../img/about/illust01_sp.png) no-repeat center center;
    background-size: 100% auto;
  }
  .about__ttl .grow:before, .about__ttl .grow:after {
    width: 3.7333333333vw;
    height: 9.2vw;
  }
  .about__ttl .grow:before {
    left: -8.4vw;
  }
  .about__ttl .grow:after {
    right: -8.4vw;
  }
  .schedule {
    flex-direction: column-reverse;
    width: auto;
    padding: 0 5.3333333333vw 36.9333333333vw;
  }
  .schedule.step01 {
    background: url(../img/about/step01.svg) no-repeat center bottom 9.3333333333vw;
    background-size: 54.1333333333vw auto;
  }
  .schedule.step02 {
    flex-direction: column;
    background: url(../img/about/step02.svg) no-repeat center bottom 9.3333333333vw;
    background-size: 66.6666666667vw auto;
  }
  .schedule.step03 {
    background: url(../img/about/step03.svg) no-repeat center bottom 9.3333333333vw;
    background-size: 59.7333333333vw auto;
  }
  .schedule.step04 {
    flex-direction: column-reverse;
    background: url(../img/about/step04.svg) no-repeat center bottom 9.3333333333vw;
    background-size: 40.8vw auto;
  }
  .schedule.step05 {
    background: url(../img/about/step05.svg) no-repeat center bottom 9.3333333333vw;
    background-size: 47.8666666667vw auto;
  }
  .schedule.step06 {
    flex-direction: column-reverse;
    background: url(../img/about/step06.svg) no-repeat left 5.3333333333vw bottom 9.3333333333vw;
    background-size: 66.4vw auto;
  }
  .schedule.step07 {
    background: url(../img/about/step07.svg) no-repeat center bottom 9.3333333333vw;
    background-size: 40.8vw auto;
  }
  .schedule.step08 {
    flex-direction: column-reverse;
    padding: 0 5.3333333333vw 22.6666666667vw;
  }
  .schedule__detail {
    width: auto;
    padding: 3.4666666667vw 0 0;
  }
  .schedule__detail__time {
    padding: 0;
    font-size: 5.2266666667vw;
  }
  .schedule__detail__time small {
    font-size: 3.1733333333vw;
  }
  .schedule__detail__time .clock {
    width: 7.4666666667vw;
  }
  .schedule__detail__ttl {
    padding: 0 0 0.5333333333vw;
    background: repeating-linear-gradient(transparent, transparent 11.2vw, #ccc 11.2vw, #ccc 11.7333333333vw);
    font-size: 5.8666666667vw;
  }
  .schedule__detail__txt {
    padding: 0.8em 0 0;
    font-size: 4.2666666667vw;
    line-height: 1.625;
  }
  .schedule__notice {
    font-size: 3.2vw;
    line-height: 1.58;
  }
  .schedule__photo {
    position: relative;
    width: 68vw;
  }
  .step04 .schedule__photo, .step06 .schedule__photo, .step08 .schedule__photo {
    padding-left: 21.3333333333vw;
  }
  .step06 .schedule__photo {
    padding-bottom: 8.6666666667vw;
  }
  .schedule__photo__num {
    left: 66.6666666667vw;
    font-size: 18.1024vw;
    line-height: 13.3333333333vw;
  }
  .step02 .schedule__photo__num {
    padding: 0 0 5.8666666667vw;
  }
  .step04 .schedule__photo__num {
    left: 0;
  }
  .step06 .schedule__photo__num {
    left: 0;
  }
  .step08 .schedule__photo__num {
    left: 0;
  }
  .schedule__photo__img {
    width: 68vw;
    border: 1.3333333333vw solid #f99520;
    border-radius: 5.3333333333vw;
  }
  .schedule__photo__img.sub {
    position: absolute;
    left: 9.3333333333vw;
    top: 29.7333333333vw;
    width: 39.8666666667vw;
    border: 0.8vw solid #f99520;
    border-radius: 5.3333333333vw;
  }
  .step01 .schedule__photo__illust {
    left: 59.0666666667vw;
    top: 27.0666666667vw;
    width: 29.7333333333vw;
  }
  .step03 .schedule__photo__illust {
    left: 65.0666666667vw;
    top: 26.4vw;
    width: 22.6666666667vw;
  }
  .step05 .schedule__photo__illust {
    left: 67.3333333333vw;
    top: 33.3333333333vw;
    width: 15.4666666667vw;
  }
  .step08 .schedule__photo__illust {
    right: 40vw;
    top: 39.7333333333vw;
    width: 29.8666666667vw;
  }
  .schedule__photo__misdo {
    width: 51.4666666667vw;
    margin: 4vw auto;
  }
  .schedule .separate {
    width: 68vw;
    margin: 0 10.6666666667vw 15.7333333333vw;
  }
  .schedule .separate:last-of-type {
    margin: 0 10.6666666667vw;
  }
  .schedule .separate .schedule__detail {
    padding: 3.4666666667vw 0 0;
  }
  .schedule__label {
    left: -2.6666666667vw;
    top: -2.6666666667vw;
    width: 17.8666666667vw;
    height: 17.8666666667vw;
    border: 0.6666666667vw solid #fcca8f;
    font-size: 3.75172vw;
  }
  .step08 .schedule__label {
    left: 67.4666666667vw;
    top: 2.6666666667vw;
  }
  .schedule__apply {
    padding: 4vw 0 0;
  }
  .schedule__apply__btn {
    width: 55.2vw;
    background: #f99520 url(../img/common/arrow_white.svg) no-repeat right 4.1333333333vw center;
    background-size: 4vw 4vw;
    border: 0.2666666667vw solid #f99520;
    border-radius: 5.3333333333vw;
    font-size: 4vw;
    line-height: 10.1333333333vw;
  }
  .schedule__apply__btn:hover {
    background: #fff url(../img/common/arrow_orange.svg) no-repeat right 4.1333333333vw center;
    background-size: 4vw 4vw;
  }
  .panorama {
    display: block;
    justify-content: unset;
    width: auto;
    margin: 0 5.3333333333vw;
    padding: 10.6666666667vw 5.3333333333vw;
    border-radius: 3.2vw;
  }
  .panorama__detail {
    width: auto;
    padding: 0 0 7.8666666667vw;
  }
  .panorama__detail__ttl {
    font-size: 5.632vw;
  }
  .panorama__detail__ttl .logo {
    width: 34.3693333333vw;
  }
  .panorama__detail__txt {
    font-size: 4.2666666667vw;
    line-height: 1.625;
    text-align: center;
  }
  .panorama__photo {
    width: auto;
    border-radius: 3.2vw;
  }
}