@charset "UTF-8";
/*========= Import ===============*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&family=Noto+Sans+JP:wght@100..900&display=swap");
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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/*========= Font ===============*/
/*========= Mixin ===============*/
/*========= Layout ===============*/
html {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
  outline: none;
  -webkit-font-smoothing: antialiased;
}

body {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 100%;
  color: #fff;
  background-color: #65c0e0;
}

.a1l {
  font-family: "A1ゴシック L", "A1 Gothic L";
}

.a1r {
  font-family: "A1ゴシック R", "A1 Gothic R";
}

.a1m {
  font-family: "A1ゴシック M", "A1 Gothic M";
}

.a1b {
  font-family: "A1ゴシック B", "A1 Gothic B";
}

.indent {
  padding-left: 1em;
  text-indent: -1em;
}

b {
  font-weight: bold;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.br-pc {
  display: block;
}

.br-sp {
  display: none;
}

@media (max-width: 780px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .br-pc {
    display: none;
  }
  .br-sp {
    display: block;
  }
}
#wrapper {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 800px;
  margin: 0;
  position: relative;
  overflow-y: hidden;
}
#wrapper .search {
  background-image: url("../img/search.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 5.0433955vw;
  height: 17.5688678vw;
  position: fixed;
  right: -2px;
  bottom: 120px;
  z-index: 999;
  filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.4));
}
#wrapper .search_en {
  background-image: url("../img/search_en.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 5.0433955vw;
  height: 17.5688678vw;
  position: fixed;
  right: -2px;
  bottom: 120px;
  z-index: 999;
  filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.4));
}
#wrapper .search_th {
  background-image: url("../img/search_th.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 5.0433955vw;
  height: 17.5688678vw;
  position: fixed;
  right: -2px;
  bottom: 120px;
  z-index: 999;
  filter: drop-shadow(10px 10px 4px rgba(0, 0, 0, 0.4));
}
#wrapper a:hover .search {
  background-image: url("../img/search_on.png");
}
#wrapper a:hover .search_en {
  background-image: url("../img/search_en_on.png");
}
#wrapper a:hover .search_th {
  background-image: url("../img/search_th_on.png");
}
#wrapper .credit {
  position: fixed;
  bottom: 18px;
  right: 10px;
  z-index: 99;
}
#wrapper .credit img {
  width: 10vw;
  min-width: 210px;
}
#wrapper .cloud_l {
  background-image: url("../img/cloud.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 9.8vw;
  height: 3.7vw;
  position: absolute;
  left: 0.8490566038%;
  bottom: 0;
  margin-bottom: 30.6603773585%;
  animation-duration: 8s;
  animation-name: cloudmove;
  animation-iteration-count: infinite;
  z-index: 9;
}
#wrapper .cloud_r {
  background-image: url("../img/cloud.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 9.8vw;
  height: 3.7vw;
  position: absolute;
  left: 89.0094339623%;
  bottom: 0;
  margin-bottom: 36.5566037736%;
  animation-duration: 8s;
  animation-name: cloudmove;
  animation-iteration-count: infinite;
  z-index: 9;
}
@keyframes cloudmove {
  0% {
    transform: translate3d(-20px, 0, 0);
  }
  50% {
    transform: translate3d(20px, 0, 0);
  }
  100% {
    transform: translate3d(-20px, 0, 0);
  }
}
#wrapper .truck01 {
  width: 1.7vw;
  height: 1.7vw;
  overflow: hidden;
  animation: movetruck01 55s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 9;
}
#wrapper .truck01 img {
  width: 1.7vw;
  height: 1.7vw;
}
@keyframes movetruck01 {
  0% {
    left: 85.2830188679%;
    bottom: 0;
    margin-bottom: 47.7358490566%;
    background-image: url(../img/move_truck_lb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  40% {
    left: 62.8301886792%;
    bottom: 0;
    margin-bottom: 34.4339622642%;
    background-image: url(../img/move_truck_lb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation-timing-function: steps(1, jump-start);
  }
  42% {
    left: 60.8490566038%;
    bottom: 0;
    margin-bottom: 34.4339622642%;
    background-image: url(../img/move_truck_rb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  100% {
    left: 100%;
    bottom: 0;
    margin-bottom: 11.6037735849%;
    background-image: url(../img/move_truck_rb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}
#wrapper .truck02 {
  width: 1.7vw;
  height: 3vw;
  animation: movetruck02 85s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 35;
}
#wrapper .truck02 img {
  width: 1.7vw;
  height: 1.7vw;
}
#wrapper .truck02 .pin06 {
  position: absolute;
  top: -1.5vw;
  left: 0.5vw;
  z-index: 38;
  cursor: pointer;
}
#wrapper .truck02 .pin06 img {
  width: 1.5vw;
  height: auto;
}
@keyframes movetruck02 {
  0% {
    left: 13.679245283%;
    bottom: 0;
    margin-bottom: 46.9811320755%;
    background-image: url(../img/move_truck_lb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  10% {
    left: 5.5188679245%;
    bottom: 0;
    margin-bottom: 42.4528301887%;
    background-image: url(../img/move_truck_lb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation-timing-function: steps(1, jump-start);
  }
  11% {
    left: 5.5188679245%;
    bottom: 0;
    margin-bottom: 41.9811320755%;
    background-image: url(../img/move_truck_rb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  100% {
    left: 78.0188679245%;
    bottom: 0;
    margin-bottom: 0%;
    background-image: url(../img/move_truck_rb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}
#wrapper .ycar {
  width: 1.2vw;
  height: 1.2vw;
  overflow: hidden;
  background-image: url(../img/y_car.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation: y_car 15s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 9;
}
#wrapper .ycar img {
  width: 1.2vw;
  height: 1.2vw;
}
@keyframes y_car {
  0% {
    left: 32.5943396226%;
    bottom: 0;
    margin-bottom: -1.0377358491%;
  }
  100% {
    left: 76.3679245283%;
    bottom: 0;
    margin-bottom: 24.1037735849%;
  }
}
#wrapper .bcar {
  width: 1.2vw;
  height: 1.2vw;
  overflow: hidden;
  background-image: url(../img/b_car.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation: b_car 85s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 9;
}
#wrapper .bcar img {
  width: 1.2vw;
  height: 1.2vw;
}
@keyframes b_car {
  0% {
    left: 88.2075471698%;
    bottom: 0;
    margin-bottom: 49.0566037736%;
  }
  100% {
    left: 0.3773584906%;
    bottom: 0;
    margin-bottom: -1.3679245283%;
  }
}
#wrapper .rcar {
  width: 1.2vw;
  height: 1.2vw;
  overflow: hidden;
  background-image: url(../img/r_car.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation: r_car 40s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 9;
}
#wrapper .rcar img {
  width: 1.2vw;
  height: 1.2vw;
}
@keyframes r_car {
  0% {
    left: 7.0754716981%;
    bottom: 0;
    margin-bottom: 42.0283018868%;
  }
  100% {
    left: 82.8773584906%;
    bottom: 0;
    margin-bottom: -1.7924528302%;
  }
}
#wrapper .rcar02 {
  width: 1.2vw;
  height: 1.2vw;
  overflow: hidden;
  animation: r_car02 35s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 6;
}
#wrapper .rcar02 img {
  width: 1.2vw;
  height: 1.2vw;
}
@keyframes r_car02 {
  0% {
    left: 62.5%;
    bottom: 0;
    margin-bottom: 33.2547169811%;
    background-image: url(../img/rcar_lt.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  30% {
    left: 45.0943396226%;
    bottom: 0;
    margin-bottom: 43.0660377358%;
    background-image: url(../img/rcar_lt.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation-timing-function: steps(1, jump-start);
  }
  32% {
    left: 45.2358490566%;
    bottom: 0;
    margin-bottom: 43.1603773585%;
    background-image: url(../img/rcar_lb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  100% {
    left: -1.5094339623%;
    bottom: 0;
    margin-bottom: 16.320754717%;
    background-image: url(../img/rcar_lb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}
#wrapper .wcar {
  width: 1.2vw;
  height: 1.2vw;
  overflow: hidden;
  animation: w_car 30s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 9;
}
#wrapper .wcar img {
  width: 1.2vw;
  height: 1.2vw;
}
@keyframes w_car {
  0% {
    left: 28.7735849057%;
    bottom: 0;
    margin-bottom: -3.2547169811%;
    background-image: url(../img/w_car_rt.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  80% {
    left: 68.6320754717%;
    bottom: 0;
    margin-bottom: 19.6698113208%;
    background-image: url(../img/w_car_rt.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation-timing-function: steps(1, jump-start);
  }
  82% {
    left: 68.6320754717%;
    bottom: 0;
    margin-bottom: 20.2830188679%;
    background-image: url(../img/w_car_lt.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  100% {
    left: 57.5%;
    bottom: 0;
    margin-bottom: 26.5094339623%;
    background-image: url(../img/w_car_lt.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}
#wrapper .walkman {
  width: 0.5vw;
  height: 0.9vw;
  position: absolute;
  animation: walkman01 80s infinite;
  animation-timing-function: linear;
  z-index: 10;
  overflow: hidden;
}
@keyframes walkman01 {
  0% {
    left: 43.9622641509%;
    bottom: 0;
    margin-bottom: 6.1320754717%;
  }
  100% {
    left: 13.0660377358%;
    bottom: 0;
    margin-bottom: 24.0094339623%;
  }
}
#wrapper .walkman .walkman_img {
  width: 0.5vw;
  height: 0.9vw;
  background-image: url("../img/walkman.svg");
  background-position: 0 0;
  background-size: 1vw 0.9vw;
  animation-name: walkman01_inner;
  animation-duration: 1s;
  animation-timing-function: steps(1, jump-start);
  animation-iteration-count: infinite;
}
@keyframes walkman01_inner {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0.5vw 0;
  }
  100% {
    background-position: 0 0;
  }
}
#wrapper .walkman02 {
  width: 0.5vw;
  height: 0.9vw;
  position: absolute;
  animation: walkman02 60s infinite;
  animation-timing-function: linear;
  z-index: 9;
  overflow: hidden;
}
@keyframes walkman02 {
  0% {
    left: 69.9056603774%;
    bottom: 0;
    margin-bottom: 21.0377358491%;
  }
  100% {
    left: 56.0849056604%;
    bottom: 0;
    margin-bottom: 29.3867924528%;
  }
}
#wrapper .walkman02 .walkman_img {
  width: 0.5vw;
  height: 0.9vw;
  background-image: url("../img/walkman.svg");
  background-position: 0 0;
  background-size: 1vw 0.9vw;
  animation-name: walkman02_inner;
  animation-duration: 1s;
  animation-timing-function: steps(1, jump-start);
  animation-iteration-count: infinite;
}
@keyframes walkman02_inner {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 0.5vw 0;
  }
  100% {
    background-position: 0 0;
  }
}
#wrapper .bicycle {
  width: 0.6vw;
  height: 1vw;
  overflow: hidden;
  background-image: url(../img/bicycle.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation: bicycle 15s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 9;
}
#wrapper .bicycle img {
  width: 0.6vw;
  height: 1vw;
}
@keyframes bicycle {
  0% {
    left: 62.9245283019%;
    bottom: 0;
    margin-bottom: 32.5%;
  }
  100% {
    left: 76.2735849057%;
    bottom: 0;
    margin-bottom: 24.9528301887%;
  }
}
#wrapper .bicycle02 {
  width: 0.8vw;
  height: 1.2vw;
  overflow: hidden;
  background-image: url(../img/bicycle02.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  animation: bicycle02 10s infinite;
  animation-timing-function: linear;
  position: absolute;
  z-index: 35;
}
#wrapper .bicycle02 img {
  width: 0.8vw;
  height: 1.2vw;
}
@keyframes bicycle02 {
  0% {
    left: 13.1603773585%;
    bottom: 0;
    margin-bottom: 24.5283018868%;
  }
  100% {
    left: 0.1886792453%;
    bottom: 0;
    margin-bottom: 16.6509433962%;
  }
}
#wrapper .kitty {
  position: fixed;
  bottom: 35px;
  right: 33px;
  z-index: 900;
}
#wrapper .kitty img {
  max-width: 9.6vw;
}
#wrapper .cs {
  position: fixed;
  bottom: 15px;
  right: 18px;
  z-index: 901;
}
#wrapper .cs img {
  max-width: 11.3vw;
}
#wrapper .wrap {
  overflow-x: hidden;
}
#wrapper .wrap .lang {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}
#wrapper .wrap .lang ul {
  display: flex;
  justify-content: center;
}
#wrapper .wrap .lang li {
  background-color: #005BAB;
  padding: 15px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#wrapper .wrap .lang li p {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  position: static;
}
#wrapper .wrap .lang li a {
  color: #fff;
  text-decoration: none;
}
#wrapper .wrap .lang li:first-child {
  border-radius: 0 0 0 10px;
  margin-right: 2px;
}
#wrapper .wrap .ship_l {
  left: 34.2924528302%;
  bottom: 0;
  margin-bottom: 46.9811320755%;
  z-index: 9;
  animation: ship_move01 5s infinite linear;
}
#wrapper .wrap .ship_l img {
  width: 2.735849vw;
}
#wrapper .wrap .ship_l_wave {
  left: 34.2452830189%;
  bottom: 0;
  margin-bottom: 46.0377358491%;
  z-index: 10;
}
#wrapper .wrap .ship_l_wave img {
  width: 4.245283vw;
}
@keyframes ship_move01 {
  0% {
    left: 34.2924528302%;
    bottom: 0;
    margin-bottom: 46.9811320755%;
  }
  50% {
    left: 34.3396226415%;
    bottom: 0;
    margin-bottom: 46.9339622642%;
  }
  100% {
    left: 34.2924528302%;
    bottom: 0;
    margin-bottom: 46.9811320755%;
  }
}
#wrapper .wrap .ship_r {
  left: 70.5660377358%;
  bottom: 0;
  margin-bottom: 47.2169811321%;
  z-index: 9;
  animation: ship_move02 5s infinite linear;
}
#wrapper .wrap .ship_r img {
  width: 1.792455vw;
}
#wrapper .wrap .ship_r_wave {
  left: 70.3773584906%;
  bottom: 0;
  margin-bottom: 46.4622641509%;
  z-index: 10;
}
#wrapper .wrap .ship_r_wave img {
  width: 2.216981vw;
}
@keyframes ship_move02 {
  0% {
    left: 70.5660377358%;
    bottom: 0;
    margin-bottom: 47.2169811321%;
  }
  50% {
    left: 70.5660377358%;
    bottom: 0;
    margin-bottom: 47.3113207547%;
  }
  100% {
    left: 70.5660377358%;
    bottom: 0;
    margin-bottom: 47.2169811321%;
  }
}
#wrapper .wrap .ap_wrap {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
#wrapper .wrap .ap_wrap .ap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  animation: anim 40s infinite;
  animation-timing-function: linear;
  width: 100%;
  z-index: 998;
  display: inline-block;
}
#wrapper .wrap .ap_wrap .ap .ap_img {
  width: 5.2vw;
  height: 3.3vw;
  cursor: pointer;
}
#wrapper .wrap .ap_wrap .ap .pin01 {
  position: fixed;
  top: -35px;
  left: 56px;
  z-index: 999;
  cursor: pointer;
  visibility: visible !important;
}
#wrapper .wrap .ap_wrap .ap .pin01 img {
  width: 1.5vw;
}
@keyframes anim {
  0% {
    transform: translate(-10%, -200px);
  }
  to {
    transform: translate(100%, -800px);
  }
}
#wrapper .wrap .balloon_wrap {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
#wrapper .wrap .balloon {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  animation: balloon_anim 80s infinite linear;
  width: 100%;
  z-index: 997;
  display: inline-block;
}
#wrapper .wrap .balloon_move {
  animation: balloon_anim02 10s infinite linear;
  cursor: default;
  width: 9.1vw;
  height: 15.63vw;
  position: relative;
}
#wrapper .wrap .pin33 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 9.1vw;
  height: 15.63vw;
  z-index: 36;
  cursor: pointer;
}
#wrapper .wrap .pin33 img {
  position: absolute;
  bottom: 10%;
  width: 9.1vw;
  height: 15.63vw;
  height: auto;
}
@keyframes balloon_anim {
  0% {
    transform: translate(-10%, -27%);
  }
  to {
    transform: translate(100%, -27%);
  }
}
@keyframes balloon_anim02 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.63vw);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(120vw);
    opacity: 1;
  }
}
@keyframes moveLeft {
  0% {
    transform: translateX(-120vw);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
#wrapper .wrap .balloon_move.hide {
  animation: moveRight 2s forwards !important;
}
#wrapper .wrap .balloon_move.show {
  animation: moveLeft 1s forwards !important;
}
#wrapper .wrap p {
  position: absolute;
}
#wrapper .wrap .pe {
  left: 3.1603773585%;
  bottom: 0;
  margin-bottom: 43.0660377358%;
  z-index: 9;
}
#wrapper .wrap .pe img {
  width: 18.490566vw;
}
#wrapper .wrap .thai {
  left: 10.6132075472%;
  bottom: 0;
  margin-bottom: 39.0094339623%;
  z-index: 30;
}
#wrapper .wrap .thai img {
  width: 12.35849vw;
}
#wrapper .wrap .eco {
  left: 14.8113207547%;
  bottom: 0;
  margin-bottom: 27.8301886792%;
  z-index: 10;
}
#wrapper .wrap .eco img {
  width: 4.0566037vw;
}
#wrapper .wrap .sdgs {
  left: 2.5471698113%;
  bottom: 0;
  margin-bottom: 14.0094339623%;
  z-index: 36;
}
#wrapper .wrap .sdgs img {
  width: 15.849056vw;
}
#wrapper .wrap .vietnam {
  left: 82.6886792453%;
  bottom: 0;
  margin-bottom: 42.2641509434%;
  z-index: 10;
}
#wrapper .wrap .vietnam img {
  width: 13.0660377vw;
}
#wrapper .wrap .koto {
  left: 15.1886792453%;
  bottom: 0;
  margin-bottom: 16.8396226415%;
  z-index: 30;
}
#wrapper .wrap .koto img {
  width: 24.339622vw;
}
#wrapper .wrap .fes {
  left: 32.5943396226%;
  bottom: 0;
  margin-bottom: 7.4528301887%;
  z-index: 36;
}
#wrapper .wrap .fes img {
  width: 22.45283vw;
}
#wrapper .wrap .fes_movie {
  left: 35.8962264151%;
  bottom: 0;
  margin-bottom: 17.3113207547%;
  z-index: 36;
}
#wrapper .wrap .fes_movie img {
  width: 5.047169vw;
}
#wrapper .wrap .fes_man01 {
  left: 37.2169811321%;
  bottom: 0;
  margin-bottom: 15.9905660377%;
  z-index: 40;
}
#wrapper .wrap .fes_man01 img {
  width: 0.37735vw;
}
#wrapper .wrap .fes_man02 {
  left: 38.7264150943%;
  bottom: 0;
  margin-bottom: 16.6509433962%;
  z-index: 40;
}
#wrapper .wrap .fes_man02 img {
  width: 0.36075vw;
}
#wrapper .wrap .fes_man03 {
  left: 41.6981132075%;
  bottom: 0;
  margin-bottom: 17.641509434%;
  z-index: 40;
}
#wrapper .wrap .fes_man03 img {
  width: 0.36075vw;
}
#wrapper .wrap .fes_man04 {
  left: 45.6132075472%;
  bottom: 0;
  margin-bottom: 13.5377358491%;
  z-index: 40;
}
#wrapper .wrap .fes_man04 img {
  width: 0.36075vw;
}
#wrapper .wrap .fes_man05 {
  left: 38.3962264151%;
  bottom: 0;
  margin-bottom: 15.9905660377%;
  z-index: 40;
}
#wrapper .wrap .fes_man05 img {
  width: 0.70754vw;
}
#wrapper .wrap .fes_man06 {
  left: 40.8490566038%;
  bottom: 0;
  margin-bottom: 17.641509434%;
  z-index: 40;
}
#wrapper .wrap .fes_man06 img {
  width: 0.70754vw;
}
#wrapper .wrap .honsya {
  left: 46.5094339623%;
  bottom: 0;
  margin-bottom: 14.858490566%;
  z-index: 10;
}
#wrapper .wrap .honsya img {
  width: 20.80188vw;
}
#wrapper .wrap .narashino {
  left: 63.9622641509%;
  bottom: 0;
  margin-bottom: 26.6981132075%;
  z-index: 10;
}
#wrapper .wrap .narashino img {
  width: 24.716981vw;
}
#wrapper .wrap .dohbo {
  left: 79.9528301887%;
  bottom: 0;
  margin-bottom: 19.9056603774%;
  z-index: 10;
}
#wrapper .wrap .dohbo img {
  width: 19.95283vw;
}
#wrapper .wrap .slp {
  left: 60.3773584906%;
  bottom: 0;
  margin-bottom: 30.0943396226%;
  z-index: 11;
}
#wrapper .wrap .slp img {
  width: 7.64150943vw;
}
#wrapper .wrap .ds {
  left: 8.7735849057%;
  bottom: 0;
  margin-bottom: 7.4056603774%;
  z-index: 40;
}
#wrapper .wrap .ds img {
  width: 18.066037vw;
}
#wrapper .wrap .douzo {
  left: 6.2264150943%;
  bottom: 0;
  margin-bottom: 0%;
  z-index: 40;
}
#wrapper .wrap .douzo img {
  width: 36.462264vw;
}
#wrapper .wrap .cb {
  left: 59.5283018868%;
  bottom: 0;
  margin-bottom: 9.3396226415%;
  z-index: 11;
}
#wrapper .wrap .cb img {
  width: 17.26415vw;
}
#wrapper .wrap .camp {
  left: 68.2075471698%;
  bottom: 0;
  margin-bottom: 1.8396226415%;
  z-index: 14;
}
#wrapper .wrap .camp img {
  width: 19.009433vw;
}
#wrapper .wrap .ggg {
  left: 47.1698113208%;
  bottom: 0;
  margin-bottom: 2.1698113208%;
  z-index: 37;
}
#wrapper .wrap .ggg img {
  width: 13.11320754vw;
}
#wrapper .wrap .bpo {
  left: 72.641509434%;
  bottom: 0;
  margin-bottom: 16.179245283%;
  z-index: 13;
}
#wrapper .wrap .bpo img {
  width: 12.6415094vw;
}
#wrapper .wrap .dohda {
  left: 81.0377358491%;
  bottom: 0;
  margin-bottom: 10.4245283019%;
  z-index: 13;
}
#wrapper .wrap .dohda img {
  width: 14.433962vw;
}
#wrapper .wrap .gs {
  left: 34.4339622642%;
  bottom: 0;
  margin-bottom: 23.9622641509%;
  z-index: 13;
}
#wrapper .wrap .gs img {
  width: 13.915094vw;
}
#wrapper .wrap .history_50th {
  left: 27.5%;
  bottom: 0;
  margin-bottom: 28.7264150943%;
  z-index: 12;
}
#wrapper .wrap .history_50th img {
  width: 15.754716vw;
}
#wrapper .wrap .chibijob {
  left: 48.0188679245%;
  bottom: 0;
  margin-bottom: 31.7924528302%;
  z-index: 9;
}
#wrapper .wrap .chibijob img {
  width: 11.745283vw;
}
#wrapper .wrap .library {
  left: 40.141509434%;
  bottom: 0;
  margin-bottom: 34.7169811321%;
  z-index: 8;
}
#wrapper .wrap .library img {
  width: 10.754716vw;
}
#wrapper .wrap .broadcast {
  left: 55.9433962264%;
  bottom: 0;
  margin-bottom: 36.6037735849%;
  z-index: 8;
}
#wrapper .wrap .broadcast img {
  width: 15.397735vw;
}
#wrapper .wrap .slot {
  left: 48.5849056604%;
  bottom: 0;
  margin-bottom: 40.4716981132%;
  z-index: 7;
}
#wrapper .wrap .slot img {
  width: 14.85849vw;
}
#wrapper .wrap .pin00 {
  left: 55.2358490566%;
  bottom: 0;
  margin-bottom: 32.4056603774%;
  z-index: 12;
  cursor: pointer;
}
#wrapper .wrap .pin00 img {
  width: 1.5vw;
}
#wrapper .wrap .pin27 {
  left: 51.4622641509%;
  bottom: 0;
  margin-bottom: 31.9339622642%;
  z-index: 12;
  cursor: pointer;
}
#wrapper .wrap .pin27 img {
  width: 1.5vw;
}
#wrapper .wrap .pin02 {
  left: 61.8396226415%;
  bottom: 0;
  margin-bottom: 38.2547169811%;
  z-index: 14;
  cursor: pointer;
}
#wrapper .wrap .pin02 img {
  width: 1.5vw;
}
#wrapper .wrap .pin03 {
  left: 18.820754717%;
  bottom: 0;
  margin-bottom: 20%;
  z-index: 44;
  cursor: pointer;
}
#wrapper .wrap .pin03 img {
  width: 1.5vw;
}
#wrapper .wrap .pin04 {
  left: 69.0094339623%;
  bottom: 0;
  margin-bottom: 18.2075471698%;
  z-index: 16;
  cursor: pointer;
}
#wrapper .wrap .pin04 img {
  width: 1.5vw;
}
#wrapper .wrap .pin05 {
  left: 79.5754716981%;
  bottom: 0;
  margin-bottom: 26.4622641509%;
  z-index: 17;
  cursor: pointer;
}
#wrapper .wrap .pin05 img {
  width: 1.5vw;
}
#wrapper .wrap .pin07 {
  left: 27.8301886792%;
  bottom: 0;
  margin-bottom: 27.5471698113%;
  z-index: 32;
  cursor: pointer;
}
#wrapper .wrap .pin07 img {
  width: 1.5vw;
}
#wrapper .wrap .pin08 {
  left: 75.8490566038%;
  bottom: 0;
  margin-bottom: 36.6037735849%;
  z-index: 11;
  cursor: pointer;
}
#wrapper .wrap .pin08 img {
  width: 1.5vw;
}
#wrapper .wrap .pin10 {
  left: 13.2075471698%;
  bottom: 0;
  margin-bottom: 45.8962264151%;
  z-index: 998;
  cursor: pointer;
}
#wrapper .wrap .pin10 img {
  width: 1.5vw;
}
#wrapper .wrap .pin11 {
  left: 86.2264150943%;
  bottom: 0;
  margin-bottom: 47.5471698113%;
  z-index: 998;
  cursor: pointer;
}
#wrapper .wrap .pin11 img {
  width: 1.5vw;
}
#wrapper .wrap .pin12 {
  left: 49.4339622642%;
  bottom: 0;
  margin-bottom: 25%;
  z-index: 17;
  cursor: pointer;
}
#wrapper .wrap .pin12 img {
  width: 1.5vw;
}
#wrapper .wrap .pin13 {
  left: 58.0188679245%;
  bottom: 0;
  margin-bottom: 27.4528301887%;
  z-index: 17;
  cursor: pointer;
}
#wrapper .wrap .pin13 img {
  width: 1.5vw;
}
#wrapper .wrap .pin14 {
  left: 58.0188679245%;
  bottom: 0;
  margin-bottom: 24.6226415094%;
  z-index: 16;
  cursor: pointer;
  width: 4vw;
  height: 2vw;
}
#wrapper .wrap .pin14 img {
  width: 1.5vw;
}
#wrapper .wrap .pin15 {
  left: 46.9339622642%;
  bottom: 0;
  margin-bottom: 22.1226415094%;
  z-index: 37;
  cursor: pointer;
}
#wrapper .wrap .pin15 img {
  width: 1.5vw;
}
#wrapper .wrap .pin16 {
  left: 54.5754716981%;
  bottom: 0;
  margin-bottom: 23.1603773585%;
  z-index: 17;
  cursor: pointer;
}
#wrapper .wrap .pin16 img {
  width: 1.5vw;
}
#wrapper .wrap .pin17 {
  left: 20.0943396226%;
  bottom: 0;
  margin-bottom: 26.2735849057%;
  z-index: 40;
  cursor: pointer;
}
#wrapper .wrap .pin17 img {
  width: 1.5vw;
}
#wrapper .wrap .pin18 {
  left: 70.7075471698%;
  bottom: 0;
  margin-bottom: 34.9528301887%;
  z-index: 17;
  cursor: pointer;
}
#wrapper .wrap .pin18 img {
  width: 1.5vw;
}
#wrapper .wrap .pin19 {
  left: 7.2169811321%;
  bottom: 0;
  margin-bottom: 48.2547169811%;
  z-index: 998;
  cursor: pointer;
}
#wrapper .wrap .pin19 img {
  width: 1.5vw;
}
#wrapper .wrap .pin20 {
  left: 55.5660377358%;
  bottom: 0;
  margin-bottom: 11.4622641509%;
  z-index: 42;
  cursor: pointer;
}
#wrapper .wrap .pin20 img {
  width: 1.5vw;
}
#wrapper .wrap .pin21 {
  left: 80%;
  bottom: 0;
  margin-bottom: 16.6509433962%;
  z-index: 17;
  cursor: pointer;
}
#wrapper .wrap .pin21 img {
  width: 1.5vw;
}
#wrapper .wrap .pin22 {
  left: 10.5660377358%;
  bottom: 0;
  margin-bottom: 28.4433962264%;
  z-index: 17;
  cursor: pointer;
}
#wrapper .wrap .pin22 img {
  width: 1.5vw;
}
#wrapper .wrap .pin23 {
  left: 30.4245283019%;
  bottom: 0;
  margin-bottom: 14.6226415094%;
  z-index: 42;
  cursor: pointer;
}
#wrapper .wrap .pin23 img {
  width: 1.5vw;
}
#wrapper .wrap .pin24 {
  left: 86.7924528302%;
  bottom: 0;
  margin-bottom: 22.7830188679%;
  z-index: 42;
  cursor: pointer;
}
#wrapper .wrap .pin24 img {
  width: 1.5vw;
}
#wrapper .wrap .pin25 {
  left: 91.6981132075%;
  bottom: 0;
  margin-bottom: 34.2452830189%;
  z-index: 42;
  cursor: pointer;
}
#wrapper .wrap .pin25 img {
  width: 1.5vw;
}
#wrapper .wrap .pin26 {
  left: 83.9622641509%;
  bottom: 0;
  margin-bottom: 37.3113207547%;
  z-index: 42;
  cursor: pointer;
}
#wrapper .wrap .pin26 img {
  width: 1.5vw;
}
#wrapper .wrap .pin29 {
  left: 71.179245283%;
  bottom: 0;
  margin-bottom: 16.0377358491%;
  z-index: 16;
  cursor: pointer;
}
#wrapper .wrap .pin29 img {
  width: 1.5vw;
}
#wrapper .wrap .pin30 {
  left: 8.2075471698%;
  bottom: 0;
  margin-bottom: 25.141509434%;
  z-index: 999;
  cursor: pointer;
}
#wrapper .wrap .pin30 img {
  width: 1.5vw;
}
#wrapper .wrap .pin31 {
  left: 74.9528301887%;
  bottom: 0;
  margin-bottom: 16.0377358491%;
  z-index: 16;
  cursor: pointer;
}
#wrapper .wrap .pin31 img {
  width: 1.5vw;
}
#wrapper .wrap .pin32 {
  left: 82.0754716981%;
  bottom: 0;
  margin-bottom: 34.0094339623%;
  z-index: 42;
  cursor: pointer;
}
#wrapper .wrap .pin32 img {
  width: 1.5vw;
}
#wrapper .wrap .pin34 {
  left: 56.5094339623%;
  bottom: 0;
  margin-bottom: 9.1037735849%;
  z-index: 99;
  cursor: pointer;
}
#wrapper .wrap .pin34 img {
  width: 1.5vw;
}
#wrapper .wrap .pin35 {
  left: 18.8679245283%;
  bottom: 0;
  margin-bottom: 47.1698113208%;
  z-index: 998;
  cursor: pointer;
}
#wrapper .wrap .pin35 img {
  width: 1.5vw;
}
#wrapper .wrap .pin36 {
  left: 35.4716981132%;
  bottom: 0;
  margin-bottom: 22.0283018868%;
  z-index: 37;
  cursor: pointer;
}
#wrapper .wrap .pin36 img {
  width: 1.5vw;
}
#wrapper .wrap .pin37 {
  left: 32.2641509434%;
  bottom: 0;
  margin-bottom: 36.8396226415%;
  z-index: 37;
  cursor: pointer;
}
#wrapper .wrap .pin37 img {
  width: 1.5vw;
}
#wrapper .wrap .pin38 {
  left: 45.0943396226%;
  bottom: 0;
  margin-bottom: 44.8113207547%;
  z-index: 998;
  cursor: pointer;
}
#wrapper .wrap .pin38 img {
  width: 1.5vw;
}
#wrapper .wrap .pin39 {
  left: 53.2547169811%;
  bottom: 0;
  margin-bottom: 40.4716981132%;
  z-index: 37;
  cursor: pointer;
}
#wrapper .wrap .pin39 img {
  width: 1.5vw;
}
#wrapper .wrap .pin40 {
  left: 64.6698113208%;
  bottom: 0;
  margin-bottom: 46.5566037736%;
  z-index: 998;
  cursor: pointer;
}
#wrapper .wrap .pin40 img {
  width: 1.5vw;
}
#wrapper .background {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: auto;
}
#wrapper .background img {
  display: block;
  height: auto;
  width: 100%;
}

