/* common
--------------------------------------------------- */

@media screen and (max-width: 767px) {
    #rwd-content:has(#mobilites) {
        overflow: clip;
    }
}

#mobilites{
  --size-flex: calc(1vw / 1440 * 100);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  overflow-x: clip;
}

@media screen and (max-width: 768px) {
  #mobilites{
    --size-flex: calc(1vw / 390 * 100);
  }
  #mobilites .mobilites-pc{
    display: none;
  }
}
@media screen and (min-width: 769px) {
  #mobilites .mobilites-sp{
    display: none;
  }
}

#mobilites .mobilites-headline{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#mobilites .mobilites-headline_title{
  display: block;
  width: auto;
  height: calc(40 * var(--size-flex));
}
#mobilites .mobilites-headline_title img{
  width: auto;
  height: 100%;
}
#mobilites .mobilites-headline_ruby{
  display: block;
  margin-top: calc(20 * var(--size-flex));
  font-size: calc(24 * var(--size-flex));
  line-height: 1;
  font-weight: 700;
}
#mobilites .mobilites-kv_message{
  position: absolute;
  top: 100vh;
  left: 0;
  right: 0;
  width: calc(371 * var(--size-flex));
  margin: auto;
  z-index: 2;
}
#mobilites .mobilites-kv_message img{
  width: 100%;
}


@media screen and (max-width: 768px) {
  #mobilites .mobilites-headline{
  }
  #mobilites .mobilites-headline_title{
    height: calc(32 * var(--size-flex));
  }
  #mobilites .mobilites-headline_title img{
  }
  #mobilites .mobilites-headline_ruby{
    margin-top: calc(16 * var(--size-flex));
    font-size: calc(16 * var(--size-flex));
    line-height: 1.5;
  }
  #mobilites .mobilites-kv_message{
    position: absolute;
    top: 100vh;
    width: calc(340 * var(--size-flex));
    margin: auto;
    z-index: 2;
  }
  #mobilites .mobilites-kv_message img{
    width: 100%;
  }
}


#mobilites .mobilites-windowBox{
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(15 * var(--size-flex));
}
#mobilites .mobilites-windowBox::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: calc(100% - (15 * var(--size-flex)));
  bottom: 0;
  margin: auto;
  width: calc(15 * var(--size-flex));
  height: calc(100% - (60 * var(--size-flex)));
  background-image: url(/mobilites/img/window_col_001.png);
  background-size: contain;
}
#mobilites .mobilites-windowBox::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc(100% - (15 * var(--size-flex)));
  bottom: 0;
  margin: auto;
  width: calc(15 * var(--size-flex));
  height: calc(100% - (60 * var(--size-flex)));
  background-image: url(/mobilites/img/window_col_001.png);
  background-size: contain;
  transform: scaleX(-1);
}
#mobilites .mobilites-windowBox_top{
  position: absolute;
  top: calc(0 * var(--size-flex));
  left: 0;
  right: 0;
  margin: auto;
  width: calc(100% - (60 * var(--size-flex)));
  height: calc(15 * var(--size-flex));
  background-image: url(/mobilites/img/window_row_001.png);
  background-size: contain;
  background-repeat: repeat-x;
}
#mobilites .mobilites-windowBox_top::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  width: calc(30 * var(--size-flex));
  height: calc(30 * var(--size-flex));
  background-image: url(/mobilites/img/window_corner_001.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#mobilites .mobilites-windowBox_top::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: calc(30 * var(--size-flex));
  height: calc(30 * var(--size-flex));
  transform: scaleX(-1);
  background-image: url(/mobilites/img/window_corner_001.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#mobilites .mobilites-windowBox_bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(100% - (60 * var(--size-flex)));
  height: calc(15 * var(--size-flex));
  background-image: url(/mobilites/img/window_row_001.png);
  background-size: contain;
  background-repeat: repeat-x;
  transform: rotate(180deg);
}
#mobilites .mobilites-windowBox_bottom::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  width: calc(30 * var(--size-flex));
  height: calc(30 * var(--size-flex));
  background-image: url(/mobilites/img/window_corner_001.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#mobilites .mobilites-windowBox_bottom::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: calc(30 * var(--size-flex));
  height: calc(30 * var(--size-flex));
  transform: scaleX(-1);
  background-image: url(/mobilites/img/window_corner_001.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#mobilites .mobilites-windowBox_inner{
  margin: auto;
  width: 100%;
  background-color: #fff;
}


@media screen and (max-width: 768px) {
  #mobilites .mobilites-windowBox{
    padding: calc(10 * var(--size-flex));
  }
  #mobilites .mobilites-windowBox::before{
    right: calc(100% - (10 * var(--size-flex)));
    width: calc(10 * var(--size-flex));
    height: calc(100% - (40 * var(--size-flex)));
  }
  #mobilites .mobilites-windowBox::after{
    left: calc(100% - (10 * var(--size-flex)));
    width: calc(10 * var(--size-flex));
    height: calc(100% - (40 * var(--size-flex)));
  }
  #mobilites .mobilites-windowBox_top{
    position: absolute;
    top: calc(0 * var(--size-flex));
    width: calc(100% - (40 * var(--size-flex)));
    height: calc(10 * var(--size-flex));
  }
  #mobilites .mobilites-windowBox_top::before{
    width: calc(20 * var(--size-flex));
    height: calc(20 * var(--size-flex));
  }
  #mobilites .mobilites-windowBox_top::after{
    width: calc(20 * var(--size-flex));
    height: calc(20 * var(--size-flex));
  }

  #mobilites .mobilites-windowBox_bottom{
    width: calc(100% - (40 * var(--size-flex)));
    height: calc(10 * var(--size-flex));
  }
  #mobilites .mobilites-windowBox_bottom::before{
    width: calc(20 * var(--size-flex));
    height: calc(20 * var(--size-flex));
  }
  #mobilites .mobilites-windowBox_bottom::after{
    width: calc(20 * var(--size-flex));
    height: calc(20 * var(--size-flex));
  }
  #mobilites .mobilites-windowBox_inner{
    width: auto;
  }
}


/* header
--------------------------------------------------- */
#mobilites .mobilites-header_button{
  position: fixed;
  top: calc(40 * var(--size-flex));
  right: calc(40 * var(--size-flex));
  width: calc(60 * var(--size-flex));
  height: calc(15 * var(--size-flex));
  z-index: 10;
  cursor: pointer;
}
#mobilites .mobilites-header_button::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 100%;
  height: calc(3 * var(--size-flex));
  background-color: #000;
}
#mobilites .mobilites-header_button::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 100%;
  height: calc(3 * var(--size-flex));
  background-color: #000;
}
#mobilites .is-open.mobilites-header_button::before{
  top: 0;
  bottom: 0;
  transform: rotate(30deg);
}
#mobilites .is-open.mobilites-header_button::after{
  top: 0;
  bottom: 0;
  transform: rotate(-30deg);
}

#mobilites .mobilites-nav{
  position: fixed;
  top: calc(20 * var(--size-flex));
  right: calc(20 * var(--size-flex));
  display: none;
  z-index: 14;
}
#mobilites .mobilites-header:has(.mobilites-header_button.is-open) .mobilites-nav{
  display: flex;
}
#mobilites .mobilites-nav_window{
  position: absolute;
  top: 0;
  right: 0;
  width: calc(362 * var(--size-flex));
  margin: auto;
  z-index: 5;
}
#mobilites .mobilites-nav_window.mobilites-windowBox::before{
  background-image: url(/mobilites/img/window_col_006.png);
}
#mobilites .mobilites-nav_window.mobilites-windowBox::after{
  background-image: url(/mobilites/img/window_col_006.png);
}
#mobilites .mobilites-nav_window .mobilites-windowBox_top{
  background-image: url(/mobilites/img/window_row_006.png);
}
#mobilites .mobilites-nav_window .mobilites-windowBox_top::before{
  background-image: url(/mobilites/img/window_corner_006.png);
}
#mobilites .mobilites-nav_window .mobilites-windowBox_top::after{
  background-image: url(/mobilites/img/window_corner_006.png);
}
#mobilites .mobilites-nav_window .mobilites-windowBox_bottom{
  background-image: url(/mobilites/img/window_row_006.png);
}
#mobilites .mobilites-nav_window .mobilites-windowBox_bottom::before{
  background-image: url(/mobilites/img/window_corner_006.png);
}
#mobilites .mobilites-nav_window .mobilites-windowBox_bottom::after{
  background-image: url(/mobilites/img/window_corner_006.png);
}
#mobilites .mobilites-nav_window_inner{
  padding: calc(44 * var(--size-flex)) calc(42 * var(--size-flex));
  box-sizing: border-box;
  background-color: #202020;
}
#mobilites .mobilites-nav_window_main{
  position: relative;
  text-align: left;
}
#mobilites .mobilites-nav_window_object{
  position: absolute;
  right: calc(39 * var(--size-flex));
  bottom: calc(61 * var(--size-flex));
  width: calc(72 * var(--size-flex));
  height: calc(72 * var(--size-flex));
  background-image: url(/mobilites/img/object_waker_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#mobilites .mobilites-nav_window_close{
  display: block;
  width: calc(62 * var(--size-flex));
  margin-left: auto;
  margin-bottom: calc(16 * var(--size-flex));
  cursor: pointer;
}
#mobilites .mobilites-nav_window_close img{
  width: 100%;
  height: auto;
}
#mobilites a.mobilites-nav_window_link{
  position: relative;
  display: block;
  padding: calc(12 * var(--size-flex)) 0;
  padding-left: calc(24 * var(--size-flex));
  font-size: calc(14 * var(--size-flex));
  line-height: 1;
  color: #fff;
}
#mobilites a.mobilites-nav_window_link:hover::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: calc(14 * var(--size-flex));
  height: calc(20 * var(--size-flex));
  background-image: url(/mobilites/img/icon_select_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (max-width: 768px) {
  #mobilites .mobilites-header_button{
    position: fixed;
    top: calc(35 * var(--size-flex));
    right: calc(20 * var(--size-flex));
    width: calc(60 * var(--size-flex));
    height: calc(15 * var(--size-flex));
    z-index: 10;
    cursor: pointer;
  }
  #mobilites .mobilites-nav{
    position: fixed;
    top: calc(20 * var(--size-flex));
    right: calc(20 * var(--size-flex));
    display: none;
    z-index: 14;
  }
  #mobilites .mobilites-nav_window{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(352 * var(--size-flex));
    margin: auto;
    z-index: 5;
  }
  #mobilites .mobilites-nav_window_inner{
    padding: calc(44 * var(--size-flex)) calc(42 * var(--size-flex));
    box-sizing: border-box;
    background-color: #202020;
  }
  #mobilites .mobilites-nav_window_main{
    position: relative;
    text-align: left;
  }
  #mobilites .mobilites-nav_window_object{
    position: absolute;
    right: calc(39 * var(--size-flex));
    bottom: calc(61 * var(--size-flex));
    width: calc(72 * var(--size-flex));
    height: calc(72 * var(--size-flex));
    background-image: url(/mobilites/img/object_waker_001.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  #mobilites .mobilites-nav_window_close{
    display: block;
    width: calc(62 * var(--size-flex));
    margin-left: auto;
    margin-bottom: calc(16 * var(--size-flex));
    cursor: pointer;
  }
  #mobilites a.mobilites-nav_window_link{
    position: relative;
    display: block;
    padding: calc(12 * var(--size-flex)) 0;
    padding-left: calc(24 * var(--size-flex));
    font-size: calc(14 * var(--size-flex));
    line-height: 1;
    color: #fff;
  }
  #mobilites a.mobilites-nav_window_link:hover::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: calc(14 * var(--size-flex));
    height: calc(20 * var(--size-flex));
    background-image: url(/mobilites/img/icon_select_001.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
}


/* kv
--------------------------------------------------- */

