@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, rem, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, rembed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

* {
  box-sizing: border-box;
  vertical-align: middle;
}

p {
  line-height: 1.3;
  margin: .6rem 0;
}

p a {
  color: #333;
  margin-top: .6em;
  display: inline-block;
  color: #F18000;
}

p.small {
  font-size: 10px;
  margin: .3rem 0;
  color: #777;
}

p.small + a {
  margin-top: 0;
}

body {
  font-size: 14px;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-size: 14px;
  background: #F0F0F0;
}

.lay_mainArea, .d-header {
  padding: 1px .6rem;
  background: #F0F0F0;
  color: #fff;
}

.lay_inner {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.lay_row:after {
  content: '';
  clear: both;
  display: block;
}

.lay_row .elm_slot {
  float: left;
  width: 50%;
  margin-bottom: .5em;
}

.lay_section {
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  color: #333;
  box-shadow: 0 0 6px #bbb;
  margin-bottom: .7rem;
}

.lay_section header {
  background: #F18000;
  text-align: center;
  padding: .3rem 0;
  color: #fff;
}

.lay_section .typo_lead {
  color: #fff;
}

.lay_section-body, .lay_section-body--gray {
  padding: 0 .7rem 0 .7rem;
}

.lay_section-body--gray {
  background: #f9f9f9;
  padding: 1rem 1rem .1rem 1rem;
  margin: 0 -1rem 0;
  border: 1px solid #e6e6e6;
}

hr {
  display: block;
  border: none;
  height: 1px;
  background: #eee;
  margin: 1rem -1rem 1.3rem -1rem;
}

.lay_payment {
  background: #fff;
  padding: 1rem;
}

.lay_payment .typo_h3, .lay_payment .d-entry__error--big {
  color: #8e8e8e;
}

.lay_payment p {
  font-size: 12px;
  margin-bottom: 1rem;
  text-align: justify;
  line-height: 1.6;
  color: #aeaeae;
}

.lay_payment a {
  display: block;
  text-align: center;
  color: #F18000;
  font-size: 14px;
  margin: .3em 0;
  float: none;
}

.lay_attention {
  background: #fff;
  padding: 1rem;
  padding-bottom: .3rem;
  margin-bottom: 1rem;
}

.lay_attention .d-icon__link {
  float: none;
  font-size: 12px;
  line-height: 12px;
}

.lay_attention .typo_h3, .lay_attention .d-entry__error--big {
  color: #F18000;
}

.lay_attention p {
  margin-bottom: 1rem;
  text-align: justify;
  line-height: 1.6;
}

.lay_attention a {
  display: block;
  text-align: center;
  color: #F18000;
  font-size: 14px;
  margin: .3em 0;
}

.yesno .elm_slot {
  width: 60%;
}

.yesno .elm_slot:last-child {
  width: 40%;
}

.d-topAlert {
  background: #F18000;
  text-align: center;
  padding: 1rem;
  color: #fff;
  display: none;
}

.d-header {
  padding: .6rem .6rem .4rem .6rem;
}

.d-footer {
  background: #fff;
  text-align: center;
  padding: 1.5rem;
}

.d-acc__button {
  background: #CBCBCB;
  color: #fff;
  text-align: center;
  padding: 1.2rem;
  position: relative;
}

.d-acc__button:after {
  content: '';
  display: block;
  height: 6px;
  width: 6px;
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -6px;
  transform: rotate(-45deg);
}

.d-acc__button--active:after {
  content: '';
  display: block;
  height: 6px;
  width: 6px;
  border: 2px solid #fff;
  border-bottom: none;
  border-left: none;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -2px;
  transform: rotate(-45deg);
}

.d-crumbs {
  background: #CBCBCB;
  border-radius: 9px;
  text-align: center;
  font-weight: 600;
  color: #fff;
}

.d-crumbs:after {
  content: '';
  clear: both;
  display: block;
}

.d-crumbs li {
  width: 33.33333%;
  float: left;
  position: relative;
  font-size: 13px;
  text-align: center;
  line-height: 38px;
}

.d-crumbs li span {
  display: inline-block;
  margin-left: -10px;
}

.d-crumbs li:first-child span {
  margin-left: 0;
}

.d-crumbs li:first-child.d-active {
  border-radius: 9px 0 0 9px;
}

.d-crumbs li:first-child.d-active:before {
  content: none;
}

.d-crumbs li:last-child span {
  margin-left: 0;
}

.d-crumbs li:last-child.d-active {
  border-radius: 0 9px 9px 0;
}

.d-crumbs li:last-child:after {
  content: none;
}

.d-crumbs li:after {
  content: '';
  display: inline-block;
  height: 100%;
  width: 38px;
  position: absolute;
  right: 0px;
  z-index: 1;
  top: 0;
  background: url(../img/icon-arrow-r.png) no-repeat right center;
  background-size: auto 100%;
}

.d-active {
  background: #F18000;
  color: #fff;
}

.d-active:before {
  content: '';
  display: inline-block;
  height: 100%;
  width: 38px;
  position: absolute;
  left: -38px;
  z-index: 1;
  top: 0;
  background: url(../img/icon-arrow-l.png) no-repeat right center;
  background-size: auto 100%;
}

.d-checkboxArea {
  border: 4px solid #72d2ec;
  background-color: #f1fdfd;
  background-repeat: no-repeat;
  background-position: 99% center;
  background-size: auto 29px;
  border-radius: 9px;
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-bottom: .3em;
}

.d-checkboxArea br {
  display: none;
}

.d-checkboxArea.formAlert {
  border-width: 4px !important;
  background-image: none !important;
}

.d-checkboxArea:after {
  content: '';
  display: block;
  clear: both;
}

.d-checkboxArea input[type=checkbox] {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -6px;
  border: 1px solid #ccc !important;
}

.d-checkboxArea label {
  display: block;
  line-height: 1.2;
  padding: 1rem;
  padding-left: 2rem;
  padding-right: .5rem;
  font-size: 13px;
}

.js-modal {
  text-decoration: underline;
  cursor: pointer;
}

.js-modal span {
  display: none;
  position: fixed;
  z-index: 100;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.568627);
  padding: 1em;
  text-align: center;
}

