/* index */
:root {
  --section-margin-bottom-sp: 40px;
  --section-margin-bottom-pc: 128px;
}
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  width: 100%;
  .site-header__tagline {
    display: block;
  }
}

.main-index {

  /* main image */
  .section-mainimage {
    position: relative;
    margin-bottom: var(--section-margin-bottom-sp);
    font-weight: 500;
    @media screen and (min-width:768px) {
      margin-bottom: var(--section-margin-bottom-pc);
    }
    /* 白グラデーション */
    /* &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.55) 8%,
        rgba(255, 255, 255, 0.15) 24%,
        rgba(255, 255, 255, 0) 48%
      );
      pointer-events: none;
      z-index: 1;
    } */
    /* 画像 */
    figure {
      img {
        width: 100%;
        aspect-ratio: 1 / 0.8;
        object-fit: cover;
        @media screen and (min-width:768px) {
          aspect-ratio: 1 / 0.5;
        }
      }
    }
    
    .artist-mv-info {
      position: absolute;
      left: 16px;
      bottom: 16px;
      z-index: 10;
      max-width: 88%;
      filter: var(--header-drop-shadow);
      @media screen and (min-width:768px) {
        left: 4%;
        bottom: 8%;
      }
    }
    /* キャッチコピー */
    .artist-catchphrase {
      margin-bottom: 0.2rem;
      /* font-size: clamp(16px, 10.366px + 1.502vw, 32px); */
      font-size: clamp(14px, 7.662px + 1.69vw, 32px);
      font-weight: 500;
    }
    /* 名前・出身地 */
    .artist-name {
      margin-bottom: 0.4rem;
      /* font-size: clamp(11px, 9.239px + 0.469vw, 16px);  */
      font-size: clamp(9px, 6.535px + 0.657vw, 16px);
    }
    /* インタビューボタン */
    .btn-interview {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 24px;
      width: 100%;
      max-width: 160px;
      font-size: clamp(11px, 9.239px + 0.469vw, 16px); 
      border: 2px solid var(--color-black);
      transition: all var(--transition-duration);
      @media screen and (min-width:768px) {
        max-width: 240px;
      }
      &:hover {
        color: var(--color-white);
        background-color: var(--color-black);
        svg {
          transform: translateX(8px);
        }
      }
      svg {
        position: relative;
        margin-left: 8px;
        width: clamp(16px, 13.183px + 0.751vw, 24px);
        height: auto;
        transition: all var(--transition-duration);
      }
    }
    /* KEEP IT LOCAL. */
    .keepit {
      position: absolute;
      top: 50%;
      right: 2%;
      transform: translateY(-50%);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      /* font-size: clamp(10px, 7.239px + 0.469vw, 14px); */
      font-size: clamp(6px, 3.183px + 0.751vw, 14px);
      letter-spacing: 2px;
    }
  }

  /* NEW INTERVIEW */
  .section-new-interview {
    margin-bottom: var(--section-margin-bottom-sp);
    @media screen and (min-width:768px) {
      margin-bottom: var(--section-margin-bottom-pc);
    }
    h2 {
      position: relative;
    }
    article {
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      &::-webkit-scrollbar {
       display: none; 
      }
    }
    .new-interview-list {
      margin: 0 auto;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      justify-content: center;
      align-items: flex-start;
      gap: 16px;
      list-style-type: none;
      @media screen and (max-width:767px) {
        width: max-content;
      }
      li {
        margin: 0 auto;
        padding: 0;
        width: 176px;
        scroll-snap-align: start;
        @media screen and (min-width:768px) {
          width: auto;
        }
        figure {
          margin-bottom: 0.4rem;
        }
        .interview {
          margin-bottom: 0.4rem;
          font-size: clamp(10px, 9.296px + 0.188vw, 12px);
        }
        h3 {
          margin: 0 auto 0.4rem auto;
          font-size: clamp(10px, 8.592px + 0.376vw, 14px);
          font-weight: 500;
        }
        cite {
          font-size: clamp(9px, 7.944px + 0.282vw, 12px);
          font-style: normal;
          text-decoration: none;

        }
      }
    }
    
  }


  /* LOCAL BY AREA */
  .section-area {
    margin-bottom: var(--section-margin-bottom-sp);
    @media screen and (min-width:768px) {
      margin-bottom: var(--section-margin-bottom-pc);
    }
    article {
      margin-bottom: 1.6rem;
    }
    h2 {
      position: relative;
    }
    /* 都道府県 */
    article {
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      &::-webkit-scrollbar {
       display: none; 
      }
    }
    .area-list {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      justify-content: center;
      align-items: center;
      gap: 16px;
      @media screen and (max-width:767px) {
        width: max-content;
      }
      li {
        position: relative;
        margin: 0;
        padding: 0;
        width: 96px;
        scroll-snap-align: start;
        @media screen and (min-width:768px) {
          width: auto;
        }
        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);
        }
      }
    }
  }


  /* LOCAL GUIDE・PICKUP ARTIST・LATEST NEWS */
  .localguide-pickup-news-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    @media screen and (max-width:767px) {
      column-gap: 1.6rem;
      & > :nth-child(3) {
        grid-column: 1 / -1;
      }
    }
    @media screen and (min-width:768px) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 2.4rem;
    }
  }
  /* LOCAL GUIDE */
  .section-localguide {
    @media screen and (max-width:767px) {
      margin-bottom: var(--section-margin-bottom-sp);
    }
    figure {
      margin-bottom: 1.6rem;
      img {
        aspect-ratio: 4 / 2.4;
        object-fit: cover;
      }
    }
    figcaption {
      margin-bottom: 1.6rem;
      /* おすすめスポット */
      h3 {
        margin-bottom: 0.8rem;
        font-size: clamp(16px, 13.183px + 0.751vw, 24px);
        font-weight: 500;
      }
      h4 {
        font-size: 12px;
        font-weight: 300;
      }
    }
  }
  /* PICKUP ARTIST */
  .section-pickup-artist {
    @media screen and (max-width:767px) {
      margin-bottom: var(--section-margin-bottom-sp);
    }
    figure {
      margin-bottom: 1.6rem;
      img {
        aspect-ratio: 4 / 2.4;
        object-fit: cover;
      }
    }
    figcaption {
      margin-bottom: 1.6rem;
      /* アーティスト名・出身地 */
      h3 {
        margin-bottom: 0.8rem;
        font-size: clamp(16px, 13.183px + 0.751vw, 24px);
        span {
          font-size: 12px;
          font-weight: 300;
        }
      }
      /* キャッチコピー */
      h4 {
        font-size: 14px;
        font-weight: 300;
      }
    }
  }
  /* NEWS */
  .section-news {
    article {
      display: grid;
      grid-template-columns: 0.3fr 0.7fr;
      column-gap: 1.6rem;
      justify-content: center;
      align-items: flex-start;
      padding: 0.8rem 0;
      border-bottom: 1px dotted rgba(0, 0, 0, 0.48);
      @media screen and (min-width:768px) {
        padding: 1.6rem 0;
      }
    }
    figure {
      img {
        aspect-ratio: 4 / 2.4;
        object-fit: cover;
        width: 100%;
      }
    }
    figcaption {
      /* 分類 */
      h3 {
        font-size: 10px;
        font-weight: 500;
        width: 100%;
      }
      /* 公開日 */
      time {
        font-size: 10px;
      }
      /* タイトル */
      h4 {
        font-size: 14px;
        font-weight: 400;
        width: 100%;
      }
    }

  }

  /* タイトル内の view all */
  .title-in-view-all {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
  }
}