@charset "UTF-8";
/* CSS Document */

body {
  font-family: arial,Hiragino Kaku Gothic ProN,Meiryo,Yu Gothic,sans-serif;
}

#satei_form{
  background-color: #ffeded;
  padding: 0 0 5px;
}
#satei_form_title{
  background-color: #ef2112;
  color: #FFF;
  text-align: center;
  padding: 15px 0;
  font-size: 17px;
  position:relative;
}
#satei_form_title span{border-radius: 5px;border: 2px solid #FFF;padding: 5px;margin-right: 5px;}

#satei_form_title span b{
  font-size: 20px;
  
}
#satei_form_title::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 11px solid #ef2112;
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin: 0 0 0 -12px;
    /* box-shadow: 4px 4px 0 #ffdf25; */
    z-index: 3;
}


/* フロー */
.flow {
   /* ステップフロー全体の横幅を指定 */
  display: flex;            /* flexboxで横並びにする */
  justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
  margin: 15px 5px;
}

.flow li {color: #333;        /* 文字色を黒に指定 */    /* 文字サイズを指定 */width: calc(100% / 2); /* 横幅を三等分した1つの大きさに指定 */background: #eeeeee;   /* 背景色をグレーに指定 */line-height: 50px;  /* 行間(高さの代わり)を指定 */text-align: center; /* 文字を中央寄せにする */position: relative; /* 基準位置とする */}

.flow li:not(:first-child):not(:last-child) { 
  padding: 0 0 0 10px;  /* 最初と最後以外には左に適度な余白を指定 */
}

.flow li::before,
.flow li::after {
  content: "";  /* 疑似要素では必須 */
  width: 0;     /* 横幅を0に指定 */
  height: 0;/* 高さを0に指定 */
  display: block;  /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.flow li::before {
  /* border: solid 32px transparent; */     /* 32pxのborderを指定 */
  /* border-right: solid 13px transparent; */  /* 幅を合わせるため右線は13pxにする */
  /* border-left: solid 13px #ffeded; */          /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: -7px;  /* 重ねる位置(縦軸)を調整 */
  left: 0;    /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}

.flow li::before,
.flow li::after {
  border: solid 25px transparent;  /* 25pxのborderを指定 */
  /*border-left: solid 10px #EDEDED;*/ /* 左のborderで背景色と同じ▶の部分を作成する */
  border-right: solid 10px transparent; /* 幅を合わせるために右線は10pxにする */
  top: 0;       /* 重ねる位置(縦軸)を調整 */
  right: -28px; /* 重ねる位置(横軸)を調整 */
  z-index: 2;   /* 重なり順の優先度を他よりも上げる */
}

.flow li:first-child::before,
.flow li:last-child::after {
  content: none;  /* 最初のliの左と最後のliの右は作らない */
}

/* 以下.currentだけ色を変えるCSS */

.flow li.current {
  background: #f4c91f;
}

.flow li.current::after {
  border-left: solid 18px #f4c91f;
}

/* フォーム */
.form_contact{
  margin: 0 10px;
}
.form_contact dt {
  margin-bottom: 5px;
  font-weight: 700;
}
.form_contact dt span{
  background-color: #ef2112;
  border-radius: 3px;
  font-size: 11px;
  color: #FFF;
  display: inline-block;
  padding: 0 5px;
  margin: 0px 10px 0 0;
  font-weight:100;

}

.form_contact dt .any{
  background-color: #cecece;
  border-radius: 3px;
  font-size: 11px;
  color: #000;
  display: inline-block;
  padding: 0 5px;
  margin: 0px 10px 0 0;
}

.txt_required{
  background-color: #ef2112!important;
  border-radius: 3px!important;
  font-size: 12px!important;
  color: #FFF!important;
  display: inline-block!important;
  padding: 0 5px!important;
  margin: 0px 3px!important;
  height:20px;
  line-height:20px;
}

.form_contact dd{
  margin-bottom: 10px;
  font-weight: 500;

}
a.form-control,input.form-control {
  border-radius: 5px;
  border: 1px solid #ef2112;
  background: #fff3d8;
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 0 10px;
}
a.form-control.is_selected,input.form-control.is_selected{
  border: 1px solid #8b8b8b;
  background: #FFF;
}
a.form-control::after {
  position: absolute;
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #666666;
  right: 10px;
}

a.form-control,select.form-control {
  border-radius: 5px;
  border: 1px solid #ef2112;
  background: #fff3d8;
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 0 10px;
}
a.form-control.is_selected,select.form-control.is_selected{
  border: 1px solid #8b8b8b;
  background: #FFF;
}

.confirm_area{
  display: block;
  height: 50px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  padding-left:40px;
}

#layer2{
  display:none;
}


/*  */
.panel_modal {
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  position: absolute;
  top: 0;
  right: -100%;
  z-index: 1001;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position:fixed; /*追加*/
}
.panel_modal.is-active {
  display: flex;
}

.panel_modal.is-current {
  right: 0;
}


.panel_modal_header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #ef2112;
  color: #FFF;
  padding: 10px 10px;
}
.panel_modal_header h2{font-size: 18px;font-weight: bold;}
.panel_back{
  border: 2px solid #FFF;
  border-radius: 5px;
  color: #FFF;
  padding: 5px 13px;
  /* margin: 0 auto 0 0; */
}
.panel_modal_close{
  /* margin: 0 0 0 auto; */
  width: 60px;
  text-align: right;
}
.panel_modal_close button{border: none;background: transparent;color: #FFF;font-size: 22px;width: auto;height: auto;}


ul.abc_tab {
  background: #eee;
  padding: 12px 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.abc_tab li{width: 19%;margin: 0 0 5px;}
ul.abc_tab li a{
  display:block;
  border: 1px solid #d0101b;
  border-bottom: 3px solid;
  border-radius: 5px;
  background: #FFF;
  color: #d0101b;
  text-align: center;
  padding: 6px 0;
}

.panel_modal dl {
  margin: 10px;
  overflow: scroll;
  /* height: 100%; */
  font-weight:700;

}
.panel_modal dl dt {
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 18px;
  position: relative;
  padding: 13px 0 12px 6px;
  font-weight: bold;
  background: linear-gradient(0deg, #c4c4c4 0% 50%, #ef2112 50%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: bottom;
}
.form_contact dt small {
  font-size: 12px;
  margin-left: 10px;
  display: inline-block;
}

.panel_modal dl dd ul li {
  border-bottom: 1px solid #ccc;
}
.panel_modal dl dd ul li a{
  display:block;
  padding:10px;
  position: relative;
}
.panel_modal dl dd ul li a::after {
  position: absolute;
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #666666;
  right: 10px;
}




/* loading */
#LoadingIcon{
  display: none;
}
.loaders {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  background: rgb(181 181 181 / 87%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  }

  .loaders .loader {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    max-width: 25%;
    height: 300px;
    align-items: center;
    justify-content: center;
    margin: auto;
    }
.loaders p{
  color: #da0e09;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}
.ball-clip-rotate > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: 2px solid #da0e09;
  border-bottom-color: transparent;
  height: 26px;
  width: 26px;
  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate 0.75s 0s linear infinite;
  animation: rotate 0.75s 0s linear infinite;
  }

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1); }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6); }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1); } }

