@charset "UTF-8";

/* =========================================
       ベースリセット
       ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =========================================
       全体ラッパー (.wrapper) ※一覧のデザインを引き継ぎ
       ========================================= */
@keyframes bgPan {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.wrapper {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  color: #333333;

  background: linear-gradient(120deg, #ffffff, #e6f7ff, #fff0f5, #ffffff, #f0fff4, #fffbeb);
  background-size: 400% 400%;
  animation: bgPan 15s ease infinite;

  min-height: 100vh;
  overflow: hidden;
  padding: 6rem 4rem;
  /* 60px 40px */
  position: relative;
}

/* 背景のカラフルな装飾（3つのblobを動かす） */
@keyframes blobMove1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(10rem, 5rem) scale(1.1);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes blobMove2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-10rem, 10rem) scale(1.2);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes blobMove3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(5rem, -10rem) scale(1.15);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

.wrapper-bg-blob1,
.wrapper-bg-blob2,
.wrapper-bg-blob3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}

.wrapper-bg-blob1 {
  top: -10%;
  left: -10%;
  width: 50rem;
  height: 50rem;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  animation: blobMove1 15s ease-in-out infinite;
}

.wrapper-bg-blob2 {
  bottom: -10%;
  right: -10%;
  width: 60rem;
  height: 60rem;
  background: linear-gradient(135deg, #8fd3f4 0%, #84fab0 100%);
  animation: blobMove2 18s ease-in-out infinite;
}

.wrapper-bg-blob3 {
  top: 30%;
  left: 40%;
  width: 45rem;
  height: 45rem;
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  animation: blobMove3 22s ease-in-out infinite;
}

/* =========================================
       背景のカラフルなシェイプ
       ========================================= */
.bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.shape {
  position: absolute;
  opacity: 0.7;
  animation: floatShape linear infinite;
}

.shape-circle {
  border-radius: 50%;
}

.shape-square {
  border-radius: 25%;
}

.shape-triangle {
  width: 0;
  height: 0;
  border-left: 4.5rem solid transparent;
  border-right: 4.5rem solid transparent;
  border-bottom: 7.8rem solid;
  background: transparent !important;
}

@keyframes floatShape {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  33% {
    transform: translate(3rem, -5rem) rotate(120deg) scale(1.1);
  }

  66% {
    transform: translate(-3rem, 5rem) rotate(240deg) scale(0.9);
  }

  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

@keyframes floatShapeAlt {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  33% {
    transform: translate(-5rem, -3rem) rotate(-120deg) scale(0.8);
  }

  66% {
    transform: translate(4rem, 4rem) rotate(-240deg) scale(1.2);
  }

  100% {
    transform: translate(0, 0) rotate(-360deg) scale(1);
  }
}

.shape1 {
  top: 10%;
  left: 8%;
  width: 9rem;
  height: 9rem;
  background: #FF9A9E;
  animation: floatShape 20s linear infinite;
}

.shape2 {
  top: 25%;
  right: 12%;
  border-bottom-color: #F6D365;
  animation: floatShapeAlt 25s linear infinite;
}

.shape3 {
  top: 60%;
  left: 5%;
  width: 12rem;
  height: 12rem;
  background: #8FD3F4;
  animation: floatShape 22s linear infinite;
  opacity: 0.5;
}

.shape4 {
  top: 75%;
  right: 8%;
  width: 9rem;
  height: 9rem;
  background: #A18CD1;
  animation: floatShapeAlt 12s linear infinite;
}

.shape5 {
  top: 40%;
  left: 50%;
  width: 6.5rem;
  height: 6.5rem;
  background: #FF8C00;
  animation: floatShape 15s linear infinite reverse;
}

.shape6 {
  top: 85%;
  left: 35%;
  border-bottom-color: #92FE9D;
  transform: scale(1.8);
  animation: floatShapeAlt 28s linear infinite;
}

.shape7 {
  top: 5%;
  left: 40%;
  width: 6rem;
  height: 6rem;
  background: #FF1493;
  animation: floatShape 8s linear infinite;
}

.shape8 {
  top: 50%;
  right: 25%;
  width: 11rem;
  height: 11rem;
  background: #00C9FF;
  animation: floatShape 14s linear infinite reverse;
}

.shape9 {
  top: 15%;
  right: 30%;
  width: 7.5rem;
  height: 7.5rem;
  background: #ffafbd;
  animation: floatShapeAlt 18s linear infinite;
}

.shape10 {
  top: 80%;
  right: 40%;
  border-bottom-color: #00f2fe;
  transform: scale(1.6);
  animation: floatShape 16s linear infinite reverse;
}

.shape11 {
  top: 35%;
  left: 20%;
  width: 7rem;
  height: 7rem;
  background: #fccb90;
  animation: floatShapeAlt 10s linear infinite;
}

.shape12 {
  top: 65%;
  right: 15%;
  width: 10.5rem;
  height: 10.5rem;
  background: #d57eeb;
  opacity: 0.4;
  animation: floatShape 24s linear infinite;
}

.shape13 {
  top: 45%;
  left: 10%;
  border-bottom-color: #ffc3a0;
  transform: scale(1.4);
  opacity: 0.6;
  animation: floatShapeAlt 26s linear infinite;
}

.shape14 {
  top: 90%;
  left: 15%;
  width: 9rem;
  height: 9rem;
  background: #4facfe;
  animation: floatShape 11s linear infinite;
}

.shape15 {
  top: 55%;
  right: 5%;
  width: 6rem;
  height: 6rem;
  background: #fbc2eb;
  animation: floatShapeAlt 19s linear infinite reverse;
}

/* =========================================
       メインコンテンツエリア
       ========================================= */
.content-container {
  position: relative;
  z-index: 1;
  max-width: 96rem;
  margin: 0 auto;
}

/* パンくずリスト */
.breadcrumb {
  font-size: 1.2rem;
  font-weight: bold;
  color: #888;
  margin-bottom: 1.6rem;
  animation: fadeInUp 0.8s ease backwards;
}

.breadcrumb a {
  color: #0052a4;
  text-decoration: none;
  transition: opacity 0.3s;
}

.breadcrumb a:hover {
  opacity: 0.7;
}

/* =========================================
       プロフィールトップ (Hero)
       ========================================= */
.profile-hero {
  display: flex;
  gap: 4.8rem;
  background: #ffffff;
  border-radius: 2.4rem;
  padding: 4.8rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.05);
  margin-bottom: 4rem;
  animation: fadeInUp 0.8s ease backwards;
  animation-delay: 0.1s;
}

/* 画像エリア (一覧のホバーインタラクションを踏襲) */
.hero-image-container {
  flex: 0 0 32rem;
  /* 320px */
}

.hero-image-wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 1.6rem;
  perspective: 100rem;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-image-wrapper:hover {
  transform: translateY(-1rem);
}

.hero-image-wrapper::after {
  content: '';
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  width: 100%;
  height: 100%;
  border-radius: 1.6rem;
  z-index: -1;
  background: linear-gradient(135deg, #FF1493, #FF8C00);
  /* 女性アナウンサーのイメージカラー */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 男性アナウンサーの場合の写真背景グラデーション */
.profile-hero.is-male .hero-image-wrapper::after {
  background: linear-gradient(135deg, #0052a4, #00C9FF);
}

.hero-image-wrapper:hover::after {
  transform: translate(1.2rem, 1.6rem) rotate(6deg);
}

@keyframes autoFlip {

  0%,
  45% {
    transform: rotateY(0deg);
  }

  50%,
  95% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.hero-image-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.6rem;
  transform-style: preserve-3d;
  /* animation: autoFlip 10s infinite cubic-bezier(0.4, 0, 0.2, 1); */
}

.profile-hero:not(.is-single-image) .hero-image-inner {
  animation: autoFlip 10s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.img-front,
.img-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1.6rem;
  overflow: hidden;
}

.img-back {
  transform: rotateY(180deg);
}

.hero-dummy-img {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333;
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  border: 1px solid #eaeaea;
  background: #ffffff;
}

.img-label {
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  padding: 0.4rem 1.2rem;
  border-radius: 2rem;
  margin-bottom: 1rem;
}

/* 情報エリア */
.hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* バッジ */
.profile-badges {
  position: absolute;
  top: -1.6rem;
  left: -1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  z-index: 30;
  pointer-events: none;
}

.badge {
  display: inline-flex;
  /* flexにして中央揃えを確実に */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.15);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.profile-badges>span:nth-child(odd) {
  transform: rotate(-6deg);
}

.profile-badges>span:nth-child(even) {
  transform: rotate(6deg);
}

.badge-new {
  background: linear-gradient(45deg, #FF1493, #FF8C00);
}

.badge-weather {
  background: linear-gradient(45deg, #00C9FF, #92FE9D);
  color: #0052a4;
}

.badge-bousai {
  background: linear-gradient(45deg, #a18cd1, #fbc2eb);
}

.badge-caster {
  background: linear-gradient(45deg, #f6d365, #fda085);
  color: #555;
}

/* 名前 */
.profile-name-en {
  font-size: 1.4rem;
  font-weight: 800;
  color: #FF1493;
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
}

/* 男性アナウンサーの場合はローマ字を青に */
.profile-hero.is-male .profile-name-en {
  color: #0052a4;
}

.profile-name {
  font-size: 4rem;
  font-weight: 900;
  color: #0052a4;
  margin-bottom: 3.2rem;
  line-height: 1.2;
}

/* ボタンエリア (一覧から流用) */
.profile-actions {
  display: flex;
  gap: 1.2rem;
  max-width: 40rem;
  margin-bottom: 4rem;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 1.2rem 0;
  border-radius: 3rem;
  transition: all 0.3s ease;
  color: #fff;
}

.action-btn i {
  margin-right: 0.5em;
  font-size: 1.2em;
}

.btn-blog {
  background: linear-gradient(45deg, #0052a4 0%, #4facfe 100%);
}

.btn-blog:hover {
  opacity: 0.9;
  transform: translateY(-0.3rem);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 82, 164, 0.3);
  text-decoration: none;
}

.btn-insta {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.btn-insta:hover {
  opacity: 0.9;
  transform: translateY(-0.3rem);
  box-shadow: 0 0.5rem 1.5rem rgba(220, 39, 67, 0.4);
  text-decoration: none;
}

/* 担当番組 */
.programs-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #555;
  margin-bottom: 0.8rem;
}

.programs-detail {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #333;
  background: #f5f7fa;
  padding: 1.6rem 2rem;
  border-radius: 1.2rem;
  border-left: 4px solid #FF1493;
  /* 女性アナウンサーのアクセントライン */
}

/* 男性アナウンサーの場合のアクセントライン */
.profile-hero.is-male .programs-detail {
  border-left-color: #0052a4;
}

.programs-detail p {
  position: relative;
  padding-left: 2.8rem;
  /* アイコン用の余白 */
  margin-bottom: 0.8rem;
}

.programs-detail .other-programs p {
  padding-left: 0;
}

/* .programs-detail p:last-child {
  margin-bottom: 0;
} */

.programs-detail p::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  text-align: center;
  color: #FF1493;
  /* 女性アナウンサー */
}

.profile-hero.is-male .programs-detail p::before {
  color: #0052a4;
  /* 男性アナウンサー */
}

/* 各メディアのアイコン設定 (FontAwesome) */
.tv-detail::before {
  content: '\f26c';
  /* fa-tv */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.radio-detail::before {
  content: '\f8d7';
  /* fa-radio */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.podcast-detail::before {
  content: '\f2ce';
  /* fa-podcast */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.youtube-detail::before {
  content: '\f167';
  /* fa-youtube */
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.programs-detail a {
  text-decoration: underline;
  color: #0052a4;
}

/* ハッシュタグ */
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 3.2rem;
  /* 上に余白を追加 */
}

.profile-tags .tag {
  font-size: 1.2rem;
  font-weight: bold;
  color: #FF1493;
  background: rgba(255, 20, 147, 0.08);
  padding: 0.6rem 1.6rem;
  border-radius: 2rem;
}

/* 男性アナウンサーの場合はハッシュタグを青に */
.profile-hero.is-male .profile-tags .tag {
  color: #0052a4;
  background: rgba(0, 82, 164, 0.08);
}

/* =========================================
       詳細情報 (Gridによるカードレイアウト)
       ========================================= */
.profile-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem;
  margin-bottom: 4rem;
}

/* 苦手なもの、一言メッセージなど文章が長いものは2カラムぶち抜きにする */
.detail-card.span-full {
  grid-column: span 2;
}

.detail-card {
  background: #ffffff;
  border-radius: 2.4rem;
  padding: 3.2rem;
  box-shadow: 0 1rem 3rem rgba(0, 82, 164, 0.05);
  /* 影をうっすら青系に */
  border: 1px solid rgba(0, 82, 164, 0.08);
  /* 薄いボーダーでお洒落に */
  position: relative;
  overflow: hidden;
  /* 疑似要素のはみ出し防止 */
  animation: fadeInUp 0.8s ease backwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.detail-card:hover {
  transform: translateY(-0.4rem);
  box-shadow: 0 1.5rem 4rem rgba(0, 82, 164, 0.1);
}

/* カード右上にポップな光の装飾 */
.detail-card::before {
  content: '';
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(79, 172, 254, 0.08) 0%, rgba(79, 172, 254, 0) 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* アニメーションディレイ */
.detail-card:nth-child(1) {
  animation-delay: 0.2s;
}

.detail-card:nth-child(2) {
  animation-delay: 0.3s;
}

.detail-card:nth-child(3) {
  animation-delay: 0.4s;
}

.detail-card:nth-child(4) {
  animation-delay: 0.5s;
}

.detail-card:nth-child(5) {
  animation-delay: 0.6s;
}

.detail-card:nth-child(6) {
  animation-delay: 0.7s;
}

.detail-card:nth-child(7) {
  animation-delay: 0.8s;
}

.detail-heading {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  /* 少し大きく */
  color: #0052a4;
  font-weight: 900;
  margin-bottom: 2.4rem;
  letter-spacing: 0.05em;
  z-index: 1;
}

/* マーカー風の太い下線装飾 */
.detail-heading::after {
  content: '';
  position: absolute;
  bottom: 0.2rem;
  left: -0.4rem;
  right: -0.8rem;
  height: 1.2rem;
  background: rgba(79, 172, 254, 0.25);
  border-radius: 1rem;
  z-index: -1;
  transform: rotate(-1deg);
  /* 少し傾けて遊び心を */
}

.detail-text {
  font-size: 1.6rem;
  color: #444;
}

.detail-text ul {
  list-style: none;
}

.detail-text li {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.detail-text li::before {
  content: '';
  min-width: 1rem;
  height: 1rem;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-radius: 50%;
}

/* .detail-text li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.detail-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8rem;
  width: 0.6rem;
  height: 0.6rem;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-radius: 50%;
} */

.detail-text p {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.detail-text p:last-child {
  margin-bottom: 0;
}

/* 項目の中の小見出し（じゃがいも など） */
.detail-text strong {
  font-weight: 600;
  color: #0052a4;
}

.detail-text strong span {
  font-weight: 400;
  font-size: 0.9em;
}

/* 小見出しのひし形アクセント */
.detail-text p::before {
  content: '';
  min-width: 1rem;
  height: 1rem;
  background: linear-gradient(135deg, #FF1493, #FF8C00);
  border-radius: 0.2rem;
  transform: translateY(-50%) rotate(45deg);
  position: relative;
  top: 0.25em;
}

.detail-text strong:first-child {
  margin-top: 0;
}

/* 一言メッセージの特別な装飾 */
.message-text {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  background: linear-gradient(transparent 60%, #fecfef 60%);
  display: inline;
}

.message-container p {
  display: block;
  line-height: 2;
  margin-bottom: 1.2rem;
}

.message-container p::before {
  content: none;
}

/* =========================================
       YouTube動画エリア
       ========================================= */
.profile-movie {
  margin-top: 6rem;
  animation: fadeInUp 0.8s ease backwards;
  animation-delay: 0.9s;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

.youtube-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.6rem;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.youtube-wrapper:hover {
  transform: translateY(-1rem);
}

/* 動画の背面にも写真と同じようなポップな装飾枠を追加 */
.youtube-wrapper::after {
  content: '';
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  width: 100%;
  height: 100%;
  border-radius: 1.6rem;
  z-index: -1;
  background: linear-gradient(135deg, #FF1493, #FF8C00);
  /* 女性アナウンサーのイメージカラー */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 男性アナウンサー用 (必要に応じて .profile-movie に is-male を付与した場合) */
.profile-movie.is-male .youtube-wrapper::after {
  background: linear-gradient(135deg, #0052a4, #00C9FF);
}

.youtube-wrapper:hover::after {
  transform: translate(1.2rem, 1.6rem) rotate(2deg);
  /* 横長のため回転角度は控えめに */
}

/* 実際のiframeの設定 */
.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.6rem;
  border: none;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
  background-color: #000;
}

/* =========================================
       他のアナウンサーを見るエリア
       ========================================= */
.other-announcers {
  position: relative;
  margin-top: 8rem;
  margin-bottom: 4rem;
  animation: fadeInUp 0.8s ease backwards;
  animation-delay: 1s;
}

/* ポップなドットの区切り線 */
.other-announcers::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 0;
  border-top: 4px dotted rgba(0, 82, 164, 0.2);
}

.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 3.2rem;
  font-weight: 900;
  color: #0052a4;
  margin-bottom: 4rem;
  letter-spacing: 0.05em;
  padding-top: 8rem;
}

.section-title span {
  font-size: 1.4rem;
  color: #FF1493;
  margin-top: 0.8rem;
  letter-spacing: 0.1em;
}

.other-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}

.other-card {
  display: block;
  background: #ffffff;
  border-radius: 2rem;
  padding: 1.6rem;
  text-decoration: none;
  box-shadow: 0 1rem 3rem rgba(0, 82, 164, 0.05);
  border: 1px solid rgba(0, 82, 164, 0.08);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.other-card:hover {
  transform: translateY(-0.8rem);
  box-shadow: 0 1.5rem 4rem rgba(0, 82, 164, 0.12);
  text-decoration: none;
  opacity: 1;
}

.other-img-wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 1.2rem;
  margin-bottom: 1.6rem;
  z-index: 1;
}

/* 女性アナウンサー用（デフォルト）の写真背景グラデーション */
.other-img-wrapper::after {
  content: '';
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: 100%;
  height: 100%;
  border-radius: 1.2rem;
  z-index: -1;
  background: linear-gradient(135deg, #FF1493, #FF8C00);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 男性アナウンサー用（.is-male）の写真背景グラデーション */
.other-card.is-male .other-img-wrapper::after {
  background: linear-gradient(135deg, #0052a4, #00C9FF);
}

.other-card:hover .other-img-wrapper::after {
  transform: translate(0.6rem, 1rem) rotate(4deg);
}

.other-img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 1.2rem;
  background: #fff;
  border: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}

.other-info {
  text-align: center;
}

/* 女性アナウンサー用（デフォルト）のローマ字名 */
.other-name-en {
  font-size: 1.1rem;
  font-weight: 800;
  color: #FF1493;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}

/* 男性アナウンサー用（.is-male）のローマ字名 */
.other-card.is-male .other-name-en {
  color: #0052a4;
}

.other-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #333;
}

/* 追加：他アナウンサーのバッジ */
.other-badges {
  position: absolute;
  top: -1.2rem;
  left: -1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 30;
  pointer-events: none;
}

.other-badges>span:nth-child(odd) {
  transform: rotate(-8deg);
}

.other-badges>span:nth-child(even) {
  transform: rotate(8deg);
}

/* OTHER ANNOUNCERS用のバッジを一回り小さく */
.other-badges .badge {
  font-size: 1rem;
  padding: 0.4rem 1rem;
  margin-bottom: 0.5rem;
}

/* 追加：他アナウンサーのハッシュタグ */
.other-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.other-tags .tag {
  font-size: 1rem;
  padding: 0.4rem 1.2rem;
  border-radius: 2rem;
  font-weight: bold;
}

/* 女性アナウンサー用（デフォルト）のハッシュタグ */
.other-card .tag {
  color: #FF1493;
  background: rgba(255, 20, 147, 0.08);
}

/* 男性アナウンサー用（.is-male）のハッシュタグ */
.other-card.is-male .tag {
  color: #0052a4;
  background: rgba(0, 82, 164, 0.08);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(4rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
       レスポンシブ対応（スマホ最適化 1rem=16px）
       ========================================= */
@media (max-width: 899px) {

  header .lower:first-child {
    height: auto;
  }

  .wrapper {
    padding: 2rem 1rem;
  }

  .wrapper-bg-blob1 {
    top: -5%;
    left: -15%;
    width: 20rem;
    height: 20rem;
  }

  .wrapper-bg-blob2 {
    bottom: -5%;
    right: -15%;
    width: 25rem;
    height: 25rem;
  }

  .wrapper-bg-blob3 {
    top: 25%;
    left: auto;
    right: -10%;
    width: 18rem;
    height: 18rem;
  }

  .breadcrumb {
    font-size: 0.75rem;
    margin-bottom: 1rem;
  }

  .profile-hero {
    flex-direction: column;
    padding: 1.5rem;
    gap: 2rem;
    border-radius: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .hero-image-container {
    flex: none;
    width: 100%;
    max-width: 24rem;
    /* スマホでは画像を少し小さめに */
    margin: 0 auto;
  }

  .hero-image-wrapper {
    margin-bottom: 0;
    border-radius: 1rem;
  }

  .hero-image-wrapper::after {
    top: 0.8rem;
    left: 0.8rem;
    border-radius: 1rem;
  }

  .hero-image-inner {
    border-radius: 1rem;
  }

  .profile-badges {
    top: -0.8rem;
    left: -0.8rem;
    gap: 0.4rem;
  }

  .badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    margin-bottom: 0.25rem;
  }

  .profile-name-en {
    font-size: 0.75rem;
  }

  .profile-name {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
  }

  .profile-actions {
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .action-btn {
    font-size: 0.875rem;
    padding: 0.875rem 0;
  }

  .profile-tags {
    margin-bottom: 2rem;
    gap: 0.5rem;
  }

  .profile-tags .tag {
    font-size: 0.625rem;
    padding: 0.25rem 0.75rem;
  }

  .programs-title {
    font-size: 0.875rem;
  }

  .programs-detail {
    font-size: 0.875rem;
    padding: 0.875rem;
  }

  .profile-details-grid {
    grid-template-columns: 1fr;
    /* スマホは1列 */
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .programs-detail p {
    position: relative;
    padding-left: 1.875rem;
    margin-bottom: 0.5rem;
  }

  .programs-detail p::before {
    width: 1.125rem;
  }

  .detail-card.span-full {
    grid-column: auto;
  }

  .detail-card {
    padding: 1.5rem;
    border-radius: 1.5rem;
  }

  .detail-heading {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .detail-heading::after {
    height: 0.8rem;
    bottom: 0.1rem;
  }

  .detail-text {
    font-size: 0.875rem;
  }

  .detail-text p {
    margin-bottom: 0;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .detail-text p::before {
    min-width: 0.75rem;
    height: 0.75rem;
    top: 0.5em;
  }

  .detail-text li {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .detail-text li::before {
    min-width: 0.75rem;
    height: 0.75rem;
  }

  .message-text {
    font-size: 1rem;
    line-height: 1.8;
  }

  .message-container p {
    margin-bottom: 0.875rem;
  }

  .profile-movie {
    margin-top: 2.5rem;
  }

  .youtube-dummy {
    border-radius: 1.5rem;
  }

  .youtube-title {
    font-size: 1rem;
    top: 1rem;
    left: 1rem;
  }

  .youtube-play-btn {
    width: 4rem;
    height: 2.8rem;
    border-radius: 0.8rem;
  }

  .youtube-play-btn::after {
    border-left: 1rem solid #fff;
    border-top: 0.6rem solid transparent;
    border-bottom: 0.6rem solid transparent;
    margin-left: 0.3rem;
  }

  /* 他のアナウンサーを見る（スマホ用） */
  .other-announcers {
    margin-top: 5rem;
    margin-bottom: 2rem;
  }

  .section-title {
    font-size: 2.4rem;
    margin-bottom: 2.5rem;
  }

  .section-title span {
    font-size: 1rem;
  }

  .other-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* スマホは2列 */
  .other-card {
    padding: 1rem;
    border-radius: 1.5rem;
  }

  .other-img-wrapper {
    border-radius: 1rem;
    margin-bottom: 1rem;
  }

  .other-img-wrapper::after {
    border-radius: 1rem;
    top: 0.5rem;
    left: 0.5rem;
  }

  .other-dummy-img {
    border-radius: 1rem;
    font-size: 1.2rem;
  }

  .other-name-en {
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
  }

  .other-name {
    font-size: 1.4rem;
  }

  .other-badges {
    top: -0.6rem;
    left: -0.6rem;
    gap: 0.3rem;
  }

  .other-badges .badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.6rem;
    margin-bottom: 0.25rem;
  }

  .other-tags {
    margin-top: 0.8rem;
    gap: 0.4rem;
  }

  .other-tags .tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.8rem;
  }
}