.hp-fv {
  aspect-ratio: 1920 / 431;
  position: relative;
  z-index: 2;
}

.hp-fv-bg {
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 と同義 */
  background: url("../../img/hp/flow-merit-demerit-fv.webp") center center/cover
    no-repeat;
  clip-path: inset(0 100% 0 0); /* 初期状態：右100%カット */
  animation: revealFromLeft 1s ease-out forwards;
}

@keyframes revealFromLeft {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.hp-fv-title {
  position: absolute;
  top: 20%;
  left: 6%;
  color: #f27200;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.7;
}

.hp-flow {
  background: url("../../img/hp/hp-flow-bg.jpg") bottom center/cover no-repeat;
  padding: 8.959% 0 4.844%;
  margin-top: -8%;
  position: relative;
}

.hp-breadcrumb {
  margin-top: 0;
  margin-bottom: 3.021%;
}

.hp-breadcrumb > ul {
  color: #fff;
}

.hp-flow-title {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  margin-bottom: 3.125%;
}

.hp-flow-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.5;
  color: #fff;
  text-align: center;
  margin-bottom: 3.073%;
}

.hp-flow-list-item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  background: url("../../img/hp/flow-bg.png") left center/cover no-repeat;
  max-width: 1754px;
  width: 95%;
  margin: 0 0 0 auto;
  margin-top: 10%;
  padding-bottom: 2.386%;
  padding-left: 11.511%;
  position: relative;
}

.hp-flow-list-item:nth-of-type(even) {
  background: url("../../img/hp/flow-bg2.png") right center/cover no-repeat;
  margin: 0;
  padding-right: 11.511%;
  padding-left: 0;
  justify-content: flex-end;
}

.hp-flow-list-item::before {
  content: "01";
  font-family: Helvetica, sans-serif;
  font-style: italic;
  position: absolute;
  top: -56%;
  right: 19%;
  font-size: 200px;
  color: #fffce9;
  letter-spacing: 0.05em;
}

.hp-flow-list-item:nth-of-type(even)::before {
  right: auto;
  left: 19%;
}

.hp-flow-list-item:nth-of-type(2),
.hp-flow-list-item:nth-of-type(3),
.hp-flow-list-item:nth-of-type(4),
.hp-flow-list-item:nth-of-type(5) {
  margin-top: 9.296%;
}

.hp-flow-list-item:nth-of-type(2)::before {
  content: "02";
}

.hp-flow-list-item:nth-of-type(3)::before {
  content: "03";
}

.hp-flow-list-item:nth-of-type(4)::before {
  content: "04";
}

.hp-flow-list-item:nth-of-type(5)::before {
  content: "05";
}

.hp-flow-list-item-img {
  width: 26.621%;
  margin-top: -2%;
}

.hp-flow-list-item-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 3;
  color: #000;
  margin-left: 3.053%;
  padding-top: 1.5%;
}

.hp-flow-list-item:nth-of-type(even) .hp-flow-list-item-text {
  margin-left: 0;
  margin-right: 3.053%;
}

.hp-flow-attention {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  margin-top: 1.042%;
}

.hp-flow-lightning {
  position: absolute;
  width: 9.4276%;
}

.flow-lightning1 {
  top: 23%;
  right: 7%;
}

.flow-lightning2 {
  top: 44%;
  left: 3%;
}

.flow-lightning3 {
  top: 55%;
  right: 4%;
}

.flow-lightning4 {
  bottom: 12%;
  left: 4%;
}

.hp-merit-demerit {
  background: url("../../img/hp/merit-demerit-bg.jpg") center center/cover
    no-repeat;
  padding: 9.4276% 0;
}

.hp-merit-demerit-container {
  background-color: #fffdf0;
  position: relative;
  padding: 10% 0 5%;
  max-width: 1750px;
  width: 91.2%;
}

.hp-merit-demerit-title {
  background-color: #fff;
  text-align: right;
  font-size: 67px;
  font-weight: 900;
  position: absolute;
  top: -3%;
  right: -60px;
  width: fit-content;
  padding: 2% 2.2% 3.4%;
  background: url(../../img/hp/merit-demerit-title-bg.png) bottom right
    no-repeat;
}

