/* タレント詳細 */

body.talent-detail-page {
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    radial-gradient(circle at 12% 12%, rgba(141, 128, 255, 0.22), transparent 30rem),
    radial-gradient(circle at 88% 76%, rgba(90, 215, 205, 0.2), transparent 28rem),
    #f6f7ff;
}

.talent-detail {
  --talent-ink: #20213d;
  --talent-muted: #62647b;
  --talent-line: rgba(71, 75, 135, 0.16);
  --talent-accent: #7065eb;
  --talent-accent-soft: #e9e7ff;
  position: relative;
  isolation: isolate;
  max-width: 1180px;
  min-height: calc(100vh - 80px);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 92px) 24px 80px;
  overflow: hidden;
  color: var(--talent-ink);
}

.talent-detail::before,
.talent-detail::after {
  position: fixed;
  z-index: -1;
  width: min(42vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  filter: blur(12px);
  pointer-events: none;
}

.talent-detail::before {
  top: 6rem;
  left: -16rem;
  background: radial-gradient(circle, rgba(135, 120, 255, 0.26), rgba(135, 120, 255, 0));
}

.talent-detail::after {
  right: -14rem;
  bottom: 4rem;
  background: radial-gradient(circle, rgba(72, 203, 205, 0.22), rgba(72, 203, 205, 0));
}

.talent-detail__section {
  border: 1px solid var(--talent-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 50px rgba(46, 45, 94, 0.08);
  backdrop-filter: blur(16px);
}

.talent-top {
  display: flex;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 4vw, 48px);
  animation: talent-reveal 700ms cubic-bezier(.16, 1, .3, 1) both;
}

.talent-image-area,
.talent-about {
  flex: 1;
  min-width: 0;
}

.talent-detail__visual {
  position: relative;
  display: grid;
  place-items: center;
}

.talent-detail__image-label {
  position: absolute;
  z-index: 2;
  top: -35px;
  left: 35px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(32, 33, 61, 0.68);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.talent-detail__visual::before {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  /* border-radius: 38% 62% 54% 46% / 48% 41% 59% 52%;
  background: linear-gradient(135deg, #b8b2ff, #87e4dc); */
  content: "";
  filter: blur(2px);
  animation: talent-blob 8s ease-in-out infinite alternate;
}

.talent-main-image {
  display: block;
  width: min(100%, 445px);
  max-height: 760px;
  margin: 0 auto;
  border-radius: 18px;
  object-fit: scale-down; 
  box-shadow: 0 24px 45px rgba(49, 44, 116, 0.22);
  /* animation: talent-float 5s ease-in-out 700ms infinite; */
}

.talent-logo {
  display: block;
  width: 100%;
  max-height: 160px;
  margin: 0;
  object-fit: contain;
  object-position: center;
  /* animation: talent-reveal 700ms 160ms cubic-bezier(.16, 1, .3, 1) both; */
}

.talent-logo-area {
  position: relative;
  width: 100%;
  margin-bottom: 22px;
}

.talent-logo__image-label {
  position: absolute;
  z-index: 2;
  top: 14px;
  /* right: 14px; */
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(32, 33, 61, 0.68);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.about-box {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 18px;
  background: linear-gradient(135deg, #6258d9, #786de9 56%, #6e9fec);
  color: #fff;
  box-shadow: 0 16px 32px rgba(74, 65, 164, 0.22);
  animation: talent-reveal 700ms 240ms cubic-bezier(.16, 1, .3, 1) both;
}



.talent-detail__eyebrow,
.talent-detail__heading p {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.about-box .talent-detail__eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.talent-name {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.talent-description {
  margin: 0;
  line-height: 1.9;
  white-space: pre-line;
}

.talent-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(42px, 6vw, 72px);
}

.talent-profile,
.talent-video {
  padding: clamp(24px, 4vw, 40px);
  animation: talent-reveal 700ms 320ms cubic-bezier(.16, 1, .3, 1) both;
}

.talent-video {
  animation-delay: 420ms;
}

.talent-detail__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--talent-line);
}

.talent-detail__heading p,
.talent-sns > .talent-detail__eyebrow {
  color: var(--talent-accent);
}

.talent-detail__heading h2,
.talent-sns h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: 0.1em;
}

.profile-item {
  display: grid;
  grid-template-columns: minmax(7em, 32%) 1fr;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--talent-line);
}

.profile-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.label {
  color: var(--talent-ink);
  font-weight: 700;
}

.value {
  color: var(--talent-muted);
  overflow-wrap: anywhere;
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  border-radius: 14px;
  background: #17172b;
  box-shadow: 0 10px 24px rgba(35, 34, 76, 0.16);
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.talent-sns {
  text-align: center;
  animation: talent-reveal 700ms 540ms cubic-bezier(.16, 1, .3, 1) both;
}

.sns-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.sns {
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(37, 35, 72, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.youtube { background: #ff3434; }
.twitter { background: #171720; }
.twitch { background: #9146ff; }

.sns:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 13px 20px rgba(37, 35, 72, 0.22);
}

@keyframes talent-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes talent-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes talent-blob {
  from { transform: rotate(-8deg) scale(0.95); }
  to { transform: rotate(8deg) scale(1.06); }
}

@media (max-width: 768px) {
  .talent-top,
  .talent-bottom {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .talent-top {
    align-items: stretch;
  }

  .talent-logo {
    margin-right: auto;
    margin-left: auto;
  }

  .talent-detail__heading {
    margin-bottom: 18px;
  }
}

@media (max-width: 480px) {
  .talent-detail {
    padding-right: 16px;
    padding-left: 16px;
  }

  .talent-top,
  .talent-profile,
  .talent-video {
    padding: 20px;
    border-radius: 18px;
  }

  .profile-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .talent-detail *,
  .talent-detail::before,
  .talent-detail::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* 全体 */

.news-index{
max-width:1200px;
margin:auto;
padding:60px 20px;
}

/* タイトル */

.page-title{
text-align:center;
font-size:36px;
margin-bottom:50px;
}

/* グリッド（3列） */

.news-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* ページネーション */

.pagination{
text-align:center;
margin-top:50px;
}

.pagination a,
.pagination span{
display:inline-block;
margin:0 5px;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
color:#6a5acd;
border:1px solid #ddd;
}

.pagination .current{
background:#6a5acd;
color:#fff;
border:none;
}

.pagination a:hover{
background:#eee;
}

@media(max-width:900px){
  .news-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .news-grid{
    grid-template-columns:1fr;
  }
}