@charset "UTF-8";
/*!  変数・関数
================================================ */
/*-----------------------------------------------
 main
-----------------------------------------------*/
h2 {
  margin-bottom: 98px; }

/*-----------------------------------------------
 .animation
-----------------------------------------------*/
.animation {
  width: 1000px;
  margin: 0 auto;
  padding-bottom: 116px; }

.animation01 {
  margin-bottom: 82px; }
  .animation01 .animation-area::before {
    background: url("../img/animation/animation-bg-pc.png") no-repeat; }
  .animation01 .catch {
    text-align: center;
    margin-bottom: 33px; }

.animation02 {
  margin-bottom: 110px; }
  .animation02 .animation-area::before {
    background: url("../img/animation/animation-bg-pc.png") no-repeat; }
  .animation02 .catch {
    text-align: center;
    margin-bottom: 25px; }

.animation-area {
  position: relative;
  background: rgba(19, 251, 221, 0.5);
  padding: 29px 0 30px; }
  .animation-area::before {
    display: block;
    position: absolute;
    content: "";
    top: -40px;
    width: 100%;
    height: 60px; }
  .animation-area .bnr {
    text-align: center;
    margin-bottom: 50px; }
  .animation-area .movie {
    width: 802px;
    height: 460px;
    background: #fff;
    margin: 0 auto 50px;
    padding: 10px; }
    .animation-area .movie iframe {
      text-align: center; }
  .animation-area .copy {
    font-size: 1.6rem;
    text-align: right;
    padding-right: 24px; }

.twitter {
  margin-bottom: 0; }
  .twitter .animation-area::before {
    background: url("../img/animation/twitter-bg-pc.png") no-repeat; }
  .twitter .animation-area {
    background: rgba(85, 229, 251, 0.5);
    padding: 50px 0; }
  .twitter .twitter-area {
    padding: 0 100px; }

@media screen and (max-width: 640px) {
  /*-----------------------------------------------
   main
  -----------------------------------------------*/
  h2 {
    margin-bottom: 15.15625vw; }

  /*-----------------------------------------------
   .animation
  -----------------------------------------------*/
  .animation {
    width: 91.71875vw;
    padding-bottom: 7.8125vw; }

  .animation01 {
    margin-bottom: 12.5vw; }
    .animation01 .animation-area::before {
      background: url("../img/animation/animation-bg-sp.png") no-repeat;
      background-size: cover; }
    .animation01 .catch {
      margin-bottom: 3.125vw; }
      .animation01 .catch img {
        width: 71.71875vw; }
    .animation01 .bnr:nth-of-type(2) img {
      width: 83.90625vw; }
    .animation01 .bnr:nth-child(4) img {
      width: 30.46875vw; }

  .animation02 {
    margin-bottom: 10.9375vw; }
    .animation02 .animation-area::before {
      background: url("../img/animation/animation-bg-sp.png") no-repeat;
      background-size: cover; }
    .animation02 .catch {
      margin-bottom: 3.125vw; }
    .animation02 .catch:first-of-type img {
      width: 80.46875vw; }
    .animation02 .catch:nth-of-type(2) img {
      width: 57.03125vw; }
    .animation02 .movie:first-of-type {
      margin-bottom: 7.8125vw; }
    .animation02 .bnr:nth-of-type(3) img {
      width: 83.75vw; }
    .animation02 .bnr:nth-child(6) img {
      width: 30.46875vw; }

  .animation-area {
    padding: 7.96875vw 0 4.375vw; }
    .animation-area::before {
      top: -5.625vw;
      height: 5.625vw; }
    .animation-area .bnr {
      margin-bottom: 4.6875vw; }
    .animation-area .movie {
      width: 80.78125vw;
      height: 47.734375vw;
      margin: 0 auto 4.6875vw;
      padding: 1.5625vw; }
    .animation-area .copy {
      font-size: 2.09375vw;
      padding-right: 4.0625vw; }

  .twitter .animation-area::before {
    background: url("../img/animation/twitter-bg-sp.png") no-repeat;
    background-size: cover; }
  .twitter .animation-area {
    padding: 3.90625vw 0; }
  .twitter .twitter-area {
    padding: 0 3.90625vw; } }