@keyframes scale {
  30% {
    -webkit-transform: scale(0.3);
            transform: scale(0.3); }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1); }
}

.f17{font-size:17px!important;}
.f18{font-size:18px!important;}

.errmsg{
  margin: 5px 10px 10px;
  font-size:13px;
  line-height:16px;
  color: black;
  text-align: left;
  font-weight: normal;
}

#satei_sabmit{
  background-color: #dce0e0;
  /* color: #c3c3c3; */
  display: block;
  margin: 5px 10px 0;
  border-radius: 5px;
  height: 60px;
  text-align: center;
  line-height: 62px;
  /*font-weight: bold;*/
  font-size: 15px;
  pointer-events: none;
  position: relative;
}
#satei_sabmit.is_next{
  pointer-events:auto;
  background: #198fff;
  color: #FFF;

}

#satei_sabmit.is_next [disabled]{
  pointer-events: auto;
  background: gray;
  color: #FFF;
}


#satei_sabmit i{
  right:10px;
  position:absolute;
  top:23px;
}

.i-1{
  left:10%;
  position:absolute;
  top:0px;
}

.i-2{
  left:8%;
  position:absolute;
  top:0px;
}

.customer_input{
  display: none;
}

/*----  radio button  ----*/
.radio_btn_shift input {
  display: none;
}
.radio_btn_shift label{
  display: block;
  float: left;
  cursor: pointer;
  width: 33%;
  margin-bottom: 10px;
  padding: 10px;
  background: #fff;
  color: #000;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  transition: .2s;
  border-left: 1px solid #ef2112;
  border-top: 1px solid #ef2112;
  border-bottom: 1px solid #ef2112;
  height: 50px;
}

