/* global
------------------------------------------------------------------------------*/

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance:textfield;
}

html {
  background: #fff;
  color: #333;
  font: 16px/1.4 Helvetica, 'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif;
  min-width: 800px;
}

body {
  margin: 0;
}

a {
  background-color: transparent;
  color: #06c;
  outline-width: 0;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  border-style: none;
}

p {
  line-height: 1.6;
  margin: 1em 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

code,
kbd,
pre,
samp {
  font-family: 'Courier New', monospace;
  font-size: 1em;
  letter-spacing: 0;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

.hide {
  display: none;
}

.img {
  text-align: center;
}

.img>img {
  max-width: 100%;
  vertical-align: top;
}

.uri {
  word-break: break-all;
}

.required-mark::after {
  content: '*必須';
  color: #f00;
  font-size: 80%;
  font-weight: bold;
  margin: 0 0 0 .5em;
  vertical-align: top;
}

/* forms
------------------------------------------------------------------------------*/

/* text
--------------------------------------*/

.input-text {
  background: #50a19a;
  border: #999 solid 1px;
  border-radius: 2px;
  box-sizing: border-box;
  color: #0094a1;
  display: inline-block;
  line-height: 1.4;
  outline: 0;
  padding: .25em .5em;
  width: 100%;
}

.input-text.size-s { width: 4em; }
.input-text.size-m { width: 8em; }
.input-text.size-l { width: 12em; }

.input-text:focus,
.input-text.entered {
  background: #fff;
}

.input-text:disabled {
  background: #ccc;
}

.input-text.error {
  box-shadow: 0 0 5px 3px rgba(255, 0, 0, .5);
}

.input-text::placeholder {
  color: #fff;
  opacity: .5;
}

.input-text:focus::placeholder {
  opacity: 0;
}

/* textarea
--------------------------------------*/

.textarea {
  background: #50a19a;
  border: #999 solid 1px;
  border-radius: 2px;
  box-sizing: border-box;
  color: #0094a1;
  display: inline-block;
  height: 8em;
  line-height: 1.4;
  outline: 0;
  padding: .25em .5em;
  resize: none;
  width: 100%;
}

.textarea:focus,
.textarea.entered {
  background: #fff;
}

.textarea::placeholder {
  color: #fff;
  opacity: .5;
}

.textarea:focus::placeholder {
  opacity: 0;
}

/* checkbox
--------------------------------------*/

.checkbox {
  cursor: pointer;
  display: inline-block;
}

.checkbox input {
  display: none;
}

.checkbox span {
  background: #ccc;
  border: #999 solid 1px;
  border-radius: 2px;
  box-sizing: border-box;
  color: #999;
  display: inline-block;
  font-size: 90%;
  padding: .5em 1em;
  text-align: center;
}

.checkbox :checked+span {
  background: #fff;
  border-color: #0094a1;
  color: #0094a1;
}

.checkbox .size-s { width: 4em; }
.checkbox .size-m { width: 8em; }
.checkbox .size-l { width: 12em; }

.checkbox-square {
  cursor: pointer;
  display: inline-block;
}

.checkbox-square+.checkbox-square {
  margin: 0 0 0 1em;
}

.checkbox-square input {
  display: none;
}

.checkbox-square span {
  position: relative;
}

.checkbox-square span::before {
  border: #0094a1 solid 1px;
  border-radius: 2px;
  content: '';
  display: inline-block;
  height: 1em;
  margin: 0 .5em 0 0;
  vertical-align: -3px;
  width: 1em;
}

.checkbox-square :checked+span::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAvUlEQVQ4jcWQURGDMBBEVwISKgEJSEBCJSChDjJDLt87iYFIQAISkIAE+gET0iTQSX+6M/eTu7e3F+AvUmxgnIfmqx7W7CB2hdgVmn0dLBwOeMPIZx088hlgcSofUGwuYcM2wMb5fHaPthRNYljsCsO2BG9HzVkqsfPZ55DHE8fIYIO4Keqp8G6cvzwR4qbEhEmyQvQ86vJpEu7eDb9K8ZEYnHW7PZZmn8N3t5eUfqpmV2cAAMZ5iF3qt/+gN/9bqaaRn8dhAAAAAElFTkSuQmCC);
  left: 2px;
  position: absolute;
  top: -2px;
}

/* radio
--------------------------------------*/

.radio {
  cursor: pointer;
  display: inline-block;
}

.radio input {
  display: none;
}

.radio span {
  background: #ccc;
  border: #999 solid 1px;
  border-radius: 2px;
  box-sizing: border-box;
  color: #999;
  display: inline-block;
  font-size: 90%;
  padding: .5em 1em;
  text-align: center;
}

.radio :checked+span {
  background: #fff;
  border-color: #0094a1;
  color: #0094a1;
}

.radio .size-s { width: 4em; }
.radio .size-m { width: 8em; }
.radio .size-l { width: 12em; }


/*radio translate checkbox*/
.on-disp-specific-continuous-kbn {
  display: inline-block;
}

