@charset "UTF-8";
.acWrap h3, .title-list-box, .list-box03, .list-box, h2.grayh, h2.gh, h2.ph, h2.oh {
  background: #ffffff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2f2f2));
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  /* CSS3 PIE */
  -pie-background: linear-gradient(top, #ffffff, #f2f2f2);
}

.acWrap .gh-subhead span.arrow_radius, .acWrap h3 span.arrow_radius, .acWrap h3, .sec-important-box, .btn_pageBackTop, .btn_pageBack, .btn_single, .btn, .section_radius, h2.grayh, h2.gh, h2.ph, h2.oh {
  position: relative\9 ;
  behavior: url(/common_auth/css/PIE.htc);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 head

================================================================================================= */
#head {
  background: #1b1b1b;
  padding: 6px 10px 6px;
}

.logoLv5 {
  width: 160px;
  float: left;
}
.logoLv5 img {
  vertical-align: middle;
}

#head_langBox {
  float: right;
  position: relative;
  color: #bebebe;
  text-align: right;
  font-size: 13px;
}
@media screen and (max-width: 640px) {
  #head_langBox {
    font-size: 12px;
  }
}

#head_langBox #head_langBox_langBtn {
  display: block;
  cursor: pointer;
  padding: 5px 0.8em;
  border-radius: 5px;
  border: 2px solid #bdbdbd;
}
@media screen and (max-width: 640px) {
  #head_langBox #head_langBox_langBtn {
    padding: 0.3em 1em;
    border-radius: 3px;
    border: 1px solid #bdbdbd;
    margin-top: 0.2em;
    font-size: 12px;
  }
}

#head_langBox #head_langBox_langBtn.head_langBox_langBtn-uk {
  padding-right: 0.5em;
  padding-left: 0.5em;
}

#head_langBox ul {
  position: absolute;
  top: 35px;
  right: 0;
  z-index: 9999;
  display: none;
  width: 15em;
}
@media screen and (max-width: 640px) {
  #head_langBox ul {
    top: 30px;
  }
}

#head_langBox ul li a {
  display: block;
  color: #bebebe;
  height: 62px;
  line-height: 62px;
  background-color: #1b1b1b;
  padding-right: 20px;
  padding-left: 20px;
}
#head_langBox ul li a:hover {
  background-color: #4b4e56;
  color: #ffffff;
}

.head_langBox_langBtn-txt {
  display: inline;
}

.head_langBox_langBtn-icon {
  width: 18px;
  padding-left: 0.8em;
}
.head_langBox_langBtn-icon img {
  vertical-align: middle;
}

.head_langBox_langBtn-jp a {
  background: url(/common_auth/img/flag_japan.png) no-repeat right 20px center;
}

.head_langBox_langBtn-fr a {
  background: url(/common_auth/img/flag_french.png) no-repeat right 20px center;
}

.head_langBox_langBtn-it a {
  background: url(/common_auth/img/flag_italian.png) no-repeat right 20px center;
}

.head_langBox_langBtn-de a {
  background: url(/common_auth/img/flag_german.png) no-repeat right 20px center;
}

.head_langBox_langBtn-sp a {
  background: url(/common_auth/img/flag_spanish.png) no-repeat right 20px center;
}

.head_langBox_langBtn-nl a {
  background: url(/common_auth/img/flag_dutch.png) no-repeat right 20px center;
}

.head_langBox_langBtn-ko a {
  background: url(/common_auth/img/flag_korean.png) no-repeat right 20px center;
}

@media screen and (max-width: 640px) {
  #head {
    padding: 0px 10px 5px;
  }
  .logoLv5 {
    width: 100px;
    margin-top: 0.4em;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 wrapper

================================================================================================= */
#wrapper {
  position: relative;
  min-height: 100%;
}

#mainArea {
  padding: 20px 0 20px;
  background: #ffffff;
}
#mainArea h1 {
  width: 175px;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  #mainArea {
    padding: 10px 0;
    position: relative;
  }
  #mainArea h1 {
    width: 60px;
    margin: 0 0 0 30px;
  }
}

#contents {
  padding-top: 1px;
  padding-bottom: 6em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 h1-h6

================================================================================================= */
h2 {
  font-weight: bold;
  font-size: 125%;
  padding: 10px 17px;
}
@media screen and (max-width: 640px) {
  h2 {
    font-size: 14px;
    padding: 0.7em 14px;
  }
}
h2.grayh, h2.gh, h2.ph, h2.oh {
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  border-radius: 10px 10px 0px 0px/10px 10px 0px 0px;
}
h2.nr {
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  border-radius: 10px 10px 0px 0px/10px 10px 0px 0px;
  background: #1b1b1b;
  color: #ffffff;
}
h2.grayh {
  color: #595656;
  border-bottom: 3px solid #595656;
}
h2.gh {
  color: #66cb00;
  border-bottom: 3px solid #66cb00;
}
h2.ph {
  color: #e62087;
  border-bottom: 3px solid #e62087;
}
h2.oh {
  color: #ff8a00;
  border-bottom: 3px solid #ff8a00;
}

h3 {
  font-weight: bold;
  font-size: 100%;
  margin: 20px 0 0;
}
h3.gh {
  background: #66cb00;
  font-size: 112.5%;
  color: #ffffff;
  text-align: center;
  border-bottom: 2px solid #488000;
  padding: 0.8em 0;
  text-shadow: 1px 1px 0 #488000;
}
h3.grayh {
  background: #e6e6e6;
  font-size: 112.5%;
  color: #4d4d4d;
  text-align: center;
  border-bottom: 2px solid #bfbfbf;
  padding: 0.8em 0;
  text-shadow: 1px 1px 0 #ffffff;
}
h3.bh {
  background: #4d4d4d;
  font-size: 112.5%;
  color: #ffffff;
  text-align: center;
  border-bottom: 2px solid #000000;
  padding: 0.8em 0;
  text-shadow: 1px 1px 0 #000000;
}
h3.blueh {
  background: #2099e6;
  font-size: 112.5%;
  color: #ffffff;
  text-align: center;
  border-bottom: 2px solid #125580;
  padding: 0.8em 0;
  text-shadow: 1px 1px 0 #125580;
}

.secBox .subhead {
  margin: 0;
}

.subhead {
  font-weight: bold;
  font-size: 100%;
  padding: 0.8em 1em;
  margin: 0 17px;
}
.subhead.g-subhead {
  background: #eefade;
  border-left: 7px solid #73cb00;
}
.subhead.blue-subhead {
  background: #e0f3ff;
  border-left: 7px solid #2099e6;
}
.subhead.gray-subhead {
  background: #ededed;
  border-left: 7px solid #4d4d4d;
}