#mobilites .mobilites-kv{
  position: relative;
  width: 100%;
  height: 400vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #C0F7FF;
}
#mobilites .mobilites-kv.is-remove{
  opacity: 0;
  pointer-events: none;
}
#mobilites .mobilites-kv_wrap{
  position: sticky;
  text-align: center;
  top: 0;
  left: 0;
  height: 100vh;
  margin: auto;
}
#mobilites .mobilites-kv_sky{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(95 * var(--size-flex));
  background-color: #95F0FE;
}
#mobilites .mobilites-kv_sky::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: calc(32 * var(--size-flex));
  background-color: #6EEAFD;
}
#mobilites .mobilites-kv_sky::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: calc(32 * var(--size-flex));
  background-color: #ADF4FF;
}
#mobilites .mobilites-kv_scroll{
  content: "";
  position: fixed;
  left: 0;
  bottom: 10vh;
  right: 0;
  margin: 0 auto;
  display: block;
  width: calc(50 * var(--size-flex));
  height: calc(50 * var(--size-flex));
  z-index: 1;
}
#mobilites .mobilites-kv_scroll img{
  width: 100%;
}
#mobilites .mobilites-kv_walker{
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(20 * var(--size-flex));
  margin: auto;
  opacity: 0;
  width: 100%;
  width: calc(96 * var(--size-flex));
  height: calc(96 * var(--size-flex));
  background-image: url(/mobilites/img/object_waker_back_001.png);
  background-size: contain;
  z-index: 2;
}
#mobilites .mobilites-is-walk.mobilites-kv_walker{
  animation-name: waker_back01;
  animation-duration: 1s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
@keyframes waker_back01 {
  0%{background-image: url(/mobilites/img/object_waker_back_002.png)}
  25%{background-image: url(/mobilites/img/object_waker_back_001.png)}
  50%{background-image: url(/mobilites/img/object_waker_back_003.png)}
  75%{background-image: url(/mobilites/img/object_waker_back_001.png)}
}
#mobilites .mobilites-kv_grass{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(150 * var(--size-flex));
  background-color: #9ED49C;
  z-index: -1;
}
#mobilites .mobilites-kv_load{
  position: absolute;
  left: 0;
  bottom: calc(36 * var(--size-flex));
  width: 100%;
  height: calc(93 * var(--size-flex));
  background-color: #E7E7E7;
}

#mobilites .mobilites-kv_load02{
  content: "";
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  display: block;
  width: calc(300 * var(--size-flex));
  height: calc(150 * var(--size-flex));
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  margin: auto;
  background-color: #E7E7E7;
}
#mobilites .mobilites-kv_objects01{
  position: fixed;
  bottom: 0;
  width: 100%;
  left: -100%;
  right: -100%;
  margin: auto;
  will-change: transform;
  z-index: 1;
}
#mobilites .mobilites-kv_objects_left01{
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(720 * var(--size-flex));
  height: calc(359 * var(--size-flex));
  background-image: url(/mobilites/img/kv_left_001.png);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 5;
}
#mobilites .mobilites-kv_objects_right01{
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(720 * var(--size-flex));
  height: calc(359 * var(--size-flex));
  background-image: url(/mobilites/img/kv_right_001.png);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 1;
}

#mobilites .mobilites-kv_objects02{
  position: absolute;
  bottom: calc(100 * var(--size-flex));
  width: 100%;
  left: -100%;
  bottom: 0;
  right: -100%;
  margin: auto;
  opacity: 0;
  transform-origin: top center;
  will-change: transform;
  z-index: 2;
}
#mobilites .mobilites-kv_objects_left02{
  position: absolute;
  bottom: 0;
  left: calc(-29 * var(--size-flex));
  max-width: 50%;
  width: calc(443 * var(--size-flex));
  height: calc(144 * var(--size-flex));
  background-image: url(/mobilites/img/kv_left_002.png);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 5;
}
#mobilites .mobilites-kv_objects_right02{
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 50%;
  width: calc(424 * var(--size-flex));
  height: calc(180 * var(--size-flex));
  background-image: url(/mobilites/img/kv_right_002.png);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 1;
}


#mobilites .mobilites-kv_main{
  position: absolute;
  top: calc(100 * var(--size-flex));
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
}
#mobilites .mobilites-kv_lead{
  display: block;
  margin-bottom: calc(13 * var(--size-flex));
  font-size: calc(24 * var(--size-flex));
  line-height: 1;
  font-weight: 700;
}
#mobilites .mobilites-kv_ttl{
  width: calc(563 * var(--size-flex));
  margin: auto;
}
#mobilites .mobilites-kv_ttl img{
  width: 100%;
}
#mobilites .mobilites-kv_ruby{
  display: block;
  margin-top: calc(18 * var(--size-flex));
  font-size: calc(24 * var(--size-flex));
  line-height: 1;
  font-weight: 700;
}
#mobilites .mobilites-kv_object_balloon{
  position: absolute;
  width: calc(50 * var(--size-flex));
  height: calc(108 * var(--size-flex));
  top: calc(58 * var(--size-flex));
  left: calc(155 * var(--size-flex));
  background-image: url(/mobilites/img/object_balloon_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}
#mobilites .mobilites-kv_object_cloud{
  display: block;
  position: fixed;
  left: 0;
  bottom: calc(340 * var(--size-flex));
  right: 0;
  width: calc(1112 * var(--size-flex));
  height: calc(230 * var(--size-flex));
  margin: auto;
  background-image: url(/mobilites/img/kv_cloud_001.png);
  background-size: calc(1112 * var(--size-flex));
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}



@media screen and (max-width: 768px) {
  #mobilites .mobilites-kv{
    height: 400vh;
  }
  #mobilites .mobilites-kv.is-remove{
  }
  #mobilites .mobilites-kv_wrap{
    position: sticky;
    text-align: center;
    top: 0;
    left: 0;
    height: 100vh;
    margin: auto;
  }
  #mobilites .mobilites-kv_sky{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(95 * var(--size-flex));
    background-color: #95F0FE;
  }
  #mobilites .mobilites-kv_sky::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(32 * var(--size-flex));
    background-color: #6EEAFD;
  }
  #mobilites .mobilites-kv_sky::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: calc(32 * var(--size-flex));
    background-color: #ADF4FF;
  }
  #mobilites .mobilites-kv_scroll{
    content: "";
    position: fixed;
    left: 0;
    bottom: 0vh;
    right: 0;
    margin: 0 auto;
    display: block;
    width: calc(50 * var(--size-flex));
    height: calc(50 * var(--size-flex));
    z-index: 1;
  }
  #mobilites .mobilites-kv_scroll img{
    width: 100%;
  }
  #mobilites .mobilites-kv_walker{
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(20 * var(--size-flex));
    margin: auto;
    opacity: 0;
    width: 100%;
    width: calc(72 * var(--size-flex));
    height: calc(72 * var(--size-flex));
    background-image: url(/mobilites/img/object_waker_back_001.png);
    background-size: contain;
    z-index: 2;
  }
  #mobilites .mobilites-is-walk.mobilites-kv_walker{
    animation-name: waker_back01;
    animation-duration: 1s;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;
  }
  @keyframes waker_back01 {
    0%{background-image: url(/mobilites/img/object_waker_back_002.png)}
    25%{background-image: url(/mobilites/img/object_waker_back_001.png)}
    50%{background-image: url(/mobilites/img/object_waker_back_003.png)}
    75%{background-image: url(/mobilites/img/object_waker_back_001.png)}
  }
  #mobilites .mobilites-kv_grass{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100 * var(--size-flex));
    background-color: #9ED49C;
    z-index: -1;
  }
  #mobilites .mobilites-kv_load{
    position: absolute;
    left: 0;
    bottom: calc(36 * var(--size-flex));
    width: 100%;
    height: calc(93 * var(--size-flex));
    background-color: #E7E7E7;
  }

  #mobilites .mobilites-kv_load02{
    content: "";
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    display: block;
    width: calc(100 * var(--size-flex));
    height: calc(100 * var(--size-flex));
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    margin: auto;
    background-color: #E7E7E7;
  }
  #mobilites .mobilites-kv_objects01{
    position: fixed;
    bottom: 0;
    width: 100%;
    left: -100%;
    right: -100%;
    margin: auto;
    will-change: transform;
    z-index: 1;
  }
  #mobilites .mobilites-kv_objects_left01{
    width: calc(195 * var(--size-flex));
    height: calc(206 * var(--size-flex));
    background-image: url(/mobilites/img/kv_left_sp_001.png);
  }
  #mobilites .mobilites-kv_objects_right01{
    width: calc(195 * var(--size-flex));
    height: calc(206 * var(--size-flex));
    background-image: url(/mobilites/img/kv_right_sp_001.png);
  }

  #mobilites .mobilites-kv_objects02{
    position: absolute;
    bottom: calc(100 * var(--size-flex));
    width: 100%;
    left: -100%;
    bottom: 0;
    right: -100%;
    margin: auto;
    opacity: 0;
    transform-origin: top center;
    will-change: transform;
    z-index: 2;
  }
  #mobilites .mobilites-kv_objects_left02{
    position: absolute;
    bottom: 0;
    left: calc(-57 * var(--size-flex));
    max-width: unset;
    width: calc(192 * var(--size-flex));
    height: calc(120 * var(--size-flex));
    background-image: url(/mobilites/img/kv_left_sp_002.png);
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 5;
  }
  #mobilites .mobilites-kv_objects_right02{
    position: absolute;
    bottom: 0;
    right: calc(-57 * var(--size-flex));
    max-width: unset;
    width: calc(177 * var(--size-flex));
    height: calc(120 * var(--size-flex));
    background-image: url(/mobilites/img/kv_right_sp_002.png);
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    z-index: 1;
  }


  #mobilites .mobilites-kv_main{
    position: absolute;
    top: calc(200 * var(--size-flex));
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
  }
  #mobilites .mobilites-kv_lead{
    display: block;
    margin-bottom: calc(8 * var(--size-flex));
    font-size: calc(23 * var(--size-flex));
    line-height: 1.5;
    text-align: center;
  }
  #mobilites .mobilites-kv_ttl{
    width: calc(326 * var(--size-flex));
    margin: auto;
  }
  #mobilites .mobilites-kv_ttl img{
    width: 100%;
  }
  #mobilites .mobilites-kv_ruby{
    margin-top: calc(0 * var(--size-flex));
    font-size: calc(18 * var(--size-flex));
  }
  #mobilites .mobilites-kv_object_balloon{
    position: absolute;
    width: calc(34 * var(--size-flex));
    height: calc(72 * var(--size-flex));
    top: calc(76 * var(--size-flex));
    left: calc(52 * var(--size-flex));
  }
  #mobilites .mobilites-kv_object_cloud{
    display: block;
    position: fixed;
    left: calc(24 * var(--size-flex));
    bottom: calc(340 * var(--size-flex));
    right: 0;
    width: calc(384 * var(--size-flex));
    height: calc(306 * var(--size-flex));
    background-image: url(/mobilites/img/kv_cloud_sp_001.png);
    background-size: calc(384 * var(--size-flex));
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
  }

}




/* about
--------------------------------------------------- */

