/* ============================================
   5つのLAB（縦に並べて全部見せる。写真は左右交互）
   ============================================ */
#labs.labs {
  position: relative;
  z-index: 1;
  --lab-ink: #0f1222;
  --lab-sub: #474c63;
  --lab-line: rgba(15, 18, 34, .08);
  padding: clamp(72px, 10vw, 120px) 0;
  color: var(--lab-ink);
  background:
    radial-gradient(45% 30% at 95% 0%, rgba(139, 92, 246, .1), transparent 70%),
    radial-gradient(40% 30% at 0% 100%, rgba(14, 165, 233, .1), transparent 70%),
    #fbfbfe;
}
.lab-alias { position: absolute; top: 0; left: 0; width: 0; height: 0; scroll-margin-top: 90px; }
#labs .container { position: relative; }

/* 見出し */
.labs-head { text-align: center; max-width: 720px; margin: 0 auto clamp(26px, 4vw, 36px); }
.labs-tag { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font-en-display, sans-serif); letter-spacing: .28em; color: var(--lab-sub); }
.labs-tag i { width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0ea5e9, #f43f5e, #10b981, #eab308, #8b5cf6); }
.labs-title { margin: 16px 0 12px; font-family: var(--font-jp-display, sans-serif); font-weight: 900; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.25; color: var(--lab-ink); }
.labs-title span { background: linear-gradient(100deg, #0ea5e9 0%, #8b5cf6 55%, #f43f5e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.labs-desc { font-size: clamp(14.5px, 1.6vw, 16px); line-height: 1.9; color: var(--lab-sub); font-weight: 500; }

/* 目次（LAB名・分野・料金で比べられる） */
.labs-index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
.labs-index a {
  --t-c: #0ea5e9;
  position: relative; display: block; text-decoration: none; padding: 14px 16px 13px; border-radius: 16px;
  border: 1px solid var(--lab-line); background: #fff; color: var(--lab-ink);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.labs-index a::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--t-c); }
.labs-index a::after { content: "↓"; position: absolute; right: 14px; bottom: 12px; font-size: 13px; color: var(--t-c); opacity: .6; transition: transform .3s; }
.labs-index a:hover { transform: translateY(-2px); border-color: var(--t-c); box-shadow: 0 16px 30px -22px var(--t-c); }
.labs-index a:hover::after { transform: translateY(3px); opacity: 1; }
.labs-index b { display: block; font: 700 15px/1.2 var(--font-en-display, sans-serif); letter-spacing: .04em; color: var(--t-c); }
.labs-index small { display: block; margin: 5px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--lab-ink); }
.labs-index em { display: block; font-style: normal; font: 700 12px/1.3 var(--font-en-display, sans-serif); color: var(--lab-sub); }

/* LABごとの色 */
.labs-index a[data-lab="post"], .lab-card[data-lab="post"] { --t-c: #f43f5e; --lab-c: #f43f5e; --lab-soft: rgba(244, 63, 94, .09); --lab-tint: #fff5f7; }
.labs-index a[data-lab="join"], .lab-card[data-lab="join"] { --t-c: #10b981; --lab-c: #059669; --lab-soft: rgba(16, 185, 129, .1); --lab-tint: #f2fcf8; }
.labs-index a[data-lab="web"],  .lab-card[data-lab="web"]  { --t-c: #d97706; --lab-c: #d97706; --lab-soft: rgba(234, 179, 8, .13); --lab-tint: #fffbeb; }
.labs-index a[data-lab="app"],  .lab-card[data-lab="app"]  { --t-c: #8b5cf6; --lab-c: #7c3aed; --lab-soft: rgba(139, 92, 246, .1); --lab-tint: #f8f5ff; }

/* LABカード */
.labs-list { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); }
.lab-card {
  --lab-c: #0284c7; --lab-soft: rgba(14, 165, 233, .1); --lab-tint: #f2f9fe;
  position: relative; overflow: hidden; scroll-margin-top: 90px;
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 44px); align-items: center;
  padding: clamp(20px, 3vw, 36px); border-radius: 26px; border: 1px solid var(--lab-line);
  background: linear-gradient(135deg, var(--lab-tint) 0%, #fff 55%);
  box-shadow: 0 1px 2px rgba(15, 18, 34, .05), 0 30px 60px -44px rgba(15, 18, 34, .5);
}
.lab-card::before { /* 大きな透かし文字 */
  content: attr(data-mark); position: absolute; right: -6px; bottom: -22px; z-index: 0; pointer-events: none;
  font: 800 clamp(64px, 9vw, 120px)/1 var(--font-en-display, sans-serif); letter-spacing: -.03em; color: var(--lab-c); opacity: .05; white-space: nowrap;
}
.lab-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lab-c); }
.lab-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.lab-card:nth-child(even) .lab-visual { order: 2; }
.lab-card > * { position: relative; z-index: 1; }

.lab-visual { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 3.6; background: var(--lab-soft); box-shadow: 0 20px 40px -28px rgba(15, 18, 34, .6); }
.lab-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lab-num { position: absolute; left: 12px; top: 12px; font: 700 12px/1 var(--font-en-display, sans-serif); letter-spacing: .14em; color: #fff; background: var(--lab-c); border-radius: 999px; padding: 6px 10px; }

.lab-body { min-width: 0; }
.lab-kicker { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--font-en-display, sans-serif); letter-spacing: .18em; color: var(--lab-c); }
.lab-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lab-c); box-shadow: 0 0 10px var(--lab-c); }
.lab-pain { margin: 12px 0 4px; font-size: 14px; font-weight: 700; color: var(--lab-sub); }
.lab-catch { margin: 0 0 10px; font-family: var(--font-jp-display, sans-serif); font-weight: 900; font-size: clamp(23px, 2.8vw, 32px); line-height: 1.35; color: var(--lab-ink); }
.lab-catch mark { background: linear-gradient(transparent 62%, var(--lab-soft) 62%); color: inherit; padding: 0 .06em; }
.lab-lead { font-size: 15px; line-height: 1.9; color: var(--lab-sub); font-weight: 500; margin-bottom: 14px; }

.lab-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; }
.lab-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--lab-c); background: #fff; border: 1px solid var(--lab-soft); border-radius: 999px; padding: 6px 12px; box-shadow: 0 4px 10px -8px var(--lab-c); }
.lab-chips li::before { content: "✓"; font-size: 11px; }