@media screen and (max-width: 819px) {
  h3.gh, h3.grayh, h3.bh, h3.blueh {
    margin-top: 1em;
    text-align: left;
    font-size: 18px;
    padding: 0.4em 0 0.4em 14px;
  }
}
@media screen and (max-width: 640px) {
  h3.gh, h3.grayh, h3.bh, h3.blueh {
    border-bottom-width: 1px;
    margin-top: 1em;
    text-align: left;
    font-size: 14px;
    padding: 0.2em 0.6em 0.2em 14px;
  }
  h4 {
    font-size: 14px;
  }
  .subhead {
    margin: 0;
    font-size: 14px;
    padding: 0.6em 0.6em 0.6em 14px;
  }
}
.gh-subhead {
  color: #66cb00;
  background: #feffe6;
  border-top: 3px solid #66cb00;
  border-bottom: 1px dotted #66cb00;
  padding: 10px 15px;
}
@media screen and (max-width: 640px) {
  .gh-subhead {
    font-size: 14px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 text

================================================================================================= */
p.lead {
  font-size: 112.5%;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 640px) {
  p.lead {
    font-size: 14px;
    text-align: left;
  }
}

p.note,
ul.note li {
  font-size: 14px;
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (max-width: 640px) {
  p.note,
  ul.note li {
    font-size: 12px;
  }
}

p.note--indent_none,
ul.note--indent_none li {
  font-size: 14px;
}
@media screen and (max-width: 640px) {
  p.note--indent_none,
  ul.note--indent_none li {
    font-size: 12px;
  }
}

@media screen and (max-width: 640px) {
  p {
    font-size: 14px;
  }
}
.linkText .arrow_icon:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-top: 3px solid #00aeff;
  border-right: 3px solid #00aeff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow_step {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-style: solid;
  border-width: 30px 75px 0 75px;
  border-color: #bfbfbf transparent transparent transparent;
  text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 section

================================================================================================= */
.section {
  position: relative;
}

.section_radius {
  border-radius: 10px;
  background: #ffffff;
  margin-top: 20px;
}
@media screen and (max-width: 640px) {
  .section_radius {
    width: 98%;
    margin: 10px 1% 0;
  }
}

.sec-border01 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #d9d9d9;
}

.sec-border02 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 3px solid #d9d9d9;
}

.secBox {
  padding: 20px 1.4em;
}
@media screen and (max-width: 640px) {
  .secBox {
    padding: 1em 0.7em;
  }
}

.secBox_small {
  padding: 40px 100px 40px;
}

/*.secBox_txt{
  padding: 0 1em;
}*/
.pa20 {
  padding: 20px;
}

.attnBox {
  background: #fffcd9;
  padding: 0.5em 1em;
}
@media screen and (max-width: 640px) {
  .attnBox {
    padding: 0.4em;
  }
}

.attnBox02 {
  background: #ffeded;
  padding: 0.5em 1em;
}
@media screen and (max-width: 640px) {
  .attnBox02 {
    padding: 0.4em;
  }
}

.attnBox03 {
  background: #f7f7f7;
  padding: 0.5em 1em;
}
@media screen and (max-width: 640px) {
  .attnBox03 {
    padding: 0.4em;
  }
}

.selectBtnBox div.fl, .selectBtnBox div.fr {
  width: 47%;
}
@media screen and (max-width: 640px) {
  .selectBtnBox div.fl, .selectBtnBox div.fr {
    width: 50%;
  }
}

@media screen and (max-width: 640px) {
  .accountBox {
    width: 100% 0;
    margin-top: -11px;
  }
}
.hideBox {
  display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 button

================================================================================================= */
.btn {
  border-radius: 7px;
  text-align: center;
  padding: 15px 5px;
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 2px;
  margin-bottom: 3px;
  position: relative;
}
@media screen and (max-width: 640px) {
  .btn {
    padding: 0.8em 5px;
    font-size: 16px;
    letter-spacing: 0;
    width: 80%;
    margin: 0 auto 3px;
  }
}

.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-top: 4px solid #ffffff;
  border-right: 4px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 640px) {
  .arrow_icon {
    padding-bottom: 10px;
  }
  .arrow_icon:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

/*
.btn span.arrow_icon {
  font-size: 25px;
  line-height: 1;
  margin-right: 0.1em;
}
*/
.btn_signup {
  -webkit-box-shadow: 0px 3px 0px 0px #408000;
  -o-box-shadow: 0px 3px 0px 0px #408000;
  box-shadow: 0px 3px 0px 0px #408000;
  background: #73cb00;
}
.btn_signup:hover {
  top: 2px;
  -webkit-box-shadow: 0 1px 0 0 #408000;
  -o-box-shadow: 0 1px 0 0 #408000;
  box-shadow: 0 1px 0 0 #408000;
}

.btn_login {
  -webkit-box-shadow: 0px 3px 0px 0px #991559;
  -o-box-shadow: 0px 3px 0px 0px #991559;
  box-shadow: 0px 3px 0px 0px #991559;
  background: #e62087;
}
.btn_login:hover {
  top: 2px;
  -webkit-box-shadow: 0 1px 0 0 #991559;
  -o-box-shadow: 0 1px 0 0 #991559;
  box-shadow: 0 1px 0 0 #991559;
}

.btn_primary,
.btn_tokuten {
  -webkit-box-shadow: 0px 3px 0px 0px #408000;
  -o-box-shadow: 0px 3px 0px 0px #408000;
  box-shadow: 0px 3px 0px 0px #408000;
  background: #73cb00;
}
.btn_primary:hover,
.btn_tokuten:hover {
  top: 2px;
  -webkit-box-shadow: 0 1px 0 0 #408000;
  -o-box-shadow: 0 1px 0 0 #408000;
  box-shadow: 0 1px 0 0 #408000;
}

.btn_withdrawal {
  font-size: 16px;
  color: #333333;
  border: solid 2px #333333;
  border-radius: 10px;
  width: 400px;
  padding: 10px;
  margin: 0 auto 20px;
}
@media screen and (max-width: 640px) {
  .btn_withdrawal {
    width: 76%;
    font-size: 14px;
  }
}
.btn_withdrawal .arrow_icon:before {
  width: 6px;
  height: 6px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  position: relative;
  top: -1px;
}

.btn_return {
  -webkit-box-shadow: 0px 3px 0px 0px #333333;
  -o-box-shadow: 0px 3px 0px 0px #333333;
  box-shadow: 0px 3px 0px 0px #333333;
  background: #666666;
}
.btn_return:hover {
  top: 2px;
  -webkit-box-shadow: 0 1px 0 0 #333333;
  -o-box-shadow: 0 1px 0 0 #333333;
  box-shadow: 0 1px 0 0 #333333;
}
.btn_return a {
  color: #ffffff;
  width: 100%;
  display: block;
}

.section .btn_signup {
  padding: 5px 5px 5px 5px !important;
  font-size: 15px !important;
  letter-spacing: 0px !important;
  position: absolute;
  width: 14.5em;
  top: -95px;
  right: 0;
}
.section .btn_signup a {
  color: #ffffff;
  width: 100%;
  display: block;
}
.section .btn_signup span.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 0.5em;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.section .btn_signup:hover {
  top: -93px;
  -webkit-box-shadow: 0 1px 0 0 #408000;
  -o-box-shadow: 0 1px 0 0 #408000;
  box-shadow: 0 1px 0 0 #408000;
}

.section .btn_top {
  padding: 5px 5px 5px 5px !important;
  font-size: 15px !important;
  letter-spacing: 0px !important;
  position: absolute;
  width: 14.5em;
  top: -70px;
  right: 0;
}
.section .btn_top span.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 0.5em;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.section .btn_top:hover {
  top: -68px;
  -webkit-box-shadow: 0 1px 0 0 #333333;
  -o-box-shadow: 0 1px 0 0 #333333;
  box-shadow: 0 1px 0 0 #333333;
}

.btn_logout {
  -webkit-box-shadow: 0px 3px 0px 0px #333333;
  -o-box-shadow: 0px 3px 0px 0px #333333;
  box-shadow: 0px 3px 0px 0px #333333;
  background: #666666;
}
.btn_logout a {
  color: #ffffff;
  width: 100%;
  display: block;
}
.btn_logout:hover {
  top: 2px;
  -webkit-box-shadow: 0 1px 0 0 #333333;
  -o-box-shadow: 0 1px 0 0 #333333;
  box-shadow: 0 1px 0 0 #333333;
}

.section .btn_logout {
  padding: 5px 5px 5px 5px !important;
  font-size: 15px !important;
  letter-spacing: 0px !important;
  position: absolute;
  width: 13em;
  top: -70px;
  right: 0;
}
.section .btn_logout span.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 0.5em;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.section .btn_logout:hover {
  top: -68px;
  -webkit-box-shadow: 0 1px 0 0 #333333;
  -o-box-shadow: 0 1px 0 0 #333333;
  box-shadow: 0 1px 0 0 #333333;
}

.btn_y {
  -webkit-box-shadow: 0px 3px 0px 0px #991559;
  -o-box-shadow: 0px 3px 0px 0px #991559;
  box-shadow: 0px 3px 0px 0px #991559;
  background: #e62087;
}
.btn_y:hover {
  top: 2px;
  -webkit-box-shadow: 0 1px 0 0 #991559;
  -o-box-shadow: 0 1px 0 0 #991559;
  box-shadow: 0 1px 0 0 #991559;
}

.btn_n {
  -webkit-box-shadow: 0px 3px 0px 0px #125580;
  -o-box-shadow: 0px 3px 0px 0px #125580;
  box-shadow: 0px 3px 0px 0px #125580;
  background: #2099e6;
}
.btn_n:hover {
  top: 2px;
  -webkit-box-shadow: 0 1px 0 0 #125580;
  -o-box-shadow: 0 1px 0 0 #125580;
  box-shadow: 0 1px 0 0 #125580;
}

.btn_back {
  -webkit-box-shadow: 0px 3px 0px 0px #4c4c4c;
  -o-box-shadow: 0px 3px 0px 0px #4c4c4c;
  box-shadow: 0px 3px 0px 0px #4c4c4c;
  background: #999999;
}
.btn_back:hover {
  top: 2px;
  -webkit-box-shadow: 0 1px 0 0 #4c4c4c;
  -o-box-shadow: 0 1px 0 0 #4c4c4c;
  box-shadow: 0 1px 0 0 #4c4c4c;
}

button {
  padding: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
  overflow: visible;
  font-size: 0;
  line-height: 0;
  width: 100%;
}

.btn_single {
  -webkit-box-shadow: 0px 3px 0px 0px #ccb100;
  -o-box-shadow: 0px 3px 0px 0px #ccb100;
  box-shadow: 0px 3px 0px 0px #ccb100;
  background: #ffdc00;
  border-radius: 7px;
  text-align: left;
  font-weight: bold;
  border: 2px #ffea7f solid;
  position: relative;
}
.btn_single a {
  color: #4c4c4c;
  display: block;
  margin: 0;
  padding: 15px 10px 12px;
  text-decoration: none;
  line-height: 1.5;
  margin-right: 20px;
}
.btn_single a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-top: 3px solid #666666;
  border-right: 3px solid #666666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn_pageBack {
  background: #666666;
  -webkit-border-bottom-right-radius: 7px;
  -moz-border-bottom-right-radius: 7px;
  -webkit-border-bottom-left-radius: 7px;
  -moz-border-bottom-left-radius: 7px;
  border-radius: 0px 0px 7px 7px/0px 0px 7px 7px;
  text-align: left;
  font-weight: bold;
  position: relative;
}
.btn_pageBack a {
  color: #ffffff;
  display: block;
  margin: 0;
  padding: 15px 10px 12px;
  text-decoration: none;
  line-height: 1.5;
  margin-right: 20px;
}
.btn_pageBack a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 640px) {
  .btn_pageBack a {
    padding: 1em 0.8em;
  }
  .btn_pageBack a:before {
    content: "";
    position: absolute;
    top: 52%;
    right: 1em;
    width: 0.5em;
    height: 0.5em;
    margin-top: -7px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

.btn_pageBackTop {
  background: #666666;
  -webkit-border-top-right-radius: 7px;
  -moz-border-top-right-radius: 7px;
  -webkit-border-top-left-radius: 7px;
  -moz-border-top-left-radius: 7px;
  border-radius: 7px 7px 0px 0px/7px 7px 0px 0px;
  text-align: left;
  font-weight: bold;
  position: relative;
}
.btn_pageBackTop a {
  color: #ffffff;
  display: block;
  margin: 0;
  padding: 15px 10px 12px;
  text-decoration: none;
  line-height: 1.5;
  margin-right: 20px;
}
.btn_pageBackTop a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 640px) {
  .btn_pageBackTop a {
    padding: 1em 0.8em;
  }
  .btn_pageBackTop a:before {
    content: "";
    position: absolute;
    top: 52%;
    right: 1em;
    width: 0.5em;
    height: 0.5em;
    margin-top: -7px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

.btn_list {
  border-radius: 3px;
  padding: 0.1em 0.8em;
  border: 1px solid #cccccc;
  font-size: 14px;
  font-weight: bold;
  float: right;
}
.btn_list .arrow_icon {
  padding-right: 0.3em;
}

@media screen and (max-width: 640px) {
  /*トップページへ戻る／ログアウトボタン／新規登録ボタン*/
  .section {
    position: static;
  }
  .section .btn_top,
  .section .btn_logout {
    position: absolute;
    font-size: 10px !important;
    padding: 5px 6px !important;
    top: 48px;
    right: 2%;
  }
  .section .btn_top:hover,
  .section .btn_logout:hover {
    top: 50px;
  }
  .section .btn_signup {
    position: absolute;
    font-size: 10px !important;
    padding: 5px 6px !important;
    top: 35px;
    right: 2%;
  }
  .section .btn_signup:hover {
    top: 37px;
  }
  .section .btn_top,
  .section .btn_signup {
    width: 15em;
  }
  .section .btn_logout {
    width: 12em;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 g-navi

================================================================================================= */
ul#gNavi {
  display: table;
  table-layout: fixed;
  position: relative;
  width: 800px;
  height: 70px;
  margin: 20px auto;
  background: #FFFFFF;
  border-bottom: 3px solid #b2b2b2;
}
ul#gNavi li {
  width: 100%;
  font-size: 14px;
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border: 4px solid #FFFFFF;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: bold;
}
ul#gNavi li a {
  display: block;
  padding: 20px 0;
}
ul#gNavi li .arrow_icon:before {
  content: "";
  display: block;
  position: absolute;
  right: 50%;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-top: 2px solid #595656;
  border-right: 2px solid #595656;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
ul#gNavi li:hover {
  background: #e62087;
}
ul#gNavi li:hover a {
  color: #FFFFFF;
}
ul#gNavi li:hover .arrow_icon:before {
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
}