#mobilites .mobilites-about{
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 150vh;
  margin-bottom: calc(-105 * var(--size-flex));
  width: 100%;
  height: 100vh;
  text-align: center;
  box-sizing: border-box;
  z-index: 5;
}
#mobilites .mobilites-about_window{
  width: calc(866 * var(--size-flex));
  margin: calc(43 * var(--size-flex)) auto calc(0 * var(--size-flex));
  z-index: 5;
}
#mobilites .mobilites-about_window.mobilites-windowBox::before{
  background-image: url(/mobilites/img/window_col_002.png);
}
#mobilites .mobilites-about_window.mobilites-windowBox::after{
  background-image: url(/mobilites/img/window_col_002.png);
}
#mobilites .mobilites-about_window .mobilites-windowBox_top{
  background-image: url(/mobilites/img/window_row_002.png);
}
#mobilites .mobilites-about_window .mobilites-windowBox_top::before{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-about_window .mobilites-windowBox_top::after{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-about_window .mobilites-windowBox_bottom{
  background-image: url(/mobilites/img/window_row_002.png);
}
#mobilites .mobilites-about_window .mobilites-windowBox_bottom::before{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-about_window .mobilites-windowBox_bottom::after{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-about_window_inner{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: calc(50 * var(--size-flex)) calc(42 * var(--size-flex));
  box-sizing: border-box;
}
#mobilites .mobilites-about_window_main{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  width: calc(517 * var(--size-flex)) 0;
  text-align: left;
}
#mobilites .mobilites-about_window_ttl{
  font-size: calc(40 * var(--size-flex));
  line-height: 1.3;
  font-weight: 500;
}
#mobilites .mobilites-about_window_txt{
  margin-top: calc(34 * var(--size-flex));
  font-size: calc(16 * var(--size-flex));
  line-height: 1.5;
  font-weight: 500;
}
#mobilites .mobilites-about_window_txt + .about_window_txt{
  margin-top: calc(27 * var(--size-flex));
}
#mobilites .mobilites-about_window_notes{
  font-size: calc(12 * var(--size-flex));
  line-height: 1.5;
  font-weight: 400;
}
#mobilites .mobilites-about_img{
  width: calc(221 * var(--size-flex));
}
#mobilites .mobilites-about_img img{
  width: 100%;
  height: auto;
}
#mobilites .mobilites-about_notes{
  display: block;
  text-align: center;
  font-size: calc(12 * var(--size-flex));
  line-height: 1.5;
  color: #999;
}

@media screen and (max-width: 768px) {

  #mobilites .mobilites-about{
    position: relative;
    top: 0vh;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    margin-top: 75vh;
    margin-bottom: calc(50 * var(--size-flex));
    width: 100%;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    z-index: 5;
  }
  #mobilites .mobilites-about_window{
    width: calc(336 * var(--size-flex));
    margin: calc(43 * var(--size-flex)) auto calc(0 * var(--size-flex));
    z-index: 5;
  }
  #mobilites .mobilites-about_window_inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column-reverse;
    padding: calc(40 * var(--size-flex)) calc(10 * var(--size-flex));
    box-sizing: border-box;
  }
  #mobilites .mobilites-about_window_main{
    width: calc(517 * var(--size-flex)) 0;
    text-align: left;
  }
  #mobilites .mobilites-about_window_ttl{
    margin-top: calc(34 * var(--size-flex));
    font-size: calc(22 * var(--size-flex));
    line-height: 1.3;
    text-align: center;
    font-weight: 500;
  }
  #mobilites .mobilites-about_window_txt{
    margin-top: calc(34 * var(--size-flex));
    font-size: calc(14 * var(--size-flex));
    text-align: center;
    line-height: 1.5;
    font-weight: 500;
  }
  #mobilites .mobilites-about_window_txt + .mobilites-about_window_txt{
    margin-top: calc(14 * var(--size-flex));
  }
  #mobilites .mobilites-about_window_notes{
    margin-top: calc(18 * var(--size-flex));
    font-size: calc(12 * var(--size-flex));
    line-height: 1.5;
    font-weight: 400;
    text-indent: -1em;
    padding-left: 1em;
  }
  #mobilites .mobilites-about_img{
    width: calc(221 * var(--size-flex));
  }
  #mobilites .mobilites-about_img img{
    width: 100%;
    height: auto;
  }
  #mobilites .mobilites-about_notes{
    font-size: calc(12 * var(--size-flex));
    color: #999;
  }

}




/* app
--------------------------------------------------- */

#mobilites .mobilites-app{
  position: relative;
  padding-top: calc(200 * var(--size-flex));
  background-color: #9ED49C;
  z-index: 2;
}
#mobilites .mobilites-app_wrap{
  position: relative;
  width: calc((866 + 78) * var(--size-flex) * 5);
  height: 500vh;
  transition: transform .1s linear;
  will-change: transform;
}
#mobilites .mobilites-app_top{
  position: relative;
  width: 100vw;
  z-index: 1;
}
#mobilites .mobilites-app_caption{
  position: relative;
  width: calc(693 * var(--size-flex));
  margin: calc(30 * var(--size-flex)) auto 0;
  font-size: calc(15 * var(--size-flex));
  line-height: 1.5;
  padding: 0 calc(15 * var(--size-flex));
  background-color: #BCE9BB;
}
#mobilites .mobilites-app_caption_top{
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  margin: auto;
  width: calc(100% - (30 * var(--size-flex)));
  height: calc(15 * var(--size-flex));
  background-color: #BCE9BB;
}
#mobilites .mobilites-app_caption_top::before{
  content: "";
  position: absolute;
  right: 100%;
  display: block;
  width: calc(15 * var(--size-flex));
  height: calc(15 * var(--size-flex));
  background-image: url(/mobilites/img/caption_corner_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#mobilites .mobilites-app_caption_top::after{
  content: "";
  position: absolute;
  left: 100%;
  display: block;
  width: calc(15 * var(--size-flex));
  height: calc(15 * var(--size-flex));
  background-image: url(/mobilites/img/caption_corner_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scaleX(-1);
}
#mobilites .mobilites-app_caption_bottom{
  position: absolute;
  right: 0;
  top: 100%;
  left: 0;
  margin: auto;
  width: calc(100% - (30 * var(--size-flex)));
  height: calc(15 * var(--size-flex));
  background-color: #BCE9BB;
  transform: scaleY(-1);
}
#mobilites .mobilites-app_caption_bottom::before{
  content: "";
  position: absolute;
  right: 100%;
  display: block;
  width: calc(15 * var(--size-flex));
  height: calc(15 * var(--size-flex));
  background-image: url(/mobilites/img/caption_corner_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#mobilites .mobilites-app_caption_bottom::after{
  content: "";
  position: absolute;
  left: 100%;
  display: block;
  width: calc(15 * var(--size-flex));
  height: calc(15 * var(--size-flex));
  background-image: url(/mobilites/img/caption_corner_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scaleX(-1);
}

#mobilites .mobilites-app_inner{
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
}
@media (min-aspect-ratio: 16/9) {
  #mobilites .mobilites-app_inner{
    top: -25vh;
    min-height: 125vh;
  }

}
#mobilites .mobilites-app_inner::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(/mobilites/img/bg_grass_001.png);
  background-size: calc(500 * var(--size-flex)) calc(200 * var(--size-flex));
  background-color: #9ED49C;
  z-index: -1;
  pointer-events: none;
}
#mobilites .mobilites-app_container{
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  padding-bottom: calc(190 * var(--size-flex));
  margin: calc(45 * var(--size-flex)) 0 0 calc(323 * var(--size-flex));
}
#mobilites .mobilites-app_window{
  width: calc(866 * var(--size-flex));
  margin: 0;
  flex: 0 0 auto;
}
#mobilites .mobilites-app_window.mobilites-windowBox::before{
  background-image: url(/mobilites/img/window_col_002.png);
}
#mobilites .mobilites-app_window.mobilites-windowBox::after{
  background-image: url(/mobilites/img/window_col_002.png);
}
#mobilites .mobilites-app_window .mobilites-windowBox_top{
  background-image: url(/mobilites/img/window_row_002.png);
}
#mobilites .mobilites-app_window .mobilites-windowBox_top::before{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-app_window .mobilites-windowBox_top::after{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-app_window .mobilites-windowBox_bottom{
  background-image: url(/mobilites/img/window_row_002.png);
}
#mobilites .mobilites-app_window .mobilites-windowBox_bottom::before{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-app_window .mobilites-windowBox_bottom::after{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-app_window:not(:first-child){
  margin-left: calc(78 * var(--size-flex));
}
#mobilites .mobilites-app_window_inner{
  height: 100%;
  padding: calc(44 * var(--size-flex)) calc(56 * var(--size-flex));
  box-sizing: border-box;
}
#mobilites .mobilites-app_window_num{
  display: block;
  width: calc(44 * var(--size-flex));
}
#mobilites .mobilites-app_window_main{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: calc(25 * var(--size-flex)) 0 0;
}
#mobilites .mobilites-app_window_details{
  width: calc(310 * var(--size-flex));
  height: auto;
}
#mobilites .mobilites-app_window_num img{
  width: 100%;
  height: auto;
}
#mobilites .mobilites-app_window_headline{
  display: block;
  font-size: calc(26 * var(--size-flex));
  line-height: 1.2;
  font-weight: 500;
  margin: 0;
}
#mobilites .mobilites-app_window_label{
  display: inline-block;
  margin-top: calc(8 * var(--size-flex));
  font-size: calc(16 * var(--size-flex));
  line-height: 1.2;
  font-weight: 500;
  background-color: #FFFF00;
}
#mobilites .mobilites-app_window_txt{
  display: block;
  margin-top: calc(32 * var(--size-flex));
  font-size: calc(14 * var(--size-flex));
  line-height: 1.5;
}
#mobilites .mobilites-app_window_img{
  width: calc(290 * var(--size-flex));
  height: calc(205 * var(--size-flex));
  overflow: hidden;
}
#mobilites .mobilites-app_window_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
#mobilites .mobilites-app_scroll{
  content: "";
  position: sticky;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  padding-bottom: calc(10 * var(--size-flex));
  display: block;
  width: calc(50 * var(--size-flex));
  height: calc(50 * var(--size-flex));
  z-index: 1;
}
#mobilites .mobilites-app_scroll img{
  width: 100%;
}
#mobilites .mobilites-app_object_waker01{
  position: absolute;
  top: calc(-107 * var(--size-flex));
  left: calc(85 * var(--size-flex));
  display: block;
  width: calc(72 * var(--size-flex));
  height: calc(72 * var(--size-flex));
  z-index: 30;
  will-change: transform;
}
#mobilites .mobilites-app_object_waker01_img{
  width: 100%;
  height: 100%;
  background-image: url(/mobilites/img/object_waker_001.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#mobilites .mobilites-is-walk > .mobilites-app_object_waker01_img{
  animation-name: waker01;
  animation-duration: 1s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
@keyframes waker01 {
  0%{background-image: url(/mobilites/img/object_waker_002.png)}
  25%{background-image: url(/mobilites/img/object_waker_001.png)}
  50%{background-image: url(/mobilites/img/object_waker_003.png)}
  75%{background-image: url(/mobilites/img/object_waker_001.png)}
}
#mobilites .mobilites-app_object_waker02{
  position: absolute;
  bottom: calc(10 * var(--size-flex));
  left: calc(-107 * var(--size-flex));
  display: block;
  width: calc(252 * var(--size-flex));
  height: calc(144 * var(--size-flex));
  z-index: 30;
  will-change: transform;
}
#mobilites .mobilites-app_object_waker02_img{
  width: 100%;
  height: 100%;
  background-image: url(/mobilites/img/object_cart_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation-name: waker02;
  animation-duration: 2s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
@keyframes waker02 {
  0%{background-image: url(/mobilites/img/object_cart_001.png)}
  12.5%{background-image: url(/mobilites/img/object_cart_002.png)}
  25%{background-image: url(/mobilites/img/object_cart_003.png)}
  37.5%{background-image: url(/mobilites/img/object_cart_004.png)}
  50%{background-image: url(/mobilites/img/object_cart_005.png)}
  62.5%{background-image: url(/mobilites/img/object_cart_006.png)}
  75%{background-image: url(/mobilites/img/object_cart_007.png)}
  87.5%{background-image: url(/mobilites/img/object_cart_008.png)}
  100%{background-image: url(/mobilites/img/object_cart_001.png)}
}
#mobilites .mobilites-app_drawArea{
  position: absolute;
  top: calc(-200 * var(--size-flex));
  left: 0;
  width: 100%;
  height: calc(100% + 200 * var(--size-flex));
  z-index: 0;
  pointer-events: none;
}
#mobilites .mobilites-app_drawArea_svg{
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#mobilites .mobilites-app_drawArea_svg path{
  stroke-width: calc(60 * var(--size-flex));
  stroke: #fff;
  fill: none;
}
#mobilites .mobilites-app_drawArea_point01{
  position: absolute;
  top: calc(-10 * var(--size-flex));
  left: calc(110 * var(--size-flex));
  width: 0;
  height: 0
}
#mobilites .mobilites-app_drawArea_point02{
  position: absolute;
  bottom: calc(-10 * var(--size-flex));
  left: calc(110 * var(--size-flex));
  width: 0;
  height: 0
}

