@charset "UTF-8";
/*--------------------------------------
design-guideline
---------------------------------------- */
a {
  color: #0070F2;
}
.red {
  color: #FF0000;
}
.fw.design-guideline p,
.fw.design-guideline .text-list li {
  line-height: 22px;
}
.fw.design-guideline .paypay-bonus-price {
  font-family: -apple-system, BlinkMacSystemFont;
  font-weight: 300;
  vertical-align: baseline;
}
.fw.design-guideline .blank-link {
  padding-right: 20px;
}
.fw.design-guideline .blank-icon-white {
  position: static;
  padding-left: 5px;
  padding-bottom: 2px;
}

.l-height-1 {
  line-height: 1 !important;
}
.l-height-1_5 {
  line-height: 1.5 !important;
}

.top-spacer {
  margin-top: 100px;
}

/*--- font ---*/
.txtRed {
  color: #F00A0A;
}
.txtBlue {
  color: #0070F2;
}
.font-app {
  font-family: -apple-system, BlinkMacSystemFont;
}
.fw-300 {
  font-weight: 300;
}

/*--- group ---*/
.fw.design-guideline .g-h2 {
  margin-bottom: 39px;
}
.fw.design-guideline .g-h2.b_t {
  margin-bottom: 43px;
}
.fw.design-guideline .g-h3.b_t {
  margin-bottom: 20px;
}
.fw.design-guideline .g-body-02 {
  margin-bottom: 10px;
}
.fw.design-guideline .g-body-02 + section {
  margin-top: 16px;
}
.fw.design-guideline .g-lead {
  margin: 15px 0 28px;
}

/*---- bg ----*/
#sbid-contents.bg-clearly {
  background-image: url('../../img/s/bg-clearly.png');
}
.fw.design-guideline .rounding-box.bg-color-aqua {
  padding: 18px 3.2vw;
}
.fw.design-guideline .rounding-box {
  padding-right: 4.8%;
  padding-left: 4.8%
}

/*---- section ----*/
.fw.design-guideline section:last-child {
  margin-bottom: 30px;
}
.fw.design-guideline section *:last-child {
  margin-bottom: 0;
}
.fw.design-guideline .section-inner {
  margin: 0 6.4%;
}
.fw.design-guideline .inner-break {
  margin-right: -7.34%;
  margin-left: -7.34%;
  padding-right: 7.34%;
  padding-left: 7.34%;
}

/*---- headerFixed ----*/
.fw.design-guideline #sbid-contents.is-headerFixed .section-inner h1 {
  height: 56px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  line-height: 1.4;
  padding: 0;
  margin: 0 -6.4%;
}
.fw.design-guideline h1.close>a::before,
.fw.design-guideline h1.close>a::after {
  left: 5%;
}

