@charset "UTF-8";

/**
 * area（都道府県） list
 */
.main-area {

  /* LOCAL BY AREA */
  .section-area {
    /* 都道府県 */
    .area-list {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;
      align-items: center;
      gap: 0.4rem;
      @media screen and (min-width:768px) {
        gap: 1.6rem;
        grid-template-columns: repeat(6, 1fr);
        gap: 1.6rem;
      }
      li {
        position: relative;
        margin: 0;
        padding: 0;
        a {
          display: block;
        }
      }
      /* イメージ画像 */
      .area-image-wrap {
        position: relative;
        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.24);
          transition: all var(--transition-duration);
        }
      }
      a {
        &:hover {
          .area-image-wrap {
            &::after {
              display: none;
            }
          }
        }
      }
      /* 都道府県名 */
      .prefecture-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--color-white);
        text-align: center;
        filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.48));
        .pre-name {
          /* font-family: "Caveat", cursive; */
          font-family: "Bad Script", cursive;
          /* font-size: clamp(11px, 0.789px + 2.723vw, 40px); */
          font-size: clamp(11px, 6.423px + 1.221vw, 24px);
        }
        .pre-count {
          font-size: clamp(9px, 7.944px + 0.282vw, 12px);
        }
      }
    }
  }

}