/* =========================
   QUINSEL Top V3 – Light Theme "Clarity"
   コンセプト: 整理される・クリアになる体験を視覚化
   Palette: White × Deep Navy(信頼) × Orange(行動) × Teal(安心)
   パソナキャリア的メリハリ＋独自のクリーンさ
========================= */

:root{
  /* ── base palette ── */
  --q-white:    #FFFFFF;
  --q-snow:     #F7F8FB;
  --q-cloud:    #EEF1F6;
  --q-mist:     #E2E6ED;

  /* ── brand colors ── */
  --q-navy:     #0F2B4C;
  --q-navy-2:   #1A3D6B;
  --q-navy-3:   #2C5282;
  --q-teal:     #0D9488;
  --q-teal-light: #CCFBF1;
  --q-orange:   #F26B1D;
  --q-orange-2: #FF8A3D;
  --q-orange-bg: #FFF7F0;

  /* ── lines & borders ── */
  --q-line:     rgba(15, 43, 76, .10);
  --q-line-2:   rgba(15, 43, 76, .06);

  /* ── text ── */
  --q-text:     #1A2B42;
  --q-text-2:   #3B4E68;
  --q-muted:    #6B7D95;
  --q-muted2:   #94A3B8;

  /* ── effects ── */
  --q-shadow:       0 4px 24px rgba(15, 43, 76, .06), 0 1px 3px rgba(15, 43, 76, .08);
  --q-shadow-lg:    0 12px 48px rgba(15, 43, 76, .08), 0 2px 6px rgba(15, 43, 76, .06);
  --q-shadow-hover: 0 20px 60px rgba(15, 43, 76, .10), 0 4px 12px rgba(15, 43, 76, .06);
  --q-radius:   16px;

  /* ── 5AI accents ── */
  --ai-emotion: #E84393;
  --ai-reality: #3B82F6;
  --ai-risk:    #F59E0B;
  --ai-future:  #8B5CF6;
  --ai-balance: #10B981;
}

/* =========================================================
   writing-mode reset
========================================================= */
#quinsel-top,
#quinsel-top *,
#quinsel-top *::before,
#quinsel-top *::after{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal;
}

/* =========================================================
   Base
========================================================= */
#quinsel-top.quinsel-v2{
  background: var(--q-white);
  color: var(--q-text);
  font-family: "Noto Sans JP", "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.85;
  position: relative;
  overflow: hidden;
}

#quinsel-top.quinsel-v2 .quinsel-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

#quinsel-top.quinsel-v2 p{
  color: var(--q-text-2);
  margin: 0 0 16px;
}
#quinsel-top.quinsel-v2 a{ color: inherit; }

/* fade */
#quinsel-top.quinsel-v2 [data-fade]{opacity:0;transform:translateY(14px);transition:.7s cubic-bezier(.16,1,.3,1)}
#quinsel-top.quinsel-v2 [data-fade].is-in{opacity:1;transform:none}

/* sections */
#quinsel-top.quinsel-v2 .quinsel-section{
  padding: 80px 0;
  position: relative;
}

#quinsel-top.quinsel-v2 .section-label{
  color: var(--q-teal);
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 11px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
#quinsel-top.quinsel-v2 .section-label--light{
  color: rgba(13,148,136,.7);
}
#quinsel-top.quinsel-v2 .quinsel-heading{
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--q-navy);
}
#quinsel-top.quinsel-v2 .quinsel-heading--light{
  color: #fff;
}

/* =========================================================
   背景演出
========================================================= */
.quinsel-background-fx{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.grid-overlay{
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(15,43,76,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 50% 20%, black, transparent 60%);
  opacity: 0.5;
}

.bubbles .bubble{
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: floatingBubble 22s infinite alternate ease-in-out;
  will-change: transform;
}
.bubble:nth-child(1){
  width: 700px; height: 700px;
  top: -15%; left: -10%;
  background: radial-gradient(circle, rgba(13,148,136,.06) 0%, transparent 70%);
  animation-duration: 24s;
}
.bubble:nth-child(2){
  width: 800px; height: 800px;
  top: 25%; right: -20%;
  background: radial-gradient(circle, rgba(242,107,29,.05) 0%, transparent 70%);
  animation-duration: 28s;
  animation-delay: -8s;
}
.bubble:nth-child(3){
  width: 600px; height: 600px;
  bottom: 5%; left: 15%;
  background: radial-gradient(circle, rgba(59,130,246,.05) 0%, transparent 70%);
  animation-duration: 30s;
  animation-delay: -15s;
}
@keyframes floatingBubble{
  0%  { transform: translate(0,0) scale(1); opacity:.5 }
  50% { opacity:.7 }
  100%{ transform: translate(80px,50px) scale(1.1); opacity:.5 }
}

/* =========================================================
   Hero
========================================================= */
#quinsel-top.quinsel-v2 .quinsel-hero{
  padding: 130px 0 60px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(13,148,136,.04), transparent 60%),
    linear-gradient(180deg, var(--q-snow) 0%, var(--q-white) 100%);
  position: relative;
}

#quinsel-top.quinsel-v2 .hero-tagline{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid var(--q-line);
  background: var(--q-white);
  border-radius: 999px;
  color: var(--q-muted);
  font-size: 12px;
  box-shadow: 0 2px 12px rgba(15,43,76,.04);
}
#quinsel-top.quinsel-v2 .hero-tagline .separator{ opacity:.4 }

#quinsel-top.quinsel-v2 .quinsel-hero__title{
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 28px 0 0;
  line-height: 1.2;
  color: var(--q-navy);
}

#quinsel-top.quinsel-v2 .quinsel-hero__sub{
  color: var(--q-text-2);
  font-size: 15px;
  max-width: 520px;
  margin: 20px auto 0;
  line-height: 1.85;
}

#quinsel-top.quinsel-v2 .quinsel-hero__cta{ margin-top: 32px; }

/* ── CTA Button ── */
#quinsel-top.quinsel-v2 .quinsel-btn--orange{
  background: linear-gradient(135deg, var(--q-orange), var(--q-orange-2));
  color: #fff;
  padding: 20px 48px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  font-size: 16px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow:
    0 8px 32px rgba(242,107,29,.25),
    0 2px 8px rgba(242,107,29,.15);
  border: none;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
#quinsel-top.quinsel-v2 .quinsel-btn--orange small{
  display: block; font-weight: 700; opacity:.92; font-size: 12px;
}
#quinsel-top.quinsel-v2 .quinsel-btn--orange:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(242,107,29,.30), 0 4px 12px rgba(242,107,29,.20);
}

/* =========================================================
   Trust Row
========================================================= */
#quinsel-top .quinsel-trust-row{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px){
  #quinsel-top .quinsel-trust-row{ grid-template-columns: 1fr; }
}

#quinsel-top .trust-item{
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-white);
  padding: 18px;
  box-shadow: var(--q-shadow);
}
#quinsel-top .trust-head{
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
#quinsel-top .trust-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--q-teal);
  box-shadow: 0 0 0 4px rgba(13,148,136,.12);
  flex: 0 0 10px;
}
#quinsel-top .trust-title{
  font-weight: 900; font-size: 13.5px; color: var(--q-navy);
}
#quinsel-top .trust-body{
  font-size: 13px; color: var(--q-text-2); line-height: 1.7;
}

/* =========================================================
   ★ STATS BAR（数字セクション）
========================================================= */
.quinsel-section--stats{
  padding: 48px 0 !important;
  background: var(--q-navy) !important;
  position: relative;
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 768px){
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
}

