/* ============================================================
  CSS カスタムプロパティ — top-s07 セクション固有トークン
  ============================================================ */
:root {
  /* --- Colors --- */
  --top-s07-color-bg:               #C9A98B;
  --top-s07-color-subtitle:         #5C3D2E;
  --top-s07-color-headline:         #FDF2F8;
  --top-s07-color-body:             #5C3D2E;
  --top-s07-color-cta-bg-default:   transparent;
  --top-s07-color-cta-border:       #FDF2F8;
  --top-s07-color-cta-text-default: #FDF2F8;
  --top-s07-color-cta-bg-hover:     #FDF2F8;
  --top-s07-color-cta-text-hover:   #5C3D2E;
  --top-s07-color-insta-link:       #5C3D2E;
  --top-s07-color-insta-link-hover: #FDF2F8;
  --top-s07-color-divider:          rgba(249, 168, 212, 0.40);
  --top-s07-color-feed-overlay:     rgba(131, 24, 67, 0.40);
  --top-s07-color-feed-label:       #FDF2F8;
  --top-s07-color-focus:            #8B5CF6;

  /* --- Typography — font sizes --- */
  --top-s07-fs-subtitle:   clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
  --top-s07-fs-headline:   clamp(1.75rem, 1.5rem + 1.25vw, 3rem);
  --top-s07-fs-body:       clamp(0.9375rem, 1.3vw, 1rem);
  --top-s07-fs-cta:        clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
  --top-s07-fs-insta-link: clamp(0.875rem, 1.1vw, 0.9375rem);
  --top-s07-fs-feed-label: 1rem;

  /* --- Typography — line-height --- */
  --top-s07-lh-subtitle:   1.4;
  --top-s07-lh-headline:   1.25;
  --top-s07-lh-body:       1.8;
  --top-s07-lh-cta:        1.4;
  --top-s07-lh-insta-link: 1.4;
  --top-s07-lh-feed-label: 1.4;

  /* --- Typography — letter-spacing --- */
  --top-s07-ls-subtitle:   0.18em;
  --top-s07-ls-headline:   0.02em;
  --top-s07-ls-body:       0.04em;
  --top-s07-ls-cta:        0.1em;
  --top-s07-ls-insta-link: 0.1em;
  --top-s07-ls-feed-label: 0.1em;

  /* --- Spacing（モバイル基準値） --- */
  --top-s07-pt:                  80px;
  --top-s07-pb:                  64px;
  --top-s07-gap-subtitle-headline: 16px;
  --top-s07-gap-headline-body:   48px;
  --top-s07-gap-body-cta:        64px;
  --top-s07-gap-cta-insta:       20px;
  --top-s07-gap-insta-divider:   48px;
  --top-s07-gap-divider-grid:    32px;
  --top-s07-feed-gap:            6px;

  /* --- Hover transition --- */
  --top-s07-hover-duration-cta:     500ms;
  --top-s07-hover-easing-cta:       ease;
  --top-s07-hover-duration-insta:   300ms;
  --top-s07-hover-easing-insta:     ease;
  --top-s07-hover-duration-overlay: 300ms;
  --top-s07-hover-duration-label:   400ms;
  --top-s07-hover-delay-label:      50ms;
  --top-s07-hover-easing-feed:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ============================================================
  Section — 全幅ダーク背景
  モバイル基準値をベースに定義し、PC幅で上書き
  ============================================================ */
.top-s07 {
  background-color:    var(--top-s07-color-bg);
  padding-block-start: var(--top-s07-pt);
  padding-block-end:   var(--top-s07-pb);
}

@media (width >= 768px) {
  .top-s07 {
    --top-s07-pt: 128px;
    --top-s07-pb: 96px;
  }
}


/* ============================================================
  Inner wrapper — max-width & gutters
  モバイル: 24px / PC: 64px
  ============================================================ */
.top-s07__inner {
  padding-inline: var(--padding--mobile);
}

@media (width >= 768px) {
  .top-s07__inner {
    padding-inline: var(--padding--desktop);
  }
}


/* ============================================================
  Content zone — テキスト・ボタン・リンクの縦積み
  ============================================================ */
.top-s07__content-zone {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}


/* ============================================================
  English subtitle
  ============================================================ */
.top-s07__subtitle {
  font-family:      var(--font--display);
  font-size:        var(--top-s07-fs-subtitle);
  font-weight:      400;
  font-style:       italic;
  line-height:      var(--top-s07-lh-subtitle);
  letter-spacing:   var(--top-s07-ls-subtitle);
  color:            var(--top-s07-color-subtitle);
  text-align:       center;
  margin-block-end: var(--top-s07-gap-subtitle-headline);
}


/* ============================================================
  Japanese main headline
  ============================================================ */
.top-s07__headline {
  font-family:      var(--font--heading);
  font-size:        var(--top-s07-fs-headline);
  font-weight:      700;
  font-style:       normal;
  line-height:      var(--top-s07-lh-headline);
  letter-spacing:   var(--top-s07-ls-headline);
  color:            var(--top-s07-color-headline);
  text-align:       center;
  max-inline-size:  680px;
  margin-inline:    auto;
  margin-block-end: var(--top-s07-gap-headline-body);
}


/* ============================================================
  Supplementary body copy
  ============================================================ */
.top-s07__body {
  font-family:      var(--font--body);
  font-size:        var(--top-s07-fs-body);
  font-weight:      300;
  font-style:       normal;
  line-height:      var(--top-s07-lh-body);
  letter-spacing:   var(--top-s07-ls-body);
  color:            var(--top-s07-color-body);
  text-align:       center;
  max-inline-size:  540px;
  margin-inline:    auto;
  margin-block-end: var(--top-s07-gap-body-cta);
}


/* ============================================================
  CTA button
  モバイル: padding-inline 32px / PC: 48px
  gap to Instagram link: モバイル 20px / PC 24px
  ============================================================ */
.top-s07__cta-button {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  padding-block:    16px;
  padding-inline:   32px;
  min-block-size:   56px;
  min-inline-size:  44px;
  border:           1.5px solid var(--top-s07-color-cta-border);
  background-color: var(--top-s07-color-cta-bg-default);
  color:            var(--top-s07-color-cta-text-default);
  font-family:      var(--font--body);
  font-size:        var(--top-s07-fs-cta);
  font-weight:      400;
  font-style:       normal;
  line-height:      var(--top-s07-lh-cta);
  letter-spacing:   var(--top-s07-ls-cta);
  text-decoration:  none;
  cursor:           pointer;
  transition:
    background-color var(--top-s07-hover-duration-cta) var(--top-s07-hover-easing-cta),
    color            var(--top-s07-hover-duration-cta) var(--top-s07-hover-easing-cta);
  margin-block-end: var(--top-s07-gap-cta-insta);
}

@media (width >= 768px) {
  .top-s07__cta-button {
    padding-inline:   48px;
    --top-s07-gap-cta-insta: 24px;
  }
}

.top-s07__cta-button:hover {
  background-color: var(--top-s07-color-cta-bg-hover);
  color:            var(--top-s07-color-cta-text-hover);
}

.top-s07__cta-button:focus-visible {
  outline:        2px solid var(--top-s07-color-focus);
  outline-offset: 3px;
}


/* ============================================================
  Instagram text link
  gap to divider: モバイル 48px / PC 96px
  ============================================================ */
.top-s07__insta-link {
  display:          inline-flex;
  align-items:      center;
  gap:              0.3em;
  padding-block:    12px;
  min-block-size:   44px;
  font-family:      var(--font--body);
  font-size:        var(--top-s07-fs-insta-link);
  font-weight:      300;
  font-style:       normal;
  line-height:      var(--top-s07-lh-insta-link);
  letter-spacing:   var(--top-s07-ls-insta-link);
  color:            var(--top-s07-color-insta-link);
  text-decoration:  none;
  transition:
    color var(--top-s07-hover-duration-insta) var(--top-s07-hover-easing-insta);
  margin-block-end: var(--top-s07-gap-insta-divider);
}

@media (width >= 768px) {
  .top-s07__insta-link {
    --top-s07-gap-insta-divider: 96px;
  }
}

.top-s07__insta-link:hover {
  color: var(--top-s07-color-insta-link-hover);
}

.top-s07__insta-link:hover .top-s07__insta-arrow {
  transform: translateX(4px);
}

.top-s07__insta-link:focus-visible {
  outline:        2px solid var(--top-s07-color-focus);
  outline-offset: 3px;
}

.top-s07__insta-arrow {
  display:    inline-block;
  transition:
    transform var(--top-s07-hover-duration-insta) var(--top-s07-hover-easing-insta);
}


/* ============================================================
  Divider
  gap to feed: モバイル 32px / PC 48px
  ============================================================ */
.top-s07__divider {
  inline-size:        100%;
  border:             none;
  border-block-start: 1px solid var(--top-s07-color-divider);
  margin-block:       0;
  margin-block-end:   var(--top-s07-gap-divider-grid);
}

@media (width >= 768px) {
  .top-s07__divider {
    --top-s07-gap-divider-grid: 48px;
  }
}


/* ============================================================
  Feed grid
  モバイル: 3列 / PC: 6列
  gap: モバイル 6px / PC 8px
  ============================================================ */
.top-s07__feed-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--top-s07-feed-gap);
  inline-size:           100%;
  position:              relative;
}

