@charset "UTF-8";
:root {
  --cl-spring: rgba(245, 160, 162, 0.8);
  --cl-summer: rgba(45, 180, 204, 0.8);
  --cl-autumn: rgba(255, 166, 34, 0.8);
  --cl-winter: rgba(220, 225, 240, 0.8); }

/*============
main visual
============*/
/* season display */
.mv-top .season {
  display: none; }
.mv-top .city.city-winter {
  display: none; }
.mv-top[data-season="spring"] {
  --cl-hover-desc-bg: var(--cl-spring); }
  .mv-top[data-season="spring"] .season.spring {
    display: block; }
.mv-top[data-season="summer"] {
  --cl-hover-desc-bg: var(--cl-summer); }
  .mv-top[data-season="summer"] .season.summer {
    display: block; }
.mv-top[data-season="autumn"] {
  --cl-hover-desc-bg: var(--cl-autumn); }
  .mv-top[data-season="autumn"] .season.autumn {
    display: block; }
.mv-top[data-season="winter"] {
  --cl-hover-desc-bg: var(--cl-winter); }
  .mv-top[data-season="winter"] .season.winter {
    display: block; }
  .mv-top[data-season="winter"] .city.city-winter {
    display: block; }
  .mv-top[data-season="winter"] .city.city-share {
    display: none; }

/* base */
.mv-top .mv-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1820/1080;
  background-image: url("/share/asset/ui/iso-land.svg?rel=1.2");
  background-size: 100% 100%;
  background-position: left top;
  background-color: var(--cl-bg-road);
  container-type: size; }
.mv-top .city > img,
.mv-top .city a,
.mv-top .seasonal-display > img,
.mv-top .seasonal-display a {
  position: absolute; }
  .mv-top .city > img img,
  .mv-top .city a img,
  .mv-top .seasonal-display > img img,
  .mv-top .seasonal-display a img {
    width: 100%; }
.mv-top .city > img,
.mv-top .city a {
  z-index: 3; }
  .mv-top .city > img img,
  .mv-top .city a img {
    transition: all 0.3s ease; }
  .mv-top .city > img.iso-mall,
  .mv-top .city a.iso-mall {
    z-index: 8; }
  .mv-top .city > img:hover img,
  .mv-top .city a:hover img {
    scale: 1.05; }
.mv-top .seasonal-display .season > img {
  position: absolute;
  pointer-events: none;
  cursor: default; }
.mv-top .seasonal-display .season .iso-tree {
  z-index: 2; }
.mv-top .seasonal-display .season .iso-people-group {
  z-index: 4; }
.mv-top .hoverlabel {
  position: absolute;
  z-index: 9999;
  display: none;
  pointer-events: none;
  font-size: 1em;
  text-align: center;
  color: var(--cl-white);
  background: rgba(181, 206, 17, 0.85);
  backdrop-filter: blur(2px);
  padding: 0.78em 1em 0.875em;
  border-radius: 0.5em;
  max-width: 280px;
  line-height: 1.4; }
  .mv-top .hoverlabel img {
    width: 100%;
    margin-top: 8px;
    border-radius: 4px; }
  .mv-top .hoverlabel .content {
    display: block; }
  .mv-top .hoverlabel p {
    font-weight: 500;
    line-height: 1.4em; }
@media screen and (max-width: 1280px) {
  .mv-top {
    overflow-x: auto;
    overflow-y: hidden; }
  .mv-top .mv-wrapper {
    /*width: 1160px;*/
    /*width: initial;*/
    width: 1160px;
    flex-shrink: 0; } }
@media screen and (max-width: 640px) {
  .mv-top .mv-wrapper {
    width: 170%; } }

/* position */
.mv-top .season .iso-activities {
  z-index: 5;
  pointer-events: none;
  width: 47.585%;
  top: 37.15%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5; }