.stat-item{
  text-align: center;
  padding: 20px 10px;
  position: relative;
}
/* 仕切り線 */
.stat-item + .stat-item::before{
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,.15);
}
@media (max-width: 768px){
  .stat-item:nth-child(3)::before{ display: none; }
}

.stat-number{
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-unit{
  font-size: 0.45em;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  margin-left: 2px;
}
.stat-zero{
  font-size: 0.55em;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  margin-right: 2px;
}
.stat-label{
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  font-weight: 600;
  letter-spacing: .02em;
}

/* =========================================================
   Ticker
========================================================= */
.quinsel-ticker-container{
  padding: 56px 0 40px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: var(--q-snow);
}
.ticker-heading{
  text-align: center; margin-bottom: 28px; padding: 0 20px;
}
.ticker-heading h2{
  font-size: clamp(20px, 2.8vw, 30px);
  font-weight: 900; color: var(--q-navy);
  margin: 0 0 10px; letter-spacing: -0.02em; line-height: 1.35;
}
.ticker-heading p{
  font-size: 14px; color: var(--q-muted); margin: 0;
}

.quinsel-ticker{ width: 100%; }
.ticker-track{
  display: flex; width: max-content;
  animation: tickerScroll 40s linear infinite; gap: 20px;
}
@keyframes tickerScroll{
  0%  { transform: translateX(0) }
  100%{ transform: translateX(-50%) }
}

.ticker-card{
  display: flex; align-items: center; gap: 14px;
  padding: 16px 28px; border-radius: 100px;
  background: var(--q-white);
  border: 1px solid var(--q-line);
  box-shadow: var(--q-shadow);
  white-space: nowrap;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ticker-card:hover{
  transform: translateY(-3px);
  border-color: rgba(242,107,29,.3);
  box-shadow: var(--q-shadow-hover);
}
.case-label{
  background: var(--q-orange); color: #fff;
  font-weight: 900; font-size: 11px;
  padding: 4px 10px; border-radius: 4px; letter-spacing: .05em;
}
.case-text{
  color: var(--q-text); font-size: 15px; font-weight: 600;
}

/* hover pause */
#quinsel-top .quinsel-ticker-container:hover .ticker-track,
#quinsel-top .ticker-track:hover{ animation-play-state: paused; }
#quinsel-top .quinsel-ticker-container:focus-within .ticker-track{ animation-play-state: paused; }

/* =========================================================
   Grid 2col
========================================================= */
#quinsel-top.quinsel-v2 .quinsel-grid-2col{
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: 20px; align-items: stretch; margin-top: 20px;
}
@media (max-width: 900px){
  #quinsel-top.quinsel-v2 .quinsel-grid-2col{ grid-template-columns: 1fr; }
}

#quinsel-top.quinsel-v2 .text-box,
#quinsel-top.quinsel-v2 .visual-box{
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-white);
  box-shadow: var(--q-shadow);
  padding: 24px;
}

#quinsel-top.quinsel-v2 .organize-graphic{
  border-radius: 14px; height: 220px; position: relative; isolation: isolate;
  background:
    radial-gradient(circle at 30% 30%, rgba(242,107,29,.08), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(13,148,136,.10), transparent 55%),
    linear-gradient(180deg, var(--q-snow), var(--q-cloud));
  border: 1px solid var(--q-line); overflow: hidden;
}
#quinsel-top.quinsel-v2 .organize-graphic::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(15,43,76,.04) 0, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(15,43,76,.04) 0, transparent 1px, transparent 26px);
  opacity: .5; z-index: 1;
}

/* =========================================================
   ★ 3-STEP FLOW
========================================================= */
.quinsel-section--flow{
  background: var(--q-snow) !important;
  text-align: center;
}

.flow-grid{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 32px;
}
@media (max-width: 768px){
  .flow-grid{
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .flow-step{
    max-width: 100%;
    width: 100%;
  }
  .flow-arrow{
    transform: rotate(90deg);
  }
}

.flow-step{
  flex: 1;
  max-width: 300px;
  text-align: center;
  padding: 32px 24px 28px;
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-white);
  box-shadow: var(--q-shadow);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.flow-step:hover{
  transform: translateY(-4px);
  box-shadow: var(--q-shadow-hover);
}

.flow-number{
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--q-orange);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(242,107,29,.3);
}

.flow-icon{
  width: 56px; height: 56px;
  margin: 8px auto 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-navy);
}
.flow-icon--input{
  background: rgba(190,24,93,.08);
  color: #be185d;
}
.flow-icon--analyze{
  background: rgba(99,102,241,.08);
  color: #6366f1;
}
.flow-icon--report{
  background: rgba(242,107,29,.08);
  color: var(--q-orange);
}

.flow-title{
  font-size: 16px;
  font-weight: 900;
  color: var(--q-navy);
  margin: 0 0 8px;
}
.flow-desc{
  font-size: 13px;
  color: var(--q-text-2);
  line-height: 1.75;
  margin: 0 0 12px;
}
.flow-time{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--q-snow);
  border: 1px solid var(--q-line);
  color: var(--q-muted);
}

.flow-arrow{
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--q-muted2);
  flex-shrink: 0;
  margin-top: 60px;
}
@media (max-width: 768px){
  .flow-arrow{
    justify-content: center;
    margin-top: 0;
    padding: 0;
    transform: rotate(90deg);
  }
}

.flow-cta{
  text-align: center;
  margin-top: 40px;
}

/* =========================================================
   ★ NAVY BAND（THE SYSTEM）
========================================================= */
.quinsel-section--navy{
  background: var(--q-navy) !important;
  color: #fff;
}