body#titles ul#gNavi li:nth-child(1), body#status ul#gNavi li:nth-child(2), body#account ul#gNavi li:nth-child(3) {
  background: #e62087;
}
body#titles ul#gNavi li:nth-child(1) a, body#status ul#gNavi li:nth-child(2) a, body#account ul#gNavi li:nth-child(3) a {
  color: #FFFFFF;
}
body#titles ul#gNavi li:nth-child(1) .arrow_icon:before, body#status ul#gNavi li:nth-child(2) .arrow_icon:before, body#account ul#gNavi li:nth-child(3) .arrow_icon:before {
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
}

ul#gNavi li .title {
  position: absolute;
  top: 20px;
  margin: auto;
  width: 30px;
  height: 42px;
}

body#titles ul#gNavi li:nth-child(1) .title img,
ul#gNavi li:hover .title img {
  display: none;
}

body#titles ul#gNavi li:nth-child(1) .title,
ul#gNavi li:hover .title {
  background: url(/common_auth/img/gnavi_title_on.png) no-repeat left top;
  background-size: 30px 42px;
}

ul#gNavi li .status {
  position: absolute;
  top: 20px;
  margin: auto;
  width: 30px;
  height: 42px;
}

body#status ul#gNavi li:nth-child(2) .status img,
ul#gNavi li:hover .status img {
  display: none;
}