.hp-merit-demerit-title > span {
  background: linear-gradient(to right, #f1b500, #f17200);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hp-merit-container {
  border-width: 2px;
  border-style: solid;
  border-image-source: linear-gradient(-30deg, #f19200, #f17200);
  border-image-slice: 1;
  width: 80%;
  margin-left: auto;
  margin-right: 13.086%;
  margin-bottom: 5.2%;
  border-radius: 5px;
  background-color: #fff;
  padding: 4.858% 2.5%;
  position: relative;
}

.hp-merit-container::before {
  content: "メリット";
  position: absolute;
  left: 50%;
  top: -5%;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  transform: translateX(-50%);
  border-radius: 35px;
  background: linear-gradient(to right, #f1b100 0%, #f17800 100%);
  padding: 1.552% 7.3%;
}

.hp-merit-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6.164%;
  position: relative;
  z-index: 2;
}

.hp-merit-inner:last-of-type {
  margin-bottom: 0;
}

.hp-merit-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.875;
  color: #f17100;
  width: 18%;
}

.hp-merit-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.5;
  border-left: 1px solid #f19200;
  padding-left: 2.16%;
  width: 82%;
  color: #262626;
}

.hp-demerit-container {
  border: 2px solid #cccbcb;
  width: 80%;
  margin-left: auto;
  margin-right: 13.086%;
  margin-bottom: 3.486%;
  border-radius: 5px;
  background-color: #fff;
  padding: 4.858% 2.5%;
  position: relative;
}

.hp-demerit-container::before {
  content: "デメリット";
  position: absolute;
  left: 50%;
  top: -5%;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  transform: translateX(-50%);
  border-radius: 35px;
  background: #cccbcb;
  padding: 1.552% 7.3%;
}

.hp-demerit-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6.164%;
}

.hp-demerit-inner:last-of-type {
  margin-bottom: 0;
}

.hp-demerit-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.875;
  color: #cccbcb;
  width: 18%;
}

.hp-demerit-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.5;
  border-left: 1px solid #a7a7a7;
  padding-left: 2.16%;
  width: 82%;
  color: #262626;
}

.hp-merit-demerit-text {
  font-size: 16px;
  line-height: 3;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  color: #262626;
  width: 65.858%;
  margin-left: auto;
  margin-right: 13.086%;
}

.hp-merit-lightning {
  position: absolute;
  top: -1.5%;
  width: 19.258%;
  left: 11%;
}

.hp-demerit-lightning {
  position: absolute;
  bottom: 14.5%;
  width: 9.372%;
  right: 7%;
}

.hp-flow-merit-demerit-knowhow {
  width: 100%;
  background: url(../../img/hp/about-know-how-bg.jpg) center center / cover
    no-repeat;
  position: relative;
  aspect-ratio: 1919 / 499;
  clip-path: inset(0 100% 0 0);
  z-index: 12;
}

