@charset "UTF-8";

a,
a:active,
a:hover,
a:visited {
  color: #157dfb;
}

/* icomoon */

[class^="icon-"],
[class*=" icon-"] {
  font-family: "icomoon";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:after {
  font-weight: normal;
}

.text-icon {
  font-size: 280%;
}

.icon-like:before,
.icon-like-after:after {
  content: "\e60e";
}
.icon-timer:before,
.icon-timer-after:after {
  content: "\e60d";
}
.icon-arrow_bottom:before,
.icon-arrow_bottom-after:after {
  content: "\e60f";
}
.icon-arrow_top:before,
.icon-arrow_top-after:after {
  content: "\e600";
}
.icon-arrow_right:before,
.icon-arrow_right-after:after {
  content: "\e601";
}
.icon-batsu:before,
.icon-batsu-after:after {
  content: "\e602";
}
/*.icon-comment:before,*/
.icon-comment-after:after {
  content: "\e603";
}
.icon-comment {
  top: 80%;
}
.icon-human:before,
.icon-human-after:after {
  content: "\e604";
}
.icon-pencil:before,
.icon-pencil-after:after {
  content: "\e605";
}
.icon-plugs_AC100V_JP:before,
.icon-plugs_AC100V_JP-after:after {
  content: "\e606";
}
.icon-plugs_AC200V_JP:before,
.icon-plugs_AC200V_JP-after:after {
  content: "\e607";
}
.icon-plugs_Chademo:before,
.icon-plugs_Chademo-after:after {
  content: "\e608";
}
.icon-plugs_J1772:before,
.icon-plugs_J1772-after:after {
  content: "\e609";
}
.icon-plugs_TeslaSC:before,
.icon-plugs_TeslaSC-after:after {
  content: "\e613";
}
.icon-plugs_TeslaWC:before,
.icon-plugs_TeslaWC-after:after {
  content: "\e60a";
}
.icon-status_bad:before,
.icon-status_bad-after:after {
  content: "\e60b";
  color: #f66;
}
.icon-status_good:before,
.icon-status_good-after:after {
  content: "\e60c";
  color: #00c262;
}
.icon-like:before,
.icon-like-after:after {
  content: "\e60e";
}
.icon-refresh:before,
.icon-refresh-after:after {
  content: "\e610";
}
a.icon-refresh,
a.icon-refresh-after {
  text-decoration: none;
}
.icon-plugs_TeslaSC_TC:before,
.icon-plugs_TeslaSC_TC-after:after {
  content: "\e611";
}
.icon-arrow_bottom2:before,
.icon-arrow_bottom2-after:after {
  content: "\e612";
}
.icon-plugs_TeslaSC_TC2:before,
.icon-plugs_TeslaSC_TC2-after:after {
  content: "\e613";
}
.icon-gourmet_cup:before,
.icon-gourmet_cup-after:after {
  content: "\e614";
}
.icon-gourmet_cup:before,
.icon-gourmet_cup-after:after {
  content: "\e614";
}
.icon-gourmet_cup_02:before,
.icon-gourmet_cup_02-after:after {
  content: "\e900";
}
.icon-gourmet_restaurant:before,
.icon-gourmet_restaurant-after:after {
  content: "\e615";
}

/* debug panel */
div.debug {
  background-color: yellow;
  border: 1px solid;
  opacity: 0.5;
  padding: 4px;
  position: fixed;
  right: 0px;
  top: 0px;
}
div.brand {
  background-color: blue;
  border: 1px solid;
  opacity: 0.5;
  padding: 4px;
  position: fixed;
  left: 0px;
  top: 0px;
}

/* frame */
body {
  padding: 0;
  /* 	padding-top: 0;
	padding-bottom: 0; */
  font-size: 14pt;
}
.container {
  overflow: hidden;
  padding: 0;
}
.container-fluid {
  padding: 0;
}
#MMC_container {
  background-color: #e50012;
  margin: 0;
  width: 100%;
  text-align: center;
  padding: 10%;
  min-height: 100vh;
}
#MMC_container p {
  font-size: 90%;
}
#MMC_container input {
  background-color: #fff;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0 15px;
}
#MMC_container button {
  background-color: #000;
  color: #fff;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  border: solid #fff 2px;
}
#MMC_container input.ng-invalid.ng-dirty {
  border: black solid 3px;
}
p.mmc_login_error {
  color: #cbfea2;
  padding: 0;
}
input.mmc_login_error {
  border: solid #000 3px;
}
.img-responsive-overwrite {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  html,
  body {
    min-height: 100%;
  }
  html.web > body {
    background: #98dcfc url("/content/img/bg_detail_for-pc.png") repeat-x left
      bottom;
  }
  html.web .container {
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
  }
}

/* web版のページにロゴを表示させる */
.logo {
  width: 100%;
  height: 28px;
  background: url("/Content/img/EVsmart_logo.png") no-repeat center center;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .logo {
    width: 100%;
    height: 56px;
    background: url("/Content/img/EVsmart_logo_retina.png") no-repeat center
      center;
    background-size: contain;
  }
}

/* tag */
h1 {
  margin: 0.5em 0.5em 1em;
  font-size: 120%;
  font-weight: bold;
}
h2,
section h1 {
  margin: 0;
  padding: 0.5em;
  border: 1px #b2b2b2;
  border-style: solid none;
  background: #efeff4;
  color: #2f2f32;
  font-size: 100%;
  font-weight: bold !important;
}

/* refresh-button */
#refresh-button {
  padding: 0.25em;
  border-bottom: 1px solid #999;
  background: #efeff4;
  color: #999;
  text-align: center;
  font-size: 50%;
}
#refresh-button .icon-arrow_bottom2-after:after {
  display: block;
  margin: 0 auto;
  font-size: 200%;
}

/* alert */
#alert {
  position: relative;
  margin: 0.25em;
  padding: 0.5em 1.5em 0.75em 0.75em;
  color: #6d6d72;
  line-height: 150%;
}
#alert.alert {
  border: none;
}
#alert.alert-success {
  background: #efeff4;
  color: #6d6d72;
}
#alert.alert-danger {
  background: #f9f2e5;
  color: #c33;
}
#alert:after {
  display: block;
  position: absolute;
  right: 0.5em;
  top: 0;
  bottom: 0;
  height: 1em;
  line-height: 75%;
  margin: auto 0;
  color: #157dfb;
  font-size: 100%;
}

