/* ==========================================
   座談会ページ専用スタイル
   ========================================== */

:root {
   --talk-blue: #186EA9;
   /* TOSCOメインブルー */
   --talk-bg: #fff;
   /* 背景色 */
   --talk-text: #333;
}

/* --- セクション全体 --- */
.talk-section {
   padding: 6rem 0 8rem;
   background: var(--talk-bg);
   position: relative;
}

/* --- イントロダクション --- */
.talk-intro {
   text-align: center;
   margin-bottom: 6rem;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
}

.talk-main-title {
   font-size: clamp(2rem, 3.5vw, 3rem);
   font-weight: 700;
   color: var(--talk-blue);
   margin-bottom: 0.5rem;
   letter-spacing: 0.05em;
}

.talk-sub-title {
   font-size: clamp(1rem, 1.5vw, 1.25rem);
   font-weight: 700;
   color: #333;
   margin-bottom: 2rem;
}

.talk-intro-text {
   font-size: clamp(0.9rem, 1.2vw, 1rem);
   line-height: 2;
   color: #666;
   margin-bottom: 4rem;
}

/* --- メンバー紹介 --- */
.talk-members {
   display: flex;
   flex-direction: column;
   gap: 4rem;
   margin-bottom: 4rem;
}

.members-row {
   display: flex;
   justify-content: center;
   gap: 2rem;
   flex-wrap: wrap;
}

.member-profile {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 200px;
   text-align: center;
}

.member-img {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   overflow: hidden;
   margin-bottom: 1.2rem;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   border: 4px solid #fff;
}

.member-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.member-name {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   color: var(--talk-blue);
}

.member-detail {
   font-size: 0.75rem;
   color: #666;
   line-height: 1.5;
}

/* 司会者のみスタイル調整 */
.member-profile.moderator {
   width: 280px;
}

/* 司会者名とバッジの横並び用ラッパー */
.moderator-name-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
   margin-bottom: 0.5rem;
}

.moderator-name-wrap .role-badge {
   margin-bottom: 0;
   /* 横並びなので下マージン削除 */
}

.moderator-name-wrap .member-name {
   margin-bottom: 0;
   /* 横並びなので下マージン削除 */
}

.role-badge {
   display: inline-block;
   background: #ff6600;
   color: #fff;
   font-size: 0.75rem;
   font-weight: 700;
   padding: 0.2rem 0.8rem;
   border-radius: 20px;
   /* margin-bottom: 0.5rem; */
   /* ラッパー側で制御するため削除または上書き */
}

/* --- 本文エリア --- */
.talk-body {
   max-width: 900px;
   margin: 0 auto;
}

.talk-block {
   margin-bottom: 5rem;
}

.talk-heading {
   font-size: clamp(1.5rem, 2.5vw, 1.8rem);
   font-weight: 700;
   color: var(--talk-blue);
   margin-bottom: 3rem;
   line-height: 1.4;
   padding-left: 1rem;
   border-left: 6px solid var(--talk-blue);
}

/* 対談行 */
.talk-row {
   display: flex;
   gap: 1.5rem;
   margin-bottom: 1.5rem;
   align-items: flex-start;
}

.talk-name {
   flex-shrink: 0;
   font-weight: 700;
   color: var(--talk-blue);
   background: #eaf4fd;
   padding: 0.2rem 0.8rem;
   border-radius: 4px;
   font-size: 0.9rem;
   margin-top: 0.2rem;
   min-width: 60px;
   text-align: center;
}

.talk-text {
   line-height: 1.9;
   color: #444;
   font-size: 1rem;
}

.w-100 {
   width: 100%;
}

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

/* --- 横並び画像ストリップ --- */
.talk-image-strip {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 5rem;
   width: 100%;
   overflow: hidden;
}

.strip-item {
   flex: 1;
   /* PC: 横幅を少し削ってトリミング（高さ固定） */
   height: 140px;
   overflow: hidden;
   border-radius: 4px;
}