/* navy内のカード類は暗いバリアント */
.quinsel-section--navy .quinsel-scan-sample{
  margin-top: 20px;
  border-radius: var(--q-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 18px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
}
.quinsel-section--navy .mock-thumb{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 22% 28%, rgba(242,107,29,.15), transparent 55%),
    radial-gradient(circle at 75% 35%, rgba(13,148,136,.18), transparent 58%),
    radial-gradient(circle at 45% 85%, rgba(139,92,246,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  min-height: 170px;
  position: relative;
  overflow: hidden;
}
.quinsel-section--navy .mock-thumb::after{
  content: "SAMPLE";
  position: absolute;
  left: 14px; top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px; letter-spacing: .18em;
  color: rgba(255,255,255,.7);
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
}
.quinsel-section--navy .mock-title{
  font-weight: 900; font-size: 14px; color: rgba(255,255,255,.92); margin-bottom: 6px;
}
.quinsel-section--navy .mock-sub{
  font-size: 12.5px; color: rgba(255,255,255,.88); line-height: 1.7; margin-bottom: 8px;
}
.quinsel-section--navy .sample-caption{
  margin: 10px 0 0; color: rgba(255,255,255,.6); font-size: 12px;
}
.quinsel-section--navy .quinsel-scan-sample--mock{
  display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: stretch;
}
@media (max-width: 900px){
  .quinsel-section--navy .quinsel-scan-sample--mock{ grid-template-columns: 1fr; }
}

/* AI cards in navy */
.quinsel-section--navy .quinsel-ai-structure{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  perspective: 900px;
}
@media (max-width: 900px){
  .quinsel-section--navy .quinsel-ai-structure{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.quinsel-section--navy .ai-item{
  --ai-accent: rgba(255,255,255,.5);
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  border-radius: var(--q-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  position: relative; overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.quinsel-section--navy .ai-item:hover{
  transform: translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border-color: color-mix(in srgb, var(--ai-accent) 30%, transparent);
}

.quinsel-section--navy .ai-item::before{
  content: ""; position: absolute;
  left: 0; right: 0; top: 0; height: 3px;
  background: var(--ai-accent);
  border-radius: var(--q-radius) var(--q-radius) 0 0;
}
.quinsel-section--navy .ai-item::after{
  content: ""; position: absolute; inset: -40%;
  background: radial-gradient(600px 300px at var(--mx) var(--my), color-mix(in srgb, var(--ai-accent) 12%, transparent), transparent 55%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.quinsel-section--navy .ai-item:hover::after{ opacity: 1; }

.quinsel-section--navy .ai-head{
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-top: 4px;
}
.quinsel-section--navy .ai-item h3{
  margin: 0; font-size: 14px; font-weight: 900; color: #fff;
}
.quinsel-section--navy .ai-item p{
  margin: 0; color: rgba(255,255,255,.92); font-size: 13.5px; line-height: 1.75; font-weight: 500;
}

/* AI icons */
.quinsel-section--navy .ai-icon{
  width: 36px; height: 36px;
  border-radius: 10px; position: relative; flex: 0 0 36px;
  background: color-mix(in srgb, var(--ai-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--ai-accent) 20%, transparent);
  overflow: hidden;
}
.quinsel-section--navy .ai-icon::before{
  content: ""; position: absolute;
  top: 10px; left: 10px;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--ai-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ai-accent) 18%, transparent);
}

/* accent assignment */
.quinsel-section--navy .ai-item--emotion{ --ai-accent: var(--ai-emotion); }
.quinsel-section--navy .ai-item--reality{ --ai-accent: var(--ai-reality); }
.quinsel-section--navy .ai-item--risk{    --ai-accent: var(--ai-risk); }
.quinsel-section--navy .ai-item--future{  --ai-accent: var(--ai-future); }
.quinsel-section--navy .ai-item--balance{ --ai-accent: var(--ai-balance); }

/* icon shape variations */
.quinsel-section--navy .ai-item--emotion .ai-icon::before{ border-radius: 5px; transform: rotate(15deg); }
.quinsel-section--navy .ai-item--risk .ai-icon::before{
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 16px solid var(--ai-accent);
  background: transparent; box-shadow: none; top: 9px; left: 8px;
}
.quinsel-section--navy .ai-item--future .ai-icon::before{
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 67% 57%, 79% 92%, 50% 70%, 21% 92%, 33% 57%, 2% 35%, 39% 35%);
}
.quinsel-section--navy .ai-item--balance .ai-icon::before{
  width: 18px; height: 18px; top: 9px; left: 9px;
  border-radius: 999px;
  background: conic-gradient(var(--ai-emotion), var(--ai-reality), var(--ai-risk), var(--ai-future), var(--ai-balance), var(--ai-emotion));
  box-shadow: none;
}
.quinsel-section--navy .ai-item--balance{ grid-column: 1 / -1; }
.quinsel-section--navy .ai-item--balance::before{
  background: linear-gradient(90deg, var(--ai-emotion), var(--ai-reality), var(--ai-risk), var(--ai-future), var(--ai-balance));
}

/* =========================================================
   ★ BEFORE / AFTER
========================================================= */
.quinsel-section--compare{
  background: var(--q-snow) !important;
}

.compare-grid{
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 28px;
}
@media (max-width: 768px){
  .compare-grid{
    flex-direction: column;
    gap: 16px;
  }
}

.compare-card{
  flex: 1;
  border-radius: var(--q-radius);
  padding: 28px 24px;
  position: relative;
}

.compare-card--before{
  background: #FEF2F2;
  border: 1px solid #FECACA;
}
.compare-card--after{
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}

.compare-label{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08em;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-block;
}
.compare-label--before{
  background: #FEE2E2;
  color: #B91C1C;
}
.compare-label--after{
  background: #DCFCE7;
  color: #15803D;
}

.compare-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--q-text);
}

.compare-icon{
  width: 22px; height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 900;
  margin-top: 1px;
}
.compare-icon--before{
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FECACA;
}
.compare-icon--after{
  background: #DCFCE7;
  color: #16A34A;
  border: 1px solid #BBF7D0;
}

.compare-arrow{
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: var(--q-muted2);
  flex-shrink: 0;
}
@media (max-width: 768px){
  .compare-arrow{
    justify-content: center;
    padding: 0;
    transform: rotate(90deg);
  }
}

/* =========================================================
   OUTPUT
========================================================= */
#quinsel-top .quinsel-output{
  margin-top: 20px; padding-top: 8px;
}
#quinsel-top .output-head{ margin-bottom: 16px; }
#quinsel-top .output-title{
  margin: 0 0 8px; font-weight: 900;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--q-navy); letter-spacing: -0.02em;
  position: relative;
}
#quinsel-top .output-title::after{
  content: ""; display: block;
  width: 48px; height: 3px; margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--q-orange), transparent);
}
#quinsel-top .output-lead{
  margin: 0; color: var(--q-text-2);
  font-size: 14px; line-height: 1.75; max-width: 70ch;
}

#quinsel-top .output-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
@media (max-width: 980px){
  #quinsel-top .output-grid{ grid-template-columns: 1fr; }
}

#quinsel-top .output-card{
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-white);
  box-shadow: var(--q-shadow);
  padding: 20px;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
#quinsel-top .output-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--q-shadow-hover);
}
#quinsel-top .output-card::after{
  content: ""; position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(13,148,136,.05), transparent 70%);
  pointer-events: none;
}

#quinsel-top .output-top{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; position: relative; z-index: 1;
}
#quinsel-top .output-badge{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px; letter-spacing: .14em;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--q-line);
  background: var(--q-snow); color: var(--q-muted);
}
#quinsel-top .output-name{
  font-weight: 900; font-size: 15px; color: var(--q-navy);
}
#quinsel-top .output-desc{
  margin: 0 0 12px; color: var(--q-text-2);
  font-size: 13px; line-height: 1.75; position: relative; z-index: 1;
}

#quinsel-top .output-list{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
}
#quinsel-top .output-list li{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--q-line-2);
  background: var(--q-snow);
  color: var(--q-text-2); font-size: 13px; line-height: 1.65;
}
#quinsel-top .output-list li::before{
  content: ""; width: 8px; height: 8px;
  margin-top: 6px; border-radius: 999px;
  background: var(--q-teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,.10);
  flex: 0 0 8px;
}

/* first card emphasis */
#quinsel-top .output-grid .output-card:nth-child(1){
  border-color: color-mix(in srgb, var(--q-orange) 20%, transparent);
  box-shadow: var(--q-shadow-lg);
}
#quinsel-top .output-grid .output-card:nth-child(1) .output-badge{
  background: var(--q-orange-bg);
  border-color: color-mix(in srgb, var(--q-orange) 25%, transparent);
  color: var(--q-orange);
}

/* =========================================================
   Bridge
========================================================= */
#quinsel-top .quinsel-bridge{
  margin: 0; padding: 36px 0;
  text-align: center; position: relative;
}
#quinsel-top .quinsel-bridge p{
  margin: 0; font-size: 14px; line-height: 1.85; color: var(--q-muted);
}
#quinsel-top .quinsel-bridge::before,
#quinsel-top .quinsel-bridge::after{
  content: ""; display: block;
  height: 1px; width: 100px; margin: 12px auto;
  background: linear-gradient(90deg, transparent, var(--q-mist), transparent);
}

/* =========================================================
   Product Cards (NEXT STEPS)
========================================================= */
#quinsel-top.quinsel-v2 .quinsel-product-cards{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px;
}
@media (max-width: 900px){
  #quinsel-top.quinsel-v2 .quinsel-product-cards{ grid-template-columns: 1fr; }
}

