@charset "UTF-8";

html {
  font-size: 62.5%;
}

.main__wrap * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main__wrap img,
.main__wrap video,
.main__wrap svg {
  width: 100%;
  height: auto;
}

.main__wrap {
  width: 100%;
  position: relative;
  padding-top: 58px;
  margin-bottom: 118px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  font-feature-settings: "palt";
  font-size: 14px;
  letter-spacing: 0.025em;
  line-height: 1;
  color: #000000;
  text-align: center;
  /* background-image: url(../img/LP_pc.jpg); */
  /* background-size: 1280px; */
  /* background-position: center -80px; */
}

.firstview {
  width: 1280px;
  margin: 0 auto;
}

.fv__img {
  width: 1000px;
  margin: 0 auto;
}

.fv__ttl {
  margin-top: 52px;
  font-family: 'Bebas Neue', cursive;
  font-size: 56px;
  letter-spacing: 0.075em;
}

.fv__ttl span {
  display: block;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
  font-feature-settings: "palt";
  font-size: 18px;
  margin-top: 14px;
  letter-spacing: 0.025em;
}

.fv__lead {
  margin-top: 50px;
  line-height: 2;
}

.fv__lead span {
  display: block;
  margin-top: 7px;
}

.main__wrap section {
  margin-bottom: 180px;
}

.credit {
  font-family: 'Bebas Neue', cursive;
  font-size: 14px;
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0.075em;
}

.sec__ttl.sec01 {
  width: 100%;
  margin-bottom: 80px;
  margin-top: 75px;
}

.mv.sec01 {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.mv__img.sec01 {
  width: 1140px;
}

.subview.sec01 {
  width: 892px;
  display: flex;
  flex-wrap: wrap;
  margin: 78px auto;
}

.sub__img.sec01:nth-of-type(1) {
  width: 430px;
  background-color: #e3a549;
}

.comment.sec01 {
  margin: 22px auto 0px;
  width: 172px;
}

.snap.sec01 {
  margin-top: 25px;
  width: 380px;
  border: 4px solid #fff;
}

.sub__img.sec01:nth-of-type(2) {
  width: 462px;
}

.content.sec01 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: #acadca;
}

.content__img.sec01 {
  width: 752px;
  margin-left: 62px;
}

.content__txt.sec01 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 172px;
}

.content__ttl.sec01 {
  width: 288px;
}

.credit.sec01 {
  margin-top: 32px;
  color: #fff;
}