body#status ul#gNavi li:nth-child(2) .status,
ul#gNavi li:hover .status {
  background: url(/common_auth/img/gnavi_license_on.png) no-repeat left top;
  background-size: 30px 42px;
}

ul#gNavi li .account {
  position: absolute;
  top: 20px;
  margin: auto;
  width: 30px;
  height: 42px;
}

body#account ul#gNavi li:nth-child(3) .account img,
ul#gNavi li:hover .account img {
  display: none;
}

body#account ul#gNavi li:nth-child(3) .account,
ul#gNavi li:hover .account {
  background: url(/common_auth/img/gnavi_account_on.png) no-repeat left top;
  background-size: 30px 42px;
}

ul#gNavi li .text {
  margin-left: 40px;
  text-align: left;
  display: inline-block;
}
ul.topics li {
  padding: 15px 17px 15px 135px;
  text-indent: -133px;
  border-top: 1px solid #d9d9d9;
}
ul.topics li span.date {
  display: inline-block;
  width: 110px;
  text-indent: 0;
  margin-left: 17px;
}
@media screen and (max-width: 640px) {
  ul.topics li {
    padding: 15px 17px;
    text-indent: 0;
    font-size: 14px;
  }
  ul.topics li span.date {
    display: block;
    width: auto;
    text-indent: 1.5;
    margin-left: auto;
  }
}

@media screen and (max-width: 640px) {
  ul#gNavi {
    width: 100%;
    border-bottom: 2px solid #b2b2b2;
    margin: 10px auto;
  }
  ul#gNavi li {
    border: 1px solid #FFFFFF;
  }
  ul#gNavi li a {
    font-size: 10px;
    padding: 33px 0;
    position: relative;
  }
  ul#gNavi li a:hover {
    min-height: 0em;
  }
  ul#gNavi li .text {
    position: absolute;
    left: 0;
    bottom: 10px;
    right: 0;
    line-height: 1;
    margin-left: 0;
    text-align: center;
    font-size: 9px !important;
  }
  ul#gNavi li .title, ul#gNavi li .status, ul#gNavi li .account {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    width: 20px;
    height: 28px;
  }
  ul#gNavi li .arrow_icon:before {
    left: 48.2%;
  }
  body#titles ul#gNavi li:nth-child(1) .title img,
  body#status ul#gNavi li:nth-child(2) .status img,
  body#account ul#gNavi li:nth-child(3) .account img {
    display: none;
  }
  ul#gNavi li:hover .title img, ul#gNavi li:hover .status img, ul#gNavi li:hover .account img {
    display: none;
  }
  body#titles ul#gNavi li:nth-child(1) .title,
  ul#gNavi li:hover .title {
    background: url(/common_auth/img/gnavi_title_on.png) no-repeat left top;
    background-size: 20px 28px;
  }
  body#status ul#gNavi li:nth-child(2) .status,
  ul#gNavi li:hover .status {
    background: url(/common_auth/img/gnavi_license_on.png) no-repeat left top;
    background-size: 20px 28px;
  }
  body#account ul#gNavi li:nth-child(3) .account,
  ul#gNavi li:hover .account {
    background: url(/common_auth/img/gnavi_account_on.png) no-repeat left top;
    background-size: 20px 28px;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 TOP

================================================================================================= */
.sec-important-box {
  border-radius: 10px;
  margin-top: 20px;
  padding: 1em 0.5em;
  background: #fffac0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 2px solid #e62020;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .sec-important-box {
    border-radius: 0px;
    border: 2px solid #e62020;
    width: 100% !important;
    margin: 0 !important;
    text-align: left;
    font-size: 14px;
  }
}

.ttl_lineup01 {
  text-align: center;
  background: #73cb00;
  color: #FFFFFF;
}
.ttl_lineup01 span {
  font-size: 14px;
  display: block;
}

.ttl_lineup02 {
  text-align: center;
  background: #4d4d4d;
  color: #FFFFFF;
}

.upperHalf_radius {
  border-radius: 9px 9px 0px 0px/9px 9px 0px 0px;
  -webkit-border-top-right-radius: 9px;
  -moz-border-top-right-radius: 9px;
  -webkit-border-top-left-radius: 9px;
  -moz-border-top-left-radius: 9px;
}

