@charset "utf-8";
/* CSS Document */
main.ordersContent > article {padding-top: 0;}
main.ordersContent img.w-fixed {width: 100%;}
.align-center { text-align: center;}
/* header-ttl =======================================*/
.header-ttl h1 {margin-bottom: 30px; padding: 4px 12px 0 12px;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;background-color: #5acdbe;box-sizing: border-box;}
.header-ttl h1 .text-box {display: block;width: 100%; text-align: center;font-weight: bold;}
.header-ttl h1 .text-box small {display: block; font-size: 12px;}
.header-ttl h1 .text-box .text {display: in; font-size: 20px;vertical-align: bottom;}
.header-ttl h1 .img-pagetitle-chara {width: 20.4%;max-width: 147px;vertical-align: bottom;}
.header-ttl h1 .img-ttl-citygas_denki {width: 38.38028169014084%;max-width: 218px;}
.header-ttl h1 .img-ttl-citygas {width: 14.43661971830986%;max-width:82px;}
.header-ttl h1 .img-ttl-denki {width: 20.422535211267608%;max-width: 116px;}
/* btn-box =======================================*/
.btn-box {
  display: inline-block;
  border-radius: 4px;
  margin: 0 auto;
  padding: 16px 34px 16px 24px;
  width: 344px;
  position: relative;
  -webkit-transition: all 0.2s 0s ease;
  transition: all 0.2s 0s ease;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 24px;
  line-height: 2.4rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  color: #fff !important;
  background-color: transparent;
}
@media screen and (max-width: 41.875em) {
  .btn-box {
    width: 100%;
    padding: 12px 34px 12px 24px;
  }
}
.btn-box.icon-arrow::after {
  content: '';
  display: block;
  width: 15px;
  height: 20px;
  background-size: 15px 20px;
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-repeat: no-repeat;
}
.btn-box.w-250 {min-width: 250px;}
.btn-box-yel {background: #ffe153;color: #333;}
.btn-box-yel.icon-arrow::after {background-image: url(/assets/images/arrow-right-blk.svg);}
.btn-box-gry {background: #d5d5d5;color: #9897a0;}
.btn-box-gry.icon-arrow::after {background-image: url(/assets/images/arrow-right-gry.svg);}
.btn-box-grn {background: #0ca9a2;color: #fff;}
.btn-box-grn.icon-arrow::after {background-image: url(/assets/images/arrow-right-grn.svg);}
.btn-box-orn {background: #fa7600;color: #fff;}
.btn-box-orn.icon-arrow::after {background-image: url(/assets/images/arrow-right-orn.svg);}
.btnArea {margin-left: auto;margin-right: auto;width: 90%;}

/* sectionArea =======================================*/
[class*='sectionArea'] {margin: 0 auto 20px;width: 96%;border-radius: 5px;padding: 14px 3%;}
/**/
.sectionArea-gas { background-color: #d1eae8;}
.sectionArea-denki { background-color: #fdeba8;}
/* section-header =======================================*/
.section-header h2 {margin-bottom: 15px; font-size: 1.8rem;}
.section-header h2 .label {display: inline-block; margin-right: 6px; padding: 4px 6px 1px; font-size: 1.5rem;color: #fff;border-radius: 4px;}
.section-header h2 .label strong {font-size: 2.0rem;}
.sectionArea-gas > .section-header h2 .label { background-color: #60c1bd;}
.sectionArea-denki > .section-header h2 .label { background-color: #fa9f00;}
/* acd-body =======================================*/
.acd-box { margin-bottom: 14px; background-color: #fff;border-radius: 14px;}
.acd-box > .acd-header { position: relative;padding: 4px 12px;}
.acd-box > .acd-header > p { font-size: 1.4rem; text-align: center;}
.acd-box > .acd-header > span { position: absolute; top: 2px; right: 10px;font-size: 26px;}
.acd-box > .acd-body { display:none;padding: 4px 12px 12px 12px;}
/**/
.sectionArea-gas .acd-box > .acd-header > p { color: #60c1bd;}
.sectionArea-gas .acd-box > .acd-header > span { color: #60c1bd;}
.sectionArea-denki .acd-box > .acd-header > p { color: #fa9f00;}
.sectionArea-denki .acd-box > .acd-header > span { color: #fa9f00;}
/**/
.btnArea-shooting a.btn-box {padding: 12px 0;}
.btnArea-shooting a > span { position: relative;font-size: 1.4rem;}
.btnArea-shooting .text-shooting { padding-left: 26px;}
.btnArea-shooting .text-image {margin-left: 10px; padding-left: 22px;}
.btnArea-shooting .text-shooting::before,
.btnArea-shooting .text-image::before,
.btnArea-shooting .text-image::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-repeat: no-repeat;
}
.btnArea-shooting .text-shooting::before {width: 24px;height: 19px;background-size: 24px 19px;background-repeat: no-repeat;}
.btnArea-shooting .text-image::before {width: 17px;height: 17px;line-height: 18px;text-align: center;border-radius: 18px;}
.btnArea-shooting .text-image::after {position: absolute;top: 6.5px; left: 4px; content: '+';font-size: 14px;line-height: 14px;}
.sectionArea-gas .btnArea-shooting .text-shooting::before {background-image: url(/assets/images/icon-camera-grn.svg);}
.sectionArea-gas .btnArea-shooting .text-image::before { background-color: #d1eae8;}
.sectionArea-gas .btnArea-shooting .text-image::after { color: #0ca9a2;}
.sectionArea-denki .btnArea-shooting .text-shooting::before {background-image: url(/assets/images/icon-camera-yel.svg);}
.sectionArea-denki .btnArea-shooting .text-image::before { background-color: #fdeba8;}
.sectionArea-denki .btnArea-shooting .text-image::after { color: #fa7600;}
/**/
.acd-box > .acd-body dl + dl {margin-top: 20px;}
.acd-box > .acd-body dl dt {display:block;margin-bottom: 15px; padding: 5px 10px;text-align: center; font-size: 1.4rem;line-height: 14px;border-radius: 20px;}
.sectionArea-gas .acd-box > .acd-body dl dt { border: 1px solid #60c1bd;color: #60c1bd;}
.sectionArea-denki .acd-box > .acd-body dl dt { border: 1px solid #f29a00;color: #f29a00;}
.acd-box > .acd-body ul {margin-top: 16px; padding-left: 20px; font-size: 1.4rem; list-style-type: disc;}
.acd-box > .acd-body ul strong {color: #f73636;}
.sectionArea-gas .acd-box > .acd-body ul {color: #60c1bd;}
.sectionArea-denki .acd-box > .acd-body ul {color: #f29a00}
.link-text {margin-top: 10px; display: block;font-size: 1.4rem; text-align: center;}
.link-text a {position: relative;display: inline-block;padding-left: 12px;}
.link-text a:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 7px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: 7px 12px;
}
.img-upload {margin-top: 10px;text-align: center;}
.img-upload img {width: 100%;}
.sectionArea-gas .link-text a:before {background-image: url(/assets/images/arrow-right-grn.svg);}
.sectionArea-denki .link-text a:before {background-image: url(/assets/images/arrow-right-orn.svg);}
.disabled {background: #d5d5d5;color: #9897a0;pointer-events: none;}

.l-header .logo-header{
  margin-top:10px;
  margin-left:10px;
}

.l-header .logo-header img{
  width:40%;
}

#loading_box {
  width: 100%;
  height: 100%;
  background: #FFF;
  opacity: 0.8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
#loading_box img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -100px;
  width: max-content;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  /* width: 128px; */
  /* height: 64px; */
}
.errors {
  font-weight:bold;
}

.img_canvas {
  display:none;
  width:90%;
}

.msg_frame {
    display:none;
}

.msg_error {
    border: 2px solid #f00;
    color:#f00;
}

.msg_success {
    border: 2px solid #00f;
    color:#00f;
}

/* iPhone5以下 =======================================*/
@media screen and (max-width: 374px) {
  .header-ttl h1 {position: relative;padding-bottom: 8px;padding-left: 60px;}
  .header-ttl h1 .img-pagetitle-chara {position: absolute;left: 16px;bottom: 0;}
  .header-ttl h1 .text-box {}
  .header-ttl h1 .text-box small {display: inline-block;margin-left: 10px; font-size: 10px;}
  .header-ttl h1 .text-box .text {font-size: 16px;}
  .section-header h2 {font-size: 16px;}
  .acd-box > .acd-body dl dt {font-size: 12px;}
  .btnArea-shooting a > span {font-size: 11px;}
  .link-text {font-size: 12px;}
  .btn-box-yel,
  .btn-box-gry {font-size: 14px;}
  .btnArea-shooting .text-image::after {top: 4px;left: 4px;}
}