@media (max-width: 780px) {
  #wrapper {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    position: relative;
    overflow-y: auto;
    scroll-snap-align: center;
  }
  #wrapper .search {
    background-image: url("../img/search.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 10.47015vw;
    height: 35.3792vw;
    position: fixed;
    right: -1vw;
    bottom: 25vw;
    z-index: 999;
  }
  #wrapper .search_en {
    background-image: url("../img/search_en.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 10.47015vw;
    height: 35.3792vw;
    position: fixed;
    right: -1vw;
    bottom: 25vw;
    z-index: 999;
  }
  #wrapper .search_th {
    background-image: url("../img/search_th.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 10.47015vw;
    height: 35.3792vw;
    position: fixed;
    right: -1vw;
    bottom: 25vw;
    z-index: 999;
  }
  #wrapper .cloud_l {
    background-image: url("../img/cloud.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 26vw;
    height: 10.2vw;
    position: absolute;
    left: 2.3076923077%;
    bottom: 0;
    margin-bottom: 134.6153846154%;
    animation-duration: 8s;
    animation-name: cloudmove;
    animation-iteration-count: infinite;
    z-index: 9;
  }
  #wrapper .cloud_r {
    background-image: url("../img/cloud.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 26vw;
    height: 10.2vw;
    position: absolute;
    left: 212.4358974359%;
    bottom: 0;
    margin-bottom: 150.641025641%;
    animation-duration: 8s;
    animation-name: cloudmove;
    animation-iteration-count: infinite;
    z-index: 9;
  }
  #wrapper .walkman {
    width: 1.5vw;
    height: 3vw;
    position: absolute;
    animation: walkman01 80s infinite;
    animation-timing-function: linear;
    z-index: 10;
    overflow: hidden;
  }
  @keyframes walkman01 {
    0% {
      left: 110%;
      bottom: 0;
      margin-bottom: 15.3846153846%;
    }
    100% {
      left: 33.3333333333%;
      bottom: 0;
      margin-bottom: 58.8461538462%;
    }
  }
  #wrapper .walkman .walkman_img {
    width: 1.5vw;
    height: 3vw;
    background-image: url("../img/walkman.svg");
    background-position: 0 0;
    background-size: 3vw 3vw;
    animation-name: walkman01_inner;
    animation-duration: 1s;
    animation-timing-function: steps(1, jump-start);
    animation-iteration-count: infinite;
  }
  @keyframes walkman01_inner {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 1.5vw 0;
    }
    100% {
      background-position: 0 0;
    }
  }
  #wrapper .walkman02 {
    width: 1.5vw;
    height: 3vw;
    position: absolute;
    animation: walkman02 20s infinite;
    animation-timing-function: linear;
    z-index: 9;
    overflow: hidden;
  }
  @keyframes walkman02 {
    0% {
      left: 176.0256410256%;
      bottom: 0;
      margin-bottom: 52.0512820513%;
    }
    100% {
      left: 135.8974358974%;
      bottom: 0;
      margin-bottom: 74.358974359%;
    }
  }
  #wrapper .walkman02 .walkman_img {
    width: 1.5vw;
    height: 3vw;
    background-image: url("../img/walkman.svg");
    background-position: 0 0;
    background-size: 3vw 3vw;
    animation-name: walkman02_inner;
    animation-duration: 1s;
    animation-timing-function: steps(1, jump-start);
    animation-iteration-count: infinite;
  }
  @keyframes walkman02_inner {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 1.5vw 0;
    }
    100% {
      background-position: 0 0;
    }
  }
  #wrapper .truck01 {
    width: 4.5vw;
    height: 4.5vw;
    overflow: hidden;
    animation: movetruck01 30s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 9;
  }
  #wrapper .truck01 img {
    width: 4.5vw;
    height: 4.5vw;
  }
  @keyframes movetruck01 {
    0% {
      left: 206.1538461538%;
      bottom: 0;
      margin-bottom: 115.641025641%;
      background-image: url(../img/move_truck_lb.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    100% {
      left: 1.0256410256%;
      bottom: 0;
      margin-bottom: -3.7179487179%;
      background-image: url(../img/move_truck_lb.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      animation-timing-function: steps(1, jump-start);
    }
  }
  #wrapper .truck02 {
    width: 4.5vw;
    height: 4.5vw;
    animation: movetruck02 55s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 38;
  }
  #wrapper .truck02 img {
    width: 4.5vw;
    height: 4.5vw;
  }
  #wrapper .truck02 .pin06 {
    position: absolute;
    top: -5vw;
    left: 1vw;
    z-index: 36;
    cursor: pointer;
  }
  #wrapper .truck02 .pin06 img {
    width: 3.2vw;
    height: auto;
  }
  @keyframes movetruck02 {
    0% {
      left: 56.4102564103%;
      bottom: 0;
      margin-bottom: 46.6666666667%;
      background-image: url(../img/move_truck_rb.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    100% {
      left: 137.4358974359%;
      bottom: 0;
      margin-bottom: -1.2820512821%;
      background-image: url(../img/move_truck_rb.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  #wrapper .ycar {
    width: 3vw;
    height: 3vw;
    overflow: hidden;
    background-image: url(../img/y_car.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: y_car 10s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 9;
  }
  #wrapper .ycar img {
    width: 3vw;
    height: 3vw;
  }
  @keyframes y_car {
    0% {
      left: 88.5897435897%;
      bottom: 0;
      margin-bottom: 1.2820512821%;
    }
    100% {
      left: 193.4615384615%;
      bottom: 0;
      margin-bottom: 61.6666666667%;
    }
  }
  #wrapper .bcar {
    width: 3vw;
    height: 3vw;
    overflow: hidden;
    background-image: url(../img/b_car.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: b_car 35s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 9;
    animation-delay: 3s;
  }
  #wrapper .bcar img {
    width: 3vw;
    height: 3vw;
  }
  @keyframes b_car {
    0% {
      left: 223.0769230769%;
      bottom: 0;
      margin-bottom: 124.358974359%;
    }
    100% {
      left: 1.0256410256%;
      bottom: 0;
      margin-bottom: -3.7179487179%;
    }
  }
  #wrapper .rcar {
    width: 3vw;
    height: 3vw;
    overflow: hidden;
    background-image: url(../img/r_car.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: r_car 25s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 9;
  }
  #wrapper .rcar img {
    width: 3vw;
    height: 3vw;
  }
  @keyframes r_car {
    0% {
      left: 12.8205128205%;
      bottom: 0;
      margin-bottom: 107.8205128205%;
    }
    100% {
      left: 200%;
      bottom: 0;
      margin-bottom: 0%;
    }
  }
  #wrapper .rcar02 {
    width: 3vw;
    height: 3vw;
    overflow: hidden;
    animation: r_car02 25s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 9;
  }
  #wrapper .rcar02 img {
    width: 3vw;
    height: 3vw;
  }
  @keyframes r_car02 {
    0% {
      left: 112.6923076923%;
      bottom: 0;
      margin-bottom: 107.6923076923%;
      background-image: url(../img/rcar_lb.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    100% {
      left: 0%;
      bottom: 0;
      margin-bottom: 43.0769230769%;
      background-image: url(../img/rcar_lb.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  #wrapper .wcar {
    width: 3vw;
    height: 3vw;
    overflow: hidden;
    animation: w_car 25s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 9;
  }
  #wrapper .wcar img {
    width: 3vw;
    height: 3vw;
  }
  @keyframes w_car {
    0% {
      left: 245.5128205128%;
      bottom: 0;
      margin-bottom: 7.6923076923%;
      background-image: url(../img/w_car_lt.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    100% {
      left: 146.0256410256%;
      bottom: 0;
      margin-bottom: 64.358974359%;
      background-image: url(../img/w_car_lt.svg);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  #wrapper .bicycle {
    width: 1.5vw;
    height: 2.2vw;
    overflow: hidden;
    background-image: url(../img/bicycle.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: bicycle 10s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 9;
  }
  #wrapper .bicycle img {
    width: 1.5vw;
    height: 2.2vw;
  }
  @keyframes bicycle {
    0% {
      left: 156.9230769231%;
      bottom: 0;
      margin-bottom: 81.9230769231%;
    }
    100% {
      left: 193.2051282051%;
      bottom: 0;
      margin-bottom: 61.4102564103%;
    }
  }
  #wrapper .bicycle02 {
    width: 1.6vw;
    height: 2.2vw;
    overflow: hidden;
    background-image: url(../img/bicycle02.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    animation: bicycle02 10s infinite;
    animation-timing-function: linear;
    position: absolute;
    z-index: 9;
  }
  #wrapper .bicycle02 img {
    width: 1.6vw;
    height: 2.2vw;
  }
  @keyframes bicycle02 {
    0% {
      left: 30%;
      bottom: 0;
      margin-bottom: 59.7435897436%;
    }
    100% {
      left: 0%;
      bottom: 0;
      margin-bottom: 41.6666666667%;
    }
  }
  #wrapper .kitty {
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    z-index: 900;
  }
  #wrapper .kitty img {
    max-width: 14.6vw;
  }
  #wrapper .cs {
    position: fixed;
    bottom: 1.5vw;
    right: 1vw;
    z-index: 901;
  }
  #wrapper .cs img {
    max-width: 16.3vw;
  }
  #wrapper .wrap .lang {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
  }
  #wrapper .wrap .lang ul {
    display: flex;
    justify-content: center;
  }
  #wrapper .wrap .lang li {
    background-color: #005BAB;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #wrapper .wrap .lang li p {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    position: static;
  }
  #wrapper .wrap .lang li a {
    color: #fff;
    text-decoration: none;
  }
  #wrapper .wrap .lang li:first-child {
    border-radius: 0 0 0 10px;
    margin-right: 2px;
  }
  #wrapper .wrap .ship_l {
    left: 75.2564102564%;
    bottom: 0;
    margin-bottom: 116.1538461538%;
    z-index: 9;
    animation: ship_move01 2s infinite ease-in-out;
  }
  #wrapper .wrap .ship_l img {
    width: 7.56vw;
  }
  #wrapper .wrap .ship_l_wave {
    left: 76.5384615385%;
    bottom: 0;
    margin-bottom: 113.2051282051%;
    z-index: 10;
  }
  #wrapper .wrap .ship_l_wave img {
    width: 11.538vw;
  }
  @keyframes ship_move01 {
    0% {
      left: 77.8205128205%;
      bottom: 0;
      margin-bottom: 116.1538461538%;
    }
    50% {
      left: 77.6923076923%;
      bottom: 0;
      margin-bottom: 116.0256410256%;
    }
    100% {
      left: 77.8205128205%;
      bottom: 0;
      margin-bottom: 116.1538461538%;
    }
  }
  #wrapper .wrap .ship_r {
    left: 221.2820512821%;
    bottom: 0;
    margin-bottom: 89.8717948718%;
    z-index: 9;
    animation: ship_move02 5s infinite ease-in-out;
  }
  #wrapper .wrap .ship_r img {
    width: 4.871vw;
  }
  #wrapper .wrap .ship_r_wave {
    left: 219.7435897436%;
    bottom: 0;
    margin-bottom: 88.5897435897%;
    z-index: 10;
  }
  #wrapper .wrap .ship_r_wave img {
    width: 6vw;
  }
  @keyframes ship_move02 {
    0% {
      left: 221.2820512821%;
      bottom: 0;
      margin-bottom: 89.8717948718%;
    }
    50% {
      left: 221.2820512821%;
      bottom: 0;
      margin-bottom: 89.358974359%;
    }
    100% {
      left: 221.2820512821%;
      bottom: 0;
      margin-bottom: 89.8717948718%;
    }
  }
  #wrapper .wrap .ap_wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  #wrapper .wrap .ap_wrap .ap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    animation: anim 20s infinite;
    animation-timing-function: linear;
    width: 100%;
    z-index: 998;
  }
  #wrapper .wrap .ap_wrap .ap .ap_img {
    width: 15vw;
    height: 9.375vw;
    cursor: pointer;
  }
  #wrapper .wrap .ap_wrap .ap .pin01 {
    position: fixed;
    top: -5vw;
    left: 7.5vw;
    z-index: 999;
    cursor: pointer;
    visibility: visible !important;
  }
  #wrapper .wrap .ap_wrap .ap .pin01 img {
    width: 3.2vw;
  }
  @keyframes anim {
    0% {
      transform: translate(-20%, -60vw);
    }
    to {
      transform: translate(100%, -80vh);
    }
  }
  #wrapper .wrap .balloon {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    animation: balloon_anim 80s infinite linear;
    width: 100%;
    z-index: 997;
    display: inline-block;
  }
  #wrapper .wrap .balloon_move {
    animation: balloon_anim02 10s infinite linear;
    cursor: default;
    width: 13.65vw;
    height: 23.445vw;
    position: relative;
  }
  #wrapper .wrap .pin33 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 13.65vw;
    height: 23.445vw;
    z-index: 36;
    cursor: pointer;
  }
  #wrapper .wrap .pin33 img {
    position: absolute;
    bottom: 10%;
    width: 13.65vw;
    height: 23.445vw;
    height: auto;
  }
  @keyframes balloon_anim {
    0% {
      transform: translate(-10%, -27%);
    }
    to {
      transform: translate(100%, -27%);
    }
  }
  @keyframes balloon_anim02 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2.63vw);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes moveRight {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      transform: translateX(120vw);
      opacity: 1;
    }
  }
  @keyframes moveLeft {
    0% {
      transform: translateX(-120vw);
      opacity: 1;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  #wrapper .wrap .balloon_move.hide {
    animation: moveRight 2s forwards !important;
  }
  #wrapper .wrap .balloon_move.show {
    animation: moveLeft 1s forwards !important;
  }
  #wrapper .wrap p {
    position: absolute;
  }
  #wrapper .wrap .pe {
    left: 6.9230769231%;
    bottom: 0;
    margin-bottom: 106.7948717949%;
    z-index: 9;
  }
  #wrapper .wrap .pe img {
    width: 49vw;
  }
  #wrapper .wrap .thai {
    left: 25.641025641%;
    bottom: 0;
    margin-bottom: 99.358974359%;
    z-index: 10;
  }
  #wrapper .wrap .thai img {
    width: 33.589vw;
  }
  #wrapper .wrap .eco {
    left: 37.6923076923%;
    bottom: 0;
    margin-bottom: 70.641025641%;
    z-index: 10;
  }
  #wrapper .wrap .eco img {
    width: 9.02564vw;
  }
  #wrapper .wrap .sdgs {
    left: 6.9230769231%;
    bottom: 0;
    margin-bottom: 35.5128205128%;
    z-index: 36;
  }
  #wrapper .wrap .sdgs img {
    width: 40.0769vw;
  }
  #wrapper .wrap .vietnam {
    left: 208.0769230769%;
    bottom: 0;
    margin-bottom: 106.6666666667%;
    z-index: 10;
  }
  #wrapper .wrap .vietnam img {
    width: 30vw;
  }
  #wrapper .wrap .koto {
    left: 37.0512820513%;
    bottom: 0;
    margin-bottom: 41.0256410256%;
    z-index: 30;
  }
  #wrapper .wrap .koto img {
    width: 63.5vw;
  }
  #wrapper .wrap .fes {
    left: 80.8974358974%;
    bottom: 0;
    margin-bottom: 20.2564102564%;
    z-index: 36;
  }
  #wrapper .wrap .fes img {
    width: 56.02564vw;
  }
  #wrapper .wrap .fes_movie {
    left: 88.5897435897%;
    bottom: 0;
    margin-bottom: 44.4871794872%;
    z-index: 36;
  }
  #wrapper .wrap .fes_movie img {
    width: 13.2vw;
  }
  #wrapper .wrap .fes_man01 {
    left: 92.1794871795%;
    bottom: 0;
    margin-bottom: 40.8974358974%;
    z-index: 40;
  }
  #wrapper .wrap .fes_man01 img {
    width: 1.04141vw;
  }
  #wrapper .wrap .fes_man02 {
    left: 96.2820512821%;
    bottom: 0;
    margin-bottom: 43.9743589744%;
    z-index: 40;
  }
  #wrapper .wrap .fes_man02 img {
    width: 1.1vw;
  }
  #wrapper .wrap .fes_man03 {
    left: 103.8461538462%;
    bottom: 0;
    margin-bottom: 46.1538461538%;
    z-index: 40;
  }
  #wrapper .wrap .fes_man03 img {
    width: 0.90769vw;
  }
  #wrapper .wrap .fes_man04 {
    left: 111.5384615385%;
    bottom: 0;
    margin-bottom: 35.8974358974%;
    z-index: 40;
  }
  #wrapper .wrap .fes_man04 img {
    width: 0.90769vw;
  }
  #wrapper .wrap .fes_man05 {
    left: 94.7435897436%;
    bottom: 0;
    margin-bottom: 40.3846153846%;
    z-index: 40;
  }
  #wrapper .wrap .fes_man05 img {
    width: 2vw;
  }
  #wrapper .wrap .fes_man06 {
    left: 101.9230769231%;
    bottom: 0;
    margin-bottom: 45.5128205128%;
    z-index: 40;
  }
  #wrapper .wrap .fes_man06 img {
    width: 2vw;
  }
  #wrapper .wrap .honsya {
    left: 114.7435897436%;
    bottom: 0;
    margin-bottom: 38.7179487179%;
    z-index: 10;
  }
  #wrapper .wrap .honsya img {
    width: 54vw;
  }
  #wrapper .wrap .narashino {
    left: 160.2564102564%;
    bottom: 0;
    margin-bottom: 66.6666666667%;
    z-index: 10;
  }
  #wrapper .wrap .narashino img {
    width: 62vw;
  }
  #wrapper .wrap .dohbo {
    left: 203.2051282051%;
    bottom: 0;
    margin-bottom: 54.1025641026%;
    z-index: 10;
  }
  #wrapper .wrap .dohbo img {
    width: 44.230769vw;
  }
  #wrapper .wrap .slp {
    left: 152.5641025641%;
    bottom: 0;
    margin-bottom: 74.1025641026%;
    z-index: 11;
  }
  #wrapper .wrap .slp img {
    width: 18vw;
  }
  #wrapper .wrap .ds {
    left: 21.2820512821%;
    bottom: 0;
    margin-bottom: 17.5641025641%;
    z-index: 39;
  }
  #wrapper .wrap .ds img {
    width: 49.102564vw;
  }
  #wrapper .wrap .douzo {
    left: 17.0512820513%;
    bottom: 0;
    margin-bottom: 0%;
    z-index: 40;
  }
  #wrapper .wrap .douzo img {
    width: 90.102564vw;
  }
  #wrapper .wrap .cb {
    left: 149.4871794872%;
    bottom: 0;
    margin-bottom: 23.5897435897%;
    z-index: 11;
  }
  #wrapper .wrap .cb img {
    width: 43vw;
  }
  #wrapper .wrap .camp {
    left: 170.641025641%;
    bottom: 0;
    margin-bottom: 4.4871794872%;
    z-index: 14;
  }
  #wrapper .wrap .camp img {
    width: 47.5vw;
  }
  #wrapper .wrap .ggg {
    left: 116.6666666667%;
    bottom: 0;
    margin-bottom: 5.1282051282%;
    z-index: 37;
  }
  #wrapper .wrap .ggg img {
    width: 33.641025vw;
  }
  #wrapper .wrap .bpo {
    left: 182.0512820513%;
    bottom: 0;
    margin-bottom: 41.4102564103%;
    z-index: 13;
  }
  #wrapper .wrap .bpo img {
    width: 30vw;
  }
  #wrapper .wrap .dohda {
    left: 201.5384615385%;
    bottom: 0;
    margin-bottom: 25.7692307692%;
    z-index: 13;
  }
  #wrapper .wrap .dohda img {
    width: 38.230769vw;
  }
  #wrapper .wrap .gs {
    left: 86.4102564103%;
    bottom: 0;
    margin-bottom: 60%;
    z-index: 13;
  }
  #wrapper .wrap .gs img {
    width: 34vw;
  }
  #wrapper .wrap .history_50th {
    left: 67.9487179487%;
    bottom: 0;
    margin-bottom: 71.2820512821%;
    z-index: 12;
  }
  #wrapper .wrap .history_50th img {
    width: 40.820512vw;
  }
  #wrapper .wrap .chibijob {
    left: 118.9743589744%;
    bottom: 0;
    margin-bottom: 80%;
    z-index: 9;
  }
  #wrapper .wrap .chibijob img {
    width: 29.923076vw;
  }
  #wrapper .wrap .library {
    left: 97.5641025641%;
    bottom: 0;
    margin-bottom: 87.9487179487%;
    z-index: 8;
  }
  #wrapper .wrap .library img {
    width: 27.230769vw;
  }
  #wrapper .wrap .broadcast {
    left: 140.5128205128%;
    bottom: 0;
    margin-bottom: 91.7948717949%;
    z-index: 8;
  }
  #wrapper .wrap .broadcast img {
    width: 36.79487vw;
  }
  #wrapper .wrap .slot {
    left: 120.5128205128%;
    bottom: 0;
    margin-bottom: 101.0256410256%;
    z-index: 7;
  }
  #wrapper .wrap .slot img {
    width: 38.384615vw;
  }
  #wrapper .wrap .pin00 {
    left: 139.8717948718%;
    bottom: 0;
    margin-bottom: 82.9487179487%;
    z-index: 12;
    cursor: pointer;
  }
  #wrapper .wrap .pin00 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin27 {
    left: 130.8974358974%;
    bottom: 0;
    margin-bottom: 82.9487179487%;
    z-index: 12;
    cursor: pointer;
  }
  #wrapper .wrap .pin27 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin02 {
    left: 160.2564102564%;
    bottom: 0;
    margin-bottom: 92.3076923077%;
    z-index: 14;
    cursor: pointer;
  }
  #wrapper .wrap .pin02 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin03 {
    left: 48.0769230769%;
    bottom: 0;
    margin-bottom: 49.2307692308%;
    z-index: 44;
    cursor: pointer;
  }
  #wrapper .wrap .pin03 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin04 {
    left: 176.0256410256%;
    bottom: 0;
    margin-bottom: 46.9230769231%;
    z-index: 16;
    cursor: pointer;
  }
  #wrapper .wrap .pin04 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin05 {
    left: 190.641025641%;
    bottom: 0;
    margin-bottom: 70.641025641%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin05 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin07 {
    left: 69.8717948718%;
    bottom: 0;
    margin-bottom: 71.0256410256%;
    z-index: 32;
    cursor: pointer;
  }
  #wrapper .wrap .pin07 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin08 {
    left: 188.2051282051%;
    bottom: 0;
    margin-bottom: 94.358974359%;
    z-index: 11;
    cursor: pointer;
  }
  #wrapper .wrap .pin08 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin10 {
    left: 33.7179487179%;
    bottom: 0;
    margin-bottom: 117.0512820513%;
    z-index: 18;
    cursor: pointer;
  }
  #wrapper .wrap .pin10 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin11 {
    left: 224.1025641026%;
    bottom: 0;
    margin-bottom: 124.1025641026%;
    z-index: 18;
    cursor: pointer;
  }
  #wrapper .wrap .pin11 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin12 {
    left: 124.1025641026%;
    bottom: 0;
    margin-bottom: 66.6666666667%;
    z-index: 18;
    cursor: pointer;
  }
  #wrapper .wrap .pin12 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin13 {
    left: 146.1538461538%;
    bottom: 0;
    margin-bottom: 69.2307692308%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin13 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin14 {
    left: 146.1538461538%;
    bottom: 0;
    margin-bottom: 68.2051282051%;
    z-index: 16;
    cursor: pointer;
  }
  #wrapper .wrap .pin14 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin15 {
    left: 120.5128205128%;
    bottom: 0;
    margin-bottom: 56.4102564103%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin15 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin16 {
    left: 138.0769230769%;
    bottom: 0;
    margin-bottom: 60.3846153846%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin16 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin17 {
    left: 53.8461538462%;
    bottom: 0;
    margin-bottom: 67.5641025641%;
    z-index: 40;
    cursor: pointer;
  }
  #wrapper .wrap .pin17 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin18 {
    left: 176.5384615385%;
    bottom: 0;
    margin-bottom: 87.1794871795%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin18 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin19 {
    left: 19.6153846154%;
    bottom: 0;
    margin-bottom: 120.8974358974%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin19 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin20 {
    left: 135.641025641%;
    bottom: 0;
    margin-bottom: 31.1538461538%;
    z-index: 42;
    cursor: pointer;
  }
  #wrapper .wrap .pin20 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin21 {
    left: 198.2051282051%;
    bottom: 0;
    margin-bottom: 45.2564102564%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin21 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin22 {
    left: 28.7179487179%;
    bottom: 0;
    margin-bottom: 72.1794871795%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin22 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin23 {
    left: 78.8461538462%;
    bottom: 0;
    margin-bottom: 38.4615384615%;
    z-index: 42;
    cursor: pointer;
  }
  #wrapper .wrap .pin23 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin24 {
    left: 217.9487179487%;
    bottom: 0;
    margin-bottom: 61.9230769231%;
    z-index: 42;
    cursor: pointer;
  }
  #wrapper .wrap .pin24 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin25 {
    left: 228.7179487179%;
    bottom: 0;
    margin-bottom: 84.1025641026%;
    z-index: 42;
    cursor: pointer;
  }
  #wrapper .wrap .pin25 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin26 {
    left: 211.2820512821%;
    bottom: 0;
    margin-bottom: 95%;
    z-index: 42;
    cursor: pointer;
  }
  #wrapper .wrap .pin26 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin29 {
    left: 178.5897435897%;
    bottom: 0;
    margin-bottom: 40%;
    z-index: 16;
    cursor: pointer;
  }
  #wrapper .wrap .pin29 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin30 {
    left: 21.7948717949%;
    bottom: 0;
    margin-bottom: 63.2051282051%;
    z-index: 999;
    cursor: pointer;
  }
  #wrapper .wrap .pin30 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin31 {
    left: 187.5641025641%;
    bottom: 0;
    margin-bottom: 41.2820512821%;
    z-index: 999;
    cursor: pointer;
  }
  #wrapper .wrap .pin31 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin32 {
    left: 206.1538461538%;
    bottom: 0;
    margin-bottom: 84.7435897436%;
    z-index: 999;
    cursor: pointer;
  }
  #wrapper .wrap .pin32 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin34 {
    left: 141.0256410256%;
    bottom: 0;
    margin-bottom: 22.1794871795%;
    z-index: 999;
    cursor: pointer;
  }
  #wrapper .wrap .pin34 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin35 {
    left: 46.5384615385%;
    bottom: 0;
    margin-bottom: 122.1794871795%;
    z-index: 17;
    cursor: pointer;
  }
  #wrapper .wrap .pin35 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin36 {
    left: 92.5641025641%;
    bottom: 0;
    margin-bottom: 59.8717948718%;
    z-index: 37;
    cursor: pointer;
  }
  #wrapper .wrap .pin36 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin37 {
    left: 80%;
    bottom: 0;
    margin-bottom: 93.7179487179%;
    z-index: 37;
    cursor: pointer;
  }
  #wrapper .wrap .pin37 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin38 {
    left: 111.0256410256%;
    bottom: 0;
    margin-bottom: 116.6666666667%;
    z-index: 37;
    cursor: pointer;
  }
  #wrapper .wrap .pin38 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin39 {
    left: 131.9230769231%;
    bottom: 0;
    margin-bottom: 103.5897435897%;
    z-index: 37;
    cursor: pointer;
  }
  #wrapper .wrap .pin39 img {
    width: 3.2vw;
  }
  #wrapper .wrap .pin40 {
    left: 161.6666666667%;
    bottom: 0;
    margin-bottom: 117.5641025641%;
    z-index: 37;
    cursor: pointer;
  }
  #wrapper .wrap .pin40 img {
    width: 3.2vw;
  }
  #wrapper .background {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: auto;
    text-align: center;
  }
  #wrapper .background .bg_img {
    display: block;
    height: auto;
    width: 250%;
  }
  #wrapper .background .bg_img img {
    max-width: 100%;
  }
}
#loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99997;
  transition-duration: 8s;
  text-align: center;
  /* スライドイン */
  /* 縮小するアニメーション */
}
#loading .logo_wrap {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-48%, -50%);
  -webkit-transform: translate(-48%, -50%);
  -ms-transform: translate(-48%, -50%);
  z-index: 3;
  width: 346px;
  height: 237px;
  overflow: hidden;
}
#loading .logo {
  animation: moveup 4s ease-in-out forwards;
}
#loading .logo img {
  width: 346px;
}
@keyframes moveup {
  0% {
    transform: translateY(150px);
    opacity: 1;
  }
  40% {
    transform: translateY(0);
    opacity: 1;
  }
  66% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
#loading .mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  animation: slidein 4s ease-in-out forwards;
  z-index: 2;
  mix-blend-mode: soft-light;
}
#loading .mark img {
  max-height: 110vh;
}
@keyframes slidein {
  0% {
    transform: translate(-100%, -50%);
    opacity: 0;
  }
  40% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  66% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
#loading .bg {
  background: rgb(9, 52, 139);
  background: linear-gradient(to right, rgb(9, 52, 139) 0%, rgb(9, 52, 139) 19%, rgb(0, 127, 207) 46%, rgb(55, 186, 120) 59%, rgb(223, 208, 2) 81%, rgb(244, 228, 0) 100%);
  width: 100vw;
  height: 100%;
  position: absolute;
  animation: smalldown 3s ease forwards;
  animation-delay: 3s;
  z-index: 1;
}
@keyframes smalldown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (max-width: 780px) {
  #loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99997;
    /* スライドイン */
    /* 縮小するアニメーション */
  }
  #loading .logo_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 3;
    width: 49.358vw;
    height: 33.84615vw;
    overflow: hidden;
  }
  #loading .logo {
    animation: moveup 3s ease-in-out forwards;
  }
  #loading .logo img {
    width: 49.358vw;
  }
  @keyframes moveup {
    0% {
      transform: translateY(15vw);
      opacity: 1;
    }
    90% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(0);
      opacity: 0;
    }
  }
  #loading .mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    animation: slidein 3s ease-in-out forwards;
    z-index: 2;
    mix-blend-mode: soft-light;
  }
  #loading .mark img {
    max-height: 110vh;
  }
  @keyframes slidein {
    0% {
      transform: translate(-100%, -50%);
      opacity: 0;
    }
    90% {
      transform: translate(-50%, -50%);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%);
      opacity: 0;
    }
  }
  #loading .bg {
    background: rgb(9, 52, 139);
    background: linear-gradient(to right, rgb(9, 52, 139) 0%, rgb(9, 52, 139) 19%, rgb(0, 127, 207) 46%, rgb(55, 186, 120) 59%, rgb(223, 208, 2) 81%, rgb(244, 228, 0) 100%);
    width: 100vw;
    height: 100vh;
    position: absolute;
    animation: smalldown 3s ease forwards;
    animation-delay: 3s;
    z-index: 1;
  }
  @keyframes smalldown {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
}/*# sourceMappingURL=common.css.map */