/* Voice */
.voiceSummary {
  margin-bottom: 1em;
}

/*---------- junction01 ----------*/

.junction01 .ul_junction01 > li:not(:last-child) {
  margin-bottom: 2.4rem;
}
.ul_junction01 li {
  box-shadow: 0 0.6rem 0.8rem -0.4rem rgba(205, 215, 229, 0.8);
}

.dl_junction01 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border: solid 0.25em #cdd7e5;
  border-radius: 0.5em;
}

.dl_junction01 dt {
  width: 25%;
  padding: 0.7rem;
  display: flex;
  align-items: center;
}

.dl_junction01 dt .image01 {
  display: block;
  background-color: #ffffff;
  transition: opacity 0.3s;
}
.dl_junction01 dt .image01:hover {
  opacity: 0.6;
}
.dl_junction01 dd {
  width: 70%;
  padding: 1rem 2rem;
  line-height: 1.5;
}

.dl_junction01 dd > .product {
  display: block;
  font-size: 1.4rem;
  color: #5c7aa2;
  margin: 0 0 0.2em 0;
}

.dl_junction01 dd > a {
  font-size: 1.8rem;
}

.dl_junction01 dd > .customervoice {
  color: #41771d;
}

.dl_junction01 dd > .customervoice span {
  background-color: #87be63;
  color: #ffffff;
  border-radius: 999rem;
  display: inline-block;
  white-space: nowrap;
  margin: 0 0.5em 0 0;
  padding: 0.1em 0;
  width: 9em;
  text-align: center;
  font-size: 1.4rem;
}

.dl_junction01 dd > .customervoice span img {
  width: 1.56em;
  display: inline;
  padding: 0.3em 0.44em 0 0;
}

