@charset "utf-8";
/* ==================================================== */
/* cmn-header
/* ==================================================== */
.cmn-header {
  background-image: url("../img/process/header_img.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* ==================================================== */
/* process-contents
/* ==================================================== */
.process-contents {
  position: relative;
  margin: auto;
  margin-bottom: 60px;
  padding-top: 80px;
}
.process-contents .inner {
  max-width: 1120px;
}
.process-contents .anchor-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 100px;

  gap: 39px;
}
.process-contents .anchor-list li {
  position: relative;
  width: 100%;
  max-width: 230px;
}
.process-contents .anchor-list li a {
  display: block;
  width: 100%;
  height: 65px;
  padding-top: 10px;
  border: solid 1px #c7171e;
  font-size: var(--fs18);
  font-weight: 700;
  text-align: center;
  color: #c7171e;
}
.process-contents .anchor-list li::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-right: 1px solid #c7171e;
  border-bottom: 1px solid #c7171e;
  content: "";
  transform: translateY(calc(-50% - 1px)) rotate(45deg);
}
.process-contents .border {
  display: flex;
  align-items: center;
  margin-bottom: 35px;
  padding: 9px 30px;
  background-color: #c7171e;
}
.process-contents .border h2 {
  font-size: var(--fs26);
  font-weight: 700;
  color: #fff;
}
.process-contents .border span {
  display: inline-block;
  padding-left: 25px;
  font-size: var(--fs16);
  font-weight: 400;
  color: #fff;
}
.process-contents .figure-area {
  position: relative;
}
.process-contents .figure-area .txt-box-link {
  display: block;
  /* SP以外ではhoverで説明を出すため、アンカーリンクとしては無効化 */
  pointer-events: none;
}
.process-contents .figure-area figure {
  width: 71.522694vw;
  max-width: 977px;
  margin: auto;
}

/* ===== #pressure ===== */
.process-contents #pressure {
  margin-bottom: 87px;
}
.process-contents #pressure .figure-area .txt-box {
  position: absolute;
  top: min(4.978038vw, 68px);
  left: calc(50% - min(29.062958vw, 397px));
}
.process-contents #pressure .figure-area .txt-box .img {
  position: relative;
  z-index: 2;
  width: min(9.590044vw, 131px);

  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
.process-contents #pressure .figure-area .txt-box .explanation {
  position: absolute;
  top: 24px;
  left: -1px;
  z-index: 1;
  display: none;
  width: max-content;
  padding: min(3.147877vw, 43px) min(1.830161vw, 25px) min(1.830161vw, 25px);
  border: solid 2px #f2bdd8;
  background-color: #fff;
  font-size: clamp(1.2rem, 1.098097vw, 1.5rem);
  transition: opacity 0.3s ease, display 0.3s allow-discrete;
  opacity: 0;

  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
}
.process-contents #pressure .figure-area .txt-box:hover .explanation,
.process-contents #twin .figure-area .txt-box:hover .explanation {
  display: block;
  opacity: 1;
}
@starting-style {
  .process-contents #pressure .figure-area .txt-box:hover .explanation {
    opacity: 0;
  }
}
/* txt-box-02 */
.process-contents #pressure .figure-area .txt-box-02 {
  position: absolute;
  top: min(23.060029vw, 315px);
  left: calc(50% - min(23.279649vw, 318px));
}
.process-contents #pressure .figure-area .txt-box-02 .explanation {
  border: solid 2px #adcbab;
}
/* txt-box-03 */
.process-contents #pressure .figure-area .txt-box-03 {
  position: absolute;
  top: min(18.960469vw, 259px);
  left: calc(50% - min(7.467057vw, 102px));
}
.process-contents #pressure .figure-area .txt-box-03 .img {
  z-index: 4;
}
.process-contents #pressure .figure-area .txt-box-03 .explanation {
  top: auto;
  bottom: 21px;
  left: -70px;
  z-index: 3;
  padding: min(1.464129vw, 20px) min(1.830161vw, 25px) min(2.415813vw, 33px);
  border: solid 2px #add5f3;
}
/* txt-box-04 */
.process-contents #pressure .figure-area .txt-box-04 {
  position: absolute;
  top: min(21.376281vw, 292px);
  right: calc(50% - min(24.524158vw, 335px));
  left: auto;
}
.process-contents #pressure .figure-area .txt-box-04 .img {
  width: min(13.250366vw, 181px);
}
.process-contents #pressure .figure-area .txt-box-04 .explanation {
  border: solid 2px #fbbf91;
}
/* txt-box-05 */
.process-contents #pressure .figure-area .txt-box-05 {
  position: absolute;
  top: min(10.834553vw, 148px);
  right: calc(50% - min(22.401171vw, 306px));
  left: auto;
}
.process-contents #pressure .figure-area .txt-box-05 .img {
  z-index: 6;
}
.process-contents #pressure .figure-area .txt-box-05 .explanation {
  top: auto;
  bottom: 28px;
  z-index: 5;
  padding: min(1.464129vw, 20px) min(1.830161vw, 25px) min(2.415813vw, 33px);
  border: solid 2px #c7bdec;
}