.js-modal span:after {
  content: '閉じる';
  display: inline-block;
  background: #F18000;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  padding: 4px 10px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.js-modal span img, .js-modal span p {
  width: 100%;
  max-width: 600px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.js-modal span p {
  background: #fff;
  padding: 2em 1em;
  font-size: 12px;
  text-align: left;
  border-radius: 6px;
  color: #000;
  line-height: 1.6;
  margin: 0 auto;
}

.d-icon__link {
  font-size: 11px;
  color: #F18000;
  display: inline-block;
  text-align: right;
  margin-top: 8px;
  float: right;
}

.d-icon__link span {
  display: none;
  position: fixed;
  z-index: 100;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.568627);
  padding: 1em;
  text-align: center;
}

.d-icon__link span:after {
  content: '閉じる';
  display: inline-block;
  background: #F18000;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  padding: 10px 30px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.d-icon__link span img {
  width: 100%;
  max-width: 600px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.d-icon__link i {
  background: #F18000;
  color: #fff;
  font-size: 10px;
  width: 1.3em;
  height: 1.3em;
  display: inline-block;
  text-align: center;
  padding: 1.2px;
  margin-right: .3em;
  border-radius: 100%;
}

.d-address-button {
  background: #EB5505;
  border: none;
  border-radius: 5px;
  padding: .6rem 1em;
  font-size: 14px;
  margin: 0;
  color: #fff;
  display: inline-block;
}

.d-address-button a {
  color: #fff;
  text-decoration: none;
}

.d-form__btn {
  text-align: center;
}

.d-form__btn-disabled .d-form__entry_button {
  opacity: .4;
  background: #fff;
  color: #000;
}

.d-form__entry_button {
  background: #F18000;
  border: none;
  border-radius: 5px;
  padding: 1rem;
  font-size: 14px;
  margin: 0;
  color: #fff;
  margin: 1rem 0;
  font-size: 16px;
  width: 90%;
  max-width: 320px;
}

.d-form__entry_button-design {
  background: #F18000;
  border: none;
  border-radius: 5px;
  padding: 1rem;
  font-size: 14px;
  margin: 0;
  color: #fff;
  margin: 1rem 0;
  font-size: 16px;
  width: 90%;
  max-width: 320px;
}

.d-content__button--confirm {
  background: #F18000;
  border: none;
  border-radius: 5px;
  padding: 1rem;
  font-size: 14px;
  margin: 0;
  color: #fff;
  margin-bottom: 1rem;
  font-size: 16px;
  display: block;
  margin: 0 auto;
  width: 90%;
  max-width: 320px;
}

.d-content__button--back {
  text-align: center;
  display: block;
  background: none;
  color: #F18000;
  border: none;
  font-size: 16px;
  margin: 1.3rem auto;
  text-decoration: underline;
}

.typo_h1 {
  margin: .6rem 0 0 0;
  font-size: 19px;
  font-weight: 600;
  background: url(../img/icon-logo.png) no-repeat left top;
  background-size: 38px;
  padding-left: 45px;
  line-height: 22px;
  color: #F18000;
  min-height: 38px;
  padding-top: 8px;
}

.typo_h2 {
  margin: .6rem 0;
  font-size: 18px;
  font-weight: 600;
}

.typo_h3, .d-entry__error--big {
  margin: .6rem 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.typo_h3 small, .d-entry__error--big small {
  font-size: 11px;
}

.typo_h3 span, .d-entry__error--big span {
  display: inline-block;
  color: #F18000;
  border-bottom: 3px solid #F18000;
  font-size: 12px;
  font-weight: 600;
  padding: .4em 1em;
  margin-bottom: 1.5em;
}

.typo_h4 {
  margin: 0 0 .6rem 0;
  font-size: 12px;
  font-weight: 600;
  color: #8e8e8e;
  line-height: 14px;
  vertical-align: middle;
  position: relative;
}

.typo_h4 small {
  font-weight: 400;
  color: #000;
  display: inline-block;
  font-size: 11px;
  margin: 0  0  0 .5rem;
}

.typo_h4 + p {
  margin-top: -6px;
}

.typo_h4.labelmode {
  background: #EDEDED;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

.typo_h4.hasIcon:after {
  content: '必須';
  background: #F18000;
  color: #fff;
  border-radius: 40px;
  padding: 2px 5px;
  line-height: 1;
  font-size: 11px;
  margin-left: 6px;
  font-weight: 400;
  display: inline-block;
}

.typo_h4.hasIcon--keiyaku:after {
  content: 'auでんきご契約中';
  background: #929292;
  color: #fff;
  border-radius: 3px;
  padding: 3px 6px;
  line-height: 1;
  font-size: 12px;
  margin-left: 0px;
  font-weight: 600;
  display: inline-block;
  position: absolute;
  right: 1rem;
  top: 6px;
}

.hasIcon--waribiki:after {
  content: '電気セット割引対象';
  background: #fff;
  border: 1px solid #F18000;
  color: #F18000;
  border-radius: 40px;
  padding: 6px 8px 5px;
  line-height: 1;
  font-size: 12px;
  margin-left: 0px;
  font-weight: 400;
  display: inline-block;
  position: absolute;
  right: 0rem;
  top: 3px;
}

.typo_h5 {
  margin: .3rem .6rem;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #F18000;
  line-height: 1.3;
}

.typo_h5 span {
  display: inline-block;
  background: #F18000;
  color: #fff;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  padding: .4em 1em;
  margin-bottom: 1.3em;
}

.typo_h5.left {
  margin-left: 0;
  margin-right: 0;
}

.typo_name {
  font-size: 20px;
  padding-top: .2em;
}

.typo_name small {
  font-size: 12px;
  display: block;
}

.typo_stronger {
  font-size: 16px;
  margin-bottom: 0;
  padding: .5rem 0 0;
}

.typo_formDetail {
  border: none;
  font-size: 14px;
  width: 100%;
  padding: .4rem 0 0;
  position: relative;
}

.typo_bold {
  font-weight: bold;
}

.typo_indent {
  padding-left: 1em;
  text-indent: -1em;
}

.typo_formDetail--gray {
  border: none;
  font-size: 14px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: .6rem;
  font-size: 16px;
  width: 100%;
  margin: 0;
  background: #eee;
  color: #a9a9a9;
}

.typo_formDetail--button {
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: .6rem;
  font-size: 16px;
  width: 100%;
  margin: 0;
  background: #fff;
  color: #000;
}

.typo_formDetail--button + .typo_formDetail--button {
  margin-top: .5em;
}

.typo_accordion_head {
  margin: 0;
  text-align: right;
}
.typo_accordion_head a {
  position: relative;
  padding-left: 20px;
}
.typo_accordion_head a::before {
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 8px 0 8px;
  border-color: #f18100 transparent transparent transparent;
  content: '';
}
.typo_accordion_head a.js-active::before {
  border-width: 0 8px 12px 8px;
  border-color: transparent transparent #f18100 transparent;
}
.typo_accordion_body {
  display: none;
}
.typo_accordion_body p:last-child {
  margin-bottom: 0;
}


input[type=tel],
input[type=text],
input[type=number],
input[type=button],
input[type=email] {
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: .6rem;
  font-size: 16px;
  width: 100%;
  margin: 0;
  background: #fff;
  /*
  &:disabled{
    @extend .typo_formDetail--gray;
  }
*/
}

input[type=tel] + input,
input[type=text] + input,
input[type=number] + input,
input[type=button] + input,
input[type=email] + input {
  margin-top: .3rem;
}

input[type=tel],
input[type=text],
input[type=number],
input[type=button],
input[type=submit] {
  -webkit-appearance: none;
}

.elm_inputModel {
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-right: 31px;
}

.elm_inputModel span {
  display: inline-block;
  width: 2%;
}

.elm_inputModel input {
  border: none;
  background: none;
  width: initial;
  padding: 0.6em .3em;
  text-align: center;
  border-radius: 0;
}

.elm_inputModel input.inputFull {
  width: 100% !important;
  padding: .6em;
  text-align: left;
}

.elm_inputModel.formAlert {
  padding-right: 31px !important;
}

#contractnumber1 {
  width: 15%;
}

#contractnumber2 {
  width: 15%;
}

#contractnumber3 {
  width: 15%;
}