#quinsel-top.quinsel-v2 .p-card{
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-white);
  box-shadow: var(--q-shadow);
  padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
#quinsel-top.quinsel-v2 .p-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--q-shadow-hover);
}
#quinsel-top.quinsel-v2 .p-card h3{
  margin: 0 0 10px; letter-spacing: .12em;
  font-size: 12px; color: var(--q-teal);
  text-transform: uppercase; font-weight: 800;
}
#quinsel-top.quinsel-v2 .p-card p{
  margin: 0 0 12px; font-size: 17px; font-weight: 900; color: var(--q-navy);
}
#quinsel-top.quinsel-v2 .p-sub{
  margin: 0 0 16px; color: var(--q-text-2); font-size: 13.5px; line-height: 1.75;
}

/* pills */
#quinsel-top .pills{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px;
}
#quinsel-top .pill{
  font-size: 11px; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--q-line);
  background: var(--q-snow);
  color: var(--q-muted); font-weight: 600;
}

/* link button */
#quinsel-top.quinsel-v2 .p-link{
  position: relative;
  display: inline-flex; padding: 12px 18px;
  border-radius: 12px; text-decoration: none;
  border: 1px solid var(--q-line);
  color: var(--q-navy); font-weight: 800; font-size: 14px;
  background: var(--q-snow);
  transition: all .2s ease; overflow: hidden;
}
#quinsel-top.quinsel-v2 .p-link::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(242,107,29,.08), transparent);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
#quinsel-top.quinsel-v2 .p-link:hover::before{ transform: translateX(120%); }
#quinsel-top.quinsel-v2 .p-link:hover{
  transform: translateY(-2px);
  background: var(--q-orange-bg);
  border-color: color-mix(in srgb, var(--q-orange) 30%, transparent);
  color: var(--q-orange);
  box-shadow: 0 8px 24px rgba(242,107,29,.10);
}

/* =========================================================
   ★ FAQ
========================================================= */
.quinsel-section--faq{
  background: var(--q-snow) !important;
}

.faq-list{
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item{
  border-radius: 14px;
  border: 1px solid var(--q-line);
  background: var(--q-white);
  box-shadow: var(--q-shadow);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.faq-item[open]{
  box-shadow: var(--q-shadow-lg);
}

.faq-question{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  color: var(--q-navy);
  line-height: 1.5;
  list-style: none;
  user-select: none;
  transition: color .2s ease;
}
.faq-question::-webkit-details-marker{ display: none; }
.faq-question::marker{ display: none; content: ''; }

.faq-question:hover{
  color: var(--q-orange);
}

.faq-toggle{
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--q-snow);
  border: 1px solid var(--q-line);
  flex-shrink: 0;
  margin-left: 16px;
  position: relative;
  transition: transform .2s ease, background .2s ease;
}
.faq-toggle::before,
.faq-toggle::after{
  content: "";
  position: absolute;
  background: var(--q-navy);
  border-radius: 2px;
  transition: transform .2s ease;
}
.faq-toggle::before{
  width: 10px; height: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq-toggle::after{
  width: 2px; height: 10px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-toggle{
  background: var(--q-orange);
  border-color: var(--q-orange);
}
.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after{
  background: #fff;
}
.faq-item[open] .faq-toggle::after{
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.faq-answer{
  padding: 0 20px 18px;
}
.faq-answer p{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--q-text-2);
}

/* =========================================================
   Bottom CTA
========================================================= */
#quinsel-top.quinsel-v2 .quinsel-cta-row{ margin-top: 16px; }
#quinsel-top.quinsel-v2 .cta-note{
  color: var(--q-muted2); font-size: 12px; margin-top: 14px;
}
#quinsel-top.quinsel-v2 .quinsel-section--cta{
  background:
    radial-gradient(ellipse at 50% 50%, rgba(13,148,136,.04), transparent 60%),
    var(--q-white) !important;
}
#quinsel-top.quinsel-v2 .quinsel-section--cta .quinsel-inner{
  text-align: center;
}
#quinsel-top.quinsel-v2 .quinsel-section--cta p{
  margin-left: auto; margin-right: auto; max-width: 62ch;
}
#quinsel-top.quinsel-v2 .quinsel-section--cta .quinsel-cta-row{
  display: flex; justify-content: center;
}
#quinsel-top.quinsel-v2 .quinsel-section--cta .quinsel-btn--orange{
  min-width: min(520px, 100%);
}
#quinsel-top.quinsel-v2 .cta-center{
  max-width: 900px; margin: 0 auto;
}

/* =========================================================
   Ripple
========================================================= */
.quinsel-ripple-container{ position: relative; overflow: hidden; }
.quinsel-ripple{
  position: absolute; border-radius: 50%;
  background: rgba(15,43,76,.08);
  transform: scale(0);
  animation: quinsel-ripple-animation .6s linear;
  pointer-events: none;
}
@keyframes quinsel-ripple-animation{
  to{ transform: scale(4); opacity: 0; }
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 768px){
  #quinsel-top.quinsel-v2 .quinsel-hero{ padding: 100px 0 50px; }
  #quinsel-top.quinsel-v2 .quinsel-btn--orange{ width: 100%; padding: 18px 18px; }
  #quinsel-top.quinsel-v2 .quinsel-section{ padding: 56px 0; }
  .ticker-heading h2{ font-size: 22px; }
  .quinsel-section--stats{ padding: 32px 0 !important; }
}

/* =========================================================
   reduce-motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  .quinsel-section--navy .ai-item,
  .quinsel-section--navy .ai-item:hover{
    transform: none !important;
    animation: none !important;
  }
  .bubbles .bubble{ animation: none !important; }
  .ticker-track{ animation: none !important; }
}
/* =========================
   QUINSEL Top V3.5 – Visual Enhancement Patch
   前回V3のCSSに追加する差分パッチ
   テーマ: 白を減らし、信頼・安心・プロ感を強化
========================= */

/* =========================================================
   1) 白セクションに微細テクスチャ＆背景トーンを追加
   → 真っ白ではなく「少しだけ色がある白」にする
========================================================= */

/* Hero：温かみのあるグラデーション背景 */
#quinsel-top.quinsel-v2 .quinsel-hero{
  background:
    radial-gradient(ellipse 800px 600px at 30% 60%, rgba(13,148,136,.06), transparent),
    radial-gradient(ellipse 600px 400px at 70% 30%, rgba(242,107,29,.04), transparent),
    linear-gradient(180deg, #F0F4F8 0%, #F7F8FB 40%, #FFFFFF 100%);
}

/* Problem セクション：左右に微かな色帯 */
.quinsel-section--problem{
  background:
    linear-gradient(90deg, rgba(13,148,136,.02) 0%, transparent 30%, transparent 70%, rgba(242,107,29,.02) 100%),
    #FFFFFF !important;
}

/* Flow セクション */
.quinsel-section--flow{
  background:
    radial-gradient(ellipse 900px 500px at 50% 80%, rgba(59,130,246,.04), transparent),
    #F4F6FA !important;
}

/* Compare セクション */
.quinsel-section--compare{
  background:
    linear-gradient(180deg, #F4F6FA 0%, #F9FAFB 100%) !important;
}

/* Output セクション：少しだけ暖色寄り */
#quinsel-top.quinsel-v2 .quinsel-section:has(.quinsel-output){
  background:
    radial-gradient(ellipse 700px 400px at 80% 20%, rgba(242,107,29,.03), transparent),
    #FEFEFE !important;
}