#mobilites .mobilites-app_drawArea_point03{
  position: absolute;
  bottom: calc(10 * var(--size-flex));
  left: calc(0 * var(--size-flex));
  width: 0;
  height: 0
}
#mobilites .mobilites-app_drawArea_point04{
  position: absolute;
  bottom: calc(10 * var(--size-flex));
  right: calc(0 * var(--size-flex));
  width: 0;
  height: 0
}


/* app object */

#mobilites .mobilites-app_treeArea01{
  position: absolute;
  top: calc(20 * var(--size-flex));
  left: calc(-45 * var(--size-flex));
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: calc(90 * var(--size-flex));
  height: calc(100vh - (15 * var(--size-flex)));
  overflow: clip;
  flex-direction: column;
  transform: translateZ(0);
}
#mobilites .mobilites-app_treeArea02{
  position: absolute;
  top: calc(20 * var(--size-flex));
  left: calc(198 * var(--size-flex));
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: calc(90 * var(--size-flex));
  height: calc(100vh - (100 * var(--size-flex)));
  overflow: clip;
  flex-direction: column;
}
#mobilites .mobilites-object_app_tree{
  width: calc(90 * var(--size-flex));
  height: calc(108 * var(--size-flex));
  background-image: url(/mobilites/img/object_tree_001.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#mobilites .mobilites-object_app_tree:not(:first-child){
  margin-top: calc(11 * var(--size-flex));
}

#mobilites .mobilites-object_app_house{
  position: absolute;
  bottom: calc(159 * var(--size-flex));
  left: calc(188 * var(--size-flex));
  width: calc(144 * var(--size-flex));
  height: calc(144 * var(--size-flex));
  background-image: url(/mobilites/img/object_house_001.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#mobilites .mobilites-object_app_spa{
  position: absolute;
  bottom: calc(699 * var(--size-flex));
  left: calc(1146 * var(--size-flex));
  width: calc(192 * var(--size-flex));
  height: calc(176 * var(--size-flex));
  background-image: url(/mobilites/img/object_spa_001.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#mobilites .mobilites-object_app_group{
  position: absolute;
  bottom: calc(230 * var(--size-flex));
  left: calc(345 * var(--size-flex));
  width: 100%;
  height: calc(732 * var(--size-flex));
  background-image: url(/mobilites/img/object_app_group_001.png);
  background-size: contain;
  background-repeat: repeat-x;
}


@media screen and (max-width: 768px) {
  #mobilites .mobilites-app{
    padding-top: calc(100 * var(--size-flex));
  }
  #mobilites .mobilites-app_wrap{
    width: calc((281 + 53) * var(--size-flex) * 5);
    height: 300vh;
  }
  #mobilites .mobilites-app_top{
    position: relative;
    width: 100vw;
    z-index: 1;
  }
  #mobilites .mobilites-app_caption{
    position: relative;
    width: calc(280 * var(--size-flex));
    margin: calc(30 * var(--size-flex)) 0 0 calc(62 * var(--size-flex));
    font-size: calc(15 * var(--size-flex));
    line-height: 1.5;
    padding: 0 calc(15 * var(--size-flex));
    text-align: center;
    background-color: #BCE9BB;
  }
  #mobilites .mobilites-app_caption_top{
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    margin: auto;
    width: calc(100% - (30 * var(--size-flex)));
    height: calc(15 * var(--size-flex));
    background-color: #BCE9BB;
  }
  #mobilites .mobilites-app_caption_top::before{
    content: "";
    position: absolute;
    right: 100%;
    display: block;
    width: calc(15 * var(--size-flex));
    height: calc(15 * var(--size-flex));
    background-image: url(/mobilites/img/caption_corner_001.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  #mobilites .mobilites-app_caption_top::after{
    content: "";
    position: absolute;
    left: 100%;
    display: block;
    width: calc(15 * var(--size-flex));
    height: calc(15 * var(--size-flex));
    background-image: url(/mobilites/img/caption_corner_001.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
  }
  #mobilites .mobilites-app_caption_bottom{
    position: absolute;
    right: 0;
    top: 100%;
    left: 0;
    margin: auto;
    width: calc(100% - (30 * var(--size-flex)));
    height: calc(15 * var(--size-flex));
    background-color: #BCE9BB;
    transform: scaleY(-1);
  }
  #mobilites .mobilites-app_caption_bottom::before{
    content: "";
    position: absolute;
    right: 100%;
    display: block;
    width: calc(15 * var(--size-flex));
    height: calc(15 * var(--size-flex));
    background-image: url(/mobilites/img/caption_corner_001.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  #mobilites .mobilites-app_caption_bottom::after{
    content: "";
    position: absolute;
    left: 100%;
    display: block;
    width: calc(15 * var(--size-flex));
    height: calc(15 * var(--size-flex));
    background-image: url(/mobilites/img/caption_corner_001.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
  }
  #mobilites .mobilites-app_inner{
    position: sticky;
    top: -35vh;
    left: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 135vh;
  }
  #mobilites .mobilites-app_inner::after{
    background-image: url(/mobilites/img/bg_grass_001.png);
    background-size: calc(500 * var(--size-flex)) calc(200 * var(--size-flex));
    z-index: -1;
    pointer-events: none;
  }
  #mobilites .mobilites-app_container{
    padding-bottom: calc(190 * var(--size-flex));
    margin: calc(45 * var(--size-flex)) 0 0 calc(78 * var(--size-flex));
  }
  #mobilites .mobilites-app_window{
    width: calc(281 * var(--size-flex));
    margin: 0;
    flex: 0 0 auto;
  }

  #mobilites .mobilites-app_window:not(:first-child){
    margin-left: calc(53 * var(--size-flex));
  }
  #mobilites .mobilites-app_window_inner{
    padding: calc(32 * var(--size-flex)) calc(24 * var(--size-flex));
  }
  #mobilites .mobilites-app_window_num{
    display: block;
    width: calc(30 * var(--size-flex));
  }
  #mobilites .mobilites-app_window_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column-reverse;
    margin: calc(25 * var(--size-flex)) 0 0;
  }
  #mobilites .mobilites-app_window_details{
    width: 100%;
    height: auto;
  }
  #mobilites .mobilites-app_window_num img{
    width: 100%;
    height: auto;
  }
  #mobilites .mobilites-app_window_headline{
    display: block;
    margin-top: calc(12 * var(--size-flex));
    font-size: calc(18 * var(--size-flex));
    line-height: 1.2;
    font-weight: 500;
  }
  #mobilites .mobilites-app_window_label{
    display: inline-block;
    margin-top: calc(8 * var(--size-flex));
    font-size: calc(10 * var(--size-flex));
    line-height: 1.2;
    font-weight: 500;
  }
  #mobilites .mobilites-app_window_txt{
    display: block;
    margin-top: calc(16 * var(--size-flex));
    font-size: calc(12 * var(--size-flex));
    line-height: 1.5;
  }
  #mobilites .mobilites-app_window_img{
    width: calc(173 * var(--size-flex));
    height: calc(123 * var(--size-flex));
    overflow: hidden;
  }
  #mobilites .mobilites-app_window_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  #mobilites .mobilites-app_object_waker01{
    position: absolute;
    top: calc(-107 * var(--size-flex));
    left: calc(85 * var(--size-flex));
    display: block;
    width: calc(48 * var(--size-flex));
    height: calc(48 * var(--size-flex));
    z-index: 30;
    will-change: transform;
  }
  #mobilites .mobilites-app_object_waker02{
    position: absolute;
    bottom: calc(10 * var(--size-flex));
    left: calc(-107 * var(--size-flex));
    display: block;
    width: calc(168 * var(--size-flex));
    height: calc(96 * var(--size-flex));
    z-index: 30;
    will-change: transform;
  }
  #mobilites .mobilites-app_object_waker02_img{
  }
  #mobilites .mobilites-app_drawArea{
    position: absolute;
    top: calc(-100 * var(--size-flex));
    left: 0;
    width: 100%;
    height: calc(100% + 100 * var(--size-flex));
    z-index: 0;
    pointer-events: none;
  }
  #mobilites .mobilites-app_drawArea_svg{
  }
  #mobilites .mobilites-app_drawArea_svg path{
    stroke-width: calc(36 * var(--size-flex));
    stroke: #fff;
    fill: none;
  }
  #mobilites .mobilites-app_drawArea_point01{
    position: absolute;
    top: calc(-10 * var(--size-flex));
    left: calc(39 * var(--size-flex));
    width: 0;
    height: 0
  }
  #mobilites .mobilites-app_drawArea_point02{
    position: absolute;
    bottom: calc(-10 * var(--size-flex));
    left: calc(39 * var(--size-flex));
    width: 0;
    height: 0
  }

  #mobilites .mobilites-app_drawArea_point03{
    position: absolute;
    bottom: calc(10 * var(--size-flex));
    left: calc(0 * var(--size-flex));
    width: 0;
    height: 0
  }
  #mobilites .mobilites-app_drawArea_point04{
    position: absolute;
    bottom: calc(10 * var(--size-flex));
    right: calc(0 * var(--size-flex));
    width: 0;
    height: 0
  }


  /* app object */

  #mobilites .mobilites-app_treeArea01{
    position: absolute;
    top: calc(20 * var(--size-flex));
    left: calc(-45 * var(--size-flex));
    width: calc(60 * var(--size-flex));
    height: calc(100vh - (15 * var(--size-flex)));
    overflow: clip;
    flex-direction: column;
    transform: translateZ(0);
  }
  #mobilites .mobilites-app_treeArea02{
    position: absolute;
    top: calc(20 * var(--size-flex));
    left: calc(74 * var(--size-flex));
    width: calc(60 * var(--size-flex));
    height: calc(100vh - (100 * var(--size-flex)));
  }
  #mobilites .mobilites-object_app_tree{
    width: calc(60 * var(--size-flex));
    height: calc(108 * var(--size-flex));
  }
  #mobilites .mobilites-object_app_tree:not(:first-child){
    margin-top: calc(19 * var(--size-flex));
  }
  #mobilites .mobilites-object_app_house{
    position: absolute;
    bottom: calc(100 * var(--size-flex));
    left: calc(188 * var(--size-flex));
    width: calc(96 * var(--size-flex));
    height: calc(96 * var(--size-flex));
    background-image: url(/mobilites/img/object_house_001.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  #mobilites .mobilites-object_app_spa{
    position: absolute;
    bottom: calc(699 * var(--size-flex));
    left: calc(1146 * var(--size-flex));
    width: calc(128 * var(--size-flex));
    height: calc(117 * var(--size-flex));
    background-image: url(/mobilites/img/object_spa_001.png);
  }
  #mobilites .mobilites-object_app_group{
    position: absolute;
    bottom: calc(80 * var(--size-flex));
    left: calc(345 * var(--size-flex));
    width: 100%;
    height: calc(488 * var(--size-flex));
    background-image: url(/mobilites/img/object_app_group_001.png);
    background-size: auto calc(488 * var(--size-flex));
    background-repeat: repeat-x;
  }

}




/* case
--------------------------------------------------- */