.radio_btn_shift label:last-child{
  border-right: 1px solid #ef2112;
}

.radio_btn_shift label:first-of-type{
  border-radius: 3px 0 0 3px;
}
.radio_btn_shift label:last-of-type{
  border-radius: 0 3px 3px 0;
}  
.radio_btn_shift input[type="radio"]:checked + .switch-on {
  background-color: #fff3d8;
  color: #000;
}
.radio_btn_shift input[type="radio"]:checked + .switch-off {
  background-color: #fff3d8;
  color: #000;
}

.radio_btn_state input {
  display: none;
}
.radio_btn_state label{
  display: block;
  float: left;
  cursor: pointer;
  width: 23%;
  margin-bottom: 10px;
  padding: 10px 1px;
  background: #fff;
  color: #000;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  transition: .2s;
  border-left: 1px solid #ef2112;
  border-top: 1px solid #ef2112;
  border-bottom: 1px solid #ef2112;
  height: 50px;
}

.radio_btn_state label:last-child{
  border-right: 1px solid #ef2112;
}

.radio_btn_state label:first-of-type{
  border-radius: 3px 0 0 3px;
}
.radio_btn_state label:last-of-type{
  border-radius: 0 3px 3px 0;
}  
.radio_btn_state input[type="radio"]:checked + .switch-on {
  background-color: #fff3d8;
  color: #000;
}
.radio_btn_state input[type="radio"]:checked + .switch-off {
  background-color: #fff3d8;
  color: #000;
}

.w-28{
  width:30%!important;
}

.w100p{
  width:100%;
}

.satei_flo a:first-child {
  background-color: #198fff;
}
.satei_flo a:last-child {
  border: 2px solid #27ae60;
  background-color: #FFF;
  color: #27ae60;
}

.white_back{
  background-color:#fff!important;
}

.p-10{
  padding:0 10px;
}

.send_area{
  background-color:#fff3d8;
  padding:20px;
}

.send_area_txt{
  text-align:center;
  font-size:13px;
  display: flex;
  justify-content: center;
}

.satei_send_bt{
  display: block;
  margin: 20px 0px 0;
  border-radius: 5px;
  height: 60px;
  width:60%;
  text-align: center;
  line-height: 62px;
  font-weight: bold;
  font-size: 18px;
  pointer-events: none;
  pointer-events:auto;
  background: #198fff;
  color: #FFF;
}

.satei_back_bt{
  display: block;
  margin: 20px 0px 0;
  border-radius: 5px;
  height: 60px;
  width:30%;
  text-align: center;
  line-height: 62px;
  font-weight: bold;
  font-size: 18px;
  pointer-events: none;
  pointer-events:auto;
  background: #dce0e1;
  color: #000;
}

.button{
  display: inline-block;
  margin: 20px 5px 0px;
}

/*--------  開閉ボタン  --------*/
.button_other {
  text-align:right;
  padding:10px;
}

.button_address {
  text-align:right;
  padding:10px;
}

#address_switch {
  width: 100%;
}

.address_form{
  width: 100%;
}

.zip_form{
  width: 100%;
}

.switch_btn{
  text-align:right;
}