@charset "UTF-8";
/* ==========================================================================
   トップページ
   ========================================================================== */
/* :::::: ヘッダー :::::: */
body[data-page="top"] #header {
  display: none;
  position: relative;
  overflow: hidden;
  z-index: 20; }

/* :::::: ヘッダー :::::: */
#contents .content-title,
#footer .content-title {
  width: auto;
  margin-bottom: 1em;
  padding: 0;
  text-align: center; }

/* :::::: タイトル :::::: */
#contents #case-study .content-title .bln {
  left: calc(50% - .85em); }

#contents #works .content-title .bln {
  left: calc(50% + 1.2em); }

body[data-page="top"] #footer .content-title {
  display: block; }

/* :::::: フッター :::::: */
#footer .content-title .bln {
  top: -.3em;
  left: calc(50% - 2.4em);
  fill: #e16a93; }

#footer .content-title img {
  position: absolute;
  top: -.7em;
  right: 80%; }

/* :::::: トップページは移動しない :::::: */
body[data-page="top"].init .menu-toggle {
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0); }

@media only screen and (max-width: 767px) {
  #footer {
    margin-top: 0; } }
/* ==========================================================================
   世界は僕らで、できている。
   ========================================================================== */
#main-visual .main-txt {
  pointer-events: none;
  position: absolute;
  z-index: 20;
  top: 40%;
  left: 50%;
  background: rgba(255, 255, 255, 0.7);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: top .6s, font-size .6s;
  will-change: top, font-size; }

.main-copy,
.main-lead {
  width: 70vw;
  max-width: 840px;
  text-align: center; }

.main-copy {
  margin: 1em auto;
  padding: .3em 0;
  font-size: 5rem;
  line-height: 1;
  white-space: nowrap; }

#main-visual .main-copy {
  margin: 0;
  padding: .3em 0 .3em .6em; }

.main-copy .p1 {
  margin-right: -.5em;
  letter-spacing: .1em; }

.main-copy .p2 {
  margin-right: -.1em;
  letter-spacing: .05em; }

.main-lead {
  margin: 0 auto 10em; }

#main-visual .main-lead {
  margin: 0;
  padding: 0 0 1em 2em;
  font-size: 1.6rem;
  font-weight: bold;
  white-space: nowrap; }

.main-lead .txt {
  position: relative;
  display: inline-block;
  margin: 0; }

.main-lead .txt + .txt {
  margin-top: 1.5em; }

.main-lead .txt .bln,
.main-lead .txt img {
  position: absolute; }

.main-lead .txt:nth-child(1) .bln {
  right: -3em;
  top: -2em; }

.main-lead .txt:nth-child(2) .bln {
  left: 0;
  top: -2em; }

.main-lead .txt img {
  right: -80px;
  bottom: -2em; }

.groove_banner {
  margin: -4em auto 8em;
  text-align: center; }

@media (max-width: 479px) {
  .groove_banner {
    margin-bottom: 5em; }

  .groove_banner .bnr_pc {
    display: none; } }
@media (min-width: 480px) {
  .groove_banner .bnr_sp {
    display: none; } }
@media only screen and (max-width: 1199px) {
  .main-copy,
  .main-lead {
    width: calc(100% - 40px); }

  .groove_banner {
    width: calc(100% - 40px); } }
@media only screen and (max-width: 767px) {
  .main-copy {
    font-size: 6vw; }

  #main-visual .main-lead {
    font-size: 2vw; }

  .main-lead .txt {
    font-size: 1.3rem; }

  #main-visual .main-txt {
    top: 60%; } }
@media only screen and (max-width: 680px) {
  .main-lead .txt {
    text-align: left; }

  .main-lead .txt br {
    display: none; }

  .main-lead .txt .bln {
    display: none; }

  .main-lead .txt img {
    position: static;
    display: block;
    margin: 1em auto; } }
@media only screen and (max-width: 479px) {
  .main-lead,
  body[data-page="top"] #contents > section {
    margin-bottom: 5em; }

  #main-visual .main-txt {
    top: 55%; }

  #main-visual .main-lead {
    display: none; } }
/* ==========================================================================
   メインビジュアル
   ========================================================================== */
#main-visual {
  display: none; }

body[data-page="top"] #main-visual {
  display: block;
  height: 90.4vw; }