#mobilites .mobilites-case{
  position: relative;
  padding: calc(73 * var(--size-flex)) 0 calc(232 * var(--size-flex));
  background-image: url(/mobilites/img/bg_brick_001.png);
  background-size: calc(129 * var(--size-flex)) calc(48 * var(--size-flex));
  background-repeat: repeat;
  z-index: 7;
}
#mobilites .mobilites-case_main{
  width: calc(1022 * var(--size-flex));
  min-height: 100vh;
  margin: calc(40 * var(--size-flex)) auto calc(200 * var(--size-flex)) calc(100 * var(--size-flex));
}
#mobilites .mobilites-case_container{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  overflow: hidden;
  max-height: calc(1213 * var(--size-flex));
  box-sizing: border-box;
  padding: calc(20 * var(--size-flex)) calc(50 * var(--size-flex));
  border-bottom: calc(6 * var(--size-flex)) solid #000;
}
#mobilites .mobilites-case_main:has(.mobilites-case_moreBtn.is-open) .mobilites-case_container{
  max-height: 100%;
}
#mobilites .mobilites-case_anchor{
  position: absolute;
  top: calc(800 * var(--size-flex));
  left: 0;
}
#mobilites .mobilites-case_window{
  width: calc(418 * var(--size-flex));
  margin: 0 0 calc(50 * var(--size-flex));
}
#mobilites .mobilites-case_main:has(.mobilites-case_moreBtn.is-open) .mobilites-case_window:nth-child(n+5){
  animation-name: case_container;
  animation-duration: .5s;
  animation-timing-function: steps(1);
  animation-iteration-count: 1;
  animation-play-state: fill;
}
@keyframes case_container {
  0%{
    filter: brightness(0) invert(1);
  }
  100%{
    filter: brightness(1) invert(1);
  }
}

#mobilites .mobilites-case_window.mobilites-windowBox::before{
  background-image: url(/mobilites/img/window_col_002.png);
}
#mobilites .mobilites-case_window.mobilites-windowBox::after{
  background-image: url(/mobilites/img/window_col_002.png);
}
#mobilites .mobilites-case_window .mobilites-windowBox_top{
  background-image: url(/mobilites/img/window_row_002.png);
}
#mobilites .mobilites-case_window .mobilites-windowBox_top::before{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-case_window .mobilites-windowBox_top::after{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-case_window .mobilites-windowBox_bottom{
  background-image: url(/mobilites/img/window_row_002.png);
}
#mobilites .mobilites-case_window .mobilites-windowBox_bottom::before{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-case_window .mobilites-windowBox_bottom::after{
  background-image: url(/mobilites/img/window_corner_002.png);
}
#mobilites .mobilites-case_window_inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  background-color: #EBDDC0;
  padding: calc(37 * var(--size-flex)) calc(44 * var(--size-flex));
  height: 100%;
  box-sizing: border-box;
}
#mobilites .mobilites-case_window_company{
  width: calc(314 * var(--size-flex));
  margin: auto;
  font-size: calc(14 * var(--size-flex));
  line-height: 1.5;
}
#mobilites .mobilites-case_window_ttl{
  width: calc(314 * var(--size-flex));
  margin: auto;
  font-size: calc(18 * var(--size-flex));
  line-height: 1.5;
  font-weight: 700;
}
#mobilites .mobilites-case_window_date{
  display: block;
  margin: auto;
  font-size: calc(12 * var(--size-flex));
  line-height: 1.5;
  text-align: right;
}
#mobilites .mobilites-case_window_txt{
  width: calc(314 * var(--size-flex));
  margin: calc(11 * var(--size-flex)) auto 0;
  font-size: calc(12 * var(--size-flex));
  line-height: 1.4;
  text-align: justify;
}
#mobilites .mobilites-case_window_img{
  position: relative;
  margin-top: calc(11 * var(--size-flex));
  width: calc(314 * var(--size-flex));
  height: calc(190 * var(--size-flex));
}
#mobilites .mobilites-case_window_img img,
#mobilites .mobilites-case_window_img iframe{
  width: 100%;
  height: auto;
}
#mobilites .mobilites-case_caption{
  display: block;
  margin: calc(23 * var(--size-flex)) auto 0;
  font-size: calc(16 * var(--size-flex));
  line-height: 1.5;
  text-align: center;
}
#mobilites .mobilites-case_moreBtn{
  display: block;
  margin: calc(21 * var(--size-flex)) auto 0;
  width: calc(159 * var(--size-flex));
  cursor: pointer;
}
#mobilites .mobilites-case_moreBtn.is-open{
  opacity: 0;
  pointer-events: none;
}
#mobilites .mobilites-case_moreBtn img{
  width: 100%;
}
#mobilites .mobilites-case_window_btn{
  display: block;
  width: calc(86 * var(--size-flex));
  margin: calc(12 * var(--size-flex)) 0 calc(30 * var(--size-flex)) auto;
}

#mobilites .mobilites-case_object_buggy01{
  position: absolute;
  top: calc(10 * var(--size-flex));
  right: calc(45 * var(--size-flex));
  display: block;
  width: calc(144 * var(--size-flex));
  height: calc(144 * var(--size-flex));
  z-index: 30;
  will-change: transform;
}
#mobilites .mobilites-case_object_buggy01_img{
  width: 100%;
  height: 100%;
  background-image: url(/mobilites/img/object_buggy_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation-name: buggy01;
  animation-duration: 1s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
@keyframes buggy01 {
  0%{background-image: url(/mobilites/img/object_buggy_001.png)}
  25%{background-image: url(/mobilites/img/object_buggy_002.png)}
  50%{background-image: url(/mobilites/img/object_buggy_001.png)}
  75%{background-image: url(/mobilites/img/object_buggy_002.png)}
}
#mobilites .mobilites-case_drawArea{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
#mobilites .mobilites-case_drawArea_svg{
  width: 100%;
  height: 100%;
}
#mobilites .mobilites-case_drawArea_svg path{
  stroke-width: calc(148 * var(--size-flex));
  stroke: #fff;
  fill: none;
}
#mobilites .mobilites-case_drawArea_point01{
  position: absolute;
  top: calc(0 * var(--size-flex));
  right: calc(138 * var(--size-flex));
  width: 0;
  height: 0
}
#mobilites .mobilites-case_drawArea_point02{
  position: absolute;
  bottom: calc(350 * var(--size-flex));
  right: calc(138 * var(--size-flex));
  width: 0;
  height: 0
}
#mobilites .mobilites-case_drawArea_point03{
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 0;
  height: 0
}

/* case object */

#mobilites .mobilites-object_case_group01{
  position: absolute;
  top: calc(37 * var(--size-flex));
  right: calc(-12 * var(--size-flex));
  width: calc(1568 * var(--size-flex));
  height: calc(1306 * var(--size-flex));
  background-image: url(/mobilites/img/object_case_group_001.png);
  background-size: 100% auto;
  background-position: top right;
  background-repeat: no-repeat;
}
#mobilites .mobilites-object_case_group02{
  position: absolute;
  bottom: calc(240 * var(--size-flex));
  right: calc(9 * var(--size-flex));
  width: calc(1352 * var(--size-flex));
  height: calc(178 * var(--size-flex));
  background-image: url(/mobilites/img/object_case_group_002.png);
  background-size: 100% auto;
  background-position: top right;
  background-repeat: no-repeat;
  z-index: 1;
}

#mobilites .mobilites-case_object_monitor{
  position: absolute;
  display: block;
  top: calc(400 * var(--size-flex));
  right: calc(207 * var(--size-flex));
  width: calc(144 * var(--size-flex));
  height: calc(144 * var(--size-flex));
  background-image: url(/mobilites/img/object_monitor_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 30;
}
#mobilites .mobilites-is-action.mobilites-case_object_monitor{
  animation-name: case_object_monitor;
  animation-duration: .25s;
  animation-timing-function: steps(1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes case_object_monitor {
  0%{background-image: url(/mobilites/img/object_monitor_002.png)}
  25%{background-image: url(/mobilites/img/object_monitor_003.png)}
  50%{background-image: url(/mobilites/img/object_monitor_004.png)}
  75%{background-image: url(/mobilites/img/object_monitor_005.png)}
  100%{background-image: url(/mobilites/img/object_monitor_005.png)}
}
#mobilites .mobilites-case_object_bubble{
  position: absolute;
  display: block;
  top: calc(900 * var(--size-flex));
  right: calc(144 * var(--size-flex));
  width: calc(180 * var(--size-flex));
  height: calc(144 * var(--size-flex));
  background-image: url(/mobilites/img/object_bubble_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 30;
}
#mobilites .mobilites-is-action.mobilites-case_object_bubble{
  animation-name: case_object_bubble;
  animation-duration: 1.25s;
  animation-timing-function: steps(1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
@keyframes case_object_bubble {
  0%{background-image: url(/mobilites/img/object_bubble_002.png)}
  11.11%{background-image: url(/mobilites/img/object_bubble_003.png)}
  22.22%{background-image: url(/mobilites/img/object_bubble_004.png)}
  33.33%{background-image: url(/mobilites/img/object_bubble_005.png)}
  44.44%{background-image: url(/mobilites/img/object_bubble_006.png)}
  55.56%{background-image: url(/mobilites/img/object_bubble_007.png)}
  66.67%{background-image: url(/mobilites/img/object_bubble_008.png)}
  77.78%{background-image: url(/mobilites/img/object_bubble_009.png)}
  88.89%{background-image: url(/mobilites/img/object_bubble_010.png)}
  100%{background-image: url(/mobilites/img/object_bubble_001.png)}
}

#mobilites .mobilites-object_case_flowers_long{
  position: absolute;
  right: calc(-19 * var(--size-flex));
  bottom: calc(430 * var(--size-flex));
  display: grid;
  grid-template-rows: repeat(auto-fill, calc(75 * var(--size-flex)));
  width: calc(72 * var(--size-flex));
  height: calc(100% - (1760 * var(--size-flex)));
  background-image: url(/mobilites/img/object_flowers_003.png);
  background-size: contain;
  background-position: center top;
  background-repeat: repeat-y;
  z-index: 0;
}
#mobilites .mobilites-object_case_flowers_long::after{
  content: "";
  grid-row-end: -1;
  display: block;
  width: calc(72 * var(--size-flex));
  height: calc(152 * var(--size-flex));
  background-image: url(/mobilites/img/object_flowers_003.png);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: -1;
}