.otherList ul li {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  width: 100%;
  text-align: left;
  padding: 0;
  border: 1px #d9d9d9 solid;
  border-bottom: 0;
  background: #FFFFFF;
  display: block;
  word-break: break-all;
}
.otherList ul li:first-child {
  border-radius: 7px 7px 0 0;
}
.otherList ul li:last-child {
  border-radius: 0 0 7px 7px;
  border-bottom: 1px #d9d9d9 solid;
}
.otherList ul li:only-child {
  border-radius: 7px 7px 7px 7px;
}
.otherList ul li a {
  color: #4c4c4c;
  display: block;
  margin: 0;
  padding: 15px 10px 12px;
  text-decoration: none;
  font-weight: bold;
  line-height: 1.5;
  margin-right: 10px;
}
.otherList ul li a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-top: 3px solid #666666;
  border-right: 3px solid #666666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (max-width: 819px) {
  .otherList ul {
    width: 98%;
    margin: 20px 1% 0;
  }
}
@media screen and (max-width: 640px) {
  .otherList ul {
    width: 98%;
    margin: 10px 1% 0;
  }
  .otherList ul li {
    font-size: 14px;
  }
  .otherList ul li a {
    padding: 1em 0.8em;
  }
  .otherList ul li a:before {
    content: "";
    position: absolute;
    top: 52%;
    right: 1em;
    width: 0.5em;
    height: 0.5em;
    margin-top: -7px;
    border-top: 3px solid #666666;
    border-right: 3px solid #666666;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 FORM

================================================================================================= */
.errorTxt {
  background: #FFEBE8;
  padding: 0.5em 1em 0.4em;
  color: #F00000;
  margin-top: 20px;
  border: 2px solid #F00000;
}

.formArea .errorTxt {
  margin-top: 10px;
  margin-bottom: 20px;
  border: none;
  font-size: 14px;
}
.formArea label, .formArea input {
  display: block;
}
.formArea input, .formArea textarea {
  width: 100%;
  padding: 12px 2%;
}
.formArea input:focus,
.formArea textarea:focus {
  border: solid 2px #EEA34A;
}
.formArea textarea {
  height: 200px;
}
.formArea .nameBox {
  margin-bottom: 0.5em;
}
.formArea .nameBox .fl, .formArea .nameBox .fr {
  width: 49%;
}

div.formArea h3 {
  border-radius: 10px;
  background: #F0F0F0;
  padding: 0.5em;
}
@media screen and (max-width: 640px) {
  div.formArea h3 {
    font-size: 14px;
  }
}

@media screen and (max-width: 819px) {
  .android_space {
    padding-bottom: 20em !important;
  }
}

#rule {
  overflow: auto;
  height: 550px;
  padding: 15px 20px;
  border: solid 2px #d9d9d9;
  font-size: 14px;
  word-wrap: break-word;
}
@media screen and (max-width: 640px) {
  #rule {
    height: auto;
    padding: 10px 3.4%;
    font-size: 11px;
  }
  #rule p, #rule li, #rule h4 {
    font-size: 12px;
  }
}

.ul-disc {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ul-disc li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.ul-disc li:before {
  content: "・";
  padding-right: 0.5em;
}
.ul-disc li:not(:first-child) {
  margin-top: 10px;
}

.ol-number {
  counter-reset: number;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ol-number li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.ol-number li:before {
  counter-increment: number;
  content: counter(number) ".";
  padding-right: 0.5em;
}

.ol-number__lower-roman li:not(:first-child) {
  margin-top: 10px;
}
.ol-number__lower-roman li:before {
  content: counter(number, lower-roman) "." !important;
}

.ol-number-inner {
  counter-reset: number;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ol-number-inner li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.ol-number-inner li:before {
  counter-increment: number;
  content: "[" counter(number) "]";
  padding-right: 0.5em;
}

#ruleBox #rule {
  overflow: auto;
  height: auto;
  border: none;
}

.sentTxt {
  font-weight: bold;
  font-size: 112.5%;
  text-align: center;
  color: #00aeff;
  padding: 10px 5px;
  word-break: break-all;
}
@media screen and (max-width: 640px) {
  .sentTxt {
    font-size: 14px;
    text-align: left;
  }
}

.step_bar {
  list-style: none;
  /*
    display: table;
    table-layout: fixed;
    text-align: center;
    width: 100%;
  */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-bottom: 1px solid #b7cc76;
  padding: 8px 0;
  margin-top: 1px;
  background: #f2fad9;
}
.step_bar li {
  font-size: 13px;
  /*
  display: table-cell;
  box-sizing: border-box;
  vertical-align: middle;
  width: 23.5%;
  */
  /*display: flex;
  flex-wrap: nowrap; 
  justify-content: center;
  align-items: stretch;
  width: 100%;
  */
  padding: 0;
  word-break: keep-all;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 60px;
}
@media screen and (max-width: 640px) {
  .step_bar li {
    font-size: 10px;
  }
}
.step_bar li:nth-child(odd) {
  color: #808080;
  background: #ffffff;
  color: #66cb00;
  border: 1px solid #add287;
  margin: 2px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 5px;
  padding: 0.5em 0;
}
@media screen and (min-width: 820px) {
  .step_bar li:nth-child(odd) {
    border: 2px solid #add287;
    font-weight: bold;
  }
}
.step_bar li:nth-child(even) {
  -ms-flex-preferred-size: 2%;
      flex-basis: 2%;
}
.step_bar li span:nth-child(odd) {
  display: block;
  width: 100%;
  /*
  display: block;
  color: #808080;
  font-weight: bold;
  background: #ffffff;
  color: $color-green;
  border: 2px solid #add287;
  margin: 2px;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 0.5em 0;
  width: 100%;
  */
}
.step_bar li span.arrow_icon {
  background-color: transparent;
  border: none;
}
.step_bar li span.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0px;
  border-top: 3px solid #808080;
  border-right: 3px solid #808080;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.step_bar li span.arrow_icon:before {
  margin-left: -4px;
  margin-right: 3px;
}
@media screen and (max-width: 640px) {
  .step_bar li span.arrow_icon {
    padding-bottom: 0;
  }
  .step_bar li span.arrow_icon:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 0px;
    border-top: 2px solid #808080;
    border-right: 2px solid #808080;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .step_bar li span.arrow_icon:before {
    margin-left: -3px;
  }
}
.step_bar li.current {
  background: #FFFFFF;
  border: 1px solid #e62087;
  color: #e62087;
}
@media screen and (min-width: 820px) {
  .step_bar li.current {
    border: 2px solid #e62087;
  }
}
.step_bar li.fin {
  background: #e6e6e6;
  color: #808080;
  border: 1px solid #bfbfbf;
}
@media screen and (min-width: 820px) {
  .step_bar li.fin {
    border: 2px solid #bfbfbf;
  }
}

#accountTbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #d9d9d9;
}
#accountTbl th, #accountTbl td {
  vertical-align: middle;
}
#accountTbl th {
  width: 33%;
  background: #f9d865;
  font-weight: bold;
  color: #4c431f;
  text-align: center;
  border-top: 1px dotted #c4aa4e;
}
#accountTbl td {
  background: #FFFFFF;
  border-top: 1px dotted #d9d9d9;
  padding: 0.2em 0.5em;
  word-break: break-all;
}
#accountTbl tr:first-child th:first-child {
  border-radius: 9px 0 0 0;
  border-top: none;
}
#accountTbl tr:first-child td:last-child {
  border-radius: 0 9px 0 0;
  border-top: none;
}
#accountTbl tr:last-child th:first-child {
  border-radius: 0 0 0 9px;
}
#accountTbl tr:last-child td:last-child {
  border-radius: 0 0 9px 0;
}
@media screen and (max-width: 640px) {
  #accountTbl {
    border-radius: 0px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    border-left: none;
    border-right: none;
    padding: 2px;
    background: #FFFFFF;
  }
  #accountTbl th {
    border-radius: 0 !important;
    font-size: 12px;
    line-height: 1.2;
    padding: 0.4em 0.5em;
  }
  #accountTbl td {
    border-radius: 0 !important;
    font-size: 12px;
    line-height: 1.2;
    padding: 0.4em 0.5em;
  }
  #accountTbl td span {
    font-size: 16px;
  }
}

.titleImgL {
  margin: 0 auto;
  width: 300px;
}
@media screen and (max-width: 640px) {
  .titleImgL {
    width: 180px;
  }
}

.linkListTtl {
  color: #FFFFFF;
  font-weight: bold;
  background: #666666;
  border-bottom: 1px solid #000000;
  text-align: center;
  padding: 0.3% 0;
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  border-radius: 10px 10px 0px 0px/10px 10px 0px 0px;
}
@media screen and (max-width: 640px) {
  .linkListTtl {
    border-radius: 0px;
    padding: 0.3% 0;
  }
}
.linkListTtl span {
  font-size: 30px;
  padding-left: 1em;
  padding-right: 0.2em;
}
@media screen and (max-width: 819px) {
  .linkListTtl span {
    font-size: 25px;
  }
}
@media screen and (max-width: 640px) {
  .linkListTtl span {
    font-size: 20px;
  }
}