.lab-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; }
.lab-points li { padding: 14px 14px 13px; border-radius: 14px; background: rgba(255, 255, 255, .85); border: 1px solid var(--lab-line); }
.lab-points i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--lab-soft); color: var(--lab-c); margin-bottom: 10px; }
.lab-points i svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lab-points b { display: block; font-size: 14.5px; font-weight: 800; color: var(--lab-ink); margin-bottom: 4px; line-height: 1.45; }
.lab-points span { display: block; font-size: 13px; line-height: 1.7; color: var(--lab-sub); }
.lab-points .is-pick { border: 2px solid var(--lab-c); }
.lab-points em { font-style: normal; font: 700 16px/1.3 var(--font-en-display, sans-serif); color: var(--lab-c); display: block; margin-bottom: 4px; }
.lab-points .pick-tag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--lab-c); border-radius: 999px; padding: 2px 7px; vertical-align: 2px; }

/* JOIN: 求人広告との比較 */
.lab-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 0 0 14px; }
.lab-compare div { padding: 12px 14px; border-radius: 14px; text-align: center; }
.lab-compare .before { background: #f4f4f6; color: var(--lab-sub); }
.lab-compare .after { background: var(--lab-soft); color: var(--lab-c); }
.lab-compare small { display: block; font-size: 11.5px; font-weight: 700; }
.lab-compare b { display: block; font: 800 20px/1.3 var(--font-jp-display, sans-serif); margin: 2px 0; }
.lab-compare .before b { text-decoration: line-through; text-decoration-color: rgba(244, 63, 94, .6); }
.lab-compare span { font-size: 12px; }
.lab-compare .arr { font-size: 20px; color: var(--lab-c); }

/* APP: 流れ */
.lab-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lab-flow span { padding: 8px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--lab-line); font-size: 13px; font-weight: 800; }
.lab-flow .hub { background: var(--lab-c); color: #fff; border-color: transparent; }
.lab-flow i { font-style: normal; color: var(--lab-c); font-weight: 800; }

.lab-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: 16px; border-top: 1px dashed var(--lab-line); }
.lab-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.lab-price span { font-size: 11px; font-weight: 700; color: var(--lab-sub); letter-spacing: .06em; }
.lab-price strong { font: 700 clamp(20px, 2.2vw, 25px)/1.2 var(--font-en-display, sans-serif); color: var(--lab-ink); }
.lab-price small { font-size: 11px; color: #9ca3af; font-weight: 600; }
.lab-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lab-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; text-decoration: none;
  font: 700 14px/1 var(--font-jp-display, sans-serif); color: #fff; background: var(--lab-c);
  box-shadow: 0 14px 28px -16px var(--lab-c); transition: transform .25s;
}
.lab-btn:hover { transform: translateY(-2px); }
.lab-btn--ghost { color: var(--lab-ink); background: #fff; border: 1px solid var(--lab-line); box-shadow: none; }
.lab-btn--ghost:hover { border-color: var(--lab-c); color: var(--lab-c); }
.lab-note { margin-top: 12px; font-size: 13px; color: var(--lab-sub); }
.lab-note a, .lab-sample { color: var(--lab-c); font-weight: 700; text-decoration: none; }
.lab-sample { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; }
.lab-note a:hover, .lab-sample:hover { text-decoration: underline; }

.labs-cta { margin-top: 26px; text-align: center; font-size: 14.5px; color: var(--lab-sub); }
.labs-cta a { color: var(--lab-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
  .lab-points { grid-template-columns: 1fr; }
  .lab-card, .lab-card:nth-child(even) { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .lab-card:nth-child(even) .lab-visual { order: 0; }
}
@media (max-width: 760px) {
  .labs-index { display: flex; overflow-x: auto; gap: 8px; margin: 0 -16px 22px; padding: 2px 16px 6px; scrollbar-width: none; }
  .labs-index::-webkit-scrollbar { display: none; }
  .labs-index a { flex: 0 0 auto; min-width: 140px; padding: 12px 14px; }
  .lab-card, .lab-card:nth-child(even) { grid-template-columns: 1fr; padding: 16px; border-radius: 22px; }
  .lab-visual { aspect-ratio: 16 / 10; }
  .lab-points { grid-template-columns: 1fr; gap: 8px; }
  .lab-points li { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: start; padding: 12px; }
  .lab-points i { grid-row: span 2; margin: 0; }
  .lab-points li > em { grid-column: 2; }
  .lab-foot { flex-direction: column; align-items: stretch; }
  .lab-actions { flex-direction: column; }
  .lab-btn { justify-content: center; }
  .lab-compare b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .labs-index a, .lab-btn { transition: none; }
}

/* ============================================
   相談の流れ・よくある質問
   ============================================ */
#faq.qa { position: relative; z-index: 1; padding: clamp(64px, 9vw, 110px) 0; background: #fff; color: #0f1222; }
.qa-head { text-align: center; max-width: 680px; margin: 0 auto clamp(26px, 4vw, 38px); }
.qa-tag { display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1 var(--font-en-display, sans-serif); letter-spacing: .28em; color: #5b6075; }
.qa-tag i { width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #f43f5e); }
.qa-title { margin: 16px 0 12px; font-family: var(--font-jp-display, sans-serif); font-weight: 900; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.25; color: #0f1222; }
.qa-title span { background: linear-gradient(100deg, #0ea5e9 0%, #8b5cf6 55%, #f43f5e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.qa-desc { font-size: 15px; line-height: 1.9; color: #5b6075; }

.qa-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 clamp(28px, 4vw, 40px); padding: 0; counter-reset: qa; }
.qa-steps li { position: relative; padding: 18px 18px 16px; border-radius: 18px; background: #f6f7fb; border: 1px solid rgba(15, 18, 34, .06); }
.qa-steps li:not(:last-child)::after {
  content: ""; position: absolute; right: -9px; top: 50%; width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid #8b5cf6; border-right: 2px solid #8b5cf6; z-index: 1;
}
.qa-steps span { display: block; font: 700 11px/1 var(--font-en-display, sans-serif); letter-spacing: .16em; color: #8b5cf6; margin-bottom: 8px; }
.qa-steps b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 6px; color: #0f1222; }
.qa-steps small { display: block; font-size: 13px; line-height: 1.7; color: #5b6075; }

.qa-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
.qa-item { border-radius: 16px; border: 1px solid rgba(15, 18, 34, .08); background: #fff; transition: border-color .25s, box-shadow .25s; }
.qa-item[open] { border-color: rgba(139, 92, 246, .45); box-shadow: 0 14px 30px -22px rgba(139, 92, 246, .7); }
.qa-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  font-size: 15px; font-weight: 700; line-height: 1.5; color: #0f1222;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary::before { content: "Q"; flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 13px/1 var(--font-en-display, sans-serif); color: #fff; background: linear-gradient(135deg, #0ea5e9, #8b5cf6); }
.qa-item summary::after { content: "+"; margin-left: auto; font: 400 22px/1 sans-serif; color: #8b5cf6; transition: transform .25s; }
.qa-item[open] summary::after { transform: rotate(45deg); }
.qa-item summary:focus-visible { outline: 3px solid #8b5cf6; outline-offset: 2px; border-radius: 16px; }
.qa-item p { margin: 0; padding: 0 18px 18px 56px; font-size: 14px; line-height: 1.9; color: #4a4f66; }

.qa-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 16px; margin-top: clamp(26px, 4vw, 36px); }
.qa-btn { display: inline-flex; align-items: center; padding: 15px 30px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(100deg, #0ea5e9, #8b5cf6); box-shadow: 0 16px 30px -16px rgba(139, 92, 246, .8); transition: transform .25s; }
.qa-btn:hover { transform: translateY(-2px); }
.qa-cta span { font-size: 13px; color: #5b6075; }

@media (max-width: 900px) {
  .qa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa-steps li:nth-child(2)::after { display: none; }
  .qa-list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .qa-steps { grid-template-columns: 1fr; gap: 8px; }
  .qa-steps li { padding: 14px 16px; }
  .qa-steps li::after { display: none; }
  .qa-item summary { font-size: 14px; padding: 14px 14px; }
  .qa-item p { padding: 0 14px 16px 52px; font-size: 13.5px; }
}
.lab-card > .lab-alias { position: absolute; top: 0; left: 0; width: 0; height: 0; }

/* ===== 5 LABS 磨き込み（2026-10-17） ===== */
/* レイアウト: キャラクターを大きく、透かし文字はボタンに重ならない右上へ */
.lab-card { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 44px); align-items: center; }
.lab-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.lab-card::before { top: 14px; right: 26px; bottom: auto; left: auto; opacity: .06; font-size: clamp(56px, 7vw, 96px); }
.lab-visual { aspect-ratio: 3 / 4; box-shadow: 0 30px 50px -30px var(--lab-c); }
.lab-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(15,18,34,.18)); pointer-events: none; }
.lab-visual img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.lab-card:hover .lab-visual img { transform: scale(1.04); }
.lab-num { left: 14px; top: 14px; font-size: 13px; padding: 7px 12px; box-shadow: 0 6px 16px -6px var(--lab-c); }

/* 文字: お悩みを吹き出しに、説明は濃く大きく */
.lab-pain { display: inline-block; position: relative; margin: 14px 0 12px; padding: 9px 16px 9px 40px; border-radius: 14px 14px 14px 4px;
  background: var(--lab-soft); color: var(--lab-ink); font-size: 15px; font-weight: 700; line-height: 1.55; }
.lab-pain::before { content: "Q"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%;
  background: var(--lab-c); color: #fff; font: 800 12px/20px var(--font-en-display, sans-serif); text-align: center; }
.lab-catch { font-size: clamp(25px, 3vw, 36px); margin-bottom: 12px; }
.lab-catch mark { background: linear-gradient(transparent 60%, var(--lab-soft) 60%) no-repeat 0 0 / 100% 100%; }
.lab-lead { font-size: 16px; color: #2b3045; line-height: 1.9; word-break: auto-phrase; }
.lab-chips li { font-size: 13px; }
.lab-points li { position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.lab-points li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lab-c); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.lab-points li:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -20px var(--lab-c); border-color: var(--lab-soft); }
.lab-points li:hover::before { transform: scaleX(1); }
.lab-points b { font-size: 15px; }
.lab-points span { font-size: 14px; color: #3f4458; word-break: auto-phrase; }
.lab-price span { font-size: 12px; color: #374151; }
.lab-price small { font-size: 12px; color: #6b7280; }
.lab-btn { padding-left: 24px; padding-right: 24px; }

/* アニメーション: カードが入ると、画像→本文が順に立ち上がる（JS有効時のみ） */
.labs-anim .lab-card { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.labs-anim .lab-card .lab-visual { opacity: 0; transform: translateX(-40px) scale(.96); transition: opacity .8s ease .15s, transform 1s cubic-bezier(.2,.7,.2,1) .15s; }
.labs-anim .lab-card:nth-child(even) .lab-visual { transform: translateX(40px) scale(.96); }
.labs-anim .lab-card .lab-body > * , .labs-anim .lab-card .lab-points li { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.labs-anim .lab-card .lab-catch mark { background-size: 0% 100%; transition: background-size .9s cubic-bezier(.2,.7,.2,1) .9s; }
.labs-anim .lab-card::before { transform: translateX(40px); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) .2s, opacity 1.4s ease .2s; }
.labs-anim .lab-card.is-in, .labs-anim .lab-card.is-in .lab-visual,
.labs-anim .lab-card.is-in .lab-body > *, .labs-anim .lab-card.is-in .lab-points li { opacity: 1; transform: none; }
.labs-anim .lab-card.is-in::before { opacity: .06; transform: none; }
.labs-anim .lab-card.is-in .lab-catch mark { background-size: 100% 100%; }
.labs-anim .lab-card.is-in .lab-body > :nth-child(1) { transition-delay: .25s; }
.labs-anim .lab-card.is-in .lab-body > :nth-child(2) { transition-delay: .35s; }
.labs-anim .lab-card.is-in .lab-body > :nth-child(3) { transition-delay: .45s; }
.labs-anim .lab-card.is-in .lab-body > :nth-child(4) { transition-delay: .55s; }
.labs-anim .lab-card.is-in .lab-body > :nth-child(5) { transition-delay: .62s; }
.labs-anim .lab-card.is-in .lab-body > :nth-child(6) { transition-delay: .68s; }
.labs-anim .lab-card.is-in .lab-body > :nth-child(n+7) { transition-delay: .8s; }
.labs-anim .lab-card.is-in .lab-points li:nth-child(1) { transition-delay: .75s; }
.labs-anim .lab-card.is-in .lab-points li:nth-child(2) { transition-delay: .85s; }
.labs-anim .lab-card.is-in .lab-points li:nth-child(3) { transition-delay: .95s; }
/* ホバー時はすぐ動くよう遅延を解除 */
.labs-anim .lab-card.is-in .lab-points li:hover { transition-delay: 0s; }

@media (max-width: 1100px) and (min-width: 761px) {
  .lab-card, .lab-card:nth-child(even) { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lab-card, .lab-card:nth-child(even) { grid-template-columns: 1fr; }
  .lab-visual { aspect-ratio: 4 / 3.4; }
  .lab-card::before { font-size: 44px; top: 10px; right: 14px; }
  .lab-pain { font-size: 14px; }
  .lab-lead { font-size: 15px; }
  .labs-anim .lab-card .lab-visual, .labs-anim .lab-card:nth-child(even) .lab-visual { transform: translateY(20px); }
}
.labs-anim .lab-card.is-in .lab-points li:hover { transform: translateY(-3px); }
.lab-kicker { display: flex; }
.lab-pain { display: block; width: fit-content; max-width: 100%; }
.lab-catch { word-break: auto-phrase; }
.lab-card::before { opacity: .05; }
.labs-anim .lab-card.is-in::before { opacity: .05; }
/* 番号バッジ: キャラクター名に重ならないよう、画像の上辺に乗せる */
.lab-visual { overflow: visible; }
.lab-visual img, .lab-visual::after { border-radius: 20px; }
.lab-num { top: -13px; left: 16px; z-index: 2; font-size: 12px; padding: 7px 13px; }
@media (max-width: 760px) { .lab-card { padding-top: 26px; } }
/* 読みやすさ: 細い字（400）をやめ、濃く・少し大きく */
.lab-kicker { font-size: 13px; }
.lab-pain { font-size: 16px; }
.lab-lead { font-size: 16.5px; font-weight: 500; color: #1f2335; letter-spacing: .01em; line-height: 1.85; }
.lab-chips li { font-size: 13.5px; }
.lab-points b { font-size: 16px; margin-bottom: 6px; }
.lab-points span { font-size: 14.5px; font-weight: 500; color: #2a2f45; line-height: 1.75; letter-spacing: .01em; }
.lab-price span { font-size: 13px; color: #1f2335; }
.lab-price small { font-size: 13px; color: #4b5563; }
.lab-compare small, .lab-compare span { font-size: 13px; }
.lab-note { font-size: 14px; color: #2a2f45; }
@media (max-width: 760px) {
  .lab-pain { font-size: 15px; }
  .lab-lead { font-size: 15.5px; }
  .lab-points span { font-size: 14px; }
}
/* 一番伝えたいこと（キャッチ）を主役に */
.lab-catch { font-size: clamp(28px, 3.3vw, 42px); line-height: 1.3; letter-spacing: .01em; margin: 4px 0 14px; }
.lab-catch mark { color: var(--lab-c); background-image: linear-gradient(transparent 68%, var(--lab-soft) 68%); }
@media (max-width: 760px) { .lab-catch { font-size: 26px; } }
@media (max-width: 760px) {
  .lab-flow { gap: 6px; }
  .lab-flow span { font-size: 12.5px; padding: 7px 10px; }
}

/* FLOW & FAQ 読みやすさ強化 */
.qa-tag { font-size: 13px; color: #374151; }
.qa-desc { font-size: 17px; color: #2a2f45; font-weight: 500; }
.qa-steps { gap: 14px; }
.qa-steps li { padding: 22px 22px 20px; background: #f4f6fb; }
.qa-steps span { font-size: 13px; margin-bottom: 10px; color: #7c3aed; }
.qa-steps b { font-size: 19px; margin-bottom: 8px; }
.qa-steps small { font-size: 15px; font-weight: 500; line-height: 1.75; color: #2a2f45; word-break: auto-phrase; }
.qa-item summary { font-size: 17px; line-height: 1.5; color: #0f1222; }
.qa-item summary::before { width: 30px; height: 30px; font-size: 14px; }
.qa-item p { position: relative; font-size: 16px; font-weight: 500; line-height: 1.9; color: #2a2f45; padding: 4px 22px 22px 64px; word-break: auto-phrase; }
.qa-item p::before { content: "A"; position: absolute; left: 20px; top: 4px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font: 700 14px/1 var(--font-en-display, sans-serif); color: #7c3aed; background: rgba(139, 92, 246, .12); }
.qa-item summary:hover { color: #6d28d9; }
.qa-btn { font-size: 17px; padding: 17px 34px; }
.qa-cta span { font-size: 15px; color: #2a2f45; font-weight: 500; }
@media (max-width: 760px) {
  .qa-desc { font-size: 15.5px; }
  .qa-steps b { font-size: 17px; }
  .qa-steps small { font-size: 14.5px; }
  .qa-item summary { font-size: 16px; padding: 16px 14px; }
  .qa-item p { font-size: 15px; padding: 2px 14px 18px 58px; }
  .qa-item p::before { left: 14px; }
}
.qa-prices { display: grid; grid-template-columns: max-content max-content; gap: 4px 18px; margin: 10px 0; padding: 12px 16px; border-radius: 12px; background: #f6f4ff; }
.qa-prices span { color: #2a2f45; }
.qa-prices b { font-weight: 800; color: #0f1222; }

/* 料金とボタンを大きく目立たせる */
.lab-foot { padding-top: 20px; gap: 16px 24px; }
.lab-price { align-items: center; gap: 6px 14px; padding: 12px 20px; border-radius: 16px; background: var(--lab-soft); }
.lab-price span { font-size: 14px; font-weight: 800; color: var(--lab-ink); }
.lab-price strong { font-size: clamp(28px, 2.8vw, 36px); font-weight: 800; color: var(--lab-c); letter-spacing: .01em; }
.lab-price small { font-size: 13.5px; font-weight: 700; color: #374151; }
.lab-btn { padding: 18px 30px; font-size: 16.5px; box-shadow: 0 18px 32px -14px var(--lab-c); }
.lab-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -14px var(--lab-c); }
.lab-btn--ghost { box-shadow: none; border-width: 1.5px; }
@media (max-width: 760px) {
  .lab-price { justify-content: center; }
  .lab-price strong { font-size: 28px; }
  .lab-btn { padding: 17px 24px; font-size: 16px; }
}
/* 料金＋ボタンを1枚のパネルにまとめて収まりよく */
.lab-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 22px;
  margin-top: 4px; padding: 18px 22px; border-top: 0; border-radius: 20px; background: var(--lab-soft); }
.lab-price { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label note" "amt amt"; align-items: baseline; gap: 2px 10px; padding: 0; background: none; border-radius: 0; }
.lab-price span { grid-area: label; }
.lab-price small { grid-area: note; }
.lab-price strong { grid-area: amt; line-height: 1.15; white-space: nowrap; }
.lab-actions { flex-wrap: nowrap; gap: 10px; }
.lab-btn { padding: 17px 26px; justify-content: center; white-space: nowrap; }
.lab-btn--ghost { background: #fff; }
@media (max-width: 1360px) {
  .lab-foot { grid-template-columns: 1fr; }
  .lab-actions { display: grid; grid-template-columns: 1.4fr 1fr; }
}
@media (max-width: 760px) {
  .lab-foot { padding: 16px; }
  .lab-price { justify-items: start; }
  .lab-actions { grid-template-columns: 1fr; }
}
/* 特長チップを大きく */
.lab-chips { gap: 8px 10px; margin-bottom: 18px; }
.lab-chips li { font-size: 15.5px; padding: 9px 16px; gap: 7px; border-width: 1.5px; }
.lab-chips li::before { font-size: 13px; }
@media (max-width: 760px) { .lab-chips li { font-size: 14.5px; padding: 8px 14px; } }
/* LAB見出しの説明文をPCでは1行に */
@media (min-width: 900px) {
  .labs-head { max-width: none; }
  .labs-desc { white-space: nowrap; }
}
@media (max-width: 760px) { .lab-price strong { white-space: normal; font-size: 26px; } }

/* LAB目次を目立たせる: LABカラーで塗ったカード */
.labs-index { gap: 14px; }
.labs-index a { padding: 20px 20px 18px; border: 0; border-radius: 20px; color: #fff;
  background: linear-gradient(140deg, var(--t-c) 0%, color-mix(in srgb, var(--t-c) 72%, #000) 100%);
  box-shadow: 0 18px 30px -18px var(--t-c); overflow: hidden; }
.labs-index a::before { left: auto; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.14); }
.labs-index a::after { content: "↓"; right: 16px; bottom: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--t-c); opacity: 1; font-size: 15px; font-weight: 800; }
.labs-index a:hover { transform: translateY(-4px); box-shadow: 0 24px 36px -18px var(--t-c); }
.labs-index b { font-size: 19px; color: #fff; letter-spacing: .03em; }
.labs-index small { margin: 8px 0 10px; font-size: 17px; font-weight: 800; color: #fff; }
.labs-index em { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.92); padding-right: 36px; }
@media (max-width: 760px) {
  .labs-index a { min-width: 168px; padding: 16px 16px 14px; }
  .labs-index b { font-size: 17px; }
  .labs-index small { font-size: 15.5px; }
  .labs-index em { font-size: 14px; }
}
@media (max-width: 760px) { .lab-price strong { font-size: 23px; word-break: auto-phrase; } }
/* 料金表記が長いWEB LABは、料金の下にボタンを並べる */
.lab-card[data-lab="web"] .lab-foot { grid-template-columns: 1fr; }
.lab-card[data-lab="web"] .lab-actions { display: grid; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 760px) { .lab-card[data-lab="web"] .lab-actions { grid-template-columns: 1fr; } }

/* ===== 整理（2026-10-17）: 悩み→答え／できること／料金と行動 の3段に ===== */
.lab-kicker { display: none; }
.lab-card::before, .labs-anim .lab-card.is-in::before { display: none; }
.lab-pain { margin-top: 0; }
.lab-catch { margin-bottom: 10px; }
.lab-lead { margin-bottom: 22px; }
.lab-points { gap: 0; margin-bottom: 22px; border-top: 1px solid var(--lab-line); border-bottom: 1px solid var(--lab-line); }
.lab-points li { background: none; border: 0; border-radius: 0; padding: 16px 18px; }
.lab-points li + li { border-left: 1px solid var(--lab-line); }
.lab-points li:first-child { padding-left: 0; }
.lab-points li::before { display: none; }
.lab-points li:hover, .labs-anim .lab-card.is-in .lab-points li:hover { transform: none; box-shadow: none; }
.lab-points i { display: inline-grid; width: 26px; height: 26px; margin: 0 8px 8px 0; vertical-align: middle; }
.lab-points b { display: inline; vertical-align: middle; }
.lab-points span { margin-top: 2px; }
.lab-points .is-pick { border: 0; background: var(--lab-soft); border-radius: 12px; }
.lab-foot { grid-template-columns: auto auto; justify-content: space-between; padding: 16px 22px; }
.lab-actions, .lab-card[data-lab="web"] .lab-actions { display: flex; }
.lab-card[data-lab="web"] .lab-foot { grid-template-columns: auto auto; }
.lab-btn { padding: 15px 22px; font-size: 15.5px; }
.lab-price strong { font-size: clamp(26px, 2.4vw, 30px); }

/* 特長: キャラクターの上に浮かぶカード */
.lab-chips--float { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: block; pointer-events: none; z-index: 2; }
.lab-chips--float li { position: absolute; display: block; padding: 10px 16px 11px; border-radius: 14px; border: 0;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 30px -12px rgba(15,18,34,.35); color: var(--lab-ink); font-size: 14.5px; font-weight: 800; line-height: 1.35; white-space: nowrap;
  animation: chipFloat 5s ease-in-out infinite; }
.lab-chips--float li::before { display: none; }
.lab-chips--float small { display: block; margin-bottom: 3px; font: 800 11px/1 var(--font-en-display, sans-serif); letter-spacing: .14em; color: var(--lab-c); }
.lab-chips--float li:nth-child(1) { top: 36%; left: -18px; }
.lab-chips--float li:nth-child(2) { top: 54%; right: -18px; animation-delay: -1.6s; }
.lab-chips--float li:nth-child(3) { top: 72%; left: -10px; animation-delay: -3.2s; }
@keyframes chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* 出現演出: 画像のあとにポンと出る */
.labs-anim .lab-card .lab-chips--float li { opacity: 0; scale: .85; transition: opacity .5s ease, scale .6s cubic-bezier(.3,1.5,.5,1); }
.labs-anim .lab-card.is-in .lab-chips--float li { opacity: 1; scale: 1; }
.labs-anim .lab-card.is-in .lab-chips--float li:nth-child(1) { transition-delay: .7s; }
.labs-anim .lab-card.is-in .lab-chips--float li:nth-child(2) { transition-delay: .85s; }
.labs-anim .lab-card.is-in .lab-chips--float li:nth-child(3) { transition-delay: 1s; }
@media (prefers-reduced-motion: reduce) { .lab-chips--float li { animation: none; } }

@media (max-width: 1100px) {
  .lab-foot, .lab-card[data-lab="web"] .lab-foot { grid-template-columns: 1fr; }
  .lab-actions, .lab-card[data-lab="web"] .lab-actions { display: grid; grid-template-columns: 1.4fr 1fr; }
  .lab-chips--float li { font-size: 13px; padding: 8px 12px 9px; }
}
@media (max-width: 760px) {
  .lab-points { border-bottom: 0; }
  .lab-points li, .lab-points li:first-child { padding: 14px 0; }
  .lab-points li + li { border-left: 0; border-top: 1px solid var(--lab-line); }
  .lab-points li { display: block; }
  .lab-points .is-pick { padding: 14px 12px; }
  .lab-actions, .lab-card[data-lab="web"] .lab-actions { grid-template-columns: 1fr; }
  .lab-chips--float li { font-size: 12.5px; padding: 7px 11px 8px; border-radius: 12px; }
  .lab-chips--float small { font-size: 9.5px; }
  .lab-chips--float li:nth-child(1) { top: 30%; left: 8px; }
  .lab-chips--float li:nth-child(2) { top: 50%; right: 8px; }
  .lab-chips--float li:nth-child(3) { top: 70%; left: 8px; }
}
.lab-catch mark { white-space: nowrap; }
@media (max-width: 760px) {
  .lab-visual { aspect-ratio: 1 / 1.08; }
  .lab-chips--float li:nth-child(1) { top: 38%; }
  .lab-chips--float li:nth-child(2) { top: 56%; }
  .lab-chips--float li:nth-child(3) { top: 74%; }
}
@media (max-width: 760px) { .lab-body { padding-top: 14px; } }
.qa-prices-note { grid-column: 1 / -1; margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: #4b5563; }
.qa-prices-note { display: block; margin: 0 0 10px; }

/* LAB下の相談CTAを目立たせる */
.labs-cta-box { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: clamp(28px, 4vw, 44px); padding: clamp(26px, 3.6vw, 40px) clamp(24px, 4vw, 52px); border-radius: 26px; color: #fff;
  background: linear-gradient(110deg, #0ea5e9 0%, #8b5cf6 55%, #f43f5e 100%); box-shadow: 0 30px 60px -30px rgba(139, 92, 246, .8); }
.labs-cta-box::before, .labs-cta-box::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); pointer-events: none; }
.labs-cta-box::before { width: 260px; height: 260px; right: 18%; top: -150px; }
.labs-cta-box::after { width: 180px; height: 180px; left: -60px; bottom: -110px; }
.labs-cta-text { position: relative; }
.labs-cta-lead { margin: 0; font-size: 16px; font-weight: 700; opacity: .92; }
.labs-cta-main { margin: 4px 0 8px; font-family: var(--font-jp-display, sans-serif); font-weight: 900; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.25; }
.labs-cta-main span { background: linear-gradient(transparent 62%, rgba(255,255,255,.35) 62%); padding: 0 .08em; }
.labs-cta-sub { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.7; opacity: .95; }
.labs-cta-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 20px 36px; border-radius: 999px;
  background: #fff; color: #6d28d9; font-weight: 900; font-size: 18px; text-decoration: none; box-shadow: 0 16px 30px -14px rgba(15,18,34,.5); transition: transform .25s, box-shadow .25s; }
.labs-cta-btn span { transition: transform .25s; }
.labs-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -14px rgba(15,18,34,.55); }
.labs-cta-btn:hover span { transform: translateX(4px); }
@media (max-width: 760px) {
  .labs-cta-box { flex-direction: column; align-items: stretch; text-align: center; padding: 26px 20px; }
  .labs-cta-btn { justify-content: center; padding: 18px 24px; font-size: 17px; }
  .labs-cta-sub { font-size: 14px; }
}

/* フォームの受付範囲 */
.form-scope{max-width:680px;margin:0 auto 18px;padding:6px 18px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);text-align:left}.form-scope p{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.9)}.form-scope p+p{border-top:1px dashed rgba(255,255,255,.16)}.form-scope .fs-ico{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;font-size:13px;font-weight:900;color:#fff}.form-scope .fs-ok .fs-ico{background:#10b981}.form-scope .fs-ng .fs-ico{background:#f43f5e}.form-scope b{display:block;font-size:13px;font-weight:800;letter-spacing:.04em}.form-scope .fs-ok b{color:#34d399}.form-scope .fs-ng b{color:#fb7185}@media(max-width:640px){.form-scope{padding:4px 14px}.form-scope p{font-size:14.5px}}

/* ===== スマホ最適化（2026-10-17） ===== */
@media (max-width: 760px) {
  /* お問い合わせ: 興味のあるサービスを2列にして縦長を解消 */
  #contact .checkbox-group { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  #contact .checkbox-group .check-label { min-height: 44px; margin: 0; }
  /* フッター: 指で押しやすい高さに */
  .site-footer .footer-links a, .site-footer .footer-legal a { display: inline-block; padding: 10px 0; }
  .site-footer .footer-address a { display: inline-block; padding: 6px 0; }
  /* 小さすぎる文字を読めるサイズに */
  .lab-chips--float small { font-size: 10.5px; }
  #services .service-brand { font-size: 11px; }
  .member-role { font-size: 11.5px !important; }
  .member-keywords li { font-size: 11.5px !important; }
  .member-solve, .member-tagline { font-size: 13px !important; }
  .pj-label, .pj-badge { font-size: 11px !important; }
  .lab-points .pick-tag { font-size: 11px; }
}

/* 見出しを言葉の切れ目で折り返す */
h1,h2,h3,h4{word-break:auto-phrase}
@media (max-width: 760px) {
  #contact .checkbox-group .check-label { padding: 10px 10px !important; gap: 8px !important; font-size: 14px !important; white-space: nowrap; }
  #contact .checkbox-group .check-label:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 359px) { #contact .checkbox-group .check-label { white-space: normal; font-size: 13px !important; } }

/* LABの専門サイト（ドロップダウン）の説明 */
.nav-dropdown-note { margin: 0 0 6px; padding: 4px 12px 8px; font-size: 12.5px; line-height: 1.6; color: #6b7280; border-bottom: 1px solid rgba(15,18,34,.08); }

/* 各LABサイトから来た人への案内 */
.from-lab { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 900; width: min(760px, calc(100% - 32px));
  padding: 16px 18px; border-radius: 18px; background: #fff; color: #1f2335; box-shadow: 0 24px 50px -18px rgba(15,18,34,.45); border: 1px solid rgba(15,18,34,.08);
  animation: fromLabIn .5s cubic-bezier(.2,.7,.2,1) both; }
.from-lab[hidden] { display: none; }
.from-lab-inner { display: flex; align-items: center; gap: 14px 18px; }
.from-lab-text { margin: 0; font-size: 14.5px; line-height: 1.75; word-break: auto-phrase; }
.from-lab-text b { color: #6d28d9; }
.from-lab-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.from-lab-link { display: inline-flex; align-items: center; padding: 11px 16px; border-radius: 999px; background: linear-gradient(100deg, #0ea5e9, #8b5cf6); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
.from-lab-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(15,18,34,.12); background: #fff; color: #4b5563; font-size: 18px; cursor: pointer; }
@keyframes fromLabIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 760px) {
  .from-lab { bottom: 84px; padding: 14px; }
  .from-lab-inner { flex-direction: column; align-items: stretch; }
  .from-lab-text { font-size: 14px; }
  .from-lab-actions { justify-content: space-between; }
  .from-lab-link { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .from-lab { animation: none; } }

.hero-subtitle-inner{word-break:auto-phrase}
/* おすすめタグの文字を白に */
.lab-points .pick-tag { color: #fff !important; -webkit-text-fill-color: #fff !important; }