@media screen and (max-width: 768px) {
  #mobilites .mobilites-case{
    padding: calc(23 * var(--size-flex)) 0 calc(232 * var(--size-flex));
    background-image: url(/mobilites/img/bg_brick_001.png);
    background-size: calc(129 * var(--size-flex)) calc(48 * var(--size-flex));
  }
  #mobilites .mobilites-case_main{
    width: calc(263 * var(--size-flex));
    margin: calc(0 * var(--size-flex)) auto calc(0 * var(--size-flex)) calc(5 * var(--size-flex));
  }
  #mobilites .mobilites-case_container{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: calc(1213 * var(--size-flex));
    box-sizing: border-box;
    padding: calc(40 * var(--size-flex)) calc(10 * var(--size-flex));
    border-bottom: calc(6 * var(--size-flex)) solid #000;
  }
  #mobilites .mobilites-case_main:has(.mobilites-case_moreBtn.is-open) .mobilites-case_container{
    max-height: 100%;
  }
  #mobilites .mobilites-case_window{
    width: calc(245 * var(--size-flex));
    margin: 0 0 calc(24 * var(--size-flex));
  }
  #mobilites .mobilites-case_main:has(.mobilites-case_moreBtn.is-open) .mobilites-case_window:nth-child(n+3){
    animation-name: case_container;
    animation-duration: .5s;
    animation-timing-function: steps(1);
    animation-iteration-count: 1;
    animation-play-state: fill;
  }
  @keyframes case_container {
    0%{
      filter: brightness(0) invert(1);
    }
    100%{
      filter: brightness(1) invert(1);
    }
  }
  #mobilites .mobilites-case_anchor{
    position: absolute;
    top: calc(800 * var(--size-flex));
    left: 0;
  }
  #mobilites .mobilites-case_window_inner{
    display: block;
    padding: calc(28 * var(--size-flex)) calc(20 * var(--size-flex));
  }
  #mobilites .mobilites-case_window_company{
    width: 100%;
    margin: auto;
    font-size: calc(14 * var(--size-flex));
    line-height: 1.5;
  }
  #mobilites .mobilites-case_window_ttl{
    width: 100%;
    margin: auto;
    font-size: calc(14 * var(--size-flex));
    line-height: 1.5;
    font-weight: 700;
  }
  #mobilites .mobilites-case_window_date{
    display: block;
    margin: auto;
    font-size: calc(11 * var(--size-flex));
    line-height: 1.5;
    text-align: right;
  }
  #mobilites .mobilites-case_window_txt{
    width: 100%;
    margin: calc(11 * var(--size-flex)) auto 0;
    font-size: calc(12 * var(--size-flex));
    line-height: 1.4;
    text-align: justify;
  }
  #mobilites .mobilites-case_window_img{
    position: relative;
    margin-top: calc(11 * var(--size-flex));
    width: 100%;
    height: auto;
  }
  #mobilites .mobilites-case_window_img img,
  #mobilites .mobilites-case_window_img iframe{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  #mobilites .mobilites-case_caption{
    display: block;
    margin: calc(23 * var(--size-flex)) auto 0;
    font-size: calc(16 * var(--size-flex));
    line-height: 1.5;
    text-align: center;
  }
  #mobilites .mobilites-case_moreBtn{
    display: block;
    margin: calc(21 * var(--size-flex)) auto 0;
    width: calc(159 * var(--size-flex));
    cursor: pointer;
  }
  #mobilites .mobilites-case_moreBtn.is-open{
    opacity: 0;
    pointer-events: none;
  }
  #mobilites .mobilites-case_window_btn{
    display: block;
    width: calc(86 * var(--size-flex));
    margin: calc(12 * var(--size-flex)) 0 0 auto;
  }

  #mobilites .mobilites-case_object_buggy01{
    position: absolute;
    top: calc(10 * var(--size-flex));
    right: calc(45 * var(--size-flex));
    display: block;
    width: calc(96 * var(--size-flex));
    height: calc(96 * var(--size-flex));
    z-index: 30;
    will-change: transform;
  }
  #mobilites .mobilites-case_object_buggy01_img{
    width: 100%;
    height: 100%;
    background-image: url(/mobilites/img/object_buggy_001.png);
    background-size: contain;
    background-repeat: no-repeat;
    animation-name: buggy01;
    animation-duration: 1s;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;
  }
  @keyframes buggy01 {
    0%{background-image: url(/mobilites/img/object_buggy_001.png)}
    25%{background-image: url(/mobilites/img/object_buggy_002.png)}
    50%{background-image: url(/mobilites/img/object_buggy_001.png)}
    75%{background-image: url(/mobilites/img/object_buggy_002.png)}
  }
  #mobilites .mobilites-case_drawArea{
  }
  #mobilites .mobilites-case_drawArea_svg{
  }
  #mobilites .mobilites-case_drawArea_svg path{
    stroke-width: calc(74 * var(--size-flex));
  }
  #mobilites .mobilites-case_drawArea_point01{
    position: absolute;
    top: calc(0 * var(--size-flex));
    right: calc(44 * var(--size-flex));
    width: 0;
    height: 0
  }
  #mobilites .mobilites-case_drawArea_point02{
    position: absolute;
    bottom: calc(172 * var(--size-flex));
    right: calc(44 * var(--size-flex));
    width: 0;
    height: 0
  }
  #mobilites .mobilites-case_drawArea_point03{
    position: absolute;
    bottom: 0;
    right: 50%;
    width: 0;
    height: 0
  }

  /* case object */

  #mobilites .mobilites-object_case_group01{
    position: absolute;
    top: calc(87 * var(--size-flex));
    left: calc(0 * var(--size-flex));
    right: unset;
    width: calc(296 * var(--size-flex));
    height: calc(1223 * var(--size-flex));
    background-image: url(/mobilites/img/object_case_group_sp_001.png);
  }
  #mobilites .mobilites-object_case_group02{
    position: absolute;
    bottom: calc(240 * var(--size-flex));
    right: calc(9 * var(--size-flex));
    width: calc(1352 * var(--size-flex));
    height: calc(178 * var(--size-flex));
    background-image: url(/mobilites/img/object_case_group_sp_002.png);
  }

  #mobilites .mobilites-case_object_monitor{
    top: calc(546 * var(--size-flex));
    right: calc(61 * var(--size-flex));
    width: calc(96 * var(--size-flex));
    height: calc(96 * var(--size-flex));
  }
  #mobilites .mobilites-case_object_bubble{
    position: absolute;
    display: block;
    top: calc(910 * var(--size-flex));
    right: calc(20 * var(--size-flex));
    width: calc(120 * var(--size-flex));
    height: calc(96 * var(--size-flex));
  }
  #mobilites .mobilites-object_case_flowers_long{
    position: absolute;
    right: calc(87 * var(--size-flex));
    bottom: calc(391 * var(--size-flex));
    width: calc(42 * var(--size-flex));
    height: calc(100% - (1760 * var(--size-flex)));
    grid-template-rows: repeat(auto-fill, calc(54 * var(--size-flex)));
  }
  #mobilites .mobilites-object_case_flowers_long::after{
    display: block;
    width: calc(42 * var(--size-flex));
    height: calc(76 * var(--size-flex));
  }
}




/* users
--------------------------------------------------- */

#mobilites .mobilites-users{
  position: relative;
  text-align: center;
  height: 0;
  z-index: 10;
}
#mobilites .mobilites-users_window{
  width: calc(1280 * var(--size-flex));
  margin: 0 auto 0;
  transform: translateY(calc(-182 * var(--size-flex)));
}
#mobilites .mobilites-users_window_inner{
  padding: calc(60 * var(--size-flex)) 0;
  background-color: #fff;
}
#mobilites .mobilites-users_container{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(73 * var(--size-flex));
  overflow: hidden;
  position: relative;
  width: 100%;
}

#mobilites .mobilites-users_container .mobilites-marquee-track{
  display: flex;
  align-items: center;
  animation: marqueeScroll linear infinite;
  white-space: nowrap;
}
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#mobilites .mobilites-users_container:hover .mobilites-marquee-track{
  animation-play-state: paused;
}
#mobilites .mobilites-users_logo{
  width: calc(150 * var(--size-flex));
  height: calc(114 * var(--size-flex));
  margin-right: calc(40 * var(--size-flex));
  flex: 0 0 auto;
}
#mobilites .mobilites-users_logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

@media screen and (max-width: 768px) {
  #mobilites .mobilites-users{
    position: relative;
    text-align: center;
    height: 0;
  }
  #mobilites .mobilites-users_window{
    width: calc(328 * var(--size-flex));
    margin: 0 auto 0;
    transform: translateY(calc(-165 * var(--size-flex)));
  }
  #mobilites .mobilites-users_window_inner{
    padding: calc(30 * var(--size-flex)) 0;
  }
  #mobilites .mobilites-users_container{
    margin-top: calc(48 * var(--size-flex));
  }
  #mobilites .mobilites-users_logo{
    width: calc(101 * var(--size-flex));
    height: calc(90 * var(--size-flex));
    margin-right: calc(40 * var(--size-flex));
    flex: 0 0 auto;
  }
}


/* night
--------------------------------------------------- */
#mobilites .mobilites-night{
  position: relative;
  background-image: url(/mobilites/img/bg_night_001.png);
  background-size: calc(48 * var(--size-flex)) calc(48 * var(--size-flex));
  background-repeat: repeat;
  padding: calc(435 * var(--size-flex)) 0 calc(35 * var(--size-flex));
  z-index: 5;
}
#mobilites .mobilites-night::after{
  content: "";
  position: absolute;
  top: calc(100% - (30 * var(--size-flex)));
  left: 0;
  display: block;
  width: 100%;
  height: calc(48 * var(--size-flex));
  background-image: url(/mobilites/img/bg_night_end_001.png);
  background-size: calc(65 * var(--size-flex)) calc(48 * var(--size-flex));
  background-repeat: repeat;
}



#mobilites .mobilites-night_drawArea{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#mobilites .mobilites-night_drawArea_svg{
  width: 100%;
  height: 100%;
}
#mobilites .mobilites-night_drawArea_svg path:nth-child(1){
  stroke-width: calc(140 * var(--size-flex));
  stroke: #CBCADB;
  fill: none;
}
#mobilites .mobilites-night_drawArea_svg path:nth-child(2){
  stroke-width: calc(76 * var(--size-flex));
  stroke: #CBCADB;
  fill: none;
}
#mobilites .mobilites-night_path_complement01{
  display: none;
}
#mobilites .mobilites-night_drawArea_point01{
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0
}
#mobilites .mobilites-night_drawArea_point02{
  position: absolute;
  top: calc(400 * var(--size-flex));
  left: calc(128 * var(--size-flex));
  width: 0;
  height: 0
}
#mobilites .mobilites-night_drawArea_point03{
  position: absolute;
  top: calc(340 * var(--size-flex));
  left: calc(128 * var(--size-flex));
  width: 0;
  height: 0
}
#mobilites .mobilites-night_drawArea_point04{
  position: absolute;
  bottom: 0;
  left: calc(128 * var(--size-flex));
  width: 0;
  height: 0
}


#mobilites .mobilites-night_object_bicycle01{
  position: absolute;
  top: calc(-165 * var(--size-flex));
  left: 50%;
  display: block;
  width: calc(144 * var(--size-flex));
  height: calc(144 * var(--size-flex));
  z-index: 1;
  will-change: transform;
}
#mobilites .mobilites-night_object_bicycle01_img{
  width: 100%;
  height: 100%;
  background-image: url(/mobilites/img/object_bicycle_001.png);
  background-size: contain;
  background-repeat: no-repeat;
}
#mobilites .mobilites-is-walk > .mobilites-night_object_bicycle01_img{
  animation-name: bicycle01;
  animation-duration: .75s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
@keyframes bicycle01 {
  0%{background-image: url(/mobilites/img/object_bicycle_001.png)}
  25%{background-image: url(/mobilites/img/object_bicycle_002.png)}
  50%{background-image: url(/mobilites/img/object_bicycle_001.png)}
  75%{background-image: url(/mobilites/img/object_bicycle_002.png)}
}


#mobilites .mobilites-night_object_light{
  position: absolute;
  display: block;
  width: calc(144 * var(--size-flex));
  height: calc(180 * var(--size-flex));
  background-image: url(/mobilites/img/object_light_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 30;
}
#mobilites .mobilites-is-action.mobilites-night_object_light{
  animation-name: night_object_light01;
  animation-duration: 1s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
@keyframes night_object_light01 {
  0%{background-image: url(/mobilites/img/object_light_002.png)}
  33%{background-image: url(/mobilites/img/object_light_003.png)}
  66%{background-image: url(/mobilites/img/object_light_004.png)}
}
#mobilites .mobilites-night_object_light-01{
  top: calc(678 * var(--size-flex));
  left: calc(176 * var(--size-flex));
}
#mobilites .mobilites-night_object_light-02{
  top: calc(969 * var(--size-flex));
  left: calc(-35 * var(--size-flex));
}
#mobilites .mobilites-night_object_light-03{
  top: calc(1580 * var(--size-flex));
  left: calc(-35 * var(--size-flex));
}
#mobilites .mobilites-night_object_castle{
  position: absolute;
  top: calc(1328 * var(--size-flex));
  left: calc(129 * var(--size-flex));
  display: block;
  width: calc(324 * var(--size-flex));
  height: calc(252 * var(--size-flex));
  background-image: url(/mobilites/img/object_castle_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}
#mobilites .mobilites-is-action.mobilites-night_object_castle{
  animation-name: night_object_castle01;
  animation-duration: 2s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
@keyframes night_object_castle01 {
  0%{background-image: url(/mobilites/img/object_castle_002.png)}
  10%{background-image: url(/mobilites/img/object_castle_003.png)}
  20%{background-image: url(/mobilites/img/object_castle_004.png)}
  30%{background-image: url(/mobilites/img/object_castle_005.png)}
  40%{background-image: url(/mobilites/img/object_castle_006.png)}
  50%{background-image: url(/mobilites/img/object_castle_007.png)}
  60%{background-image: url(/mobilites/img/object_castle_008.png)}
  70%{background-image: url(/mobilites/img/object_castle_009.png)}
  80%{background-image: url(/mobilites/img/object_castle_010.png)}
  90%{background-image: url(/mobilites/img/object_castle_011.png)}
  100%{background-image: url(/mobilites/img/object_castle_012.png)}
}

