@charset "UTF-8";

/* ==========================================================================
   Interview Page Styles
   100% Strictly Aligned with daily/index.html & Soft Aura "Voice of Heart" Quote
   ========================================================================== */

/* ---------- Hero Section ---------- */
.interview-hero {
  position: relative;
  overflow: hidden;
  background-image: var(--g-hero-band);
  padding: 92px 20px 40px;
  text-align: center;
}

.interview-hero__inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.interview-hero__label {
  font-family: var(--f-gothic);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background-image: var(--g-accent);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.interview-hero__title {
  font-family: var(--f-mincho);
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.6;
  margin-bottom: 24px;
}

.u-br-sp {
  display: inline;
}

@media (min-width: 721px) {
  .u-br-sp {
    display: none;
  }
}

.interview-hero__title-em {
  font-style: normal;
  border-bottom: 2px solid var(--c-accent-1);
  padding-bottom: 2px;
}

.interview-hero__lead {
  font-size: 15px;
  color: var(--c-muted);
  line-height: 1.85;
  max-width: 760px;
  margin: 0 auto;
}

@media (min-width: 721px) {
  .interview-hero {
    padding: 145px 40px 60px;
  }
  .interview-hero__title {
    font-size: 36px;
  }
  .interview-hero__lead {
    font-size: 16px;
  }
}

/* ---------- Switcher Layout & Cards (100% Aligned with daily/index.html) ---------- */
.interview-tabs-section {
  position: relative;
  padding: 20px 20px 80px;
  background-color: var(--c-surface);
}

.daily-profile-switcher {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1024px;
  margin: 0 auto 40px;
  position: sticky;
  top: 72px;
  z-index: 40;
}

@media (min-width: 768px) {
  .daily-profile-switcher {
    flex-direction: row;
    align-items: stretch;
    gap: 20px; /* カード3つの間隔をしっかりと広げる */
  }
}

@media (min-width: 1025px) {
  .daily-profile-switcher {
    top: 96px;
  }
}

/* Base Profile Card (Matching daily/index.html specification) */
.profile-card {
  position: relative;
  border: none !important; /* No outer border, exactly matching daily/index.html */
  background-color: var(--c-surface);
  border-radius: 24px;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, padding 0.35s ease;
}

.profile-card__avatar {
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  transition: opacity 0.3s ease, width 0.35s ease, height 0.35s ease;
}

.profile-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

.profile-card__content {
  transition: opacity 0.3s ease;
}

/* Inactive Cards */
.profile-card:not(.is-active) {
  flex: 0 0 auto;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px 8px 14px !important;
  background-color: var(--c-surface);
  gap: 0 !important;
}

/* Apply opacity only to inner avatar and text content for inactive cards */
.profile-card:not(.is-active) .profile-card__avatar,
.profile-card:not(.is-active) .profile-card__content {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .profile-card:not(.is-active) {
    flex: 0 0 145px !important;
    max-width: 145px !important;
    width: 145px !important;
  }
}

.profile-card:not(.is-active):hover {
  background-color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(120, 90, 80, 0.12);
}

.profile-card:not(.is-active):hover .profile-card__avatar,
.profile-card:not(.is-active):hover .profile-card__content {
  opacity: 1;
}

.profile-card:not(.is-active) .profile-card__avatar {
  width: 48px !important;
  height: 48px !important;
  margin: 0 0 7px 0 !important; /* Balanced 7px spacing */
}

@media (min-width: 768px) {
  .profile-card:not(.is-active) .profile-card__avatar {
    width: 48px !important;
    height: 48px !important;
    margin: 0 0 7px 0 !important;
  }
}

.profile-card:not(.is-active) .profile-card__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.profile-card:not(.is-active) .profile-card__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.profile-card:not(.is-active) .profile-card__main {
  font-family: var(--f-gothic);
  font-size: 13px !important;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
  line-height: 1.25;
  margin: 0 !important;
}

.profile-card:not(.is-active) .profile-card__sub {
  font-size: 10.5px !important;
  color: var(--c-muted);
  text-align: center;
  line-height: 1.25;
  margin-top: 1px !important;
}

.profile-card:not(.is-active) .profile-card__details {
  display: none !important;
}

/* Active Cards: Expanded Main Persona Card (NO BORDER, Inset Shadow matching daily/index.html) */
.profile-card.is-active {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 24px 28px;
  opacity: 1;
  border: none !important;
}

@media (min-width: 768px) {
  .profile-card.is-active {
    flex: 1 1 660px;
    max-width: 680px; /* アクティブカードの幅を若干狭めてスマートに配置 */
  }
}

.profile-card.is-active .profile-card__avatar {
  display: none !important;
}

.profile-card.is-active .profile-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: auto;
}