.strip-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
}

.strip-item:hover img {
   transform: scale(1.05);
}

/* フッターメッセージ */
.talk-footer-message {
   text-align: center;
   padding: 3rem;
   background: #f8f9fa;
   border-radius: 8px;
   margin-top: 4rem;
}

.talk-footer-message p {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--talk-blue);
   line-height: 1.8;
}

/* --- エントリーボタンエリア --- */
.cross-talk-action {
   text-align: center;
   margin-top: 8rem;
   padding: 0 1rem;
}

.cross-talk-action-text {
   font-size: clamp(1.1rem, 1.5vw, 1.25rem);
   font-weight: 700;
   margin-bottom: 2.5rem;
   color: #333;
   line-height: 1.6;
}

.annotation {
   font-size: 0.85rem;
   color: #666;
   display: block;
}

/* ボタン（強制適用） */
.cross-talk-action .btn-primary {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
   gap: 4rem;
   padding: 1.2rem 3rem;
   background: linear-gradient(90deg, #019DE8 0%, #0356BB 100%);
   color: #fff;
   border-radius: 50px;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.3s ease;
   min-width: 320px;
   max-width: 100%;
   box-shadow: 0 4px 15px rgba(1, 157, 232, 0.3);
}

.cross-talk-action .btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 20px rgba(1, 157, 232, 0.4);
   background: linear-gradient(90deg, #0178BD 0%, #023D8F 100%);
}

.cross-talk-action .btn-text {
   font-size: 1.2rem;
   font-weight: 700;
   letter-spacing: 0.05em;
}

.cross-talk-action .btn-arrow-circle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   background: #fff;
   border-radius: 50%;
   flex-shrink: 0;
}

.cross-talk-action .btn-arrow {
   font-size: 1.2rem;
   color: #019DE8;
   line-height: 1;
   font-weight: 700;
}

/* ==========================================
   レスポンシブ対応
   ========================================== */

@media (max-width: 768px) {
   .talk-section {
      padding: 4rem 0 6rem;
   }

   /* メンバー紹介：2列グリッド */
   .members-row {
      gap: 2rem 1rem;
   }

   .member-profile {
      width: 45%;
      /* 2列 */
   }

   .member-profile.moderator {
      width: 100%;
      /* 司会は1行 */
   }

   .member-img {
      width: 100px;
      height: 100px;
   }

   .member-name {
      font-size: 1rem;
   }

   .talk-heading {
      font-size: 1.3rem;
      margin-bottom: 2rem;
      border-left-width: 4px;
      padding-left: 0.8rem;
   }

   /* 対談形式 */
   .talk-row {
      gap: 0.8rem;
      margin-bottom: 1.2rem;
   }

   .talk-name {
      padding: 0.1rem 0.5rem;
      font-size: 0.8rem;
      margin-top: 0.3rem;
      min-width: 50px;
   }

   .talk-text {
      font-size: 0.95rem;
      line-height: 1.8;
   }

   /* 横並び画像（スマホ版調整） */
   .talk-image-strip {
      gap: 5px;
      margin-bottom: 3rem;
   }

   .strip-item {
      /* スマホ: 横幅をさらに削るため、高さを出してアスペクト比を変える */
      height: 100px;
   }

   /* エントリーエリア */
   .cross-talk-action {
      margin-top: 6rem;
   }

   .cross-talk-action-text {
      font-size: 1rem;
      margin-bottom: 2rem;
   }

   .cross-talk-action .btn-primary {
      width: 100%;
      min-width: auto;
      padding: 1rem 1.5rem;
      box-sizing: border-box;
      gap: 0;
   }

   .cross-talk-action .btn-text {
      font-size: 1rem;
   }

   .cross-talk-action .btn-arrow-circle {
      width: 24px;
      height: 24px;
   }

   .cross-talk-action .btn-arrow {
      font-size: 1rem;
   }
}