#mobilites .mobilites-object_night_group{
  position: absolute;
  top: calc(105 * var(--size-flex));
  left: calc(0 * var(--size-flex));
  width: calc(1647 * var(--size-flex));
  height: calc(1945 * var(--size-flex));
  background-image: url(/mobilites/img/object_night_group_001.png);
  background-size: contain;
  background-repeat: repeat-x;
  z-index: 1;
}
#mobilites .mobilites-object_night_group02{
  display: none;
}
#mobilites .mobilites-night_object_lighthouse{
  position: absolute;
  left: calc(15 * var(--size-flex));
  bottom: calc(47 * var(--size-flex));
  display: block;
  width: calc(51 * var(--size-flex));
  height: calc(144 * var(--size-flex));
  background-image: url(/mobilites/img/object_lighthouse_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

#mobilites .mobilites-object_night_flowers{
  position: absolute;
  right: calc(79 * var(--size-flex));
  bottom: calc(47 * var(--size-flex));
  display: block;
  width: calc(436 * var(--size-flex));
  height: calc(126 * var(--size-flex));
  background-image: url(/mobilites/img/object_flowers_001.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}
#mobilites .mobilites-object_night_flowers_long{
  position: absolute;
  left: calc(212 * var(--size-flex));
  bottom: calc(143 * var(--size-flex));
  display: grid;
  grid-template-rows: repeat(auto-fill, calc(75 * var(--size-flex)));
  width: calc(72 * var(--size-flex));
  height: calc(100% - (2050 * var(--size-flex)));
  background-image: url(/mobilites/img/object_flowers_002.png);
  background-size: 100%;
  background-position: center top;
  background-repeat: repeat-y;
  z-index: 0;
}
#mobilites .mobilites-object_night_flowers_long::after{
  content: "";
  grid-row-end: -1;
  display: block;
  width: calc(72 * var(--size-flex));
  height: calc(152 * var(--size-flex));
  background-image: url(/mobilites/img/object_flowers_002.png);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: -1;
}


@media screen and (max-width: 768px) {
  #mobilites .mobilites-night{
    position: relative;
    background-image: url(/mobilites/img/bg_night_001.png);
    background-size: calc(32 * var(--size-flex)) calc(32 * var(--size-flex));
    padding: calc(435 * var(--size-flex)) 0 calc(65 * var(--size-flex));
  }
  #mobilites .mobilites-night::after{
    top: calc(100% - (22 * var(--size-flex)));
    height: calc(32 * var(--size-flex));
    background-image: url(/mobilites/img/bg_night_end_001.png);
    background-size: calc(43 * var(--size-flex)) calc(32 * var(--size-flex));
    background-repeat: repeat;
  }

  #mobilites .mobilites-night_drawArea{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  #mobilites .mobilites-night_drawArea_svg{
    width: 100%;
    height: 100%;
  }
  #mobilites .mobilites-night_drawArea_svg path:nth-child(1){
    stroke-width: calc(74 * var(--size-flex));
  }
  #mobilites .mobilites-night_drawArea_svg path:nth-child(2){
    stroke-width: calc(36 * var(--size-flex));
  }
  #mobilites .mobilites-night_path_complement01{
    display: block;
    position: absolute;
    width: calc(30 * var(--size-flex));
    height: calc(60 * var(--size-flex));
    top: calc(160 * var(--size-flex));
    left: calc(52 * var(--size-flex));
    background-color: #CBCADB;
    transform: rotate(39deg);
  }
  #mobilites .mobilites-night_drawArea_point01{
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0
  }
  #mobilites .mobilites-night_drawArea_point02{
    position: absolute;
    top: calc(172 * var(--size-flex));
    left: calc(53 * var(--size-flex));
    width: 0;
    height: 0;
  }
  #mobilites .mobilites-night_drawArea_point03{
    position: absolute;
    top: calc(150 * var(--size-flex));
    left: calc(43 * var(--size-flex));
    width: 0;
    height: 0;
  }
  #mobilites .mobilites-night_drawArea_point04{
    position: absolute;
    bottom: 0;
    left: calc(43 * var(--size-flex));
    width: 0;
    height: 0
  }


  #mobilites .mobilites-night_object_bicycle01{
    top: calc(-165 * var(--size-flex));
    left: 50%;
    width: calc(96 * var(--size-flex));
    height: calc(96 * var(--size-flex));
  }
  #mobilites .mobilites-night_object_light{
    width: calc(96 * var(--size-flex));
    height: calc(120 * var(--size-flex));
  }
  #mobilites .mobilites-night_object_light-01{
    top: calc(508 * var(--size-flex));
    left: calc(33 * var(--size-flex));
  }
  #mobilites .mobilites-night_object_light-02{
    top: calc(823 * var(--size-flex));
    left: calc(-41 * var(--size-flex));
  }
  #mobilites .mobilites-night_object_light-03{
    top: calc(1100 * var(--size-flex));
    left: calc(32 * var(--size-flex));
  }
  #mobilites .mobilites-night_object_castle{
    position: absolute;
    top: unset;
    bottom: calc(780 * var(--size-flex));
    left: calc(80 * var(--size-flex));
    display: block;
    width: calc(223* var(--size-flex));
    height: calc(168 * var(--size-flex));
  }
  #mobilites .mobilites-object_night_group{
    position: absolute;
    top: calc(105 * var(--size-flex));
    left: calc(-18 * var(--size-flex));
    width: calc(412 * var(--size-flex));
    height: calc(2030 * var(--size-flex));
    background-image: url(/mobilites/img/object_night_group_sp_001.png);
  }
  #mobilites .mobilites-object_night_group02{
    display: block;
    position: absolute;
    bottom: calc(20 * var(--size-flex));
    right: calc(0 * var(--size-flex));
    width: calc(250 * var(--size-flex));
    height: calc(146 * var(--size-flex));
    background-image: url(/mobilites/img/object_night_group_sp_002.png);
    background-size: contain;
  }
  #mobilites .mobilites-night_object_lighthouse{
    left: calc(-13 * var(--size-flex));
    bottom: calc(25 * var(--size-flex));
    width: calc(34 * var(--size-flex));
    height: calc(96 * var(--size-flex));
    z-index: 1;
  }

  #mobilites .mobilites-object_night_flowers {
    position: absolute;
    left: calc(-19 * var(--size-flex));
    bottom: calc(150 * var(--size-flex));
    display: block;
    width: calc(42 * var(--size-flex));
    height: calc(100% - (2230 * var(--size-flex)));
    background-image: url(/mobilites/img/object_flowers_002.png);
    background-size: contain;
    background-position: center bottom;
    background-repeat: repeat-y;
    z-index: 0;
  }
  #mobilites .mobilites-object_night_flowers_long{
    position: absolute;
    left: calc(-19 * var(--size-flex));
    bottom: calc(140 * var(--size-flex));
    width: calc(42 * var(--size-flex));
    height: calc(100% - (2190 * var(--size-flex)));
    grid-template-rows: repeat(auto-fill, calc(54 * var(--size-flex)));
  }
  #mobilites .mobilites-object_night_flowers_long::after{
    content: "";
    bottom: 100%;
    display: block;
    width: calc(48 * var(--size-flex));
    height: calc(76 * var(--size-flex));
  }


}




/* news
--------------------------------------------------- */

#mobilites .mobilites-news{
  position: relative;
  text-align: center;
}
#mobilites .mobilites-news_window{
  position: relative;
  width: calc(848 * var(--size-flex));
  margin: calc(-100 * var(--size-flex)) auto 0 calc(402 * var(--size-flex));
  z-index: 5;
}
#mobilites .mobilites-news_window_inner{
  padding: calc(60 * var(--size-flex)) 0;
  background-color: #fff;
}
#mobilites .mobilites-news_container{
  width: calc(695 * var(--size-flex));
  margin: calc(40 * var(--size-flex)) auto 0;
}
#mobilites .mobilites-news_box{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: calc(16 * var(--size-flex));
  border-top: 1px solid #000000;
}
#mobilites .mobilites-news_box:not(:first-child){
  margin-top: calc(15 * var(--size-flex));
}
#mobilites .mobilites-news_box:nth-of-type(n+4){
  display: none;
}
#mobilites .mobilites-news_container:has(.mobilites-news_moreBtn.is-open) .mobilites-news_box:nth-of-type(n+4){
  display: flex;
  animation-name: news;
  animation-duration: .5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-play-state: fill;
}
@keyframes news {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
#mobilites .mobilites-news_box_image{
  width: calc(231 * var(--size-flex));
  height: calc(154 * var(--size-flex));
}
#mobilites .mobilites-news_box_image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
#mobilites .mobilites-news_box_main{
  width: calc(427 * var(--size-flex));
}
#mobilites .mobilites-news_box_date{
  font-size: calc(14 * var(--size-flex));
  line-height: 1;
}
#mobilites .mobilites-news_box_ttl{
  margin-top: calc(24 * var(--size-flex));
  font-size: calc(24 * var(--size-flex));
  line-height: 1.5;
}
#mobilites .mobilites-news_box_txt{
  margin-top: calc(16 * var(--size-flex));
  font-size: calc(14 * var(--size-flex));
  line-height: 1.5;
}
#mobilites .mobilites-news_moreBtn{
  display: block;
  margin: calc(21 * var(--size-flex)) auto 0;
  width: calc(159 * var(--size-flex));
  cursor: pointer;
}
#mobilites .mobilites-news_moreBtn.is-open{
  display: none;
}
#mobilites .mobilites-news_moreBtn img{
  width: 100%;
}

@media screen and (max-width: 768px) {
  #mobilites .mobilites-news{
    position: relative;
    text-align: center;
  }
  #mobilites .mobilites-news_window{
    position: relative;
    width: calc(257 * var(--size-flex));
    margin: calc(-160 * var(--size-flex)) auto 0 calc(110 * var(--size-flex));
    z-index: 5;
  }
  #mobilites .mobilites-news_window_inner{
    padding: calc(30 * var(--size-flex)) calc(20 * var(--size-flex));
    background-color: #fff;
  }
  #mobilites .mobilites-news_container{
    width: 100%;
    margin: calc(40 * var(--size-flex)) auto 0;
  }
  #mobilites .mobilites-news_box{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding-top: calc(16 * var(--size-flex));
    border-top: 1px solid #000000;
  }
  #mobilites .mobilites-news_box:not(:first-child){
    margin-top: calc(32 * var(--size-flex));
  }
  #mobilites .mobilites-news_box:nth-of-type(n+4){
    display: none;
  }
  #mobilites .mobilites-news_container:has(.mobilites-news_moreBtn.is-open) .mobilites-news_box:nth-of-type(n+4){
    display: flex;
    animation-name: news;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-play-state: fill;
  }
  @keyframes news {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  #mobilites .mobilites-news_box_image{
    width: 100%;
    height: auto;
  }
  #mobilites .mobilites-news_box_main{
    margin-top: calc(16 * var(--size-flex));
    width: 100%;
  }
  #mobilites .mobilites-news_box_date{
    font-size: calc(12 * var(--size-flex));
    line-height: 1;
  }
  #mobilites .mobilites-news_box_ttl{
    margin-top: calc(8 * var(--size-flex));
    font-size: calc(18 * var(--size-flex));
    line-height: 1.5;
  }
  #mobilites .mobilites-news_box_txt{
    margin-top: calc(8 * var(--size-flex));
    font-size: calc(12 * var(--size-flex));
    line-height: 1.5;
  }
  #mobilites .mobilites-news_moreBtn{
    display: block;
    margin: calc(21 * var(--size-flex)) auto 0;
    width: calc(159 * var(--size-flex));
    cursor: pointer;
  }
}


/* alliance
--------------------------------------------------- */

