.logo{
  width: min(80%,25em);
}
.h-btn{
  width: min(50%,30em);
}

@media (max-width: 767px){
  .logo{
    margin-inline: auto;
  }
  .h-btn{
    display: none;
  }
}

.mv{
  position: relative;
}
.mv-cont{
  position: absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  width: 100%;
  padding: 0.5em;
  z-index: 2;
}
.contact-banner{
  margin-inline: auto;
  width: min(85%,50em);
}
.service{
  background-image: url(img/service-bg.jpg) ;
  background-size: cover;
  position: relative;
  z-index: 0;
}
.service::before{
  content: '';
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: inherit;
  backdrop-filter: opacity(40%);
  z-index: -1;
}
.service-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.service-item-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-item-inner .txt-red{
  margin-top: auto;
}
.reason-item{
  padding: 0 1em 1em 1em;
}
.reason-number{
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  translate: 0 -50%;
  font-size: 1.5em;
}

@media (max-width: 767px){
  .reason-item+.reason-item{
    margin-top: 3em;
  }
}

dt+dd{
  margin-top: 1em;
  padding-top: 1em;
  border-top:1px solid #ccc;
}
.ac+.ac{
  margin-top: 4em;
}
.question{
  font-size: 1.174rem;
  font-size: clamp(1.25rem, 1.174rem + 0.32vw, 1.563rem);
  color: #fff;
  background-color: #016109;
  border-radius: 50px;
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.answer{
  margin-left:2em;
  font-size: 1.174rem;
  font-size: clamp(1.25rem, 1.174rem + 0.32vw, 1.563rem);
  color: #fff;
  background-color: #E08710;
  border-radius: 2em;
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.question-item{
  width: 70%;
}
.answer-item{
  width: 70%;
}

@media (max-width: 767px){
  .answer{
    margin-left:0;
  }
  .question-item{
    width: 80%;
  }
  .answer-item{
    width: 80%;
  }
}

.flow-item{
  position: relative;
  background-color: #F8F4D5;
}
.flow-item:not(:last-child)::after{
  content:'';
  position: absolute;
  bottom:0;
  left:50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #f8f4d5 transparent transparent transparent;
  border-width: 26px 32px 0px 32px;
  translate:-50% 100%;
}
.flow-item+.flow-item{
margin-top: 4em;
}
.flow-item>p{
  margin-left:4em;
  padding: 2em 2em 2em 0;
}
.flow-item-ttl{
  display: grid;
  grid-template-columns: 4em 1fr;
  align-items: center;
  height: 3em;
}
.flow-item-ttl p{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}
.flow-item-ttl h3{
  margin-left: -4em;
  text-align: center;
}
.payment{
  margin: 0.5em auto;
  width: min(100%,500px);
  padding-bottom: 2em;
}

@media (max-width: 767px){
  .flow-item>p{
    margin-left:0em;
    padding: 2em 2em 2em 2em;
  }
  .flow-item-ttl h3{
    margin-left: 1em;
    text-align: left;
  }
}

.form{
  margin-inline: auto;
  padding-inline:10%;
}

input,textarea,select{
  width: 100%;
  padding: 0.2em;
  margin-bottom:1.2em;
  border:1px solid #ccc;
  border-radius: 5px;
}

.submit-btn{
  display: block;
  margin-inline:  auto;
  margin-top: 1.5em;
  padding: 0.4em 1.8em;
  font-size: 1.2em;
  border:none;
  cursor:pointer;
  border-radius: 5px;
}

.submit-btn:hover{
opacity:0.7;
}

@media (max-width: 767px){
  .form{
    margin-inline: auto;
    padding-inline:20px;
  }
  
}
.f-btn{
  display: none;
}
@media (max-width: 767px){
  .f-btn{
    display: flex;
    position: fixed;
    bottom:0;
    z-index: 2;
    padding:0.5em;
    background-color: #fff;
  }
}