/*---- heading ----*/
.fw.design-guideline h2 {
  padding-bottom: 8px;
  border-bottom: 2px solid #0080FF;
}
.fw.design-guideline h2 + *:not(.list-link):not(.list-normal):not(.accordion-arrow) {
  margin-top: 16px;
}
.fw.design-guideline .sub-heading {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
.fw.design-guideline .sub-heading.t_b {
  margin-bottom: 9px;
}
.fw.design-guideline h3.h3-heading {
  font-size: 16px;
  font-weight: bold;
  margin-top: 28px;
}

/*---- link-list ----*/
.fw.design-guideline .list-number-circle>li {
  padding: 9px 5px 9px 26px;
}
.list-number-circle>li:before {
  font-size: 12px;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont;
  width: 20px;
  height: 20px;
  top: 9px;
  left: 0px;
}
.fw.design-guideline .list-number-circle>li:after {
  top: 9px;
  width: 18px;
  height: 18px;
}

.fw.design-guideline .list-link li>a {
  padding: 17px 0;
}

/*---- list ----*/
.fw.design-guideline .list {
  margin-top: 8px;
}
.fw.design-guideline .accordion-list .list {
  margin-top: 0;
}
.fw.design-guideline .list + .list {
  padding-top: 16px;
}
.fw.design-guideline .list .list-item {
  display: table;
  width: 100%;
  border-bottom: 1px solid #ccc !important;
  padding: 16px 0 15px;
}
.fw.design-guideline .list .list-item .amount {
  color: #666;
  font-size: 12px;
}
.fw.design-guideline .list .list-item .amount span {
  color: #212121;
  font-family: -apple-system, BlinkMacSystemFont;
  font-size: 16px;
  vertical-align: baseline;
  line-height: 1;
}
.fw.design-guideline .list .list-item:first-child {
  padding-top: 0;
}
.fw.design-guideline .list .list-item > p:not(.accordion-switch):not(.accordion-switch-2):not(.accordion-switch-3):not(.accordion-switch-4),
.fw.design-guideline .list .list-item > div:not(.accordion-target):not(.accordion-target-2):not(.accordion-target-3):not(.accordion-target-4) {
  display: table-cell;
}
.fw.design-guideline .list .list-item > p + p,
.fw.design-guideline .list .list-item > p + div
.fw.design-guideline .list .list-item > div + div {
  text-align: right;
}
.fw.design-guideline .list .list-item .sub-text {
  font-size: 16px;
}
.fw.design-guideline .list .list-item.border-bottom-none {
  border-bottom: none !important;
}

.fw.design-guideline .caption-list {
  font-size: 12px;
  color: #666;
  margin: 0 0 0 17px;
}
.fw.design-guideline .caption-list li {
  padding-bottom: 2px;
}
.fw.design-guideline .caption-list li:before {
  left: -18px;
}
.fw.design-guideline .caption-list li {
  position: relative;
}
.fw.design-guideline .caption-list > li:before {
  position: absolute;
  content: '・';
}
.fw.design-guideline .list-box {
  margin-top: 36px;
}
.fw.design-guideline div[class*="bg-color"] .list-box,
.fw.design-guideline .bg-slant .list-box {
  padding: 36px 0;
  margin-top: 0;
}
.fw.design-guideline .list-box-item {
  text-align: center;
}
.fw.design-guideline .bg-slant .list-box-item + .list-box-item {
  margin-top: 48px;
  padding-top: 48px;
}
.fw.design-guideline .list-box-item + .list-box-item {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid #ccc;
}
.fw.design-guideline .list-box-item .read {
  text-align: left;
  margin: 18px 0;
}
.fw.design-guideline .list-box-item .image + .image {
  margin-top: 12px;
}


/*---- box ----*/
.fw.design-guideline .box-gray + .box-gray {
  margin-top: 24px;
}
.fw.design-guideline .box-gray .box-gray-inner {
  padding: 0 5.6% 15px;
}
.fw.design-guideline .box-gray .box-gray-heading {
  margin-top: 15px;
}
.fw.design-guideline .box-gray .title {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}
.fw.design-guideline .box-gray .total {
  text-align: center;
  color: #666;
}
.fw.design-guideline .box-gray .total span + .price {
  padding-left: 5px;
}
.fw.design-guideline .box-gray .total .price {
  color: #FF3C3C;
  font-size: 30px;
  font-family: -apple-system, BlinkMacSystemFont;
  font-weight: 300;
  text-align: center;
  vertical-align: baseline;
  padding: 5px 5px 0;
  line-height: 1;
  display: inline-block;
}
.fw.design-guideline .box-gray .box-gray-contents {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #CCC !important;
}
.fw.design-guideline .box-gray .box-list {
  margin-top: 2px;
  width: 100%;
  display: table;
}
.fw.design-guideline .box-gray .box-list .box-list-item {
  display: table-cell;
}
.fw.design-guideline .box-gray .box-list .box-list-item + .box-list-item {
  text-align: right;
}

.fw.design-guideline .box-blue-link {
  color: #212121;
  padding: 10px 12px 8px;
}

/*---- icon ----*/
.fw.design-guideline .icon {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.fw.design-guideline .icon:before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);

}
.fw.design-guideline .info-icon {
  margin-top: -5px;
  margin-right: 7px;
  background: url("../../img/s/icon-info-blue.svg") no-repeat;
}
.fw.design-guideline .info-icon:before {
  content: '';
  display: none;
}
.fw.design-guideline .icon-padding {
  padding-left: 23px;
}
.fw.design-guideline .icon-info {
  margin-bottom: 3px;
}
.fw.design-guideline .icon-info:before {
  background: url("../../img/s/icon-info.svg") no-repeat;
}
.fw.design-guideline .icon-attention-tri {
  width: 18px;
  height: 18px;
}
.fw.design-guideline .icon-attention-tri:before {
  width: 18px;
  height: 18px;
  background: url("../../img/s/icon_attention-tri.svg") no-repeat 0 -1px;
}
.fw.design-guideline .payeasy-icon{
  margin-right: 10px;
}
.fw.design-guideline .box-gray-inner .payeasy-icon{
  margin-right: auto;
 }