@media (width >= 768px) {
  .top-s07__feed-grid {
    grid-template-columns: repeat(6, 1fr);
    --top-s07-feed-gap: 8px;
  }
}

/* フッター側グラデーション（下からフェードする装飾） */
.top-s07__feed-grid::after {
  content:            '';
  position:           absolute;
  inset-inline-start: 0;
  inset-inline-end:   0;
  inset-block-end:    0;
  block-size:         60px;
  background:         linear-gradient(
    to bottom,
    rgba(253, 242, 248, 0)   0%,
    rgba(253, 242, 248, 0.3) 100%
  );
  pointer-events: none;
}


/* ============================================================
  Feed cell
  モバイル: 全セル 1/1 / PC: 最左セルのみ 4/5
  ============================================================ */
.top-s07__feed-cell {
  display:      block;
  position:     relative;
  overflow:     hidden;
  aspect-ratio: 1 / 1;
}

.top-s07__feed-cell:focus-visible {
  outline:        2px solid var(--top-s07-color-focus);
  outline-offset: 3px;
}


/* ============================================================
  Feed figure & image
  ============================================================ */
.top-s07__feed-figure {
  inline-size: 100%;
  block-size:  100%;
  margin:      0;
  position:    relative;
}

.top-s07__feed-figure picture,
.top-s07__feed-figure img {
  display:     block;
  inline-size: 100%;
  block-size:  100%;
  object-fit:  cover;
}


/* ============================================================
  prefers-reduced-motion
  このセクションスコープのみに限定して適用
  ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .top-s07 *,
  .top-s07 *::before,
  .top-s07 *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    transition-delay:          0ms    !important;
  }
}