.linkListBox {
  border-radius: 10px;
  background: url(/common_auth/img/bg_link_list.jpg);
  padding-bottom: 1.2%;
  width: 800px;
  margin: 20px auto 0;
}
@media screen and (max-width: 819px) {
  .linkListBox {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .linkListBox {
    border-radius: 0px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-bottom: 2%;
  }
}

.linkListBoxIn {
  margin: 0 auto;
  font-size: 0;
  width: 90%;
  padding-left: 1.4%;
}
.linkListBoxIn li {
  width: 15%;
  position: 0;
  position: relative;
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 2% 0.7% 0 0.7%;
}
@media screen and (max-width: 819px) {
  .linkListBoxIn li {
    width: 18%;
  }
}
@media screen and (max-width: 640px) {
  .linkListBoxIn li {
    width: 22.5%;
  }
}

.icon_radius {
  border-radius: 5px;
  background: #FFFFFF;
}

.linkList-alpha {
  opacity: 0.5;
  filter: alpha(opacity=50); /* IE lt 8 */
  -ms-filter: "alpha(opacity=50)"; /* IE 8 */
  -khtml-opacity: 0.5; /* Safari 1.x */
  -moz-opacity: 0.5; /* FF lt 1.5, Netscape */
  zoom: 1;
}

.linkList-empty {
  background: #66aa0d;
  /* box-shadow */
  box-shadow: rgba(49, 111, 4, 0.65098) 1px 2px 0px 0px inset;
  -webkit-box-shadow: rgba(49, 111, 4, 0.65098) 1px 2px 0px 0px inset;
  -moz-box-shadow: rgba(49, 111, 4, 0.65098) 1px 2px 0px 0px inset;
}

.listIcon-check {
  border-radius: 20px;
  background: #FFFFFF;
  border: 3px solid #e62087;
  padding: 3px;
  position: absolute;
  top: 3px;
  right: 3px;
}
.listIcon-check img {
  height: 18px;
  width: 18px;
}
@media screen and (max-width: 819px) {
  .listIcon-check img {
    height: 15px;
    width: 15px;
  }
}
@media screen and (max-width: 640px) {
  .listIcon-check img {
    height: 12px;
    width: 12px;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 Table

================================================================================================= */
.dataTbl_01 {
  width: 100%;
  border-bottom: 1px dotted #ccc7ad;
  margin-bottom: 0.5em;
  font-size: 75%;
}
.dataTbl_01 th, .dataTbl_01 td {
  border-top: 1px dotted #ccc7ad;
  vertical-align: middle;
  text-align: left;
  padding: 0.4em 0.5em;
}
.dataTbl_01 th {
  background: #fff9da;
  width: 35%;
  font-weight: normal;
}
.dataTbl_01 td {
  background: #fffef7;
  width: 65%;
}
.dataTbl_01 th.th01 {
  background: #ffe493;
  font-weight: bold;
  text-align: center;
  border-top: none;
}

.w50Tbl th, .w50Tbl td {
  width: 50% !important;
}

.tdCenter td {
  text-align: center;
}

.dataTbl_01 ul {
  padding-top: 0.5em;
}
.dataTbl_01 ul li {
  padding-bottom: 0.3em;
}
.dataTbl_01 ul li.forever {
  color: #73cb00;
  font-weight: bold;
}
.dataTbl_01 ul li span {
  font-size: 10px;
  padding: 0.1em 0.5em;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  color: #808080;
  font-weight: bold;
  margin-left: 0.4em;
  border-radius: 3px;
}
.dataTbl_01 ul li.forever span {
  background: #eefade;
  color: #73cb00;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 Member

================================================================================================= */
.list-box {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 1px;
  display: table;
  width: 100%;
}
@media screen and (max-width: 819px) {
  .list-box {
    border-top: 1px solid #e5e5e5;
    padding: 0.5em 0;
  }
}
@media screen and (max-width: 640px) {
  .list-box {
    border-top: 1px solid #e5e5e5;
    padding: 0.5em 0;
  }
}

.list-box02 {
  border-top: 1px solid #e6e6e6;
  display: table;
  width: 100%;
}

.list-box03 {
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 1px;
  display: table;
  width: 100%;
}

.list-box03-last {
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
  border-radius: 0px 0px 10px 10px/0px 0px 10px 10px;
  border-bottom: none !important;
  margin-bottom: 0px !important;
  border-top: 1px solid #e6e6e6;
}

.noLink {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: none;
}

@media screen and (max-width: 819px) {
  /*連動ページ：今後の配信予定タイトル*/
  .list-box02, .list-box03 {
    padding: 0.5em 0;
  }
  .noLink .list-img {
    width: 14%;
  }
}
.title-list-box {
  border: 1px solid #d9d9d9;
  margin-bottom: 1px;
  display: table;
  width: 93%;
  padding: 0.2em 6% 0.2em 1%;
  position: relative;
  border-radius: 10px;
}
.title-list-box a:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-top: 3px solid #666666;
  border-right: 3px solid #666666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 640px) {
  .title-list-box {
    width: 87%;
    padding: 0.5em 12% 0.5em 1%;
  }
}

.sec_line {
  border-top: 1px solid #808080;
  margin-bottom: 2em;
}

.list-img, .list-text, .btn_title, .status_text, .title_download {
  display: table-cell;
  vertical-align: middle;
}

.list-img, .status_text {
  width: 28%;
  text-align: center;
  padding: 0.2em 0;
}

.list-img img {
  width: 130px;
}
@media screen and (max-width: 819px) {
  .list-img {
    width: 22%;
    padding: 0;
  }
  .list-img img {
    width: 95%;
  }
}

.list-text p {
  font-weight: bold;
}
@media screen and (max-width: 819px) {
  .list-text {
    width: 58%;
  }
}
@media screen and (max-width: 640px) {
  .list-text {
    width: 50%;
  }
  .list-text p {
    font-size: 14px;
    line-height: 1.2;
  }
}

.list-date {
  /* 14px */
  font-size: 87.5%;
  margin-left: 10px;
  display: block;
}
@media screen and (max-width: 640px) {
  .list-date {
    font-size: 10px;
    margin-left: 0.7em;
  }
}

.btn_title {
  width: 17%;
  padding-right: 15px;
}
.btn_title a {
  border-radius: 20px;
  background: #666666;
  text-align: center;
  display: block;
  padding: 0.2em 1em;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  word-break: keep-all;
  line-height: 1.2;
}
.btn_title span.arrow_icon {
  height: 3px;
}
.btn_title span.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 0.4em;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btn_title span.arrow_icon:before {
  margin-bottom: 1px;
}
@media screen and (max-width: 819px) {
  .btn_title {
    width: auto;
    text-align: right;
    padding-right: 2px;
  }
  .btn_title a {
    padding: 0.2em 0;
    font-size: 12px;
    display: block;
  }
  .btn_title span.arrow_icon {
    font-size: 14px;
  }
  .btn_title span.arrow_icon:before {
    margin-right: 0.2em;
  }
}
@media screen and (max-width: 640px) {
  .btn_title {
    width: auto;
  }
  .btn_title a {
    font-size: 10px;
  }
  .btn_title span.arrow_icon {
    font-size: 12px;
  }
  .btn_title span.arrow_icon:before {
    margin-right: 0.2em;
  }
}

.title_status {
  display: table;
  width: 100%;
  margin-bottom: 1em;
}

.status_text {
  font-size: 15px;
  font-weight: bold;
  color: #f2f2f2;
  padding: 16px 0;
}
.status_text img {
  width: 24px;
  padding-right: 0.5em;
}
@media screen and (max-width: 640px) {
  .status_text {
    width: 34%;
    font-size: 75%;
    padding: 16px 0;
  }
  .status_text img {
    width: 13%;
    padding-right: 0.3em;
    padding-bottom: 0.1em;
  }
}

.st_check {
  background-color: #e62087;
}

.st_x {
  background-color: #808080;
}

.st_pending {
  background-color: #206fe6;
}

.title_download {
  width: 72%;
  background: #e6e6e6;
}
.title_download ul {
  float: right;
  text-align: right;
  padding-right: 20px;
  font-weight: bold;
  font-size: 14px;
}
.title_download .btn_appstore {
  padding-right: 2em;
}
.title_download .btn_appstore,
.title_download .btn_googleplay {
  float: right;
}
.title_download .btn_appstore span.arrow_icon,
.title_download .btn_googleplay span.arrow_icon {
  height: 3px;
}
.title_download .btn_appstore span.arrow_icon:before,
.title_download .btn_googleplay span.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 0.4em;
  border-top: 2px solid #595656;
  border-right: 2px solid #595656;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.title_download .btn_appstore span.arrow_icon:before,
.title_download .btn_googleplay span.arrow_icon:before {
  margin-bottom: 1px;
}
@media screen and (max-width: 819px) {
  .title_download span.arrow_icon {
    font-size: 14px;
  }
  .title_download span.arrow_icon:before {
    margin-right: 0.5em;
  }
}
@media screen and (max-width: 640px) {
  .title_download {
    width: 66%;
  }
  .title_download ul {
    width: 96%;
    padding: 0 2%;
    font-size: 12px;
  }
  .title_download .btn_appstore {
    width: 48%;
    text-align: center;
    padding-right: 0;
  }
  .title_download .btn_googleplay {
    width: 48%;
    text-align: center;
  }
  .title_download span.arrow_icon {
    font-size: 12px;
  }
  .title_download span.arrow_icon:before {
    margin-right: 0.3em;
  }
}

.data-box {
  padding: 0 1em 1em;
}
.data-box h4 {
  margin-bottom: 0.4em;
}
@media screen and (max-width: 819px) {
  .data-box {
    padding: 0 0.5em 1em;
  }
}
.data-box h4, .data-box .note {
  font-size: 75%;
}

.acWrap h3 {
  border-radius: 7px;
  position: relative;
  margin-top: 0;
  border: 1px solid #cccccc;
  padding: 1.5em 1em 1.5em 3em;
  font-size: 112.5%;
  display: block;
  cursor: pointer;
}
.acWrap h3 span.arrow_icon {
  margin-left: 8px;
}
.acWrap h3 span.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0;
  border-top: 3px solid #FFFFFF;
  border-right: 3px solid #FFFFFF;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.acWrap h3 span.arrow_radius {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0.5em;
  width: 30px;
  height: 30px;
  background-color: #e62087;
  border-radius: 100%;
  /* CSS3 PIE */
}
.acWrap .gh-subhead {
  color: #595656;
  position: relative;
  display: block;
  cursor: pointer;
  font-size: 16px;
  padding: 1em 1em 1em 3em;
}
@media screen and (max-width: 640px) {
  .acWrap .gh-subhead {
    font-size: 14px;
  }
}
.acWrap .gh-subhead span.arrow_icon {
  margin-left: 8px;
}
.acWrap .gh-subhead span.arrow_icon:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0;
  border-top: 3px solid #FFFFFF;
  border-right: 3px solid #FFFFFF;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.acWrap .gh-subhead span.arrow_icon:before {
  margin-top: 6px;
}
.acWrap .gh-subhead span.arrow_icon:before {
  margin-top: 6px;
}
.acWrap .gh-subhead span.arrow_radius {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0.5em;
  width: 30px;
  height: 30px;
  background-color: #e62087;
  border-radius: 100%;
  /* CSS3 PIE */
}
.acWrap .acBox {
  width: 100%;
  display: none;
  margin-top: 1em;
}
.acWrap h3.active span.arrow_icon:before,
.acWrap .gh-subhead.active span.arrow_icon:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-bottom: -5px;
}
@media screen and (max-width: 640px) {
  .acWrap h3,
  .acWrap .gh-subhead {
    padding: 1em 1em 1em 3em;
    font-size: 14px;
  }
  .acWrap h3 span.arrow_icon,
  .acWrap .gh-subhead span.arrow_icon {
    margin-left: 8px;
  }
  .acWrap h3 span.arrow_icon:before,
  .acWrap .gh-subhead span.arrow_icon:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 0;
    border-top: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .acWrap h3 span.arrow_radius,
  .acWrap .gh-subhead span.arrow_radius {
    left: 0.7em;
    width: 25px;
    height: 25px;
  }
  .acWrap h3.active span.arrow_icon:before,
  .acWrap .gh-subhead.active span.arrow_icon:before {
    margin-bottom: -3px;
  }
}