/* timer */
#timer {
  margin-right: 0;
  margin-bottom: 0.5em;
  margin-left: 0;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #ddd;
}
#timer .gauge {
  padding-top: 0.25em;
  padding-right: 5px;
  padding-left: 10px;
  text-align: center;
  font-size: 65%;
}
#timer .gauge .user-value {
  padding-top: 0.4em;
  line-height: 150%;
  white-space: nowrap;
}
#timer .wait-time {
  padding-right: 0;
  color: #6d6d72;
}
#timer .wait-time.active {
  color: #017237;
}
#timer .progress {
  height: 15px;
  margin-bottom: 0;
  background: #e1e1eb;
}
#timer .progress-bar {
  float: right;
  background: #00c262;
}
#timer .gauge .number {
  margin: 0 0.25em;
  font-size: 167%;
  font-weight: bold;
}
#timer .button {
  padding-right: 10px;
  padding-left: 5px;
}
#timer .btn {
  padding-bottom: 5px;
  color: #fff;
}
#timer .btn-start {
  border-color: #fc4f4f;
  background: #fc4f4f;
}
#timer .btn-disable {
  border-color: #c7c7c9;
  background: #c7c7c9;
}
#timer .btn-stop {
  border-color: #000;
  background: #000;
}
#timer .btn span {
  font-size: 120%;
  line-height: 0.5em;
}
#timer .btn.icon-timer:before,
#timer .btn.icon-timer:before {
  margin-right: 0.25em;
  font-size: 120%;
  vertical-align: -0.15em;
  line-height: 2em;
}

/* status */
#status {
  overflow: hidden;
}
#status ol {
  margin: 0;
  padding: 0;
}
#status li {
  list-style: none;
  float: left;
  margin: 3px 0;
  text-align: center;
  color: #6d6d72;
  font-size: 65%;
  padding: 0 0;
}
#status li.non-state {
  padding-right: 0;
  padding-left: 15px;
  font-size: 85%;
  text-align: left !important;
}
#status img {
  display: block;
  margin: 0 auto 0.5em;
}
#status .to-comment {
  float: right;
  padding-right: 25px;
  margin-left: -16px;
}
#status .date,
#status .to-comment div .txt {
  display: block;
  white-space: pre-line;
  text-align: center;
}
#status .to-comment div a {
  font-size: 65%;
  text-align: center;
  text-decoration: none;
}
#status .fav {
  margin-left: -6px;
  margin-right: -2px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
  min-width: 64px;
}
#status .fav img {
  width: 32px;
  height: 32px;
}
#status .fav .txt {
  font-size: 9pt;
  margin-top: -7px;
  color: #6d6d72;
}
#status span:before,
#status a:before {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 280%;
}
.status.ng-enter {
  transition: 0.2s ease-in-out all;
  -webkit-transform: translate(-100%, 0%);
}
.status.ng-enter.ng-enter-active {
  -webkit-transform: translate(0%, 0%);
}

/* post-buttons */
#post-buttons {
  margin-top: 0.5em;
  margin-bottom: 0.25em;
}
#post-buttons ul {
  padding: 0 10px;
}
#post-buttons li {
  list-style: none;
  font-size: 125%;
}
#post-buttons li:nth-child(odd) {
  padding-right: 5px;
}
#post-buttons li:nth-child(even) {
  padding-left: 5px;
}
#post-buttons .btn-danger {
  border-color: #999;
  background: #efeff4;
  color: #000;
  padding-bottom: 5px;
}
#post-buttons span {
  font-size: 120%;
  line-height: 0.5em;
}
#post-buttons .btn-danger:hover {
  background: #ccc;
}
#post-buttons .btn-success {
  border-color: #00c262;
  background: #00c262;
  color: #fff;
  padding-bottom: 5px;
}
#post-buttons .btn-success:hover {
  border-color: #009933;
  background: #009933;
}
#post-buttons .icon-status_good:before {
  color: #fff;
}
#post-buttons .icon-status_bad:before,
#post-buttons .icon-status_good:before {
  font-size: 120%;
  vertical-align: -0.15em;
  line-height: 2em;
}

/* table */
#spot-info {
  margin: 0.5em 0 1em;
}
#spot-info table {
  table-layout: fixed;
}
table ul {
  margin: 0;
  padding: 0;
}
table th {
  white-space: nowrap;
}
#plugs td {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
#plugs ul {
  list-style: none;
  padding-left: 0;
}
#plugs ul.row > li {
  text-align: left;
}
#plugs ul.row > li:nth-child(odd) {
  padding-right: 5px;
  padding-left: 17px;
}
#plugs ul.row > li:nth-child(even) {
  padding-left: 5px;
  padding-right: 17px;
}
#plugs ul.row > li:nth-child(1n + 3) {
  margin-top: 1em;
}
#plugs ul.row > li:nth-child(2n + 3) {
  clear: left;
}
#plugs ul.row > li > span,
#plugs ul.row > li > .info > span {
  display: block;
}
#plugs ul.row > li .plug-icon:before {
  float: left;
  margin-right: 0.1em;
  text-align: center;
  display: block;
  font-size: 350%;
}
#plugs ul.row > li .info > span {
  font-size: 90%;
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  text-align: right;
  margin-top: 0.125em;
}
#plugs ul.row > li .info .name {
  margin-top: 0.5em;
  margin-bottom: 0;
  font-size: 75%;
  text-align: left;
  white-space: nowrap;
}

#plugs ul.row > li dl {
  clear: left;
  float: right;
  margin-bottom: 0;
  padding: 1em 0.5em 0.25em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  font-size: 90%;
  text-align: right;
}
#plugs ul.row > li dt {
  margin-top: -1.75em;
  margin-left: 1.25em;
  font-size: 90%;
}
#plugs ul.row > li dt span {
  padding: 0 0.25em;
  background: #fff;
}
#plugs ul.row > li li {
  margin: 0;
}
#plugs ul.row > li .status {
  display: inline-block;
  width: 4em;
  text-align: right;
}
#plugs ul.row > li .ng .status {
  display: block;
  width: auto;
  text-align: center;
}
#plugs ul.row > li dl .value {
  display: inline-block;
  width: 3em;
  text-align: right;
}
/*#plugs li.plug-icon:before,
#plugs li.plug-icon .value {
	color:#000;
}*/
#plugs ul.row > li .ok {
  color: #017237;
}
#plugs li.status-ok .plug-icon:before {
  color: #00c262;
}
#plugs ul.row > li .used {
  color: #960;
}
#plugs li.status-used .plug-icon:before {
  color: #c96;
}
#plugs ul.row > li .ng {
  color: #fc4f4f;
}
#plugs li.status-ng .plug-icon:before {
  color: #fc4f4f;
}
#plugs ul.row > li .break,
#plugs ul.row > li .unknown {
  color: #6d6d72;
}
#plugs li.status-break .plug-icon:before {
  color: #ccc;
}
#plugs li[class*=" status-"] .value .status,
#plugs li .number {
  margin-right: 0.25em;
  font-size: 125%;
}
#plugs li[class*=" status-"] .value .number {
  margin-right: 0.1em;
  font-size: 100%;
}
/*#plugs li .name,
#plugs li .watt {
	display:block;
	color:#6d6d72;
	vertical-align:-2.75em;
	margin-left:5.75em;
	white-space:nowrap;
	font-size:90%;
}*/
#plugs .refresh {
  margin-top: 0.25em;
  margin-right: 3px;
  margin-bottom: -0.25em;
  text-align: right;
  color: #999;
}
#plugs .refresh a {
  margin-left: 0.25em;
  font-size: 175%;
  vertical-align: -0.175em;
}
@media (max-width: 400px) {
  #plugs li {
    font-size: 85%;
  }
  #plugs li .value {
    font-size: 90%;
  }
  #plugs li .number {
    font-size: 100%;
  }
}
#to-app-store {
  background: #edece6;
}
#to-app-store td {
  padding: 1.5em 1em 1em;
  color: #000;
}
#to-app-store .to-store {
  margin: 0;
  text-align: center;
}
#opening dl {
  margin: 0;
}
#opening dt {
  float: left;
}
#opening th {
  width: 20%;
  @media (max-width: 450px) {
    width: 90px;
  }
}
#opening dd {
  margin-left: 4em;
}
#postal td {
  font-size: 120%;
}
#postal p {
  margin: 0;
}
#phones th {
  vertical-align: middle;
}
#phones td {
  font-size: 135%;
}
#phones ul,
#phones li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#pricing td {
  overflow-wrap: break-word;
}