/* Options セクション */
.quinsel-section--options{
  background: #FFFFFF !important;
  border-top: 1px solid var(--q-line-2);
}

/* FAQ */
.quinsel-section--faq{
  background:
    linear-gradient(180deg, #F3F5F9 0%, #F7F8FB 100%) !important;
}

/* CTA セクション：ティールのグロー */
#quinsel-top.quinsel-v2 .quinsel-section--cta{
  background:
    radial-gradient(ellipse 600px 400px at 50% 60%, rgba(13,148,136,.06), transparent),
    radial-gradient(ellipse 400px 300px at 50% 30%, rgba(242,107,29,.03), transparent),
    linear-gradient(180deg, #FFFFFF 0%, #F7F8FB 100%) !important;
}

/* =========================================================
   2) Hero装飾SVG
========================================================= */
.hero-deco{
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-55%);
  width: clamp(200px, 30vw, 400px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: heroDecoFloat 20s ease-in-out infinite alternate;
}
@keyframes heroDecoFloat{
  0%  { transform: translateY(-55%) translate(0, 0); }
  100%{ transform: translateY(-55%) translate(-20px, 15px); }
}
@media (max-width: 768px){
  .hero-deco{
    width: 200px;
    right: -30px;
    opacity: 0.3;
  }
}

/* Hero内のテキストはSVGの上に */
#quinsel-top.quinsel-v2 .quinsel-hero .quinsel-inner{
  position: relative;
  z-index: 1;
}

/* =========================================================
   3) Trust Row：アイコン強化
========================================================= */
#quinsel-top .trust-icon{
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(13,148,136,.08), rgba(13,148,136,.14));
  color: var(--q-teal);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(13,148,136,.08);
}

/* =========================================================
   4) THE PROBLEM：SVGグラフィック
========================================================= */
.organize-graphic{
  border-radius: 14px;
  height: auto !important;
  min-height: 220px;
  padding: 0;
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%) !important;
  border: 1px solid var(--q-line) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.organize-svg{
  width: 100%;
  height: auto;
  max-height: 220px;
  padding: 10px;
}

.organize-graphic::before{
  display: none !important;
}

/* Problem Highlight */
.problem-highlight{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(13,148,136,.06), rgba(13,148,136,.10));
  border: 1px solid rgba(13,148,136,.15);
  color: var(--q-teal);
  font-weight: 700;
  font-size: 13.5px;
}
.problem-highlight__icon{
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =========================================================
   5) ★ MOCK REPORT（レポートモック → 最重要ビジュアル）
========================================================= */
.quinsel-section--navy .quinsel-scan-sample{
  margin-top: 28px;
  border-radius: var(--q-radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 0;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
}

.mock-report{
  position: relative;
  overflow: hidden;
}

.mock-report__inner{
  padding: 24px 28px 20px;
}

.mock-report__header{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mock-report__badge{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .16em;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}

.mock-report__title{
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}

.mock-report__body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 768px){
  .mock-report__body{ grid-template-columns: 1fr; gap: 14px; }
}

.mock-report__section-title{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
}

.mock-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.mock-dot--emotion{ background: var(--ai-emotion); }
.mock-dot--reality{ background: var(--ai-reality); }
.mock-dot--risk{    background: var(--ai-risk); }
.mock-dot--future{  background: var(--ai-future); }
.mock-dot--balance{ background: var(--ai-balance); }

.mock-bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  margin-bottom: 14px;
  overflow: hidden;
}
.mock-bar__fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ai-emotion), color-mix(in srgb, var(--ai-emotion) 60%, white));
  transition: width .8s cubic-bezier(.16,1,.3,1);
}
.mock-bar__fill--blue{
  background: linear-gradient(90deg, var(--ai-reality), color-mix(in srgb, var(--ai-reality) 60%, white));
}
.mock-bar__fill--amber{
  background: linear-gradient(90deg, var(--ai-risk), color-mix(in srgb, var(--ai-risk) 60%, white));
}
.mock-bar__fill--purple{
  background: linear-gradient(90deg, var(--ai-future), color-mix(in srgb, var(--ai-future) 60%, white));
}
.mock-bar__fill--green{
  background: linear-gradient(90deg, var(--ai-balance), color-mix(in srgb, var(--ai-balance) 60%, white));
}

.mock-report__action{
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.20);
  font-size: 12px;
  font-weight: 700;
  color: rgba(16,185,129,.95);
}

.quinsel-section--navy .sample-caption{
  padding: 10px 28px 16px;
  margin: 0;
  font-size: 11px;
  color: rgba(255,255,255,.6);
}

/* =========================================================
   6) BEFORE/AFTER イラスト付き
========================================================= */
.compare-card__illust{
  text-align: center;
  margin-bottom: 16px;
}
.compare-card__illust svg{
  width: 72px;
  height: 72px;
}

/* Compare カードの背景強化 */
.compare-card--before{
  background:
    radial-gradient(ellipse at 80% 20%, rgba(220,38,38,.06), transparent 60%),
    #FEF2F2 !important;
}
.compare-card--after{
  background:
    radial-gradient(ellipse at 20% 80%, rgba(16,163,74,.06), transparent 60%),
    #F0FDF4 !important;
}

/* =========================================================
   7) Stats Bar 強化（背景パターン）
========================================================= */
.quinsel-section--stats{
  background:
    radial-gradient(ellipse 600px 300px at 20% 50%, rgba(13,148,136,.15), transparent),
    radial-gradient(ellipse 600px 300px at 80% 50%, rgba(242,107,29,.10), transparent),
    var(--q-navy) !important;
  position: relative;
}
.quinsel-section--stats::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* =========================================================
   8) Navy Band 強化（THE SYSTEM）
========================================================= */
.quinsel-section--navy{
  background:
    radial-gradient(ellipse 800px 500px at 30% 30%, rgba(13,148,136,.10), transparent),
    radial-gradient(ellipse 600px 400px at 70% 70%, rgba(139,92,246,.08), transparent),
    linear-gradient(180deg, #0C2340 0%, #0F2B4C 40%, #132E4F 100%) !important;
  color: #fff;
  position: relative;
}
.quinsel-section--navy::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: .6;
}

/* =========================================================
   9) Ticker 背景を少し濃く
========================================================= */
.quinsel-ticker-container{
  background:
    linear-gradient(180deg, #EFF2F7 0%, #F4F6FA 100%) !important;
}

/* =========================================================
   10) Flow ステップカードにアクセント
========================================================= */
.flow-step{
  border: 1px solid var(--q-line);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.95), var(--q-white) 60%),
    var(--q-white);
  box-shadow: 0 4px 24px rgba(15,43,76,.06), 0 1px 3px rgba(15,43,76,.08);
}

/* =========================================================
   11) Output カードにサブトルな左ボーダー
========================================================= */
#quinsel-top .output-card{
  border-left: 3px solid var(--q-line);
  transition: border-left-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#quinsel-top .output-card:hover{
  border-left-color: var(--q-teal);
}
#quinsel-top .output-grid .output-card:nth-child(1){
  border-left-color: var(--q-orange);
}
#quinsel-top .output-grid .output-card:nth-child(2){
  border-left-color: var(--ai-reality);
}
#quinsel-top .output-grid .output-card:nth-child(3){
  border-left-color: var(--ai-future);
}

/* =========================================================
   12) Product Cards にアイコン的装飾
========================================================= */
#quinsel-top.quinsel-v2 .p-card{
  border-top: 3px solid transparent;
  transition: border-top-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#quinsel-top.quinsel-v2 .p-card:first-child{
  border-top-color: var(--q-teal);
}
#quinsel-top.quinsel-v2 .p-card:last-child{
  border-top-color: var(--q-orange);
}