.off-disp-specific-continuous-kbn {
  display: none;
}

.error-specific-continuous {
  height: 20px;
  width: 300px;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  background-color: #ffeaea;
  padding: 0.25rem;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}

.error-specific-continuous p {
  color: #ff2828;
  font-size: 0.8rem;
  font-weight: bold;
  margin: 0;
}

.on-disp-error-specific-continuous{
  display: block;
}

.off-disp-error-specific-continuous{
  display: none;
}

.specific-continuous-kbn-box {
  display: inline-block;
  width: 12rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
}

.radio-translate-checkbox label {
  cursor: pointer;
  padding-left: 30px;
  position: relative;
}

.radio-translate-checkbox input[type=radio] {
  display: none;
}

.radio-translate-checkbox label::before,
.radio-translate-checkbox label::after {
  content: "";
  display: block; 
  position: absolute;
}

.radio-translate-checkbox label::before {
  background-color: #fff;
  border-radius: 10%;
  border: 1px solid #0094a1;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  top: 50%;
  left: 5px;
}

.radio-translate-checkbox label::after {
  border-bottom: 2px solid #0094a1;
  border-left: 2px solid #0094a1;
  opacity: 0;
  height: 5px;
  width: 10px;
  transform: rotate(-45deg);
  top: 2px;
  left: 10px;
}

input[type=radio]:checked + label::after {
  opacity: 1;
}

/* select
--------------------------------------*/

.selectarea {
  background: #fff;
  border: #999 solid 1px;
  border-radius: 2px;
  box-sizing: border-box;
  display: inline-block;
  color: #0094a1;
  line-height: 1.4;
  outline: 0;
  padding: .25em .5em;
  resize: none;
  width: 100%;
}

.selectarea.error {
  box-shadow: 0 0 5px 3px rgba(255, 0, 0, .5);
}


/* buttons
------------------------------------------------------------------------------*/

.button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #0094a1;
  border: #0094a1 solid 1px;
  border-radius: 4px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  outline: 0;
  padding: 1em 0;
  text-align: center;
  width: 100%;
}

.button:hover {
  text-decoration: none;
}

.button:disabled {
  background: #ccc;
}

.button:not(:disabled):hover {
  background: #50a19a;
  color: #fff;
  transition: .15s;
}

.button.size-s { padding: .5em 0; width: 4em; }
.button.size-m { padding: .75em 0; width: 12em; }
.button.size-l { padding: 1em 0; width: 24em; }

.button.color-1 { background: transparent; color: #0094a1; }

/* header
------------------------------------------------------------------------------*/

.header {
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
  left: 0;
  height: 60px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 11;
}

.header .logo {
  height: 30px;
  left: 40px;
  position: absolute;
  top: 15px;
}

.header h1 {
  color: #0094a1;
  font-size: large;
  letter-spacing: .1em;
  line-height: 30px;
  margin: 0;
  position: absolute;
  right: 40px;
  top: 15px;
}

.header .indication {
  padding: 20px 80px;
  text-align: center;
}

.header .indication .dot {
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 0 4px;
  width: 8px;
}

.header .indication .dot.active {
  background: #0094a1;
}

/* main
------------------------------------------------------------------------------*/

.main {
  background: #fdfbfb;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  bottom: 60px;
  left: 0;
  position: absolute;
  right: 0;
  top: 60px;
}

/* footer
------------------------------------------------------------------------------*/

.footer {
  background: #2e2e2e;
  bottom: 0;
  color: #fff;
  height: 60px;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 11;
}

.footer .logo {
  height: 30px;
  left: 40px;
  position: absolute;
  top: 15px;
}

.copyright {
  bottom: 15px;
  font-size: small;
  position: absolute;
  right: 40px;
}

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

.section {
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
  visibility: hidden;
}

.section:target {
  opacity: 1;
  transition: opacity .5s;
  visibility: visible;
}

.section .inner {
  margin: 40px auto;
  width: 800px;
}

.section h2 {
  font-size: 120%;
  letter-spacing: .1em;
  margin: 2em 0 1em;
}

/* block
------------------------------------------------------------------------------*/

.block {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  margin: 1em 0;
  overflow: hidden;
  padding: 2em;
}

.block .head {
  font-size: 115%;
  letter-spacing: .1em;
}

.block .box+.head {
  margin: 2em 0 0;
}

.block .note {
  color: #666;
  font-size: 90%;
}

.block .caution-note {
  color: #f00;
  font-size: 80%;
}

/* monthly-pay 
--------------------------------------*/
.monthly-pay-credit,
.monthly-pay-bank {
  display: none;
}

.active-monthly-pay-credit .monthly-pay-credit,
.active-monthly-pay-bank .monthly-pay-bank {
  display: block;
}

/* bank-account
--------------------------------------*/

.bank-account,
.en-bank-account {
  display: none;
}

.active-bank-account .bank-account,
.active-en-bank-account .en-bank-account {
  display: block;
}

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

.box {
  margin: 1em 0;
}

.box.flex {
  display: flex;
}

.box.fix {
  display: flex;
}

.box.fix .cell {
  flex: 0 1 100%;
}

.box.fill {
  display: flex;
}

.box.fill .cell {
  flex: 0 1 auto;
}

.box.fill .cell.stretch {
  flex: 1 1 auto;
}

.box .cell+.cell {
  margin: 0 0 0 .5em;
}

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

.box.notice {
  color: #f00;
}

.box.consent {
  letter-spacing: .1em;
  line-height: 1.8;
  margin: 1em;
}

.box .cell .cap {
  font-size: 90%;
  margin: 0 0 .25em;
  position: relative;
}

.box .cell .cap-memo {
  font-size: 85%;
  margin: 0 0 .25em;
  position: relative;
}

.box .cell .error-text {
  color: #f00;
  display: none;
  font-size: 80%;
  margin: .25em 0 0;
  opacity: .8;
  text-shadow: 0 0 2px #f00;
}

.box .cell .error-text::before {
  content: '※';
}

.box .cell .error~.error-text {
  display: none;
}

/* confirm-table
------------------------------------------------------------------------------*/

.confirm-table {
  font-size: 85%;
  letter-spacing: .1em;
  margin: 40px 0;
  width: 100%;
}

.confirm-table caption {
  font-size: 120%;
  margin: 0 1em .5em;
}

.confirm-table th {
  background: #ccc;
  border: #999 solid 1px;
  padding: 1.5em 2em;
  text-align: left;
  width: 35%;
}

.confirm-table td {
  background: #fff;
  border: #999 solid 1px;
  padding: 1.5em 2em;
}

.confirm-table .item+.item {
  margin: .5em 0 0;
}

.confirm-table .item .align+.align {
  margin: 0 0 0 .5em;
}

.confirm-table .item .tel::before {
  content: 'TEL';
  margin: 0 .5em 0 0;
}

.confirm-table .item .fax::before {
  content: 'FAX';
  margin: 0 .5em 0 5em;
}

.confirm-table .item .email::before {
    content: 'EMAIL';
    margin: 0 .5em 0 5em;
  }
  
/* merchant-confirm (F_PAY-3316 add)
------------------------------------------------------------------------------*/

.merchant-confirm-title {
  font-size: 100%;
  text-align: center;
  border-bottom: solid 1px;
  border-color: #c0c0c0;
}

/* modal (F_PAY-3316 add)
------------------------------------------------------------------------------*/

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #f4f4f4;
  margin: 10% auto;
  width: 70%;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
  animation-name: modalopen;
  animation-duration: 1s;
}

