.attention .user_input input{
    max-width: calc(100% - 72px);
}

.user_input > .user_input_loan > input{
    max-width: calc(100% - 58px);
}

.user_input > .user_input_term > input{
    width: 46px;
}

.ai .content dl {
    max-width: 768px;
}

.suggest .input input[type='search'] {
    width: calc(100% - 55px);
}

.suggest .suggest_area{
    width: calc(100% - 60px);
}

.ai .content .attention .small .red {
    display: block;
    margin-bottom: 3px;
    color:#f00;
}

input.max-input::-webkit-outer-spin-button,
input.max-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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


#main_message {
  overflow-y: scroll;
}

.suggest .input button[type='submit'] {
  font-size: 0;
  border: none;
  color: #e65387;
  padding: 0;
  background: none;
  font-weight: bold;
  vertical-align: middle;
  margin-left: 5px;
}

.selection button[type='submit'] {
  border: none;
  color: #e65387;
  font-size: 1.3rem;
  line-height: 1.4em;
  display: block;
  padding: 10px;
  border-radius: 5px;
  background: transparent;
  width: 100%;
  cursor: pointer;
}

.selection button[type='submit']:hover{
  background: rgba(251, 243, 245, 0.8);
}
.selection button[type='submit'] em{
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
}
.selection button[type='submit'] .aside{
  display: block;
  font-size: 1.2rem;
  line-height: 1.4em;
}

.attention .user_input_interest_rate input{
  width: 85px;
}

#main_message{
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top:0;
}

#main_message::-webkit-scrollbar{
  display: none;
}



html,body { height:100%; }
.start{
  overflow: hidden;
  background: url(../image/bg.jpg);
  background-size: 476px auto;
}

.start .bg{
  width: 100%;
  height: 100%;
  max-height: 1000px;
  max-width: 540px;
  margin: 0 auto;
  background: none;
  position: relative;
  padding-top: 10px;
}
#bg_effect{
  position: fixed;
  width: 100vw;
  overflow: hidden;
}
#floor {
  position: fixed;
  width: 100%;
  height: 70%;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  perspective: 350px;
  overflow: hidden;
  bottom: 0;
}

#floor .effects{
  transform: rotateX(50deg) scaleX(2);
}
.effects{
  visibility: hidden;
}
.effects.show{
  visibility: visible;
}

.start .dot{
  bottom: 25%;
}

.start .com{
  left: 45%;
  bottom: 25%;
}

.message{
  margin: 0 auto 10px;
}

.ai{
  background: url(../image/bg.jpg);
  background-size: 476px auto;
}

.ai .container{
  width:100%;
  overflow-x: hidden;
}

.ai #field{
  overflow-x: visible;
}