.visual-sky {
  position: relative;
  height: 90.4vw;
  background: linear-gradient(0deg, #71c7d5 70%, #52c1e1); }

@media only screen and (max-width: 767px) {
  body[data-page="top"] #main-visual,
  body[data-page="top"] .visual-sky {
    height: calc(66vw + 92px); } }
@media only screen and (min-width: 1200px) {
  body[data-page="top"] #main-visual,
  body[data-page="top"] .visual-sky {
    height: 1084px; } }
@media only screen and (min-width: 1800px) {
  body[data-page="top"] #main-visual,
  body[data-page="top"] .visual-sky {
    height: calc(50.95vw + 168px); } }
/* ==========================================================================
   バルーンナビ
   ========================================================================== */
.main-nav {
  z-index: 19;
  margin: 0 auto;
  position: relative;
  padding: 0 20px 20px;
  text-align: center;
  background-color: #9da28a; }
  .main-nav li {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    text-transform: uppercase; }
    .main-nav li + li {
      margin-left: 40px; }
    .main-nav li:after {
      position: absolute;
      bottom: 125%;
      left: 50%;
      margin: -15px 0 0 -28px;
      display: block;
      content: "";
      width: 56px;
      height: 24px;
      background: url(../assets/img/common/logo_bokura_02.png) center top no-repeat;
      -webkit-transition: all 0.2s;
      transition: all 0.2s linear;
      opacity: 0;
      bottom: 95%; }
    .main-nav li:hover:after {
      opacity: 1;
      bottom: 145%; }
  body[data-page="top"] .main-nav li.top:after {
    opacity: 1;
    bottom: 145%; }

@media only screen and (max-width: 767px) {
  .main-nav {
    display: none; } }
.main-nav a {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: inherit; }

.main-nav a.hovering svg {
  display: none; }

.main-nav svg {
  width: 100%;
  height: 100%; }

/* ==========================================================================
   ロゴ
   ========================================================================== */
.site-logo {
  position: absolute;
  z-index: 6;
  top: -120px;
  left: 45px;
  transition: top .6s, -webkit-transform 2s 10s;
  transition: top .6s, transform 2s 10s;
  will-change: top, transform; }

body[data-page="top"].loaded .site-logo {
  top: 25px;
  -ms-transform: translateY(-150px);
  -webkit-transform: translateY(-150px);
  transform: translateY(-150px); }

body[data-page="top"].init .site-logo {
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition-duration: 1s;
  transition-delay: 0s; }

@media only screen and (max-width: 767px) {
  body[data-page="top"] .site-logo {
    left: 0;
    width: 100%;
    text-align: center; }

  body[data-page="top"].loaded .site-logo {
    top: 10vw; }

  body[data-page="top"] .site-logo a {
    display: inline-block;
    width: 50vw;
    min-width: 200px; }

  body[data-page="top"] .site-logo img {
    width: 100%; } }
/* ==========================================================================
   タウンイメージ
   ========================================================================== */
.main-bg {
  position: absolute;
  z-index: 5;
  bottom: -1px;
  left: 0;
  max-width: 3000px;
  width: 150%;
  margin-left: -25%;
  padding-top: 14vw; }

@media only screen and (max-width: 767px) {
  .main-bg {
    width: 100%;
    margin-left: 0;
    padding-top: 92px; } }
@media only screen and (min-width: 1200px) {
  .main-bg {
    left: 50%;
    width: 1800px;
    margin-left: 0;
    padding-top: 168px;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); } }
@media only screen and (min-width: 1800px) {
  .main-bg {
    width: 100%; } }
.main-cloud,
.main-helicopter,
.main-car {
  position: absolute; }

.main-cloud img,
.main-helicopter img,
.main-car img {
  width: 100%;
  max-width: none;
  height: auto; }

/* :::::: 雲 :::::: */
.main-cloud {
  will-change: animation;
  left: -23.3vw;
  -webkit-animation: clouds infinite linear both;
  animation: clouds infinite linear both; }

.main-cloud1 {
  width: 23.3vw;
  top: -1.5vw;
  z-index: 3; }

.main-cloud2 {
  width: 19.45vw;
  top: 1vw;
  z-index: 3; }

.main-cloud3 {
  width: 7.35vw;
  top: -10vw;
  z-index: 1; }

.main-cloud4 {
  width: 23.1vw;
  top: -7vw;
  z-index: 3; }

.main-cloud5 {
  width: 8.2vw;
  top: -6vw;
  z-index: 1; }

.main-cloud6 {
  width: 10.2vw;
  top: -2vw;
  z-index: 2; }

.main-cloud7 {
  width: 5.55vw;
  top: 8vw;
  z-index: 1; }

.main-cloud8 {
  width: 19.1vw;
  top: 9vw;
  z-index: 3; }

.main-cloud9 {
  width: 9.8vw;
  top: 17vw;
  z-index: 2; }

@media only screen and (min-width: 1200px) {
  .main-cloud1 {
    width: calc(23.3 * 12px);
    top: calc(-3.5 * 12px); }

  .main-cloud2 {
    width: calc(19.45 * 12px);
    top: calc(-1 * 12px); }

  .main-cloud3 {
    width: calc(7.35 * 12px);
    top: calc(-12 * 12px); }

  .main-cloud4 {
    width: calc(23.1 * 12px);
    top: calc(-15 * 12px); }

  .main-cloud5 {
    width: calc(8.2 * 12px);
    top: calc(-8 * 12px); }

  .main-cloud6 {
    width: calc(10.2 * 12px);
    top: calc(-5 * 12px); }

  .main-cloud7 {
    width: calc(5.55 * 12px);
    top: calc(1 * 12px); }

  .main-cloud8 {
    width: calc(19.1 * 12px);
    top: calc(7 * 12px); }

  .main-cloud9 {
    width: calc(9.8 * 12px);
    top: calc(15 * 12px); } }
@media only screen and (max-width: 767px) {
  .main-cloud1 {
    top: 2.5vw; }

  .main-cloud2 {
    top: 4vw; }

  .main-cloud3 {
    top: -7vw; }

  .main-cloud4 {
    top: -4vw; }

  .main-cloud5 {
    top: -3vw; }

  .main-cloud6 {
    top: 1vw; }

  .main-cloud7 {
    top: 11vw; }

  .main-cloud8 {
    top: 12vw; }

  .main-cloud9 {
    top: 20vw; } }
@-webkit-keyframes clouds {
  0% {
    left: -23.3vw; }
  100% {
    left: 100%; } }
@keyframes clouds {
  0% {
    left: -23.3vw; }
  100% {
    left: 100%; } }
.main-cloud1 {
  -webkit-animation-duration: 45s;
  -webkit-animation-delay: calc(-40s * .1);
  animation-duration: 45s;
  animation-delay: calc(-40s * .1); }

.main-cloud2 {
  -webkit-animation-duration: 38s;
  -webkit-animation-delay: calc(-38s * .2);
  animation-duration: 38s;
  animation-delay: calc(-38s * .2); }

.main-cloud3 {
  -webkit-animation-duration: 60s;
  -webkit-animation-delay: calc(-60s * .3);
  animation-duration: 60s;
  animation-delay: calc(-60s * .3); }

.main-cloud4 {
  -webkit-animation-duration: 38s;
  -webkit-animation-delay: calc(-38s * .4);
  animation-duration: 38s;
  animation-delay: calc(-38s * .4); }

.main-cloud5 {
  -webkit-animation-duration: 58s;
  -webkit-animation-delay: calc(-58s * .5);
  animation-duration: 58s;
  animation-delay: calc(-58s * .5); }

.main-cloud6 {
  -webkit-animation-duration: 40s;
  -webkit-animation-delay: calc(-40s * .6);
  animation-duration: 40s;
  animation-delay: calc(-40s * .6); }

.main-cloud7 {
  -webkit-animation-duration: 60s;
  -webkit-animation-delay: calc(-60s * .7);
  animation-duration: 60s;
  animation-delay: calc(-60s * .7); }

.main-cloud8 {
  -webkit-animation-duration: 40s;
  -webkit-animation-delay: calc(-43s * .8);
  animation-duration: 40s;
  animation-delay: calc(-43s * .8); }

.main-cloud9 {
  -webkit-animation-duration: 56s;
  -webkit-animation-delay: calc(-56s * .9);
  animation-duration: 56s;
  animation-delay: calc(-56s * .9); }

/* :::::: ヘリコプター :::::: */
.main-helicopter {
  z-index: 6;
  top: -8vw;
  right: -28.7vw;
  width: 28.7vw;
  transition: top 1.6s, right 3s;
  will-change: top, right; }

body.loaded .main-helicopter {
  top: 2vw;
  right: -2vw; }

.main-helicopter img {
  -webkit-animation: helicopter 5s infinite alternate both;
  animation: helicopter 5s infinite alternate both;
  will-change: animation; }

@media only screen and (min-width: 1200px) {
  .main-helicopter {
    width: calc(28.7 * 12px); }

  body.loaded .main-helicopter {
    top: 2vw;
    right: 8vw; } }
@-webkit-keyframes helicopter {
  0% {
    -webkit-transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(-10px); } }
@keyframes helicopter {
  0% {
    transform: translateY(20px); }
  100% {
    transform: translateY(-10px); } }
/* :::::: クルマ :::::: */
.main-car {
  left: -11.5vw;
  -webkit-animation: cars infinite linear both;
  animation: cars infinite linear both;
  will-change: animation; }

.main-car1 {
  width: 9.45vw;
  bottom: 7vw;
  z-index: 12; }

.main-car2 {
  width: 10.65vw;
  bottom: 1vw;
  z-index: 14; }

.main-car3 {
  width: 10.3vw;
  bottom: 10vw;
  z-index: 11; }

.main-car4 {
  width: 11.5vw;
  bottom: 4vw;
  z-index: 13; }

@media only screen and (max-width: 767px) {
  .main-car1 {
    bottom: 5vw; }

  .main-car2 {
    bottom: 1vw; }

  .main-car3 {
    bottom: 7vw; }

  .main-car4 {
    bottom: 3vw; } }
@media only screen and (min-width: 1200px) {
  .main-car1 {
    width: calc(9.45 * 12px);
    bottom: calc(7 * 12px); }

  .main-car2 {
    width: calc(10.65 * 12px);
    bottom: calc(1 * 12px); }

  .main-car3 {
    width: calc(10.3 * 12px);
    bottom: calc(10 * 12px); }

  .main-car4 {
    width: calc(11.5 * 12px);
    bottom: calc(4 * 12px); } }
@-webkit-keyframes cars {
  0% {
    left: 100%; }
  100% {
    left: -11.5vw; } }
@keyframes cars {
  0% {
    left: 100%; }
  100% {
    left: -11.5vw; } }
.main-car1 {
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: calc(-12s * .2);
  animation-duration: 10s;
  animation-delay: calc(-12s * .2); }

.main-car2 {
  -webkit-animation-duration: 8s;
  -webkit-animation-delay: calc(-10s * .4);
  animation-duration: 8s;
  animation-delay: calc(-10s * .4); }

.main-car3 {
  -webkit-animation-duration: 12s;
  -webkit-animation-delay: calc(-15s * .6);
  animation-duration: 12s;
  animation-delay: calc(-15s * .6); }

.main-car4 {
  -webkit-animation-duration: 15s;
  -webkit-animation-delay: calc(-18s * .8);
  animation-duration: 15s;
  animation-delay: calc(-18s * .8); }

.main-car2,
.main-car4 {
  -webkit-animation-direction: reverse;
  animation-direction: reverse; }

.main-car img {
  left: -11.5vw;
  -webkit-animation: carAction 10s infinite linear both;
  animation: carAction 10s infinite linear both; }

@-webkit-keyframes carAction {
  40%, 42%, 60%, 62% {
    -webkit-transform: translateY(0) rotate(0deg); }
  41% {
    -webkit-transform: translateY(-3px) rotate(3deg); }
  41.5%, 61.5% {
    -webkit-transform: translateY(-3px) rotate(-3deg); }
  61% {
    -webkit-transform: translateY(-3px) rotate(3deg); } }
@keyframes carAction {
  40%, 42%, 60%, 62% {
    transform: translateY(0) rotate(0deg); }
  41% {
    transform: translateY(-3px) rotate(3deg); }
  41.5%, 61.5% {
    transform: translateY(-3px) rotate(-3deg); }
  61% {
    transform: translateY(-3px) rotate(3deg); } }
.main-car1 img {
  -webkit-animation-duration: 8s;
  -webkit-animation-delay: -5s;
  animation-duration: 8s;
  animation-delay: -5s; }

.main-car2 img {
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 5s;
  animation-duration: 6s;
  animation-delay: 5s; }

.main-car3 img {
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: -3s;
  animation-duration: 10s;
  animation-delay: -3s; }

.main-car4 img {
  -webkit-animation-duration: 13s;
  -webkit-animation-delay: -8s;
  animation-duration: 13s;
  animation-delay: -8s; }

.main-car2 img,
.main-car4 img {
  -webkit-animation-direction: reverse;
  animation-direction: reverse; }

/* :::::: 人々 :::::: */
.main-people {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 1200px;
  height: 100%; }

@media only screen and (max-width: 767px) {
  .main-people {
    display: none; } }
@media only screen and (min-width: 1200px) {
  .main-people {
    left: 50%;
    margin-left: -600px; } }
@media only screen and (min-width: 1800px) {
  .main-people {
    max-width: calc(100vw / 3 * 2);
    margin-left: calc(-100vw / 3); } }
.main-people li {
  position: absolute;
  z-index: 6; }

.main-people li.jumping,
.main-people li.spining,
.main-people li.swaying,
.main-people li.shaking,
.main-people li.hi img {
  will-change: animation; }

.main-people .main-people30 {
  z-index: 11; }

/* ジャンプ */
.main-people li.jumping {
  -webkit-animation: jump .1s alternate 2;
  animation: jump .1s alternate 2; }

@-webkit-keyframes jump {
  0% {
    -webkit-transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-8px); } }
@keyframes jump {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(-8px); } }
/* ハイジャンプ */
.main-people li.hi img {
  -webkit-animation: highjump .2s alternate 2;
  animation: highjump .2s alternate 2;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom; }

