@charset "UTF-8";
/*セレクタの親クラス指定は .ah-chage */

.ah-charge .view-pc {
  display: block;
}
.ah-charge .view-sp {
  display: none;
}
.ah-charge .w100p {
  width: 100%;
}

@media screen and (max-width: 767px) and (min-width: 0px) {
  .ah-charge .view-pc {
    display: none;
  }
  .ah-charge .view-sp {
    display: block;
  }
  .ah-charge .w90p {
    width: 90%;
  }
  .ah-charge .w75p {
    width: 75%;
  }
}

/* au home charge.html - setplan btn   */
.ah-charge span.displaySet-inline.setplan-btn-orange{
  color: #333 !important;
  font-weight: bold;
}

@media screen and (max-width: 767px) and (min-width: 0px) {
  .ah-charge span.displaySet-inline.setplan-btn-orange{
    width: 50%;
    margin: 10px auto;
  }
}

/* au home charge.html - cardborder   */
.ah-charge.card-border{
  border: 1px solid #d1d1d1;
  padding: 30px;
}

/* au home charge.html - mounth price   */
@media screen and (max-width: 767px) and (min-width: 0px) {
  .ah-charge.card-border .txtSize-large{
    font-size: 24px;
  }
  .ah-charge.card-border.margin-sp-t-10{
    margin-top: 10px !important;
  }
}

/* au home charge.html - 2 images +image   */
.ah-charge .imgWrap {
  width: 100%;
  display: table;
}

.ah-charge .imgWrap a:hover {
  opacity: 0.6;
}

.ah-charge .imgWrap-l,
.ah-charge .imgWrap-c,
.ah-charge .imgWrap-r {
  display: table-cell;
}

.ah-charge .imgWrap-l,
.ah-charge .imgWrap-r {
  width: 45%;
}

.ah-charge .imgWrap-c {
  width: 10%;
  padding: 0 2%;
  text-align: center;
}

@media screen and (max-width: 767px) and (min-width: 0px) {
  .ah-charge .imgWrap,
  .ah-charge .imgWrap-l,
  .ah-charge .imgWrap-c,
  .ah-charge .imgWrap-r {
    display: block;
  }

  .ah-charge .imgWrap a,
  .ah-charge .imgWrap-l,
  .ah-charge .imgWrap-r {
    width: 100%;
  }

  .ah-charge .imgWrap-c {
    margin: 0 auto;
    padding: 4% 0;
  }

  .ah-charge .imgWrap-l div{
    margin-bottom: 10px !important;
  }

}

/* -- Font Setting -- */
.ah-charge .txtSize-sLarge{
  font-size: 18px;
}

.ah-charge .txtSize-xslarge{
  font-size: 20px;
}

.ah-charge .txtSize-slarge {
  font-size: 22px;
}

.ah-charge .txtSize-xLarge {
  font-size: 30px;
}

.ah-charge .displaySet-inline {
  display: inline-block;
}

.ah-charge .txtPrice-set-o {
  padding-left: 5px;
}

.ah-charge .txtPrice-set-b {
  padding-left: 10px;
}
@media screen and (max-width: 795px) and (min-width: 768px) {
  .ah-charge .txtSize-slarge {
    font-size: 20px;
  }
}
@media screen and (max-width: 767px) and (min-width: 0px) {
  .ah-charge .txtSize-xslarge,
  .ah-charge .txtSize-slarge,
  .ah-charge .txtSize-large {
    font-size: 4vw;
  }

  .ah-charge .txtSize-xLarge {
    font-size: 5vw;
  }

  .ah-charge .displaySet-inline {
    display: block;
    text-align: center;
  }

  .ah-charge .txtPrice-set-o {
    padding-left: 1%;
  }

  .ah-charge .txtPrice-set-b {
    padding-left: 0;
  }

  .txt-c-sp {
    text-align: center;
  }
}

/* au home charge.html - Broad table setting  */

.ah-charge .broadTable {
  width: 100%;
  border-top: 2px solid #ccc;
  border-left: 2px solid #ccc;
  margin-bottom: 10px;
}

.ah-charge .broadTable td,
.ah-charge .broadTable th {
  width: 7.6923%;
  border-bottom: 2px solid #ccc;
  border-right: 2px solid #ccc;
  font-size: 13px;
  text-align: center;
  padding: 5px 0;
  vertical-align: middle;
}

.ah-charge .broadTable th {
  background: #f3f3f3;
  font-weight: normal;
}

.ah-charge .broadTable th.ttl {font-weight: bold; }
.ah-charge .broadTable th span { font-size: 11px;}


@media screen and (min-width: 0px) and (max-width: 767px) {
  .ah-charge .broadTable { width: 100%; }
  .ah-charge .broadTable-wide { width: 33.3333%; }

  .ah-charge .broadTable,
  .ah-charge .broadTable-wide {
    border-top: 2px solid #ccc;
    border-left: 2px solid #ccc;
    margin-bottom: 2%;
  }

  .ah-charge .broadTable th,
  .ah-charge .broadTable-wide th,
  .ah-charge .broadTable td,
  .ah-charge .broadTable-wide td {
    width: 16.666%;
    border-bottom: 2px solid #ccc;
    border-right: 2px solid #ccc;
    text-align: center;
    padding: 2vw 0;
    font-size: 2.3vw;
    vertical-align: middle;
  }

  .ah-charge .broadTable th span{
    font-size: 1.9vw;
  }

  .ah-charge .broadTable th,
  .ah-charge .broadTable-wide th {
    background: #f3f3f3;
    font-weight: normal;
  }

  .ah-charge .broadTable th.ttl,
  .ah-charge .broadTable-wide th.ttl {
    font-weight: bold;
  }
}