@charset "utf-8";
/* CSS Document */
* {
  list-style-type: none;
  box-sizing: border-box;
}
.header, .footer {
  margin: 0;
}
.header__contents,.header__subContents,.header .headerMenu__list,.footer__contents {
  max-width: 100%;
}
.sitemap {
  display: none;
}
.pcOnly {display: block;}
.spOnly {display: none;}

main {
  font-family: 'ヒラギノ角ゴシック','Hiragino Sans',arial, Meiryo, 'Yu Gothic', sans-serif!important;
  font-weight: 500;
  color: #3b4250;
  line-height: 1.4;
  overflow: hidden;
}
main a:hover, main a:hover img {
  opacity: 1;
}
main button {
  background: none;
  border: none;
}
main img {
  width: 100%;
  max-width: fit-content;
  vertical-align: bottom;
}
main > section:nth-of-type(n+2) {
  transform: skewY(-10deg);
}
main > section:nth-of-type(n+2) > * {
  transform: skewY(10deg);
}
.contentsWrap {
  max-width: 820px;
  text-align: left;
  margin: auto;
}
.dispNone {
  display: none;
}
.flex_box {
  display: -webkit-flex;
  display: flex;
  align-items: flex-end;
}
/* ---mvArea--- */
.mvArea {
  padding-top: 40px;
  background: url(../img/bg_mv.png) no-repeat #fee4f6 center top / 1920px auto;
  text-align: center;
}
.prof {
  margin-top: -250px;
  padding: 200px 0 350px;
  background: url(../img/bg_wave_pc.png) no-repeat center top / cover;
  font-size: 20px;
}
.prof span {
  position: relative;
  display: block;
  margin-bottom: 10px;
  font-size: 36px;
  font-weight: bold;
  color: #ff80cb;
}
.prof span:after {
  position: absolute;
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  top: 218px;
  left: 20px;
  background: url(../img/deco1.png) no-repeat center bottom / 100% auto;
  opacity: 0.2;
  transform: rotate(45deg);
  pointer-events: none;
  mix-blend-mode: darken;
}
/* ---movieArea--- */
.movieArea {
  position: relative;
  margin-top: -270px;
  padding: 38px 0 95px;
  background: url(../img/bg_line.png) repeat #3b4251 center top / 110px auto;
}
.movieBox figure,.movieBox div {
  width: 450px;
}
.movieBox div {margin-bottom: -240px;}
.movieBox div:last-of-type {margin-bottom: -80px;}
.movieBox figure {margin-bottom: -570px;}
.movieBox div:nth-of-type(odd){
  margin-right: 0;
  margin-left: auto;
}
/* ---articleArea--- */
.articleArea {
  margin-top: 0;
  padding-top: 60px;
  background: url(../img/bg_dot.png) repeat #fffbbf center top / 90px auto;
}
.articleBox figure {margin-top: -70px;}
.articleBox figure,.articleBox div {
  width: 390px;
}
.articleBox div {
  position: relative;
  margin-top: -120px;
}
.articleBox figure,
.articleBox div:nth-of-type(even) {
  margin-right: 0;
  margin-left: auto;
}
.articleBox div:first-of-type {
  margin-top: -360px;
}
.articleBox div:last-of-type {
  padding-bottom: 70px;
}
.articleBox div a,
.articleBox div p {
  position: relative;
  display: block;
  padding-top: 36px;
  border-radius: 40px;
  overflow: hidden;
  z-index: 2;
}
.articleBox div a:before,.articleBox div p:before,.articleBox div:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/article_top.png) no-repeat center top / 100% auto;
}

.articleBox div:after {
  background: url(../img/article_bg.png) no-repeat center top / 100% auto;
  top: -30px;
  left: 20px;
}
/* ---endArea--- */
.endArea {
  padding: 90px 0 230px;
  background: url(../img/bg_lattice.png) repeat #fff center top / 30px auto;
}
.endArea .button {
  position: relative;
  width: 440px;
  margin-top: 50px;
}
.endArea .button:after {
  position: absolute;
  content: "";
  display: block;
  width: 90px;
  height: 50px;
  top: -50px;
  left: 130px;
  background: url(../img/deco2.png) no-repeat center bottom / 100% auto;
  opacity: 0.3;
}
.endArea figure {
  position: relative;
  width: 200px;
}
.endArea figure:after {
  position: absolute;
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  top: -20px;
  right: -30px;
  background: url(../img/deco1.png) no-repeat center bottom / 100% auto;
  opacity: 0.3;
  pointer-events: none;
}
.endArea .flex_box {
  align-items: flex-end;
  justify-content: space-around;
}
/*noteArea*/
.noteArea p {
  margin-bottom: 20px;
  font-size: 20px;
}
.noteArea li {
  margin-top: 10px;
  padding-left: 30px;
  text-indent: -30px;
}
.otherArea {
  position: relative;
  margin-top: -170px;
  padding: 40px 15px;
  background: #FFF;
  font-size: 12px;
}
.otherArea .sns {
  width: 300px;
  justify-content: space-between;
  margin-top: 40px;
}