/* #posts */
#posts h2:before,
#posts h1:before {
  margin-right: 0.5em;
  color: #999;
  font-size: 130%;
  font-weight: normal !important;
  vertical-align: top;
}
#posts .to-post a {
  display: block;
  margin: 0;
  padding: 1em 0 0.75em;
  color: #157dfb;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}
#posts .to-post a:before {
  vertical-align: -0.1em;
}
#comments,
#no-comment {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #b2b2b2;
}
#no-comment {
  padding: 2em;
  text-align: center;
}
#posts .comment {
  margin: 0;
  padding: 1em 1.5em;
  border-top: 1px solid #b2b2b2;
  color: #2f2f32;
}
#posts #comments .row {
  overflow: hidden;
  /* zoom: 1; */
}
#posts .date,
#posts .user {
  color: #666;
}
#posts .date {
  float: left;
}
#posts .date:before,
#posts .like:before {
  margin-right: 0.25em;
  vertical-align: -0.1em;
}
#posts .user {
  word-break: break-all;
}
#posts .user {
  /*overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;*/
  padding-left: 2em;
  text-align: right;
}
#posts .user:before,
#posts .user span:before {
  color: #999;
}
#posts .text {
  margin: 0.5em 0;
  line-height: 150%;
}
#posts .text-image {
  text-align: center;
}
#posts .text-image img {
  margin: 0 auto;
}
#posts .like {
  text-align: right;
}
#posts .like:before {
  font-size: 1.25em;
}
#posts .my_post:before {
  color: #999;
}
#posts .others_post:before {
  color: #157dfb;
}
#posts .already_liked_post:before {
  color: #555;
}
#posts .to-comment-more a {
  display: block;
  padding: 1em 0 0.75em;
  border-bottom: 1px solid #b2b2b2;
  background: #efeff4;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
#posts .to-comment-more a:after {
  display: block;
  margin: 0.5em 0 0;
}
.spinner-block {
  padding-top: 2em;
  text-align: center;
}
#correct-buttons .lead {
  margin: 2em 1em 0.75em;
  line-height: 200%;
}
#correct-buttons .to-mail a {
  position: relative;
  display: block;
  padding: 0.75em 3em 0.75em 0.6em;
  border: 1px #b2b2b2;
  border-style: solid none;
  border-radius: 0;
  background: #efeff4;
  color: #000;
  font-size: 100%;
  font-weight: bold;
  text-align: left;
}
#correct-buttons .to-mail a:after {
  position: absolute;
  right: 0.5em;
  top: 0.9em;
  color: #666;
  font-size: 90%;
  font-weight: normal;
}

/* post form */
#postform .form-control {
  font-size: 14pt;
  width: 97%;
}
#posttable {
  width: 100vw;
  height: 100vh;
}
tr.fitheight {
  height: 0;
}
#postname {
  background-image: url(/Content/img/human.png);
  background-repeat: no-repeat;
  background-position: 12px center;
  padding: 0px 6px 0px 36px;
}
#posttext {
  min-height: 180px;
  min-height: 60vh;
  height: 100%;
  padding: 6px 12px;
}
#camera-button {
  overflow: hidden;
  position: relative;
}
#camera-file {
  font-size: 50pt;
  position: absolute;
  right: 0;
}
#postimg {
  vertical-align: top;
}
#postimg div {
  padding: 8px 8px 0px 14px;
  text-align: center;
}
#postimg img {
  max-width: 25vw;
  max-height: 100px;
  padding-bottom: 10px;
}
#postbusy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
  opacity: 0.4;
}
#postbusy > div {
  margin-top: 25%;
  text-align: center;
}
#posts .date:before {
  color: #157dfb;
  margin-right: 0.25em;
  vertical-align: -0.1em;
}
/* #rule */
html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#ruler .page-content {
  min-height: 100%;
  height: auto !important;
  height: 160%;
  /* Negative indent footer by it's height */
  margin: 80px auto 0px;
  padding-bottom: 80px;
  padding-top: 0px;
}

#ruler .page-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 0;

  -webkit-overflow-scrolling: touch !important;
  overflow: auto !important;
}

/* Set the fixed height of the footer here */
#ruler .page-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1030;
  margin: 0;
  padding: 0;
  background: #fff;
}
#ruler .push-header {
  height: 160px;
}
#ruler .page-header h1 {
  margin-top: 0.75em;
}
/*#ruler .page-content {
    margin:80px auto 100px;
}*/
#ruler .push-footer,
#ruler .page-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  margin: 0;
  padding: 10px;
  border-top: 1px solid #eee;
  background: #fff;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
  #ruler .page-footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
#ruler p {
  font-size: 14px;
  margin-left: 20px;
  margin-right: 20px;
}
#ruler .page-footer p {
  margin-left: 10px;
  margin-right: 10px;
}
#ruler .rule {
  padding-top: 20px;
  border-top: 1px solid #eee;
}
#ruler .rule p {
  font-size: 14px;
}
#ruler label input {
  margin-right: 0.5em;
}
#ruler h2 {
  margin: 0;
  padding: 0.5em;
  font-size: 100%;
  font-weight: bold !important;
  text-align: center;
  border: 0px #ffffff;
  background: #ffffff;
  color: #000000;
}

#ruler h3 {
  font-size: 90%;
  font-weight: bold !important;
}
#ruler section {
  margin-left: 10px;
  margin-right: 10px;
}

#ruler ol {
  font-size: 14px;
  counter-reset: cnt 0;
}

#ruler ol.list_parentheses {
  padding: 0 0 0 2em;
  margin: 0;
}

#ruler ol.list_parentheses li {
  list-style-type: none;
  list-style-position: outside;
  counter-increment: cnt 1;
}
#ruler ol.list_parentheses li:before {
  content: " ( " counter(cnt) " )  ";
}

#ruler ol.list_number {
  padding: 0 0 0 2em;
  margin: 0;
}
#ruler ol.list_number li {
  list-style-type: none;
  list-style-position: outside;
  counter-increment: cnt 1;
}
#ruler ol.list_number li:before {
  content: counter(cnt) ". ";
}

#ruler ul {
  font-size: 14px;
}

#ruler #announcement-route-search p {
  margin-top: 120px;
  font-size: 16px;
}

#eulaYes {
  float: right;
}
#eulaNo {
  float: left;
}

