/* =======================================================================
   TOP Page Styles
======================================================================= */
#front-page {
  /* ムービー */
  .hero {
    display: grid;
    place-content: center;
    overflow: hidden;
    max-height: 800px;

    video {
      width: 100vw;
    }
  }

  /* 最新のお知らせ */
  .latest-news {
    padding-left: 1rem;
    padding-right: 1rem;

    .is-layout-flex {
      gap: 0;
    }

    .latest-news__title {
      font-size: clamp(1.125rem, 1.071rem + 0.24vw, 1.25rem);
      text-align: center;
    }
  } /* //.latest-news */

  /* 
    リカバリーについて
    サービス
    採用情報
    お知らせ
    情報発信
    */
  .about,
  .services,
  .recruit,
  .news,
  .info {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 情報発信 */
  .info {
    .external-banner {
      justify-content: space-around;

      .external-banner__item {
        max-width: 230px;

        a {
          text-decoration: none;
        }

        figure {
          text-align: center;

          img {
            width: 80%;
            height: 80%;
          }
        }

        p {
          font-size: clamp(0.75rem, 0.511rem + 1.02vw, 1rem);
        }
      } /* //.external-banner__item */
    } /* //.external-banner */

    .fb-plugin-responsive {
      margin-block-start: 0 !important;
      padding-left: 1rem;
      padding-right: 1rem;
      text-align: center;

      .fb_iframe_widget span {
        height: 584px !important;

        .fb_iframe_widget iframe {
          height: 100% !important;
          width: 100% !important;
        }
      }
    } /* //.fb-plugin-responsive */
  } /* //.info */

  /*
    Post List Layout
    最新のお知らせ、お知らせの共通スタイル
    */
  .wp-block-query {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        padding: 1rem 0;

        .columns {
          display: grid;
          grid-template-columns: 125px 1fr;
          gap: 1rem;
          align-items: center;

          .column {
            &:last-child {
              display: flex;
              flex-direction: column;
              gap: 0.5rem;

              time {
                font-size: clamp(0.75rem, 0.693rem + 0.24vw, 0.875rem);
              }

              a {
                border-bottom: 1px solid #272727;
                text-decoration: none;
                font-size: clamp(0.875rem, 0.818rem + 0.24vw, 1rem);
                padding-bottom: 0.75rem;
              }
            } /* //.column:last-child */
          } /* // .column */
        } /* // .columns */
      } /* // li */
    } /* // ul */
  } /* //.wp-block-query */
} /* //#front-page */

/* footer */
footer {
  position: relative;

  &:before {
    content: "";
    background-image: url("../images/top/fluid_shape_news_05.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 500px;
    height: 455px;
    position: absolute;
    top: -250px;
    left: -350px;
    animation: floating 6s ease-in-out infinite;
    animation-delay: 1.5s;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: -1;
  }
} /* //footer */

.recruit_banner {
  text-decoration: none;
  transition: all 0.3s;
  &:hover {
    opacity: 0.3;
  }
}

/* =======================================================================
   Media Query
======================================================================= */
@media (min-width: 769px) {
  #front-page {
    /* 最新のお知らせ */
    .latest-news {
      padding-left: 0;
      padding-right: 0;

      .is-layout-flex {
        gap: 1rem;

        > div:first-child {
          display: grid;
          align-content: center;
        }
      }

      .latest-news__title {
        text-align: right;
      }

      .wp-block-query {
        ul {
          li {
            .columns {
              grid-template-columns: 130px 1fr;
            } /* // .columns */
          } /* // li */
        } /* // ul */
      } /* //.wp-block-query */
    } /* //.latest-news */
  } /* //#front-page */

  /* footer */
  footer {
    &:before {
      content: "";
      background-image: url("../images/top/fluid_shape_news_05.svg");
      width: 500px;
      height: 455px;
      top: -350px;
      left: -350px;
      animation: floating 6s ease-in-out infinite;
      animation-delay: 1.5s;
      mix-blend-mode: multiply;
    }
  } /* //footer */
}