#mobilites .mobilites-alliance{
  position: relative;
  text-align: center;
  z-index: 5;
}
#mobilites .mobilites-alliance_window{
  position: relative;
  width: calc(718 * var(--size-flex));
  margin: calc(145 * var(--size-flex)) auto 0 calc(420 * var(--size-flex));
  z-index: 5;
}
#mobilites .mobilites-alliance_window_inner{
  padding: calc(60 * var(--size-flex));
  box-sizing: border-box;
  background-color: #fff;
}
#mobilites .mobilites-alliance_container{
  width: auto;
  margin: calc(40 * var(--size-flex)) auto 0;
}
#mobilites .mobilites-alliance_img{
  width: calc(570 * var(--size-flex));
  margin: auto;
}
#mobilites .mobilites-alliance_img img{
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  #mobilites .mobilites-alliance{
    position: relative;
    text-align: center;
    z-index: 5;
  }
  #mobilites .mobilites-alliance_window{
    position: relative;
    width: calc(359 * var(--size-flex));
    margin: calc(184 * var(--size-flex)) auto 0;
    z-index: 5;
  }
  #mobilites .mobilites-alliance_window_inner{
    padding: calc(60 * var(--size-flex)) calc(30 * var(--size-flex));
  }
  #mobilites .mobilites-alliance_container{
    margin: calc(40 * var(--size-flex)) auto 0;
  }
  #mobilites .mobilites-alliance_img{
    width: 100%;
  }

}


/* related
--------------------------------------------------- */

#mobilites .mobilites-related{
  position: relative;
  text-align: center;
  z-index: 5;
}
#mobilites .mobilites-related_window{
  position: relative;
  width: calc(626 * var(--size-flex));
  margin: calc(35 * var(--size-flex)) auto 0 calc(420 * var(--size-flex));
  z-index: 5;
}
#mobilites .mobilites-related_window.mobilites-windowBox::before{
  background-image: url(/mobilites/img/window_col_006.png);
}
#mobilites .mobilites-related_window.mobilites-windowBox::after{
  background-image: url(/mobilites/img/window_col_006.png);
}
#mobilites .mobilites-related_window .mobilites-windowBox_top{
  background-image: url(/mobilites/img/window_row_006.png);
}
#mobilites .mobilites-related_window .mobilites-windowBox_top::before{
  background-image: url(/mobilites/img/window_corner_006.png);
}
#mobilites .mobilites-related_window .mobilites-windowBox_top::after{
  background-image: url(/mobilites/img/window_corner_006.png);
}
#mobilites .mobilites-related_window .mobilites-windowBox_bottom{
  background-image: url(/mobilites/img/window_row_006.png);
}
#mobilites .mobilites-related_window .mobilites-windowBox_bottom::before{
  background-image: url(/mobilites/img/window_corner_006.png);
}
#mobilites .mobilites-related_window .mobilites-windowBox_bottom::after{
  background-image: url(/mobilites/img/window_corner_006.png);
}
#mobilites .mobilites-related_window_inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(40 * var(--size-flex)) calc(40 * var(--size-flex));
  box-sizing: border-box;
  background-color: #fff;
}
#mobilites .mobilites-related_main{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#mobilites .mobilites-related_title{
  display: block;
  margin: 0;
  font-size: calc(18 * var(--size-flex));
  line-height: 1;
}
#mobilites .mobilites-related_link{
  position: relative;
  display: block;
  margin-left: calc(48 * var(--size-flex));
  padding: calc(12 * var(--size-flex)) 0 calc(12 * var(--size-flex)) calc(24 * var(--size-flex));
  font-size: calc(14 * var(--size-flex));
  line-height: 1;
  color: #fff;
}
#mobilites .mobilites-related_link::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: calc(14 * var(--size-flex));
  height: calc(20 * var(--size-flex));
  background-image: url(/mobilites/img/icon_select_001.png);
  filter: brightness(10) invert(1);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#mobilites .mobilites-related_object{
  width: calc(96 * var(--size-flex));
  height: calc(62 * var(--size-flex));
  background-image: url(/mobilites/img/object_cart_inactive_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

@media screen and (max-width: 768px) {
  #mobilites .mobilites-related{
    position: relative;
    text-align: center;
    z-index: 5;
  }
  #mobilites .mobilites-related_window{
    position: relative;
    width: calc(330 * var(--size-flex));
    margin: calc(35 * var(--size-flex)) auto 0 calc(45 * var(--size-flex));
    z-index: 5;
  }
  #mobilites .mobilites-related_window_inner{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: calc(30 * var(--size-flex)) calc(40 * var(--size-flex));
  }
  #mobilites .mobilites-related_main{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  #mobilites .mobilites-related_title{
    font-size: calc(22 * var(--size-flex));
    line-height: 1;
  }
  #mobilites .mobilites-related_link{
    margin-left: 0;
    padding: calc(12 * var(--size-flex)) 0 calc(12 * var(--size-flex)) calc(24 * var(--size-flex));
    font-size: calc(16 * var(--size-flex));
  }
  #mobilites .mobilites-related_link::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: calc(14 * var(--size-flex));
    height: calc(20 * var(--size-flex));
    background-image: url(/mobilites/img/icon_select_001.png);
    filter: brightness(10) invert(1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  #mobilites .mobilites-related_object{
    width: calc(96 * var(--size-flex));
    height: calc(62 * var(--size-flex));
    margin: calc(16 * var(--size-flex)) auto 0;
    background-image: url(/mobilites/img/object_cart_inactive_001.png);
  }
}


/* footer
--------------------------------------------------- */
#mobilites .mobilites-footer{
  position: relative;
  background-image: url(/mobilites/img/bg_sea_001.png);
  background-size: calc(48 * var(--size-flex)) calc(52 * var(--size-flex));
  background-repeat: repeat;
  padding: calc(198 * var(--size-flex)) 0 calc(40 * var(--size-flex));
}

#mobilites .mobilites-footer_nav{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: calc(80 * var(--size-flex)) auto 0;
  width: calc(1290 * var(--size-flex));
}
#mobilites .mobilites-footer_nav_logo{
  display: block;
  width: calc(188 * var(--size-flex));
  margin-right: calc(102 * var(--size-flex));
}
#mobilites .mobilites-footer_nav_logo img{
  width: 100%;
  height: auto;
}
#mobilites .mobilites-footer_nav_link{
  position: relative;
  margin-right: calc(50 * var(--size-flex));
  font-size: calc(14 * var(--size-flex));
  line-height: 1;
}
#mobilites .mobilites-footer_nav_link:hover{
  color: #000;
}
#mobilites .mobilites-footer_nav_link:hover::after{
  content: "";
  position: absolute;
  top: 0;
  right: calc(100% + .5em);
  bottom: 0;
  display: block;
  background-color: #000;
  width: .75em;
  height: .75em;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

#mobilites .mobilites-footer_drawArea{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#mobilites .mobilites-marine_object_marine01{
  position: absolute;
  top: calc(0 * var(--size-flex));
  left: calc(85 * var(--size-flex));
  display: block;
  width: calc(180 * var(--size-flex));
  height: calc(180 * var(--size-flex));
  z-index: 30;
  will-change: transform;
}
#mobilites .mobilites-marine_object_marine01_img{
  width: 100%;
  height: 100%;
  background-image: url(/mobilites/img/object_marine_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  animation-name: night_object_marin01;
  animation-duration: .75s;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
@keyframes night_object_marin01 {
  0%{background-image: url(/mobilites/img/object_marine_001.png)}
  33%{background-image: url(/mobilites/img/object_marine_002.png)}
  66%{background-image: url(/mobilites/img/object_marine_003.png)}
}
#mobilites .mobilites-marine_object_bridge_img{
  position: absolute;
  top: calc(20 * var(--size-flex));
  right: calc(0 * var(--size-flex));
  display: block;
  width: calc(576 * var(--size-flex));
  height: calc(108 * var(--size-flex));
  background-image: url(/mobilites/img/object_bridge_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 30;
  will-change: transform;
}
#mobilites .mobilites-marine_object_nabetsuru_img{
  position: absolute;
  bottom: calc(164 * var(--size-flex));
  right: calc(214 * var(--size-flex));
  display: block;
  width: calc(108 * var(--size-flex));
  height: calc(108 * var(--size-flex));
  background-image: url(/mobilites/img/object_nabetsuru_001.png);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 30;
  will-change: transform;
}

@media screen and (max-width: 768px) {
  #mobilites .mobilites-footer{
    position: relative;
    background-image: url(/mobilites/img/bg_sea_001.png);
    background-size: calc(32 * var(--size-flex)) calc(34 * var(--size-flex));
    padding: calc(150 * var(--size-flex)) 0 calc(40 * var(--size-flex));
  }

  #mobilites .mobilites-footer_nav{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin: calc(160 * var(--size-flex)) auto 0;
    width: 100%;
    padding-left: calc(38 * var(--size-flex));
    box-sizing: border-box;
  }
  #mobilites .mobilites-footer_nav_logo{
    display: block;
    width: calc(273 * var(--size-flex));
    margin-right: calc(102 * var(--size-flex));
  }
  #mobilites .mobilites-footer_nav_logo img{
    width: 100%;
    height: auto;
  }
  #mobilites .mobilites-footer_nav_link{
    position: relative;
    margin-top: calc(23 * var(--size-flex));
    margin-right: 0;
    font-size: calc(14 * var(--size-flex));
    line-height: 1;
  }
  #mobilites .mobilites-footer_nav_link:hover{
    color: #000;
  }
  #mobilites .mobilites-footer_nav_link:hover::after{
    content: "";
    position: absolute;
    top: 0;
    right: calc(100% + .5em);
    bottom: 0;
    display: block;
    background-color: #000;
    width: .75em;
    height: .75em;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  }

  #mobilites .mobilites-footer_drawArea{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  #mobilites .mobilites-marine_object_marine01{
    position: absolute;
    top: calc(0 * var(--size-flex));
    left: calc(85 * var(--size-flex));
    display: block;
    width: calc(120 * var(--size-flex));
    height: calc(120 * var(--size-flex));
    z-index: 30;
    will-change: transform;
  }
  #mobilites .mobilites-marine_object_marine01_img{
    width: 100%;
    height: 100%;
    background-image: url(/mobilites/img/object_marine_001.png);
    background-size: contain;
    background-repeat: no-repeat;
    animation-name: night_object_marin01;
    animation-duration: .75s;
    animation-timing-function: steps(1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  @keyframes night_object_marin01 {
    0%{background-image: url(/mobilites/img/object_marine_001.png)}
    33%{background-image: url(/mobilites/img/object_marine_002.png)}
    66%{background-image: url(/mobilites/img/object_marine_003.png)}
  }
  #mobilites .mobilites-marine_object_bridge_img{
    position: absolute;
    top: calc(5 * var(--size-flex));
    right: calc(-192 * var(--size-flex));
    display: block;
    width: calc(384 * var(--size-flex));
    height: calc(72 * var(--size-flex));
    background-image: url(/mobilites/img/object_bridge_001.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 30;
    will-change: transform;
  }
  #mobilites .mobilites-marine_object_nabetsuru_img{
    position: absolute;
    bottom: calc(341 * var(--size-flex));
    right: calc(49 * var(--size-flex));
    display: block;
    width: calc(72 * var(--size-flex));
    height: calc(72 * var(--size-flex));
    background-image: url(/mobilites/img/object_nabetsuru_001.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 30;
    will-change: transform;
  }
}



/* contact
--------------------------------------------------- */

#mobilites .mobilites-contact{
  position: relative;
  text-align: center;
}
#mobilites .mobilites-contact_btn{
  display: block;
  margin: calc(40 * var(--size-flex)) auto 0;
  width: calc(430 * var(--size-flex));
}
#mobilites .mobilites-contact_btn img{
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  #mobilites .mobilites-contact{
    position: relative;
    text-align: center;
  }
  #mobilites .mobilites-contact_btn{
    display: block;
    margin: calc(26 * var(--size-flex)) auto 0;
    width: calc(324 * var(--size-flex));
  }
  #mobilites .mobilites-contact_btn img{
    width: 100%;
    height: auto;
  }

}