#contractnumber4 {
  width: 15%;
}

#contractnumber5 {
  width: 15%;
}

#contractnumber6 {
  width: 15%;
}

#pointnumber1 {
  width: 16%;
}

#pointnumber2 {
  width: 21%;
}

#pointnumber3 {
  width: 21%;
}

#pointnumber4 {
  width: 21%;
}

#pointnumber5 {
  width: 13%;
}

.formAlert {
  border: 1px solid #EB7373 !important;
  background-color: #FFF0F0 !important;
  background-image: url(../img/bad.png) !important;
  background-repeat: no-repeat !important;
  background-position: 99% center !important;
  background-size: auto 70% !important;
  padding-right: 0 !important;
}

.formGood {
  border: 1px solid #72d2ec !important;
  background-color: #f1fdfd !important;
  background-image: url(../img/good.png) !important;
  background-repeat: no-repeat !important;
  background-position: 99% center !important;
  background-size: auto 70% !important;
  padding-right: 31px !important;
}

select {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: .6rem;
  font-size: 16px;
  width: 100%;
  margin: 0;
  background-image: url(../img/icon-select.png);
  background-repeat: no-repeat;
  background-position: 96% center;
  background-size: 6px;
  background-color: #fff;
}

select::-ms-expand {
  display: none;
}