/*セクション間*/
main > section {
  position: relative;
}
main > section:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 62px;
  top: -30px;
  left: 0;
  background: url(../img/section_line1.png) repeat-x center top / auto 100%;
  pointer-events: none;
}
main > section:nth-of-type(3):before {background-image: url(../img/section_line2.png);}
main > section:nth-of-type(4):before {background-image: url(../img/section_line3.png);}
main > section:first-of-type:before {content: none;}



/* ---btn--- */
[class*="hiddenItems"] {display: none;}
.open {display: block;}
[class*="openBtn"] {
  position: absolute;
  bottom: -220px;
  right: 0;
  left: -830px;
  margin: 0 auto;
  transform: rotate(12.8deg)skewY(10deg)!important;
  cursor: pointer;
}
.followBtn {
  position: fixed;
  bottom: 15%;
  left: 75%;
  z-index: 99;
}

/* ---scroll--- */
main section:nth-child(n+2) .js-scroll {
  transition: all, opacity .75s cubic-bezier(0.5, 0, 0, 1) 0.3s, transform .75s cubic-bezier(0.5, 0, 0, 1) 0.3s;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 15, 0, 1);
  transition-timing-function: ease-in-out;
  opacity: 0;
}
main section:nth-child(n+2) .is-active {
  opacity: 1;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

@media screen and (max-width: 499px) {
  .pcOnly {display: none;}
  .spOnly {display: block;}
  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, mark, audio, video {
    font-family: 'ヒラギノ角ゴシック','Hiragino Sans',arial, Meiryo, 'Yu Gothic', sans-serif!important;
  }
  .mvArea {
    padding-top: 10px;
    background: url(../img/bg_mv.png) no-repeat #fff center top / 340%;
}
  .mvArea h2 {
    margin: auto;
    max-width: 100%;
    width: 361px;
  }
  .prof {
    background: url(../img/bg_wave_sp.png) no-repeat center top / 100% auto;
    margin-top: -44%;
    padding: 28% 15px 0;
    height: 710px;
  }
  .prof span {font-size: 32px;}
  h3 {
    max-width: 100%;
    width: 410px;
    margin: auto;
    padding: 20px 15px 0;
  }
  .movieArea {
    padding: 38px 0 0;
  }
  .movieBox figure, .movieBox div {
    margin: auto;
}
  .movieBox figure {
    max-width: 100%;
    width: 372px;
    margin-bottom: -300px;
}
  .movieBox div {
    max-width: 100%;
    width: 375px;
    margin: -40px auto 0;
}
  .movieBox div:nth-of-type(odd) {margin: auto;margin: -40px auto 0;}
  .movieBox div:last-of-type {padding-bottom: 100px;}
  [class*="openBtn"] {
    bottom: -2.4%;
    left: -160px;
    width: 750px;
    transform: rotate(2.6deg) skewY(10deg) !important;
  }
  .articleArea {margin-top: -70px;}
  .articleBox figure,.articleBox div {
    max-width: 100%;
    margin: -10px auto 0;
    margin-right: auto!important;
  }
  
  .articleBox div {
    max-width: 95%;
    margin-top: 50px;
  }
  .articleBox div:first-of-type {
    margin-top: -280px;
  }
  .articleBox div:last-of-type {
    padding-bottom: 160px;
  }
  .endArea {
    margin-top: -80px;
    padding: 60px 0 200px;
  }
  .endArea .contentsWrap {
    text-align: center;
  }
  .endArea h3 {
    width: 180px;
    margin-right: 0;
  }
  .endArea figure {
    max-width: 100%;
    width: 150px;
    margin: 0 auto 0 0;
  }
  .endArea .button {max-width: 98%;width: 366px;margin: 20px auto 0;}
  .followBtn {
    width: 327px;
    bottom: 2%;
    left: 0;
  }
  .footer__contents {
    padding-bottom: 140px;
  }
}
/*タブレット*/
@media only screen and (min-width: 500px) and (max-width: 849px) {
  .otherArea {font-size: 20px;}
  .noteArea li {
    padding-left: 50px;
    text-indent: -50px;
  }
}

@media only screen and (min-width: 769px) and (max-width: 849px) {
  html {zoom:0.9;}
}
@media only screen and (min-width: 500px) and (max-width: 768px) {
  main {zoom:0.8;}
}
@media only screen and (min-width: 500px) and (max-width: 669px) {
  main {zoom:0.7;}
}
@media only screen and (min-width: 500px) and (max-width: 599px) {
  main {zoom:0.6;}
}