@charset "UTF-8";

/* ============================================================
   1. 共通設定 (全デバイス・PCベース)
   ============================================================ */

/* Safari対策の本体：
   - grid-auto-rows: 1fr をやめる（これが余白の主因になりやすい）
   - align-items: stretch をやめる（行が伸びるのを抑制）
*/
.epilogueInfo__grid {
  display: grid;
  align-items: start;
  grid-auto-rows: auto;
  grid-template-rows: auto 1fr; /* 画像行はauto / テキスト行は残り */
}

.epilogueInfo__grid > li {
  display: flex;
  flex-direction: column;
}

.epilogueInfo__img {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  overflow: hidden;
  min-height: 0; /* Safariの縮み抑制対策 */
  line-height: 0; /* 画像が入った時の保険 */
}

/* 画像の下に隙間ができないための必須設定 */
.epilogueInfo__img img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.epilogueInfo__txt {
  width: 100%;
}

/* YouTubeセクション：高さ固定を解除して余白を消す */
.epilogueInfo__grid--youtube {
  grid-auto-rows: auto;
  align-items: start;
  grid-template-rows: auto 1fr;
}

.epilogueInfo__grid--youtube .epilogueInfo__img {
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
}

/* ============================================================
   2. タブレット・中画面 (min-width: 640px)
   ============================================================ */
@media only screen and (min-width: 640px) and (max-width: 1300px) {
  .epilogueInfo__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .epilogueInfo__f-dd span {
    display: inline-block;
    padding-right: 1em;
    width: 100%;
  }

  /* 1024px〜1300px */
  @media (min-width: 1024px) {
    .epilogueInfo__grid2 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .blandList { grid-template-columns: repeat(6, 1fr); }

    /* ここがSafariで崩れの要因になることがあるので、余白が出る場合は
       max-height: 32vw を消す（またはmin-height:0と合わせて運用）
    */
    .epilogueInfo__grid > li { max-height: 32vw; overflow: hidden; }
  }

  /* 640px〜1024px */
  @media (max-width: 1024px) {
    .epilogueInfo__grid2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .blandList { grid-template-columns: repeat(4, 1fr); }
  }
}

/* ============================================================
   3. スマートフォン (max-width: 640px)
   ============================================================ */
@media only screen and (max-width: 640px) {
  /* Layout */
  .epilogue { padding: 100px 0; margin: 0 5vw; }
  .brand { padding: 100px 0; margin: 0 7.5vw; }
  .p-shoplist, .p-youtube { padding: calc(100px + 7.5vw) 7.5vw; }

  /* Hero Section */
  .heroImage {
    background-image: url(../img/top-sp.jpg);
    height: 100svh; /* Safariツールバー考慮 */
    position: relative;
  }
  .heroImage::before {
    content: ""; display: block; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.45) 100%);
    animation: backgroundReveal 5s ease-out 0.75s forwards;
    pointer-events: none;
  }
  .heroImage::after {
    background-image: url(../img/top-sp.jpg);
    filter: brightness(1.12);
  }
  .heroImage__title { width: calc(100% - 15vw); }
  .heroImage__title.shrink { width: 50px; position: fixed; top: 20px; left: 20px; }

  /* Typography */
  .epilogueTtl { font-size: 10vw; padding: 0 0 0.2em; }
  .epilogueTtlWarp { height: auto; text-align: left; margin: 0 auto; }
  .epilogueTtlWarp--mt { height: auto; text-align: left; margin: 7.5em auto 0; }
  .epilogueTxt { text-align: justify; word-break: break-all; letter-spacing: 0.05em; padding: 0 0 25px; }
  .epilogueTxtSub { padding: 0 0 50px; }
  .fabricTxt { text-align: justify; word-break: break-all; padding: 0 0 50px; }

  /* Grid System (1列) */
  .epilogueInfo__grid, .epilogueInfo__grid-fff, .epilogueInfo__grid2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .blandList { grid-template-columns: repeat(2, 1fr); }

  /* Info Contents */
  .epilogueInfo__txt { padding:  30px 15px; }
  .epilogueInfo__f-dl { margin: 1em 0; height: auto; min-height: 7.5em; }
  .epilogueInfo__grid--youtube .epilogueInfo__f-dl { height: auto; min-height: 4em; }
  .epilogueInfo__f-dd span { display: inline-block; width: 100%; }
  
  .epilogueImg { height: 70vw; margin: 0 auto 50px; }
  .featureImg01 { background-image: url(../img/bg-sunsurf-01-sp.jpg); }

  /* Styling Items */
  .itemStyling__grid { grid-template-columns: 1fr; gap: 5px; height: 800vw; }
  .itemTxtWarp { margin: 100px auto 0; padding: 0 7.5vw; }
  .itemTxt br { display: none; }
  .itemStyling__imgAll { height: 100vh; }
  .itemStyling__imgPick { height: 80vh; }

  /* Navigation */
  #g-nav { width: 100%; background: rgba(255, 255, 255, 0.9); }
  #g-nav li { width: 85vw; margin: 0 auto; }
  .g-nav-list-main { font-family: "aviano", serif; font-size: clamp(20px, 6.5vw, 32px); text-align: center; }
  .g-nav-list-sub { font-size: 0.97rem; text-align: center; margin-top: .3em; }

  /* UI Parts */
  .openbtn { top: 20px; right: 7.5vw; }
  .pagetop { right: 20px; bottom: 20px; }
  .readmore-content { height: 150px; }
  .readmore button { left: 50%; }
}


/* ============================================================
   FIX: YouTubeカードがSPで消える問題（確実に表示）
   ============================================================ */

/* YouTubeカードは「縦積み」固定にする（SP/PCどっちも安定） */
.epilogueInfo__grid.epilogueInfo__grid--youtube {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto; /* ← 1fr をやめる（潰れ防止） */
}

/* 画像ブロックの高さを確実に作る（Safariでも潰れない） */
.epilogueInfo__grid.epilogueInfo__grid--youtube .epilogueInfo__img {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* 16:9 の箱を padding-top で作る（aspect-ratio不安定対策） */
.epilogueInfo__grid.epilogueInfo__grid--youtube .epilogueInfo__img::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

/* img を箱いっぱいにフィット */
.epilogueInfo__grid.epilogueInfo__grid--youtube .epilogueInfo__img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストも通常表示（1fr計算に巻き込まれない） */
.epilogueInfo__grid.epilogueInfo__grid--youtube .epilogueInfo__txt {
  width: 100%;
}