@charset "utf-8";
/* CSS Document */
.pagevisual {
  background: url("../img/page_visual.webp")no-repeat center;
  background-size: cover;
}

.step {
  max-width: 1024px;
  margin: 72px auto 0;
}
.intro_text {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 38px;
}
.step_img_outer {
  h2 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 2.4px;
    color: #0959E2;
    padding-bottom: 18px;
    border-bottom: 1px solid #0959E2;
  }
  &:not(:first-of-type) {
    margin-top: 120px;
  }
}
.step_img {
  display: block;
  margin-top: 60px;
}
.sp_text {
  display: none;
}
.pop_up_mega {
  position: relative;
  height: 100%;
}
.pop_up_mega > a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 12px;
  &:hover {
    opacity: 1;
  }
}
.pop_up_mega {
  width: 100%;
}
.pop_up_mega map {
  display: block;
  height: 0;
}
.pop_up_child {
  background: #FFF;
  width: 100%;
}
.pop_up .pop_up_child {
  height: 0;
  opacity: 0;
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
  font-size: 1.6rem;
  font-weight: normal;
}
area {
  display: inline!important;
}
.pop_up area.Map1_01:hover ~ .pop_up_child_01 , .pop_up area.Map1_02:hover ~ .pop_up_child_02 , .pop_up area.Map1_03:hover ~ .pop_up_child_03 , .pop_up area.Map1_04:hover ~ .pop_up_child_04 , .pop_up area.Map1_05:hover ~ .pop_up_child_05 , .pop_up area.Map1_06:hover ~ .pop_up_child_06 , .pop_up area.Map1_07:hover ~ .pop_up_child_07 , .pop_up area.Map1_08:hover ~ .pop_up_child_08 , .pop_up area.Map1_09:hover ~ .pop_up_child_09 , .pop_up area.Map1_10:hover ~ .pop_up_child_10 , .pop_up area.Map1_11:hover ~ .pop_up_child_11 , .pop_up area.Map1_12:hover ~ .pop_up_child_12 {
  opacity: 1;
  height: auto;
  visibility: visible;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  * {
    opacity: 1;
    visibility: visible;
  }
}
.pc_text_box {
  .title {
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    min-height: 38px;
    padding-left: 15px;
    span {
      display: inline-block;
      width: 110px;
      line-height: 1;
    }
  }
  .text {
    letter-spacing: 0.56px;
    line-height: 1.75;
    padding: 12px 12px 15px;
  }
}
.pop_up_child_01 {
  border: 1px solid #65D2FE;
  .title {
    background: rgba(125, 217, 254, .3);
  }
}
.pop_up_child_02 {
  border: 1px solid #49B6EB;
  .title {
    background: rgba(73, 182, 235, .3);
  }
}
.pop_up_child_03 {
  border: 1px solid #3098D8;
  .title {
    background: rgba(48, 152, 216, .3);
  }
}
.pop_up_child_04 {
  border: 1px solid #1980C9;
  .title {
    background: rgba(25, 128, 201, .3);
  }
}
.pop_up_child_05 {
  border: 1px solid #0E75C6;
  .title {
    background: rgba(14, 117, 198, .3);
  }
}
.pop_up_child_06 {
  border: 1px solid #0063B5;
  .title {
    background: rgba(0, 99, 181, .3);
  }
}
.pop_up_child_07 {
  border: 1px solid #7BAFF5;
  .title {
    background: rgba(123, 175, 245, .3);
  }
}
.pop_up_child_08 {
  border: 1px solid #6597DE;
  .title {
    background: rgba(101, 151, 222, .3);
  }
}
.pop_up_child_09 {
  border: 1px solid #5081C8;
  .title {
    background: rgba(80, 129, 200, .3);
  }
}
.pop_up_child_10 {
  border: 1px solid #3C6BB2;
  .title {
    background: rgba(60, 107, 178, .3);
  }
}
.pop_up_child_11 {
  border: 1px solid #26539B;
  .title {
    background: rgba(38, 83, 155, .3);
  }
}
.pop_up_child_12 {
  border: 1px solid #123C84;
  .title {
    background: rgba(18, 60, 132, .3);
  }
}