/*error*/
@media screen and (orientation: landscape) and (max-height: 600px) {
  .start .bg,
  .error .bg{
      height: 200% !important;
      transform: scale(0.5) translateY(-50%);
  }
  #floor
  {
      transform: translateY(0%);
  }
  .start .dot{
      transform: translateY(-40%);
  }
  .start .com{
      transform: translateY(-71%);
  }
}
.error{
  position: relative;
  background: url(../image/background.jpg) left -100px no-repeat;
  background-size: cover;
  overflow: hidden;
  padding: 0 10px;
  box-sizing: border-box;
}
.error_title{
  margin-top:0;
}
.error_text{
  font-size:15px;
}
.error .bg{
  width: 100%;
  height: 100%;
  max-height: 1000px;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  padding-top: 10px;
}
.error .button_area{
  position: absolute;
  bottom: 10px;
  width: 100%;
}
.error .button_area .flex{
  display: flex;
  justify-content: space-around;
}
.error .button_area li{
  box-sizing: border-box;
  padding: 5px 10px 0;
}
.error .button_area a img{
  width: 100%;
  height: auto;;
}
.error .dot,
.error .com{
  position: absolute;
}
.error .dot{
  left: 20%;
  bottom: 25%;
}
.error .com{
  left: 45%;
  bottom: 25%;
}
.error h1{
margin-bottom: 1em;
}
.error #main_message{
opacity: 1.0;
height: auto;
width:100%;
padding: 10px;
}
.error #main_message h1{
font-size: 2.0rem;
}
.circle_arrow{
font-size: 1.6rem;
font-weight: bold;
color: #fff;
text-decoration: none;
display: block;
border-radius: 5px;
text-align: center;
padding: 10px 0;
position: relative;
}
.button_area ul{
width: 80%;
margin: 0 auto;
}
.button_area ul li:nth-child(1) .circle_arrow{
background: #F63482;
}
.button_area ul li:nth-child(2) .circle_arrow{
background: #F89A02;
}
.button_area ul li:nth-child(3) .circle_arrow{
background: #4ABAD0;
}
.circle_arrow:after{
content: '';
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
border: solid 2px #fff;
position: absolute;
right: 15px;
top: calc(50% - 12px);
}
.circle_arrow > span:before{
content: '';
display: block;
position: absolute;
width: 12px;
right: 21px;
height: 2px;
top: calc(50% - 1px);
background: #fff;
}
.circle_arrow > span:after{
content: '';
display: block;
position: absolute;
width: 8px;
right: 22px;
height: 8px;
top: calc(50% - 5px);
border-top: solid 2px #fff;
border-right: solid 2px #fff;
transform: rotate(45deg);
}
@media screen and (max-width: 320px) {
	.error #main_message h1{
		font-size: 1.6rem;
	}
	.error #main_message{
		font-size: 1.4rem;
	}
	.error .dot{
		bottom: 25%;
		left: 10%;
	}
	.error .com{
		bottom: 25%;
		left: 35%;
  }
}

.suggest .suggest_area ul:empty{
  border-top:none;
}

@keyframes carMove{
  0% {
      transform: translateX(50vw);
  }
  50% {
      transform: translateX(0);
  }
  to {
      transform: translateX(-50vw) translateX(-100%);
  }
}

.ai .car{
  left:50%;
}

.selection-not-last{
  margin-bottom: 20px;
}

#main_message,
.message{
  font-size: 1.6rem;
}

.suggest .input input[type='text']{
  border-radius: 25px;
  padding: 5px 15px;
  width: calc(100% - 40px);
}
.suggest .input button[type='submit']{
  font-size: 0;
  border: none;
  color: #fff;
  padding: 7px;
  background: none;
  font-weight: bold;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
  background-color: #e65387;
  border-radius: 50%;
}
.suggest .input button[type='submit'] img{
  width: 16px;
  height: auto;
}
.suggest .input .navi {
  position: relative;
  padding-bottom: 5px;
  width: 100%;
  max-width: 100%;
}
.suggest .input .navi > dt{
  position: absolute;
  bottom: 5px;
}
.suggest .input .navi > dd{
  font-size: 1.6rem;
  color: #e65387;
  margin-left: 50px;
  font-weight: bold;
}
.suggest .input{
  height: 81px;
}
.msg2{
  top: 150px;
  right: 20px;
  opacity: 1.0 !important;
}
.msg2 a{
  color: #7e4334 !important;
}
.balloon{
  padding: 20px;
  font-size: 1.3rem;
}
.balloon a{
  color: #fff;
  text-decoration: underline;
}
/*
*:focus {
  outline: none;
}
*/

/* 2021-09-07 */
.ai .content{
  padding-bottom: 100px;
  padding-top: 10px;
}
.suggest .input .navi.dot img{
  width: 50px;
}
.suggest .input .navi.com img{
  width: 70px;
}
.suggest .input .navi.com dd{
  margin-left: 80px;
}

html.iOS.ai {
  height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

html.iOS.ai body{
  height: 100%;
  overflow: hidden;
}

html.iOS.ai .container{
  height: 100%;
}