/* Tablet 768px */
@media screen and (max-width: 48em) {
  .voiceSummary {
    margin-right: 1em;
  }
  .junction01 .ul_junction01 > li:not(:last-child) {
    margin-bottom: 2rem;
  }
  .dl_junction01 dt {
    width: 16rem;
  }

  .dl_junction01 dd {
    width: calc(100% - 16rem);
  }

  .dl_junction01 dd > .customervoice {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 576px */
@media screen and (max-width: 36em) {
  .voiceSummary {
    margin-right: 0;
  }
  .junction01 .ul_junction01 > li:not(:last-child) {
    margin-bottom: 1.2rem;
  }
  .dl_junction01 {
    border: solid 0.15em #cdd7e5;
  }
  .dl_junction01 dt {
    float: none;
    margin-left: 0;
  }
}

/* SP 480px */
@media screen and (max-width: 30em) {
  .dl_junction01 {
    display: block;
    padding: 1.5rem;
  }
  .dl_junction01 dt {
    width: auto;
    padding: 0;
    display: block;
  }

  .dl_junction01 dd {
    width: auto;
    padding: 0.8rem 0 0 0;
    line-height: 1.5;
  }

  .dl_junction01 dd > .product {
    font-size: 1.3rem;
  }

  .dl_junction01 dd > a {
    font-size: 1.7rem;
  }

  .dl_junction01 dd > .customervoice {
    font-size: 1.4rem;
  }

  .dl_junction01 dd > .customervoice span {
    font-size: 1.2rem;
  }

  .btnMore01 a {
    display: block;
    text-align: center;
  }
}

/* !voice-detail
---------------------------------------------------------- */
/*---------- usecase01 ----------*/

#container:has(#main > .mainIn > .usecase01) > .h1_basic {
  font-size: 1.6rem;
  font-weight: 400;
}

.usecase01 {
  border-top: solid 0.5rem #0d5daa;
  margin-bottom: 4rem;
  box-shadow: 0 0.6rem 0.8rem -0.4rem rgba(205, 215, 229, 0.8);
}

.usecase01_inner {
  border-right: solid 0.2rem #cdd7e5;
  border-left: solid 0.2rem #cdd7e5;
  border-bottom: solid 0.2rem #cdd7e5;
  padding: 3.4rem 2.6rem;
}

.usecase01_inner .fr {
  max-width: 45%;
}

.usecase01 .h3_basic {
  font-size: 2.8rem;
}
.usecase01 .h3_basic .ttlHead {
  display: block;
  margin: 0 0 0.3em 0;
  font-weight: 500;
  font-size: 1.6rem;
}

.usecase01 .h3_basic .ttlHeadProduct {
  font-weight: 500;
  color: #0d5daa;
}

.usecase01_customer {
  width: 100%;
  margin: 0 0 0 0;
}

.ttlusecase01_customer {
  text-align: center;
  color: #778599;
  font-weight: 600;
  margin: 0 0 1em 0;
}

.usecase01_customer_voice {
  width: 100%;
  overflow: hidden;
}

.usecase01_customer_voice div {
  width: 48%;
}

.usecase01_customer_voice div dl {
  padding: 1em;
  border: solid 0.3rem #cdd7e5;
  border-radius: 0.5em;
}

.usecase01_customer_voice div dl dt {
  text-align: right;
  margin: 0.5rem 0 0 0;
}

.usecase01_customer_voice01 {
  float: left;
  padding: 0 0 6.3rem 0;
  position: relative;
}

.usecase01_customer_voice01 .image {
  position: absolute;
  bottom: 3rem;
  left: 60%;
  width: 5.9rem;
}

.usecase01_customer_voice02 {
  float: right;
  padding: 3rem 0 3.3rem 0;
  position: relative;
}

.usecase01_customer_voice02 .image {
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 5.9rem;
}

.usecase01_improvement {
  width: 100%;
  background-color: #f7faff;
  border-radius: 0.5em;
  position: relative;
}

.usecase01_improvement.cont_wrap {
  padding: 2.4rem;
}

.usecase01_improvement + .txtRight01 {
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 0;
  margin-top: 0.8em;
}

.usecase01_improvement p {
  margin-bottom: 0.8em;
}

.usecase01_improvement .txtCenter01 {
  padding: 0;
}

.usecase01_improvement_txt {
  padding: 2.4rem 2.4rem 0 2.4rem;
  margin: 0 0 1.2rem 0;
}

.ul_usecase01_improvement {
  padding: 1.2rem 2.4rem 2.4rem 2.4rem;
  overflow: hidden;
}

.ul_usecase01_improvement li {
  width: 40%;
}

.ul_usecase01_improvement li img {
  margin: 0 auto;
}

.ul_usecase01_improvement .improvement01 {
  float: left;
  padding: 0 0 0 2rem;
}

.ul_usecase01_improvement .improvement02 {
  float: right;
  padding: 0 2rem 0 0;
}

/* Tablet 768px */
@media screen and (max-width: 48em) {
  .usecase01 {
    margin-bottom: 3rem;
  }
  .usecase01_inner {
    padding: 2rem;
  }
  .usecase01 .h3_basic {
    font-size: 2.4rem;
  }
}

/* 576px */
@media screen and (max-width: 36em) {
  .usecase01 {
    border-top: solid 0.4rem #0d5daa;
    margin-bottom: 2.5rem;
    box-shadow: 0 0 0 0;
  }
  .usecase01 .h3_basic {
    border-bottom: solid 0.4rem #0d5daa;
    padding-bottom: 1.5rem;
  }

  .usecase01_inner {
    border-right: 0;
    border-left: 0;
    padding: 1.5rem 0;
  }

  .usecase01_customer_voice div {
    width: auto;
  }

  .usecase01_customer_voice01 {
    float: none;
    padding: 0 0 1.2rem 0;
  }

  .usecase01_customer_voice01 .image {
    display: none;
  }

  .usecase01_customer_voice02 {
    float: none;
    padding: 0;
  }

  .usecase01_customer_voice02 + .usecase01_customer_voice01 {
    margin-top: 1.2rem;
  }

  .usecase01_customer_voice02 .image {
    display: none;
  }

  .usecase01_improvement.cont_wrap {
    margin-top: 2.5rem;
    padding: 2rem 1.5rem;
  }

  .usecase01_improvement_txt {
    padding: 2rem 1.5rem 0 1.5rem;
    margin: 0 0 1.2rem 0;
  }
  .usecase01_improvement {
    margin-top: 2.5rem;
  }

  .ul_usecase01_improvement {
    padding: 1rem 1.5 2rem 1.5rem;
  }

  .ul_usecase01_improvement li {
    width: 45%;
  }
  .usecase01_inner .fr {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
  }
  .usecase01_inner .txtRight01 {
    text-align: left;
  }
}

/* SP 480px */
@media screen and (max-width: 30em) {
  .usecase01 .h3_basic {
    font-size: 2rem;
  }
  .usecase01 .h3_basic .ttlHead {
    font-size: 1.4rem;
  }
}

.stepnavi {
  width: 100%;
  position: relative;
}

.ul_stepnavi {
  width: 100%;
  overflow: hidden;
}

.stepnavi_return a,
.ul_stepnavi li a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 0 auto 1em;
  padding: 0.8em 1.6em;
  border-radius: 0.3em;
  border: solid 0.1rem #0d5daa;
  background-color: #0d5daa;
  background-image: linear-gradient(to bottom, #3174b7 70%, #1160ab 100%);
  color: #fff;
  transition: opacity 0.3s;
}
.stepnavi_return a:hover,
.ul_stepnavi li a:hover {
  opacity: 0.6;
  color: #fff;
}

.stepnavi_return span {
  display: inline-block;
  padding-left: 2rem;
  background: url(../../../common/images/ico_arrow_r05.png) no-repeat center
    left 0.4em;
}

.ul_stepnavi .prev {
  float: right;
}

.ul_stepnavi .prev span {
  display: inline-block;
  padding-right: 2rem;
  background: url(../../../common/images/ico_arrow_r05.png) no-repeat center
    right 0.4em;
}

.ul_stepnavi .next {
  float: left;
}

.ul_stepnavi .next span {
  display: inline-block;
  padding-left: 20px;
  background: url(../../../common/images/ico_arrow_r08.png) no-repeat center
    left 0.4em;
}

.stepnavi_return a {
  position: absolute;
  margin: auto;
  max-width: 13rem;
  left: 0;
  right: 0;
  top: 0;
}

/* 576px */
@media screen and (max-width: 36em) {
  .stepnavi {
    width: 100%;
    position: static;
    margin: 0 auto;
  }

  .stepnavi_return a,
  .ul_stepnavi li a {
    position: static;
    margin: 0 auto 1em auto;
    padding: 0.8em 1em;
    top: 0;
    font-size: 1.4rem;
  }

  .stepnavi_return {
    text-align: center;
  }
}