/* =========================================================
   13) CTA セクション：枠線を持つカード風に
========================================================= */
#quinsel-top.quinsel-v2 .cta-center{
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 40px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(242,107,29,.04), transparent 60%),
    var(--q-white);
  border: 1px solid var(--q-line);
  box-shadow: 0 12px 48px rgba(15,43,76,.06);
}

/* =========================================================
   14) 全体的な微調整
========================================================= */

/* FAQ の背景にサブトルなパターン */
.quinsel-section--faq{
  position: relative;
}
.quinsel-section--faq::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(15,43,76,.02) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: .5;
}

/* Bridge：もう少し存在感 */
#quinsel-top .quinsel-bridge{
  background: linear-gradient(180deg, rgba(15,43,76,.02), transparent) !important;
}

/* Ticker card のシャドウ強化 */
.ticker-card{
  box-shadow: 0 4px 20px rgba(15,43,76,.06), 0 1px 4px rgba(15,43,76,.06) !important;
}

/* =========================================================
   15) セクション間のデコレーティブ区切り線
========================================================= */
.quinsel-section--navy + .quinsel-section--compare::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--q-teal), var(--q-orange));
  z-index: 1;
}
/* =========================
   QUINSEL V4 – Conversion Patch
   V3.5のCSSに追加する差分
========================= */

/* =========================================================
   1) ★ FLOATING CTA（スクロール追従ボタン）
========================================================= */
.floating-cta{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.floating-cta.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-cta__btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--q-orange), var(--q-orange-2));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow:
    0 8px 32px rgba(242,107,29,.30),
    0 2px 8px rgba(242,107,29,.20);
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.floating-cta__btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(242,107,29,.35),
    0 4px 12px rgba(242,107,29,.25);
}
.floating-cta__btn svg{
  flex-shrink: 0;
}

@media (max-width: 768px){
  .floating-cta{
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .floating-cta__btn{
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 15px;
  }
}

/* =========================================================
   2) ★ LIVE INDICATOR（利用中の数）
========================================================= */
.hero-social-proof{
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.live-indicator{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--q-white);
  border: 1px solid var(--q-line);
  box-shadow: 0 2px 12px rgba(15,43,76,.04);
  font-size: 13px;
  color: var(--q-text-2);
}

.live-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.20);
  animation: livePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse{
  0%, 100%{ box-shadow: 0 0 0 3px rgba(16,185,129,.20); }
  50%{ box-shadow: 0 0 0 6px rgba(16,185,129,.10); }
}

.live-text strong{
  color: var(--q-navy);
  font-weight: 800;
}

/* =========================================================
   3) ★ USER VOICES（利用者の声）
========================================================= */
.quinsel-section--voices{
  background:
    radial-gradient(ellipse 700px 400px at 30% 50%, rgba(13,148,136,.04), transparent),
    linear-gradient(180deg, #F4F6FA, #F7F8FB) !important;
  position: relative;
}

.voices-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
@media (max-width: 900px){
  .voices-grid{ grid-template-columns: 1fr; }
}

.voice-card{
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-white);
  padding: 24px;
  box-shadow: var(--q-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.voice-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--q-shadow-hover);
}

/* 引用マーク装飾 */
.voice-card::before{
  content: "\201C";
  position: absolute;
  top: 16px; right: 20px;
  font-size: 48px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--q-teal);
  opacity: .12;
  line-height: 1;
  pointer-events: none;
}

.voice-card__top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* アバター */
.voice-avatar{
  width: 48px; height: 48px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.voice-avatar img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.voice-avatar__initial{
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 18px;
  color: var(--q-white);
  background: linear-gradient(135deg, var(--q-navy-2), var(--q-navy-3));
}

.voice-meta{
  flex: 1;
}
.voice-name{
  font-weight: 800;
  font-size: 14px;
  color: var(--q-navy);
  margin-bottom: 2px;
}
.voice-attr{
  font-size: 12px;
  color: var(--q-muted);
}

.voice-quote{
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--q-text-2);
}
.voice-quote p{
  margin: 0;
}
.voice-quote strong{
  color: var(--q-navy);
  background: linear-gradient(transparent 60%, rgba(13,148,136,.12) 60%);
  padding: 0 2px;
}

.voice-tag{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.voice-tag__item{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13,148,136,.06);
  border: 1px solid rgba(13,148,136,.12);
  color: var(--q-teal);
}

/* =========================================================
   4) ★ MID-CTA（セクション間の中間ボタン）
========================================================= */
.mid-cta{
  text-align: center;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--q-line-2);
}

.mid-cta__text{
  font-size: 15px;
  font-weight: 700;
  color: var(--q-navy);
  margin-bottom: 16px !important;
}

/* コンパクト版CTAボタン */
.quinsel-btn--compact{
  padding: 14px 32px !important;
  font-size: 15px !important;
}
.quinsel-btn--compact small{
  display: none !important;
}

/* =========================================================
   5) ★ Floating CTA 表示制御 JS（インラインで動くように）
========================================================= */
/* JSが無い場合のフォールバック：
   ページ最下部で見えなくなるように */
.quinsel-section--cta ~ .floating-cta{
  display: none;
}

/* =========================================================
   6) 画像差し替え用ユーティリティ
========================================================= */
/* THE PROBLEM：写真に差し替えた場合 */
.problem-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* 写真がある場合は organize-graphic を非表示に */
.visual-box:has(.problem-photo) .organize-graphic{
  display: none;
}

/* アバターに画像がある場合はイニシャルを隠す */
.voice-avatar:has(img) .voice-avatar__initial{
  display: none;
}
/* =========================
   QUINSEL V4.1 – Feedback Patch
   V4のCSSに追加・上書きする差分
========================= */

/* =========================================================
   1) ★ テキスト階層・メリハリ強化
   → スクショを見ると見出しと本文の差が弱い
========================================================= */

/* 見出し：もっと太く、濃く */
#quinsel-top .quinsel-heading{
  color: #091B33 !important;  /* より深い紺 */
  font-weight: 900 !important;
  letter-spacing: -0.02em;
}

/* セクションラベル（THE PROBLEM等）をもう少し目立たせる */
#quinsel-top .section-label{
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .20em !important;
  color: var(--q-teal) !important;
  opacity: 1 !important;
  padding: 5px 14px !important;
  background: rgba(13,148,136,.08) !important;
  border: 1px solid rgba(13,148,136,.12) !important;
  border-radius: 999px !important;
  display: inline-block !important;
}
#quinsel-top .section-label--light{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.7) !important;
}

/* ── 「QUINSELとは」セクション：ダーク背景上の中央寄せ修正 ── */
#quinsel-top .quinsel-section--about{
  text-align: center !important;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  color: #fff;
}
#quinsel-top .quinsel-section--about .quinsel-heading{
  color: #fff !important;
  text-align: center !important;
}
#quinsel-top .quinsel-section--about .section-label{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.7) !important;
}
#quinsel-top .quinsel-section--about .quinsel-about__lead{
  color: rgba(255,255,255,.82) !important;
}
#quinsel-top .quinsel-section--about .quinsel-about__lead strong{
  color: #fff !important;
}

/* 本文：行間とサイズのバランス */
#quinsel-top .text-box p{
  font-size: 15px;
  line-height: 1.9;
  color: #3D4F63;
}

/* 強調テキスト（em）*/
.text-em{
  font-style: normal;
  color: #091B33;
  font-weight: 700;
}

