@charset "utf-8";

.form-group { margin-bottom: 0px; border: 1px solid #dddddd; }
.field-name { padding: 0.5em; }
.field-value { background-color: #ffffff; padding: 0.7em 0px; min-height: 2.4em; }
.navigation img { max-width: 100%; border: 0px; max-height: 90px; }
.bubble {
    margin: 0px;
    background: #fff;
    padding: 0.7em;
    position: relative;
    border-radius: 0.7em;
    color: #c6c6c6;
    font-weight: bold;
    text-align: center;
    width: 110px;
}
.arrow{
    padding: 2em 0.5em 0px 0px;
    margin: 0px;
    color: #c6c6c6;
}
.current{
    background: #538DEB;
    color:#fff;
    border: 1px solid #538DEB;
    margin-right: 0.5em;
}
.bread {
    list-style : none;
    overflow : hidden;
    margin: 0px;
    padding: 0px;
}
.bread li { float : left; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
h2 {
    color: #2386D5;
    font-weight: bold;
    margin: 5px 0px 0px 0px;
    font-size: 28px;
}
h3 {
    margin-left: 0px;
    margin-right: 0px;
    padding: 5px 10px;
    background-color: #2386D5;
    color: #fff;
    font-size: 1.3em;
    border: 1px solid #c6c6c6;
}
.h3-cl {
    display: block;
    font-weight: bold;
    margin: 40px 0px 23px;
    position: relative;
    padding: 0 0 0px 15px;
    border: none;
    border-left: 8px solid #2386D5;
    color: #1f26a8;
    background-color: #ffffff;
    font-size: 24px;
}
.h3-cl span { color: #0097d8; }
.form-horizontal .control-label { text-align: center; }
.form-horizontal .form-group { margin-left: 0px; margin-right: 0px; }
.container { padding-right: 10px; padding-left: 10px; }
.row { margin: 0px; }
.text-red { color: #ff0000; }
.text-top { margin-top: 10px; font-size: 18px; font-weight: bold; }
div.footer {
    color: #FFFFFF;
    text-align: center;
    background-color: #2386D5;
    font-size: 75%;
    vertical-align: middle;
    padding: 0.5em 0px;
    margin-top: 1em;
}
.note { color: #666666; }
.caution { margin-top: 0.5em; }
.btn-area { margin: 1em 0px 2em; }
.has-error { background-color: #FFF0F0; }
.label { padding: .2em .6em; }
.top-section { padding: 10px; border-top: 10px solid #2386D5; border-bottom: 10px solid #2386D5; margin-bottom: 5px; }
.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0px;
    padding-bottom: 7px;
}
hr { margin-top: 10px; margin-bottom: 10px; }
.error-top { background-color: #fff0f0; color: #a94442; padding: 0.5em; font-size: 1.1em; font-weight: bold; }
.agreement a { font-weight: bold; }
.xs-inline { display: inline-block; }
.ime-inactive { ime-mode: inactive; }
.form-inline div { display: inline-block; }
.m-b-7 { margin-bottom: 0.7em; }
.m-b-10 { margin-bottom: 1em; }
.mt-3 { margin-top: 3px; }
.mt-40 { margin-top: 40px; }
.inputCaution { background-color: #FFF0F0; }
.displayPC { display: inline-block; }
.displaySmartPhone { display: none; }
.note2 { font-size: 85%; }
.pc-box { height: 20em; overflow-y: scroll; border: 1px solid #dddddd; padding: 8px; background-color: #fffad9; }
.colleteral { border: 1px solid #dddddd; margin: 15px 0px; padding: 5px; background-color: #fff6f0; }
.colleteral h4 { font-weight: bold; }

.agreement-text { word-break: break-all; }
.agreement-text h4 { font-weight: bold; }
.agreement-text h4.item { color: #ffffff; padding: 5px 7px; background-color: #528deb;  }
.agreement-text a { border-bottom: 1px solid #528deb; }
.agreement-text h5 { color: #337ab7; font-weight: bold; border: none; }
.agreement-text table { margin-bottom: 10px; }
.agreement-text table, .agreement-text th, .agreement-text td { border:1px solid #777777; border-collapse: collapse; padding: 5px; }
.agreement-text th { text-align: center; background-color: #eff7ff; }
.agreement-text .over { text-align: right; margin-bottom: 50px; }
.agreement-text ol, .agreement-text ul { padding-inline-start:1.0em; line-height:1.5em; }
.agreement-text table.noborder, .agreement-text table.noborder th, .agreement-text table.noborder td {
    border: none; background-color: transparent; vertical-align: top; text-align: left;
}
.agreement-text ul.Kakko, .agreement-text ul.nolist { list-style: none; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-33 { width: 33%; }
.w-50 { width: 50%; }

.frame-border { border: 2px solid #faf6ef; margin: 20px 0px; padding: 15px; }

/* flow */
.agreement-step{
}

.steps{
    border:4px solid #a6dbf1;
    text-align: center;
}
.number{
    height: 40px;
    padding-top: 5px;
    text-align: center;
    color: #fff;
    font-size: 18px;
}
.number span{
    font-size:24px;
}

.steps:first-child .number{
    background-color: #71baf1;
}
.steps:nth-child(3) .number{
    background-color: #0b8cd5;
}
.steps:nth-child(5) .number{
    background-color: #0478d0;
}
.steps:nth-child(7) .number{
    background-color: #036ab3;
}
.steps:nth-child(9) .number{
    background-color: #025aa3;
}
.steps dl dt{
    color:#034591;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
}
.steps dl dd{
    text-align: left;
    padding: 0 13px 0;
    margin-top:20px;
    line-height: 24px;
}
.agreement-step .arrow {
    width: 20px;
    height: 58px;
    background-image: url("../img/arrow_flow.png");
    transform: rotate(90deg);
    display: block;
    margin: -20px auto;
}
.waku-red {
    border: 1px solid #ff3333;
    padding: 0.5em;
    margin-bottom: 15px;
    line-height: 1.5em;
}
.attention-text {
    padding: 0.5em;
    margin-bottom: 15px;
    line-height: 1.5em;
    font-size: 15px;
    color: #193554;
    background-color: #F8F2E4;
}
.p-4 {
    padding: 1.5rem;
}
.font-15 {
    font-size: 15px;
}
.move-btn {
    /* animation: flash 1.5s linear infinite; */
    animation:  blinkColor 0.3s ease infinite alternate;
    border: 0px;
}
.display-none {
    display: none !important;
}
.underline {
    text-decoration:underline;
}
.bold {
    font-weight: bold;
}
.custom-modal-footer {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #e5e5e5;
}

.bordered-text {
    border: 1px solid gray;
    padding: 4px;
}

@keyframes blinkColor {
    100% {
      background-color: #235BC8;
    }
    0%,40% {
      background-color: #EF4123;
    }
  }

@media only screen and (max-width: 767px) {
	.form-control{
    font-size: 16px !important;
  }
  .arrow{
    padding: 2em 0.3em 0px 0px;
  }
  .bubble { font-size: 13px; width: 70px; }
  .small-text { font-size: 10px; }
  h2 { font-size: 1.5em; }
  .xs-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-horizontal .control-label {
    text-align: left;
  }
  .displayPC { display: none; }
  .displaySmartPhone { display: inline-block; }
}

@media only screen and (min-width: 767px) {
  select.form-control {
    width: auto;
  }
  .flexbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
}