@-webkit-keyframes highjump {
  0% {
    -webkit-transform: translateY(0); }
  20% {
    -webkit-transform: scaleY(0.9); }
  100% {
    -webkit-transform: translateY(-24px) scaleY(1); } }
@keyframes highjump {
  0% {
    transform: translateY(0); }
  20% {
    transform: scaleY(0.9); }
  100% {
    transform: translateY(-24px) scaleY(1); } }
/* 回転 */
.main-people li.spining {
  -webkit-animation: spin .3s;
  animation: spin .3s; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(0); }
  100% {
    -webkit-transform: rotateY(-360deg); } }
@keyframes spin {
  0% {
    transform: rotateY(0); }
  100% {
    transform: rotateY(-360deg); } }
/* 揺れる */
.main-people li.swaying {
  -webkit-animation: sway .3s;
  animation: sway .3s; }

@-webkit-keyframes sway {
  0%, 100% {
    -webkit-transform: translateX(0); }
  20% {
    -webkit-transform: translateX(5px); }
  40% {
    -webkit-transform: translateX(-5px); }
  60% {
    -webkit-transform: translateX(3px); }
  80% {
    -webkit-transform: translateX(-3px); } }
@keyframes sway {
  0%, 100% {
    transform: translateX(0); }
  20% {
    transform: translateX(5px); }
  40% {
    transform: translateX(-5px); }
  60% {
    transform: translateX(3px); }
  80% {
    transform: translateX(-3px); } }