/* #alarmform */
#alarmform h1 {
  margin-bottom: 0.5em;
  color: #6d6d72;
  font-size: 100%;
}
#alarmform select {
  color: #157dfb;
}
#alarmform p {
  margin: 1em 0.5em;
  color: #999;
}
#alarmform .button {
  margin-top: 2em;
  text-align: center;
}
#alarmform .btn {
  padding-right: 3em;
  padding-left: 3em;
  color: #fff;
  font-size: 20px;
}
#alarmform .btn-start {
  border-color: #fc4f4f;
  background: #fc4f4f;
}

/* History */
.to-history-more a {
  display: block;
  padding: 0.75em 0;
  border: 1px #b2b2b2;
  border-style: solid none;
  background: #efeff4;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.to-history-more.top a {
  background: transparent;
}
.to-history-more a:after {
  margin: 0 0 0 0.5em;
}
#activities h1 {
  margin: 0;
  color: #666;
  font-size: 90%;
}
#activities .to-history-more + section h1 {
  border-top: none !important;
}
#activities li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#activities .histories,
#activities ul,
#activities ol {
  margin: 0;
  padding: 0;
}
#activities .history {
  margin: 0;
  padding: 0.5em 0;
}
#activities .history + .history {
  border-top: 1px solid #b1b1b1;
}
#activities .history .symbol {
  text-align: center;
  font-size: 1.5em;
}
#activities .history .symbol .icon-timer:before {
  color: #00c262;
}
#activities .history .symbol img {
  display: block;
  max-width: 1.5em;
  margin: 0 auto;
}
#activities .history .main p {
  font-size: 110%;
}
#activities .history .sub,
#activities .history .icon-like {
  color: #666;
}
#activities .history .sub {
  font-size: 95%;
}
.histories_sub {
  font-size: 80%;
}

/* 詳細ページの改行 */
.break-line {
  display: none;
}
@media screen and (max-width: 800px) {
  .break-line {
    display: block;
  }
}

/* クルクル回転するアニメーション */
.load {
  width: 32px;
  height: 32px;
  padding: 1px;
  display: inline-block;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite;
  -ms-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* #gourmet-spot
------------------------------------ */
#gourmet-spot {
  margin: 0;
  padding: 0;
}
#gourmet-spot dt {
  font-weight: normal;
}
#gourmet-spot em {
  font-style: normal;
}
#gourmet-spot em.num {
  color: #ff6666;
}
.gourmet-spot-item .itemBlock-moreBtn,
.gourmet-spot-item .itemBlock-closeBtn,
#gourmet-spot a {
  text-decoration: none;
  color: #157dfb;
}

/* clearfix */
.gourmet-spot-item .image .icon-gourmet_cup_02:after,
.gourmet-spot-item .image .icon-gourmet_restaurant:after,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.gourmet-spot-item .image .icon-gourmet_cup_02,
.gourmet-spot-item .image .icon-gourmet_restaurant,
.clearfix {
  display: inline-block;
}

/* .gourmet-spot-lead
------------------------------------ */
.gourmet-spot-lead {
  padding: 0.5em 0.5em 0;
  border-top: solid 1px #b2b2b2;
}
.gourmet-spot-lead p {
  font-size: 110%;
}
.gourmet-spot-lead p.poweredBy {
  font-size: 90%;
  color: #666;
  text-align: right;
}

/* .gourmet-spot-item
------------------------------------ */
#gnavi .gourmet_restaurant a {
  display: block;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
}
.gourmet-spot-item {
  padding: 0.75em 0.5em 0.75em;
  border-top: solid 1px #b2b2b2;
  width: 100%;
}
.gourmet-spot-item dl,
.gourmet-spot-item ul {
  padding: 0;
  margin: 0;
}
.gourmet-spot-item li {
  list-style-type: none;
}

.gourmet_restaurant a {
  text-decoration: none;
  font-size: 130%;
}
.gourmet_restaurant a:active,
.gourmet_restaurant a:hover {
  text-decoration: none;
}
/* .image */
.gourmet-spot-item .image {
  float: left;
  width: 182px;
}
.gourmet-spot-item .image img {
  max-width: 100%;
  border: none;
}
.gourmet-spot-item .image .caption {
  font-size: 70%;
  padding: 5px 0 0;
}
.gourmet-spot-item .image .distance {
  border: solid 1px #ff6666;
  font-size: 74%;
  text-align: center;
  padding: 5px 0 2px;
  margin: 0 0 10px;
  border-radius: 5px / 5px;
}
.gourmet-spot-item .image .distance em {
  display: block;
  font-size: 120%;
}

.gourmet-spot-item .image {
  text-align: center;
}
.gourmet-spot-item .image .icon-gourmet_cup_02,
.gourmet-spot-item .image .icon-gourmet_restaurant {
  font-size: 46pt;
  padding: 20px 0 0;
  color: #e9504e;
}

.gourmet-spot-item .description03 .moreLink {
  margin: 0 auto;
  text-align: center;
}
.gourmet-spot-item .description03 .moreLink span {
  border: solid 1px #999;
  color: #197dfc;
  display: inline-block;
  padding: 10px 10px;
  border-radius: 5px / 5px;
  background: #efeff4;
}

/* .description */
.gourmet-spot-item .description02,
.gourmet-spot-item .description01 {
  margin-left: 200px;
}
.gourmet-spot-item .description li {
  padding-bottom: 13px;
}
.gourmet-spot-item .description li.title {
  font-size: 110%;
  font-weight: bold;
}
.gourmet-spot-item .description li.category {
  font-size: 80%;
}
.gourmet-spot-item .description li.tel {
  font-size: 140%;
}
.gourmet-spot-item .description li.address {
  font-size: 95%;
}
.gourmet-spot-item .description li.holiday,
.gourmet-spot-item .description li.hours {
  font-size: 95%;
}
.gourmet-spot-item .itemBlock-moreBtn,
.gourmet-spot-item .itemBlock-closeBtn {
  text-align: right;
}

/* return
------------------------------------ */
#gourmet-spot .description li.title a,
#gourmet-spot .description li.category a {
  color: #333;
}
#gourmet-spot .image li.distance,
#gourmet-spot .image li.caption {
  color: #666;
}

/* rootNaviBlock
------------------------------------ */

.rootNaviBlock {
  color: #666;
}
.rootNaviBlock * {
  margin: 0;
  padding: 0;
}
.rootNaviUnit {
  display: table;
  width: 100%;
}
.rootNaviBlock em {
  color: #2f2f32;
  font-style: normal;
}

.rootNaviBlock img {
  max-width: 100%;
  border: none;
  vertical-align: bottom;
}
.rootNaviBlock li {
  list-style-type: none;
}