.sec02 {
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.mv.sec02 {
  width: 1280px;
  display: flex;
}

.mv__img.sec02 {
  width: 1050px;
}

.subview.sec02 {
  width: 1280px;
  position: relative;
}

.subview.sec02::before {
  content: "";
  position: absolute;
  width: 880px;
  height: 630px;
  background-color: #d39093;
  top: 240px;
  left: 260px;
  z-index: -1;
}

.sub__img.sec02:nth-of-type(1) {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: 80px;
}

.comment.sec02 {
  margin-top: 176px;
  margin-right: 30px;
  width: 192px;
  margin-left: 0;
}

@media all and (-ms-high-contrast: none){
  .comment.sec02 {
    margin-top: 155px;
  }
}


.sub__img.sec02:nth-of-type(2) {
  display: flex;
  align-items: flex-end;
  margin-top: 28px;
  margin-left: 60px;
}

.snap.sec02 {
  width: 900px;
}

.credit.sec02 {
  margin-left: 30px;
  color: #d39093;
}

.sec03 {
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.subview.sec03 {
  width: 1280px;
  display: flex;
  flex-wrap: wrap;
}

.sub__img.sec03:nth-of-type(1) {
  width: 422px;
  margin-left: 58px;
}

.sub__img.sec03:nth-of-type(2) {
  width: 502px;
  margin-left: 260px;
  margin-top: 119px;
  position: relative;
}

.snap.sec03 {
  width: 502px;
}

.mv.sec03 {
  position: relative;
  width: 1052px;
  margin: 108px auto 0;
}

.mv.sec03::after {
  content: "";
  position: absolute;
  width: 1005px;
  height: 718px;
  background-color: #ebc26c;
  bottom: -32px;
  left: -114px;
  z-index: -1;
}

.mv.sec03::before {
  content: "";
  position: absolute;
  width: 602px;
  height: 400px;
  background-color: #ebc26c;
  top: -30px;
  right: -30px;
  z-index: -1;
}

.mv__img.sec03 {
  width: 1052px;
}

.credit.sec03 {
  margin-top: 30px;
  color: #fff;
}

.comment.sec03-01 {
  position: absolute;
  width: 202px;
  top: -122px;
  left: -173px;
}

.comment.sec03 {
  position: absolute;
  width: 200px;
  bottom: -65px;
  right: -80px;
}

section.sec04 {
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.subview.sec04 {
  display: flex;
  flex-wrap: wrap;
  width: 1152px;
  margin: 0 auto;
}

.sub__img.sec04 {
  width: 570px;
}

.sub__img.sec04:nth-of-type(odd) {
  margin-right: 8px;
}

.sub__img.sec04:nth-of-type(n+3) {
  margin-top: 8px;
}

.credit.sec04 {
  text-align: center;
  margin: 30px auto 0;
  color: #8b593c;
}

.sec05__m {
  width: 1280px;
  margin: 0 auto;
}

.subview.sec05 {
  display: flex;
  margin-bottom: 178px;
  margin-left: 134px;
}

.sub__img.sec05 {
  width: 100%;
}

.sub__img.sec05:nth-of-type(1) {
  width: 422px;
  position: relative;
  z-index: 2;
  margin-right: -142px;
}

.credit.sec05 {
  margin-top: 107px;
  color: #c9b0c9;
}

.sub__img.sec05:nth-of-type(2) {
  width: 732px;
  height: 806px;
  margin-top: 200px;
  background-color: #c9b0c9;
  position: relative;
}

.snap.sec05 {
  margin-top: 24px;
  margin-left: 205px;
  width: 502px;
  border: 4px solid #fff;
}

.comment.sec05 {
  position: absolute;
  width: 210px;
  top: 510px;
  left: -50px;
}

section.sec06 {
  margin-bottom: 118px;
}

.sec06__m {
  width: 1280px;
  margin: 0 auto;
}

.mv.sec06 {
  width: 100%;
}

.mv__img.sec06 {
  width: 900px;
}

.subview.sec06 {
  display: flex;
  margin-top: 78px;
  margin-bottom: 78px;
}

.sub__img.sec06:nth-of-type(1) {
  width: 681px;
  height: 942px;
  background-color: #e3a549;
  display: flex;
  justify-content: center;
  margin-top: 120px;
}

.snap.sec06 {
  margin-top: 80px;
  width: 520px;
  border: 4px solid #fff;
}

.sub__img.sec06:nth-of-type(2) {
  width: 600px;
}

.credit.sec06 {
  text-align: center;
  margin-top: 18px;
  color: #e3a549;
}

.comment.sec07 {
  width: 252px;
  margin: 0 auto;
}

.content__txt.sec07 {
  margin-top: 66px;
  line-height: 2;
}

/* check btn */
.main__wrap .check__btn {
  width: 202px;
  margin: 82px auto;
}

.main__wrap .check__btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 202px;
  padding-top: 15px;
  padding-bottom: 15px;
  border: 1px solid #6b6b6b;
  background-color: #fff;
  box-sizing: border-box;
  text-align: center;
  font-family: pragmatica, sans-serif;
  font-feature-settings: "palt";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  color: #333;
  line-height: 1;
  letter-spacing: 0.075em;
}

.credit.sec07 {
  text-align: center;
  margin-top: 82px;
  color: #8b593c;
}


/* for pc */
@media only screen and (min-width: 600px) {
  .sp__only {
    display: none;
  }

  .order_1 {
    order: 1;
  }

  .order_2 {
    order: 2;
  }

}


/* for tablet */
@media only screen and (min-width: 600px) and (max-width: 1280px) {
  .sp__only {
    display: none;
  }

  .main__wrap {
    padding-top: calc(58* (100vw / 1280));
    font-size: calc(14* (100vw / 1280));
    /* background-image: url(../img/LP_pc.jpg); */
    /* background-size: 1280px; */
    /* background-position: center -80px; */
  }

  .firstview {
    width: calc(1280* (100vw / 1280));
  }

  .fv__img {
    width: calc(1000* (100vw / 1280));
  }

  .fv__ttl {
    margin-top: calc(52* (100vw / 1280));
    font-size: calc(56* (100vw / 1280));
  }

  .fv__ttl span {
    font-size: calc(18* (100vw / 1280));
    margin-top: calc(14* (100vw / 1280));
  }

  .fv__lead {
    margin-top: calc(50* (100vw / 1280));
  }

  .fv__lead span {
    margin-top: calc(7* (100vw / 1280));
  }

  .main__wrap section {
    margin-bottom: calc(180* (100vw / 1280));
  }

  .credit {
    font-size: calc(14* (100vw / 1280));
  }

  .sec__ttl.sec01 {
    margin-bottom: calc(80* (100vw / 1280));
    margin-top: calc(75* (100vw / 1280));
  }

  .mv__img.sec01 {
    width: calc(1140* (100vw / 1280));
  }

  .subview.sec01 {
    width: calc(892* (100vw / 1280));
    margin-top: calc(78* (100vw / 1280));
  }

  .sub__img.sec01:nth-of-type(1) {
    width: calc(430* (100vw / 1280));
  }

  .comment.sec01 {
    margin-top: calc(22* (100vw / 1280));
    width: calc(172* (100vw / 1280));
  }

  .snap.sec01 {
    margin-top: calc(25* (100vw / 1280));
    width: calc(380* (100vw / 1280));
  }

  .sub__img.sec01:nth-of-type(2) {
    width: calc(462* (100vw / 1280));
  }

  .content__img.sec01 {
    width: calc(752* (100vw / 1280));
    margin-left: calc(62* (100vw / 1280));
  }

  .content__txt.sec01 {
    margin-top: calc(172* (100vw / 1280));
  }

  .content__ttl.sec01 {
    width: calc(288* (100vw / 1280));
  }

  .credit.sec01 {
    margin-top: calc(32* (100vw / 1280));
  }

  .mv__img.sec02 {
    width: calc(1050* (100vw / 1280));
  }

  .subview.sec02 {
    width: calc(1280* (100vw / 1280));
  }

  .subview.sec02::before {
    width: calc(880* (100vw / 1280));
    height: calc(630* (100vw / 1280));
    top: calc(240* (100vw / 1280));
    left: calc(260* (100vw / 1280));
  }

  .sub__img.sec02:nth-of-type(1) {
    margin-top: calc(80* (100vw / 1280));
  }

  .comment.sec02 {
    margin-top: calc(176* (100vw / 1280));
    margin-right: calc(30* (100vw / 1280));
    width: calc(192* (100vw / 1280));
  }

  .sub__img.sec02:nth-of-type(2) {
    margin-top: calc(28* (100vw / 1280));
    margin-left: calc(60* (100vw / 1280));
  }

  .snap.sec02 {
    width: calc(900* (100vw / 1280));
  }

  .credit.sec02 {
    margin-left: calc(30* (100vw / 1280));
  }

  .sec03 {
    width: calc(1280* (100vw / 1280));
  }

  .subview.sec03 {
    width: calc(1280* (100vw / 1280));
  }

  .sub__img.sec03:nth-of-type(1) {
    width: calc(422* (100vw / 1280));
    margin-left: calc(58* (100vw / 1280));
  }

  .sub__img.sec03:nth-of-type(2) {
    width: calc(502* (100vw / 1280));
    margin-top: calc(119* (100vw / 1280));
    margin-left: calc(260* (100vw / 1280));
  }

  .snap.sec03 {
    width: calc(502* (100vw / 1280));
  }

  .mv.sec03 {
    width: calc(1052* (100vw / 1280));
    margin-top: calc(108* (100vw / 1280));
  }

  .mv.sec03::after {
    width: calc(1005* (100vw / 1280));
    height: calc(718* (100vw / 1280));
    bottom: calc(-32* (100vw / 1280));
    left: calc(-114* (100vw / 1280));
  }

  .mv.sec03::before {
    width: calc(602* (100vw / 1280));
    height: calc(400* (100vw / 1280));
    top: calc(-30* (100vw / 1280));
    right: calc(-30* (100vw / 1280));
  }

  .mv__img.sec03 {
    width: calc(1052* (100vw / 1280));
  }

  .credit.sec03 {
    margin-top: calc(30* (100vw / 1280));
  }

  .comment.sec03 {
    width: calc(200* (100vw / 1280));
    bottom: calc(-65* (100vw / 1280));
    right: calc(-80* (100vw / 1280));
  }

  section.sec04 {
    width: calc(1280* (100vw / 1280));
  }

  .subview.sec04 {
    width: calc(1152* (100vw / 1280));
  }

  .sub__img.sec04 {
    width: calc(570* (100vw / 1280));
  }

  .credit.sec04 {
    margin-top: calc(78* (100vw / 1280));
  }

  .sec05__m {
    width: calc(1280* (100vw / 1280));
  }

  .subview.sec05 {
    margin-bottom: calc(178* (100vw / 1280));
    margin-left: calc(134* (100vw / 1280));
  }

  .sub__img.sec05:nth-of-type(1) {
    width: calc(422* (100vw / 1280));
    margin-left: calc(-142* (100vw / 1280));
  }

  .credit.sec05 {
    margin-top: calc(107* (100vw / 1280));
  }

  .sub__img.sec05:nth-of-type(2) {
    width: calc(732* (100vw / 1280));
    height: calc(806* (100vw / 1280));
    margin-top: calc(200* (100vw / 1280));
  }

  .snap.sec05 {
    margin-top: calc(24* (100vw / 1280));
    margin-left: calc(205* (100vw / 1280));
    width: calc(502* (100vw / 1280));
  }

  .comment.sec05 {
    width: calc(210* (100vw / 1280));
    top: calc(510* (100vw / 1280));
    left: calc(-50* (100vw / 1280));
  }

  section.sec06 {
    margin-bottom: calc(118* (100vw / 1280));
  }

  .sec06__m {
    width: calc(1280* (100vw / 1280));
  }

  .mv__img.sec06 {
    width: calc(900* (100vw / 1280));
  }

  .subview.sec06 {
    margin-top: calc(78* (100vw / 1280));
    margin-bottom: calc(78* (100vw / 1280));
  }

  .sub__img.sec06:nth-of-type(1) {
    width: calc(681* (100vw / 1280));
    height: calc(942* (100vw / 1280));
    margin-top: calc(120* (100vw / 1280));
  }

  .snap.sec06 {
    margin-top: calc(80* (100vw / 1280));
    width: calc(520* (100vw / 1280));
  }

  .sub__img.sec06:nth-of-type(2) {
    width: calc(600* (100vw / 1280));
  }

  .credit.sec06 {
    margin-top: calc(18* (100vw / 1280));
  }

  .comment.sec07 {
    width: calc(252* (100vw / 1280));
  }

  .content__txt.sec07 {
    margin-top: calc(66* (100vw / 1280));
  }

  /* check btn */
  .main__wrap .check__btn {
    width: calc(202* (100vw / 1280));
    margin-top: calc(82* (100vw / 1280));
  }

  .main__wrap .check__btn a {
    width: calc(202* (100vw / 1280));
    padding-top: calc(15* (100vw / 1280));
    padding-bottom: calc(15* (100vw / 1280));
    font-size: calc(13* (100vw / 1280));
  }

  .credit.sec07 {
    margin-top: calc(82* (100vw / 1280));
  }

}


/* for sp */
@media only screen and (max-width: 599px) {

  .pc__only {
    display: none;
  }

  .main__wrap {
    padding-top: calc(0* (100vw / 750));
    margin-bottom: calc(180* (100vw / 750));
    font-size: calc(28* (100vw / 750));
    /* background-image: url(../img/LP_pc.jpg); */
    /* background-size: 1280px; */
    /* background-position: center -80px; */
  }

  .firstview {
    width: calc(750* (100vw / 750));
  }

  .fv__img {
    width: calc(750* (100vw / 750));
  }

  .fv__ttl {
    margin-top: calc(67* (100vw / 750));
    font-size: calc(78* (100vw / 750));
  }

  .fv__ttl span {
    font-size: calc(34* (100vw / 750));
    margin-top: calc(56* (100vw / 750));
  }

  .fv__lead {
    margin-top: calc(85* (100vw / 750));
  }

  .fv__lead span {
    margin-top: calc(36* (100vw / 750));
  }

  .main__wrap section {
    margin-bottom: calc(220* (100vw / 750));
  }

  .credit {
    font-size: calc(28* (100vw / 750));
    text-align: left;
  }

  .sec__ttl.sec01 {
    margin-bottom: calc(100* (100vw / 750));
    margin-top: calc(78* (100vw / 750));
  }

  .mv__img.sec01 {
    width: calc(750* (100vw / 750));
  }

  .subview.sec01 {
    width: calc(750* (100vw / 750));
    justify-content: center;
    margin-top: calc(99* (100vw / 750));
    margin-bottom: calc(99* (100vw / 750));
  }

  .sub__img.sec01:nth-of-type(1) {
    width: calc(560* (100vw / 750));
    height: calc(892* (100vw / 750));
  }

  .comment.sec01 {
    margin-top: calc(23* (100vw / 750));
    width: calc(205* (100vw / 750));
  }

  .snap.sec01 {
    margin-top: calc(31* (100vw / 750));
    width: calc(500* (100vw / 750));
  }

  .sub__img.sec01:nth-of-type(2) {
    width: calc(560* (100vw / 750));
  }

  .content.sec01 {
    flex-direction: column;
  }

  .content__img.sec01 {
    width: calc(750* (100vw / 750));
    margin-left: 0;
  }

  .content__txt.sec01 {
    align-items: flex-start;
    margin-top: calc(30* (100vw / 750));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(30* (100vw / 750));
  }

  .content__ttl.sec01 {
    width: calc(346* (100vw / 750));
    margin-top: calc(40* (100vw / 750));
  }

  .main__wrap .content__link {
    margin-top: calc(38* (100vw / 750));
  }

  .credit.sec01 {
    margin-top: 0;
    color: #fff;
    text-align: center;
  }

  .sec02 {
    width: calc(750* (100vw / 750));
    margin-left: auto;
    margin-right: auto;
  }

  .mv.sec02 {
    width: calc(750* (100vw / 750));
    margin: 0 auto;
  }

  .mv__img.sec02 {
    width: calc(750* (100vw / 750));
  }

  .subview.sec02 {
    width: calc(750* (100vw / 750));
    position: relative;
  }

  .subview.sec02::before {
    width: calc(690* (100vw / 750));
    height: calc(530* (100vw / 750));
    top: calc(250* (100vw / 750));
    left: calc(30* (100vw / 750));
  }

  .sub__img.sec02:nth-of-type(1) {
    width: calc(660* (100vw / 750));
    justify-content: inherit;
    margin-top: calc(35*(100vw/750));
    margin-left: 0;
    flex-direction: column;
  }

  .comment.sec02 {
    margin-top: calc(0* (100vw / 750));
    margin-right: calc(0* (100vw / 750));
    margin-left: 0;
    width: calc(215* (100vw / 750));
    z-index: 2;
  }
  

  .comment.sec02 img {
    width: calc(220* (100vw / 750));
  }

  .sub__img.sec02:nth-of-type(2) {
    flex-direction: column;
    align-items: flex-start;
    margin-top: calc(40* (100vw / 750));
    margin-left: 0;
  }

  .snap.sec02 {
    width: calc(660* (100vw / 750));
    z-index: -1;
  }

  .snap.sec02.pattern01 {
    margin-left: calc(90*(100vw/750));
    margin-top: calc(-32*(100vw/750));
  }

  .credit.sec02 {
    width: calc(660* (100vw/750));
    margin-left: 0;
    text-align: right;
    margin-top: calc(26* (100vw / 750));
  }

  .sec03 {
    width: calc(750* (100vw / 750))
  }

  .subview.sec03 {
    margin-left: 0;
    flex-direction: column;
  }

  .sub__img.sec03:nth-of-type(1) {
    width: calc(500* (100vw / 750));
    margin-left: calc(250* (100vw / 750));
  }

  .sub__img.sec03:nth-of-type(2) {
    width: calc(560* (100vw / 750));
    margin-left: calc(30* (100vw / 750));
    margin-top: calc(39* (100vw / 750));
  }

  .snap.sec03 {
    width: calc(560* (100vw / 750));
  }

  .mv.sec03 {
    width: calc(690* (100vw / 750));
    margin-top: calc(124* (100vw / 750));
  }

  .mv.sec03::after {
    width: calc(570* (100vw / 750));
    height: calc(820* (100vw / 750));
    bottom: calc(-30* (100vw / 750));
    left: calc(-30* (100vw / 750));
  }

  .mv.sec03::before {
    width: calc(600* (100vw / 750));
    height: calc(472* (100vw / 750));
    top: calc(-25* (100vw / 750));
    right: calc(-30* (100vw / 750));
  }

  .mv__img.sec03 {
    width: calc(690* (100vw / 750));
  }

  .credit.sec03 {
    margin-top: calc(30* (100vw / 750));
    margin-bottom: calc(326* (100vw / 750));
  }

  .comment.sec03 {
    width: calc(240* (100vw / 750));
    bottom: calc(-170* (100vw / 750));
    right: 0;
  }

  .comment.sec03-01 {
    position: absolute;
    width: calc(223*(100vw/750));
    top: calc(-310*(100vw/750));
    left: calc(-10*(100vw/750));
    z-index: 2;
  }

  section.sec04 {
    width: calc(750* (100vw / 750));
  }

  .sec04 {
    width: calc(750* (100vw / 750));
  }

  .subview.sec04 {
    flex-direction: column;
    width: calc(750* (100vw / 750));
  }

  .sub__img.sec04 {
    width: calc(624* (100vw / 750));
    margin-top: calc(20* (100vw / 750));
  }

  .sub__img.sec04:nth-of-type(1) {
    display: flex;
    justify-content: flex-start;
  }

  .sub__img.sec04:nth-of-type(2) {
    margin-left: calc(126* (100vw / 750));
  }

  .sub__img.sec04:nth-of-type(n+3) {
    margin-left: calc(30* (100vw / 750));
  }

  .credit.sec04 {
    text-align: left;
    margin-top: calc(30* (100vw / 750));
    margin-left: calc(30* (100vw / 750));
  }

  .sec05__m {
    width: calc(750* (100vw / 750));
    margin: 0 auto;
  }

  .subview.sec05 {
    flex-direction: column;
    margin-bottom: 0;
    margin-left: 0;
  }

  .sub__img.sec05:nth-of-type(1) {
    width: calc(460* (100vw / 750));
    margin-right: 0;
    margin-left: calc(44* (100vw / 750));
  }

  .credit.sec05 {
    margin-top: calc(30* (100vw / 750));
    margin-left: calc(110* (100vw / 750));
    margin-bottom: calc(198* (100vw / 750));
  }

  .sub__img.sec05:nth-of-type(2) {
    width: calc(640* (100vw / 750));
    height: calc(1062* (100vw / 750));
    margin-top: calc(-140* (100vw / 750));
    margin-left: calc(110* (100vw / 750));
  }

  .snap.sec05 {
    margin-top: calc(244* (100vw / 750));
    margin-left: calc(90* (100vw / 750));
    width: calc(520* (100vw / 750));
  }

  .comment.sec05 {
    position: absolute;
    width: calc(252* (100vw / 750));
    top: calc(195* (100vw / 750));
    left: calc(-90* (100vw / 750));
  }

  section.sec06 {
    margin-bottom: calc(183* (100vw / 750));
  }

  .sec06__m {
    width: calc(750* (100vw / 750));
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .main__wrap section.sec06__m{
    margin-bottom: calc(170*(100vw/750));
  }

  .mv__img.sec06 {
    width: calc(750* (100vw / 750));
  }

  .subview.sec06 {
    flex-direction: column;
    margin-top: calc(100* (100vw / 750));
    margin-bottom: calc(0* (100vw / 750));
  }

  .sub__img.sec06:nth-of-type(1) {
    width: calc(640* (100vw / 750));
    height: calc(912* (100vw / 750));
    margin-top: 0;
  }

  .snap.sec06 {
    margin-top: calc(50* (100vw / 750));
    width: calc(540* (100vw / 750));
  }

  .sub__img.sec06:nth-of-type(2) {
    width: calc(640* (100vw / 750));
  }

  .credit.sec06 {
    margin-top: calc(30* (100vw / 750));
  }

  .comment.sec07 {
    width: calc(302* (100vw / 750));
  }

  .content__txt.sec07 {
    margin-top: calc(166* (100vw / 750));
  }

  /* check btn */
  .main__wrap .check__btn {
    width: calc(322* (100vw / 750));
    margin-top: calc(66* (100vw / 750));
    margin-bottom: calc(100* (100vw / 750));
  }

  .main__wrap .check__btn a {
    width: calc(322* (100vw / 750));
    padding-top: calc(26* (100vw / 750));
    padding-bottom: calc(26* (100vw / 750));
    font-size: calc(26* (100vw / 750));
  }

  .credit.sec07 {
    margin-top: calc(100* (100vw / 750));
  }

}


/* ここから下、アニメーション用css */

.js-fadeIn {
  opacity: 0;
  transition-duration: .8s;
  transform: translateY(60px);
}

.js-fadeIn.active {
  opacity: 1;
  transform: translateY(0);
}

.fv__ttl.js-fadeIn {
  transition-delay: .5s;
}

.js-fadeIn-LtoR {
  opacity: 0;
  transition: .8s;
  transform: translateX(-60px);
}

.js-fadeIn-LtoR.active {
  opacity: 1;
  transform: translateX(0);
}

.js-fadeIn-RtoL {
  opacity: 0;
  transition: .8s;
  transition-delay: .5s;
  transform: translateX(60px);
}

.js-fadeIn-RtoL.active {
  opacity: 1;
  transform: translateX(0);
}

/* ====================
        mask
==================== */
.main__wrap #mask01,
.main__wrap #mask02,
.main__wrap #mask03,
.main__wrap #mask04 {
  max-width: 100%;
  height: auto;
}

.main__wrap #mask01 .st0,
.main__wrap #mask02 .st0,
.main__wrap #mask03 .st0,
.main__wrap #mask04 .st0 {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}