/* シェイク */
.main-people li.shaking {
  -webkit-animation: shake .3s reverse;
  animation: shake .3s reverse; }

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(0) rotate(0deg); }
  10% {
    -webkit-transform: translate(-3px, -2px) rotate(-1.5deg); }
  20% {
    -webkit-transform: translate(1px, -1px) rotate(1deg); }
  30% {
    -webkit-transform: translate(-2px, -2px) rotate(-0.6deg); }
  40% {
    -webkit-transform: translate(3px, 3px) rotate(0.5deg); }
  50% {
    -webkit-transform: translate(0) rotate(0deg); }
  60% {
    -webkit-transform: translate(-3px, -4px) rotate(-1deg); }
  70% {
    -webkit-transform: translate(1px, -4px) rotate(1.5deg); }
  80% {
    -webkit-transform: translate(-3px, -2px) rotate(-0.3deg); }
  90% {
    -webkit-transform: translate(3px, 2px) rotate(0.4deg); }
  100% {
    -webkit-transform: translate(0) rotate(0deg); } }
@keyframes shake {
  0% {
    transform: translate(0) rotate(0deg); }
  10% {
    transform: translate(-3px, -2px) rotate(-1.5deg); }
  20% {
    transform: translate(1px, -1px) rotate(1deg); }
  30% {
    transform: translate(-2px, -2px) rotate(-0.6deg); }
  40% {
    transform: translate(3px, 3px) rotate(0.5deg); }
  50% {
    transform: translate(0) rotate(0deg); }
  60% {
    transform: translate(-3px, -4px) rotate(-1deg); }
  70% {
    transform: translate(1px, -4px) rotate(1.5deg); }
  80% {
    transform: translate(-3px, -2px) rotate(-0.3deg); }
  90% {
    transform: translate(3px, 2px) rotate(0.4deg); }
  100% {
    transform: translate(0) rotate(0deg); } }
