/* ------------------------------
TOPPAGE（トップページ）
------------------------------ */
.top__intro {
  width: calc( 100% - 40px); 
  max-width: 1000px; 
  margin: 0 auto 20px auto; 
  color: var(--white01); 
  padding: 20px ;
  background: var(--blue01) ;
  text-align: center;
  & p {
    display: block;
    font-size: var(--px20);
    & b {
      display: inline-block; font-size: 130%; font-weight: 500;
    }
  }
}
.fv {
  background: var(--white01);
  padding: 3.5%;
  margin-bottom: 50px;
  & .fv__box {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;

    & .img__box {
      flex-basis: 30.26%;
    }

    & .text__box {
      flex-basis: 63.15%;
      align-self: center;

      & p {
        text-align: center;
        font-size: var(--px24);
        /* margin: 0 0 50px 0; */
        line-height: 2.1;
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        & .red {
          font-size: var(--px40);
          color: var(--red01);
          display: inline-block;
        }
        & .underline {
          font-size: var(--px40);
          display: inline-block;
          font-weight: 700;
          background: linear-gradient(transparent 70%, #ffff66 70%);
          line-height: 1.3;
        }
      }

      & .btn__box {
        margin: 42px 0 0 0;

        & ul {
          list-style: none;

          & li {
            flex-basis: calc((100% - 20px) / 2);
            &.cl2 {
              flex-basis: 100%;
              & a {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                max-width: 480px;
                &.more__btn {
                  &.blue3 {
                    font-weight: bold;
                    display: block;
                    position: relative;
                    height: 4.4em;
                    font-size: var(--px20);
                    & .txt {
                      position: relative;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      height: 100%;
                      width: 100%;
                      padding:0 4em 0 4em;
                    }
                    & .icon {
                      background: var(--blue01) url(../img/common/icon_outlink_white.svg) center center / 50% 50% no-repeat;
                      width: 2em;
                      height: 2em;
                      border-radius: 50%;
                      display: block;
                      right: 10px;
                      top:50%;
                      transform: translateY(-50%);
                      position: absolute;
                    }
                    &::before {
                      content: '';
                      background:url(../img/top/img_top_02.png) center center / 100%  100% no-repeat;
                      width: 6.45em; height: 6.44em; position: absolute; left:-0.5em; top:50%; display: block;transform: translateY(-50%);
                    }
                  }
                  &:hover {
                    border: var(--gray01) solid 2px;
                    & .icon {
                      background: var(--white01) url(../img/common/icon_outlink_black.svg) center center / 50% 50% no-repeat;
                    }
                  }
                }
              }
            }
            & a {
              line-height: 1.2;

              &.more__btn {
                height: 65px;
                border-radius: 50px;
                font-size: var(--px18);

                & .txt {
                  text-align: center;
                }
              }
            }

            &:nth-of-type(2) {
              & a {
                & .icon {
                  background: url(../img/common/icon_outlink_white.svg) center center / 100% 100%;
                  width: 1em;
                  height: 1em;
                  display: block;
                }

                &:hover {
                  & .icon {
                    background: url(../img/common/icon_outlink_white.svg) center center / 100% 100%;
                  }
                }
              }
            }
          }
        }
      }

      & .limit {
        margin-top: 34px;
        border-top: var(--black01) solid 1px;
        border-bottom: var(--black01) solid 1px;
        padding: 16px 0;

        & p {
          text-align: center;
          font-size: 16px;
          font-weight: 700;
          margin: 0;
        }
      }
    }
  }
}
.topics {
  & .topics__box {
    & p {
      font-size: var(--px20); text-align: center;
    }
  }
}


@media screen and (max-width:810px) {
  .top__intro {
    background: var(--blue01); padding:20px;
    & p {
      font-size: var(--px18); text-align: center;
    }
  }
  .fv {
    padding: 40px 20px;

    & .fv__box {
      justify-content: center;

      & .img__box {
        flex-basis: 100%;
        & img {
          display: block; margin-left: auto; margin-right: auto; max-width: calc( 100% - 60px );
        }
      }

      & .text__box {
        flex-basis: 100%;
        margin-top: 20px;
        & p {
          font-size: var(--px20);
          & .red {
            font-size: var(--px30);
          }
        }

        & .btn__box {
          & ul {
            gap: 20px;

            & li {
              flex-basis: 100%;
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width:810px) {
  .fv {
    overflow: visible;
    & .fv__box {
      & .text__box {
        & .btn__box {
          & ul {
            & li {
              &.cl2 {
                & a {
                  &.more__btn {
                    &.blue3 {
                      font-size: var(--px18);
                      
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width:480px) {
  .top__intro {
    & p {
      font-size: var(--px14);
    }
  }
  .fv {
    overflow: visible;
    & .fv__box {
      & .text__box {
        & .btn__box {
          & ul {
            & li {
              &.cl2 {
                & a {
                  &.more__btn {
                    &.blue3 {
                      font-size: var(--px14);
                      &::before {
                         width: 4.3em; height: 4.3em; 
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.guide__navi {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  /* grid-template-rows: 1fr 1fr; */
  gap: 76px 40px;
  margin-bottom: 50px;
  
  & .guide__box {
    background: var(--white01);
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr auto 1fr;
    gap: 20px 0;

    & h3 {
      background: var(--blue01);
      color: var(--white01);
      text-align: center;
      font-weight: 700;
      align-content: center;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 22px 22px;
      font-size: var(--px16);
      font-weight: 700;
      line-height: 1.62;
    }

    & p {
      padding: 0 33px;
    }

    & .more__box {
      padding: 0 33px 20px 33px;

      & a {
        width: 100%;
        max-width: 385px;
        margin: 0 auto;
        position: relative;

        & .icon {
          background: url(../img/common/icon_arrow_right_white.svg) center center / 100% 100% no-repeat;
          width: 0.45em;
          height: 0.9em;
        }
      }
    }
  }
}

@media screen and (max-width:810px) {
  .guide__navi {
    grid-template-columns: 1fr;
    gap: 40px 20px;

    & .guide__box {
      & p {
        padding: 0 20px;
      }
      & .more__box {
        padding: 0 20px 20px 20px;
        & a {
          font-size: var(--px16); text-align: center; line-height: 1.2;
        }
      }
    }
  }
}