@charset "utf-8";

/*
■「typeXxx」について
「typeXxx」自体にはスタイルを当てない。あくまでスタイルを定義するエリアを定める
「normalBlock」につける場合が多い。
*/

/* ############################### typeTop */

.typeTop.btnTopBlock + .iconBlock{
  margin-top: 100px;
}

/* ############################### typeForm */

.typeForm .ttl{
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 20px;
}
.typeForm .ttl:first-of-type{margin-top: 0;}

.typeForm .sub{
  font-size: 1.5rem;
  margin-top: 20px;
}

.inputBox{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex: auto;
  margin-top: 15px;
  position: relative;
}

/* 名前 */
.inputBox.name li input[type='text']{width: 370px;margin-right: 20px;}
/* 誕生日 */
.inputBox.birthday li input[type='text']{width: 150px;}
.inputBox.birthday li .txt{display: inline-block;margin: 0 10px;}
/* 性別 */
.inputBox.sex li label > span{width: 370px;margin-right: 20px;}
/* 住所 */
.inputBox.postal input[type='text']{width: 370px;margin-right: 20px;}
.inputBox.address{width: 100%}
.inputBox.address li{width: 100%}
.inputBox.address li input[type='text']{width: 100%;}
.inputBox.address li .formSelect{width: 370px;}
/* 電話 */
.inputBox.tel li input[type='text']{width: 95px;}
.inputBox.tel li .txt{display: inline-block;margin: 0 10px;}
/* 横1 */
.inputBox.col1{justify-content: center !important;}
.inputBox.col1 li{width: 100%;margin-top: 20px;}
.inputBox.col1 li:first-child{margin-top: 0;}
.inputBox.col1 li label > span{width: 100%;}
/* 横2 */
.inputBox.col2{justify-content: space-between !important;}
.inputBox.col2 li{width: calc(50% - 10px);margin-top: 20px;}
.inputBox.col2 li:nth-child(-n + 2){margin-top: 0;}
.inputBox.col2 li label > span{width: 100%;}
/* 横2小 */
.inputBox.col2s li{margin-top: 20px;}
.inputBox.col2s li:nth-child(-n + 2){margin-top: 0;}
.inputBox.col2s li label > span{width: 370px;margin-right: 20px;}
/* 横3 */
.inputBox.col3{justify-content: space-between !important;}
.inputBox.col3 li{width: calc(33% - 10px);margin-top: 20px;}
.inputBox.col3 li:nth-child(-n + 3){margin-top: 0;}
.inputBox.col3 li label > span{width: 100%;}
.inputBox.col3:after{
  content:"";
  display: block;
  width: calc(33% - 10px);
}

  @media screen and (max-width:768px){

  .typeForm .sub{
    font-size: 1.3rem;
    margin-top: 10px;
  }

  .typeForm .inputBox{
    margin-top: 8px;
  }

  .typeForm .inputBox{
    font-size: 1.3rem;
  }

  /* 名前 */
  .inputBox.name{width: 100%;}
  .inputBox.name li{display: block !important;width: 100%;}
  .inputBox.name li input[type='text']{width: 100%;margin: 5px 0 0 0;}
  /* 誕生日 */
  .inputBox.birthday li{width: calc(100% / 3);}
  .inputBox.birthday li input[type='text']{width: calc(100% - 25px);}
  .inputBox.birthday li .txt{margin: 0 5px;}
  /* 性別 */
  .inputBox.sex{width: 100%;}
  .inputBox.sex li{width: 50%;}
  .inputBox.sex li label > span{width: calc(100% - 5px);margin-right: 0;}
  .inputBox.sex li:last-child label > span{margin-left: 5px;}
  /* 住所 */
  .inputBox.postal input[type='text']{width: 140px;margin-right: 10px;}
  .inputBox.postal a{font-size: 1.3rem;}
  .inputBox.postal a:after{bottom: 4px;}
  .inputBox.address{width: 100%}
  .inputBox.address li{width: 100%;}
  .inputBox.address li input[type='text']{width: 100%;}
  .inputBox.address li .formSelect{width: 200px;}
  /* 電話 */
  .inputBox.tel li{width: 34%}
  .inputBox.tel li input[type='text']{width: calc(100% - 16px);}
  .inputBox.tel li .txt{display: inline-block;margin: 0 5px;}
  .inputBox.tel li:last-child{width: 31%;}
  .inputBox.tel li:last-child input[type='text']{width: 100%;}
  /* 横1 */
  .inputBox.col1{justify-content: center !important;}
  .inputBox.col1 li{width: 100%;margin-top: 10px;}
  .inputBox.col1 li:first-child{margin-top: 0;}
  /* 横2 */
  .inputBox.col2{justify-content: center !important;}
  .inputBox.col2 li{width: 100%;}
  .inputBox.col2 li:first-child{margin-top: 0;}
  .inputBox.col2 li:nth-child(n + 2){margin-top: 10px;}
  /* 横2小 */
  .inputBox.col2s{width: 100%;justify-content: space-between !important;}
  .inputBox.col2s li{width: calc(50% - 5px);margin-right: 0;margin-top: 10px;}
  /* 横3 */
  .inputBox.col3{justify-content: center !important;}
  .inputBox.col3 li{width: 100%;margin-top: 10px;}
  .inputBox.col3 li:first-child{margin-top: 0;}
  .inputBox.col3 li:nth-child(n + 2){margin-top: 10px;}

  }/* --- max-width:768px */

