@charset "UTF-8";

.flow-box {
  background-color:#fff;
  border-radius:20px;
  border:3px solid #1680bb;
  color:#000;
}

.flow-box h5 {
  font-weight:700;
  font-size:1.1rem;
  text-align:center;
  line-height:150%;
  height:3rem;
}

.flow-box h5.single {
  padding-top:1rem;
}

.flow-box p {
  font-size:0.8rem;
}

.flow-box-head {
  position: relative;
  background-color:#1680bb;
  border-radius:14px 14px 0 0;
  color:#fff;
  font-weight:700;
  font-size:1.5vw;
  padding:0.5vw 0;
  text-align:center;
}
.flow-box-head span.moji-bg {
  line-height:150%;
  padding-left:1.5rem;
  z-index:1;
  position:absolute;
  font-size:1.2vw;
  color:#fff;
  border:3px silid #fff;
  border-radius:10px;
}

.flow-box-head span.day {
  line-height:150%;
  padding-left:1.5rem;
  bottom:0.8rem;
  z-index:2;
  position:absolute;
  font-size:1.2vw;
  color:#003b90;
}

.flow-box-head span.day-bg {
  line-height:150%;
  padding-left:1.5rem;
  bottom:0.8rem;
  z-index:1;
  position:absolute;
  font-size:1.2vw;
  color:#fff;
  -webkit-text-stroke: 10px #fff;
}



.flow-box-head span.day-moji {
  padding-left:0;
  position: relative;
  font-size:4vw;
  right:0;
  bottom:0;
}

.mini-flow h5.first {
  color: #fff;
  text-align:center;
  font-size:1.5vw;
  font-weight:700;
  margin-bottom:0.5vw;
  padding:1rem 0;
  background-color:#003b90;
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 0% 0%);
}

.mini-flow h5 {
  color: #fff;
  text-align:center;
  font-size:1.5vw;
  font-weight:700;
  margin-bottom:0.5vw;
  padding:1rem 0;
  background-color:#003b90;
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%);
}

.mini-flow h5.end {
  color: #fff;
  text-align:center;
  font-size:1.5vw;
  font-weight:700;
  margin-bottom:0.5vw;
  padding:1rem 0;
  background-color:#003b90;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 95% 100%, 0% 100%, 5% 50%);
}

.mini-flow img {
  margin-bottom:0.5vw;
}

.mini-flow p {
  font-size:0.9rem;
}

.example h2 {
  font-weight:700;
  font-size:1.3vw;
  padding:0.5vw;
  background-color: #c1c1c2;
}

.sakugen {
  color:#ffdb00;
  font-weight:700;
  font-size:2vw;
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(22, 128, 187, 0.8);
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

.example-sample {
  position: relative;
}

.example-arrow {
  position: absolute; top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.example-arrow img,
.flow-arrow img {
  height:30px;
}

.comparison01 {
  background:url(../img/3d/comparison01.jpg) no-repeat;
  background-size: cover;
  height:100%;
}

.sche-box {
  background-color:#fff;
  padding:2rem;
  border-radius:20px;
}

.flow-arrow {
  position: absolute;
  top: 120px;
  right: -15px;
}



@media screen and (max-width: 768px) {

.flow-box-head {
  font-size:1rem;
  padding:0.5rem 0;
}

.example h2 {
  font-size:1.2rem;

}

.flow-box h5 {
  font-size:1rem;
}

.sakugen {
  font-size:1.8rem;
}

.flow-box-head span.day {
  right:0.5rem;
  padding-left:0;
  top:-1.5rem;
  font-size:1.5rem;
}

.flow-box-head span.day-moji {
  padding-left:0;
  font-size:2.5rem;
  right:0;
  bottom:0;
}

.flow-box-head span.day-bg {
  right:0.5rem;
  padding-left:0;
  top:-1.5rem;
  font-size:1.5rem;
  -webkit-text-stroke: 8px #fff;
}

.example-arrow img, .flow-arrow img {
  width:20px;
}
}

@media screen and (max-width: 599px) {

  .sakugen {
    text-align:center;
  }

.mini-flow h5.first,
.mini-flow h5,
.mini-flow h5.end {
  clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
  font-size:1rem;

}

.flow-arrow {
  position: absolute;
  top: 250px;
  left: 70%;
  transform: translateX(-70%);
  -webkit-transform: translateX(-70%);
  -ms-transform: translateX(-70%);
}

.comparison01 {
  height:400px;
}

.flow-box {
  width:80%;
  margin:0 auto;
}


}