@charset "UTF-8";
/*--------------------------------------
slide-animation
---------------------------------------- */
.slide-up{
  transform: translateY(100%);
}
.slide-down{

}
.slide-up.slide-up-animate{
  -webkit-animation: slide-up-animate 0.6s ease-in forwards;
  animation: slide-up-animate 0.6s ease-in forwards;
}

@-webkit-keyframes slide-up-animate {
  0% {
    -webkit-transform: translateY(100%);
    opacity: 0;
  }
  60% { opacity: 0; }
  100% {
    -webkit-transform: translateY(0%);
    opacity: 1;
   }
}
@keyframes slide-up-animate {
  0% {
    -webkit-transform: translateY(100%);
    opacity: 0;
  }
  60% { opacity: 0; }
  100% {
    -webkit-transform: translateY(0%);
    opacity: 1;
   }
}

.slide-down.slide-down-animate{
  -webkit-animation: slide-down-animate 0.4s ease-in forwards;
  animation: slide-down-animate 0.4s ease-in forwards;
}

@-webkit-keyframes slide-down-animate {
  0% {
    -webkit-transform: translateY(0%);
    opacity: 1;
  }
  60% { opacity: 1; }
  100% {
    -webkit-transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes slide-down-animate {
  0% {
    -webkit-transform: translateY(0%);
    opacity: 1;
  }
  60% { opacity: 1; }
  100% {
    -webkit-transform: translateY(100%);
    opacity: 0;
  }
}


/*--------------------------------------
h1,h2,
---------------------------------------- */
h1 {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  padding: 22px 0;
  position: relative;
}
.section-inner h1 {
  padding-top: 0;
}

h1.back,
h1.close {
  padding: 0 !important;
}

h1.back>a,
h1.close>a {
  color: #212121;
  display: block;
  padding: 25px 0;
}
h1.back>a::before {
  content: '';
  width: 10px;
  height: 10px;
  border-bottom: solid 1.5px #4D8BFF;
  border-left: solid 1.5px #4D8BFF;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 24px;
  margin-top: -5px;
}
h1.close>a::before {
  content: '';
  width: 1.5px;
  height: 20px;
  background-color: #4D8BFF;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 24px;
  margin-top: -10px;
}
h1.close>a::after {
  content: '';
  width: 1.5px;
  height: 20px;
  background-color: #4D8BFF;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 24px;
  margin-top: -10px;
}
h2 {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 3px;
  border-bottom: 2px solid #4D8BFF;
}

/*--------------------------------------
section
---------------------------------------- */

.section {
  width: 100%;
  height: auto;
  background: white;
  margin-top: 25px;
  padding-top: 20px;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
  font-size: 14px;
  position: relative;
}

.section:first-child {
  margin: 0;
}

.section-inner {
  position: relative;
  margin: 0 20px;
  padding: 5px 0;
}

.section-inner .light-gray {
  margin-top: 2px;
}

.section>a {
  display: block;
  text-align: center;
  padding: 15px 0;
}

/*--------------------------------------
box
---------------------------------------- */

.application-box {
  position: relative;
  padding-top: 20px;
  text-align: center;
  width: 100%;
}

.application-img {
  width: 70px;
}

.two-col-box {
  word-wrap: break-word;
}

.two-col-box>div {
  display: inline-block;
  vertical-align: top;
}

.two-col-box>div:nth-child(1) {
  width: 29%;
}

.two-col-box>div:nth-child(2) {
  width: 69%;
}

.box-gray{
  width: 100%;
  height: auto;;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
}
.box-gray .box-gray-inner{
  padding: 0 10px;
}

.box-gray .box-gray-inner .list-normal li{
  padding:0;
}
.box-bg-gray {
  padding: 10px;
  background-color: #f4f5f6;
}

.box-white{
  padding: 20px;
  margin-top: 15px;
  height: auto;;
  background-color: #FFFFFF;
  border-radius: 12px;
}

.box-blue-link{
  padding: 12px 12px 12px 12px;
  height: auto;;
  border: 1px solid #4D8BFF;
  border-radius: 4px;
  color: #000;
  position: relative;
}
a>.box-blue-link::after {
  content: '';
  width: 11px;
  height: 11px;
  border-top: solid 2px #4D8BFF;
  border-right: solid 2px #4D8BFF;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -6px;
}

.box-attention{
  padding: 12px 12px 12px 32px;
  height: auto;;
  border: 1px solid #FF3C3C;
  border-radius: 4px;
  position: relative;
}

.box-attention span.attention-icon{
  margin-left: -20px;
}

.help-img-box{
  max-width: 335px;
  margin: 24px auto 24px auto;
}

/*--------------------------------------
list
---------------------------------------- */
ul li:last-child, ol li:last-child {
  border: none;
  position: relative;
}

ul.no-border-bottom li {
  border-bottom: none;
}

.list-normal+.list-link>li:first-child, .list-link+.list-normal>li:first-child {
  border-top: 1px solid #CCC;
}

.list-normal li {
  width: 100%;
  position: relative;
  padding: 15px 0;
  border-bottom: 1px solid #CCC;
}

.list-normal.height-fix li {
  min-height: 80px;
  padding: 0;
}

.list-normal.height-fix li p {
  height: 1rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.list-normal.height-fix li p.tworow {
  top: calc(50% - 10px);
}

.list-normal.list-table p{
  min-height: 54px;
  vertical-align: middle;
}

.list-normal li>a.link-right-middle {
  position: absolute;
  height: 1rem;
  top: calc(50% - 1px);
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.list-normal li p a {
  float: right;
}

.list-normal li p.light-gray {
  font-size: 14px;
}

.list-normal .checkbox-wrapper {
  position: relative;
  display: inline-block;
  width: calc(100% - 65px);
}

.list-normal li .checkbox-wrapper p {
  font-size: 12px;
}

.list-normal .checkbox-wrapper input[type="checkbox"] {
  position: absolute;
  right: 0;
  top: 10px;
}

.list-normal.dot li>* {
  padding-left: 15px;
}

.list-normal.dot li:before {
  content: "・";
  position: absolute;
  left: 0;
}

.list-normal.dot li.no-dot:before {
  display: none;
}

.list-number-circle{
   counter-reset:number;
}
.list-number-circle>li{
   padding:5px 5px 5px 30px;
   position:relative;
   counter-increment:number;
}
.list-number-circle>li:before{
  color: #4D8BFF;
  font-size: 14px;
  width:20px;
  height:20px;
  content:counter(number);
  text-align:center;
  position:absolute;
  left:1px;
}
.list-number-circle>li.number4{
  counter-reset: number 3;
}
.list-number-circle>li:after{
  color: #4D8BFF;
  border:1px solid #4D8BFF;
  border-radius:50%;
  font-size: 14px;
  width:20px;
  height:20px;
  content:" ";
  text-align:center;
  position:absolute;
  left:0;
  top: 4px;
}

.list-link li {
  width: 100%;
  border-bottom: 1px solid #CCC;
}

.list-link li>a {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px 0;
  color: #333;
}

.list-link li>a::after {
  content: '';
  width: 11px;
  height: 11px;
  border-top: solid 2px #4D8BFF;
  border-right: solid 2px #4D8BFF;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 6px;
  margin-top: -6px;
}

.list-link li>a.blank-link-icon::after {
  content: url(../../img/s/newwindow.svg);
  width: 21px;
  height: 21px;
  border: none;
  transform: none;
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -9px;
}

.list-link li>a>div {
  display: inline-block;
  width: calc(100% - 65px);
}
.list-link li>a>p {
  padding-right: 30px;
}
.list-dot {
  margin: 20px 30px 0;
}

.section-inner .list-dot {
  margin: 0 17px;
}

.list-dot li {
  margin-top: 5px;
  padding: 3px 0;
}
.list-no-margin li{
  margin: 0 !important;
}
.list-no-padding li{
  padding: 0 !important;
}
.list-no-border-bottom li {
  border-bottom: none !important;
}

.list-dot li:before {
  position: absolute;
  content: '・';
  margin-left: -18px;
}

.list-number-padding-adjust .list-number{
  padding: 0 0 0 20px !important;
}
.list-number {
  list-style-type: decimal;
  padding: 20px 20px;
}

.list-number li {
  border-bottom: 1px solid #CCC;
}

.border-none li {
  border-bottom: none;
}

.list-number img {
  width: 140px;
}

.list-number img[src*="mysoftbank/set/data/add/shared/02/img/s/newwindow.svg"] {
  width: 18px !important;
}

.lsit-parenthesis {
  padding-left: 20px;
}
.lsit-parenthesis li {
  position: relative;
  counter-increment: cnt;
  padding-left: 10px;
}
.lsit-parenthesis li:before {
  position: absolute;
  top: 1px;
  left: -17px;
  content: "(" counter(cnt) ")";
}

.list-notice li {
  padding-left: 17px;
}

.list-notice li:before {
  content: "※";
  position: absolute;
  left: 0;
}

ol.list-roma li{
  position: relative;
  counter-increment: cnt-roma;
  padding-left: 12px;
}
ol.list-roma li:before{
  position: absolute;
  top: 1px;
  left: -17px;
  content: "(" counter(cnt-roma,lower-roman) ")";
}
ol.list-integer{
  list-style: decimal;
}
ol.list-integer li{
  margin-top: 5px;
}

.list-zebra li{
  background: white;
  padding: 15px 20px 15px 25px;
  box-sizing: border-box;
}
.list-zebra li p{
  line-height: 26px;
  position: relative;
  padding: 0 0 0 25px;
}
.list-zebra li p:first-child{
  padding: 0;
  font-size: 15px;
}
.list-zebra.reverse li{
  background: #F8F8F8;
}
.list-zebra li:nth-child(odd){
  background: #F8F8F8;
}
.list-zebra.reverse li:nth-child(odd){
  background: white;
}
.list-zebra li .two-col-box{
  padding: 0 15px 0 20px;
}

.list-allarea-link.list-normal li{
  padding: 0 !important;
}
.list-allarea-link.list-normal li > a{
  display: block;
  padding: 15px 0;
  color: #212121;
}
.list-login-data{
  margin: 18px 0 0 0;
  padding: 0 0 0 5px;
}
.list-login-data li{
  margin: 0;
  padding: 0 0 0 20px;
  line-height: 26px;
  position: relative;
  display: inline-block;
  min-width: 85px;
}

/*---- annotation-list ----*/
.annotation-list {
  font-size: 12px;
  color: #242323;
  margin-top: 1px;
}
.annotation-list > li {
  display: table;
}
.annotation-list.block-center li {
  margin: 0 auto;
}
.annotation-list > li > span,
.annotation-list > li > div {
  display: table-cell;
  vertical-align: top;
}
.annotation-list > li > div {
  padding-left: 6px;
}

/*---- text-list ----*/
.text-list {
  margin: 0 0 0 20px;
}
.text-list > li {
  padding-bottom: 4px;
}
.text-list li:before {
  left: -20px;
}
.text-list li {
  position: relative;
}
.text-list > li:before {
  position: absolute;
  content: '・';
}

/*--------------------------------------
img
---------------------------------------- */

.mobile-img {
  width: 50px;
}

.flag-img {
  max-height: 16px;
  max-width: 24px;
  border: 1px solid #CCC;
  border-radius: 2px;
}

.mini-icon {
  width: 16px;
  position: absolute;
  top: 5px;
  left: 0;
}

.qa-icon-q {
  width: 14px;
  position: absolute;
  top: 18px;
  left: 0;
}

.qa-icon-a {
  width: 14px;
  position: absolute;
  top: 2px;
  left: 0;
}

img[src*="mysoftbank/set/data/add/shared/02/img/s/icon_paypay.png"],
img[src*="mysoftbank/set/data/add/shared/02/img/s/icon_paypay-square.png"] {
  width: 28px !important;
  padding-bottom: 2px;
}

/*--------------------------------------
input
---------------------------------------- */

.item {
  position: relative;
}

div input[type="text"], div input[type="tel"], div input[type="password"] {
  width: calc(100% - 10px);
  outline: none;
  margin-top: 5px;
  font-size: 20px;
  padding: 10px 0 10px 8px;
  border: 1px solid #CCC;
  border-radius: 2px;
  transition:border .3s ease;
}

div input[type="text"]::placeholder, div input[type="password"]::placeholder, div input[type="tel"]::placeholder {
  color: #CCC;
  font-size: 18px;
}

/* div input[type="text"].focus, div input[type="tel"].focus, div input[type="password"].focus, */
div input[type="text"]:not(.error):focus,
div input[type="tel"]:not(.error):focus,
div input[type="password"]:not(.error):focus,
div select:not(.error):focus {
  border: 1px solid #4D8BFF;
  box-shadow: 0px 0px 0px 1px #4D8BFF;
}

div input[type="text"].error,
div input[type="tel"].error,
div input[type="password"].error,
div select.error {
  border: 1px solid #FF3C3C !important;
  box-shadow: 0px 0px 0px 1px #FF3C3C;
}

.col-1-input input[type="text"] {
  width: 100%;
  font-size: 18px;
  border-radius: 2px;
}
.col-1-tel input[type="tel"] {
  box-sizing:border-box;
  height: 50px;
  font-size: 18px;
  border-radius: 2px;
}
.col-2-input input[type="text"] {
  width: calc(50% - 8px);
  height: 50px;
  box-sizing: border-box;
  font-size: 18px;
  border-radius: 2px;
}
.col-2-input input[type="text"]:first-child,
.col-2-input p+input {
  margin-right: 10px;
}

.birth-year,
.birth-month,
.birth-day{
  display: inline-block;
  width: calc(33% - 30px) !important;
  outline: none;
  margin: 5px 5px 0 0;
  font-size: 20px;
  padding-left:10px;
  border: 1px solid #CCC;
  border-radius: 0;
  background: white;
  height: 50px;
  color: #cccccc;
}

.birth-col1 {
  width: calc(100% - 2px) !important;
  position: relative;
  border-radius: 2px;
}
.birth-col2 {
  width: calc(50% - 8px) !important;
  margin-right: 0;
  position: relative;
  border-radius: 2px;
}

.birth-arrow {
  display: initial;
  position: relative;
}
.birth-arrow select {
  margin-right: 0;
}
.birth-arrow .card-expiration-arrow {
  right: 12px;
}

.validate-card-expiration-month,
.validate-card-expiration-year{
  display: inline-block;
  width: calc(50% - 38px) !important;
  outline: none;
  margin: 5px 5px 0 0;
  font-size: 20px;
  padding-left:10px;
  border: 1px solid #CCC;
  border-radius: 2px;
  background: white;
  height: 50px;
  color: #CCC;
  position: relative;
}

.card-expiration-arrow{
  border-right: 2px solid #4D8BFF;
  border-bottom: 2px solid #4D8BFF;
  position: absolute;
  width: 7px;
  height: 7px;
  top: 0;
  right: 43px;
  transform: rotate(45deg);
  pointer-events: none;
}

.check-animation{
  display: inline-block;
  position: absolute;
  left: 0;
}
.check-animation{
  display: inline-block;
  position: absolute;
  left: 0;
}
.check-animation:before{
  position: absolute;
  top: 13px;
  left: 3px;
  content: " ";
  display: inline-block;
  width: 0;
  height: 2px;
  background: white;
  transition: 0.12s;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 0;
}
.check-animation-start .check-animation:before{
  width: 8px;
  transform: rotate(45deg) translateY(2px);
  opacity: 1;
}

.check-animation:after{
  position: absolute;
  top: 15px;
  left: 8px;
  content: " ";
  display: inline-block;
  width: 0;
  height: 2px;
  background: white;
  transition: 0.12s;
  transition-delay: 0.06s;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0;
}
.check-animation-start .check-animation:after{
  width: 15px;
  transform: rotate(-45deg) translateY(-4px);
  opacity: 1;
}

.radio-circle{
  opacity: 0;
}

.checkbox-circle-label:after {
  position: absolute;
  top: -3px;
  left: -2px;
  width: 22px;
  height: 22px;
  content: '';
  border: 1px solid #CCC;
  border-radius: 20px;
  background: #ffffff;
  z-index: -1
}

.checkbox-circle-label.check-animation-start:after {
  background: linear-gradient(139deg, rgb(77, 139, 255), rgb(0, 89, 255));
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 20px;
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.15);
}

.radio-circle + label:before {
  position: absolute;
  top: 14px;
  left: 4px;
  width: 16px;
  height: 16px;
  content: '';
  cursor: pointer;
  z-index:5;
  background: #fff;
  border: none;
  border-radius: 20px;
}
.radio-privilege li.disabled .radio-circle + label:before {
  background: none;
}

.radio-circle:checked + label:before {
  background: linear-gradient(139deg, rgb(77, 139, 255), rgb(0, 89, 255));
  transform: scale(0,0);
  -webkit-animation: radio-circle_animation 0.1s linear forwards;
  animation: radio-circle_animation 0.1s linear forwards;
}

.radio-circle.already + label:before {
  transform: scale(1.0);
  animation: none;
}

@-webkit-keyframes radio-circle_animation {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
  }
}
@keyframes radio-circle_animation {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
.radio-privilege{

}
.radio-privilege.btn-size{
  width: 90%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.radio-privilege li{
  padding: 0;
}
.radio-privilege input{
  display: none;
}
.radio-privilege li.disabled label{
  background: transparent;
  box-shadow: 0 0 0 1px #BBBBBB inset;
}
.radio-privilege li.disabled label p{
  color: #BBBBBB;
}

.radio-privilege label{
  display: block;
  background: white;
  border-radius:24px;
  box-shadow: 0 0 0 1px #4D8BFF inset;
}
.radio-privilege label.active{
  box-shadow: 0 0 0 3px #4D8BFF inset;
  transition: all 0.7s;
}
.radio-privilege label > div{
  padding: 12px 16px 12px 48px;
}
.radio-privilege label p{
  color: #4D8BFF;
  min-height: 24px;
  line-height: 24px;
}

.radio-privilege .radio-circle + label:before{
  top: 17px;
  left: 19px;
  width: 14px;
  height: 14px;
}

.radio-privilege .circle{
  top: 14px;
  left: 16px;
  width: 20px;
  height: 20px;
}
.radio-privilege .circle::before,
.radio-privilege .circle::after{
  width: 22px;
  height: 22px;
}
.radio-privilege .circle .circle-inner{
  width: 18px;
  height: 18px;
}
.radio-privilege.convenience label > div {
  padding: 8px 16px 8px 48px;
}
.radio-privilege.convenience .radio-circle + label:before{
top: 17px;
}
.radio-privilege.convenience .circle{
top: 14px;
}
.radio-privilege.convenience li label img {
  margin-top: -2px;
}
.radio-privilege.convenience label p{
  color: #4D8BFF;
  min-height: 30px;
  line-height: 30px;
}

.radio-privilege li.payeasy label > div {
  padding: 12px 16px 12px 48px;
}
.radio-privilege li.payeasy .radio-circle + label:before{
top: 17px;
}
.radio-privilege li.payeasy .circle{
top: 14px;
}
.radio-privilege li.payeasy label img {
  margin-top: -2px;
}
.radio-privilege li.payeasy label p {
  color: #4D8BFF;
  min-height: 24px;
  line-height: 24px;
}

.radio-privilege li.disabled.payeasy label p{
  color: #BBBBBB;
}
.radio-privilege span.inline-block{
  margin-top: -6px;
}

.tlogo{
  width: 20px;
  padding-left: 15px;
  vertical-align: text-bottom;
}
.tpoint-recommend{
  position: absolute;
  top: 0;
  right: 0;
  background: #4D8BFF;
  padding: 2px 8px 2px 8px;
  border-radius: 3px;
}
.circle {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #4D8BFF;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  top: 10px;
}
.radio-privilege li.disabled .circle{
  border: 1px solid #BBBBBB;
  background: none;
  box-sizing: border-box;
}

.circle::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: -11px;
  width: 24px;
  height: 24px;
  background: #CCC;
  transform-origin: right 50%;
  z-index: 2;
}
.radio-privilege li.disabled .circle::before{
  background: none;
}

.circle::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 11px;
  width: 24px;
  height: 24px;
  background: #CCC;
  transform-origin: left 50%;
  z-index: 3;
}
.radio-privilege li.disabled .circle::after{
  background: none;
}

.radio-circle:checked + label + .circle:before{
  animation: rotate-circle-left 0.6s linear forwards;
}
.radio-circle:checked + label + .circle:after{
  animation: rotate-circle-right 0.6s linear forwards;
}

.radio-circle.already + label + .circle:before,
.radio-circle.already + label + .circle:after{
  background: #4D8BFF;
  animation: none;
}

@keyframes rotate-circle-right {
    0%   {
        transform: rotate(0deg);
        background: #CCC;
    }
    50%  {
        transform: rotate(180deg);
        background: #CCC;
    }
    50.01% {
        transform: rotate(360deg);
        background: #4D8BFF;
    }
    100% {
        transform: rotate(360deg);
        background: #4D8BFF;
    }
}

@keyframes rotate-circle-left {
   0%   { transform: rotate(0deg); }
   50%  { transform: rotate(0deg); }
   75% { transform: rotate(180deg); }
   100% { transform: rotate(180deg); }
}

.circle .circle-inner {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  z-index: 4;
}
.radio-privilege li.disabled .circle .circle-inner {
  background: none;
}

.password-box{
  position: relative;
}
.pre-switch-show-blind{
  position: absolute;
  width: 22px;
  top: 0;
  right: 2px;
}

.switch-show-blind {
  width: 22px;
  position: absolute;
  top: 18px;
  right: 5px;
}
.switch-show-blind.opacity-change{
  animation: opacity-change 0.5s ease-out forwards;
}

@-webkit-keyframes opacity-change {
  0% {opacity: 0.7;}
  100% {opacity: 1;}
}
@keyframes opacity-change {
  0% {opacity: 0.7;}
  100% {opacity: 1;}
}
.blind-line {
  position: absolute;
  top: 27px;
  left: -8px;
  content: "";
  display: inline-block;
  width: 0;
  height: 2px;
  background: #b9b9b9;
  transform: rotate(225deg);
}
.blind-line.already{
  width: 26px;
}

.blind-line.show {
  animation: blind-line 0.1s ease-out 0.05s forwards;
}
@-webkit-keyframes blind-line {
  0% {
    width: 0;
    top: 15px;
  }
  100% {width: 26px;}
}
@keyframes blind-linme {
    0% {
      width: 0;
      top: 15px;
    }
    100% {width: 26px;}
}

/* .validate-card-security-code {
  -webkit-text-security: disc;
} */

/*--------------------------------------
btn
---------------------------------------- */

.btn {
  display: block;
  position: relative;
  width: 90%;
  max-width: 300px;
  margin: 36px auto;
  padding: 10px 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  height: 48px;
  cursor: pointer;
  border-radius: 100px;
  border: none;
  outline: none;
  background: none;
}
.btn-mini{
  width: 57%;
  max-width: 180px;
  padding: 5px 0;
}

.btn.btn-flat {
  color: #fff;
  background-color: #0080FF;
}
.btn.btn-blue {
  color: white;
  background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);/* あとで削除 */
}
.btn.btn-blue.already {
  background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
}
.btn.btn-blue.animate-active {
  color: white;
  animation: btn-blue-active 0.1s ease-out forwards;
}
@-webkit-keyframes btn-blue-active {
  0% {
    background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
    opacity: 0;
  }
  100% {
    background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
    opacity: 1;
  }
}
@keyframes btn-blue-active {
  0% {
    background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
    opacity: 0;
  }
  100% {
    background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
    opacity: 1;
  }
}

.btn.btn-lightblue {
  border: 1px solid #4D8BFF;
  color: #4D8BFF;
  background: white;
}
.btn.btn-lightblue.another-color {
  background: rgba(255,252,252,0.35);
}
.btn.btn-lightblue.animate,
.btn.btn-red.animate {
  animation: btn-flash 0.4s ease-out forwards;
}
@-webkit-keyframes btn-flash {
  0% {
    background: none;
  }
  50% {
    background: #f0f4fa;
  }
  100% {
    background: none;
  }
}

/* JS不要アニメーション */
.btn.btn-lightblue2 {
  border: 1px solid #4D8BFF;
  color: #4D8BFF;
  background: white;
}

.btn.btn-lightblue2.animate-active {
  color: white;
  animation: btn-lightblue2-active 0.1s ease-out forwards;
}
@-webkit-keyframes btn-lightblue2-active {
  0% {
    background: none;
  }
  50% {
    background: #f0f4fa;
  }
  100% {
    background: none;
  }
}
@keyframes btn-lightblue2-active {
  0% {
    background: none;
  }
  50% {
    background: #f0f4fa;
  }
  100% {
    background: none;
  }
}
.disabled .btn.btn-blue, .disabled .btn.btn-lightblue, .disabled .btn.btn-red, .btn.btn-blue.disabled, .btn.btn-lightblue.disabled, .btn.btn-red.disabled {
  border: 1px solid #BBB;
  background: transparent;
  color: #BBB;
  pointer-events: none;
  box-shadow: none;
}
.disabled .btn.btn-blue.animate-nonactive{
  animation: btn-blue-nonactive 0.1s ease-out forwards;
}
@-webkit-keyframes btn-blue-nonactive {
  0% {
    background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
    opacity: 1;
  }
  99%{
    background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
    opacity: 0;
  }
  100% {
    background: transparent;
    opacity: 1;
  }
}
@keyframes btn-blue-nonactive {
  0% {
    background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
    opacity: 1;
  }
  99%{
    background: linear-gradient(100deg, #4D8BFF 10%, #0059FF 90%);
    opacity: 0;
  }
  100% {
    background: transparent;
    opacity: 1;
  }
}

.btn.btn-red {
  border: 1px solid #FF3C3C;
  color: #FF3C3C;
  background: white;
}

.btn.btn-lightgray {
  border: 1px solid #CCC;
  color: #333;
}

a.btn {
  height: 26px;
  line-height: 26px;
}

.btn.down-arrow:before {
  content: '';
  width: 5px;
  height: 5px;
  border-bottom: solid 2px #4D8BFF;
  border-right: solid 2px #4D8BFF;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -5px;
}

.checkbox_switch_label {
  width: 50px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.checkbox_switch_content {
  display: block;
  cursor: pointer;
  position: relative;
  border-radius: 30px;
  height: 31px;
  overflow: hidden;
}
.checkbox_switch_content:before {
  content: "";
  display: block;
  position: absolute;
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  top: 0;
  left: 0;
  border: 1.5px solid #bbb;
  border-radius: 30px;
  background-color: #bbb;
}
.checkbox_switch_content:after {
  content: "";
  display: block;
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  border-radius: 30px;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.checkbox_switch_input {
  display: none;
}
.checkbox_switch_circle {
  display: block;
  top: 2px;
  left: 2px;
  position: absolute;
  -webkit-box-shadow: 0 2px 6px #999;
  box-shadow: 0 2px 6px #999;
  width: 27px;
  height: 27px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  background-color: #fff;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.checkbox_switch_input:checked~.checkbox_switch_circle {
  left: 21px;
}
.checkbox_switch_input:checked~.checkbox_switch_content:after {
  background-color: #4D8BFF;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.list-checkbox {
  margin: 0.5rem 0.5rem 2rem 0.5rem;
  padding: 0.5rem 1rem;
  list-style: none;
}

.list-checkbox li {
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.list-checkbox label {
  line-height: 135%;
  position: relative;
  margin: 0.5rem;
  cursor: pointer;
}

.list-checkbox .checkbox_normal {
  position: relative;
  margin: 0 1rem 0 0;
  cursor: pointer;
}

.list-checkbox .checkbox_normal:before {
  position: absolute;
  z-index: 1;
  top: -0.575rem;
  left: 0.0775rem;
  width: 0.75rem;
  height: 0.375rem;
  content: '';
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
  transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
  -webkit-transform: rotate(-45deg) scale(0, 0);
  transform: rotate(-45deg) scale(0, 0);
  border: 2px solid white;
  border-top-style: none;
  border-right-style: none;
}

.list-checkbox .checkbox_normal:checked:before {
  -webkit-transform: rotate(-45deg) scale(1, 1);
  transform: rotate(-45deg) scale(1, 1);
}

.list-checkbox .checkbox_normal:after {
  position: absolute;
  top: -0.825rem;
  left: -0.100rem;
  width: 17px;
  height: 17px;
  content: '';
  cursor: pointer;
  border: 1px solid #CCC;
  border-radius: 2px;
  background: #ffffff;
}

.list-checkbox .checkbox_normal:checked:after {
  background: #4D8BFF;
  background: linear-gradient(139deg, rgb(77, 139, 255), rgb(0, 89, 255));
  border: none;
  width: 19px;
  height: 19px;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.15);
}

/*--------------------------------------
rule-box
---------------------------------------- */

.rule-box {
  margin: 0 15px;
  background: white;
  border: 1px solid rgb(242, 242, 242);
  border-top: none;
}

.rule-box.scroll {
  max-height: 250px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.rule-title {
  position: relative;
  color: white;
  background: #4D8BFF;
  padding: 7px 15px;
  margin: 0 15px;
}

.rule-img {
  position: absolute;
  width: 70px;
  top: 70px;
  right: 10px;
}

p.square {
  position: relative;
  padding-left: 18px;
}

p.square:before {
  content: "■";
  position: absolute;
  left: 1px;
  top: 0px;
  font-size: 14px;
}
/*--------------------------------------
tpoint-box
---------------------------------------- */
.tpoint-img-text{
  width: 100%;
}
.tpoint-img-text > div:first-child{
  display: inline-block;
  width: 32px;
}
.tpoint-img-text > div:last-child{
  display: inline-block;
  padding-left: 5px;
  max-width: calc( 100% - 45px);
}
/*--------------------------------------
state-box
---------------------------------------- */
.state-box{
  width: 100%;
  border: 1px solid #BBBBBB;
  border-radius: 4px;
  box-sizing: border-box;
}
.state-heading{
  width: 100%;
  background: #BBBBBB;
  color: white;
  height: 30px;
  line-height: 30px;
}
.state-content{
  background: white;
  border-radius: 0 0 4px 4px;
}
.state-box.blue-box{
  border: 3px solid #4D8BFF;
}
.state-box.blue-box .state-heading{
  background: #4D8BFF;
}

.state-mini-span{
  font-size: 12px;
  padding: 4px 4px 3px 4px;
  border-radius: 2px;
}
/*--------------------------------------
link & icon-text
---------------------------------------- */
a span.question-icon{
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: white;
  background: #4D8BFF;
  border-radius: 20px;
  margin-right: 5px;
  margin-top: -2px;
}
a span.question-icon::before{
  content: "?";
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}

p span.attention-icon{
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: white;
  background: #FF3C3C;
  border-radius: 20px;
  margin-right: 5px;
  margin-top: -2px;
}
p span.attention-icon::before{
  content: "!";
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
p span.info-icon{
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: white;
  background: #4D8BFF;
  border-radius: 20px;
  margin-right: 5px;
  margin-top: -2px;
}
p span.info-icon::before{
  content: "i";
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
p span.suggest-icon{
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: white;
  background: #3CCC16;
  border-radius: 20px;
  margin-right: 5px;
  margin-top: -2px;
}
p span.suggest-icon::before{
  content: "!";
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}

.down-arrow-icon{
  width: 30px;
}
.sb-icon{
  width: 129px;
  height: 19px;
}
.clear-icon{
  width: 20px;
  position: absolute;
  top: 18px;
  right: 7px;
}
.blank-link{
  position: relative;
  padding-right: 22px;
  vertical-align: baseline;
}
.blank-link > img{
  width: 18px;
  position: absolute;
  top: -1px;
  right: 0;
}

.blank-link.multiline{
  position: static;
  padding-right: 0px;
  vertical-align: baseline;
}
.blank-link.multiline > img{
  width: 18px;
  position: static;
}

.blank-icon-white{
  width: 15px;
  position: absolute;
  top: 15px;
  right: 27px;
}
.payeasy-icon{
  width: 30px;
}
.box-gray-inner .payeasy-icon{
  position: absolute;
  top: 0;
  right: 15px;
  width: 45px;
 }

.convinience-store-icon{
  width: 46px;
}
.camera-icon{
  width: 20px;
  margin-right: 10px;
}
.credit-card-icon{
  width: 38px;
  margin-right: 0.5em;
}
.load-gif{
  width: 24px;
  height: 24px;
}

.icon-box {
  display: table;
  width: 100%;
  margin-top: 15px;
}

.icon-box-image,
.icon-box-text {
  display: table-cell;
  vertical-align: top;
}

.icon-box-image {
  width: 18px;
  padding-right: 10px;
}

.icon-box-text {
  width: auto;
}


/*--------------------------------------
accordion
---------------------------------------- */

.accordion-arrow {
  padding: 5px 0;
  position: relative;
}

.accordion-arrow:after {
  content: '';
  width: 8px;
  height: 8px;
  border-bottom: solid 2px #4D8BFF;
  border-right: solid 2px #4D8BFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 49%;
  right: 10px;
  margin-top: -6px;
  transition: 0.15s;
}

.accordion-arrow.accordion-arrow-nextTo {
  display: inline-block;
  padding-bottom: 0;
}

.fw.design-guideline .accordion-arrow.accordion-arrow-nextToBlue {
  margin: 0 25px 20px 0;
}

.accordion-arrow.accordion-arrow-nextTo:after {
  top: 50%;
  right: -20px;
  transition: none;
}

.accordion-arrow.open:after {
  border: none;
  border-color: #4D8BFF;
  border-width: 2px;
  border-top: solid 2px #4D8BFF;
  border-left: solid 2px #4D8BFF;
  margin-top: -5px;
}

.accordion-arrow.accordion-arrow-nextTo.open:after {
  top: 68%;
  right: -20px;
}

.arrow-right-25::after{
  right: 25px !important;
}
.accordion-target,
.accordion-target-2,
.accordion-target-3,
.accordion-target-4 {
  display: none;
}

.box-bg-gray .accordion-target li,
.box-bg-gray .accordion-target-2 li,
.box-bg-gray .accordion-target-3 li {
  border-bottom: 0;
}

.box-bg-gray .accordion-target li + li,
.box-bg-gray .accordion-target-2 li + li,
.box-bg-gray .accordion-target-3 li + li {
  margin-top: 5px !important;
}

.box-bg-gray .accordion-target.list-dot {
  margin: 0;
}

.box-bg-gray .accordion-target.list-dot li:before {
  margin-left: 0;
}

/*--------------------------------------
indicater
---------------------------------------- */
.indicater{
  width: 45px;
  margin: 0 auto;
}

.indicater li{
  position: relative;
  display: inline-block;
  width: 10px;
}
.indicater li:before{
  position: absolute;
  width: 5px;
  height: 5px;
  content: ' ';
  background-image: url("../../img/s/dot_gray.svg");
}
.indicater li.current-indicator:before{
  background-image: url("../../img/s/dot_blue.svg");
}

/*--------------------------------------
modal
---------------------------------------- */

.modal-content {
  display: none;
  width: 80%;
  box-sizing: border-box;
  position: fixed;
  z-index: 1002;
  background-color: #fff;
  padding: 20px 0 0 0;
  color: #333;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
}

.modal-content.height-ip4s {
  max-height: 80vh;
}

.modal-content.height-ip4s .scroll-area{
  max-height: calc(80vh - 170px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.modal-content ul {
  overflow:hidden;
}

.modal-content p {
  margin: 0;
  padding: 0 20px 10px;
}

.modal-content .modal-btn-wrapper {
  border-top: 1px solid #d8dadc;
  text-align: right;
}

.modal-content .modal-btn-wrapper .btn-modal {
  padding: 12px 27px;
  font-size: 17px;
  color: #4D8BFF;
  text-align: center;
}

.modal-content .modal-btn-wrapper.two-col .btn-modal {
  padding: 12px 0;
  display: inline-block;
  width: 48%;
  line-height: 1;
}

.modal-content .modal-btn-wrapper.two-col .btn-modal.border-right {
  border-right: 1px solid #d8dadc;
}

.modal-content .modal-ttl {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding: 0 10px 18px;
  margin-bottom: 20px;
}

.modal-bg {
  display: none;
  top: 0;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 1001;
  opacity: 0.4;
  background-color: #000;
}

/*--------------------------------------
table
---------------------------------------- */
td {
    border: 1px #212121 solid;
    padding: 5px;
    vertical-align: top;
}
th {
    border: 1px #212121 solid;
    padding: 5px;
}

.table-1{
  width: 100%;
  text-align: center;
  vertical-align: middle;
}
.table-1 *{
  padding: 0;
  border-color: #CCCCCC;
}
.table-1 tr{
  height: 42px;
  font-size: 15px;
}
.table-1 tr:first-child{
  font-size: 12px;
  background: #EDFBFF;
}
.table-1 tr span{
  color: #666;
}

.table-1 td{
  vertical-align: middle;
  background: #FFFFFF;
  padding: 0;
  width: 20%;
}
.table-1 td span{
  font-size: 13px;
}

.table-2{
  width: 100%;
  text-align: center;
  vertical-align: middle;
}
.table-2 *{
  padding: 0;
  border-color: #CCCCCC;
}
.table-2 tr{
  height: 42px;
  font-size: 15px;
}
.table-2 tr:first-child{
  font-size: 12px;
  background: #EDFBFF;
}
.table-2 tr:first-child th:first-child{
  background: #DCF7FF;
}
.table-2 tr span{
  color: #666;
}
.table-2 td{
  vertical-align: middle;
  background: #FFFFFF;
  padding: 0;
  width: 25%;
}
.table-2 td:first-child{
  font-size: 12px;
  background: #EDFBFF;
}

.table-2 td span{
  font-size: 13px;
}

.help-img-table{
  width: calc(100% + 12px);
  margin-left: -6px;
}

.help-img-table td{
  border: none;
  text-align: center;
  padding: 0 6px 0 6px;
  width: 25%;
}

.help-img-table td img{
  width: 100%;
  padding-bottom: 7px;
}


/*--------------------------------------
agreement-borderWrap
---------------------------------------- */
.agreement-borderWrap {
  margin-top: 10px;
}
.agreement-borderWrap .agreement-borderWrap_item {
  display: table;
  width: 100%;
  padding: 15px 0;
  border-top: 1px solid #CCC;
}
.agreement-borderWrap .agreement-borderWrap_item:last-child {
  padding-bottom: 0;
}
.agreement-borderWrap .agreement-borderWrap_item .agreement-borderWrap_num {
  font-size: 16px;
  font-weight: bold;
  width: 16px;
  vertical-align: top;
}
.agreement-borderWrap .agreement-borderWrap_item .agreement-borderWrap_body {
  width: auto;
  padding-left: 10px;
}
.agreement-borderWrap .agreement-borderWrap_item .agreement-borderWrap_body .note {
  line-height: 1.5;
}
.agreement-borderWrap .agreement-borderWrap_item .agreement-borderWrap_body .agreement-borderWrap_target {
  margin: 5px 0;
}
.agreement-borderWrap .agreement-borderWrap_item .agreement-borderWrap_num,
.agreement-borderWrap .agreement-borderWrap_item .agreement-borderWrap_body {
  display: table-cell;
}

/*--------------------------------------
two-col-box
---------------------------------------- */
.two-col-box-another{
  width: 100%;
}
.two-col-box-another > .row {
  width: 100%;
}
.two-col-box-another > .row > .col-1{
  display: inline-block;
  width: 70px;
  vertical-align: top;
}
.two-col-box-another > .row >.col-2{
  display: inline-block;
  width: calc(100% - 75px);
  vertical-align: top;
}


/*--------------------------------------
quotation-title
---------------------------------------- */
.quotation-title {
  position: relative;
  text-align: center;
  margin: 10px 0;
}

.quotation-title span {
  display: block;
  position: relative;
  height: 16px;
}

.quotation-title p {
  color: #4D8BFF;
  margin: 10px 8%;
  font-weight: bold;
}

.quotation-title span.quotation-title-before:before {
  left: 0;
}

.quotation-title span.quotation-title-before:after {
  right: 18px;
}

.quotation-title span.quotation-title-before:before,
.quotation-title span.quotation-title-after:after {
  content: '';
  top: 50%;
  width: 20px;
  height: 16px;
  margin-top: -8px;
  position: absolute;
  background: url(../../img/s/quotation.svg) no-repeat;
}

.quotation-title span.quotation-title-after:before {
  left: 18px;
}

.quotation-title span.quotation-title-after:after {
  right: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.quotation-title span.quotation-title-before:after,
.quotation-title span.quotation-title-after:before {
  content: '';
  border-top: 1px solid #BBBBBB;
  width: calc(100% - 48px);
  height: 1px;
  top: 50%;
  position: absolute;
}


/*--------------------------------------
rounding-box
---------------------------------------- */
.rounding-box {
  border-radius: 10px;
  padding: 20px;
  background-color: #fff;
}
.rounding-box.bg-color-aqua {
  background-color: #E6F6F8;
  padding: 20px 3.2vw;
}
.rounding-box.radius-lg {
  border-radius: 16px;
}
.rounding-box.inner-sm {
  padding-top: 15px;
  padding-bottom: 15px;
}
.rounding-box .title {
  font-weight: bold;
  margin-bottom: 7px;
  text-align: center;
}

/*--------------------------------------
bg
---------------------------------------- */
.bg-transparent {
  background-color: transparent !important;
}
.bg-transparent-white{
  background : rgba(255,255,255,0.95) !important;
}
.bg-transparent-white-60{
  background : rgba(255,255,255,0.6) !important;
}
.bg-blue{
  background: #4D8BFF !important;
}
.bg-lightblue{
  background: #EEF9FE !important;
}
.bg-white{
  background: white !important;
}
.bg-gray{
  background: #707070 !important;
}
.bg-color-pink {
  background-color: #FFF2F8;
}
.bg-color-green {
  background-color: #effbec;
}
.bg-color-red {
  background-color: #FFF0F0;
}
.bg-color-blue,
.bg-slant.bg-color-blue:before {
  background-color: #EDF6FF;
}
.bg-color-blue .list-box-item + .list-box-item {
  border-top: 1px solid #D1E8FF !important;
}
.bg-slant {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  top: 0;
  z-index: 0;
  background-color: transparent;
}
.bg-slant:before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  right: 0;
  transform: skewY(-6deg);
  z-index: -1;
}

/*--------------------------------------
adjust
---------------------------------------- */
.break-all{
  word-break: break-all;
}
.display-inline {
  display: inline !important;
}
.underline{
  text-decoration: underline;;
}
.separate-line{
  height: 12px;
  background: #EEEEEE;
}
.fix-bottom{
  position: fixed;
  bottom: 0;
}
.error-text{
  width: 1500px;
	height: 200px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.font-size-adjust{
  height: 32px;
  visibility: hidden;
}
.z-index-10{
  z-index: 10;
}
.none {
  display: none !important;
}
.hidden{
  visibility: hidden;;
}
.absolute {
  position: absolute !important;
}

.relative {
  position: relative;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}
.table {
  display: table !important;
  box-sizing: border-box;
}
.table-cell {
  display: table-cell !important;
}

.align-item-center {
  align-items: center;
  height: 72.5vh;
  display: grid;
}
/*--------------------------------------
error-area
---------------------------------------- */

.error-area {
  margin-bottom: 30px;
}

#sbid-contents.is-headerFixed {
  padding-top: 50px;
  box-sizing: border-box;
  min-height: 100%;
}

#sbid-contents.is-headerFixed h1 {
  width: 100%;
  top: 0;
  position: fixed;
  padding: 25px 0;
  z-index: 99;
}

#sbid-contents.is-headerFixed h1.bg-graTransparent {
  background: -moz-linear-gradient(top, #fff 45%, rgba(255,255,255,0));
  background: -webkit-linear-gradient(top, #fff 45%, rgba(255,255,255,0));
  background: linear-gradient(to bottom, #fff 45%, rgba(255,255,255,0));
}

#sbid-contents.is-headerFixed .section-inner h1 {
  top: 25px;
  margin: -25px -20px 0;
}

/*--------------------------------------
paypay
---------------------------------------- */
.paypay-bonus-price,
.paypay-bonus-percent {
  font-size: 34px;
  line-height: 1;
}
.baloon-arrow {
  margin-top: 10px;
}
.baloon-arrow-bg {
  position: relative;
}
.baloon-arrow-text {
  color: #fff;
  width: 100%;
  text-align: center;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  transform: translate(0,-50%);
  position: absolute;
}
.baloon-arrow-top {
  line-height: 0.5;
}
.baloon-arrow-top img {
  vertical-align: bottom;
}
.paypay-privilege-decoration {
  text-align: center;
  position: relative;
  min-height: 110px;
  margin-top: 10px;
}
.paypay-privilege-decoration-inner {
  width: 100%;
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 1;
}

.paypay-privilege-decoration:before,
.paypay-privilege-decoration:after {
  content: '';
  top: 50%;
  width: 34px;
  height: 93px;
  position: absolute;
  -webkit-transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  transform: translate(0,-50%);
  z-index: 0;
}
.paypay-privilege-decoration:before {
  left: 5px;
  background: url(../../img/s/privilege-decoration-before.svg) no-repeat;
}
.paypay-privilege-decoration:after {
  right: 5px;
  background: url(../../img/s/privilege-decoration-after.svg) no-repeat;
}
.paypay-privilege-decoration .special-description {
  font-size: 16px;
  font-weight: bold;
}
.paypay-privilege-decoration .special-description span {
  color: #FF0033;
  line-height: 1;
  vertical-align: baseline;
}

/* ----------------------------------------------------------------
step
----------------------------------------------------------------- */
.step-list {
  display: table;
  position: relative;
  margin: 8px auto 28px;
  text-align: center;
}
.step-list li {
  width: 59px;
  font-size: 12px;
  list-style: none;
  position: relative;
  display: table-cell;
  vertical-align: top;
}
.step-list li + li {
  padding-left: 8px;
}
.step-list li:after {
  background: #CCCCCC;
  content: "";
  width: calc(100% - 16px);
  height: 2px;
  position: absolute;
  left: calc(-50% + 10px);
  top: 11px;
}
.step-list li:first-child:after {
  display: none;
}
.step-list li span {
  font-size: 0;
  background: #cccccc;
  color: #ffffff;
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 24px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.step-list .list-circle {
  min-height: 28px;
}
.fw .step-list .list-circle + p {
  line-height: 1.3em;
}
.step-list .visited:after {
  background: #0080FF;
}
.step-list .external:after {
  background: #ccc;
}
.step-list .external.visited:after {
  background: #999;
}
.step-list .visited span {
  background: #0080FF;
}
.step-list .active {
  font-weight: bold;
  color: #0080FF;
}
.step-list .active span {
  font-size: 14px;
  color: #fff;
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}
.step-list .external span {
  background: #ccc;
}
.step-list .external.visited span {
  background: #999;
}


/*--------------------------------------
text-color
---------------------------------------- */
.base-color {
  color: #212121;
}

.light-gray {
  font-size: 12px;
  color: #777;
}

.gray{
  color: #666 !important;
}

.light-blue {
  color: #4D8BFF;
}

.blue{
  color: #007AFF;
}
.white{
  color: #FFFFFF;
}

.brown{
  color: #666666;
}

.txtError {
  color: #FF3C3C;
  font-size: 14px;
}

.red {
  color: #FF3C3C;
}
.thin-red {
  color: #FF0027;
}

.underline {
  text-decoration: underline !important;
}

.after-none::after {
  display: none;
}

.no-shadow {
  box-shadow: none;
}
.fix-bottom.no-shadow {
  margin-bottom: 31px;
}
.fix-bottom.bg-transparent-white.no-shadow {
  margin-bottom: 0;
  padding-bottom: 12px;
}
.lighter {
  font-weight: lighter !important;
}
.bold {
  font-weight: bold !important;
}

.top {
  vertical-align: top !important;
}
.text-top {
  vertical-align: text-top;
}
.middle {
  vertical-align: middle !important;
}

.bottom {
  vertical-align: bottom !important;
}
.text-bottom{
  vertical-align: text-bottom !important;
}
.baseline{
  vertical-align: baseline !important;
}

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

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

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

.f-right {
  float: right !important;
}

.f-left {
  float: left !important;
}

.f-none{
  float: none !important;
}

.border-none{
  border: none !important;
}
.border-top-lightgray{
  border-top: 1px solid #CCC !important;
}
.border-top-lightgray-12{
  border-top: 12px solid #f2f2f2 !important;
}
.border-bottom-lightgray {
  border-bottom: 1px solid #CCC !important;
}
.border-bottom-lightgray-12{
  border-bottom: 12px solid #f2f2f2 !important;
}
.fw .js-associated-company .border-bottom-lightgray {
  border: none !important;
  padding-bottom: 0;
}
.border-red{
  border: 1px solid #FF0027;
}
.border-gray{
  border: 1px solid #666;
}

.border-top-none{
  border-top: none !important;
}
.border-bottom-none{
  border-bottom: none !important;
}

.fs-10 {
  font-size: 10px !important;
}
.fs-11 {
  font-size: 11px !important;
}
.fs-12 {
  font-size: 12px !important;
}
.fs-13 {
  font-size: 13px !important;
}
.fs-14 {
  font-size: 14px !important;
}
.fs-15 {
  font-size: 15px !important;
}
.fs-16 {
  font-size: 16px !important;
}
.fs-17 {
  font-size: 17px !important;
}
.fs-18 {
  font-size: 18px !important;
}
.fs-19 {
  font-size: 19px !important;
}
.fs-20 {
  font-size: 20px !important;
}
.fs-21 {
  font-size: 21px !important;
}
.fs-22 {
  font-size: 22px !important;
}
.fs-23 {
  font-size: 23px !important;
}
.fs-24 {
  font-size: 24px !important;
}
.fs-25 {
  font-size: 25px !important;
}
.fs-26 {
  font-size: 26px !important;
}
.fs-27 {
  font-size: 27px !important;
}
.fs-28 {
  font-size: 28px !important;
}
.fs-30 {
  font-size: 30px !important;
}
.fs-34 {
  font-size: 34px !important;
}
.fs-36 {
  font-size: 36px !important;
}
.fs-38 {
  font-size: 38px !important;
}


@media screen and (max-width: 320px) {
  .se-fs-12{
    font-size: 12px !important;
  }
}
.m-0-auto {
  margin: 0 auto !important;
}

.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}

.m-top-0 {margin-top: 0 !important;}
.m-top-1 {margin-top: 1px !important;}
.m-top-2 {margin-top: 2px !important;}
.m-top-3 {margin-top: 3px !important;}
.m-top-4 {margin-top: 4px !important;}
.m-top-5 {margin-top: 5px !important;}
.m-top-6 {margin-top: 6px !important;}
.m-top-7 {margin-top: 7px !important;}
.m-top-8 {margin-top: 8px !important;}
.m-top-9 {margin-top: 9px !important;}
.m-top-10 {margin-top: 10px !important;}
.m-top-11 {margin-top: 11px !important;}
.m-top-12 {margin-top: 12px !important;}
.m-top-13 {margin-top: 13px !important;}
.m-top-14 {margin-top: 14px !important;}
.m-top-15 {margin-top: 15px !important;}
.m-top-16 {margin-top: 16px !important;}
.m-top-17 {margin-top: 17px !important;}
.m-top-18 {margin-top: 18px !important;}
.m-top-19 {margin-top: 19px !important;}
.m-top-20 {margin-top: 20px !important;}
.m-top-21 {margin-top: 21px !important;}
.m-top-22 {margin-top: 22px !important;}
.m-top-23 {margin-top: 23px !important;}
.m-top-24 {margin-top: 24px !important;}
.m-top-25 {margin-top: 25px !important;}
.m-top-26 {margin-top: 26px !important;}
.m-top-27 {margin-top: 27px !important;}
.m-top-28 {margin-top: 28px !important;}
.m-top-29 {margin-top: 29px !important;}
.m-top-30 {margin-top: 30px !important;}
.m-top-31 {margin-top: 31px !important;}
.m-top-32 {margin-top: 32px !important;}
.m-top-33 {margin-top: 33px !important;}
.m-top-34 {margin-top: 34px !important;}
.m-top-35 {margin-top: 35px !important;}
.m-top-36 {margin-top: 36px !important;}
.m-top-37 {margin-top: 37px !important;}
.m-top-38 {margin-top: 38px !important;}
.m-top-39 {margin-top: 39px !important;}
.m-top-40 {margin-top: 40px !important;}
.m-top-41 {margin-top: 41px !important;}
.m-top-42 {margin-top: 42px !important;}
.m-top-43 {margin-top: 43px !important;}
.m-top-44 {margin-top: 44px !important;}
.m-top-45 {margin-top: 45px !important;}
.m-top-46 {margin-top: 46px !important;}
.m-top-47 {margin-top: 47px !important;}
.m-top-48 {margin-top: 48px !important;}
.m-top-49 {margin-top: 49px !important;}
.m-top-50 {margin-top: 50px !important;}
.m-top-55 {margin-top: 55px !important;}
.m-top-60 {margin-top: 60px !important;}
.m-top-65 {margin-top: 65px !important;}
.m-top-70 {margin-top: 70px !important;}
.m-top-75 {margin-top: 75px !important;}
.m-top-80 {margin-top: 80px !important;}

.m-top--3 {
  margin-top: -3px !important;
}

.m-top--10 {
  margin-top: -10px !important;
}

.m-right-auto {margin-right: auto !important;}
.m-right-0 {margin-right: 0 !important;}
.m-right-1 {margin-right: 1px !important;}
.m-right-2 {margin-right: 2px !important;}
.m-right-3 {margin-right: 3px !important;}
.m-right-4 {margin-right: 4px !important;}
.m-right-5 {margin-right: 5px !important;}
.m-right-6 {margin-right: 6px !important;}
.m-right-7 {margin-right: 7px !important;}
.m-right-8 {margin-right: 8px !important;}
.m-right-9 {margin-right: 9px !important;}
.m-right-10 {margin-right: 10px !important;}

.m-right-12 {
  margin-right: 12px !important;
}

.m-right-15 {
  margin-right: 15px !important;
}

.m-right-20 {
  margin-right: 20px !important;
}

.m-right-25 {
  margin-right: 25px !important;
}

.m-right-30 {
  margin-right: 30px !important;
}

.m-right-35 {
  margin-right: 35px !important;
}

.m-right-40 {
  margin-right: 40px !important;
}

.m-right-45 {
  margin-right: 45px !important;
}

.m-right-50 {
  margin-right: 50px !important;
}

.m-right-55 {
  margin-right: 55px !important;
}

.m-right-60 {
  margin-right: 60px !important;
}

.m-right-65 {
  margin-right: 65px !important;
}

.m-right-70 {
  margin-right: 70px !important;
}

.m-right-75 {
  margin-right: 75px !important;
}

.m-right-80 {
  margin-right: 80px !important;
}

.m-bottom-0 {
  margin-bottom: 0 !important;
}

.m-bottom-1 {
  margin-bottom: 1px !important;
}

.m-bottom-2 {
  margin-bottom: 2px !important;
}

.m-bottom-3 {
  margin-bottom: 3px !important;
}

.m-bottom-4 {
  margin-bottom: 4px !important;
}

.m-bottom-5 {
  margin-bottom: 5px !important;
}

.m-bottom-10 {margin-bottom: 10px !important;}
.m-bottom-11 {margin-bottom: 11px !important;}
.m-bottom-12 {margin-bottom: 12px !important;}
.m-bottom-13 {margin-bottom: 13px !important;}
.m-bottom-14 {margin-bottom: 14px !important;}
.m-bottom-15 {
  margin-bottom: 15px !important;
}

.m-bottom-16 {
  margin-bottom: 16px !important;
}

.m-bottom-18 {
  margin-bottom: 18px !important;
}

.m-bottom-20 {
  margin-bottom: 20px !important;
}

.m-bottom-21 {
  margin-bottom: 21px !important;
}

.m-bottom-24 {
  margin-bottom: 24px !important;
}

.m-bottom-25 {
  margin-bottom: 25px !important;
}

.m-bottom-26 {
  margin-bottom: 26px !important;
}

.m-bottom-30 {
  margin-bottom: 30px !important;
}

.m-bottom-31 {margin-bottom: 31px !important;}
.m-bottom-32 {margin-bottom: 32px !important;}
.m-bottom-33 {margin-bottom: 33px !important;}
.m-bottom-34 {margin-bottom: 34px !important;}

.m-bottom-35 {
  margin-bottom: 35px !important;
}

.m-bottom-36 {
  margin-bottom: 36px !important;
}

.m-bottom-40 {
  margin-bottom: 40px !important;
}

.m-bottom-45 {
  margin-bottom: 45px !important;
}

.m-bottom-50 {
  margin-bottom: 50px !important;
}

.m-bottom-55 {
  margin-bottom: 55px !important;
}

.m-bottom-60 {
  margin-bottom: 60px !important;
}

.m-bottom-65 {
  margin-bottom: 65px !important;
}

.m-bottom-70 {
  margin-bottom: 70px !important;
}

.m-bottom-75 {
  margin-bottom: 75px !important;
}

.m-bottom-80 {
  margin-bottom: 80px !important;
}
.m-bottom--50 {
  margin-bottom: -50px !important;
}

.m-left-auto {margin-left: auto !important;}
.m-left-0 {margin-left: 0 !important;}
.m-left-5 {margin-left: 5px !important;}
.m-left-10 {margin-left: 10px !important;}
.m-left-15 {margin-left: 15px !important;}
.m-left-20 {margin-left: 20px !important;}
.m-left-25 {margin-left: 25px !important;}
.m-left-30 {margin-left: 30px !important;}
.m-left-32 {margin-left: 32px !important;}
.m-left-35 {margin-left: 35px !important;}
.m-left-40 {margin-left: 40px !important;}
.m-left-45 {margin-left: 45px !important;}
.m-left-50 {margin-left: 50px !important;}
.m-left-55 {margin-left: 55px !important;}
.m-left-60 {margin-left: 60px !important;}
.m-left-65 {margin-left: 65px !important;}
.m-left-70 {margin-left: 70px !important;}
.m-left-75 {margin-left: 75px !important;}
.m-left-80 {margin-left: 80px !important;}

.m-left--8 {
  margin-left: -8px !important;
}

.m-left--30 {
  margin-left: -30px !important;
}

.p-none{
  padding: 0 !important;
}
.p-top-0 {
  padding-top: 0 !important;
}

.p-top-1 {
  padding-top: 1px !important;
}

.p-top-2 {
  padding-top: 2px !important;
}

.p-top-3 {
  padding-top: 3px !important;
}

.p-top-4 {
  padding-top: 4px !important;
}

.p-top-5 {
  padding-top: 5px !important;
}

.p-top-6 {
  padding-top: 6px !important;
}

.p-top-8 {
  padding-top: 8px !important;
}

.p-top-9 {
  padding-top: 9px !important;
}

.p-top-10 {
  padding-top: 10px !important;
}

.p-top-12 {
  padding-top: 12px !important;
}

.p-top-15 {
  padding-top: 15px !important;
}

.p-top-16 {
  padding-top: 16px !important;
}

.p-top-18 {
  padding-top: 18px !important;
}

.p-top-20 {
  padding-top: 20px !important;
}

.p-top-24 {
  padding-top: 24px !important;
}

.p-top-25 {
  padding-top: 25px !important;
}

.p-top-30 {
  padding-top: 30px !important;
}

.p-top-35 {
  padding-top: 35px !important;
}
.p-top-36 {
  padding-top: 36px !important;
}

.p-top-40 {
  padding-top: 40px !important;
}

.p-top-45 {
  padding-top: 45px !important;
}

.p-top-48 {
  padding-top: 48px !important;
}

.p-top-50 {
  padding-top: 50px !important;
}

.p-top-55 {
  padding-top: 55px !important;
}

.p-top-60 {
  padding-top: 60px !important;
}

.p-top-65 {
  padding-top: 65px !important;
}

.p-top-70 {
  padding-top: 70px !important;
}

.p-top-75 {
  padding-top: 75px !important;
}

.p-top-80 {
  padding-top: 80px !important;
}

.p-top-200 {
  padding-top: 200px !important;
}

.p-right-0 {
  padding-right: 0 !important;
}

.p-right-1 {
  padding-right: 1px !important;
}

.p-right-2 {
  padding-right: 2px !important;
}

.p-right-3 {
  padding-right: 3px !important;
}

.p-right-4 {
  padding-right: 4px !important;
}

.p-right-5 {
  padding-right: 5px !important;
}

.p-right-8 {
  padding-right: 8px !important;
}

.p-right-9 {
  padding-right: 9px !important;
}

.p-right-10 {
  padding-right: 10px !important;
}

.p-right-15 {
  padding-right: 15px !important;
}

.p-right-16 {
  padding-right: 16px !important;
}

.p-right-18 {
  padding-right: 18px !important;
}

.p-right-20 {
  padding-right: 20px !important;
}

.p-right-25 {
  padding-right: 25px !important;
}

.p-right-30 {
  padding-right: 30px !important;
}

.p-right-35 {
  padding-right: 35px !important;
}

.p-right-40 {
  padding-right: 40px !important;
}

.p-right-45 {
  padding-right: 45px !important;
}

.p-right-50 {
  padding-right: 50px !important;
}

.p-right-55 {
  padding-right: 55px !important;
}

.p-right-60 {
  padding-right: 60px !important;
}

.p-right-65 {
  padding-right: 65px !important;
}

.p-right-70 {
  padding-right: 70px !important;
}

.p-right-75 {
  padding-right: 75px !important;
}

.p-right-80 {
  padding-right: 80px !important;
}

.p-bottom-0 {padding-bottom: 0 !important;}
.p-bottom-1 {padding-bottom: 1px !important;}
.p-bottom-2 {padding-bottom: 2px !important;}
.p-bottom-3 {padding-bottom: 3px !important;}
.p-bottom-4 {padding-bottom: 4px !important;}
.p-bottom-5 {padding-bottom: 5px !important;}
.p-bottom-6 {padding-bottom: 6px !important;}
.p-bottom-8 {padding-bottom: 8px !important;}
.p-bottom-9 {padding-bottom: 9px !important;}
.p-bottom-10 {padding-bottom: 10px !important;}
.p-bottom-12 {padding-bottom: 12px !important;}
.p-bottom-15 {padding-bottom: 15px !important;}
.p-bottom-16 {padding-bottom: 16px !important;}
.p-bottom-18 {padding-bottom: 18px !important;}
.p-bottom-20 {padding-bottom: 20px !important;}
.p-bottom-24 {padding-bottom: 24px !important;}
.p-bottom-25 {padding-bottom: 25px !important;}
.p-bottom-30 {padding-bottom: 30px !important;}
.p-bottom-35 {padding-bottom: 35px !important;}
.p-bottom-40 {padding-bottom: 40px !important;}
.p-bottom-45 {padding-bottom: 45px !important;}
.p-bottom-50 {padding-bottom: 50px !important;}
.p-bottom-55 {padding-bottom: 55px !important;}
.p-bottom-60 {padding-bottom: 60px !important;}
.p-bottom-65 {padding-bottom: 65px !important;}
.p-bottom-70 {padding-bottom: 70px !important;}
.p-bottom-75 {padding-bottom: 75px !important;}
.p-bottom-80 {padding-bottom: 80px !important;}
.p-bottom-100 {padding-bottom: 100px !important;}
.p-bottom-130 {padding-bottom: 130px !important;}
.p-bottom-180 {padding-bottom: 180px !important;}
.p-bottom-200 {padding-bottom: 200px !important;}

.p-left-0 {
  padding-left: 0 !important;
}

.p-left-1 {
  padding-left: 1px !important;
}

.p-left-2 {
  padding-left: 2px !important;
}

.p-left-3 {
  padding-left: 3px !important;
}

.p-left-4 {
  padding-left: 4px !important;
}

.p-left-5 {
  padding-left: 5px !important;
}

.p-left-10 {
  padding-left: 10px !important;
}

.p-left-15 {
  padding-left: 15px !important;
}

.p-left-16 {
  padding-left: 16px !important;
}

.p-left-18 {
  padding-left: 18px !important;
}

.p-left-20 {
  padding-left: 20px !important;
}

.p-left-25 {
  padding-left: 25px !important;
}

.p-left-30 {
  padding-left: 30px !important;
}

.p-left-35 {
  padding-left: 35px !important;
}

.p-left-40 {
  padding-left: 40px !important;
}

.p-left-45 {
  padding-left: 45px !important;
}

.p-left-50 {
  padding-left: 50px !important;
}

.p-left-55 {
  padding-left: 55px !important;
}

.p-left-56 {
  padding-left: 56px !important;
}

.p-left-60 {
  padding-left: 60px !important;
}

.p-left-65 {
  padding-left: 65px !important;
}

.p-left-70 {
  padding-left: 70px !important;
}

.p-left-75 {
  padding-left: 75px !important;
}

.p-left-80 {
  padding-left: 80px !important;
}
.w-auto {
  width: auto !important;
}
.w-14px {
  width: 14px !important;
}
.w-18px {
  width: 18px !important;
}
.w-20px {
  width: 20px !important;
}

.w-24px {
  width: 24px !important;
}

.w-36px {
  width: 36px !important;
}
.w-42px {
  width: 42px !important;
}
.w-48px {
  width: 48px !important;
}
.w-50px {
  width: 50px !important;
}
.w-66px {
  width: 66px !important;
}
.w-72px {
  width: 72px !important;
}
.w-230px {
  width: 230px !important;
}
.w-280px {
  width: 280px !important;
}

.h-50px {
  height: 50px !important;
}

.w-5 {width: 5% !important;}
.w-10 {width: 10% !important;}
.w-15 {width: 15% !important;}
.w-20 {width: 20% !important;}
.w-25 {width: 25% !important;}
.w-30 {width: 30% !important;}
.w-35 {width: 35% !important;}
.w-40 {width: 40% !important;}
.w-45 {width: 45% !important;}
.w-50 {width: 50% !important;}
.w-55 {width: 55% !important;}
.w-60 {width: 60% !important;}
.w-65 {width: 65% !important;}
.w-70 {width: 70% !important;}
.w-75 {width: 75% !important;}
.w-80 {width: 80% !important;}
.w-82 {width: 82% !important;}
.w-83 {width: 83% !important;}
.w-85 {width: 85% !important;}
.w-90 {width: 90% !important;}
.w-95 {width: 95% !important;}
.w-100 {width: 100% !important;}

.w-max {
  max-width: 327px !important;
  width: 100% !important;
}
.w-max-lg {
  max-width: 480px !important;
  width: 100% !important;
}
.w-max-modal { max-width: 279px; }

.h-100 {
  height: 100% !important;
}

.l-height-1 {
  line-height: 1;
}

.l-height-oaah {
  line-height: 1.5em;
}