/* Section sub text */
.section-sub{
  text-align: center;
  font-size: 14px;
  color: var(--q-muted);
  margin-top: -8px;
  margin-bottom: 28px;
}

/* =========================================================
   2) ★ Hero タグライン簡略化
========================================================= */
#quinsel-top .hero-tagline{
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  color: var(--q-teal) !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 6px 18px !important;
  background: rgba(13,148,136,.08) !important;
  border: 1px solid rgba(13,148,136,.12) !important;
  border-radius: 999px !important;
}
#quinsel-top .hero-tagline .separator{
  display: none !important;
}

/* =========================================================
   3) ★ Hero Badges（嘘の利用者数 → 正直なバッジ群）
========================================================= */
.hero-social-proof{
  margin-top: 24px !important;
}

.hero-badges{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--q-white);
  border: 1px solid var(--q-line);
  box-shadow: 0 2px 8px rgba(15,43,76,.04);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--q-text-2);
}
.hero-badge svg{
  color: var(--q-teal);
  flex-shrink: 0;
}

/* Live indicator 非表示（旧V4残骸対策） */
.live-indicator{ display: none !important; }

/* =========================================================
   4) ★ CASE BOXES（ティッカー → 静的ボックスグリッド）
========================================================= */

/* 旧ティッカー非表示 */
.quinsel-ticker-container{ display: none !important; }

.quinsel-section--cases{
  background:
    linear-gradient(180deg, #EFF2F7 0%, #F7F8FB 100%) !important;
  padding: 70px 0 !important;
}

.case-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px){
  .case-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .case-grid{ grid-template-columns: 1fr; }
}

.case-box{
  border-radius: var(--q-radius);
  border: 1px solid var(--q-line);
  background: var(--q-white);
  padding: 24px 20px;
  position: relative;
  box-shadow: var(--q-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.case-box:hover{
  transform: translateY(-3px);
  box-shadow: var(--q-shadow-hover);
  border-color: rgba(220,38,38,.18);
}

.case-box__num{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(220,38,38,.35);
  margin-bottom: 12px;
}

.case-box__icon{
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(220,38,38,.06), rgba(220,38,38,.10));
  color: #DC2626;
  margin-bottom: 14px;
}

.case-box__title{
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #091B33 !important;
  margin: 0 0 8px !important;
  line-height: 1.4;
}

.case-box__desc{
  font-size: 13px;
  line-height: 1.7;
  color: #64748B;
  margin: 0;
}

/* SP only改行 */
.sp-only{ display: none; }
@media (max-width: 768px){
  .sp-only{ display: inline; }
}

/* =========================================================
   5) ★ Voice Card 改善
========================================================= */

/* カード上部にAIカラーのアクセント線 */
.voice-card{
  border-top: 3px solid transparent !important;
}
.voice-card:nth-child(1){ border-top-color: var(--ai-emotion) !important; }
.voice-card:nth-child(2){ border-top-color: var(--ai-reality) !important; }
.voice-card:nth-child(3){ border-top-color: var(--ai-risk) !important; }

/* AIカラーに対応したタグ */
.voice-tag__item--emotion{
  background: rgba(232,67,147,.08) !important;
  border-color: rgba(232,67,147,.15) !important;
  color: #E84393 !important;
}
.voice-tag__item--reality{
  background: rgba(59,130,246,.08) !important;
  border-color: rgba(59,130,246,.15) !important;
  color: #3B82F6 !important;
}
.voice-tag__item--risk{
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.15) !important;
  color: #D97706 !important;
}

/* =========================================================
   6) ★ Trust Row のメリハリ強化
========================================================= */
#quinsel-top .trust-item{
  border: 1px solid var(--q-line) !important;
  background: var(--q-white) !important;
  box-shadow: 0 2px 12px rgba(15,43,76,.04) !important;
  border-radius: var(--q-radius) !important;
}
#quinsel-top .trust-title{
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #091B33 !important;
}
#quinsel-top .trust-body{
  color: #64748B !important;
  font-size: 13px !important;
}

/* =========================================================
   7) ★ Stats Bar のメリハリ
========================================================= */
#quinsel-top .stat-number{
  font-size: clamp(36px, 6vw, 56px) !important;
  font-weight: 900 !important;
  color: #fff !important;
}
#quinsel-top .stat-unit{
  font-size: 0.45em !important;
  font-weight: 700 !important;
  opacity: 0.7 !important;
}
#quinsel-top .stat-label{
  font-size: 12px !important;
  color: rgba(255,255,255,.55) !important;
  letter-spacing: .08em !important;
}

/* =========================================================
   8) ★ Flow Step カードのメリハリ
========================================================= */
#quinsel-top .flow-number{
  width: 28px; height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--q-teal), #0F766E);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
#quinsel-top .flow-title{
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #091B33 !important;
}
#quinsel-top .flow-desc{
  color: #64748B !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}
#quinsel-top .flow-time{
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(13,148,136,.08);
  border: 1px solid rgba(13,148,136,.12);
  color: var(--q-teal);
  font-size: 11.5px;
  font-weight: 700;
}

/* =========================================================
   9) ★ Compare カードのテキストメリハリ
========================================================= */
.compare-label{
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
}
.compare-label--before{ color: #B91C1C !important; }
.compare-label--after{ color: #15803D !important; }

.compare-list li{
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}
.compare-list li span:last-child{
  color: #3D4F63;
}

.compare-icon--before{
  color: #DC2626 !important;
  font-weight: 900 !important;
}
.compare-icon--after{
  color: #16A34A !important;
  font-weight: 900 !important;
}

/* =========================================================
   10) ★ Output カードのテキスト
========================================================= */
#quinsel-top .output-name{
  font-weight: 800 !important;
  font-size: 16px !important;
  color: #091B33 !important;
}
#quinsel-top .output-desc{
  color: #3D4F63 !important;
  font-size: 14px !important;
}

/* =========================================================
   11) ★ Product Cards のメリハリ
========================================================= */
#quinsel-top .p-card h3{
  font-weight: 900 !important;
  color: #091B33 !important;
  font-size: 18px !important;
}
#quinsel-top .p-card p{
  color: #3D4F63 !important;
}
#quinsel-top .p-sub{
  color: #64748B !important;
  font-size: 13px !important;
}
#quinsel-top .p-link{
  font-weight: 800 !important;
}

/* =========================================================
   12) ★ FAQ テキストメリハリ
========================================================= */
#quinsel-top .faq-question span:first-child{
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #091B33 !important;
}
#quinsel-top .faq-answer p{
  color: #3D4F63 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* =========================================================
   13) ★ CTA セクションの見出し強化
========================================================= */
#quinsel-top .cta-center .quinsel-heading{
  font-size: clamp(24px, 4vw, 32px) !important;
  color: #091B33 !important;
}
#quinsel-top .cta-center > p:first-of-type{
  font-size: 15px !important;
  color: #3D4F63 !important;
}
/* =========================
   QUINSEL V4.2 – Image Integration Patch
========================= */

/* =========================================================
   1) ★ HERO 背景画像
========================================================= */
.quinsel-hero{
  position: relative !important;
  overflow: hidden !important;
}

.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: .40;
  filter: grayscale(30%);
}
/* 写真の上にグラデーションオーバーレイ */
.hero-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(240,244,248,.85) 0%, rgba(247,248,251,.92) 50%, rgba(255,255,255,.98) 100%);
  pointer-events: none;
}

/* Hero内のコンテンツを前面に */
.quinsel-hero .quinsel-inner{
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
   2) ★ CASE BOXES 背景画像