@media screen and (max-width: 767px) {
  .step {
    padding: 0 5%;
    margin-top: 30px;
  }
  .intro_text {
    margin-bottom: 30px;
    text-align: justify;
  }
  .step_img_outer {
    &:not(:first-of-type) {
      margin-top: 60px;
    }
  }
  .step_img {
    margin-top: 30px;
  }
  .pop_up_mega map {
    display: none;
  }
  .sp_text {
    display: block;
  }
  .sp_text01 {
    .sp_text_box {
      &:first-of-type {
        margin-top: 15px;
      }
      &:not(:first-of-type) {
        margin-top: 8px;
      }
      .title {
        display: flex;
        align-items: center;
        min-height: 38px;
        padding-left: 15px;
        span {
          display: inline-block;
          width: 75px;
          line-height: 1;
        }
      }
      &:nth-child(1) {
        border: 1px solid #65D2FE;
      }
      &:nth-child(2) {
        border: 1px solid #49B6EB;
      }
      &:nth-child(3) {
        border: 1px solid #3098D8;
      }
      &:nth-child(4) {
        border: 1px solid #1980C9;
      }
      &:nth-child(5) {
        border: 1px solid #0E75C6;
      }
      &:nth-child(6) {
        border: 1px solid #0063B5;
      }
      &:nth-child(1) .title {
        background: rgba(125, 217, 254, .3);
      }
      &:nth-child(2) .title {
        background: rgba(73, 182, 235, .3);
      }
      &:nth-child(3) .title {
        background: rgba(48, 152, 216, .3);
      }
      &:nth-child(4) .title {
        background: rgba(25, 128, 201, .3);
      }
      &:nth-child(5) .title {
        background: rgba(14, 117, 198, .3);
      }
      &:nth-child(6) .title {
        background: rgba(0, 99, 181, .3);
      }
      .text {
        font-size: 1.4rem;
        letter-spacing: 0.56px;
        line-height: 1.75;
        padding: 12px 12px 15px;
      }
    }
  }

  .sp_text02 {
    .sp_text_box {
      &:first-of-type {
        margin-top: 15px;
      }
      &:not(:first-of-type) {
        margin-top: 8px;
      }
      .title {
        display: flex;
        align-items: center;
        min-height: 38px;
        padding-left: 15px;
        line-height: 1.75;
        span {
          display: inline-block;
          width: 75px;
          line-height: 1;
        }
      }
      &:nth-child(1) {
        border: 1px solid #7BAFF5;
      }
      &:nth-child(2) {
        border: 1px solid #6597DE;
      }
      &:nth-child(3) {
        border: 1px solid #5081C8;
      }
      &:nth-child(4) {
        border: 1px solid #3C6BB2;
      }
      &:nth-child(5) {
        border: 1px solid #26539B;
      }
      &:nth-child(6) {
        border: 1px solid #123C84;
      }
      &:nth-child(1) .title {
        background: rgba(123, 175, 245, .3);
      }
      &:nth-child(2) .title {
        background: rgba(101, 151, 222, .3);
      }
      &:nth-child(3) .title {
        background: rgba(80, 129, 200, .3);
      }
      &:nth-child(4) .title {
        background: rgba(60, 107, 178, .3);
      }
      &:nth-child(5) .title {
        background: rgba(38, 83, 155, .3);
      }
      &:nth-child(6) .title {
        background: rgba(18, 60, 132, .3);
      }
      .text {
        font-size: 1.4rem;
        letter-spacing: 0.56px;
        line-height: 1.75;
        padding: 12px 12px 15px;
      }
    }
  }
}