.processBox {
  width: 30%;
  position: relative;
  margin-right: 3%;
  margin-bottom: 20px;
  float: left;
}
.processBox::after {
  content: url(/common_auth/img/icon_process_arrow.png);
  display: block;
  position: absolute;
  right: -20px;
  top: 180px;
}
.processBox:last-child {
  margin-right: 0;
}
.processBox:last-child::after {
  content: none;
}
@media screen and (max-width: 640px) {
  .processBox {
    width: 47%;
    margin-right: 3%;
  }
  .processBox::after {
    content: url(/common_auth/img/icon_process_arrow_sp.png);
    right: -10px;
  }
  .processBox:last-child {
    margin-right: auto;
  }
}

.processBox-two-thirds {
  width: 60%;
}
@media screen and (max-width: 640px) {
  .processBox-two-thirds {
    width: 97%;
    margin-right: 3%;
  }
}

.processBox-arrow-none::after {
  content: none;
}

.processArrow02 {
  margin-right: 90px;
}
.processArrow02::after {
  content: url(/common_auth/img/icon_process_arrow02.png);
  display: block;
  position: absolute;
  right: -80px;
  top: 180px;
}
@media screen and (max-width: 640px) {
  .processArrow02 {
    margin-right: 3%;
  }
  .processArrow02::after {
    content: url(/common_auth/img/icon_process_arrow_sp.png);
    right: -10px;
  }
}

.processBoxIn {
  border-radius: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.processImg {
  text-align: center;
}
.processImg02 {
  float: left;
  padding: 20px;
}
@media screen and (max-width: 640px) {
  .processImg02 {
    padding: 1em 1em 0;
    float: none;
    text-align: center;
  }
}

.processTxt02 {
  padding: 30px 20px 20px;
}
@media screen and (max-width: 819px) {
  .processTxt02 {
    padding: 30px 20px 20px;
  }
}
@media screen and (max-width: 640px) {
  .processTxt02 {
    padding: 0.5em 1em 1em;
  }
}

.processIcon,
.processTxt {
  margin: 0 10px;
}

.processIcon {
  border-radius: 30px;
  width: 4em;
  background: #4d4d4d;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 14px;
}

.processIcon02 {
  border-radius: 30px;
  width: 4em;
  background: #4d4d4d;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 14px;
  display: inline-block;
}

.processTxt {
  padding-bottom: 10px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 footer

================================================================================================= */
#footer {
  text-align: center;
  color: #FFFFFF;
  padding: 15px 0;
  position: absolute;
  background: #000;
  bottom: 0px;
  width: 100%;
  height: 1.5em;
}
#footer p {
  font-size: 12px;
}

#btn-pagetop {
  background: #666666;
  position: fixed;
  max-width: 880px;
  right: 10px;
  bottom: 62px;
}
#btn-pagetop a {
  display: block;
  width: 98px;
  height: 60px;
  text-indent: -9999px;
  background: url(/common_auth/img/btn_pagetop.gif) no-repeat;
}

#btn-sp-pagetop {
  display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 PC

================================================================================================= */
@media screen and (min-width: 820px) {
  br.br-sp {
    display: none;
  }
  br.br-pc {
    display: block;
  }
  .section, .section_radius, .sec-important-box, .accountBox, .otherList ul {
    width: 800px;
    margin: 20px auto 0;
  }
}
@media screen and (max-width: 1030px) {
  #contents {
    padding-bottom: 8em;
  }
  #footer {
    padding: 0 0 15px;
    height: auto;
  }
  #btn-pagetop {
    display: none !important;
  }
  #btn-sp-pagetop {
    display: block;
    width: 100%;
    background: #e6f3f7;
    margin-bottom: 1em;
    font-size: 14px;
    font-weight: bold;
    background: #e6f3f7;
    text-align: center;
    border-top: 1px solid #d9d9d9;
  }
  #btn-sp-pagetop a {
    display: block;
    padding: 0.8em 0.2em;
    color: #00aeff;
  }
  #btn-sp-pagetop .arrow_icon:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 10px;
    border-top: 2px solid #00aeff;
    border-right: 2px solid #00aeff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 Tablet

================================================================================================= */
@media screen and (max-width: 819px) {
  br.br-sp {
    display: none;
  }
  br.br-pc {
    display: block;
  }
  .section, .section_radius, .sec-important-box {
    width: 98%;
    margin: 20px 1% 0;
  }
  .secBox_small {
    width: 94%;
    padding: 20px 3%;
  }
  .accountBox, ul#gNavi {
    width: 100%;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

 SP

================================================================================================= */
@media screen and (max-width: 640px) {
  br.br-sp {
    display: block;
  }
  br.br-pc {
    display: none;
  }
  .section, .section_radius {
    margin: 10px 1% 0;
  }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  Reveal Modals
================================================================================================= */
.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
}

.reveal-modal {
  visibility: hidden;
  top: 200px;
  left: 25%;
  right: 25%;
  background: #ffffff;
  position: absolute;
  z-index: 101;
  padding: 30px 40px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  -box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 640px) {
  .reveal-modal {
    left: 5%;
    right: 5%;
  }
}

.reveal-modal.small {
  width: 200px;
  margin-left: -140px;
}

.reveal-modal.medium {
  width: 400px;
  margin-left: -240px;
}

.reveal-modal.large {
  width: 600px;
  margin-left: -340px;
}

.reveal-modal.xlarge {
  width: 800px;
  margin-left: -440px;
}

.reveal-modal .closeBtn-reveal-modal {
  position: absolute;
  top: 8px;
  right: 11px;
  color: #aaa;
  text-shadow: 0 -1px 1px rbga(0, 0, 0, 0.6);
  font-weight: bold;
  cursor: pointer;
}

/*

NOTES

Close button entity is ×

Example markup

<div id="myModal" class="reveal-modal">
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  I it's mine.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
  <a class="close-reveal-modal">&#215;</a>
</div>

*/