/* ---- Intro Screen ---- */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .8s ease;
}

.intro-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 動画を画面いっぱいではなく余白を持たせて縮小表示 */
.intro-screen__video {
  width: 86%;
  height: 86%;
  max-width: 1400px;
  object-fit: contain; /* coverだと切れるのでcontainに変更 */
}

/* スキップボタン */
.intro-screen__skip {
  position: absolute;
  bottom: 40px;
  right: 40px;
  font-family: 'Cinzel', serif;
  font-size: var(--fs-base);
  letter-spacing: .25em;
  padding: 12px 28px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  cursor: pointer;
  transition: border-color .25s, color .25s;
  z-index: 1;
}

.intro-screen__skip:hover {
  border-color: var(--gold);
  color: var(--gold);
}

@media (max-width: 768px) {
  .intro-screen { display: none; }
}




/* ---- Hero ---- */
    #hero { position: relative; overflow: hidden; }
    #hero .bg { position: relative; max-width: 1920px; margin: 0 auto; text-align: center; }
    .page-top-intro { position: absolute; top: 10%; left: clamp(20px, calc(20vw - 144px), 240px); max-width: 1000px; text-align: left; z-index: 2; }
    /*#hero .page-hero__content { position: absolute; top: 15.8%; left: clamp(20px, calc(20vw - 144px), 240px);max-width: 850px; text-align: left; }*/
    #hero .category-title { margin-bottom: 15px; font-size: clamp(38px, 6.2vw, 90px); line-height: 1.2; }
    .hero-diamonds { position: absolute; right: -5%; top: 0%; }
    .hero-diamonds-2 { position: absolute; left: 0; top: 50%; }
    .hero-diamonds-2 img { width: 28.8vw;  }
    .hero-diamonds-3 {position: absolute; right: 0; bottom: 0; }
    .hero-diamonds-3 img { max-width: 31.7vw; }
    #hero .page-top-intro .section-heading { text-align: left; }
    #hero .page-top-intro .section-heading::after { content: none;}

    .promise  { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); text-align: center; }
    .promise dt { margin-bottom: 40px; text-align: center; }
    .promise dd p { line-height: 2.4; font-size: var(--fs-md); }
    .promise dt img { margin: 0 auto;}

    #products { margin-top: 150px; text-align: center; }
    #loose { margin-bottom: 20px; }
    .category { position: relative; }
    .category .detail { position: absolute; z-index: 2; }
    .category .detail h2 { margin-bottom: 70px; }
    .category .detail h3,
    #news h3 { font-size: var(--fs-xl); }

    #loose   .detail { left: 12.7777%; top: 12%; }
    #jewelry .detail { right: 19.5%; top: 24%; }
    #lab-grown { margin-top: 50px; margin-bottom: 150px;}
    #lab-grown .detail { left: 8%; top: 2vw; text-align: center; }
    #company { margin-bottom: 175px; }
    #company .detail { right: 5%; top: 4vw; text-align: center; }
    .category .detail p { margin-bottom: 30px; font-size: var(--fs-md); text-align: center; }
    #lab-grown .detail h2 { text-align: left; }

    #lab-grown .category-title,
    #company .category-title { margin-top: 0; }
    #news h3 { text-align: left; }
    #news h3::after{ content: none;}


    /* ---- Products ---- */


    /* ---- News ---- */
    #news { width: 1180px; margin: 0 auto; }
    #news .category-title { margin-top: 20px; }
    .news-inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
    .news-left .section-heading { text-align: left; margin-bottom: 8px; }
    .news-left .section-subtitle { text-align: left; }
    .news-left p { margin-top: 20px; }
    .news-item { /*display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: start; */padding: 24px 0; border-bottom: 1px solid var(--border); }
    .news-item:first-child { border-top: 1px solid var(--border); }
    .news-meta { /*display: flex; flex-direction: column; gap: 6px;*/  }
    .news-date { font-family: 'Cinzel', serif; font-size: var(--fs-md); color: #ccc; }
    .news-title { font-size: var(--fs-md); color: var(--gray-lt); line-height: 1.9; transition: color .2s; cursor: pointer; }
    .news-item:hover .news-title { color: var(--white); }

    .btn-learn {
      margin-top: 30px;
      display: inline-block;
      padding: 12px 40px;
      border: 1px solid rgba(255,255,255,.3);
      color: #fff;
      transition: border-color .25s, color .25s;
    }
    .btn-learn:hover { border-color: var(--gold); color: var(--gold); }

    /* ---- Responsive ---- */
    @media (max-width: 1024px) {
      .news-inner { grid-template-columns: 1fr; gap: 40px; }
    }

    @media (max-width: 768px) {
      #hero { position: relative; overflow: hidden; height: 220vw; padding-top: 100px; }
      #hero .bg { padding: 45vw 5vw 0 5vw; }
      .page-top-intro { top: 12vw; left: clamp(4vw, calc(20vw - 144px), 240px); text-align: left; z-index: 2; }

      
      #hero .category-title { margin-bottom: 15px; font-size: clamp(7.8vw, 6.2vw, 90px); line-height: 1.4; letter-spacing: normal;}

      #hero .page-top-intro .section-heading { font-size: var(--fs-lg); letter-spacing: normal;}

      .hero-diamonds { position: absolute; right: -7vw; top: 20.5vw; width: 100%; text-align: right; }
      .hero-diamonds img { width: 85%; margin: 0 0 0 auto; }
      .hero-diamonds-2 { position: absolute; left: 0; top: 70vw; }
      .hero-diamonds-2 img { width: 35vw;  }
      .hero-diamonds-3 { position: absolute; right: -5vw; top: 122vw; }
      .hero-diamonds-3 img { max-width: 29.7vw; }

      .promise  { top: 65vw; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; padding: 0 5.5vw; }
      .promise dt { margin-bottom: 40px; text-align: center; padding: 0 30vw; }
      .promise dd p { line-height: 2.4; font-size: var(--fs-md); width: 100%; }
      .promise dt img { margin: 0 auto;}

      .category .section-heading + p { padding: 0 5vw; }

      .category .detail { position: relative; }
      #loose.category,
      #jewelry.category,
      #lab-grown.category,
      #company.category {
        display: flex;
        flex-direction: column-reverse;
      }


    .category .detail h2 { margin: 30px 0 25px 0; }
    .category .detail p { margin-bottom: 0; font-size: var(--fs-md); text-align: center; }

    #products { margin-top: 50px; text-align: center; }
    #products .category-title { margin-bottom: 20px;}
    #loose { margin-bottom: 0px; }
    #lab-grown { margin: 80px 0 0 0;}
    #lab-grown .detail h2 { text-align: center!important; }
    #lab-grown .detail h2 { margin-top: 50px; }
    #company { margin: 50px 0 0 0; padding: 0 0 0 0; border-top: 1px solid #222;} 
    #company picture { display: none; }

    #lab-grown .category-title,
    #company .category-title { margin-top: 50px; }

    .detail { top: 0!important; left: 0!important; }
    #news { margin-top: 50px; padding: 50px 0 0 0; border-top: 1px solid #222;} 
    #news h2 { margin: 0 0 25px 0; text-align: center; }
    #news h3 { text-align: center; }
    #news h3::after { position: absolute; content: ""; background-color: #999999; bottom: -15px; left: 50%; width: 75px; height: 1px; transform: translateX(-50%);}
    .news-list { margin-top: 30px; padding: 0 5vw; }
    .news-inner { gap: 0;}
    .news-item { grid-template-columns: 1fr; gap: 8px; }
    .btn-learn { margin-top: 25px; }
}

@media (max-width: 375px){
      #hero { position: relative; overflow: hidden; height: 300vw; padding-top: 100px; }
}