========================================================= */
.quinsel-section--cases{
  position: relative !important;
  overflow: hidden !important;
}

.cases-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cases-bg-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .20;
  filter: grayscale(100%);
}
/* 暗めのオーバーレイ（悩みセクションなので少しシリアスに） */
.cases-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(239,242,247,.92) 0%, rgba(247,248,251,.94) 100%);
  pointer-events: none;
}

.quinsel-section--cases > .quinsel-inner{
  position: relative;
  z-index: 1;
}

/* =========================================================
   3) ★ FLOW STEP 写真サムネイル
========================================================= */
.flow-step__photo{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, #EEF1F6 0%, #E2E6ED 100%);
  margin: -24px -20px 16px -20px;
  width: calc(100% + 40px);
  position: relative;
}
.flow-step__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* プレースホルダー（画像がまだない時） */
.flow-step__photo-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EEF1F6 0%, #E2E6ED 100%);
}

/* 画像がある場合はプレースホルダーを隠す */
.flow-step__photo:has(img) .flow-step__photo-placeholder{
  display: none;
}

/* ── 各ステップの写真上部カラーバンド（サービスカラー対応） ── */
.flow-step__photo::after{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 2;
}
/* Step 1: Scan → ディープローズ */
.flow-grid > .flow-step:nth-child(1) .flow-step__photo::after{
  background: linear-gradient(90deg, #5c1a3a, #be185d);
}
/* Step 2: Map → インディゴ */
.flow-grid > .flow-step:nth-child(3) .flow-step__photo::after{
  background: linear-gradient(90deg, #312e81, #6366f1);
}
/* Step 3: Report → オレンジ */
.flow-grid > .flow-step:nth-child(5) .flow-step__photo::after{
  background: linear-gradient(90deg, #E55A0B, #F47521);
}

/* flow-step にパディングを調整して写真が端まで広がるように */
#quinsel-top .flow-step{
  padding: 24px 20px !important;
  overflow: hidden !important;
}

@media (max-width: 900px){
  .flow-step__photo{
    aspect-ratio: 2 / 1;
  }
}

/* =========================================================
   4) ★ FOUNDER MESSAGE セクション
========================================================= */
.quinsel-section--founder{
  background:
    radial-gradient(ellipse 600px 400px at 20% 50%, rgba(13,148,136,.03), transparent),
    #FFFFFF !important;
  padding: 80px 0 !important;
}

.founder-card{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
  max-width: 820px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(13,148,136,.04), transparent 50%),
    var(--q-snow);
  border: 1px solid var(--q-line);
  box-shadow: var(--q-shadow);
}

@media (max-width: 768px){
  .founder-card{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 24px;
    text-align: center;
  }
}

/* 写真エリア */
.founder-photo{
  width: 200px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #EEF1F6, #E2E6ED);
  flex-shrink: 0;
  border: 1px solid var(--q-line-2);
}
.founder-photo .founder-portrait{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-photo__placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder-photo:has(.founder-portrait) .founder-photo__placeholder{
  display: none;
}

@media (max-width: 768px){
  .founder-photo{
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 16px;
  }
}

/* テキストエリア */
.founder-body .section-label{
  margin-bottom: 12px;
}

.founder-title{
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #091B33 !important;
  margin: 0 0 18px !important;
  line-height: 1.5;
}

.founder-quote{
  margin: 0;
  padding: 0;
}
.founder-quote p{
  font-size: 14.5px;
  line-height: 1.9;
  color: #3D4F63;
  margin: 0 0 12px;
}
.founder-quote p:last-child{
  margin-bottom: 0;
}
.founder-quote strong{
  color: #091B33;
  font-weight: 800;
}

.founder-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--q-line);
}
@media (max-width: 768px){
  .founder-meta{
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

.founder-name{
  font-weight: 800;
  font-size: 14px;
  color: #091B33;
}
.founder-role{
  font-size: 12px;
  color: var(--q-muted);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(13,148,136,.06);
  border: 1px solid rgba(13,148,136,.10);
}

/* =========================================================
   5) 画像あしらいユーティリティ
========================================================= */

/* 角丸＋薄い影（写真に使う共通クラス） */
.img-rounded{
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(15,43,76,.08);
}

/* 手書き風の装飾丸（写真の角に重ねるオプション） */
.img-accent-circle{
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 999px;
  border: 2px dashed rgba(13,148,136,.25);
  pointer-events: none;
  z-index: 2;
}
.img-accent-circle--tl{ top: -12px; left: -12px; }
.img-accent-circle--br{ bottom: -12px; right: -12px; }
/* =========================================================
   13) ★ CTA セクションの見出し強化
========================================================= */
#quinsel-top .cta-center .quinsel-heading{
  font-size: clamp(24px, 4vw, 32px) !important;
  color: #091B33 !important;
}
#quinsel-top .cta-center > p:first-of-type{
  font-size: 15px !important;
  color: #3D4F63 !important;
}
/* =========================
   QUINSEL – Readability Patch（Navy帯の可読性改善）
   いまのCSSの一番下に追記
========================= */

/* Navy帯：見出しを必ず白へ（クラス付け忘れでも事故らない） */
#quinsel-top.quinsel-v2 .quinsel-section--navy .quinsel-heading,
#quinsel-top.quinsel-v2 .quinsel-section--navy h1,
#quinsel-top.quinsel-v2 .quinsel-section--navy h2,
#quinsel-top.quinsel-v2 .quinsel-section--navy h3{
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}

/* Navy帯：本文（p）が暗いままになるのを強制上書き */
#quinsel-top.quinsel-v2 .quinsel-section--navy p,
#quinsel-top.quinsel-v2 .quinsel-section--navy li{
  color: rgba(255,255,255,.82) !important;
}

/* Navy帯：サブテキスト類（薄すぎ対策） */
#quinsel-top.quinsel-v2 .quinsel-section--navy .section-sub,
#quinsel-top.quinsel-v2 .quinsel-section--navy .sample-caption{
  color: rgba(255,255,255,.68) !important;
}

/* Navy帯：リンクの視認性 */
#quinsel-top.quinsel-v2 .quinsel-section--navy a{
  color: rgba(255,255,255,.92) !important;
  text-decoration-color: rgba(255,255,255,.35);
}

/* Navy帯：カード内の薄い文字を少しだけ濃く（必要な場合だけ） */
#quinsel-top.quinsel-v2 .quinsel-section--navy .mock-report__badge{
  color: rgba(255,255,255,.82) !important;
  border-color: rgba(255,255,255,.16) !important;
}
#quinsel-top.q
/* ============================================================
   FOUNDER MESSAGE — 折りたたみ（「続きを読む」）
   ※ 既存の quinsel-top.css の末尾に追加してください
============================================================= */

/* 折りたたみ部分: 初期状態は非表示 */
.founder-more{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition: max-height .5s cubic-bezier(.4,0,.2,1),
              opacity .4s ease,
              margin .4s ease;
  margin-top:0;
}

/* 開いた状態 */
.founder-more.is-open{
  max-height:600px;
  opacity:1;
  margin-top:8px;
}

/* 「続きを読む」ボタン */
.founder-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  padding:8px 0;
  background:none;
  border:none;
  cursor:pointer;
  color:#0D9488;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.02em;
  transition: color .2s;
}
.founder-toggle:hover{
  color:#0F766E;
}

/* 矢印アイコン回転 */
.founder-toggle__icon{
  transition: transform .3s ease;
}
.founder-toggle[aria-expanded="true"] .founder-toggle__icon{
  transform: rotate(180deg);
}