p span.attention-icon {
  background: #FF0000;
}

/*---- btn ----*/
.fw.design-guideline .btn-gl {
  margin: 36px auto 32px;
}
.fw.design-guideline .btn-gl-ml {
  margin: 43px auto 36px;
}
.fw.design-guideline .btn-gl .btn:first-child,
.fw.design-guideline .btn-gl-ml .btn:first-child {
  margin-bottom: 0;
}
.fw.design-guideline .btn-gl .btn + .btn, 
.fw.design-guideline .btn-gl .final-submit + .btn,
.fw.design-guideline .btn-gl-ml .btn + .btn, 
.fw.design-guideline .btn-gl-ml .final-submit + .btn {
  margin-top: 24px;
}

.fw.design-guideline .btn-gl > .btn:first-child {
  margin-bottom: 0;
}
.fw.design-guideline .btn-gl > .btn + .btn,
.fw.design-guideline .btn-gl > input + .btn {
  margin-top: 24px;
}
@media screen and (max-width: 320px) {
  .fw.design-guideline .btn-gl,
  .fw.design-guideline .btn-gl-ml {
    width: 258.5px;
  }
}

.fw.design-guideline .btn {
  width: 100%;
  max-width: 303px;
  margin: 32px auto;
  box-sizing: border-box;
  height: 48px;
  line-height: 28px;
}
.fw.design-guideline .fix-bottom .btn {
  margin-top: 24px;
  margin-bottom: 24px;
}
.fw.design-guideline .btn.btn-flat-blue {
  color: #fff;
  background-color: #0080FF;
}
.fw.design-guideline .disabled .btn.btn-flat-blue, .fw.design-guideline .btn.btn-flat-blue.disabled {
  border: 1px solid #BBB;
  background: transparent;
  color: #BBB;
  pointer-events: none;
  box-shadow: none;
}

.fw.design-guideline .btn.btn-lightblue {
  color: #0070F2;
  border: 1px solid #0080FF;
}

.fw.design-guideline .btn.two-line {
  height: 66px;
  line-height: 22px;
}

.fw.design-guideline .btn.btn-blue {
  background-color: #0080FF;
  background-image:none;
}

.fw.design-guideline .btn.btn-blue.animate-active {
  animation: none;
}
.fw.design-guideline .disabled .btn.btn-blue {
  background: transparent;
  color: #BBB;
}

/*---- radio ----*/
.fw.design-guideline .radio-privilege {
  margin: 24px 0;
}
.fw.design-guideline .radio-privilege label {
  border-radius: 12px;
  box-shadow: 0 0 0 1px #bbb inset;
  padding-left: 3.2%;
  margin-bottom: 10px;
}
.fw.design-guideline .radio-privilege input:checked + label{
  box-shadow: 0 0 0 2px #4D8BFF inset;
}
.fw.design-guideline .radio-privilege label p {
  color: #212121;
  min-height: auto;
  line-height: 1.5;
}
.fw.design-guideline .radio-privilege label > div {
  padding: 12px 5.6% 12px 30px;
}
.fw.design-guideline .radio-privilege span {
  vertical-align: baseline;
}
.fw.design-guideline .radio-privilege .circle {
  left: 14px;
}
.fw.design-guideline .radio-privilege .radio-circle + label:before {
  left: 17px;
}
.fw.design-guideline .radio-privilege li .fs-12 {
  line-height: 1.5;
}
.fw.design-guideline .radio-privilege li.disabled label p{
  color: #BBBBBB;
}