.mv-top .iso {
  /*test*/
  /*area-1*/
  /*area-2*/
  /*area-3*/
  /*area-4*/
  /*area-5*/
  /*area-6*/
  /*area-7*/
  /*area-8*/
  /*vehicle*/
  /*people*/ }
  .mv-top .iso-tree, .mv-top .iso-people-group {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .mv-top .iso-stage {
    width: 47.58%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .mv-top .iso-mask {
    position: relative;
    z-index: 1000;
    opacity: 0.5;
    width: 100%; }
  .mv-top .iso-fountain {
    width: 5.82%;
    left: 3.86%;
    top: 0.85%; }
  .mv-top .iso-store-group-2 {
    width: 10.55%;
    left: -0.2%;
    top: 9.9%; }
  .mv-top .iso-build {
    width: 9.45%;
    left: 9.65%;
    top: 7.35%; }
  .mv-top .iso-cakoda {
    width: 11.54%;
    left: 27.05%;
    top: 7.6%; }
  .mv-top .iso-synconnect {
    width: 12.97%;
    top: 4.85%;
    left: 15.46%; }
  .mv-top .iso-company {
    width: 10.66%;
    left: .66%;
    top: 25.2%; }
  .mv-top .iso-mall {
    width: 17.58%;
    left: 5.95%;
    top: 36.85%; }
  .mv-top .iso-store {
    width: 10.22%;
    bottom: 13.65%;
    left: 7.4%; }
  .mv-top .iso-studio {
    width: 10.77%;
    left: -1.75%;
    bottom: 6.4%; }
  .mv-top .iso-mall-light {
    width: 14.81%;
    bottom: 21.15%;
    left: 18.9%; }
  .mv-top .iso-school {
    width: 20.33%;
    left: 23.15%;
    bottom: .65%; }
  .mv-top .iso-basketball-zone {
    width: 15.71%;
    left: 45.5%;
    bottom: -1.05%; }
  .mv-top .iso-combini {
    width: 10.16%;
    right: 15.97%;
    bottom: 31.91%; }
  .mv-top .iso-fastfood {
    width: 10.16%;
    right: 31.9%;
    bottom: 19%; }
  .mv-top .iso-restaurant {
    width: 14.73%;
    right: 3.45%;
    bottom: 10.05%; }
  .mv-top .iso-tv-station {
    width: 27.47%;
    right: -5.05%;
    top: 12.55%; }
  .mv-top .iso-hotspring {
    width: 11.65%;
    right: 2.45%;
    top: -7.65%; }
  .mv-top .iso-hall {
    width: 19.56%;
    right: 17.35%;
    top: -5.7%; }
  .mv-top .iso-hall-2 {
    width: 16.81%;
    right: 33.65%;
    top: -7.4%; }
  .mv-top .iso-store-group {
    width: 10.55%;
    left: 39.5%;
    top: -3%; }
  .mv-top .iso-vehicle {
    flex-shrink: 0; }
  .mv-top .iso-bus {
    width: 7.2222%;
    aspect-ratio: 130/111.16;
    left: 101.9194%;
    top: 1.0648%; }
  .mv-top .iso-car {
    width: 3.6111%; }
    .mv-top .iso-car-1 {
      aspect-ratio: 65/49.53;
      left: -4.6111%;
      top: 21.1574%; }
    .mv-top .iso-car-2 {
      aspect-ratio: 65/44.02;
      left: 75.3806%;
      top: 101.8981%; }
  .mv-top .iso-delivery-fastfood {
    width: 1.26%;
    aspect-ratio: 23.00/36.00;
    left: 58%;
    top: 71%; }
  .mv-top .iso-drone {
    width: 4.95%;
    aspect-ratio: 90.266/55.003px; }
    .mv-top .iso-drone-1 {
      left: 29%;
      top: 15%; }
    .mv-top .iso-drone-2 {
      left: 29%;
      top: 15%; }
    .mv-top .iso-drone-3 {
      left: 29%;
      top: 15%; }
  .mv-top .iso-motobike {
    width: 7.53%;
    left: 0%;
    top: -28.9%; }
  .mv-top .iso-taxi {
    width: 3.5556%;
    aspect-ratio: 64/45.15;
    left: -4.6111%;
    top: 21.5278%; }
  .mv-top .iso-truck {
    width: 5.54%;
    aspect-ratio: 100.8/94.63;
    left: 0%;
    top: -30%; }
  .mv-top .iso-people {
    /*city*/
    /*people-autumn*/ }
    .mv-top .iso-people-skateboarding {
      width: 0.85%;
      left: 12%;
      top: 3%; }
    .mv-top .iso-people-jump {
      width: 0.8%;
      left: 56.2%;
      top: 88%; }
    .mv-top .iso-people-turn {
      width: 0.85%;
      left: 91%;
      top: 41%; }
    .mv-top .iso-people-baskeball-1 {
      width: 1%;
      left: 49.5%;
      top: 41%; }
    .mv-top .iso-people-baskeball-jump-1 {
      width: 0.92%;
      left: 46.5%;
      top: 44%; }
    .mv-top .iso-people-baskeball-jump-3 {
      width: 0.9%;
      left: 49.2%;
      top: 44%; }

/* animation */
.mv-top .add-anim .iso-vehicle {
  z-index: 1;
  animation: initial;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 1; }
  .mv-top .add-anim .iso-vehicle.iso {
    transform-origin: center bottom; }
    .mv-top .add-anim .iso-vehicle.iso-bus {
      animation-name: vehicle-bus;
      animation-duration: 10s;
      animation-delay: 0s; }
    .mv-top .add-anim .iso-vehicle.iso-car-1 {
      animation-name: vehicle-car-1;
      animation-duration: 4s;
      animation-delay: 0s; }
    .mv-top .add-anim .iso-vehicle.iso-car-2 {
      animation-name: vehicle-car-2;
      animation-duration: 12s;
      animation-delay: 5s; }
    .mv-top .add-anim .iso-vehicle.iso-delivery-fastfood {
      animation-name: vehicle-delivery-fastfood;
      animation-duration: 11s;
      animation-delay: 2s; }
    .mv-top .add-anim .iso-vehicle.iso-drone-1 {
      animation-name: vehicle-drone-1;
      animation-duration: 11s;
      animation-delay: 0s; }
    .mv-top .add-anim .iso-vehicle.iso-drone-2 {
      animation-name: vehicle-drone-2;
      animation-duration: 8s;
      animation-delay: 2s; }
    .mv-top .add-anim .iso-vehicle.iso-drone-3 {
      animation-name: vehicle-drone-3;
      animation-duration: 9s;
      animation-delay: 5.5s; }
    .mv-top .add-anim .iso-vehicle.iso-motobike {
      animation-name: vehicle-motobike;
      animation-duration: 12s;
      animation-delay: 0s; }
    .mv-top .add-anim .iso-vehicle.iso-taxi {
      animation-name: vehicle-taxi;
      animation-duration: 8s;
      animation-delay: 1s; }
    .mv-top .add-anim .iso-vehicle.iso-truck {
      position: absolute;
      display: inline-block;
      animation-name: vehicle-truck; }
      .mv-top .add-anim .iso-vehicle.iso-truck, .mv-top .add-anim .iso-vehicle.iso-truck::after {
        animation-duration: 16s;
        animation-delay: 2s;
        transform-origin: center bottom; }
      .mv-top .add-anim .iso-vehicle.iso-truck::after {
        content: "";
        position: absolute;
        width: 48%;
        aspect-ratio: 281.7/46.8;
        left: 3.4%;
        bottom: 46.2%;
        background: url("/share/asset/ui/logo-cakoda-white.svg") center/contain no-repeat;
        /*transform: matrix(0.87, 0.5, 0, 1, 0, 0);*/
        animation-name: logo-warp;
        animation-timing-function: linear;
        animation-iteration-count: infinite; }
.mv-top .add-anim .iso-people {
  z-index: 6;
  animation: initial;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 1; }
  .mv-top .add-anim .iso-people.iso-people {
    /*city*/
    /*autumn*/ }
    .mv-top .add-anim .iso-people.iso-people-skateboarding {
      animation-name: people-skateboarding;
      animation-duration: 2s;
      animation-delay: 0s; }
    .mv-top .add-anim .iso-people.iso-people-jump {
      animation-name: people-jump;
      animation-duration: 2s;
      animation-delay: 0s; }
    .mv-top .add-anim .iso-people.iso-people-turn {
      animation-name: people-turn;
      animation-duration: 2s;
      animation-delay: 2s;
      transform-origin: center bottom; }
    .mv-top .add-anim .iso-people.iso-people-baskeball-1 {
      animation-name: people-jump;
      animation-duration: 1s;
      animation-delay: 0s; }
    .mv-top .add-anim .iso-people.iso-people-baskeball-jump-1 {
      animation-name: people-jump;
      animation-duration: 1.8s;
      animation-delay: 0s; }
    .mv-top .add-anim .iso-people.iso-people-baskeball-jump-3 {
      animation-name: people-jump;
      animation-duration: 2.5s;
      animation-delay: 0s; }

@keyframes people-skateboarding {
  0% {
    transform: translate(-50%, 0); }
  50% {
    transform: translate(150%, 32%); }
  100% {
    transform: translate(-50%, 0); } }
@keyframes people-jump {
  0% {
    transform: translate(-50%, 0); }
  50% {
    transform: translate(-50%, -42%); }
  100% {
    transform: translate(-50%, 0); } }
@keyframes people-turn {
  0% {
    transform: rotateY(0deg); }
  25% {
    transform: rotateY(12deg); }
  50% {
    transform: rotateY(0deg); }
  75% {
    transform: rotateY(-12deg); }
  100% {
    transform: rotateY(0deg); } }
@keyframes vehicle-bus {
  0% {
    transform: translate(0%, -12%) scaleX(-1); }
  55% {
    transform: translate(-468.98%, 304.66%) scaleX(-1); }
  56% {
    transform: translate(-478.98%, 336.9%) scaleX(1); }
  100% {
    transform: translate(21.98%, 675.15%) scaleX(1); } }
@keyframes vehicle-car-1 {
  0% {
    transform: translate(0%, 0%); }
  36% {
    z-index: 1; }
  37% {
    z-index: 6; }
  58% {
    transform: translate(1193.78%, 904.5%) scaleX(1);
    z-index: 6; }
  59% {
    transform: translate(1129.58%, 1004.44%) scaleX(-1);
    z-index: 1; }
  100% {
    transform: translate(207.85%, 1736.32%) scaleX(-1); } }
@keyframes vehicle-car-2 {
  0% {
    transform: translate(0%, 10%);
    z-index: 2; }
  44% {
    z-index: 2; }
  45% {
    z-index: 8; }
  62% {
    z-index: 8; }
  63% {
    z-index: 2; }
  100% {
    transform: translate(-2292.08%, -1923.66%);
    z-index: 2; } }
@keyframes vehicle-delivery-fastfood {
  0% {
    transform: translate(0%, 0%) scaleX(-1); }
  14% {
    transform: translate(-205%, 80%) scaleX(-1); }
  16% {
    transform: translate(-215%, 104%) scaleX(1);
    z-index: 7; }
  80% {
    z-index: 1; }
  100% {
    transform: translate(2429.6875%, 1058.1875%) scaleX(1); } }
@keyframes vehicle-drone-1 {
  0% {
    transform: translate(0%, 0%);
    opacity: 0; }
  3% {
    opacity: 1; }
  6% {
    transform: translate(0%, -200%);
    z-index: 5; }
  28% {
    transform: translate(-360%, 152%);
    z-index: 100; }
  38% {
    transform: translate(-360%, 550%); }
  39% {
    opacity: 1; }
  40% {
    transform: translate(-360%, 570%);
    opacity: 0; }
  56% {
    transform: translate(-360%, 570%); }
  57% {
    opacity: 0; }
  58% {
    transform: translate(-360%, 580%);
    opacity: 9; }
  64% {
    transform: translate(-360%, 350%); }
  94% {
    transform: translate(10%, 900%); }
  98% {
    transform: translate(10%, 1080%); }
  99% {
    opacity: 1; }
  100% {
    transform: translate(10%, 1100%);
    opacity: 0; } }
@keyframes vehicle-drone-2 {
  0% {
    transform: translate(0%, 0%);
    opacity: 0; }
  8% {
    opacity: 0; }
  14% {
    opacity: 1; }
  20% {
    transform: translate(0%, -280%);
    z-index: 6; }
  80% {
    transform: translate(850%, -280%);
    z-index: 6; }
  96% {
    transform: translate(850%, 20%);
    opacity: 1; }
  100% {
    transform: translate(850%, 0%);
    opacity: 0; } }
@keyframes vehicle-drone-3 {
  0% {
    transform: translate(0%, 0%);
    opacity: 0; }
  4% {
    opacity: 0; }
  6% {
    opacity: 1; }
  8% {
    transform: translate(0%, -260%);
    z-index: 6; }
  90% {
    transform: translate(1190%, 877%);
    z-index: 6; }
  95% {
    transform: translate(1190%, 950%);
    opacity: 1; }
  100% {
    transform: translate(1190%, 1000%);
    opacity: 0; } }
/*@keyframes vehicle-motobike {
	0% {
		transform: translate(0%, 0%);
		opacity: 0;
	}
	1% {
		opacity: 1;
	}
	58% {
		transform: translate(1050%, 800%);
		opacity: 1;
	}
	59% {
		transform:translate(1050%, 800%) scaleX(-1);
	}
	99% {
		opacity: 1;
	}
	100% {
		transform: translate(18%, 1570%) scaleX(-1);
		opacity: 1;
	}
}*/
@keyframes vehicle-taxi {
  0% {
    transform: translate(0, 0) scaleX(-1); }
  48% {
    transform: translate(606.22%, 496.12%) scaleX(-1); }
  52% {
    transform: translate(552.2%, 607.97%) scaleX(1); }
  100% {
    transform: translate(18.75%, 1045.4%) scaleX(1); } }
@keyframes vehicle-truck {
  0% {
    transform: translate(0%, 0%); }
  37% {
    transform: translate(849%, 518%); }
  38% {
    transform: translate(814%, 570%) scaleX(-1); }
  57% {
    transform: translate(395%, 827%) scaleX(-1);
    z-index: 1; }
  58% {
    transform: translate(391%, 849%);
    z-index: 7; }
  73% {
    transform: translate(670%, 1020%);
    z-index: 7; }
  74% {
    transform: translate(650%, 1069%) scaleX(-1);
    z-index: 1; }
  100% {
    transform: translate(0%, 1472%) scaleX(-1);
    z-index: 1; } }
@keyframes logo-warp {
  0% {
    transform: matrix(0.87, 0.5, 0, 1, -1, 0); }
  37% {
    transform: matrix(0.87, 0.5, 0, 1, -1, 0); }
  38% {
    transform: matrix(-0.87, -0.5, 0, 1, 0, 0); }
  57% {
    transform: matrix(-0.87, -0.5, 0, 1, 0, 0); }
  58% {
    transform: matrix(0.87, 0.5, 0, 1, -1, 0); }
  73% {
    transform: matrix(0.87, 0.5, 0, 1, -1, 0); }
  74% {
    transform: matrix(-0.87, -0.5, 0, 1, 0, 0); }
  100% {
    transform: matrix(-0.87, -0.5, 0, 1, 0, 0); } }
/*============
effects
============*/
.season .effects {
  position: relative;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  cursor: default; }
  .season .effects > section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden; }
    .season .effects > section > div {
      position: absolute;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      will-change: transform; }

/* 冬 */
.snow > div {
  top: -10px;
  background-image: url("/share/asset/ui/snow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
  animation-name: fallSway; }
  .snow > div:nth-child(1) {
    left: 5%;
    width: 14px;
    height: 14px;
    --startX: 0px;
    --midX: 10px;
    --endX: -5px;
    --startY: 0px;
    --rotateStart: 0deg;
    animation-delay: 0s;
    animation-duration: 9.2s; }
  .snow > div:nth-child(2) {
    left: 10%;
    width: 18px;
    height: 18px;
    --startX: -5px;
    --midX: 5px;
    --endX: 7px;
    --startY: -3px;
    --rotateStart: 15deg;
    animation-delay: 1.3s;
    animation-duration: 10.3s; }
  .snow > div:nth-child(3) {
    left: 15%;
    width: 12px;
    height: 12px;
    --startX: 8px;
    --midX: -10px;
    --endX: 10px;
    --startY: 2px;
    --rotateStart: -10deg;
    animation-delay: 0.7s;
    animation-duration: 8.7s; }
  .snow > div:nth-child(4) {
    left: 20%;
    width: 16px;
    height: 16px;
    --startX: -10px;
    --midX: 7px;
    --endX: -8px;
    --startY: 1px;
    --rotateStart: 5deg;
    animation-delay: 2.1s;
    animation-duration: 9.8s; }
  .snow > div:nth-child(5) {
    left: 25%;
    width: 20px;
    height: 20px;
    --startX: 5px;
    --midX: -7px;
    --endX: 12px;
    --startY: 0px;
    --rotateStart: -5deg;
    animation-delay: 1.8s;
    animation-duration: 11.1s; }
  .snow > div:nth-child(6) {
    left: 30%;
    width: 14px;
    height: 14px;
    --startX: -7px;
    --midX: 9px;
    --endX: -4px;
    --startY: -2px;
    --rotateStart: 8deg;
    animation-delay: 0.4s;
    animation-duration: 10.4s; }
  .snow > div:nth-child(7) {
    left: 35%;
    width: 17px;
    height: 17px;
    --startX: 10px;
    --midX: -15px;
    --endX: 7px;
    --startY: 3px;
    --rotateStart: -15deg;
    animation-delay: 2.9s;
    animation-duration: 9.6s; }
  .snow > div:nth-child(8) {
    left: 40%;
    width: 13px;
    height: 13px;
    --startX: -8px;
    --midX: 11px;
    --endX: -10px;
    --startY: 2px;
    --rotateStart: 12deg;
    animation-delay: 1.2s;
    animation-duration: 10.1s; }
  .snow > div:nth-child(9) {
    left: 45%;
    width: 19px;
    height: 19px;
    --startX: 7px;
    --midX: -12px;
    --endX: 10px;
    --startY: -1px;
    --rotateStart: -7deg;
    animation-delay: 3.5s;
    animation-duration: 11.3s; }
  .snow > div:nth-child(10) {
    left: 50%;
    width: 16px;
    height: 16px;
    --startX: -6px;
    --midX: 14px;
    --endX: -5px;
    --startY: 1px;
    --rotateStart: 3deg;
    animation-delay: 0.9s;
    animation-duration: 9.1s; }
  .snow > div:nth-child(11) {
    left: 55%;
    width: 14px;
    height: 14px;
    --startX: 5px;
    --midX: -8px;
    --endX: 12px;
    --startY: -3px;
    --rotateStart: -12deg;
    animation-delay: 1.5s;
    animation-duration: 10.7s; }
  .snow > div:nth-child(12) {
    left: 60%;
    width: 20px;
    height: 20px;
    --startX: -10px;
    --midX: 15px;
    --endX: -10px;
    --startY: 2px;
    --rotateStart: 9deg;
    animation-delay: 3.2s;
    animation-duration: 9.6s; }
  .snow > div:nth-child(13) {
    left: 65%;
    width: 15px;
    height: 15px;
    --startX: 12px;
    --midX: -14px;
    --endX: 8px;
    --startY: -4px;
    --rotateStart: -4deg;
    animation-delay: 0.3s;
    animation-duration: 11.2s; }
  .snow > div:nth-child(14) {
    left: 70%;
    width: 13px;
    height: 13px;
    --startX: -7px;
    --midX: 10px;
    --endX: -12px;
    --startY: 0px;
    --rotateStart: 11deg;
    animation-delay: 2.7s;
    animation-duration: 10.6s; }
  .snow > div:nth-child(15) {
    left: 75%;
    width: 18px;
    height: 18px;
    --startX: 8px;
    --midX: -17px;
    --endX: 14px;
    --startY: 3px;
    --rotateStart: -9deg;
    animation-delay: 1.1s;
    animation-duration: 9.9s; }
  .snow > div:nth-child(16) {
    left: 80%;
    width: 16px;
    height: 16px;
    --startX: -11px;
    --midX: 13px;
    --endX: -7px;
    --startY: -2px;
    --rotateStart: 4deg;
    animation-delay: 0.6s;
    animation-duration: 11.5s; }
  .snow > div:nth-child(17) {
    left: 85%;
    width: 14px;
    height: 14px;
    --startX: 7px;
    --midX: -12px;
    --endX: 15px;
    --startY: 1px;
    --rotateStart: -13deg;
    animation-delay: 3.8s;
    animation-duration: 10.8s; }
  .snow > div:nth-child(18) {
    left: 90%;
    width: 19px;
    height: 19px;
    --startX: -8px;
    --midX: 14px;
    --endX: -11px;
    --startY: 4px;
    --rotateStart: 7deg;
    animation-delay: 1.9s;
    animation-duration: 9.9s; }
  .snow > div:nth-child(19) {
    left: 95%;
    width: 13px;
    height: 13px;
    --startX: 11px;
    --midX: -16px;
    --endX: 10px;
    --startY: -1px;
    --rotateStart: -8deg;
    animation-delay: 2.4s;
    animation-duration: 11.4s; }
  .snow > div:nth-child(20) {
    left: 98%;
    width: 15px;
    height: 15px;
    --startX: -10px;
    --midX: 15px;
    --endX: -5px;
    --startY: 0px;
    --rotateStart: 10deg;
    animation-delay: 0.8s;
    animation-duration: 10.9s; }

@keyframes fallSway {
  0% {
    transform: translateX(var(--startX)) translateY(var(--startY)) rotate(var(--rotateStart));
    opacity: 1; }
  50% {
    transform: translateX(var(--midX)) translateY(calc(var(--startY) + 50vh)) rotate(calc(var(--rotateStart) + 180deg));
    opacity: 0.6; }
  100% {
    transform: translateX(var(--endX)) translateY(calc(var(--startY) + 100vh)) rotate(calc(var(--rotateStart) + 360deg));
    opacity: 0.2; } }
/* 春 */
/*sakura
.sakura {
	position: relative;
	width: 1000vw;
	aspect-ratio: 16/9;	
	overflow: hidden;
}

.sakura > div {
	position: absolute;
	width: 10px;
	height: 10px;
	left: -10px;
	background-image: url("/share/asset/ui/sakura.svg");
	background-size: contain;
	background-repeat: no-repeat;
	animation-name: flyWithWind;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform, opacity;
}

@keyframes flyWithWind {
	0% {
		transform: translate(0, 0) rotate(0deg);
		opacity: 0;
	}
	3% {
		opacity: 1;
	}
	20% {
		transform: translate(200px, -20px) rotate(5deg);
	}
	40% {
		transform: translate(400px, 30px) rotate(-8deg);
	}
	60% {
		transform: translate(600px, -25px) rotate(10deg);
	}
	80% {
		transform: translate(800px, 20px) rotate(-6deg);
	}
	90% {
		transform: translate(800px, 20px) rotate(-6deg);
		opacity: 1;
	}
	100% {
		transform: translate(1000px, 0px) rotate(0deg);
		opacity: 0;
	}
}

.sakura > div:nth-child(1) {top: -3%;left: -2px;animation-delay: 0.2s;animation-duration: 13.5s;width: 20px;height: 20px;}
.sakura > div:nth-child(2) {top: 7%;left: -4px;animation-delay: 0.6s;animation-duration: 14.2s;width: 12px;height: 12px;}
.sakura > div:nth-child(3) {top: 5%;left: -1px;animation-delay: 0.1s;animation-duration: 13.8s;width: 26px;height: 26px;}
.sakura > div:nth-child(4) {top: 14%;left: -3px;animation-delay: 0.7s;animation-duration: 13.3s;width: 18px;height: 18px;}
.sakura > div:nth-child(5) {top: -10%;left: -5px;animation-delay: 0.4s;animation-duration: 14.1s;width: 30px;height: 30px;}
.sakura > div:nth-child(6) {top: 21%;left: -2px;animation-delay: 0.3s;animation-duration: 13.7s;width: 10px;height: 10px;}
.sakura > div:nth-child(7) {top: 25%;left: -4px;animation-delay: 0.9s;animation-duration: 14.4s;width: 24px;height: 24px;}
.sakura > div:nth-child(8) {top: 28%;left: -1px;animation-delay: 0.5s;animation-duration: 14.6s;width: 8px;height: 8px;}
.sakura > div:nth-child(9) {top: 32%;left: -3px;animation-delay: 0.6s;animation-duration: 13.9s;width: 14px;height: 14px;}
.sakura > div:nth-child(10) {top: 36%;left: -2px;animation-delay: 0.2s;animation-duration: 14.3s;width: 27px;height: 27px;}
.sakura > div:nth-child(11) {top: 40%;left: -5px;animation-delay: 0.8s;animation-duration: 14.1s;width: 22px;height: 22px;}
.sakura > div:nth-child(12) {top: 44%;left: -1px;animation-delay: 0.1s;animation-duration: 13.6s;width: 6px;height: 6px;}
.sakura > div:nth-child(13) {top: 48%;left: -3px;animation-delay: 0.7s;animation-duration: 12.9s;width: 19px;height: 19px;}
.sakura > div:nth-child(14) {top: 52%;left: -2px;animation-delay: 0.5s;animation-duration: 14.5s;width: 13px;height: 13px;}
.sakura > div:nth-child(15) {top: 56%;left: -4px;animation-delay: 0.3s;animation-duration: 13.4s;width: 16px;height: 16px;}
.sakura > div:nth-child(16) {top: 60%;left: -1px;animation-delay: 0.9s;animation-duration: 14.0s;width: 30px;height: 30px;}
.sakura > div:nth-child(17) {top: 64%;left: -5px;animation-delay: 0.4s;animation-duration: 14.3s;width: 7px;height: 7px;}
.sakura > div:nth-child(18) {top: 68%;left: -3px;animation-delay: 0.6s;animation-duration: 13.2s;width: 15px;height: 15px;}
.sakura > div:nth-child(19) {top: 72%;left: -2px;animation-delay: 0.2s;animation-duration: 13.8s;width: 11px;height: 11px;}
.sakura > div:nth-child(20) {top: 76%;left: -4px;animation-delay: 0.8s;animation-duration: 13.0s;width: 25px;height: 25px;}
*/
/*
.petal{
	background-image: linear-gradient(#ffe1ec, #F5A0A2);
	display: inline-block;
	height: 11px;
	position: relative;
	width: 10px;
	border-radius: 30% 30% 100% 100% / 100%;
	transform: rotate(45deg);
	animation: petals-flutter 2s infinite;
	z-index: 10;
}
.petal:before {
	border-bottom: 7px solid #ffe1ec;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-radius: 0px;
	top: -7px;
	left: 1px;
	position: absolute;
	width: 0;
	height: 0;
	content: "";
}
.petals{
	width: 10px;
	height: 11px;
	position: relative;
	margin-top: 0px;
	margin-left: 50px;
}
.p1{
	right: 10px;
	top: 90px;
	animation: petals-move infinite 5s;
}
.p2{
	left: 10px;
	bottom: 0px;
	animation: petals-move infinite 5s;
}
.p3{
	left: 25px;
	top: 65px;
	animation: petals-move infinite 5s;
}
.p4{
	right: 30px;
	bottom: 40px;
	animation: petals-move infinite 5s;
}
.p5{
	right: 15px;
	top: 15px;
	animation: petals-move infinite 5s;
}
.content{
	text-align: center;
	font-family: helvetica;
}
.container{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	position: absolute;
	animation: petals-fall 5s linear infinite;
	mix-blend-mode: lighten;
	z-index: 4;
}
@keyframes petals-flutter{
	0%{transform: rotate(45deg);}
	50%{transform: rotate(-45deg);}
	100%{transform: rotate(45deg);}
}
@keyframes petals-move{
	0%{transform: translateX(0px);}
	50%{transform: translateX(50px);}
	100%{transform: translateX(0px);}
}
@keyframes petals-fall{
	0%{top: -50%;right: -50%;}
	100%{top: 50%;right: 50%;}
}*/
/* 夏 */
.season .wind {
  display: none; }
  .season .wind > div {
    width: 15px;
    top: -50px;
    aspect-ratio: 1/1;
    animation: fly 12s linear infinite; }
    .season .wind > div:nth-child(1) {
      left: -8%;
      top: 5%;
      animation-delay: 0s;
      animation-duration: 18s;
      transform: scale(1); }
    .season .wind > div:nth-child(2) {
      left: 13%;
      top: 8%;
      animation-delay: 3s;
      animation-duration: 19s;
      transform: scale(0.9); }
    .season .wind > div:nth-child(3) {
      left: -18%;
      top: -16%;
      animation-delay: 6s;
      animation-duration: 17s;
      transform: scale(1.2); }
    .season .wind > div:nth-child(4) {
      left: 18%;
      top: 77%;
      animation-delay: 2s;
      animation-duration: 20s;
      transform: scale(1.1); }
    .season .wind > div:nth-child(5) {
      left: 28%;
      top: 24%;
      animation-delay: 5s;
      animation-duration: 18s;
      transform: scale(1); }
    .season .wind > div:nth-child(6) {
      left: 33%;
      top: -5%;
      animation-delay: 1.5s;
      animation-duration: 19s;
      transform: scale(1.3); }
    .season .wind > div:nth-child(7) {
      left: -38%;
      top: 8%;
      animation-delay: 3.5s;
      animation-duration: 20s;
      transform: scale(0.8); }
    .season .wind > div:nth-child(8) {
      left: 43%;
      top: 35%;
      animation-delay: 6.5s;
      animation-duration: 17s;
      transform: scale(1.2); }
    .season .wind > div:nth-child(9) {
      left: 48%;
      top: 36%;
      animation-delay: 4s;
      animation-duration: 19s;
      transform: scale(0.95); }
    .season .wind > div:nth-child(10) {
      left: 13%;
      top: -8%;
      animation-delay: 2.5s;
      animation-duration: 20s;
      transform: scale(1.05); }
    .season .wind > div:nth-child(11) {
      left: 58%;
      top: 25%;
      animation-delay: 1s;
      animation-duration: 18s;
      transform: scale(1.15); }
    .season .wind > div:nth-child(12) {
      left: 63%;
      top: -7%;
      animation-delay: 3.8s;
      animation-duration: 19s;
      transform: scale(0.85); }
    .season .wind > div:nth-child(13) {
      left: 68%;
      top: 87%;
      animation-delay: 6s;
      animation-duration: 17s;
      transform: scale(1.25); }
    .season .wind > div:nth-child(14) {
      left: 73%;
      top: -6%;
      animation-delay: 2s;
      animation-duration: 18s;
      transform: scale(1); }
    .season .wind > div:nth-child(15) {
      left: 78%;
      top: 48%;
      animation-delay: 5s;
      animation-duration: 20s;
      transform: scale(1.1); }
    .season .wind > div:nth-child(16) {
      left: 83%;
      top: -4%;
      animation-delay: 1.5s;
      animation-duration: 19s;
      transform: scale(0.9); }
    .season .wind > div:nth-child(17) {
      left: 88%;
      top: 46%;
      animation-delay: 3.5s;
      animation-duration: 20s;
      transform: scale(1.05); }
    .season .wind > div:nth-child(18) {
      left: 93%;
      top: -5%;
      animation-delay: 6.2s;
      animation-duration: 17s;
      transform: scale(1.2); }
    .season .wind > div:nth-child(19) {
      left: 98%;
      top: 38%;
      animation-delay: 4.2s;
      animation-duration: 18s;
      transform: scale(0.95); }
    .season .wind > div:nth-child(20) {
      left: 103%;
      top: -7%;
      animation-delay: 2.8s;
      animation-duration: 20s;
      transform: scale(1); }
.season.spring .wind div {
  background: radial-gradient(circle, #ffc0cb 30%, #ff69b4 100%);
  border-radius: 60% 60% 60% 60%; }
.season.summer .wind div {
  border: 1px solid lightgreen;
  border-radius: 0 100%;
  background-image: linear-gradient(to right, #2db4cc, #2db4cc); }
.season.autumn .wind div {
  background: linear-gradient(135deg, #ffb74d, #e65100);
  border-radius: 40% 40% 60% 60%; }

@keyframes fly {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1; }
  50% {
    transform: translate(40vw, 400px) rotate(120deg);
    opacity: 0.8; }
  100% {
    transform: translate(100vw, 800px) rotate(360deg);
    opacity: 0; } }
 /*
.city img,
.city a,
.iso-people,
.iso-people-group,
.season .iso-stage,
.season .iso-activities {
	display: none;
}
.city img.iso-vehicle {
	display: block;
}*/