.main-people li img {
  max-width: none; }

.main-people .main-people1 {
  top: 50.2vw;
  left: -10.8vw; }

.main-people .main-people2 {
  top: 51.9vw;
  left: -8.9vw; }

.main-people .main-people3 {
  top: 41.7vw;
  left: 8.8vw; }

.main-people .main-people4 {
  top: 66vw;
  left: 47.5vw; }

.main-people .main-people5 {
  top: 39vw;
  left: 13.8vw; }

.main-people .main-people6 {
  top: 43vw;
  left: 0; }

.main-people .main-people7 {
  top: 33.5vw;
  left: 16.63vw; }

.main-people .main-people8 {
  top: 43.5vw;
  left: 23.2vw; }

.main-people .main-people9 {
  top: 49vw;
  left: 24vw; }

.main-people .main-people10 {
  top: 48vw;
  left: -12.8vw; }

.main-people .main-people11 {
  top: 53.5vw;
  left: 29.5vw; }

.main-people .main-people12 {
  top: 57.8vw;
  left: 6.9vw; }

.main-people .main-people13 {
  top: 57.8vw;
  left: 10.9vw; }

.main-people .main-people14 {
  top: 59.25vw;
  left: 36.3vw; }

.main-people .main-people15 {
  top: 60.9vw;
  left: 40.9vw; }