/* col */
.rootNaviBlock .col {
  display: table-cell;
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.3;
}
.rootNaviBlock .colw10 {
  width: 10%;
}
.rootNaviBlock .colw13 {
  width: 13%;
}
.rootNaviBlock .colw15 {
  width: 15%;
}
.rootNaviBlock .colw20 {
  width: 20%;
}
.rootNaviBlock .colw21 {
  width: 21%;
}
.rootNaviBlock .colw30 {
  width: 30%;
}
.rootNaviBlock .colw33 {
  width: 33%;
}
.rootNaviBlock .colw35 {
  width: 35%;
}
.rootNaviBlock .colw40 {
  width: 40%;
}
.rootNaviBlock .colw50 {
  width: 50%;
}
.rootNaviBlock .colw60 {
  width: 60%;
}
.rootNaviBlock .colw65 {
  width: 65%;
}
.rootNaviBlock .colw67 {
  width: 67%;
}
.rootNaviBlock .colw70 {
  width: 70%;
}
.rootNaviBlock .colw79 {
  width: 79%;
}
.rootNaviBlock .colw80 {
  width: 80%;
}
.rootNaviBlock .colw85 {
  width: 85%;
}
.rootNaviBlock .colw90 {
  width: 90%;
}
.rootNaviBlock .colw100 {
  width: 100%;
}
.rootNaviBlock .alignC {
  text-align: center;
}
.rootNaviBlock .alignL {
  text-align: left;
}
.rootNaviBlock .alignR {
  text-align: right;
}

.rootNaviBlock .colw21 {
  width: 87px;
  max-width: 87px;
}
.rootNaviBlock .colw79 {
  width: auto;
}

/* bg color */
.rootNaviBlock .spotSA .col,
.rootNaviBlock .spotIC .col,
.rootNaviBlock .end .col,
.rootNaviBlock .start .col {
  background-color: #efeff4;
}
.rootNaviBlock .colw40,
.rootNaviBlock .colw79 {
  padding-left: 32px;
  background-image: url(/Content/img/routenavi/line-02.png);
  background-position: 0 0;
  background-repeat: repeat-y;
}

/* start */
.rootNaviBlock .start .col {
  padding-top: 19px;
  padding-bottom: 19px;
}
.rootNaviBlock .start .colw79 {
  background-image: url(/Content/img/routenavi/routenavi-01.png),
    url(/Content/img/routenavi/line-05.png);
  background-position: 0 center, 0 center;
  background-repeat: no-repeat, repeat-y;
}
.rootNaviBlock .end .colw79 em,
.rootNaviBlock .start .colw79 em {
  font-size: 18px;
}

/* end */
.rootNaviBlock .end .col {
  padding-top: 10px;
  padding-bottom: 10px;
}

.rootNaviBlock .end .colw79 {
  background-image: url(/Content/img/routenavi/routenavi-05.png),
    url(/Content/img/routenavi/line-06.png);
  background-position: 0 center, 0 center;
  background-repeat: no-repeat, repeat-y;
}

/* local */
.rootNaviBlock .local .col {
  padding-top: 13px;
  padding-bottom: 8px;
}
.rootNaviBlock .colw79 a.map {
  float: right;
  text-decoration: none;
  color: #157dfb;
}
.rootNaviBlock .local .colw79 {
  padding-left: 32px;
  background-image: url(/Content/img/routenavi/line-02.png);
  background-position: 0 0;
  background-repeat: repeat-y;
}

/* expy */
.expy .colw79 {
  background-image: url(/Content/img/routenavi/line-01.png);
}
.rootNaviBlock .expy-start .colw79 {
  background-image: url(/Content/img/routenavi/routenavi-03.png),
    url(/Content/img/routenavi/line-03.png);
  background-position: 0 center, 0 center;
  background-repeat: no-repeat, repeat-y;
}
.rootNaviBlock .expy-end .colw79 {
  background-image: url(/Content/img/routenavi/routenavi-03.png),
    url(/Content/img/routenavi/line-04.png);
  background-position: 0 center, 0 center;
  background-repeat: no-repeat, repeat-y;
}

/* expy .spotIC */
.rootNaviBlock .spotIC .colw79 {
  font-size: 20px;
  color: red;
  padding-top: 14px;
  padding-bottom: 10px;
}

/* expy .spot */
.rootNaviBlock .spot ul {
  padding-top: 3px;
  padding-bottom: 3px;
}
.rootNaviBlock .spot li {
  padding-top: 6px;
  padding-bottom: 6px;
}

.rootNaviBlock .ic {
  background: url(/Content/img/routenavi/routenavi-04.png) 15px center no-repeat;
  padding-left: 45px;
  margin-left: -45px;
}

.rootNaviBlock .ic span {
  position: relative;
  background: #edf7dc;
  color: #009966;
  margin-left: 7px;
  padding: 2px 16px 2px 6px;
}
.rootNaviBlock .ic span:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #edf7dc;
  border-width: 14px;
  margin-top: -15px;
}

/* expy .spotSA */
.rootNaviBlock .spotSA .colw13 {
  width: 56px;
  vertical-align: bottom;
}
.rootNaviBlock .spotSA .colw13 img {
  padding: 3px 0 7px 5px;

  float: right;

  width: 43.5px;
  height: 57px;
}
.rootNaviBlock .spotSA .colw13.pin2f1 img,
.rootNaviBlock .spotSA .colw13.pin2f2 img,
.rootNaviBlock .spotSA .colw13.pin2f3 img,
.rootNaviBlock .spotSA .colw13.pin2m1 img,
.rootNaviBlock .spotSA .colw13.pin2m2 img,
.rootNaviBlock .spotSA .colw13.pin2m3 img,
.rootNaviBlock .spotSA .colw13.pin2n1 img,
.rootNaviBlock .spotSA .colw13.pin2n2 img,
.rootNaviBlock .spotSA .colw13.pin2n3 img,
.rootNaviBlock .spotSA .colw13.pin2s1 img,
.rootNaviBlock .spotSA .colw13.pin2s2 img,
.rootNaviBlock .spotSA .colw13.pin2s3 img,
.rootNaviBlock .spotSA .colw13.pin201 img,
.rootNaviBlock .spotSA .colw13.pin202 img,
.rootNaviBlock .spotSA .colw13.pin203 img {
  width: 47.9px;
  height: 61px;
}
.rootNaviBlock .spotSA .colw67 {
  width: auto;
}
.rootNaviBlock .spotSA .colw67 span {
  padding-left: 13px;
  display: block;
}
.rootNaviBlock .spotSA .colw67 span em {
  font-size: 20px;
}
.rootNaviBlock .spotSA .colw10 {
  width: 43px;
}

/* expy .spotSAcut */
.rootNaviBlock .spotSAcut .colw79 {
  background-image: url(/Content/img/routenavi/routenavi-06.png),
    url(/Content/img/routenavi/line-01.png),
    url(/Content/img/routenavi/routenavi-07-bg.png);
  background-position: 0 center, 0 center, 0 center;
  background-repeat: no-repeat, repeat-y, repeat-x;
  height: 61px;
}
.rootNaviBlock .spotSAcut .colMoreBtn {
  position: absolute;
  right: 0;
  top: 4px;
  background-color: #fff;
  padding-right: 5px;
}

