:root {
  --circle-size: clamp(1.5rem, 3vw, 3rem);/*(1.5rem, 5vw, 3rem);*/
  --spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.c-stepper {
  display: flex;
}

.c-stepper__item {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}
.c-stepper__item:before {
  --size: 3rem;
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  /*background-color: lightgrey;*/
  /*background-color: red;*/
  /*opacity: 0.5;*/
  margin: 0 auto 1rem;
}
.c-stepper__item:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
  left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
  height: 2px;
  background-color: #e0e0e0;
  order: -1;
}
.c-stepper__item:first-child:before {
  background-color: #DCBE85;
}
.c-stepper__item:nth-child(2):before {
  background-color: #D6E26C;
}
.c-stepper__item:last-child:before {
  background-color: #B9D3CB;
}

.c-stepper__title {
  font-weight: bold;
  font-size: clamp(1rem, 4vw, 1.25rem);
  margin-bottom: 0.5rem;
}

.c-stepper__desc {
  color: grey;
  font-size: clamp(0.85rem, 2vw, 1rem);
  padding-left: var(--spacing);
  padding-right: var(--spacing);
}

/*** Non-demo CSS ***/
.wrapperx {
  max-width: 1000px;
  margin: 2rem auto 0;
}

/*body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 0rem;/*1/
}
*/

/*  transition:  all 0.3s ease;*/
/*animation: fadein 1.5s forwards;
}
 /*   animation: fadein 3s forwards;
@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}
/*
*,
*:before,
*:after {
  box-sizing: border-box;
}
/* page transiton: slide-fade
.page-enter-active,
.layout-enter-active {
  transition: all 0.3s ease;
}
.page-leave-active,
.layout-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.page-enter,
.page-leave-to,
.layout-enter,
.layout-leave-to {
  transform: translateX(30px);
  opacity: 0;
}*/

.reserve-box {
 /* background: #E4F2EE;*/
 background: #F5F9F8;
 opacity:0.75;
  border-radius: 20px;
  border:2px solid #D2EFD1;
}
.reserve-head {
  background:#B6292D;
  color: #FFFFFF;
}
.reserve-body {
  background:#E9BEBF;
  color: #283043;
  font-size: small;
}
.reserve2-box {
 /* background: #E4F2EE;*/
 background: #F5F9F8;
 opacity:0.75;
  border-radius: 20px;
  border:2px solid #E9EB6B;
}

/*****/
.c-stepper__item2 {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}
.c-stepper__item2:before {
  --size: 3rem;
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.c-stepper__item2:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
  left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
  height: 2px;
    background-color: #274760;
  order: -1;
}
/*#DCBE85;達成　#D6E26C;仕掛中　#B9D3CB;未*/
.c-stepper__item2:first-child:before {
    background-color: #555555;
}
.c-stepper__item2:nth-child(2):before {
    background-color: #B6262C;
}
.c-stepper__item2:last-child:before {
    background-color: #555555;
}
/*****/
.c-stepper__item1 {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}
.c-stepper__item1:before {
  --size: 3rem;
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.c-stepper__item1:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
  left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
  height: 2px;
    background-color: #B6262C;
  order: -1;
}
/*#DCBE85;達成　#D6E26C;仕掛中　#B9D3CB;未*/
.c-stepper__item1:first-child:before {
    background-color: #B6262C;
}
.c-stepper__item1:nth-child(2):before {
    background-color: #B6262C;
}
.c-stepper__item1:last-child:before {
    background-color: #B6262C;
}
/*****/
.c-stepper__item3 {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}
.c-stepper__item3:before {
  --size: 3rem;
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.c-stepper__item3:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
  left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
  height: 2px;
  background-color: #274760;
  order: -1;
}
/*#DCBE85;達成　#D6E26C;仕掛中　#B9D3CB;未*/
.c-stepper__item3:first-child:before {
  background-color: #555555;
}
.c-stepper__item3:nth-child(2):before {
  background-color: #B6262C;
}
.c-stepper__item3:last-child:before {
  background-color: #555555;
}
/*****/
.c-stepper__item4 {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}
.c-stepper__item4:before {
  --size: 3rem;
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.c-stepper__item4:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
  left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
  height: 2px;
    background-color: #274760;
  order: -1;
}
/*#DCBE85;達成　#D6E26C;仕掛中　#B9D3CB;未*/
.c-stepper__item4:first-child:before {
    background-color: #B6262C;
}
.c-stepper__item4:nth-child(2):before {
    background-color: #555555;
}
.c-stepper__item4:last-child:before {
    background-color: #555555;
}
/*****/
.c-stepper__item5 {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
}
.c-stepper__item5:before {
  --size: 3rem;
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.c-stepper__item5:not(:last-child):after {
  content: "";
  position: relative;
  top: calc(var(--circle-size) / 2);
  width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
  left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
  height: 2px;
    background-color: #274760;
  order: -1;
}
/*#DCBE85;達成　#D6E26C;仕掛中　#B9D3CB;未*/
.c-stepper__item5:first-child:before {
    background-color: #555555;
}
.c-stepper__item5:nth-child(2):before {
    background-color: #B6262C;
}
.c-stepper__item5:last-child:before {
    background-color: #555555;
}