@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}

.modal-header h2 {
  margin: 1rem 0;
  margin: auto;
}

.modal-header {
  background: #0094a1;
  color: white;
  padding: 3px 15px;
  display: flex;
  justify-content: space-between;
}

.close-button {
  font-size: 2rem;
}

.close-button:hover {
  cursor: pointer;
}

.modal-body {
  padding: 10px 20px;
  color: black;
}

.modal-body-caution {
  color: #dc143c;
  font-size: 0.8rem;
}

.merchant-block {
  margin-bottom: 5%;
}

.corporation-area {
  display: inline;
}

.confirm-corporation-area {
  display: table-row;
}

/* toast message
------------------------------------------------------------------------------*/
.toast-get-fail {
  display: flex;
  visibility: hidden;
  height: 50px;
  width: 400px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  z-index: 999;
  background-color: #ffeaea;
  position: fixed;
  top: 50%;
  left: 40%;
}

.toast-get-fail > p {
  margin: auto;
  font-size: 0.8rem;
  vertical-align: center;
  color: #ff2828;
  letter-spacing: 0;
  font-weight: bold;
}

.toast-connect-fail {
  display: flex;
  visibility: hidden;
  height: 50px;
  width: 400px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  z-index: 999;
  background-color: #ffe0ef;
  position: fixed;
  top: 50%;
  left: 40%;
}

.toast-connect-fail > p {
  margin: auto;
  font-size: 0.6em;
  vertical-align: center;
  color: #ff2828;
  letter-spacing: 0;
  font-weight: bold;
}

/* notice */

.notice-specified-commercial {
  font-size: 0.7rem;
  color:#666;
  padding: 0.5rem 0.5rem 0.5rem 0;
  margin: 0.25rem 0.25rem 0.5rem 0;
}

.on-disp-consent-textarea {
  display: block;
}

.off-disp-consent-textarea {
  display: none;
}

/* file (F_PAY-3730 add)
------------------------------------------------------------------------------*/
.drop-area {
  border: 1px dashed #C8C8C8 !important;
  background-color: #F0F0F0 !important;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  width: auto;
}
.drop-area:hover {
  background-color: #FDFDFD !important;
}
.drop-area label {
  width: 100%;
  display: inline-block;
}
.drop-area label:hover {
  cursor: pointer;
}
.drop-area label input {
  display: none;
}
.upload-img {
  height: 40px;
  width: 40px;
}
.clear-btn {
  display: none;
  margin-top: 10px;
}