/* *****ご予約について用CSS***** */
/* h1見出し */
.h1-box {
  background-image: url(../img/flow/flow-top.jpg);
}
main h2 { 
  font-size:2.175rem;
  padding:35px 0 50px;
}
main h3 { font-size:1.875rem; }

.t-red { color:#DE0101; }

.dwnarw {
  position: relative;
  display: inline-block;
  width: 280px;
  margin-bottom: 35px;
  padding: 16px;
  border-bottom: 1px solid #707070;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.dwnarw::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 35px 50px 0 50px;
  border-color: #707070 transparent transparent;
  translate: -50% 100%;
}

.dwnarw::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 33.8px 48.3px 0 48.3px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}

.step { 
  justify-content: center;
  padding-left:15px;
  margin:0 auto;
}
.step li {  
  width: calc(100% / 5);
  margin-left:-15px;
}
.step li a {
  border:1px solid #FFF;
  background-color: #00a0e9;
  padding:5px 5px 7px 30px;
  display: block;
  width:100%;
  color:#FFF;
  clip-path: polygon(90% 2%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
}
.step li:first-child a {
  clip-path: polygon(90% 2%, 100% 50%, 90% 100%, 0% 100%, 0% 0%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.step li a:hover {
  background-color: rgb(0 160 233 / 0.7);
}

.choice li:hover:not(:first-child) {
  background-color:#ffefd7;
}
.choice li:hover:not(:first-child) figcaption {
  color:#f39800;
}

.call dl {margin-top: 1.5rem;}
.call dt { margin-bottom:.8rem; }
.call p.fs-4 { 
  margin-bottom:0;
  font-weight: bold;
}
.call i { padding-right:5px; }
.call i img { 
  width:26px;
  vertical-align: baseline;
}

.annai .btn { margin:0 1rem 1rem 0; }
.annai .btn.pdf-dl {
  font-size: 1rem;
}

.cancel-fee table { margin-bottom:1rem; }
.table th,
.table td {
  font-weight: normal;
  padding:.5rem 1rem; 
}
.cancel-fee table caption { color:#000; }

.cancel-fee { padding-bottom:10px; }
.cancel-fee h5 { padding:1rem 0 .5rem; }
.cancel-fee h5::before,
.cancel-fee h5::after {
  width: 1rem;
  height: 1rem;
}

.attention-red-bg { width:80%; }
.attention-red-bg dl { margin-bottom:0; }
.attention-red-bg dt { margin:1.5rem 0 .5rem; }


/* --------------------------------------------------

 レスポンシブ

--------------------------------------------------　*/
@media (min-width: 1200px) {

}

@media (max-width: 1199.98px) {
  .attention-red-bg { width:100%; }
}

@media (max-width: 991.98px) {
  /* md タブレット・スマートフォン向け */
  .step { 
    padding-left:0;
  }
  .step li {
    text-align: center;
    width:60%;
    margin-left: 0;
    margin:0 auto -23px;
    height: 95px;
  }
  .step li a {
    padding:30px 5px 17px 5px;
    clip-path: polygon(50% 30%, 100% 0, 100% 70%, 50% 100%, 0 70%, 0 0);
  }
  .step li:first-child a {
    clip-path: polygon(100% 0, 100% 70%, 50% 100%, 0 70%, 0% 0%);
  }

  .annai .row > figure.col-12.col-lg-6 {
    padding:2rem 2rem 0 2rem;
  }
  .annai .row > figure.col-12.col-lg-6 + div.col-12.col-lg-6 {
    padding:0 2rem 2rem 2rem;
  }
  .info, .table, .cancel-fee table + ul { 
    width:100%;
  }
}

@media (max-width: 767.98px) {
  /* s スマートフォン向け */
  main h2 { 
    padding:35px 0;
  }
  .annai .btn { margin:0 0 1rem 0; }
}

@media (max-width: 575.98px) {
  /* xs スマートフォン向け */
  .step li {
    width:100%;
  }
}