input[type=checkbox] {
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 14px;
  width: auto;
  margin: 0 .5em 0 0;
  background: #fff;
}

input[type=radio] {
  border: 1px solid #ccc;
  border-radius: 100%;
  padding: .6rem;
  margin: 0 .5em 0 0;
  background: #ccc;
}

.formType-tel input {
  width: 100%;
}

.d-entry__error {
  color: #EB7373;
  font-size: 11px;
}

.d-entry__error--big {
  color: #F18000;
  text-align: center;
  display: block;
}

.elm_slot {
  margin-bottom: 1rem;
}

.elm_slot:after {
  content: '';
  display: block;
  clear: both;
}

.d-address_parts__input-wrap {
  margin-top: .3rem;
}

.u-d-block {
  display: block;
}

.u-d-none {
  display: none;
}

.u-clear {
  clear: both;
}

.elm_length {
  font-size: 11px;
  float: right;
}

.center {
  text-align: center !important;
}

.left {
  text-align: left !important;
}

.botmFix {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
}

.terms {
  font-size: 11px;
  line-height: 1.3;
  text-align: justify;
}

.terms a {
  font-size: 11px;
  color: #333;
  display: inline-block;
}

.imgFit {
  text-align: center;
  margin: 0 !important;
  vertical-align: bottom;
}