.main-people .main-people16 {
  top: 31vw;
  left: 14vw; }

.main-people .main-people17 {
  top: 67.6vw;
  left: 54.8vw; }

.main-people .main-people18 {
  top: 67.2vw;
  left: 58.9vw; }

.main-people .main-people19 {
  top: 21.5vw;
  left: 78vw; }

.main-people .main-people20 {
  top: 40vw;
  left: 73.5vw; }

.main-people .main-people21 {
  top: 71vw;
  left: -3.3vw; }

.main-people .main-people22 {
  top: 72.58vw;
  left: -.4vw; }

.main-people .main-people23 {
  top: 71.58vw;
  left: 5.25vw; }

.main-people .main-people24 {
  top: 70.66vw;
  left: 7.58vw; }

.main-people .main-people25 {
  top: 70.58vw;
  left: 25.58vw; }

.main-people .main-people26 {
  top: 71.33vw;
  left: 30.4vw; }

.main-people .main-people27 {
  top: 71.16vw;
  left: 42.9vw; }

.main-people .main-people28 {
  top: 71.75vw;
  left: 52.16vw; }

.main-people .main-people29 {
  top: 71.1vw;
  left: 60.2vw; }

.main-people .main-people30 {
  top: 72vw;
  left: 68vw; }

.main-people .main-people31 {
  top: 73.1vw;
  left: 75.1vw; }

.main-people .main-people32 {
  top: 72.16vw;
  left: 80vw; }

.main-people .main-people33 {
  top: 71.1vw;
  left: 90.4vw; }

.main-people .main-people34 {
  top: 73.9vw;
  left: 104.4vw; }

