@media (min-width: 768px) {
  .pageslug_concept .pankuzu {
    margin: 0 auto;
  }

  .pageslug_concept .wrapper {
    max-width: 100%;
    padding: 75px 0;
    text-align: center;
    background-image: url(concept_bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .pageslug_concept h2 {
    font-size: 40px;
    font-family: serif;
    font-weight: 400;
  }

  .pageslug_concept .wrapper p {
    margin: 0;
    font-size: 16px;
    line-height: 2.5;
  }

  .pageslug_concept .wrapper p br {
    display: none;
  }

  .concept_img {
    position: relative;
    width: 648px;
    height: 315px;
    margin: 30px auto 45px auto;
  }

  .scroll_animation p,
  .pageslug_concept h2,
  .scroll_animation img {
    position: relative;
    display: block;
    transition:
      0.75s all,
      transform 4s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.4;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    transform: translateY(calc(40% + 25px));
    will-change: transform;
  }

  .scroll_animation .concept_01 {
    position: absolute;
    top: 0;
    left: 34px;
    right: 0;
    width: 330px;
    height: auto;
    margin: 0 auto;
    z-index: 100;
    transition:
      1.5s all,
      transform 4.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .scroll_animation .concept_02 {
    position: absolute;
    left: 0;
    bottom: 32px;
    width: 200px;
    height: auto;
    z-index: 50;
    transition:
      1.5s all,
      transform 4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .scroll_animation .concept_03 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 170px;
    height: auto;
    z-index: 1;
    transition:
      1.5s all,
      transform 3.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .scroll_animation .show,
  .scroll_animation .show,
  .pageslug_concept .show {
    opacity: 1;
    -webkit-filter: none;
    filter: none;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .pageslug_concept .pankuzu {
    margin: 1.5vw 3.3vw;
  }

  .pageslug_concept .wrapper {
    max-width: 100%;
    padding: 12vw 0;
    text-align: center;
    background-image: url(concept_bg_sp.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .pageslug_concept h2 {
    font-size: 7.73vw;
    font-family: serif;
    font-weight: 400;
  }

  .pageslug_concept p {
    font-size: 4.2vw;
    line-height: 2.5;
  }

  .concept_img {
    position: relative;
    width: 83vw;
    height: 76vw;
    margin: 12vw auto 9.3vw auto;
  }

  .scroll_animation p span,
  .pageslug_concept h2,
  .scroll_animation img {
    position: relative;
    display: block;
    transition:
      0.75s all,
      transform 4s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.4;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    transform: translateY(calc(40% + 6.72vw));
    will-change: transform;
  }

  .scroll_animation .concept_01 {
    position: absolute;
    top: 23.6vw;
    left: 0;
    width: 57.75vw;
    height: auto;
    z-index: 100;
    transition:
      1.5s all,
      transform 4.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .scroll_animation .concept_02 {
    position: absolute;
    top: 0;
    right: 2.66vw;
    width: 35.33vw;
    height: auto;
    z-index: 50;
    transition:
      1.5s all,
      transform 4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .scroll_animation .concept_03 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 29.6vw;
    height: auto;
    z-index: 1;
    transition:
      1.5s all,
      transform 3.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .scroll_animation .show,
  .scroll_animation .show,
  .pageslug_concept .show {
    opacity: 1;
    -webkit-filter: none;
    filter: none;
    transform: translateY(0);
  }
}