@charset 'utf-8';

.l-footer {
  background-image: url('../../img/common/footer_bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .l-footer__inner {
    display: grid;
    grid-template-columns: 656px 1fr;
  }

  .l-footer__main {
    background-color: rgb(24, 168, 195, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 176px;

    .l-footer__main-container {
      .l-footer__logo {
        margin-bottom: 50px;

        .l-footer__logo-link {
          display: inline-block;
        }
      }

      .l-footer__message {
        margin-bottom: 50px;
        font-size: 2.0rem;
        color: var(--color-font-03);
        line-height: 170%;
        letter-spacing: 4px;
        font-family: var(--font-ff-shippori-mincho);
      }

      .l-footer__sns {
        margin-bottom: 79px;
      }

      .l-footer__copyright {
        font-size: 1.6rem;
        font-family: var(--font-ff-outfit);
        font-weight: 200;
        color: var(--color-font-03);
      }
    }
  }

  .l-footer__sub {
    background: linear-gradient(270deg, #00404C 0%, rgba(0, 64, 76, 0.70) 100%);
    padding: 100px 0 100px 176px;

    .l-footer__menus {
      display: flex;
      gap: 68px;
    }

    .l-footer__menu-list {
      display: flex;
      flex-direction: column;
      gap: 20px;

      .l-footer__menu-list-item {
        .l-footer__menu-link {
          text-decoration: none;
        }

        .l-footer__menu-link--text {
          color: var(--color-font-03);
          font-size: 1.6rem;
        }
      }
    }
  }
}

/* PC */
@media (hover: hover) and (pointer: fine) {
  .l-footer {
    .l-footer__main {
      .l-footer__main-container {  
        .l-footer__sns {
          .l-footer__sns-item {
            .l-footer__sns-link {
              transition: all 0.3s linear;
              
              &:hover {
                opacity: 0.5;
              }
            }
          }
        }
      }
    }

    .l-footer__sub {
      .l-footer__menu-list {
        .l-footer__menu-list-item {
          .l-footer__menu-link {
            transition: all 0.3s linear;
            &:hover {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
}

/* TABLET and SP */
@media screen and (max-width: 1024px) {
  .l-footer {
    background-image: none;

    .l-footer__inner {
      grid-template-columns: 1fr;
    }
  
    .l-footer__main {
      align-items: center;
      padding: 50px 30px;
      background: linear-gradient(rgba(24, 168, 195, 0.5), rgba(24, 168, 195, 0.5)), url('../../img/common/footer_bg_sp_01.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  
      .l-footer__main-container {
        display: flex;
        flex-direction: column;
        align-items: center;

        .l-footer__logo {
          margin-bottom: 50px;
          max-width: 200px;
        }

        .l-footer__message {
          margin-bottom: 60px;
          font-size: 2.0rem;
          text-align: center;
        }
  
        .l-footer__sns {
          margin-bottom: 70px;
        }
  
        .l-footer__copyright {
          letter-spacing: 0.8px;
        }
      }
    }
  
    .l-footer__sub {
      padding: 100px 30px;
      background: linear-gradient(270deg, #00404C 0%, rgba(0, 64, 76, 0.70) 100%), url('../../img/common/footer_bg_sp_02.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

  
      .l-footer__menus {
        flex-direction: column;
        gap: 20px;
      }
  
      .l-footer__menu-list {
        .l-footer__menu-list-item {
          .l-footer__menu-link {
          }
  
          .l-footer__menu-link--text {
            font-size: 1.6rem;
          }
        }

        .l-footer__menu-list-item--contact {
          margin-top: 10px;
        }
      }
    }
  }
}