@charset "UTF-8";
/*utf-8を指定------------------------------------------*/
/*============================
mixin
============================*/
/*size*/
@media screen and (min-width: 768px) {
  body {
    color: #333;
    font-size: 14px; }
    body a {
      color: #e4007f; }
    body .search {
      background: #f3f3f3;
      width: 300px;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0; }
      body .search.hidden {
        display: none; }
    body .keyword {
      width: 300px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background: #fff; }
      body .keyword .searchWord {
        width: 260px;
        height: 40px;
        line-height: 40px;
        border: #e5e5e5 solid 1px;
        display: block;
        padding-left: 40px;
        background: #fff no-repeat; }
      body .keyword .searchBtn {
        position: absolute;
        right: 35px;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        background: url(../../img/uqm/search_icon.png) no-repeat;
        width: 20px;
        height: 20px;
        background-size: contain; }
      body .keyword .returnBtn {
        background: url(../../img/uqm/keyword_arrow.png) no-repeat;
        background-size: 11px 19px;
        width: 11px;
        height: 19px;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 35px; }
    body .serchGPS {
      background: url(../../img/uqm/gps_icon.png) #fff no-repeat;
      background-size: 20px 20px;
      background-position-y: center;
      background-position-x: 10px;
      display: block;
      margin: 0 auto;
      margin-top: 20px;
      width: 260px;
      height: 40px;
      border: #e5e5e5 solid 1px;
      padding-left: 38px; }
    body .scl {
      width: 260px;
      margin: 0 auto;
      margin-top: 20px;
      background: #fff; }
      body .scl .prefOpen, body .scl .regionOpen {
        cursor: pointer;
        background: url(../../img/uqm/pref_icon.png) #fff no-repeat;
        background-size: 20px 20px;
        background-position-y: center;
        background-position-x: 10px;
        width: 260px;
        height: 40px;
        line-height: 40px;
        padding-left: 38px;
        border: #e5e5e5 solid 1px;
        border-bottom: none;
        position: relative; }
        body .scl .prefOpen .arrow, body .scl .regionOpen .arrow {
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 15px;
          margin: auto;
          width: 16px;
          height: 9px;
          background: url(../../img/uqm/pref_arrow.png) #fff no-repeat;
          background-size: contain; }
      body .scl .regionOpen {
        border: none;
        border-top: #e5e5e5 solid 1px;
        background: none;
        padding-left: 10px; }
        body .scl .regionOpen.open .arrow {
          transform: rotate(180deg); }
      body .scl #prefList {
        border: #e5e5e5 solid 1px;
        border-top: none;
        overflow-x: hidden;
        overflow-y: scroll;
        transition: .5s height ease-out; }
        body .scl #prefList .regionWrapper:last-of-type {
          border-bottom: #e5e5e5 solid 1px; }
        body .scl #prefList .prefs.hidden {
          height: 0;
          overflow: hidden; }
        body .scl #prefList li {
          width: 100%;
          height: 40px;
          border-top: #e5e5e5 solid 1px; }
          body .scl #prefList li:nth-last-of-type() {
            border: none; }
          body .scl #prefList li a {
            display: inline-block;
            background: url(../../img/uqm/pref_inner_arrow.png) #e5f4fb no-repeat;
            background-size: 4.5px 8px;
            background-position-y: center;
            background-position-x: 230px;
            width: 100%;
            height: 100%;
            line-height: 40px;
            padding-left: 38px; }
      body .scl.open .prefOpen .arrow {
        transform: rotate(180deg); }
      body .scl.close #prefList {
        height: 0 !important; }
    body .mapMode {
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden; }
      body .mapMode .map {
        width: 100%;
        height: 100%;
        overflow: hidden; }
      body .mapMode .UI {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        margin: auto;
        display: flex;
        justify-content: space-between; }
        body .mapMode .UI .keyword {
          background: none;
          cursor: pointer; }
          body .mapMode .UI .keyword input {
            cursor: pointer; }
          body .mapMode .UI .keyword .searchWord {
            background: #fff;
            padding-left: 12px;
            color: #989898; }
        body .mapMode .UI .selectArea {
          display: flex;
          justify-content: flex-end;
          margin-top: 10px;
          width: 350px;
          margin-right: 10px; }
      body .mapMode .timeLine, body .mapMode .dispMode {
        width: 170px;
        height: 40px;
        border-radius: 20px;
        border: #e5e5e5 solid 1px;
        cursor: pointer; }
      body .mapMode .timeLine {
        background: url(../../img/uqm/timeline_icon.png) #fff no-repeat;
        background-size: 21px 21px;
        background-position-y: center;
        background-position-x: 15px;
        padding-left: 40px;
        margin-right: 10px; }
      body .mapMode .dispMode {
        background: url(../../img/uqm/dispmode_icon.png) #fff no-repeat;
        background-size: 21px 21px;
        background-position-y: center;
        background-position-x: 15px;
        padding-left: 40px; }
      body .mapMode .attention {
        cursor: pointer;
        background: url(../../img/uqm/attention_icon.png) #fff no-repeat;
        background-size: 15px 15px;
        background-position-y: center;
        background-position-x: 15px;
        padding-left: 35px;
        width: 100px;
        height: 32px;
        line-height: 32px;
        border-radius: 18px;
        border: #e5e5e5 solid 1px;
        font-size: 12px;
        position: absolute;
        left: 20px;
        bottom: 22px;
        letter-spacing: .1em; }
      body .mapMode .buttons {
        display: flex;
        width: 250px;
        justify-content: flex-end;
        position: absolute;
        right: 70px;
        bottom: 22px; }
        body .mapMode .buttons button {
          cursor: default;
          width: 70px;
          height: 70px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 13px; }
          body .mapMode .buttons button.red {
            background-color: #ffb2b2;
            border: solid 1px #ff0000;
            color: #ff0000; }
          body .mapMode .buttons button.purple2 {
            background-color: #eee0fc;
            border: solid 1px #a245ff;
            color: #a245ff; }
          body .mapMode .buttons button.purple {
            background-color: #dcbaff;
            border: solid 1px #8b19ff;
            color: #8b19ff; }
          body .mapMode .buttons button.orange {
            background-color: #ffe5cd;
            border: solid 1px #ff7d05;
            color: #ff7d05; }
          body .mapMode .buttons button.yellow {
            background-color: #feca9a;
            border: solid 1px #ff7d05;
            color: #ff7d05; }
          body .mapMode .buttons button.uqorange {
            background-color: #fcab5e;
            border: solid 1px #ff5100;
            color: #ff5100; }
          body .mapMode .buttons button p {
            font-size: 14px; }
            body .mapMode .buttons button p span {
              display: inline-block;
              font-size: 10px;
              margin-top: 10px; }
      body .mapMode .mapctrls {
        position: absolute;
        right: 10px;
        bottom: 100px;
        width: 40px;
        height: 100px; }
        body .mapMode .mapctrls .gps {
          position: relative;
          width: 40px;
          margin-bottom: 5px; }
          body .mapMode .mapctrls .gps img {
            width: 100%; }
        body .mapMode .mapctrls .fullscreen {
          position: relative;
          width: 40px; }
          body .mapMode .mapctrls .fullscreen img {
            width: 100%; }
    body .modal {
      width: 100%;
      height: 100vh;
      background: rgba(0, 0, 0, 0.8);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2000; }
      body .modal.hidden {
        display: none; }
      body .modal .modal_close {
        background: url(../../img/uqm/modal_close.png) no-repeat;
        background-size: 25px 25px;
        width: 25px;
        height: 25px;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer; }
      body .modal .modal_scroll {
        width: 100%;
        height: 100%;
        overflow-y: scroll; }
      body .modal .inner {
        width: 700px;
        height: 400px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #f3f3f3;
        padding-bottom: 30px;
        padding-top: 40px; }
        body .modal .inner .ttl {
          font-size: 16px;
          font-weight: bold;
          border-left: solid 4px #e4007f;
          padding-left: 10px;
          width: 585px;
          margin-left: 40px; }
        body .modal .inner .subTtl {
          font-size: 14px;
          width: 585px;
          margin-top: 30px;
          margin-left: 40px;
          padding-top: 30px;
          border-top: solid 2px #e5e5e5; }
        body .modal .inner .speed_icon {
          text-align: center;
          display: inline-block;
          margin-left: 40px;
          margin-bottom: 17px; }
          body .modal .inner .speed_icon .icon {
            display: inline-block;
            background: url(../../img/uqm/speed_icon.png) no-repeat;
            background-size: 24px 14px;
            width: 24px;
            height: 14px;
            margin-bottom: 5px; }
          body .modal .inner .speed_icon p {
            font-size: 12px;
            color: #333; }
        body .modal .inner ul {
          width: 585px;
          margin-left: 40px; }
          body .modal .inner ul li {
            margin-top: 30px;
            font-size: 14px;
            padding-left: 1.3em;
            position: relative; }
            body .modal .inner ul li::before {
              content: "●";
              position: absolute;
              left: 0; }
    body #kddi-areamapApp.win .scl .regionOpen .arrow {
      right: 30px; }
    body #kddi-areamapApp.win .scl #prefList li a {
      background: url(../../img/au/pref_inner_arrow.png) #fdeee6 no-repeat;
      background-size: 4.5px 8px;
      background-position-y: center;
      background-position-x: 215px; } }

/*size*/
@media screen and (max-width: 767px) {
  body {
    color: #333;
    font-size: 4vw; }
    body a {
      color: #e4007f; }
    body #kddi-areamapApp {
      overflow: hidden; }
    body .search {
      background: #f3f3f3;
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0; }
      body .search.hidden {
        display: none; }
    body .keyword {
      width: 100vw;
      height: 16vw;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background: #fff; }
      body .keyword .searchWord {
        width: 94.66667vw;
        height: 10.66667vw;
        line-height: 10.66667vw;
        border: #e5e5e5 solid 1px;
        display: block;
        background: #fff no-repeat;
        padding-left: 11.33333vw; }
      body .keyword .searchBtn {
        position: absolute;
        right: 6.66667vw;
        top: 0;
        bottom: 0;
        margin: auto;
        display: block;
        background: url(../../img/uqm/search_icon.png) no-repeat;
        width: 5.33333vw;
        height: 5.33333vw;
        background-size: contain; }
      body .keyword .returnBtn {
        background: url(../../img/uqm/keyword_arrow.png) no-repeat;
        background-size: 2.8vw 5.2vw;
        width: 2.8vw;
        height: 5.2vw;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 5.33333vw; }
    body .serchGPS {
      background: url(../../img/uqm/gps_icon.png) #fff no-repeat;
      background-size: 5.33333vw 5.33333vw;
      background-position-y: center;
      background-position-x: 4vw;
      display: block;
      margin: 0 auto;
      margin-top: 2.66667vw;
      width: 94.66667vw;
      height: 13.33333vw;
      border: #e5e5e5 solid 1px;
      padding-left: 11.33333vw; }
    body .scl {
      width: 94.66667vw;
      margin: 0 auto;
      margin-top: 2.66667vw;
      background: #fff; }
      body .scl .prefOpen, body .scl .regionOpen {
        background: url(../../img/uqm/pref_icon.png) #fff no-repeat;
        background-size: 5.33333vw 5.33333vw;
        background-position-y: center;
        background-position-x: 4vw;
        width: 94.66667vw;
        height: 13.33333vw;
        line-height: 13.33333vw;
        padding-left: 11.33333vw;
        border: #e5e5e5 solid 1px;
        border-bottom: none;
        position: relative; }
        body .scl .prefOpen .arrow, body .scl .regionOpen .arrow {
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 4.26667vw;
          margin: auto;
          width: 4vw;
          height: 2.13333vw;
          background: url(../../img/uqm/pref_arrow.png) #fff no-repeat;
          background-size: contain; }
      body .scl .regionOpen {
        border: none;
        border-top: #e5e5e5 solid 1px;
        background: none;
        padding-left: 4vw; }
        body .scl .regionOpen.open .arrow {
          transform: rotate(180deg); }
      body .scl #prefList {
        border: #e5e5e5 solid 1px;
        border-top: none;
        overflow-x: hidden;
        overflow-y: scroll;
        transition: .5s height ease-out; }
        body .scl #prefList .regionWrapper:last-of-type {
          border-bottom: #e5e5e5 solid 1px; }
        body .scl #prefList .prefs.hidden {
          height: 0;
          overflow: hidden; }
        body .scl #prefList li {
          width: 100%;
          height: 10.66667vw;
          border-top: #e5e5e5 solid 1px; }
          body .scl #prefList li:nth-last-of-type() {
            border: none; }
          body .scl #prefList li a {
            display: inline-block;
            background: url(../../img/uqm/pref_inner_arrow.png) #e5f4fb no-repeat;
            background-size: 1.2vw 2.13333vw;
            background-position-y: center;
            background-position-x: 87.33333vw;
            width: 100%;
            height: 100%;
            line-height: 10.66667vw;
            padding-left: 12vw; }
      body .scl.open .prefOpen .arrow {
        transform: rotate(180deg); }
      body .scl.close #prefList {
        height: 0 !important; }
    body .mapMode {
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden; }
      body .mapMode .map {
        width: 100%;
        height: 100%;
        overflow: hidden; }
      body .mapMode .UI {
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: auto; }
        body .mapMode .UI .keyword {
          background: none; }
          body .mapMode .UI .keyword .searchWord {
            background: #fff;
            padding-left: 3.33333vw;
            color: #989898; }
        body .mapMode .UI .selectArea {
          display: flex;
          justify-content: flex-end;
          margin: auto;
          margin-top: 2.66667vw;
          width: 94.66667vw; }
      body .mapMode .timeLine, body .mapMode .dispMode {
        width: 46.66667vw;
        height: 7.46667vw;
        border-radius: 3.86667vw;
        border: #e5e5e5 solid 1px;
        font-size: 3.2vw; }
      body .mapMode .timeLine {
        background: url(../../img/uqm/timeline_icon.png) #fff no-repeat;
        background-size: 4.13333vw 4.13333vw;
        background-position-y: center;
        background-position-x: 4vw;
        padding-left: 10.66667vw;
        margin-right: 1.33333vw; }
      body .mapMode .dispMode {
        background: url(../../img/uqm/dispmode_icon.png) #fff no-repeat;
        background-size: 4.13333vw 4.13333vw;
        background-position-y: center;
        background-position-x: 4vw;
        padding-left: 10.66667vw; }
      body .mapMode .attention {
        background: url(../../img/uqm/attention_icon.png) #fff no-repeat;
        background-size: 2.8vw 2.8vw;
        background-position-y: center;
        background-position-x: 2vw;
        padding-left: 5.33333vw;
        width: 18.66667vw;
        height: 7.46667vw;
        line-height: 7.46667vw;
        border-radius: 3.86667vw;
        border: #e5e5e5 solid 1px;
        font-size: 2.4vw;
        position: absolute;
        left: 2.66667vw;
        bottom: 22px;
        letter-spacing: .1em; }
      body .mapMode .buttons {
        display: flex;
        width: 49.33333vw;
        justify-content: flex-end;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: 22px; }
        body .mapMode .buttons button {
          cursor: default;
          width: 14.66667vw;
          height: 14.66667vw;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0;
          margin-left: 1.73333vw; }
          body .mapMode .buttons button.red {
            background-color: #ffb2b2;
            border: solid 1px #ff0000;
            color: #ff0000; }
          body .mapMode .buttons button.purple2 {
            background-color: #eee0fc;
            border: solid 1px #a245ff;
            color: #a245ff; }
          body .mapMode .buttons button.purple {
            background-color: #dcbaff;
            border: solid 1px #8b19ff;
            color: #8b19ff; }
          body .mapMode .buttons button.orange {
            background-color: #ffe5cd;
            border: solid 1px #ff7d05;
            color: #eb5405; }
          body .mapMode .buttons button.yellow {
            background-color: #feca9a;
            border: solid 1px #ff7d05;
            color: #ff7d05; }
          body .mapMode .buttons button.uqorange {
            background-color: #fcab5e;
            border: solid 1px #ff5100;
            color: #ff5100; }
          body .mapMode .buttons button p {
            font-size: 3.2vw; }
            body .mapMode .buttons button p span {
              display: inline-block;
              font-size: 2.4vw;
              margin-top: 1.6vw; }
      body .mapMode .mapctrls {
        position: absolute;
        right: 10px;
        bottom: 100px;
        width: 40px;
        height: 100px; }
        body .mapMode .mapctrls.isIOS {
          height: 60px; }
        body .mapMode .mapctrls .gps {
          position: relative;
          width: 40px;
          margin-bottom: 5px; }
          body .mapMode .mapctrls .gps img {
            width: 100%; }
        body .mapMode .mapctrls .fullscreen {
          position: relative;
          width: 40px; }
          body .mapMode .mapctrls .fullscreen img {
            width: 100%; }
    body .modal {
      width: 100%;
      height: 100vh;
      background: #f3f3f3;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2000;
      overflow-y: scroll;
      padding-bottom: 7.33333vw; }
      body .modal.hidden {
        display: none; }
      body .modal .modal_close {
        background: url(../../img/uqm/modal_close.png) no-repeat;
        background-size: 5.46667vw 5.46667vw;
        width: 5.46667vw;
        height: 5.46667vw;
        position: fixed;
        top: 5.33333vw;
        right: 8vw; }
      body .modal .modal_scroll {
        padding-bottom: 16vw; }
      body .modal .inner {
        width: 84vw;
        margin: auto;
        margin-top: 10.66667vw; }
        body .modal .inner .ttl {
          font-size: 4vw;
          font-weight: bold;
          border-left: solid 1.06667vw #e4007f;
          padding-left: 2.13333vw; }
        body .modal .inner .subTtl {
          font-size: 3.2vw;
          width: 84vw;
          margin-top: 7.33333vw;
          padding-top: 7.33333vw;
          border-top: solid 1px #e5e5e5; }
        body .modal .inner .speed_icon {
          text-align: center;
          display: inline-block;
          margin-bottom: 2.4vw; }
          body .modal .inner .speed_icon .icon {
            display: inline-block;
            background: url(../../img/uqm/speed_icon.png) no-repeat;
            background-size: 6.66667vw 4vw;
            width: 6.66667vw;
            height: 4vw;
            margin-bottom: 1.06667vw; }
          body .modal .inner .speed_icon p {
            font-size: 2.4vw;
            color: #333; }
        body .modal .inner ul li {
          margin-top: 7.33333vw;
          font-size: 3.2vw;
          padding-left: 1.3em;
          position: relative; }
          body .modal .inner ul li::before {
            content: "●";
            position: absolute;
            left: 0; } }