@charset "UTF-8";
.daily {
  position: relative;
  margin-block-start: clamp(72px, 8.3vw, 120px);
}

.daily__panel {
  position: relative;
  padding-block: 60px 80px;
  z-index: 1;
}

/* 背景を元デザイン通りの大きな角丸と位置で描画 */
.daily__panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: min(50% - 50vw + 5.88vw, -60px); /* 画面左から5.88vwスタートだが、最低でもコンテナ（テキスト）より60pxは左をキープして食い込みを防ぐ */
  right: calc(50% - 50vw); /* 画面右端までブリード */
  background-color: var(--c-surface);
  box-shadow: var(--sh-panel);
  border-start-start-radius: 200px 50%;
  border-end-start-radius: 200px 50%;
  z-index: -1;
}

/* 薄紫基調の装飾用グロー（光彩）オブジェクト */
.daily__glow {
  position: absolute;
  top: 50%;
  right: -50px;
  transform: translateY(-50%);
  width: clamp(300px, 40vw, 500px);
  aspect-ratio: 1;
  background: radial-gradient(circle at center, var(--c-blob-purple) 0%, var(--c-blob-pink) 50%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  z-index: 0; /* 白背景（-1）の上に配置 */
  pointer-events: none;
}

/* 背景をまたぐ巨大なテキスト（CULTURE） */
.daily__bg-text {
  position: absolute;
  bottom: -8vw; /* 次のセクション（next-step）との境界付近に配置 */
  right: -2vw;
  font-family: var(--f-gothic);
  font-size: clamp(100px, 15vw, 240px); /* デザイン通りの巨大な15vw */
  font-weight: 300;
  color: var(--c-text);
  opacity: 0.03; /* 極めて薄い色（透かし） */
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: -3; /* 最背面に配置 */
  user-select: none;
}

.daily__inner {
  position: relative;
  z-index: 1; /* グロー（0）の上に配置 */
  display: flex;
  justify-content: center; /* テキストと写真の一塊をコンテナの中央に配置する */
  align-items: center;
  gap: clamp(40px, 6vw, 80px); /* 画面サイズに合わせて40px〜80pxの心地よい余白をキープ */
}

.daily__text {
  flex: 0 1 auto; /* テキストの自然な幅（最大32em）を尊重し、無駄に広がらないようにする */
}

.daily__body {
  margin-block-end: 20px;
  max-width: 32em;
  color: var(--c-muted);
  font-size: var(--fs-body-sm);
  line-height: 1.9;
}

.daily__cta {
  margin-block-start: 12px;
}

.daily__figure {
  flex: 0 1 400px; /* 最大400pxとし、画面が狭い場合は縮小を許可する */
  width: 100%;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1; /* 幅に合わせて高さが決まる（最大400x400になる） */
  border-radius: var(--r-image);
  background-color: var(--c-placeholder);
}

.daily__figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .daily__panel {
    padding: 40px 24px;
  }
  .daily__inner {
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .daily__panel {
    padding: 40px 24px;
  }
  .daily__panel::before {
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    border-radius: 0;
  }
  .daily__inner {
    flex-direction: column;
    gap: 32px;
  }
  .daily__figure {
    width: 100%;
    flex-basis: auto; /* PC版の flex-basis: 400px が縦並び時に高さとして適用されてしまうのを解除 */
    aspect-ratio: 16/9; /* 画像を絶対配置にしたため、この指定だけで確実に16:9になります */
  }
  /* SP時はセクション全体が右からではなく下からスライドイン（ふわっと現れる）ように上書き */
  .daily.fade-right:not(.is-visible) {
    transform: translateY(40px);
  }
}

/*# sourceMappingURL=daily.css.map */