@media only screen and (max-width: 1199px) {
  .main-people .main-people1 img {
    width: 2.25vw; }

  .main-people .main-people2 img {
    width: 2.16vw; }

  .main-people .main-people3 img {
    width: 2.75vw; }

  .main-people .main-people4 img {
    width: 2.66vw; }

  .main-people .main-people5 img {
    width: 5.08vw; }

  .main-people .main-people6 img {
    width: 1.92vw; }

  .main-people .main-people7 img {
    width: 2.08vw; }

  .main-people .main-people8 img {
    width: 3.4vw; }

  .main-people .main-people9 img {
    width: 1.83vw; }

  .main-people .main-people10 img {
    width: 3.5vw; }

  .main-people .main-people11 img {
    width: 2vw; }

  .main-people .main-people12 img {
    width: 3.5vw; }

  .main-people .main-people13 img {
    width: 1.75vw; }

  .main-people .main-people14 img {
    width: 2.92vw; }

  .main-people .main-people15 img {
    width: 1.58vw; }

  .main-people .main-people16 img {
    width: 1vw; }

  .main-people .main-people17 img {
    width: 2.08vw; }

  .main-people .main-people18 img {
    width: 4.16vw; }

  .main-people .main-people19 img {
    width: 4vw; }

  .main-people .main-people20 img {
    width: 3.5vw; }

  .main-people .main-people21 img {
    width: 2.08vw; }

  .main-people .main-people22 img {
    width: 1.75vw; }

  .main-people .main-people23 img {
    width: 2.17vw; }

  .main-people .main-people24 img {
    width: 2.17vw; }

  .main-people .main-people25 img {
    width: 1.75vw; }

  .main-people .main-people26 img {
    width: 1.92vw; }

  .main-people .main-people27 img {
    width: 2.58vw; }

  .main-people .main-people28 img {
    width: 1.58vw; }

  .main-people .main-people29 img {
    width: 5.5vw; }

  .main-people .main-people30 img {
    width: 3.08vw; }

  .main-people .main-people31 img {
    width: 4.5vw; }

  .main-people .main-people32 img {
    width: 2.83vw; }

  .main-people .main-people33 img {
    width: 3.83vw; }

  .main-people .main-people34 img {
    width: 4vw; } }
@media only screen and (min-width: 1200px) {
  .main-people .main-people1 {
    top: 602px;
    left: -130px; }

  .main-people .main-people2 {
    top: 623px;
    left: -107px; }

  .main-people .main-people3 {
    top: 505px;
    left: 104px; }

  .main-people .main-people4 {
    top: 800px;
    left: 573px; }

  .main-people .main-people5 {
    top: 465px;
    left: 165px; }

  .main-people .main-people6 {
    top: 520px;
    left: 0; }

  .main-people .main-people7 {
    top: 402px;
    left: 196px; }

  .main-people .main-people8 {
    top: 522px;
    left: 279px; }

  .main-people .main-people9 {
    top: 588px;
    left: 288px; }

  .main-people .main-people10 {
    top: 600px;
    left: -220px; }

  .main-people .main-people11 {
    top: 642px;
    left: 354px; }

  .main-people .main-people12 {
    top: 695px;
    left: 97px; }

  .main-people .main-people13 {
    top: 695px;
    left: 144px; }

  .main-people .main-people14 {
    top: 711px;
    left: 434px; }

  .main-people .main-people15 {
    top: 738px;
    left: 491px; }

  .main-people .main-people16 {
    top: 375px;
    left: 165px; }

  .main-people .main-people17 {
    top: 812px;
    left: 658px; }

  .main-people .main-people18 {
    top: 806px;
    left: 707px; }

  .main-people .main-people19 {
    top: 260px;
    left: 940px; }

  .main-people .main-people20 {
    top: 477px;
    left: 880px; }

  .main-people .main-people21 {
    top: 852px;
    left: -40px; }

  .main-people .main-people22 {
    top: 871px;
    left: -5px; }

  .main-people .main-people23 {
    top: 859px;
    left: 75px; }

  .main-people .main-people24 {
    top: 848px;
    left: 99px; }

  .main-people .main-people25 {
    top: 847px;
    left: 307px; }

  .main-people .main-people26 {
    top: 856px;
    left: 365px; }

  .main-people .main-people27 {
    top: 854px;
    left: 515px; }

  .main-people .main-people28 {
    top: 861px;
    left: 626px; }

  .main-people .main-people29 {
    top: 853px;
    left: 720px; }

  .main-people .main-people30 {
    top: 862px;
    left: 817px; }

  .main-people .main-people31 {
    top: 877px;
    left: 901px; }

  .main-people .main-people32 {
    top: 866px;
    left: 960px; }

  .main-people .main-people33 {
    top: 853px;
    left: 1085px; }

  .main-people .main-people34 {
    top: 887px;
    left: 1253px; } }