/*---- circle-animation ----*/
.fw.design-guideline .circle-check-animation{
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 15px;
  z-index: 10;
}
.fw.design-guideline .circle-check-animation:before{
  position: absolute;
  top: 11px;
  left: 4px;
  content: " ";
  display: inline-block;
  width: 0;
  height: 2px;
  background: white;
  transition: 0.12s;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 0;
}
.fw.design-guideline .circle-check-animation:after{
  position: absolute;
  top: 14px;
  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;
}
.fw.design-guideline .circle-check + label {
  box-shadow: 0 0 0 1px #999 inset;
}
.fw.design-guideline .circle-check:checked + label:before {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 12px;
  left: 14px;
  content: '';
  cursor: pointer;
  z-index:5;
  background: #fff;
  border: none;
  border-radius: 20px;
  background: linear-gradient(139deg, rgb(77, 139, 255), rgb(0, 89, 255));
  transform: scale(0,0);
  -webkit-animation: circle-check_animation 0.1s linear forwards;
  animation: circle-check_animation 0.1s linear forwards;
}

.fw.design-guideline .circle-check:checked + .circle-check-label + .circle-check-animation:after{
  width: 10px;
  transform: rotate(-45deg) translateY(-4px);
  opacity: 1;
}
.fw.design-guideline .circle-check:checked + .circle-check-label + .circle-check-animation:before{
  width: 6px;
  transform: rotate(45deg) translateY(2px);
  opacity: 1;
}
.fw.design-guideline .circle-check-label:after {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 18px;
  height: 18px;
  content: '';
  border: 1px solid #999;
  border-radius: 20px;
  background: #ffffff;
  z-index: 1;
}
.fw.design-guideline .circle-check:checked .circle-check-label:after {
  border: none;
}
@-webkit-keyframes circle-check_animation {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
  }
}
@keyframes circle-check_animation {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/*---- accordion ----*/
.fw.design-guideline .accordion-list {
  margin-bottom: 18px;
  margin-top: 13px;
}
.fw.design-guideline .accordion-list-item {
  border-top: 1px solid #ccc !important;
  padding-top: 16px !important;
}
.fw.design-guideline .accordion-list-item:last-child {
  border-bottom: 1px solid #ccc !important;
}

.fw.design-guideline .accordion-arrow {
  padding: 0;
  margin: 0 25px 27px 0;
}
.fw.design-guideline .accordion-arrow[class*="border-"] {
  margin: 0;
}
.fw.design-guideline .accordion-arrow.open:after {
  margin-top: -2px;
  border-top: solid 2px #0080FF;
  border-left: solid 2px #0080FF;
  border-bottom: none;
  border-right: none;
}
.fw.design-guideline .accordion-arrow:after {
  width: 6px;
  height: 6px;
  right: 2px;
  margin-top: -7px;
  transition: none;
  border-bottom: solid 2px #0080FF;
  border-right: solid 2px #0080FF;
}
.fw.design-guideline .accordion-arrow.center:after {
  right: auto;
  margin-left: 7px;
}

/*---- footerFixed ----*/
.p-fix-bottom {
  padding-bottom: 195px !important;
}
.fw.design-guideline .fix-bottom.bg-transparent-white.no-shadow {
  padding-bottom: 40px;
}

/*---- input ----*/
input::-ms-clear,
input::-ms-reveal {
  visibility: hidden;
}
.fw.design-guideline .col-2-input .input-gray input[type="text"] {
  width: calc(50% - 8px);
}
.fw.design-guideline .input-gray {
  padding-top: 20px;
}
.fw.design-guideline .input-gray input[type="text"],
.fw.design-guideline .input-gray input[type="tel"],
.fw.design-guideline .input-gray input[type="password"],
.fw.design-guideline .input-gray select {
  box-sizing: border-box;
  height: 48px;
  width: 100%;
  background-color: #F2F2F2;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 4px 4px 0 0;
}
.fw.design-guideline .input-gray input[type="text"].error,
.fw.design-guideline .input-gray input[type="tel"].error,
.fw.design-guideline .input-gray input[type="password"].error,
.fw.design-guideline .input-gray select.error {
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid #FF3C3C !important;
  box-shadow: none !important;
}
.fw.design-guideline .input-gray input[type="text"]:focus,
.fw.design-guideline .input-gray input[type="tel"]:focus,
.fw.design-guideline .input-gray input[type="password"]:focus,
.fw.design-guideline .input-gray select:focus {
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 2px solid #4D8BFF !important;
  box-shadow: none !important;
}
.fw.design-guideline .input-gray input:focus ~ p.label,
.fw.design-guideline .input-gray select:focus ~ p.label {
  color: #4D8BFF;
  font-weight: bold;
}
.fw.design-guideline .input-gray p.label {
    position: absolute;
    top: 0;
}
.fw.design-guideline .input-gray input.error ~ p.label,
.fw.design-guideline .input-gray select.error ~ p.label {
    color: #FF3C3C;
    font-weight: bold;
}
.fw.design-guideline .input-gray input.error ~ p.label a span.question-icon {
  background: #FF3C3C;
}
.fw.design-guideline .input-gray .txtError,
.fw.design-guideline .input-gray + .txtError {
  margin-top: 4px;
}
.fw.design-guideline .input-gray .txtError.m-top-10,
.fw.design-guideline .input-gray + .txtError.m-top-10 {
  margin-top: 4px !important;
}
.fw.design-guideline .input-gray .password-box {
  position: static;
}
.fw.design-guideline .input-gray .switch-show-blind {
  top: 38px;
  right: 12px;
}
.fw.design-guideline .input-gray .blind-line {
  top: 47px;
  left: -15px;
}
.fw.design-guideline .input-gray .birth-month,
.fw.design-guideline .input-gray .birth-day {
  margin-top: 13px;
}
.fw.design-guideline .input-gray .birth-col2 + .birth-col2 {
  margin-left: 10px;
}
.fw.design-guideline .input-gray .birth-arrow {
  background-image: url('../../img/s/arrow_down.svg');
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}
@media screen and (max-width: 320px) {
  .fw.design-guideline .input-gray input::placeholder,
  .fw.design-guideline .input-gray select::placeholder{
    font-size: 16px;
  }
  .fw.design-guideline .input-gray .fs-to11{
    font-size: 11px !important;
  }
}
.partition-input {
  margin: 30px auto 0;
}
.partition-input p {
  width: 51px;
}
.partition-input p + p {
  padding-left: 10px;
}
.partition-input input:not(:placeholder-shown) {
  border: 1px solid #666;
}

.thumbnailArea {
  display: table;
  margin-top: 7px;
  box-sizing: border-box;
}
.thumbnailArea .thumnail,
.thumbnailArea .userInfo {
  display: table-cell;
  vertical-align: middle;
}
.thumbnailArea .thumnail {
  padding-right: 10px;
}
.thumbnailArea .userInfo .info-heading {
  font-size: 16px;
  font-weight: bold;
}
.thumbnailArea .userInfo .info-text {
  font-size: 12px;
  line-height: 1;
}
.fw.design-guideline .radio-privilege .thumbnailArea {
  margin-bottom: 4px;
}

.line-marker {
  background: linear-gradient(transparent 70%, #FFF70F 0%);
  vertical-align: baseline;
  padding-bottom: 1px;
}
.line-marker span {
  vertical-align: baseline;
}