.imgFit img {
  display: inline-block;
  max-width: 320px;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.extraSmall {
  font-size: 10px;
  letter-spacing: -.05em;
  line-height: 1;
}

.labeler {
  text-align: center !important;
}

.labeler > span {
  display: inline-block;
  padding: .3em 1em;
  background: #fff;
  border-radius: 3px;
  margin: 2px;
  border: 2px solid #ccc;
  text-decoration: none;
  font-size: 12px;
}

.labeler > span.trio {
  width: 32%;
  padding: .6em 1em;
  background: #eee;
  border: none;
}

.d_selectLabel label {
  display: block;
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 1rem .6rem .8rem .6rem;
  font-size: 16px;
  width: 100%;
  margin: 0;
  background: #fff;
  margin: .5rem 0;
}

.d_selectLabel label input {
  margin-top: -3px;
}

.d_selectLabel label small {
  font-size: 12px;
}

.d_selectLabel label.formAlert {
  border: 1px solid #EB7373;
  background-color: #FFF0F0;
}

#gasPlan {
  margin-bottom: 1rem;
}

#planName {
  background: #f6f6f6;
  padding: .8em 1em .6em;
  margin-bottom: 1rem;
  margin-top: 0;
  border-radius: 5px;
}

.mod_fkds {
  border: 3px solid #F18002;
  border-radius: 5px;
  position: relative;
  margin-top: .6em;
}

.mod_fkds:before {
  content: '';
  display: block;
  height: 10px;
  width: 15px;
  background: url(../img/done/trang.png) no-repeat left top;
  background-size: 100%;
  top: -10px;
  left: 50%;
  margin-left: -7px;
  position: absolute;
}

.mod_fkds .typo_h7 {
  font-size: 15px;
}

.mod_imgF {
  margin: 0 auto;
  padding: 0;
  max-width: 460px;
}

.mod_imgF img {
  width: 100%;
  height: auto;
}

.typo_h7 {
  font-weight: 600;
  line-height: 1.3;
  color: #EB5505;
  margin: 1.2em 0;
  font-size: 17px;
}

.typo_h7 + p {
  margin-top: -.5em;
  margin-bottom: 1.5em;
}

.typo_h8, .typo_h9 {
  font-weight: 600;
  line-height: 1.3;
  color: #000;
  margin: 2em 0 0 0;
  font-size: 14px;
}

.typo_h9 {
  margin: -.5em 0 -.7em !important;
}

p.wide {
  line-height: 1.6;
  font-size: 13px;
  margin: 1.6em 0;
}

p.wide span {
  color: #EB5505;
}

.mod_notes {
  font-size: 10px;
  line-height: 1.4;
  color: #595959;
  padding: 10px 0 0;
  margin: 0 1em;
}

.mod_notes strong {
  font-weight: 600;
  margin-right: 1rem;
  margin-bottom: .5em;
  display: inline-block;
}

.mod_notes p {
  text-align: justify;
}

.mod_notes dl dt {
  font-weight: 600;
  border-bottom: 1px dashed #ccc;
  padding: 10px 0;
  background-image: url(../images/ico-dn.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 15px;
}

.mod_notes dl dt.js-active {
  background-image: url(../images/ico-up.png);
}

.mod_notes dl dd {
  padding: 1em 0 .5em 0;
}

.mod_notes table {
  border-top: 1px dashed #ccc;
  margin: 0 0 1em 0;
}

.mod_notes table tr {
  border-bottom: 1px dashed #ccc;
}

.mod_notes table th, .mod_notes table td {
  vertical-align: middle;
  padding: 0em 0;
}

.mod_notes table th {
  font-size: 13px;
  padding-right: .6em;
}

.mod_notes table td {
  text-align: justify;
}