/* ===== #twin ===== */
.process-contents #twin .figure-area .txt-box {
  position: absolute;
  top: min(5.270864vw, 72px);
  left: calc(50% - min(19.472914vw, 266px));
}
.process-contents #twin .figure-area .txt-box .img {
  position: relative;
  z-index: 2;
  width: min(16.910688vw, 231px);

  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
.process-contents #twin .figure-area .txt-box .explanation {
  position: absolute;
  top: 24px;
  left: -1px;
  z-index: 1;
  display: none;
  width: max-content;
  padding: min(3.147877vw, 43px) min(1.830161vw, 25px) min(1.830161vw, 25px);
  border: solid 2px #f9d36a;
  background-color: #fff;
  font-size: clamp(1.2rem, 1.098097vw, 1.5rem);
  transition: opacity 0.3s ease, display 0.3s allow-discrete;
  opacity: 0;

  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
}
.process-contents #twin .figure-area .txt-box:hover .explanation {
  display: block;
  opacity: 1;
}
@starting-style {
  .process-contents #twin .figure-area .txt-box:hover .explanation {
    opacity: 0;
  }
}
/* txt-box-01 */
.process-contents #twin .figure-area .txt-box-01 .explanation {
  top: auto;
  bottom: 20px;
  left: -90px;
  padding: min(1.464129vw, 20px) min(1.830161vw, 25px) min(2.122987vw, 29px);
  border: solid 2px #f9d36a;
}
.process-contents #twin .figure-area .txt-box-01 {
  z-index: 4;
}
/* txt-box-02 */
.process-contents #twin .figure-area .txt-box-02 {
  position: absolute;
  top: min(16.910688vw, 231px);
  left: calc(50% - min(24.963397vw, 341px));
  z-index: 3;
}
.process-contents #twin .figure-area .txt-box-02 .img {
  width: min(13.250366vw, 181px);
}
.process-contents #twin .figure-area .txt-box-02 .explanation {
  top: auto;
  bottom: 20px;
  left: -162px;
  padding: min(1.464129vw, 20px) min(1.830161vw, 25px) min(2.122987vw, 29px);
  border: solid 2px #e06c6c;
}
/* txt-box-03 */
.process-contents #twin .figure-area .txt-box-03 {
  position: absolute;
  top: min(33.016105vw, 451px);
  left: calc(50% - min(35.651537vw, 487px));
}
.process-contents #twin .figure-area .txt-box-03 .img {
  width: min(21.669107vw, 296px);
}
.process-contents #twin .figure-area .txt-box-03 .explanation {
  border: solid 2px #adcbab;
}
/* txt-box-04 */
.process-contents #twin .figure-area .txt-box-04 {
  position: absolute;
  top: min(23.206442vw, 317px);
  left: calc(50% - min(17.569546vw, 240px));
  z-index: 2;
}
.process-contents #twin .figure-area .txt-box-04 .img {
  width: min(9.590044vw, 131px);
}
.process-contents #twin .figure-area .txt-box-04 .explanation {
  left: 20px;
  border: solid 2px #add5f3;
}
/* txt-box-05 */
.process-contents #twin .figure-area .txt-box-05 {
  position: absolute;
  top: min(16.910688vw, 231px);
  left: calc(50% - min(7.467057vw, 102px));
}
.process-contents #twin .figure-area .txt-box-05 .img {
  width: min(13.250366vw, 181px);
}
.process-contents #twin .figure-area .txt-box-05 .explanation {
  border: solid 2px #fbbf91;
}
/* txt-box-06 */
.process-contents #twin .figure-area .txt-box-06 {
  position: absolute;
  top: -7px;
  right: calc(50% - min(15.080527vw, 206px));
  left: auto;
  z-index: 4;
}
.process-contents #twin .figure-area .txt-box-06 .img {
  width: min(15.080527vw, 206px);
}
.process-contents #twin .figure-area .txt-box-06 .explanation {
  top: 28px;
  left: -137px;
  padding: min(1.464129vw, 20px) min(1.830161vw, 25px) min(2.122987vw, 29px);
  border: solid 2px #c7bdec;
}
/* txt-box-07 */
.process-contents #twin .figure-area .txt-box-07 {
  position: absolute;
  top: min(10.90776vw, 149px);
  right: calc(50% - min(34.699854vw, 474px));
  left: auto;
}
.process-contents #twin .figure-area .txt-box-07 .img {
  width: min(20.497804vw, 280px);
}
.process-contents #twin .figure-area .txt-box-07 .explanation {
  border: solid 2px #f2bdd8;
}
/* txt-box-08 */
.process-contents #twin .figure-area .txt-box-08 {
  position: absolute;
  top: min(33.016105vw, 451px);
  right: calc(50% - min(22.767204vw, 311px));
  left: auto;
}
.process-contents #twin .figure-area .txt-box-08 .img {
  width: min(9.590044vw, 131px);
}
.process-contents #twin .figure-area .txt-box-08 .explanation {
  border: solid 2px #c7e5d9;
}
.process-contents article .list-box {
  display: none;
}
@media screen and (max-width: 1024px) {
  .process-contents {
    margin-bottom: 0;
    padding-top: 45px;
  }
  .process-contents .anchor-list {
    margin: 0 auto 70px;
  }
  .process-contents .border {
    padding: 8px 15px;
  }
  .process-contents .border h2 {
    font-size: var(--fs24);
  }
  .process-contents .border span {
    padding-left: 20px;
    font-size: var(--fs15);
  }
  .process-contents .figure-area figure {
    width: 100%;
  }
  /* ===== #pressure ===== */
  .process-contents #pressure {
    margin-bottom: 40px;
  }
  .process-contents #pressure .figure-area .txt-box {
    top: min(6.640625vw, 68px);
    left: calc(50% - min(37.304688vw, 382px));
  }
  .process-contents #pressure .figure-area .txt-box .img {
    width: min(12.792969vw, 131px);
  }
  .process-contents #pressure .figure-area .txt-box-02 {
    top: min(30.761719vw, 315px);
    left: calc(50% - min(30.957031vw, 317px));
  }
  .process-contents #pressure .figure-area .txt-box-03 {
    top: min(25.292969vw, 259px);
    left: calc(50% - min(12.988281vw, 133px));
  }
  .process-contents #pressure .figure-area .txt-box-04 {
    top: min(28.515625vw, 292px);
    right: calc(50% - min(33.496094vw, 343px));
    left: auto;
  }
  .process-contents #pressure .figure-area .txt-box-04 .img {
    width: min(17.675781vw, 181px);
  }
  .process-contents #pressure .figure-area .txt-box-05 {
    top: min(14.453125vw, 148px);
    right: calc(50% - min(28.320312vw, 290px));
    left: auto;
  }
  .process-contents #pressure .figure-area .txt-box-05 .explanation {
    left: -13px;
  }
  /* ===== #twin ===== */
  .process-contents #twin .figure-area .txt-box {
    top: min(7.03125vw, 72px);
    left: calc(50% - min(26.464844vw, 271px));
  }
  .process-contents #twin .figure-area .txt-box .img {
    width: min(22.558594vw, 231px);
  }
  .process-contents #twin .figure-area .txt-box-02 {
    top: min(21.972656vw, 225px);
    left: calc(50% - min(32.714844vw, 335px));
  }
  .process-contents #twin .figure-area .txt-box-02 .img {
    width: min(17.675781vw, 181px);
  }
  .process-contents #twin .figure-area .txt-box-02 .explanation {
    left: -129px;
  }
  .process-contents #twin .figure-area .txt-box-03 {
    top: min(42.382813vw, 434px);
    left: calc(50% - min(46.09375vw, 472px));
  }
  .process-contents #twin .figure-area .txt-box-03 .img {
    width: min(28.90625vw, 296px);
  }
  .process-contents #twin .figure-area .txt-box-04 {
    top: min(30.175781vw, 309px);
    left: calc(50% - min(22.65625vw, 232px));
  }
  .process-contents #twin .figure-area .txt-box-04 .img {
    width: min(12.792969vw, 131px);
  }
  .process-contents #twin .figure-area .txt-box-05 {
    top: min(21.484375vw, 220px);
    left: calc(50% - min(10.253906vw, 105px));
  }
  .process-contents #twin .figure-area .txt-box-05 .img {
    width: min(17.675781vw, 181px);
  }
  .process-contents #twin .figure-area .txt-box-06 {
    right: calc(50% - min(19.726563vw, 202px));
    left: auto;
  }
  .process-contents #twin .figure-area .txt-box-06 .img {
    width: min(20.117188vw, 206px);
  }
  .process-contents #twin .figure-area .txt-box-06 .explanation {
    left: -115px;
  }
  .process-contents #twin .figure-area .txt-box-07 {
    top: min(13.574219vw, 139px);
    right: calc(50% - min(45.117188vw, 462px));
    left: auto;
  }
  .process-contents #twin .figure-area .txt-box-07 .img {
    width: min(27.34375vw, 280px);
  }
  .process-contents #twin .figure-area .txt-box-08 {
    top: min(42.382813vw, 434px);
    right: calc(50% - min(29.492188vw, 302px));
    left: auto;
  }
  .process-contents #twin .figure-area .txt-box-08 .img {
    width: min(12.792969vw, 131px);
  }
  .process-contents #twin .figure-area .txt-box-08 .explanation {
    left: -23px;
  }
}
@media screen and (max-width: 767px) {
  .process-contents .inner {
    padding: 0 4%;
  }
  .process-contents .anchor-list {
    margin: 0 auto 47px;

    gap: 11px;
  }
  .process-contents .anchor-list li {
    max-width: 300px;
  }
  .process-contents .anchor-list li a {
    height: auto;
    padding: 5px 0 21px;
    font-size: var(--fs16);
  }
  .process-contents .anchor-list li::after {
    bottom: 5px;
    width: 7px;
    height: 7px;
  }
  .process-contents #pressure {
    margin-bottom: 60px;
  }
  .process-contents .border {
    display: block;
    margin-bottom: 29px;
    padding: 7px 10px;
    text-align: center;
  }
  .process-contents .border h2 {
    margin-bottom: 5px;
    font-size: var(--fs18);
  }
  .process-contents .border span {
    padding: 0;
    font-size: var(--fs14);
    line-height: 1.5;
  }
  .process-contents .figure-area .txt-box-link {
    /* SPではタップで該当のanchor-listへページ内リンク */
    pointer-events: auto;
  }
  .process-contents .figure-area {
    width: 91.3%;
    margin: auto;
  }
  .process-contents .figure-area figure {
    width: 100%;
    max-width: 315px;
  }
  .process-contents #pressure .figure-area .txt-box:hover .explanation,
  .process-contents #twin .figure-area .txt-box:hover .explanation {
    display: none !important;
  }
  /* list-box */
  .process-contents article .list-box {
    display: block;
    width: 91.3%;
    max-width: 500px;
    margin: min(22.133333vw, 83px) auto 0;
    border-top: solid 1px #c6c6c6;
  }
  .process-contents article .list-box .anchor-box {
    padding: min(7.733333vw, 29px) 0 min(10.133333vw, 38px);
    border-bottom: solid 1px #c6c6c6;
  }
  .process-contents article .list-box .anchor-box .tlt {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    gap: 10px;
  }
  .process-contents article .list-box .anchor-box .tlt span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    border-radius: 22px;
    background-color: #f2bdd8;
    font-size: var(--fs21);
    letter-spacing: normal;

    aspect-ratio: 1 / 1;
  }
  .process-contents article .list-box .anchor-box .tlt h3 {
    flex: 1;
    font-size: var(--fs18);
    font-weight: 700;
  }
  .process-contents article .list-box .anchor-box p {
    font-size: var(--fs14);
  }
  .process-contents article .list-box #pressure-anchor-02 .tlt span {
    background-color: #adcbab;
  }
  .process-contents article .list-box #pressure-anchor-03 .tlt span {
    background-color: #add5f3;
  }
  .process-contents article .list-box #pressure-anchor-04 .tlt span {
    background-color: #fbbf91;
  }
  .process-contents article .list-box #pressure-anchor-05 .tlt span {
    background-color: #c7bdec;
  }
  .process-contents article .list-box #twin-anchor-01 .tlt span {
    background-color: #f9d36a;
  }
  .process-contents article .list-box #twin-anchor-02 .tlt span {
    background-color: #e06c6c;
  }
  .process-contents article .list-box #twin-anchor-03 .tlt span {
    background-color: #adcbab;
  }
  .process-contents article .list-box #twin-anchor-04 .tlt span {
    background-color: #add5f3;
  }
  .process-contents article .list-box #twin-anchor-05 .tlt span {
    background-color: #fbbf91;
  }
  .process-contents article .list-box #twin-anchor-06 .tlt span {
    background-color: #c7bdec;
  }
  .process-contents article .list-box #twin-anchor-07 .tlt span {
    background-color: #f2bdd8;
  }
  .process-contents article .list-box #twin-anchor-08 .tlt span {
    background-color: #c7e5d9;
  }
  /* ===== #pressure ===== */
  .process-contents #pressure .figure-area .txt-box .img {
    width: min(19.466667vw, 73px);
  }
  .process-contents #pressure .figure-area .txt-box-01 {
    top: min(7.2vw, 27px);
    left: calc(50% - min(28.133333vw, 105.5px));
  }
  .process-contents #pressure .figure-area .txt-box-02 {
    top: min(45.6vw, 171px);
    left: calc(50% - min(18.533333vw, 69.5px));
  }
  .process-contents #pressure .figure-area .txt-box-03 {
    top: min(72.533333vw, 272px);
    right: calc(50% - min(19.6vw, 73.5px));
    left: auto;
  }
  .process-contents #pressure .figure-area .txt-box-04 {
    top: min(111.466667vw, 418px);
    right: auto;
    left: calc(50% - min(28.133333vw, 105.5px));
  }
  .process-contents #pressure .figure-area .txt-box-04 .img {
    width: min(28vw, 105px);
  }
  .process-contents #pressure .figure-area .txt-box-05 {
    top: min(122.666667vw, 460px);
    right: calc(50% - min(14vw, 52.5px));
    left: auto;
  }
  /* ===== #twin ===== */
  .process-contents #twin .border {
    margin-bottom: 72px;
  }
  .process-contents #twin .figure-area .txt-box-01 {
    top: -37px;
    left: calc(50% - min(33.2vw, 124.5px));
  }
  .process-contents #twin .figure-area .txt-box-01 .img {
    width: min(36.266667vw, 136px);
  }
  .process-contents #twin .figure-area .txt-box-02 {
    top: min(14.133333vw, 53px);
    left: calc(50% - min(29.066667vw, 109px));
  }
  .process-contents #twin .figure-area .txt-box-02 .img {
    width: min(28vw, 105px);
  }
  .process-contents #twin .figure-area .txt-box-03 {
    top: min(24.533333vw, 92px);
    left: calc(50% - min(25.733333vw, 96.5px));
  }
  .process-contents #twin .figure-area .txt-box-03 .img {
    width: min(50.933333vw, 191px);
  }
  .process-contents #twin .figure-area .txt-box-04 {
    top: min(44.266667vw, 166px);
    right: calc(50% - min(14.533333vw, 54.5px));
    left: auto;
  }
  .process-contents #twin .figure-area .txt-box-04 .img {
    width: min(19.466667vw, 73px);
  }
  .process-contents #twin .figure-area .txt-box-05 {
    top: min(87.733333vw, 329px);
    left: calc(50% - min(45.733333vw, 171.5px));
  }
  .process-contents #twin .figure-area .txt-box-05 .img {
    width: min(28vw, 105px);
  }
  .process-contents #twin .figure-area .txt-box-06 {
    top: min(63.733333vw, 239px);
    right: calc(50% - min(38.533333vw, 144.5px));
  }
  .process-contents #twin .figure-area .txt-box-06 .img {
    width: min(32.266667vw, 121px);
  }
  .process-contents #twin .figure-area .txt-box-07 {
    top: min(79.733333vw, 299px);
    right: calc(50% - min(39.866667vw, 149.5px));
  }
  .process-contents #twin .figure-area .txt-box-07 .img {
    width: min(44.8vw, 168px);
  }
  .process-contents #twin .figure-area .txt-box-08 {
    top: min(103.466667vw, 388px);
    right: calc(50% - min(32.666667vw, 122.5px));
  }
  .process-contents #twin .figure-area .txt-box-08 .img {
    width: min(19.466667vw, 73px);
  }
}