.profile-card.is-active .profile-card__header {
  display: none;
}

@keyframes opacityFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.profile-card.is-active .profile-card__details {
  display: block !important;
  margin-top: 0;
  animation: opacityFade 0.3s ease-out both;
}

.profile-card__name {
  font-family: var(--f-mincho);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 8px;
}

.profile-card__desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-text);
  margin-bottom: 14px;
}

.profile-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Person Themes (Matching daily/index.html inset shadows & gradients, NO BORDER) */
.profile-card--a.is-active {
  background-image: linear-gradient(150deg, #fff8f2 0%, var(--c-surface-persona-a) 55%, #fdeee6 100%);
  box-shadow: inset 0 8px 24px rgba(170, 130, 110, 0.12), inset 0 2px 8px rgba(170, 130, 110, 0.08);
  border: none !important;
}

.profile-card--b.is-active {
  background-image: linear-gradient(150deg, #fbf6fa 0%, var(--c-surface-persona-b) 55%, #f7eef0 100%);
  box-shadow: inset 0 8px 24px rgba(160, 120, 140, 0.12), inset 0 2px 8px rgba(160, 120, 140, 0.08);
  border: none !important;
}

.profile-card--c.is-active {
  background-image: linear-gradient(150deg, #ffffff 0%, #fdf7e9 55%, #fbf3e0 100%);
  box-shadow: inset 0 8px 24px rgba(170, 150, 100, 0.12), inset 0 2px 8px rgba(170, 150, 100, 0.08);
  border: none !important;
}

.daily-pill--a {
  background-color: rgba(255, 255, 255, 0.85);
  color: #82504e;
  border: none !important;
}

.daily-pill--b {
  background-color: rgba(255, 255, 255, 0.85);
  color: #6e476e;
  border: none !important;
}

.daily-pill--c {
  background-color: rgba(255, 255, 255, 0.85);
  color: #755a29;
  border: none !important;
}

/* ---------- Compact Mode on Scroll (Matching daily/index.html Specification & Header White Bar) ---------- */
.interview-tabs-section,
.daily-profile-switcher,
.profile-card,
.profile-card__avatar,
.profile-card__desc,
.profile-card__tags,
.profile-card__details,
.profile-card__name {
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Full Width (100vw) Square White Background Bar on Scroll, keeping inner tabs at original 1024px width */
.interview-tabs-section.is-compact .daily-profile-switcher,
.daily-profile-switcher.is-compact {
  max-width: 1024px !important;
  width: 100% !important;
  margin: 0 auto 36px !important;
  position: sticky;
  top: 72px;
  z-index: 100 !important;
  left: auto !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

@media (min-width: 1025px) {
  .interview-tabs-section.is-compact .daily-profile-switcher,
  .daily-profile-switcher.is-compact {
    top: 96px;
  }
}

/* Background pseudo-element stretching 100vw edge-to-edge with solid 100% white fill to completely block underlying scroll content */
.interview-tabs-section.is-compact .daily-profile-switcher::before,
.daily-profile-switcher.is-compact::before {
  content: "" !important;
  position: absolute !important;
  top: -16px !important;
  bottom: -16px !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background-color: #ffffff !important; /* Solid 100% White to fully block content beneath */
  border-radius: 0 !important; /* 角丸なしの全幅ストレート白背景 */
  z-index: -1 !important;
  box-shadow: none !important;
}

/* Compact Active Card (Expanded Left Padding & Larger Font Size) */
.interview-tabs-section.is-compact .profile-card.is-active,
.daily-profile-switcher.is-compact .profile-card.is-active {
  padding: 12px 32px !important; /* 左端からしっかり離す余白 (32px) */
  align-items: center !important;
  display: flex !important;
}

.interview-tabs-section.is-compact .profile-card.is-active .profile-card__avatar,
.daily-profile-switcher.is-compact .profile-card.is-active .profile-card__avatar {
  display: none !important;
}

.interview-tabs-section.is-compact .profile-card.is-active .profile-card__details,
.daily-profile-switcher.is-compact .profile-card.is-active .profile-card__details {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
}

.interview-tabs-section.is-compact .profile-card.is-active .profile-card__name,
.daily-profile-switcher.is-compact .profile-card.is-active .profile-card__name {
  font-size: 17px !important; /* フォントサイズを大きめにアップ (17px) */
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
}

/* Hide long description & tags for sleek compact height */
.interview-tabs-section.is-compact .profile-card__desc,
.interview-tabs-section.is-compact .profile-card__tags,
.daily-profile-switcher.is-compact .profile-card__desc,
.daily-profile-switcher.is-compact .profile-card__tags {
  display: none !important;
  opacity: 0;
}

/* Compact Inactive Cards (Perfect Balance matching daily/index.html screenshot) */
.interview-tabs-section.is-compact .profile-card:not(.is-active),
.daily-profile-switcher.is-compact .profile-card:not(.is-active) {
  padding: 8px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.interview-tabs-section.is-compact .profile-card:not(.is-active) .profile-card__avatar,
.daily-profile-switcher.is-compact .profile-card:not(.is-active) .profile-card__avatar {
  width: 38px !important;
  height: 38px !important;
  margin: 0 0 5px 0 !important;
}

.interview-tabs-section.is-compact .profile-card:not(.is-active) .profile-card__main,
.daily-profile-switcher.is-compact .profile-card:not(.is-active) .profile-card__main {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.interview-tabs-section.is-compact .profile-card:not(.is-active) .profile-card__sub,
.daily-profile-switcher.is-compact .profile-card:not(.is-active) .profile-card__sub {
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
}

/* ---------- Panels Container & Opacity Fade Switch ---------- */
.interview-panels {
  max-width: 1024px; /* 元の幅 1024px に完全復元 */
  margin: 28px auto 0;
  position: relative;
  z-index: 1;
}

.interview-panel {
  display: none;
}

.interview-panel.is-active {
  display: block;
}

/* テキストばかりのQ&Aリストのみ読みやすい 850px 幅に集約 */
.qa-list {
  max-width: 850px;
  margin: 0 auto;
}

/* ---------- Opening Quote ("Voice of Heart" Clean Theme Text & Soft Blur Aura) ---------- */
.opening-quote {
  font-family: var(--f-mincho);
  font-size: clamp(22px, 3vw, 28px); /* 元の伸びやかな大きい文字サイズに復元 */
  font-weight: 600;
  line-height: 1.7;
  padding: 16px 0 32px 0;
  margin: 20px auto 20px;
  max-width: 1024px; /* 元の幅 1024px に復元 */
  width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  text-align: left;
  z-index: 1;
}

.opening-quote__avatar {
  width: clamp(130px, 18vw, 170px);
  height: clamp(130px, 18vw, 170px);
  border-radius: 24px; /* 大きめの角丸四角 */
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  border: none;
}

.opening-quote__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

.opening-quote__text {
  flex: 1;
  text-align: left;
}

.quote-chunk {
  display: inline-block;
}

/* ぼやっとした円をひとつだけ左端に配置 */
.opening-quote::before {
  content: "" !important;
  position: absolute;
  right: 20px;
  left: auto !important;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

.opening-quote::after {
  content: none !important;
}

/* M-san Theme Text (#e0b7a9) & Left Blur Circle */
.opening-quote.quote--a {
  color: #e0b7a9;
  background: transparent !important;
  box-shadow: none !important;
}
.opening-quote.quote--a::before {
  background: rgba(224, 183, 169, 0.75);
}

/* S-san Theme Text (#b295bb) & Left Blur Circle */
.opening-quote.quote--b {
  color: #b295bb;
  background: transparent !important;
  box-shadow: none !important;
}
.opening-quote.quote--b::before {
  background: rgba(178, 149, 187, 0.75);
}

/* H-san Theme Text (#d7c595) & Left Blur Circle */
.opening-quote.quote--c {
  color: #d7c595;
  background: transparent !important;
  box-shadow: none !important;
}
.opening-quote.quote--c::before {
  background: rgba(215, 197, 149, 0.75);
}

/* ---------- Q&A List & Cards ---------- */
.qa-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 44px;
}

.qa-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 36px 0; /* 外枠上下にゆったりとした余裕を持たせる */
  text-align: left;
}

.qa-block:not(:last-child) {
  border-bottom: 1px solid var(--c-hairline) !important; /* サイト標準の薄いグレー線 (1px #e4dcd8) を踏襲 */
}

@media (min-width: 768px) {
  .qa-block {
    padding: 48px 0; /* PC表示時により豊かな余白 */
  }
}

.qa-q {
  font-family: var(--f-mincho);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.6;
  margin-bottom: 14px; /* 質問と回答の距離をすっきり適正化 */
  padding-bottom: 0;
  border-bottom: none !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

@media (min-width: 768px) {
  .qa-q {
    font-size: 18.5px;
  }
}

.qa-q__prefix {
  color: #be6866;
  font-family: var(--f-gothic);
  font-weight: 700;
  flex-shrink: 0;
}

.panel--s .qa-q__prefix {
  color: #966296;
}

.panel--h .qa-q__prefix {
  color: #aa7b30;
}

.qa-a {
  font-size: 14.5px;
  color: var(--c-text);
  line-height: 1.95;
}

@media (min-width: 768px) {
  .qa-a {
    font-size: 15px;
  }
}

.qa-a strong {
  color: var(--c-text);
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(224, 183, 169, 0.5) 60%);
}

.panel--s .qa-a strong {
  background: linear-gradient(transparent 60%, rgba(178, 149, 187, 0.45) 60%);
}

.panel--h .qa-a strong {
  background: linear-gradient(transparent 60%, rgba(215, 197, 149, 0.5) 60%);
}

/* ---------- Highlight ("Voice of Heart" 100% Matching Style with Soft Aura) ---------- */
.highlight {
  font-family: var(--f-mincho);
  font-size: clamp(17.5px, 2.3vw, 20px);
  font-weight: 600;
  line-height: 1.85;
  padding: 14px 0;
  margin-top: 22px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  z-index: 1;
}

.highlight::before {
  content: "" !important;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

.hl-a {
  color: #be6866;
}
.hl-a::before {
  background: rgba(224, 183, 169, 0.75);
}

.hl-b {
  color: #966296;
}
.hl-b::before {
  background: rgba(178, 149, 187, 0.75);
}

.hl-c {
  color: #aa7b30;
}
.hl-c::before {
  background: rgba(215, 197, 149, 0.75);
}

/* ---------- Career Badge ---------- */
.career-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(242, 228, 242, 0.75);
  border: none !important;
  border-radius: 999px;
  padding: 4px 14px 4px 12px;
  font-family: var(--f-gothic);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7a4b7a;
  margin-bottom: 14px;
}

.career-badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #966296;
}

/* ---------- Interview Message Section (Restored to Original 1024px Width) ---------- */
.interview-message {
  position: relative;
  width: 100%;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 40px 36px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(234, 197, 196, 0.22) 0%, rgba(255, 234, 167, 0.18) 100%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  overflow: hidden;
  z-index: 10;
}

@media (min-width: 768px) {
  .interview-message {
    flex-direction: row;
    align-items: center;
    padding: 44px 44px;
    gap: 36px;
  }
}



/* 左側：写真領域 */
.interview-message__photo-wrap,
.interview-message__photo-placeholder {
  width: 100%;
  max-width: 320px;
  height: 220px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
  background-color: #f5f5f5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.interview-message__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

/* 右側：テキストコンテンツ群 */
.interview-message__content {
  flex: 1;
  text-align: left;
}

.interview-message__label {
  font-family: var(--f-gothic);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
  margin-bottom: 8px;
  letter-spacing: 0.08em;
  text-align: left;
}

.interview-message__title {
  font-family: var(--f-mincho);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  background-image: var(--g-accent);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: left;
}

.interview-message__body {
  font-size: 14.5px;
  color: var(--c-muted);
  line-height: 1.85;
  max-width: 100%;
  margin: 0;
  text-align: left;
}

/* ---------- Persona Specific Theme Colors for Interview Message ---------- */
/* Mさん & Hさん: 指定のピンク〜ウォームイエロー文字グラデーション (#e4959c 〜 #f2ca81) と名前ラベル色 */
.panel--m .interview-message__title,
.panel--h .interview-message__title {
  background-image: linear-gradient(135deg, #e4959c 0%, #f2ca81 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.panel--m .interview-message__label,
.panel--h .interview-message__label {
  color: #e4959c;
}

/* Sさん: ライラック〜水色系背景とブルー〜モーヴ文字 */
.panel--s .interview-message {
  background: linear-gradient(135deg, rgba(228, 218, 245, 0.6) 0%, rgba(212, 233, 252, 0.75) 100%);
}

.panel--s .interview-message__title {
  background-image: linear-gradient(135deg, #4a6fa5 0%, #7a4b7a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.panel--s .interview-message__label {
  color: #4a6fa5;
}

/* ---------- Remove margin-top from next-step section ---------- */
.interview-tabs-section + .next-step,
section.next-step {
  margin-top: 0 !important;
}