/* expy .spotSAcut */
.rootNaviBlock .spotSAcutOnFreeWay .colw79 {
  background-image: url(/Content/img/routenavi/routenavi-06.png),
    url(/Content/img/routenavi/line-02.png),
    url(/Content/img/routenavi/routenavi-07-bg.png);
  background-position: 0 center, 0px 0, 0 center;
  background-repeat: no-repeat, repeat-y, repeat-x;
  height: 61px;
}
.rootNaviBlock .spotSAcutOnFreeWay .colMoreBtn {
  position: absolute;
  right: 0;
  top: 4px;
  background-color: #fff;
  padding-right: 5px;
}

/* search */
.rootNaviBlock .search-end span,
.rootNaviBlock .search-start span {
  display: block;
  padding: 21px 10px 18px 71px;
  font-size: 20px;
}
.rootNaviBlock .search-end span em.blank,
.rootNaviBlock .search-start span em.blank {
  color: #888888;
}
.rootNaviBlock .search-start span {
  border-top: solid 26px #efeff4;
  background: url(/Content/img/routenavi/routenavi-01.png) 27px center no-repeat;
}
.rootNaviBlock .search .search-end {
  border-bottom: solid 26px #efeff4;
  background: url(/Content/img/routenavi/routenavi-05.png) 27px center no-repeat;
}

.rootNaviBlock .search .search-select {
  background: #efeff4;
}

.rootNaviBlock .selectBtn {
  padding: 13px;
}

.rootNaviBlock .search .search-btn button {
  background: #fc4f4f;
  color: #fff;
  font-size: 22px;
  padding: 13px 76px;
  border-radius: 7px;
  border: solid transparent;
  margin-top: 16px;
}

/* mediaQuery
------------------------------------ */

/* max-width: 500px iPhone6 Plus, 6s Plus */
@media screen and (max-width: 500px) {
  .gourmet-spot-item .image {
    /*width: 152px;*/
    width: 40%;
    max-width: 152px;
    margin-bottom: 25px;
  }
  .gourmet-spot-item .description01 {
    /*margin-left:170px;*/
    margin-left: 45%;
  }
  .gourmet-spot-item .description02 {
    margin-left: 0;
    clear: both;
  }
  .distance {
    font-size: 100%;
  }
}

/* max-width: 400px iPhone5, 5s, 5c, 6, 6s */
/*@media screen and (max-width: 400px){*/
@media screen and (max-width: 300px) {
  .gourmet-spot-item .image {
    width: 100%;
    text-align: center;
  }
  .gourmet-spot-item .image img {
    width: 182px;
  }
  .gourmet-spot-item .description01 {
    margin-left: 0;
    clear: both;
  }
  .gourmet-spot-item .description02 {
  }
  .gourmet-spot-item .image .distance {
    padding: 0 0 10px;
  }
  .gourmet-spot-item .image .distance em {
    display: inline;
    padding-left: 3px;
  }
}

@media screen and (min-width: 700px) {
  .rootNaviBlock {
    /* width: 640px; */
    margin: 0 auto;
  }
}