.hp-flow-merit-demerit-knowhow-text {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.94;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

@media screen and (max-width: 1300px) {
  .hp-fv-title {
    top: 10%;
  }
}

@media screen and (max-width: 1030px) {
  .hp-fv-title {
    top: 5%;
  }
}

@media screen and (max-width: 900px) {
  .hp-fv-title {
    top: 2%;
  }
}

@media screen and (max-width: 1500px) {
  .hp-flow-list-item::before {
    top: -66%;
    right: 10%;
  }

  .hp-flow-list-item:nth-of-type(even)::before {
    top: -66%;
    left: 10%;
  }
}

@media screen and (max-width: 1261px) {
  .hp-flow-list-item::before {
    top: -62%;
    right: 6%;
  }

  .hp-flow-list-item:nth-of-type(even)::before {
    top: -62%;
    right: initial;
    left: 6%;
  }
}

@media screen and (max-width: 1100px) {
  .hp-flow-list-item::before {
    font-size: 140px;
  }

  .hp-flow-list-item::before {
    top: -44%;
  }

  .hp-flow-list-item:nth-of-type(even)::before {
    top: -61%;
    right: initial;
    left: 6%;
  }
  .hp-flow-list-item:nth-of-type(2)::before {
    top: -40%;
    right: initial;
    left: 6%;
  }
}

@media screen and (max-width: 1060px) {
  .hp-flow-list-item:nth-of-type(1)::before {
    top: -26%;
  }
  .hp-flow-list-item:nth-of-type(5)::before {
    top: -31%;
  }
}

@media screen and (max-width: 950px) {
  .hp-flow-list-item:nth-of-type(2)::before {
    top: -32%;
  }
  .hp-flow-list-item:nth-of-type(3)::before {
    top: -32%;
  }
}

@media screen and (max-width: 1340px) {
  .hp-merit-container::before,
  .hp-demerit-container::before {
    top: -3%;
  }
}

@media screen and (max-width: 768px) {
  .hp-fv {
    aspect-ratio: 750 / 334;
    z-index: 2;
  }

  .hp-fv-bg {
    background: url("../../img/hp/sp/suggest-fv.png") center center/cover
      no-repeat;
  }

  .hp-fv-title {
    left: 5%;
    font-size: 26px;
    top: 20%;
  }

  .hp-flow {
    background: url("../../img/hp/hp-flow-bg.jpg") bottom center/cover no-repeat;
    padding: 17% 0 16%;
    margin-top: -15%;
    position: relative;
  }

  .hp-breadcrumb {
    margin-bottom: 13.334%;
  }

  .hp-breadcrumb > ul {
    color: #fff;
  }

  .hp-flow-title {
    margin-bottom: 8%;
    font-size: 28px;
  }

  .hp-flow-text {
    font-size: 26px;
    line-height: 1.92;
    margin-bottom: 32.667%;
  }

  .hp-flow-list-item {
    align-items: flex-start;
    flex-direction: column;
    background: url("../../img/hp/sp/flow-bg.png") left center/cover no-repeat;
    width: 95.334%;
    padding-bottom: 10.667%;
    padding-left: 18.934%;
    padding-right: 5.6%;
  }

  .hp-flow-list-item:first-of-type {
    margin-top: 0;
  }

  .hp-flow-list-item:nth-of-type(even) {
    background: url("../../img/hp/sp/flow-bg2.png") right center/cover no-repeat;
    margin: 0;
    padding-right: 11.467%;
    padding-left: 5.334%;
    justify-content: flex-end;
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .hp-flow-list-item::before {
    top: -45%;
    right: 0%;
    font-size: 180px;
  }

  .hp-flow-list-item:nth-of-type(even)::before {
    right: auto;
    left: 0;
  }

  .hp-flow-list-item:nth-of-type(2),
  .hp-flow-list-item:nth-of-type(3),
  .hp-flow-list-item:nth-of-type(4),
  .hp-flow-list-item:nth-of-type(5) {
    margin-top: 28%;
  }

  .hp-flow-list-item:nth-of-type(1)::before {
    top: -22%;
  }

  .hp-flow-list-item:nth-of-type(2)::before {
    top: -24%;
  }

  .hp-flow-list-item:nth-of-type(3)::before {
    top: -27%;
  }

  .hp-flow-list-item:nth-of-type(4)::before {
    top: -30%;
  }

  .hp-flow-list-item:nth-of-type(5)::before {
    top: -24%;
  }

  .hp-flow-list-item-img {
    width: 80.105%;
    margin-top: -25%;
    margin-left: -18.934%;
  }

  .hp-flow-list-item:nth-of-type(even) .hp-flow-list-item-img {
    margin-right: -11.467%;
    margin-left: 0;
  }

  .hp-flow-list-item-text {
    font-size: 26px;
    letter-spacing: 0;
    line-height: 1.92;
    margin-left: 0;
    padding-top: 1.5%;
    position: relative;
    z-index: 2;
  }

  .hp-flow-list-item:nth-of-type(even) .hp-flow-list-item-text {
    margin-left: 0;
    margin-right: 0;
  }

  .hp-flow-attention {
    text-align: left;
    line-height: 1.8;
    font-size: 22px;
    width: fit-content;
    margin: 0 auto;
    padding-top: 2.8%;
  }

  .hp-flow-lightning {
    width: 15.4276%;
  }

  .flow-lightning1 {
    top: 15%;
    right: 12%;
  }

  .flow-lightning2 {
    top: 34.5%;
    left: 9%;
  }

  .flow-lightning3 {
    top: 52.5%;
    right: 11%;
  }

  .flow-lightning4 {
    bottom: 27%;
    left: 9%;
  }

  .flow-lightning5 {
    bottom: 12%;
    right: 10%;
  }

  .hp-merit-demerit {
    padding: 21.6% 0;
  }

  .hp-merit-demerit-container {
    padding: 18.667% 0 16%;
    width: 95.067%;
  }

  .hp-merit-demerit-title {
    font-size: 48px;
    top: -1%;
    right: -22px;
    padding: 3.8% 4.1% 5.4%;
    background: url(../../img/hp/sp/merit-demerit-title-bg.png) bottom right
      no-repeat;
    background-size: contain;
    z-index: 2;
  }

  .hp-merit-container {
    width: 90.604%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12.623%;
    padding: 12.344% 4.208%;
    position: relative;
  }

  .hp-merit-container::before {
    top: -1.6%;
    font-size: 29px;
  }

  .hp-merit-inner {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 11.856%;
    z-index: 2;
  }

  .hp-merit-inner:last-of-type {
    margin-bottom: 0;
  }

  .hp-merit-title {
    font-size: 28px;
    line-height: 1;
    width: 100%;
    position: relative;
    padding-bottom: 5.156%;
    margin-bottom: 5.156%;
  }

  .hp-merit-title::after {
    content: "";
    background-color: #f19200;
    width: 16%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .hp-merit-text {
    font-size: 24px;
    line-height: 1.92;
    border-left: none;
    padding-left: 0;
    width: 100%;
    color: #262626;
  }

  .hp-demerit-container {
    width: 90.604%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10.1%;
    padding: 12.344% 4.208%;
  }

  .hp-demerit-container::before {
    top: -2%;
  }

  .hp-demerit-inner {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 11.856%;
  }

  .hp-demerit-title {
    font-size: 28px;
    line-height: 1;
    width: 100%;
    position: relative;
    padding-bottom: 5.156%;
    margin-bottom: 5.156%;
  }

  .hp-demerit-title::after {
    content: "";
    background-color: #a7a7a7;
    width: 16%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .hp-demerit-text {
    font-size: 26px;
    line-height: 1.92;
    border-left: none;
    padding-left: 0;
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .hp-merit-demerit-text {
    font-size: 26px;
    line-height: 1.92;
    text-align: center;
    color: #262626;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
  }

  .hp-merit-lightning {
    position: absolute;
    top: 0.75%;
    width: 19.258%;
    left: 11%;
  }

  .hp-demerit-lightning {
    position: absolute;
    bottom: 5%;
    width: 23.372%;
    right: 7%;
  }

  .hp-flow-merit-demerit-knowhow {
    background: url(../../img/hp/sp/about-know-how-img.jpg) center center /
      cover no-repeat;
    aspect-ratio: 750 / 400;
  }

  .hp-flow-merit-demerit-knowhow-text {
    font-size: 26px;
    line-height: 2.3;
    width: 100%;
  }
}

@media screen and (max-width: 740px) {
  .hp-flow-attention {
    font-size: 11px;
  }
}

@media screen and (max-width: 690px) {
  .hp-flow-text {
    font-size: 14px;
  }
}

@media screen and (max-width: 640px) {
  .hp-merit-demerit-title {
    font-size: 30px;
    padding: 2.8% 3.1% 5.4%;
  }

  .hp-merit-demerit-text {
    font-size: 15px;
  }
}

@media screen and (max-width: 600px) {
  .hp-flow-list-item::before {
    font-size: 140px;
  }

  .hp-flow-list-item:nth-of-type(1)::before {
    top: -14%;
  }

  .hp-flow-list-item:nth-of-type(2)::before {
    top: -16%;
  }

  .hp-flow-list-item:nth-of-type(3)::before {
    top: -16%;
  }

  .hp-flow-list-item:nth-of-type(4)::before {
    top: -26%;
  }

  .hp-flow-list-item:nth-of-type(5)::before {
    top: -18%;
  }
}

@media screen and (max-width: 550px) {
  .hp-merit-container::before {
    font-size: 20px;
    top: -1%;
  }

  .hp-demerit-container::before {
    font-size: 20px;
    top: -1%;
  }

  .hp-merit-title {
    font-size: 19px;
  }

  .hp-merit-text {
    font-size: 15px;
  }

  .hp-demerit-title {
    font-size: 19px;
  }

  .hp-demerit-text {
    font-size: 15px;
  }
}

@media screen and (max-width: 540px) {
  .hp-merit-container::before {
    top: -1%;
  }
  .hp-flow-list-item::before {
    font-size: 100px;
  }

  .hp-flow-list-item:nth-of-type(1)::before {
    top: -92px;
  }

  .hp-flow-list-item:nth-of-type(2)::before {
    top: -92px;
  }

  .hp-flow-list-item:nth-of-type(3)::before {
    top: -92px;
  }

  .hp-flow-list-item:nth-of-type(4)::before {
    top: -92px;
  }

  .hp-flow-list-item:nth-of-type(5)::before {
    top: -92px;
  }

  .hp-flow-list-item-text {
    font-size: 16px;
  }
}

@media screen and (max-width: 500px) {
  .hp-flow-merit-demerit-knowhow-text {
    font-size: 18px;
  }
}