/* ############################### typeBorderBox */

.typeBorderBox .ttl{
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  @media screen and (max-width:768px){

  .typeBorderBox .ttl{
    font-size: 1.6rem;
  }

  .typeBorderBox .txt{
    font-size: 1.3rem;
  }

  }/* --- max-width:768px */

/* ############################### typeFaq */

.typeFaq .accBox{
  border-bottom: 1px solid #E5E5E5;
}
.typeFaq .accBox:first-of-type{border-top: 1px solid #E5E5E5;}

.typeFaq .accBox{
  padding-top: 20px;
  padding-bottom: 20px;
}

.typeFaq .accContents{
  padding-top: 20px;
  padding-bottom: 10px;
}

  @media screen and (max-width:768px){

  .typeFaq .accBox{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .typeFaq .accContents{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  }/* --- max-width:768px */

/* ############################### typeInput */

.typeInput .btnAcc{
  font-size: 1.8rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 30px 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.typeInput .isOpened .btnAcc{border-bottom: none;}

.typeInput .accContents{
  padding: 0px 40px;
}

.typeInput .ttl{
  margin: 20px 0 10px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  @media screen and (max-width:768px){

  .typeInput .btnAcc{
    font-size: 1.6rem;
    padding: 20px 0;
  }

  .typeInput .accContents{
    padding: 0;
  }

  }/* --- max-width:768px */

/* ############################### typeFavorite */

.typeFavorite .accBox{
  border-bottom: 1px solid #E5E5E5;
}
.typeFavorite .accBox:first-of-type{border-top: 1px solid #E5E5E5;}

.typeFavorite .accBox{
  padding-top: 20px;
  padding-bottom: 20px;
}

.typeFavorite .accContents{
  padding-top: 20px;
  padding-bottom: 10px;
}

  @media screen and (max-width:768px){

  .typeFavorite .accBox{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .typeFavorite .accContents{
    padding-top: 10px;
    padding-bottom: 10px;
  }

  }/* --- max-width:768px */

/* ############################### typeComfirm */

.typeComfirm .grayBox .ttl{
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typeComfirm .grayBox .txt{
  margin-top: 10px;
}

.typeComfirm .check{
  text-align: center;
  margin-top: 20px;
}

  @media screen and (max-width:768px){

  .typeComfirm .grayBox .ttl{
    font-size: 1.5rem;
  }

  .typeComfirm .grayBox .txt{
    font-size: 1.3rem;
  }

  }/* --- max-width:768px */

/* ############################### typeTerms */

.typeTerms .tableBox{
  display: table;
  margin: auto;
}

.typeTerms .tableBox li{
  display: table-cell;
}
.typeTerms .tableBox li:first-child{padding-right: 20px;}
.typeTerms .tableBox li:last-child{padding-left: 20px;}

.typeTerms .tableBox li span{
  width: 240px;
}

  @media screen and (max-width:768px){

  .typeBorderBox .indentList li{
    font-size: 1.5rem;
  }

  .typeTerms .tableBox{
    display: block;
  }

  .typeTerms .tableBox li{
    display: block;
    margin: 5px 0;
  }
  .typeTerms .tableBox li:first-child{padding-right: 0;}
  .typeTerms .tableBox li:last-child{padding-left: 0;}

  .typeTerms .tableBox li span{
    width: 100%;
  }

  }/* --- max-width:768px */

/* ############################### typePayment */

.typePayment .section{
  padding: 40px;
  background: #F7F7F7;
}

.typePayment .name{
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typePayment .box{
  border: 1px solid #EE5252;
  background: #fff;
  padding: 30px 40px;
  margin-top: 15px;
}

.typePayment .box .txt{
  margin-top: 0;
  color: #EE5252;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typePayment .bttn{
  margin-top: 40px;
}

  @media screen and (max-width:768px){

  .typePayment .section{
    padding: 20px;
  }

  .typePayment .box{
    padding: 15px 20px;
  }

  .typePayment .box .txt{
    text-align: center;
  }

  .typePayment .bttn{
    margin-top: 20px;
  }

  }/* --- max-width:768px */

/* ############################### typeDetail */

.typeDetail .section{
  background: #fff;
  box-shadow: rgba(0,0,0,0.1) 0 0 5px 3px;
  padding: 30px;
}

.typeDetail .section .ttl a{
  font-size: 2.6rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typeDetail .section .blueHead{
  margin-top: 40px;
}
.typeDetail .section .blueHead:first-of-type{margin-top: 20px;}

.typeDetail .section .box{
  padding: 20px 0;
  border-bottom: 1px dotted #ccc;
}

.typeDetail .bttn{
  margin-top: 30px;
}

  @media screen and (max-width:768px){

  .typeDetail .section{
    padding: 20px;
  }

  .typeDetail .section .ttl a{
    font-size: 1.8rem;
  }

  .typeDetail .section .blueHead{
    margin-top: 20px;
  }
  .typeDetail .section .blueHead:first-of-type{margin-top: 10px;}

  .typeDetail .section .box{
    padding: 10px 0;
  }

  .typeDetail .section .box .txt{
    font-size: 1.5rem;
    margin-top: 5px;
  }

  .typeDetail .bttn{
    margin-top: 20px;
  }

  }/* --- max-width:768px */

/* ############################### typeImgup */

.typeImgup .contentsArea{
  display: table;
  width: 100%;
}

.typeImgup .contentsArea .left{
  display: table-cell;
  vertical-align: top;
}

.typeImgup .contentsArea .left .img{
  width: 225px;
  margin: auto;
}

.typeImgup .contentsArea .left .img span{
  cursor: default !important;
}

.typeImgup .contentsArea .left .bttn{
  margin-top: 40px;
}

.typeImgup .contentsArea .left .bttn a{
  width: 330px;
  margin: auto;
}

.typeImgup .contentsArea .left .colBox{
  margin-top: 30px;
}

.typeImgup .contentsArea .right{
  display: table-cell;
  vertical-align: top;
  padding-left: 50px;
}

.typeImgup .contentsArea .right .emBox{
  border: 2px solid #EE5252;
  padding: 20px;
  border-radius: 7px;
  position: relative;
}

.typeImgup .contentsArea .right .emBox:after{
  content: '';
  position: absolute;
  display: block;
  background: #fff;
  border-right: 2px solid #EE5252;
  border-bottom: 2px solid #EE5252;
  bottom: -10px;
  left: calc(50% - 8px);
  width: 15px;
  height: 15px;
  background-size: contain;
  transform: rotateZ( 45deg );
}

  @media screen and (max-width:768px){

  .typeImgup .contentsArea{
    display: block;
    width: 100%;
  }

  .typeImgup .contentsArea .left{
    display: block;
    width: 100%;
  }

  .typeImgup .contentsArea .left .img{
    width: 70%;
    max-width: 250px;
  }

  .typeImgup .contentsArea .left .bttn{
    margin-top: 30px;
  }

  .typeImgup .contentsArea .left .bttn a{
    width: 75%;
    max-width: 280px;
  }

  .typeImgup .contentsArea .left .colBox{
    margin-top: 20px;
  }

  .typeImgup .contentsArea .left .colBox li{
    width: calc(50% - 5px);
  }

  .typeImgup .contentsArea .left .colBox .btnSmall{
    width: 100%;
    padding: 15px 0;
  }

  .typeImgup .contentsArea .right{
    border-top: 1px solid #999;
    margin-top: 30px;
    padding-top: 30px;
    display: block;
    width: 100%;
    padding-left: 0;
    font-size: 1.5rem;
  }

  .typeImgup .contentsArea .right .emBox{
    padding: 15px;
  }

  }/* --- max-width:768px */

.typeImgup .skyblueBox{
  background: #EEF6FE;
  padding: 30px 40px;
}

.typeImgup .redBox{
  background: #FDE5E5;
  padding: 30px 40px;
  margin-top: 30px;
  display: inline-block;
}

  @media screen and (max-width:768px){

  .typeImgup .skyblueBox{
    padding: 20px 15px;
  }

  .typeImgup .redBox{
    padding: 20px 15px;
    margin-top: 20px;
    display: block;
  }

  .typeImgup .grayBox{
    padding: 20px 15px !important;
  }

  }/* --- max-width:768px */

/* ===================== editBox */

.typeImgup .editBox{
  display: table;
  width: 100%;
}

.typeImgup .editBox > li{
  display: table-cell;
  text-align: center;
  width: calc(100% / 3);
}

.typeImgup .editBox > li > div{
  width: 250px;
  position: relative;
}
.typeImgup .editBox > li:first-child > div{margin: 0 auto 0 0;}
.typeImgup .editBox > li:nth-child(2) > div{margin: 0 auto 0;}
.typeImgup .editBox > li:last-child > div{margin: 0 0 0 auto;}

.typeImgup .editBox > li > div:after{
  content: '';
  position: absolute;
  display: block;
  background: url(/images/img/arw_blue.png) no-repeat center;
  bottom: 65px;
  left: calc(50% - 32px);
  width: 43px;
  height: 21px;
  background-size: contain;
}

.typeImgup .editBox > li:first-child > div:before{
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: -33px;
  width: 0;
  height: 100%;
  border-right: 1px solid #ccc;
  background-size: contain;
}

.typeImgup .editBox > li:last-child  > div:before{
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: -33px;
  width: 0;
  height: 100%;
  border-right: 1px solid #ccc;
  background-size: contain;
}

.typeImgup .editBox .ttl{
  text-align: left;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: 40px;
  position: relative;
}

.typeImgup .editBox .ttl:before{
  content: '';
  position: absolute;
  display: block;
  left: 0;
  background-size: contain !important;
}

.typeImgup .editBox li:first-child .ttl:before{
  background: url(/images/img/icon_sun.png) no-repeat center;
  top: -3px;
  width: 27px;
  height: 27px;
}

.typeImgup .editBox li:nth-child(2) .ttl:before{
  background: url(/images/img/icon_circle.png) no-repeat center;
  top: -3px;
  width: 24px;
  height: 26px;
}

.typeImgup .editBox li:last-child .ttl:before{
  background: url(/images/img/icon_zoomup.png) no-repeat center;
  top: -3px;
  width: 27px;
  height: 27px;
}

.typeImgup .editBox .normalList{
  margin-top: 20px;
}

.typeImgup .editBox .cap{
  font-size: 1.3rem;
}

.typeImgup .editBox .cap.after{
  color: #52A0EE;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typeImgup .ng{
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  padding-left: 70px;
  margin-top: 30px;
  color: #EE5252;
}

.typeImgup .ng:before{
  content: '';
  position: absolute;
  display: block;
  background: url(/images/img/icon_ng.png) no-repeat center;
  top: calc(50% - 17px);
  left: 0;
  width: 58px;
  height: 29px;
  background-size: contain;
}

  @media screen and (max-width:768px){

  .typeImgup .editBox{
    display: block;
  }

  .typeImgup .editBox > li{
    display: block;
    width: 100%;
  }

  .typeImgup .editBox > li > div{
    width: 100%;
    position: relative;
  }
  .typeImgup .editBox > li:first-child > div{margin: 0 auto 0;}
  .typeImgup .editBox > li:nth-child(2) > div{margin: 50px auto 0;}
  .typeImgup .editBox > li:last-child > div{margin: 50px auto 0;}

  .typeImgup .editBox > li > div:after{
    bottom: calc(50% - 36px);
    left: calc(50% - 23px);
    width: 32px;
    height: 16px
  }

  .typeImgup .editBox > li:first-child > div:before{
    display: none;
  }

  .typeImgup .editBox > li:nth-child(2) > div:before{
    content: '';
    position: absolute;
    display: block;
    top: -25px;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid #ccc;
    background-size: contain;
  }

  .typeImgup .editBox > li:last-child  > div:before{
    content: '';
    position: absolute;
    display: block;
    top: -25px;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid #ccc;
    background-size: contain;
  }

  .typeImgup .editBox .normalList{
    margin-left: auto;
    margin-right: auto;
  }

  .typeImgup .editBox .ttl{
    padding-left: 30px;
  }

  .typeImgup .editBox li:first-child .ttl:before{
    background: url(/images/img/icon_sun.png) no-repeat center;
    top: 0;
    width: 20px;
    height: 20px;
  }

  .typeImgup .editBox li:nth-child(2) .ttl:before{
    background: url(/images/img/icon_circle.png) no-repeat center;
    top: 0;
    width: 18px;
    height: 19px;
  }

  .typeImgup .editBox li:last-child .ttl:before{
    background: url(/images/img/icon_zoomup.png) no-repeat center;
    top: 0;
    width: 20px;
    height: 20px;
  }

  .typeImgup .ng{
    padding-left: 0;
    padding-top: 35px;
  }

  .typeImgup .ng:before{
    top: 0;
  }

  }/* --- max-width:768px */

/* ===================== picBox */

.typeImgup .picBox{
  margin-top: 10px;
}

.typeImgup .picBox li{
  display: inline-block;
  width: 158px;
  vertical-align: top;
  margin-right: 20px;
}
.typeImgup .picBox li:last-child{margin-right: 0;}

.typeImgup .picBox li .img{
  position: relative;
}

.typeImgup .picBox li .img:before,
.typeImgup .picBox li .img:after{
  content: '';
  position: absolute;
  display: block;
  top: 5px;
  left: 20px;
  width: 0;
  height: 24px;
  border-right: 2px solid #EE5252;
  background-size: contain;
}
.typeImgup .picBox li .img:before{  transform: rotateZ( -45deg );}
.typeImgup .picBox li .img:after{  transform: rotateZ( 45deg );}

  @media screen and (max-width:768px){

  .typeImgup .picBox{
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: auto;
  }

  .typeImgup .picBox li{
    width: calc(50% - 8px);
    margin-right: 0;
    margin-top: 10px;
  }

  }/* --- max-width:768px */

/* ===================== etc */

.typeImgup .imgup{
  margin-top: 40px;
}

.typeImgup .imgup span{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 225px;
  height: 300px;
  position: relative;
  overflow: hidden;
  cursor: default !important;
/*  background: #fff !important;*/
}
.typeImgup .imgup div{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 225px;
  height: 300px;
  position: relative;
  overflow: hidden;
  cursor: default !important;
/*  background: #fff !important;*/
}

.typeImgup .imgup span:after{
  pointer-events:none;
  content: '';
  position: absolute;
  display: block;
  background: url(/images/img/bg_editspot_blank.png) no-repeat center !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
}

.typeImgup .imgup div:after{
  pointer-events:none;
  content: '';
  position: absolute;
  display: block;
  background: url(/images/img/bg_editspot_blank.png) no-repeat center !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
}

.typeImgup .imgup span img{
  display: block;
  max-width: initial !important;
  width: auto;
}

.typeImgup .imgup div img{
  display: block;
  max-width: initial !important;
  width: auto;
}

  @media screen and (max-width:768px){

  .typeImgup .imgup{
    margin-top: 30px;
  }

  }/* --- max-width:768px */

/* ===================== btnBlock */

.btnBlock.typeImgup .frame960{
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #ccc;
}

  @media screen and (max-width:768px){

  .btnBlock.typeImgup .frame960{
    margin-top: 30px;
    padding-top: 30px;
  }

  }/* --- max-width:768px */

/* ############################### typeField */

.typeField .section{
  background: #fff;
  box-shadow: rgba(0,0,0,0.1) 0 0 5px 3px;
  padding: 30px;
  margin-top: 30px;
}

.typeField .section .ttl a{
  font-size: 2.6rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typeField .section .blueHead{
  margin-top: 40px;
}
.typeField .section .blueHead:first-of-type{margin-top: 20px;}

.typeField .section .box{
  padding: 20px 0;
  border-bottom: 1px dotted #ccc;
}

.typeField .bttn{
  margin-top: 30px;
}

  @media screen and (max-width:768px){

  .typeField .section{
    padding: 20px;
  }

  .typeField .section .ttl a{
    font-size: 1.8rem;
  }

  .typeField .section .blueHead{
    margin-top: 20px;
  }
  .typeField .section .blueHead:first-of-type{margin-top: 10px;}

  .typeField .section .box{
    padding: 10px 0;
  }

  .typeField .section .box .txt{
    font-size: 1.5rem;
    margin-top: 5px;
  }

  .typeField .bttn{
    margin-top: 20px;
  }

  }/* --- max-width:768px */

/* ############################### typeImgedit */

.typeImgedit .editArea{
  background: #EEF6FE;
  padding: 50px 100px;
}

.typeImgedit .editArea .upperZone{
  position: relative;
  display: table;
  width: 100%;
}

.typeImgedit .editArea .upperZone .imgSpot{
  display: table-cell;
  vertical-align: top;
  width: 225px;
}

#editBox{
  position: relative;
}

#editBox span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 225px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #eee;
  cursor: move;
  border: 1px solid #ccc;
}

#editBox div{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 225px;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #eee;
  cursor: move;
  border: 1px solid #ccc;
}

#editBox span:after{
  pointer-events:none;
  content: '';
  position: absolute;
  display: block;
  background: url(/images/img/bg_editspot.png) no-repeat center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

#editBox div:after{
  pointer-events:none;
  content: '';
  position: absolute;
  display: block;
  background: url(/images/img/bg_editspot.png) no-repeat center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

#editBox span img{
  display: block;
  max-width: initial !important;
  position: absolute;
}

#editBox div img{
  display: block;
  max-width: initial !important;
  position: absolute;
}

.typeImgedit .editArea .upperZone .btnSpot{
  display: table-cell;
  vertical-align: top;
  padding-left: 100px;
}

  @media screen and (max-width:768px){

  .typeImgedit .editArea{
    padding: 40px 20px;
  }

  .typeImgedit .editArea .upperZone{
    display: block;
    width: 100%;
  }

  .typeImgedit .editArea .upperZone .imgSpot{
    display: block;
    width: 100%;
  }

  #editBox span{
    margin: auto;
  }
  #editBox div{
    margin: auto;
  }

  #editBox span img{
    display: block;
    max-width: initial !important;
    width: auto;
  }
  
  #editBox div img{
    display: block;
    max-width: initial !important;
    width: auto;
  }

  .typeImgedit .editArea .upperZone .btnSpot{
    display: block;
    width: 100%;
    padding-left: 0;
    margin-top: 30px;
  }

  }/* --- max-width:768px */

/* ===================== editBox */

.typeImgedit .editBox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: auto;
  width: 435px;
}

.typeImgedit .editBox li{
  text-align: center;
  width: 25%;
}

.typeImgedit .editBox .txt{
  font-size: 1.2rem;
}
.typeImgedit .editBox li:nth-child(-n + 4) .txt{margin-top: 0}

.typeImgedit .editBox .bttn{
  margin-top: 5px;
}

.typeImgedit .editBox .bttn a{
  display: block;
  width: 60px;
  height: 60px;
  border: 2px solid #ccc;
  border-radius: 30px;
  background: #fff;
  position: relative;
}

.typeImgedit .editBox .bttn a:before{
  content: '';
  position: absolute;
  display: block;
  top: calc(50% - 20px);
  left:  calc(50% - 20px);
  width: 40px;
  height: 40px;
  background-size: contain !important;
}
.typeImgedit .editBox a.editRotateR:before{background: url(/images/img/edit_rright.png) no-repeat center;}
.typeImgedit .editBox a.editRotateL:before{background: url(/images/img/edit_rleft.png) no-repeat center;}
.typeImgedit .editBox a.editZoomIn:before{background: url(/images/img/edit_zoomin.png) no-repeat center;}
.typeImgedit .editBox a.editZoomOut:before{background: url(/images/img/edit_zoomout.png) no-repeat center;}
.typeImgedit .editBox a.editContrast:before{background: url(/images/img/edit_contrast.png) no-repeat center;}
.typeImgedit .editBox a.editBright:before{background: url(/images/img/edit_bright.png) no-repeat center;}
.typeImgedit .editBox a.editBack:before{background: url(/images/img/edit_back.png) no-repeat center;}
.typeImgedit .editBox a.editReset:before{background: url(/images/img/edit_reset.png) no-repeat center;}

.typeImgedit .editBox a.isActive,
.typeImgedit .editBox .bttn a:hover{background: #52A0EE;border-color: #52A0EE;}
.typeImgedit .editBox a.isActive.editRotateR:before,
.typeImgedit .editBox a.editRotateR:hover:before{background: url(/images/img/edit_rright_on.png) no-repeat center;}
.typeImgedit .editBox a.isActive.editRotateL:before,
.typeImgedit .editBox a.editRotateL:hover:before{background: url(/images/img/edit_rleft_on.png) no-repeat center;}
.typeImgedit .editBox a.isActive.editZoomIn:before,
.typeImgedit .editBox a.editZoomIn:hover:before{background: url(/images/img/edit_zoomin_on.png) no-repeat center;}
.typeImgedit .editBox a.isActive.editZoomOut:before,
.typeImgedit .editBox a.editZoomOut:hover:before{background: url(/images/img/edit_zoomout_on.png) no-repeat center;}
.typeImgedit .editBox a.isActive.editContrast:before,
.typeImgedit .editBox a.editContrast:hover:before{background: url(/images/img/edit_contrast_on.png) no-repeat center;}
.typeImgedit .editBox a.isActive.editBright:before,
.typeImgedit .editBox a.editBright:hover:before{background: url(/images/img/edit_bright_on.png) no-repeat center;}
.typeImgedit .editBox a.isActive.editBack:before,
.typeImgedit .editBox a.editBack:hover:before{background: url(/images/img/edit_back_on.png) no-repeat center;}
.typeImgedit .editBox a.isActive.editReset:before,
.typeImgedit .editBox a.editReset:hover:before{background: url(/images/img/edit_reset_on.png) no-repeat center;}

  @media screen and (max-width:768px){

  .typeImgedit .editBox{
    width: 100%;
  }

  .typeImgedit .editBox .txt{
    font-size: 1rem;
  }

  .typeImgedit .editBox .bttn a{
    width: 50px;
    height: 50px;
    border-radius: 25px;
  }

  .typeImgedit .editBox .bttn a:before{
    top: calc(50% - 15px);
    left:  calc(50% - 15px);
    width: 30px;
    height: 30px;
  }

  }/* --- max-width:768px */

/* ===================== optionBox */

.typeImgedit .optionBox{
  background: #fff;
  padding: 20px;
  margin-top: 15px;
  min-height: 108px;
}

.typeImgedit .optionBox .options{
  display: none;
}
.typeImgedit .optionBox .options.isActive{display: block;}

.typeImgedit .optionBox .ttl{
  font-size: 1.2rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typeImgedit .optionBox .btnBox{
  font-size: 0;
}

.typeImgedit .optionBox .btnBox li{
  display: inline-block;
  margin-right: 25px;
  margin-top: 10px;
}
.typeImgedit .optionBox .btnBox li:nth-child(4n){margin-right: 0;}

.typeImgedit .optionBox .btnBox .btn{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #52A0EE;
  width: 80px;
  height: 40px;
  border-radius: 5px;
}
.typeImgedit .optionBox .btnBox .btn:hover{background: #ddd;}

  @media screen and (max-width:768px){

  .typeImgedit .optionBox .btnBox li{
    width: 31%;
    margin-right: 3.5%;
    margin-top: 10px;
  }
  .typeImgedit .optionBox .btnBox li:nth-child(3n){margin-right: 0;}

  .typeImgedit .optionBox .btnBox .btn{
    width: 100%;
    height: 40px;
  }

  }/* --- max-width:768px */

/* ===================== bottomZone */

.typeImgedit .bottomZone{
  text-align: center;
  margin-top: 50px;
}

.typeImgedit .bottomZone .link{
  margin-top: 50px;
}

  @media screen and (max-width:768px){

  .typeImgedit .bottomZone{
    margin-top: 40px;
  }

  .typeImgedit .bottomZone .link{
    margin-top: 40px;
  }

  }/* --- max-width:768px */

/* ############################### typeIndex */

.typeIndex{
  background: #F7F7F7;
  margin-top: 0;
}

.typeIndex .section .accBox{
  background: #fff;
  position: relative;
  margin-top: 40px;
  box-shadow: rgba(0,0,0,0.1) 0 0 5px 3px;
}

.typeIndex .section .accBox > .ttl{
  padding: 30px;
}

.typeIndex .section .accBox > .ttl a{
  font-size: 2.6rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typeIndex .section .accBox .box .caution{
  margin-bottom: 15px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  padding-left: 30px;
}
.typeIndex .section .accBox .box.payed .caution{display: none;}

.typeIndex .section .accBox .box .caution span{display: none;font-weight: bold;}
.typeIndex .section .accBox .box.payed .caution .payed{display: none;display: block;}
.typeIndex .section .accBox .box.notPayed .caution .notPayed{color: #EE5252;display: block;}
.typeIndex .section .accBox .box.notPayed.afterLimit .caution .notPayed{color: #333;display: inline-block;}
.typeIndex .section .accBox .box.notPayed.afterLimit .caution .afterLimit{color: #EE5252;display: inline-block;margin-left: 10px}
.typeIndex .section .accBox .box.temp .caution .temp{color: #333;display: block;}

.typeIndex .section .accBox .box.notPayed .caution:before{
  content: '';
  position: absolute;
  display: block;
  background: url(/images/img/icon_err.png) no-repeat center;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background-size: contain;
}

.typeIndex .section .accBox .box.temp .caution:before{
  content: '';
  position: absolute;
  display: block;
  background: url(/images/img/icon_err_temp.png) no-repeat center;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background-size: contain !important;
}

.typeIndex .section .accBox .box{
  padding: 40px;
  border-top: 1px dotted #999;
}
.typeIndex .section .accBox .box.payed{}
.typeIndex .section .accBox .box.notPayed{background: #FDE5E5;}
.typeIndex .section .accBox .box.notPayed.afterLimit {background: #e7e7e7;}
.typeIndex .section .accBox .box.temp{background: #fef9dc;}

.typeIndex .section .accBox .box ul{
  display: table;
  width: 100%;
}

.typeIndex .section .accBox .box ul li{
  display: table-cell;
  vertical-align: middle;
}

.typeIndex .section .accBox .box .icon{
  width: 100px;
}

.typeIndex .section .accBox .box .icon p{
  display: none;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 40px;
  font-size: 1.4rem;
  border-radius: 3px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.typeIndex .section .accBox .box.payed .icon p{border: 2px solid #17C700;color: #fff;background: #17C700;}
.typeIndex .section .accBox .box.notPayed .icon p{border: 2px solid #EE5252;color: #fff;background: #EE5252;}
.typeIndex .section .accBox .box.temp .icon p{border: 2px solid #F5DD43;color: #fff;background: #F5DD43;}

.typeIndex .section .accBox .box.payed .icon .payed{display: flex;}
.typeIndex .section .accBox .box.notPayed .icon .notPayed{display: flex;}
.typeIndex .section .accBox .box.temp .icon .temp{display: flex;}

.typeIndex .section .accBox .box .info .txt{
  margin-top: 0;
}

.typeIndex .section .accBox .box .info .name{
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.typeIndex .section .accBox .box .btn{
  width: 210px;
}

.typeIndex .section .accBox .box .btnBorder{
  display: none;
}
.typeIndex .section .accBox .box.payed .btn .payed{display: flex;}
.typeIndex .section .accBox .box.notPayed .btn .notPayed{display: flex;color: #fff;background: #EE5252;border-color: #EE5252;}
.typeIndex .section .accBox .box.notPayed .btn .btnBorder.arwR:before {border-right: 2px solid #fff;border-bottom: 2px solid #fff;}
.typeIndex .section .accBox .box.notPayed .btn .notPayed:hover{background: #fff;color: #EE5252;}
.typeIndex .section .accBox .box.notPayed .btn:hover .btnBorder.arwR:before {border-right: 2px solid #EE5252;border-bottom: 2px solid #EE5252;}
.typeIndex .section .accBox .box.notPayed.afterLimit .btn .btnBorder.arwR:before {border-right: 2px solid #52A0EE;border-bottom: 2px solid #52A0EE;}

.typeIndex .section .accBox .box.notPayed.afterLimit .btn .notPayed{display: none;}
.typeIndex .section .accBox .box.notPayed.afterLimit .btn .temp{display: flex;}
.typeIndex .section .accBox .box.temp .btn .temp{display: flex;}

.typeIndex .section .btnBorder em{
  font-size: 1.6rem;
}

.typeIndex .frame960 .section+.bttn{
  margin-top: 30px;
}

  @media screen and (max-width:768px){
  .typeIndex .section .accBox .box .caution span {font-size: 4vw}
  .typeIndex .section .accBox .box .caution {margin-bottom: 4vw;padding-left: 8vw;}
  .typeIndex .section .accBox .box.notPayed .caution:before {width: 5vw;height: 5vw;}

  .typeIndex .section .accBox{
    margin-top: 20px;
  }

  .typeIndex .section .accBox > .ttl{
    padding: 20px;
  }

  .typeIndex .section .accBox > .ttl a{
    font-size: 1.8rem;
  }

  .typeIndex .section .accBox .box{
    padding: 20px;
  }

  .typeIndex .section .accBox .box ul{
    display: block;
  }

  .typeIndex .section .accBox .box ul li{
    display: block;
    width: 100%;
    margin-top: 15px;
  }
  .typeIndex .section .accBox .box ul li:first-child{margin-top: 0;}

  .typeIndex .section .accBox .box .icon{
    width: auto;
  }
  .typeIndex .section .accBox .box .icon p{
    width: 75px;
    height: 25px;
    font-size: 1.4rem;
    border-radius: 2px;
  }

  .typeIndex .section .accBox .box .btn{
    width: 100%;
    max-width: 275px;
    margin-left: auto;
    margin-right: auto;
  }

  .typeIndex .section .btnBorder em{
    font-size: 1.5rem;
  }

  .typeIndex .frame960 > .bttn{
    margin-top: 30px;
  }

  }/* --- max-width:768px */
.paddingLeft70{
	padding-left:70px !important;
}