.myplace {
  padding: 44px 0px 0px 0px;
}
.myplace.edit {
  padding-bottom: 44px;
}
.myplace .header {
  display: table;
  table-layout: fixed;
  width: 100%;
  position: fixed !important;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 44px;
  background-color: #ffffff;
  z-index: 1000;
}
.myplace .header .tab {
  display: table-cell;
  text-align: center;
  text-overflow: ellipsis;
  font-size: 10.5pt;
  padding: 10px 0px 10px 0px;
}
.myplace .header .tab.selected {
  color: #2f2f32;
  border-top-color: #1d1e25;
  border-top-style: solid;
  border-top-width: 3px;
}
.myplace .header .tab:not(.selected) {
  color: #666666;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1px;
}
.myplace .header .tab:first-child {
  border-left-style: none;
}
.myplace .header .tab:last-child {
  border-right-style: none;
}
.myplace .fav-list {
  background-color: #dddddd;
}
.myplace .fav-list .fav-item {
  display: table;
  border-bottom-color: #cccccc;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: #ffffff;
  width: 100%;
  max-width: 100%;
}
.myplace .fav-list .fav-item .column {
  display: table-cell;
}
.myplace .fav-list .fav-item .check {
  width: 42px;
  padding-left: 8px;
  padding-top: 17px;
}
.myplace .fav-list .fav-item .check img {
  width: 30px;
  height: 30px;
  padding: 4px 4px 4px 4px;
}
.myplace .fav-list .fav-item .pin {
  width: 56px;
  height: 60px;
  vertical-align: bottom;
}
.myplace .fav-list .fav-item .pin div {
  padding-right: 4px;
  float: right;

  overflow-y: hidden;

  height: 43.4px;
  max-height: 43.4px;
  margin-bottom: 11px;
}
.myplace .fav-list .fav-item .pin img {
  margin-bottom: -16px;

  width: 43.5px;
  height: 57px;
}
.myplace .fav-list .fav-item .pin div.pin2f1,
.myplace .fav-list .fav-item .pin div.pin2f2,
.myplace .fav-list .fav-item .pin div.pin2f3,
.myplace .fav-list .fav-item .pin div.pin2m1,
.myplace .fav-list .fav-item .pin div.pin2m2,
.myplace .fav-list .fav-item .pin div.pin2m3,
.myplace .fav-list .fav-item .pin div.pin2n1,
.myplace .fav-list .fav-item .pin div.pin2n2,
.myplace .fav-list .fav-item .pin div.pin2n3,
.myplace .fav-list .fav-item .pin div.pin2s1,
.myplace .fav-list .fav-item .pin div.pin2s2,
.myplace .fav-list .fav-item .pin div.pin2s3,
.myplace .fav-list .fav-item .pin div.pin201,
.myplace .fav-list .fav-item .pin div.pin202,
.myplace .fav-list .fav-item .pin div.pin203 {
  height: 47.1px;
  max-height: 47.1px;
  margin-bottom: 11px;
}
.myplace .fav-list .fav-item .pin div.pin2f1 img,
.myplace .fav-list .fav-item .pin div.pin2f2 img,
.myplace .fav-list .fav-item .pin div.pin2f3 img,
.myplace .fav-list .fav-item .pin div.pin2m1 img,
.myplace .fav-list .fav-item .pin div.pin2m2 img,
.myplace .fav-list .fav-item .pin div.pin2m3 img,
.myplace .fav-list .fav-item .pin div.pin2n1 img,
.myplace .fav-list .fav-item .pin div.pin2n2 img,
.myplace .fav-list .fav-item .pin div.pin2n3 img,
.myplace .fav-list .fav-item .pin div.pin2s1 img,
.myplace .fav-list .fav-item .pin div.pin2s2 img,
.myplace .fav-list .fav-item .pin div.pin2s3 img,
.myplace .fav-list .fav-item .pin div.pin201 img,
.myplace .fav-list .fav-item .pin div.pin202 img,
.myplace .fav-list .fav-item .pin div.pin203 img {
  width: 47.9px;
  height: 61px;
}
.myplace .fav-list .fav-item .body {
  vertical-align: top;
  padding-top: 8px;
}
.myplace .fav-list .fav-item .body .title {
  padding-top: 4px;
  height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12pt;
}
.myplace .fav-list .fav-item .body .title .text {
  float: left;
  z-index: 0;
  color: #0082f4;
}
.myplace .fav-list .fav-item .body .title .fade-out {
  float: right;
  z-index: 100;
  height: 22px;
  margin-left: -56px;
  width: 56px;
  background: -prefix-linear-gradient(
    left,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
}
.myplace .fav-list .fav-item .body .availablity {
  padding-top: 1px;
  font-size: 10pt;
}
.myplace .fav-list .fav-item .body .availablity .status {
  margin-right: 8px;
}
.myplace .fav-list .fav-item .body .availablity .status-ok {
  color: #00c262;
}
.myplace .fav-list .fav-item .body .availablity .status-used {
  color: #cc9966;
}
.myplace .fav-list .fav-item .body .availablity .status-ng {
  color: #fc4f4f;
}
.myplace .fav-list .fav-item .body .availablity .status-break,
.myplace .fav-list .fav-item .body .availablity .status-sutsidehours {
  color: #999999;
}
.myplace .fav-list .fav-item .distance {
  text-align: right;
  font-size: 11.5pt;
}
.myplace .fav-list .fav-item .separator {
  width: 5px;
  padding: 18px 0px 17px 4px;
}
.myplace.edit .fav-list .fav-item .separator {
  padding: 17px 0px 17px 0px;
}
.myplace .fav-list .fav-item .separator img {
  width: 1px;
  height: 25px;
}
.myplace.edit .fav-list .fav-item .separator img {
  visibility: hidden;
}
.myplace .fav-list .fav-item .map {
  width: 38px;
  text-align: center;
  font-size: 9.5pt;
}
.myplace .fav-list .fav-item .gt {
  width: 11px;
  padding: 0px 3px 0px 0px;
}
.myplace .fav-list .fav-item .gt img {
  width: 8px;
  height: 13px;
}
.myplace.edit .fav-list .fav-item .handle {
  width: 34px;
  padding: 0px 8px 0px 5px;
  vertical-align: bottom;
}
.myplace.edit .fav-list .fav-item .handle img {
  width: 22px;
  height: 22px;
  float: right;
  margin-bottom: 20px;
}
.myplace .fav-no-item {
  text-align: left;
  padding: 24px;
}
.myplace .fav-loading {
  text-align: center;
  padding: 48px;
}
.myplace .footer {
  border-top-width: 1px;
  border-top-color: #b2b2b2;
  border-top-style: solid;
  padding: 0px;
  margin: 0px;
  width: 100%;
  position: fixed !important;
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 44px;
  background-color: #efeff4;
  font-size: 13.5pt;
}
.myplace .footer span {
  color: #0082f4;
  padding: 11px 8px 10px 8px;
}
.myplace .footer span:first-child {
  float: left;
}
.myplace .footer span:last-child {
  float: right;
}

.enechange-link_wrap {
  position: relative;
  height: 39px;
  margin-left: 1px;
}
.enechange-link:after {
  content: "";
  position: absolute;
  right: 11px;
  top: 17px;
  display: block;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent #3478f5;
  padding-right: 10px;
}
.enechange-link_img_base {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 7px;
  /* serviceColor/serviceColorAccent */
  background: #c60d31;
  border-radius: 8px;
}
.enechange-link_img {
  /* Vector */
  position: absolute;
  left: 13.64%;
  right: 13.64%;
  top: 25.49%;
  bottom: 25.59%;
}
.enechange-link_text {
  /* エネチェンジアプリで充電 */
  position: absolute;
  width: 144px;
  height: 16px;
  left: 40px;
  top: 16px;
  font-family: "Hiragino Kaku Gothic Pro";
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  /* identical to box height, or 133% */
  color: #333333;
}

.evene-integration-link_wrap {
  position: relative;
  height: 90px;
  margin-left: 0px;
  background-color: #98dcfc;
}
.evene-integration-link:after {
  content: "";
  position: absolute;
  right: 0px;
  top: 40px;
  display: block;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent #3478f5;
  padding-right: 6px;
}
.evene-integration-link_text {
  /* EVアプリ統合のお知らせリンク */
  position: absolute;
  width: 400px;
  height: 48px;
  left: 40px;
  top: 16px;
  font-family: "Hiragino Kaku Gothic Pro";
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  /* identical to box height, or 133% */
  color: #333333;
}

.ecoq-guest-block h1 {
  margin: 0;
}
.ecoq-guest-block p {
  margin: 0;
}
.ecoq-guest-block ul {
  padding: 0;
  margin: 0;
}
.ecoq-guest-block li {
  list-style: none;
}
.ecoq-guest-block a {
  text-decoration: none;
  color: #000000;
}

.ttl-ecoq {
  padding: 40px 0;
  text-align: center;
}
.ttl-ecoq img {
  width: 132px;
  height: 36px;
}

.ecoq-guest-link-desc_wrap {
  position: relative;
  margin-left: 1px;
}
.ecoq-guest-link-desc:after {
  content: "";
  position: absolute;
  right: 11px;
  top: calc(50% - 6px);
  display: block;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent #3478f5;
  margin-top: -28px;
  padding-right: 10px;
}
.ecoq-guest-link-desc_linkimg {
  height: 25px;
  margin-bottom: 5px;
}
.ecoq-guest-block {
  padding: 0 10px;
  box-sizing: border-box;
}
.ecoq-guest-block .ecoq-guest-ttl {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 25px;
}
.ecoq-guest-block .ecoq-guest-item {
  margin-bottom: 15px;
}
.ecoq-guest-block .ecoq-guest-link {
  position: relative;
  display: block;
  padding: 15px 30px 10px 15px;
  box-sizing: border-box;
  border: #dcdcdc solid 1px;
}
.ecoq-guest-block .ecoq-guest-link.rapid {
  border-left: #f3d765 solid 4px;
}
.ecoq-guest-block .ecoq-guest-link.normal {
  border-left: #57bf6c solid 4px;
}
.ecoq-guest-block .ecoq-guest-link:after {
  content: "";
  position: absolute;
  right: 11px;
  top: calc(50% - 6px);
  display: block;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent #3478f5;
}
.ecoq-guest-block .ecoq-guest-number {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.ecoq-guest-block .ecoq-guest-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ecoq-guest-block .ecoq-guest-service-type {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 5px;
}
.ecoq-guest-block .ecoq-guest-service-type span {
  margin-right: 5px;
}
.ecoq-guest-block .ecoq-guest-service-type span img {
  width: 22px;
  height: 22px;
  vertical-align: bottom;
}
.ecoq-guest-block .ecoq-guest-service-availability {
  font-size: 16px;
  font-weight: bold;
}
.ecoq-guest-block .ecoq-guest-service-availability span {
  font-weight: bold;
}
.ecoq-guest-block .ecoq-guest-service-availability .empty {
  color: #57bf6c;
}
.ecoq-guest-block .ecoq-guest-service-availability .full {
  color: #fc4f4f;
}
.ecoq-guest-block .ecoq-guest-price {
  display: block;
  font-size: 16px;
  text-align: right;
  margin-bottom: 5px;
}
.ecoq-guest-block .ecoq-guest-price-extension {
  display: block;
  font-size: 16px;
  text-align: right;
}

/* details.html vw-attention */
#vw-attention {
  padding: 8px;
  border-top: 1px solid #ddd;
}

/* 20180307 MMC details.html */

p.latest {
  /*margin-top: 0.25em; margin-right: 25px;*/
  margin-bottom: -0.25em;
  text-align: right;
  color: #999; /*padding-top: 0.5em;*/
  clear: both;
  font-size: 12px;
}
p.latest span {
}

ul.charger {
}
ul.charger > li {
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 10px;
  clear: both;
}
ul.charger > li:last-child {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

ul.charger > li .info ul {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

ul.charger > li div.info ul li.icon {
  margin-right: 10px;
  padding-left: 10px;
}
ul.charger > li .info ul li.icon .plug-icon:before {
  float: left;
  text-align: center;
  display: block;
  font-size: 54px;
}
ul.charger > li .info ul li.icon.stop .plug-icon:before {
  color: #a6a6a6;
}
ul.charger > li .info ul li.icon.aki .plug-icon:before {
  color: #00c262;
}
ul.charger > li .info ul li.icon.congestion .plug-icon:before {
  color: #ffb613;
}

ul.charger > li .info ul li.icon.full .plug-icon:before {
  color: #ff5353;
}

ul.charger > li .info ul li.name {
  font-size: 16px !important;
}
ul.charger > li .info ul li.name span.plug-count {
  font-weight: bold;
  margin: 0 0.5rem;
  font-size: 1.2em;
}

ul.charger > li .detail {
  clear: both;
  margin: 0px 0;
  width: 100%;
  box-sizing: border-box;
}
/* 
ul.charger > li .detail dl{clear: both; font-size: 14px; padding: 5px 0px 5px 1px; }
 */
ul.charger > li .detail dl {
  clear: both;
  font-size: 14px;
  padding: 0.8em 0em 0em 0.1em;
  margin-bottom: 2em;
}

ul.charger > li .detail dt {
  float: left;
  clear: left;
  width: auto;
  font-weight: normal;
  margin-left: 0.2em;
}
/* ul.charger > li .detail dt span.unit {width:74px; display: inline-block; text-align: center; font-weight: bold; padding-left: 18px; color:#333; font-size: 14px; } */
ul.charger > li .detail dt span.unit {
  width: 56px;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  padding-left: 4px;
  color: #333;
  font-size: 16px;
}
ul.charger > li .detail dt span.availability {
  width: 4em;
  display: inline-block;
  text-align: center;
  background: #999;
  color: #fff;
  border-radius: 12px;
  padding: 0 0.5em;
}
ul.charger > li .detail dl.aki dt {
  color: #00c262;
}
ul.charger > li .detail dl.use dt {
  color: #ff5353;
}
/*
ul.charger > li .detail dl.dormant dt {
  color: ;
}
*/
ul.charger > li .detail dl.aki dt span.availability {
  background-color: #00c262;
}
ul.charger > li .detail dl.use dt span.availability {
  background-color: #ff5353;
}
/*
ul.charger > li .detail dl.dormant dt span.availability {
  background-color: ;
}
*/
/* 
ul.charger > li .detail dd{float:left; margin-left:10px; font-size: 0.9em; margin-top: 0em; }
 */
ul.charger > li .detail dd {
  float: left;
  margin-left: 0.1em;
  font-size: 0.8em;
  margin-top: 0.3em;
  margin-right: 0.7em;
}

.icon-mmc {
  background: url(../static/images/ICON_mmc.png) no-repeat left center;
  background-size: 18px;
  padding-left: 24px;
}
.icon-evsmart {
  background: url(../static/images/ICON_evsmart.png) no-repeat left center;
  background-size: 18px;
  padding-left: 24px;
}

/* MMC 普通充電器満空情報 */
ul.charger > li .mankuinfo dl {
  clear: left;
  float: left;
  margin-top: 1.3em;
  margin-bottom: 0;
  padding: 1em 0.5em 0.25em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  font-size: 90%;
  text-align: right;
  margin-left: 74px;
}
ul.charger > li .mankuinfo dt {
  margin-top: -1.75em;
  margin-left: -1.25em;
  font-size: 90%;
}
ul.charger > li .mankuinfo dt span {
  padding: 0 0.25em;
  background: #fff;
}
ul.charger > li .mankuinfo dl .status {
  display: inline-block;
  width: 4em;
  text-align: right;
}

ul.charger > li .mankuinfo dl .value {
  display: inline-block;
  width: 3em;
  text-align: right;
}

ul.charger > li .detail .manku-01 {
  display: block;
  font-size: 14px;
  text-align: left;
  margin-top: -10px;
  margin-bottom: 5px;
  margin-left: 73px;
  font-weight: bold;
}

.manku-03 {
  display: block;
  box-sizing: border-box;
  width: 90%;
  border-top: 1px #ccc solid;
  margin: 1em 0em 1em 0.7em;
  /*margin: 5em 1em 5em 1em;*/ /* 数値の設定個所は、左から順に「上」「右」「下」「左」となっています*/
  /*emとは、フォントサイズに応じたサイズのことです。フォントサイズが14pxの場合は、1em＝14pxとなります。文字サイズが変わっても比率を維持できるので、慣れればコチラの表記で書く癖をつけといたほうが調整が楽です*/
}
.manku-03 .manku-text {
  display: inline-block;
  position: absolute;
  font-size: 14px;
  background-color: #ffffff;
  padding: 2px;
  left: 8em;
  margin-top: -0.9em;
  font-weight: bold;
}

.manku-04 {
  display: inline-block;
  box-sizing: border-box;
  /* width: 95%; */
  border: 1px #ccc solid;
  border-radius: 0.5em;
  margin: 0.5em 1em 0.5em 1em;
  /*margin: 5em 1em 5em 1em;*/ /* 数値の設定個所は、左から順に「上」「右」「下」「左」となっています*/
  /*emとは、フォントサイズに応じたサイズのことです。フォントサイズが14pxの場合は、1em＝14pxとなります。文字サイズが変わっても比率を維持できるので、慣れればコチラの表記で書く癖をつけといたほうが調整が楽です*/
}
.manku-04 .manku-text {
  display: inline-block;
  position: absolute;
  font-size: 14px;
  background-color: #ffffff;
  padding: 2px;
  left: 8em;
  margin-top: -0.9em;
  font-weight: bold;
}

#logo-emp {
  max-width: 50%;
  height: 70px;
}

/* iPhone X対応 */
/* iPhone X（portrate）*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  .container {
    padding-bottom: 34px;
    padding-left: 0px;
    padding-right: 0px;
  }
}
/* iPhone X（landscape）*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  .container {
    padding-bottom: 21px;
    padding-left: 44px;
    padding-right: 44px;
  }
}

/* iPhone X（landscape）ブラウザの開発者ツール用 */
@media only screen and (device-width: 812px) and (device-height: 375px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  .container {
    padding-bottom: 21px;
    padding-left: 44px;
    padding-right: 44px;
  }
}