@media only screen and (min-width: 1800px) {
  .main-people .main-people1 {
    top: calc(24vw + 168px);
    left: -7.3vw; }

  .main-people .main-people2 {
    top: calc(25.2vw + 168px);
    left: -5.9vw; }

  .main-people .main-people3 {
    top: calc(19vw + 168px);
    left: 6vw; }

  .main-people .main-people4 {
    top: calc(35.3vw + 168px);
    left: 31.9vw; }

  .main-people .main-people5 {
    top: calc(16.6vw + 168px);
    left: 9.4vw; }

  .main-people .main-people6 {
    top: calc(19.5vw + 168px);
    left: 0; }

  .main-people .main-people7 {
    top: calc(13vw + 168px);
    left: 11vw; }

  .main-people .main-people8 {
    top: calc(19.9vw + 168px);
    left: 15.6vw; }

  .main-people .main-people9 {
    top: calc(23.1vw + 168px);
    left: 16vw; }

  .main-people .main-people10 {
    top: calc(24vw + 168px);
    left: -12.4vw; }

  .main-people .main-people11 {
    top: calc(26.3vw + 168px);
    left: 19.6vw; }

  .main-people .main-people12 {
    top: calc(29.3vw + 168px);
    left: 5vw; }

  .main-people .main-people13 {
    top: calc(29.5vw + 168px);
    left: 7.6vw; }

  .main-people .main-people14 {
    top: calc(30.1vw + 168px);
    left: 24vw; }

  .main-people .main-people15 {
    top: calc(31.6vw + 168px);
    left: 27.4vw; }

  .main-people .main-people16 {
    top: calc(11.9vw + 168px);
    left: 9.2vw; }

  .main-people .main-people17 {
    top: calc(35.9vw + 168px);
    left: 37vw; }

  .main-people .main-people18 {
    top: calc(35.3vw + 168px);
    left: 39vw; }

  .main-people .main-people19 {
    top: calc(5.3vw + 168px);
    left: 52.2vw; }

  .main-people .main-people20 {
    top: calc(17.2vw + 168px);
    left: 49vw; }

  .main-people .main-people21 {
    top: calc(38vw + 168px);
    left: -2.3vw; }

  .main-people .main-people22 {
    top: calc(39.2vw + 168px);
    left: -.3vw; }

  .main-people .main-people23 {
    top: calc(38.4vw + 168px);
    left: 4.25vw; }

  .main-people .main-people24 {
    top: calc(37.8vw + 168px);
    left: 5.5vw; }

  .main-people .main-people25 {
    top: calc(37.7vw + 168px);
    left: 17.1vw; }

  .main-people .main-people26 {
    top: calc(38.3vw + 168px);
    left: 20.4vw; }

  .main-people .main-people27 {
    top: calc(38.1vw + 168px);
    left: 28.6vw; }

  .main-people .main-people28 {
    top: calc(38.5vw + 168px);
    left: 35.1vw; }

  .main-people .main-people29 {
    top: calc(38.2vw + 168px);
    left: 40.2vw; }

  .main-people .main-people30 {
    top: calc(38.6vw + 168px);
    left: 45.4vw; }

  .main-people .main-people31 {
    top: calc(39.5vw + 168px);
    left: 50.2vw; }

  .main-people .main-people32 {
    top: calc(39.1vw + 168px);
    left: 53.6vw; }

  .main-people .main-people33 {
    top: calc(38.1vw + 168px);
    left: 60.4vw; }

  .main-people .main-people34 {
    top: calc(39.9vw + 168px);
    left: 69.8vw; } }
.main-people4::before,
.main-people24::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -5px;
  width: 41px;
  height: 39px;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: 41px 39px;
  -webkit-transform: translateY(-30%);
  transform: translateY(-30%);
  transition: opacity .6s .8s, -webkit-transform .6s 1.2s;
  transition: opacity .6s .8s, transform .6s 1.2s;
  will-change: opacity, transform; }

.main-people4::before {
  background-image: url(../img/main_Hi.png); }

.main-people24::before {
  background-image: url(../img/main_44.png); }

.main-people4.hi::before,
.main-people24.hi::before,
.main-people4.jumping::before,
.main-people24.jumping::before {
  opacity: 1;
  -webkit-transform: translateY(-110%);
  transform: translateY(-110%);
  transition-delay: 0s;
  transition-duration: .2s; }

/* ==========================================================================
   イージングまとめ
   ========================================================================== */
body.loaded .site-title,
#main-visual .main-copy {
  /* easeOutQuint */
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

#header,
#main-visual,
.site-logo,
.site-title,
.main-helicopter {
  /* easeOutExpo */
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }

@media only screen and (min-width: 768px) {
  .main-nav li {
    /* easeOutQuint */
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } }
.main-helicopter img {
  /* easeInOutCubic */
  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }

.main-people li.jumping,
.main-people li.hi img,
.main-people li.spining,
.main-people li.swaying {
  /* easeOutCubic */
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }